/* ════════════════════════════════════════════════════════════════════
   modern-ui.css — shared design system
   Extracted from the reference pages (EmployeeTimeIndex, WorkLeavedIndex,
   SalaryIndex, EmployeeInfoIndex, IndexTimerReport) so every page in the
   app shares one visual language. Loaded globally from _LoginLayout.
   ════════════════════════════════════════════════════════════════════ */

:root {
    --ui-primary: #1a6fd4;
    --ui-primary-hover: #185fa5;
    --ui-primary-soft: #e8f2fb;
    --ui-primary-soft-border: #b5d4f4;
    --ui-primary-soft-hover: #d6eaf8;
    /* Label colour for a button/chip filled with --ui-primary-soft. Same blue
       as --ui-primary in light mode, but the two must part company in dark:
       --ui-primary stays saturated because it is a FILL, and that same blue
       on a dark navy tint is unreadable. */
    --ui-primary-on-soft: #1a6fd4;
    --ui-danger: #b53025;
    --ui-danger-soft: #fdecea;
    --ui-danger-soft-border: #f5c2c3;
    --ui-danger-soft-hover: #fadbd8;
    --ui-success: #2e6b1b;
    --ui-success-soft: #e6f4e0;
    --ui-success-soft-border: #c9e5bd;
    --ui-success-soft-hover: #d9eecd;
    --ui-warning: #7a6300;
    --ui-warning-soft: #fdf8e1;
    --ui-text: #1a1a1a;
    --ui-text-2: #555555;
    --ui-text-3: #9a9a9a;
    --ui-surface: #ffffff;
    --ui-surface-2: #f5f5f5;
    --ui-surface-3: #f8f8f8;
    --ui-border: #e4e4e4;
    --ui-border-2: #e0e0e0;
    --ui-border-soft: #f0f0f0;
    /* Added so this file has no light literals left to fight a dark theme:
       every hover fill, hover border and scrollbar thumb reads a token now.
       sendmn-ui.css §12f re-points the whole set inside .sm-app when
       [data-theme="dark"] is set — see the comment there. */
    --ui-hover: #ebebeb;
    --ui-border-strong: #c0c0c0;
    --ui-scroll-thumb: #d4d4d4;
    --ui-scroll-thumb-hover: #b0b0b0;
    --ui-radius-card: 14px;
    --ui-radius-ctl: 10px;
    --ui-radius-sm: 8px;
    --ui-shadow-pop: 0 8px 24px rgba(0,0,0,0.10);
    --ui-shadow-card: 0 1px 3px rgba(0,0,0,0.06);
    --ui-font: 'Poppins', Tahoma, Geneva, Verdana, sans-serif;
}

/* ── Page scaffolding ─────────────────────────────────────────────── */

.page-title {
    font-family: var(--ui-font);
    font-size: 18px;
    font-weight: 600;
    color: var(--ui-text);
    margin: 0 0 14px;
    line-height: 1.3;
}

.page-subtitle {
    font-size: 13px;
    color: var(--ui-text-3);
    margin: -8px 0 14px;
}

/* Generic white card — tables, forms, calendars all live inside one. */
.ui-card,
.dt-card {
    background: var(--ui-surface);
    border-radius: var(--ui-radius-card);
    border: 0.5px solid var(--ui-border);
    box-sizing: border-box;
    width: 100%;
}

.ui-card {
    padding: 18px;
}

.ui-card--flush {
    padding: 0;
}

/* Horizontal-scroll guard for wide tables (only scrolls when needed). */
.table-scroll,
.datatableView {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

/* ── Toolbar (filter bar above tables) ────────────────────────────── */

.toolbar-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    width: 100%;
    background: var(--ui-surface);
    border: 0.5px solid var(--ui-border);
    border-radius: var(--ui-radius-card);
    padding: 10px 14px;
    box-sizing: border-box;
    min-width: 0;
}

.toolbar-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.toolbar-item {
    flex-shrink: 0;
    min-width: 0;
}

.toolbar-item--wide {
    flex: 1;
    min-width: 140px;
    max-width: 260px;
    box-sizing: border-box;
}

.tb-divider {
    width: 0.5px;
    height: 28px;
    background: var(--ui-border);
    flex-shrink: 0;
}

.tb-view-group {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--ui-surface-2);
    border: 0.5px solid var(--ui-border);
    border-radius: var(--ui-radius-ctl);
    padding: 3px;
    flex-shrink: 0;
}

.tb-view-btn {
    border: none;
    background: transparent;
    border-radius: 7px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ui-text-3);
    transition: background 0.15s, color 0.15s;
    padding: 0;
    line-height: 1;
}

    .tb-view-btn.active {
        background: var(--ui-surface);
        color: var(--ui-text);
        border: 0.5px solid var(--ui-border-2);
        box-shadow: var(--ui-shadow-card);
    }

    .tb-view-btn:hover:not(.active) {
        background: var(--ui-hover);
        color: var(--ui-text-2);
    }

/* ── Buttons ──────────────────────────────────────────────────────── */

/* Every control below is a real <button> laid out as a flex row with its own
   background, border, radius and gap. Safari keeps the native button appearance
   in force until it is explicitly cleared, and that native box fights the
   authored one — it re-centres flex content (so icon + label pairs and the
   32x32 icon buttons sat off-centre) and reimposes its own corners on top of
   border-radius. Clearing it once here covers the whole button system, which
   every toolbar and dialog action bar in the app is built from. */
.tb-btn,
.tb-view-btn,
.icon-btn,
.tb-dd-btn,
.tb-dd-item {
    -webkit-appearance: none;
    appearance: none;
}

.tb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    border-radius: var(--ui-radius-ctl);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--ui-font);
    cursor: pointer;
    border: 0.5px solid var(--ui-border-2);
    transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1;
    vertical-align: middle;
    box-sizing: border-box;
}

    .tb-btn svg {
        flex-shrink: 0;
    }

    .tb-btn:focus {
        outline: none;
        text-decoration: none;
    }

    .tb-btn:hover {
        text-decoration: none;
    }

/* Primary (filled blue) */
.tb-btn-search,
.tb-btn-primary {
    background: var(--ui-primary);
    border-color: var(--ui-primary);
    color: #ffffff;
}

    .tb-btn-search:hover,
    .tb-btn-primary:hover {
        background: var(--ui-primary-hover);
        border-color: var(--ui-primary-hover);
        color: #ffffff;
    }

