/*
 * Full-project responsive layer — Mohamed Abdelhamid Radwan Boys School
 * 2026-09-20
 * Mobile-first compatibility layer. Does not change business logic or print layouts.
 */
:root{
  --rfx-space-1:4px;--rfx-space-2:8px;--rfx-space-3:12px;--rfx-space-4:16px;
  --rfx-space-5:20px;--rfx-space-6:24px;--rfx-radius:12px;
  --rfx-touch:44px;--rfx-safe-top:env(safe-area-inset-top,0px);
  --rfx-safe-bottom:env(safe-area-inset-bottom,0px);--rfx-safe-left:env(safe-area-inset-left,0px);
  --rfx-safe-right:env(safe-area-inset-right,0px);
}
html{width:100%;max-width:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{width:100%;max-width:100%;min-width:0;margin:0;overflow-wrap:break-word}
*,*::before,*::after{box-sizing:border-box;min-width:0}
img,video,iframe,svg,canvas{max-width:100%;height:auto}
img{object-fit:contain}
pre,code,kbd,samp{max-width:100%;overflow-wrap:anywhere}
a,button,input,select,textarea{font:inherit}
button,[type="button"],[type="submit"],[type="reset"],.btn,[role="button"]{min-height:var(--rfx-touch)}
button,.btn,a.btn,[role="button"]{touch-action:manipulation}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea{max-width:100%}
textarea{resize:vertical}
input[type="checkbox"],input[type="radio"]{min-width:18px;min-height:18px}
:focus-visible{outline:3px solid rgba(13,111,173,.35);outline-offset:2px}
[dir="rtl"] input[type="email"],[dir="rtl"] input[type="tel"],[dir="rtl"] input[name*="national" i],[dir="rtl"] .numeric-font,[dir="rtl"] .national-id,[dir="rtl"] .phone-number{direction:ltr;text-align:left;unicode-bidi:plaintext}
.alert,.toast,.notification,.notice,.flash,.error-message{max-width:100%;overflow-wrap:anywhere}

/* Flexible content primitives used throughout the project */
.container,.content,.public-main,.premium-content,.teacher-external-main,.mgmt-main,.svc-main,
.card,.public-card,.login-card,.page-head,.panel,.modal,.dialog,.wizard-shell,.parent-access-wizard{max-width:100%;min-width:0}
.grid,.grid-two,.form-grid,.stats-grid,.dashboard-grid,.cards-grid,.mgmt-grid,.svc-grid{min-width:0}
.flex,.actions,.toolbar,.page-actions,.form-actions,.tt3-actions{min-width:0;flex-wrap:wrap}

/* Tables: JS adds .responsive-table-shell where a dedicated wrapper does not already exist. */
.responsive-table-shell,.table-responsive,.table-wrap,.tt3-tablewrap,.mgmt-table-wrap,.svc-table-wrap{
  display:block;width:100%;max-width:100%;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;
}
.responsive-table-shell>table{margin:0;max-width:none}
.responsive-table-shell:focus-visible{outline:3px solid rgba(13,111,173,.35);outline-offset:2px}
table{border-collapse:collapse}
th,td{overflow-wrap:break-word}

/* Dialogs/dropdowns must never exceed the viewport. */
dialog,.modal,.modal-dialog,[role="dialog"],.dropdown-menu,.dropdown-panel,.admin-floating-login-card-panel,.orders-floating-panel-card{
  max-width:calc(100vw - 24px);max-height:90dvh;
}

/* Login */
.login-page{min-height:100vh;min-height:100dvh;padding:calc(var(--rfx-safe-top) + 12px) calc(var(--rfx-safe-right) + 12px) calc(var(--rfx-safe-bottom) + 12px) calc(var(--rfx-safe-left) + 12px)}
.login-card{width:min(100%,560px);margin-inline:auto}
.login-portal-grid{width:min(100%,1180px);max-width:100%;margin-inline:auto;gap:16px}
.admin-remember-30d-option,.admin-login-remember-row{min-height:44px;cursor:pointer}
.admin-remember-30d-option input,.admin-login-remember-row input{width:20px;height:20px;flex:0 0 20px}

/* Three-step timetable */
.tt3{width:100%;max-width:1500px;padding-inline:clamp(0px,1vw,12px)}
.tt3-hero{padding:clamp(14px,3vw,22px)}
.tt3-hero h1{font-size:clamp(1.25rem,4vw,1.8rem);overflow-wrap:anywhere}
.tt3-step,.tt3-output a{min-height:60px}
.tt3 input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),.tt3 select,.tt3 textarea{min-height:44px}
.tt3 button,.tt3-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;text-align:center}
.tt3-chip{max-width:100%;white-space:normal}

