@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap");

:root{
    --app-primary:#7c3b3b;
    --app-secondary:#6b3fa0;
    --app-accent:#4aa34a;
    --app-gold:#c3922b;
    --app-ink:#0f172a;
    --app-muted:#64748b;
    --app-border:#d7dee7;
    --app-bg:#f5f7fb;
    --app-card:#ffffff;
    --app-shadow:0 16px 40px rgba(15,23,42,.10);
    --app-radius:18px;
}

html{font-size:16px}
body.app-body{
    direction:rtl;
    font-family:"Cairo",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--app-ink);
    background:var(--app-bg);
}
body.app-body *,body.app-body *::before,body.app-body *::after{box-sizing:border-box}
a{color:inherit}
img{max-width:100%;height:auto}
input,select,textarea,button{font:inherit}
button{cursor:pointer}
body.app-body .app-hidden{display:none!important}
body.app-body .app-form-row{display:flex;gap:12px;flex-wrap:wrap}
body.app-body .app-form-row > *{flex:1 1 220px}
body.app-body .app-badge{
    display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
    background:rgba(107,63,160,.12);color:var(--app-secondary);font-size:.85rem;font-weight:700
}
body.app-body .app-alert{
    border-radius:14px;padding:12px 14px;margin:12px 0;border:1px solid transparent;font-weight:600
}
body.app-body .app-alert-success{background:#ecfdf3;border-color:#86efac;color:#166534}
body.app-body .app-alert-error{background:#fef2f2;border-color:#fca5a5;color:#991b1b}
body.app-body .app-alert-warn{background:#fff7ed;border-color:#fdba74;color:#9a3412}
body.app-body .app-section-card{
    background:var(--app-card);border:1px solid rgba(124,59,59,.14);border-radius:var(--app-radius);
    box-shadow:var(--app-shadow)
}
body.app-body .app-page-title{font-size:1.35rem;font-weight:800;color:var(--app-primary)}
body.app-body .app-page-subtitle{color:var(--app-muted);font-size:.95rem}
body.app-body .app-input,
body.app-body input[type="text"],
body.app-body input[type="date"],
body.app-body input[type="time"],
body.app-body input[type="number"],
body.app-body input[type="password"],
body.app-body input[type="month"],
body.app-body select,
body.app-body textarea{
    border:1px solid var(--app-border);border-radius:12px;padding:10px 12px;background:#fff;outline:none;
}
body.app-body input:focus,
body.app-body select:focus,
body.app-body textarea:focus{
    border-color:rgba(107,63,160,.45);box-shadow:0 0 0 4px rgba(107,63,160,.08)
}
body.app-body .app-btn,
body.app-body button,
body.app-body input[type="submit"]{
    border:none;border-radius:12px;padding:10px 16px;font-weight:700;
}
body.app-body table{border-collapse:collapse}
body.app-body th,body.app-body td{vertical-align:middle}
body.app-body .app-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
body.app-body .app-muted{color:var(--app-muted)}
body.app-body .app-school-name::before{content:"ثانوية الفرقان الشرعية للبنين والبنات"}


/* ab.php */

        body.page-ab * {box-sizing:border-box; margin:0; padding:0;}
        body.page-ab {direction: rtl;
            font-family: "Cairo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background: linear-gradient(135deg, #e3f2fd, #f9fbe7);
            min-height: 100vh;
            padding: 20px 10px;}
        body.page-ab .page {max-width: 1100px; margin: 0 auto;}
        body.page-ab .page-header {display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 18px;}
        body.page-ab .header-left {display: flex; flex-direction: column; gap: 4px;}
        body.page-ab .header-right {display: flex; flex-wrap: wrap; gap: 8px; align-items: center;}
        body.page-ab .page-title {font-size: 1.4rem; font-weight: 700; color: #263238;}
        body.page-ab .page-subtitle {font-size: 0.9rem; color: #607d8b;}
        body.page-ab .emp-info {font-size: 0.9rem; color: #455a64; margin-top: 2px; display: inline-block;}

        body.page-ab .back-link {font-size: 0.9rem;
            text-decoration: none;
            color: #1976d2;
            padding: 6px 12px;
            border-radius: 999px;
            background-color: rgba(25, 118, 210, 0.06);
            transition: background-color 0.12s ease;
            white-space: nowrap;}
        body.page-ab .back-link:hover {background-color: rgba(25, 118, 210, 0.12);}

        body.page-ab .btn-print {border: none;
            border-radius: 999px;
            padding: 7px 16px;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            background-color: #455a64;
            color: #ffffff;
            transition: background-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;}
        body.page-ab .btn-print:hover {background-color: #263238;
            transform: translateY(-1px);
            box-shadow: 0 4px 10px rgba(38, 50, 56, 0.25);}

        body.page-ab .filter-card {background-color: #ffffff;
            border-radius: 14px;
            padding: 14px 16px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
            margin-bottom: 16px;}
        body.page-ab .filter-form {display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;}
        body.page-ab .filter-form label {font-size: 0.9rem; color: #455a64;}
        body.page-ab .filter-form select, body.page-ab .filter-form input[type="date"] {padding: 6px 10px;
            border-radius: 8px;
            border: 1px solid #cfd8dc;
            font-size: 0.9rem;
            min-width: 160px;}
        body.page-ab .filter-form button {border: none;
            border-radius: 999px;
            padding: 7px 16px;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            background-color: #1976d2;
            color: #ffffff;
            transition: background-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;}
        body.page-ab .filter-form button:hover {background-color: #0d47a1;
            transform: translateY(-1px);
            box-shadow: 0 4px 10px rgba(13, 71, 161, 0.25);}
        body.page-ab .btn-secondary {background-color: #009688;}
        body.page-ab .btn-secondary:hover {background-color: #00695c; box-shadow: 0 4px 10px rgba(0, 105, 92, 0.25);}

        body.page-ab .cards-container {display: flex; flex-direction: column; gap: 16px;}
        body.page-ab .card {background-color: #ffffff;
            border-radius: 14px;
            padding: 14px 16px 10px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);}
        body.page-ab .card-header {margin-bottom: 10px;}
        body.page-ab .card-title {font-size: 1rem; font-weight: 700; color: #37474f; margin-bottom: 2px;}

        body.page-ab .table-wrapper {width: 100%; overflow-x: auto; margin-top: 10px;}
        body.page-ab table.data-table {width: 100%;
            border-collapse: collapse;
            min-width: 860px;
            font-size: 0.85rem;}
        body.page-ab table.data-table thead {background: linear-gradient(to left, #1976d2, #0d47a1);
            color: #ffffff;}
        body.page-ab table.data-table th, body.page-ab table.data-table td {padding: 7px 8px;
            text-align: right;
            white-space: nowrap;}
        body.page-ab table.data-table th {font-weight: 600;}
        body.page-ab table.data-table tbody tr:nth-child(even) {background-color: #f5f8fb;}
        body.page-ab table.data-table tbody tr:nth-child(odd) {background-color: #ffffff;}
        body.page-ab table.data-table tbody tr:hover {background-color: #e3f2fd;}

        body.page-ab .absence-day {background-color: #ffebee !important;}
        body.page-ab .holiday-day {background-color: #e8f1ff !important;}
        body.page-ab .justified-day {background-color: rgba(147, 51, 234, 0.08) !important;}
        body.page-ab .onepunch-day {background-color: rgba(255, 193, 7, 0.16) !important;}

        body.page-ab .no-data {text-align: center;
            padding: 10px 0;
            color: #78909c;
            font-size: 0.9rem;}

        body.page-ab .summary-grid {display: grid;
            grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
            gap: 10px;
            margin-top: 10px;}
        body.page-ab .sum-box {border-radius: 14px;
            padding: 12px 12px;
            background: linear-gradient(180deg, #ffffff, #fafafa);
            border: 1px solid #eceff1;
            display: flex;
            align-items: center;
            gap: 10px;
            min-height: 68px;}
        body.page-ab .sum-ico {width: 42px;
            height: 42px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            background-color: rgba(25,118,210,0.10);
            flex: 0 0 auto;}
        body.page-ab .sum-meta {display: flex; flex-direction: column; gap: 2px;}
        body.page-ab .sum-label {font-size: 0.82rem; color: #546e7a;}
        body.page-ab .sum-val {font-size: 1.05rem; font-weight: 800; color: #263238; direction: ltr; text-align: left;}

        body.page-ab .sum-box.good {border-color: rgba(27, 94, 32, 0.25);}
        body.page-ab .sum-box.good .sum-ico {background-color: rgba(27, 94, 32, 0.10);}
        body.page-ab .sum-box.good .sum-val {color: #1b5e20;}

        body.page-ab .sum-box.bad {border-color: rgba(183, 28, 28, 0.25);}
        body.page-ab .sum-box.bad .sum-ico {background-color: rgba(183, 28, 28, 0.10);}
        body.page-ab .sum-box.bad .sum-val {color: #b71c1c;}

        body.page-ab .sum-box.neutral .sum-ico {background-color: rgba(38, 50, 56, 0.08);}
        body.page-ab .sum-box.neutral .sum-val {color: #37474f;}

        body.page-ab .sum-val.rtl {direction: rtl; text-align: left;}

        @media print {
            @page { }
            body.page-ab {background: #ffffff; padding: 0;}
            body.page-ab .back-link, body.page-ab .filter-card, body.page-ab .btn-secondary, body.page-ab .btn-print {display: none !important;}
            body.page-ab .page {max-width: 100%; margin: 0; padding: 0 5mm;}
            body.page-ab .page-header {margin: 0 0 6px 0;}
            body.page-ab .page-title {font-size: 1.1rem;}
            body.page-ab .page-subtitle, body.page-ab .emp-info {font-size: 0.8rem;}
            body.page-ab .cards-container {gap: 6px;}
            body.page-ab .card {box-shadow: none; border-radius: 0; padding: 6px 0 0;}
            body.page-ab table.data-table {font-size: 0.7rem; min-width: 100%;}
            body.page-ab table.data-table th, body.page-ab table.data-table td {padding: 3px 4px;}
            body.page-ab .summary-grid {gap: 6px;}
            body.page-ab .sum-box {padding: 8px 8px; min-height: 58px;}
            body.page-ab .sum-ico {width: 36px; height: 36px; border-radius: 10px; font-size: 18px;}
            body.page-ab .sum-val {font-size: 0.95rem;}
        }
    


/* absences.php */

        body.page-absences * {box-sizing:border-box; margin:0; padding:0;}
        body.page-absences {direction: rtl;
            font-family: "Cairo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background: linear-gradient(135deg, #e3f2fd, #f9fbe7);
            min-height: 100vh;
            padding: 16px 8px;}
        body.page-absences .page {max-width: 1200px; margin: 0 auto;}
        body.page-absences .page-header {display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 14px;}
        body.page-absences .page-title {font-size: 1.3rem;
            font-weight: 700;
            color: #263238;}
        body.page-absences .page-subtitle {font-size: 0.9rem;
            color: #607d8b;
            margin-top: 2px;}
        body.page-absences .header-actions {display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;}
        body.page-absences .back-link {font-size: 0.9rem;
            text-decoration: none;
            color: #1976d2;
            padding: 6px 12px;
            border-radius: 999px;
            background-color: rgba(25, 118, 210, 0.06);
            transition: background-color 0.12s ease;
            white-space: nowrap;}
        body.page-absences .back-link:hover {background-color: rgba(25, 118, 210, 0.12);}
        body.page-absences .export-link {font-size: 0.9rem;
            text-decoration: none;
            color: #ffffff;
            padding: 6px 12px;
            border-radius: 999px;
            background-color: #2e7d32;
            transition: background-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
            white-space: nowrap;}
        body.page-absences .export-link:hover {background-color: #1b5e20;
            transform: translateY(-1px);
            box-shadow: 0 4px 10px rgba(27, 94, 32, 0.22);}

        body.page-absences .filter-card {background-color: #ffffff;
            border-radius: 14px;
            padding: 12px 14px;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
            margin-bottom: 14px;}
        body.page-absences .filter-form {display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;}
        body.page-absences .filter-form label {font-size: 0.9rem;
            color: #455a64;
            font-weight: 600;}
        body.page-absences .filter-form input[type="date"] {padding: 6px 10px;
            border-radius: 8px;
            border: 1px solid #cfd8dc;
            font-size: 0.9rem;
            min-width: 170px;}
        body.page-absences .filter-form button {border: none;
            border-radius: 999px;
            padding: 7px 16px;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            background-color: #1976d2;
            color: #ffffff;
            transition: background-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;}
        body.page-absences .filter-form button:hover {background-color: #0d47a1;
            transform: translateY(-1px);
            box-shadow: 0 4px 10px rgba(13, 71, 161, 0.25);}

        body.page-absences .cards-container {display: flex;
            flex-direction: column;
            gap: 14px;}
        body.page-absences .card {background-color: #ffffff;
            border-radius: 14px;
            padding: 12px 14px 10px;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);}
        body.page-absences .card-header {margin-bottom: 10px;}
        body.page-absences .card-title {font-size: 1rem;
            font-weight: 700;
            color: #37474f;
            margin-bottom: 2px;}
        body.page-absences .card-subtitle {font-size: 0.82rem;
            color: #90a4ae;}

        body.page-absences .kpis {display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 10px;}
        body.page-absences .kpi {border-radius: 14px;
            padding: 10px 12px;
            background: linear-gradient(135deg, rgba(25,118,210,0.09), rgba(0,150,136,0.08));
            border: 1px solid rgba(207, 216, 220, 0.55);}
        body.page-absences .kpi .label {font-size: 0.78rem;
            color: #546e7a;
            margin-bottom: 6px;
            font-weight: 700;}
        body.page-absences .kpi .value {font-size: 1.1rem;
            font-weight: 800;
            color: #263238;
            letter-spacing: 0.2px;}
        body.page-absences .kpi .hint {font-size: 0.75rem;
            color: #78909c;
            margin-top: 2px;}

        body.page-absences .table-wrapper {width: 100%;
            overflow-x: auto;
            margin-top: 10px;}
        body.page-absences table.data-table {width: 100%;
            border-collapse: collapse;
            min-width: 900px;
            font-size: 0.85rem;}
        body.page-absences table.data-table thead {background: linear-gradient(to left, #1976d2, #0d47a1);
            color: #ffffff;}
        body.page-absences table.data-table th, body.page-absences table.data-table td {padding: 7px 8px;
            text-align: right;
            white-space: nowrap;}
        body.page-absences table.data-table th {font-weight: 700;}
        body.page-absences table.data-table tbody tr:nth-child(even) {background-color: #f5f8fb;}
        body.page-absences table.data-table tbody tr:nth-child(odd) {background-color: #ffffff;}
        body.page-absences table.data-table tbody tr:hover {background-color: #e3f2fd;}

        body.page-absences .badge {display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 2px 8px;
            border-radius: 999px;
            font-size: 0.75rem;
            font-weight: 800;
            border: 1px solid rgba(207,216,220,0.8);
            background: rgba(255,255,255,0.85);}
        body.page-absences .badge-delta-pos {color: #1b5e20; background: rgba(27,94,32,0.08); border-color: rgba(27,94,32,0.18);}
        body.page-absences .badge-delta-neg {color: #b71c1c; background: rgba(183,28,28,0.08); border-color: rgba(183,28,28,0.18);}
        body.page-absences .badge-delta-zero {color: #37474f; background: rgba(55,71,79,0.06); border-color: rgba(55,71,79,0.14);}
        body.page-absences .badge-delta-unk {color: #6d4c41; background: rgba(109,76,65,0.06); border-color: rgba(109,76,65,0.14);}

        body.page-absences .badge-one {color: #f57f17; background: rgba(245,127,23,0.10); border-color: rgba(245,127,23,0.18);}
        body.page-absences .badge-abs {color: #b71c1c; background: rgba(183,28,28,0.08); border-color: rgba(183,28,28,0.18);}

        body.page-absences .no-data {text-align: center;
            padding: 10px 0;
            color: #78909c;
            font-size: 0.9rem;}

        @media print {
            body.page-absences {background: #fff; padding: 0;}
            body.page-absences .no-print {display: none !important;}
            body.page-absences .card {box-shadow: none; border: 1px solid #e0e0e0;}
            body.page-absences table.data-table {min-width: 0;}
        }
    


/* employees_edit.php */

body.page-employees_edit * {box-sizing:border-box;margin:0;padding:0}
body.page-employees_edit {direction:rtl;
    font-family:"Cairo",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:linear-gradient(135deg,#e3f2fd,#f9fbe7);
    min-height:100vh;
    padding:20px 10px;
    color:#263238;}
body.page-employees_edit .page {max-width:1100px;margin:0 auto}
body.page-employees_edit .header {display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;}
body.page-employees_edit .title-wrap {display:flex;flex-direction:column;gap:4px}
body.page-employees_edit .title {font-size:1.25rem;font-weight:700}
body.page-employees_edit .subtitle {font-size:0.9rem;color:#607d8b}
body.page-employees_edit .actions {display:flex;gap:8px;flex-wrap:wrap}
body.page-employees_edit .link {font-size:0.9rem;
    text-decoration:none;
    color:#1976d2;
    padding:6px 14px;
    border-radius:999px;
    background-color:rgba(25,118,210,0.06);
    white-space:nowrap;}
body.page-employees_edit .link:hover {background-color:rgba(25,118,210,0.12)}
body.page-employees_edit .card {background:#fff;
    border-radius:16px;
    padding:14px 16px;
    box-shadow:0 10px 24px rgba(0,0,0,0.06);
    margin-bottom:14px;}
body.page-employees_edit .card-title {font-size:1rem;font-weight:700;color:#37474f;margin-bottom:6px}
body.page-employees_edit .row {display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
body.page-employees_edit .field {display:flex;flex-direction:column;gap:4px;min-width:200px;flex:1}
body.page-employees_edit label {font-size:0.85rem;color:#455a64;font-weight:600}
body.page-employees_edit input[type="text"] {padding:8px 10px;
    border-radius:10px;
    border:1px solid #cfd8dc;
    font-size:0.92rem;
    outline:none;}
body.page-employees_edit input[type="text"]:focus {border-color:#1976d2;box-shadow:0 0 0 2px rgba(25,118,210,0.15)}
body.page-employees_edit .check {display:flex;align-items:center;gap:8px;padding:8px 0;min-width:170px}
body.page-employees_edit .btn {padding:9px 14px;
    border-radius:999px;
    border:none;
    font-size:0.9rem;
    font-weight:700;
    cursor:pointer;
    transition:transform .1s ease,box-shadow .15s ease,background-color .15s ease;
    white-space:nowrap;}
body.page-employees_edit .btn:hover {transform:translateY(-1px)}
body.page-employees_edit .btn-primary {background:#1976d2;color:#fff}
body.page-employees_edit .btn-primary:hover {background:#0d47a1;box-shadow:0 4px 10px rgba(13,71,161,0.25)}
body.page-employees_edit .btn-dark {background:#455a64;color:#fff}
body.page-employees_edit .btn-dark:hover {background:#263238;box-shadow:0 4px 10px rgba(38,50,56,0.25)}
body.page-employees_edit .btn-warn {background:#ef6c00;color:#fff}
body.page-employees_edit .btn-warn:hover {background:#e65100;box-shadow:0 4px 10px rgba(230,81,0,0.25)}
body.page-employees_edit .btn-danger {background:#d32f2f;color:#fff}
body.page-employees_edit .btn-danger:hover {background:#b71c1c;box-shadow:0 4px 10px rgba(183,28,28,0.25)}
body.page-employees_edit .table-wrap {width:100%;overflow-x:auto;margin-top:10px}
body.page-employees_edit table {width:100%;border-collapse:collapse;min-width:820px;font-size:0.86rem}
body.page-employees_edit thead {background:linear-gradient(to left,#1976d2,#0d47a1);color:#fff}
body.page-employees_edit th, body.page-employees_edit td {padding:8px 9px;text-align:right;white-space:nowrap}
body.page-employees_edit tbody tr:nth-child(even) {background:#f5f8fb}
body.page-employees_edit tbody tr:hover {background:#e3f2fd}
body.page-employees_edit .badge {display:inline-flex;
    align-items:center;
    gap:6px;
    padding:3px 10px;
    border-radius:999px;
    font-size:0.78rem;
    font-weight:700;}
body.page-employees_edit .badge-on {background:#e8f5e9;color:#2e7d32}
body.page-employees_edit .badge-off {background:#ffebee;color:#c62828}
body.page-employees_edit .dot {width:8px;height:8px;border-radius:999px}
body.page-employees_edit .dot-on {background:#2e7d32}
body.page-employees_edit .dot-off {background:#c62828}
body.page-employees_edit .note {font-size:0.85rem;color:#607d8b}
body.page-employees_edit .msg {margin-top:10px;font-size:0.9rem;border-radius:10px;padding:8px 10px}
body.page-employees_edit .msg-ok {background:#e8f5e9;color:#2e7d32}
body.page-employees_edit .msg-err {background:#ffebee;color:#b71c1c}
body.page-employees_edit .search {display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
@media (max-width:640px) {
    body.page-employees_edit .title {font-size:1.1rem}
    body.page-employees_edit .field {min-width:100%}
}



/* forgot_punches.php */

body.page-forgot_punches * {box-sizing:border-box;margin:0;padding:0}
body.page-forgot_punches {direction:rtl;
    font-family:"Cairo",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:linear-gradient(135deg,#e3f2fd,#f9fbe7);
    min-height:100vh;
    padding:20px 10px;}
body.page-forgot_punches .page {max-width:1100px;margin:0 auto}
body.page-forgot_punches .page-header {display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:16px;}
body.page-forgot_punches .page-title {font-size:1.3rem;
    font-weight:700;
    color:#263238;}
body.page-forgot_punches .page-subtitle {font-size:0.9rem;
    color:#607d8b;}
body.page-forgot_punches .back-link {font-size:0.9rem;
    text-decoration:none;
    color:#1976d2;
    padding:6px 14px;
    border-radius:999px;
    background-color:rgba(25,118,210,0.06);
    white-space:nowrap;
    transition:background-color .15s ease,transform .1s ease;}
body.page-forgot_punches .back-link:hover {background-color:rgba(25,118,210,0.12);
    transform:translateY(-1px);}
body.page-forgot_punches .card {background-color:#ffffff;
    border-radius:16px;
    padding:14px 16px 14px;
    box-shadow:0 10px 24px rgba(0,0,0,0.06);
    margin-bottom:14px;}
body.page-forgot_punches .card-header {margin-bottom:10px}
body.page-forgot_punches .card-title {font-size:1rem;
    font-weight:700;
    color:#37474f;
    margin-bottom:2px;}
body.page-forgot_punches .card-subtitle {font-size:0.82rem;
    color:#78909c;}
body.page-forgot_punches .filter-row {display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:8px;
    align-items:flex-end;}
body.page-forgot_punches .form-group {display:flex;
    flex-direction:column;
    gap:4px;
    min-width:180px;}
body.page-forgot_punches .form-group label {font-size:0.85rem;
    color:#455a64;
    font-weight:600;}
body.page-forgot_punches select, body.page-forgot_punches input[type="date"], body.page-forgot_punches input[type="time"] {padding:6px 10px;
    border-radius:8px;
    border:1px solid #cfd8dc;
    font-size:0.9rem;
    outline:none;}
body.page-forgot_punches select:focus, body.page-forgot_punches input[type="date"]:focus, body.page-forgot_punches input[type="time"]:focus {border-color:#1976d2;
    box-shadow:0 0 0 2px rgba(25,118,210,0.15);}
body.page-forgot_punches .btn {padding:8px 16px;
    border-radius:999px;
    border:none;
    font-size:0.9rem;
    font-weight:600;
    cursor:pointer;
    transition:background-color .15s ease,transform .1s ease,box-shadow .15s ease;
    white-space:nowrap;}
body.page-forgot_punches .btn-primary {background-color:#1976d2;
    color:#ffffff;}
body.page-forgot_punches .btn-primary:hover {background-color:#0d47a1;
    box-shadow:0 4px 10px rgba(13,71,161,0.25);
    transform:translateY(-1px);}
body.page-forgot_punches .btn-secondary {background-color:#455a64;
    color:#ffffff;}
body.page-forgot_punches .btn-secondary:hover {background-color:#263238;
    box-shadow:0 4px 10px rgba(38,50,56,0.25);
    transform:translateY(-1px);}
body.page-forgot_punches .table-wrapper {width:100%;
    overflow-x:auto;
    margin-top:10px;}
body.page-forgot_punches table.data-table {width:100%;
    border-collapse:collapse;
    min-width:980px;
    font-size:0.85rem;}
body.page-forgot_punches table.data-table thead {background:linear-gradient(to left,#1976d2,#0d47a1);
    color:#ffffff;}
body.page-forgot_punches table.data-table th, body.page-forgot_punches table.data-table td {padding:7px 8px;
    text-align:right;
    white-space:nowrap;
    vertical-align:middle;}
body.page-forgot_punches table.data-table th {font-weight:600}
body.page-forgot_punches table.data-table tbody tr:nth-child(even) {background-color:#f5f8fb}
body.page-forgot_punches table.data-table tbody tr:nth-child(odd) {background-color:#ffffff}
body.page-forgot_punches table.data-table tbody tr:hover {background-color:#e3f2fd}
body.page-forgot_punches .no-data {text-align:center;
    padding:10px 0;
    color:#78909c;
    font-size:0.9rem;}
body.page-forgot_punches .message {margin-top:10px;
    font-size:0.9rem;
    color:#2e7d32;
    background-color:#e8f5e9;
    border-radius:8px;
    padding:6px 10px;}
body.page-forgot_punches .message.err {color:#c62828;
    background-color:#ffebee;}
body.page-forgot_punches .inline-form {display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;}
body.page-forgot_punches .inline-form input[type="time"], body.page-forgot_punches .inline-form select {padding:6px 10px;
    border-radius:8px;
    border:1px solid #cfd8dc;
    font-size:0.85rem;}
body.page-forgot_punches .inline-form button {padding:7px 12px;
    font-size:0.85rem;}
body.page-forgot_punches th.sortable {cursor:pointer;
    user-select:none;}
body.page-forgot_punches th.sortable .sort-ind {display:inline-block;
    margin-right:6px;
    opacity:.75;
    font-size:.8em;}
body.page-forgot_punches th.sortable[data-dir="asc"] .sort-ind::after {content:"▲"}
body.page-forgot_punches th.sortable[data-dir="desc"] .sort-ind::after {content:"▼"}
@media (max-width:640px) {
    body.page-forgot_punches .page-header {align-items:flex-start}
    body.page-forgot_punches .page-title {font-size:1.15rem}
    body.page-forgot_punches table.data-table {font-size:0.8rem}
}



/* holidays.php */

        body.page-holidays * {box-sizing:border-box; margin:0; padding:0;}
        body.page-holidays {direction: rtl;
            font-family: "Cairo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background: linear-gradient(135deg, #e3f2fd, #f9fbe7);
            min-height: 100vh;
            padding: 20px 10px;}
        body.page-holidays .page {max-width: 900px; margin: 0 auto;}
        body.page-holidays .card {background-color: #ffffff;
            border-radius: 16px;
            padding: 18px 20px 16px;
            box-shadow: 0 10px 24px rgba(0,0,0,0.08);}
        body.page-holidays .page-header {display:flex;
            flex-wrap:wrap;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            margin-bottom:12px;}
        body.page-holidays .title-box {display:flex;
            flex-direction:column;
            gap:4px;}
        body.page-holidays .page-title {font-size:1.4rem;
            font-weight:700;
            color:#263238;}
        body.page-holidays .page-subtitle {font-size:0.9rem;
            color:#607d8b;}
        body.page-holidays .back-link {font-size:0.9rem;
            text-decoration:none;
            color:#1976d2;
            padding:6px 12px;
            border-radius:999px;
            background-color:rgba(25,118,210,0.06);
            white-space:nowrap;
            transition:background-color .12s ease;}
        body.page-holidays .back-link:hover {background-color:rgba(25,118,210,0.12);}
        body.page-holidays .divider {margin:14px 0;
            height:1px;
            background:linear-gradient(to left,transparent,#cfd8dc,transparent);}
        body.page-holidays .msg {margin-bottom:10px;
            padding:8px 10px;
            border-radius:8px;
            font-size:0.9rem;}
        body.page-holidays .msg-ok {background:#e8f5e9;
            color:#14532d;
            border:1px solid #a5d6a7;}
        body.page-holidays .msg-error {background:#ffebee;
            color:#b71c1c;
            border:1px solid #ef9a9a;}
        body.page-holidays .msg-info {background:#eceff1;
            color:#263238;
            border:1px solid #cfd8dc;}
        body.page-holidays .add-form {display:flex;
            flex-wrap:wrap;
            align-items:flex-end;
            gap:8px;
            margin-bottom:14px;}
        body.page-holidays .field-group {display:flex;
            flex-direction:column;
            gap:3px;}
        body.page-holidays .field-group label {font-size:0.85rem;
            color:#455a64;}
        body.page-holidays .field-group input[type="date"], body.page-holidays .field-group input[type="text"] {padding:6px 8px;
            border-radius:8px;
            border:1px solid #cfd8dc;
            font-size:0.9rem;
            min-width:160px;}
        body.page-holidays .btn {border:none;
            border-radius:999px;
            padding:7px 16px;
            font-size:0.9rem;
            font-weight:600;
            cursor:pointer;
            transition:background-color .12s ease, transform .12s ease, box-shadow .12s ease;}
        body.page-holidays .btn-add {background:#1976d2;
            color:#ffffff;
            box-shadow:0 3px 8px rgba(25,118,210,0.35);}
        body.page-holidays .btn-add:hover {background:#0d47a1;
            transform:translateY(-1px);
            box-shadow:0 5px 12px rgba(13,71,161,0.45);}
        body.page-holidays .btn-save-all {background:#009688;
            color:#ffffff;
            box-shadow:0 3px 8px rgba(0,150,136,0.35);
            margin:8px 0;}
        body.page-holidays .btn-save-all:hover {background:#00695c;
            transform:translateY(-1px);
            box-shadow:0 5px 12px rgba(0,105,92,0.45);}
        body.page-holidays .btn-delete {background:#d32f2f;
            color:#ffffff;
            padding:5px 10px;
            font-size:0.8rem;
            box-shadow:0 2px 6px rgba(211,47,47,0.35);}
        body.page-holidays .btn-delete:hover {background:#b71c1c;
            transform:translateY(-1px);
            box-shadow:0 4px 10px rgba(183,28,28,0.5);}
        body.page-holidays .table-wrapper {width:100%;
            overflow-x:auto;}
        body.page-holidays table {width:100%;
            border-collapse:collapse;
            margin-top:6px;
            min-width:600px;
            font-size:0.88rem;}
        body.page-holidays th, body.page-holidays td {padding:7px 6px;
            border:1px solid #e0e0e0;
            text-align:center;
            white-space:nowrap;}
        body.page-holidays thead th {background:linear-gradient(to left,#1976d2,#0d47a1);
            color:#ffffff;
            font-weight:600;}
        body.page-holidays tbody tr:nth-child(even) {background:#f5f8fb;}
        body.page-holidays tbody tr:nth-child(odd) {background:#ffffff;}
        body.page-holidays tbody tr:hover {background:#e3f2fd;}
        body.page-holidays input.table-input {width:100%;
            box-sizing:border-box;
            padding:4px 6px;
            border-radius:6px;
            border:1px solid #cfd8dc;
            font-size:0.85rem;}
        body.page-holidays input.table-input:focus {outline:none;
            border-color:#1976d2;
            box-shadow:0 0 0 1px rgba(25,118,210,0.25);}
        body.page-holidays .footer-note {margin-top:10px;
            font-size:0.8rem;
            color:#78909c;}
        @media (max-width:640px) {
            body.page-holidays .card {padding:16px 14px;}
            body.page-holidays .page-title {font-size:1.2rem;}
            body.page-holidays .add-form {flex-direction:column; align-items:stretch;}
            body.page-holidays .field-group input[type="date"], body.page-holidays .field-group input[type="text"] {width:100%; min-width:0;}
        }
    


/* import.php */

        body.page-import * {box-sizing:border-box;margin:0;padding:0}
        body.page-import {direction:rtl;
            font-family:"Cairo",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
            background:linear-gradient(135deg,#e3f2fd,#f1f8e9);
            min-height:100vh;
            display:flex;
            align-items:center;
            justify-content:center;
            padding:16px;}
        body.page-import .wrapper {width:100%;max-width:520px;}
        body.page-import .card {background:#fff;
            border-radius:18px;
            box-shadow:0 10px 26px rgba(0,0,0,.08);
            padding:22px 20px 18px;}
        body.page-import .card-header {text-align:center;margin-bottom:12px;}
        body.page-import .card-title {font-size:1.3rem;font-weight:700;color:#263238;margin-bottom:4px;}
        body.page-import .card-subtitle {font-size:.9rem;color:#607d8b;}
        body.page-import .divider {margin:14px 0;height:1px;background:linear-gradient(to left,transparent,#cfd8dc,transparent);}
        body.page-import .stats {display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
        body.page-import .stat-row {display:flex;justify-content:space-between;font-size:.9rem;color:#455a64;gap:10px;}
        body.page-import .stat-row span:first-child {font-weight:600;}
        body.page-import .stat-value {font-weight:600;color:#1b5e20;}
        body.page-import .stat-value.warn {color:#e65100;}
        body.page-import .file-name {font-size:.85rem;color:#78909c;margin-bottom:4px;text-align:center;word-break:break-all;}
        body.page-import .actions {margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;}
        body.page-import .btn {border:none;
            border-radius:999px;
            padding:8px 16px;
            font-size:.9rem;
            font-weight:600;
            cursor:pointer;
            transition: background-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
            white-space:nowrap;
            text-decoration:none;}
        body.page-import .btn-primary {background:#1976d2;color:#fff;flex:1;text-align:center;}
        body.page-import .btn-primary:hover {background:#0d47a1;box-shadow:0 4px 10px rgba(13,71,161,.25);transform:translateY(-1px);}
        body.page-import .btn-secondary {background:#00897b;color:#fff;flex:1;text-align:center;}
        body.page-import .btn-secondary:hover {background:#00695c;box-shadow:0 4px 10px rgba(0,105,92,.25);transform:translateY(-1px);}
        body.page-import .btn-link {background:transparent;color:#1976d2;padding-inline:0;flex:0;}
        body.page-import .btn-link:hover {text-decoration:underline;transform:none;box-shadow:none;}
        @media (max-width:480px) {
            body.page-import .card {padding:18px 16px 16px;}
            body.page-import .actions {flex-direction:column;align-items:stretch}
            body.page-import .btn-primary, body.page-import .btn-secondary {width:100%}
            body.page-import .btn-link {align-self:flex-start}
        }
    


/* index.php */

        body.page-index * {box-sizing:border-box;margin:0;padding:0}

        body.page-index {--maroon:#7c3b3b;
            --purple:#6b3fa0;
            --green:#4aa34a;
            --gold:#c3922b;
            --ink:#0f172a;
            --muted:#64748b;
            --card:#ffffff;
            --bg1:#f6f2f0;
            --bg2:#eef6f1;}

        body.page-index {direction:rtl;
            font-family:"Cairo",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
            min-height:100vh;
            background:radial-gradient(circle at 10% 0%, #ffffff 0, var(--bg1) 38%, var(--bg2) 100%);
            color:var(--ink);
            display:flex;
            align-items:center;
            justify-content:center;
            padding:16px}

        body.page-index .shell {position:relative;width:100%;max-width:1080px}

        body.page-index .orb {position:absolute;
            border-radius:999px;
            filter:blur(46px);
            opacity:0.35;
            pointer-events:none}

        body.page-index .orb.orb-1 {width:260px;height:260px;background:rgba(107,63,160,0.35);top:-60px;left:-60px}
        body.page-index .orb.orb-2 {width:280px;height:280px;background:rgba(74,163,74,0.35);bottom:-70px;right:-70px}
        body.page-index .orb.orb-3 {width:220px;height:220px;background:rgba(195,146,43,0.30);top:40%;right:-90px}

        body.page-index .card {position:relative;
            background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.92));
            border-radius:24px;
            padding:22px 22px 18px;
            box-shadow:0 18px 40px rgba(15,23,42,0.10);
            border:1px solid rgba(124,59,59,0.20);
            overflow:hidden}

        body.page-index .card::before {content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at 0 0, rgba(107,63,160,0.10), transparent 55%),
                radial-gradient(circle at 100% 10%, rgba(74,163,74,0.10), transparent 55%),
                radial-gradient(circle at 40% 120%, rgba(195,146,43,0.10), transparent 55%);
            pointer-events:none}

        body.page-index .card-inner {position:relative;z-index:1}

        body.page-index .card-header {display:flex;
            flex-wrap:wrap;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            margin-bottom:16px}

        body.page-index .brand {display:flex;
            align-items:center;
            gap:12px}

        body.page-index .brand .logo {width:54px;
            height:54px;
            border-radius:999px;
            background:#fff;
            border:3px solid rgba(124,59,59,0.50);
            box-shadow:0 10px 24px rgba(15,23,42,0.10);
            display:flex;
            align-items:center;
            justify-content:center;
            overflow:hidden}

        body.page-index .brand .logo img {width:100%;height:100%;object-fit:cover;display:block}

        body.page-index .title-wrap {display:flex;flex-direction:column;gap:3px}
        body.page-index .card-title {font-size:1.28rem;font-weight:800;color:var(--ink)}
        body.page-index .card-subtitle {font-size:0.9rem;color:var(--muted)}

        body.page-index .tagline {font-size:0.82rem;
            padding:6px 10px;
            border-radius:999px;
            background:linear-gradient(to left, rgba(74,163,74,0.10), rgba(107,63,160,0.10));
            color:rgba(15,23,42,0.85);
            border:1px solid rgba(124,59,59,0.20);
            display:inline-flex;
            align-items:center;
            gap:6px;
            white-space:nowrap}

        body.page-index .tag-dot {width:7px;height:7px;border-radius:999px;background:var(--purple);box-shadow:0 0 0 3px rgba(107,63,160,0.18)}

        body.page-index .divider {margin:10px 0 16px;
            height:1px;
            background:linear-gradient(to left, transparent, rgba(124,59,59,0.28), transparent)}

        body.page-index .user-bar {display:flex;
            flex-wrap:wrap;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            margin:8px 0 0}

        body.page-index .user-name {font-size:0.92rem;color:rgba(15,23,42,0.90)}

        body.page-index .logout-btn {display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:8px 14px;
            border-radius:999px;
            text-decoration:none;
            font-weight:800;
            font-size:0.85rem;
            color:#fff;
            background:linear-gradient(to left, var(--maroon), rgba(124,59,59,0.92));
            border:1px solid rgba(124,59,59,0.35);
            box-shadow:0 10px 22px rgba(124,59,59,0.18);
            transition:transform 0.14s ease,box-shadow 0.14s ease,filter 0.14s ease}

        body.page-index .logout-btn:hover, body.page-index .logout-btn:focus-visible {outline:none;
            transform:translateY(-1px);
            box-shadow:0 14px 30px rgba(124,59,59,0.22);
            filter:saturate(1.05)}

        body.page-index .menu-grid {display:grid;
            grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
            gap:14px 18px}

        body.page-index .menu-section {position:relative;
            border-radius:18px;
            padding:10px 10px 12px;
            background:rgba(255,255,255,0.85);
            box-shadow:0 0 0 1px rgba(124,59,59,0.12), 0 10px 22px rgba(15,23,42,0.06);
            overflow:hidden;
            transition:transform 0.16s ease,box-shadow 0.16s ease}

        body.page-index .menu-section::before {content:"";
            position:absolute;
            inset:0;
            opacity:0;
            background:radial-gradient(circle at 10% 0,rgba(107,63,160,0.10),transparent 58%);
            transition:opacity 0.16s ease;
            pointer-events:none}

        body.page-index .menu-section:hover {transform:translateY(-2px);
            box-shadow:0 16px 34px rgba(15,23,42,0.10)}

        body.page-index .menu-section:hover::before {opacity:1}

        body.page-index .section-head {display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:8px}
        body.page-index .section-title {font-size:0.95rem;font-weight:800;color:var(--ink)}
        body.page-index .section-desc {font-size:0.78rem;color:var(--muted)}

        body.page-index .menu {list-style:none;display:flex;flex-direction:column;gap:6px}

        body.page-index .menu li a, body.page-index .menu li button {display:flex;
            align-items:center;
            justify-content:space-between;
            gap:8px;
            width:100%;
            text-decoration:none;
            padding:8px 10px;
            border-radius:999px;
            font-size:0.86rem;
            font-weight:700;
            border:1px solid rgba(124,59,59,0.14);
            cursor:pointer;
            background:rgba(255,255,255,0.92);
            color:rgba(15,23,42,0.92);
            transition:transform 0.14s ease,box-shadow 0.14s ease,border-color 0.14s ease}

        body.page-index .menu li span.label {flex:1;text-align:right}

        body.page-index .menu li span.badge {font-size:0.7rem;
            padding:2px 8px;
            border-radius:999px;
            white-space:nowrap}

        body.page-index .accent-data {border-color:rgba(107,63,160,0.40)}
        body.page-index .accent-manual {border-color:rgba(74,163,74,0.40)}
        body.page-index .accent-justify {border-color:rgba(107,63,160,0.40)}
        body.page-index .accent-holiday {border-color:rgba(195,146,43,0.45)}
        body.page-index .accent-report-main {border-color:rgba(74,163,74,0.45)}
        body.page-index .accent-report-sub {border-color:rgba(74,163,74,0.35)}
        body.page-index .accent-danger {border-color:rgba(124,59,59,0.45)}
        body.page-index .accent-admin {border-color:rgba(107,63,160,0.28)}

        body.page-index .badge-data {background:rgba(107,63,160,0.10);color:rgba(107,63,160,1)}
        body.page-index .badge-manual {background:rgba(74,163,74,0.10);color:rgba(74,163,74,1)}
        body.page-index .badge-justify {background:rgba(107,63,160,0.10);color:rgba(107,63,160,1)}
        body.page-index .badge-holiday {background:rgba(195,146,43,0.12);color:rgba(146,103,18,1)}
        body.page-index .badge-report {background:rgba(74,163,74,0.10);color:rgba(74,163,74,1)}
        body.page-index .badge-danger {background:rgba(124,59,59,0.10);color:rgba(124,59,59,1)}
        body.page-index .badge-admin {background:rgba(107,63,160,0.08);color:rgba(107,63,160,1)}

        body.page-index .menu li a:hover, body.page-index .menu li button:hover, body.page-index .menu li a:focus-visible, body.page-index .menu li button:focus-visible {outline:none;
            transform:translateY(-1px);
            box-shadow:0 10px 22px rgba(15,23,42,0.10);
            border-color:rgba(124,59,59,0.26)}

        body.page-index .menu li form {margin:0;width:100%}

        body.page-index .footer-row {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:14px}
        body.page-index .footer-text {font-size:0.78rem;color:var(--muted)}

        body.page-index .message {font-size:0.82rem;
            color:rgba(15,23,42,0.90);
            padding:6px 10px;
            border-radius:999px;
            background:rgba(74,163,74,0.10);
            border:1px solid rgba(74,163,74,0.22)}

        body.page-index .empty {font-size:0.88rem;
            color:rgba(15,23,42,0.85);
            padding:10px 12px;
            border-radius:14px;
            background:rgba(255,255,255,0.85);
            box-shadow:0 0 0 1px rgba(124,59,59,0.12);
            text-align:center}

        @media (max-width:720px) {
            body.page-index .card {padding:20px 14px 14px}
            body.page-index .card-header {align-items:flex-start}
            body.page-index .card-title {font-size:1.15rem}
            body.page-index .menu-grid {grid-template-columns:1fr}
            body.page-index .brand .logo {width:48px;height:48px}
        }
    


/* justify_absences.php */

        body.page-justify_absences * {box-sizing:border-box; margin:0; padding:0;}
        body.page-justify_absences {direction: rtl;
            font-family: "Cairo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background: linear-gradient(135deg, #e3f2fd, #f9fbe7);
            min-height: 100vh;
            padding: 20px 10px;}
        body.page-justify_absences .page {max-width: 1100px; margin: 0 auto;}
        body.page-justify_absences .page-header {display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 18px;}
        body.page-justify_absences .header-left {display: flex; flex-direction: column; gap: 4px;}
        body.page-justify_absences .page-title {font-size: 1.4rem;
            font-weight: 700;
            color: #263238;}
        body.page-justify_absences .page-subtitle {font-size: 0.9rem;
            color: #607d8b;}
        body.page-justify_absences .back-link {font-size: 0.9rem;
            text-decoration: none;
            color: #1976d2;
            padding: 6px 14px;
            border-radius: 999px;
            background-color: rgba(25,118,210,0.06);
            white-space: nowrap;
            transition: background-color .15s ease, transform .1s ease;}
        body.page-justify_absences .back-link:hover {background-color: rgba(25,118,210,0.12);
            transform: translateY(-1px);}
        body.page-justify_absences .card {background-color: #ffffff;
            border-radius: 16px;
            padding: 14px 16px 14px;
            box-shadow: 0 10px 24px rgba(0,0,0,0.06);
            margin-bottom: 14px;}
        body.page-justify_absences .card-header {margin-bottom: 10px;}
        body.page-justify_absences .card-title {font-size: 1rem;
            font-weight: 700;
            color: #37474f;
            margin-bottom: 2px;}
        body.page-justify_absences .card-subtitle {font-size: 0.82rem;
            color: #78909c;}
        body.page-justify_absences .filter-row {display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 8px;}
        body.page-justify_absences .form-group {display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 180px;}
        body.page-justify_absences .form-group label {font-size: 0.85rem;
            color: #455a64;
            font-weight: 600;}
        body.page-justify_absences select, body.page-justify_absences input[type="date"], body.page-justify_absences input[type="text"] {padding: 6px 10px;
            border-radius: 8px;
            border: 1px solid #cfd8dc;
            font-size: 0.9rem;
            outline: none;}
        body.page-justify_absences select:focus, body.page-justify_absences input[type="date"]:focus, body.page-justify_absences input[type="text"]:focus {border-color: #1976d2;
            box-shadow: 0 0 0 2px rgba(25,118,210,0.15);}
        body.page-justify_absences .btn {padding: 8px 16px;
            border-radius: 999px;
            border: none;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;}
        body.page-justify_absences .btn-primary {background-color: #1976d2;
            color: #ffffff;}
        body.page-justify_absences .btn-primary:hover {background-color: #0d47a1;
            box-shadow: 0 4px 10px rgba(13,71,161,0.25);
            transform: translateY(-1px);}
        body.page-justify_absences .btn-secondary {background-color: #455a64;
            color: #ffffff;}
        body.page-justify_absences .btn-secondary:hover {background-color: #263238;
            box-shadow: 0 4px 10px rgba(38,50,56,0.25);
            transform: translateY(-1px);}
        body.page-justify_absences .table-wrapper {width: 100%;
            overflow-x: auto;
            margin-top: 10px;}
        body.page-justify_absences table.data-table {width: 100%;
            border-collapse: collapse;
            min-width: 900px;
            font-size: 0.85rem;
            direction: rtl;}
        body.page-justify_absences table.data-table thead {background: linear-gradient(to left, #1976d2, #0d47a1);
            color: #ffffff;}
        body.page-justify_absences table.data-table th, body.page-justify_absences table.data-table td {padding: 7px 8px;
            text-align: center;
            white-space: nowrap;}
        body.page-justify_absences table.data-table th {font-weight: 600;}
        body.page-justify_absences table.data-table tbody tr:nth-child(even) {background-color: #f5f8fb;}
        body.page-justify_absences table.data-table tbody tr:nth-child(odd) {background-color: #ffffff;}
        body.page-justify_absences table.data-table tbody tr:hover {background-color: #e3f2fd;}
        body.page-justify_absences .no-data {text-align: center;
            padding: 10px 0;
            color: #78909c;
            font-size: 0.9rem;}
        body.page-justify_absences .msg {margin-bottom: 10px;
            font-size: 0.85rem;
            border-radius: 8px;
            padding: 7px 10px;
            background: #e8f5e9;
            color: #2e7d32;
            border: 1px solid #a5d6a7;}
        body.page-justify_absences .justify-checkbox {transform: scale(1.1);}
        body.page-justify_absences .top-actions {margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;}

        body.page-justify_absences th.sortable {cursor: pointer; user-select: none;}
        body.page-justify_absences th.sortable[aria-sort="ascending"]::after {content: " ▲"; font-weight: 700;}
        body.page-justify_absences th.sortable[aria-sort="descending"]::after {content: " ▼"; font-weight: 700;}
        body.page-justify_absences th.sortable[aria-sort="none"]::after {content: "";}

        @media (max-width:640px) {
            body.page-justify_absences .page-header {align-items:flex-start;}
            body.page-justify_absences .page-title {font-size:1.2rem;}
            body.page-justify_absences table.data-table {font-size:0.8rem;}
        }
    


/* login.php */

        body.page-login * {box-sizing:border-box;margin:0;padding:0}
        body.page-login {--maroon:#7c3b3b;
            --purple:#6b3fa0;
            --green:#4aa34a;
            --gold:#c3922b;
            --ink:#0f172a;
            --muted:#64748b;
            --card:#ffffff;
            --bg1:#f6f2f0;
            --bg2:#eef6f1;}
        body.page-login {direction:rtl;
            font-family:"Cairo",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
            min-height:100vh;
            background:radial-gradient(circle at 10% 0%, #ffffff 0, var(--bg1) 38%, var(--bg2) 100%);
            color:var(--ink);
            display:flex;
            align-items:center;
            justify-content:center;
            padding:16px}
        body.page-login .shell {position:relative;width:100%;max-width:520px}
        body.page-login .orb {position:absolute;
            border-radius:999px;
            filter:blur(46px);
            opacity:0.35;
            pointer-events:none}
        body.page-login .orb.orb-1 {width:240px;height:240px;background:rgba(107,63,160,0.35);top:-60px;left:-60px}
        body.page-login .orb.orb-2 {width:260px;height:260px;background:rgba(74,163,74,0.35);bottom:-70px;right:-70px}
        body.page-login .orb.orb-3 {width:210px;height:210px;background:rgba(195,146,43,0.30);top:42%;right:-90px}

        body.page-login .card {position:relative;
            background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.92));
            border-radius:24px;
            padding:22px 20px 18px;
            box-shadow:0 18px 40px rgba(15,23,42,0.10);
            border:1px solid rgba(124,59,59,0.20);
            overflow:hidden}
        body.page-login .card::before {content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at 0 0, rgba(107,63,160,0.10), transparent 55%),
                radial-gradient(circle at 100% 10%, rgba(74,163,74,0.10), transparent 55%),
                radial-gradient(circle at 40% 120%, rgba(195,146,43,0.10), transparent 55%);
            pointer-events:none}
        body.page-login .inner {position:relative;z-index:1}

        body.page-login .brand {display:flex;
            flex-direction:column;
            gap:6px;
            align-items:center;
            text-align:center;
            margin-bottom:14px}
        body.page-login .logo {width:62px;height:62px;border-radius:999px;background:#fff;
            border:3px solid rgba(124,59,59,0.50);
            box-shadow:0 10px 24px rgba(15,23,42,0.10);
            overflow:hidden;
            display:flex;align-items:center;justify-content:center}
        body.page-login .logo img {width:100%;height:100%;object-fit:cover;display:block}

        body.page-login h1 {font-size:1.18rem;font-weight:900;color:var(--ink)}
        body.page-login .sub {font-size:.86rem;color:var(--muted)}
        body.page-login .hint {margin-top:8px;
            font-size:.78rem;
            padding:6px 10px;
            border-radius:999px;
            background:linear-gradient(to left, rgba(74,163,74,0.10), rgba(107,63,160,0.10));
            color:rgba(15,23,42,0.85);
            border:1px solid rgba(124,59,59,0.20);
            display:inline-flex;
            align-items:center;
            gap:6px}
        body.page-login .dot {width:7px;height:7px;border-radius:999px;background:var(--purple);box-shadow:0 0 0 3px rgba(107,63,160,0.18)}

        body.page-login .divider {margin:12px 0 14px;
            height:1px;
            background:linear-gradient(to left, transparent, rgba(124,59,59,0.28), transparent)}

        body.page-login .field {display:flex;flex-direction:column;gap:6px;margin-top:10px}
        body.page-login label {font-weight:800;color:rgba(15,23,42,0.90);font-size:.9rem}
        body.page-login input {padding:10px 12px;
            border:1px solid rgba(124,59,59,0.18);
            border-radius:14px;
            background:rgba(255,255,255,0.92);
            color:var(--ink);
            outline:none;
            transition:box-shadow .14s ease,border-color .14s ease,transform .14s ease}
        body.page-login input:focus {border-color:rgba(107,63,160,0.55);
            box-shadow:0 0 0 3px rgba(107,63,160,0.14)}

        body.page-login button {margin-top:16px;
            width:100%;
            padding:10px 14px;
            border:1px solid rgba(124,59,59,0.22);
            border-radius:999px;
            background:linear-gradient(to left, var(--maroon), rgba(124,59,59,0.92));
            color:#fff;
            font-weight:900;
            cursor:pointer;
            box-shadow:0 10px 22px rgba(124,59,59,0.18);
            transition:transform .14s ease,box-shadow .14s ease,filter .14s ease}
        body.page-login button:hover, body.page-login button:focus-visible {outline:none;
            transform:translateY(-1px);
            box-shadow:0 14px 30px rgba(124,59,59,0.22);
            filter:saturate(1.05)}

        body.page-login .error {margin-top:12px;
            padding:10px 12px;
            border-radius:14px;
            font-weight:900;
            text-align:center;
            color:rgba(124,59,59,1);
            background:rgba(124,59,59,0.08);
            border:1px solid rgba(124,59,59,0.22)}
        body.page-login .footer {margin-top:14px;
            text-align:center;
            font-size:.78rem;
            color:var(--muted)}
    




/* generic table tools */

.table-tools{display:flex;justify-content:flex-start;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.table-tool-btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:999px;border:1px solid rgba(25,118,210,0.18);background:#fff;color:#1976d2;font-weight:800;cursor:pointer;box-shadow:0 4px 12px rgba(15,23,42,0.06);transition:transform .14s ease,box-shadow .14s ease,background-color .14s ease}
.table-tool-btn:hover,.table-tool-btn:focus-visible{outline:none;transform:translateY(-1px);box-shadow:0 10px 18px rgba(15,23,42,0.08);background:#f7fbff}
table thead th.js-sortable{cursor:pointer;user-select:none;position:relative;padding-inline-start:26px}
table thead th.js-sortable::before{content:"↕";position:absolute;inset-inline-start:10px;top:50%;transform:translateY(-50%);font-size:.8rem;opacity:.5}
table thead th.js-sortable[data-sort-dir="asc"]::before{content:"↑";opacity:1}
table thead th.js-sortable[data-sort-dir="desc"]::before{content:"↓";opacity:1}




/* manage_users.php */

        body.page-manage_users * {box-sizing:border-box;margin:0;padding:0}
        body.page-manage_users {direction:rtl;
            font-family:"Cairo",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
            min-height:100vh;
            background:linear-gradient(135deg,#e3f2fd,#f9fbe7);
            color:#263238;
            padding:20px 10px}
        body.page-manage_users .wrap {max-width:1180px;margin:0 auto}
        body.page-manage_users .top {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
        body.page-manage_users .title {display:flex;flex-direction:column;gap:4px}
        body.page-manage_users .title h1 {font-size:1.3rem;font-weight:800;color:#263238}
        body.page-manage_users .title div {font-size:.9rem;color:#607d8b}
        body.page-manage_users .top-actions {display:flex;gap:10px;flex-wrap:wrap}

        body.page-manage_users .btn {display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;border-radius:999px;text-decoration:none;border:none;background:#455a64;color:#fff;font-weight:800;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,filter .14s ease}
        body.page-manage_users .btn:hover, body.page-manage_users .btn:focus-visible {outline:none;transform:translateY(-1px);box-shadow:0 10px 20px rgba(15,23,42,.12);filter:saturate(1.05)}
        body.page-manage_users .btn-primary {background:#1976d2}
        body.page-manage_users .btn-soft {background:#009688}
        body.page-manage_users .btn-danger {background:#c62828}
        body.page-manage_users .btn-warn {background:#ef6c00}
        body.page-manage_users .btn-light {background:#eceff1;color:#37474f}

        body.page-manage_users .card {background:#fff;border-radius:16px;padding:16px 18px 14px;margin-bottom:14px;box-shadow:0 10px 24px rgba(0,0,0,.06)}
        body.page-manage_users .card h2 {font-size:1rem;font-weight:800;color:#37474f;margin-bottom:8px}
        body.page-manage_users .hint {font-size:.85rem;color:#607d8b;margin-bottom:10px}

        body.page-manage_users .grid {display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:12px}
        @media (max-width:820px) {body.page-manage_users .grid {grid-template-columns:1fr}}
        body.page-manage_users label {display:block;font-weight:800;color:#455a64;font-size:.88rem;margin-bottom:6px}
        body.page-manage_users input, body.page-manage_users select {width:100%;padding:9px 11px;border-radius:10px;border:1px solid #cfd8dc;background:#fff;color:#263238;outline:none}
        body.page-manage_users input:focus, body.page-manage_users select:focus {border-color:#1976d2;box-shadow:0 0 0 3px rgba(25,118,210,.12)}
        body.page-manage_users .actions {display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

        body.page-manage_users .msg {margin-top:10px;padding:10px 12px;border-radius:10px;font-weight:800;background:#f5f8fb;border:1px solid #d7e3ea}
        body.page-manage_users .msg.ok {color:#2e7d32;background:#e8f5e9;border-color:#c8e6c9}
        body.page-manage_users .msg.bad {color:#b71c1c;background:#ffebee;border-color:#ffcdd2}

        body.page-manage_users .role-buttons {display:flex;gap:10px;flex-wrap:wrap}
        body.page-manage_users .role-btn {padding:9px 14px;border-radius:999px;border:1px solid #bbdefb;background:#fff;color:#1976d2;font-weight:900;text-decoration:none;transition:transform .14s ease,box-shadow .14s ease,background .14s ease}
        body.page-manage_users .role-btn:hover {transform:translateY(-1px);box-shadow:0 8px 16px rgba(15,23,42,.08);background:#f7fbff}
        body.page-manage_users .role-btn.active {background:#1976d2;color:#fff;border-color:#1976d2}

        body.page-manage_users .table-wrap {overflow:auto;border-radius:14px;border:1px solid #eceff1;background:#fff}
        body.page-manage_users table {width:100%;border-collapse:collapse;min-width:960px}
        body.page-manage_users th, body.page-manage_users td {padding:10px 12px;border-bottom:1px solid #eef2f5;text-align:right;vertical-align:top}
        body.page-manage_users th {background:#f5f7fb;color:#37474f;font-weight:900;white-space:nowrap}
        body.page-manage_users td {color:#263238}
        body.page-manage_users .sub {color:#607d8b;font-size:.9rem}
        body.page-manage_users .status-on {font-weight:900;color:#2e7d32}
        body.page-manage_users .status-off {font-weight:900;color:#c62828}

        body.page-manage_users .mini {display:flex;gap:8px;align-items:center;flex-wrap:wrap}
        body.page-manage_users .mini form {display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0}
        body.page-manage_users .mini input {min-width:150px}
        body.page-manage_users .mini select {min-width:150px}

        body.page-manage_users .perm-table {width:100%;border-collapse:collapse;min-width:820px}
        body.page-manage_users .perm-table th, body.page-manage_users .perm-table td {padding:12px;border-bottom:1px solid #eef2f5}
        body.page-manage_users .perm-name {font-weight:900;color:#37474f}
        body.page-manage_users .radios {display:flex;gap:18px;flex-wrap:wrap;align-items:center}
        body.page-manage_users .radios label {display:flex;gap:8px;align-items:center;font-weight:900;color:#455a64}
        body.page-manage_users input[type="radio"] {width:auto}

        @media (max-width:720px) {
            body.page-manage_users {padding:16px 8px}
            body.page-manage_users table {min-width:860px}
            body.page-manage_users .perm-table {min-width:760px}
        }


/* manual_entry.php */

body.page-manual_entry * {box-sizing:border-box;margin:0;padding:0}
body.page-manual_entry {direction:rtl;
    font-family:"Cairo",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:linear-gradient(135deg,#e3f2fd,#f9fbe7);
    min-height:100vh;
    padding:20px 10px;}
body.page-manual_entry .page {max-width:800px;margin:0 auto}
body.page-manual_entry .page-header {display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:16px;}
body.page-manual_entry .page-title {font-size:1.3rem;
    font-weight:700;
    color:#263238;}
body.page-manual_entry .page-subtitle {font-size:0.9rem;
    color:#607d8b;}
body.page-manual_entry .back-link {font-size:0.9rem;
    text-decoration:none;
    color:#1976d2;
    padding:6px 14px;
    border-radius:999px;
    background-color:rgba(25,118,210,0.06);
    white-space:nowrap;
    transition:background-color .15s ease,transform .1s ease;}
body.page-manual_entry .back-link:hover {background-color:rgba(25,118,210,0.12);
    transform:translateY(-1px);}
body.page-manual_entry .card {background-color:#ffffff;
    border-radius:16px;
    padding:16px 18px 14px;
    box-shadow:0 10px 24px rgba(0,0,0,0.06);}
body.page-manual_entry .card-header {margin-bottom:10px}
body.page-manual_entry .card-title {font-size:1rem;
    font-weight:700;
    color:#37474f;
    margin-bottom:2px;}
body.page-manual_entry .card-subtitle {font-size:0.82rem;
    color:#78909c;}
body.page-manual_entry .filter-row {display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:10px;
    margin-bottom:12px;}
body.page-manual_entry .form-group {display:flex;
    flex-direction:column;
    gap:4px;
    min-width:180px;
    flex:1;}
body.page-manual_entry .form-group label {font-size:0.85rem;
    color:#455a64;
    font-weight:600;}
body.page-manual_entry select, body.page-manual_entry input[type="date"], body.page-manual_entry input[type="time"] {padding:6px 10px;
    border-radius:8px;
    border:1px solid #cfd8dc;
    font-size:0.9rem;
    outline:none;}
body.page-manual_entry select:focus, body.page-manual_entry input[type="date"]:focus, body.page-manual_entry input[type="time"]:focus {border-color:#1976d2;
    box-shadow:0 0 0 2px rgba(25,118,210,0.15);}
body.page-manual_entry .btn {padding:8px 16px;
    border-radius:999px;
    border:none;
    font-size:0.9rem;
    font-weight:600;
    cursor:pointer;
    transition:background-color .15s ease,transform .1s ease,box-shadow .15s ease;}
body.page-manual_entry .btn-primary {background-color:#1976d2;
    color:#ffffff;}
body.page-manual_entry .btn-primary:hover {background-color:#0d47a1;
    box-shadow:0 4px 10px rgba(13,71,161,0.25);
    transform:translateY(-1px);}
body.page-manual_entry .btn-secondary {background-color:#455a64;
    color:#ffffff;}
body.page-manual_entry .btn-secondary:hover {background-color:#263238;
    box-shadow:0 4px 10px rgba(38,50,56,0.25);
    transform:translateY(-1px);}
body.page-manual_entry .grid-two {display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:12px;
    margin-top:6px;}
body.page-manual_entry .info-box {margin-top:8px;
    font-size:0.85rem;
    color:#546e7a;}
body.page-manual_entry .info-box span {display:inline-block;
    margin-left:8px;}
body.page-manual_entry .message {margin-top:10px;
    font-size:0.9rem;
    color:#2e7d32;
    background-color:#e8f5e9;
    border-radius:8px;
    padding:6px 10px;}
@media (max-width:640px) {
    body.page-manual_entry .page-header {align-items:flex-start}
    body.page-manual_entry .page-title {font-size:1.15rem}
}



/* upload.php */

        body.page-upload * {box-sizing: border-box;
            margin: 0;
            padding: 0;}
        body.page-upload {direction: rtl;
            font-family: "Cairo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background: linear-gradient(135deg, #e3f2fd, #f1f8e9);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;}
        body.page-upload .wrapper {width: 100%;
            max-width: 520px;}
        body.page-upload .card {background-color: #ffffff;
            border-radius: 18px;
            box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
            padding: 22px 22px 18px;}
        body.page-upload .card-header {margin-bottom: 10px;
            text-align: center;}
        body.page-upload .card-title {font-size: 1.3rem;
            font-weight: 700;
            color: #263238;
            margin-bottom: 4px;}
        body.page-upload .card-subtitle {font-size: 0.9rem;
            color: #607d8b;}
        body.page-upload .section-title {font-size: 1rem;
            font-weight: 700;
            color: #37474f;
            margin-bottom: 6px;}
        body.page-upload .divider {margin: 14px 0 16px;
            height: 1px;
            background: linear-gradient(to left, transparent, #cfd8dc, transparent);}
        body.page-upload .upload-form {display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 10px;}
        body.page-upload .field-group {display: flex;
            flex-direction: column;
            gap: 6px;}
        body.page-upload .field-label {font-size: 0.9rem;
            font-weight: 600;
            color: #455a64;}
        body.page-upload .file-input-wrapper {position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            width: 100%;}
        body.page-upload .file-input-wrapper input[type="file"] {position: absolute;
            inset: 0;
            opacity: 0;
            cursor: pointer;}
        body.page-upload .file-fake {flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            border-radius: 999px;
            border: 1px solid #cfd8dc;
            padding: 7px 12px;
            font-size: 0.85rem;
            color: #607d8b;
            background-color: #fafafa;}
        body.page-upload .file-fake span {overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;}
        body.page-upload .file-fake .badge {font-size: 0.75rem;
            padding: 2px 8px;
            border-radius: 999px;
            background-color: rgba(25, 118, 210, 0.08);
            color: #1565c0;
            font-weight: 600;
            white-space: nowrap;}
        body.page-upload .actions {display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 10px;
            margin-top: 8px;}
        body.page-upload .btn {border: none;
            border-radius: 999px;
            padding: 8px 16px;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
            white-space: nowrap;}
        body.page-upload .btn-primary {background-color: #1976d2;
            color: #ffffff;
            flex: 1;}
        body.page-upload .btn-primary:hover {background-color: #0d47a1;
            transform: translateY(-1px);
            box-shadow: 0 4px 10px rgba(13, 71, 161, 0.25);}
        body.page-upload .btn-secondary {background-color: #00897b;
            color: #ffffff;
            flex: 1;}
        body.page-upload .btn-secondary:hover {background-color: #00695c;
            transform: translateY(-1px);
            box-shadow: 0 4px 10px rgba(0, 105, 92, 0.25);}
        body.page-upload .btn-link {background-color: transparent;
            color: #1976d2;
            padding-inline: 0;
            box-shadow: none;
            flex: 0;}
        body.page-upload .btn-link:hover {text-decoration: underline;
            transform: none;
            box-shadow: none;}
        body.page-upload .helper-text {font-size: 0.78rem;
            color: #90a4ae;}
        body.page-upload .section-divider {margin: 10px 0 12px;
            height: 1px;
            background-color: #eceff1;}
        @media (max-width: 480px) {
            body.page-upload .card {padding: 18px 16px 16px;}
            body.page-upload .card-title {font-size: 1.15rem;}
            body.page-upload .actions {flex-direction: column-reverse;
                align-items: stretch;}
            body.page-upload .btn-primary, body.page-upload .btn-secondary {width: 100%;}
            body.page-upload .btn-link {align-self: flex-start;}
        }
    


/* upload.php redesign override */
body.page-upload {
    min-height: 100vh;
    display: block;
    padding: 22px 14px 28px;
    background: linear-gradient(135deg, #eaf4ff, #f7fbf2);
}
body.page-upload .upload-shell {
    max-width: 1120px;
    margin: 0 auto;
}
body.page-upload .upload-topbar {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 12px;
}
body.page-upload .back-link-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    text-decoration: none;
    background: rgba(25,118,210,0.08);
    color: #1565c0;
    font-weight: 700;
}
body.page-upload .back-link-top:hover {
    background: rgba(25,118,210,0.14);
}
body.page-upload .upload-card-main {
    max-width: none;
    padding: 24px;
}
body.page-upload .upload-header {
    text-align: right;
    margin-bottom: 18px;
}
body.page-upload .upload-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
body.page-upload .upload-panel {
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    border: 1px solid #dde5ee;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 10px 24px rgba(15,23,42,0.05);
}
body.page-upload .upload-panel-text {
    margin-bottom: 12px;
    line-height: 1.9;
}
body.page-upload .template-box {
    border: 1px dashed #b7c5d6;
    background: #f8fbff;
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 14px;
}
body.page-upload .template-box-title {
    font-size: .95rem;
    font-weight: 800;
    color: #37474f;
    margin-bottom: 8px;
}
body.page-upload .template-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #546e7a;
    font-size: .86rem;
    margin-bottom: 12px;
}
body.page-upload .template-list li {
    position: relative;
    padding-right: 14px;
    line-height: 1.8;
}
body.page-upload .template-list li::before {
    content: "•";
    position: absolute;
    right: 0;
    top: 0;
    color: #1976d2;
    font-weight: 700;
}
body.page-upload .employees-form {
    margin-bottom: 0;
}
body.page-upload .actions-stack {
    justify-content: stretch;
}
body.page-upload .actions-stack > * {
    flex: 1 1 100%;
}
body.page-upload .btn-block {
    width: 100%;
    text-align: center;
}
body.page-upload .btn-soft {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    padding: 10px 16px;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    background: #eef5ff;
    color: #1565c0;
    transition: background-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
body.page-upload .btn-soft:hover {
    background: #dfeeff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(13,71,161,.12);
}
body.page-upload .compact-gap {
    margin-top: 0;
}
@media (max-width: 900px) {
    body.page-upload .upload-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 480px) {
    body.page-upload {
        padding: 14px 8px 22px;
    }
    body.page-upload .upload-card-main {
        padding: 16px;
    }
    body.page-upload .upload-panel {
        padding: 14px;
    }
}

/* manage_users refreshed */
body.page-manage_users{background:radial-gradient(circle at top right, rgba(124,59,59,.10), transparent 28%),linear-gradient(180deg,#f7f4fb 0%,#f5f7fb 100%)}
body.page-manage_users .shell-manage-users{max-width:1440px;margin:0 auto;padding:24px 12px;position:relative}
body.page-manage_users .manage-users-layout{position:relative;z-index:1}
body.page-manage_users .mu-hero-card,
body.page-manage_users .mu-create-card,
body.page-manage_users .mu-role-card,
body.page-manage_users .mu-users-card{background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border:1px solid rgba(124,59,59,.10);border-radius:24px;box-shadow:0 18px 44px rgba(15,23,42,.08);padding:18px}
body.page-manage_users .mu-hero-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}
body.page-manage_users .mu-hero-actions{display:flex;gap:10px;flex-wrap:wrap}
body.page-manage_users .mu-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:16px}
body.page-manage_users .mu-stat-box{padding:14px 16px;border-radius:18px;background:linear-gradient(180deg,#fff,#f8fafc);border:1px solid rgba(124,59,59,.08)}
body.page-manage_users .mu-stat-box.good{border-color:rgba(46,125,50,.18)}
body.page-manage_users .mu-stat-box.warn{border-color:rgba(239,108,0,.18)}
body.page-manage_users .mu-stat-label{font-size:.9rem;color:var(--app-muted);font-weight:700}
body.page-manage_users .mu-stat-value{font-size:1.8rem;font-weight:900;color:var(--app-primary);margin-top:6px}
body.page-manage_users .mu-grid{display:grid;grid-template-columns:minmax(320px,1fr) minmax(420px,1.35fr);gap:16px;margin-top:16px;align-items:start}
body.page-manage_users .mu-card-head{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
body.page-manage_users .mu-card-head h2{font-size:1.05rem;font-weight:900;color:#243244}
body.page-manage_users .mu-form-stack .grid{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:12px}
body.page-manage_users label{display:block;font-weight:800;margin-bottom:6px;color:#37474f}
body.page-manage_users input,body.page-manage_users select{width:100%;border:1px solid var(--app-border);border-radius:12px;padding:10px 12px;background:#fff}
body.page-manage_users input:focus,body.page-manage_users select:focus{border-color:rgba(107,63,160,.45);box-shadow:0 0 0 4px rgba(107,63,160,.08)}
body.page-manage_users .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
body.page-manage_users .msg{margin-top:14px;padding:12px 14px;border-radius:14px;font-weight:800}
body.page-manage_users .msg.ok{background:#ecfdf3;border:1px solid #86efac;color:#166534}
body.page-manage_users .msg.bad{background:#fef2f2;border:1px solid #fca5a5;color:#991b1b}
body.page-manage_users .role-buttons{display:flex;gap:10px;flex-wrap:wrap}
body.page-manage_users .role-btn{padding:10px 16px;border-radius:999px;text-decoration:none;border:1px solid rgba(124,59,59,.16);background:#fff;font-weight:900;color:#5b3a7a;transition:.15s ease}
body.page-manage_users .role-btn:hover{transform:translateY(-1px);box-shadow:0 10px 18px rgba(15,23,42,.08)}
body.page-manage_users .role-btn.active{background:linear-gradient(135deg,var(--app-primary),var(--app-secondary));color:#fff;border-color:transparent}
body.page-manage_users .mu-perms-form{display:flex;flex-direction:column;gap:14px;margin-top:14px}
body.page-manage_users .mu-perm-group{border:1px solid rgba(124,59,59,.08);border-radius:18px;overflow:hidden;background:#fff}
body.page-manage_users .mu-perm-group-head{padding:12px 14px;background:linear-gradient(180deg,#fff,#faf7ff);border-bottom:1px solid rgba(124,59,59,.08)}
body.page-manage_users .mu-perm-group-title{font-weight:900;color:#4b5563}
body.page-manage_users .table-wrap{overflow:auto;border-radius:18px}
body.page-manage_users .mu-users-card{margin-top:16px}
body.page-manage_users .mu-users-table,.page-manage_users .perm-table{width:100%;border-collapse:collapse;min-width:900px}
body.page-manage_users .mu-users-table th,body.page-manage_users .mu-users-table td,body.page-manage_users .perm-table th,body.page-manage_users .perm-table td{padding:12px;border-bottom:1px solid #eef2f5;text-align:right;vertical-align:top}
body.page-manage_users .mu-users-table th,body.page-manage_users .perm-table th{background:#f8fafc;color:#334155;font-weight:900;white-space:nowrap}
body.page-manage_users .mu-username{font-weight:900;color:#0f172a}
body.page-manage_users .mu-self-badge{display:inline-flex;margin-top:6px;padding:4px 10px;border-radius:999px;background:rgba(124,59,59,.08);color:var(--app-primary);font-size:.8rem;font-weight:800}
body.page-manage_users .sub{color:#64748b;font-size:.9rem}
body.page-manage_users .status-on{font-weight:900;color:#166534}
body.page-manage_users .status-off{font-weight:900;color:#b91c1c}
body.page-manage_users .mu-inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 8px}
body.page-manage_users .mu-inline-form.compact{margin-bottom:0}
body.page-manage_users .mu-inline-form.two-lines{margin-bottom:10px}
body.page-manage_users .mu-actions-stack{display:flex;flex-direction:column;gap:8px}
body.page-manage_users .perm-name{font-weight:800;color:#334155}
body.page-manage_users .radios{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
body.page-manage_users .radios label{display:flex;gap:8px;align-items:center;font-weight:800}
body.page-manage_users .btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:14px;border:none;text-decoration:none;font-weight:900;cursor:pointer;transition:.15s ease}
body.page-manage_users .btn:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(15,23,42,.12)}
body.page-manage_users .btn-primary{background:linear-gradient(135deg,var(--app-primary),var(--app-secondary));color:#fff}
body.page-manage_users .btn-soft{background:#eef6ff;color:#1d4ed8}
body.page-manage_users .btn-warn{background:#fff7ed;color:#c2410c}
body.page-manage_users .btn-danger{background:#fef2f2;color:#b91c1c}
body.page-manage_users .btn-light{background:#f8fafc;color:#334155}
@media (max-width:1024px){body.page-manage_users .mu-grid{grid-template-columns:1fr}body.page-manage_users .mu-form-stack .grid{grid-template-columns:1fr}}
@media (max-width:640px){body.page-manage_users .shell-manage-users{padding:16px 8px}body.page-manage_users .mu-users-table,body.page-manage_users .perm-table{min-width:760px}}