@font-face{font-family:"SF Pro Display";src:url("assets/fonts/SFPRODISPLAYREGULAR.OTF") format("opentype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"SF Pro Display";src:url("assets/fonts/SFPRODISPLAYMEDIUM.OTF") format("opentype");font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:"SF Pro Display";src:url("assets/fonts/SFPRODISPLAYMEDIUM.OTF") format("opentype");font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:"SF Pro Display";src:url("assets/fonts/SFPRODISPLAYBOLD.OTF") format("opentype");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"SF Pro Display";src:url("assets/fonts/SFPRODISPLAYBOLD.OTF") format("opentype");font-style:normal;font-weight:800;font-display:swap}
@font-face{font-family:"SF Pro Display";src:url("assets/fonts/SFPRODISPLAYBOLD.OTF") format("opentype");font-style:normal;font-weight:900;font-display:swap}
.inline-add{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:14px}
.login-heading p{margin:0;color:#6f7e8c;font-size:13px;line-height:1.5}
.login-local .status-dot,.sidebar-foot .status-dot{animation:status-pulse 1.8s ease-in-out infinite}
.splash-screen{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#000000;opacity:1;visibility:visible;transition:opacity .35s ease,visibility .35s ease}.splash-screen.hide{opacity:0;visibility:hidden;pointer-events:none}.splash-content{display:grid;justify-items:center;gap:18px;animation:splash-enter .45s ease both}.splash-content img{display:block;width:153px;height:77px;object-fit:contain}.splash-content small{color:#c7d0e1;font-size:10px;font-weight:650;letter-spacing:.16em}.splash-line{width:130px;height:2px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.16)}.splash-line span{display:block;width:45%;height:100%;border-radius:inherit;background:#fff;animation:splash-load .85s ease-in-out infinite}
.login-screen{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:24px;background:#000000;transition:opacity .3s ease,visibility .3s ease}.login-screen.hide{opacity:0;visibility:hidden;pointer-events:none}.login-card{width:min(100%,390px);padding:34px;border-radius:18px;background:#fff;box-shadow:0 28px 90px rgba(4,10,28,.32)}.login-card>img{display:block;width:130px;height:65px;object-fit:contain;margin:0 auto 27px;background:#000000;border-radius:8px}.login-heading{text-align:center;margin-bottom:24px}.login-heading>span{font-size:9px;font-weight:750;letter-spacing:.14em;color:#73818c}.login-heading h1{margin:8px 0 5px;font-size:25px;letter-spacing:-.025em}.login-heading p{margin:0;color:#6f7e8c;font-size:13px}.login-card form{display:grid;gap:15px}.login-card label{display:grid;gap:7px;color:#50616e;font-size:11px;font-weight:700}.login-card input{height:43px}.login-card .btn{width:100%;margin-top:2px}.login-error{display:none;margin:0;padding:9px 11px;border-radius:7px;background:#fff0f0;color:#a93333;font-size:11px}.login-error.show{display:block}.login-local{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:22px;color:#7a8994;font-size:10px}.logout-button{display:flex;align-items:center;gap:8px;width:100%;margin-top:2px;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:#a9c0d0;font:inherit;font-size:12px;font-weight:650;cursor:pointer}.logout-button:hover{background:rgba(255,255,255,.09);color:#fff}.logout-button span{font-size:16px}
.brand{padding:0 8px 28px;justify-content:center}.brand-logo{display:block;width:130px;max-width:100%;height:65px;object-fit:contain;object-position:center;margin:0 auto}
.nav-icon{display:grid!important;place-items:center}.nav-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.nav-label{width:auto!important;font-size:14px!important;text-align:left!important}
.kpi-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn.primary{background:#000000;box-shadow:0 6px 15px rgba(25,38,72,.24)}.btn.primary:hover{background:#22345c}.btn.secondary{color:#000000}.link-btn,.invoice-link{color:#000000}.icon-btn:hover{color:#000000}
.btn,.link-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:9px;font-family:inherit;font-size:13px;font-weight:700;line-height:1;white-space:nowrap;transition:background .15s,color .15s,border-color .15s,box-shadow .15s,transform .15s}.link-btn{min-height:40px;padding:10px 16px;border:0;background:#e8f1f6;color:#000000}.btn.secondary,.link-btn{background:#e8f1f6;color:#000000}.btn.secondary:hover,.link-btn:hover{background:#dbe9f1;transform:translateY(-1px)}.btn.ghost:hover{background:#f3f6f8;border-color:#c8d4db;color:#000000}.btn.primary:hover{transform:translateY(-1px)}.btn:active,.link-btn:active{transform:translateY(0);box-shadow:none}.btn:focus-visible,.link-btn:focus-visible,.icon-btn:focus-visible{outline:3px solid rgba(25,38,72,.2);outline-offset:2px}.icon-btn{display:inline-grid;place-items:center;flex:0 0 32px;border-radius:8px;transition:background .15s,color .15s,transform .15s}.icon-btn:hover{transform:translateY(-1px)}.dialog-actions .btn,.section-actions .btn,.settings-card>.btn{min-width:112px}
.mono,.invoice-link,.kpi strong,.donut strong,.legend strong,.line-total,.total-box strong,input[type="number"],input[type="date"],#invoice-number,#invoice-delivery{font-family:inherit;font-variant-numeric:tabular-nums}
#recent-body td:nth-child(3),#recent-body td:nth-child(5),#invoice-body td:nth-child(5),#invoice-body td:nth-child(6),#invoice-body td:nth-child(8),#invoice-body td:nth-child(9),#catalog-body td:nth-child(5),.supplier-stats strong{font-family:inherit;font-variant-numeric:tabular-nums}
.material-head,.material-line{grid-template-columns:1.8fr .7fr .65fr .75fr .85fr .8fr .8fr .9fr 34px}
.document-badge{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:750;background:#e6f0f7;color:#1a5d88;white-space:nowrap}
.document-badge.delivery{background:#fff1dc;color:#a8600d}
.kpi-grid{grid-template-columns:repeat(5,minmax(0,1fr))}

/* Hierarkia vizuale */
body{letter-spacing:-.005em}main{padding:0 36px 48px}.topbar{min-height:116px;border-bottom:1px solid rgba(220,228,233,.75);margin-bottom:24px}.topbar h1{font-size:28px;line-height:1.15;letter-spacing:-.025em}.topbar p{font-size:13px;margin-top:7px}.view{animation:view-in .18s ease}.panel{border-color:#e1e7eb;box-shadow:0 8px 26px rgba(25,38,72,.06)}.panel-head{padding:22px 22px 15px}.panel-head h2,.settings-card h2{font-size:17px;letter-spacing:-.012em}.panel-head p,.section-title p,.settings-card>p{line-height:1.5}.kpi{min-height:112px;padding:20px 18px;border-top:3px solid transparent}.kpi:hover{border-top-color:#000000;transform:translateY(-1px);transition:.18s}.kpi-icon{flex:0 0 44px}.kpi span{font-size:11px;text-transform:uppercase;letter-spacing:.055em}.kpi strong{font-size:24px;line-height:1.2;margin:5px 0}.kpi small{display:block;line-height:1.35}.toolbar.panel.slim{padding:14px 16px;margin-bottom:18px}.section-actions{margin-bottom:18px}.btn{min-height:40px;padding:10px 17px;letter-spacing:.005em}.btn.small{min-height:34px}.table-wrap{border-radius:0 0 14px 14px}th{background:#f6f8f9;padding:12px 16px;color:#61717d;font-size:9px;letter-spacing:.075em}td{padding:15px 16px}tbody tr{transition:background .12s}.invoice-link{font-weight:750;text-decoration:none}.invoice-link:hover{text-decoration:underline;text-underline-offset:3px}.badge{font-size:10px;padding:5px 9px}.settings-card{padding:24px}.settings-card h2{margin-bottom:7px}.settings-card label,.form-stack label{font-size:11px;letter-spacing:.02em}.card-grid{gap:18px}.supplier-card{padding:22px}.supplier-card h3{font-size:15px}.dialog-head{padding:22px 26px}.dialog-head h2{font-size:21px;letter-spacing:-.018em}.dialog form,.detail-content{padding:24px 26px}.section-title{margin-top:28px}.section-title h3,.detail-section-title{font-size:16px}.detail-field span{letter-spacing:.065em}.detail-field strong{font-size:14px}.total-box{padding:17px}.total-box strong{font-size:15px}.sidebar{padding-top:22px}.nav-item{min-height:45px;padding:12px 14px;border-radius:9px}.nav-item.active{background:rgba(255,255,255,.13);box-shadow:inset 3px 0 0 #fff}.sidebar-foot{line-height:1.4}
.supplier-contact{display:grid;gap:5px;margin-top:11px}.supplier-contact p{line-height:1.4;overflow-wrap:anywhere}.bank-info{margin-top:14px;padding:10px 11px;border-radius:8px;background:#f3f6f8}.bank-info span{display:block;font-size:9px;font-weight:750;text-transform:uppercase;letter-spacing:.06em;color:#6f7e8c;margin-bottom:4px}.bank-info p{line-height:1.4;overflow-wrap:anywhere}
.supplier-card-actions{display:flex;align-items:center;gap:4px}.info-supplier svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.supplier-info-dialog{max-width:860px}.supplier-info-content{padding:24px 26px}.supplier-info-hero{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line)}.avatar.large{width:50px;height:50px;border-radius:13px}.supplier-info-hero span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.07em}.supplier-info-hero strong{display:block;font-size:19px;margin-top:3px}.supplier-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}.supplier-info-field{padding:12px;border:1px solid #e1e7eb;border-radius:9px;background:#fafbfc}.supplier-info-field span,.supplier-info-bank span,.supplier-info-stats span{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.065em;margin-bottom:5px}.supplier-info-field strong{font-size:12px;line-height:1.45;overflow-wrap:anywhere}.supplier-info-bank{margin-top:12px;padding:14px;border-radius:9px;background:#f1f4f6}.supplier-info-bank strong{font-size:12px;line-height:1.45}.supplier-info-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 22px}.supplier-info-stats div{padding:13px;border-radius:9px;background:#000000;color:#fff}.supplier-info-stats span{color:#bdc8dc}.supplier-info-stats strong{font-size:17px}.supplier-info-content .detail-section-title{margin-top:4px}
.app-shell{transition:grid-template-columns .24s ease}.sidebar{transition:width .24s ease,padding .24s ease}.topbar-leading{display:flex;align-items:center;gap:13px}.page-title-row{display:flex;align-items:center;gap:10px}.page-title-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#e8eef2;color:#000000;flex:0 0 34px}.page-title-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.page-title-icon.text-icon{font-size:18px}.sidebar-toggle{position:absolute;top:0;right:-18px;bottom:0;z-index:3;width:18px;padding:0;display:flex;align-items:center;justify-content:center;border:0;border-left:1px solid rgba(255,255,255,.2);border-right:1px solid rgba(25,38,72,.18);border-radius:0;background:#304267;color:#fff;cursor:pointer;box-shadow:4px 0 10px rgba(8,20,38,.13);transition:width .18s,right .18s,background .18s,box-shadow .18s}.sidebar-toggle:hover{right:-22px;width:22px;background:#3b507b;box-shadow:5px 0 14px rgba(8,20,38,.2)}.sidebar-toggle svg{display:block;flex:0 0 15px;width:15px;height:15px;margin:0;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));transition:transform .24s}.brand-mini{display:none;width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.12);color:#fff;font-size:20px;font-weight:800;place-items:center}.settings-icon{font-size:18px;width:22px;text-align:center}.app-shell.sidebar-collapsed{grid-template-columns:78px 1fr}.app-shell.sidebar-collapsed .sidebar{width:78px;padding-left:11px;padding-right:11px}.app-shell.sidebar-collapsed .brand{padding-left:0;padding-right:0}.app-shell.sidebar-collapsed .brand-logo{display:none}.app-shell.sidebar-collapsed .brand-mini{display:grid}.app-shell.sidebar-collapsed .nav-item{justify-content:center;padding-left:10px;padding-right:10px}.app-shell.sidebar-collapsed .nav-label,.app-shell.sidebar-collapsed .sidebar-foot-label,.app-shell.sidebar-collapsed .logout-label{display:none}.app-shell.sidebar-collapsed .sidebar-foot{display:flex;justify-content:center;align-items:center;gap:0;min-height:45px;padding:0}.app-shell.sidebar-collapsed .sidebar-foot .status-dot{flex:0 0 8px;margin:0}.app-shell.sidebar-collapsed .logout-button{justify-content:center;min-height:45px;margin-top:5px;padding:10px;border-radius:11px}.app-shell.sidebar-collapsed .sidebar-toggle svg{transform:rotate(180deg)}
@keyframes view-in{from{opacity:.55;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes splash-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}@keyframes splash-load{0%{transform:scaleX(0)}12%{transform:scaleX(.05)}38%{transform:scaleX(.38)}72%{transform:scaleX(.78)}100%{transform:scaleX(1)}}
@keyframes status-pulse{0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 0 4px rgba(66,209,148,.16)}50%{opacity:.08;transform:scale(.72);box-shadow:0 0 0 1px rgba(66,209,148,0)}}
@media(prefers-reduced-motion:reduce){.splash-content,.splash-line span,.login-local .status-dot,.sidebar-foot .status-dot{animation:none}.splash-screen{transition:none}}
@media(max-width:1250px){.kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){main{padding:0 14px 32px}.topbar{min-height:94px;margin-bottom:18px}.topbar h1{font-size:23px}.sidebar-toggle{display:none}.page-title-icon{width:31px;height:31px;flex-basis:31px}.app-shell.sidebar-collapsed .sidebar{width:auto;padding:14px}.app-shell.sidebar-collapsed .brand-logo{display:block}.app-shell.sidebar-collapsed .brand-mini{display:none}.app-shell.sidebar-collapsed .nav-label,.app-shell.sidebar-collapsed .logout-label{display:inline}.app-shell.sidebar-collapsed .nav-item,.app-shell.sidebar-collapsed .logout-button{justify-content:flex-start}.kpi-grid,.supplier-info-grid,.supplier-info-stats{grid-template-columns:1fr}.material-head{display:none}.material-line{grid-template-columns:1fr 1fr}.material-line .material-name{grid-column:1/-1}}

/* Apple-inspired interface */
:root{
  --navy:#182442;
  --navy2:#243356;
  --blue:#007aff;
  --cyan:#32ade6;
  --bg:#f5f5f7;
  --panel:rgba(255,255,255,.9);
  --text:#1d1d1f;
  --muted:#6e6e73;
  --line:rgba(60,60,67,.14);
  --ok:#30a46c;
  --warn:#e88920;
  --danger:#ff3b30;
  --shadow:0 12px 36px rgba(0,0,0,.065);
  --ease-apple:cubic-bezier(.22,1,.36,1);
  --ease-apple-out:cubic-bezier(.32,.72,0,1);
  --ease-apple-in:cubic-bezier(.4,0,1,1);
  font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--text)
}
html{background:var(--bg)}
body{position:relative;isolation:isolate;overflow-x:hidden;background:linear-gradient(135deg,#fff 0%,#fafcff 42%,#fff 72%,#f8fbff 100%);font-family:inherit;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body:before{content:"";position:fixed;z-index:-1;inset:-38%;pointer-events:none;background:conic-gradient(from 205deg at 50% 50%,transparent 0deg 118deg,rgba(0,122,255,.03) 130deg,rgba(0,122,255,.2) 143deg,rgba(50,173,230,.27) 150deg,rgba(0,122,255,.16) 158deg,rgba(0,122,255,.025) 171deg,transparent 184deg 360deg);filter:blur(46px);transform:translate3d(-5%,-2%,0) rotate(-4deg) scale(1.08);animation:apple-blue-ribbon 22s var(--ease-apple-out) infinite;will-change:transform}
body:after{content:"";position:fixed;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(circle at 18% 14%,rgba(0,122,255,.055),transparent 24%),radial-gradient(circle at 84% 78%,rgba(50,173,230,.045),transparent 26%)}
button,input,select,textarea{font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
.sidebar{background:linear-gradient(180deg,#192647 0%,#131d35 100%);border-right:1px solid rgba(255,255,255,.08);box-shadow:8px 0 30px rgba(15,23,42,.08)}
.brand{justify-content:center;padding-bottom:32px}
.nav-item{min-height:44px;border-radius:11px;color:rgba(255,255,255,.68);font-size:13px;font-weight:590;letter-spacing:0;transition:background .18s,color .18s,transform .18s}
.nav-item:hover{background:rgba(255,255,255,.09);color:#fff;transform:translateX(1px)}
.nav-item.active{background:rgba(255,255,255,.15);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);color:#fff}
.sidebar-foot{color:rgba(255,255,255,.55)}
.logout-button{border-radius:11px;color:rgba(255,255,255,.7)}
.sidebar-toggle{background:#33466f;border-color:rgba(255,255,255,.13);box-shadow:4px 0 14px rgba(0,0,0,.14)}
.sidebar-toggle:hover{background:#47608f}
main{padding-left:40px;padding-right:40px}
.topbar{min-height:112px;margin-bottom:20px;border-bottom:0}
.topbar h1{font-size:30px;font-weight:700;letter-spacing:-.035em}
.topbar p{font-size:13px;color:#86868b}
.page-title-icon{background:rgba(0,122,255,.1);color:#007aff;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(0,122,255,.06)}
.panel,.kpi,.settings-card{background:var(--panel);border:1px solid rgba(255,255,255,.8);border-radius:18px;box-shadow:var(--shadow),inset 0 0 0 1px rgba(60,60,67,.06);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.kpi{min-height:116px;padding:20px;border-top:0}
.kpi:hover{border-top-color:transparent;transform:translateY(-2px);box-shadow:0 16px 38px rgba(0,0,0,.085),inset 0 0 0 1px rgba(60,60,67,.06)}
.kpi-action{position:relative;cursor:pointer;user-select:none}.kpi-action:after{content:"›";position:absolute;right:15px;top:15px;color:rgba(29,29,31,.28);font-size:20px;font-weight:500;transition:color .16s,transform .16s}.kpi-action:hover:after{color:#007aff;transform:translateX(2px)}.kpi-action:focus-visible{outline:3px solid rgba(0,122,255,.28);outline-offset:2px}.kpi-action:active{transform:translateY(0) scale(.99)}
.kpi-icon{border-radius:12px}
.kpi span{font-size:11px;font-weight:600;letter-spacing:.045em}
.kpi strong{font-size:25px;font-weight:700;letter-spacing:-.025em}
.kpi strong[id^="kpi-"]{display:flex;align-items:flex-start;min-height:1.4em;line-height:1.4;white-space:nowrap;overflow:visible}.kpi strong .slot-digit,.kpi strong .slot-reel,.kpi strong .slot-symbol{font-size:inherit;font-weight:inherit;color:inherit;letter-spacing:inherit}.kpi strong .slot-digit{display:inline-block;width:.64em;height:1.4em;overflow:hidden;vertical-align:top}.kpi strong .slot-reel{display:flex;flex-direction:column;line-height:1.4em;transform:translateY(0);animation:slot-roll 1.05s var(--ease-apple-out) var(--slot-delay) both}.kpi strong .slot-reel i{display:flex;align-items:center;justify-content:center;width:100%;height:1.4em;min-height:1.4em;padding:.06em 0;font:inherit;font-style:normal;line-height:1.28em;text-align:center}.kpi strong .slot-symbol{display:inline-flex;align-items:center;height:1.4em;padding:.06em 0;line-height:1.28em}
.panel-head{padding:22px 22px 16px}
.dashboard-grid{grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch}
.dashboard-grid>article:first-child{grid-column:span 3}
.dashboard-grid>article:last-child{grid-column:span 2}
.control-panel{min-height:320px;align-self:stretch;display:flex;flex-direction:column}
.control-panel .donut-row{flex:1;min-height:0;padding:24px 28px 32px;gap:42px;align-items:center;justify-content:center}
.control-panel .donut{width:172px;height:172px;flex:0 0 172px}
.control-panel .donut:after{inset:20px}
.control-panel .legend{min-width:205px}
.control-panel .legend>div{grid-template-columns:12px minmax(0,1fr) auto;gap:10px;min-height:42px;padding:10px 12px}
.control-panel{position:relative;overflow:hidden}.control-panel:before{content:"";position:absolute;right:-70px;top:-90px;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle,rgba(48,164,108,.1),transparent 68%);pointer-events:none;transition:transform .7s var(--ease-apple),opacity .35s ease}.control-panel:hover:before{transform:scale(1.18) translate(-8px,8px)}.control-panel .panel-head,.control-panel .donut-row,.control-panel .control-insight{position:relative;z-index:1}.control-status-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:rgba(48,164,108,.09);color:#258256;font-size:10px;font-weight:650}.control-status-chip i{width:7px;height:7px;border-radius:50%;background:#30a46c;box-shadow:0 0 0 4px rgba(48,164,108,.1)}.control-status-chip.warning{background:rgba(232,137,32,.1);color:#b8660d}.control-status-chip.warning i{background:#e88920;box-shadow:0 0 0 4px rgba(232,137,32,.12)}.control-panel .donut{transition:transform .55s var(--ease-apple),filter .35s ease}.control-panel:hover .donut{transform:scale(1.035) rotate(2deg);filter:drop-shadow(0 10px 18px rgba(48,164,108,.15))}.control-panel .donut>div{transition:transform .5s var(--ease-apple)}.control-panel:hover .donut>div{transform:rotate(-2deg)}.control-panel .legend>div{border-radius:9px;transition:background .22s ease,transform .4s var(--ease-apple)}.control-panel .legend>div:hover{background:rgba(118,118,128,.065);transform:translateX(4px)}.control-insight{width:calc(100% - 44px);display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:11px;margin:0 22px 20px;padding:11px 13px;border:1px solid rgba(48,164,108,.12);border-radius:12px;background:rgba(48,164,108,.07);color:var(--text);text-align:left;cursor:pointer}.control-insight-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#fff;color:#258256;font-size:16px;font-weight:750;box-shadow:0 3px 10px rgba(0,0,0,.055)}.control-insight strong,.control-insight small{display:block}.control-insight strong{font-size:11px}.control-insight small{margin-top:3px;color:var(--muted);font-size:9px}.control-insight b{color:#258256;font-size:20px;font-weight:500;transition:transform .35s var(--ease-apple)}.control-insight:hover{background:rgba(48,164,108,.11);transform:translateY(-2px)}.control-insight:hover b{transform:translateX(3px)}.control-insight.warning{background:rgba(232,137,32,.08);border-color:rgba(232,137,32,.14)}.control-insight.warning .control-insight-icon,.control-insight.warning b{color:#c66e10}
.panel-head h2,.settings-card h2{font-size:17px;font-weight:680;letter-spacing:-.015em}
.panel-head p,.section-title p,.settings-card>p{color:#86868b}
.btn{min-height:40px;border-radius:10px;font-size:13px;font-weight:620;box-shadow:none;transition:transform .16s,box-shadow .16s,filter .16s}
.btn:hover{transform:translateY(-1px);filter:brightness(.98)}
.btn:active{transform:scale(.98)}
.btn.primary{background:#182442;color:#fff;box-shadow:0 5px 14px rgba(24,36,66,.18)}
.btn.secondary{background:rgba(0,122,255,.1);color:#0066d6}
.btn.ghost{background:rgba(118,118,128,.08);border-color:rgba(60,60,67,.12);color:#515154}
.btn.danger-outline{background:rgba(255,59,48,.07);border-color:rgba(255,59,48,.16);color:#d92d28}
.link-btn{padding:8px 13px;border-radius:9px;background:rgba(24,36,66,.08);color:#182442;font-size:12px;transition:background .15s,transform .15s}
.link-btn:hover{background:rgba(24,36,66,.13);transform:translateY(-1px)}
.toolbar.panel.slim{padding:13px 15px}
.selection-status{display:none;align-items:center;gap:5px;margin-left:auto;padding:7px 9px;border-radius:9px;background:rgba(0,122,255,.09);color:#0066d6;font-size:11px;white-space:nowrap}.selection-status.show{display:flex}.selection-status strong{font-size:13px}.selection-status button{padding:2px 4px;border:0;background:transparent;color:#0066d6;font-size:11px;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:2px}.select-cell{width:42px;text-align:center}.select-cell input{display:block;width:16px;height:16px;margin:auto;accent-color:#007aff;cursor:pointer}.selected-row{background:rgba(0,122,255,.065)!important}.catalog-filters{display:flex;align-items:center;gap:12px}.catalog-filters select{min-width:210px}
.search{height:40px;border-radius:10px;border-color:rgba(60,60,67,.14);background:rgba(118,118,128,.07)}
input,select,textarea{border-color:rgba(60,60,67,.2);border-radius:10px;background:rgba(255,255,255,.92);transition:border-color .15s,box-shadow .15s,background .15s}
.field-with-inline-action{display:grid;grid-template-columns:minmax(0,1fr) 40px;align-items:end;gap:7px}.field-with-inline-action label{min-width:0}.inline-icon-add{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:10px;background:rgba(0,122,255,.1);color:#0066d6;font:inherit;font-size:20px;font-weight:500;cursor:pointer;transition:transform .34s var(--ease-apple),background-color .22s ease,box-shadow .25s ease}.inline-icon-add:hover{background:rgba(0,122,255,.16);transform:translateY(-1px);box-shadow:0 5px 12px rgba(0,122,255,.1)}.inline-icon-add:active{transform:scale(.94)}
input:focus,select:focus,textarea:focus{border-color:#007aff;background:#fff;box-shadow:0 0 0 3px rgba(0,122,255,.14)}
th{background:rgba(118,118,128,.055);color:#76767b;font-size:9px;font-weight:700;border-bottom-color:rgba(60,60,67,.12)}
td{border-bottom-color:rgba(60,60,67,.09)}
tbody tr:hover{background:rgba(0,122,255,.035)}
.invoice-link{color:#007aff;text-decoration:none}
.invoice-link:hover{color:#0062cc;text-decoration:underline}
.badge{border-radius:999px;font-weight:650}
.icon-btn{border-radius:9px;color:#6e6e73;transition:background .15s,color .15s,transform .15s}
.icon-btn:hover{background:rgba(0,122,255,.09);color:#007aff;transform:translateY(-1px)}
.supplier-card{border-radius:18px}
.avatar{border-radius:12px;background:rgba(0,122,255,.1);color:#0066d6}
.bank-info,.supplier-info-bank,.total-box{background:rgba(118,118,128,.075);border-radius:12px}
.supplier-info-field,.detail-field{background:rgba(118,118,128,.055);border-color:rgba(60,60,67,.1);border-radius:12px}
.supplier-info-stats div{background:linear-gradient(145deg,#223153,#17213c);border-radius:12px}
.kpi-summary-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:20px}.kpi-summary-strip>div{padding:16px;border-radius:13px;background:rgba(0,122,255,.075);border:1px solid rgba(0,122,255,.08)}.kpi-summary-strip span{display:block;margin-bottom:6px;color:var(--muted);font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}.kpi-summary-strip strong{font-size:19px;letter-spacing:-.02em}.kpi-summary-strip.warning>div{background:rgba(232,137,32,.09);border-color:rgba(232,137,32,.11)}.kpi-documents-title{margin-top:26px}.table-sub{display:block;margin-top:3px;color:var(--muted);font-size:10px;font-weight:400}.kpi-detail-dialog{max-width:1080px}
.modal-backdrop{background:rgba(25,25,28,.36);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.dialog{border-radius:20px;border:1px solid rgba(255,255,255,.65);box-shadow:0 28px 80px rgba(0,0,0,.24)}
.dialog-head{padding:22px 26px;border-bottom-color:rgba(60,60,67,.12)}
.dialog-head h2{font-size:21px;font-weight:700;letter-spacing:-.025em}
.dialog-actions{border-top-color:rgba(60,60,67,.11)}
.material-head{background:rgba(118,118,128,.075);border-radius:10px}
.material-line{border-bottom-color:rgba(60,60,67,.09)}
.scan-field{display:flex;align-items:center;gap:14px;margin-top:18px;padding:14px 15px;border:1px solid rgba(60,60,67,.12);border-radius:13px;background:rgba(118,118,128,.055)}.scan-field>div{display:grid;gap:4px;min-width:0;margin-right:auto}.scan-field strong{font-size:12px}.scan-field small{color:var(--muted);overflow-wrap:anywhere}.scan-picker{position:relative;white-space:nowrap}.scan-picker input{position:absolute;inset:0;opacity:0;cursor:pointer}.scan-remove{display:none;align-items:center;gap:6px;color:var(--muted);font-size:11px;white-space:nowrap}.scan-remove input{width:auto}.detail-actions #detail-open-scan{gap:6px}
.toast{background:rgba(29,29,31,.92);border:1px solid rgba(255,255,255,.12);border-radius:12px;backdrop-filter:blur(18px);box-shadow:0 14px 38px rgba(0,0,0,.2)}
.login-screen{background:radial-gradient(circle at 50% 15%,rgba(0,122,255,.1),transparent 32%),#f5f5f7}
.login-card{border-radius:22px;border:1px solid rgba(255,255,255,.9);box-shadow:0 24px 70px rgba(0,0,0,.1)}
.splash-screen{background:#f5f5f7}
.splash-line{height:3px;background:rgba(0,0,0,.11)}
.splash-line span{width:100%;background:#000;transform:scaleX(0);transform-origin:left center;animation:splash-load 1.15s cubic-bezier(.22,.61,.36,1) .08s both}
@media(max-width:1450px) and (min-width:1251px){.kpi-grid,.dashboard-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.dashboard-grid>article:first-child{grid-column:span 2}.dashboard-grid>article:last-child{grid-column:span 1}}
@media(max-width:1250px) and (min-width:761px){.kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1250px){.dashboard-grid{grid-template-columns:1fr}.dashboard-grid>article:first-child,.dashboard-grid>article:last-child{grid-column:auto}}
@media(max-width:760px){main{padding-left:14px;padding-right:14px}.panel,.kpi,.settings-card{border-radius:16px}.dialog{border-radius:0}.sidebar{box-shadow:none}.scan-field{align-items:stretch;flex-direction:column}.scan-field>div{margin-right:0}.scan-picker{text-align:center}.detail-actions{flex-wrap:wrap}.kpi-summary-strip{grid-template-columns:1fr}.kpi-action:after{right:18px}.catalog-filters{width:100%;align-items:stretch;flex-direction:column}.catalog-filters select{width:100%;min-width:0}.selection-status{margin-left:0;justify-content:center}}

/* Apple-like motion system */
.app-shell{transition:grid-template-columns .42s var(--ease-apple-out)}
.sidebar{transition:width .42s var(--ease-apple-out),padding .42s var(--ease-apple-out),box-shadow .3s ease}
.brand-logo,.brand-mini,.nav-label,.logout-label,.sidebar-foot-label{transition:opacity .22s ease,transform .38s var(--ease-apple)}
.nav-item{transition:background-color .22s ease,color .22s ease,transform .38s var(--ease-apple),box-shadow .22s ease}
.nav-item:hover{transform:translateX(2px)}
.nav-item:active{transform:scale(.97)}
.sidebar-toggle{transition:width .32s var(--ease-apple),right .32s var(--ease-apple),background-color .22s ease,box-shadow .22s ease}
.sidebar-toggle svg{transition:transform .42s var(--ease-apple-out)}
.view.active{animation:apple-view-in .42s var(--ease-apple) both}
.panel,.kpi,.settings-card,.supplier-card{transition:transform .38s var(--ease-apple),box-shadow .38s var(--ease-apple),border-color .22s ease,background-color .22s ease}
.kpi:hover{transform:translateY(-3px) scale(1.006)}
.kpi:active{transform:scale(.985)}
.btn,.icon-btn,.link-btn{transition:transform .34s var(--ease-apple),box-shadow .3s var(--ease-apple),background-color .22s ease,color .22s ease,filter .22s ease}
.btn:hover,.icon-btn:hover,.link-btn:hover{transform:translateY(-1px)}
.btn:active,.icon-btn:active,.link-btn:active{transform:scale(.94);transition-duration:.12s}
input,select,textarea,.search{transition:border-color .2s ease,box-shadow .32s var(--ease-apple),background-color .22s ease,transform .32s var(--ease-apple)}
input:focus,select:focus,textarea:focus{transform:translateY(-1px)}
tbody tr{animation:apple-row-in .34s var(--ease-apple) both;transition:background-color .2s ease}
tbody tr:nth-child(2){animation-delay:.025s}tbody tr:nth-child(3){animation-delay:.05s}tbody tr:nth-child(4){animation-delay:.075s}tbody tr:nth-child(5){animation-delay:.1s}tbody tr:nth-child(n+6){animation-delay:.12s}
.modal.open .modal-backdrop{animation:apple-backdrop-in .24s ease-out both}
.modal.open .dialog{animation:apple-modal-in .4s var(--ease-apple-out) both;transform-origin:center 42%}
.modal.closing .modal-backdrop{animation:apple-backdrop-out .2s var(--ease-apple-in) both}
.modal.closing .dialog{animation:apple-modal-out .2s var(--ease-apple-in) both}
.toast{transition:opacity .32s ease,transform .42s var(--ease-apple-out);transform:translateY(18px) scale(.96)}
.toast.show{transform:translateY(0) scale(1)}
.donut{animation:apple-ring-in .65s var(--ease-apple) both}
.status-dot{will-change:opacity,transform}
.splash-content{animation:splash-enter .55s var(--ease-apple) both}
.splash-screen{transition:opacity .42s ease,visibility .42s ease}
@keyframes apple-view-in{from{opacity:0;transform:translateY(8px) scale(.995)}to{opacity:1;transform:none}}
@keyframes apple-row-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes apple-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes apple-backdrop-out{from{opacity:1}to{opacity:0}}
@keyframes apple-modal-in{from{opacity:0;transform:translateY(14px) scale(.965)}to{opacity:1;transform:none}}
@keyframes apple-modal-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(7px) scale(.985)}}
@keyframes apple-ring-in{from{opacity:0;transform:scale(.88) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes slot-roll{0%{transform:translateY(0);filter:blur(0)}18%{filter:blur(.7px)}78%{filter:blur(.35px)}100%{transform:translateY(calc(-100% + 1.4em));filter:blur(0)}}
@keyframes apple-blue-ribbon{0%,100%{transform:translate3d(-6%,-3%,0) rotate(-5deg) scale(1.08)}50%{transform:translate3d(7%,4%,0) rotate(4deg) scale(1.15)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* Unified button system */
:root{--control-height:40px;--control-height-small:34px;--control-radius:10px;--button-navy:#182442;--button-navy-hover:#223154;--button-soft:rgba(24,36,66,.09);--button-soft-hover:rgba(24,36,66,.14)}
.btn,.link-btn,.icon-btn,.inline-icon-add{font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-weight:600;line-height:1;border-radius:var(--control-radius);cursor:pointer;-webkit-tap-highlight-color:transparent}
.btn{min-height:var(--control-height);height:var(--control-height);display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 16px;border:1px solid transparent;font-size:13px;white-space:nowrap}
.btn-icon{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn.small{min-height:var(--control-height-small);height:var(--control-height-small);padding:0 12px;border-radius:9px;font-size:12px}
.btn.primary{background:var(--button-navy);border-color:var(--button-navy);color:#fff;box-shadow:0 5px 14px rgba(24,36,66,.18)}
.btn.primary:hover{background:var(--button-navy-hover);border-color:var(--button-navy-hover);box-shadow:0 7px 18px rgba(24,36,66,.22)}
.btn.secondary{background:var(--button-soft);border-color:rgba(24,36,66,.07);color:var(--button-navy);box-shadow:none}
.btn.secondary:hover{background:var(--button-soft-hover);border-color:rgba(24,36,66,.1)}
.btn.ghost{background:rgba(255,255,255,.72);border-color:rgba(60,60,67,.16);color:#515154;box-shadow:none}
.btn.ghost:hover{background:#fff;border-color:rgba(60,60,67,.24);color:var(--button-navy)}
.btn.danger-outline{background:rgba(255,59,48,.07);border-color:rgba(255,59,48,.18);color:#d92d28;box-shadow:none}
.btn.danger-outline:hover{background:rgba(255,59,48,.12);border-color:rgba(255,59,48,.24)}
.link-btn{min-height:var(--control-height-small);height:var(--control-height-small);display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border:1px solid rgba(24,36,66,.07);background:var(--button-soft);color:var(--button-navy);font-size:12px;text-decoration:none;white-space:nowrap}
.link-btn:hover{background:var(--button-soft-hover);color:var(--button-navy)}
.icon-btn,.inline-icon-add{width:36px;min-width:36px;height:36px;display:inline-grid;place-items:center;padding:0;border:1px solid transparent;background:transparent;color:#6e6e73;font-size:18px}
.icon-btn:hover,.inline-icon-add:hover{background:var(--button-soft);border-color:rgba(24,36,66,.06);color:var(--button-navy);box-shadow:none}
.inline-icon-add{width:var(--control-height);min-width:var(--control-height);height:var(--control-height);background:var(--button-soft);color:var(--button-navy);font-size:20px}
.btn:focus-visible,.link-btn:focus-visible,.icon-btn:focus-visible,.inline-icon-add:focus-visible,.control-insight:focus-visible,.nav-item:focus-visible,.logout-button:focus-visible{outline:3px solid rgba(0,122,255,.28);outline-offset:2px}
.btn:disabled,.link-btn:disabled,.icon-btn:disabled,.inline-icon-add:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.dialog-actions{align-items:center;gap:8px}.row-actions{align-items:center;gap:4px}.scan-picker{height:var(--control-height)}
.control-panel .legend>div{border-radius:10px}.control-panel .legend>div:hover{background:rgba(118,118,128,.075);transform:translateX(3px)}.control-panel .legend>div span{line-height:1.25}.control-panel .legend>div strong{min-width:24px;text-align:right}

/* iOS translucent glass design */
.panel,.kpi,.settings-card,.supplier-card{
  background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,255,255,.47));
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 18px 46px rgba(24,36,66,.09),inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.22);
  backdrop-filter:blur(30px) saturate(165%);
  -webkit-backdrop-filter:blur(30px) saturate(165%)
}
.panel:hover,.kpi:hover,.supplier-card:hover{
  border-color:rgba(255,255,255,.96);
  box-shadow:0 22px 54px rgba(24,36,66,.115),inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.32)
}
.kpi{background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(248,252,255,.48))}
.kpi-icon,.page-title-icon{box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 5px 14px rgba(24,36,66,.055)}
.toolbar.panel.slim{background:linear-gradient(135deg,rgba(255,255,255,.66),rgba(255,255,255,.4));border-color:rgba(255,255,255,.78)}
.table-wrap{background:rgba(255,255,255,.08)}
th{background:rgba(255,255,255,.34);border-bottom-color:rgba(60,60,67,.1);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
td{border-bottom-color:rgba(60,60,67,.085)}
tbody tr:hover{background:rgba(255,255,255,.42)}
.search,input,select,textarea{background:rgba(255,255,255,.54);border-color:rgba(255,255,255,.84);box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 2px 8px rgba(24,36,66,.035);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
input:focus,select:focus,textarea:focus{background:rgba(255,255,255,.82);border-color:rgba(0,122,255,.52);box-shadow:0 0 0 3px rgba(0,122,255,.13),inset 0 1px 0 #fff}
.btn.secondary,.link-btn,.inline-icon-add{background:rgba(255,255,255,.46);border-color:rgba(255,255,255,.76);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 4px 12px rgba(24,36,66,.05);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.btn.secondary:hover,.link-btn:hover,.inline-icon-add:hover{background:rgba(255,255,255,.7);border-color:rgba(255,255,255,.94)}
.btn.ghost{background:rgba(255,255,255,.32);border-color:rgba(255,255,255,.66)}
.detail-field,.supplier-info-field,.bank-info,.supplier-info-bank,.total-box,.scan-field,.material-head{background:rgba(255,255,255,.38);border-color:rgba(255,255,255,.68);box-shadow:inset 0 1px 0 rgba(255,255,255,.58);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.dialog{background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(248,252,255,.7));border:1px solid rgba(255,255,255,.94);box-shadow:0 30px 90px rgba(15,23,42,.24),inset 0 1px 0 #fff;backdrop-filter:blur(38px) saturate(170%);-webkit-backdrop-filter:blur(38px) saturate(170%)}
.dialog-head,.detail-actions{border-color:rgba(60,60,67,.1);background:rgba(255,255,255,.14)}
.control-insight{background:rgba(255,255,255,.4);border-color:rgba(255,255,255,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.68),0 5px 16px rgba(24,36,66,.045);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.control-insight:hover{background:rgba(255,255,255,.62)}
.control-panel .legend>div:hover{background:rgba(255,255,255,.46);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.selection-status,.badge,.source-chip,.control-status-chip{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
@media(max-width:760px){.panel,.kpi,.settings-card,.supplier-card{backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%)}}

/* iOS Liquid Glass refinement */
.panel,.kpi,.settings-card,.supplier-card{
  border-radius:24px;
  background:
    radial-gradient(ellipse at 12% 0%,rgba(255,255,255,.68),transparent 38%),
    linear-gradient(145deg,rgba(255,255,255,.48) 0%,rgba(255,255,255,.2) 44%,rgba(240,248,255,.3) 72%,rgba(255,255,255,.42) 100%);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:
    0 24px 60px rgba(20,42,82,.1),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 1px 0 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(0,95,190,.08),
    inset 0 0 28px rgba(255,255,255,.11);
  backdrop-filter:blur(34px) saturate(190%) contrast(1.04);
  -webkit-backdrop-filter:blur(34px) saturate(190%) contrast(1.04)
}
.panel:hover,.kpi:hover,.settings-card:hover,.supplier-card:hover{
  border-color:rgba(255,255,255,.96);
  background:
    radial-gradient(ellipse at 18% -5%,rgba(255,255,255,.78),transparent 42%),
    linear-gradient(145deg,rgba(255,255,255,.54),rgba(255,255,255,.22) 46%,rgba(233,246,255,.34) 76%,rgba(255,255,255,.46));
  box-shadow:0 28px 68px rgba(20,42,82,.14),inset 0 1px 0 #fff,inset 1px 0 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,95,190,.1),inset 0 0 34px rgba(255,255,255,.14)
}
.sidebar{background:linear-gradient(180deg,rgba(15,29,61,.88),rgba(8,19,43,.84));border-right:1px solid rgba(255,255,255,.2);box-shadow:10px 0 38px rgba(8,20,46,.18),inset -1px 0 0 rgba(255,255,255,.08);backdrop-filter:blur(34px) saturate(165%);-webkit-backdrop-filter:blur(34px) saturate(165%)}
.nav-item{border:1px solid transparent}
.nav-item.active{background:linear-gradient(145deg,rgba(255,255,255,.23),rgba(255,255,255,.1));border-color:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(0,0,0,.08),0 8px 20px rgba(0,0,0,.08);backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%)}
.nav-item:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.12)}
.kpi-icon,.page-title-icon,.avatar{background:linear-gradient(145deg,rgba(255,255,255,.62),rgba(226,244,255,.3));border:1px solid rgba(255,255,255,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.94),inset 0 -1px 0 rgba(0,110,220,.07),0 8px 20px rgba(20,42,82,.07);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%)}
.toolbar.panel.slim{border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.42),rgba(255,255,255,.18));box-shadow:0 16px 40px rgba(20,42,82,.075),inset 0 1px 0 rgba(255,255,255,.9)}
.search,input,select,textarea{border-radius:13px;background:linear-gradient(145deg,rgba(255,255,255,.58),rgba(255,255,255,.3));border-color:rgba(255,255,255,.78);box-shadow:inset 0 1px 0 rgba(255,255,255,.92),inset 0 -1px 0 rgba(24,36,66,.05),0 5px 16px rgba(20,42,82,.04);backdrop-filter:blur(22px) saturate(175%);-webkit-backdrop-filter:blur(22px) saturate(175%)}
.btn{border-radius:12px}
.btn.primary{background:linear-gradient(145deg,rgba(34,52,91,.96),rgba(14,28,59,.94));border-color:rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.2),0 9px 24px rgba(16,31,66,.2)}
.btn.secondary,.link-btn,.inline-icon-add,.btn.ghost{background:linear-gradient(145deg,rgba(255,255,255,.58),rgba(255,255,255,.24));border-color:rgba(255,255,255,.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(24,36,66,.05),0 7px 18px rgba(20,42,82,.06);backdrop-filter:blur(22px) saturate(190%);-webkit-backdrop-filter:blur(22px) saturate(190%)}
.btn.secondary:hover,.link-btn:hover,.inline-icon-add:hover,.btn.ghost:hover{background:linear-gradient(145deg,rgba(255,255,255,.74),rgba(255,255,255,.34));border-color:#fff;box-shadow:inset 0 1px 0 #fff,0 10px 24px rgba(20,42,82,.09)}
.dialog{border-radius:28px;background:radial-gradient(ellipse at 15% 0%,rgba(255,255,255,.85),transparent 40%),linear-gradient(145deg,rgba(255,255,255,.72),rgba(239,248,255,.48));border-color:rgba(255,255,255,.94);box-shadow:0 38px 110px rgba(6,18,42,.3),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,90,180,.08);backdrop-filter:blur(48px) saturate(205%) contrast(1.04);-webkit-backdrop-filter:blur(48px) saturate(205%) contrast(1.04)}
.modal-backdrop{background:rgba(16,27,48,.2);backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%)}
.detail-field,.supplier-info-field,.bank-info,.supplier-info-bank,.total-box,.scan-field,.material-head,.control-insight{border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.52),rgba(255,255,255,.2));border:1px solid rgba(255,255,255,.74);box-shadow:inset 0 1px 0 rgba(255,255,255,.88),inset 0 -1px 0 rgba(0,100,200,.05),0 6px 18px rgba(20,42,82,.04);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%)}
th{background:rgba(255,255,255,.28)}tbody tr:hover{background:rgba(255,255,255,.44)}
.control-status-chip,.badge,.source-chip,.selection-status{border:1px solid rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.65)}
@media(max-width:760px){.panel,.kpi,.settings-card,.supplier-card{border-radius:20px;backdrop-filter:blur(26px) saturate(175%);-webkit-backdrop-filter:blur(26px) saturate(175%)}.dialog{border-radius:0}}

/* iOS-style document selection */
.select-cell input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:19px;
  min-width:19px;
  max-width:19px;
  height:19px;
  min-height:19px;
  max-height:19px;
  aspect-ratio:1/1;
  flex:0 0 19px;
  margin:auto;
  padding:0!important;
  box-sizing:border-box;
  border:1.7px solid rgba(60,60,67,.25);
  border-radius:50%;
  background:rgba(255,255,255,.54);
  background-position:center;
  background-repeat:no-repeat;
  background-size:11px 11px;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.85),0 1px 3px rgba(24,36,66,.05);
  cursor:pointer;
  transition:transform .28s var(--ease-apple),border-color .2s ease,background-color .25s ease,box-shadow .28s ease
}
.select-cell input[type="checkbox"]:hover{border-color:rgba(0,122,255,.58);transform:scale(1.08);box-shadow:0 0 0 4px rgba(0,122,255,.08)}
.select-cell input[type="checkbox"]:checked{border-color:#0a84ff;background-color:#0a84ff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.2 6.4 11.2 12.8 4.8' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 3px 8px rgba(10,132,255,.24)}
.select-cell input[type="checkbox"]:indeterminate{border-color:#0a84ff;background-color:#0a84ff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 3px 8px rgba(10,132,255,.2)}
.select-cell input[type="checkbox"]:active{transform:scale(.86)}
.select-cell input[type="checkbox"]:focus-visible{outline:0;box-shadow:0 0 0 4px rgba(10,132,255,.18)}

/* Search fields stay inside their glass container */
.search{width:min(100%,380px);max-width:100%;min-width:0;overflow:hidden;flex:0 1 380px}
.search>span{flex:0 0 auto}
.search input,.search input:focus{display:block;flex:1 1 auto;width:100%;min-width:0;max-width:100%;height:100%;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:0!important;transform:none!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.section-actions .search{flex-basis:360px}
@media(max-width:760px){.search,.section-actions .search{width:100%;flex-basis:auto}}

/* Tables follow the liquid-glass card corners */
#view-invoices>article.panel,#view-catalog>article.panel{overflow:hidden}
#view-invoices>article.panel>.table-wrap,#view-catalog>article.panel>.table-wrap{border-radius:23px 23px 0 0}
#view-invoices>article.panel thead th:first-child,#view-catalog>article.panel thead th:first-child{border-top-left-radius:23px}
#view-invoices>article.panel thead th:last-child,#view-catalog>article.panel thead th:last-child{border-top-right-radius:23px}
.sort-button{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px 7px;margin:-5px -7px;border:0;border-radius:7px;background:transparent;color:inherit;font:inherit;font-weight:700;letter-spacing:inherit;text-transform:inherit;white-space:nowrap;cursor:pointer;transition:background-color .2s ease,color .2s ease,transform .3s var(--ease-apple)}.sort-button.right{margin-left:auto}.sort-button i{width:10px;min-width:10px;color:#0a84ff;font-size:11px;font-style:normal;line-height:1;text-align:center}.sort-button:hover{background:rgba(255,255,255,.58);color:#1d1d1f;transform:translateY(-1px)}.sort-button.active{color:#006bd6}.sort-button:active{transform:scale(.96)}.sort-button:focus-visible{outline:2px solid rgba(10,132,255,.32);outline-offset:1px}th.right .sort-button{justify-content:flex-end}

/* Three-state sorting for every read-only data table */
.generic-sort-button{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px 7px;margin:-5px -7px;border:0;border-radius:7px;background:transparent;color:inherit;font:inherit;font-weight:700;letter-spacing:inherit;text-transform:inherit;white-space:nowrap;cursor:pointer;transition:background-color .2s ease,color .2s ease,transform .3s var(--ease-apple)}
.generic-sort-button.right{justify-content:flex-end;margin-left:auto}
.generic-sort-button i{width:10px;min-width:10px;color:#0a84ff;font-size:11px;font-style:normal;line-height:1;text-align:center}
.generic-sort-button:hover{background:rgba(255,255,255,.58);color:#1d1d1f;transform:translateY(-1px)}
.generic-sort-button.active{color:#006bd6}
.generic-sort-button:active{transform:scale(.96)}
.generic-sort-button:focus-visible{outline:2px solid rgba(10,132,255,.32);outline-offset:1px}
th.right .generic-sort-button{display:flex;justify-content:flex-end}

/* Apple-style filled symbols and status capsules */
.kpi-icon,.page-title-icon,.avatar{
  color:#fff!important;
  border:1px solid rgba(255,255,255,.5)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 7px 17px rgba(15,35,66,.13)!important;
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%)
}
.kpi-icon.blue,.page-title-icon,.avatar{background:linear-gradient(145deg,#32a6ff,#087cf0)!important}
.kpi-icon.cyan{background:linear-gradient(145deg,#47c8d7,#1594aa)!important}
.kpi-icon.green{background:linear-gradient(145deg,#45d88b,#21a866)!important}
.kpi-icon.amber{background:linear-gradient(145deg,#ffb64a,#f08316)!important}
.kpi-icon svg,.page-title-icon svg{stroke:#fff!important}

.badge,.document-badge,.source-chip,.control-status-chip{
  color:#fff!important;
  border:1px solid rgba(255,255,255,.42)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 4px 12px rgba(20,42,82,.1)!important;
  text-shadow:0 1px 1px rgba(0,0,0,.09)
}
.badge.ok,.control-status-chip{background:linear-gradient(145deg,#42cf83,#229e60)!important}
.badge.warn,.control-status-chip.warning,.document-badge.delivery{background:linear-gradient(145deg,#ffb348,#e98216)!important}
.badge.neutral{background:linear-gradient(145deg,#9ca7b1,#737f8a)!important}
.document-badge,.source-chip{background:linear-gradient(145deg,#369fff,#0878e7)!important}
.control-status-chip i{background:#fff!important;box-shadow:0 0 0 4px rgba(255,255,255,.2)!important}

.control-insight-icon{background:linear-gradient(145deg,#42cf83,#229e60)!important;color:#fff!important;border:1px solid rgba(255,255,255,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 5px 13px rgba(34,158,96,.2)!important}
.control-insight.warning .control-insight-icon{background:linear-gradient(145deg,#ffb348,#e98216)!important;color:#fff!important}

.icon-btn,.inline-icon-add{background:linear-gradient(145deg,#35466c,#182747)!important;color:#fff!important;border-color:rgba(255,255,255,.3)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 5px 13px rgba(16,31,66,.16)!important}
.icon-btn:hover,.inline-icon-add:hover{background:linear-gradient(145deg,#4a6090,#22375f)!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 7px 17px rgba(16,31,66,.2)!important}

/* Solid Apple-style fills: no gradient, transparency or glass */
.kpi-icon,.page-title-icon,.avatar,.badge,.document-badge,.source-chip,.control-status-chip,.control-insight-icon,.icon-btn,.inline-icon-add{
  background-image:none!important;
  border-color:transparent!important;
  box-shadow:none!important;
  text-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important
}
.kpi-icon.blue,.page-title-icon,.avatar,.document-badge,.source-chip{background:#0a84ff!important}
.kpi-icon.cyan{background:#169bb1!important}
.kpi-icon.green,.badge.ok,.control-status-chip,.control-insight-icon{background:#28a967!important}
.kpi-icon.amber,.badge.warn,.control-status-chip.warning,.document-badge.delivery,.control-insight.warning .control-insight-icon{background:#ee8618!important}
.badge.neutral{background:#7d8993!important}
.icon-btn,.inline-icon-add{background:#000000!important}
.icon-btn:hover,.inline-icon-add:hover{background:#26385f!important;box-shadow:none!important}
.control-status-chip i{background:#fff!important;box-shadow:none!important}

/* Solid sidebar in the BS black identity */
.sidebar{
  background:#000000!important;
  background-image:none!important;
  border-right:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important
}
.sidebar-toggle{
  background:#000000!important;
  background-image:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important
}
.sidebar-toggle:hover{background:#22345c!important}

/* Supplier monograms */
.avatar,.avatar.large{
  background:#e5e7eb!important;
  background-image:none!important;
  color:#4b5563!important;
  border-color:transparent!important;
  box-shadow:none!important;
  text-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important
}

/* Page-title icons use the BS black identity */
.page-title-icon{
  background:#000000!important;
  background-image:none!important;
  color:#fff!important;
  border-color:transparent!important;
  box-shadow:none!important
}
.page-title-icon svg{stroke:#fff!important}

/* Equal backup controls with matching icons */
.backup-actions{gap:12px}
.backup-actions>.btn,.settings-card .backup-actions>.file-btn{
  width:100%;
  min-width:0;
  height:48px;
  min-height:48px;
  margin:0;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  box-sizing:border-box
}
.backup-actions .btn-icon{width:18px;height:18px;flex:0 0 18px}
.backup-actions span{line-height:1.2}
.settings-card .backup-actions>.file-btn{
  font-size:13px;
  font-weight:600;
  letter-spacing:0
}

/* Destructive X buttons */
.icon-btn.delete-invoice,.icon-btn.delete-unit,.icon-btn.delete-material,.icon-btn.remove-line{
  background:#fff1f1!important;
  color:#ff3028!important;
  border:1px solid #ffb8b4!important;
  box-shadow:none!important;
  font-weight:600
}
.icon-btn.delete-invoice:hover,.icon-btn.delete-unit:hover,.icon-btn.delete-material:hover,.icon-btn.remove-line:hover{
  background:#ffe4e2!important;
  color:#e5231c!important;
  border-color:#ff928c!important;
  box-shadow:none!important
}

/* Edit pencil buttons */
.icon-btn[class*="edit-"]{
  background:#eef7ff!important;
  color:#0a78e8!important;
  border:1px solid #add6ff!important;
  box-shadow:none!important;
  font-weight:600
}
.icon-btn[class*="edit-"]:hover{
  background:#dfefff!important;
  color:#0067cf!important;
  border-color:#7dbdff!important;
  box-shadow:none!important
}

/* Supplier information button */
.icon-btn.info-supplier{
  background:#f1f3f5!important;
  color:#59636e!important;
  border:1px solid #cbd1d7!important;
  box-shadow:none!important
}
.icon-btn.info-supplier:hover{
  background:#e5e8eb!important;
  color:#3f4852!important;
  border-color:#aeb6bf!important;
  box-shadow:none!important
}
.icon-btn.info-supplier svg{stroke:currentColor!important}

/* Crisp, non-stretched search icon */
.search>.search-icon{
  display:block;
  width:17px;
  min-width:17px;
  max-width:17px;
  height:17px;
  min-height:17px;
  max-height:17px;
  flex:0 0 17px;
  aspect-ratio:1/1;
  fill:none;
  stroke:#708394;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible
}

/* Supplier select and its add button share one control size */
.field-with-inline-action{grid-template-columns:minmax(0,1fr) var(--control-height);gap:8px}
.field-with-inline-action select,
.field-with-inline-action .inline-icon-add{
  width:100%;
  height:var(--control-height);
  min-height:var(--control-height);
  box-sizing:border-box;
  border-radius:13px
}
.field-with-inline-action .inline-icon-add{
  min-width:var(--control-height);
  padding:0;
  line-height:1
}

.entity-delete{margin-right:auto}
.entity-delete[hidden]{display:none!important}

/* Apple system colors — current light appearance */
:root{
  --ios-blue:#0088ff;
  --ios-green:#34c759;
  --ios-red:#ff383c;
  --ios-orange:#ff8d28;
  --ios-cyan:#00c0e8;
  --ios-gray:#8e8e93;
  --ios-gray-2:#aeaeb2;
  --ios-gray-3:#c7c7cc;
  --ios-gray-5:#e5e5ea;
  --ios-label:#1d1d1f;
  --ios-secondary-label:#6c6c70;
  --blue:var(--ios-blue);
  --cyan:var(--ios-cyan);
  --ok:var(--ios-green);
  --warn:var(--ios-orange);
  --danger:var(--ios-red);
  --muted:var(--ios-secondary-label)
}
.kpi-icon.blue,.document-badge,.source-chip{background:var(--ios-blue)!important}
.kpi-icon.cyan{background:var(--ios-cyan)!important}
.kpi-icon.green,.badge.ok,.control-status-chip,.control-insight-icon{background:var(--ios-green)!important}
.kpi-icon.amber,.badge.warn,.control-status-chip.warning,.document-badge.delivery,.control-insight.warning .control-insight-icon{background:var(--ios-orange)!important}
.badge.neutral{background:var(--ios-gray)!important}
.status-dot,.dot.ok{background:var(--ios-green)!important}
.dot.warn{background:var(--ios-orange)!important}
.dot.neutral{background:var(--ios-gray-2)!important}
.invoice-link,.sort-button i,.generic-sort-button i{color:var(--ios-blue)!important}
.sort-button.active,.generic-sort-button.active{color:var(--ios-blue)!important}
.select-cell input[type="checkbox"]:checked,.select-cell input[type="checkbox"]:indeterminate{background-color:var(--ios-blue)!important;border-color:var(--ios-blue)!important}
.icon-btn[class*="edit-"]{background:#e6f3ff!important;color:var(--ios-blue)!important;border-color:#b3dbff!important}
.icon-btn[class*="edit-"]:hover{background:#d6ebff!important;color:#006ed1!important;border-color:#80c3ff!important}
.icon-btn.delete-invoice,.icon-btn.delete-unit,.icon-btn.delete-material,.icon-btn.remove-line{background:#fff0f1!important;color:var(--ios-red)!important;border-color:#ffb9bb!important}
.icon-btn.delete-invoice:hover,.icon-btn.delete-unit:hover,.icon-btn.delete-material:hover,.icon-btn.remove-line:hover{background:#ffe1e2!important;color:#e91f24!important;border-color:#ff8d90!important}
.btn.danger-outline{background:#fff0f1!important;color:var(--ios-red)!important;border-color:#ffb9bb!important}
.btn.danger-outline:hover{background:#ffe1e2!important;color:#e91f24!important;border-color:#ff8d90!important}
.avatar,.avatar.large{background:var(--ios-gray-5)!important;color:#3c3c43!important}
.icon-btn.info-supplier{background:#f2f2f7!important;color:#636366!important;border-color:var(--ios-gray-3)!important}
.icon-btn.info-supplier:hover{background:var(--ios-gray-5)!important;color:#3a3a3c!important;border-color:var(--ios-gray-2)!important}
.search>.search-icon{stroke:var(--ios-gray)!important}
.difference-ok{color:#248a3d!important}.difference-warn{color:#c93400!important}
.selection-status{background:#e6f3ff!important;color:var(--ios-blue)!important}
.selection-status button{color:var(--ios-blue)!important}
.control-panel:before{background:radial-gradient(circle,rgba(52,199,89,.11),transparent 68%)!important}
.control-insight{background:rgba(52,199,89,.08)!important;border-color:rgba(52,199,89,.2)!important}
.control-insight:hover{background:rgba(52,199,89,.13)!important}
.control-insight.warning{background:rgba(255,141,40,.09)!important;border-color:rgba(255,141,40,.22)!important}
.btn:focus-visible,.link-btn:focus-visible,.icon-btn:focus-visible,.inline-icon-add:focus-visible,.control-insight:focus-visible,.nav-item:focus-visible,.logout-button:focus-visible,.sort-button:focus-visible,.generic-sort-button:focus-visible{outline-color:rgba(0,136,255,.32)!important}

.control-insight{min-height:58px;grid-template-columns:38px minmax(0,1fr) 18px;gap:13px;padding:10px 14px}
.control-insight .control-insight-label{display:flex;align-items:center;min-width:0;min-height:38px}
.control-insight #control-insight-title{font-size:14px;line-height:1.25;font-weight:700;letter-spacing:-.01em}
.control-insight .control-insight-icon{width:38px;height:38px;border-radius:11px}
.control-insight>b{justify-self:end;line-height:1}

.logout-icon{
  display:block;
  width:19px;
  min-width:19px;
  height:19px;
  flex:0 0 19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}

/* Project-specific dashboard */
.project-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px}
.project-toolbar>div{display:grid;gap:4px}
.project-toolbar>div>strong{font-size:14px}
.project-toolbar>div>span{color:var(--muted);font-size:11px}
.project-toolbar select{width:min(100%,300px);min-width:230px}
.project-kpi-grid{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:18px}
.project-kpi-grid .kpi{min-width:0}
.project-kpi-grid .kpi strong{white-space:nowrap}
.project-summary-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(340px,1fr);gap:18px;align-items:start}
.project-summary-grid>.panel{overflow:hidden}
.project-documents-panel{grid-row:span 2;align-self:stretch}
.project-suppliers-panel,.project-control-panel{grid-column:2}
.project-control-panel{min-height:320px}
.project-quick-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 20px 18px}
.project-quick-stats>div{padding:13px 14px;border:1px solid rgba(255,255,255,.8);border-radius:13px;background:rgba(255,255,255,.48)}
.project-quick-stats span{display:block;color:var(--muted);font-size:9px;font-weight:650;text-transform:uppercase;letter-spacing:.055em}
.project-quick-stats strong{display:block;margin-top:5px;font-size:19px}
@media(max-width:1250px){.project-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.project-summary-grid{grid-template-columns:1fr}.project-documents-panel{grid-row:auto}.project-suppliers-panel,.project-control-panel{grid-column:auto}}

/* Keep the dashboard cards level and give the project summary a predictable layout. */
.dashboard-grid{align-items:stretch}
.dashboard-grid>.panel{height:100%;min-width:0}
.project-summary-grid{
  grid-template-columns:minmax(0,1.65fr) minmax(360px,1fr);
  grid-template-areas:"documents suppliers" "documents control";
  align-items:stretch;
}
.project-documents-panel{grid-area:documents;grid-row:auto;min-width:0}
.project-suppliers-panel{grid-area:suppliers;grid-column:auto;min-width:0}
.project-control-panel{grid-area:control;grid-column:auto;min-width:0}
.project-documents-panel .table-wrap{max-height:640px;overflow:auto}

@media(max-width:1250px){
  .project-summary-grid{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"documents" "suppliers" "control";
  }
  .project-documents-panel .table-wrap{max-height:520px}
}
@media(max-width:760px){.project-toolbar{align-items:stretch;flex-direction:column}.project-toolbar select{width:100%;min-width:0}.project-kpi-grid{grid-template-columns:1fr}.project-quick-stats{grid-template-columns:1fr}}


/* BS identity: solid black navigation with the supplied logo. */
.sidebar{
  background:#000!important;
  background-image:none!important;
}
.sidebar-toggle,
.sidebar-toggle:hover{
  background:#000!important;
}
.sidebar .brand-logo{
  width:105px; height:41px;
  filter:brightness(0) invert(1);
}
.brand-mini{
  background:#000!important;
  color:#fff!important;
  font-size:13px!important;
  letter-spacing:-.04em;
}
.login-card>img{
  width:112px; height:48px;
  padding:10px 12px;
  background:#fff!important;
}
.splash-content>img{
  width:123px; height:45px;
}

/* Global black primary controls */
:root{--navy:#000;--navy2:#000;--button-navy:#000;--button-navy-hover:#1c1c1e;--button-soft:rgba(0,0,0,.08);--button-soft-hover:rgba(0,0,0,.13)}
.btn.primary,.page-title-icon,.inline-icon-add,.dialog-head>.icon-btn,.supplier-info-stats div{background:#000!important;border-color:#000!important;color:#fff!important}
.btn.primary:hover,.inline-icon-add:hover,.dialog-head>.icon-btn:hover{background:#1c1c1e!important;border-color:#1c1c1e!important}
.page-title-icon svg{stroke:#fff!important}

/* Longer splash progress line */
.splash-line{width:220px}


/* Admin users */
.admin-only[hidden],.admin-only-view{display:none!important}
.section-actions>div>span{display:block;margin-top:5px;color:#86868b;font-size:13px}
.admin-users-panel td strong{font-size:14px}
.check-row{display:flex!important;grid-template-columns:none!important;align-items:center;gap:9px}
.check-row input{width:18px;height:18px}
#user-supplier-wrap[hidden]{display:none!important}


/* Sidebar account */
.sidebar-bottom{margin-top:auto;display:grid;gap:7px}
.sidebar-admin-nav{display:grid;gap:5px;padding-top:10px;border-top:1px solid rgba(255,255,255,.12)}
.sidebar-user{width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.07);color:#fff;font:inherit;text-align:left;cursor:pointer}
.sidebar-user:hover{background:rgba(255,255,255,.12)}
.sidebar-user-avatar{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#fff;color:#000;font-size:13px;font-weight:800;flex:0 0 30px}
.sidebar-user-text{display:grid;min-width:0;gap:2px}.sidebar-user-text strong,.sidebar-user-text small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-user-text strong{font-size:12px}.sidebar-user-text small{color:rgba(255,255,255,.6);font-size:10px}
.app-shell.sidebar-collapsed .sidebar-admin-nav .nav-label,.app-shell.sidebar-collapsed .sidebar-user-text{display:none}.app-shell.sidebar-collapsed .sidebar-user{justify-content:center;padding:10px}.app-shell.sidebar-collapsed .sidebar-user-avatar{width:34px;height:34px;flex-basis:34px}
@media(max-width:760px){.sidebar-bottom{margin-top:10px}.sidebar-admin-nav{display:flex;overflow:auto}.sidebar-user-text{display:grid}.app-shell.sidebar-collapsed .sidebar-user-text{display:grid}}


/* Contract document mode */
.agreement-field[hidden],.vat-field[hidden],.material-section-title[hidden],.material-head[hidden],#material-lines[hidden]{display:none!important}

#view-agreements>article.panel{overflow:hidden}
#view-agreements>article.panel>.table-wrap{border-radius:23px 23px 0 0}
#view-agreements>article.panel thead th:first-child{border-top-left-radius:23px}
#view-agreements>article.panel thead th:last-child{border-top-right-radius:23px}

.user-dialog{max-width:860px}
.permissions-panel{margin-top:16px;padding:14px;border:1px solid var(--line);border-radius:16px;background:#f8fafb}
.permissions-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.permissions-head strong{display:block;font-size:13px;color:var(--text)}
.permissions-head span{display:block;margin-top:3px;color:var(--muted);font-size:11px;line-height:1.35}
.permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.permission-grid.actions{grid-template-columns:repeat(3,minmax(0,1fr))}
.permission-check{display:flex!important;align-items:center;gap:9px;margin:0!important;padding:10px 11px;border:1px solid #e1e7eb;border-radius:12px;background:#fff;color:var(--text)!important;font-size:12px!important;font-weight:700!important;cursor:pointer}
.permission-check input{width:18px!important;height:18px;flex:0 0 18px;margin:0;accent-color:#000}
.permission-check span{line-height:1.25}
@media(max-width:900px){.permission-grid,.permission-grid.actions{grid-template-columns:1fr}.user-dialog{max-width:calc(100% - 24px)}}

/* Static neutral app background: no moving gradient and no blue wash */
html,
body{
  background:#f5f5f7!important;
}
body::before,
body::after,
.app-shell::before,
.app-shell::after,
main::before,
main::after{
  content:none!important;
  display:none!important;
  animation:none!important;
  background:none!important;
}
.app-shell,
main,
.view,
.topbar{
  background:transparent!important;
}
.panel,
.kpi,
.settings-card,
.supplier-card,
.toolbar.panel.slim,
.dialog{
  background:#fff!important;
}
@keyframes ambient-bg{from{transform:none}to{transform:none}}
@keyframes background-pan{from{transform:none}to{transform:none}}

/* Permission visibility must override component display rules */
[hidden]{
  display:none!important;
}
.nav-item[hidden],
.admin-only[hidden],
button[hidden],
.sidebar [hidden]{
  display:none!important;
}

/* Projects layout: use the full page width without an empty right side */
#view-projects .project-summary-grid{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  grid-template-areas:
    "suppliers suppliers suppliers suppliers suppliers suppliers control control control control control control"
    "documents documents documents documents documents documents documents documents documents documents documents documents"!important;
  gap:18px!important;
  align-items:stretch!important;
}
#view-projects .project-suppliers-panel{grid-area:suppliers!important;grid-column:auto!important;min-width:0!important}
#view-projects .project-control-panel{grid-area:control!important;grid-column:auto!important;min-width:0!important;min-height:100%!important}
#view-projects .project-documents-panel{grid-area:documents!important;grid-column:auto!important;grid-row:auto!important;min-width:0!important}
#view-projects .project-documents-panel .table-wrap{max-height:none!important}
@media(max-width:1250px){
  #view-projects .project-summary-grid{
    grid-template-columns:1fr!important;
    grid-template-areas:"suppliers" "control" "documents"!important;
  }
}

/* Corrected Projects layout: full-width stacked panels */
#view-projects .project-summary-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-areas:
    "suppliers"
    "control"
    "documents"!important;
  gap:18px!important;
  align-items:stretch!important;
  width:100%!important;
}
#view-projects .project-suppliers-panel,
#view-projects .project-control-panel,
#view-projects .project-documents-panel{
  grid-column:1 / -1!important;
  width:100%!important;
  min-width:0!important;
}
#view-projects .project-suppliers-panel{grid-area:suppliers!important}
#view-projects .project-control-panel{grid-area:control!important;min-height:340px!important}
#view-projects .project-documents-panel{grid-area:documents!important;grid-row:auto!important}
#view-projects .project-documents-panel .table-wrap,
#view-projects .project-suppliers-panel .table-wrap{
  max-height:none!important;
  overflow:auto!important;
}

/* Projects layout fix: stack project panels at full width */
#view-projects .project-summary-grid,
main #view-projects .project-summary-grid{
  display:flex!important;
  flex-direction:column!important;
  gap:18px!important;
  width:100%!important;
  max-width:none!important;
  align-items:stretch!important;
  grid-template-columns:none!important;
  grid-template-areas:none!important;
}
#view-projects .project-summary-grid > *,
main #view-projects .project-summary-grid > *{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  flex:0 0 auto!important;
  grid-column:auto!important;
  grid-row:auto!important;
  grid-area:auto!important;
}
#view-projects .project-suppliers-panel,
#view-projects .project-control-panel,
#view-projects .project-documents-panel{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}
#view-projects .project-control-panel{min-height:340px!important}
#view-projects .project-suppliers-panel .table-wrap,
#view-projects .project-documents-panel .table-wrap{
  width:100%!important;
  max-width:100%!important;
  overflow:auto!important;
}


/* Supplier cards: show document count plus MKD and EUR totals evenly */
.supplier-card .supplier-stats{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.supplier-card .supplier-stats strong{
  white-space:nowrap;
}
@media(max-width:760px){
  .supplier-card .supplier-stats{grid-template-columns:1fr!important}
}

/* Login screen: 10% larger and clearer input boxes */
.login-card,
.login-panel,
.auth-card,
#login-screen form,
#login-form{
  font-size:110%!important;
}
#login-screen .login-card,
#login-screen .login-panel,
#login-screen .auth-card,
.login-card,
.login-panel,
.auth-card{
  transform:scale(1.10);
  transform-origin:center;
}
#login-form label{
  font-size:13.2px!important;
  font-weight:800!important;
  color:#1d1d1f!important;
}
#login-form input{
  min-height:50px!important;
  padding:14px 16px!important;
  border:2px solid #aeb4bb!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#1d1d1f!important;
  font-size:16px!important;
  font-weight:700!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 20px rgba(0,0,0,.08)!important;
}
#login-form input:focus{
  border-color:#000!important;
  box-shadow:0 0 0 4px rgba(0,0,0,.12),0 10px 24px rgba(0,0,0,.1)!important;
}
#login-form .btn,
#login-form button[type="submit"]{
  min-height:50px!important;
  font-size:14.5px!important;
}


/* Sidebar notification badges */
.nav-label{display:inline-flex!important;align-items:center;gap:8px}
.nav-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:#ff3b30;color:#fff;font-size:10px;font-weight:850;line-height:1}


/* Notification badge proportions */
.nav-badge{
  min-width:22px!important;
  width:22px!important;
  height:22px!important;
  padding:0!important;
  border-radius:50%!important;
  display:inline-grid!important;
  place-items:center!important;
  font-size:12px!important;
  font-weight:850!important;
  line-height:1!important;
  margin-left:2px!important;
}


/* Collapsed sidebar must hide labels and badges */
.app-shell.sidebar-collapsed .nav-label,
.app-shell.sidebar-collapsed .logout-label,
.app-shell.sidebar-collapsed .sidebar-user-text{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  width:0!important;
  max-width:0!important;
  overflow:hidden!important;
}
.app-shell.sidebar-collapsed .nav-badge{
  display:none!important;
}
.app-shell.sidebar-collapsed .nav-item{
  justify-content:center!important;
  gap:0!important;
}
.app-shell.sidebar-collapsed .nav-icon{
  margin:0!important;
}


/* Admin panel cards and approval highlights */
#view-admin .section-actions{
  padding:18px 22px!important;
  border:1px solid #e5e5ea!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:0 12px 32px rgba(0,0,0,.06)!important;
}
#view-admin .approval-panel,
#view-admin .admin-users-panel{
  overflow:hidden!important;
  margin-top:18px!important;
  border-radius:22px!important;
  border:1px solid #e5e5ea!important;
  background:#fff!important;
  box-shadow:0 16px 40px rgba(0,0,0,.07)!important;
}
#view-admin .approval-panel{
  border-left:5px solid #ff9500!important;
}
#view-admin .admin-users-panel{
  border-left:5px solid #34c759!important;
}
#view-admin .approval-panel .panel-head{
  padding:24px 26px 14px!important;
  border-bottom:1px solid #f0f0f2!important;
}
#view-admin .approval-panel .table-wrap,
#view-admin .admin-users-panel .table-wrap{
  border-radius:0!important;
}
#view-admin table th,
#view-admin table td{
  vertical-align:middle!important;
}
#view-admin .row-actions{
  align-items:center!important;
  gap:8px!important;
}
.approval-row-pending{
  background:#fff8e8!important;
  box-shadow:inset 5px 0 0 #ff9500!important;
}
.approval-row-pending td{
  border-bottom-color:#ffe0a3!important;
}
.approval-row-pending:hover{
  background:#fff3d6!important;
}
.approval-row-reviewed{
  opacity:.72;
}
.approval-row-reviewed:hover{
  opacity:1;
}
.approval-actions .btn{
  min-width:82px!important;
}
#view-admin .admin-users-panel::before{
  content:'Userat';
  display:block;
  padding:20px 26px 6px;
  color:#1d1d1f;
  font-size:18px;
  font-weight:850;
}
#view-admin .admin-users-panel::after{
  content:'Lista e përdoruesve, roleve dhe aksesit.';
  display:block;
  order:-1;
}


/* Admin users card real header overrides */
#view-admin .admin-users-panel .panel-head{
  padding:24px 26px 14px!important;
  border-bottom:1px solid #f0f0f2!important;
}
#view-admin .admin-users-panel::before,
#view-admin .admin-users-panel::after{
  content:none!important;
  display:none!important;
}
#view-admin .approval-row-pending .badge.neutral{
  background:#ff9500!important;
  color:#fff!important;
}


/* Supplier firm/person dividers */
#supplier-grid .supplier-divider{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:12px;
  margin:10px 0 0;
  color:#1d1d1f;
  font-size:15px;
  font-weight:850;
}
#supplier-grid .supplier-divider::after{
  content:'';
  height:1px;
  flex:1;
  background:#d1d1d6;
}
#supplier-grid .supplier-divider i{
  display:inline-grid;
  place-items:center;
  min-width:24px;
  height:24px;
  padding:0 8px;
  border-radius:999px;
  background:#f2f2f7;
  color:#6e6e73;
  font-size:12px;
  font-style:normal;
  font-weight:800;
}
#supplier-grid .supplier-divider.empty::after{display:none}



/* Login cleanup: remove local-data status row spacing and keep the form balanced */
#login-screen .login-card{
  display:grid;
  align-content:center;
  gap:0;
}
#login-screen #login-form{
  margin-bottom:0!important;
}
#login-screen .login-card .btn.primary{
  margin-top:8px!important;
}

/* Admin panel layout */
#view-admin{display:none;}
#view-admin.active{display:flex;flex-direction:column;gap:22px;}
#view-admin .section-actions{margin-bottom:0!important;}
#view-admin .approval-panel,
#view-admin .admin-users-panel,
#view-admin .admin-trash-panel{margin:0!important;overflow:hidden!important;border-radius:22px!important;}
#view-admin .panel-head{padding:24px 26px 18px;}
#view-admin .approval-panel .table-wrap,
#view-admin .admin-users-panel .table-wrap,
#view-admin .admin-trash-panel .table-wrap{border-radius:0 0 18px 18px;}
#view-admin .admin-trash-panel{order:3;}

#view-admin .panel-title-icon{display:flex;align-items:center;gap:10px;margin:0 0 4px;}
#view-admin .panel-title-symbol{width:30px;height:30px;display:inline-grid;place-items:center;flex:0 0 30px;border-radius:10px;background:#000;color:#fff;}
#view-admin .panel-title-symbol svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
#view-admin .admin-trash-panel .panel-title-symbol{background:#ff3b30;}
#view-admin .admin-users-panel .panel-title-symbol{background:#34c759;}

#invoice-selection-status{gap:10px;}
#invoice-selection-status button{min-height:28px;border:0;border-radius:8px;padding:6px 10px;background:#fff;color:#000;font-weight:750;box-shadow:0 1px 3px rgba(0,0,0,.08);cursor:pointer;}
#invoice-selection-status #print-selected-invoices{background:#000;color:#fff;}
#invoice-selection-status button:hover{transform:translateY(-1px);}

/* Material document selection bar */
#invoice-selection-status{align-items:center;gap:8px;padding:8px 10px 8px 12px;border:1px solid rgba(0,0,0,.06);border-radius:14px;background:rgba(255,255,255,.72);box-shadow:0 10px 28px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
#invoice-selection-status strong{min-width:28px;height:28px;display:inline-grid;place-items:center;border-radius:9px;background:#e8f3ff;color:#007aff;font-size:13px;font-weight:850;}
#invoice-selection-status{color:#007aff;font-size:13px;font-weight:750;}
#invoice-selection-status button{min-height:30px;border:0;border-radius:10px;padding:7px 12px;font-size:12px;font-weight:800;font-family:inherit;line-height:1;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease;}
#invoice-selection-status #print-selected-invoices{background:#000;color:#fff;box-shadow:0 6px 14px rgba(0,0,0,.18);}
#invoice-selection-status #clear-invoice-selection{background:#fff;color:#007aff;border:1px solid rgba(0,122,255,.18);box-shadow:0 3px 10px rgba(0,0,0,.06);}
#invoice-selection-status button:hover{transform:translateY(-1px);}
#invoice-selection-status button:active{transform:translateY(0);box-shadow:none;}

/* Design refresh 2026-09-18: cleaner operational layout */
:root{
  --bs-black:#000;
  --bs-ink:#1d1d1f;
  --bs-muted:#6e6e73;
  --bs-border:#d9d9df;
  --bs-soft:#f5f5f7;
  --bs-panel:#fff;
  --bs-shadow:0 14px 38px rgba(0,0,0,.075);
}
body{
  background:#f2f3f5!important;
  color:var(--bs-ink)!important;
}
main{
  padding:0 28px 36px!important;
}
.topbar{
  min-height:82px!important;
  padding:18px 0 14px!important;
  align-items:center!important;
  border-bottom:1px solid rgba(0,0,0,.055);
  margin-bottom:18px;
}
.page-title-row{
  align-items:center!important;
  gap:10px!important;
}
.topbar h1{
  font-size:28px!important;
  line-height:1.05!important;
  letter-spacing:-.02em!important;
  margin:0 0 5px!important;
}
.topbar p{
  font-size:13px!important;
  color:var(--bs-muted)!important;
}
.page-title-icon{
  width:42px!important;
  height:42px!important;
  border-radius:12px!important;
  box-shadow:none!important;
}
.topbar .btn.primary{
  min-height:44px!important;
  border-radius:12px!important;
  padding:0 18px!important;
  box-shadow:0 12px 26px rgba(0,0,0,.16)!important;
}

.sidebar{
  width:236px!important;
  padding:22px 14px!important;
  background:#000!important;
  border-right:1px solid #1c1c1e!important;
  box-shadow:8px 0 24px rgba(0,0,0,.16)!important;
}
.brand{
  padding:0 10px 22px!important;
}
.sidebar nav{
  gap:7px!important;
}
.nav-item{
  min-height:44px!important;
  padding:10px 12px!important;
  border:1px solid transparent!important;
  border-radius:12px!important;
  color:rgba(255,255,255,.66)!important;
  font-size:14px!important;
}
.nav-item .nav-icon,
.nav-item .settings-icon{
  width:24px!important;
  height:24px!important;
  flex:0 0 24px!important;
  display:inline-grid!important;
  place-items:center!important;
}
.nav-item svg{
  width:19px!important;
  height:19px!important;
}
.nav-item:hover{
  background:#141414!important;
  color:#fff!important;
}
.nav-item.active{
  background:#202020!important;
  color:#fff!important;
  border-color:#545458!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 10px 22px rgba(0,0,0,.18)!important;
}
.sidebar-admin-nav{
  padding-top:14px!important;
  margin-top:4px!important;
}
.sidebar-user{
  min-height:52px!important;
  border-radius:14px!important;
  background:#111!important;
  border-color:#2c2c2e!important;
}
.logout-btn{
  min-height:42px!important;
  padding:8px 12px!important;
}

.kpi-grid{
  gap:14px!important;
  margin-bottom:18px!important;
}
.kpi{
  min-height:118px!important;
  padding:18px!important;
  border-radius:18px!important;
  border:1px solid rgba(0,0,0,.055)!important;
  background:#fff!important;
  box-shadow:var(--bs-shadow)!important;
  align-items:center!important;
}
.kpi:hover{
  transform:translateY(-2px)!important;
}
.kpi-icon{
  width:48px!important;
  height:48px!important;
  border-radius:14px!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:850!important;
  flex:0 0 48px!important;
  box-shadow:none!important;
}
.kpi span{
  font-size:11px!important;
  letter-spacing:.035em!important;
  text-transform:uppercase!important;
  color:#7c7c82!important;
}
.kpi strong{
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:24px!important;
  line-height:1.08!important;
  letter-spacing:-.015em!important;
}
.kpi small{
  display:block!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#8e8e93!important;
}
.project-kpi-grid .kpi strong{
  font-size:23px!important;
}

.panel,
.settings-card,
.supplier-card{
  border-radius:20px!important;
  border:1px solid rgba(0,0,0,.055)!important;
  background:#fff!important;
  box-shadow:var(--bs-shadow)!important;
}
.panel-head{
  min-height:74px!important;
  padding:20px 22px 14px!important;
  border-bottom:1px solid rgba(0,0,0,.055)!important;
}
.panel-head h2,
.settings-card h2{
  font-size:18px!important;
  letter-spacing:-.01em!important;
}
.table-wrap{
  border-radius:0 0 18px 18px!important;
}
table{
  font-size:13px!important;
}
thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:#fff!important;
  color:#77777d!important;
  border-bottom:1px solid rgba(0,0,0,.08)!important;
}
td{
  padding:13px 16px!important;
}
tbody tr:hover{
  background:#fafafa!important;
}
.row-actions .icon-btn,
.supplier-card-actions .icon-btn{
  border:1px solid #e5e5ea!important;
  background:#fff!important;
  color:#1d1d1f!important;
}
.row-actions .icon-btn:hover,
.supplier-card-actions .icon-btn:hover{
  background:#f2f2f7!important;
  border-color:#c7c7cc!important;
  color:#000!important;
}
.icon-btn svg{
  width:18px!important;
  height:18px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  display:block!important;
  pointer-events:none!important;
}
.row-actions .detail-print-short{
  background:#fff!important;
  border-color:#d1d1d6!important;
  color:#1d1d1f!important;
}
.row-actions .detail-print-short:hover{
  background:#f2f2f7!important;
  color:#000!important;
}

.dialog{
  max-height:calc(100vh - 28px)!important;
  margin:14px auto!important;
  border-radius:24px!important;
  background:#fff!important;
  border:1px solid rgba(0,0,0,.08)!important;
  box-shadow:0 34px 90px rgba(0,0,0,.28)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.dialog.wide{
  max-width:1240px!important;
}
.dialog-head{
  position:sticky;
  top:0;
  z-index:3;
  min-height:78px!important;
  padding:22px 26px 16px!important;
  background:#fff!important;
  border-bottom:1px solid rgba(0,0,0,.08)!important;
}
.dialog-actions,
.detail-actions{
  position:sticky;
  bottom:0;
  z-index:3;
  margin-top:20px!important;
  padding:16px 24px!important;
  background:rgba(255,255,255,.94)!important;
  border-top:1px solid rgba(0,0,0,.08)!important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.dialog form{
  padding:22px 26px 0!important;
}
.form-grid.four{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  padding:16px!important;
  border:1px solid #e5e5ea;
  border-radius:18px;
  background:#fafafa;
}
.form-grid label,
.invoice-bottom label{
  color:#3d4a55!important;
  font-size:11px!important;
}
input,
select,
textarea{
  min-height:42px!important;
  border-color:#d1d1d6!important;
  border-radius:12px!important;
  background:#fff!important;
}
input:focus,
select:focus,
textarea:focus{
  border-color:#000!important;
  box-shadow:0 0 0 3px rgba(0,0,0,.08)!important;
}
.scan-field,
.linked-documents-field,
.invoice-bottom{
  border:1px solid #e5e5ea!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 8px 24px rgba(0,0,0,.035)!important;
}
.scan-field{
  padding:16px!important;
  margin-top:14px!important;
}
.linked-documents-field{
  padding:16px!important;
}
.linked-documents-head{
  grid-template-columns:1fr minmax(260px,360px)!important;
}
.linked-picker{
  max-height:210px!important;
}
.linked-picker-row{
  border-radius:12px!important;
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.linked-picker-row:hover{
  transform:translateY(-1px);
}
.linked-selected-chip{
  border-radius:999px!important;
  background:#000!important;
  color:#fff!important;
}
.material-section-title{
  padding:0 2px!important;
}
.material-head{
  border-radius:14px!important;
  background:#f2f2f7!important;
}
.material-line{
  gap:9px!important;
  padding:10px 0!important;
}
.invoice-bottom{
  grid-template-columns:1fr 340px!important;
  padding:16px!important;
}
.total-box{
  border-radius:16px!important;
  background:#f5f5f7!important;
}

#view-admin.active{
  gap:18px!important;
}
#view-admin .section-actions,
#view-admin .approval-panel,
#view-admin .admin-users-panel,
#view-admin .admin-trash-panel{
  border-radius:20px!important;
  box-shadow:var(--bs-shadow)!important;
}
#view-admin .approval-panel{
  border-left:4px solid #ff9500!important;
}
#view-admin .admin-users-panel{
  border-left:4px solid #34c759!important;
}
#view-admin .admin-trash-panel{
  border-left:4px solid #ff3b30!important;
}
#view-admin .panel-title-symbol{
  border-radius:11px!important;
}
.approval-row-pending{
  background:#fff8e6!important;
}

.selection-status{
  min-height:42px!important;
}
.selection-status strong{
  border-radius:10px!important;
}
.empty-state{
  color:#6e6e73!important;
}

@media(max-width:1250px){
  .form-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .invoice-bottom{grid-template-columns:1fr!important}
}
@media(max-width:760px){
  main{padding:0 14px 30px!important}
  .topbar{min-height:78px!important;margin-bottom:14px!important}
  .linked-documents-head{grid-template-columns:1fr!important}
  .form-grid.four{grid-template-columns:1fr!important}
  .dialog{margin:0!important;border-radius:0!important}
  thead th{position:static}
}

/* Final collapsed sidebar layout guard */
.app-shell.sidebar-collapsed{
  grid-template-columns:92px minmax(0,1fr)!important;
}
.app-shell.sidebar-collapsed .sidebar{
  width:92px!important;
  padding:22px 10px!important;
  overflow:hidden!important;
}
.app-shell.sidebar-collapsed main{
  grid-column:2!important;
  min-width:0!important;
}
.app-shell.sidebar-collapsed .brand{
  justify-content:center!important;
  padding:0 0 22px!important;
}
.app-shell.sidebar-collapsed .brand-logo{
  width:54px!important;
  height:auto!important;
  display:block!important;
  transform:none!important;
}
.app-shell.sidebar-collapsed .nav-item{
  width:100%!important;
  justify-content:center!important;
  padding:10px!important;
}
.app-shell.sidebar-collapsed .sidebar-bottom{
  align-items:center!important;
}
.app-shell.sidebar-collapsed .sidebar-admin-nav{
  align-items:stretch!important;
}
.app-shell.sidebar-collapsed .sidebar-user{
  justify-content:center!important;
  padding:10px!important;
}
.app-shell.sidebar-collapsed .logout-button{
  justify-content:center!important;
  padding:10px!important;
}
.app-shell.sidebar-collapsed .sidebar-toggle{
  position:fixed!important;
  left:92px!important;
  right:auto!important;
  top:0!important;
  bottom:0!important;
  z-index:100!important;
  width:18px!important;
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
}
.app-shell:not(.sidebar-collapsed) .sidebar-toggle{
  position:fixed!important;
  left:236px!important;
  right:auto!important;
  top:0!important;
  bottom:0!important;
  z-index:100!important;
  width:18px!important;
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
}
.app-shell.sidebar-collapsed .sidebar-toggle:hover{
  left:92px!important;
  width:22px!important;
}
.app-shell:not(.sidebar-collapsed) .sidebar-toggle:hover{
  left:236px!important;
  width:22px!important;
}
@media(max-width:760px){
  .app-shell.sidebar-collapsed{
    display:block!important;
  }
  .app-shell.sidebar-collapsed .sidebar{
    position:static!important;
    width:auto!important;
    padding:14px!important;
    overflow:visible!important;
  }
  .app-shell.sidebar-collapsed .sidebar-toggle,
  .app-shell:not(.sidebar-collapsed) .sidebar-toggle{
    display:none!important;
  }
}

/* Collapsed sidebar brand: keep only the centered main logo. */
.app-shell.sidebar-collapsed .brand{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  padding:0 0 22px!important;
}
.app-shell.sidebar-collapsed .brand-mini{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  width:0!important;
  height:0!important;
  overflow:hidden!important;
}
.app-shell.sidebar-collapsed .brand-logo{
  display:block!important;
  width:58px!important;
  max-width:58px!important;
  height:auto!important;
  margin:0 auto!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
}

/* Agreement access screen and admin code card */
.agreement-access-modal.open{display:grid!important;place-items:center;z-index:1200}
.agreement-access-modal .modal-backdrop{background:rgba(0,0,0,.52);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.agreement-access-card{position:relative;z-index:1;width:min(100% - 32px,430px);margin:0;padding:34px!important;border-radius:22px!important;background:#fff!important;box-shadow:0 28px 90px rgba(0,0,0,.24)!important}
.agreement-access-card .login-heading h1{margin:8px 0 6px;font-size:25px;letter-spacing:-.025em;text-align:center}
.agreement-access-card .login-heading p{text-align:center;color:#6f7e8c;line-height:1.45}
.agreement-access-card form{display:grid;gap:15px}
.agreement-access-card label{display:grid;gap:7px;color:#50616e;font-size:11px;font-weight:700}
.agreement-access-card input{height:47px;border:1px solid rgba(60,60,67,.2);border-radius:12px;padding:0 14px;font-size:18px;font-weight:750;text-align:center;letter-spacing:.18em;background:#f8fafb;outline:none}
.agreement-access-card input:focus{border-color:#000;box-shadow:0 0 0 4px rgba(0,0,0,.08);background:#fff}
.agreement-access-actions{padding:0;margin-top:2px;border:0;display:grid;grid-template-columns:1fr 1.35fr;gap:10px}
.admin-security-panel{border-left:4px solid #000!important;overflow:hidden}
.admin-security-form{display:grid;grid-template-columns:minmax(220px,320px) auto;gap:12px;align-items:end;padding:0 22px 22px}
.admin-security-form label{display:grid;gap:7px;color:#50616e;font-size:11px;font-weight:700}
.admin-security-form input{height:42px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font:inherit;background:#fff}
@media(max-width:760px){.admin-security-form{grid-template-columns:1fr}.agreement-access-actions{grid-template-columns:1fr}}

/* KPI numbers: static text, no digit rolling animation. */
.kpi strong[id^="kpi-"]{
  display:block!important;
  min-height:0!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  overflow:visible!important;
}
.kpi strong .slot-digit,
.kpi strong .slot-reel,
.kpi strong .slot-symbol{
  display:contents!important;
  animation:none!important;
  transform:none!important;
  filter:none!important;
}

/* Safety: hidden overlays must never block clicks. */
.modal:not(.open),
.login-screen.hide,
.splash-screen.hide{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
.modal[aria-hidden="true"]:not(.open){
  display:none!important;
  pointer-events:none!important;
}

/* Keep modal content above its backdrop so buttons, cards and document links remain clickable. */
.modal-backdrop{
  z-index:0;
}
.modal .dialog{
  z-index:1;
}

/* Backdrops are visual only; modal controls handle closing so content never becomes unclickable. */
.modal-backdrop{
  pointer-events:none!important;
}
.modal .dialog{
  position:relative;
  z-index:2!important;
  pointer-events:auto!important;
}

/* Only the visible dialog receives modal clicks; the full-screen modal layer must not cover links inside it. */
.modal.open{
  pointer-events:none!important;
}
.modal.open .dialog,
.modal.open .dialog *{
  pointer-events:auto;
}

/* Locked agreement navigation item. */
.nav-item-locked .nav-label{
  flex:1;
}
.nav-lock{
  margin-left:auto;
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  color:currentColor;
  opacity:.82;
}
.nav-lock svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.app-shell.sidebar-collapsed .nav-lock{
  display:none;
}

/* Agreement access window must remain fully clickable even when generic modal layers are non-interactive. */
.agreement-access-modal.open{
  pointer-events:auto!important;
}
.agreement-access-modal.open .agreement-access-card,
.agreement-access-modal.open .agreement-access-card *{
  pointer-events:auto!important;
}
.agreement-access-modal.open .modal-backdrop{
  pointer-events:auto!important;
}

/* Cleaner spacing for the agreement security code field in Admin. */
.admin-security-panel .panel-head{
  padding-bottom:18px!important;
  border-bottom:1px solid rgba(60,60,67,.10)!important;
}
.admin-security-form{
  padding:18px 22px 24px!important;
  align-items:end!important;
}
.admin-security-form label{
  gap:10px!important;
}
.admin-security-form input{
  height:52px!important;
  border-radius:14px!important;
  padding:0 16px!important;
  box-shadow:0 10px 24px rgba(15,23,42,.04)!important;
}

/* Keep the agreement security save button compact and aligned with the code input. */
.admin-security-form{
  grid-template-columns:minmax(260px,420px) auto!important;
  justify-content:start!important;
  column-gap:16px!important;
}
.admin-security-form #save-agreement-code{
  width:auto!important;
  min-width:150px!important;
  height:52px!important;
  padding:0 22px!important;
  align-self:end!important;
  justify-self:start!important;
}
@media(max-width:760px){
  .admin-security-form{
    grid-template-columns:1fr!important;
  }
  .admin-security-form #save-agreement-code{
    width:100%!important;
    justify-self:stretch!important;
  }
}

/* Language selectors available to every role. */
.language-field{
  display:grid;
  gap:7px;
}
.language-select{
  width:100%;
  min-height:42px;
  border:1px solid rgba(60,60,67,.18);
  border-radius:12px;
  padding:0 12px;
  background:#fff;
  color:#1d1d1f;
  font:inherit;
  font-weight:650;
}
.sidebar-language{
  display:grid;
  gap:6px;
  padding:10px 12px;
  margin-bottom:8px;
  border-radius:12px;
  color:rgba(255,255,255,.66);
  font-size:11px;
  font-weight:700;
}
.sidebar-language select{
  min-height:36px;
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#fff;
}
.sidebar-language option{
  color:#111;
}
.app-shell.sidebar-collapsed .sidebar-language span,
.app-shell.sidebar-collapsed .sidebar-language select{
  display:none;
}

/* Compact language switcher in the sidebar. */
.sidebar-language{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin:6px 0 10px!important;
  padding:8px 10px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.055)!important;
  color:rgba(255,255,255,.68)!important;
  font-size:11px!important;
  line-height:1!important;
}
.sidebar-language span{
  white-space:nowrap!important;
}
.sidebar-language select{
  width:74px!important;
  min-height:30px!important;
  height:30px!important;
  padding:0 26px 0 10px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:999px!important;
  background:#151515!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:800!important;
  text-align:center!important;
  box-shadow:none!important;
}
.sidebar-language select:focus{
  outline:2px solid rgba(255,255,255,.26)!important;
  outline-offset:2px!important;
}
.app-shell.sidebar-collapsed .sidebar-language{
  justify-content:center!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.app-shell.sidebar-collapsed .sidebar-language span{
  display:none!important;
}
.app-shell.sidebar-collapsed .sidebar-language select{
  display:block!important;
  width:44px!important;
  min-width:44px!important;
  padding:0 4px!important;
  font-size:10px!important;
  appearance:none!important;
}

/* Admin page alignment: keep every panel on the same content line. */
#view-admin.active{
  align-items:stretch!important;
}
#view-admin > .section-actions,
#view-admin > .panel{
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  box-sizing:border-box!important;
}
#view-admin > .panel{
  position:relative!important;
  border-left-width:5px!important;
  border-left-style:solid!important;
}
#view-admin > .admin-security-panel{border-left-color:#000!important;}
#view-admin > .approval-panel{border-left-color:#ff9500!important;}
#view-admin > .admin-users-panel{border-left-color:#34c759!important;}
#view-admin > .admin-audit-panel{border-left-color:#0a84ff!important;}
#view-admin > .admin-trash-panel{border-left-color:#ff3b30!important;}
#view-admin .section-actions,
#view-admin .panel-head{
  padding-left:26px!important;
  padding-right:26px!important;
}
#view-admin .panel-head{
  gap:16px!important;
  min-width:0!important;
}
#view-admin .panel-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  flex-wrap:wrap!important;
}
#view-admin .panel-head > div,
#view-admin .section-actions > div{
  min-width:0!important;
}
#view-admin .panel-title-icon{
  display:grid!important;
  grid-template-columns:30px minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:10px!important;
}
#view-admin .panel-title-icon > span:last-child{
  min-width:0!important;
  overflow-wrap:anywhere!important;
}
#view-admin .panel-head p,
#view-admin .section-actions span{
  overflow-wrap:anywhere!important;
}
#view-admin .table-wrap{
  width:100%!important;
}
#view-admin table{
  min-width:720px!important;
}
#view-admin th:first-child,
#view-admin td:first-child{
  padding-left:26px!important;
}
#view-admin .admin-security-form{
  padding-left:26px!important;
  padding-right:26px!important;
}

.admin-tabs{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  padding:8px!important;
  border:1px solid rgba(0,0,0,.07)!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 10px 28px rgba(0,0,0,.055)!important;
}
.admin-tab{
  min-height:38px!important;
  border:0!important;
  border-radius:12px!important;
  padding:0 15px!important;
  background:transparent!important;
  color:#6e6e73!important;
  font:inherit!important;
  font-size:13px!important;
  font-weight:800!important;
  cursor:pointer!important;
}
.admin-tab:hover{
  background:#f2f2f7!important;
  color:#1d1d1f!important;
}
.admin-tab.active{
  background:#000!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(0,0,0,.16)!important;
}
#view-admin[data-admin-tab="requests"] > .admin-users-panel,
#view-admin[data-admin-tab="requests"] > .admin-audit-panel,
#view-admin[data-admin-tab="requests"] > .admin-trash-panel,
#view-admin[data-admin-tab="requests"] > .admin-security-panel,
#view-admin[data-admin-tab="users"] > .approval-panel,
#view-admin[data-admin-tab="users"] > .admin-audit-panel,
#view-admin[data-admin-tab="users"] > .admin-trash-panel,
#view-admin[data-admin-tab="users"] > .admin-security-panel,
#view-admin[data-admin-tab="audit"] > .approval-panel,
#view-admin[data-admin-tab="audit"] > .admin-users-panel,
#view-admin[data-admin-tab="audit"] > .admin-trash-panel,
#view-admin[data-admin-tab="audit"] > .admin-security-panel,
#view-admin[data-admin-tab="trash"] > .approval-panel,
#view-admin[data-admin-tab="trash"] > .admin-users-panel,
#view-admin[data-admin-tab="trash"] > .admin-audit-panel,
#view-admin[data-admin-tab="trash"] > .admin-security-panel,
#view-admin[data-admin-tab="security"] > .approval-panel,
#view-admin[data-admin-tab="security"] > .admin-users-panel,
#view-admin[data-admin-tab="security"] > .admin-audit-panel,
#view-admin[data-admin-tab="security"] > .admin-trash-panel{
  display:none!important;
}
#view-admin .admin-audit-panel .panel-title-symbol{
  background:#0a84ff!important;
}
.audit-detail-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.audit-detail-list span{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 8px;
  border-radius:999px;
  background:#f2f2f7;
  color:#3a3a3c;
  font-size:11px;
  font-weight:750;
}

.confirm-modal.open{
  display:grid!important;
  place-items:center!important;
  z-index:1400!important;
  pointer-events:auto!important;
}
.confirm-modal .modal-backdrop{
  pointer-events:auto!important;
  background:rgba(0,0,0,.42)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}
.confirm-dialog{
  width:min(520px,calc(100vw - 32px))!important;
  max-width:520px!important;
  margin:0!important;
  overflow:hidden!important;
  pointer-events:auto!important;
}
.confirm-dialog .dialog-head{
  align-items:flex-start!important;
}
.confirm-dialog #confirm-message{
  max-width:390px!important;
  color:#6e6e73!important;
  font-size:14px!important;
  line-height:1.45!important;
}
.confirm-actions{
  margin:0!important;
  padding:18px 26px 24px!important;
  justify-content:flex-end!important;
}
.confirm-actions .btn{
  min-width:120px!important;
}

/* Consistent clear buttons */
.btn.clear-action,
#clear-approval-requests,
#clear-audit-log,
#clear-invoice-selection{
  background:#fff5f5!important;
  color:#ff3b30!important;
  border:1px solid rgba(255,59,48,.28)!important;
  box-shadow:0 8px 22px rgba(255,59,48,.08), inset 0 1px 0 rgba(255,255,255,.9)!important;
}
.btn.clear-action:hover,
#clear-approval-requests:hover,
#clear-audit-log:hover,
#clear-invoice-selection:hover{
  background:#ffecec!important;
  border-color:rgba(255,59,48,.42)!important;
  color:#e91f24!important;
}

/* Reports, global search, notifications and admin polish */
.topbar-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.global-search{height:44px;min-width:260px;display:flex;align-items:center;gap:9px;padding:0 14px;border:1px solid rgba(0,0,0,.08);border-radius:14px;background:rgba(255,255,255,.78);box-shadow:0 8px 24px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.9)}
.global-search input{border:0!important;background:transparent!important;outline:0;width:100%;min-width:0;font:inherit;font-weight:650;color:#1d1d1f}
.notification-button{position:relative;width:44px;height:44px;border:1px solid rgba(0,0,0,.08);border-radius:14px;background:#fff;color:#1d1d1f;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.notification-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.notification-button span{position:absolute;right:-5px;top:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#ff3b30;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:850;border:2px solid #fff}
.reports-toolbar,.audit-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.reports-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.reports-grid .report-wide{grid-column:1/-1}.reports-kpi-grid{grid-template-columns:repeat(5,minmax(180px,1fr))}
.audit-filters{padding:0 20px 16px}.audit-filters input,.audit-filters select{height:40px;border:1px solid rgba(60,60,67,.16);border-radius:12px;background:#fff;padding:0 12px;font:inherit;font-weight:650;color:#1d1d1f}
.notifications-list{display:grid;gap:10px;padding:0 26px 20px}.notification-row{display:grid;gap:4px;padding:12px 14px;border-radius:14px;border:1px solid rgba(0,0,0,.07);background:#f7f8fa}.notification-row.unread{background:#eef7ff;border-color:rgba(0,122,255,.18)}.notification-row strong{font-size:14px}.notification-row span,.notification-row small{color:#6e6e73;font-size:12px}.notification-row.read{opacity:.72}
.admin-tabs{padding:6px;background:rgba(255,255,255,.7);border:1px solid rgba(0,0,0,.06);border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.05);width:max-content;max-width:100%;overflow:auto}.admin-tab{border-radius:12px!important}.admin-tab.active{background:#000!important;color:#fff!important}
.admin-trash-panel .restore-trash-document{background:#ecfdf3!important;color:#15803d!important;border-color:#bbf7d0!important}.admin-trash-panel .row-actions{gap:8px;flex-wrap:wrap}.backup-note{display:block;color:#6e6e73;margin-top:4px;font-weight:650}
.detail-dialog .detail-content{display:grid;gap:18px}.detail-dialog .detail-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}.detail-dialog .detail-field{border:1px solid rgba(0,0,0,.07);border-radius:14px;background:#fff;padding:13px 14px}.detail-section-title{display:flex;align-items:center;gap:8px}.detail-section-title:before{content:"";width:8px;height:8px;border-radius:50%;background:#0a84ff;display:inline-block}
@media(max-width:1100px){.reports-kpi-grid{grid-template-columns:repeat(2,1fr)}.reports-grid{grid-template-columns:1fr}.global-search{min-width:180px}.topbar-actions{justify-content:flex-start}}

/* Fix spacing and global search icon */
.global-search{
  min-width:300px!important;
  height:46px!important;
  padding:0 16px!important;
  gap:11px!important;
  overflow:hidden!important;
}
.global-search .search-icon{
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
  display:block!important;
  background:transparent!important;
  border-radius:0!important;
  color:#8e8e93!important;
  stroke:#8e8e93!important;
  fill:none!important;
  box-shadow:none!important;
}
.global-search .search-icon circle,
.global-search .search-icon path{
  fill:none!important;
  stroke:#8e8e93!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.global-search input::placeholder{color:#8e8e93!important;font-weight:650!important;}
.notifications-dialog .dialog-head{padding-bottom:20px!important;}
.notifications-dialog .dialog-actions{padding:20px 26px 26px!important;border-top:1px solid rgba(0,0,0,.07)!important;justify-content:flex-end!important;}
.notifications-list{padding:0 26px 26px!important;gap:12px!important;}
.notification-row{padding:15px 16px!important;border-radius:16px!important;}
.notification-row strong{font-size:15px!important;line-height:1.25!important;}
.notification-row span{line-height:1.35!important;}
.audit-filters{
  display:grid!important;
  grid-template-columns:minmax(220px,1.2fr) minmax(190px,.8fr) minmax(190px,.8fr)!important;
  gap:12px!important;
  padding:0 22px 18px!important;
  border-bottom:1px solid rgba(0,0,0,.06)!important;
}
.audit-filters input,.audit-filters select{
  width:100%!important;
  height:44px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.88)!important;
}
.admin-audit-panel .table-wrap{padding-top:4px!important;}
@media(max-width:900px){.audit-filters{grid-template-columns:1fr!important}.global-search{min-width:220px!important;width:100%!important}}

/* Notifications modal spacing refinement */
.notifications-dialog{
  overflow:hidden!important;
}
.notifications-dialog .dialog-head{
  padding:26px 30px 22px!important;
  margin-bottom:0!important;
  border-bottom:1px solid rgba(0,0,0,.08)!important;
}
.notifications-list{
  padding:22px 30px 30px!important;
  margin:0!important;
  gap:14px!important;
  min-height:118px!important;
}
.notification-row{
  margin:0!important;
  padding:16px 18px!important;
}
.notifications-dialog .dialog-actions{
  padding:22px 30px 28px!important;
}

/* Audit filters spacing from divider */
.admin-audit-panel .audit-filters{
  padding:18px 22px 20px!important;
  margin-top:0!important;
  border-top:1px solid rgba(0,0,0,.04)!important;
  border-bottom:1px solid rgba(0,0,0,.06)!important;
}
.admin-audit-panel .panel-head{
  padding-bottom:18px!important;
}
.admin-audit-panel .audit-filters input,
.admin-audit-panel .audit-filters select{
  margin:0!important;
}

/* Material documents toolbar layout */
#view-invoices .toolbar{
  display:grid!important;
  grid-template-columns:minmax(360px,1.5fr) repeat(7,minmax(170px,1fr))!important;
  align-items:center!important;
  gap:12px!important;
  overflow:visible!important;
}
#view-invoices .toolbar .search{
  min-width:360px!important;
  width:100%!important;
}
#view-invoices .toolbar select{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
}
#view-invoices #invoice-selection-status{
  grid-column:1/-1!important;
  justify-self:end!important;
}
@media(max-width:1700px){
  #view-invoices .toolbar{grid-template-columns:minmax(360px,1.2fr) repeat(3,minmax(190px,1fr))!important;}
}
@media(max-width:1000px){
  #view-invoices .toolbar{grid-template-columns:1fr!important;}
  #view-invoices .toolbar .search{min-width:0!important;}
}

/* Compact single-line material filters */
#view-invoices .toolbar.panel.slim{
  display:flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:10px!important;
  padding:14px 16px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  min-height:auto!important;
}
#view-invoices .toolbar.panel.slim .search{
  flex:1 0 430px!important;
  min-width:430px!important;
  max-width:560px!important;
  width:auto!important;
}
#view-invoices .toolbar.panel.slim select{
  flex:0 0 168px!important;
  width:168px!important;
  min-width:168px!important;
  max-width:168px!important;
}
#view-invoices .toolbar.panel.slim #invoice-supplier-filter,
#view-invoices .toolbar.panel.slim #invoice-project-filter{
  flex-basis:185px!important;
  width:185px!important;
  min-width:185px!important;
  max-width:185px!important;
}
#view-invoices .toolbar.panel.slim #document-type-filter,
#view-invoices .toolbar.panel.slim #invoice-status-filter{
  flex-basis:190px!important;
  width:190px!important;
  min-width:190px!important;
  max-width:190px!important;
}
#view-invoices .toolbar.panel.slim #invoice-scan-filter{
  flex-basis:165px!important;
  width:165px!important;
  min-width:165px!important;
  max-width:165px!important;
}
#view-invoices #invoice-selection-status{
  flex:0 0 auto!important;
  margin-left:auto!important;
  grid-column:auto!important;
  justify-self:auto!important;
}
@media(max-width:1400px){
  #view-invoices .toolbar.panel.slim{flex-wrap:wrap!important;overflow-x:visible!important;}
  #view-invoices .toolbar.panel.slim .search{flex:1 1 100%!important;max-width:none!important;min-width:0!important;}
  #view-invoices .toolbar.panel.slim select{flex:1 1 190px!important;width:auto!important;max-width:none!important;}
  #view-invoices #invoice-selection-status{margin-left:0!important;}
}

/* Design refresh 2026-09-22 */
:root{
  --bs-bg:#f4f5f7;
  --bs-surface:#ffffff;
  --bs-ink:#1d1d1f;
  --bs-muted:#74777f;
  --bs-line:rgba(0,0,0,.075);
  --bs-blue:#0a84ff;
  --bs-green:#34c759;
  --bs-orange:#ff9f0a;
  --bs-red:#ff3b30;
  --bs-radius-lg:24px;
  --bs-radius-md:16px;
  --bs-shadow:0 18px 45px rgba(20,25,35,.08);
  --bs-soft-shadow:0 8px 24px rgba(20,25,35,.06);
}
body{background:linear-gradient(180deg,#f7f8fa 0%,#eef0f4 100%)!important;color:var(--bs-ink)!important;}
main{padding:0 32px 46px!important;}
.topbar{min-height:104px!important;margin-bottom:22px!important;border-bottom:1px solid rgba(0,0,0,.055)!important;}
.topbar h1{font-size:31px!important;letter-spacing:-.04em!important;}
.topbar p{font-size:13px!important;color:var(--bs-muted)!important;}
.topbar-actions{gap:10px!important;align-items:center!important;}
.topbar .btn.primary{height:46px!important;border-radius:14px!important;padding:0 20px!important;box-shadow:0 14px 28px rgba(0,0,0,.16)!important;}
.global-search{height:46px!important;min-width:280px!important;max-width:360px!important;border-radius:15px!important;background:#fff!important;border:1px solid var(--bs-line)!important;box-shadow:var(--bs-soft-shadow)!important;}
.notification-button{height:46px!important;width:46px!important;border-radius:15px!important;background:#fff!important;border:1px solid var(--bs-line)!important;box-shadow:var(--bs-soft-shadow)!important;}
.panel,.kpi,.settings-card,.toolbar.panel.slim{border-radius:var(--bs-radius-lg)!important;border:1px solid rgba(255,255,255,.72)!important;background:rgba(255,255,255,.86)!important;box-shadow:var(--bs-shadow)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
.panel-head{padding:24px 26px 18px!important;gap:16px!important;}
.panel-head h2,.settings-card h2{font-size:18px!important;letter-spacing:-.025em!important;}
.panel-head p,.section-title p,.settings-card>p{font-size:13px!important;color:var(--bs-muted)!important;line-height:1.45!important;}
.kpi-grid{gap:16px!important;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;}
.kpi{min-height:112px!important;padding:22px!important;gap:16px!important;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease!important;}
.kpi:hover{transform:translateY(-2px)!important;border-color:rgba(10,132,255,.22)!important;box-shadow:0 22px 50px rgba(20,25,35,.11)!important;}
.kpi-icon{width:52px!important;height:52px!important;border-radius:16px!important;font-size:16px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.45)!important;}
.kpi span{font-size:10px!important;letter-spacing:.085em!important;color:#7b7f87!important;}
.kpi strong{font-size:27px!important;line-height:1.12!important;letter-spacing:-.035em!important;}
.kpi small{font-size:12px!important;color:#8c9099!important;}
.btn,.link-btn,.icon-btn,.inline-icon-add{border-radius:13px!important;font-weight:750!important;}
.btn{height:42px!important;min-height:42px!important;padding:0 17px!important;}
.btn.primary{background:#000!important;border-color:#000!important;color:#fff!important;box-shadow:0 11px 24px rgba(0,0,0,.16)!important;}
.btn.secondary,.link-btn{background:#fff!important;border:1px solid var(--bs-line)!important;color:#111!important;box-shadow:var(--bs-soft-shadow)!important;}
.btn.ghost{background:#fff!important;border:1px solid var(--bs-line)!important;color:#5e6169!important;}
.btn.danger-outline{background:#fff5f5!important;border:1px solid rgba(255,59,48,.28)!important;color:var(--bs-red)!important;box-shadow:0 8px 20px rgba(255,59,48,.08)!important;}
.table-wrap{border-radius:0 0 var(--bs-radius-lg) var(--bs-radius-lg)!important;}
table{font-size:13px!important;} th{background:#fafbfc!important;color:#747985!important;font-size:10px!important;letter-spacing:.085em!important;padding:13px 18px!important;border-bottom:1px solid var(--bs-line)!important;} td{padding:16px 18px!important;border-bottom:1px solid rgba(0,0,0,.055)!important;} tbody tr:hover{background:rgba(10,132,255,.035)!important;}
.row-actions{gap:8px!important;}.icon-btn{background:#fff!important;border:1px solid var(--bs-line)!important;color:#303236!important;box-shadow:0 5px 14px rgba(0,0,0,.05)!important;}.icon-btn:hover{background:#f5f6f8!important;}
.badge,.document-badge,.source-chip{min-height:24px!important;padding:5px 10px!important;border-radius:999px!important;font-weight:800!important;font-size:11px!important;}
.badge.ok{background:#e8f8ee!important;color:#15803d!important}.badge.warn{background:#fff3e1!important;color:#b45309!important}.badge.neutral{background:#f0f1f4!important;color:#5f6570!important}.document-badge{background:#eef6ff!important;color:#006edb!important}.document-badge.delivery{background:#fff2df!important;color:#b45309!important;}
.toolbar.panel.slim,.section-actions{gap:12px!important;margin-bottom:18px!important;}.toolbar.panel.slim{padding:14px!important;}
.search,input,select,textarea{border-radius:15px!important;} .search{height:46px!important;border:1px solid var(--bs-line)!important;background:#fff!important;box-shadow:0 6px 18px rgba(20,25,35,.045)!important;}
#view-invoices .toolbar.panel.slim{display:grid!important;grid-template-columns:minmax(360px,1.4fr) repeat(4,minmax(150px,.7fr))!important;gap:12px!important;overflow:visible!important;}
#view-invoices .toolbar.panel.slim .search{grid-column:span 2;min-width:0!important;max-width:none!important;width:100%!important;}
#view-invoices .toolbar.panel.slim select{width:100%!important;min-width:0!important;max-width:none!important;flex:auto!important;}
#view-invoices #invoice-selection-status{grid-column:1/-1!important;justify-self:end!important;margin-top:4px!important;}
.reports-toolbar,.audit-filters{gap:12px!important;}.reports-grid{gap:18px!important;}.reports-kpi-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important;}
.empty-state{padding:54px 24px!important;border-radius:0 0 var(--bs-radius-lg) var(--bs-radius-lg)!important;background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(245,247,250,.9))!important;}.empty-state strong{font-size:18px!important;letter-spacing:-.02em!important}.empty-state span{font-size:13px!important;color:var(--bs-muted)!important;}
.dialog{border-radius:28px!important;background:rgba(255,255,255,.94)!important;box-shadow:0 28px 90px rgba(0,0,0,.22)!important;overflow:hidden!important;}.dialog-head{padding:26px 30px 20px!important;border-bottom:1px solid rgba(0,0,0,.07)!important;}.dialog-head h2{font-size:26px!important;letter-spacing:-.045em!important;}.dialog form,.detail-content{padding:26px 30px!important;}.dialog-actions{padding:22px 30px 28px!important;border-top:1px solid rgba(0,0,0,.07)!important;gap:12px!important;}
.detail-dialog .detail-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important;}.detail-dialog .detail-field{padding:15px 16px!important;border-radius:16px!important;background:#fff!important;box-shadow:0 7px 18px rgba(0,0,0,.04)!important;}.detail-field span{text-transform:uppercase!important;font-size:10px!important;letter-spacing:.08em!important;color:#7d828b!important}.detail-field strong{font-size:15px!important;}
.sidebar{border-right:1px solid rgba(255,255,255,.12)!important;}.brand{margin-bottom:22px!important;}.brand-logo{max-width:150px!important;}.nav-item{min-height:48px!important;border-radius:14px!important;margin:3px 12px!important;padding:12px 16px!important;}.nav-item.active{background:rgba(255,255,255,.14)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 10px 28px rgba(0,0,0,.25)!important;}.nav-icon svg{stroke-width:1.9!important;}.sidebar-user{border-radius:16px!important;margin:8px 12px!important;}
.notifications-dialog{position:fixed!important;right:30px!important;top:86px!important;width:min(430px,calc(100vw - 40px))!important;margin:0!important;border-radius:24px!important;}.notifications-dialog .dialog-head{padding:22px 24px 16px!important}.notifications-list{padding:16px 24px 20px!important;max-height:420px!important;overflow:auto!important}.notification-row{border-radius:16px!important;background:#fff!important;box-shadow:0 7px 18px rgba(0,0,0,.045)!important}.notification-row.unread{background:#f0f8ff!important;border-color:rgba(10,132,255,.22)!important}.notifications-dialog .dialog-actions{padding:16px 24px 22px!important;}
#notifications-modal.open{display:block!important;pointer-events:none!important;background:transparent!important}.notifications-dialog{pointer-events:auto!important}#notifications-modal .modal-backdrop{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
.login-screen{background:radial-gradient(circle at 50% 10%,#1b1b1f 0%,#050506 48%,#000 100%)!important}.login-card{border-radius:28px!important;padding:38px!important;box-shadow:0 32px 100px rgba(0,0,0,.36)!important}.login-card input,.login-card select{height:48px!important;background:#fff!important;border:1px solid rgba(0,0,0,.12)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(0,0,0,.05)!important}.login-card .btn{height:48px!important;border-radius:16px!important;}
@media print{.dialog,.panel,.kpi{box-shadow:none!important;border-color:#d8dbe0!important}.btn,.topbar,.sidebar,.notification-button,.global-search{display:none!important}body{background:#fff!important}}
@media(max-width:1280px){main{padding-left:24px!important;padding-right:24px!important}.topbar{align-items:flex-start!important;flex-direction:column!important}.topbar-actions{width:100%!important}.global-search{max-width:none!important;flex:1!important}#view-invoices .toolbar.panel.slim{grid-template-columns:1fr 1fr!important}#view-invoices .toolbar.panel.slim .search{grid-column:1/-1!important}}
@media(max-width:820px){main{padding-left:16px!important;padding-right:16px!important}.kpi-grid,.dashboard-grid,.reports-grid,.settings-grid,.project-summary-grid{grid-template-columns:1fr!important}.topbar-actions{flex-direction:column!important;align-items:stretch!important}.global-search,.topbar .btn.primary,.notification-button{width:100%!important;max-width:none!important}.notification-button{display:flex!important}.notifications-dialog{left:16px!important;right:16px!important;top:76px!important;width:auto!important}#view-invoices .toolbar.panel.slim{grid-template-columns:1fr!important}.dialog{border-radius:22px!important}.dialog-head,.dialog form,.detail-content,.dialog-actions{padding-left:20px!important;padding-right:20px!important}}

/* Keep regular modals centered, make only notifications a dropdown */
#notifications-modal{display:none!important;position:fixed!important;inset:0!important;z-index:1400!important;}
#notifications-modal.open{display:block!important;pointer-events:none!important;}
#notifications-modal .modal-backdrop{pointer-events:auto!important;background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
#notifications-modal .notifications-dialog{pointer-events:auto!important;}

/* Sidebar final layout repair */
.app-shell{
  grid-template-columns:300px minmax(0,1fr)!important;
}
.sidebar{
  width:300px!important;
  padding:24px 16px 18px!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  background:#000!important;
}
.sidebar .brand{
  min-height:86px!important;
  margin:0 0 18px!important;
  padding:0 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.sidebar .brand-logo{
  display:block!important;
  width:150px!important;
  max-width:150px!important;
  height:auto!important;
  object-fit:contain!important;
}
.sidebar .brand-mini{display:none!important;}
.sidebar nav#nav,
.sidebar .sidebar-admin-nav{
  display:grid!important;
  gap:8px!important;
  width:100%!important;
}
.sidebar .nav-item{
  width:100%!important;
  min-height:54px!important;
  margin:0!important;
  padding:0 18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:14px!important;
  border-radius:16px!important;
  color:rgba(255,255,255,.72)!important;
  overflow:hidden!important;
}
.sidebar .nav-item .nav-icon,
.sidebar .nav-item .settings-icon{
  width:24px!important;
  height:24px!important;
  flex:0 0 24px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  color:currentColor!important;
}
.sidebar .nav-item .nav-icon svg{
  width:21px!important;
  height:21px!important;
}
.sidebar .nav-label{
  display:block!important;
  width:auto!important;
  min-width:0!important;
  flex:1 1 auto!important;
  text-align:left!important;
  white-space:normal!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  line-height:1.18!important;
  font-size:16px!important;
}
.sidebar .nav-lock{
  margin-left:auto!important;
  flex:0 0 18px!important;
  width:18px!important;
  display:grid!important;
  place-items:center!important;
}
.sidebar-bottom{
  margin-top:auto!important;
  padding-top:18px!important;
  border-top:1px solid rgba(255,255,255,.14)!important;
  display:grid!important;
  gap:10px!important;
  width:100%!important;
}
.sidebar-language,
.sidebar-user,
.logout-button{
  width:100%!important;
  margin:0!important;
  border-radius:16px!important;
  min-height:48px!important;
}
.sidebar-language{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding:8px 12px!important;
}
.sidebar-language span{display:block!important;}
.sidebar-language select{width:78px!important;min-width:78px!important;}
.sidebar-user{padding:10px 12px!important;justify-content:flex-start!important;}
.logout-button{padding:0 16px!important;justify-content:flex-start!important;}
.sidebar-toggle{
  right:-16px!important;
  width:16px!important;
  background:#000!important;
  color:#fff!important;
  border-left:1px solid rgba(255,255,255,.2)!important;
  border-right:1px solid rgba(0,0,0,.25)!important;
  box-shadow:none!important;
}
.sidebar-toggle:hover{right:-18px!important;width:18px!important;background:#111!important;}
.app-shell.sidebar-collapsed{
  grid-template-columns:112px minmax(0,1fr)!important;
}
.app-shell.sidebar-collapsed .sidebar{
  width:112px!important;
  padding:24px 10px 18px!important;
  align-items:center!important;
}
.app-shell.sidebar-collapsed .brand{
  width:100%!important;
  min-height:72px!important;
  padding:0!important;
  margin-bottom:16px!important;
  justify-content:center!important;
}
.app-shell.sidebar-collapsed .brand-logo{
  display:block!important;
  width:78px!important;
  max-width:78px!important;
}
.app-shell.sidebar-collapsed .brand-mini{display:none!important;}
.app-shell.sidebar-collapsed .nav-item{
  width:72px!important;
  height:56px!important;
  min-height:56px!important;
  padding:0!important;
  justify-content:center!important;
  gap:0!important;
  margin:0 auto!important;
}
.app-shell.sidebar-collapsed .nav-label,
.app-shell.sidebar-collapsed .nav-lock,
.app-shell.sidebar-collapsed .sidebar-user-text,
.app-shell.sidebar-collapsed .logout-label,
.app-shell.sidebar-collapsed .sidebar-language span{
  display:none!important;
}
.app-shell.sidebar-collapsed .nav-item .nav-icon,
.app-shell.sidebar-collapsed .nav-item .settings-icon{
  width:24px!important;
  height:24px!important;
  flex-basis:24px!important;
}
.app-shell.sidebar-collapsed .sidebar-bottom{
  width:100%!important;
  gap:12px!important;
  align-items:center!important;
}
.app-shell.sidebar-collapsed .sidebar-admin-nav{
  gap:10px!important;
}
.app-shell.sidebar-collapsed .sidebar-language{
  width:72px!important;
  min-height:44px!important;
  padding:0!important;
  justify-content:center!important;
}
.app-shell.sidebar-collapsed .sidebar-language select{
  display:block!important;
  width:58px!important;
  min-width:58px!important;
  height:34px!important;
  padding:0 10px!important;
  text-align:center!important;
}
.app-shell.sidebar-collapsed .sidebar-user{
  width:72px!important;
  height:62px!important;
  min-height:62px!important;
  padding:0!important;
  justify-content:center!important;
}
.app-shell.sidebar-collapsed .sidebar-user-avatar{
  width:40px!important;
  height:40px!important;
  flex-basis:40px!important;
}
.app-shell.sidebar-collapsed .logout-button{
  width:72px!important;
  height:48px!important;
  min-height:48px!important;
  padding:0!important;
  justify-content:center!important;
}
.app-shell.sidebar-collapsed .logout-icon{
  margin:0!important;
}
.app-shell.sidebar-collapsed .sidebar-toggle{
  right:-16px!important;
  width:16px!important;
}
.app-shell.sidebar-collapsed .sidebar-toggle svg{transform:rotate(180deg)!important;}
@media(max-width:760px){
  .app-shell,.app-shell.sidebar-collapsed{display:block!important;}
  .sidebar,.app-shell.sidebar-collapsed .sidebar{position:static!important;width:auto!important;padding:14px!important;align-items:stretch!important;}
  .sidebar nav#nav,.sidebar .sidebar-admin-nav{display:flex!important;overflow:auto!important;}
  .sidebar .nav-item,.app-shell.sidebar-collapsed .nav-item{width:auto!important;min-width:max-content!important;padding:0 14px!important;}
  .sidebar .nav-label,.app-shell.sidebar-collapsed .nav-label{display:block!important;white-space:nowrap!important;}
}

/* Sidebar grid-based repair: prevent overlap/cutoff in open and collapsed states */
.app-shell{
  display:grid!important;
  grid-template-columns:288px minmax(0,1fr)!important;
  min-height:100vh!important;
}
.sidebar{
  position:sticky!important;
  inset:auto!important;
  top:0!important;
  grid-column:1!important;
  width:100%!important;
  max-width:none!important;
  height:100vh!important;
  min-height:100vh!important;
  box-sizing:border-box!important;
  padding:24px 14px 18px!important;
  overflow:hidden!important;
  z-index:10!important;
}
main{
  grid-column:2!important;
  min-width:0!important;
}
.sidebar .nav-item,
.sidebar-language,
.sidebar-user,
.logout-button{
  max-width:100%!important;
  box-sizing:border-box!important;
}
.sidebar .nav-item{
  width:100%!important;
  min-width:0!important;
}
.sidebar .nav-item.active{
  transform:none!important;
}
.sidebar-toggle{
  top:0!important;
  right:-16px!important;
  bottom:0!important;
  z-index:30!important;
}
.app-shell.sidebar-collapsed{
  grid-template-columns:98px minmax(0,1fr)!important;
}
.app-shell.sidebar-collapsed .sidebar{
  width:100%!important;
  padding:24px 8px 18px!important;
}
.app-shell.sidebar-collapsed .brand-logo{
  width:70px!important;
  max-width:70px!important;
}
.app-shell.sidebar-collapsed .nav-item{
  width:64px!important;
  min-width:64px!important;
  max-width:64px!important;
  height:54px!important;
  min-height:54px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.app-shell.sidebar-collapsed .sidebar-language,
.app-shell.sidebar-collapsed .sidebar-user,
.app-shell.sidebar-collapsed .logout-button{
  width:64px!important;
  min-width:64px!important;
  max-width:64px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.app-shell.sidebar-collapsed .sidebar-user{
  height:60px!important;
}
.app-shell.sidebar-collapsed .sidebar-language select{
  width:54px!important;
  min-width:54px!important;
  max-width:54px!important;
}
@media(max-width:760px){
  .app-shell,.app-shell.sidebar-collapsed{display:block!important;grid-template-columns:none!important;}
  .sidebar,.app-shell.sidebar-collapsed .sidebar{position:static!important;width:auto!important;height:auto!important;min-height:0!important;}
  main{grid-column:auto!important;}
}

/* Sidebar width must snap exactly after toggle */
.app-shell,
.sidebar{
  transition:none!important;
}
.app-shell.sidebar-collapsed .sidebar{
  flex:0 0 auto!important;
}

/* Sidebar toggle must stay inside sidebar when open */
.app-shell:not(.sidebar-collapsed) .sidebar-toggle{
  right:8px!important;
  top:50%!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
  width:32px!important;
  height:52px!important;
  border-radius:14px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  background:#050505!important;
  box-shadow:0 8px 22px rgba(0,0,0,.22)!important;
  z-index:40!important;
}
.app-shell:not(.sidebar-collapsed) .sidebar-toggle:hover{
  right:8px!important;
  width:32px!important;
  background:#151515!important;
}
.app-shell:not(.sidebar-collapsed) .sidebar-toggle svg{
  width:18px!important;
  height:18px!important;
  transform:none!important;
}
.app-shell:not(.sidebar-collapsed) .nav-item.active,
.app-shell:not(.sidebar-collapsed) .sidebar-language,
.app-shell:not(.sidebar-collapsed) .sidebar-user{
  padding-right:44px!important;
}

/* Sidebar toggle same style in open and collapsed states */
.app-shell:not(.sidebar-collapsed) .sidebar-toggle{
  top:0!important;
  right:-16px!important;
  bottom:0!important;
  transform:none!important;
  width:16px!important;
  height:auto!important;
  border-radius:0!important;
  border-top:0!important;
  border-bottom:0!important;
  border-left:1px solid rgba(255,255,255,.2)!important;
  border-right:1px solid rgba(0,0,0,.25)!important;
  background:#000!important;
  box-shadow:none!important;
}
.app-shell:not(.sidebar-collapsed) .sidebar-toggle:hover{
  right:-16px!important;
  width:16px!important;
  background:#000!important;
}
.app-shell:not(.sidebar-collapsed) .sidebar-toggle svg{
  width:15px!important;
  height:15px!important;
  transform:none!important;
}
.app-shell:not(.sidebar-collapsed) .nav-item.active,
.app-shell:not(.sidebar-collapsed) .sidebar-language,
.app-shell:not(.sidebar-collapsed) .sidebar-user{
  padding-right:18px!important;
}

/* Sidebar toggle no-overlap placement */
.app-shell:not(.sidebar-collapsed) .sidebar-toggle{
  right:0!important;
  top:0!important;
  bottom:0!important;
  width:22px!important;
  height:auto!important;
  transform:none!important;
  border-radius:0!important;
  background:#000!important;
  border-left:1px solid rgba(255,255,255,.16)!important;
  border-right:0!important;
  box-shadow:none!important;
  z-index:45!important;
}
.app-shell:not(.sidebar-collapsed) .sidebar-toggle:hover{
  right:0!important;
  width:22px!important;
  background:#050505!important;
}
.app-shell:not(.sidebar-collapsed) .sidebar nav#nav,
.app-shell:not(.sidebar-collapsed) .sidebar-bottom,
.app-shell:not(.sidebar-collapsed) .brand{
  padding-right:26px!important;
}
.app-shell:not(.sidebar-collapsed) .nav-item,
.app-shell:not(.sidebar-collapsed) .sidebar-language,
.app-shell:not(.sidebar-collapsed) .sidebar-user,
.app-shell:not(.sidebar-collapsed) .logout-button{
  width:calc(100% - 0px)!important;
}
.app-shell:not(.sidebar-collapsed) .sidebar .nav-item.active{
  max-width:100%!important;
}

/* Reserve a real right gutter for the open sidebar toggle */
.app-shell:not(.sidebar-collapsed) .sidebar{
  padding-right:44px!important;
}
.app-shell:not(.sidebar-collapsed) .brand,
.app-shell:not(.sidebar-collapsed) .sidebar nav#nav,
.app-shell:not(.sidebar-collapsed) .sidebar-bottom,
.app-shell:not(.sidebar-collapsed) .sidebar-admin-nav{
  padding-right:0!important;
  width:100%!important;
  max-width:100%!important;
}
.app-shell:not(.sidebar-collapsed) .nav-item,
.app-shell:not(.sidebar-collapsed) .sidebar-language,
.app-shell:not(.sidebar-collapsed) .sidebar-user,
.app-shell:not(.sidebar-collapsed) .logout-button{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}
.app-shell:not(.sidebar-collapsed) .sidebar-toggle{
  right:0!important;
  width:24px!important;
}
.app-shell:not(.sidebar-collapsed) .sidebar-toggle:hover{
  right:0!important;
  width:24px!important;
}

/* Put open sidebar toggle outside the menu content area */
.app-shell:not(.sidebar-collapsed) .sidebar-toggle{
  right:-24px!important;
  width:24px!important;
  background:#000!important;
}
.app-shell:not(.sidebar-collapsed) .sidebar-toggle:hover{
  right:-24px!important;
  width:24px!important;
  background:#000!important;
}

/* Sidebar toggle must be positioned from the sidebar, not viewport */
.sidebar{position:sticky!important;}
.sidebar-toggle{
  position:absolute!important;
  left:auto!important;
}
.app-shell:not(.sidebar-collapsed) .sidebar-toggle{
  right:-24px!important;
  left:auto!important;
}
.app-shell.sidebar-collapsed .sidebar-toggle{
  right:-16px!important;
  left:auto!important;
}

/* Final override: sidebar toggle is absolute inside sidebar */
.app-shell:not(.sidebar-collapsed) .sidebar > .sidebar-toggle,
.app-shell.sidebar-collapsed .sidebar > .sidebar-toggle{
  position:absolute!important;
  left:auto!important;
}
.app-shell:not(.sidebar-collapsed) .sidebar > .sidebar-toggle{
  right:-24px!important;
  top:0!important;
  bottom:0!important;
  width:24px!important;
}
.app-shell.sidebar-collapsed .sidebar > .sidebar-toggle{
  right:-16px!important;
  top:0!important;
  bottom:0!important;
  width:16px!important;
}

/* Make sidebar toggle visible at the sidebar edge */
.app-shell:not(.sidebar-collapsed) .sidebar > .sidebar-toggle{
  position:absolute!important;
  right:-12px!important;
  top:50%!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
  width:24px!important;
  height:74px!important;
  border-radius:999px!important;
  background:#000!important;
  border:1px solid rgba(255,255,255,.28)!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(0,0,0,.25)!important;
  z-index:999!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
.app-shell:not(.sidebar-collapsed) .sidebar > .sidebar-toggle:hover{
  right:-12px!important;
  width:24px!important;
  background:#111!important;
}
.app-shell:not(.sidebar-collapsed) .sidebar > .sidebar-toggle svg{
  width:15px!important;
  height:15px!important;
  display:block!important;
}
.app-shell.sidebar-collapsed .sidebar > .sidebar-toggle{
  position:absolute!important;
  right:-12px!important;
  top:50%!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
  width:24px!important;
  height:74px!important;
  border-radius:999px!important;
  z-index:999!important;
  display:flex!important;
}

/* Minimal sidebar toggle tab */
.app-shell:not(.sidebar-collapsed) .sidebar > .sidebar-toggle,
.app-shell.sidebar-collapsed .sidebar > .sidebar-toggle{
  position:absolute!important;
  right:-10px!important;
  top:50%!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
  width:20px!important;
  height:48px!important;
  border-radius:0 10px 10px 0!important;
  background:#000!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-left:0!important;
  box-shadow:4px 0 12px rgba(0,0,0,.18)!important;
  color:#fff!important;
  opacity:.82!important;
  z-index:80!important;
}
.app-shell:not(.sidebar-collapsed) .sidebar > .sidebar-toggle:hover,
.app-shell.sidebar-collapsed .sidebar > .sidebar-toggle:hover{
  right:-10px!important;
  width:20px!important;
  background:#111!important;
  opacity:1!important;
}
.app-shell:not(.sidebar-collapsed) .sidebar > .sidebar-toggle svg,
.app-shell.sidebar-collapsed .sidebar > .sidebar-toggle svg{
  width:13px!important;
  height:13px!important;
}
.app-shell.sidebar-collapsed .sidebar > .sidebar-toggle svg{
  transform:rotate(180deg)!important;
}

/* Visible sidebar toggle handle */
.sidebar > .sidebar-toggle,
.app-shell:not(.sidebar-collapsed) .sidebar > .sidebar-toggle,
.app-shell.sidebar-collapsed .sidebar > .sidebar-toggle{
  position:absolute!important;
  right:-14px!important;
  top:50%!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
  width:28px!important;
  height:58px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:0 14px 14px 0!important;
  background:#2c2c2e!important;
  border:1px solid rgba(255,255,255,.32)!important;
  border-left:0!important;
  color:#fff!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  z-index:9999!important;
  box-shadow:0 8px 22px rgba(0,0,0,.35)!important;
}
.sidebar > .sidebar-toggle:hover,
.app-shell:not(.sidebar-collapsed) .sidebar > .sidebar-toggle:hover,
.app-shell.sidebar-collapsed .sidebar > .sidebar-toggle:hover{
  right:-14px!important;
  width:28px!important;
  background:#3a3a3c!important;
  border-color:rgba(255,255,255,.48)!important;
}
.sidebar > .sidebar-toggle svg,
.app-shell:not(.sidebar-collapsed) .sidebar > .sidebar-toggle svg,
.app-shell.sidebar-collapsed .sidebar > .sidebar-toggle svg{
  width:16px!important;
  height:16px!important;
  display:block!important;
  stroke:#fff!important;
  stroke-width:2.6!important;
  filter:none!important;
}
.app-shell.sidebar-collapsed .sidebar > .sidebar-toggle svg{
  transform:rotate(180deg)!important;
}

/* Prevent sidebar toggle handle from looking clipped */
.sidebar > .sidebar-toggle,
.app-shell:not(.sidebar-collapsed) .sidebar > .sidebar-toggle,
.app-shell.sidebar-collapsed .sidebar > .sidebar-toggle{
  right:-6px!important;
  width:24px!important;
  height:58px!important;
  border-radius:12px!important;
  border:1px solid rgba(255,255,255,.32)!important;
  background:#2c2c2e!important;
  overflow:visible!important;
}
.sidebar > .sidebar-toggle:hover,
.app-shell:not(.sidebar-collapsed) .sidebar > .sidebar-toggle:hover,
.app-shell.sidebar-collapsed .sidebar > .sidebar-toggle:hover{
  right:-6px!important;
  width:24px!important;
}

/* Full-height sidebar toggle line */
.sidebar > .sidebar-toggle,
.app-shell:not(.sidebar-collapsed) .sidebar > .sidebar-toggle,
.app-shell.sidebar-collapsed .sidebar > .sidebar-toggle{
  position:absolute!important;
  right:0!important;
  top:0!important;
  bottom:0!important;
  transform:none!important;
  width:26px!important;
  height:100%!important;
  min-height:100%!important;
  border-radius:0!important;
  border:0!important;
  border-left:1px solid rgba(255,255,255,.16)!important;
  border-right:1px solid rgba(0,0,0,.35)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01))!important;
  box-shadow:none!important;
  color:#fff!important;
  opacity:1!important;
  z-index:80!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.sidebar > .sidebar-toggle:hover,
.app-shell:not(.sidebar-collapsed) .sidebar > .sidebar-toggle:hover,
.app-shell.sidebar-collapsed .sidebar > .sidebar-toggle:hover{
  right:0!important;
  width:26px!important;
  background:rgba(255,255,255,.08)!important;
}
.sidebar > .sidebar-toggle svg,
.app-shell:not(.sidebar-collapsed) .sidebar > .sidebar-toggle svg,
.app-shell.sidebar-collapsed .sidebar > .sidebar-toggle svg{
  width:15px!important;
  height:15px!important;
  stroke:#fff!important;
  stroke-width:2.6!important;
}
.app-shell:not(.sidebar-collapsed) .sidebar{
  padding-right:46px!important;
}
.app-shell.sidebar-collapsed .sidebar{
  padding-right:34px!important;
}
.app-shell.sidebar-collapsed .sidebar > .sidebar-toggle svg{
  transform:rotate(180deg)!important;
}

/* More breathing room for collapsed sidebar with full-height toggle line */
.app-shell.sidebar-collapsed{
  grid-template-columns:118px minmax(0,1fr)!important;
}
.app-shell.sidebar-collapsed .sidebar{
  padding-left:12px!important;
  padding-right:38px!important;
}
.app-shell.sidebar-collapsed .brand-logo{
  width:78px!important;
  max-width:78px!important;
}
.app-shell.sidebar-collapsed .nav-item,
.app-shell.sidebar-collapsed .sidebar-language,
.app-shell.sidebar-collapsed .sidebar-user,
.app-shell.sidebar-collapsed .logout-button{
  width:72px!important;
  min-width:72px!important;
  max-width:72px!important;
}
.app-shell.sidebar-collapsed .nav-item{
  height:58px!important;
  min-height:58px!important;
}
.app-shell.sidebar-collapsed .sidebar > .sidebar-toggle{
  width:28px!important;
}
.app-shell.sidebar-collapsed .sidebar > .sidebar-toggle:hover{
  width:28px!important;
}

/* Logo 10% smaller in both sidebar states */
.sidebar .brand-logo{
  width:135px!important;
  max-width:135px!important;
}
.app-shell.sidebar-collapsed .brand-logo{
  width:70px!important;
  max-width:70px!important;
}

/* Logo 25% smaller in both sidebar states */
.sidebar .brand-logo{
  width:112px!important;
  max-width:112px!important;
}
.app-shell.sidebar-collapsed .brand-logo{
  width:58px!important;
  max-width:58px!important;
}

/* Access control must always win over sidebar layout */
.sidebar [hidden],
.sidebar .nav-item[hidden],
.sidebar .admin-only[hidden],
.sidebar .staff-only[hidden],
.app-shell.sidebar-collapsed .sidebar [hidden],
.app-shell.sidebar-collapsed .sidebar .nav-item[hidden],
.app-shell:not(.sidebar-collapsed) .sidebar [hidden],
.app-shell:not(.sidebar-collapsed) .sidebar .nav-item[hidden]{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Employee requests panel matches admin approval design */
.my-requests-panel{
  border-left:5px solid #ff9f0a!important;
  overflow:hidden!important;
}
.my-requests-panel .panel-title-symbol{
  background:#000!important;
  color:#fff!important;
}
.my-requests-panel .panel-head{
  border-bottom:1px solid rgba(0,0,0,.07)!important;
}

/* Employee requests panel matches admin approval design */
.my-requests-panel{
  border-left:5px solid #ff9f0a!important;
  overflow:hidden!important;
}
.my-requests-panel .panel-title-symbol{
  background:#000!important;
  color:#fff!important;
}
.my-requests-panel .panel-head{
  border-bottom:1px solid rgba(0,0,0,.07)!important;
}

/* Fix approval panel title icon sizing */
.panel-title-icon{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  margin:0 0 4px!important;
}
.panel-title-symbol{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  flex:0 0 38px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:12px!important;
  overflow:hidden!important;
}
.panel-title-symbol svg{
  width:19px!important;
  height:19px!important;
  min-width:19px!important;
  max-width:19px!important;
  display:block!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  transform:none!important;
}
.my-requests-panel .panel-title-symbol svg,
.approval-panel .panel-title-symbol svg{
  width:19px!important;
  height:19px!important;
}

/* Stable text icon for employee approval requests */
.my-requests-panel .panel-title-letter{
  font-size:18px!important;
  font-weight:900!important;
  line-height:1!important;
  font-family:Arial, sans-serif!important;
}
.my-requests-panel .panel-title-symbol{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  flex:0 0 38px!important;
  background:#000!important;
  color:#fff!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
}

/* Invoice modal: keep the redesigned shell, but allow full form scrolling */
#invoice-modal.open{
  display:block!important;
}
#invoice-modal .dialog{
  display:flex!important;
  flex-direction:column!important;
  width:min(1180px,calc(100vw - 32px))!important;
  max-width:1180px!important;
  max-height:calc(100vh - 32px)!important;
  overflow:hidden!important;
}
#invoice-modal .dialog-head{
  flex:0 0 auto!important;
}
#invoice-modal #invoice-form{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-bottom:0!important;
  overscroll-behavior:contain!important;
}
#invoice-modal .dialog-actions{
  position:sticky!important;
  bottom:0!important;
  z-index:3!important;
  margin:24px -30px 0!important;
  background:rgba(255,255,255,.96)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
#invoice-project option[value=""]{
  color:#8a8f98!important;
}
@media(max-width:820px){
  #invoice-modal .dialog{
    width:100%!important;
    max-width:none!important;
    max-height:100vh!important;
    height:100vh!important;
    margin:0!important;
    border-radius:0!important;
  }
  #invoice-modal .dialog-actions{
    margin-left:-20px!important;
    margin-right:-20px!important;
  }
}

/* Admin/request panel titles: keep icon and title separated consistently */
#view-admin .panel-title-icon,
.my-requests-panel .panel-title-icon{
  display:flex!important;
  align-items:center!important;
  gap:16px!important;
  column-gap:16px!important;
  margin:0 0 8px!important;
  line-height:1.15!important;
}
#view-admin .panel-title-icon > .panel-title-symbol,
.my-requests-panel .panel-title-icon > .panel-title-symbol{
  margin:0!important;
  flex:0 0 44px!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  max-width:44px!important;
}
#view-admin .panel-title-icon > span:last-child,
.my-requests-panel .panel-title-icon > span:last-child{
  display:block!important;
  min-width:0!important;
  padding-left:0!important;
  margin-left:0!important;
}
#view-admin .panel-title-symbol svg,
.my-requests-panel .panel-title-symbol svg{
  width:21px!important;
  height:21px!important;
}

/* Invoice filters option 1: clean two-row toolbar */
#view-invoices .toolbar.panel.slim{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:14px!important;
  align-items:center!important;
  padding:18px 20px!important;
  overflow:visible!important;
}
#view-invoices .toolbar.panel.slim .search{
  grid-column:1 / -1!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  flex:none!important;
}
#view-invoices .toolbar.panel.slim select{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  flex:none!important;
}
#view-invoices .toolbar.panel.slim #invoice-supplier-filter,
#view-invoices .toolbar.panel.slim #invoice-project-filter,
#view-invoices .toolbar.panel.slim #invoice-year-filter,
#view-invoices .toolbar.panel.slim #invoice-month-filter,
#view-invoices .toolbar.panel.slim #document-type-filter,
#view-invoices .toolbar.panel.slim #payment-status-filter,
#view-invoices .toolbar.panel.slim #invoice-status-filter,
#view-invoices .toolbar.panel.slim #invoice-scan-filter{
  grid-column:auto!important;
  flex:none!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
}
#view-invoices #invoice-selection-status{
  grid-column:1 / -1!important;
  justify-self:end!important;
  margin:2px 0 0!important;
  flex:none!important;
}
@media(max-width:1500px){
  #view-invoices .toolbar.panel.slim{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}
@media(max-width:980px){
  #view-invoices .toolbar.panel.slim{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:620px){
  #view-invoices .toolbar.panel.slim{
    grid-template-columns:1fr!important;
  }
  #view-invoices #invoice-selection-status{
    justify-self:stretch!important;
    justify-content:center!important;
    flex-wrap:wrap!important;
  }
}

/* Selected document actions: no container box, use standard icon buttons */
#view-invoices #invoice-selection-status{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  padding:0!important;
  gap:10px!important;
  color:#0a84ff!important;
  font-size:13px!important;
  font-weight:800!important;
}
#view-invoices #invoice-selection-status .selection-count{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  min-height:42px!important;
  padding:0 4px!important;
  color:#0a84ff!important;
}
#view-invoices #invoice-selection-status strong{
  display:inline!important;
  min-width:0!important;
  width:auto!important;
  height:auto!important;
  background:transparent!important;
  color:#0a84ff!important;
  border-radius:0!important;
  font-size:14px!important;
  font-weight:900!important;
}
#view-invoices #invoice-selection-status button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  min-height:42px!important;
  height:42px!important;
  padding:0 16px!important;
  border-radius:13px!important;
  font-family:inherit!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1!important;
  text-decoration:none!important;
  cursor:pointer!important;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease!important;
}
#view-invoices #invoice-selection-status #print-selected-invoices{
  background:#000!important;
  color:#fff!important;
  border:1px solid #000!important;
  box-shadow:0 11px 24px rgba(0,0,0,.16)!important;
}
#view-invoices #invoice-selection-status #clear-invoice-selection{
  background:#fff5f5!important;
  color:#ff3b30!important;
  border:1px solid rgba(255,59,48,.28)!important;
  box-shadow:0 8px 20px rgba(255,59,48,.08)!important;
}
#view-invoices #invoice-selection-status .btn-icon{
  width:17px!important;
  height:17px!important;
  display:block!important;
  flex:0 0 17px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
#view-invoices #invoice-selection-status button:hover{
  transform:translateY(-1px)!important;
}
#view-invoices #invoice-selection-status button:active{
  transform:translateY(0)!important;
  box-shadow:none!important;
}

/* Mobile responsive layer: phones and small tablets */
@media(max-width:900px){
  html,body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }
  body{
    background:#f4f5f7!important;
  }
  .app-shell,
  .app-shell.sidebar-collapsed{
    display:block!important;
    min-height:100vh!important;
    width:100%!important;
    padding:0 0 86px!important;
    grid-template-columns:none!important;
  }
  main{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:0 12px 28px!important;
  }

  /* Mobile navigation becomes a bottom dock. */
  .sidebar,
  .app-shell.sidebar-collapsed .sidebar{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:10px!important;
    top:auto!important;
    z-index:1200!important;
    width:auto!important;
    height:66px!important;
    min-height:0!important;
    max-height:66px!important;
    padding:8px!important;
    border-radius:24px!important;
    border:1px solid rgba(255,255,255,.16)!important;
    background:rgba(0,0,0,.94)!important;
    box-shadow:0 18px 46px rgba(0,0,0,.34)!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    overflow:hidden!important;
  }
  .sidebar .brand,
  .sidebar .sidebar-bottom,
  .sidebar .sidebar-admin-nav,
  .sidebar .sidebar-toggle,
  .sidebar .nav-lock,
  .sidebar .nav-label,
  .sidebar-user-text,
  .logout-button span,
  .sidebar-language,
  .brand-mini,
  .brand-logo{
    display:none!important;
  }
  .sidebar nav#nav,
  .app-shell.sidebar-collapsed .sidebar nav#nav{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:0!important;
    margin:0!important;
    scrollbar-width:none!important;
  }
  .sidebar nav#nav::-webkit-scrollbar{display:none!important;}
  .sidebar .nav-item,
  .app-shell.sidebar-collapsed .sidebar .nav-item{
    flex:0 0 50px!important;
    width:50px!important;
    height:50px!important;
    min-width:50px!important;
    min-height:50px!important;
    margin:0!important;
    padding:0!important;
    border-radius:18px!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid transparent!important;
    background:transparent!important;
    color:rgba(255,255,255,.72)!important;
    box-shadow:none!important;
  }
  .sidebar .nav-item.active,
  .app-shell.sidebar-collapsed .sidebar .nav-item.active{
    background:rgba(255,255,255,.14)!important;
    border-color:rgba(255,255,255,.2)!important;
    color:#fff!important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)!important;
  }
  .sidebar .nav-icon,
  .app-shell.sidebar-collapsed .sidebar .nav-icon{
    width:24px!important;
    height:24px!important;
    display:grid!important;
    place-items:center!important;
    margin:0!important;
  }
  .sidebar .nav-icon svg{
    width:22px!important;
    height:22px!important;
  }

  /* Topbar */
  .topbar{
    min-height:0!important;
    margin:0 -12px 14px!important;
    padding:16px 12px 14px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    border-bottom:1px solid rgba(0,0,0,.06)!important;
  }
  .topbar>div:first-child{
    min-width:0!important;
  }
  .topbar h1{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    font-size:25px!important;
    line-height:1.1!important;
    margin:0!important;
  }
  .topbar p{
    display:block!important;
    margin-top:6px!important;
    font-size:12px!important;
    line-height:1.35!important;
  }
  .page-title-icon{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    border-radius:13px!important;
  }
  .topbar-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr auto!important;
    gap:10px!important;
    align-items:center!important;
  }
  .global-search{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:44px!important;
  }
  .notification-button{
    width:44px!important;
    height:44px!important;
  }
  .topbar .btn.primary{
    grid-column:1 / -1!important;
    width:100%!important;
    height:44px!important;
  }

  /* Generic grids and cards */
  .kpi-grid,
  .reports-kpi-grid,
  .project-kpi-grid,
  .dashboard-grid,
  .reports-grid,
  .settings-grid,
  .card-grid,
  .project-summary-grid,
  .detail-grid,
  .supplier-info-grid,
  .supplier-info-stats{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .kpi,
  .panel,
  .settings-card,
  .supplier-card,
  .toolbar.panel.slim,
  .section-actions{
    border-radius:20px!important;
  }
  .kpi{
    min-height:92px!important;
    padding:16px!important;
  }
  .kpi strong{
    font-size:23px!important;
    white-space:normal!important;
  }
  .panel-head{
    padding:18px 18px 14px!important;
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:12px!important;
  }
  .panel-head h2{
    font-size:18px!important;
  }
  .panel-actions,
  .detail-actions,
  .section-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    align-items:stretch!important;
  }
  .panel-actions .btn,
  .detail-actions .btn,
  .section-actions .btn{
    width:100%!important;
  }

  /* Toolbars and filters */
  .toolbar.panel.slim,
  .reports-toolbar,
  .audit-filters,
  #view-invoices .toolbar.panel.slim{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:14px!important;
    overflow:visible!important;
  }
  .toolbar.panel.slim .search,
  #view-invoices .toolbar.panel.slim .search,
  .catalog-filters,
  .catalog-filters .search,
  .toolbar.panel.slim select,
  .toolbar.panel.slim input,
  .audit-filters input,
  .audit-filters select,
  #view-invoices .toolbar.panel.slim select{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    grid-column:1!important;
  }
  #view-invoices #invoice-selection-status{
    justify-self:stretch!important;
    justify-content:flex-start!important;
    flex-wrap:wrap!important;
    gap:8px!important;
    margin-top:0!important;
  }
  #view-invoices #invoice-selection-status .selection-count{
    width:100%!important;
    min-height:28px!important;
  }
  #view-invoices #invoice-selection-status button{
    flex:1 1 150px!important;
  }

  /* Tables remain readable through contained horizontal scroll. */
  .table-wrap{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    -webkit-overflow-scrolling:touch!important;
    border-radius:0 0 20px 20px!important;
  }
  table{
    min-width:760px!important;
    width:100%!important;
  }
  th,td{
    padding:12px 13px!important;
    white-space:nowrap!important;
  }
  .invoice-link,
  .table-sub{
    white-space:normal!important;
  }

  /* Forms and dialogs */
  .modal.open{
    display:block!important;
  }
  .modal-backdrop{
    position:fixed!important;
  }
  .dialog,
  .dialog.wide,
  .dialog.small,
  .supplier-info-dialog,
  .detail-dialog,
  .user-dialog,
  .kpi-detail-dialog{
    width:100%!important;
    max-width:none!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    border-radius:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  .dialog-head{
    flex:0 0 auto!important;
    padding:18px 16px 14px!important;
  }
  .dialog form,
  .detail-content,
  .supplier-info-content,
  .notifications-list{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:16px!important;
  }
  .dialog-actions{
    flex:0 0 auto!important;
    margin:0!important;
    padding:14px 16px calc(14px + env(safe-area-inset-bottom))!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    background:rgba(255,255,255,.96)!important;
  }
  .dialog-actions .btn,
  .dialog-actions label.btn{
    width:100%!important;
  }
  .form-grid,
  .form-grid.four,
  .two-cols,
  .invoice-bottom,
  .linked-documents-head,
  .material-head,
  .material-line,
  .admin-security-form{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .material-head{
    display:none!important;
  }
  .material-line{
    padding:12px!important;
    border:1px solid rgba(0,0,0,.08)!important;
    border-radius:16px!important;
    background:#fff!important;
  }
  .material-line .remove-line{
    width:100%!important;
  }
  .line-total{
    text-align:left!important;
    padding:10px 12px!important;
    border-radius:12px!important;
    background:#f5f6f8!important;
  }
  .total-box{
    grid-template-columns:1fr!important;
  }
  .scan-field{
    align-items:stretch!important;
    flex-direction:column!important;
  }
  .scan-remove{
    white-space:normal!important;
  }

  /* Admin and notifications */
  .admin-tabs{
    width:100%!important;
    max-width:100%!important;
    display:flex!important;
    overflow-x:auto!important;
    gap:6px!important;
    padding:6px!important;
    scrollbar-width:none!important;
  }
  .admin-tabs::-webkit-scrollbar{display:none!important;}
  .admin-tab{
    flex:0 0 auto!important;
    min-height:42px!important;
    padding:0 15px!important;
  }
  .notifications-dialog{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    top:10px!important;
    bottom:10px!important;
    width:auto!important;
    height:auto!important;
    max-height:none!important;
    border-radius:22px!important;
  }
  .notifications-dialog .dialog-actions{
    padding:14px 16px!important;
  }

  /* Login and agreement access */
  .login-screen{
    padding:18px!important;
  }
  .login-card,
  .agreement-access-card{
    width:100%!important;
    max-width:420px!important;
    padding:26px 20px!important;
    border-radius:24px!important;
  }
}

@media(max-width:480px){
  main{padding-left:10px!important;padding-right:10px!important;}
  .topbar{margin-left:-10px!important;margin-right:-10px!important;padding-left:10px!important;padding-right:10px!important;}
  .topbar h1{font-size:22px!important;}
  .kpi{grid-template-columns:auto 1fr!important;}
  .kpi-icon{width:44px!important;height:44px!important;}
  .btn,.link-btn{font-size:12px!important;}
  table{min-width:700px!important;}
}

/* Mobile navigation access fix: keep every important sidebar action reachable on phones. */
@media(max-width:900px){
  .app-shell{
    grid-template-columns:1fr!important;
    padding-left:0!important;
    padding-bottom:78px!important;
  }
  .sidebar{
    position:fixed!important;
    left:0!important;
    right:0!important;
    top:auto!important;
    bottom:0!important;
    z-index:80!important;
    width:auto!important;
    height:72px!important;
    min-height:72px!important;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important;
    border-right:0!important;
    border-top:1px solid rgba(255,255,255,.14)!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    box-shadow:0 -18px 38px rgba(0,0,0,.22)!important;
  }
  .sidebar::-webkit-scrollbar{display:none!important;}
  .sidebar .brand,
  .sidebar .sidebar-toggle,
  .sidebar .sidebar-user-text,
  .sidebar .logout-label,
  .sidebar .nav-label,
  .sidebar-language span{
    display:none!important;
  }
  .sidebar #nav,
  .sidebar .sidebar-bottom,
  .sidebar .sidebar-admin-nav{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:8px!important;
    width:auto!important;
    min-width:max-content!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
  }
  .sidebar #nav{
    flex:0 0 auto!important;
  }
  .sidebar .sidebar-bottom{
    flex:0 0 auto!important;
  }
  .sidebar .nav-item,
  .sidebar .sidebar-user,
  .sidebar .logout-button,
  .sidebar-language{
    flex:0 0 52px!important;
    width:52px!important;
    min-width:52px!important;
    height:52px!important;
    min-height:52px!important;
    padding:0!important;
    margin:0!important;
    border-radius:18px!important;
    justify-content:center!important;
    align-items:center!important;
    display:flex!important;
  }
  .sidebar .nav-icon,
  .sidebar .settings-icon,
  .sidebar .logout-icon,
  .sidebar-user-avatar{
    width:22px!important;
    height:22px!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:18px!important;
  }
  .sidebar-user-avatar{
    width:34px!important;
    height:34px!important;
    border-radius:10px!important;
    font-size:14px!important;
  }
  .sidebar-language{
    background:rgba(255,255,255,.08)!important;
    border:1px solid rgba(255,255,255,.16)!important;
  }
  .sidebar-language select{
    width:44px!important;
    height:34px!important;
    min-width:44px!important;
    padding:0 6px!important;
    border-radius:14px!important;
    text-align:center!important;
    text-align-last:center!important;
    font-weight:800!important;
    background:rgba(255,255,255,.08)!important;
    color:#fff!important;
    border:1px solid rgba(255,255,255,.18)!important;
  }
  .sidebar .nav-item.active,
  .sidebar .nav-item:hover,
  .sidebar-user:hover,
  .logout-button:hover{
    background:rgba(255,255,255,.14)!important;
    border-color:rgba(255,255,255,.28)!important;
  }
}

/* Mobile optimization v2: phone/tablet polish only. Desktop styles remain untouched. */
@media(max-width:900px){
  :root{
    --mobile-dock-height:76px;
    --mobile-page-pad:14px;
  }

  html,
  body{
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  body{
    background:#f2f4f7!important;
  }

  .app-shell{
    display:block!important;
    width:100%!important;
    max-width:100vw!important;
    min-height:100dvh!important;
    padding:0 0 calc(var(--mobile-dock-height) + env(safe-area-inset-bottom)) 0!important;
    overflow-x:hidden!important;
  }

  main{
    width:100%!important;
    max-width:100vw!important;
    min-width:0!important;
    padding:14px var(--mobile-page-pad) calc(var(--mobile-dock-height) + 18px)!important;
    overflow-x:hidden!important;
  }

  .topbar{
    position:sticky!important;
    top:0!important;
    z-index:30!important;
    width:calc(100% + (var(--mobile-page-pad) * 2))!important;
    margin:0 calc(var(--mobile-page-pad) * -1) 14px!important;
    padding:12px var(--mobile-page-pad)!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    background:rgba(242,244,247,.96)!important;
    border-bottom:1px solid rgba(15,23,42,.08)!important;
    backdrop-filter:blur(14px)!important;
    box-shadow:0 10px 24px rgba(15,23,42,.06)!important;
  }

  .topbar-title,
  .topbar > div:first-child{
    min-width:0!important;
  }

  .topbar h1{
    font-size:24px!important;
    line-height:1.12!important;
    letter-spacing:-.04em!important;
    margin:0!important;
  }

  .topbar p{
    max-width:100%!important;
    margin-top:4px!important;
    font-size:13px!important;
    line-height:1.35!important;
  }

  .topbar-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr auto auto!important;
    gap:8px!important;
    align-items:center!important;
  }

  .global-search{
    min-width:0!important;
    width:100%!important;
    height:46px!important;
    border-radius:16px!important;
  }

  .global-search input{
    min-width:0!important;
    font-size:14px!important;
  }

  #notifications-button{
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    padding:0!important;
    border-radius:16px!important;
  }

  #new-invoice{
    min-height:46px!important;
    padding:0 14px!important;
    border-radius:16px!important;
    white-space:nowrap!important;
  }

  .view{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  .panel,
  .kpi,
  .card,
  .admin-card,
  .detail-card,
  .chart-panel,
  .report-card,
  .project-card,
  .settings-card,
  .agreement-access-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    border-radius:22px!important;
    box-sizing:border-box!important;
  }

  .kpi-grid,
  .dashboard-grid,
  .reports-grid,
  .projects-grid,
  .settings-grid,
  .admin-grid,
  .detail-grid,
  .cards-grid,
  .summary-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
    width:100%!important;
    max-width:100%!important;
  }

  .kpi{
    padding:18px!important;
    grid-template-columns:52px 1fr auto!important;
    gap:14px!important;
  }

  .kpi h3,
  .kpi .kpi-value,
  .stat-value{
    overflow-wrap:anywhere!important;
  }

  .toolbar.panel.slim,
  .toolbar,
  .reports-toolbar,
  .audit-filters,
  .catalog-filters,
  .filters-bar,
  #view-invoices .toolbar.panel.slim{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:14px!important;
    margin-bottom:14px!important;
    border-radius:22px!important;
    overflow:visible!important;
  }

  .toolbar.panel.slim > *,
  .toolbar > *,
  .reports-toolbar > *,
  .audit-filters > *,
  .catalog-filters > *,
  .filters-bar > *,
  #view-invoices .toolbar.panel.slim > *{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    grid-column:auto!important;
  }

  .search,
  .toolbar input,
  .toolbar select,
  .reports-toolbar input,
  .reports-toolbar select,
  .audit-filters input,
  .audit-filters select,
  .catalog-filters input,
  .catalog-filters select,
  .filters-bar input,
  .filters-bar select{
    height:48px!important;
    min-height:48px!important;
    border-radius:16px!important;
    font-size:15px!important;
  }

  #view-invoices #invoice-selection-status{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    padding-top:4px!important;
  }

  #view-invoices #invoice-selection-status .selection-count{
    grid-column:1 / -1!important;
    width:100%!important;
    min-height:24px!important;
    justify-content:flex-start!important;
    padding:0 2px!important;
  }

  #view-invoices #invoice-selection-status button{
    width:100%!important;
    min-height:42px!important;
    border-radius:14px!important;
  }

  .section-head,
  .panel-head,
  .detail-head,
  .admin-card-head,
  .card-head{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    align-items:start!important;
  }

  .section-actions,
  .panel-actions,
  .detail-actions,
  .admin-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }

  .section-actions .btn,
  .panel-actions .btn,
  .detail-actions .btn,
  .admin-actions .btn{
    width:100%!important;
    justify-content:center!important;
  }

  .table-wrap{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    -webkit-overflow-scrolling:touch!important;
    border-radius:0 0 20px 20px!important;
  }

  .table-wrap table,
  table{
    min-width:720px!important;
  }

  th,
  td{
    padding:12px!important;
    font-size:13px!important;
  }

  .admin-tabs{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    display:flex!important;
    gap:8px!important;
    padding:6px!important;
    border-radius:18px!important;
    scrollbar-width:none!important;
  }

  .admin-tabs::-webkit-scrollbar{display:none!important;}

  .admin-tab{
    flex:0 0 auto!important;
    min-width:max-content!important;
    height:44px!important;
    border-radius:14px!important;
    padding:0 16px!important;
  }

  .modal.open{
    display:flex!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    padding:0!important;
  }

  .dialog,
  .dialog.wide,
  .dialog.small,
  .supplier-info-dialog,
  .detail-dialog,
  .user-dialog,
  .kpi-detail-dialog{
    width:100vw!important;
    max-width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    border-radius:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }

  .dialog-head{
    padding:16px var(--mobile-page-pad)!important;
    min-height:64px!important;
    flex:0 0 auto!important;
    gap:10px!important;
  }

  .dialog form,
  .dialog-body,
  .detail-content,
  .supplier-info-content,
  .notifications-list{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:14px!important;
    -webkit-overflow-scrolling:touch!important;
  }

  .dialog-actions{
    flex:0 0 auto!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:12px var(--mobile-page-pad) calc(12px + env(safe-area-inset-bottom))!important;
    background:rgba(255,255,255,.98)!important;
    border-top:1px solid rgba(15,23,42,.08)!important;
    box-shadow:0 -12px 24px rgba(15,23,42,.08)!important;
  }

  .dialog-actions .btn,
  .dialog-actions label.btn{
    width:100%!important;
    min-height:46px!important;
  }

  .form-grid,
  .form-grid.four,
  .two-cols,
  .invoice-bottom,
  .linked-documents-head,
  .material-line,
  .admin-security-form,
  .payment-row,
  .agreement-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  .material-line{
    border:1px solid rgba(15,23,42,.08)!important;
    border-radius:18px!important;
    padding:12px!important;
    background:#fff!important;
  }

  .material-line input,
  .material-line select,
  .material-line textarea,
  .form-grid input,
  .form-grid select,
  .form-grid textarea{
    min-height:46px!important;
    font-size:16px!important;
  }

  .line-total{
    text-align:left!important;
    padding:11px 12px!important;
    border-radius:14px!important;
    background:#f4f6f8!important;
  }

  .notifications-dialog{
    left:10px!important;
    right:10px!important;
    top:10px!important;
    bottom:calc(var(--mobile-dock-height) + 10px)!important;
    width:auto!important;
    height:auto!important;
    max-height:none!important;
    border-radius:24px!important;
  }

  .notifications-dialog .dialog-actions{
    box-shadow:none!important;
  }

  .sidebar{
    width:100%!important;
    max-width:100vw!important;
    height:var(--mobile-dock-height)!important;
    min-height:var(--mobile-dock-height)!important;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    background:#050505!important;
  }

  .sidebar #nav,
  .sidebar .sidebar-bottom,
  .sidebar .sidebar-admin-nav{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:8px!important;
    min-width:max-content!important;
    width:auto!important;
    flex:0 0 auto!important;
  }

  .sidebar .brand,
  .sidebar .sidebar-toggle,
  .sidebar .nav-label,
  .sidebar .sidebar-user-text,
  .sidebar .logout-label,
  .sidebar-language span{
    display:none!important;
  }

  .sidebar .nav-item,
  .sidebar .sidebar-user,
  .sidebar .logout-button,
  .sidebar-language{
    width:52px!important;
    min-width:52px!important;
    height:52px!important;
    min-height:52px!important;
    flex:0 0 52px!important;
    padding:0!important;
    border-radius:18px!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
  }

  .sidebar .nav-icon svg,
  .logout-icon{
    width:22px!important;
    height:22px!important;
  }

  .sidebar-language select{
    width:46px!important;
    height:36px!important;
    padding:0 4px!important;
    text-align:center!important;
    text-align-last:center!important;
  }

  .login-screen{
    padding:16px!important;
  }

  .login-card,
  .agreement-access-card{
    width:100%!important;
    max-width:430px!important;
    padding:24px 18px!important;
  }
}

@media(max-width:520px){
  :root{
    --mobile-page-pad:12px;
  }

  .topbar-actions{
    grid-template-columns:1fr 46px!important;
  }

  #new-invoice{
    grid-column:1 / -1!important;
    width:100%!important;
  }

  .kpi{
    grid-template-columns:48px 1fr!important;
  }

  .kpi .chevron,
  .kpi svg.chevron{
    display:none!important;
  }

  .table-wrap table,
  table{
    min-width:680px!important;
  }
}

/* Decimal superscript formatting: visual only; numeric values and calculations stay unchanged. */
.decimal-sup{
  font-size:.62em!important;
  line-height:0!important;
  vertical-align:super!important;
  margin-left:1px!important;
  font-weight:inherit!important;
  letter-spacing:0!important;
}
.mono .decimal-sup,
.kpi .decimal-sup,
.detail-field strong .decimal-sup,
.total-box strong .decimal-sup,
.supplier-stats strong .decimal-sup,
.kpi-summary-strip strong .decimal-sup{
  font-size:.58em!important;
}

/* Decimal part formatting: visual only; numeric values and calculations stay unchanged. */
.decimal-part{
  display:inline!important;
  font-size:.62em!important;
  line-height:1!important;
  vertical-align:baseline!important;
  margin-left:1px!important;
  font-weight:500!important;
  color:#7b8490!important;
  letter-spacing:-.01em!important;
}
.kpi .decimal-part,
.kpi-value .decimal-part,
.stat-value .decimal-part,
.detail-field strong .decimal-part,
.total-box strong .decimal-part,
.supplier-stats strong .decimal-part,
.kpi-summary-strip strong .decimal-part{
  font-size:.56em!important;
  color:#7d8793!important;
}
.mono .decimal-part,
td.right .decimal-part,
.line-total .decimal-part{
  font-size:.68em!important;
  color:#7b8490!important;
}

/* Font polish: closer to modern financial dashboard typography. */
@font-face{
  font-family:"BS SF Pro";
  src:url("assets/fonts/SFPRODISPLAYREGULAR.OTF") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"BS SF Pro";
  src:url("assets/fonts/SFPRODISPLAYMEDIUM.OTF") format("opentype");
  font-weight:500 650;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"BS SF Pro";
  src:url("assets/fonts/SFPRODISPLAYBOLD.OTF") format("opentype");
  font-weight:700 900;
  font-style:normal;
  font-display:swap;
}
:root{
  font-family:"BS SF Pro","SF Pro Display","Inter","Segoe UI",Arial,sans-serif!important;
}
body,
input,
select,
textarea,
button{
  font-family:"BS SF Pro","SF Pro Display","Inter","Segoe UI",Arial,sans-serif!important;
  -webkit-font-smoothing:antialiased!important;
  -moz-osx-font-smoothing:grayscale!important;
  text-rendering:geometricPrecision!important;
}
.mono,
.kpi strong,
.kpi-value,
.stat-value,
.detail-field strong,
.total-box strong,
.supplier-stats strong,
td.right,
.line-total,
#donut-rate,
.kpi-summary-strip strong{
  font-family:"BS SF Pro","SF Pro Display","Inter","Segoe UI",Arial,sans-serif!important;
  font-variant-numeric:tabular-nums lining-nums!important;
  font-feature-settings:"tnum" 1,"lnum" 1!important;
  letter-spacing:-.035em!important;
}
.kpi strong,
.kpi-value,
.stat-value,
#donut-rate{
  font-weight:650!important;
}
.topbar h1,
.panel-head h2,
.settings-card h2,
.section-title h2,
.section-title h3,
.detail-head h2,
.dialog-head h2,
.admin-card h2,
.supplier-card h3{
  letter-spacing:-.035em!important;
  font-weight:750!important;
}
.nav-item,
.btn,
.link-btn,
th,
.badge{
  letter-spacing:-.012em!important;
}
.decimal-part{
  font-family:"BS SF Pro","SF Pro Display","Inter","Segoe UI",Arial,sans-serif!important;
  font-size:.56em!important;
  font-weight:500!important;
  color:#7a8290!important;
  letter-spacing:-.02em!important;
}
.mono .decimal-part,
td.right .decimal-part,
.line-total .decimal-part{
  font-size:.62em!important;
}

/* Global typography and spacing polish: final normalization layer. */
:root{
  --bs-font:"BS SF Pro","SF Pro Display","Inter","Segoe UI",Arial,sans-serif;
  --bs-title-track:-.038em;
  --bs-body-track:-.012em;
  --bs-label-track:.018em;
  --bs-number-track:-.04em;
}
html,
body{
  font-family:var(--bs-font)!important;
  font-size:14px!important;
  line-height:1.42!important;
  letter-spacing:var(--bs-body-track)!important;
  font-kerning:normal!important;
  font-synthesis-weight:none!important;
  -webkit-font-smoothing:antialiased!important;
  -moz-osx-font-smoothing:grayscale!important;
  text-rendering:geometricPrecision!important;
}
body,
button,
input,
select,
textarea,
table{
  font-family:var(--bs-font)!important;
}
button,
input,
select,
textarea{
  letter-spacing:-.01em!important;
  line-height:1.18!important;
}
.topbar h1,
.login-heading h1,
.panel-head h2,
.settings-card h2,
.section-title h2,
.section-title h3,
.dialog-head h2,
.detail-head h2,
.admin-card h2,
.admin-panel-title,
.supplier-card h3,
.card-title,
.page-title,
.kpi-detail-title{
  font-family:var(--bs-font)!important;
  font-weight:760!important;
  letter-spacing:var(--bs-title-track)!important;
  line-height:1.08!important;
  text-wrap:balance!important;
}
.topbar h1{
  font-size:31px!important;
}
.panel-head h2,
.settings-card h2,
.admin-card h2{
  font-size:18px!important;
}
.dialog-head h2{
  font-size:22px!important;
}
p,
small,
.muted,
.panel-head p,
.topbar p,
.section-title p,
.settings-card>p,
.detail-note,
.table-sub{
  letter-spacing:-.006em!important;
  line-height:1.38!important;
}
label,
.form-grid label,
.invoice-bottom label,
.settings-card label,
.form-stack label{
  letter-spacing:.006em!important;
  line-height:1.22!important;
}
.nav-item,
.logout-button,
.sidebar-language,
.sidebar-user,
.btn,
.link-btn,
.icon-btn,
.inline-icon-add,
.admin-tab{
  font-family:var(--bs-font)!important;
  font-weight:650!important;
  letter-spacing:-.018em!important;
  line-height:1!important;
}
.nav-label{
  letter-spacing:-.018em!important;
}
.btn,
.link-btn,
.admin-tab{
  min-height:42px!important;
}
.btn.small,
.link-btn{
  min-height:38px!important;
}
input,
select,
textarea{
  font-weight:500!important;
  letter-spacing:-.012em!important;
}
input::placeholder,
textarea::placeholder{
  color:#8b929d!important;
  font-weight:520!important;
  letter-spacing:-.014em!important;
}
th,
.material-head,
.kpi span,
.detail-field span,
.supplier-stats span,
.kpi-summary-strip span,
.project-quick-stats span,
.login-heading>span{
  font-family:var(--bs-font)!important;
  font-weight:760!important;
  letter-spacing:.055em!important;
  line-height:1.12!important;
}
th{
  font-size:10px!important;
  padding-top:13px!important;
  padding-bottom:13px!important;
}
td{
  font-size:14px!important;
  line-height:1.28!important;
  letter-spacing:-.014em!important;
}
.badge,
.document-badge,
.source-chip,
.control-status-chip{
  font-weight:720!important;
  letter-spacing:-.006em!important;
  line-height:1!important;
}
.kpi strong,
.kpi-value,
.stat-value,
#donut-rate,
.legend strong,
.detail-field strong,
.total-box strong,
.supplier-stats strong,
.kpi-summary-strip strong,
.project-quick-stats strong,
.line-total,
.mono,
td.right,
input[type="number"]{
  font-family:var(--bs-font)!important;
  font-variant-numeric:tabular-nums lining-nums!important;
  font-feature-settings:"tnum" 1,"lnum" 1,"kern" 1!important;
  letter-spacing:var(--bs-number-track)!important;
  line-height:1.05!important;
}
.kpi strong,
.kpi-value,
.stat-value{
  font-size:26px!important;
  font-weight:680!important;
}
.detail-field strong,
.total-box strong,
.supplier-stats strong,
.kpi-summary-strip strong{
  font-weight:680!important;
}
.invoice-link{
  font-weight:760!important;
  letter-spacing:-.025em!important;
}
.decimal-part{
  display:inline!important;
  font-size:.54em!important;
  line-height:1!important;
  vertical-align:baseline!important;
  margin-left:1px!important;
  font-weight:520!important;
  color:#7d8591!important;
  letter-spacing:-.022em!important;
}
.mono .decimal-part,
td.right .decimal-part,
.line-total .decimal-part{
  font-size:.61em!important;
}
.kpi .decimal-part,
.kpi-value .decimal-part,
.stat-value .decimal-part,
#donut-rate .decimal-part{
  font-size:.52em!important;
}
.panel-head,
.dialog-head,
.section-title,
.card-head,
.admin-card-head,
.detail-head{
  gap:12px!important;
}
.kpi{
  gap:16px!important;
}
.detail-field,
.total-box,
.supplier-stats div,
.kpi-summary-strip>div{
  text-wrap:pretty!important;
}
@media(max-width:900px){
  html,body{
    font-size:14px!important;
  }
  .topbar h1{
    font-size:25px!important;
    line-height:1.08!important;
  }
  .kpi strong,
  .kpi-value,
  .stat-value{
    font-size:24px!important;
  }
  td{
    font-size:13px!important;
  }
}

/* SF Pro Display Light tuning: lighter, cleaner dashboard typography. */
:root{
  --bs-font:"SF Pro Display","BS SF Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  --bs-title-track:-.045em;
  --bs-body-track:-.014em;
  --bs-number-track:-.05em;
}
html,
body,
button,
input,
select,
textarea,
table{
  font-family:var(--bs-font)!important;
  font-weight:400!important;
  letter-spacing:var(--bs-body-track)!important;
}
body{
  line-height:1.43!important;
}
p,
small,
.muted,
.panel-head p,
.topbar p,
.section-title p,
.settings-card>p,
.detail-note,
.table-sub{
  font-weight:400!important;
  letter-spacing:-.008em!important;
  line-height:1.42!important;
}
.topbar h1,
.login-heading h1,
.panel-head h2,
.settings-card h2,
.section-title h2,
.section-title h3,
.dialog-head h2,
.detail-head h2,
.admin-card h2,
.admin-panel-title,
.supplier-card h3,
.card-title,
.page-title,
.kpi-detail-title{
  font-family:var(--bs-font)!important;
  font-weight:500!important;
  letter-spacing:var(--bs-title-track)!important;
  line-height:1.08!important;
}
.topbar h1{
  font-size:32px!important;
  font-weight:500!important;
}
.panel-head h2,
.settings-card h2,
.admin-card h2{
  font-weight:500!important;
}
.dialog-head h2{
  font-weight:500!important;
}
.nav-item,
.logout-button,
.sidebar-language,
.sidebar-user,
.btn,
.link-btn,
.icon-btn,
.inline-icon-add,
.admin-tab{
  font-family:var(--bs-font)!important;
  font-weight:500!important;
  letter-spacing:-.018em!important;
}
.nav-label{
  font-weight:500!important;
}
label,
.form-grid label,
.invoice-bottom label,
.settings-card label,
.form-stack label{
  font-weight:500!important;
  letter-spacing:-.002em!important;
}
input,
select,
textarea{
  font-weight:400!important;
}
input::placeholder,
textarea::placeholder{
  font-weight:400!important;
}
th,
.material-head,
.kpi span,
.detail-field span,
.supplier-stats span,
.kpi-summary-strip span,
.project-quick-stats span,
.login-heading>span{
  font-family:var(--bs-font)!important;
  font-weight:500!important;
  letter-spacing:.045em!important;
}
td{
  font-weight:400!important;
  letter-spacing:-.015em!important;
}
.badge,
.document-badge,
.source-chip,
.control-status-chip{
  font-weight:500!important;
}
.invoice-link{
  font-weight:600!important;
  letter-spacing:-.03em!important;
}
.kpi strong,
.kpi-value,
.stat-value,
#donut-rate,
.legend strong,
.detail-field strong,
.total-box strong,
.supplier-stats strong,
.kpi-summary-strip strong,
.project-quick-stats strong,
.line-total,
.mono,
td.right,
input[type="number"]{
  font-family:var(--bs-font)!important;
  font-weight:400!important;
  font-variant-numeric:tabular-nums lining-nums!important;
  font-feature-settings:"tnum" 1,"lnum" 1,"kern" 1!important;
  letter-spacing:var(--bs-number-track)!important;
}
.kpi strong,
.kpi-value,
.stat-value{
  font-size:28px!important;
  font-weight:400!important;
  line-height:1.02!important;
}
#donut-rate{
  font-weight:400!important;
}
.detail-field strong,
.total-box strong,
.supplier-stats strong,
.kpi-summary-strip strong{
  font-weight:400!important;
}
.decimal-part{
  font-family:var(--bs-font)!important;
  font-size:.54em!important;
  font-weight:400!important;
  color:#7c8490!important;
  letter-spacing:-.024em!important;
}
@media(max-width:900px){
  .topbar h1{font-size:26px!important;font-weight:500!important;}
  .kpi strong,.kpi-value,.stat-value{font-size:25px!important;font-weight:400!important;}
}

/* Kerning unclump: open SF Pro Light text slightly so letters do not look glued. */
:root{
  --bs-body-track:.001em;
  --bs-title-track:-.018em;
  --bs-number-track:-.018em;
}
html,
body,
button,
input,
select,
textarea,
table{
  letter-spacing:var(--bs-body-track)!important;
  font-kerning:normal!important;
  text-rendering:optimizeLegibility!important;
}
p,
small,
.muted,
.panel-head p,
.topbar p,
.section-title p,
.settings-card>p,
.detail-note,
.table-sub,
.supplier-contact,
.notifications-list,
.empty-state span{
  letter-spacing:.002em!important;
  word-spacing:.018em!important;
  line-height:1.45!important;
}
.topbar h1,
.login-heading h1,
.panel-head h2,
.settings-card h2,
.section-title h2,
.section-title h3,
.dialog-head h2,
.detail-head h2,
.admin-card h2,
.admin-panel-title,
.supplier-card h3,
.card-title,
.page-title,
.kpi-detail-title{
  letter-spacing:var(--bs-title-track)!important;
  word-spacing:.012em!important;
}
.nav-item,
.logout-button,
.sidebar-language,
.sidebar-user,
.btn,
.link-btn,
.admin-tab,
label,
.form-grid label,
.invoice-bottom label,
.settings-card label,
.form-stack label{
  letter-spacing:.001em!important;
  word-spacing:.018em!important;
}
input,
select,
textarea{
  letter-spacing:.002em!important;
  word-spacing:.012em!important;
}
input::placeholder,
textarea::placeholder{
  letter-spacing:.002em!important;
  word-spacing:.014em!important;
}
th,
.material-head,
.kpi span,
.detail-field span,
.supplier-stats span,
.kpi-summary-strip span,
.project-quick-stats span,
.login-heading>span{
  letter-spacing:.06em!important;
  word-spacing:.035em!important;
}
td,
.detail-field strong,
.supplier-info-field strong,
.supplier-info-bank strong,
.linked-picker-row,
.approval-card,
.notification-card{
  letter-spacing:.001em!important;
  word-spacing:.014em!important;
}
.badge,
.document-badge,
.source-chip,
.control-status-chip{
  letter-spacing:.004em!important;
  word-spacing:.014em!important;
}
.kpi strong,
.kpi-value,
.stat-value,
#donut-rate,
.legend strong,
.total-box strong,
.supplier-stats strong,
.kpi-summary-strip strong,
.project-quick-stats strong,
.line-total,
.mono,
td.right,
input[type="number"]{
  letter-spacing:var(--bs-number-track)!important;
  word-spacing:0!important;
}
.invoice-link{
  letter-spacing:-.006em!important;
  word-spacing:.01em!important;
}
.decimal-part{
  letter-spacing:-.004em!important;
  margin-left:2px!important;
}
@media(max-width:900px){
  :root{
    --bs-title-track:-.012em;
    --bs-number-track:-.012em;
  }
  p,small,.muted,.panel-head p,.topbar p,.section-title p,.settings-card>p,.table-sub{
    letter-spacing:.003em!important;
  }
}

/* Material control graph card */
.material-graph-panel{
  min-height:430px!important;
  padding-bottom:18px!important;
  overflow:hidden!important;
}
.material-graph-panel .panel-head{
  padding-bottom:10px!important;
}
.material-graph-tabs{
  width:calc(100% - 56px)!important;
  margin:0 28px 22px!important;
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  padding:4px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(0,0,0,.055),rgba(255,255,255,.55))!important;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.08),inset 0 -1px 0 rgba(255,255,255,.9)!important;
}
.material-graph-tabs button{
  height:42px!important;
  border:0!important;
  border-radius:999px!important;
  background:transparent!important;
  color:#6f737a!important;
  font:inherit!important;
  font-size:18px!important;
  font-weight:500!important;
  letter-spacing:-.018em!important;
  cursor:pointer!important;
}
.material-graph-tabs button.active{
  color:#1d1f24!important;
  background:rgba(255,255,255,.92)!important;
  box-shadow:0 10px 24px rgba(15,23,42,.11),inset 0 1px 0 #fff!important;
}
.material-graph-metric{
  display:flex!important;
  align-items:flex-start!important;
  gap:18px!important;
  padding:0 30px!important;
  margin-bottom:8px!important;
}
.material-graph-metric strong{
  font-family:var(--bs-font)!important;
  font-size:58px!important;
  line-height:.95!important;
  font-weight:400!important;
  letter-spacing:-.055em!important;
  color:#25282e!important;
  font-variant-numeric:tabular-nums lining-nums!important;
}
.material-graph-metric span{
  margin-top:10px!important;
  font-size:18px!important;
  font-weight:500!important;
  letter-spacing:-.01em!important;
}
.material-graph-metric span.positive{color:#21c897!important;}
.material-graph-metric span.negative{color:#ff8a2a!important;}
.material-graph-wrap{
  position:relative!important;
  height:150px!important;
  margin:0 28px!important;
}
#material-control-chart{
  display:block!important;
  width:100%!important;
  height:150px!important;
  overflow:visible!important;
}
.material-chart-area{
  fill:url(#material-control-fill)!important;
}
.material-chart-line{
  fill:none!important;
  stroke:#22d2a2!important;
  stroke-width:4!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  filter:drop-shadow(0 5px 10px rgba(34,210,162,.18))!important;
}
.material-chart-guide{
  stroke:rgba(20,28,36,.1)!important;
  stroke-width:1!important;
  stroke-dasharray:5 8!important;
}
.material-chart-dot{
  fill:#22d2a2!important;
  stroke:#fff!important;
  stroke-width:3!important;
  filter:drop-shadow(0 7px 12px rgba(34,210,162,.34))!important;
}
.material-graph-tooltip{
  position:absolute!important;
  right:19%!important;
  top:16px!important;
  padding:9px 17px!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#6d7178!important;
  font-size:17px!important;
  font-weight:500!important;
  letter-spacing:-.018em!important;
  box-shadow:0 12px 28px rgba(15,23,42,.08)!important;
}
.material-graph-tooltip:after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  bottom:-8px!important;
  width:14px!important;
  height:14px!important;
  transform:translateX(-50%) rotate(45deg)!important;
  background:#fff!important;
}
.material-graph-axis{
  display:flex!important;
  justify-content:space-between!important;
  padding:0 30px!important;
  margin-top:2px!important;
  color:#989da5!important;
  font-size:14px!important;
  font-weight:500!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
.material-graph-stats{
  display:grid!important;
  gap:12px!important;
  padding:22px 30px 18px!important;
}
.material-graph-stats>div{
  display:grid!important;
  grid-template-columns:34px 1fr auto!important;
  align-items:center!important;
  gap:12px!important;
  min-height:36px!important;
}
.material-graph-stats span:not(.stat-icon){
  color:#2b2e34!important;
  font-size:18px!important;
  font-weight:400!important;
  letter-spacing:-.01em!important;
}
.material-graph-stats strong{
  font-size:21px!important;
  font-weight:500!important;
  color:#292c32!important;
  letter-spacing:-.035em!important;
  font-variant-numeric:tabular-nums lining-nums!important;
}
.stat-icon{
  width:28px!important;
  height:28px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:10px!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:600!important;
}
.stat-icon.ok{background:#b8bec6!important;}
.stat-icon.warn{background:#ff9b2f!important;}
.stat-icon.neutral{background:#b8bec6!important;}
.material-graph-panel .control-insight{
  margin-top:auto!important;
}
@media(max-width:900px){
  .material-graph-panel{min-height:auto!important;}
  .material-graph-tabs{width:calc(100% - 28px)!important;margin:0 14px 18px!important;}
  .material-graph-metric{padding:0 18px!important;}
  .material-graph-metric strong{font-size:46px!important;}
  .material-graph-wrap{margin:0 16px!important;}
  .material-graph-axis{padding:0 18px!important;font-size:12px!important;}
  .material-graph-stats{padding:18px!important;}
  .material-graph-stats span:not(.stat-icon){font-size:16px!important;}
}

/* Material graph proportion pass: zoom content out while preserving card size. */
.material-graph-panel .panel-head{
  padding:22px 28px 14px!important;
}
.material-graph-tabs{
  width:calc(100% - 64px)!important;
  margin:0 32px 18px!important;
  padding:3px!important;
}
.material-graph-tabs button{
  height:36px!important;
  font-size:15px!important;
}
.material-graph-metric{
  padding:0 34px!important;
  margin-bottom:2px!important;
  gap:13px!important;
}
.material-graph-metric strong{
  font-size:43px!important;
  line-height:.98!important;
}
.material-graph-metric span{
  margin-top:8px!important;
  font-size:14px!important;
}
.material-graph-wrap{
  height:118px!important;
  margin:0 34px!important;
}
#material-control-chart{
  height:118px!important;
}
.material-chart-line{
  stroke-width:3!important;
}
.material-chart-dot{
  r:5!important;
  stroke-width:2.5!important;
}
.material-chart-guide{
  y1:18!important;
  y2:120!important;
}
.material-graph-tooltip{
  top:14px!important;
  right:18%!important;
  padding:7px 13px!important;
  border-radius:10px!important;
  font-size:13px!important;
  box-shadow:0 9px 22px rgba(15,23,42,.07)!important;
}
.material-graph-tooltip:after{
  width:11px!important;
  height:11px!important;
  bottom:-6px!important;
}
.material-graph-axis{
  padding:0 34px!important;
  margin-top:0!important;
  font-size:11px!important;
  letter-spacing:.065em!important;
}
.material-graph-stats{
  gap:8px!important;
  padding:15px 34px 13px!important;
}
.material-graph-stats>div{
  grid-template-columns:28px 1fr auto!important;
  min-height:29px!important;
  gap:10px!important;
}
.stat-icon{
  width:23px!important;
  height:23px!important;
  border-radius:8px!important;
  font-size:12px!important;
}
.material-graph-stats span:not(.stat-icon){
  font-size:14px!important;
}
.material-graph-stats strong{
  font-size:17px!important;
}
.material-graph-panel .control-insight{
  width:calc(100% - 56px)!important;
  min-height:50px!important;
  margin:2px 28px 18px!important;
  padding:8px 12px!important;
  grid-template-columns:32px minmax(0,1fr) 16px!important;
}
.material-graph-panel .control-insight .control-insight-icon{
  width:32px!important;
  height:32px!important;
  border-radius:10px!important;
}
.material-graph-panel .control-insight #control-insight-title{
  font-size:12px!important;
  font-weight:600!important;
}
.material-graph-panel .control-insight b{
  font-size:18px!important;
}
@media(max-width:900px){
  .material-graph-panel .panel-head{padding:18px 18px 12px!important;}
  .material-graph-tabs{width:calc(100% - 36px)!important;margin:0 18px 16px!important;}
  .material-graph-metric{padding:0 20px!important;}
  .material-graph-metric strong{font-size:40px!important;}
  .material-graph-wrap{height:112px!important;margin:0 20px!important;}
  #material-control-chart{height:112px!important;}
  .material-graph-axis{padding:0 20px!important;}
  .material-graph-stats{padding:14px 20px!important;}
  .material-graph-panel .control-insight{width:calc(100% - 36px)!important;margin:0 18px 16px!important;}
}

/* Material graph refinement: calmer, better proportioned financial-card look. */
.material-graph-panel{
  background:
    radial-gradient(circle at 96% 0%, rgba(52,199,89,.12), transparent 34%),
    linear-gradient(180deg,#fff 0%,#fbfcfd 100%)!important;
}
.material-graph-panel .panel-head{
  padding:24px 34px 16px!important;
  border-bottom:1px solid rgba(17,24,39,.055)!important;
}
.material-graph-panel .panel-head h2{
  font-size:20px!important;
  font-weight:500!important;
  letter-spacing:-.026em!important;
}
.material-graph-panel .panel-head p{
  margin-top:4px!important;
  font-size:13px!important;
}
.material-graph-panel #control-status-chip{
  height:30px!important;
  padding:0 13px!important;
  border-radius:999px!important;
  font-size:12px!important;
  font-weight:600!important;
  background:#34c759!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(52,199,89,.18)!important;
}
.material-graph-panel #control-status-chip i{
  width:7px!important;
  height:7px!important;
  background:#fff!important;
  box-shadow:none!important;
}
.material-graph-tabs{
  width:calc(100% - 76px)!important;
  margin:0 38px 18px!important;
  transform:translateY(-1px)!important;
  background:#f0f1f2!important;
  border:1px solid rgba(17,24,39,.045)!important;
  box-shadow:inset 0 2px 7px rgba(15,23,42,.08),0 1px 0 rgba(255,255,255,.9)!important;
}
.material-graph-tabs button{
  height:34px!important;
  font-size:14px!important;
  color:#7b8088!important;
}
.material-graph-tabs button.active{
  background:#fff!important;
  box-shadow:0 8px 20px rgba(15,23,42,.08),inset 0 1px 0 #fff!important;
  color:#24272d!important;
}
.material-graph-metric{
  padding:0 38px!important;
  margin:4px 0 0!important;
  align-items:baseline!important;
}
.material-graph-metric strong{
  font-size:48px!important;
  font-weight:400!important;
  color:#202329!important;
  letter-spacing:-.058em!important;
}
.material-graph-metric span{
  margin:0!important;
  padding:5px 9px!important;
  border-radius:999px!important;
  background:rgba(32,201,151,.1)!important;
  font-size:13px!important;
  font-weight:500!important;
}
.material-graph-metric span.negative{
  background:rgba(255,138,42,.11)!important;
}
.material-graph-wrap{
  height:132px!important;
  margin:0 38px!important;
  transform:translateY(-2px)!important;
}
#material-control-chart{
  height:132px!important;
}
.material-chart-line{
  stroke:#20c997!important;
  stroke-width:3.4!important;
  filter:drop-shadow(0 7px 14px rgba(32,201,151,.2))!important;
}
.material-chart-area{
  opacity:.85!important;
}
.material-chart-guide{
  stroke:rgba(32,201,151,.24)!important;
  stroke-dasharray:4 7!important;
}
.material-chart-dot{
  fill:#20c997!important;
  stroke:#fff!important;
  stroke-width:3!important;
  filter:drop-shadow(0 8px 16px rgba(32,201,151,.35))!important;
}
.material-graph-tooltip{
  top:12px!important;
  right:17%!important;
  padding:8px 14px!important;
  font-size:13px!important;
  color:#69707a!important;
  border:1px solid rgba(17,24,39,.045)!important;
}
.material-graph-axis{
  padding:0 38px!important;
  transform:translateY(-5px)!important;
  color:#a0a6ae!important;
  font-size:11px!important;
  font-weight:600!important;
}
.material-graph-stats{
  grid-template-columns:repeat(3,1fr)!important;
  gap:10px!important;
  padding:8px 34px 18px!important;
}
.material-graph-stats>div{
  display:grid!important;
  grid-template-columns:24px 1fr!important;
  grid-template-rows:auto auto!important;
  align-items:center!important;
  min-height:70px!important;
  padding:12px!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.66)!important;
  border:1px solid rgba(17,24,39,.055)!important;
  box-shadow:0 8px 20px rgba(15,23,42,.035),inset 0 1px 0 rgba(255,255,255,.85)!important;
}
.material-graph-stats .stat-icon{
  grid-row:1 / 3!important;
  width:24px!important;
  height:24px!important;
  border-radius:8px!important;
}
.material-graph-stats span:not(.stat-icon){
  align-self:end!important;
  font-size:12px!important;
  color:#717780!important;
  white-space:nowrap!important;
}
.material-graph-stats strong{
  align-self:start!important;
  font-size:20px!important;
  font-weight:400!important;
  color:#25282e!important;
}
.material-graph-panel .control-insight{
  width:calc(100% - 68px)!important;
  margin:0 34px 22px!important;
  min-height:54px!important;
  border-radius:18px!important;
  background:rgba(52,199,89,.08)!important;
  border-color:rgba(52,199,89,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 8px 20px rgba(52,199,89,.07)!important;
}
.material-graph-panel .control-insight .control-insight-icon{
  width:34px!important;
  height:34px!important;
  background:#34c759!important;
}
.material-graph-panel .control-insight #control-insight-title{
  font-size:13px!important;
  font-weight:600!important;
  color:#202329!important;
}
.material-graph-panel .control-insight b{
  color:#1fa765!important;
}
@media(max-width:900px){
  .material-graph-stats{grid-template-columns:1fr!important;padding:10px 20px 16px!important;}
  .material-graph-stats>div{min-height:54px!important;grid-template-columns:28px 1fr auto!important;grid-template-rows:auto!important;}
  .material-graph-stats .stat-icon{grid-row:auto!important;}
  .material-graph-stats span:not(.stat-icon){align-self:center!important;}
  .material-graph-stats strong{align-self:center!important;}
}

/* Material graph alignment fixes: tabs spacing, true circle dot, clean stat alignment. */
.material-graph-panel .panel-head{
  padding-bottom:18px!important;
}
.material-graph-tabs{
  margin-top:12px!important;
  margin-bottom:20px!important;
  transform:none!important;
}
.material-graph-wrap{
  overflow:visible!important;
}
#material-control-chart{
  overflow:visible!important;
}
.material-chart-dot{
  vector-effect:non-scaling-stroke!important;
  transform-box:fill-box!important;
  transform-origin:center!important;
}
.material-chart-line,
.material-chart-guide{
  vector-effect:non-scaling-stroke!important;
}
.material-graph-stats{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:stretch!important;
  gap:12px!important;
}
.material-graph-stats>div{
  display:grid!important;
  grid-template-columns:30px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  column-gap:12px!important;
  row-gap:3px!important;
  align-items:center!important;
  min-height:78px!important;
  padding:14px 16px!important;
}
.material-graph-stats .stat-icon{
  grid-column:1!important;
  grid-row:1 / 3!important;
  align-self:center!important;
  justify-self:start!important;
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  border-radius:9px!important;
}
.material-graph-stats span:not(.stat-icon){
  grid-column:2!important;
  grid-row:1!important;
  align-self:end!important;
  justify-self:start!important;
  width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  line-height:1.15!important;
  font-size:12px!important;
}
.material-graph-stats strong{
  grid-column:2!important;
  grid-row:2!important;
  align-self:start!important;
  justify-self:start!important;
  text-align:left!important;
  line-height:1.05!important;
  font-size:21px!important;
}
@media(max-width:900px){
  .material-graph-tabs{margin-top:10px!important;}
  .material-graph-stats{grid-template-columns:1fr!important;}
  .material-graph-stats>div{
    grid-template-columns:32px minmax(0,1fr) auto!important;
    grid-template-rows:1fr!important;
    min-height:58px!important;
  }
  .material-graph-stats .stat-icon{grid-column:1!important;grid-row:1!important;}
  .material-graph-stats span:not(.stat-icon){grid-column:2!important;grid-row:1!important;align-self:center!important;}
  .material-graph-stats strong{grid-column:3!important;grid-row:1!important;align-self:center!important;justify-self:end!important;text-align:right!important;}
}

/* Material graph dynamic tooltip and wider chart span. */
.material-graph-wrap{
  margin-left:26px!important;
  margin-right:26px!important;
}
#material-control-chart{
  width:100%!important;
}
.material-graph-tooltip{
  right:8%!important;
  max-width:180px!important;
  white-space:nowrap!important;
  font-size:12px!important;
  padding:8px 12px!important;
}
.material-graph-axis{
  padding-left:26px!important;
  padding-right:26px!important;
}
@media(max-width:900px){
  .material-graph-wrap{margin-left:14px!important;margin-right:14px!important;}
  .material-graph-axis{padding-left:14px!important;padding-right:14px!important;}
  .material-graph-tooltip{right:6%!important;}
}

/* Material graph axis alignment: keep dates inside and aligned with chart points. */
.material-graph-wrap,
.material-graph-axis{
  margin-left:38px!important;
  margin-right:38px!important;
}
.material-graph-wrap{
  padding:0!important;
}
.material-graph-axis{
  display:grid!important;
  grid-template-columns:1fr 1fr 1fr!important;
  padding:0 0!important;
  width:auto!important;
  transform:translateY(-3px)!important;
}
.material-graph-axis span{
  min-width:0!important;
  white-space:nowrap!important;
}
.material-graph-axis span:first-child{
  text-align:left!important;
  padding-left:10px!important;
}
.material-graph-axis span:nth-child(2){
  text-align:center!important;
}
.material-graph-axis span:last-child{
  text-align:right!important;
  padding-right:10px!important;
}
.material-graph-tooltip{
  right:11%!important;
}
@media(max-width:900px){
  .material-graph-wrap,
  .material-graph-axis{margin-left:20px!important;margin-right:20px!important;}
  .material-graph-axis span:first-child{padding-left:8px!important;}
  .material-graph-axis span:last-child{padding-right:8px!important;}
}

/* Material graph exact edge alignment with date labels. */
.material-graph-wrap,
.material-graph-axis{
  margin-left:46px!important;
  margin-right:46px!important;
}
.material-graph-axis{
  grid-template-columns:auto 1fr auto!important;
}
.material-graph-axis span:first-child{
  padding-left:0!important;
  text-align:left!important;
}
.material-graph-axis span:nth-child(2){
  text-align:center!important;
}
.material-graph-axis span:last-child{
  padding-right:0!important;
  text-align:right!important;
}
#material-control-chart{
  display:block!important;
}
@media(max-width:900px){
  .material-graph-wrap,
  .material-graph-axis{margin-left:26px!important;margin-right:26px!important;}
}

/* Material graph span like requested sketch: align chart endpoints with date label span. */
.material-graph-wrap,
.material-graph-axis{
  margin-left:52px!important;
  margin-right:52px!important;
}
.material-graph-wrap{
  height:124px!important;
  margin-top:-2px!important;
}
#material-control-chart{
  height:124px!important;
}
.material-graph-axis{
  margin-top:-4px!important;
  transform:none!important;
  grid-template-columns:1fr 1fr 1fr!important;
}
.material-graph-axis span:first-child{
  text-align:left!important;
}
.material-graph-axis span:nth-child(2){
  text-align:center!important;
}
.material-graph-axis span:last-child{
  text-align:right!important;
}
.material-graph-tooltip{
  right:7%!important;
}
@media(max-width:900px){
  .material-graph-wrap,
  .material-graph-axis{margin-left:32px!important;margin-right:32px!important;}
}

/* Remove material graph tooltip bubble completely. */
.material-graph-tooltip,
.material-graph-tooltip:after{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}

/* Extend material chart line itself to match the visible date edge guides. */
.material-graph-wrap,
.material-graph-axis{
  margin-left:64px!important;
  margin-right:64px!important;
}
.material-graph-wrap{
  overflow:visible!important;
}
#material-control-chart{
  overflow:visible!important;
}
.material-chart-area,
.material-chart-line{
  clip-path:none!important;
}
.material-graph-axis{
  grid-template-columns:1fr 1fr 1fr!important;
}
.material-graph-axis span:first-child{text-align:left!important;}
.material-graph-axis span:nth-child(2){text-align:center!important;}
.material-graph-axis span:last-child{text-align:right!important;}
@media(max-width:900px){
  .material-graph-wrap,
  .material-graph-axis{margin-left:38px!important;margin-right:38px!important;}
}

/* Final font hierarchy system: clear readable levels across the whole program. */
:root{
  --type-font:"SF Pro Display","BS SF Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --type-title:#1f2329;
  --type-body:#2b3037;
  --type-muted:#6f7680;
  --type-soft:#8e96a1;
  --type-h1:32px;
  --type-h2:20px;
  --type-h3:16px;
  --type-body-size:14px;
  --type-small:12px;
  --type-label:11px;
}
html,body{
  font-family:var(--type-font)!important;
  font-size:var(--type-body-size)!important;
  font-weight:400!important;
  line-height:1.42!important;
  letter-spacing:0!important;
  color:var(--type-body)!important;
  font-kerning:normal!important;
  text-rendering:optimizeLegibility!important;
  -webkit-font-smoothing:antialiased!important;
  -moz-osx-font-smoothing:grayscale!important;
}
body,button,input,select,textarea,table{
  font-family:var(--type-font)!important;
}
.topbar h1,
.login-heading h1{
  font-size:var(--type-h1)!important;
  line-height:1.06!important;
  font-weight:520!important;
  letter-spacing:-.018em!important;
  color:var(--type-title)!important;
}
.panel-head h2,
.settings-card h2,
.dialog-head h2,
.admin-card h2,
.detail-head h2,
.section-title h2,
.page-title,
.card-title{
  font-size:var(--type-h2)!important;
  line-height:1.12!important;
  font-weight:520!important;
  letter-spacing:-.014em!important;
  color:var(--type-title)!important;
}
.section-title h3,
.detail-section-title,
.supplier-card h3,
.admin-panel-title,
.kpi-detail-title{
  font-size:var(--type-h3)!important;
  line-height:1.16!important;
  font-weight:520!important;
  letter-spacing:-.01em!important;
  color:var(--type-title)!important;
}
p,
.panel-head p,
.topbar p,
.section-title p,
.settings-card>p,
.login-heading p,
.detail-note,
.table-sub,
.empty-state span,
.supplier-contact p{
  font-size:13px!important;
  line-height:1.42!important;
  font-weight:400!important;
  letter-spacing:0!important;
  color:var(--type-muted)!important;
}
small,
.kpi small,
.linked-picker-row small{
  font-size:11px!important;
  line-height:1.35!important;
  font-weight:400!important;
  letter-spacing:0!important;
  color:var(--type-soft)!important;
}
label,
.form-grid label,
.invoice-bottom label,
.settings-card label,
.form-stack label{
  font-size:12px!important;
  line-height:1.24!important;
  font-weight:500!important;
  letter-spacing:0!important;
  color:#58616c!important;
}
input,
select,
textarea{
  font-size:14px!important;
  line-height:1.2!important;
  font-weight:400!important;
  letter-spacing:0!important;
  color:var(--type-body)!important;
}
input::placeholder,
textarea::placeholder{
  font-weight:400!important;
  letter-spacing:0!important;
  color:#9aa2ad!important;
}
.nav-item,
.logout-button,
.sidebar-user,
.sidebar-language,
.btn,
.link-btn,
.admin-tab{
  font-size:13px!important;
  line-height:1!important;
  font-weight:520!important;
  letter-spacing:0!important;
}
.nav-label{
  font-size:13px!important;
  font-weight:520!important;
  letter-spacing:0!important;
}
th,
.material-head,
.kpi span,
.detail-field span,
.supplier-stats span,
.kpi-summary-strip span,
.project-quick-stats span,
.login-heading>span{
  font-size:10px!important;
  line-height:1.15!important;
  font-weight:650!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
  color:#7c838d!important;
}
td{
  font-size:13px!important;
  line-height:1.28!important;
  font-weight:400!important;
  letter-spacing:0!important;
  color:var(--type-body)!important;
}
.badge,
.document-badge,
.source-chip,
.control-status-chip{
  font-size:11px!important;
  line-height:1!important;
  font-weight:560!important;
  letter-spacing:0!important;
}
.kpi strong,
.kpi-value,
.stat-value,
#donut-rate,
#project-donut-rate,
.legend strong,
.detail-field strong,
.total-box strong,
.supplier-stats strong,
.kpi-summary-strip strong,
.project-quick-stats strong,
.line-total,
.mono,
td.right,
input[type="number"]{
  font-family:var(--type-font)!important;
  font-weight:400!important;
  font-variant-numeric:tabular-nums lining-nums!important;
  font-feature-settings:"tnum" 1,"lnum" 1,"kern" 1!important;
  letter-spacing:-.012em!important;
}
.kpi strong,
.kpi-value,
.stat-value{
  font-size:28px!important;
  line-height:1.04!important;
}
.detail-field strong,
.total-box strong,
.supplier-stats strong,
.kpi-summary-strip strong{
  font-size:15px!important;
  line-height:1.15!important;
  color:var(--type-title)!important;
}
.invoice-link{
  font-weight:620!important;
  letter-spacing:0!important;
}
.decimal-part{
  font-size:.56em!important;
  font-weight:400!important;
  color:#7c8490!important;
  letter-spacing:0!important;
  margin-left:2px!important;
}
@media(max-width:900px){
  :root{--type-h1:26px;--type-h2:18px;--type-h3:15px;}
  .kpi strong,.kpi-value,.stat-value{font-size:25px!important;}
  td{font-size:13px!important;}
}

/* Material graph + dates full width to requested blue guide lines. */
.material-graph-wrap,
.material-graph-axis{
  margin-left:14px!important;
  margin-right:14px!important;
}
.material-graph-wrap{
  overflow:visible!important;
}
#material-control-chart{
  overflow:visible!important;
  width:100%!important;
}
.material-graph-axis{
  grid-template-columns:1fr 1fr 1fr!important;
  width:auto!important;
}
.material-graph-axis span:first-child{
  text-align:left!important;
  padding-left:0!important;
}
.material-graph-axis span:nth-child(2){
  text-align:center!important;
}
.material-graph-axis span:last-child{
  text-align:right!important;
  padding-right:0!important;
}
@media(max-width:900px){
  .material-graph-wrap,
  .material-graph-axis{margin-left:10px!important;margin-right:10px!important;}
}

/* Sync material graph and date axis width exactly. */
.material-graph-wrap,
.material-graph-axis{
  margin-left:58px!important;
  margin-right:58px!important;
}
#material-control-chart{
  width:100%!important;
  height:124px!important;
  overflow:visible!important;
}
.material-graph-axis{
  display:grid!important;
  grid-template-columns:1fr 1fr 1fr!important;
  padding:0!important;
  width:auto!important;
  margin-top:-4px!important;
}
.material-graph-axis span:first-child{text-align:left!important;padding:0!important;}
.material-graph-axis span:nth-child(2){text-align:center!important;padding:0!important;}
.material-graph-axis span:last-child{text-align:right!important;padding:0!important;}
.material-chart-dot{
  transform-box:fill-box!important;
  transform-origin:center!important;
  vector-effect:non-scaling-stroke!important;
}
@media(max-width:900px){
  .material-graph-wrap,
  .material-graph-axis{margin-left:34px!important;margin-right:34px!important;}
}

/* Final small nudge: align material graph closer to the main metric edge. */
.material-graph-wrap,
.material-graph-axis{
  margin-left:46px!important;
  margin-right:46px!important;
}
@media(max-width:900px){
  .material-graph-wrap,
  .material-graph-axis{margin-left:28px!important;margin-right:28px!important;}
}

/* Perfect circular dot for material graph; leaves all other graph sizing untouched. */
.material-chart-dot{
  display:none!important;
}
.material-control-dot-html{
  position:absolute!important;
  width:10px!important;
  height:10px!important;
  border-radius:50%!important;
  background:#20c997!important;
  border:3px solid #fff!important;
  box-sizing:content-box!important;
  transform:translate(-50%,-50%)!important;
  box-shadow:0 8px 16px rgba(32,201,151,.35)!important;
  pointer-events:none!important;
  z-index:3!important;
}

/* Match approval requests icon with the orange section accent. */
#admin-requests .admin-card-icon,
#view-admin .admin-card.requests-card .admin-card-icon,
#view-admin [data-admin-panel="requests"] .admin-card-icon,
#view-admin .requests-panel .admin-card-icon{
  background:#ff941f!important;
  color:#fff!important;
  border-color:#ff941f!important;
  box-shadow:0 10px 22px rgba(255,148,31,.22)!important;
}
#admin-requests .admin-card-icon svg,
#view-admin .admin-card.requests-card .admin-card-icon svg,
#view-admin [data-admin-panel="requests"] .admin-card-icon svg,
#view-admin .requests-panel .admin-card-icon svg{
  stroke:#fff!important;
}

/* Correct approval title icon color: match orange request accent. */
#view-admin > .approval-panel .panel-title-symbol,
#view-admin .approval-panel .panel-title-icon > .panel-title-symbol{
  background:#ff9500!important;
  border-color:#ff9500!important;
  color:#fff!important;
  box-shadow:0 10px 22px rgba(255,149,0,.24)!important;
}
#view-admin > .approval-panel .panel-title-symbol svg,
#view-admin .approval-panel .panel-title-icon > .panel-title-symbol svg{
  stroke:#fff!important;
}

/* Dashboard KPI cards: slightly larger with more white space. */
#view-dashboard .kpi-grid{
  gap:18px!important;
  margin-bottom:24px!important;
}
#view-dashboard .kpi{
  min-height:132px!important;
  padding:28px 28px!important;
  gap:22px!important;
  border-radius:26px!important;
  align-items:center!important;
}
#view-dashboard .kpi-icon{
  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  border-radius:18px!important;
}
#view-dashboard .kpi-icon svg{
  width:25px!important;
  height:25px!important;
}
#view-dashboard .kpi span{
  margin-bottom:8px!important;
  font-size:11px!important;
  line-height:1.1!important;
}
#view-dashboard .kpi strong{
  font-size:31px!important;
  line-height:1.02!important;
  margin:0 0 8px!important;
}
#view-dashboard .kpi small{
  font-size:12px!important;
  line-height:1.25!important;
}
#view-dashboard .kpi-action:after{
  right:24px!important;
  top:26px!important;
}
@media(max-width:1400px){
  #view-dashboard .kpi{padding:24px 22px!important;gap:18px!important;}
  #view-dashboard .kpi strong{font-size:28px!important;}
  #view-dashboard .kpi-icon{width:54px!important;height:54px!important;min-width:54px!important;}
}
@media(max-width:900px){
  #view-dashboard .kpi{min-height:118px!important;padding:22px!important;}
}

/* Dashboard KPI inner layout: icon + number on top, label and small text below. */
#view-dashboard .kpi{
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr) auto!important;
  grid-template-rows:auto auto auto!important;
  align-items:center!important;
  column-gap:18px!important;
  row-gap:0!important;
}
#view-dashboard .kpi-icon{
  grid-column:1!important;
  grid-row:1!important;
  align-self:center!important;
}
#view-dashboard .kpi strong{
  grid-column:2!important;
  grid-row:1!important;
  align-self:center!important;
  margin:0!important;
}
#view-dashboard .kpi span{
  grid-column:1 / -1!important;
  grid-row:2!important;
  margin:20px 0 7px!important;
  font-size:12px!important;
  font-weight:650!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
  color:#747b86!important;
}
#view-dashboard .kpi small{
  grid-column:1 / -1!important;
  grid-row:3!important;
  margin:0!important;
  font-size:12px!important;
  font-weight:400!important;
  letter-spacing:0!important;
  color:#8c949f!important;
}
#view-dashboard .kpi-action:after{
  grid-column:3!important;
  grid-row:1!important;
  position:absolute!important;
}
@media(max-width:1400px){
  #view-dashboard .kpi{
    grid-template-columns:54px minmax(0,1fr) auto!important;
    column-gap:16px!important;
  }
  #view-dashboard .kpi span{margin-top:18px!important;}
}
@media(max-width:900px){
  #view-dashboard .kpi{
    grid-template-columns:54px minmax(0,1fr)!important;
  }
}

