/* Andisheh No R32.36 — sitewide UI polish
   Goal: responsive hardening, readable tables/forms, login stability, no visual overflow.
   This file is intentionally loaded LAST. */

html,body{max-width:100%;overflow-x:hidden}
body{min-width:0}
img,svg,video,canvas{max-width:100%;height:auto}
button,.btn,input,select,textarea{max-width:100%}
button,.btn{writing-mode:horizontal-tb!important;word-break:normal!important;overflow-wrap:normal!important;line-height:1.55}
.app-shell,.main-area,.page,.panel,.page-toolbar,.topbar,.top-actions,.layout-2,.kpi-grid,.quick-access-grid,.account-quick-grid,.student-grid,.student-table-shell,.table-scroll{min-width:0}

/* ---------- Manager / dashboard header ---------- */
.topbar{flex-wrap:wrap!important;align-items:center!important;gap:10px 14px!important}
.top-context{min-width:0;flex:1 1 220px}
.top-context h2{line-height:1.45!important}
.top-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;flex-wrap:wrap!important;gap:8px!important;min-width:0;flex:1 1 650px}
.top-actions>*{min-width:0;max-width:100%}
.top-actions .quick-open,.top-actions .sync-status,.top-actions .role-chip,.top-actions .top-action-card,.top-actions .icon-btn,.top-actions .jalali-top-date{white-space:nowrap!important;flex:0 0 auto}
.top-action-card,.quick-open,.sync-status,.role-chip{min-height:44px!important}
.quick-open small,.sync-status small,.role-chip small{line-height:1.25}

/* ---------- Shared cards, toolbars and forms ---------- */
.page-toolbar,.panel-head,.quick-access-head,.operation-actions,.student-toolbar-actions,.filters{min-width:0;flex-wrap:wrap!important;gap:10px!important}
.page-toolbar>*,.panel-head>*,.quick-access-head>*{min-width:0}
.filters select{min-width:150px!important}
select,textarea,input{min-width:0!important}
select option{color:#10283e;background:#fff}
.panel,.page-toolbar,.drawer,.modal-card,.student-table-shell,.table-scroll{overflow-wrap:normal;word-break:normal}
.hint,small,p{overflow-wrap:break-word}

/* ---------- Family / role login pages ---------- */
.auth-shell,.role-login{width:min(1180px,calc(100% - 32px))!important;margin-inline:auto!important;padding:28px 0!important;gap:22px!important;grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr)!important}
.auth-shell>.auth-brand,.auth-shell>.auth-card,.role-login>.login-story,.role-login>.auth-card{min-width:0!important}
.auth-card form,.role-login form{min-width:0!important}
.password-visibility-wrap{display:grid!important;grid-template-columns:minmax(0,1fr) 46px!important;align-items:center!important;gap:8px!important;width:100%!important}
.password-visibility-wrap>input{width:100%!important;min-width:0!important}
.password-visibility-toggle{display:grid!important;place-items:center!important;width:44px!important;min-width:44px!important;max-width:44px!important;height:44px!important;min-height:44px!important;padding:0!important;margin:0!important;border-radius:12px!important;white-space:nowrap!important;overflow:hidden!important;font-size:17px!important;line-height:1!important}
#parentLoginForm>[data-js-required],#studentLoginForm>[data-js-required],.role-login-form>[data-js-required],.auth-card form>button[type="submit"]{width:100%!important;min-height:52px!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;white-space:normal!important}
.forgot-password-link{width:100%!important;min-height:42px!important;padding:8px 10px!important;text-align:center!important;white-space:normal!important}
.remember-row{grid-template-columns:auto 1fr!important;display:grid!important;align-items:center!important;justify-content:start!important;gap:10px!important}
.remember-row input{width:18px!important;min-width:18px!important;height:18px!important}
.auth-card-head{min-width:0}
.auth-card-head>div{min-width:0}

