:root{
    --bg:#f3f7ff;
    --bg2:#eef4ff;
    --panel:#ffffff;
    --text:#0f172a;
    --muted:#64748b;
    --primary:#2563eb;
    --primary2:#7c3aed;
    --primary-dark:#1d4ed8;
    --success:#16a34a;
    --warning:#f59e0b;
    --danger:#dc2626;
    --border:#dbe7f5;
    --soft:#f8fbff;
    --side:#07111f;
    --side2:#132b4b;
    --shadow:0 18px 50px rgba(15,23,42,.10);
    --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:
        radial-gradient(circle at top right, rgba(37,99,235,.14), transparent 32rem),
        linear-gradient(180deg,var(--bg),#f8fbff 58%,var(--bg2));
    font-family:Tahoma,Arial,sans-serif;
    color:var(--text);
    font-size:15px;
    line-height:1.7;
}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
.shell{display:grid;grid-template-columns:292px 1fr;min-height:100vh}
.sidebar{
    background:linear-gradient(180deg,var(--side),var(--side2));
    color:#fff;
    padding:28px 18px;
    position:sticky;
    top:0;
    height:100vh;
    overflow:auto;
    box-shadow:-10px 0 28px rgba(15,23,42,.22) inset;
}
.brand{font-size:28px;font-weight:900;letter-spacing:-.6px;margin-bottom:4px;line-height:1.2}
.muted{color:#cbd5e1;font-size:13px;margin-bottom:26px}.sidebar .muted{color:#d7e4f5}
nav{display:grid;gap:8px}
nav a{
    padding:12px 14px;
    border-radius:15px;
    color:#e8f0fb;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border:1px solid transparent;
    transition:.18s ease;
}
nav a:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.10);transform:translateX(-2px)}
nav a.active{background:linear-gradient(135deg,var(--primary),#4f46e5);box-shadow:0 12px 24px rgba(37,99,235,.32);color:#fff}
nav a.logout-link{margin-top:8px;background:rgba(220,38,38,.12);color:#fecaca}
.content{padding:24px 28px;min-width:0}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px}.topbar h1{margin:0;font-size:28px;font-weight:900;letter-spacing:-.4px}.userbox{background:rgba(255,255,255,.82);border:1px solid var(--border);border-radius:999px;padding:9px 15px;color:#334155;box-shadow:0 8px 25px rgba(15,23,42,.05);white-space:nowrap}.card{background:rgba(255,255,255,.92);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-bottom:16px;backdrop-filter:blur(8px)}.card h2{margin:0 0 14px;font-size:21px}.card-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.grid{display:grid;gap:14px}.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.stat{font-size:34px;font-weight:900;color:var(--primary);line-height:1.2}.label{color:var(--muted);font-size:13px}.table-wrap{width:100%;overflow:auto;border:1px solid var(--border);border-radius:18px;background:#fff}table{width:100%;border-collapse:collapse;background:#fff;min-width:780px}th,td{border-bottom:1px solid var(--border);padding:12px 11px;text-align:right;vertical-align:middle;white-space:nowrap}th{background:#f7faff;color:#334155;font-size:13px;font-weight:900}tr:hover td{background:#f8fbff}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:14px;padding:10px 15px;font-weight:900;cursor:pointer;background:#e7eef8;color:#0f172a;margin:2px;min-height:42px;transition:.16s ease}.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(15,23,42,.10)}.btn.primary{background:linear-gradient(135deg,var(--primary),#4f46e5);color:#fff}.btn.primary:hover{background:linear-gradient(135deg,var(--primary-dark),#4338ca)}.btn.danger{background:#fee2e2;color:#991b1b}.btn.success{background:#dcfce7;color:#166534}.btn.small{font-size:12px;padding:7px 10px;min-height:34px;border-radius:11px}.toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}.alert{padding:12px 14px;border-radius:16px;margin-bottom:14px;border:1px solid;font-weight:800}.alert.success{background:#ecfdf5;border-color:#bbf7d0;color:#166534}.alert.error{background:#fef2f2;border-color:#fecaca;color:#991b1b}.alert.info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}.form{display:grid;gap:14px}.field{position:relative}.field label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:900;margin-bottom:7px;color:#0f172a}.field input,.field select,.field textarea,.search{width:100%;padding:12px 13px;border:1px solid var(--border);border-radius:15px;background:#fff;font-family:inherit;outline:none;transition:.18s ease;color:#0f172a}.field input:focus,.field select:focus,.field textarea:focus,.search:focus{border-color:#93c5fd;box-shadow:0 0 0 4px rgba(37,99,235,.10)}.field textarea{min-height:90px}.field.changed input,.field.changed select,.field.changed textarea{border-color:#f59e0b;background:#fff7ed;box-shadow:0 0 0 4px rgba(245,158,11,.13)}.field.changed label:after{content:'تم التغيير ★';font-size:12px;color:#b45309;background:#ffedd5;border:1px solid #fed7aa;border-radius:999px;padding:2px 9px}.change-note{display:none;margin-top:7px;color:#b45309;font-size:12px;font-weight:800}.field.changed .change-note{display:block}.actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:10px;align-items:center}.badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:#eff6ff;color:#1d4ed8;padding:5px 11px;font-size:12px;font-weight:900}.badge.pending{background:#fff7ed;color:#c2410c}.badge.approved{background:#ecfdf5;color:#166534}.badge.rejected{background:#fef2f2;color:#991b1b}.badge.role-admin{background:#eef2ff;color:#3730a3}.badge.role-user{background:#f0fdf4;color:#166534}.summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:10px}.summary-item{background:#f8fbff;border:1px solid var(--border);border-radius:16px;padding:12px}.summary-item .label{display:block;margin-bottom:3px;font-weight:800}.delete-hero{background:linear-gradient(135deg,#fff1f2,#fff7ed);border-color:#fecaca}.code{direction:ltr;text-align:left;font-family:Consolas,monospace;white-space:pre-wrap;background:#f8fafc;border:1px solid var(--border);border-radius:12px;padding:12px}.search{max-width:360px}.login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top right,rgba(37,99,235,.18),transparent 28rem),linear-gradient(180deg,#f6f9ff,#eef4ff);padding:18px}.login .card{width:min(460px,calc(100vw - 32px));padding:28px}.login h1{font-size:34px;margin:0 0 8px;font-weight:900}.help-box{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;border-radius:16px;padding:12px;margin:14px 0;font-weight:800}.form-hint{color:var(--muted);font-size:13px;margin:0 0 12px}.mobile-only{display:none}.desktop-only{display:initial}
@media(max-width:1100px){.shell{grid-template-columns:250px 1fr}.grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){
    body{font-size:14px}.shell{grid-template-columns:1fr}.sidebar{position:sticky;top:0;height:auto;z-index:10;padding:14px 12px;border-radius:0 0 24px 24px}.brand{font-size:23px}.sidebar .muted{margin-bottom:12px}.sidebar nav{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory}.sidebar nav a{flex:0 0 auto;white-space:nowrap;padding:9px 12px;border-radius:999px;scroll-snap-align:start}.content{padding:16px 12px}.topbar{align-items:flex-start;display:grid}.topbar h1{font-size:24px}.userbox{width:100%;white-space:normal;border-radius:16px}.grid.cols-4,.grid.cols-2,.summary-grid{grid-template-columns:1fr}.card{border-radius:18px;padding:14px}.toolbar{display:grid;grid-template-columns:1fr}.toolbar form{width:100%}.search{max-width:none}.btn{width:100%;margin:1px 0}.actions .btn{flex:1 1 100%}.table-wrap{border-radius:15px}.card{overflow:hidden}table{min-width:720px}.mobile-only{display:initial}.desktop-only{display:none}.field.changed label:after{font-size:11px}.login .card{padding:20px}.login h1{font-size:28px}
}
@media(max-width:480px){.content{padding:12px 9px}.topbar h1{font-size:22px}.card{padding:12px}.field input,.field select,.field textarea,.search{padding:11px 12px;border-radius:13px}.stat{font-size:30px}th,td{padding:10px 9px}.summary-item{padding:10px}.brand{font-size:21px}}

/* Combo boxes styled like an app dropdown instead of the browser default menu */
.form-section-title{margin:18px 0 4px;padding:9px 13px;border-radius:14px;background:linear-gradient(135deg,#eff6ff,#f5f3ff);border:1px solid #dbeafe;color:#1e3a8a;font-weight:900;display:flex;align-items:center;gap:8px}.form-section-title:before{content:'•';font-size:22px;color:var(--primary)}
.smart-combo{position:relative;width:100%}.combo-value{position:absolute;opacity:0;pointer-events:none;width:0;height:0}.combo-button{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--border);border-radius:15px;background:#fff;color:#0f172a;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;text-align:right;font-weight:800;transition:.18s ease}.combo-button:hover{border-color:#bfdbfe;background:#f8fbff}.smart-combo.open .combo-button,.combo-button:focus{border-color:#93c5fd;box-shadow:0 0 0 4px rgba(37,99,235,.10);outline:none}.combo-selected{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.combo-arrow{width:28px;height:28px;border-radius:10px;background:#eff6ff;color:var(--primary);display:inline-flex;align-items:center;justify-content:center;font-size:16px;flex:0 0 auto;transition:.18s ease}.smart-combo.open .combo-arrow{transform:rotate(180deg);background:var(--primary);color:#fff}.combo-menu{position:absolute;z-index:60;top:calc(100% + 8px);right:0;left:0;background:#fff;border:1px solid #bfdbfe;border-radius:18px;box-shadow:0 22px 55px rgba(15,23,42,.20);padding:8px;display:none;max-height:292px;overflow:auto}.smart-combo.open .combo-menu{display:block;animation:comboPop .13s ease-out}.combo-search-wrap{position:sticky;top:0;background:#fff;padding-bottom:7px;z-index:1}.combo-search{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:13px;background:#f8fbff;color:#0f172a;font-weight:800;outline:none}.combo-search:focus{border-color:#93c5fd;box-shadow:0 0 0 3px rgba(37,99,235,.10)}.combo-option{width:100%;border:0;background:transparent;color:#0f172a;border-radius:13px;padding:11px 12px;text-align:right;cursor:pointer;font-weight:800;display:flex;align-items:center;justify-content:space-between;gap:8px}.combo-option:hover{background:#eff6ff;color:#1d4ed8}.combo-option.is-selected{background:linear-gradient(135deg,var(--primary),#4f46e5);color:#fff}.combo-option.is-selected:after{content:'✓';font-weight:900}.combo-empty{display:none;text-align:center;color:var(--muted);font-weight:800;padding:12px}.field.changed .combo-button{border-color:#f59e0b;background:#fff7ed;box-shadow:0 0 0 4px rgba(245,158,11,.13)}@keyframes comboPop{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:850px){.form-section-title{margin-top:14px}.combo-menu{position:fixed;right:12px;left:12px;top:auto;bottom:16px;max-height:58vh;border-radius:22px;padding:10px}.combo-option{padding:13px 12px}.combo-button{min-height:46px}.smart-combo.open:before{content:'';position:fixed;inset:0;background:rgba(15,23,42,.32);z-index:50}.smart-combo.open .combo-menu{z-index:61}}

/* Fix: use normal app-like combo boxes and hide change messages until the user actually changes a field */
.field:not(.changed) .change-note{display:none!important}
.change-note{display:none!important;margin-top:7px;color:#b45309;font-size:12px;font-weight:900;background:#fff7ed;border:1px solid #fed7aa;border-radius:999px;padding:4px 10px;width:max-content;max-width:100%}
.field.changed .change-note{display:inline-flex!important;align-items:center;gap:6px}
.field.changed input,.field.changed textarea,.field.changed select{border-color:#f59e0b!important;background:#fff7ed!important;box-shadow:0 0 0 4px rgba(245,158,11,.14)!important}
.field.changed label:after{content:'تم التغيير ★';font-size:12px;color:#b45309;background:#ffedd5;border:1px solid #fed7aa;border-radius:999px;padding:2px 9px;margin-inline-start:8px}
.nice-select,.field select.nice-select{width:100%;min-height:46px;padding:10px 13px;border:1px solid var(--border);border-radius:15px;background:#fff;color:#0f172a;font-family:inherit;font-weight:800;cursor:pointer;outline:none;transition:.18s ease}
.nice-select:hover{border-color:#bfdbfe;background:#f8fbff}
.nice-select:focus{border-color:#93c5fd;box-shadow:0 0 0 4px rgba(37,99,235,.10)}
.nice-select option{font-family:inherit;font-weight:700;padding:8px;background:#fff;color:#0f172a}
.form-section-title{margin:18px 0 4px;padding:9px 13px;border-radius:14px;background:linear-gradient(135deg,#eff6ff,#f5f3ff);border:1px solid #dbeafe;color:#1e3a8a;font-weight:900;display:flex;align-items:center;gap:8px}.form-section-title:before{content:'•';font-size:22px;color:var(--primary)}
/* keep old custom combo classes hidden if an old browser cache mixes files */
.smart-combo,.combo-menu,.combo-search-wrap,.combo-option,.combo-empty{all:unset}
@media(max-width:850px){.field label{font-size:14px}.nice-select,.field select.nice-select{min-height:45px;border-radius:13px}.change-note{font-size:11px;border-radius:12px;width:100%;box-sizing:border-box}.field.changed label:after{font-size:11px}}

/* Final polish for employee request page */
.field.changed label:after{
    content:'★' !important;
    width:24px;
    height:24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    color:#b45309;
    background:#ffedd5;
    border:1px solid #fed7aa;
    border-radius:999px;
    padding:0;
    margin-inline-start:8px;
}
.change-note{display:none!important}
.field label .field-tools,
.field-tools{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-inline-start:auto;
    flex-wrap:wrap;
}
.field-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    padding:3px 10px;
    border-radius:999px;
    border:1px solid #bfdbfe;
    background:#eff6ff;
    color:#1d4ed8;
    font-size:12px;
    font-weight:900;
    transition:.16s ease;
}
.field-link.add{background:#ecfdf5;border-color:#bbf7d0;color:#166534}
.field-link:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(15,23,42,.10)}
.field-link.disabled{
    opacity:.45;
    pointer-events:none;
    filter:grayscale(.35);
}
.readonly-field .readonly-display{
    background:#f8fafc!important;
    cursor:not-allowed;
    color:#334155;
    font-weight:900;
}
.field-help{
    color:#64748b;
    font-size:12px;
    font-weight:800;
    margin-top:6px;
}
.field.changed .field-help{color:#b45309}
@media(max-width:850px){
    .field label{align-items:flex-start;gap:6px;flex-wrap:wrap}
    .field label .field-tools,.field-tools{width:100%;justify-content:flex-start;margin-top:3px}
    .field-link{flex:1;min-height:34px}
}

/* Report preview pages */
.report-hero{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:16px;
    background:
        linear-gradient(135deg,rgba(37,99,235,.08),rgba(124,58,237,.08)),
        rgba(255,255,255,.94);
}
.report-hero h2{margin:0 0 4px;font-size:24px;font-weight:900;color:#0f172a}
.report-quick-form{
    display:grid;
    grid-template-columns:minmax(220px,2fr) minmax(150px,1fr) minmax(150px,1fr) auto;
    gap:12px;
    align-items:end;
}
.report-preview-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    background:
        linear-gradient(135deg,rgba(37,99,235,.08),rgba(124,58,237,.08)),
        rgba(255,255,255,.94);
}
.report-employee-card{display:flex;align-items:center;gap:14px;min-width:260px}
.report-avatar{
    width:58px;height:58px;border-radius:20px;
    display:grid;place-items:center;
    background:linear-gradient(135deg,var(--primary),#4f46e5);
    color:#fff;font-size:28px;box-shadow:0 12px 24px rgba(37,99,235,.25)
}
.report-employee-card h2{margin:0;font-size:23px;font-weight:900;color:#0f172a}
.report-employee-card p{margin:4px 0 0;color:#64748b;font-weight:800}
.report-filter{display:flex;align-items:end;gap:10px;flex-wrap:wrap}
.report-filter .field{min-width:150px}
.report-stats .card,.report-stats-secondary .card{margin-bottom:0;min-height:114px;display:flex;flex-direction:column;justify-content:center}
.small-stat{font-size:28px!important;color:#0f172a!important}
.report-table-wrap table{min-width:900px}
.report-table td:last-child{white-space:normal;min-width:220px;line-height:1.8}
.report-table .warn-row td{background:#fff7ed}
.report-table .warn-row:hover td{background:#ffedd5}
@media(max-width:1000px){
    .report-quick-form{grid-template-columns:1fr 1fr}
    .report-quick-form .btn{grid-column:1 / -1}
}
@media(max-width:850px){
    .report-quick-form{grid-template-columns:1fr}
    .report-preview-head{display:grid;align-items:stretch}
    .report-filter{display:grid;grid-template-columns:1fr;gap:10px}
    .report-filter .field{min-width:0}
    .report-employee-card{align-items:flex-start}.report-avatar{width:50px;height:50px;border-radius:17px;font-size:24px}
    .report-employee-card h2{font-size:20px}
    .report-table-wrap table{min-width:820px}
}

/* Full attendance report preview - looks close to the desktop HTML report, but remains web/mobile friendly */
.print-hidden{ }
.attendance-report-preview{
    background:#fff;
    border:1px solid var(--border);
    border-radius:22px;
    box-shadow:var(--shadow);
    padding:20px;
    margin-bottom:18px;
    overflow:hidden;
}
.attendance-top-line{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:18px;
    align-items:end;
    border-bottom:3px solid var(--primary);
    padding-bottom:12px;
    margin-bottom:14px;
}
.attendance-employee-name{
    font-size:25px;
    font-weight:900;
    color:#0f172a;
    line-height:1.25;
}
.attendance-subtitle{
    color:#64748b;
    font-weight:800;
    margin-top:4px;
}
.attendance-code{
    min-width:150px;
    padding:8px 13px;
    border:1px solid var(--border);
    background:#f8fafc;
    color:#334155;
    text-align:center;
    border-radius:13px;
    font-weight:900;
}
.attendance-meta{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin-bottom:14px;
    color:#475569;
}
.attendance-meta span{
    display:block;
    padding:8px 10px;
    background:#f8fafc;
    border:1px solid #e8eef6;
    border-radius:12px;
    font-weight:800;
}
.attendance-summary-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px;
    margin-bottom:16px;
}
.attendance-summary-card{
    border:1px solid #d9e2f0;
    background:#fff;
    padding:11px;
    min-height:74px;
    border-radius:14px;
}
.attendance-summary-card.total-work{background:#eef6ff;border-color:#bfdcff}
.attendance-summary-card.total-late{background:#fff7ed;border-color:#fed7aa}
.attendance-summary-card.total-early{background:#f5f3ff;border-color:#ddd6fe}
.attendance-summary-card.total-overtime{background:#ecfdf5;border-color:#bbf7d0}
.attendance-summary-card.absent{background:#fee2e2;border-color:#fecaca}
.attendance-summary-card.single-punch{background:#fff7d6;border-color:#fde68a}
.attendance-summary-card.weekly-off{background:#f1f5f9;border-color:#cbd5e1}
.attendance-summary-card.weekly-present{background:#ccfbf1;border-color:#99f6e4}
.attendance-summary-card.late-15{background:#ffedd5;border-color:#fed7aa}
.attendance-summary-card.late-30{background:#fed7aa;border-color:#fdba74}
.attendance-summary-card.late-60{background:#ffedd5;border-color:#fb923c}
.attendance-summary-card.early-60{background:#fae8ff;border-color:#f0abfc}
.attendance-summary-card.early-120{background:#fce7f3;border-color:#f9a8d4}
.attendance-summary-card .label{
    display:block;
    color:#667085;
    font-weight:900;
    margin-bottom:6px;
}
.attendance-summary-card .value{
    display:block;
    color:#172033;
    font-size:19px;
    font-weight:900;
}
.attendance-table-wrap{
    width:100%;
    overflow:auto;
    border:1px solid #d9e2f0;
    border-radius:16px;
    background:#fff;
}
.attendance-table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
    min-width:980px;
}
.attendance-table thead th{
    background:#155eef;
    color:#fff;
    border:1px solid #0f49c7;
    padding:8px 5px;
    font-weight:900;
    text-align:center;
    white-space:normal;
}
.attendance-table tbody td{
    border:1px solid #d9e2f0;
    padding:7px 5px;
    text-align:center;
    vertical-align:middle;
    word-wrap:break-word;
    white-space:normal;
}
.attendance-table tbody tr:nth-child(even) td{background:#fbfdff}
.attendance-table tbody tr.absent td{background:#ffe4ec}
.attendance-table tbody tr.weekly-off td{background:#eeeeee;color:#475467}
.attendance-table tbody tr.missing td{background:#fff1e6}
.attendance-table tbody tr.weekly-off-present td{background:#e8fff7}
.attendance-table .status-cell{text-align:right;line-height:1.8}
.attendance-table .num-cell{direction:ltr;unicode-bidi:plaintext;text-align:center}
.attendance-note-badge{
    display:inline-flex;
    margin-inline-start:6px;
    padding:2px 9px;
    border-radius:999px;
    background:#fff7ed;
    color:#c2410c;
    border:1px solid #fed7aa;
    font-size:12px;
    font-weight:900;
}
.attendance-footer-note{
    margin-top:10px;
    color:#667085;
    font-size:12px;
    font-weight:800;
}
.num{direction:ltr;unicode-bidi:plaintext}
@media(max-width:1100px){
    .attendance-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .attendance-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:850px){
    .attendance-report-preview{padding:14px;border-radius:18px}
    .attendance-top-line{grid-template-columns:1fr;gap:10px;align-items:stretch}
    .attendance-employee-name{font-size:22px}
    .attendance-code{text-align:right;min-width:0}
    .attendance-meta{grid-template-columns:1fr}
    .attendance-summary-grid{grid-template-columns:1fr}
    .attendance-summary-card{min-height:0;padding:10px}
    .attendance-table{min-width:930px}
}

/* Amnko official branding and friendly user messages */
.brand-block{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:22px;
    padding:12px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:22px;
    background:rgba(255,255,255,.06);
}
.brand-logo{
    width:58px;
    height:58px;
    object-fit:contain;
    border-radius:18px;
    padding:8px;
    background:rgba(255,255,255,.95);
    box-shadow:0 14px 28px rgba(0,0,0,.18);
    flex:0 0 auto;
}
.brand-block .brand{margin:0;color:#fff;font-size:25px}
.brand-block .muted{margin:3px 0 0;color:#dbeafe;font-size:12px;font-weight:800}
.sidebar{display:flex;flex-direction:column}
.sidebar nav{flex:1}
.sidebar-credit,
.page-credit,
.made-by{
    color:#64748b;
    font-size:12px;
    font-weight:900;
    text-align:center;
}
.sidebar-credit{
    margin-top:22px;
    padding:12px 10px;
    color:#dbeafe;
    border-radius:16px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.08);
}
.page-credit{
    margin-top:22px;
    padding:12px 0 0;
    border-top:1px solid rgba(219,231,245,.75);
}
.alert{
    display:flex;
    align-items:flex-start;
    gap:10px;
    line-height:1.8;
}
.alert:before{
    content:'!';
    width:24px;
    height:24px;
    min-width:24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    font-weight:900;
    margin-top:2px;
}
.alert.success:before{content:'✓';background:#bbf7d0;color:#166534}
.alert.error:before{background:#fecaca;color:#991b1b}
.alert.info:before{content:'i';background:#bfdbfe;color:#1e40af}

.login{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:24px;
    overflow:hidden;
    background:
        radial-gradient(circle at 18% 15%, rgba(12,188,218,.20), transparent 25rem),
        radial-gradient(circle at 88% 85%, rgba(37,99,235,.16), transparent 24rem),
        linear-gradient(135deg,#edf7ff 0%,#f8fbff 48%,#eef4ff 100%);
}
.login-shell{
    width:min(1080px,100%);
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(360px,.82fr);
    gap:22px;
    align-items:stretch;
}
.login-hero,
.login-card{
    position:relative;
    overflow:hidden;
    min-height:560px;
    border-radius:32px;
}
.login-hero{
    display:grid;
    align-items:end;
    padding:34px;
    color:#fff;
    background:
        linear-gradient(135deg,rgba(7,17,31,.94),rgba(19,43,75,.92)),
        radial-gradient(circle at top right,rgba(14,181,211,.45),transparent 22rem);
    box-shadow:0 28px 70px rgba(15,23,42,.20);
}
.login-hero:before{
    content:'';
    position:absolute;
    inset:-20% auto auto -18%;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(12,188,218,.18);
    filter:blur(4px);
}
.login-hero-inner{position:relative;z-index:1;max-width:560px}
.login-hero-logo{
    width:190px;
    max-width:48vw;
    height:auto;
    object-fit:contain;
    margin-bottom:22px;
    filter:drop-shadow(0 18px 28px rgba(0,0,0,.20));
}
.login-hero h2{
    margin:0 0 12px;
    font-size:38px;
    line-height:1.25;
    font-weight:900;
    letter-spacing:-.8px;
}
.login-hero p{
    margin:0;
    color:#dbeafe;
    font-weight:800;
    font-size:16px;
    max-width:520px;
}
.login-trust-row{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:26px;
}
.login-trust-row span{
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.10);
    border-radius:999px;
    color:#eff6ff;
    font-size:12px;
    font-weight:900;
}
.login-card.card{
    width:100%;
    margin:0;
    padding:34px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:rgba(255,255,255,.90);
    border:1px solid rgba(219,231,245,.92);
    box-shadow:0 28px 70px rgba(15,23,42,.14);
    backdrop-filter:blur(14px);
}
.login-logo-wrap{
    width:104px;
    height:104px;
    border-radius:28px;
    display:grid;
    place-items:center;
    margin:0 auto 16px;
    background:linear-gradient(180deg,#fff,#f8fbff);
    border:1px solid var(--border);
    box-shadow:0 16px 35px rgba(15,23,42,.10);
}
.login-logo{
    width:82px;
    height:82px;
    object-fit:contain;
}
.login-title-block{text-align:center;margin-bottom:22px}
.login h1{
    margin:0 0 7px;
    font-size:36px;
    line-height:1.2;
    letter-spacing:-.7px;
    color:#0f172a;
}
.login .label{font-size:14px;color:#64748b;font-weight:800}
.login-form{gap:15px}
.login-form .field label{font-size:14px}
.login-form .field input{
    min-height:52px;
    border-radius:18px;
    padding:14px 16px;
    background:#fbfdff;
    font-weight:800;
}
.login-form .field input:focus{
    background:#fff;
    border-color:#67e8f9;
    box-shadow:0 0 0 4px rgba(12,188,218,.15);
}
.login-submit{
    min-height:52px;
    border-radius:18px;
    margin-top:4px;
    font-size:16px;
}
.login-card .made-by{margin-top:24px;color:#64748b}
.friendly-error-page{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:22px;
    background:linear-gradient(135deg,#f8fbff,#eef4ff);
}
.friendly-error-card{
    width:min(520px,100%);
    text-align:center;
    background:rgba(255,255,255,.94);
    border:1px solid var(--border);
    border-radius:30px;
    box-shadow:var(--shadow);
    padding:34px 26px;
}
.friendly-error-logo{
    width:104px;
    height:104px;
    object-fit:contain;
    margin-bottom:12px;
}
.friendly-error-card h1{margin:0 0 8px;font-size:32px;color:#0f172a}
.friendly-error-card p{margin:0 0 20px;color:#475569;font-weight:800}
.friendly-error-card .made-by{margin-top:22px}
@media(max-width:980px){
    .login-shell{grid-template-columns:1fr;max-width:560px}
    .login-hero{display:none}
    .login-card,.login-card.card{min-height:0}
}
@media(max-width:850px){
    .brand-block{margin-bottom:12px;padding:8px 10px;border-radius:18px;min-width:max-content}
    .brand-logo{width:42px;height:42px;border-radius:14px;padding:6px}
    .brand-block .brand{font-size:20px}
    .brand-block .muted{font-size:11px;margin:0}
    .sidebar{display:block}
    .sidebar-credit{display:none}
    .page-credit{font-size:11px;margin-top:16px}
    .alert{border-radius:14px}
}
@media(max-width:560px){
    .login{padding:14px}
    .login-card.card{padding:24px 18px;border-radius:26px}
    .login-logo-wrap{width:88px;height:88px;border-radius:24px}
    .login-logo{width:70px;height:70px}
    .login h1{font-size:30px}
    .login-form .field input{min-height:49px;border-radius:16px}
}

/* Permissions V4 stabilization polish */
.badge.processing{background:#eff6ff;color:#1d4ed8}
.badge.failed{background:#fef2f2;color:#b91c1c}
.badge.conflict{background:#fff7ed;color:#c2410c;border:1px solid #fed7aa}
.pro-toolbar{align-items:center;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(248,251,255,.96))}
.password-card{max-width:780px;margin-inline:auto}
.sidebar nav{display:grid!important;grid-template-columns:1fr!important;grid-auto-rows:auto!important;align-content:start!important;gap:8px!important;height:auto!important;min-height:0!important;margin-top:0!important}
.sidebar nav a{height:auto!important;min-height:44px!important;max-height:none!important;flex:0 0 auto!important;padding:12px 14px!important;display:flex!important;align-items:center!important;justify-content:space-between!important}
.sidebar nav a:before{content:'';width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.28);margin-inline-end:2px;order:2}.sidebar nav a.active:before{background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.12)}
.table-wrap::-webkit-scrollbar,.combo-menu::-webkit-scrollbar{height:10px;width:10px}.table-wrap::-webkit-scrollbar-track,.combo-menu::-webkit-scrollbar-track{background:#eef4ff;border-radius:999px}.table-wrap::-webkit-scrollbar-thumb,.combo-menu::-webkit-scrollbar-thumb{background:#b6c8e4;border-radius:999px;border:2px solid #eef4ff}.table-wrap::-webkit-scrollbar-thumb:hover,.combo-menu::-webkit-scrollbar-thumb:hover{background:#8ea6c8}
@media(max-width:850px){.sidebar nav{display:flex!important;flex-direction:row!important;overflow-x:auto!important}.sidebar nav a{white-space:nowrap!important;min-height:38px!important;padding:9px 12px!important}.sidebar nav a:before{display:none}}