/* Dashboard KPI layout fix: apply layout to actual inner wrapper. */
#view-dashboard .kpi{
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr) 18px!important;
  grid-template-rows:auto auto!important;
  align-items:start!important;
  column-gap:18px!important;
  row-gap:0!important;
}
#view-dashboard .kpi > .kpi-icon{
  grid-column:1!important;
  grid-row:1!important;
  align-self:start!important;
  margin-top:0!important;
}
#view-dashboard .kpi > div:not(.kpi-icon){
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  grid-column:1 / -1!important;
  grid-row:1 / 3!important;
  padding-left:76px!important;
}
#view-dashboard .kpi > div:not(.kpi-icon) strong{
  order:1!important;
  display:block!important;
  margin:0!important;
  min-height:58px!important;
  line-height:58px!important;
  white-space:nowrap!important;
}
#view-dashboard .kpi > div:not(.kpi-icon) span{
  order:2!important;
  display:block!important;
  margin:18px 0 7px!important;
  text-transform:uppercase!important;
  letter-spacing:.055em!important;
}
#view-dashboard .kpi > div:not(.kpi-icon) small{
  order:3!important;
  display:block!important;
  margin:0!important;
}
#view-dashboard .kpi-action:after{
  right:22px!important;
  top:24px!important;
}
@media(max-width:1400px){
  #view-dashboard .kpi{grid-template-columns:54px minmax(0,1fr) 18px!important;column-gap:16px!important;}
  #view-dashboard .kpi > div:not(.kpi-icon){padding-left:70px!important;}
  #view-dashboard .kpi > div:not(.kpi-icon) strong{min-height:54px!important;line-height:54px!important;}
}

