/*
 * Cyprus ATC SMS - Main Stylesheet
 * Version: 2.0.0
 * Description: Consolidated styles for the Safety Management System
 * All inline styles from individual pages have been moved here.
 */

/* ========================================
   VARIABLES & CUSTOM PROPERTIES
   ======================================== */
:root {
    /* Colors */
    --primary-blue: #3B82F6;
    --primary-blue-dark: #2563EB;
    --primary-blue-light: #60A5FA;

    --secondary-slate: #1E293B;
    --secondary-slate-light: #334155;

    --success-green: #10B981;
    --warning-yellow: #F59E0B;
    --danger-red: #EF4444;
    --info-blue: #3B82F6;

    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;

    /* Z-index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ========================================
   GLOBAL STYLES
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--gray-900);
    background-color: var(--gray-50);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   LOGIN PAGE
   ======================================== */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 50%, #1e40af 100%);
    background-attachment: fixed;
}

.login-container {
    max-width: 28rem;
    width: 100%;
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-logo-circle {
    display: inline-block;
    padding: 1rem;
    background-color: white;
    border-radius: 9999px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.login-logo-svg {
    width: 4rem;
    height: 4rem;
    color: #2563EB;
}

.login-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.login-subtitle {
    color: #93c5fd;
    font-size: 0.95rem;
}

.login-card {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    overflow: hidden;
}

.login-card-header {
    background: linear-gradient(to right, #2563EB, #1d4ed8);
    padding: 1.5rem;
    text-align: center;
}

.login-card-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin: 0;
}

.login-card-header p {
    color: #bfdbfe;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.login-card-body {
    padding: 2rem;
}

.login-error {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: #FEF2F2;
    border-left: 4px solid var(--danger-red);
    color: #991B1B;
    border-radius: var(--radius-md);
}

.login-error p { font-weight: 500; }

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.login-field {
    display: flex;
    flex-direction: column;
}

.login-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.login-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    font-size: 1rem;
    font-family: var(--font-family);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

.login-btn {
    width: 100%;
    background: linear-gradient(to right, #2563EB, #1d4ed8);
    color: white;
    padding: 0.75rem;
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px rgba(37,99,235,0.25);
    font-family: var(--font-family);
}

.login-btn:hover {
    background: linear-gradient(to right, #1d4ed8, #1e40af);
    box-shadow: 0 6px 12px rgba(37,99,235,0.35);
    transform: translateY(-1px);
}

.login-btn:active { transform: translateY(0); }

.login-card-footer {
    background-color: var(--gray-50);
    padding: 1rem 2rem;
    border-top: 1px solid var(--gray-100);
    text-align: center;
}

.login-demo-title {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin-bottom: 0.5rem;
}

.login-demo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.login-demo-item {
    background: white;
    padding: 0.5rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
    font-size: 0.75rem;
}

.login-demo-role { font-weight: 600; color: var(--gray-800); }
.login-demo-cred { color: var(--gray-500); }

.login-footer {
    text-align: center;
    margin-top: 1.5rem;
    color: #93c5fd;
    font-size: 0.875rem;
}

.login-footer p { margin-top: 0.25rem; }

/* ========================================
   STATUS BADGES
   ======================================== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 9999px;
    white-space: nowrap;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

/* Status badges */
.badge-draft { background-color: #F3F4F6; color: #4B5563; border: 1px solid #D1D5DB; }
.badge-pending-review { background-color: #FEF3C7; color: #92400E; border: 1px solid #F59E0B; }
.badge-published { background-color: #D1FAE5; color: #065F46; border: 1px solid #10B981; }
.badge-under-investigation { background-color: #DBEAFE; color: #1E40AF; border: 1px solid #3B82F6; }
.badge-incomplete { background-color: #FFEDD5; color: #9A3412; border: 1px solid #F97316; }
.badge-requires-info { background-color: #EDE9FE; color: #5B21B6; border: 1px solid #8B5CF6; }
.badge-complete { background-color: #A7F3D0; color: #064E3B; border: 1px solid #059669; }
.badge-archived { background-color: #F3F4F6; color: #6B7280; border: 1px solid #9CA3AF; }

/* Severity badges */
.badge-low { background-color: #D1FAE5; color: #065F46; border: 1px solid #10B981; }
.badge-medium { background-color: #FEF3C7; color: #92400E; border: 1px solid #F59E0B; }
.badge-high { background-color: #FEE2E2; color: #991B1B; border: 1px solid #EF4444; }
.badge-critical { background-color: #FEE2E2; color: #991B1B; border: 1px solid #DC2626; font-weight: 800; }

/* Priority badges */
.badge-priority-low { background-color: #D1FAE5; color: #065F46; border: 1px solid #10B981; }
.badge-priority-medium { background-color: #FEF3C7; color: #92400E; border: 1px solid #F59E0B; }
.badge-priority-high { background-color: #FEE2E2; color: #991B1B; border: 1px solid #EF4444; }
.badge-priority-urgent { background-color: #FEE2E2; color: #991B1B; border: 1px solid #DC2626; animation: pulse-urgent 2s infinite; }

@keyframes pulse-urgent {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ========================================
   BUTTONS
   ======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1.5;
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background-color: var(--primary-blue); color: white; }
.btn-primary:hover:not(:disabled) { background-color: var(--primary-blue-dark); box-shadow: var(--shadow-md); }
.btn-secondary { background-color: var(--gray-200); color: var(--gray-700); }
.btn-secondary:hover:not(:disabled) { background-color: var(--gray-300); }
.btn-success { background-color: var(--success-green); color: white; }
.btn-success:hover:not(:disabled) { background-color: #059669; }
.btn-danger { background-color: var(--danger-red); color: white; }
.btn-danger:hover:not(:disabled) { background-color: #DC2626; }
.btn-sm { padding: 0.375rem 0.75rem; font-size: var(--font-size-xs); }
.btn-lg { padding: 0.75rem 1.5rem; font-size: var(--font-size-base); }

/* ========================================
   CARDS
   ======================================== */
.card {
    background-color: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.card-header { padding: 1.5rem; border-bottom: 1px solid var(--gray-200); }
.card-body { padding: 1.5rem; }
.card-footer { padding: 1rem 1.5rem; background-color: var(--gray-50); border-top: 1px solid var(--gray-200); }

/* Stats Cards */
.stat-card {
    background-color: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

.stat-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.stat-card.stat-blue { border-left-color: var(--primary-blue); }
.stat-card.stat-green { border-left-color: var(--success-green); }
.stat-card.stat-yellow { border-left-color: var(--warning-yellow); }
.stat-card.stat-red { border-left-color: var(--danger-red); }

.stat-value { font-size: var(--font-size-3xl); font-weight: 700; color: var(--gray-800); line-height: 1; }
.stat-label { font-size: var(--font-size-sm); font-weight: 500; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.05em; }

/* ========================================
   FORM ELEMENTS
   ======================================== */
.form-group { margin-bottom: 1.5rem; }

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--gray-700);
}

.form-control {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--gray-900);
    background-color: white;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus { outline: none; border-color: var(--primary-blue); box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
.form-control:disabled { background-color: var(--gray-100); cursor: not-allowed; }

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

/* ========================================
   ALERTS
   ======================================== */
.alert {
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: var(--radius-lg);
    border-left: 4px solid;
}

.alert-success { background-color: #D1FAE5; border-left-color: var(--success-green); color: #065F46; }
.alert-info { background-color: #DBEAFE; border-left-color: var(--info-blue); color: #1E40AF; }
.alert-warning { background-color: #FEF3C7; border-left-color: var(--warning-yellow); color: #92400E; }
.alert-danger { background-color: #FEE2E2; border-left-color: var(--danger-red); color: #991B1B; }

/* ========================================
   TABLES
   ======================================== */
.table-container { overflow-x: auto; border-radius: var(--radius-xl); }

.table { width: 100%; border-collapse: collapse; }
.table thead { background-color: var(--gray-50); }
.table th { padding: 0.75rem 1.5rem; text-align: left; font-size: var(--font-size-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-500); }
.table td { padding: 1rem 1.5rem; border-top: 1px solid var(--gray-200); font-size: var(--font-size-sm); }
.table tbody tr:hover { background-color: var(--gray-50); }

/* ========================================
   MODALS
   ======================================== */
.modal-backdrop {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: var(--z-modal-backdrop);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}

.modal {
    background-color: white; border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl); max-width: 600px; width: 100%;
    max-height: 90vh; overflow-y: auto; z-index: var(--z-modal);
}

.modal-header { padding: 1.5rem; border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-size: var(--font-size-xl); font-weight: 700; color: var(--gray-900); }
.modal-body { padding: 1.5rem; }
.modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; }

/* ========================================
   SPINNER
   ======================================== */
.spinner {
    display: inline-block; width: 1rem; height: 1rem;
    border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; animation: spinner-rotate 0.75s linear infinite;
}

@keyframes spinner-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spinner-lg { width: 2rem; height: 2rem; border-width: 3px; }

/* ========================================
   TOAST NOTIFICATIONS
   ======================================== */
.toast-container {
    position: fixed; top: 5rem; right: 1rem;
    z-index: var(--z-tooltip);
    display: flex; flex-direction: column; gap: 0.5rem;
}

.toast {
    background-color: white; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl); padding: 1rem 1.25rem;
    min-width: 300px; max-width: 400px; border-left: 4px solid;
    display: flex; align-items: center; gap: 0.75rem;
    animation: toast-slide-in 0.3s ease;
}

@keyframes toast-slide-in {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.toast.toast-success { border-left-color: var(--success-green); }
.toast.toast-error { border-left-color: var(--danger-red); }
.toast.toast-warning { border-left-color: var(--warning-yellow); }
.toast.toast-info { border-left-color: var(--info-blue); }

/* ========================================
   AVATARS
   ======================================== */
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-dark));
    color: white; font-weight: 600;
}

.avatar-sm { width: 2rem; height: 2rem; font-size: var(--font-size-xs); }
.avatar-md { width: 2.5rem; height: 2.5rem; font-size: var(--font-size-sm); }
.avatar-lg { width: 3rem; height: 3rem; font-size: var(--font-size-base); }

/* ========================================
   BREADCRUMBS
   ======================================== */
.breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: var(--font-size-sm); color: var(--gray-500); margin-bottom: 1rem; }
.breadcrumb-item { display: flex; align-items: center; gap: 0.5rem; }
.breadcrumb-item:not(:last-child)::after { content: '/'; color: var(--gray-400); }
.breadcrumb-item a { color: var(--primary-blue); text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }

/* ========================================
   EMPTY STATE
   ======================================== */
.empty-state { text-align: center; padding: 3rem 1rem; }
.empty-state-icon { width: 4rem; height: 4rem; color: var(--gray-400); margin: 0 auto 1rem; }
.empty-state-title { font-size: var(--font-size-lg); font-weight: 600; color: var(--gray-900); margin-bottom: 0.5rem; }
.empty-state-text { font-size: var(--font-size-sm); color: var(--gray-500); }

/* ========================================
   DATATABLES CUSTOM STYLING
   ======================================== */
.dataTables_wrapper { padding: 1rem 0; }
.dataTables_filter input { margin-left: 0.5rem; padding: 0.5rem; border: 1px solid var(--gray-300); border-radius: var(--radius-md); }
.dataTables_length select { padding: 0.5rem; border: 1px solid var(--gray-300); border-radius: var(--radius-md); margin: 0 0.5rem; }
.dataTables_length { padding: 0.5rem 0.75rem; font-size: 0.875rem; }
.dataTables_info { padding: 0.75rem 0.75rem; font-size: 0.875rem; color: #6B7280; }
.dataTables_filter { padding: 0.5rem 0.75rem; }
.dataTables_paginate { padding: 0.5rem 0.75rem; }

/* ========================================
   ACCESSIBILITY
   ======================================== */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

*:focus-visible { outline: 2px solid var(--primary-blue); outline-offset: 2px; }
button:focus-visible, a:focus-visible { outline-offset: 4px; }

/* ========================================
   AUDIT LOG (was inline in audit-log.php)
   ======================================== */
.change-old { background: #FEE2E2; color: #991B1B; padding: 1px 4px; border-radius: 3px; font-size: 0.8rem; }
.change-new { background: #D1FAE5; color: #065F46; padding: 1px 4px; border-radius: 3px; font-size: 0.8rem; }
.change-field { font-weight: 600; color: #4B5563; font-size: 0.8rem; }

/* ========================================
   BLOG (was inline in blog.php)
   ======================================== */
.blog-card { transition: transform 0.2s, box-shadow 0.2s; }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.12); }
.blog-card.inactive-post { opacity: 0.65; border: 2px dashed #D1D5DB; }
.blog-card.inactive-post:hover { opacity: 0.85; }
.attachment-preview { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: #F3F4F6; border-radius: 8px; }

/* ========================================
   MANAGER DASHBOARD (was inline in manager-dashboard.php)
   ======================================== */
.color-box { width: 20px; height: 20px; display: inline-block; border: 1px solid #333; margin-right: 5px; }
.status-green  { background: #10B981; }
.status-yellow { background: #FBBF24; }
.status-orange { background: #F97316; }
.status-red    { background: #EF4444; }
.status-pink   { background: #EC4899; }
.status-blue   { background: #3B82F6; }
.status-gray   { background: #9CA3AF; }

/* ========================================
   MASTER OVERVIEW (was inline in manager-master-overview.php)
   ======================================== */
.master-table { font-size: 11px; width: 100%; }
.master-table thead th {
    background: #4472C4 !important; color: white !important;
    padding: 12px 8px !important; font-weight: bold !important;
    white-space: nowrap !important; border: 1px solid #3461A8 !important;
}
.master-table td { padding: 8px 6px; border: 1px solid #ddd; white-space: nowrap; font-size: 12px; }
.master-table tbody tr:hover { background: #F3F4F6; }

/* ========================================
   OVERDUE BADGE (shared between reports.php and master-overview)
   Compact, properly padded, consistent across all views.
   ======================================== */
.overdue-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    background: #DC2626;
    border-radius: 4px;
    line-height: 1.4;
    vertical-align: middle;
    white-space: nowrap;
}

/* Legacy cell backgrounds removed — use .badge classes instead */

/* Legacy severity cell backgrounds removed — use .badge classes instead */

.occ-a { background: #DC2626; color: white; font-weight: bold; }
.occ-b { background: #F97316; color: white; }
.occ-c { background: #FBBF24; }
.occ-d { background: #60A5FA; }
.occ-e { background: #10B981; color: white; }
.compact-cell { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }

table.dataTable thead th { background: #4472C4 !important; color: white !important; }
table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after { color: white !important; }

/* ========================================
   REPORT DETAIL (was inline in report-detail.php)
   ======================================== */
.detail-label {
    font-weight: 600; color: #4B5563; margin-bottom: 0.25rem;
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
}
.detail-value { color: #1F2937; margin-bottom: 1rem; }

/* ========================================
   SIDEBAR (was inline in sidebar.php)
   ======================================== */
#sidebar { transition: width 0.3s ease, transform 0.3s ease; }
.sidebar-link { transition: all 0.2s ease; }
.toggle-icon { transition: transform 0.3s ease; }

@media (max-width: 767px) {
    #sidebar { transform: translateX(-100%); width: 280px !important; }
    #sidebar.sidebar-mobile-open { transform: translateX(0) !important; }
}

@media (min-width: 768px) {
    .sidebar-collapsed { width: 80px !important; }
    .sidebar-collapsed .sidebar-text { display: none !important; }
    .sidebar-collapsed .sidebar-link {
        justify-content: center !important;
        padding-left: 0 !important; padding-right: 0 !important;
        position: relative;
    }
    .sidebar-collapsed .sidebar-link:hover::after {
        content: attr(title); position: absolute; left: 100%; top: 50%;
        transform: translateY(-50%); margin-left: 10px; padding: 8px 12px;
        background: #1F2937; color: white; border-radius: 6px;
        white-space: nowrap; z-index: 1000; font-size: 12px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    .sidebar-collapsed .toggle-icon { transform: rotate(180deg); }
}

/* ========================================
   MOBILE MENU & OVERLAY
   ======================================== */
.mobile-menu-button {
    display: none;
    position: fixed; top: 1rem; left: 1rem; z-index: 1001;
    background: #3B82F6; color: white; padding: 0.75rem;
    border-radius: 0.5rem; border: none; cursor: pointer;
    box-shadow: 0 4px 12px rgba(59,130,246,0.3);
    transition: all 0.2s;
}
.mobile-menu-button:hover { background: #2563EB; box-shadow: 0 6px 16px rgba(59,130,246,0.4); }
.mobile-menu-button:active { transform: scale(0.95); }

.sidebar-overlay {
    display: none; position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 999;
    backdrop-filter: blur(2px);
}
.sidebar-overlay.active { display: block; animation: fadeIn 0.3s; }

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ========================================
   MOBILE RESPONSIVE (< 768px)
   ======================================== */
@media (max-width: 768px) {
    .mobile-menu-button { display: block; }

    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    }
    .sidebar.active { transform: translateX(0); }

    main {
        margin-left: 0 !important;
        padding: 5rem 1rem 1rem 1rem !important;
        width: 100%;
    }

    header { padding-left: 4rem !important; }

    h1 { font-size: 1.5rem !important; line-height: 2rem !important; }
    h2 { font-size: 1.25rem !important; line-height: 1.75rem !important; }
    h3 { font-size: 1.125rem !important; line-height: 1.5rem !important; }

    .overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { min-width: 600px; font-size: 0.875rem; }
    table th, table td { padding: 0.5rem 0.75rem !important; }

    .grid { grid-template-columns: 1fr !important; }
    .md\:grid-cols-2, .md\:grid-cols-3, .md\:grid-cols-4,
    .lg\:grid-cols-2, .lg\:grid-cols-3, .lg\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }

    .btn-mobile-full,
    form button[type="submit"],
    form button[type="button"] { width: 100%; margin-bottom: 0.5rem; }

    .card, .bg-white { padding: 1rem !important; margin-bottom: 1rem; }
    .stat-card { padding: 1rem !important; }
    .filter-form { grid-template-columns: 1fr !important; gap: 0.75rem; }

    .modal-content {
        width: 100% !important; height: 100% !important;
        max-width: 100% !important; border-radius: 0 !important; margin: 0 !important;
    }

    .modal { max-width: 100%; margin: 0.5rem; }
    .table { font-size: var(--font-size-xs); }
    .table th, .table td { padding: 0.5rem; }
    .toast-container { left: 1rem; right: 1rem; }
    .toast { min-width: auto; max-width: 100%; }

    canvas { max-width: 100%; height: auto !important; }

    .dataTables_wrapper { font-size: 0.875rem; }
    .dataTables_filter input { width: 100% !important; margin-bottom: 0.5rem; }

    .hide-mobile { display: none !important; }
    .sidebar nav a { padding: 1rem !important; font-size: 1rem; }
    label { font-size: 0.875rem; margin-bottom: 0.25rem; }

    input[type="text"], input[type="email"], input[type="password"],
    input[type="date"], input[type="time"], input[type="number"],
    select, textarea { font-size: 16px !important; padding: 0.75rem !important; }

    .badge, .tag { font-size: 0.75rem; padding: 0.25rem 0.5rem; }
    .alert { padding: 0.75rem !important; font-size: 0.875rem; }
    footer { padding: 1rem !important; font-size: 0.75rem; }

    /* Login responsive */
    .login-title { font-size: 1.5rem !important; }
    .login-card-body { padding: 1.5rem; }

    a, button, input, select { min-height: 44px; min-width: 44px; }
}

/* ========================================
   TABLET RESPONSIVE (768px - 1024px)
   ======================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .sidebar { width: 200px; }
    main { margin-left: 200px !important; padding: 1.5rem !important; }
    .lg\:grid-cols-3, .lg\:grid-cols-4 { grid-template-columns: repeat(2,1fr) !important; }
    table { font-size: 0.9375rem; }
}

/* ========================================
   LANDSCAPE PHONE
   ======================================== */
@media (max-width: 768px) and (orientation: landscape) {
    main { padding-top: 3.5rem !important; }
    .sidebar { width: 200px; }
    .mobile-menu-button { padding: 0.5rem; }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .sidebar, .mobile-menu-button, .sidebar-overlay,
    header, footer, .no-print, button { display: none !important; }
    main { margin: 0 !important; padding: 0 !important; width: 100%; }
    .bg-white { box-shadow: none !important; }
    body { background-color: white; }
    .card { box-shadow: none; border: 1px solid var(--gray-300); }
    table { page-break-inside: avoid; }
}

/* ========================================
   REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   HIGH CONTRAST
   ======================================== */
@media (prefers-contrast: high) {
    .sidebar { border-right: 2px solid #000; }
    button { border: 2px solid currentColor; }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.mobile-only { display: none; }
.desktop-only { display: block; }

@media (max-width: 768px) {
    .mobile-only { display: block; }
    .desktop-only { display: none; }
}

.text-responsive { font-size: clamp(0.875rem, 2vw, 1rem); }
.heading-responsive { font-size: clamp(1.25rem, 4vw, 2rem); }

/* Safe area for notched devices */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
    .sidebar { padding-left: max(1rem, env(safe-area-inset-left)); }
}
/* ========================================
   COLOR UTILITY OVERRIDES (v2.1)
   --------------------------------------
   These utilities are used in our PHP/HTML but are NOT in the precompiled
   Tailwind bundle (tailwind.min.css). Defining them here avoids a Tailwind
   recompile and fixes invisible buttons/badges on the Hazard Register,
   Change Register, and related pages. Append-only block — do not edit
   above this point unless you know what you're doing.
   ======================================== */

/* --- Amber (Hazard pages) --- */
.bg-amber-50  { background-color: #FFFBEB !important; }
.bg-amber-100 { background-color: #FEF3C7 !important; }
.bg-amber-200 { background-color: #FDE68A !important; }
.bg-amber-500 { background-color: #F59E0B !important; }
.bg-amber-600 { background-color: #D97706 !important; }
.bg-amber-700 { background-color: #B45309 !important; }
.text-amber-100 { color: #FEF3C7 !important; }
.text-amber-600 { color: #D97706 !important; }
.text-amber-700 { color: #B45309 !important; }
.text-amber-800 { color: #92400E !important; }
.text-amber-900 { color: #78350F !important; }
.border-amber-300 { border-color: #FCD34D !important; }
.border-amber-400 { border-color: #FBBF24 !important; }
.border-amber-500 { border-color: #F59E0B !important; }
.hover\:bg-amber-700:hover { background-color: #B45309 !important; }
.hover\:border-amber-500:hover { border-color: #F59E0B !important; }
.from-amber-500 { --tw-gradient-from: #F59E0B; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(245,158,11,0)); }
.to-amber-600   { --tw-gradient-to: #D97706; }

/* --- Indigo (status badges: MITIGATION IN PROGRESS, IMPLEMENTED) --- */
.bg-indigo-50  { background-color: #EEF2FF !important; }
.bg-indigo-100 { background-color: #E0E7FF !important; }
.bg-indigo-600 { background-color: #4F46E5 !important; }
.text-indigo-600 { color: #4F46E5 !important; }
.text-indigo-700 { color: #4338CA !important; }
.text-indigo-800 { color: #3730A3 !important; }
.border-indigo-400 { border-color: #818CF8 !important; }

/* --- Blue gradient stops (Change Notification tile) --- */
/* `bg-blue-500` / `bg-blue-600` are in the bundle, but the gradient utilities
   `from-blue-500` / `to-blue-600` are not, so the blue header band on the
   Change tile rendered as transparent. Defining them here mirrors how the
   other tiles (red/green/orange/purple/indigo/amber) work. */
.from-blue-500 { --tw-gradient-from: #3B82F6; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59,130,246,0)); }
.to-blue-600   { --tw-gradient-to: #2563EB; }
/* `text-blue-100` is missing too, so the tile's subtitle was illegible. */
.text-blue-100 { color: #DBEAFE !important; }
/* --- Global fixed footer ---
   The compiled tailwind.min.css doesn't ship `fixed`, `bottom-0`, `left-0`,
   `right-0`, or `z-50` as utilities, so the footer needs its positioning
   defined here. Same pattern as other "fix missing utility" rules above. */
#appFooter {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
}

/* Spacer that sits below page content so the last bit isn't hidden behind
   the fixed footer. Sized to safely clear the footer at all viewport widths,
   including when the footer text wraps onto a second line on narrow screens
   (footer height = py-2 padding + 1–2 lines of text + border). */
.app-footer-spacer {
    height: 3.5rem;
}

/* Pages whose <main> contains the page grid (e.g. blog cards) need the
   main element itself to leave room at the bottom — the fixed footer would
   otherwise sit on top of the last row of content.

   Why !important: the inline Tailwind `p-8` class and the responsive
   `padding: 1.5rem !important` rules above all set a bottom padding that's
   too small to clear the footer. We need to win regardless. The footer is
   ~3.5rem tall so a bit more keeps the last row visually clear of it. */
main {
    padding-bottom: 5rem !important;
}

/* --- Notification bell badge ---
   Tailwind utilities for arbitrary values (`-top-0.5`, `min-w-[1.1rem]`,
   `text-[10px]`, `ring-2 ring-white`) aren't in the compiled bundle, so
   the badge has its own dedicated rule. Anchored to the top-right corner
   of the bell button, which has `position: relative`. */
.notif-bell-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background-color: #DC2626; /* red-600 */
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px #ffffff; /* white ring so it pops against the header */
    pointer-events: none;          /* don't intercept clicks meant for the bell */
    letter-spacing: -0.02em;       /* tighten "99+" so it fits */
}
/* ============================================================
 * Occurrence-code (i) tooltip — used by form_mor1.php, form_vor.php
 * Renders a small info icon next to each A/B/C section header.
 * On hover or keyboard focus, a panel reveals the EU 2015/1018
 * code definitions for that section, extracted from the official
 * MOR1/VOR PDFs. Pure CSS — no inline JS, CSP-compliant.
 * ============================================================ */
.occ-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    color: #2563eb;            /* blue-600 */
    cursor: help;
    position: relative;        /* anchor for the panel */
    vertical-align: middle;
    border-radius: 50%;
    outline-offset: 2px;
}
.occ-info:hover,
.occ-info:focus {
    color: #1d4ed8;            /* blue-700 */
    outline: none;
}
.occ-info-panel {
    /* Hidden by default; revealed on hover or focus of the (i) icon */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease-out;

    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;

    width: 360px;
    max-width: 92vw;
    max-height: 60vh;
    overflow-y: auto;

    background: #ffffff;
    color: #1f2937;            /* gray-800 */
    border: 1px solid #e5e7eb; /* gray-200 */
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15), 0 8px 10px -6px rgba(0,0,0,0.10);
    padding: 12px 14px;

    font-size: 12px;
    line-height: 1.45;
    font-weight: 400;
    text-align: left;
    cursor: auto;
}
.occ-info:hover .occ-info-panel,
.occ-info:focus .occ-info-panel,
.occ-info:focus-within .occ-info-panel,
.occ-info-panel:hover {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
.occ-info-title {
    display: block;
    font-size: 13px;
    color: #111827;
    margin-bottom: 2px;
}
.occ-info-source {
    display: block;
    font-size: 10px;
    color: #6b7280;            /* gray-500 */
    font-style: italic;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
}
.occ-info-row {
    display: flex;
    gap: 8px;
    padding: 3px 0;
    align-items: flex-start;
}
.occ-info-code {
    flex: 0 0 38px;
    font-weight: 700;
    color: #374151;            /* gray-700 */
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    padding-top: 1px;
}
.occ-info-desc {
    flex: 1;
    color: #4b5563;            /* gray-600 */
}

/* Position the panel to the right when the icon is near the right edge */
.occ-info--right .occ-info-panel { left: auto; right: 0; }
/* ------------------------------------------------------------------
   AIS VOR2 tile header (new-report.php)

   assets/css/tailwind.min.css is a PURGED build: it contains
   from-teal-600 but not from-teal-500 / to-teal-600 / text-teal-100,
   so a Tailwind teal gradient silently renders as no background at all.
   The tile header is therefore defined explicitly here. Use these
   classes for any new tile whose colour is not already in the build.
   ------------------------------------------------------------------ */
.tile-head-ais {
    background-image: linear-gradient(to right, #14b8a6, #0d9488); /* teal-500 -> teal-600 */
}
.tile-head-ais h3 { color: #ffffff; }
.tile-sub-ais     { color: #ccfbf1; }                              /* teal-100 */
.tile-icon-ais    { color: #0d9488; }                              /* teal-600 */
.tile-ring-ais:hover { border-color: #14b8a6; }