@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root{
    --ink:#10231d;
    --muted:#60706a;
    --paper:#f6f3eb;
    --card:#fffdf8;
    --lime:#c7f36b;
    --mint:#7ad7b7;
    --teal:#087f6a;
    --orange:#ff8a5b;
    --line:rgba(16,35,29,.13);
    --shadow:0 24px 70px rgba(16,35,29,.12);
    --success:#16935e;
    --danger:#e5484d;
}*{box-sizing:border-box}body{margin:0;font-family:'DM Sans',sans-serif;background:var(--paper);color:var(--ink);font-size:14px}.app{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:272px;background:var(--ink);color:#c6cedc;padding:20px 14px;display:flex;flex-direction:column;z-index:30;transition:.25s}.brand{display:flex;align-items:center;gap:11px;padding:0 7px 19px;border-bottom:1px solid rgba(255,255,255,.08);position:relative}.brand-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--lime);color:var(--ink);font-size:18px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}.brand b{color:white;font-size:18px}.brand span{color:var(--lime);font-weight:700}.brand small{display:block;font-size:10px;margin-top:2px}.collapse-btn{margin-left:auto;background:none;border:0;color:#7c8799;cursor:pointer}.school-card{display:flex;align-items:center;gap:10px;background:rgba(199,243,107,.1);border:1px solid rgba(199,243,107,.2);padding:11px;margin:17px 0;border-radius:12px}.school-avatar,.avatar{display:grid;place-items:center;background:var(--lime);color:var(--ink);font-weight:800}.school-avatar{width:34px;height:34px;border-radius:9px}.school-card div:nth-child(2){min-width:0;flex:1}.school-card strong,.school-card small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.school-card strong{font-size:12px;color:#f3f5f8}.school-card small{font-size:9px;margin-top:3px}.school-card>i{font-size:9px}.menu-search{display:flex;align-items:center;gap:9px;background:rgba(199,243,107,.1);border:1px solid rgba(199,243,107,.2);border-radius:10px;padding:10px 12px}.menu-search input,.top-search input,.table-search input{border:0;outline:0;background:none;font:inherit;color:inherit;width:100%}.menu-search input{color:white;font-size:12px}nav{overflow-y:auto;padding-right:3px;margin-top:10px}.nav-label{text-transform:uppercase;letter-spacing:.12em;font-size:9px;font-weight:700;color:#677386;margin:20px 11px 8px}.nav-item{width:100%;border:0;background:none;color:#aeb8c7;display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:9px;margin:2px 0;font:500 13px Inter;text-align:left;cursor:pointer}.nav-item>i:first-child{width:18px;text-align:center}.nav-item span{flex:1}.nav-item:hover,.nav-item.active{background:rgba(199,243,107,.15);color:white}.nav-item.active{box-shadow:inset 3px 0 var(--lime)}.caret{font-size:9px;transition:.2s}.nav-group.open .caret{transform:rotate(90deg)}.submenu{max-height:0;overflow:hidden;transition:max-height .25s}.nav-group.open .submenu{max-height:260px}.submenu a{display:block;padding:9px 14px 9px 44px;color:#8e99a9;font-size:12px;position:relative;text-decoration:none}.submenu a:before{content:"";position:absolute;left:27px;top:14px;width:4px;height:4px;border-radius:50%;background:#4b5565}.submenu a.current,.submenu a:hover{color:white}.submenu a.current:before{background:var(--lime);box-shadow:0 0 0 3px rgba(199,243,107,.17)}.sidebar-help{margin-top:auto;display:flex;gap:10px;padding:12px;background:rgba(199,243,107,.1);border-radius:10px}.sidebar-help strong,.sidebar-help small{display:block;font-size:11px}.sidebar-help small{font-size:9px;color:#778396;margin-top:3px}.shell{margin-left:272px;min-height:100vh;display:flex;flex-direction:column;transition:.25s}.topbar{height:72px;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 30px;position:sticky;top:0;z-index:20}.mobile-menu{display:none}.top-search{width:min(460px,40vw);display:flex;align-items:center;gap:10px;color:#98a2b3}.top-search kbd{border:1px solid var(--line);border-radius:6px;padding:3px 7px;background:#fafafa;font:10px Inter;white-space:nowrap}.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px;position:relative}.status{display:flex;align-items:center;gap:7px;font-size:11px;color:#667085;background:#f8fafc;padding:8px 11px;border-radius:30px}.status i{width:7px;height:7px;background:var(--teal);border-radius:50%;box-shadow:0 0 0 3px rgba(8,127,106,.3)}.icon-btn,.icon-outline{width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:#667085;cursor:pointer;position:relative}.notification b{position:absolute;right:-3px;top:-5px;width:17px;height:17px;border:2px solid var(--card);background:var(--orange);color:white;border-radius:50%;font-size:8px;display:grid;place-items:center}.profile{display:flex;align-items:center;gap:9px;background:none;border:0;border-left:1px solid var(--line);padding-left:14px;margin-left:3px;cursor:pointer}.avatar{width:36px;height:36px;border-radius:10px}.profile strong,.profile span{display:block;text-align:left}.profile strong{font-size:12px}.profile span{font-size:9px;color:#98a2b3;margin-top:2px}.profile>i{font-size:8px;color:#98a2b3}.profile-menu{display:none;position:absolute;right:0;top:51px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:12px;width:190px;padding:8px}.profile-menu.show{display:block}.profile-menu a{display:flex;gap:10px;padding:10px;border-radius:8px;color:#475467;font-size:12px}.profile-menu a:hover{background:#f4f5f8}.profile-menu hr{border:0;border-top:1px solid var(--line)}main{padding:31px;flex:1}.page-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px}.breadcrumbs{font-size:11px;color:#98a2b3;display:flex;gap:8px;align-items:center}.breadcrumbs i{font-size:7px}.breadcrumbs b{color:#667085}.page-head h1{font-size:28px;margin:10px 0 5px;letter-spacing:-.03em}.page-head p,.panel-head p{margin:0;color:var(--muted);font-size:12px}.primary-btn,.secondary-btn{border:0;border-radius:9px;padding:11px 15px;font:600 12px Inter;display:inline-flex;align-items:center;gap:8px;cursor:pointer}.primary-btn{background:var(--teal);color:white;box-shadow:0 5px 14px rgba(8,127,106,.2)}.primary-btn:hover{background:#065a4b}.secondary-btn{border:1px solid var(--line);background:var(--card);color:#475467}.alert{display:flex;gap:13px;align-items:flex-start;background:#fff8e8;border:1px solid #f6dda4;border-radius:12px;padding:15px;margin-bottom:20px}.alert-icon{width:34px;height:34px;border-radius:9px;background:#ffedc3;color:#c67c12;display:grid;place-items:center}.alert div:nth-child(2){flex:1}.alert strong{font-size:12px}.alert p{margin:4px 0 0;color:#806b48;font-size:11px}.alert button{border:0;background:none;color:#9a835e;cursor:pointer}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
.metrics-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.stat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
.stat-card{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:18px;display:flex;gap:13px;align-items:center}
.metric-grid article,.metrics-row .metric{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:18px;display:flex;gap:13px;align-items:center}.metric-icon{width:45px;height:45px;border-radius:11px;display:grid;place-items:center;font-size:17px}.violet{background:#edf7f2;color:var(--teal)}.green{background:#e5f7ef;color:var(--teal)}.amber{background:#fff2d5;color:var(--orange)}.metric-grid span,.metric-grid small,.metric-grid strong{display:block}.metric-grid span{font-size:10px;color:#7d8899}.metric-grid strong{font-size:19px;margin:4px 0}.metric-grid small{font-size:9px;color:#98a2b3}.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 2px 8px rgba(16,35,29,.025);overflow:hidden}.panel-head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px}.panel-head h2{font-size:15px;margin:0 0 5px}.panel-actions{display:flex;gap:8px}.table-search{width:205px;border:1px solid var(--line);border-radius:9px;padding:9px 11px;display:flex;gap:8px;color:#98a2b3;font-size:11px}.tabs{display:flex;gap:22px;padding:0 22px;border-bottom:1px solid var(--line)}.tab{border:0;background:none;padding:12px 0;color:#7b8494;font:600 11px Inter;cursor:pointer;border-bottom:2px solid transparent}.tab span{background:#f0f2f5;padding:2px 6px;border-radius:10px;margin-left:4px}.tab.active{color:var(--teal);border-bottom-color:var(--teal)}.tab.active span{background:#edf7f2}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:740px}th{background:#fafbfc;text-align:left;color:#7b8494;font-size:10px;text-transform:uppercase;letter-spacing:.04em;padding:12px 18px;border-bottom:1px solid var(--line)}td{padding:16px 18px;border-bottom:1px solid #f0f2f5;font-size:12px;color:#536074}td strong{color:#253047}.right{text-align:right}.session-cell{display:flex;align-items:center;gap:10px}.session-icon{width:34px;height:34px;background:#edf7f2;color:var(--teal);border-radius:9px;display:grid;place-items:center}.session-cell small{display:block;margin-top:3px;color:#98a2b3}.badge{display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:5px 9px;font-size:9px;font-weight:700}.badge i{width:6px;height:6px;border-radius:50%;background:currentColor}.badge-active{background:#e8f7ef;color:var(--teal)}.badge-archived{background:#f1f3f5;color:#667085}.row-actions{display:flex;justify-content:flex-end;gap:7px}
.row-actions button,.row-actions a.table-btn,.table-btn,.row-actions form{display:inline-flex;align-items:center;justify-content:center}
.row-actions button,.row-actions a.table-btn,.table-btn{width:30px;height:30px;border:1px solid var(--line);background:var(--card);border-radius:8px;color:#667085;cursor:pointer;text-decoration:none;font-size:14px;transition:.2s}
.row-actions button:hover,.row-actions a.table-btn:hover,.table-btn:hover{color:var(--teal);border-color:var(--mint);background:var(--paper)}.table-footer{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;color:#7c8798;font-size:10px}.table-footer button{width:29px;height:29px;border:1px solid var(--line);background:var(--card);border-radius:7px;margin-left:3px}.table-footer .page-active{background:var(--teal);color:white}.table-footer button:disabled{opacity:.45}footer{padding:20px 31px;color:#98a2b3;font-size:10px}footer span{margin:0 7px}.modal-backdrop{position:fixed;inset:0;background:rgba(16,24,40,.5);display:none;align-items:center;justify-content:center;padding:20px;z-index:60;backdrop-filter:blur(3px)}.modal-backdrop.show{display:flex}.modal{width:min(520px,100%);background:var(--card);border-radius:16px;box-shadow:0 30px 80px rgba(16,35,29,.2)}.modal-head{padding:22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}.modal h2{font-size:18px;margin:0 0 6px}.modal p{font-size:11px;color:#7b8494;margin:0}.close-modal{border:0;background:none;cursor:pointer;color:#7b8494}.modal form{padding:22px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:17px;margin-bottom:17px}
.form-field{margin-bottom:17px}.form-field label{display:block;font-size:11px;font-weight:600;margin-bottom:7px}.form-field label b{color:var(--danger)}.form-field>input,.date-input{width:100%;border:1px solid #dce0e7;border-radius:9px;padding:11px 12px;font:12px Inter;outline:0}.form-field>input:focus,.date-input:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(8,127,106,.1)}.form-field small{font-size:9px;color:#98a2b3;display:block;margin-top:5px}.date-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.date-input{display:flex;align-items:center;gap:8px}.date-input input{border:0;outline:0;width:100%;font:12px Inter}.switch-row{display:flex;align-items:center;padding:13px;border:1px solid var(--line);border-radius:10px;cursor:pointer;position:relative}.switch-row div{flex:1}.switch-row strong,.switch-row span{display:block;font-size:11px}.switch-row span{font-size:9px;color:#98a2b3;margin-top:3px}.switch-row input{display:none}.switch-row>i{width:35px;height:20px;border-radius:20px;background:#ccd2dc;position:relative;transition:.2s}.switch-row>i:after{content:"";position:absolute;width:14px;height:14px;background:white;border-radius:50%;left:3px;top:3px;transition:.2s}.switch-row input:checked+i{background:var(--teal)}.switch-row input:checked+i:after{left:18px}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:22px}.toast{position:fixed;right:25px;bottom:25px;background:var(--ink);color:white;padding:13px 17px;border-radius:10px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow);transform:translateY(80px);opacity:0;transition:.3s;z-index:80;font-size:11px}.toast i{color:var(--lime)}.toast.show{transform:none;opacity:1}.overlay{display:none}@media(max-width:980px){.sidebar{transform:translateX(-100%)}.sidebar.mobile-open{transform:none}.shell{margin-left:0}.mobile-menu{display:block;margin-right:12px}.overlay.show{display:block;position:fixed;inset:0;background:rgba(16,24,40,.42);z-index:25}.status{display:none}.metric-grid,.metrics-row,.stat-cards{grid-template-columns:1fr}.panel-head{align-items:flex-start;gap:15px;flex-direction:column}.panel-actions{width:100%}.table-search{flex:1}}@media(max-width:650px){main{padding:20px 14px}.topbar{padding:0 14px}.top-search{display:none}.profile>div:nth-child(2),.profile>i{display:none}.page-head{align-items:flex-start;gap:18px;flex-direction:column}.page-head .primary-btn{width:100%;justify-content:center}.panel-actions{flex-wrap:wrap}.table-search{width:100%;flex-basis:100%}.tabs{overflow-x:auto}.date-grid{grid-template-columns:1fr}.metric-grid,.metrics-row,.stat-cards{gap:10px;grid-template-columns:1fr}.alert p{line-height:1.5}}

/* Attendance Status Buttons */
.attendance-select{display:flex;gap:8px;flex-wrap:wrap}
.status-btn{display:inline-flex;cursor:pointer;border-radius:8px;border:2px solid var(--line);background:white;padding:8px 12px;font-size:11px;font-weight:600;transition:.2s;position:relative}
.status-btn input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.status-btn span{display:flex;align-items:center;gap:6px;color:#667085}
.status-btn:hover{border-color:var(--mint);background:var(--paper)}
.status-btn input:checked + span{color:white}
.status-present input:checked ~ span,.status-present:has(input:checked){background:var(--teal);border-color:var(--teal)}
.status-absent input:checked ~ span,.status-absent:has(input:checked){background:#e5484d;border-color:#e5484d}
.status-late input:checked ~ span,.status-late:has(input:checked){background:var(--orange);border-color:var(--orange)}
.status-excused input:checked ~ span,.status-excused:has(input:checked){background:#6366f1;border-color:#6366f1}
@media(max-width:768px){.attendance-select{flex-direction:column}.status-btn{justify-content:center}}


/* Modal Scrollbar Styling */
.modal-backdrop .modal {
    max-height: 90vh;
    overflow-y: auto;
}

.modal-backdrop .modal::-webkit-scrollbar {
    width: 8px;
}

.modal-backdrop .modal::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.modal-backdrop .modal::-webkit-scrollbar-thumb {
    background: #5b55e7;
    border-radius: 10px;
}

.modal-backdrop .modal::-webkit-scrollbar-thumb:hover {
    background: #4a45d1;
}

/* Form field styling for better layout */
.form-field {
    margin-bottom: 0;
}

.form-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: #5b55e7;
    box-shadow: 0 0 0 3px rgba(91, 85, 231, 0.1);
}

/* Form Group Styling for Dedicated Pages */
.form-group {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    font-family: Inter, sans-serif;
    color: #1f2937;
    transition: all 0.2s ease;
    background: white;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(8,127,106,.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #9ca3af;
}

.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

/* Flash Messages */
.flash {
    background: #e8f7ef;
    border: 1px solid var(--teal);
    border-left: 4px solid var(--teal);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #0e5c3c;
    font-size: 13px;
}

.flash i {
    color: var(--teal);
    font-size: 16px;
}

.flash.error {
    background: #fee;
    border-color: #e5484d;
    color: #8e1c1f;
}

.flash.error i {
    color: #e5484d;
}


/* Direct modal show (for modals without backdrop wrapper) */
.modal {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(16,35,29, 0.5) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    z-index: 60 !important;
    backdrop-filter: blur(3px) !important;
    width: auto !important;
    box-shadow: none !important;
}

.modal.show {
    display: flex !important;
}

.modal-content {
    width: min(520px, 100%);
    background: var(--card);
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(16,35,29, 0.2);
    max-height: 90vh;
    overflow-y: auto;
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 30px;
    border-bottom: 1px solid #e6e9ef;
}

.modal-head h2 {
    margin: 0;
    font-size: 18px;
    color: #0f172a;
}

.modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 20px 30px;
    border-top: 1px solid #e6e9ef;
    background: #f8fafc;
}

.icon-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #f1f3f5;
    border-radius: 8px;
    color: #64748b;
    cursor: pointer;
    transition: 0.2s;
}

.icon-btn:hover {
    background: #e2e8f0;
    color: #334155;
}