/* === Excel-style Report Sheet === */

/* Toolbar above the sheet - mimics a spreadsheet tab bar */
.report-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-sm);
    padding: var(--sp-sm) var(--sp-md);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
}

.report-toolbar-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-sm);
}

.report-sheet-icon {
    display: inline-flex;
    color: var(--c-success);
}

.report-sheet-name {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-text);
}

.report-toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
}

/* Scroll container around the grid */
.excel-sheet-wrap {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 300px);
    border: 1px solid var(--c-border);
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--c-surface);
}

/* The grid itself - border-collapse gives the thin Excel gridlines */
.excel-grid {
    border-collapse: collapse;
    font-size: var(--fs-sm);
    font-family: "Segoe UI", -apple-system, BlinkMacSystem-ont, Roboto, sans-serif;
    table-layout: fixed;
}

/* Every cell gets a hairline border like a spreadsheet */
.excel-grid th,
.excel-grid td {
    border: 1px solid #d4d4d4;
    padding: 0;
    position: relative;
}

/* Corner cell (empty, above row numbers) */
.excel-grid .xl-corner {
    background: #f3f3f3;
    width: 40px;
    min-width: 40px;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 4;
}

/* Column-letter header row (A, B, C - -) */
.excel-grid .xl-colhead {
    background: #f3f3f3;
    color: #595959;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    height: 22px;
    position: sticky;
    top: 0;
    z-index: 2;
    white-space: nowrap;
}

/* Row-number gutter (1, 2, 3 - -) */
.excel-grid .xl-rowhead {
    background: #f3f3f3;
    color: #595959;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    width: 40px;
    min-width: 40px;
    position: sticky;
    left: 0;
    z-index: 2;
    white-space: nowrap;
}

/* The actual field-name header row (Doctor, Specialty, - -) */
.excel-grid .xl-fieldhead {
    background: #217346;
    color: #fff;
    font-weight: 600;
    text-align: left;
    padding: 6px 10px;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    position: sticky;
    top: 22px;
    z-index: 2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -irst data column (Doctor name) - frozen like Excel freeze panes */
.excel-grid .xl-frozen {
    position: sticky;
    left: 40px;
    z-index: 1;
    background: var(--c-surface);
}

/* -ield header that is also frozen (top-left intersection).
   Must keep the green header background - the .xl-frozen rule sets a
   white surface background for body cells, so we override it here. */
.excel-grid .xl-fieldhead.xl-frozen {
    z-index: 3;
    background: #217346;
    color: #fff;
}

/* Body cells */
.excel-grid .xl-cell {
    padding: 5px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--c-text);
    background: var(--c-surface);
}

/* Numeric / count cells - right aligned like Excel */
.excel-grid .xl-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Muted text cells (specialty) */
.excel-grid .xl-muted {
    color: var(--c-text-muted);
}

/* Doctor-name cell - bold, like a label column */
.excel-grid .xl-doctor {
    font-weight: 600;
}

/* Total row at the bottom */
.excel-grid .xl-total .xl-cell,
.excel-grid .xl-total .xl-rowhead {
    background: #f3f3f3;
    font-weight: 700;
    border-top: 2px solid #217346;
}

.excel-grid .xl-total .xl-fieldhead,
.excel-grid .xl-total .xl-frozen {
    background: #f3f3f3;
    color: var(--c-text);
    border-top: 2px solid #217346;
}

/* Hover row highlight */
.excel-grid tbody tr:hover .xl-cell,
.excel-grid tbody tr:hover .xl-frozen {
    background: #eaf3ee;
}

.excel-grid tbody tr.xl-total:hover .xl-cell,
.excel-grid tbody tr.xl-total:hover .xl-frozen {
    background: #f3f3f3;
}

/* Cells with zero count - dimmed like empty spreadsheet cells */
.excel-grid .xl-zero {
    color: #b0b0b0;
}

/* Column widths */
.excel-grid .xl-col-doctor { width: 180px; min-width: 120px; }
.excel-grid .xl-col-spec   { width: 130px; }
.excel-grid .xl-col-orders { width: 90px; }
.excel-grid .xl-col-tests  { width: 90px; }
.excel-grid .xl-col-test   { width: 110px; min-width: 80px; }

