@import url('/fonts.css');

/* FuticFlow identity tokens — source of truth: /config/brand.json */
:root {
  --brand-background: #EEF3F1;
  --brand-surface: #FFFFFF;
  --brand-ink: #10272E;
  --brand-teal: #167D80;
  --brand-amber: #F2B544;
  --brand-violet: #6B57B3;
  --brand-lavender: #EEE9F8;
  --brand-muted: #6C7E80;
  --brand-teal-hover: #12696C;
  --brand-teal-soft: #E5F1EF;
  --brand-border: #D7E2DE;

  /* Backward-compatible aliases for the existing screens. */
  --brand-navy: var(--brand-ink);
  --brand-navy-mid: var(--brand-teal);
  --brand-navy-light: #258E90;
  --brand-gold: var(--brand-amber);
  --brand-gold-light: #F8CF75;
  --brand-gold-dark: #81520B;
  --primary: var(--brand-teal);
  --primary-light: var(--brand-teal-hover);
  --primary-dark: var(--brand-ink);
  --primary-bg: var(--brand-teal-soft);
  --accent: var(--brand-amber);
  --dark: var(--brand-ink);
  --bg: var(--brand-background);
  --gray-50: #F8FAF9;
  --gray-100: var(--brand-background);
  --gray-200: #E4EBE8;
  --gray-300: #D2DDD8;
  --gray-400: #AABBB5;
  --gray-500: var(--brand-muted);
  --gray-600: #52666A;
  --gray-700: #33494E;
  --gray-800: var(--brand-ink);
  --gray-900: #0B1D22;
  --success: #197044;
  --success-bg: #EAF6EF;
  --warning: #854D0E;
  --warning-bg: #FFF4D6;
  --danger: #B42318;
  --danger-bg: #FDECEC;
  --info: #176B72;
  --info-bg: #E7F3F3;
  --font: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --brand-display-font: "Alexandria", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}