/* Teacher portal */
.teacher-external-body{max-width:100%;overflow-x:hidden}
.teacher-external-header,.teacher-external-main,.teacher-external-headin{max-width:100%;min-width:0}
.teacher-external-headin{gap:12px;flex-wrap:wrap}
.teacher-external-brand{min-width:0;flex:1 1 260px}
.teacher-external-brand b,.teacher-external-brand small{overflow-wrap:anywhere}
.teacher-external-user{display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:100%}
.teacher-external-nav{display:flex;gap:6px;flex-wrap:wrap;max-width:100%}
.teacher-external-nav a{min-height:44px;display:inline-flex;align-items:center}
.teacher-logout-form button{min-height:44px}

/* School-management portal */
.mgmt-body{max-width:100%;overflow-x:hidden}
.mgmt-top,.mgmt-nav,.mgmt-main,.mgmt-wrap{max-width:100%;min-width:0}
.mgmt-top{gap:10px;flex-wrap:wrap;padding-top:calc(12px + var(--rfx-safe-top))}
.mgmt-user{display:flex;gap:8px;align-items:center;flex-wrap:wrap;max-width:100%}
.mgmt-nav{display:flex;gap:6px;flex-wrap:wrap;overflow:visible}
.mgmt-nav a,.mgmt-top button,.mgmt-action{min-height:44px}
.mgmt-pagehead{gap:10px;flex-wrap:wrap}
.mgmt-pagehead>*{min-width:0}
.mgmt-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.mgmt-action{overflow-wrap:anywhere}

/* Mobile toolbar for the independent Services Administration portal */
.svc-mobile-toolbar{display:none}
.svc-mobile-overlay{display:none}

/* Service administration */
.svc-shell{max-width:100%;min-width:0}
.svc-main{min-width:0;max-width:100%}
.svc-card{max-width:100%;overflow-wrap:anywhere}
.svc-top{gap:10px;flex-wrap:wrap}
.svc-actions{flex-wrap:wrap}
.svc-input{max-width:100%}


/* Shared pagination: bounded numbers + touch-friendly wrapping */
.pagination-nav{width:100%;max-width:100%;overflow:hidden;margin-block:14px}
.pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;max-width:100%;padding:0;margin:0;list-style:none}
.pagination .page-item{max-width:100%}
.pagination .page-link{display:inline-flex;align-items:center;justify-content:center;min-width:var(--rfx-touch);min-height:var(--rfx-touch);padding:7px 11px;border-radius:9px;text-decoration:none;white-space:nowrap}
.pagination .active .page-link{font-weight:900}
.pagination .disabled .page-link{pointer-events:none;opacity:.65}

/* Shared responsive form/grid fallbacks for legacy pages */
.form-grid,.filters-grid,.search-grid,.cards-grid,.stats-grid{min-width:0;max-width:100%}
.form-grid>*,.filters-grid>*,.search-grid>*,.cards-grid>*,.stats-grid>*{min-width:0}
.modal,.dialog,.dropdown-menu,.dropdown-panel,[role="dialog"]{max-width:calc(100vw - 16px)}
.toast,.alert,.notice,.flash-message{max-width:100%;overflow-wrap:anywhere}
pre,code{max-width:100%;overflow-x:auto}

/* Long identity/contact values */
[data-national-id],.national-id,.numeric-input,input[name*="national" i],input[name*="phone" i],input[type="tel"]{font-variant-numeric:tabular-nums}

