:root {
    --bg: #f3f6fb;
    --panel: #ffffff;
    --line: #dbe2ea;
    --text: #172033;
    --muted: #64748b;
    --primary: #2563eb;
    --danger: #dc2626;
    --success: #16a34a;
    --warning: #d97706;
    --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    --radius: 16px;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: Inter, Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
}
.app-shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
}
.sidebar {
    background: #0f172a;
    color: #fff;
    padding: 24px 18px;
}
.brand {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 24px;
}
.sidebar nav {
    display: grid;
    gap: 10px;
}
.sidebar a {
    color: #cbd5e1;
    text-decoration: none;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
}
.sidebar a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.content { padding: 24px; }
.topbar { margin-bottom: 22px; }
.topbar h1 { margin: 0 0 6px; font-size: 1.8rem; }
.muted { color: var(--muted); margin: 0; }
.grid-4, .grid-2 {
    display: grid;
    gap: 18px;
}
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
}
.stat-value { font-size: 1.8rem; font-weight: 700; margin-top: 8px; }
.table-wrap { overflow-x: auto; }
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--panel);
}
th, td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}
th { background: #f8fafc; font-size: .92rem; }
.form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.form-grid .full { grid-column: 1 / -1; }
label { display: block; font-weight: 600; margin-bottom: 6px; }
input, select, textarea, button {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font: inherit;
}
button, .btn {
    background: var(--primary);
    color: white;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    width: auto;
    padding: 10px 14px;
}
.btn.secondary { background: #475569; }
.btn.danger { background: var(--danger); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.alert {
    padding: 12px 14px;
    border-radius: 12px;
    margin-bottom: 18px;
}
.alert-success { background: #dcfce7; color: #166534; }
.alert-error { background: #fee2e2; color: #991b1b; }
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
}
.calendar-cell {
    min-height: 140px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 10px;
    box-shadow: var(--shadow);
}
.calendar-date {
    font-weight: 700;
    margin-bottom: 10px;
}
.shift-pill {
    color: #fff;
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 8px;
    font-size: .88rem;
}
.section-title { margin: 0 0 14px; }
.filter-bar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: end;
    margin-bottom: 16px;
}
.filter-bar form { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.small { font-size: .9rem; color: var(--muted); }
@media (max-width: 1000px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { padding-bottom: 10px; }
    .grid-4, .grid-2, .form-grid, .calendar-grid { grid-template-columns: 1fr; }
}


.calendar-grid.calendar-grid-head {
    margin-bottom: 12px;
}
.calendar-cell.calendar-clickable {
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.calendar-cell.calendar-clickable:hover {
    transform: translateY(-2px);
    border-color: #93c5fd;
}
.calendar-cell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.calendar-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #eff6ff;
    color: var(--primary);
    font-weight: 700;
    border: 1px solid #bfdbfe;
    flex: 0 0 auto;
}
.shift-pill {
    position: relative;
    cursor: pointer;
}
.shift-pill small {
    display: block;
    opacity: .95;
}
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 999;
}
.modal-overlay.active { display: flex; }
.modal {
    width: min(720px, 100%);
    max-height: 92vh;
    overflow: auto;
    background: var(--panel);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .28);
    border: 1px solid var(--line);
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}
.modal-body {
    padding: 20px;
}
.icon-btn {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 22px;
    line-height: 1;
    padding: 0;
}
.form-note {
    margin: -2px 0 16px;
    color: var(--muted);
    font-size: .92rem;
}
.hidden { display: none !important; }
@media (max-width: 1000px) {
    .calendar-grid.calendar-grid-head { grid-template-columns: repeat(7, minmax(120px, 1fr)); }
    .calendar-grid { overflow-x: auto; }
}


.print-toolbar{
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:flex-end;
    margin-top:12px;
    flex-wrap:wrap;
}
.print-toolbar .btn{
    min-width:130px;
    text-align:center;
}
.report-shell{
    display:grid;
    gap:18px;
}
.report-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
}
.report-title{
    margin:0;
    font-size:1.25rem;
}
.report-meta{
    color:var(--muted);
    font-size:.95rem;
    margin-top:6px;
}
.report-badge{
    display:inline-block;
    padding:6px 10px;
    border-radius:999px;
    background:#eff6ff;
    color:#1d4ed8;
    font-weight:700;
    font-size:.85rem;
}
.report-summary{
    display:grid;
    gap:12px;
}
.report-summary.compact-4{
    grid-template-columns:repeat(4,minmax(0,1fr));
}
.print-only{ display:none; }

.calendar-grid.week-print{
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.calendar-grid.month-print{
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.calendar-grid .card.day-head{
    padding:10px;
    text-align:center;
    font-weight:700;
}
.calendar-cell{
    min-height:180px;
}
.monthly-calendar .calendar-cell{
    min-height:150px;
}
.calendar-cell .cell-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:10px;
}
.calendar-cell .date-number{
    font-weight:700;
    font-size:1rem;
}
.shift-pill{
    margin-bottom:8px;
    border-radius:12px;
    padding:8px 10px;
}


@media print {
    @page {
        size: A4 landscape;
        margin: 5mm;
    }

    html, body {
        width: 297mm;
        height: 210mm;
        overflow: hidden !important;
    }

    body {
        background: #fff !important;
        color: #000;
        font-size: 9px;
        line-height: 1.15;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .sidebar,
    .topbar,
    .filter-bar form,
    .filter-bar .btn,
    .filter-bar button,
    .print-toolbar,
    .modal-overlay,
    .modal-backdrop,
    .icon-btn,
    [data-open-add-inline],
    .alert {
        display: none !important;
    }

    .app-shell {
        display: block;
    }

    .content {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .report-page .report-shell {
        gap: 6px !important;
    }

    .card,
    table,
    .calendar-cell,
    .calendar-grid .card.day-head {
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .card,
    .calendar-cell,
    .calendar-grid .card.day-head,
    table,
    th,
    td {
        border-color: #bfc7d4 !important;
    }

    .filter-bar {
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        margin-bottom: 4px !important;
    }

    .print-only {
        display: block !important;
    }

    .report-header {
        border-bottom: 1px solid #111827;
        padding-bottom: 4px;
        margin-bottom: 2px;
    }

    .report-title {
        font-size: 14px !important;
        margin: 0 !important;
    }

    .report-meta,
    .small,
    .muted {
        color: #334155 !important;
        font-size: 8px !important;
        line-height: 1.1 !important;
        margin: 0 !important;
    }

    .report-badge {
        background: #fff !important;
        color: #111827 !important;
        border: 1px solid #111827;
        padding: 3px 6px !important;
        font-size: 8px !important;
    }

    .report-summary.compact-4,
    .grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 4px !important;
    }

    .report-summary .card,
    .grid-4 .card {
        padding: 6px !important;
    }

    .stat-value {
        font-size: 12px !important;
        margin-top: 2px !important;
    }

    .calendar-grid.week-print,
    .calendar-grid.month-print {
        gap: 2px !important;
    }

    .calendar-grid .card.day-head {
        padding: 3px !important;
        font-size: 8px !important;
        background: #f8fafc !important;
        min-height: auto !important;
    }

    .calendar-cell {
        min-height: 72px !important;
        max-height: 72px !important;
        padding: 3px !important;
        break-inside: avoid;
        page-break-inside: avoid;
        overflow: hidden !important;
    }

    .weekly-report .calendar-cell {
        min-height: 84px !important;
        max-height: 84px !important;
    }

    .monthly-calendar .calendar-cell {
        min-height: 48px !important;
        max-height: 48px !important;
    }

    .calendar-cell .cell-top {
        margin-bottom: 3px !important;
    }

    .calendar-cell .date-number {
        font-size: 9px !important;
        line-height: 1 !important;
    }

    .shift-pill {
        padding: 2px 3px !important;
        margin-bottom: 2px !important;
        font-size: 7px !important;
        line-height: 1.05 !important;
        color: #111 !important;
        overflow: hidden !important;
    }

    .shift-pill strong,
    .shift-pill small {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.05 !important;
    }

    .monthly-report .shift-pill small:last-child,
    .monthly-report .small {
        display: none !important;
    }

    .weekly-report .small {
        font-size: 7px !important;
    }

    .table-wrap {
        overflow: visible !important;
    }

    table {
        table-layout: fixed !important;
        width: 100% !important;
    }

    table th {
        background: #f8fafc !important;
        color: #111 !important;
        font-size: 8px !important;
    }

    table th,
    table td {
        padding: 4px 4px !important;
        font-size: 8px !important;
        line-height: 1.1 !important;
        word-wrap: break-word;
    }

    a {
        color: inherit !important;
        text-decoration: none !important;
    }

    .section-title {
        margin: 0 0 4px 0 !important;
        font-size: 11px !important;
    }

    .print-page-break {
        page-break-before: auto !important;
    }

    /* Force single-page fitting by view */
    .weekly-report .report-shell {
        transform: scale(0.92);
        transform-origin: top left;
        width: 108.7%;
    }

    .biweekly-report .report-shell {
        transform: scale(0.90);
        transform-origin: top left;
        width: 111.2%;
    }

    .monthly-report .report-shell {
        transform: scale(0.76);
        transform-origin: top left;
        width: 131.6%;
    }
}


@media (max-width: 900px){
    .report-summary.compact-4{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}


/* Extra density for single-page print mode */
.report-page .filter-bar > .small { margin-top: 2px; }
.report-page .calendar-cell .small { margin: 0; }


.employee-picker-list{
    display:grid;
    gap:10px;
    max-height:240px;
    overflow:auto;
    padding:4px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#f8fafc;
}
.employee-picker-item{
    width:100%;
    display:grid;
    grid-template-columns:140px 1fr;
    align-items:center;
    gap:12px;
    text-align:left;
    background:#fff;
    color:var(--text);
    border:1px solid var(--line);
    border-left:6px solid var(--employee-color, var(--primary));
    border-radius:12px;
    padding:12px 14px;
    cursor:pointer;
    transition:.15s ease;
}
.employee-picker-item:hover{
    border-color:var(--employee-color, var(--primary));
    transform:translateY(-1px);
}
.employee-picker-item.active{
    border-color:var(--employee-color, var(--primary));
    box-shadow:0 0 0 3px rgba(37,99,235,.12);
    background:#eff6ff;
}
.employee-time-preview{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
    min-height:42px;
}
.time-chip{
    display:grid;
    gap:2px;
    padding:8px 10px;
    border-radius:10px;
    background:#eef2ff;
    color:#1e3a8a;
    white-space:nowrap;
}
.time-chip small{
    font-size:.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:#475569;
}
.time-chip strong{
    font-size:.96rem;
}
.employee-picker-name-wrap{
    display:grid;
    gap:3px;
}
.employee-picker-name-wrap strong{
    font-size:0.98rem;
}
.employee-picker-name-wrap small{
    color:var(--muted);
}
@media (max-width: 700px){
    .employee-picker-item{
        grid-template-columns:1fr;
        gap:8px;
    }
    .employee-time-preview{
        grid-template-columns:1fr;
    }
}
@media print{
    .employee-picker-list{
        max-height:none !important;
        overflow:visible !important;
    }
}


/* Wider, denser employee picker */
.modal {
    width: min(1100px, 96vw);
}

.modal .form-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.employee-picker-list{
    max-height: 380px;
    padding: 3px;
    gap: 6px;
}

.employee-picker-item{
    grid-template-columns: 200px 1fr;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
}

.employee-picker-name-wrap{
    gap: 1px;
}

.employee-picker-name-wrap strong{
    font-size: 0.90rem;
    line-height: 1.15;
}

.employee-picker-name-wrap small{
    font-size: 0.76rem;
    line-height: 1.1;
}

.employee-time-preview{
    gap: 6px;
}

.time-chip{
    padding: 6px 8px;
    border-radius: 8px;
}

.time-chip small{
    font-size: .62rem;
    line-height: 1;
}

.time-chip strong{
    font-size: .82rem;
    line-height: 1.05;
}

@media (max-width: 900px){
    .modal {
        width: min(98vw, 980px);
    }

    .employee-picker-item{
        grid-template-columns: 180px 1fr;
        padding: 7px 9px;
    }

    .employee-picker-name-wrap strong{
        font-size: 0.84rem;
    }

    .employee-picker-name-wrap small{
        font-size: 0.72rem;
    }

    .time-chip strong{
        font-size: .78rem;
    }
}

@media (max-width: 700px){
    .modal .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .employee-picker-list{
        max-height: 320px;
        gap: 5px;
    }

    .employee-picker-item{
        grid-template-columns: 150px 1fr;
        gap: 8px;
        padding: 6px 8px;
    }

    .employee-picker-name-wrap strong{
        font-size: 0.80rem;
    }

    .employee-picker-name-wrap small{
        font-size: 0.68rem;
    }

    .time-chip{
        padding: 5px 7px;
    }

    .time-chip small{
        font-size: .58rem;
    }

    .time-chip strong{
        font-size: .74rem;
    }
}

@media (max-width: 520px){
    .modal {
        width: 99vw;
    }

    .employee-picker-item{
        grid-template-columns: 132px 1fr;
        gap: 6px;
        padding: 5px 7px;
    }

    .employee-picker-name-wrap strong{
        font-size: 0.74rem;
    }

    .employee-picker-name-wrap small{
        font-size: 0.62rem;
    }

    .time-chip{
        padding: 4px 6px;
        gap: 1px;
    }

    .time-chip small{
        font-size: .54rem;
    }

    .time-chip strong{
        font-size: .68rem;
    }
}


.hidden-field-block{
    display:none !important;
}
.employee-picker-list{
    max-height:none !important;
    overflow:visible !important;
}
.employee-schedule-table{
    display:grid;
    gap:6px;
}
.employee-schedule-head{
    display:grid;
    grid-template-columns:1.6fr 150px 150px;
    gap:10px;
    padding:6px 10px;
    font-size:.78rem;
    font-weight:700;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.04em;
}
.employee-schedule-row{
    display:grid !important;
    grid-template-columns:1.6fr 150px 150px;
    align-items:center;
    gap:10px;
    cursor:pointer;
}
.employee-schedule-row.active{
    background:#eff6ff;
}
.row-time-input{
    width:100%;
    min-width:0;
    padding:7px 8px;
    font-size:.88rem;
    border:1px solid #cbd5e1;
    border-radius:8px;
    background:#fff;
}
.employee-picker-name-wrap strong{
    font-size:.88rem;
}
.employee-picker-name-wrap small{
    font-size:.72rem;
}
@media (max-width: 900px){
    .modal{
        width:min(1200px, 98vw) !important;
    }
    .employee-schedule-head,
    .employee-schedule-row{
        grid-template-columns:1.4fr 130px 130px;
        gap:8px;
    }
    .row-time-input{
        padding:6px 7px;
        font-size:.82rem;
    }
    .employee-picker-name-wrap strong{
        font-size:.8rem;
    }
    .employee-picker-name-wrap small{
        font-size:.66rem;
    }
}
@media (max-width: 640px){
    .employee-schedule-head,
    .employee-schedule-row{
        grid-template-columns:1.2fr 104px 104px;
        gap:6px;
    }
    .employee-schedule-head{
        font-size:.66rem;
        padding:4px 6px;
    }
    .row-time-input{
        padding:5px 6px;
        font-size:.74rem;
    }
    .employee-picker-name-wrap strong{
        font-size:.72rem;
    }
    .employee-picker-name-wrap small{
        font-size:.6rem;
    }
}


/* Side-by-side employee schedule rows to fit more employees on screen */
.employee-schedule-table{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:8px 10px;
    align-items:start;
}
.employee-schedule-head{
    display:none !important;
}
.employee-schedule-row{
    display:grid !important;
    grid-template-columns: 1.2fr 110px 110px;
    align-items:center;
    gap:8px;
    min-height:auto;
    padding:7px 8px;
}
.employee-schedule-row .employee-picker-name-wrap{
    min-width:0;
}
.employee-schedule-row .employee-picker-name-wrap strong{
    font-size:.80rem;
    line-height:1.1;
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.employee-schedule-row .employee-picker-name-wrap small{
    font-size:.64rem;
    line-height:1.05;
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.row-time-input{
    padding:5px 6px;
    font-size:.74rem;
    height:34px;
}
.modal{
    width:min(1280px, 98vw) !important;
}

@media (max-width: 1100px){
    .employee-schedule-table{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap:7px 8px;
    }
    .employee-schedule-row{
        grid-template-columns: 1.1fr 100px 100px;
        gap:7px;
        padding:6px 7px;
    }
    .row-time-input{
        font-size:.70rem;
        padding:4px 5px;
        height:32px;
    }
    .employee-schedule-row .employee-picker-name-wrap strong{
        font-size:.76rem;
    }
    .employee-schedule-row .employee-picker-name-wrap small{
        font-size:.60rem;
    }
}

@media (max-width: 760px){
    .employee-schedule-table{
        grid-template-columns: 1fr;
    }
    .employee-schedule-row{
        grid-template-columns: 1.2fr 104px 104px;
    }
}


/* Stronger single-page print fitting */
@media print {
    @page {
        size: A4 landscape;
        margin: 4mm;
    }

    html, body {
        width: 100%;
        height: auto;
        overflow: hidden !important;
    }

    body.printing-fit .content,
    body.printing-fit .report-shell {
        overflow: visible !important;
    }

    .content {
        padding: 0 !important;
    }

    .report-shell {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
    }

    .report-shell > * {
        margin-bottom: 4px !important;
    }

    .card {
        padding: 6px !important;
    }

    .grid-4,
    .report-summary.compact-4 {
        gap: 4px !important;
    }

    .employee-schedule-table {
        gap: 3px 4px !important;
    }

    .employee-schedule-row {
        padding: 3px 4px !important;
        gap: 4px !important;
    }

    .row-time-input {
        height: 24px !important;
        padding: 2px 4px !important;
        font-size: 9px !important;
    }

    .table-wrap {
        overflow: visible !important;
    }
}


/* Calendar-only print mode for week and month */
.print-calendar-area{
    display:block;
}

@media print {
    .weekly-report .report-summary,
    .monthly-report .report-summary,
    .weekly-report .alert,
    .monthly-report .alert,
    .weekly-report .modal-backdrop,
    .monthly-report .modal-backdrop,
    .weekly-report .section-title,
    .monthly-report .section-title,
    .weekly-report [data-open-add-inline],
    .monthly-report [data-open-add-inline] {
        display:none !important;
    }

    .weekly-report .filter-bar,
    .monthly-report .filter-bar {
        border:none !important;
        box-shadow:none !important;
        padding:0 !important;
        margin:0 0 4px 0 !important;
        background:transparent !important;
    }

    .weekly-report .filter-bar form,
    .monthly-report .filter-bar form,
    .weekly-report .filter-bar > .small,
    .monthly-report .filter-bar > .small,
    .weekly-report .print-toolbar,
    .monthly-report .print-toolbar,
    .weekly-report .report-badge,
    .monthly-report .report-badge {
        display:none !important;
    }

    .weekly-report .report-header.print-only,
    .monthly-report .report-header.print-only {
        display:flex !important;
        margin:0 0 4px 0 !important;
        padding:0 0 4px 0 !important;
        border-bottom:1px solid #111827 !important;
    }

    .weekly-report .report-title,
    .monthly-report .report-title {
        font-size:14px !important;
        margin:0 !important;
    }

    .weekly-report .report-meta,
    .monthly-report .report-meta {
        font-size:9px !important;
        margin-top:2px !important;
    }

    .weekly-report .print-calendar-area,
    .monthly-report .print-calendar-area {
        display:block !important;
        width:100% !important;
        max-width:none !important;
    }

    .weekly-report .report-shell > :not(.filter-bar):not(.print-calendar-area),
    .monthly-report .report-shell > :not(.filter-bar):not(.print-calendar-area) {
        display:none !important;
    }

    .weekly-report .calendar-grid.week-print,
    .weekly-report .calendar-grid.calendar-grid-head.week-print,
    .monthly-report .calendar-grid.month-print,
    .monthly-report .calendar-grid.calendar-grid-head.month-print {
        gap:2px !important;
    }

    .weekly-report .calendar-grid .card.day-head,
    .monthly-report .calendar-grid .card.day-head {
        padding:2px !important;
        font-size:8px !important;
        min-height:auto !important;
    }

    .weekly-report .calendar-cell {
        min-height:88px !important;
        max-height:88px !important;
        padding:2px !important;
        overflow:hidden !important;
    }

    .monthly-report .calendar-cell {
        min-height:44px !important;
        max-height:44px !important;
        padding:2px !important;
        overflow:hidden !important;
    }

    .weekly-report .calendar-cell .date-number,
    .monthly-report .calendar-cell .date-number {
        font-size:8px !important;
        line-height:1 !important;
    }

    .weekly-report .shift-pill,
    .monthly-report .shift-pill {
        padding:1px 2px !important;
        margin-bottom:1px !important;
        font-size:6.5px !important;
        line-height:1 !important;
        border-width:1px !important;
    }

    .weekly-report .shift-pill strong,
    .weekly-report .shift-pill small,
    .monthly-report .shift-pill strong,
    .monthly-report .shift-pill small {
        line-height:1 !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }

    .monthly-report .shift-pill small:last-child {
        display:none !important;
    }

    .weekly-report .print-calendar-area {
        transform:scale(0.96) !important;
        transform-origin:top left !important;
        width:104.2% !important;
    }

    .monthly-report .print-calendar-area {
        transform:scale(0.74) !important;
        transform-origin:top left !important;
        width:135.2% !important;
    }
}


/* ADP-style compact print matrix */
.print-matrix-area{
    display:none;
}
.adp-print-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:12px;
    margin-bottom:4px;
    border-bottom:1px solid #111827;
    padding-bottom:4px;
}
.adp-print-header h2{
    margin:0;
    font-size:16px;
    line-height:1.1;
}
.adp-meta{
    font-size:10px;
    color:#334155;
    line-height:1.1;
    margin-top:2px;
}
.adp-right{
    text-align:right;
    white-space:nowrap;
}
.adp-report-table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
}
.adp-report-table th,
.adp-report-table td{
    border:1px solid #94a3b8;
    text-align:center;
    vertical-align:middle;
    padding:2px 1px;
    font-size:8px;
    line-height:1;
    overflow:hidden;
}
.adp-report-table th{
    background:#f8fafc;
    font-weight:700;
}
.adp-report-table th span{
    font-size:7px;
    font-weight:600;
}
.adp-report-table .emp-col{
    width:120px;
    text-align:left;
    padding-left:4px;
}
.adp-report-table .hours-col{
    width:42px;
    font-weight:700;
}
.adp-report-table .emp-col strong{
    display:block;
    font-size:8px;
    line-height:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.adp-report-table .emp-col small{
    display:block;
    font-size:6px;
    color:#475569;
    line-height:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.shift-code{
    font-size:6px;
    line-height:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.off-code{
    font-size:7px;
    color:#94a3b8;
}
.month-report-table .emp-col{
    width:100px;
}
.month-report-table .hours-col{
    width:34px;
}
.month-report-table th,
.month-report-table td{
    font-size:6px;
    padding:1px 0;
}
.month-report-table .emp-col strong{
    font-size:7px;
}
.month-report-table .emp-col small{
    font-size:5px;
}
.month-report-table .shift-code{
    font-size:5px;
}

@media print {
    .print-matrix-area{
        display:block !important;
        width:100% !important;
        max-width:none !important;
    }

    .weekly-report .print-calendar-area,
    .monthly-report .print-calendar-area{
        display:none !important;
    }

    .weekly-report .report-shell > :not(.filter-bar):not(.print-matrix-area),
    .monthly-report .report-shell > :not(.filter-bar):not(.print-matrix-area){
        display:none !important;
    }

    .weekly-report .filter-bar,
    .monthly-report .filter-bar{
        border:none !important;
        background:transparent !important;
        box-shadow:none !important;
        padding:0 !important;
        margin:0 0 4px 0 !important;
        min-height:0 !important;
    }

    .weekly-report .filter-bar form,
    .monthly-report .filter-bar form,
    .weekly-report .filter-bar > .small,
    .monthly-report .filter-bar > .small,
    .weekly-report .report-badge,
    .monthly-report .report-badge,
    .weekly-report .print-toolbar,
    .monthly-report .print-toolbar,
    .weekly-report .report-header.print-only,
    .monthly-report .report-header.print-only{
        display:none !important;
    }

    .weekly-report .print-matrix-area{
        transform:scale(0.96) !important;
        transform-origin:top left !important;
        width:104.2% !important;
    }

    .monthly-report .print-matrix-area{
        transform:scale(0.80) !important;
        transform-origin:top left !important;
        width:125% !important;
    }
}


/* Fix print preview visibility for ADP-style report */
.print-matrix-area{
    display:none;
}
@media print {
    .print-matrix-area{
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;
    }
}


/* Final print preview visibility fix */
@media screen {
    .print-matrix-area {
        display: none !important;
    }
}
@media print {
    .print-matrix-area {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 5 !important;
    }
    .weekly-report .report-shell > .print-matrix-area,
    .monthly-report .report-shell > .print-matrix-area {
        display: block !important;
    }
}


/* Final fixed print rules */
@media print {
    .weekly-report .print-matrix-area,
    .monthly-report .print-matrix-area {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
        position: relative !important;
        z-index: 999 !important;
        page-break-inside: avoid !important;
    }

    .weekly-report .report-shell > :not(.filter-bar):not(.print-matrix-area),
    .monthly-report .report-shell > :not(.filter-bar):not(.print-matrix-area) {
        display: none !important;
    }

    .weekly-report .filter-bar,
    .monthly-report .filter-bar {
        display: none !important;
    }

    .weekly-report .print-calendar-area,
    .monthly-report .print-calendar-area {
        display: none !important;
    }

    .adp-print-header {
        display: flex !important;
    }

    .adp-report-table {
        display: table !important;
        width: 100% !important;
    }

    .adp-report-table th,
    .adp-report-table td {
        color: #000 !important;
        background: #fff !important;
    }
}


.employee-schedule-head,
.employee-schedule-row{
    grid-template-columns: 52px 1.3fr 110px 110px 70px !important;
}
.employee-cell-center{
    display:flex;
    align-items:center;
    justify-content:center;
}
.row-select-input,
.row-off-input{
    width:18px;
    height:18px;
    accent-color:#2563eb;
}
.off-toggle{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin:0;
    font-weight:600;
    font-size:.78rem;
}
.off-row{
    background:#fff7ed !important;
    border-color:#f59e0b !important;
}
.off-row .employee-picker-name-wrap strong{
    color:#9a3412;
}
@media (max-width: 1100px){
    .employee-schedule-head,
    .employee-schedule-row{
        grid-template-columns: 42px 1.1fr 94px 94px 58px !important;
    }
    .off-toggle{
        font-size:.68rem;
    }
}
@media (max-width: 760px){
    .employee-schedule-head,
    .employee-schedule-row{
        grid-template-columns: 36px 1fr 88px 88px 50px !important;
    }
    .off-toggle span{
        display:none;
    }
}


/* Single visible Off checkbox layout */
.employee-schedule-head,
.employee-schedule-row{
    grid-template-columns: 1.45fr 110px 110px 70px !important;
}
.row-select-hidden{
    display:none !important;
}
.employee-schedule-row{
    cursor:pointer;
}
.employee-schedule-row.active{
    background:#eff6ff !important;
    border-color:#2563eb !important;
}
.employee-schedule-row.active .employee-picker-name-wrap strong{
    color:#1d4ed8;
}
@media (max-width: 1100px){
    .employee-schedule-head,
    .employee-schedule-row{
        grid-template-columns: 1.2fr 94px 94px 58px !important;
    }
}
@media (max-width: 760px){
    .employee-schedule-head,
    .employee-schedule-row{
        grid-template-columns: 1fr 88px 88px 50px !important;
    }
}
/* simple icon menu */
.menu-with-icons a{
    display:flex;
    align-items:center;
    gap:10px;
}

.menu-icon{
    font-size:18px;
    width:22px;
    text-align:center;
}