.login-page {
  background: var(--brand-ink);
}
.login-logo { background: var(--brand-navy); color: var(--brand-gold); }
.login-title { color: var(--brand-navy); }
.btn-login, .btn-primary, .btn-warning {
  background: var(--brand-gold);
  color: var(--brand-navy);
  font-weight: 700;
}
.btn-login:hover, .btn-primary:hover, .btn-warning:hover {
  background: var(--brand-gold-light);
  color: var(--brand-navy);
}
.btn-demo { color: var(--brand-navy-mid); border-color: var(--brand-gold-dark); }
.sidebar { background: var(--brand-navy); }
.sidebar-brand { border-bottom-color: rgba(201,168,76,.3); }
.brand-name { color: var(--brand-gold-light); }
.brand-badge { background: var(--brand-gold); }
.brand-year, .user-role { color: #B8C4D8; }
.sidebar-section { color: var(--brand-gold-light); }
.nav-item { color: #D5DDED; }
.nav-item:hover { background: var(--brand-navy-mid); }
.nav-item.active { background: var(--brand-gold); color: var(--brand-navy); }
.user-avatar { background: var(--brand-gold); color: var(--brand-navy); }
.sidebar-user { border-top-color: rgba(201,168,76,.3); }
.header { border-bottom: 2px solid var(--brand-gold); }
.form-input:focus, .form-control:focus, .filter-input:focus, .filter-select:focus, .filter-search:focus {
  border-color: var(--brand-gold-dark);
  outline-color: var(--brand-gold-dark);
}
.grade-tab.active { background: var(--brand-navy-mid); border-color: var(--brand-gold); color: white; }
.student-item.selected, .vio-type-btn.selected, .attend-type-btn.active {
  border-color: var(--brand-gold-dark);
  background: var(--primary-bg);
  color: var(--brand-navy);
}
.student-avatar { background: var(--brand-navy-light); }
.chart-bar { background: var(--brand-gold); }
.owner-page { color: var(--brand-navy); }
.owner-page header { background: var(--brand-navy); border-bottom: 3px solid var(--brand-gold); }
.owner-page header h1 { color: var(--brand-gold-light); }
.owner-page .card { border-color: #DEE4EE; box-shadow: 0 4px 20px rgba(11,23,48,.05); }
.owner-page h2 { color: var(--brand-navy-mid); }
.owner-page input, .owner-page select { border-color: #BCC8DA; }
.owner-page input:focus, .owner-page select:focus {
  outline: 2px solid var(--brand-gold-dark);
  outline-offset: 2px;
}
.owner-page button { background: var(--brand-gold); color: var(--brand-navy); font-weight: 700; }
.owner-page button:hover { background: var(--brand-gold-light); }
.owner-page button.secondary { background: #E8EDF5; color: var(--brand-navy-mid); }
.owner-page button.secondary:hover { background: #DCE4F1; }
.owner-page th { background: #F1F4F9; color: var(--brand-navy-mid); }
.owner-page th, .owner-page td { border-bottom-color: #E1E6EF; }
.owner-page small { color: #586A84; }
.owner-page .metrics strong { color: var(--brand-navy-mid); }
.owner-page .notice { background: var(--primary-bg); border: 1px solid var(--brand-gold); }
button:focus-visible, a:focus-visible { outline: 3px solid var(--brand-gold-dark); outline-offset: 3px; }
:is(#passwordDialog,#usernameDialog) { width: min(520px,94vw); border: 1px solid var(--brand-gold); border-radius: 16px; padding: 24px; color: var(--brand-navy); }
:is(#passwordDialog,#usernameDialog)::backdrop { background: rgba(11,23,48,.6); }
:is(#passwordDialog,#usernameDialog) h2 { margin-top: 0; }
:is(#passwordDialog,#usernameDialog) label { display: block; margin: 12px 0 6px; }
:is(#passwordDialog,#usernameDialog) input { width: 100%; }
:is(#passwordDialog,#usernameDialog) .actions { display: flex; gap: 10px; margin-top: 18px; }
#passwordError { color: #943333; }

.system-credit {position:relative;clear:both;text-align:center;padding:18px 12px;background:var(--brand-navy);color:#fff;font-size:14px;width:100%;z-index:1;}
.system-credit bdi {color:var(--brand-gold);margin-inline-start:4px;}
.transfer-context {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;background:#f8f5e9;border:1px solid var(--brand-gold);border-radius:12px;padding:16px;}
.transfer-context small,.transfer-context strong {display:block;}
.transfer-context small {margin-bottom:6px;color:#64748b;}
.transfer-columns {display:grid;grid-template-columns:minmax(0,1fr) 130px minmax(0,1fr);gap:14px;align-items:center;margin:20px 0;}
.transfer-columns section {min-width:0;}
.transfer-columns h3 {background:var(--brand-navy);color:#fff;padding:12px;border-radius:8px;text-align:center;}
.transfer-columns input,.transfer-list {margin-top:12px;}
.transfer-list {height:350px!important;padding:0!important;}
.transfer-list option {padding:10px 12px;background:#f0f4fa;color:#14213d;}
.transfer-list option:nth-child(even) {background:#e0e8f4;}
.transfer-arrows {display:flex;flex-direction:column;gap:12px;}
@media(max-width:650px){.transfer-context{grid-template-columns:1fr;}.transfer-columns{grid-template-columns:1fr;}.transfer-arrows{flex-direction:row;flex-wrap:wrap;}.transfer-list{height:240px!important;}}

body:has(.app.active) .system-credit {margin-right:var(--sidebar-w);width:calc(100% - var(--sidebar-w));}

/* Responsive layout and touch controls across school and owner pages. */
.main,.content,.page,.card,.form-grid>*,.quick-record>* {min-width:0;}
.table-wrap,.owner-page .scroll {max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;}
button,a,input,select,textarea {touch-action:manipulation;}
.sidebar-backdrop {display:none;}
.modal {max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;}
dialog {max-height:calc(100dvh - 32px);overflow-y:auto;}
.system-credit {overflow-wrap:anywhere;}
@media(max-width:1024px){
 .grid-3,.form-grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}
 .header-breadcrumb{min-width:0;overflow-wrap:anywhere;}
 .header-actions{flex-shrink:0;}
}
@media(max-width:768px){
 :root {--sidebar-w:0px;}
 body {min-width:0;}
 .main{width:100%;margin-right:0;}
 .sidebar,.sidebar.open{width:min(300px,86vw);height:100dvh;min-height:0;z-index:180;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);}
 .sidebar:not(.open){visibility:hidden;pointer-events:none;}
 .sidebar.open{visibility:visible;pointer-events:auto;}
 .sidebar-brand,.sidebar-user{flex-shrink:0;}
 .sidebar-nav{min-height:0;overflow-y:auto;overscroll-behavior:contain;}
 .sidebar-backdrop.visible{display:block;position:fixed;inset:0;background:rgba(11,23,48,.55);z-index:170;border:0;border-radius:0;padding:0;width:100%;height:100dvh;}
 body.mobile-navigation-open{overflow:hidden;}
 .nav-item{min-height:46px;padding:12px;}
 .header{height:auto;min-height:64px;padding:10px 12px;gap:8px;}
 .header-breadcrumb{flex:1;font-size:12px;line-height:1.6;}
 .header-school{display:none;}
 .header-actions{gap:6px;}
 .header .btn-icon{width:44px;height:44px;flex-shrink:0;}
 .content{padding:14px 10px;}
 .page-title{font-size:1.35rem;}
 .page-header.flex{flex-wrap:wrap;gap:12px;}
 .page-actions,.actions{flex-wrap:wrap;gap:10px;}
 .btn,button.btn-login,button.btn-demo{min-height:44px;justify-content:center;white-space:normal;}
 input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important;min-width:0;max-width:100%;}
 input[type=checkbox],input[type=radio]{min-width:20px;min-height:20px;vertical-align:middle;}
 .form-grid,.form-grid-3,.grid-2,.grid-3,.quick-record{grid-template-columns:minmax(0,1fr);}
 .form-grid{gap:14px;}
 .filter-bar{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:14px;}
 .filter-search,.filter-select,.filter-input{width:100%;min-width:0;min-height:44px;}
 .grade-tabs{max-width:100%;overflow-x:auto;flex-wrap:nowrap;}
 .grade-tab{flex-shrink:0;min-height:44px;}
 .attend-type-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
 .attend-type-btn{min-width:0;width:100%;padding:12px 6px;}
 .card-header{flex-wrap:wrap;gap:10px;padding:14px;}
 .card-body{padding:14px;}
 .table-wrap table,.owner-page .scroll table{min-width:650px;}
 .table-wrap th,.table-wrap td{padding:12px 10px;white-space:normal;}
 .table-wrap td .btn{margin:4px 0;}
 .table-wrap:focus-visible,.owner-page .scroll:focus-visible{outline:2px solid var(--brand-gold);outline-offset:2px;}
 .modal-overlay{padding:8px;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom));}
 .modal-overlay .modal{width:100%!important;max-width:100%!important;max-height:calc(100dvh - 16px)!important;border-radius:12px;}
 .modal-header{padding:14px;gap:10px;align-items:flex-start;}
 .modal-header h2{font-size:20px;line-height:1.5;overflow-wrap:anywhere;}
 .modal-body,.modal-footer{padding:14px;}
 .modal-footer{flex-wrap:wrap;}
 .modal-close{width:44px;height:44px;flex-shrink:0;}
 .modal p,.modal li{overflow-wrap:anywhere;}
 :is(#passwordDialog,#usernameDialog,#paymentDialog){width:calc(100vw - 20px);max-width:none;margin:auto;padding:18px;max-height:calc(100dvh - 20px);}
 .login-page{padding:20px 12px;min-height:100dvh;}
 .login-card{padding:26px 20px;}
 .toast-container{left:10px;right:10px;bottom:max(12px,env(safe-area-inset-bottom));max-width:calc(100vw - 20px);}
 .toast{max-width:100%;min-width:0;overflow-wrap:anywhere;}
 .owner-page header{padding:16px;flex-wrap:wrap;gap:12px;}
 .owner-page header h1{font-size:20px;}
 .owner-page main{padding:0 10px;margin:18px auto;}
 .owner-page .card{padding:16px;margin:14px 0;}
 .owner-page .grid{grid-template-columns:minmax(0,1fr);}
 .owner-page .actions button{min-height:44px;}
 .owner-page .notice{overflow-wrap:anywhere;}
 .profile-header{flex-wrap:wrap;gap:12px;}
 .profile-stats{flex-wrap:wrap;}
 .transfer-columns{grid-template-columns:minmax(0,1fr);}
 .transfer-context{grid-template-columns:minmax(0,1fr);padding:12px;}
 .transfer-arrows{flex-direction:row;flex-wrap:wrap;}
 .transfer-arrows .btn{flex:1 1 120px;}
 .transfer-list{height:220px!important;}
 .system-credit{font-size:12px;padding:16px 10px;padding-bottom:max(16px,env(safe-area-inset-bottom));}
}
@media(max-width:360px){.stats-grid{grid-template-columns:minmax(0,1fr);}.header-actions .btn-icon[title="بحث"]{display:none;}.login-card{padding:20px 14px;}}

body:has(.modal-overlay.open),body:has(dialog[open]){overflow:hidden;}
@media(max-width:768px){.transfer-arrows .btn[aria-label]::after{content:attr(aria-label);font-size:12px;}}

@media(max-width:768px){.modal-header button,.owner-page button{min-height:44px;}.modal-header button{min-width:44px;}body:has(.app.active) .system-credit{margin-right:0;width:100%;}}

/* Penalties: inline workflow with parallel context selectors. */
.penalty-workspace{padding:24px;margin:18px 0;}
#penaltyFields{border:0;padding:0;margin:0;min-width:0;}
.penalty-selectors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:22px;align-items:start;}
.penalty-student-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:18px 0;}
.penalty-selectors label,.penalty-student-fields label{display:block;min-width:0;}
.penalty-selectors .form-control,.penalty-student-fields .form-control{width:100%;margin-top:8px;}
#penaltyDetails{border-top:1px solid #e4e7ed;padding-top:18px;}
#penaltyDetails textarea{margin:8px 0 18px;min-height:90px;}
.penalty-document{border:1px solid #d9deea;padding:24px;margin-top:20px;line-height:2;background:white;color:#0b1730;}
.penalty-document h1,.penalty-document h2{text-align:center;}
#penaltyPrintSheet{display:none;}
@media(max-width:768px){.penalty-selectors,.penalty-student-fields{grid-template-columns:minmax(0,1fr);gap:14px;}.penalty-workspace,.penalty-document{padding:16px;}}
@media print{body:has(#penaltyPrintSheet)>*{display:none!important;}body>#penaltyPrintSheet{display:block!important;border:0;margin:0;padding:12px;font-family:Arial;line-height:2;}body:has(#penaltyPrintSheet){background:white!important;overflow:visible!important;}}

.save-success-dialog{border:1px solid var(--brand-gold);border-radius:16px;padding:0;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;color:var(--brand-navy);background:white;font-family:inherit;box-shadow:0 20px 60px #0b173040;direction:rtl;}
.save-success-dialog::backdrop{background:rgba(11,23,48,.4);}
.save-success-dialog header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e3e7ee;padding:14px 20px;gap:12px;}
.save-success-dialog h2{font-size:1.2rem;margin:0;}
.save-success-close{border:1px solid #dce0e6;border-radius:8px;background:#fff;color:var(--brand-navy);font-size:24px;min-width:44px;min-height:44px;cursor:pointer;}
.save-success-body{padding:22px;text-align:center;overflow-wrap:anywhere;}
.save-success-icon{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#eaf6ef;color:#197044;font-size:30px;}
#saveSuccessMessage{font-size:1.15rem;font-weight:700;margin:16px 0 10px;}
#saveSuccessDetails,#saveSuccessNotice{margin:10px 0;line-height:1.7;}
#saveSuccessNotice{font-size:.9rem;color:#526078;}
#saveSuccessWarning{background:#fff5da;padding:12px;border-radius:8px;}
.save-success-dialog footer{padding:16px 20px;border-top:2px solid var(--brand-gold);display:flex;justify-content:flex-end;}
.save-success-return{min-width:100px;min-height:44px;}
@media(max-width:480px){.save-success-dialog header,.save-success-body,.save-success-dialog footer{padding:16px;}}
.attendance-student-cell{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.attendance-saved-notice{min-height:32px;padding:5px 9px;font-size:.78rem;white-space:nowrap;}
.attendance-duplicate-dialog{border:1px solid #ef9b00;border-radius:16px;padding:0;width:min(600px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;color:var(--brand-navy);background:#fff;font-family:inherit;box-shadow:0 20px 60px #0b173055;direction:rtl;}
.attendance-duplicate-dialog::backdrop{background:rgba(11,23,48,.48);}
.attendance-duplicate-dialog header{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid #f1d59b;background:#fff8e8;}
.attendance-duplicate-dialog header span{font-size:1.6rem;color:#b76e00;}
.attendance-duplicate-dialog h2{margin:0;font-size:1.15rem;}
.attendance-duplicate-body{padding:16px 22px;line-height:1.8;}
.attendance-duplicate-body ul{padding-inline-start:24px;margin:8px 0;}
.attendance-duplicate-dialog footer{padding:12px 20px;border-top:1px solid #e3e7ee;display:flex;justify-content:flex-start;}
@media(max-width:768px){.attendance-student-cell{align-items:flex-start;flex-direction:column;gap:5px;}.attendance-saved-notice{white-space:normal;text-align:right;}}

/* Final FuticFlow component mapping; keep alerts on their semantic colors. */
*,*::before,*::after{box-sizing:border-box;}
html,body{background:var(--brand-background);color:var(--brand-ink);font-family:var(--font);}
h1,h2,h3,.page-title,.brand-name{font-family:var(--brand-display-font);}
.login-page{background:var(--brand-ink);}
.btn-login,.btn-primary{background:var(--brand-teal);color:#fff;}
.btn-login:hover,.btn-primary:hover{background:var(--brand-teal-hover);color:#fff;}
.btn-warning{background:var(--brand-amber);color:var(--brand-ink);}
.btn-warning:hover{background:#E6A82F;color:var(--brand-ink);}
.btn-danger{background:var(--danger);color:#fff;}
.btn-success{background:var(--success);color:#fff;}
.sidebar{background:var(--brand-ink);font-family:'Tajawal',var(--font);}
.sidebar-brand,.sidebar-user{border-color:rgba(242,181,68,.28);}
.brand-name,.sidebar-section{color:var(--brand-amber);}
.brand-badge,.user-avatar{background:var(--brand-amber);color:var(--brand-ink);}
.nav-item:hover{background:#193A40;}
.nav-item.active{background:var(--brand-teal);color:#fff;}
.header{background:var(--brand-surface);color:var(--brand-ink);border-bottom-color:var(--brand-teal);}
.card,.modal,.login-card{background:var(--brand-surface);border-color:var(--brand-border);}
.form-input:focus,.form-control:focus,.filter-input:focus,.filter-select:focus,.filter-search:focus{border-color:var(--brand-teal);outline-color:var(--brand-teal);}
.grade-tab.active{background:var(--brand-teal);border-color:var(--brand-teal);color:#fff;}
.student-item.selected,.vio-type-btn.selected,.attend-type-btn.active{border-color:var(--brand-teal);background:var(--brand-teal-soft);color:var(--brand-ink);}
.student-avatar,.chart-bar{background:var(--brand-teal);}

/* Statistics: readable single-period dashboard and chart controls. */
.stats-filters .form-grid{align-items:end}
.stats-chart-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.stats-chart-head label{min-width:150px;font-weight:700}
.stats-chart-head h3{margin-bottom:4px}
.stats-muted{color:#64748b;font-size:.9rem}
.stats-legend{display:flex;gap:22px;flex-wrap:wrap;margin:12px 0;color:#334155}
.stats-legend span{color:var(--legend-color);font-weight:700}
.stats-chart-wrap{width:100%;overflow-x:auto;border:1px solid #e5eaf0;border-radius:12px;background:#fff;padding:10px 6px}
.stats-chart-wrap svg{display:block;width:100%;min-width:560px;height:auto}
.stats-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:18px 0}
.stats-metric{padding:16px;border-top:4px solid var(--metric-color);display:flex;flex-direction:column;gap:5px}
.stats-metric h3{margin:0;font-size:1.05rem}
.stats-metric strong{font-size:2.15rem;line-height:1.1;color:#0b1730}
.stats-metric span,.stats-metric small{color:#64748b}
.stats-breakdown-list{display:grid;gap:10px;margin-top:18px}
.stats-breakdown-row{display:grid;grid-template-columns:minmax(150px,220px) 1fr 42px;align-items:center;gap:12px}
.stats-breakdown-label{font-weight:700;color:#334155}
.stats-breakdown-track{height:18px;border-radius:999px;background:#edf2f7;overflow:hidden}
.stats-breakdown-track span{display:block;height:100%;border-radius:999px;min-width:0;transition:width .25s ease}
.stats-breakdown-row strong{text-align:end;color:#0b1730}
@media(max-width:600px){.stats-breakdown-row{grid-template-columns:1fr 42px}.stats-breakdown-track{grid-column:1 / -1;grid-row:2}.stats-breakdown-row strong{grid-column:2;grid-row:1}}
.owner-page{background:var(--brand-background);color:var(--brand-ink);}
.owner-page header{background:var(--brand-ink);border-bottom-color:var(--brand-teal);}
.owner-page header h1{color:var(--brand-amber);}
.owner-page .card{background:var(--brand-surface);border-color:var(--brand-border);box-shadow:0 4px 20px rgba(16,39,46,.06);}
.owner-page h2,.owner-page .metrics strong{color:var(--brand-ink);}
.owner-page input,.owner-page select{border-color:#AFC1BC;color:var(--brand-ink);}
.owner-page input:focus,.owner-page select:focus{outline-color:var(--brand-teal);}
.owner-page button{background:var(--brand-teal);color:#fff;}
.owner-page button:hover{background:var(--brand-teal-hover);}
.owner-page button.secondary{background:var(--brand-lavender);color:var(--brand-ink);}
.owner-page button.secondary:hover{background:#E2DAF2;}
.owner-page th{background:var(--brand-teal-soft);color:var(--brand-ink);}
.owner-page th,.owner-page td{border-bottom-color:var(--brand-border);}
.owner-page .notice{background:var(--warning-bg);border-color:var(--brand-amber);color:var(--brand-ink);}
.transfer-context{background:var(--brand-lavender);border-color:var(--brand-violet);}
.system-credit{background:var(--brand-ink);}
.save-success-icon{background:var(--success-bg);color:var(--success);}
#saveSuccessWarning{background:var(--warning-bg);color:var(--warning);}
button:focus-visible,a:focus-visible{outline-color:var(--brand-violet);}

/* Match the approved FuticFlow visual direction: calm surfaces, teal actions,
   amber confirmation, and restrained violet secondary controls. */
.sidebar-brand{display:flex;align-items:center;gap:10px;padding:18px 16px 16px;}
.brand-name{display:flex;align-items:center;gap:9px;min-width:0;flex:1;color:#fff;font-size:.88rem;line-height:1.5;}
.brand-name .brand-badge{display:inline-grid;place-items:center;flex:0 0 34px;width:34px;height:34px;margin:0;border-radius:9px;background:var(--brand-teal);color:#fff;font-family:var(--brand-display-font);font-size:1.05rem;font-weight:800;}
.brand-year{margin-top:0;color:#B9CCCA;}
.btn-secondary{background:var(--brand-lavender);color:var(--brand-violet);border:1px solid #D8CDED;}
.btn-secondary:hover{background:#E5DDF3;border-color:var(--brand-violet);color:var(--brand-ink);}
.btn-success{background:var(--success);color:#fff;}
.btn-warning{background:var(--brand-amber);color:var(--brand-ink);}
.sidebar-brand,.sidebar-user{border-color:rgba(22,125,128,.35);}
.header{border-bottom:1px solid var(--brand-border);}
.card{box-shadow:0 4px 20px rgba(16,39,46,.045);}
.attend-type-btn.active,.grade-tab.active{box-shadow:0 0 0 2px rgba(22,125,128,.14);}
.student-item{margin:5px 2px;padding:12px 14px;background:var(--brand-surface);border:1px solid var(--brand-border);border-radius:12px;box-shadow:0 2px 7px rgba(16,39,46,.09);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease;}
.student-item:hover{transform:translateY(-1px);background:var(--brand-surface);border-color:#AFCBC5;box-shadow:0 5px 12px rgba(16,39,46,.13);}
.student-item.selected{border:1.5px solid var(--brand-teal);background:var(--brand-teal-soft);box-shadow:0 3px 10px rgba(22,125,128,.2);}
.student-field-chip{display:inline-block;min-width:64px;max-width:220px;padding:6px 10px;border:1px solid #C9DBD5;border-radius:10px;background:var(--brand-surface);box-shadow:0 2px 7px rgba(16,39,46,.12),inset -3px 0 0 var(--brand-teal);line-height:1.55;color:var(--brand-ink);vertical-align:middle;}
.student-name-chip{min-width:130px;max-width:220px;padding:7px 11px;font-weight:700;}
.attendance-date-chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px;}
.attendance-date-chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:5px 10px;border:1px solid #B9D4CE;border-radius:10px;background:var(--brand-teal-soft);color:var(--brand-ink);box-shadow:0 2px 6px rgba(16,39,46,.08);font-size:.9rem;}
.attendance-date-chip button{display:grid;place-items:center;width:20px;height:20px;min-height:20px;padding:0;border:0;border-radius:50%;background:var(--brand-lavender);color:var(--brand-violet);font-size:.72rem;line-height:1;cursor:pointer;}
.attendance-excuse-label{display:inline-flex;align-items:center;gap:5px;font-size:.82rem;color:var(--brand-muted);}
.attendance-excuse-label select{min-height:32px;padding:3px 8px;border:1px solid var(--brand-border);border-radius:8px;background:var(--brand-surface);color:var(--brand-ink);font:inherit;}
.attendance-date-add{display:flex;align-items:center;gap:10px;max-width:520px;margin-bottom:6px;}
.attendance-date-add input{max-width:260px;}
.attendance-date-add input[type=date]::-webkit-calendar-picker-indicator{width:16px;height:16px;opacity:.78;}
.attendance-date-add>.btn{min-height:36px;padding:5px 10px;font-size:.88rem;}
@media(max-width:768px){.attendance-date-add{align-items:stretch;flex-direction:column;}.attendance-date-add input{max-width:none;width:100%;}.attendance-date-add button{width:100%;}}
.attendance-batch-help{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-inline-start:4px solid var(--brand-teal);border-radius:8px;background:var(--brand-teal-soft);color:var(--brand-ink);}
.attendance-student-dates{margin:12px 0;padding:14px;border:1px solid var(--brand-border);border-radius:12px;background:var(--brand-background);}
.attendance-student-dates-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.attendance-student-dates .attendance-date-add{max-width:none;}
.attendance-student-dates .attendance-date-add input{max-width:260px;}
.attendance-student-select{padding:3px 7px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--brand-ink);font:inherit;text-align:start;cursor:pointer;}
.attendance-student-select:hover,.attendance-student-select.selected{border-color:var(--brand-teal);background:var(--brand-teal-soft);box-shadow:0 2px 7px rgba(16,39,46,.1);}
@media(max-width:768px){.attendance-student-dates-heading{align-items:flex-start;flex-direction:column}.attendance-student-dates .attendance-date-add input{max-width:none;width:100%;}.attendance-date-chip{flex-wrap:wrap;justify-content:space-between;min-width:100%;}}

/* Compact date entries so a busy student's history stays easy to scan. */
.attendance-student-dates{width:fit-content;max-width:100%;margin:5px 0;padding:6px;}
.attendance-inline-editor{margin-top:5px;padding:5px;border:1px solid var(--brand-border);border-radius:7px;background:var(--brand-background);max-width:260px;}
.attendance-inline-date-chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px;}
.attendance-inline-editor .attendance-multi-calendar{margin:0;max-width:250px;}
.attendance-inline-editor .attendance-calendar-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;}
.attendance-inline-editor .attendance-calendar-day{min-height:21px;padding:1px;font-size:.64rem;}
.attendance-inline-editor .attendance-calendar-footer{font-size:.75rem;gap:5px;}
.attendance-student-dates-heading{gap:6px;font-size:.9rem;}
.attendance-date-chips{width:fit-content;max-width:100%;gap:4px;margin:3px 0 5px;}
.attendance-date-chip{gap:3px;min-width:0;min-height:24px;padding:2px 4px;border-radius:6px;font-size:.7rem;line-height:1.1;box-shadow:0 1px 3px rgba(16,39,46,.06);}
.attendance-date-chip strong{font-size:.72rem;white-space:nowrap;}
.attendance-date-chip button{width:15px;height:15px;min-height:15px;font-size:.58rem;}
.attendance-excuse-label{gap:0;font-size:.66rem;white-space:nowrap;}
.attendance-excuse-label>span{display:none!important;}
.attendance-excuse-label select{width:76px;min-width:76px;min-height:22px;height:22px;padding:1px 3px;border-radius:6px;font-size:.66rem;}
.attendance-student-dates .attendance-date-add{gap:6px;margin:0;}
.attendance-student-dates .attendance-date-add input{max-width:170px;min-height:26px;padding:3px 6px;font-size:.76rem;}
.attendance-date-add input[type=date]::-webkit-calendar-picker-indicator{width:14px;height:14px;}
.attendance-student-dates .attendance-date-add>.btn{min-height:25px;padding:2px 6px;font-size:.7rem;}
@media(max-width:768px){.attendance-student-dates-heading{align-items:center;flex-direction:row}.attendance-date-chip{width:max-content;max-width:100%;min-width:0;min-height:24px;flex-wrap:nowrap;justify-content:flex-start;padding:2px 4px}.attendance-date-chip strong{font-size:.72rem}.attendance-excuse-label select{width:76px;min-width:76px;min-height:22px;height:22px}.attendance-student-dates .attendance-date-add{align-items:center;flex-direction:row;flex-wrap:wrap}.attendance-student-dates .attendance-date-add input{max-width:170px;width:min(48vw,170px);}.attendance-student-dates .attendance-date-add button{width:auto}.attendance-student-dates .attendance-date-add small{flex-basis:100%;}}
#studentsTable>tr>td:first-child{font-weight:600;color:var(--brand-ink);}

/* Shared shell for standalone pages; status colors are intentionally semantic. */
.families-page,.push-test-page,.brand-standalone{min-height:100vh;background:var(--brand-background);color:var(--brand-ink);font-family:var(--font);line-height:1.8;}
.families-page main,.push-test-page main,.brand-standalone main{background:var(--brand-surface);border-color:var(--brand-border);color:var(--brand-ink);box-shadow:0 8px 28px rgba(16,39,46,.08);}
.families-page h1,.families-page h2,.push-test-page h1,.brand-standalone h1{color:var(--brand-ink);font-family:var(--brand-display-font);}
.families-page .intro,.push-test-page .label,.families-page .empty,.push-test-page .small{color:var(--brand-muted);}
.families-page form{border-color:var(--brand-border);}
.families-page input,.brand-standalone input,.brand-standalone select{color:var(--brand-ink);border-color:#AFC1BC;background:var(--brand-surface);}
.families-page button,.push-test-page button,.brand-standalone button{background:var(--brand-teal);color:#fff;font-weight:700;}
.families-page button:hover,.push-test-page button:hover,.brand-standalone button:hover{background:var(--brand-teal-hover);}
.families-page button.secondary{background:var(--brand-lavender);color:var(--brand-ink);}
.families-page .notice,.push-test-page .notice{background:var(--warning-bg);border-color:var(--brand-amber);color:var(--brand-ink);}
.families-page .notice.info{background:var(--info-bg);border-color:var(--info);}
.families-page .student{background:var(--brand-teal-soft);}
.families-page th{background:var(--brand-teal-soft);color:var(--brand-ink);}
.families-page th,.families-page td{border-bottom-color:var(--brand-border);}
.families-page #status,.push-test-page #status{color:var(--info);}
.families-page #status.success,.push-test-page #status.success{color:var(--success);}
.families-page #status.error,.push-test-page #status.error{color:var(--danger);}
.families-page #status.warning,.push-test-page #status.warning{color:var(--warning);}
.families-page a,.brand-standalone a{color:var(--brand-teal-hover);}
@media(max-width:768px){.families-page{padding:10px}.families-page main{margin:12px auto;padding:18px}.families-page table{font-size:.9rem}.families-page th,.families-page td{padding:8px 6px}.push-test-page{padding:12px}.push-test-page main{padding:20px}.brand-standalone main{width:min(100% - 20px,720px);margin:16px auto;padding:18px}}

/* Rasd application shell: a calm, clear dashboard built from the FuticFlow palette. */
html,body,button,input,select,textarea{font-family:var(--font);}
h1,h2,h3,.page-title,.card-title,.login-title{font-family:var(--brand-display-font);}
body{background:var(--brand-background);color:var(--brand-ink);}
.login-page{background:var(--brand-background);}
.login-card{border:1px solid var(--brand-border);border-radius:22px;box-shadow:0 18px 48px rgba(16,39,46,.1);}
.login-logo{background:var(--brand-amber);color:var(--brand-ink);font-family:'Tajawal',var(--font);font-weight:800;box-shadow:0 6px 14px rgba(16,39,46,.12);}
.login-title{color:var(--brand-ink);font-family:'Tajawal',var(--font);font-size:2.1rem;font-weight:800;letter-spacing:0;}
.login-sub{color:var(--brand-muted);line-height:1.9;}
.sidebar{background:var(--brand-ink);}
.sidebar-brand{display:flex;align-items:stretch;flex-direction:column;gap:0;padding:22px 18px 18px;border-bottom:1px solid rgba(22,125,128,.34);}
.brand-name{display:flex;align-items:center;gap:10px;min-width:0;color:#fff;font-family:'Tajawal',var(--font);font-size:1.2rem;line-height:1.4;}
.brand-name .brand-badge{display:inline-grid;place-items:center;flex:0 0 38px;width:38px;height:38px;margin:0;border-radius:12px;background:var(--brand-amber);color:var(--brand-ink);font-family:'Tajawal',var(--font);font-size:1.3rem;font-weight:800;}
.brand-product{font-family:'Tajawal',var(--font);font-size:1.55rem;font-weight:800;letter-spacing:0;}
.brand-school-name{margin-top:10px;color:#D8E6E2;font-family:'Tajawal',var(--font);font-size:.8rem;line-height:1.65;}
.brand-year{margin-top:3px;color:#91B8B5;font-size:.72rem;}
.sidebar-section{margin:12px 8px 9px;padding:9px 12px;border-right:3px solid var(--brand-amber);border-radius:9px;background:rgba(242,181,68,.12);box-shadow:0 4px 12px rgba(0,0,0,.15);color:var(--brand-amber);font-size:.82rem;font-weight:800;letter-spacing:0;}
.nav-item{color:#DCE9E6;border-radius:10px;margin-bottom:4px;}
.nav-item:hover{background:rgba(22,125,128,.23);color:#fff;}
.nav-item.active{position:relative;transform:translateX(-4px);background:rgba(22,125,128,.48);color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.2),inset -3px 0 0 var(--brand-amber);}
.header{background:var(--brand-surface);border-bottom:1px solid var(--brand-border);box-shadow:0 2px 8px rgba(16,39,46,.025);}
.content{background:var(--brand-background);}
.page-title,.card-title{color:var(--brand-ink);}
.card,.modal{border:1px solid var(--brand-border);border-radius:16px;box-shadow:0 5px 20px rgba(16,39,46,.055);}
.card-header{border-bottom-color:var(--brand-border);}
.btn,.btn-primary,.btn-secondary,.btn-success,.btn-warning,.btn-danger,.btn-demo,.btn-login{border-radius:9px;transition:background .16s ease,border-color .16s ease,transform .12s ease,box-shadow .16s ease;}
.btn-primary,.btn-login{background:var(--brand-teal);color:#fff;}
.btn-primary:hover,.btn-login:hover{background:var(--brand-teal-hover);color:#fff;}
.btn-secondary{background:#fff;border:1px solid var(--brand-border);color:var(--brand-ink);}
.btn-secondary:hover{background:var(--brand-teal-soft);border-color:var(--brand-teal);color:var(--brand-ink);}
.btn-warning{background:var(--brand-amber);color:var(--brand-ink);}
.btn-danger{background:var(--danger);color:#fff;}
.form-control,.form-input,.filter-input,.filter-select,.filter-search,textarea{border-color:#C7D5D1;border-radius:9px;background:#fff;color:var(--brand-ink);}
.form-control:focus,.form-input:focus,.filter-input:focus,.filter-select:focus,.filter-search:focus,textarea:focus{border-color:var(--brand-teal);outline:3px solid rgba(22,125,128,.13);}
table th{background:var(--brand-teal-soft);color:var(--brand-ink);}
table th,table td{border-bottom-color:var(--brand-border);}
.stat-card,.student-item,.attendance-student-dates{border-color:var(--brand-border);}
.stat-card{background:#fff;border-radius:16px;box-shadow:0 7px 20px rgba(16,39,46,.055);}
.system-credit{background:var(--brand-ink);color:#DCE9E6;}
.system-credit bdi{color:var(--brand-amber);}
button:focus-visible,a:focus-visible{outline:3px solid var(--brand-amber);outline-offset:3px;}
@media(max-width:768px){.sidebar-brand{padding:18px 16px 14px}.brand-product{font-size:1.4rem}.card{border-radius:14px}.login-card{padding:28px 20px}}

/* Keep the existing FuticFlow credit visible at the bottom of the sign-in screen. */
.login-page{padding-bottom:68px;}
body:not(:has(.app.active)) .system-credit{position:fixed;inset-inline:0;bottom:0;width:100%;margin:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:transparent;color:var(--brand-muted);font-size:.78rem;text-align:center;z-index:10;}
body:not(:has(.app.active)) .system-credit bdi{color:var(--brand-teal);font-weight:700;}

/* Keep the school navigation within the viewport and scroll its menu independently. */
.sidebar{top:0;right:0;bottom:0;height:100vh;height:100dvh;min-height:0;overflow:hidden;}
.sidebar-brand,.sidebar-user{flex-shrink:0;}
.sidebar-nav{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(242,181,68,.68) transparent;}
.sidebar-nav::-webkit-scrollbar{width:7px;}
.sidebar-nav::-webkit-scrollbar-thumb{border:2px solid var(--brand-ink);border-radius:8px;background:rgba(242,181,68,.68);}
@media(max-height:780px) and (min-width:769px){.sidebar-brand{padding:16px 16px 12px}.brand-school-name{margin-top:7px;font-size:.76rem}.sidebar-section{margin-top:8px;margin-bottom:6px;padding-block:7px}.nav-item{min-height:36px;padding-block:7px;margin-bottom:1px}.sidebar-user{padding-block:10px}}

/* Attendance navigation and portal-inspired forms. */
.nav-group{margin-bottom:4px;}
.nav-parent{display:flex;width:100%;align-items:center;justify-content:space-between;border:0;background:transparent;color:#DCE9E6;font:inherit;text-align:right;cursor:pointer;}
.nav-group.open>.nav-parent{background:rgba(22,125,128,.23);color:#fff;}
.nav-parent .nav-chevron{font-size:1rem;transition:transform .18s ease;}
.nav-group.open>.nav-parent .nav-chevron{transform:rotate(180deg);}
.nav-submenu{margin:2px 16px 7px 0;padding:3px 9px 3px 0;border-right:2px solid rgba(242,181,68,.55);}
.nav-subitem{min-height:38px;padding:8px 12px;font-size:.86rem;color:#c9dcd8;}
.nav-subitem .nav-icon{font-size:.88rem;}
.nav-subitem.active{transform:none;background:rgba(22,125,128,.48);box-shadow:inset -3px 0 0 var(--brand-amber);}

#page-attendance .page-header,#page-attendance-inquiry .page-header{margin-bottom:22px;}
#page-attendance .table-wrap{border-radius:8px;}
#page-attendance .table-wrap table{min-width:480px;table-layout:fixed;font-size:.74rem;}
#page-attendance .table-wrap th,#page-attendance .table-wrap td{padding:4px 5px;line-height:1.25;vertical-align:top;}
#page-attendance .table-wrap th:nth-child(1),#page-attendance .table-wrap td:nth-child(1){width:42px;text-align:center;}
#page-attendance .table-wrap th:nth-child(2),#page-attendance .table-wrap td:nth-child(2){width:38%;}
#page-attendance .table-wrap th:nth-child(3),#page-attendance .table-wrap td:nth-child(3){width:14%;}
#page-attendance .table-wrap th:nth-child(4),#page-attendance .table-wrap td:nth-child(4),#page-attendance .table-wrap th:nth-child(5),#page-attendance .table-wrap td:nth-child(5){width:10%;}
#page-attendance .table-wrap th:nth-child(6),#page-attendance .table-wrap td:nth-child(6){width:16%;}
#page-attendance .table-wrap .btn{min-height:24px;padding:2px 5px;font-size:.68rem;}
#page-attendance>.card.mb-4,#page-attendance>.card:not(#attendanceBatchActions){overflow:hidden;border-top:4px solid var(--brand-teal);}
#page-attendance .attend-type-btns{gap:10px;padding-bottom:18px;border-bottom:1px solid var(--brand-border);}
#page-attendance .attend-type-btn{min-height:96px;border:1px solid #c7d5d1;border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(16,39,46,.05);}
#page-attendance .attend-type-btn:hover,#page-attendance .attend-type-btn.active{border-color:var(--brand-teal);background:var(--brand-teal-soft);box-shadow:inset 0 -3px 0 var(--brand-teal);}
#page-attendance .form-grid{margin-top:18px;padding:18px;border:1px solid var(--brand-border);border-radius:12px;background:#f8fbfa;}
#page-attendance .attendance-batch-help{grid-column:1/-1;margin:-18px -18px 4px;border-radius:10px 10px 0 0;border-inline-start:0;border-bottom:1px solid #b8d8d3;background:#e3f2f0;}
.attendance-range-cancel-card{border-top:4px solid #b54708!important;}
.attendance-range-warning{margin:0 0 16px;padding:12px 15px;border-right:4px solid #b54708;border-radius:8px;background:#fff5e8;color:#7a3410;line-height:1.8;}
.attendance-range-grid{margin-top:0!important;}
.attendance-range-confirm{display:block;padding:12px 14px;border-radius:8px;background:#fff1f0;color:#8a1c16;font-weight:700;}
.attendance-range-confirm input{margin-left:8px;}
.attendance-range-preview{margin-top:12px;padding:15px;border:1px solid #e0b37d;border-radius:9px;background:#fffaf3;color:#5d3213;line-height:1.8;}
.attendance-range-preview strong{color:#8a1c16;}
#page-attendance-clear [hidden],#attendanceBatchActions[hidden]{display:none!important;}
.attendance-multi-calendar{max-width:280px;margin-top:6px;padding:5px;border:1px solid #b8d8d3;border-radius:8px;background:#fff;}
.attendance-calendar-toolbar{display:flex;align-items:center;gap:3px;margin-bottom:4px;}
.attendance-calendar-toolbar input{min-width:0;flex:1;}
.attendance-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;text-align:center;margin-bottom:4px;}
.attendance-calendar-grid small{font-size:.52rem;color:#54716b;padding:1px 0;}
.attendance-calendar-day{min-height:22px;border:1px solid #c6d9d4;border-radius:4px;background:#f7fbfa;color:#173b3c;font:inherit;font-size:.66rem;cursor:pointer;}
.attendance-calendar-day:hover{border-color:#167d80;background:#e3f2f0;}
.attendance-calendar-day.selected{background:#167d80;color:white;border-color:#167d80;font-weight:bold;box-shadow:inset 0 0 0 2px #fff;}
.attendance-calendar-day:disabled{background:#f2f2f2;color:#aaa;border-color:#eee;cursor:default;}
.attendance-calendar-day.executed-locked{background:#c9cdd0;color:#596168;border-color:#aab0b4;text-decoration:line-through;cursor:not-allowed;}
.attendance-calendar-day:focus-visible{outline:3px solid #e8a726;outline-offset:2px;}
.attendance-calendar-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#54716b;}
.attendance-calendar-done{padding:3px 11px;font-size:.72rem;}
.attendance-calendar-closed{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding:7px 10px;border:1px solid #c6d9d4;border-radius:8px;background:#f4faf9;color:#37615d;font-size:.82rem;}

.attendance-portal-card{overflow:hidden;border-top:4px solid var(--brand-teal);}
.attendance-portal-card>.card-header{background:linear-gradient(90deg,#e7f4f3,#f7fbfb);}
.attendance-scope-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:18px;}
.attendance-scope-option{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;min-height:82px;padding:14px 18px;border:1px solid var(--brand-border);border-radius:12px;background:#fff;color:var(--brand-ink);font:inherit;text-align:right;cursor:pointer;transition:.16s ease;}
.attendance-scope-option>span{grid-row:1/3;font-size:1.8rem;}
.attendance-scope-option>strong{font-size:1rem;}
.attendance-scope-option>small{color:var(--brand-muted);}
.attendance-scope-option:hover,.attendance-scope-option.active{border-color:var(--brand-teal);background:var(--brand-teal-soft);box-shadow:inset -4px 0 0 var(--brand-teal);}
.attendance-query-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid #a9c9c7;border-radius:10px;overflow:hidden;background:#e0efef;}
.attendance-query-field{display:grid;grid-template-columns:145px minmax(0,1fr);align-items:center;min-height:66px;border-bottom:1px solid #b8d0d0;}
.attendance-query-field:nth-child(odd){border-inline-end:1px solid #b8d0d0;}
.attendance-query-field label{align-self:stretch;display:flex;align-items:center;padding:12px 16px;background:#cce1e2;color:#283b3e;font-weight:700;}
.attendance-query-field .form-control{margin:9px 12px;width:calc(100% - 24px);background:#fff;}
.attendance-query-field[hidden]{display:none;}
.attendance-query-actions{display:flex;gap:10px;justify-content:flex-start;margin:18px 0;}
.attendance-results-heading{display:flex;align-items:center;justify-content:space-between;margin:24px 0 10px;padding:13px 16px;border-inline-start:4px solid var(--brand-teal);background:var(--brand-teal-soft);}
.attendance-results-heading div{display:flex;flex-direction:column;gap:3px;}
.attendance-results-heading small{color:var(--brand-muted);}
.attendance-inquiry-table{border:1px solid var(--brand-border);border-radius:10px;}
.attendance-inquiry-table tbody tr:hover{background:#f4faf9;}
@media(max-width:900px){.attendance-query-grid{grid-template-columns:1fr}.attendance-query-field:nth-child(odd){border-inline-end:0}.attendance-scope-switch{grid-template-columns:1fr}}
@media(max-width:580px){.attendance-query-field{grid-template-columns:1fr}.attendance-query-field label{padding:8px 12px}.attendance-query-actions{align-items:stretch;flex-direction:column}.attendance-query-actions .btn{width:100%}}