/* Secondary (white outline) */
.tb-btn-confirm,
.tb-btn-secondary {
    background: var(--ui-surface);
    border-color: var(--ui-border-2);
    color: var(--ui-text-2);
}

    .tb-btn-confirm:hover:not(:disabled),
    .tb-btn-secondary:hover:not(:disabled) {
        border-color: var(--ui-border-strong);
        color: var(--ui-text);
    }

    .tb-btn-confirm:disabled,
    .tb-btn-secondary:disabled {
        opacity: 0.5;
        cursor: default;
    }

/* Danger (soft red) */
.tb-btn-danger {
    background: var(--ui-danger-soft);
    border-color: var(--ui-danger-soft-border);
    color: var(--ui-danger);
}

    .tb-btn-danger:hover {
        background: var(--ui-danger-soft-hover);
        color: var(--ui-danger);
    }

/* Success (soft green) */
.tb-btn-success {
    background: var(--ui-success-soft);
    border-color: var(--ui-success-soft-border);
    color: var(--ui-success);
}

    .tb-btn-success:hover {
        background: var(--ui-success-soft-hover);
        color: var(--ui-success);
    }

.tb-confirm-wrap {
    margin-left: auto;
}

/* Small square icon-button used inside table rows. */
.icon-btn,
.icon-background1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--ui-surface-2);
    border: 0.5px solid var(--ui-border);
    color: var(--ui-text-2);
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    margin: 0 2px;
    cursor: pointer;
    padding: 0;
    font-size: 13px;
    text-decoration: none;
}

    .icon-btn:hover,
    .icon-background1:hover {
        background: var(--ui-primary-soft);
        border-color: var(--ui-primary-soft-border);
        color: var(--ui-primary);
        text-decoration: none;
    }

    .icon-btn--danger:hover,
    .deleteId:hover {
        background: var(--ui-danger-soft);
        border-color: var(--ui-danger-soft-border);
        color: var(--ui-danger);
    }

/* ── Custom dropdown (tb-dd) ──────────────────────────────────────── */

.tb-dd-wrap {
    position: relative;
}

.tb-dd-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 10px 0 13px;
    background: var(--ui-surface-2);
    border: 0.5px solid var(--ui-border);
    border-radius: var(--ui-radius-ctl);
    font-size: 13px;
    font-weight: 500;
    color: var(--ui-text);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s;
    min-width: 68px;
    line-height: 1;
}

    .tb-dd-btn:hover {
        border-color: var(--ui-border-strong);
    }

    .tb-dd-btn:focus {
        outline: none;
        border-color: var(--ui-primary);
    }

    .tb-dd-btn.open {
        border-color: var(--ui-primary);
        background: var(--ui-surface);
    }

.tb-dd-label {
    flex: 1;
}

.tb-dd-arrow {
    color: var(--ui-text-3);
    transition: transform 0.18s;
    flex-shrink: 0;
}

.tb-dd-btn.open .tb-dd-arrow {
    transform: rotate(180deg);
}

.tb-dd-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    background: var(--ui-surface);
    border: 0.5px solid var(--ui-border-2);
    border-radius: 12px;
    box-shadow: var(--ui-shadow-pop);
    padding: 5px;
    margin: 0;
    list-style: none;
    z-index: 9999;
    max-height: 220px;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .tb-dd-menu::-webkit-scrollbar {
        display: none;
    }

    .tb-dd-menu.open {
        display: block;
    }

.tb-dd-item {
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ui-text);
    border-radius: var(--ui-radius-sm);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    white-space: nowrap;
}

    .tb-dd-item:hover {
        background: var(--ui-hover);
        color: var(--ui-text);
    }

.tb-dd-item--active {
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    font-weight: 600;
}

/* ── Form controls ────────────────────────────────────────────────── */

.mf-group {
    margin-bottom: 16px;
    min-width: 0;
}

.mf-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ui-text-2);
    margin-bottom: 6px;
}

.mf-input,
.mf-select,
.mf-textarea {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    background: var(--ui-surface-2);
    border: 0.5px solid var(--ui-border);
    border-radius: var(--ui-radius-ctl);
    padding: 8px 13px;
    font-size: 13px;
    font-family: var(--ui-font);
    color: var(--ui-text);
    outline: none;
    transition: border-color 0.15s, background 0.15s;
    box-sizing: border-box;
    min-height: 36px;
}

.mf-textarea {
    min-height: 90px;
    resize: vertical;
}

    .mf-input:focus,
    .mf-select:focus,
    .mf-textarea:focus {
        border-color: var(--ui-primary);
        background: var(--ui-surface);
    }

    .mf-input::placeholder,
    .mf-textarea::placeholder {
        color: var(--ui-text-3);
    }

.mf-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

/* Two-column form grid that collapses on phones. */
.mf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 18px;
}

/* Modernize Bootstrap .form-control on legacy pages without touching JS.
   Dialogs (#dialogHtml / alertify / jQuery UI / Bootstrap modals) live
   OUTSIDE .page-content-wrapper, so they need their own selectors here —
   otherwise popup inputs render borderless. */
.page-content-wrapper .form-control,
#dialogHtml .form-control,
.ajs-dialog .form-control,
.ui-dialog .form-control,
.modal .form-control {
    background: var(--ui-surface-2);
    border: 0.5px solid var(--ui-border);
    border-radius: var(--ui-radius-ctl);
    box-shadow: none;
    font-size: 13px;
    color: var(--ui-text);
    min-height: 36px;
    transition: border-color 0.15s, background 0.15s;
}

    .page-content-wrapper .form-control:focus,
    #dialogHtml .form-control:focus,
    .ajs-dialog .form-control:focus,
    .ui-dialog .form-control:focus,
    .modal .form-control:focus {
        border-color: var(--ui-primary);
        background: var(--ui-surface);
        box-shadow: none;
        outline: none;
    }

.page-content-wrapper label,
#dialogHtml label,
.ajs-dialog label,
.ui-dialog label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ui-text-2);
}

/* Native <select> everywhere gets the modern control look with a custom
   chevron (kills the OS-default dropdown arrow) — so any dropdown that
   isn't upgraded to Select2 still matches the rest of the UI. */
.page-content-wrapper select.form-control,
#dialogHtml select.form-control,
.ajs-dialog select.form-control,
.ui-dialog select.form-control,
.modal select.form-control,
.mform select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer;
}

    .page-content-wrapper select.form-control::-ms-expand,
    #dialogHtml select.form-control::-ms-expand,
    .ajs-dialog select.form-control::-ms-expand,
    .modal select.form-control::-ms-expand {
        display: none;
    }