/* Status note under the sheet */
.excel-status {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: var(--sp-xs) var(--sp-md);
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    background: #f3f3f3;
    border: 1px solid var(--c-border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
}

.excel-status .xl-ready-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-success);
    flex-shrink: 0;
}

@media print {
    .report-toolbar { border-radius: 0; }
    .excel-sheet-wrap { max-height: none; border: none; overflow: visible; }
    .excel-grid .xl-colhead,
    .excel-grid .xl-rowhead,
    .excel-grid .xl-corner { display: none; }
    .excel-grid .xl-fieldhead { position: static; top: auto; }
    .excel-grid .xl-frozen { position: static; left: auto; }
}
/* Month filter inside the report toolbar */
.report-month-filter {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    margin-left: var(--sp-sm);
    padding-left: var(--sp-sm);
    border-left: 1px solid var(--c-border);
}

.report-month-label {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.report-month-select {
    padding: 4px 8px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-family: inherit;
    color: var(--c-text);
    background: var(--c-surface);
    cursor: pointer;
    transition: border-color var(--t-fast);
}

.report-month-select:hover {
    border-color: var(--c-focus);
}

.report-month-select:focus {
    outline: 2px solid var(--c-focus);
    outline-offset: 1px;
    border-color: var(--c-focus);
}

@media (max-width: 640px) {
    .report-toolbar-left {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
    .report-month-filter {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        width: 100%;
    }
    .report-month-filter .report-month-label {
        width: 60px;
        flex-shrink: 0;
    }
    .report-month-select {
        flex: 1;
        width: 100%;
    }
    #report-apply-dates {
        width: 100%;
        margin-left: 0;
    }
    .report-sheet-icon {
        display: none;
    }
    .report-sheet-name {
        font-size: var(--fs-base);
        font-weight: 700;
        padding-bottom: var(--sp-xs);
        border-bottom: 1px solid var(--c-border);
        width: 100%;
    }
}
/* === Settings module responsive === */
/* On mobile, stack the admin sidebar menu above the content body
   instead of side-by-side, so forms and tables have full width. */
@media (max-width: 640px) {
    #lkadmin-wrap {
        flex-direction: column !important;
        gap: 12px !important;
    }
    #lkadmin-menu {
        width: 100% !important;
        position: static !important;
        flex-shrink: 1 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    #lkadmin-menu .lkadmin-btn {
        flex: 1 1 auto !important;
        white-space: nowrap !important;
        margin-bottom: 0 !important;
    }
    #lkadmin-body {
        width: 100% !important;
    }
    #lkadmin-body .card {
        max-width: 100% !important;
    }
    /* User search bar: stack vertically on mobile */
    #lkadmin-sec-users .form-group,
    #lkadmin-body [data-lkasec="users"] > div:first-of-type {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    #user-search {
        min-width: 0 !important;
        width: 100% !important;
    }
    #user-search-btn,
    #user-new-btn {
        width: 100% !important;
    }
    /* Lab info logo row: stack on mobile */
    #lab-info-form .form-group:last-of-type .form-label + div {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    #lab-logo-preview {
        max-width: 100% !important;
    }
}
/* === Pagination bar === */
/* Sits below the table scroll container, styled to match the Excel
   sheet status bar in the Reports module. */

.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-sm);
    padding: var(--sp-xs) var(--sp-md);
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    background: #f3f3f3;
    border: 1px solid var(--c-border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
}

.pagination-info {
    white-space: nowrap;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 2px;
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-text);
    font-size: var(--fs-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
    user-select: none;
}

.pagination-btn:hover:not(:disabled) {
    background: #eaf3ee;
    border-color: var(--c-success);
}

.pagination-btn.active {
    background: #217346;
    color: #fff;
    border-color: #217346;
}

.pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-ellipsis {
    padding: 0 4px;
    color: var(--c-text-light);
    font-weight: 600;
}

.pagination-size {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pagination-size select {
    padding: 2px 6px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    color: var(--c-text);
    background: var(--c-surface);
    cursor: pointer;
}

@media (max-width: 640px) {
    .pagination-bar {
        justify-content: center;
    }
    .pagination-info {
        width: 100%;
        text-align: center;
    }
}