/* Dashboard KPI layout correction: compact top row, no decimal wrap. */
#view-dashboard .kpi{
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr) 16px!important;
  grid-template-rows:auto auto auto!important;
  align-items:start!important;
  column-gap:16px!important;
  row-gap:0!important;
  min-height:136px!important;
  padding:28px 26px 24px!important;
}
#view-dashboard .kpi > .kpi-icon{
  grid-column:1!important;
  grid-row:1!important;
  align-self:start!important;
  justify-self:start!important;
  margin:0!important;
}
#view-dashboard .kpi > div:not(.kpi-icon){
  display:contents!important;
  padding:0!important;
  min-width:0!important;
}
#view-dashboard .kpi > div:not(.kpi-icon) strong{
  grid-column:2!important;
  grid-row:1!important;
  align-self:center!important;
  justify-self:start!important;
  display:block!important;
  margin:0!important;
  min-height:0!important;
  line-height:58px!important;
  white-space:nowrap!important;
  overflow:visible!important;
  font-size:29px!important;
}
#view-dashboard .kpi > div:not(.kpi-icon) strong .decimal-part{
  display:inline!important;
  white-space:nowrap!important;
  vertical-align:baseline!important;
  margin-left:2px!important;
}
#view-dashboard .kpi > div:not(.kpi-icon) span{
  grid-column:1 / 3!important;
  grid-row:2!important;
  display:block!important;
  margin:22px 0 7px!important;
  justify-self:start!important;
  text-align:left!important;
  text-transform:uppercase!important;
  letter-spacing:.055em!important;
}
#view-dashboard .kpi > div:not(.kpi-icon) small{
  grid-column:1 / 3!important;
  grid-row:3!important;
  display:block!important;
  margin:0!important;
  justify-self:start!important;
  text-align:left!important;
}
#view-dashboard .kpi-action:after{
  right:22px!important;
  top:29px!important;
}
@media(max-width:1500px){
  #view-dashboard .kpi{grid-template-columns:54px minmax(0,1fr) 14px!important;column-gap:14px!important;padding-left:22px!important;padding-right:22px!important;}
  #view-dashboard .kpi > div:not(.kpi-icon) strong{font-size:27px!important;line-height:54px!important;}
}