/* ── Status badges ────────────────────────────────────────────────── */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.status-badge--pending {
    background: var(--ui-warning-soft);
    color: var(--ui-warning);
}

.status-badge--approved {
    background: var(--ui-success-soft);
    color: var(--ui-success);
}

.status-badge--rejected {
    background: var(--ui-danger-soft);
    color: var(--ui-danger);
}

.status-badge--info {
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
}

.status-badge--neutral {
    background: var(--ui-surface-2);
    color: var(--ui-text-2);
}

/* ── Modern table skin ────────────────────────────────────────────── */
/* Applies to any table inside a .dt-card and to DataTables everywhere. */

.dt-card table.dataTable,
.dt-card table.modern-table,
table.modern-table {
    border-collapse: collapse !important;
    border: none !important;
    margin: 0 !important;
    font-size: 13px;
    width: 100% !important;
    font-family: var(--ui-font);
}

.dt-card table.dataTable {
    margin-top: 14px !important;
}

    .dt-card table.dataTable thead tr th,
    .dt-card table.dataTable thead tr td,
    table.modern-table thead tr th {
        background: var(--ui-surface-3);
        color: var(--ui-text-2);
        font-size: 11.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 14px 12px !important;
        border: none !important;
        border-bottom: 0.5px solid var(--ui-border) !important;
        white-space: nowrap;
    }

    .dt-card table.dataTable thead th.sorting:after,
    .dt-card table.dataTable thead th.sorting_desc:after {
        opacity: 0.5;
    }

    .dt-card table.dataTable tbody tr td,
    table.modern-table tbody tr td {
        padding: 10px 12px !important;
        border: none !important;
        border-bottom: 0.5px solid var(--ui-border-soft) !important;
        color: var(--ui-text);
        font-size: 13px;
        vertical-align: middle;
        background: transparent;
    }

    .dt-card table.dataTable tbody tr:last-child td,
    table.modern-table tbody tr:last-child td {
        border-bottom: none !important;
    }

    .dt-card table.dataTable tbody tr:nth-child(even) td,
    table.modern-table tbody tr:nth-child(even) td {
        background: var(--ui-surface);
    }

    .dt-card table.dataTable tbody tr:hover td,
    table.modern-table tbody tr:hover td {
        background: var(--ui-hover) !important;
    }

/* ── DataTables chrome (length / filter / info / buttons) ─────────── */

.dataTables_wrapper {
    padding: 0;
}

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        padding: 14px 18px 4px;
        font-size: 13px;
        color: var(--ui-text-2);
    }

        .dataTables_wrapper .dataTables_length label,
        .dataTables_wrapper .dataTables_filter label {
            font-size: 13px;
            color: var(--ui-text-2);
            font-weight: 400;
            margin-bottom: 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .dataTables_wrapper .dataTables_length select {
            -webkit-appearance: none;
            appearance: none;
            background: var(--ui-surface-2);
            border: 0.5px solid var(--ui-border);
            border-radius: var(--ui-radius-sm);
            padding: 4px 26px 4px 10px;
            height: 32px;
            font-size: 13px;
            color: var(--ui-text);
            outline: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 8px center;
        }

        .dataTables_wrapper .dataTables_filter input {
            -webkit-appearance: none;
            appearance: none;
            background: var(--ui-surface-2);
            border: 0.5px solid var(--ui-border);
            border-radius: var(--ui-radius-sm);
            padding: 4px 12px;
            font-size: 13px;
            color: var(--ui-text);
            outline: none;
            transition: border-color 0.15s;
            height: 32px;
            min-width: 180px;
        }

            .dataTables_wrapper .dataTables_filter input:focus {
                border-color: var(--ui-primary);
            }

    .dataTables_wrapper .dt-buttons {
        padding: 14px 18px 4px;
    }

        .dataTables_wrapper .dt-buttons .dt-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 32px;
            padding: 0 14px;
            border-radius: var(--ui-radius-sm);
            font-size: 13px;
            font-weight: 500;
            background: var(--ui-surface-2);
            border: 0.5px solid var(--ui-border);
            color: var(--ui-text);
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s;
            margin-right: 6px;
        }

            .dataTables_wrapper .dt-buttons .dt-button:hover {
                background: var(--ui-hover);
                border-color: var(--ui-border-strong);
            }

    /* ── The same controls, relocated to the page toolbar ─────────── */
    /* document.js (init.dt) moves each table's length / filter / buttons
       into the header toolbar as one right-aligned .tb-dt-actions group.
       The .dataTables_wrapper-scoped rules above stop matching once the
       nodes leave the wrapper, so their look is restated against the new
       home — same metrics, no padding (the toolbar's own gap spaces them). */
    .tb-dt-actions {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        margin-left: auto;
    }

        .tb-dt-actions .dataTables_length,
        .tb-dt-actions .dataTables_filter,
        .tb-dt-actions .dt-buttons {
            padding: 0;
            font-size: 13px;
            color: var(--ui-text-2);
        }

        .tb-dt-actions .dataTables_length label,
        .tb-dt-actions .dataTables_filter label {
            font-size: 13px;
            color: var(--ui-text-2);
            font-weight: 400;
            margin-bottom: 0;
            display: flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
        }

        .tb-dt-actions .dataTables_length select {
            -webkit-appearance: none;
            appearance: none;
            background: var(--ui-surface-2);
            border: 0.5px solid var(--ui-border);
            border-radius: var(--ui-radius-sm);
            padding: 4px 26px 4px 10px;
            height: 32px;
            font-size: 13px;
            color: var(--ui-text);
            outline: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 8px center;
        }

        .tb-dt-actions .dataTables_filter input {
            -webkit-appearance: none;
            appearance: none;
            background: var(--ui-surface-2);
            border: 0.5px solid var(--ui-border);
            border-radius: var(--ui-radius-sm);
            padding: 4px 12px;
            font-size: 13px;
            color: var(--ui-text);
            outline: none;
            transition: border-color 0.15s;
            height: 32px;
            min-width: 160px;
        }

            .tb-dt-actions .dataTables_filter input:focus {
                border-color: var(--ui-primary);
            }

        .tb-dt-actions .dt-buttons {
            display: flex;
            align-items: center;
            gap: 6px;
        }

            .tb-dt-actions .dt-buttons .dt-button {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                height: 32px;
                padding: 0 14px;
                border-radius: var(--ui-radius-sm);
                font-size: 13px;
                font-weight: 500;
                background: var(--ui-surface-2);
                border: 0.5px solid var(--ui-border);
                color: var(--ui-text);
                cursor: pointer;
                transition: background 0.15s, border-color 0.15s;
                margin-right: 0;
                white-space: nowrap;
            }

                .tb-dt-actions .dt-buttons .dt-button:hover {
                    background: var(--ui-hover);
                    border-color: var(--ui-border-strong);
                }

                /* The page's add-type action (Нэмэх / Оруулах / Шинэ /
                   Бүртгэх — tagged by document.js) leads in accent blue. */
                .tb-dt-actions .dt-buttons .dt-button--primary {
                    background: var(--ui-primary);
                    border-color: var(--ui-primary);
                    color: #fff;
                }

                    .tb-dt-actions .dt-buttons .dt-button--primary:hover {
                        background: var(--ui-primary-hover);
                        border-color: var(--ui-primary-hover);
                        color: #fff;
                    }

    .dataTables_wrapper .dataTables_info {
        padding: 12px 18px;
        font-size: 12px;
        color: var(--ui-text-3);
    }

    .dataTables_wrapper .dataTables_processing {
        background: var(--ui-surface);
        border: 0.5px solid var(--ui-border);
        border-radius: var(--ui-radius-ctl);
        box-shadow: var(--ui-shadow-pop);
        font-size: 13px;
        color: var(--ui-text-2);
    }

    .dataTables_wrapper .dataTables_empty {
        padding: 40px 16px !important;
        text-align: center;
        color: var(--ui-text-3);
        font-size: 13px;
    }

