/* Shared layout: bounded navigation, touch-friendly controls and responsive content. */
:root{--sidebar-width:248px;--navy:#183f4a;--muted:#637882;--line:#dde6e9;--radius:16px;background:#f3f6f7}
html{scroll-padding-top:80px;scrollbar-gutter:stable}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
#app{flex:1;min-width:0}
.ui-icon{width:20px;height:20px;display:block;flex:none}
.app-shell{grid-template-columns:var(--sidebar-width) minmax(0,1fr);min-height:calc(100vh - 62px);min-height:calc(100dvh - 62px);align-items:start}
.sidebar{height:100vh;height:100dvh;min-height:0;position:sticky;top:0;align-self:start;padding:0;gap:0;background:#163c47;overflow:hidden;z-index:30;border-right:1px solid #234b57}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:26px 21px 22px}
.sidebar-head .brand{font-size:19px;gap:12px;padding:0;min-width:0}
.sidebar-head .brand small{font-size:11px;letter-spacing:1px;color:#9cbac3;margin-top:3px}
.sidebar .nav-list{display:flex;flex-direction:column;flex:1 1 0;min-height:0;overflow:auto;overscroll-behavior:contain;gap:18px;padding:0 12px 18px;scrollbar-width:thin;scrollbar-color:#527781 transparent}
.nav-group{display:grid;gap:3px;flex:none}
.nav-group-title{padding:0 14px 7px;font-size:11px;letter-spacing:1.3px;font-weight:600;color:#95b2bd}
.sidebar .nav-button{display:flex;align-items:center;gap:11px;min-height:43px;padding:10px 13px;font-size:14px;width:100%;border-radius:9px;position:relative;color:#c3d6dd;text-align:left;flex:none;line-height:1.4}
.sidebar .nav-button:hover{background:#244d58;color:#fff}
.sidebar .nav-button.active{background:#315d68;color:#fff;font-weight:600}
.sidebar .nav-button.active:before{content:"";position:absolute;left:0;top:13px;bottom:13px;width:3px;border-radius:3px;background:#8dd5bd}
.sidebar .nav-icon{display:flex;width:20px;min-width:20px;height:20px}
.nav-label{min-width:0;overflow-wrap:anywhere}
.sidebar .nav-button .member-nav-count{margin-left:auto;flex:none}
.sidebar .side-bottom{flex-shrink:0;margin:0;padding:12px 14px max(14px,env(safe-area-inset-bottom));border-top:1px solid #315661;display:block;background:#163c47;box-shadow:0 -8px 18px #12313b12}
.account-profile{display:flex;align-items:center;gap:10px;text-align:left;min-width:0;max-width:100%;border-radius:10px;padding:9px;background:transparent;color:inherit}
.account-profile:hover{background:#ffffff0d}
.account-identity{display:grid;gap:2px;min-width:0;flex:1}
.account-profile .side-user{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:14px;font-weight:600;margin:0}
.account-profile .side-role{display:block;margin:0;font-size:11px;color:#9bb8c3}
.account-profile>.ui-icon{width:15px;height:15px;opacity:.65}
.ui-avatar{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;background:#d5eae5;color:#20544a;font-size:15px;font-weight:650;border:1px solid #c4ded6}
.side-bottom .account-profile{width:100%;color:#f0f6f8}
.side-actions{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:7px}
.side-actions .quiet{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:#c9dce3;min-height:38px;padding:7px 4px}
.side-actions .quiet:hover{background:#315661;color:white}
.side-actions .ui-icon{width:15px;height:15px}
.main{padding:34px 34px 40px;min-width:0;width:100%;max-width:1600px;margin:0 auto}
.main:focus,.personal-shell main:focus{outline:none}
.topline{gap:20px;margin-bottom:26px;flex-wrap:wrap}
.topline>div{min-width:0;flex:1 1 250px}
.topline h1{font-size:27px;color:#203c47;letter-spacing:-.5px}
.topline .page-caption{max-width:880px;line-height:1.7}
.topline>.primary,.topline>.secondary{flex-shrink:0}
.card,.stat{box-shadow:0 3px 12px #193c4a04}
.card,.stat,.field,.form-row>*,.detail-grid>*,.report-columns>*{min-width:0}
/* Keep labels, controls and help text at their natural height in mixed field rows. */
.field{align-content:start}
.form-grid{grid-template-columns:minmax(0,1fr)}
.form-grid>*{min-width:0}
.form-row{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.finance-form-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.stat-value{overflow-wrap:anywhere}
.table-tools{flex-wrap:wrap}
.table-tools .search{min-width:140px}
.table-scroll{max-width:100%;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#a1b9c3 #f1f5f6}
.table-scroll:focus-visible{outline:2px solid #80adae;outline-offset:-2px}
.table-scroll textarea{padding:10px 12px;min-height:76px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#243e4b;font-size:14px;line-height:1.5;resize:vertical}
.table-scroll textarea:focus{border-color:#3e7a9d}
button,a,input,select,textarea{touch-action:manipulation}
input,select,textarea{max-width:100%;min-width:0}
.mobile-header,.sidebar .drawer-close,.nav-backdrop{display:none}
.skip-link{position:fixed;top:-80px;left:15px;z-index:100;padding:10px 15px;background:white;border-radius:8px;color:var(--navy)}
.skip-link:focus{top:10px}
.icon-button{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;background:transparent;color:inherit;flex:none}
.icon-button:hover{background:#eaf1f3}
.personal-shell{max-width:1180px}
.personal-header .account-profile{color:var(--navy)}
.personal-header .account-profile .side-user{color:var(--navy)}
.personal-header .account-profile .side-role{color:#6a7e88}
.personal-header .account-profile:hover{background:#e6efef}
.personal-navigation{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;gap:4px;margin-bottom:24px;display:flex;flex-wrap:wrap;white-space:normal}
.personal-navigation button{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 13px;min-height:44px;font-size:13px;flex:1;white-space:nowrap}
.personal-navigation .ui-icon{width:18px;height:18px}
.personal-navigation button.active{background:#e4f0ec;color:#165a49;font-weight:650}
.personal-navigation button:hover{background:#eef5f3;color:#225849}
.personal-navigation .personal-settings{display:none}
.account-summary{display:flex;align-items:center;gap:15px;padding:0 0 22px;margin-bottom:5px;border-bottom:1px solid var(--line)}
.account-summary .ui-avatar{height:52px;width:52px;font-size:22px}
.account-summary h3{overflow-wrap:anywhere;margin-bottom:5px}
.account-login{margin-top:8px;overflow-wrap:anywhere}
.sidebar .nav-list{scrollbar-gutter:stable}
.sidebar .nav-list::-webkit-scrollbar{width:5px}
.sidebar .nav-list::-webkit-scrollbar-thumb{background:#527781;border-radius:8px}
.account-settings-list{display:grid;gap:6px}
.account-setting{display:flex;align-items:center;gap:14px;min-height:80px;background:white;color:var(--navy);border-radius:10px;text-align:left;padding:14px 8px;width:100%}
.account-setting:hover{background:#f0f6f5}
.account-setting>span{display:grid;gap:4px;flex:1}
.account-setting strong{font-size:15px;font-weight:600}
.account-setting small{font-size:12px}
.account-setting>.ui-icon:last-child{width:16px}
dialog{max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overscroll-behavior:contain}
.dialog-title-row{position:sticky;top:-30px;background:#fff;padding-top:10px;padding-bottom:14px;z-index:2;border-bottom:1px solid #edf2f4;margin-bottom:20px}
.close-dialog{width:40px;height:40px;min-width:40px}
#site-footer{padding:20px 16px max(20px,env(safe-area-inset-bottom));text-align:center;min-height:62px;color:#71838b;font-size:12px;line-height:22px}
#site-footer a{color:#617983;text-decoration:none;display:inline-block}
#site-footer a:hover{text-decoration:underline;color:#244e5b}
body:has(.app-shell) #site-footer{margin-left:var(--sidebar-width)}
.auth-page,.auth-side{min-height:calc(100vh - 62px);min-height:calc(100dvh - 62px)}

@media(min-width:901px) and (max-width:1200px){
  :root{--sidebar-width:224px}
  .main{padding:28px 24px 35px}
  .sidebar-head{padding:24px 18px 20px}
}
@media(max-width:760px){.form-row{grid-template-columns:1fr}}
@media(max-width:650px){.finance-form-grid{grid-template-columns:1fr}}
@media(max-width:900px){
  html{scrollbar-gutter:auto}
  .app-shell{display:block;min-height:calc(100dvh - 62px)}
  .mobile-header{display:flex;align-items:center;gap:12px;padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));padding-top:max(10px,env(safe-area-inset-top));position:sticky;top:0;z-index:20;background:#ffffffee;backdrop-filter:blur(14px);border-bottom:1px solid #dde7e9;color:var(--navy)}
  .mobile-heading{display:grid;gap:1px;min-width:0;flex:1}
  .mobile-heading small{font-size:10px;letter-spacing:1.2px}
  .mobile-heading strong{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobile-account{padding:4px;background:transparent;border-radius:10px;flex:none}
  .mobile-account .ui-avatar{width:34px;height:34px}
  .sidebar{position:fixed;inset:0 auto 0 0;height:100vh;height:100dvh;width:min(310px,calc(100vw - 48px));max-width:none;transform:translateX(-100%);visibility:hidden;transition:transform .18s ease;z-index:60;border-right:0;display:flex;flex-direction:column;padding:0}
  .sidebar-head{padding:22px 18px 18px;gap:12px;padding-top:max(22px,env(safe-area-inset-top))}
  .sidebar-head .brand{font-size:19px}
  .sidebar-head .brand small{display:block}
  .sidebar .drawer-close{display:grid;color:#d3e4e9}
  .drawer-close:hover{background:#315661}
  .sidebar .nav-list{display:flex;gap:17px;overflow:auto;padding:0 14px 20px;flex-direction:column;min-height:0}
  .sidebar .nav-button{width:100%;min-height:46px;font-size:14px;padding:12px 14px}
  .sidebar .side-bottom{display:block;padding:12px 18px max(16px,env(safe-area-inset-bottom));margin:0}
  .sidebar .side-role{display:block}
  .sidebar .side-actions .quiet{min-height:44px;font-size:13px}
  .nav-backdrop{display:block;position:fixed;inset:0;z-index:55;background:#102e3a73;backdrop-filter:blur(2px);padding:0}
  .navigation-open{overflow:hidden}
  .navigation-open .sidebar{visibility:visible;transform:translateX(0);box-shadow:12px 0 40px #102f3a25}
  .main{padding:26px 22px 30px}
  body:has(.app-shell) #site-footer{margin-left:0}
  .topline{margin-bottom:22px}
  .top-date{display:none}
  .overview-grid,.upload-layout{grid-template-columns:1fr}
  .finance-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .main{padding:22px 16px 28px}
  .topline{gap:14px}
  .topline>div{flex-basis:100%}
  .topline h1,.personal-top h1{font-size:23px;letter-spacing:-.4px}
  .topline .page-caption{font-size:13px;line-height:1.75}
  .topline>.row{width:100%;flex-wrap:wrap;gap:8px}
  .topline>.primary,.topline>.secondary{min-height:44px}
  .card{padding:18px;border-radius:14px}
  .table-card{padding:0}
  .stat-grid:not(.finance-stats):not(.invoice-stats){grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-grid:not(.finance-stats):not(.invoice-stats)>.stat:first-child{grid-column:1/-1;background:#e8f1ef;border-color:#d0e3db}
  .stat-grid{gap:10px;margin-bottom:20px}
  .stat{padding:16px}
  .stat-label{font-size:12px}
  .stat-value{font-size:25px;line-height:1.25;margin:10px 0 8px}
  .stat-note{font-size:11px;line-height:1.6}
  .invoice-stats .stat{padding:14px 10px}
  .invoice-stats .stat-value{font-size:24px;margin-top:7px}
  .invoice-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .import-feature{gap:14px;padding:23px;background:linear-gradient(140deg,#e5f0ec,#edf4f7)}
  .import-feature h2{font-size:20px;line-height:1.5}
  .import-feature p{font-size:13px}
  .feature-symbol{width:42px;height:42px}
  .card-header{margin-bottom:16px}
  .section-title{flex-wrap:wrap;margin-top:24px;gap:10px}
  .card h2,.section-title h2{font-size:18px}
  .table-tools{padding:14px;gap:12px;align-items:center}
  .table-tools .search{flex:1;max-width:none;width:100%}
  .table-scroll:has(table){border-radius:inherit;background:linear-gradient(to right,#fff 30%,#fff0),linear-gradient(to left,#fff 30%,#fff0),linear-gradient(to right,#163c4718,#fff0),linear-gradient(to left,#163c4718,#fff0);background-position:left center,right center,left center,right center;background-repeat:no-repeat;background-size:32px 100%,32px 100%,12px 100%,12px 100%;background-attachment:local,local,scroll,scroll}
  th,td{font-size:13px;padding:14px}
  .table-scroll .link-button,.table-scroll .quiet{min-height:40px}
  .field input,.field select,.field textarea,input.search,.month-select,.finance-toolbar select,.report-filter input,.report-filter select,.manual-form input:not([type=checkbox]),.manual-form select{font-size:16px;min-height:46px}
  .field label{font-size:13px}
  .table-scroll textarea{font-size:16px}
  .form-grid{gap:18px}
  .form-row,.finance-form-grid{grid-template-columns:1fr;gap:18px}
  .primary,.secondary,.quiet,.btn-small{min-height:44px}
  .check-label{min-height:44px;align-items:center}
  .check-label input{flex:none}
  .row{flex-wrap:wrap}
  .between{gap:12px}
  .finance-toolbar{gap:12px;align-items:flex-end}
  .finance-toolbar>.row{width:100%;gap:8px}
  .finance-toolbar>.row button{flex:1}
  .finance-tabs{padding:7px;gap:4px;background:#e6edef;border:0;border-radius:12px;margin:20px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .finance-tabs button{min-height:44px;font-size:12px;padding:8px 5px;white-space:normal;line-height:1.5}
  .finance-tabs button.active{background:#fff;box-shadow:0 2px 5px #163c4710;color:#165945}
  .finance-source-grid{gap:12px}
  .finance-source{padding:18px}
  .finance-section-heading{flex-wrap:wrap}
  .finance-section-heading .help{font-size:12px}
  .finance-stats .stat-value{font-size:23px}
  .manual-save,.manual-review,.actions-bar{gap:12px}
  .manual-save button,.actions-bar>.row button{flex:1}
  .invoice-scopes{gap:5px;overflow-x:auto;flex-wrap:nowrap}
  .invoice-scopes button{flex:none;min-height:44px;font-size:13px;padding:10px 12px}
  .invoice-search{gap:14px}
  .member-stats{gap:10px}
  .member-admin-alert{padding:14px;font-size:12px;gap:9px}
  .member-admin-alert button{align-self:stretch;font-size:13px}
  .member-expiry{gap:6px}
  .personal-shell{padding:0 16px 26px}
  .personal-header{position:sticky;top:0;z-index:20;background:#f3f6f7f5;backdrop-filter:blur(14px);padding:13px 0;margin-bottom:22px;gap:10px}
  .personal-header .brand{font-size:16px;gap:9px}
  .personal-header .brand small{display:block;font-size:10px;margin-top:2px}
  .personal-header .brand img{height:32px;width:32px}
  .personal-header .desktop-account-action{display:none}
  .personal-header .account-profile{padding:4px 0 4px 4px;gap:7px}
  .personal-header .account-profile .side-user{max-width:75px;font-size:12px}
  .personal-header .account-profile .side-role{font-size:10px}
  .personal-header .account-profile>.ui-icon{display:none}
  .personal-header .account-profile .ui-avatar{height:32px;width:32px;font-size:13px}
  .personal-top{align-items:center;flex-wrap:wrap;margin-bottom:18px}
  .personal-navigation{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:10px 6px;gap:5px 2px;overflow:visible;border-radius:16px}
  .personal-navigation button{flex-direction:column;gap:7px;white-space:normal;min-width:0;min-height:73px;padding:10px 1px;font-size:11px;border-radius:11px;line-height:1.4}
  .personal-navigation .ui-icon{width:22px;height:22px;color:#52827f}
  .personal-navigation button.active .ui-icon{color:#176b53}
  .personal-navigation .personal-settings{display:flex}
  .personal-navigation button:nth-child(4) .ui-icon,.personal-navigation button:nth-child(6) .ui-icon{color:#ac8256}
  .pay-grid{gap:14px}
  .pay-hero{background:linear-gradient(125deg,#183f4a,#25655f);border:1px solid #2e625f;min-height:190px;padding:24px;border-radius:18px;box-shadow:0 8px 24px #163c4712}
  .pay-hero-value{font-size:40px;overflow-wrap:anywhere}
  .personal-sales .stat-value{font-size:28px}
  .personal-section{margin-top:16px}
  .detail-line{font-size:13px;padding:12px 0}
  .schedule-calendar-card{padding:16px 8px}
  .schedule-month-picker{flex-wrap:nowrap;gap:3px}
  .schedule-month-picker input{max-width:145px;font-size:15px}
  .schedule-month-picker .btn-small{padding:5px 8px}
  .schedule-calendar-card>.between{flex-wrap:wrap}
  .schedule-quota{padding:14px 10px}
  .rank-my-summary .card{padding:12px}
  .rank-my-summary strong{font-size:22px}
  dialog,dialog.wide,dialog.finance-dialog{width:calc(100vw - 20px);max-width:none;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);padding:20px 18px;border-radius:18px}
  .dialog-title-row{top:-20px;padding:8px 0 14px;align-items:center;margin-bottom:18px;gap:12px}
  .dialog-title-row h2{font-size:19px}
  .dialog-actions{gap:8px;margin-top:22px}
  .dialog-actions button{min-height:46px}
  #toast{bottom:max(20px,env(safe-area-inset-bottom));width:max-content;max-width:calc(100vw - 32px)}
  .auth-main{min-height:calc(100dvh - 62px);padding:24px 20px}
  .auth-box{padding:28px 24px;box-shadow:0 12px 35px #173d4a08}
  #site-footer{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.sidebar{transition:none}}
@media print{
  body{display:block}
  .mobile-header,.nav-backdrop,.skip-link,#site-footer,.personal-navigation{display:none!important}
  .app-shell{display:block;min-height:0}
  .main{padding:0;max-width:100%;margin:0}
}