/* Unified KPI card layout across all KPI grids; scoped to real .kpi-grid cards only. */
.kpi-grid .kpi{
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr) 16px!important;
  grid-template-rows:auto auto auto!important;
  align-items:start!important;
  column-gap:16px!important;
  row-gap:0!important;
  min-height:136px!important;
  padding:28px 26px 24px!important;
}
.kpi-grid .kpi > .kpi-icon{
  grid-column:1!important;
  grid-row:1!important;
  align-self:start!important;
  justify-self:start!important;
  margin:0!important;
}
.kpi-grid .kpi > div:not(.kpi-icon){
  display:contents!important;
  padding:0!important;
  min-width:0!important;
}
.kpi-grid .kpi > div:not(.kpi-icon) strong{
  grid-column:2!important;
  grid-row:1!important;
  align-self:center!important;
  justify-self:start!important;
  display:block!important;
  margin:0!important;
  min-height:0!important;
  line-height:58px!important;
  white-space:nowrap!important;
  overflow:visible!important;
  font-size:29px!important;
}
.kpi-grid .kpi > div:not(.kpi-icon) strong .decimal-part{
  display:inline!important;
  white-space:nowrap!important;
  vertical-align:baseline!important;
  margin-left:2px!important;
}
.kpi-grid .kpi > div:not(.kpi-icon) span{
  grid-column:1 / 3!important;
  grid-row:2!important;
  display:block!important;
  margin:22px 0 7px!important;
  justify-self:start!important;
  text-align:left!important;
  text-transform:uppercase!important;
  letter-spacing:.055em!important;
}
.kpi-grid .kpi > div:not(.kpi-icon) small{
  grid-column:1 / 3!important;
  grid-row:3!important;
  display:block!important;
  margin:0!important;
  justify-self:start!important;
  text-align:left!important;
}
.kpi-grid .kpi-action:after{
  right:22px!important;
  top:29px!important;
}
@media(max-width:1500px){
  .kpi-grid .kpi{
    grid-template-columns:54px minmax(0,1fr) 14px!important;
    column-gap:14px!important;
    padding-left:22px!important;
    padding-right:22px!important;
  }
  .kpi-grid .kpi > div:not(.kpi-icon) strong{
    font-size:27px!important;
    line-height:54px!important;
  }
}
@media(max-width:900px){
  .kpi-grid .kpi{
    grid-template-columns:54px minmax(0,1fr) 14px!important;
    min-height:126px!important;
  }
}