/* ── Pagination ───────────────────────────────────────────────────── */

.dataTables_wrapper .dataTables_paginate {
    padding: 12px 18px 16px;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
}

    .dataTables_wrapper .dataTables_paginate .pagination {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        border-radius: 0 !important;
    }

        .dataTables_wrapper .dataTables_paginate .pagination > li {
            display: inline-flex !important;
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
            border-radius: 0 !important;
            background: none !important;
        }

    .dataTables_wrapper .dataTables_paginate span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        overflow: visible !important;
        border-radius: 0 !important;
        background: none !important;
        border: none !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button,
    .dataTables_wrapper .dataTables_paginate .pagination > li > a,
    .dataTables_wrapper .dataTables_paginate .pagination > li > span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 36px !important;
        height: 36px !important;
        padding: 0 14px !important;
        border-radius: var(--ui-radius-ctl) !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        color: var(--ui-text-2) !important;
        background: var(--ui-surface-2) !important;
        border: 0.5px solid var(--ui-border) !important;
        cursor: pointer !important;
        transition: background 0.15s, border-color 0.15s, color 0.15s !important;
        text-decoration: none !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
        box-shadow: none !important;
        outline: none !important;
        white-space: nowrap !important;
    }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
        .dataTables_wrapper .dataTables_paginate .pagination > li:not(.active):not(.disabled) > a:hover {
            background: var(--ui-hover) !important;
            border-color: var(--ui-border-strong) !important;
            color: var(--ui-text) !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current,
        .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
        .dataTables_wrapper .dataTables_paginate .pagination > li.active > a,
        .dataTables_wrapper .dataTables_paginate .pagination > li.active > a:hover {
            background: var(--ui-primary) !important;
            border-color: var(--ui-primary) !important;
            color: #ffffff !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
        .dataTables_wrapper .dataTables_paginate .pagination > li.disabled > a,
        .dataTables_wrapper .dataTables_paginate .pagination > li.disabled > a:hover {
            color: var(--ui-text-3) !important;
            background: var(--ui-surface-2) !important;
            border-color: var(--ui-border) !important;
            cursor: default !important;
            opacity: 1 !important;
        }

    .dataTables_wrapper .dataTables_paginate .ellipsis {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 36px !important;
        padding: 0 6px !important;
        color: var(--ui-text-3) !important;
        font-size: 13px !important;
        border: none !important;
        background: none !important;
        box-shadow: none !important;
    }

/* DataTables length ("Харуулах") Select2 — the values are short (10-100),
   so never ellipsis-clip them; trim the right padding so the value stays
   fully visible next to the chevron. */
.dataTables_length .select2-container .select2-selection--single .select2-selection__rendered {
    padding-right: 24px !important;
    text-overflow: clip;
}

/* Its open menu stays compact (some pages force .select2-dropdown to
   min-width:200px / max-content — the double-class selector outranks those). */
.select2-dropdown.gd-len-dd {
    min-width: 0 !important;
    width: 110px !important;
}

/* ── smDropdown (document.js) ──────────────────────────────────────────
   Our own <select> menu, because the native one is drawn by the OS and no
   stylesheet can reach it. Deliberately matched to the select2 skin below —
   same tokens, same radii, same chevron — so a toolbar can hold both without
   the pair reading as two different controls. The trigger is 32px to sit with
   the Хайх input and the Экспорт / Нэмэх buttons it stands next to. */

.sm-dd {
    position: relative;
    display: inline-flex;
}

    /* The real control: still present, still authoritative, just not painted.
       display:none would be simpler but takes it out of the layout the page
       may already have sized around. */
    .sm-dd > select {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }

.sm-dd-btn {
    display: inline-flex;
    align-items: center;
    height: 32px;
    min-width: 68px;
    padding: 0 30px 0 12px;
    border-radius: var(--ui-radius-sm);
    border: 0.5px solid var(--ui-border);
    background: var(--ui-surface-2);
    color: var(--ui-text);
    font-family: var(--ui-font);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
    /* Same chevron as every other control in the toolbar. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

    .sm-dd-btn:hover {
        border-color: var(--ui-border-strong);
    }

.sm-dd.is-open .sm-dd-btn {
    border-color: var(--ui-primary);
    background-color: var(--ui-surface);
}

.sm-dd-menu {
    position: fixed;
    z-index: 3000;
    display: none;
    padding: 4px;
    max-height: 260px;
    overflow-y: auto;
    background: var(--ui-surface);
    border: 0.5px solid var(--ui-border-2);
    border-radius: 12px;
    box-shadow: var(--ui-shadow-pop);
    font-family: var(--ui-font);
}

    .sm-dd-menu.is-open {
        display: block;
    }

.sm-dd-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 12px;
    border: 0;
    border-radius: var(--ui-radius-sm);
    background: none;
    color: var(--ui-text);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

    .sm-dd-item:hover {
        background: var(--ui-hover);
    }

    .sm-dd-item.is-sel {
        background: var(--ui-primary);
        color: #ffffff;
    }

/* Year / Month dropdowns hold a handful of options — a search box inside
   them is noise. (:has targets the dropdowns by their results-list ids.) */
.select2-dropdown:has(#select2-yearID-results) .select2-search--dropdown,
.select2-dropdown:has(#select2-monthID-results) .select2-search--dropdown {
    display: none !important;
}

/* ── Select2 skin ─────────────────────────────────────────────────── */

.select2-container {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

    .select2-container .select2-selection--single {
        background: var(--ui-surface-2) !important;
        border: 0.5px solid var(--ui-border) !important;
        border-radius: var(--ui-radius-ctl) !important;
        height: 36px !important;
        min-width: 0;
        box-sizing: border-box;
        transition: border-color 0.15s, background 0.15s !important;
    }

.select2-container--default .select2-selection--single:hover {
    border-color: var(--ui-border-strong) !important;
}

.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--ui-primary) !important;
    background: var(--ui-surface) !important;
    border-radius: var(--ui-radius-ctl) !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 36px !important;
    padding-left: 13px !important;
    padding-right: 30px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--ui-text) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    min-width: 0;
    box-sizing: border-box;
}

.select2-container .select2-selection--single .select2-selection__placeholder {
    color: var(--ui-text-3) !important;
}

.select2-container .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
    right: 8px !important;
}

    .select2-container .select2-selection--single .select2-selection__arrow b {
        display: none !important;
    }

    .select2-container .select2-selection--single .select2-selection__arrow::after {
        content: '';
        display: block;
        width: 12px;
        height: 12px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        transition: transform 0.18s;
    }

.select2-container--open .select2-selection--single .select2-selection__arrow::after {
    transform: translateY(-50%) rotate(180deg);
}

.select2-dropdown {
    border: 0.5px solid var(--ui-border-2) !important;
    border-radius: 12px !important;
    box-shadow: var(--ui-shadow-pop) !important;
    overflow: hidden;
    margin-top: 6px !important;
    /* Above alertify dialogs (~2000s) and jQuery UI dialogs (10000s) so a
       body-attached dropdown opened from inside a popup is never buried. */
    z-index: 100060 !important;
}

.select2-container--default .select2-search--dropdown {
    padding: 8px 8px 4px !important;
}

    .select2-container--default .select2-search--dropdown .select2-search__field {
        border: 0.5px solid var(--ui-border) !important;
        border-radius: var(--ui-radius-sm) !important;
        font-size: 13px !important;
        padding: 6px 10px !important;
        outline: none !important;
        background: var(--ui-surface-2) !important;
        color: var(--ui-text) !important;
        transition: border-color 0.15s !important;
    }

        .select2-container--default .select2-search--dropdown .select2-search__field:focus {
            border-color: var(--ui-primary) !important;
            background: var(--ui-surface) !important;
        }

.select2-results__options {
    padding: 4px !important;
    max-height: 220px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

    .select2-results__options::-webkit-scrollbar {
        display: none !important;
    }

.select2-container--default .select2-results__option {
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--ui-text) !important;
    border-radius: var(--ui-radius-sm) !important;
    transition: background 0.1s, color 0.1s !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--ui-hover) !important;
    color: var(--ui-text) !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--ui-primary-soft) !important;
    color: var(--ui-primary) !important;
    font-weight: 600 !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected=true] {
    background: var(--ui-primary-soft-hover) !important;
    color: var(--ui-primary) !important;
}

