/* GT PRO - responsive layer (build 2026.11.05.126). Loaded last, after theme.css.
   ONE PLACE for device logic. CSS cannot use var() inside media queries, so the breakpoints are documented here and
   every media query below uses exactly these values:
     phone   <= 700px      bottom bar + drawer, single column, bottom-sheet dialogs
     tablet  701 - 1023px  (iPad mini/Air/Pro 11 portrait, landscape phones) 88px icon rail, 2-3 column grids
     laptop  1024 - 1279px (iPad landscape 1024/1112/1194) 220px sidebar
     desktop >= 1280px     248px sidebar, centred content column (--content-max)
     wide    >= 1680px     larger root type size, wider column
   Sizing uses clamp()/rem, so text follows the user's font-size setting (tested at 200%). */

:root{
 --bp-phone:700px;--bp-tablet:1023px;--bp-laptop:1279px;--bp-wide:1680px;
 --sidebar-w:248px;--content-max:1480px;--gutter:clamp(14px,2.2vw,34px);--tap:44px;
 --sat:env(safe-area-inset-top,0px);--sar:env(safe-area-inset-right,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);
}
@media(max-width:1279px){:root{--sidebar-w:220px}}
@media(min-width:701px) and (max-width:1023px){:root{--sidebar-w:88px}}
@media(max-width:700px){:root{--sidebar-w:0px}}
@media(min-width:1680px){:root{--content-max:1680px}}

html{font-size:clamp(1rem,.8rem + .31vw,1.125rem);-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
body{min-height:100vh;min-height:100dvh;overflow-x:hidden;overflow-wrap:break-word}
img,svg,video,canvas{max-width:100%}
.app-shell{min-height:100vh;min-height:100dvh}

/* ---------- shell: sidebar + content column ---------- */
@media(min-width:701px){
 .sidebar,html[dir=ltr] .sidebar{inset-block:0;inset-inline:0 auto;inset-inline-start:0;width:var(--sidebar-w);padding-top:calc(24px + var(--sat));padding-bottom:calc(16px + var(--sab));overflow-y:auto;overscroll-behavior:contain}
 html:not([dir=ltr]) .sidebar{right:0;left:auto}html[dir=ltr] .sidebar{left:0;right:auto}
 .main,html[dir=ltr] .main{margin:0;margin-inline-start:var(--sidebar-w);max-width:none;
  padding:calc(20px + var(--sat)) max(var(--gutter),calc((100vw - var(--sidebar-w) - var(--content-max))/2 + var(--gutter))) 48px;
  padding-inline-start:max(var(--gutter),calc((100vw - var(--sidebar-w) - var(--content-max))/2 + var(--gutter)),var(--sal));
 }
 .occ-bg{inset-inline-start:var(--sidebar-w)}
}
.topbar,.view{max-width:none}
.view{min-width:0}

/* tablet portrait / landscape phone: 88px icon rail */
.brand-seal{display:none;margin-inline:auto}
@media(min-width:701px) and (max-width:1023px){
 .sidebar{padding-inline:6px}
 .brand{padding:2px 0 12px;justify-content:center;border-bottom:1px solid #ffffff17}
 .brand>div,.brand .brand-logo{display:none}
 .brand-seal{display:block;width:52px;height:52px}
 .side-label,.secure-note,.sidebar-credit{display:none}
 .nav-item{flex-direction:column;justify-content:center;gap:3px;min-height:56px;padding:9px 2px;font-size:.66rem;line-height:1.25;text-align:center}
 .nav-item>span{width:auto;font-size:1.2rem}
 .nav-item.active:before{top:12px;bottom:12px}
 .nav-item .nav-badge{position:absolute;top:3px;inset-inline-end:10px;margin:0}
 .nav-item .tl-nav-dot{position:absolute;top:3px;inset-inline-end:10px;margin:0}
 .sidebar-home{margin-bottom:4px;width:100%;align-self:stretch}
 .language-setting{font-size:0;margin:6px 0}
 .language-setting select{font-size:.7rem;width:100%;padding:6px 2px;min-height:44px}
 .side-bottom{padding-top:8px}
 .topbar .crumb{display:none}
}
@media(min-width:1024px) and (max-width:1279px){.sidebar{padding-inline:12px}}

/* ---------- topbar ---------- */
.topbar{gap:clamp(10px,1.6vw,20px)}
.topbar h1{font-size:clamp(1.25rem,1rem + 1vw,1.75rem)}
.crumb-logo{width:80px;height:31px;vertical-align:-9px}
.top-actions{flex-wrap:wrap;justify-content:flex-end}
@media(min-width:701px) and (max-width:1023px){.topbar{flex-wrap:wrap}.topbar>div:not(.top-actions):not(.live-clock){flex:1 1 auto;min-width:0}.live-clock{order:9;flex:0 0 auto;margin-inline-start:auto}.top-actions .soft-btn{width:44px;height:44px;padding:0;overflow:hidden}.top-actions .soft-btn em{display:none}.user-chip>div{display:none}}
@media(max-width:700px){
 .topbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;grid-auto-rows:auto;align-items:center;gap:8px;margin-bottom:14px}
 .top-actions{display:contents}
 .menu-btn{grid-area:1/1}
 .topbar>div:not(.top-actions):not(.live-clock){grid-area:1/2;min-width:0}
 .top-actions .theme-toggle{grid-area:1/3}
 #notifBtn{grid-area:1/4}
 .user-chip{grid-area:1/5}
 .live-clock{grid-area:2/1/3/4;order:0;flex:none;min-width:0;justify-content:center}
 .top-logout{grid-area:2/4}
 #pushBtn{grid-area:2/5}
 .top-actions .soft-btn{width:44px;height:44px;padding:0;justify-content:center}
 .crumb-logo{width:68px;height:26px;vertical-align:-7px}
}

/* ---------- content grids ---------- */
.metrics{grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr))}
.request-metrics{grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
.task-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.metric-card{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon label" "icon value" "icon note";column-gap:12px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow);min-width:0}
.metric-card .metric-icon{grid-area:icon;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--mint);color:var(--green-ink);font-size:1.15rem}
.metric-card .metric-label{grid-area:label;font-size:.78rem;color:var(--muted);font-weight:600}
.metric-card strong{grid-area:value;font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);line-height:1.2;font-weight:750;color:var(--ink)}
.metric-card small{grid-area:note;font-size:.7rem;color:var(--muted);line-height:1.5}
.welcome>div>.btn,.welcome .btn{margin-top:10px;margin-inline-end:8px}
@media(max-width:700px){
 .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
 .metric-card{grid-template-columns:1fr;grid-template-areas:"icon" "value" "label" "note";row-gap:2px;padding:13px}
 .metric-card .metric-icon{width:36px;height:36px;margin-bottom:6px}
}
.metric-card.warn .metric-icon,.metric-card.danger .metric-icon{background:var(--red-bg);color:var(--red-ink)}
.panel,.metric,.task-card,.transaction-card,.metric-card,.approval-card,.member-card{min-width:0;overflow-wrap:anywhere}
.table-wrap{max-width:100%;-webkit-overflow-scrolling:touch}
.section-title{flex-wrap:wrap}
.toolbar{min-width:0}
.searchbox{min-width:min(230px,100%)}

