/* =====================================================================
   Modern theme for the whole system (same visual identity as the Mobile Maintenance module)
   - Visual only: restyles existing Bootstrap 3/5, DataTables, select2 and modal classes.
     No markup, ids or JavaScript hooks are changed.
   - Active only when <body class="ui-modern"> and only on screen: printing is untouched.
   - Pages built with the .mm design system keep their own styles.
   ===================================================================== */

@font-face { font-family: 'Almarai'; src: url('/Fonts/Almarai/Almarai-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Almarai'; src: url('/Fonts/Almarai/Almarai-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Almarai'; src: url('/Fonts/Almarai/Almarai-ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; }

@media screen {

    body.ui-modern {
        --ui-primary: #0f766e;
        --ui-primary-dark: #0b5a54;
        --ui-primary-soft: #e6f4f2;
        --ui-info: #0369a1;
        --ui-info-soft: #e0f2fe;
        --ui-success: #15803d;
        --ui-warning: #b45309;
        --ui-warning-bg: #fef3c7;
        --ui-danger: #dc2626;
        --ui-ink: #0f172a;
        --ui-text: #334155;
        --ui-muted: #64748b;
        --ui-line: #e2e8f0;
        --ui-line-strong: #cbd5e1;
        --ui-surface: #ffffff;
        --ui-bg: #f4f6f9;
        --ui-radius: 14px;
        --ui-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .06);

        background: var(--ui-bg);
        color: var(--ui-ink);
        font-family: 'Almarai', Tahoma, Arial, sans-serif;
        line-height: 1.6;
    }

    body.ui-modern button,
    body.ui-modern input,
    body.ui-modern select,
    body.ui-modern textarea,
    body.ui-modern .tooltip,
    body.ui-modern .popover { font-family: inherit; }

    body.ui-modern a { color: var(--ui-primary); }
    body.ui-modern a:hover { color: var(--ui-primary-dark); }

    /* ---------- Navbar ---------- */
    /* Colours only - sizes and spacing stay as before so the menu keeps fitting on one line */
    body.ui-modern #Nav .navbar {
        background: var(--ui-surface) !important;
        border-bottom: 1px solid var(--ui-line);
        box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    }

    body.ui-modern #Nav .navbar .nav-link {
        color: var(--ui-text);
        border-radius: 8px;
        transition: background-color .15s, color .15s;
    }

    body.ui-modern #Nav .navbar .nav-link:hover,
    body.ui-modern #Nav .navbar .nav-link:focus,
    body.ui-modern #Nav .navbar .nav-link.show { color: var(--ui-primary); background: var(--ui-primary-soft); }

    body.ui-modern #Nav .dropdown-menu {
        border: 1px solid var(--ui-line);
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
        padding: 6px;
        text-align: right;
    }

    body.ui-modern #Nav .dropdown-item,
    body.ui-modern #Nav .dropdown-menu > li > a {
        border-radius: 8px;
        padding: 8px 12px;
        color: var(--ui-text);
        font-size: 14px;
    }

    body.ui-modern #Nav .dropdown-item:hover,
    body.ui-modern #Nav .dropdown-menu > li > a:hover { background: var(--ui-primary-soft); color: var(--ui-primary-dark); }

    /* ---------- Page container ---------- */
    body.ui-modern > .container > main[role="main"] { padding-top: 20px; }

    /* Classic pages sit on a white card. Pages using the .mm design system manage their own layout. */
    body.ui-modern > .container > main[role="main"]:not(:has(> .mm)) {
        background: var(--ui-surface);
        border: 1px solid var(--ui-line);
        border-radius: var(--ui-radius);
        box-shadow: var(--ui-shadow);
        padding: 24px 24px 28px;
        margin-top: 20px;
        margin-bottom: 24px;
    }

    body.ui-modern main h1,
    body.ui-modern main h2,
    body.ui-modern main h3,
    body.ui-modern main h4 { color: var(--ui-ink); font-weight: 800; line-height: 1.35; font-family: inherit; }

    body.ui-modern main h1 { font-size: 26px; margin: 0 0 18px; }
    body.ui-modern main h2 { font-size: 22px; }
    body.ui-modern main h3 { font-size: 19px; }
    body.ui-modern main h4 { font-size: 17px; }
    body.ui-modern main hr { border: 0; border-top: 1px solid var(--ui-line); opacity: 1; margin: 18px 0; }

    /* ---------- Buttons ---------- */
    body.ui-modern .btn {
        border-radius: 10px;
        font-weight: 700;
        padding: 8px 16px;
        line-height: 1.4;
        border-width: 1px;
        box-shadow: none;
        transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
    }

    body.ui-modern .btn:focus,
    body.ui-modern .btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(15, 118, 110, .18); }
    body.ui-modern .btn-sm, body.ui-modern .btn-xs { padding: 5px 11px; font-size: 13px; border-radius: 8px; }
    body.ui-modern .btn-lg { padding: 12px 22px; font-size: 17px; border-radius: 12px; }

    body.ui-modern .btn-primary { background: var(--ui-primary); border-color: var(--ui-primary); color: #fff; }
    body.ui-modern .btn-primary:hover, body.ui-modern .btn-primary:active { background: var(--ui-primary-dark); border-color: var(--ui-primary-dark); color: #fff; }

    body.ui-modern .btn-info { background: var(--ui-info); border-color: var(--ui-info); color: #fff; }
    body.ui-modern .btn-info:hover, body.ui-modern .btn-info:active { background: #075985; border-color: #075985; color: #fff; }

    body.ui-modern .btn-success { background: var(--ui-success); border-color: var(--ui-success); color: #fff; }
    body.ui-modern .btn-success:hover, body.ui-modern .btn-success:active { background: #166534; border-color: #166534; color: #fff; }

    body.ui-modern .btn-warning { background: var(--ui-warning-bg); border-color: #fcd34d; color: #92400e; }
    body.ui-modern .btn-warning:hover, body.ui-modern .btn-warning:active { background: #fde68a; border-color: #fbbf24; color: #78350f; }

    body.ui-modern .btn-danger { background: #fff; border-color: #fecaca; color: var(--ui-danger); }
    body.ui-modern .btn-danger:hover, body.ui-modern .btn-danger:active { background: var(--ui-danger); border-color: var(--ui-danger); color: #fff; }

    body.ui-modern .btn-dark { background: #1e293b; border-color: #1e293b; color: #fff; }
    body.ui-modern .btn-dark:hover { background: #0f172a; border-color: #0f172a; color: #fff; }

    body.ui-modern .btn-default,
    body.ui-modern .btn-secondary,
    body.ui-modern .btn-light { background: #fff; border-color: var(--ui-line-strong); color: var(--ui-text); }
    body.ui-modern .btn-default:hover,
    body.ui-modern .btn-secondary:hover,
    body.ui-modern .btn-light:hover { background: #f8fafc; border-color: #94a3b8; color: var(--ui-ink); }

    body.ui-modern .btn-outline-primary { color: var(--ui-primary); border-color: #99d5ce; background: #fff; }
    body.ui-modern .btn-outline-primary:hover { background: var(--ui-primary-soft); color: var(--ui-primary-dark); border-color: var(--ui-primary); }
    body.ui-modern .btn-outline-warning { color: var(--ui-warning); border-color: #fcd34d; background: #fff; }
    body.ui-modern .btn-outline-warning:hover { background: var(--ui-warning-bg); color: #78350f; }
    body.ui-modern .btn-outline-success { color: var(--ui-success); border-color: #bbf7d0; background: #fff; }
    body.ui-modern .btn-outline-success:hover { background: #f0fdf4; color: #166534; }
    body.ui-modern .btn-outline-danger { color: var(--ui-danger); border-color: #fecaca; background: #fff; }
    body.ui-modern .btn-outline-danger:hover { background: #fef2f2; color: #b91c1c; }
    body.ui-modern .btn-outline-secondary,
    body.ui-modern .btn-outline-dark { color: var(--ui-text); border-color: var(--ui-line-strong); background: #fff; }
    body.ui-modern .btn-outline-secondary:hover,
    body.ui-modern .btn-outline-dark:hover { background: #f8fafc; color: var(--ui-ink); }

    body.ui-modern .btn[disabled], body.ui-modern .btn.disabled { opacity: .55; }

    /* ---------- Forms ---------- */
    body.ui-modern .form-group { margin-bottom: 16px; }

    body.ui-modern main label,
    body.ui-modern .control-label,
    body.ui-modern .form-label { color: var(--ui-text); font-weight: 700; font-size: 14px; margin-bottom: 6px; }

    body.ui-modern .form-control,
    body.ui-modern .form-select {
        min-height: 42px;
        height: auto;
        padding: 8px 12px;
        border: 1px solid var(--ui-line-strong);
        border-radius: 10px;
        background-color: #fff;
        color: var(--ui-ink);
        font-size: 15px;
        box-shadow: none;
        transition: border-color .15s, box-shadow .15s;
    }

    body.ui-modern select.form-control:not([multiple]):not([size]) { height: 42px; padding-top: 6px; padding-bottom: 6px; }
    body.ui-modern textarea.form-control { min-height: 84px; }
    body.ui-modern select.form-control[multiple] { min-height: 120px; }

    body.ui-modern .form-control:focus,
    body.ui-modern .form-select:focus { border-color: var(--ui-primary); box-shadow: 0 0 0 4px rgba(15, 118, 110, .14); outline: none; }

    body.ui-modern .form-control[readonly],
    body.ui-modern .form-control[disabled],
    body.ui-modern .form-control:disabled { background-color: #f1f5f9; color: var(--ui-muted); cursor: not-allowed; }

    body.ui-modern .input-validation-error,
    body.ui-modern .form-control.input-validation-error { border-color: var(--ui-danger); }
    body.ui-modern .field-validation-error { color: var(--ui-danger); font-size: 13px; }

    body.ui-modern .validation-summary-errors {
        background: #fef2f2;
        border: 1px solid #fecaca;
        border-radius: 10px;
        padding: 10px 14px;
        margin-bottom: 16px;
    }

    body.ui-modern .validation-summary-errors ul { margin: 0; padding-right: 18px; }

    body.ui-modern input[type="checkbox"],
    body.ui-modern input[type="radio"] { accent-color: var(--ui-primary); }

    /* select2 */
    body.ui-modern .select2-container--default .select2-selection--single,
    body.ui-modern .select2-container--default .select2-selection--multiple {
        min-height: 42px;
        border: 1px solid var(--ui-line-strong);
        border-radius: 10px;
    }

    body.ui-modern .select2-container--default .select2-selection--single { height: 42px; min-height: 0; padding: 0; }
    body.ui-modern .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px; padding: 0 12px 0 28px; }
    body.ui-modern .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; top: 1px; }
    body.ui-modern .select2-container--default.select2-container--focus .select2-selection--multiple,
    body.ui-modern .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--ui-primary); }
    body.ui-modern .select2-dropdown { border-color: var(--ui-line-strong); border-radius: 10px; overflow: hidden; }
    body.ui-modern .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--ui-primary); }

    /* ---------- Tables ---------- */
    body.ui-modern main .table {
        background: #fff;
        border-color: var(--ui-line);
        color: var(--ui-ink);
        margin-bottom: 16px;
    }

    body.ui-modern main .table > thead > tr > th,
    body.ui-modern main .table > thead > tr > td {
        background: #f8fafc;
        color: var(--ui-muted);
        font-weight: 700;
        font-size: 13px;
        border-bottom: 1px solid var(--ui-line);
        /* vertical padding only: DataTables reserves the side padding for its sort arrows */
        padding-top: 12px;
        padding-bottom: 12px;
        vertical-align: middle;
    }

    body.ui-modern main .table > tbody > tr > td,
    body.ui-modern main .table > tbody > tr > th,
    body.ui-modern main .table > tfoot > tr > td {
        padding-top: 11px;
        padding-bottom: 11px;
        border-color: #eef2f6;
        vertical-align: middle;
    }

    body.ui-modern main .table-bordered,
    body.ui-modern main .table-bordered > thead > tr > th,
    body.ui-modern main .table-bordered > tbody > tr > td,
    body.ui-modern main .table-bordered > tbody > tr > th { border-color: var(--ui-line); }

    body.ui-modern main .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: #fafbfd; --bs-table-accent-bg: transparent; }
    body.ui-modern main .table > tbody > tr:hover > * { background-color: #f1f8f7; }

    /* ---------- DataTables ---------- */
    body.ui-modern .dataTables_wrapper { color: var(--ui-text); }
    body.ui-modern .dataTables_wrapper .dataTables_length,
    body.ui-modern .dataTables_wrapper .dataTables_filter { margin-bottom: 12px; }
    body.ui-modern .dataTables_wrapper .dataTables_length label,
    body.ui-modern .dataTables_wrapper .dataTables_filter label { font-weight: 400; color: var(--ui-muted); font-size: 14px; }

    body.ui-modern .dataTables_wrapper .dataTables_filter input,
    body.ui-modern .dataTables_wrapper .dataTables_length select {
        height: 38px;
        border: 1px solid var(--ui-line-strong);
        border-radius: 10px;
        padding: 4px 10px;
        margin: 0 6px;
        background: #fff;
        box-shadow: none;
    }

    body.ui-modern .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--ui-primary); outline: none; box-shadow: 0 0 0 4px rgba(15, 118, 110, .14); }
    body.ui-modern .dataTables_wrapper .dataTables_info { color: var(--ui-muted); font-size: 13px; padding-top: 14px; }

    body.ui-modern .dataTables_wrapper .pagination > li > a,
    body.ui-modern .dataTables_wrapper .pagination > li > span,
    body.ui-modern .dataTables_wrapper .page-link,
    body.ui-modern .dataTables_wrapper .paginate_button {
        border-radius: 8px !important;
        margin: 0 2px;
        border-color: var(--ui-line);
        color: var(--ui-text);
    }

    body.ui-modern .dataTables_wrapper .pagination > .active > a,
    body.ui-modern .dataTables_wrapper .pagination > .active > span,
    body.ui-modern .dataTables_wrapper .page-item.active .page-link {
        background: var(--ui-primary);
        border-color: var(--ui-primary);
        color: #fff;
    }

    body.ui-modern table.dataTable { border-collapse: collapse !important; }

    /* ---------- Generic pagination ---------- */
    body.ui-modern .pagination > li > a,
    body.ui-modern .pagination .page-link { color: var(--ui-text); border-color: var(--ui-line); }
    body.ui-modern .pagination > .active > a,
    body.ui-modern .pagination .active > .page-link { background: var(--ui-primary); border-color: var(--ui-primary); color: #fff; }

    /* ---------- Details pages (dl) ---------- */
    body.ui-modern main dl dt { color: var(--ui-muted); font-weight: 400; font-size: 14px; }
    body.ui-modern main dl dd { color: var(--ui-ink); font-weight: 700; }
    body.ui-modern main dl.row > dt,
    body.ui-modern main dl.row > dd { padding-top: 8px; padding-bottom: 8px; border-bottom: 1px dashed var(--ui-line); margin: 0; }

    /* ---------- Modals ---------- */
    body.ui-modern .modal-content {
        border: none;
        border-radius: 16px;
        box-shadow: 0 24px 60px rgba(15, 23, 42, .25);
        /* no overflow:hidden - it would clip dropdowns / date pickers / wide tables inside modals */
    }

    body.ui-modern .modal-header { border-bottom: 1px solid var(--ui-line); padding: 16px 20px; }
    body.ui-modern .modal-title { font-weight: 800; color: var(--ui-ink); }
    body.ui-modern .modal-footer { border-top: 1px solid var(--ui-line); background: #f8fafc; padding: 12px 20px; border-radius: 0 0 16px 16px; }
    body.ui-modern .modal-backdrop.show, body.ui-modern .modal-backdrop.in { opacity: .45; }

    /* ---------- Alerts / cards / panels ---------- */
    body.ui-modern .alert { border-radius: 12px; border-width: 1px; }
    body.ui-modern .alert-success { background: #f0fdf4; border-color: #bbf7d0; color: var(--ui-success); }
    body.ui-modern .alert-danger { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
    body.ui-modern .alert-warning { background: #fffbeb; border-color: #fde68a; color: var(--ui-warning); }
    body.ui-modern .alert-info { background: var(--ui-info-soft); border-color: #bae6fd; color: var(--ui-info); }

    body.ui-modern main .card,
    body.ui-modern main .panel { border: 1px solid var(--ui-line); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); }
    /* No overflow rule here: pages use .card/.panel as scroll containers for wide tables */
    body.ui-modern main .card-header,
    body.ui-modern main .panel-heading { background: #f8fafc; border-bottom: 1px solid var(--ui-line); font-weight: 700; }

    body.ui-modern .badge,
    body.ui-modern .label { border-radius: 999px; font-weight: 700; padding: .35em .75em; }

    /* ---------- Footer ---------- */
    body.ui-modern > footer.footer { border-top: 1px solid var(--ui-line) !important; color: var(--ui-muted) !important; font-size: 13px; background: transparent; }

    /* ---------- Mobile ---------- */
    @media (max-width: 767px) {
        body.ui-modern > .container > main[role="main"]:not(:has(> .mm)) { padding: 16px; border-radius: 12px; margin-top: 12px; }
        body.ui-modern main h1 { font-size: 21px; }
        body.ui-modern .form-control { font-size: 16px; } /* prevents iOS zoom on focus */
        body.ui-modern main .table-responsive,
        body.ui-modern .dataTables_wrapper { overflow-x: auto; }
    }
}