/* ── Modals (Bootstrap 3) ─────────────────────────────────────────── */

.modal .modal-content {
    border-radius: 18px;
    border: none;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

.modal .modal-header {
    border-bottom: 0.5px solid var(--ui-border-soft);
    padding: 18px 22px;
}

    .modal .modal-header .modal-title,
    .modal .modal-header h4 {
        font-size: 16px;
        font-weight: 600;
        color: var(--ui-text);
        font-family: var(--ui-font);
    }

.modal .modal-body {
    padding: 20px 22px;
}

.modal .modal-footer {
    border-top: 0.5px solid var(--ui-border-soft);
    padding: 14px 22px;
}

.modal .close {
    opacity: 0.4;
    transition: opacity 0.15s;
}

    .modal .close:hover {
        opacity: 0.8;
    }

/* Bootbox inherits the same modal-content rules automatically. */

/* ── Empty & loading states ───────────────────────────────────────── */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 20px;
    text-align: center;
    color: var(--ui-text-3);
}

    .empty-state .empty-state-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--ui-text-2);
    }

    .empty-state .empty-state-hint {
        font-size: 12.5px;
        color: var(--ui-text-3);
    }

.ui-spinner {
    display: inline-block;
    width: 26px;
    height: 26px;
    border: 3px solid var(--ui-primary-soft);
    border-top-color: var(--ui-primary);
    border-radius: 50%;
    animation: ui-spin 0.7s linear infinite;
}

@keyframes ui-spin {
    to {
        transform: rotate(360deg);
    }
}

.loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    color: var(--ui-text-3);
    font-size: 13px;
}

/* ── Legacy Bootstrap button skin (keeps old markup, new look) ────── */

.page-content-wrapper .btn {
    border-radius: var(--ui-radius-ctl);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--ui-font);
    transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
    box-shadow: none;
    outline: none;
}

    .page-content-wrapper .btn:focus,
    .page-content-wrapper .btn:active {
        box-shadow: none;
        outline: none;
    }

.page-content-wrapper .btn-primary {
    background: var(--ui-primary);
    border-color: var(--ui-primary);
}

    .page-content-wrapper .btn-primary:hover,
    .page-content-wrapper .btn-primary:focus,
    .page-content-wrapper .btn-primary:active {
        background: var(--ui-primary-hover);
        border-color: var(--ui-primary-hover);
    }

.page-content-wrapper .btn-success {
    background: #3f9b28;
    border-color: #3f9b28;
}

    .page-content-wrapper .btn-success:hover,
    .page-content-wrapper .btn-success:focus {
        background: #357f22;
        border-color: #357f22;
    }

.page-content-wrapper .btn-danger {
    background: #ce3131;
    border-color: #ce3131;
}

    .page-content-wrapper .btn-danger:hover,
    .page-content-wrapper .btn-danger:focus {
        background: #b02a2a;
        border-color: #b02a2a;
    }