/* ---------- Manager student directory ---------- */
#page-students .page-toolbar{display:flex!important;align-items:center!important;justify-content:space-between!important}
#page-students .student-toolbar-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important}
#page-students .student-toolbar-actions .filters{display:flex!important;align-items:center!important}
.grade-cards{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
.grade-card{min-width:0!important;background:linear-gradient(145deg,#fff,#f5f9fc)!important;border:1px solid #d8e4ec!important;color:#17334c!important;box-shadow:0 12px 28px rgba(15,55,82,.08)!important}
.grade-card span,.grade-card small{color:#62788b!important;opacity:1!important}
.grade-card b{color:#0d3654!important}
.student-table-shell{width:100%!important;overflow-x:auto!important;overscroll-behavior-inline:contain;border:1px solid #dce7ee!important;border-radius:20px!important;background:#fff!important;box-shadow:0 12px 30px rgba(20,52,80,.06)!important}
.student-prof-table{width:100%!important;background:#fff!important}
.student-prof-table thead th{background:#e7f0f6!important;color:#0b2b46!important;font-weight:900!important}
.student-prof-table tbody tr{background:#fff!important}
.student-prof-table tbody tr:nth-child(even){background:#f7fafc!important}
.student-prof-table td,.student-prof-table th,.student-prof-table b,.student-prof-table strong{color:#102f49!important;opacity:1!important;text-shadow:none!important}
.student-prof-table small{color:#61788b!important;opacity:1!important}
.student-prof-table .row-action{min-width:108px!important;white-space:nowrap!important;background:#f5fafc!important;color:#0d5570!important;border:1px solid #cce0ea!important}
.student-name-cell{min-width:190px}

/* ---------- Generic tables ---------- */
.table-scroll{overflow:auto!important;overscroll-behavior:contain}
.table-scroll table{background:#fff}
table th{color:#0c2c47!important;font-weight:900}
table td{color:#18364f!important}

/* ---------- Floating support: useful without covering content ---------- */
.mnp-floating-support{max-width:160px!important;z-index:80!important}

/* ---------- Medium laptop widths ---------- */
@media (max-width:1450px){
  .top-actions{flex-basis:100%!important;width:100%!important;justify-content:flex-start!important}
  .topbar{align-items:flex-start!important}
  .quick-open small,.sync-status small,.role-chip small{display:none!important}
  .top-action-card,.quick-open,.sync-status,.role-chip{padding:8px 11px!important}
}

@media (max-width:1100px){
  .auth-shell,.role-login{grid-template-columns:minmax(0,1fr) minmax(360px,440px)!important;width:min(100% - 24px,980px)!important}
  .auth-shell>.auth-brand,.role-login>.login-story{padding:24px!important}
  .auth-shell>.auth-card,.role-login>.auth-card{padding:24px!important}
  #page-students .page-toolbar{align-items:flex-start!important}
  #page-students .student-toolbar-actions{width:100%!important;justify-content:flex-start!important}
}

@media (max-width:860px){
  .auth-shell,.role-login{grid-template-columns:1fr!important;width:min(100% - 20px,680px)!important;padding:14px 0 28px!important}
  .auth-shell>.auth-brand,.role-login>.login-story{min-height:0!important}
  .auth-shell>.auth-card,.role-login>.auth-card{min-height:0!important}
  .top-actions{justify-content:flex-start!important}
  .grade-cards{grid-template-columns:1fr!important}
  #page-students .student-toolbar-actions,#page-students .student-toolbar-actions .filters{width:100%!important}
  #page-students .student-toolbar-actions>.btn{width:100%!important}
  #page-students .student-toolbar-actions .filters select{flex:1 1 180px!important}
  .mnp-floating-support{transform:scale(.92);transform-origin:left bottom}
}

@media (max-width:620px){
  .main-area{padding-inline:10px!important}
  .topbar{margin-inline:-10px!important;padding-inline:10px!important}
  .top-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important}
  .top-actions>*{width:100%!important;justify-content:center!important}
  .top-actions .icon-btn{min-width:44px!important}
  .page-toolbar,.panel-head,.quick-access-head{align-items:flex-start!important}
  .filters{width:100%!important;display:grid!important;grid-template-columns:1fr!important}
  .filters select{width:100%!important;min-width:0!important}
  .auth-shell>.auth-brand,.auth-shell>.auth-card,.role-login>.login-story,.role-login>.auth-card{border-radius:24px!important;padding:18px!important}
  .auth-card h2,.role-login .auth-card h2{font-size:24px!important}
  .mnp-floating-support{max-width:132px!important}
}