/* tablets: use the width */
@media(min-width:701px) and (max-width:1023px){
 .transaction-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
 .welcome,.today-stat-wrap{min-height:0}
}
@media(min-width:1024px){
 .transaction-list{grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr))}
}

/* ---------- dialogs: bottom sheet on phones, centred card above ---------- */
.modal{width:min(720px,100%);max-height:min(90vh,900px);max-height:min(90dvh,900px);box-shadow:var(--shadow-lg);overscroll-behavior:contain}
.modal-back{padding:max(16px,var(--sat)) max(16px,var(--sar)) max(16px,var(--sab)) max(16px,var(--sal))}
@media(min-width:1024px){.modal{width:min(780px,100%)}}
@media(max-width:700px){
 .modal-back{align-items:end;padding:0}
 .modal,.system-announcement-card{width:100%;max-width:none;max-height:92vh;max-height:92dvh;border-radius:22px 22px 0 0;padding-bottom:calc(20px + var(--sab));animation:gproSheet .26s cubic-bezier(.2,.8,.2,1) both}
 .modal::before{content:"";display:block;width:42px;height:5px;margin:-8px auto 12px;border-radius:3px;background:var(--line-2)}
 .system-announcement-backdrop{align-items:end;padding:0}
}
@keyframes gproSheet{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.modal,.system-announcement-card{animation:none!important}}
@media(max-height:480px) and (orientation:landscape){.modal,.system-announcement-card{max-height:96vh;max-height:96dvh}.modal-back{align-items:center;padding:8px}.modal{border-radius:16px}.modal::before{display:none}}
.toast{bottom:calc(22px + var(--sab));inset-inline-end:auto;inset-inline-start:calc(var(--sidebar-w) + 22px)}
@media(max-width:700px){.toast{bottom:calc(96px + var(--sab));inset-inline-end:auto;inset-inline-start:auto;left:50%;transform:translate(-50%,8px);max-width:calc(100vw - 28px)}.toast.show{transform:translate(-50%,0)}}
.attachment-preview{padding-top:var(--sat);padding-bottom:var(--sab)}