.page-content-wrapper .btn-default {
    background: var(--ui-surface);
    border: 0.5px solid var(--ui-border-2);
    color: var(--ui-text-2);
}

    .page-content-wrapper .btn-default:hover,
    .page-content-wrapper .btn-default:focus {
        border-color: var(--ui-border-strong);
        color: var(--ui-text);
        background: var(--ui-surface);
    }

/* Legacy .badge → pill */
.page-content-wrapper .badge {
    border-radius: 999px;
    font-weight: 600;
    font-size: 11.5px;
    padding: 4px 10px;
}

/* ── jQuery UI datepicker skin ────────────────────────────────────── */

#ui-datepicker-div.ui-datepicker {
    background: var(--ui-surface);
    border: 0.5px solid var(--ui-border-2);
    border-radius: 12px;
    box-shadow: var(--ui-shadow-pop);
    padding: 10px;
    font-family: var(--ui-font);
    font-size: 13px;
}

#ui-datepicker-div .ui-datepicker-header {
    background: transparent;
    border: none;
    font-weight: 600;
    color: var(--ui-text);
}

#ui-datepicker-div .ui-state-default {
    background: transparent;
    border: none;
    text-align: center;
    border-radius: 7px;
    color: var(--ui-text-2);
    padding: 5px;
}

#ui-datepicker-div .ui-state-hover {
    background: var(--ui-hover);
    color: var(--ui-text);
}

#ui-datepicker-div .ui-state-active {
    background: var(--ui-primary);
    color: #fff;
}

#ui-datepicker-div .ui-datepicker-today .ui-state-default {
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
}

/* ── Toolbar select sizing — nothing may clip ─────────────────────── */
/* Select2 freezes the container at the width the <select> had at init
   time; inside a shrink-wrapped .toolbar-item that computes to a few px,
   which is what clipped "2026" down to "2…". Overriding the inline width
   with auto lets the control size itself to its rendered text. */

.toolbar-row .select2-container {
    width: auto !important;
    min-width: 90px;
    max-width: 100%;
}

    .toolbar-row .select2-container .select2-selection__rendered {
        overflow: visible;
        text-overflow: clip;
        max-width: none;
    }

/* Wide filter slots (status/department/employee pickers) keep filling
   their column instead of shrink-wrapping. */
.toolbar-row .toolbar-item--wide .select2-container {
    width: 100% !important;
}

    .toolbar-row .toolbar-item--wide .select2-container .select2-selection__rendered {
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* Native selects before/without select2 */
.toolbar-item > select.form-control {
    min-width: 90px;
    width: auto;
}

/* ── Scrollbars ───────────────────────────────────────────────────── */
/* One scroll container per table: .table-scroll (or .datatableView).
   Modern thin rounded thumb, visible only when content overflows. */

.table-scroll,
.datatableView {
    scrollbar-width: thin;
    scrollbar-color: var(--ui-scroll-thumb) transparent;
}

    .table-scroll::-webkit-scrollbar,
    .datatableView::-webkit-scrollbar {
        height: 8px;
        width: 8px;
    }

    .table-scroll::-webkit-scrollbar-track,
    .datatableView::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 999px;
    }

    .table-scroll::-webkit-scrollbar-thumb,
    .datatableView::-webkit-scrollbar-thumb {
        background: var(--ui-scroll-thumb);
        border-radius: 999px;
        border: 2px solid transparent;
        background-clip: content-box;
    }

        .table-scroll::-webkit-scrollbar-thumb:hover,
        .datatableView::-webkit-scrollbar-thumb:hover {
            background: var(--ui-scroll-thumb-hover);
            background-clip: content-box;
        }

/* ── Alertify dialogs (globalDialog popups) ───────────────────────── */
/* Dialogs opened via resizeTo() get a fixed inline height, forcing the
   user to resize before the content is readable. Let the dialog size
   itself to its content instead, capped to the viewport with internal
   scrolling as a fallback. */

/* All rules below are scoped to `.gd-dialog` — a class added to the alertify
   root by globalDialog/globalDialog2 — so they only affect our form popups,
   never alertify.confirm/alert (which keep their native footer + scrollbar). */

.gd-dialog .ajs-dialog {
    max-height: 94vh;
    max-width: 96vw !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.20) !important;
    overflow: hidden;
    /* Centred by the flex modal below, so alertify's own `margin: 5% auto`
       must go — see the note there for why that margin was the problem. */
    margin: 0 !important;
    flex: none; /* honour the width fitDialogToContent sets; never shrink it */
}

/* alertify's modal layer is a fixed, full-viewport box with `overflow-y: auto`,
   and it lays the dialog out with `margin: 5% auto` — a PERCENTAGE margin,
   which resolves against the layer's WIDTH, never its height. On a 1900px-wide
   screen that is ~95px of margin above AND below a popup already sized to 85vh
   (fitDialogHeight's cap), so the layer overflowed the viewport and the browser
   painted its own scrollbar down the whole right edge of the window. It looked
   nothing like the rest of the app because .ajs-modal is appended to <body>,
   outside .sm-app, so the thin-scrollbar rules in sendmn-ui.css §2 never
   reached it — and it scrolled the DIALOG, not the form inside it, which is
   why dragging it or clicking its arrows moved the whole popup in jerky steps.

   Centring with flex drops the margin that caused the overflow; overflow:hidden
   then guarantees .ajs-content is the only thing in a popup that ever scrolls.
   Vertical clipping is not a risk: the dialog is capped at 94vh above and
   alertify's resize handle cannot grow it past that. */
.gd-dialog .ajs-modal {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Defeat alertify's 548px resizable baseline AND the inline min-width it pins
   on the first resizeTo (captured from the dialog's initial full width) — so
   the width JS sets actually takes effect and the dialog can be dragged small. */
.gd-dialog.ajs-resizable .ajs-dialog {
    min-width: 0 !important;
}

/* Window controls (maximize / close) — visible, soft hover chip. */
.gd-dialog .ajs-commands {
    margin: 12px 14px 0 0 !important;
    opacity: 1 !important;
    z-index: 3;
}

    .gd-dialog .ajs-commands button {
        border-radius: 8px !important;
        transition: background-color 0.15s ease;
        opacity: 0.65;
    }

        .gd-dialog .ajs-commands button:hover {
            background-color: var(--ui-hover) !important;
            opacity: 1;
        }

        .gd-dialog .ajs-commands button.ajs-close:hover {
            background-color: var(--ui-danger-soft) !important;
        }

/* Maximized state takes the full viewport. */
.gd-dialog.ajs-maximized .ajs-dialog {
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
}

.gd-dialog .ajs-header {
    font-family: var(--ui-font) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--ui-text) !important;
    padding: 16px 20px !important;
    border-bottom: 0.5px solid var(--ui-border-soft) !important;
    background: var(--ui-surface) !important;
    position: relative;
    z-index: 2; /* scrolling content must never paint over the header */
}

/* These forms render their own action bar inside the content, so alertify's
   empty footer is dead space — hide it and let content use the full height. */
.gd-dialog .ajs-footer {
    display: none !important;
}

/* Content is absolutely positioned below the header (alertify's resizable
   layout — this keeps all scrolling INSIDE the content area). With the footer
   hidden, bottom:14 is safe, so scrolling reaches the very last row. */
.gd-dialog.ajs-resizable .ajs-body .ajs-content,
.gd-dialog.ajs-maximized .ajs-body .ajs-content {
    top: 56px !important;
    bottom: 14px !important;
    left: 20px !important;
    right: 20px !important;
    padding: 2px !important;
    overflow: auto;
    /* Never chain a wheel that reaches either end out to the page behind. */
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--sm-scroll) transparent;
}