/* Agreement access modal: lock icon instead of BS logo. */
.agreement-access-card > img{
  display:none!important;
}
.agreement-access-lock{
  width:64px!important;
  height:64px!important;
  margin:0 auto 22px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:20px!important;
  background:#000!important;
  color:#fff!important;
  box-shadow:0 14px 32px rgba(0,0,0,.16)!important;
}
.agreement-access-lock svg{
  width:30px!important;
  height:30px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

/* Firmë / Person type badge. */
.entity-kind-badge{
  height:32px!important;
  display:inline-flex!important;
  align-items:center!important;
  padding:0 10px!important;
  border-radius:999px!important;
  font-size:11px!important;
  font-weight:600!important;
  letter-spacing:0!important;
  background:#eef2f6!important;
  color:#5e6672!important;
  border:1px solid rgba(15,23,42,.06)!important;
}
.entity-kind-badge.person{
  background:#eef6ff!important;
  color:#087cf0!important;
  border-color:rgba(8,124,240,.12)!important;
}
.entity-kind-badge.firm{
  background:#f2f4f7!important;
  color:#4f5965!important;
}

/* Entity edit dialog: keep the delete action readable without overlapping save/cancel. */
#entity-modal .dialog-actions{
  display:grid!important;
  grid-template-columns:minmax(190px,1fr) auto auto!important;
  align-items:center!important;
  gap:12px!important;
}
#entity-modal #delete-entity{
  justify-self:start!important;
  max-width:100%!important;
  min-width:0!important;
  padding-inline:16px!important;
  overflow:visible!important;
}
#entity-modal #delete-entity span{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#entity-modal .dialog-actions .btn.ghost{
  justify-self:end!important;
}
#entity-modal .dialog-actions .btn.primary{
  justify-self:end!important;
}
@media(max-width:640px){
  #entity-modal .dialog-actions{
    grid-template-columns:1fr 1fr!important;
  }
  #entity-modal #delete-entity{
    grid-column:1 / -1!important;
    width:100%!important;
    justify-self:stretch!important;
  }
  #entity-modal #delete-entity span{
    overflow:visible!important;
    text-overflow:clip!important;
  }
  #entity-modal .dialog-actions .btn.ghost,
  #entity-modal .dialog-actions .btn.primary{
    width:100%!important;
    justify-self:stretch!important;
  }
}

