/* Student & Beneficiary Management — components layered on portal.css (RTL, mobile first) */
:root{--warn:#9a6a14;--warn-pale:#fdf6e6;--danger:#9e462b;--danger-pale:#fff3eb;--info:#2c5d86;--info-pale:#eef5fb}
.nav-count{margin-inline-start:auto;background:var(--primary);color:#fff;border-radius:20px;font-size:10px;padding:0 8px;line-height:18px}
/* Reserve the page scrollbar space permanently so short and long pages do not shift the layout sideways. */
html{scrollbar-gutter:stable}
/* Sidebar: fixed height, only the link list scrolls, with a thin scrollbar whose space is always reserved
   (no jump when it appears) and scrolling that never leaks to the page behind it. */
.sidebar{overflow:hidden;padding-block:22px 18px}
.sidebar .brand{margin-bottom:14px;flex-shrink:0}
.sidebar nav{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#d2d9e0 transparent}
.sidebar nav::-webkit-scrollbar{width:6px}
.sidebar nav::-webkit-scrollbar-thumb{background:#d2d9e0;border-radius:6px}
.sidebar nav::-webkit-scrollbar-track{background:transparent}
.sidebar .nav-link{padding:9px 13px;margin:2px 0}
.sidebar .nav-label{margin:16px 13px 6px}
.sidebar-bottom{flex-shrink:0;padding-top:14px}
.drawer-backdrop{display:none}
[wire\:loading],[wire\:loading\.delay]{display:none}
.is-loading{opacity:.55;pointer-events:none}

/* Badges & tones */
.badge.success{background:#e8f4e9;color:#24573b}.badge.warning{background:var(--warn-pale);color:var(--warn)}
.badge.danger{background:var(--danger-pale);color:var(--danger)}.badge.info{background:var(--info-pale);color:var(--info)}
.badge.lg{font-size:12px;padding:5px 12px}
.alert.warning{background:var(--warn-pale);color:#7a5410;border:1px solid #f0dfb3}
.alert.info{background:var(--info-pale);color:var(--info);border:1px solid #d3e4f2}
.alert .alert-actions{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}

/* KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin-bottom:24px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.kpi span{font-size:11px;color:var(--muted)}.kpi strong{font-size:26px;font-family:Arial,Tahoma,sans-serif;line-height:1.4}
.kpi small{font-size:10px;color:#8d949b}.kpi.warning strong{color:var(--warn)}.kpi.danger strong{color:var(--danger)}
a.kpi:hover{border-color:#c8d2dd}

/* Grids */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.stack{display:flex;flex-direction:column;gap:12px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.inline-form{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.inline-form>*{flex:1;min-width:140px}.inline-form .button{flex:0 0 auto}
.field-check{display:flex;gap:9px;align-items:center;font-weight:400;margin:0}.field-check input{width:18px;min-height:18px;accent-color:var(--primary)}
.hint{font-size:11px;color:var(--muted);margin-top:6px;display:block}
.section-title{font-size:13px;font-weight:700;margin:6px 0 12px;color:var(--primary-dark)}
.divider{border:0;border-top:1px solid var(--line);margin:18px 0}
.empty{padding:26px 10px;text-align:center;color:#8a929b;font-size:12px}

/* Tabs */
.tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:20px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.tab{background:none;border:0;border-bottom:3px solid transparent;padding:12px 14px;font-size:12px;color:#6a727c;white-space:nowrap;min-height:44px}
.tab.active{border-color:var(--primary);color:var(--primary);font-weight:700}.tab:hover{color:var(--primary)}

/* Profile header */
.profile-header{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:18px}
.profile-photo{width:84px;height:84px;border-radius:50%;object-fit:cover;background:var(--primary-pale);flex-shrink:0}
.profile-meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:11px;color:var(--muted);margin-top:6px}
.ref{font-family:Consolas,monospace;direction:ltr;unicode-bidi:embed;font-size:12px;color:var(--primary-dark)}

/* Progress meter (no inline styles: value buckets via class) */
.meter{display:flex;align-items:center;gap:10px}.meter progress{flex:1}.meter strong{font-size:13px;font-family:Arial,sans-serif}

/* Bars chart */
.bars{display:flex;flex-direction:column;gap:12px;padding:0 20px 20px}
.bars .bar-row{margin:0}.bars .bar-row>div{margin-bottom:5px}

/* Wizard */
.steps{display:flex;gap:6px;margin-bottom:20px;overflow-x:auto;padding-bottom:4px}
.step{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:30px;padding:7px 14px 7px 10px;font-size:12px;white-space:nowrap;color:var(--muted)}
.step b{width:24px;height:24px;border-radius:50%;background:#eceff2;display:inline-flex;align-items:center;justify-content:center;font-size:11px}
.step.current{border-color:var(--primary);color:var(--primary);font-weight:700}.step.current b{background:var(--primary);color:#fff}
.step.done b{background:#cdd9e7;color:var(--primary)}
.wizard-actions{display:flex;justify-content:space-between;gap:12px;margin-top:16px;flex-wrap:wrap}

/* Upload */
.dropzone{border:2px dashed #ced5dd;border-radius:12px;padding:18px;text-align:center;background:#fafbfc;position:relative}
.dropzone input[type=file]{min-height:auto;border:0;background:transparent;padding:6px}
.upload-progress{margin-top:10px}
.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.preview{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.preview img{width:100%;height:120px;object-fit:cover;background:#f1f3f5}
.preview .file-icon{height:120px;display:flex;align-items:center;justify-content:center;font-size:34px;color:#919ead;background:#f4f6f8}
.preview .preview-body{padding:8px 10px;font-size:11px;display:flex;flex-direction:column;gap:4px}
.preview-new{max-width:220px}.preview-new img{height:160px}

/* Cards list (mobile friendly lists) */
.card-list{display:flex;flex-direction:column;gap:10px}
.item-card{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff;display:flex;gap:12px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.item-card .item-main{flex:1;min-width:200px}.item-card h4{margin:0 0 4px;font-size:13px}
.item-card .item-meta{font-size:11px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 14px}
.item-card.muted-card{opacity:.7;background:#f9fafb}

/* Modal (Livewire controlled) */
.modal-backdrop{position:fixed;inset:0;background:#0e1a2866;z-index:60;display:flex;align-items:flex-end;justify-content:center;padding:0}
.modal{background:#fff;width:100%;max-width:560px;border-radius:16px 16px 0 0;padding:22px;max-height:92vh;overflow:auto}
.modal h3{margin-bottom:12px}
@media(min-width:761px){.modal-backdrop{align-items:center;padding:20px}.modal{border-radius:16px}}

/* Notifications */
.notice{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}.notice.unread strong{color:var(--primary-dark)}
.notice-dot{width:9px;height:9px;border-radius:50%;background:#c8cfd6;margin-top:7px;flex-shrink:0}.notice.unread .notice-dot{background:var(--primary)}

/* Permission matrix */
.matrix td,.matrix th{padding:8px 10px;text-align:center}.matrix td:first-child,.matrix th:first-child{text-align:start}

/* Selection */
.select-cell{width:40px}.select-cell input{width:18px;min-height:18px;accent-color:var(--primary)}
.bulk-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 20px;background:var(--primary-pale);font-size:12px}

/* Student portal */
.student-body{background:#f5f6f8}
.student-top{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.student-top .inner{max-width:880px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;gap:10px}
.student-top .brand>span{font-size:20px}.student-top .brand img{width:34px;height:34px}
.student-main{max-width:880px;margin:auto;padding:18px 16px 90px}
.student-nav{position:fixed;bottom:0;inset-inline:0;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);z-index:30}
.student-nav a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 4px 11px;font-size:11px;color:#6a727c;min-height:56px}
.student-nav a span{font-size:19px;line-height:1}.student-nav a.active{color:var(--primary);font-weight:700}
.status-hero{background:var(--primary-dark);color:#ebf1f7;border-radius:16px;padding:20px;margin-bottom:16px}
.status-hero h1{font-size:22px;margin:6px 0}.status-hero p{color:#b6c2cf;font-size:12px}
.status-hero progress{margin-top:12px;background:#ffffff30}
.auth-card{max-width:440px;margin:30px auto;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px}
.auth-card h1{font-size:24px;margin-bottom:6px}.auth-card label{margin-top:14px}.auth-card .button{margin-top:18px}
.auth-links{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:16px;font-size:12px}

@media(max-width:1200px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:950px){.grid-2,.grid-3{grid-template-columns:1fr}}
@media(max-width:760px){
  .menu-open .drawer-backdrop{display:block;position:fixed;inset:0;background:#0e1a2855;border:0;z-index:35}
  .menu-open{overflow:hidden} /* the page behind the open drawer must not scroll */
  .kpi-grid{grid-template-columns:repeat(2,1fr);gap:10px}.kpi{padding:12px 14px}.kpi strong{font-size:22px}
  .button{min-height:46px}.button.small{min-height:40px}
  input,select,textarea{font-size:16px} /* prevents iOS zoom on focus */
  .responsive-table thead{display:none}
  .responsive-table,.responsive-table tbody,.responsive-table tr,.responsive-table td{display:block;width:100%;white-space:normal}
  .responsive-table tr{border-bottom:1px solid var(--line);padding:10px 16px}
  .responsive-table td{border:0;padding:5px 0;display:flex;justify-content:space-between;gap:12px;font-size:12px}
  .responsive-table td::before{content:attr(data-label);color:var(--muted);font-size:11px;flex-shrink:0}
  .responsive-table td.select-cell::before,.responsive-table td[data-label=""]::before{content:none}
  .profile-header{padding:16px}.profile-photo{width:64px;height:64px}
  .wizard-actions .button{flex:1}
}
@media print{.tabs,.drawer-backdrop,.student-nav,.toolbar{display:none!important}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.avatar.avatar-photo{object-fit:cover;background:#eaeff4;padding:0;display:block}