@media (max-width:900px){
  body{overflow-x:hidden}
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea{font-size:16px}
  h1{font-size:clamp(1.35rem,6vw,1.9rem)}h2{font-size:clamp(1.18rem,5vw,1.55rem)}h3{font-size:clamp(1.05rem,4.5vw,1.3rem)}

  /* Main administrative shell */
  body.premium-admin-body .premium-app-shell.app{display:block;width:100%;max-width:100%;margin:0}
  body.premium-admin-body .premium-main.main{width:100%;max-width:100%;margin:0}
  body.premium-admin-body .premium-sidebar.sidebar{position:fixed;top:0;bottom:0;inset-inline-start:auto;inset-inline-end:0;width:min(88vw,340px);height:100dvh;max-height:100dvh;z-index:3000;transform:translateX(105%);overflow:hidden;padding-top:var(--rfx-safe-top);transition:transform .22s ease}
  body.premium-admin-body .premium-sidebar.sidebar.mobile-open{transform:translateX(0)}
  body.premium-admin-body .premium-sidebar .tree-nav{height:calc(100dvh - 92px);overflow-y:auto;overscroll-behavior:contain;padding-bottom:calc(90px + var(--rfx-safe-bottom))}
  body.premium-admin-body .premium-sidebar-overlay{position:fixed;inset:0;z-index:2999;background:rgba(3,21,37,.55)}
  body.premium-admin-body:has(.premium-sidebar.mobile-open){overflow:hidden}
  body.premium-admin-body .premium-topbar.topbar{position:relative;width:100%;display:flex;flex-wrap:wrap;gap:8px;padding:calc(10px + var(--rfx-safe-top)) 10px 10px}
  body.premium-admin-body .premium-topbar .topbar-title{flex:1 1 220px;min-width:0}
  body.premium-admin-body .premium-topbar-actions{position:static;display:flex;flex:1 1 100%;width:100%;max-width:100%;gap:6px;overflow-x:auto;padding-bottom:3px;scrollbar-width:thin}
  body.premium-admin-body .premium-topbar-actions>*{flex:0 0 auto}
  body.premium-admin-body .premium-backbar{max-width:100%;overflow-x:auto;white-space:nowrap}
  body.premium-admin-body .premium-content.content{width:100%;max-width:100%;padding:12px 8px calc(28px + var(--rfx-safe-bottom))}
  body.premium-admin-body .grid-two,body.premium-admin-body .form-grid{grid-template-columns:1fr}
  body.premium-admin-body .sidebar-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}

  /* Public portal */
  body.premium-public-body{overflow-x:hidden}
  body.premium-public-body .public-main{width:100%;max-width:100%;padding:12px 8px calc(28px + var(--rfx-safe-bottom))}
  body.premium-public-body .header-max-width-container{width:100%;max-width:100%;display:flex;flex-wrap:wrap;gap:8px;padding:calc(8px + var(--rfx-safe-top)) 10px 8px}
  body.premium-public-body .school-branding-identity-zone,body.premium-public-body .sedd-public-brand{min-width:0;max-width:100%}
  body.premium-public-body .admin-floating-login-card-panel,body.premium-public-body .orders-floating-panel-card{position:fixed;top:calc(64px + var(--rfx-safe-top));right:10px;left:10px;width:auto;max-width:none;max-height:calc(100dvh - 80px - var(--rfx-safe-top) - var(--rfx-safe-bottom));overflow-y:auto;margin:0;transform:none;z-index:4000}
  body.premium-public-body .dropdown-embedded-form,body.premium-public-body .parent-code-login-form{grid-template-columns:1fr}
  body.premium-public-body .reference-footer-grid{grid-template-columns:1fr}

  /* Teacher */
  .teacher-external-headin{padding-inline:10px}
  .teacher-external-brand img{width:48px;height:48px;flex:0 0 48px}
  .teacher-external-user{width:100%;justify-content:space-between}
  .teacher-external-nav{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .teacher-external-nav a{flex:0 0 auto;white-space:nowrap}

  /* School management */
  .mgmt-top{padding-inline:10px}
  .mgmt-user{width:100%;justify-content:space-between}
  .mgmt-nav{padding-inline:8px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .mgmt-nav a{flex:0 0 auto;white-space:nowrap}
  .mgmt-main,.mgmt-wrap{padding:12px 8px calc(28px + var(--rfx-safe-bottom))}
  .mgmt-grid{grid-template-columns:1fr}

  /* Service admin: real off-canvas navigation on phones/tablets. */
  .svc-mobile-toolbar{position:sticky;top:0;z-index:3200;display:flex;gap:8px;padding:calc(8px + var(--rfx-safe-top)) 8px 8px;background:#f4f7fb;border-bottom:1px solid #d8e2ec}
  .svc-mobile-toolbar button{flex:1 1 0;min-height:44px;border:1px solid #c4d4e2;border-radius:10px;background:#fff;color:#143d62;font-weight:800}
  .svc-mobile-overlay{position:fixed;inset:0;z-index:3290;background:rgba(4,21,37,.55)}
  .svc-mobile-overlay.is-open{display:block}
  .svc-shell{display:block;width:100%}
  .svc-side,.svc-command-rail{position:fixed;top:0;bottom:0;width:min(88vw,340px);max-width:340px;height:100dvh;max-height:100dvh;overflow-y:auto;z-index:3300;transition:transform .22s ease;overscroll-behavior:contain}
  .svc-side{inset-inline-end:0;inset-inline-start:auto;padding:calc(12px + var(--rfx-safe-top)) 12px calc(20px + var(--rfx-safe-bottom));transform:translateX(105%)}
  .svc-command-rail{inset-inline-start:0;inset-inline-end:auto;padding:calc(12px + var(--rfx-safe-top)) 8px calc(20px + var(--rfx-safe-bottom));border-inline:0;border-top:0;transform:translateX(-105%)}
  .svc-side.mobile-open,.svc-command-rail.mobile-open{transform:translateX(0)}
  .svc-main{width:100%;padding:12px 8px calc(28px + var(--rfx-safe-bottom))}
  .svc-command-list,.svc-command-palette{grid-template-columns:1fr}

  /* Timetable */
  .tt3-steps{grid-template-columns:1fr}
  .tt3-step{width:100%}
  .tt3-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tt3-grid,.tt3-days,.tt3-output{grid-template-columns:1fr}
  .tt3-actions>*{max-width:100%}
  .tt3 [style*="min-width"]{min-width:0!important;max-width:100%!important}
  .tt3-actions .tt3-btn,.tt3-actions button{flex:1 1 180px}

  .responsive-table-shell>table,.table-responsive>table,.table-wrap>table,.tt3-table{min-width:max(640px,100%)}
}

@media (max-width:576px){
  .login-page{padding-inline:10px}
  .login-portal-grid{display:grid;grid-template-columns:1fr}
  .login-card{padding:16px;border-radius:14px}
  .actions,.toolbar,.page-actions,.form-actions,.tt3-actions{width:100%}
  .actions>.btn,.toolbar>.btn,.page-actions>.btn,.form-actions>.btn{flex:1 1 140px}
  .tt3-kpis{grid-template-columns:1fr 1fr}
  .tt3-kpi{padding:8px 5px}.tt3-kpi b{font-size:18px}
  .tt3-card{border-radius:12px}.tt3-body{padding:10px}.tt3-head{padding:11px}
  .mgmt-pagehead{display:block}.mgmt-pagehead a,.mgmt-pagehead button{display:flex;width:100%;margin-top:8px;align-items:center;justify-content:center}
  .svc-top>*{width:100%}.svc-top .svc-btn{width:100%;text-align:center}
}

@media (max-width:400px){
  :root{--rfx-touch:44px}
  .tt3-kpis{grid-template-columns:1fr}
  body.premium-admin-body .premium-content.content,.mgmt-main,.svc-main,body.premium-public-body .public-main{padding-inline:6px}
  .teacher-external-brand b{font-size:13px}.teacher-external-brand small{font-size:11px}
  .badge,.user-badge{max-width:100%;white-space:normal!important}
}

@media (orientation:landscape) and (max-height:520px) and (max-width:950px){
  body.premium-admin-body .premium-sidebar.sidebar{width:min(72vw,340px)}
  body.premium-public-body .admin-floating-login-card-panel,body.premium-public-body .orders-floating-panel-card{top:8px;bottom:8px;max-height:none}
}

@media (hover:hover){
  a:hover,button:hover{transition:filter .15s ease,transform .15s ease}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{scroll-behavior:auto;animation-duration:.01ms;animation-iteration-count:1;transition-duration:.01ms}
}

@media print{
  .responsive-table-shell,.table-responsive,.table-wrap,.tt3-tablewrap{overflow:visible;display:block}
  .responsive-table-shell>table,.table-responsive>table,.table-wrap>table,.tt3-table{min-width:0;width:100%}
  .no-print{display:none}
}