/* The popup's own scrollbar, thin and in the app's colours (sendmn-ui.css §2).
   It used to be hidden outright, which on a form as long as the анкет left no
   sign of how much was below the fold and nothing to drag — so people reached
   for the browser's full-height bar on .ajs-modal instead. That bar is gone
   now (see above), and this is what replaces it. */
.gd-dialog .ajs-content::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.gd-dialog .ajs-content::-webkit-scrollbar-thumb {
    background: var(--sm-scroll);
    border-radius: 9px;
}

    .gd-dialog .ajs-content::-webkit-scrollbar-thumb:hover {
        background: var(--sm-scroll-hover);
    }

.gd-dialog .ajs-content::-webkit-scrollbar-track {
    background: transparent;
}

/* ── jQuery UI dialogs (status-change popups) ─────────────────────── */

.ui-dialog {
    border-radius: 14px !important;
    border: 0.5px solid var(--ui-border-2) !important;
    box-shadow: var(--ui-shadow-pop) !important;
    padding: 6px !important;
    font-family: var(--ui-font) !important;
    max-width: 96vw;
}

    .ui-dialog .ui-dialog-titlebar {
        background: transparent;
        border: none;
        font-size: 15px;
        font-weight: 600;
        color: var(--ui-text);
        padding: 12px 14px 8px;
    }

    .ui-dialog .ui-dialog-content {
        font-size: 13px;
        color: var(--ui-text-2);
        padding: 8px 14px 14px;
    }

    /* Reason textareas injected by JS (#reasonArea etc.) — make the
       typing area unmistakable. */
    .ui-dialog textarea,
    .ajs-dialog textarea:not(.form-control):not(.mf-textarea):not(.wl-textarea) {
        display: block;
        width: 100% !important;
        min-height: 90px;
        background: var(--ui-surface-2);
        border: 0.5px solid var(--ui-border);
        border-radius: var(--ui-radius-ctl);
        padding: 8px 12px;
        font-size: 13px;
        font-family: var(--ui-font);
        color: var(--ui-text);
        box-sizing: border-box;
        outline: none;
        resize: vertical;
        transition: border-color 0.15s, background 0.15s;
    }

        .ui-dialog textarea:focus,
        .ajs-dialog textarea:focus {
            border-color: var(--ui-primary);
            background: var(--ui-surface);
        }

    .ui-dialog .ui-dialog-buttonpane {
        border-top: 0.5px solid var(--ui-border-soft);
        margin: 0;
        padding: 10px 14px;
        background: transparent;
    }

        .ui-dialog .ui-dialog-buttonpane button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 34px;
            padding: 0 16px;
            border-radius: var(--ui-radius-ctl);
            font-size: 13px;
            font-weight: 500;
            font-family: var(--ui-font);
            background: var(--ui-surface);
            border: 0.5px solid var(--ui-border-2);
            color: var(--ui-text-2);
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s, color 0.15s;
        }

            .ui-dialog .ui-dialog-buttonpane button:hover {
                border-color: var(--ui-border-strong);
                color: var(--ui-text);
                background: var(--ui-surface);
            }

            .ui-dialog .ui-dialog-buttonpane button:first-child {
                background: var(--ui-primary);
                border-color: var(--ui-primary);
                color: #fff;
            }

                .ui-dialog .ui-dialog-buttonpane button:first-child:hover {
                    background: var(--ui-primary-hover);
                    border-color: var(--ui-primary-hover);
                }

/* ── Responsive defaults ──────────────────────────────────────────── */