/* Entity edit dialog: make delete action icon-only to avoid overflow in narrow dialogs. */
#entity-modal #delete-entity{
  width:48px!important;
  min-width:48px!important;
  max-width:48px!important;
  height:44px!important;
  padding:0!important;
  border-radius:14px!important;
  justify-self:start!important;
  flex:0 0 48px!important;
}
#entity-modal #delete-entity span{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
#entity-modal #delete-entity .btn-icon{
  margin:0!important;
}
@media(max-width:640px){
  #entity-modal .dialog-actions{
    grid-template-columns:48px 1fr 1fr!important;
  }
  #entity-modal #delete-entity{
    grid-column:auto!important;
    width:48px!important;
    justify-self:start!important;
  }
}

/* Entity edit dialog: final footer alignment, delete icon stays inside the modal. */
#entity-modal .dialog.small form{
  overflow:hidden!important;
}
#entity-modal .dialog.small .dialog-actions{
  box-sizing:border-box!important;
  width:100%!important;
  margin:0!important;
  display:grid!important;
  grid-template-columns:48px minmax(112px,1fr) minmax(112px,1fr)!important;
  justify-content:stretch!important;
  justify-items:stretch!important;
  align-items:center!important;
  column-gap:12px!important;
  padding-left:30px!important;
  padding-right:30px!important;
}
#entity-modal .dialog.small #delete-entity{
  position:static!important;
  grid-column:1!important;
  grid-row:1!important;
  place-self:center start!important;
  transform:none!important;
  margin:0!important;
  inset:auto!important;
  width:48px!important;
  min-width:48px!important;
  max-width:48px!important;
  height:44px!important;
}
#entity-modal .dialog.small .dialog-actions .btn.ghost{
  grid-column:2!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  justify-self:stretch!important;
}
#entity-modal .dialog.small .dialog-actions .btn.primary{
  grid-column:3!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  justify-self:stretch!important;
}
@media(max-width:640px){
  #entity-modal .dialog.small .dialog-actions{
    grid-template-columns:48px minmax(96px,1fr) minmax(96px,1fr)!important;
    padding-left:20px!important;
    padding-right:20px!important;
  }
}