/* ---------- phones: bottom bar, safe areas ---------- */
@media(max-width:700px){
 .main{padding:calc(12px + var(--sat)) max(14px,var(--sar)) calc(6rem + var(--sab)) max(14px,var(--sal))}
 .mobile-nav{padding-bottom:calc(8px + var(--sab));padding-left:max(4px,var(--sal));padding-right:max(4px,var(--sar))}
 .sidebar{padding-top:calc(24px + var(--sat));padding-bottom:calc(16px + var(--sab));overflow-y:auto;max-width:86vw}
 .auth-root{padding-left:max(17px,var(--sal));padding-right:max(17px,var(--sar))}
}

/* ---------- login ---------- */
.auth-root{position:relative;padding:calc(20px + var(--sat)) max(17px,var(--sar)) calc(18px + var(--sab)) max(17px,var(--sal));grid-template-rows:auto auto auto;align-content:center;justify-items:center;row-gap:16px}
.auth-brand,html[dir=ltr] .auth-brand{position:static;inset:auto;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.auth-brand .brand-logo.full{width:clamp(150px,46vw,210px)}
.auth-brand small{margin:0;color:var(--muted);font-size:.78rem}
.auth-foot{position:static;align-self:auto;margin:0;max-width:min(430px,100%)}
@media(min-width:1024px){
 .auth-root{grid-template-columns:minmax(260px,380px) minmax(340px,440px);grid-template-areas:"brand card" "foot foot";justify-content:center;column-gap:clamp(40px,6vw,96px);align-content:center}
 .auth-brand{grid-area:brand}.auth-card{grid-area:card}.auth-foot{grid-area:foot;margin-top:8px}
 .auth-brand .brand-logo.full{width:clamp(240px,26vw,360px)}
 .auth-brand small{font-size:.95rem}
}
.auth-card{box-shadow:var(--shadow-lg)}

/* ---------- touch + hover ---------- */
@media(pointer:coarse){
 .btn,.soft-btn,.icon-btn,.nav-item,.status-select,.select,.input,.searchbox input,.tl-node,.row-actions .icon-btn,.pagination button,.mobile-nav button,.menu-btn,.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea,.chip,.tab,summary{min-height:var(--tap)}
 .icon-btn,.row-actions .icon-btn,.menu-btn,.theme-toggle{min-width:var(--tap)}
 .row-actions .icon-btn{width:var(--tap);height:var(--tap)}
 .icon-btn,.menu-btn{width:var(--tap);height:var(--tap)}
 .btn.small{min-height:var(--tap)}
 input[type=checkbox],input[type=radio]{width:22px;height:22px}
 button,.btn,summary,select{touch-action:manipulation}
 /* catch-all: every real control is at least 44px tall for fingers */
 button,select,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=color]),#authSubmit,#logoutBtn,#pushBtn{min-height:var(--tap)}
}
/* iOS zooms into any text field below 16px: keep every editable control at 16px on phones/tablets */
@media(max-width:1024px),(pointer:coarse){
 html input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),html select,html textarea,html .searchbox input,html .field input,html .field select,html .field textarea{font-size:max(16px,1rem)!important}
}
@media(hover:none){
 .btn:active,.soft-btn:active,.icon-btn:active,.nav-item:active,.mobile-nav button:active{opacity:.82}
}

/* ---------- extreme text scale / narrow widths ---------- */
.btn,.soft-btn,.tag,.task-name,.person-name,.field,.hint{overflow-wrap:anywhere}
.btn,.soft-btn{height:auto;min-height:2.4rem}
@media(pointer:coarse){html .btn,html .soft-btn,html button,html select,html .btn.small{min-height:var(--tap)}}
.mobile-nav button{min-width:0;overflow-wrap:anywhere}
@media(max-width:360px){.main{padding-inline:10px}.metric-card{padding:12px}}
/* QA polish: spaced fields in plain modal forms, long page titles wrap inside their column instead of pushing the user chip */
.modal form:not(.form-grid)>.field+.field{margin-top:14px}
.modal #genderForm{display:grid;gap:14px}
.topbar>div:not(.top-actions):not(.live-clock){min-width:0}
.topbar h1{overflow-wrap:anywhere;text-wrap:balance}
.topbar .user-chip,.topbar .top-actions{flex-shrink:0}