@media (max-width: 768px) {
    .toolbar-row {
        padding: 8px 10px;
        gap: 6px;
    }

    .toolbar-item--wide {
        max-width: 100%;
        width: 100%;
        flex-basis: 100%;
    }

    .tb-confirm-wrap {
        margin-left: 0;
    }

    .ui-card {
        padding: 14px;
        border-radius: 10px;
    }

    .dt-card {
        border-radius: 10px;
    }

        .dt-card table.dataTable,
        table.modern-table {
            font-size: 12px;
        }

            .dt-card table.dataTable th,
            .dt-card table.dataTable td,
            table.modern-table th,
            table.modern-table td {
                padding: 7px 8px !important;
            }

    .dataTables_wrapper .dataTables_paginate {
        justify-content: center !important;
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    /* Row + wrap (not column) so paired controls can share a line while
       everything else still takes a full row via width:100%. */
    .toolbar-controls {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
    }

    .toolbar-item,
    .toolbar-item--wide {
        width: 100%;
        max-width: 100%;
    }

        .toolbar-item .tb-btn {
            width: 100%;
        }

    /* Year + Month share one line. The basis has to be gap-agnostic: it used
       to be calc(50% - 3px), which assumed the 6px gap this file sets, and on
       Цаг — whose .toolbar-row overrides the gap to 9px — the pair came to
       100% + 3px, so Сар wrapped onto a line of its own. An under-half basis
       plus flex-grow lets the two divide whatever the row's gap leaves,
       whatever that gap happens to be. Covers both the Select2 pages
       (#yearID/#monthID) and the custom dropdown pages
       (#yearDDWrap/#monthDDWrap). */
    .toolbar-item:has(#yearID),
    .toolbar-item:has(#monthID),
    #yearDDWrap,
    #monthDDWrap {
        width: auto;
        max-width: none;
        flex: 1 1 calc(50% - 20px);
    }

    .tb-dd-wrap,
    .tb-dd-btn {
        width: 100%;
    }

        #yearDDWrap .tb-dd-btn,
        #monthDDWrap .tb-dd-btn {
            min-width: 0;
        }

    .select2-container,
    .toolbar-row .select2-container {
        min-width: 0 !important;
        width: 100% !important;
    }

    .toolbar-item > select.form-control {
        width: 100%;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        width: 100%;
        box-sizing: border-box;
    }

        .dataTables_wrapper .dataTables_length label,
        .dataTables_wrapper .dataTables_filter label {
            width: 100%;
            flex-wrap: wrap;
        }

        .dataTables_wrapper .dataTables_filter input {
            min-width: 0;
            width: 100%;
            box-sizing: border-box;
        }

    .dataTables_wrapper .dt-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        width: 100%;
        box-sizing: border-box;
    }

        .dataTables_wrapper .dt-buttons .dt-button {
            margin-right: 0;
        }

    .mf-grid {
        grid-template-columns: 1fr;
    }

    .modal .modal-body {
        padding: 16px;
    }

    .modal .modal-header,
    .modal .modal-footer {
        padding: 14px 16px;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Mobile card tables (opt-in via class="mobile-cards" on the <table>).
   On phones each table row becomes a clean label/value card instead of a
   squished horizontal table. Cell labels come from the header text, set as
   data-th="…" by the global draw.dt handler in _Layout. Desktop is untouched
   — these rules only apply at ≤480px. Scoped to .mobile-cards so it never
   affects the WorkLeavedIndex reference page (which has its own mobile view).
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    /* The horizontal-scroll wrapper is unnecessary once rows stack as cards */
    .dt-card .table-scroll,
    .dt-card .table-responsive {
        overflow-x: visible;
    }

    /* No stray horizontal scrolling in card mode: kill inherited min-widths
       and any overflow the table itself may carry (e.g. a `table-responsive`
       class sitting ON the table element), and clip the card as a guard. */
    .dt-card:has(table.mobile-cards) {
        overflow: hidden;
        margin-bottom: 28px; /* breathing room above the bottom nav */
    }

    table.mobile-cards,
    table.mobile-cards tbody,
    table.mobile-cards tbody tr,
    table.mobile-cards tbody td {
        min-width: 0 !important;
        overflow: visible !important;
    }

    table.mobile-cards thead {
        display: none; /* labels move into each cell via data-th */
    }

    table.mobile-cards,
    table.mobile-cards tbody,
    table.mobile-cards tbody tr,
    table.mobile-cards tbody td {
        display: block;
        width: 100% !important;
    }

    /* Symmetric side padding so cards sit centered with equal margins */
    table.mobile-cards {
        margin: 0 !important;
        padding: 2px 12px 8px !important;
        box-sizing: border-box;
    }

    table.mobile-cards tbody tr {
        /* !important defeats table-striped / DataTables odd-row tints that
           otherwise "highlight" the first card for no reason */
        background: var(--ui-surface) !important;
        border: 0.5px solid var(--ui-border);
        border-radius: 12px;
        padding: 4px 14px;
        margin: 0 0 12px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        box-sizing: border-box;
    }

    /* Person names stand out for quick scanning */
    table.mobile-cards tbody tr td[data-th="Нэр" i],
    table.mobile-cards tbody tr td[data-th="Овог, нэр" i],
    table.mobile-cards tbody tr td[data-th="Овог" i],
    table.mobile-cards tbody tr td[data-th="Ажилтан" i],
    table.mobile-cards tbody tr td[data-th="Ажилтаны нэр" i],
    table.mobile-cards tbody tr td[data-th="Зочны нэр" i] {
        font-weight: 600;
        color: var(--ui-text);
        font-size: 13.5px;
    }

    /* Header controls stack in a sensible order, with the export/add
       buttons tucked at the bottom-right of the header block. */
    .dataTables_wrapper:has(table.mobile-cards) {
        display: flex;
        flex-direction: column;
    }

        .dataTables_wrapper:has(table.mobile-cards) .dataTables_length { order: 1; }
        .dataTables_wrapper:has(table.mobile-cards) .dataTables_filter { order: 2; }

        .dataTables_wrapper:has(table.mobile-cards) .dt-buttons {
            order: 3;
            align-self: flex-end;
            width: auto;
            padding-top: 4px;
        }

        .dataTables_wrapper:has(table.mobile-cards) > table { order: 4; }
        .dataTables_wrapper:has(table.mobile-cards) .dataTables_info { order: 5; }
        .dataTables_wrapper:has(table.mobile-cards) .dataTables_paginate { order: 6; }

        table.mobile-cards tbody tr td {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 10px 0 !important;
            border: none !important;
            border-bottom: 0.5px solid var(--ui-border-soft) !important;
            text-align: right;
            font-size: 13px;
            white-space: normal !important;
            word-break: break-word;
            background: transparent !important;
            min-height: 0;
        }

            table.mobile-cards tbody tr td:last-child {
                border-bottom: none !important;
            }

            /* Label from the header text */
            table.mobile-cards tbody tr td::before {
                content: attr(data-th);
                flex: 0 0 42%;
                max-width: 42%;
                text-align: left;
                font-size: 10.5px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.03em;
                color: var(--ui-text-3);
                white-space: normal;
                line-height: 1.3;
            }

            /* Cells with an empty label (e.g. the № counter) — drop the label
               and show the value on its own, as a compact card sub-line. */
            table.mobile-cards tbody tr td[data-th=""] {
                justify-content: flex-start;
                color: var(--ui-text-3);
                font-size: 11.5px;
                padding-bottom: 2px !important;
            }

                table.mobile-cards tbody tr td[data-th=""]::before {
                    content: none;
                }

        /* Long inline content (reasons, file links, inputs) fills the value side */
        table.mobile-cards tbody tr td .cr-reason,
        table.mobile-cards tbody tr td .pr-reason,
        table.mobile-cards tbody tr td .wl-reason,
        table.mobile-cards tbody tr td .form-control,
        table.mobile-cards tbody tr td input,
        table.mobile-cards tbody tr td select {
            max-width: 100%;
        }

        /* Action cluster: keep buttons reachable, wrap onto its own line */
        table.mobile-cards tbody tr td .pr-actions {
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        /* Friendly empty / processing states shouldn't be carded */
        table.mobile-cards tbody tr td.dataTables_empty {
            justify-content: center;
            text-align: center;
            color: var(--ui-text-3);
        }

            table.mobile-cards tbody tr td.dataTables_empty::before {
                content: none;
            }
}