/* Invoice detail modal: allow full scrolling through materials above the sticky footer. */
#invoice-detail-modal .detail-dialog{
  display:flex!important;
  flex-direction:column!important;
  max-height:calc(100vh - 52px)!important;
}
#invoice-detail-modal #invoice-detail-content{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-bottom:118px!important;
  scrollbar-gutter:stable!important;
}
#invoice-detail-modal #invoice-detail-content .table-wrap{
  overflow-x:auto!important;
  overflow-y:visible!important;
}
#invoice-detail-modal .detail-actions{
  flex:0 0 auto!important;
  position:sticky!important;
  bottom:0!important;
  z-index:5!important;
  background:rgba(255,255,255,.96)!important;
  backdrop-filter:blur(18px)!important;
  box-shadow:0 -18px 36px rgba(255,255,255,.9)!important;
}
@media(max-width:820px){
  #invoice-detail-modal .detail-dialog{
    max-height:calc(100vh - 28px)!important;
  }
  #invoice-detail-modal #invoice-detail-content{
    padding-bottom:148px!important;
  }
}

/* My requests: staff/user approval icon follows the orange request accent. */
#view-my-requests .my-requests-panel .panel-title-symbol,
#view-my-requests .my-requests-panel .panel-title-icon > .panel-title-symbol{
  background:#ff9500!important;
  color:#fff!important;
  border-color:#ff9500!important;
  box-shadow:0 12px 28px rgba(255,149,0,.24)!important;
}
#view-my-requests .my-requests-panel .panel-title-symbol svg{
  stroke:currentColor!important;
}

/* User modal: scroll the permission body so all access options are reachable. */
#user-modal .user-dialog{
  display:flex!important;
  flex-direction:column!important;
  max-height:calc(100vh - 44px)!important;
  overflow:hidden!important;
}
#user-modal #user-form{
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
  flex:1 1 auto!important;
  overflow:hidden!important;
  padding:0!important;
}
#user-modal #user-form > .form-stack{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:26px 30px 118px!important;
  scrollbar-gutter:stable!important;
}
#user-modal #user-form > .dialog-actions{
  flex:0 0 auto!important;
  margin:0!important;
  background:rgba(255,255,255,.96)!important;
  backdrop-filter:blur(18px)!important;
  box-shadow:0 -18px 36px rgba(255,255,255,.92)!important;
}
@media(max-width:820px){
  #user-modal .user-dialog{
    max-height:calc(100vh - 24px)!important;
  }
  #user-modal #user-form > .form-stack{
    padding:22px 20px 148px!important;
  }
}

/* Global modal scroll system: every full dialog keeps header/actions visible and scrolls the body. */
.modal:not(#notifications-modal):not(#confirm-modal):not(#agreement-access-modal).open{
  align-items:center!important;
  justify-content:center!important;
  padding:18px!important;
  overflow:hidden!important;
}
.modal:not(#notifications-modal):not(#confirm-modal):not(#agreement-access-modal) > .dialog{
  display:flex!important;
  flex-direction:column!important;
  max-height:calc(100vh - 36px)!important;
  overflow:hidden!important;
  margin:0 auto!important;
}
.modal:not(#notifications-modal):not(#confirm-modal):not(#agreement-access-modal) .dialog-head{
  flex:0 0 auto!important;
}
.modal:not(#notifications-modal):not(#confirm-modal):not(#agreement-access-modal):not(#invoice-modal) .dialog > form{
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:hidden!important;
  padding:0!important;
}
.modal:not(#notifications-modal):not(#confirm-modal):not(#agreement-access-modal):not(#invoice-modal) .dialog > form > :not(.dialog-actions){
  min-height:0!important;
}
.modal:not(#notifications-modal):not(#confirm-modal):not(#agreement-access-modal):not(#invoice-modal) .dialog > form > .form-stack,
.modal:not(#notifications-modal):not(#confirm-modal):not(#agreement-access-modal):not(#invoice-modal) .dialog > form > .form-grid,
.modal:not(#notifications-modal):not(#confirm-modal):not(#agreement-access-modal):not(#invoice-modal) .dialog > form > #entity-fields{
  flex:1 1 auto!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:26px 30px 118px!important;
  scrollbar-gutter:stable!important;
}
.modal:not(#notifications-modal):not(#confirm-modal):not(#agreement-access-modal) .dialog > .detail-content,
#supplier-info-modal #supplier-info-content,
#kpi-detail-modal #kpi-detail-content{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-bottom:118px!important;
  scrollbar-gutter:stable!important;
}
.modal:not(#notifications-modal):not(#confirm-modal):not(#agreement-access-modal) .dialog-actions,
.modal:not(#notifications-modal):not(#confirm-modal):not(#agreement-access-modal) .detail-actions{
  flex:0 0 auto!important;
  margin-top:0!important;
  background:rgba(255,255,255,.96)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  box-shadow:0 -18px 36px rgba(255,255,255,.92)!important;
}
#password-modal .dialog > form > .form-stack{
  padding-bottom:34px!important;
}
#entity-modal .dialog > form > #entity-fields{
  padding-bottom:34px!important;
}
#invoice-modal #invoice-form{
  padding:0!important;
}
#invoice-modal #invoice-form > .dialog-actions{
  margin-top:0!important;
}
@media(max-width:820px){
  .modal:not(#notifications-modal):not(#confirm-modal):not(#agreement-access-modal).open{
    padding:12px!important;
  }
  .modal:not(#notifications-modal):not(#confirm-modal):not(#agreement-access-modal) > .dialog{
    width:calc(100vw - 24px)!important;
    max-height:calc(100vh - 24px)!important;
  }
  .modal:not(#notifications-modal):not(#confirm-modal):not(#agreement-access-modal):not(#invoice-modal) .dialog > form > .form-stack,
  .modal:not(#notifications-modal):not(#confirm-modal):not(#agreement-access-modal):not(#invoice-modal) .dialog > form > .form-grid,
  .modal:not(#notifications-modal):not(#confirm-modal):not(#agreement-access-modal):not(#invoice-modal) .dialog > form > #entity-fields{
    padding:22px 20px 148px!important;
  }
  .modal:not(#notifications-modal):not(#confirm-modal):not(#agreement-access-modal) .dialog > .detail-content,
  #supplier-info-modal #supplier-info-content,
  #kpi-detail-modal #kpi-detail-content{
    padding-bottom:148px!important;
  }
}

/* Invoice modal final override: its form is the scroll body because sections are direct children. */
#invoice-modal .dialog > #invoice-form{
  display:block!important;
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:26px 30px 0!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable!important;
}
#invoice-modal #invoice-form > .dialog-actions{
  position:sticky!important;
  bottom:0!important;
  z-index:6!important;
  margin:24px -30px 0!important;
  padding:22px 30px 28px!important;
  background:rgba(255,255,255,.96)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  box-shadow:0 -18px 36px rgba(255,255,255,.92)!important;
}
@media(max-width:820px){
  #invoice-modal .dialog > #invoice-form{
    padding:22px 20px 0!important;
  }
  #invoice-modal #invoice-form > .dialog-actions{
    margin-left:-20px!important;
    margin-right:-20px!important;
    padding-left:20px!important;
    padding-right:20px!important;
  }
}

/* Invoice modal glitch fix: prevent global modal-scroll rules from splitting invoice sections. */
#invoice-modal .dialog > #invoice-form > .form-grid,
#invoice-modal .dialog > #invoice-form > .linked-documents-field,
#invoice-modal .dialog > #invoice-form > .scan-field,
#invoice-modal .dialog > #invoice-form > .section-title,
#invoice-modal .dialog > #invoice-form > .material-head,
#invoice-modal .dialog > #invoice-form > #material-lines,
#invoice-modal .dialog > #invoice-form > .invoice-bottom{
  flex:initial!important;
  min-height:initial!important;
  overflow:visible!important;
  padding:0!important;
  scrollbar-gutter:auto!important;
}
#invoice-modal .dialog > #invoice-form > .form-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  margin:0!important;
}
#invoice-modal .dialog > #invoice-form > .linked-documents-field,
#invoice-modal .dialog > #invoice-form > .scan-field,
#invoice-modal .dialog > #invoice-form > .section-title,
#invoice-modal .dialog > #invoice-form > .material-head,
#invoice-modal .dialog > #invoice-form > #material-lines,
#invoice-modal .dialog > #invoice-form > .invoice-bottom{
  margin-left:0!important;
  margin-right:0!important;
}
#invoice-modal .dialog > #invoice-form > .linked-documents-field{
  margin-top:18px!important;
}
#invoice-modal .dialog > #invoice-form > .scan-field{
  margin-top:18px!important;
}
#invoice-modal .dialog > #invoice-form > .section-title{
  margin-top:28px!important;
}
#invoice-modal .dialog > #invoice-form > .invoice-bottom{
  margin-top:20px!important;
  margin-bottom:0!important;
}
#invoice-modal #invoice-form > .dialog-actions{
  clear:both!important;
}
@media(max-width:1100px){
  #invoice-modal .dialog > #invoice-form > .form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:700px){
  #invoice-modal .dialog > #invoice-form > .form-grid{
    grid-template-columns:1fr!important;
  }
}

/* Invoice modal hard reset: one scroll container only, no nested sticky/overflow sections. */
#invoice-modal.open{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:16px!important;
  overflow:hidden!important;
}
#invoice-modal.open .dialog.wide{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  width:min(1180px,calc(100vw - 32px))!important;
  max-width:1180px!important;
  height:auto!important;
  max-height:calc(100vh - 32px)!important;
  margin:0!important;
  overflow:hidden!important;
}
#invoice-modal.open .dialog-head{
  position:relative!important;
  top:auto!important;
  z-index:8!important;
  flex:0 0 auto!important;
}
#invoice-modal.open #invoice-form{
  position:relative!important;
  display:block!important;
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:26px 30px 0!important;
  margin:0!important;
  overscroll-behavior:contain!important;
}
#invoice-modal.open #invoice-form > *:not(.dialog-actions),
#invoice-modal.open #invoice-form > .form-grid,
#invoice-modal.open #invoice-form > .linked-documents-field,
#invoice-modal.open #invoice-form > .scan-field,
#invoice-modal.open #invoice-form > .section-title,
#invoice-modal.open #invoice-form > .material-head,
#invoice-modal.open #invoice-form > #material-lines,
#invoice-modal.open #invoice-form > .invoice-bottom{
  position:relative!important;
  top:auto!important;
  bottom:auto!important;
  left:auto!important;
  right:auto!important;
  z-index:auto!important;
  transform:none!important;
  float:none!important;
  clear:none!important;
  width:auto!important;
  max-width:none!important;
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  overflow:visible!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
}
#invoice-modal.open #invoice-form > .form-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  margin-top:0!important;
  margin-bottom:0!important;
  padding-top:0!important;
  padding-bottom:0!important;
}
#invoice-modal.open #invoice-form > .linked-documents-field{
  display:block!important;
  margin-top:18px!important;
  padding:14px!important;
}
#invoice-modal.open #invoice-form > .scan-field{
  display:flex!important;
  margin-top:18px!important;
  padding:14px 15px!important;
}
#invoice-modal.open #invoice-form > .section-title{
  display:flex!important;
  margin-top:28px!important;
  margin-bottom:10px!important;
}
#invoice-modal.open #invoice-form > .material-head{
  display:grid!important;
  margin:0!important;
  padding:9px!important;
}
#invoice-modal.open #invoice-form > #material-lines{
  display:block!important;
  margin:0!important;
  padding:0!important;
}
#invoice-modal.open #invoice-form > .invoice-bottom{
  display:grid!important;
  grid-template-columns:1fr 300px!important;
  gap:24px!important;
  margin-top:20px!important;
  margin-bottom:0!important;
  padding:0!important;
}
#invoice-modal.open #invoice-form > .dialog-actions{
  position:sticky!important;
  bottom:0!important;
  z-index:12!important;
  margin:24px -30px 0!important;
  padding:22px 30px 28px!important;
  border-top:1px solid rgba(0,0,0,.07)!important;
  background:rgba(255,255,255,.97)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  box-shadow:0 -18px 36px rgba(255,255,255,.92)!important;
}
@media(max-width:1100px){
  #invoice-modal.open #invoice-form > .form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:820px){
  #invoice-modal.open{
    padding:0!important;
  }
  #invoice-modal.open .dialog.wide{
    width:100vw!important;
    max-width:none!important;
    height:100vh!important;
    max-height:100vh!important;
    border-radius:0!important;
  }
  #invoice-modal.open #invoice-form{
    padding:22px 20px 0!important;
  }
  #invoice-modal.open #invoice-form > .invoice-bottom{
    grid-template-columns:1fr!important;
  }
  #invoice-modal.open #invoice-form > .dialog-actions{
    margin-left:-20px!important;
    margin-right:-20px!important;
    padding-left:20px!important;
    padding-right:20px!important;
  }
}
@media(max-width:700px){
  #invoice-modal.open #invoice-form > .form-grid{
    grid-template-columns:1fr!important;
  }
  #invoice-modal.open #invoice-form > .scan-field{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
  }
}

/* Invoice modal linked documents: contain the list so it cannot overlap scan/material sections. */
#invoice-modal.open #invoice-form > .linked-documents-field{
  overflow:hidden!important;
  isolation:isolate!important;
}
#invoice-modal.open #invoice-form > .linked-documents-field .linked-documents-head{
  position:relative!important;
  z-index:1!important;
}
#invoice-modal.open #invoice-form > .linked-documents-field .linked-selected{
  max-height:74px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-right:4px!important;
}
#invoice-modal.open #invoice-form > .linked-documents-field .linked-picker{
  display:grid!important;
  gap:8px!important;
  max-height:176px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:0 5px 0 0!important;
  margin-top:10px!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable!important;
}
#invoice-modal.open #invoice-form > .linked-documents-field .linked-picker-row{
  position:relative!important;
  width:100%!important;
  margin:0!important;
  transform:none!important;
}
#invoice-modal.open #invoice-form > .scan-field{
  position:relative!important;
  z-index:2!important;
  margin-top:18px!important;
}
#invoice-modal.open #invoice-form > .section-title,
#invoice-modal.open #invoice-form > .material-head,
#invoice-modal.open #invoice-form > #material-lines,
#invoice-modal.open #invoice-form > .invoice-bottom{
  position:relative!important;
  z-index:1!important;
}
@media(max-height:760px){
  #invoice-modal.open #invoice-form > .linked-documents-field .linked-picker{
    max-height:132px!important;
  }
}

/* Invoice modal final layout repair: wider dialog, one clean scroll body, contained materials. */
#invoice-modal.open{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:12px 20px!important;
  overflow:hidden!important;
}
#invoice-modal.open .dialog.wide{
  width:min(1380px,calc(100vw - 40px))!important;
  max-width:1380px!important;
  max-height:calc(100vh - 24px)!important;
  height:calc(100vh - 24px)!important;
  margin:0!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
#invoice-modal.open .dialog-head{
  flex:0 0 auto!important;
}
#invoice-modal.open #invoice-form{
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:hidden!important;
  padding:0!important;
}
#invoice-modal.open #invoice-form > .form-grid,
#invoice-modal.open #invoice-form > .linked-documents-field,
#invoice-modal.open #invoice-form > .scan-field,
#invoice-modal.open #invoice-form > .section-title,
#invoice-modal.open #invoice-form > .material-head,
#invoice-modal.open #invoice-form > #material-lines,
#invoice-modal.open #invoice-form > .invoice-bottom{
  flex:0 0 auto!important;
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  overflow:visible!important;
  max-height:none!important;
  margin-left:30px!important;
  margin-right:30px!important;
}
#invoice-modal.open #invoice-form > .form-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  margin-top:26px!important;
}
#invoice-modal.open #invoice-form > .linked-documents-field{
  margin-top:18px!important;
  padding:14px!important;
  overflow:hidden!important;
}
#invoice-modal.open #invoice-form > .linked-documents-field .linked-picker{
  max-height:118px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
}
#invoice-modal.open #invoice-form > .scan-field{
  margin-top:18px!important;
  padding:14px 15px!important;
}
#invoice-modal.open #invoice-form > .section-title{
  margin-top:22px!important;
  margin-bottom:10px!important;
}
#invoice-modal.open #invoice-form > .material-head,
#invoice-modal.open #invoice-form > #material-lines{
  min-width:1040px!important;
}
#invoice-modal.open #invoice-form > .material-head{
  display:grid!important;
  margin-top:0!important;
  padding:9px!important;
}
#invoice-modal.open #invoice-form > #material-lines{
  display:block!important;
  flex:1 1 auto!important;
  min-height:96px!important;
  max-height:220px!important;
  overflow-y:auto!important;
  overflow-x:visible!important;
  overscroll-behavior:contain!important;
  padding-bottom:8px!important;
}
#invoice-modal.open #invoice-form > .invoice-bottom{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 360px!important;
  gap:24px!important;
  margin-top:14px!important;
  margin-bottom:0!important;
}
#invoice-modal.open #invoice-form > .dialog-actions{
  flex:0 0 auto!important;
  position:relative!important;
  bottom:auto!important;
  z-index:10!important;
  margin:0!important;
  padding:20px 30px 24px!important;
  background:rgba(255,255,255,.98)!important;
  border-top:1px solid rgba(0,0,0,.07)!important;
  box-shadow:0 -18px 36px rgba(255,255,255,.92)!important;
}
@media(max-width:1180px){
  #invoice-modal.open #invoice-form > .form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #invoice-modal.open #invoice-form > .invoice-bottom{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:820px){
  #invoice-modal.open{
    padding:0!important;
  }
  #invoice-modal.open .dialog.wide{
    width:100vw!important;
    height:100vh!important;
    max-height:100vh!important;
    border-radius:0!important;
  }
  #invoice-modal.open #invoice-form > .form-grid,
  #invoice-modal.open #invoice-form > .linked-documents-field,
  #invoice-modal.open #invoice-form > .scan-field,
  #invoice-modal.open #invoice-form > .section-title,
  #invoice-modal.open #invoice-form > .material-head,
  #invoice-modal.open #invoice-form > #material-lines,
  #invoice-modal.open #invoice-form > .invoice-bottom{
    margin-left:20px!important;
    margin-right:20px!important;
  }
  #invoice-modal.open #invoice-form > .form-grid{
    grid-template-columns:1fr!important;
    margin-top:22px!important;
  }
  #invoice-modal.open #invoice-form > .dialog-actions{
    padding-left:20px!important;
    padding-right:20px!important;
  }
}


/* Invoice modal: keep Add material clickable and clean up material area stacking. */
#invoice-modal.open #invoice-form > .material-section-title{
  position:relative!important;
  z-index:30!important;
  pointer-events:auto!important;
  isolation:isolate!important;
}
#invoice-modal.open #invoice-form > .material-section-title > div{
  min-width:0!important;
  pointer-events:auto!important;
}
#invoice-modal.open #invoice-form > .material-section-title #add-line,
#invoice-modal.open #invoice-form > .section-title #add-line,
#invoice-modal.open #add-line{
  position:relative!important;
  z-index:40!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  flex:0 0 auto!important;
  white-space:nowrap!important;
}
#invoice-modal.open #invoice-form > .material-head{
  position:relative!important;
  z-index:5!important;
  pointer-events:none!important;
  margin-top:0!important;
}
#invoice-modal.open #invoice-form > #material-lines{
  position:relative!important;
  z-index:4!important;
  pointer-events:auto!important;
  margin-top:0!important;
  border-radius:0 0 14px 14px!important;
}
#invoice-modal.open #invoice-form > #material-lines .material-line,
#invoice-modal.open #invoice-form > #material-lines .material-line *{
  pointer-events:auto!important;
}
#invoice-modal.open #invoice-form > .material-head,
#invoice-modal.open #invoice-form > #material-lines{
  width:calc(100% - 60px)!important;
  max-width:calc(100% - 60px)!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
}
#invoice-modal.open #invoice-form > #material-lines{
  overflow-y:auto!important;
}
@media(max-width:820px){
  #invoice-modal.open #invoice-form > .material-head,
  #invoice-modal.open #invoice-form > #material-lines{
    width:calc(100% - 40px)!important;
    max-width:calc(100% - 40px)!important;
  }
}

/* Invoice modal Add material click safety: keep the action above scroll/table layers. */
#invoice-modal #add-line {
  position: relative;
  z-index: 80;
  pointer-events: auto;
}

#invoice-modal .materials-header,
#invoice-modal .materials-toolbar {
  position: relative;
  z-index: 70;
}

/* Invoice modal material rows visibility repair: keep rows visible and scrollable inside the material area. */
#invoice-modal.open #invoice-form > .material-head{
  width:calc(100% - 60px)!important;
  max-width:calc(100% - 60px)!important;
  min-width:0!important;
  overflow:visible!important;
  flex:0 0 auto!important;
  display:grid!important;
  grid-template-columns:2.1fr .8fr .65fr .85fr .9fr .9fr .9fr 1fr 42px!important;
  align-items:center!important;
}

#invoice-modal.open #invoice-form > #material-lines{
  width:calc(100% - 60px)!important;
  max-width:calc(100% - 60px)!important;
  min-width:0!important;
  min-height:86px!important;
  max-height:240px!important;
  height:auto!important;
  flex:0 0 auto!important;
  display:block!important;
  overflow:auto!important;
  overflow-y:auto!important;
  overflow-x:auto!important;
  padding:0 0 10px!important;
  margin-top:0!important;
  scrollbar-gutter:stable both-edges;
  background:transparent!important;
}

#invoice-modal.open #invoice-form > #material-lines .material-line{
  min-width:1040px!important;
  width:100%!important;
  display:grid!important;
  grid-template-columns:2.1fr .8fr .65fr .85fr .9fr .9fr .9fr 1fr 42px!important;
  align-items:center!important;
  gap:8px!important;
  padding:10px 8px!important;
  border-bottom:1px solid rgba(15,23,42,.07)!important;
  background:rgba(255,255,255,.34)!important;
}

#invoice-modal.open #invoice-form > #material-lines .material-line:first-child{
  border-top:0!important;
}

@media(max-width:820px){
  #invoice-modal.open #invoice-form > .material-head,
  #invoice-modal.open #invoice-form > #material-lines{
    width:calc(100% - 40px)!important;
    max-width:calc(100% - 40px)!important;
  }
}

/* Invoice modal notes layout repair: remove the oversized gap and keep notes aligned with totals. */
#invoice-modal.open #invoice-form > .invoice-bottom{
  width:calc(100% - 60px)!important;
  max-width:calc(100% - 60px)!important;
  margin:14px 30px 0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 360px!important;
  align-items:start!important;
  gap:24px!important;
  flex:0 0 auto!important;
}

#invoice-modal.open #invoice-form > .invoice-bottom > label{
  display:grid!important;
  gap:8px!important;
  margin:0!important;
  min-width:0!important;
}

#invoice-modal.open #invoice-form > .invoice-bottom #invoice-notes{
  min-height:104px!important;
  height:104px!important;
  max-height:160px!important;
  resize:vertical!important;
  margin:0!important;
  padding:14px 16px!important;
  border-radius:18px!important;
  box-sizing:border-box!important;
}

#invoice-modal.open #invoice-form > .invoice-bottom .total-box{
  margin:0!important;
  align-self:start!important;
}

@media(max-width:1180px){
  #invoice-modal.open #invoice-form > .invoice-bottom{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:820px){
  #invoice-modal.open #invoice-form > .invoice-bottom{
    width:calc(100% - 40px)!important;
    max-width:calc(100% - 40px)!important;
    margin-left:20px!important;
    margin-right:20px!important;
  }
}

/* Invoice modal notes final alignment: balanced notes + totals without overlap or edge stretching. */
#invoice-modal.open #invoice-form > .invoice-bottom{
  width:calc(100% - 60px)!important;
  max-width:calc(100% - 60px)!important;
  margin:16px 30px 0!important;
  display:grid!important;
  grid-template-columns:minmax(520px,1fr) minmax(320px,360px)!important;
  gap:22px!important;
  align-items:stretch!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}

#invoice-modal.open #invoice-form > .invoice-bottom > label{
  min-width:0!important;
  height:100%!important;
  display:grid!important;
  grid-template-rows:auto 1fr!important;
  gap:8px!important;
  margin:0!important;
  padding:0!important;
}

#invoice-modal.open #invoice-form > .invoice-bottom > label::before{
  content:none!important;
}

#invoice-modal.open #invoice-form > .invoice-bottom #invoice-notes{
  width:100%!important;
  min-width:0!important;
  height:118px!important;
  min-height:118px!important;
  max-height:118px!important;
  resize:none!important;
  margin:0!important;
  padding:14px 16px!important;
  border-radius:18px!important;
  line-height:1.35!important;
  box-sizing:border-box!important;
  display:block!important;
}

#invoice-modal.open #invoice-form > .invoice-bottom .total-box{
  width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:118px!important;
  align-self:stretch!important;
  margin:0!important;
  padding:16px 18px!important;
  border-radius:18px!important;
  box-sizing:border-box!important;
}

@media(max-width:1180px){
  #invoice-modal.open #invoice-form > .invoice-bottom{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:820px){
  #invoice-modal.open #invoice-form > .invoice-bottom{
    width:calc(100% - 40px)!important;
    max-width:calc(100% - 40px)!important;
    margin-left:20px!important;
    margin-right:20px!important;
  }
}

/* Invoice modal final scroll + notes spacing repair. Keep the full New document body scrollable to the action buttons. */
#invoice-modal.open{
  overflow:hidden!important;
}

#invoice-modal.open .dialog.wide{
  height:min(960px,calc(100vh - 24px))!important;
  max-height:calc(100vh - 24px)!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}

#invoice-modal.open .dialog-head{
  flex:0 0 auto!important;
}

#invoice-modal.open #invoice-form{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  display:block!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:26px 0 0!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable!important;
}

#invoice-modal.open #invoice-form > .form-grid,
#invoice-modal.open #invoice-form > .linked-documents-field,
#invoice-modal.open #invoice-form > .scan-field,
#invoice-modal.open #invoice-form > .section-title,
#invoice-modal.open #invoice-form > .material-head,
#invoice-modal.open #invoice-form > #material-lines,
#invoice-modal.open #invoice-form > .invoice-bottom{
  margin-left:30px!important;
  margin-right:30px!important;
}

#invoice-modal.open #invoice-form > .invoice-bottom{
  margin-top:24px!important;
  margin-bottom:24px!important;
  padding-top:14px!important;
  border-top:1px solid rgba(15,23,42,.08)!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 360px!important;
  gap:24px!important;
  align-items:start!important;
}

#invoice-modal.open #invoice-form > .invoice-bottom > label{
  display:grid!important;
  grid-template-rows:auto auto!important;
  gap:12px!important;
  margin:0!important;
  min-width:0!important;
  color:#5f6b7a!important;
}

#invoice-modal.open #invoice-form > .invoice-bottom #invoice-notes{
  height:112px!important;
  min-height:112px!important;
  max-height:112px!important;
  resize:none!important;
  margin:0!important;
}

#invoice-modal.open #invoice-form > .dialog-actions{
  position:sticky!important;
  bottom:0!important;
  z-index:30!important;
  margin:0!important;
  padding:18px 30px 22px!important;
  background:rgba(255,255,255,.98)!important;
  border-top:1px solid rgba(0,0,0,.07)!important;
  box-shadow:0 -18px 36px rgba(255,255,255,.94)!important;
}

@media(max-width:1180px){
  #invoice-modal.open #invoice-form > .invoice-bottom{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:820px){
  #invoice-modal.open .dialog.wide{
    height:100vh!important;
    max-height:100vh!important;
  }
  #invoice-modal.open #invoice-form{
    padding-top:22px!important;
  }
  #invoice-modal.open #invoice-form > .form-grid,
  #invoice-modal.open #invoice-form > .linked-documents-field,
  #invoice-modal.open #invoice-form > .scan-field,
  #invoice-modal.open #invoice-form > .section-title,
  #invoice-modal.open #invoice-form > .material-head,
  #invoice-modal.open #invoice-form > #material-lines,
  #invoice-modal.open #invoice-form > .invoice-bottom{
    margin-left:20px!important;
    margin-right:20px!important;
  }
  #invoice-modal.open #invoice-form > .dialog-actions{
    padding-left:20px!important;
    padding-right:20px!important;
  }
}

/* Invoice modal material/notes scroll balance: materials scroll inside, notes stay reachable above actions. */
#invoice-modal.open #invoice-form{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-bottom:126px!important;
}

#invoice-modal.open #invoice-form > #material-lines{
  flex:0 0 auto!important;
  height:auto!important;
  min-height:58px!important;
  max-height:156px!important;
  overflow-y:auto!important;
  overflow-x:auto!important;
  overscroll-behavior:contain!important;
  margin-bottom:0!important;
}

#invoice-modal.open #invoice-form > #material-lines .material-line{
  min-height:52px!important;
  padding-top:8px!important;
  padding-bottom:8px!important;
}

#invoice-modal.open #invoice-form > .invoice-bottom{
  position:relative!important;
  z-index:2!important;
  margin-top:18px!important;
  margin-bottom:0!important;
  padding-top:18px!important;
  padding-bottom:6px!important;
  border-top:1px solid rgba(15,23,42,.08)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.72))!important;
}

#invoice-modal.open #invoice-form > .invoice-bottom > label{
  gap:10px!important;
}

#invoice-modal.open #invoice-form > .invoice-bottom #invoice-notes{
  height:108px!important;
  min-height:108px!important;
  max-height:108px!important;
}

#invoice-modal.open #invoice-form > .dialog-actions{
  position:sticky!important;
  bottom:0!important;
  z-index:50!important;
  margin-top:0!important;
}

/* New document single-scroll model: the full invoice form scrolls as one window. */
#invoice-modal.open{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  padding:12px 20px!important;
}

#invoice-modal.open .dialog.wide{
  width:min(1380px,calc(100vw - 40px))!important;
  height:calc(100vh - 24px)!important;
  max-height:calc(100vh - 24px)!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  margin:0!important;
}

#invoice-modal.open .dialog-head{
  flex:0 0 auto!important;
}

#invoice-modal.open #invoice-form{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  display:block!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:26px 0 0!important;
  padding-bottom:0!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable!important;
}

#invoice-modal.open #invoice-form > .form-grid,
#invoice-modal.open #invoice-form > .linked-documents-field,
#invoice-modal.open #invoice-form > .scan-field,
#invoice-modal.open #invoice-form > .section-title,
#invoice-modal.open #invoice-form > .material-head,
#invoice-modal.open #invoice-form > #material-lines,
#invoice-modal.open #invoice-form > .invoice-bottom{
  margin-left:30px!important;
  margin-right:30px!important;
  flex:0 0 auto!important;
}

#invoice-modal.open #invoice-form > .linked-documents-field .linked-picker,
#invoice-modal.open #invoice-form > #material-lines{
  max-height:none!important;
  height:auto!important;
  overflow-y:visible!important;
}

#invoice-modal.open #invoice-form > #material-lines{
  min-height:0!important;
  overflow-x:auto!important;
  padding-bottom:8px!important;
}

#invoice-modal.open #invoice-form > .invoice-bottom{
  margin-top:24px!important;
  margin-bottom:24px!important;
  padding-top:18px!important;
  padding-bottom:0!important;
  border-top:1px solid rgba(15,23,42,.08)!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 360px!important;
  gap:24px!important;
  align-items:start!important;
}

#invoice-modal.open #invoice-form > .invoice-bottom > label{
  gap:12px!important;
}

#invoice-modal.open #invoice-form > .dialog-actions{
  position:relative!important;
  bottom:auto!important;
  z-index:10!important;
  margin:0!important;
  padding:20px 30px 24px!important;
  background:rgba(255,255,255,.98)!important;
  border-top:1px solid rgba(0,0,0,.07)!important;
  box-shadow:0 -10px 24px rgba(255,255,255,.72)!important;
}

@media(max-width:1180px){
  #invoice-modal.open #invoice-form > .invoice-bottom{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:820px){
  #invoice-modal.open{
    padding:0!important;
  }
  #invoice-modal.open .dialog.wide{
    width:100vw!important;
    height:100vh!important;
    max-height:100vh!important;
    border-radius:0!important;
  }
  #invoice-modal.open #invoice-form{
    padding-top:22px!important;
  }
  #invoice-modal.open #invoice-form > .form-grid,
  #invoice-modal.open #invoice-form > .linked-documents-field,
  #invoice-modal.open #invoice-form > .scan-field,
  #invoice-modal.open #invoice-form > .section-title,
  #invoice-modal.open #invoice-form > .material-head,
  #invoice-modal.open #invoice-form > #material-lines,
  #invoice-modal.open #invoice-form > .invoice-bottom{
    margin-left:20px!important;
    margin-right:20px!important;
  }
  #invoice-modal.open #invoice-form > .dialog-actions{
    padding-left:20px!important;
    padding-right:20px!important;
  }
}

/* New document linked documents containment: keep the related-doc list from taking the whole modal. */
#invoice-modal.open #invoice-form > .linked-documents-field{
  overflow:hidden!important;
}

#invoice-modal.open #invoice-form > .linked-documents-field .linked-picker{
  max-height:260px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-right:6px!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable!important;
}

#invoice-modal.open #invoice-form > .linked-documents-field .linked-picker-row{
  min-height:64px!important;
}

@media(max-height:820px){
  #invoice-modal.open #invoice-form > .linked-documents-field .linked-picker{
    max-height:190px!important;
  }
}

@media(max-height:700px){
  #invoice-modal.open #invoice-form > .linked-documents-field .linked-picker{
    max-height:148px!important;
  }
}

/* New document dialog-scroll model: the dialog itself scrolls, so wheel/PageDown never scrolls the page behind it. */
#invoice-modal.open{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  padding:12px 20px!important;
}

#invoice-modal.open .dialog.wide{
  width:min(1380px,calc(100vw - 40px))!important;
  height:auto!important;
  max-height:calc(100vh - 24px)!important;
  display:block!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable!important;
  margin:0!important;
}

#invoice-modal.open .dialog-head{
  position:relative!important;
  top:auto!important;
}

#invoice-modal.open #invoice-form{
  display:block!important;
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  overflow:visible!important;
  padding:26px 0 0!important;
}

#invoice-modal.open #invoice-form > .linked-documents-field .linked-picker{
  max-height:260px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}

#invoice-modal.open #invoice-form > #material-lines{
  max-height:none!important;
  overflow-y:visible!important;
  overflow-x:auto!important;
}

#invoice-modal.open #invoice-form > .dialog-actions{
  position:relative!important;
  bottom:auto!important;
  margin:24px 0 0!important;
  padding:20px 30px 24px!important;
  background:rgba(255,255,255,.98)!important;
  border-top:1px solid rgba(0,0,0,.07)!important;
}

@media(max-height:820px){
  #invoice-modal.open #invoice-form > .linked-documents-field .linked-picker{
    max-height:190px!important;
  }
}

@media(max-width:820px){
  #invoice-modal.open{
    padding:0!important;
  }
  #invoice-modal.open .dialog.wide{
    width:100vw!important;
    max-height:100vh!important;
    height:100vh!important;
    border-radius:0!important;
  }
}

/* New document overlay-scroll final: the modal overlay owns the vertical scroll, never the page behind. */
#invoice-modal.open{
  position:fixed!important;
  inset:0!important;
  display:block!important;
  padding:12px 20px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  pointer-events:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable!important;
}

#invoice-modal.open .modal-backdrop{
  position:fixed!important;
  inset:0!important;
  pointer-events:none!important;
}

#invoice-modal.open .dialog.wide{
  position:relative!important;
  z-index:2!important;
  width:min(1380px,calc(100vw - 40px))!important;
  max-width:1380px!important;
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  display:block!important;
  overflow:visible!important;
  margin:0 auto!important;
}

#invoice-modal.open .dialog-head{
  position:relative!important;
  top:auto!important;
}

#invoice-modal.open #invoice-form{
  display:block!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  padding:26px 0 0!important;
}

#invoice-modal.open #invoice-form > .form-grid,
#invoice-modal.open #invoice-form > .linked-documents-field,
#invoice-modal.open #invoice-form > .scan-field,
#invoice-modal.open #invoice-form > .section-title,
#invoice-modal.open #invoice-form > .material-head,
#invoice-modal.open #invoice-form > #material-lines,
#invoice-modal.open #invoice-form > .invoice-bottom{
  overflow:visible!important;
  max-height:none!important;
}

#invoice-modal.open #invoice-form > .linked-documents-field{
  overflow:hidden!important;
}

#invoice-modal.open #invoice-form > .linked-documents-field .linked-picker{
  max-height:260px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
}

#invoice-modal.open #invoice-form > #material-lines{
  overflow-x:auto!important;
  overflow-y:visible!important;
}

#invoice-modal.open #invoice-form > .dialog-actions{
  position:relative!important;
  bottom:auto!important;
  margin:24px 0 0!important;
  padding:20px 30px 24px!important;
}

@media(max-height:820px){
  #invoice-modal.open #invoice-form > .linked-documents-field .linked-picker{
    max-height:190px!important;
  }
}

@media(max-width:820px){
  #invoice-modal.open{
    padding:0!important;
  }
  #invoice-modal.open .dialog.wide{
    width:100vw!important;
    max-width:none!important;
    border-radius:0!important;
    min-height:100vh!important;
  }
}

/* New document standard dialog scroll: the white dialog card is the single vertical scroll area. */
#invoice-modal.open{
  position:fixed!important;
  inset:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:12px 20px!important;
  overflow:hidden!important;
  pointer-events:auto!important;
}

#invoice-modal.open .modal-backdrop{
  position:fixed!important;
  inset:0!important;
  pointer-events:none!important;
}

#invoice-modal.open .dialog.wide{
  position:relative!important;
  z-index:2!important;
  width:min(1380px,calc(100vw - 40px))!important;
  max-width:1380px!important;
  height:auto!important;
  max-height:calc(100vh - 24px)!important;
  min-height:0!important;
  display:block!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable!important;
  margin:0 auto!important;
}

#invoice-modal.open .dialog-head{
  position:relative!important;
  top:auto!important;
  z-index:auto!important;
  flex:none!important;
}

#invoice-modal.open #invoice-form{
  display:block!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  padding:26px 0 0!important;
  margin:0!important;
}

#invoice-modal.open #invoice-form > .form-grid,
#invoice-modal.open #invoice-form > .linked-documents-field,
#invoice-modal.open #invoice-form > .scan-field,
#invoice-modal.open #invoice-form > .section-title,
#invoice-modal.open #invoice-form > .material-head,
#invoice-modal.open #invoice-form > #material-lines,
#invoice-modal.open #invoice-form > .invoice-bottom{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  flex:none!important;
  width:auto!important;
  max-width:none!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  margin-left:30px!important;
  margin-right:30px!important;
}

#invoice-modal.open #invoice-form > .linked-documents-field{
  overflow:hidden!important;
}

#invoice-modal.open #invoice-form > .linked-documents-field .linked-picker{
  max-height:220px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable!important;
}

#invoice-modal.open #invoice-form > #material-lines{
  overflow-x:auto!important;
  overflow-y:visible!important;
  min-height:0!important;
}

#invoice-modal.open #invoice-form > .invoice-bottom{
  margin-top:24px!important;
  margin-bottom:24px!important;
  padding-top:18px!important;
  border-top:1px solid rgba(15,23,42,.08)!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 360px!important;
  gap:24px!important;
  align-items:start!important;
}

#invoice-modal.open #invoice-form > .dialog-actions{
  position:relative!important;
  bottom:auto!important;
  z-index:auto!important;
  margin:24px 0 0!important;
  padding:20px 30px 24px!important;
  background:rgba(255,255,255,.98)!important;
  border-top:1px solid rgba(0,0,0,.07)!important;
  box-shadow:none!important;
}

@media(max-height:820px){
  #invoice-modal.open #invoice-form > .linked-documents-field .linked-picker{
    max-height:170px!important;
  }
}

@media(max-width:1180px){
  #invoice-modal.open #invoice-form > .invoice-bottom{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:820px){
  #invoice-modal.open{
    padding:0!important;
  }
  #invoice-modal.open .dialog.wide{
    width:100vw!important;
    max-width:none!important;
    max-height:100vh!important;
    border-radius:0!important;
  }
  #invoice-modal.open #invoice-form > .form-grid,
  #invoice-modal.open #invoice-form > .linked-documents-field,
  #invoice-modal.open #invoice-form > .scan-field,
  #invoice-modal.open #invoice-form > .section-title,
  #invoice-modal.open #invoice-form > .material-head,
  #invoice-modal.open #invoice-form > #material-lines,
  #invoice-modal.open #invoice-form > .invoice-bottom{
    margin-left:20px!important;
    margin-right:20px!important;
  }
  #invoice-modal.open #invoice-form > .dialog-actions{
    padding-left:20px!important;
    padding-right:20px!important;
  }
}

/* New document forced scrollbar: prevent the dialog from clipping its bottom content. */
#invoice-modal.open .dialog.wide{
  height:calc(100vh - 24px)!important;
  max-height:calc(100vh - 24px)!important;
  overflow-y:scroll!important;
  overflow-x:hidden!important;
  display:block!important;
}

#invoice-modal.open #invoice-form{
  padding-bottom:0!important;
}

#invoice-modal.open #invoice-form > .dialog-actions{
  display:flex!important;
  position:relative!important;
  margin-top:24px!important;
  margin-bottom:0!important;
}

/* New document fullscreen mode. */
#invoice-modal.open{
  position:fixed!important;
  inset:0!important;
  display:block!important;
  padding:0!important;
  overflow:hidden!important;
  background:rgba(15,23,42,.28)!important;
  pointer-events:auto!important;
}

#invoice-modal.open .modal-backdrop{
  position:fixed!important;
  inset:0!important;
  pointer-events:none!important;
}

#invoice-modal.open .dialog.wide{
  position:relative!important;
  z-index:2!important;
  width:100vw!important;
  max-width:none!important;
  height:100vh!important;
  max-height:100vh!important;
  min-height:100vh!important;
  margin:0!important;
  border-radius:0!important;
  display:block!important;
  overflow-y:scroll!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable!important;
}

#invoice-modal.open .dialog-head{
  position:sticky!important;
  top:0!important;
  z-index:40!important;
  background:rgba(255,255,255,.96)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}

#invoice-modal.open #invoice-form{
  display:block!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  padding:28px 0 0!important;
}

#invoice-modal.open #invoice-form > .form-grid,
#invoice-modal.open #invoice-form > .linked-documents-field,
#invoice-modal.open #invoice-form > .scan-field,
#invoice-modal.open #invoice-form > .section-title,
#invoice-modal.open #invoice-form > .material-head,
#invoice-modal.open #invoice-form > #material-lines,
#invoice-modal.open #invoice-form > .invoice-bottom{
  margin-left:38px!important;
  margin-right:38px!important;
}

#invoice-modal.open #invoice-form > .dialog-actions{
  position:sticky!important;
  bottom:0!important;
  z-index:35!important;
  margin:26px 0 0!important;
  padding:20px 38px 24px!important;
  background:rgba(255,255,255,.97)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  border-top:1px solid rgba(0,0,0,.07)!important;
}

@media(max-width:820px){
  #invoice-modal.open #invoice-form > .form-grid,
  #invoice-modal.open #invoice-form > .linked-documents-field,
  #invoice-modal.open #invoice-form > .scan-field,
  #invoice-modal.open #invoice-form > .section-title,
  #invoice-modal.open #invoice-form > .material-head,
  #invoice-modal.open #invoice-form > #material-lines,
  #invoice-modal.open #invoice-form > .invoice-bottom{
    margin-left:20px!important;
    margin-right:20px!important;
  }
  #invoice-modal.open #invoice-form > .dialog-actions{
    padding-left:20px!important;
    padding-right:20px!important;
  }
}

/* New document reference modal layout: large centered card with compact header and bottom action bar. */
#invoice-modal.open{
  position:fixed!important;
  inset:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:clamp(18px,3vw,48px)!important;
  overflow:hidden!important;
  background:rgba(15,23,42,.36)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  pointer-events:auto!important;
}

#invoice-modal.open .modal-backdrop{
  position:fixed!important;
  inset:0!important;
  pointer-events:none!important;
  background:transparent!important;
}

#invoice-modal.open .dialog.wide{
  position:relative!important;
  z-index:2!important;
  width:min(1320px,calc(100vw - clamp(36px,6vw,96px)))!important;
  max-width:1320px!important;
  height:min(860px,calc(100vh - clamp(36px,6vw,96px)))!important;
  max-height:calc(100vh - clamp(36px,6vw,96px))!important;
  min-height:620px!important;
  margin:0!important;
  border-radius:34px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  display:grid!important;
  grid-template-rows:auto 1fr!important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.96))!important;
  box-shadow:0 34px 120px rgba(15,23,42,.32), inset 0 1px 0 rgba(255,255,255,.9)!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable!important;
}

#invoice-modal.open .dialog-head{
  position:sticky!important;
  top:0!important;
  z-index:45!important;
  min-height:92px!important;
  padding:28px 42px 22px!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:24px!important;
  background:rgba(255,255,255,.94)!important;
  border-bottom:1px solid rgba(15,23,42,.08)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}

#invoice-modal.open .dialog-head h2{
  font-size:26px!important;
  line-height:1.05!important;
  letter-spacing:-.04em!important;
  margin:0 0 7px!important;
}

#invoice-modal.open .dialog-head p{
  font-size:13px!important;
  color:#6b7280!important;
  margin:0!important;
}

#invoice-modal.open .dialog-head .icon-btn{
  width:44px!important;
  height:44px!important;
  border-radius:16px!important;
  background:#000!important;
  color:#fff!important;
  box-shadow:0 14px 30px rgba(0,0,0,.18)!important;
}

#invoice-modal.open #invoice-form{
  display:block!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  padding:32px 0 0!important;
  margin:0!important;
}

#invoice-modal.open #invoice-form > .form-grid,
#invoice-modal.open #invoice-form > .linked-documents-field,
#invoice-modal.open #invoice-form > .scan-field,
#invoice-modal.open #invoice-form > .section-title,
#invoice-modal.open #invoice-form > .material-head,
#invoice-modal.open #invoice-form > #material-lines,
#invoice-modal.open #invoice-form > .invoice-bottom{
  margin-left:42px!important;
  margin-right:42px!important;
}

#invoice-modal.open #invoice-form > .form-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:18px!important;
}

#invoice-modal.open #invoice-form > .linked-documents-field,
#invoice-modal.open #invoice-form > .scan-field{
  border-radius:22px!important;
}

#invoice-modal.open #invoice-form > .linked-documents-field .linked-picker{
  max-height:190px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}

#invoice-modal.open #invoice-form > .section-title{
  margin-top:28px!important;
  margin-bottom:12px!important;
}

#invoice-modal.open #invoice-form > #material-lines{
  overflow-x:auto!important;
  overflow-y:visible!important;
}

#invoice-modal.open #invoice-form > .invoice-bottom{
  margin-top:24px!important;
  margin-bottom:0!important;
  padding-top:18px!important;
  border-top:1px solid rgba(15,23,42,.08)!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 360px!important;
  gap:28px!important;
  align-items:start!important;
}

#invoice-modal.open #invoice-form > .dialog-actions{
  position:sticky!important;
  bottom:0!important;
  z-index:45!important;
  margin:28px 0 0!important;
  padding:22px 42px 26px!important;
  display:flex!important;
  justify-content:flex-end!important;
  gap:12px!important;
  background:rgba(255,255,255,.96)!important;
  border-top:1px solid rgba(15,23,42,.08)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}

@media(max-width:1180px){
  #invoice-modal.open .dialog.wide{
    width:calc(100vw - 32px)!important;
    height:calc(100vh - 32px)!important;
    max-height:calc(100vh - 32px)!important;
  }
  #invoice-modal.open #invoice-form > .form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #invoice-modal.open #invoice-form > .invoice-bottom{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:820px){
  #invoice-modal.open{
    padding:0!important;
  }
  #invoice-modal.open .dialog.wide{
    width:100vw!important;
    height:100vh!important;
    max-height:100vh!important;
    border-radius:0!important;
  }
  #invoice-modal.open .dialog-head,
  #invoice-modal.open #invoice-form > .dialog-actions{
    padding-left:20px!important;
    padding-right:20px!important;
  }
  #invoice-modal.open #invoice-form > .form-grid,
  #invoice-modal.open #invoice-form > .linked-documents-field,
  #invoice-modal.open #invoice-form > .scan-field,
  #invoice-modal.open #invoice-form > .section-title,
  #invoice-modal.open #invoice-form > .material-head,
  #invoice-modal.open #invoice-form > #material-lines,
  #invoice-modal.open #invoice-form > .invoice-bottom{
    margin-left:20px!important;
    margin-right:20px!important;
  }
}

/* New document action bar clearance: keep fields, materials, and notes above the sticky footer. */
#invoice-modal.open #invoice-form{
  padding-bottom:118px!important;
}

#invoice-modal.open #invoice-form > .material-head{
  margin-bottom:0!important;
}

#invoice-modal.open #invoice-form > #material-lines{
  margin-bottom:26px!important;
  padding-bottom:10px!important;
  min-height:62px!important;
}

#invoice-modal.open #invoice-form > .invoice-bottom{
  margin-bottom:32px!important;
}

#invoice-modal.open #invoice-form > .dialog-actions{
  position:sticky!important;
  bottom:0!important;
  z-index:80!important;
  margin:0!important;
  padding:18px 42px 22px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.99))!important;
  border-top:1px solid rgba(15,23,42,.08)!important;
  box-shadow:0 -18px 38px rgba(255,255,255,.92)!important;
}

@media(max-width:820px){
  #invoice-modal.open #invoice-form{
    padding-bottom:128px!important;
  }
  #invoice-modal.open #invoice-form > .dialog-actions{
    padding-left:20px!important;
    padding-right:20px!important;
  }
}

/* New document single-scroll final: prevent footer overlap and keep materials/notes reachable. */
#invoice-modal.open .dialog.wide{
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  height:min(900px,calc(100vh - 32px))!important;
  max-height:calc(100vh - 32px)!important;
}

#invoice-modal.open .dialog-head{
  flex:0 0 auto!important;
}

#invoice-modal.open #invoice-form{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:32px 42px 34px!important;
  margin:0!important;
  scrollbar-gutter:stable!important;
  overscroll-behavior:contain!important;
}

#invoice-modal.open #invoice-form > .form-grid,
#invoice-modal.open #invoice-form > .linked-documents-field,
#invoice-modal.open #invoice-form > .scan-field,
#invoice-modal.open #invoice-form > .section-title,
#invoice-modal.open #invoice-form > .material-head,
#invoice-modal.open #invoice-form > #material-lines,
#invoice-modal.open #invoice-form > .invoice-bottom{
  margin-left:0!important;
  margin-right:0!important;
}

#invoice-modal.open #invoice-form > .form-grid{
  max-height:none!important;
  overflow:visible!important;
}

#invoice-modal.open #invoice-form > .linked-documents-field .linked-picker{
  max-height:none!important;
  overflow:visible!important;
}

#invoice-modal.open #invoice-form > .material-head{
  margin-top:26px!important;
  margin-bottom:10px!important;
}

#invoice-modal.open #invoice-form > #material-lines{
  display:block!important;
  max-height:none!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  margin-bottom:24px!important;
  padding-bottom:8px!important;
  min-height:64px!important;
}

#invoice-modal.open #invoice-form > .invoice-bottom{
  margin-top:22px!important;
  margin-bottom:0!important;
}

#invoice-modal.open #invoice-form > .invoice-bottom label,
#invoice-modal.open #invoice-form > .invoice-bottom .field-label{
  display:block!important;
  margin-bottom:10px!important;
  line-height:1.25!important;
}

#invoice-modal.open #invoice-form > .dialog-actions{
  position:relative!important;
  bottom:auto!important;
  z-index:1!important;
  margin:28px -42px -34px!important;
  padding:22px 42px 26px!important;
  flex:0 0 auto!important;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,1))!important;
  border-top:1px solid rgba(15,23,42,.08)!important;
  box-shadow:0 -10px 28px rgba(15,23,42,.04)!important;
}

@media(max-width:820px){
  #invoice-modal.open .dialog.wide{
    height:100vh!important;
    max-height:100vh!important;
  }
  #invoice-modal.open #invoice-form{
    padding:24px 20px 28px!important;
  }
  #invoice-modal.open #invoice-form > .dialog-actions{
    margin-left:-20px!important;
    margin-right:-20px!important;
    margin-bottom:-28px!important;
    padding-left:20px!important;
    padding-right:20px!important;
  }
}

/* New document scroll hard fix: override inherited overflow shorthands on the form. */
body #invoice-modal.open .dialog.wide > form#invoice-form,
html body #invoice-modal.open .dialog.wide #invoice-form{
  overflow-x:hidden!important;
  overflow-y:scroll!important;
  max-height:none!important;
  min-height:0!important;
  height:auto!important;
  flex:1 1 auto!important;
  overscroll-behavior:contain!important;
}

body #invoice-modal.open .dialog.wide > form#invoice-form::-webkit-scrollbar,
html body #invoice-modal.open .dialog.wide #invoice-form::-webkit-scrollbar{
  width:12px!important;
}

body #invoice-modal.open .dialog.wide > form#invoice-form::-webkit-scrollbar-thumb,
html body #invoice-modal.open .dialog.wide #invoice-form::-webkit-scrollbar-thumb{
  background:rgba(17,24,39,.36)!important;
  border:3px solid rgba(255,255,255,.95)!important;
  border-radius:999px!important;
}

/* New document scroll override for the generic modal form lock. */
html body div.modal#invoice-modal.open div.dialog.wide > form#invoice-form{
  overflow:auto!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  display:block!important;
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
}


/* New document visual cleanup: keep top fields as standalone boxes and compact linked documents. */
#invoice-modal.open #invoice-form > .form-grid{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
}

#invoice-modal.open #invoice-form > .form-grid::before,
#invoice-modal.open #invoice-form > .form-grid::after{
  display:none!important;
  content:none!important;
}

#invoice-modal.open #invoice-form > .form-grid label{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
}

#invoice-modal.open #invoice-form > .linked-documents-field{
  padding:18px 18px 16px!important;
  margin-top:18px!important;
  border-radius:22px!important;
}

#invoice-modal.open #invoice-form > .linked-documents-field .linked-documents-head{
  grid-template-columns:minmax(0,1fr) minmax(260px,360px)!important;
  gap:18px!important;
  margin-bottom:10px!important;
}

#invoice-modal.open #invoice-form > .linked-documents-field .linked-selected{
  margin:8px 0!important;
}

#invoice-modal.open #invoice-form > .linked-documents-field .linked-empty{
  margin:6px 0 10px!important;
}

#invoice-modal.open #invoice-form > .linked-documents-field .linked-picker{
  max-height:170px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  display:grid!important;
  gap:8px!important;
  padding:0 6px 2px 0!important;
}

#invoice-modal.open #invoice-form > .linked-documents-field .linked-picker-row{
  min-height:54px!important;
  padding:10px 12px!important;
  border-radius:13px!important;
}

#invoice-modal.open #invoice-form > .linked-documents-field .linked-picker-row small{
  margin-top:2px!important;
  line-height:1.2!important;
}

/* New document notes/totals cleanup: remove outer frame and align total box with notes field. */
#invoice-modal.open #invoice-form > .invoice-bottom{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  margin-top:22px!important;
  align-items:stretch!important;
  grid-template-columns:minmax(0,1fr) 360px!important;
}

#invoice-modal.open #invoice-form > .invoice-bottom::before,
#invoice-modal.open #invoice-form > .invoice-bottom::after{
  display:none!important;
  content:none!important;
}

#invoice-modal.open #invoice-form > .invoice-bottom > label{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
}

#invoice-modal.open #invoice-form > .invoice-bottom textarea#invoice-notes{
  flex:1 1 auto!important;
  min-height:132px!important;
  height:100%!important;
  border-color:#d7e1e8!important;
  background:#fff!important;
}

#invoice-modal.open #invoice-form > .invoice-bottom .total-box{
  height:100%!important;
  min-height:132px!important;
  align-self:stretch!important;
  background:#fff!important;
  border:1px solid #d7e1e8!important;
  border-radius:18px!important;
  box-shadow:none!important;
  padding:18px 20px!important;
  align-content:center!important;
}

@media(max-width:1180px){
  #invoice-modal.open #invoice-form > .invoice-bottom{
    grid-template-columns:1fr!important;
  }
}


/* Refined privacy controls */
.privacy-toggle-button{
  height:46px!important;
  min-width:46px!important;
  border:0!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#20242b!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  padding:0 14px!important;
  font-weight:750!important;
  line-height:1!important;
  box-shadow:0 12px 26px rgba(20,28,40,.08)!important;
}
.privacy-toggle-button .privacy-icon{
  width:30px!important;
  height:30px!important;
  border-radius:10px!important;
  display:grid!important;
  place-items:center!important;
  background:#f2f5f7!important;
  color:#111!important;
  flex:0 0 30px!important;
}
.privacy-toggle-button .privacy-icon svg{
  width:17px!important;
  height:17px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2.1!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.privacy-toggle-button.values-locked{
  background:#111!important;
  color:#fff!important;
  box-shadow:0 14px 28px rgba(0,0,0,.16)!important;
}
.privacy-toggle-button.values-locked .privacy-icon{
  background:#ff8a1c!important;
  color:#fff!important;
}
.privacy-modal .privacy-dialog{
  width:min(480px,calc(100vw - 34px))!important;
  max-width:480px!important;
  border-radius:28px!important;
  overflow:hidden!important;
}
.privacy-modal .dialog-head{
  padding:26px 30px 22px!important;
  align-items:flex-start!important;
}
.privacy-headline{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
}
.privacy-modal-icon{
  width:48px!important;
  height:48px!important;
  border-radius:15px!important;
  background:#111!important;
  color:#fff!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 48px!important;
  box-shadow:0 14px 28px rgba(0,0,0,.14)!important;
}
.privacy-modal-icon svg{
  width:24px!important;
  height:24px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2.1!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.privacy-modal .dialog-head h2{
  margin:0!important;
  font-size:22px!important;
  line-height:1.18!important;
}
.privacy-modal .dialog-head p{
  margin-top:6px!important;
  color:#6f7a86!important;
  line-height:1.4!important;
}
.privacy-form{
  padding:24px 30px 28px!important;
  display:grid!important;
  gap:14px!important;
}
.privacy-form label{
  display:grid!important;
  gap:8px!important;
  color:#65717d!important;
  font-size:12px!important;
  font-weight:750!important;
}
.privacy-form input{
  height:48px!important;
  border-radius:15px!important;
  border:1px solid #dbe2e8!important;
  padding:0 16px!important;
  font-size:15px!important;
  outline:none!important;
  box-shadow:0 8px 20px rgba(22,31,44,.05)!important;
}
.privacy-form input:focus{
  border-color:#111!important;
  box-shadow:0 0 0 4px rgba(0,0,0,.07),0 10px 24px rgba(22,31,44,.08)!important;
}
.privacy-modal .form-error{
  min-height:18px!important;
  margin:-4px 0 0!important;
  color:#ef4444!important;
  font-size:12px!important;
  font-weight:750!important;
}
.privacy-actions{
  margin-top:8px!important;
  padding:0!important;
  border-top:0!important;
  justify-content:flex-end!important;
  gap:12px!important;
}
.privacy-actions .btn{
  min-width:118px!important;
  height:44px!important;
  border-radius:14px!important;
}
@media(max-width:820px){
  .privacy-toggle-button{width:100%!important;}
  .privacy-modal .dialog-head,.privacy-form{padding-left:22px!important;padding-right:22px!important;}
}

/* Final centering and spacing for privacy modal */
#privacy-modal.modal[aria-hidden="false"],
#privacy-modal.modal.show,
#privacy-modal.modal.active{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:24px!important;
}
#privacy-modal .modal-backdrop{
  position:absolute!important;
  inset:0!important;
}
#privacy-modal .privacy-dialog{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  margin:auto!important;
  width:min(520px,calc(100vw - 48px))!important;
  max-width:520px!important;
  min-height:0!important;
  max-height:calc(100vh - 64px)!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
#privacy-modal .dialog-head{
  flex:0 0 auto!important;
  padding:28px 30px 24px!important;
  border-bottom:1px solid rgba(0,0,0,.055)!important;
}
#privacy-modal .privacy-form{
  flex:0 0 auto!important;
  padding:26px 30px 30px!important;
  gap:18px!important;
}
#privacy-modal .privacy-form label{
  gap:10px!important;
  margin:0!important;
}
#privacy-modal .privacy-form input{
  width:100%!important;
  min-height:54px!important;
  margin:0!important;
  padding:0 18px!important;
  border-radius:16px!important;
}
#privacy-modal .privacy-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:14px!important;
  margin-top:8px!important;
  padding-top:8px!important;
}
#privacy-modal .privacy-actions .btn{
  height:48px!important;
  min-width:132px!important;
  padding:0 20px!important;
}
@media(max-width:620px){
  #privacy-modal.modal[aria-hidden="false"],
  #privacy-modal.modal.show,
  #privacy-modal.modal.active{padding:16px!important;}
  #privacy-modal .privacy-dialog{width:100%!important;}
  #privacy-modal .dialog-head{padding:24px 22px 20px!important;}
  #privacy-modal .privacy-form{padding:22px!important;}
  #privacy-modal .privacy-actions{flex-direction:column-reverse!important;align-items:stretch!important;}
  #privacy-modal .privacy-actions .btn{width:100%!important;}
}

/* Privacy modal inner margins correction */
#privacy-modal .privacy-dialog{
  width:min(560px,calc(100vw - 64px))!important;
  max-width:560px!important;
}
#privacy-modal .dialog-head{
  padding-left:34px!important;
  padding-right:34px!important;
}
#privacy-modal .privacy-form{
  box-sizing:border-box!important;
  width:100%!important;
  padding:28px 34px 32px!important;
}
#privacy-modal .privacy-form label,
#privacy-modal .privacy-form input,
#privacy-modal .privacy-actions{
  box-sizing:border-box!important;
  max-width:100%!important;
}
#privacy-modal .privacy-form input{
  display:block!important;
  width:100%!important;
  margin:0!important;
}
#privacy-modal .privacy-actions{
  width:100%!important;
  padding-left:0!important;
  padding-right:0!important;
  justify-content:flex-end!important;
}
#privacy-modal .privacy-actions .btn:last-child{
  margin-right:0!important;
}
@media(max-width:620px){
  #privacy-modal .dialog-head{padding-left:24px!important;padding-right:24px!important;}
  #privacy-modal .privacy-form{padding-left:24px!important;padding-right:24px!important;}
}

/* Standalone privacy modal layout, isolated from global modal scroll rules */
#privacy-modal.open{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:32px!important;
  overflow:hidden!important;
}
#privacy-modal.open .privacy-dialog{
  margin:0!important;
  width:min(560px,calc(100vw - 72px))!important;
  max-width:560px!important;
  height:auto!important;
  max-height:calc(100vh - 72px)!important;
  overflow:hidden!important;
  display:block!important;
}
#privacy-modal.open .privacy-form{
  display:block!important;
  padding:30px 38px 34px!important;
  overflow:visible!important;
}
#privacy-modal.open .privacy-form label{
  display:grid!important;
  gap:12px!important;
  width:100%!important;
  margin:0!important;
}
#privacy-modal.open .privacy-form input{
  width:100%!important;
  box-sizing:border-box!important;
}
#privacy-modal.open .privacy-actions{
  display:flex!important;
  justify-content:flex-end!important;
  gap:14px!important;
  margin-top:22px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
@media(max-width:620px){
  #privacy-modal.open{padding:18px!important;}
  #privacy-modal.open .privacy-dialog{width:calc(100vw - 36px)!important;}
  #privacy-modal.open .privacy-form{padding:24px!important;}
  #privacy-modal.open .privacy-actions{flex-direction:column-reverse!important;align-items:stretch!important;}
}

/* Password label spacing fix for privacy modal */
#privacy-modal.open .privacy-password-field{
  display:block!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
}
#privacy-modal.open .privacy-password-field > span{
  display:block!important;
  margin:0 0 12px!important;
  padding:0!important;
  color:#65717d!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.25!important;
}
#privacy-modal.open .privacy-password-field > input{
  display:block!important;
  width:100%!important;
  margin:0!important;
  min-height:54px!important;
}

/* Hard fix: privacy password label/input spacing */
#privacy-modal.open #privacy-form.privacy-form{
  padding-top:34px!important;
}
#privacy-modal.open #privacy-form .privacy-password-field,
#privacy-modal.open #privacy-form label{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:0!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  line-height:1.25!important;
}
#privacy-modal.open #privacy-form .privacy-password-field > span{
  display:block!important;
  margin:0 0 14px!important;
  padding:0!important;
  font-size:12px!important;
  font-weight:800!important;
  color:#65717d!important;
  line-height:1.25!important;
}
#privacy-modal.open #privacy-form label > input,
#privacy-modal.open #privacy-password{
  display:block!important;
  margin-top:14px!important;
  width:100%!important;
  min-height:56px!important;
  box-sizing:border-box!important;
}
#privacy-modal.open #privacy-form .privacy-password-field > input{
  margin-top:0!important;
}

/* Clean final privacy modal layout */
#privacy-modal.open{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:32px!important;
}
#privacy-modal.open .privacy-dialog{
  width:560px!important;
  max-width:calc(100vw - 64px)!important;
  min-height:300px!important;
  margin:0!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  border-radius:28px!important;
}
#privacy-modal.open .privacy-dialog-head{
  padding:28px 34px 24px!important;
  flex:0 0 auto!important;
}
#privacy-modal.open #privacy-form.privacy-form{
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 auto!important;
  padding:0!important;
  margin:0!important;
  overflow:visible!important;
}
#privacy-modal.open .privacy-form-body{
  padding:28px 34px 22px!important;
  flex:1 1 auto!important;
}
#privacy-modal.open .privacy-password-field{
  display:block!important;
  margin:0!important;
  padding:0!important;
  width:100%!important;
}
#privacy-modal.open .privacy-password-field > span{
  display:block!important;
  margin:0 0 16px!important;
  padding:0!important;
  color:#65717d!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.3!important;
}
#privacy-modal.open .privacy-password-field > input,
#privacy-modal.open #privacy-password{
  display:block!important;
  width:100%!important;
  height:56px!important;
  min-height:56px!important;
  margin:0!important;
  box-sizing:border-box!important;
  border-radius:16px!important;
}
#privacy-modal.open .form-error{
  margin:12px 0 0!important;
  min-height:18px!important;
}
#privacy-modal.open .privacy-form-footer{
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:14px!important;
  padding:24px 34px 30px!important;
  border-top:1px solid rgba(0,0,0,.06)!important;
  background:rgba(255,255,255,.92)!important;
  flex:0 0 auto!important;
}
#privacy-modal.open .privacy-form-footer .btn{
  height:48px!important;
  min-width:132px!important;
}
@media(max-width:620px){
  #privacy-modal.open{padding:18px!important;}
  #privacy-modal.open .privacy-dialog{width:100%!important;max-width:100%!important;}
  #privacy-modal.open .privacy-dialog-head,
  #privacy-modal.open .privacy-form-body,
  #privacy-modal.open .privacy-form-footer{padding-left:24px!important;padding-right:24px!important;}
  #privacy-modal.open .privacy-form-footer{flex-direction:column-reverse!important;align-items:stretch!important;}
  #privacy-modal.open .privacy-form-footer .btn{width:100%!important;}
}

/* Automatic backup settings */
.backup-interval-control{
  display:grid!important;
  gap:8px!important;
  margin:18px 0 16px!important;
  color:#65717d!important;
  font-size:12px!important;
  font-weight:800!important;
}
.backup-interval-control select{
  height:46px!important;
  border-radius:14px!important;
  border:1px solid #dbe2e8!important;
  background:#fff!important;
  padding:0 14px!important;
  font-weight:700!important;
}
.backup-note{
  display:block!important;
  margin-top:4px!important;
  color:#74818d!important;
  line-height:1.45!important;
}