:root{--navy:#101d36;--gold:#c6a15b;--ink:#17243a;--muted:#758197;--line:#e7ebf1;--paper:#f5f7fa;--shadow:0 12px 35px rgba(20,35,60,.06)}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px 'DM Sans',sans-serif}a{color:inherit;text-decoration:none}.sidebar{width:248px;position:fixed;inset:0 auto 0 0;background:var(--navy);color:#dbe3ef;padding:26px 18px;display:flex;flex-direction:column;z-index:4}.brand{display:flex;align-items:center;gap:11px;padding:2px 8px 34px;color:#fff;letter-spacing:2px}.brand b{font-size:15px;display:block}.brand small{display:block;font-size:9px;letter-spacing:3px;color:#b9c4d5;margin-top:4px}.brand-mark{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--gold);color:#e1bd79;font:700 25px 'Playfair Display';border-radius:10px}.brand-mark.large{width:54px;height:54px;font-size:34px}.nav-label,.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px;color:#98a4b7}.nav-label{padding:0 12px 12px}.nav-link{padding:13px 14px;border-radius:9px;color:#c5cfdd;margin:2px 0;font-weight:500}.nav-link:hover{background:#263957;color:#fff}.sidebar-bottom{margin-top:auto;border-top:1px solid #34435b;padding-top:18px}.user-mini{display:flex;gap:10px;align-items:center}.user-mini b,.user-mini small{display:block}.user-mini small{font-size:11px;color:#98a4b7;text-transform:capitalize;margin-top:3px}.avatar{width:34px;height:34px;border-radius:50%;background:#e9dfcb;color:#6d552b;display:grid;place-items:center;font-weight:700}.logout{background:none;border:0;color:#b8c3d2;padding:16px 0 0;cursor:pointer;font:inherit}.main{margin-left:248px;padding:36px 42px 60px;max-width:1600px}.main.narrow{max-width:1120px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:27px}.topbar h1{font:700 30px 'Playfair Display',serif;margin:8px 0 6px;color:var(--navy)}.topbar p{margin:0}.muted{color:var(--muted);font-size:13px;line-height:1.6}.btn{border:0;border-radius:8px;padding:11px 16px;display:inline-flex;align-items:center;justify-content:center;gap:12px;font:600 13px 'DM Sans';cursor:pointer}.btn.primary{background:var(--navy);color:white;box-shadow:0 5px 12px #101d3622}.btn.secondary{background:#edf1f6;color:var(--navy)}.btn.small{padding:7px 10px;font-size:11px;background:#edf1f6;color:var(--navy)}.btn.danger{background:#fff0f0;color:#b83242}.btn.full{width:100%;padding:14px}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:24px 0 14px}.stat-grid.three{grid-template-columns:repeat(3,1fr)}.stat-card,.panel{background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow)}.stat-card{padding:20px 21px;min-height:130px}.stat-card small{display:block;color:var(--muted);font-size:12px}.stat-card strong{display:block;font-size:25px;color:var(--navy);margin:11px 0 4px}.stat-note{font-size:11px;color:#9aa4b3}.stat-icon{display:grid;place-items:center;width:31px;height:31px;border-radius:9px;margin-bottom:14px;font-weight:700}.navy{background:#eaf0f9;color:#35527c}.green{background:#e8f6ef;color:#16845b}.amber{background:#fff5e4;color:#b27b21}.rose{background:#fff0f0;color:#bd4650}.mini-stats{display:flex;gap:12px;margin:14px 0 24px}.mini-stats div{background:#fff;border:1px solid var(--line);border-radius:9px;padding:12px 16px;display:flex;gap:24px;align-items:center;flex:1}.mini-stats span{color:var(--muted);font-size:12px}.mini-stats b{font-size:17px}.panel{padding:22px;margin:18px 0}.panel h2{font:700 18px 'Playfair Display';color:var(--navy);margin:0 0 8px}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;white-space:nowrap}th{text-align:left;color:#8994a5;font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:12px;border-bottom:1px solid var(--line)}td{padding:14px 12px;border-bottom:1px solid #eff1f5;font-size:12px}tbody tr:last-child td{border-bottom:0}.status{display:inline-block;background:#eef2f7;color:#52647d;border-radius:20px;padding:6px 9px;font-size:10px;font-weight:700}.empty{text-align:center;color:#9aa4b3;padding:28px!important}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-panel{padding:27px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.form-stack{display:flex;flex-direction:column;gap:14px;margin-top:17px}label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:600;color:#536178}input,select,textarea{width:100%;border:1px solid #dfe5ed;background:#fff;border-radius:7px;padding:11px 12px;color:var(--ink);font:13px 'DM Sans';outline:none}input:focus,select:focus,textarea:focus{border-color:#b89b64;box-shadow:0 0 0 3px #c6a15b22}textarea{resize:vertical}.span-2{grid-column:span 2}.check{flex-direction:row;align-items:center}.check input{width:auto}.flash{margin:14px 0;padding:12px 15px;border-radius:8px;font-size:12px}.flash.success{background:#eaf7ef;color:#19734d}.flash.error{background:#fff0f0;color:#a3313b}.text-link{color:#8a6a31;font-size:12px;font-weight:700}.mini-form{display:grid;gap:6px;margin:7px 0;min-width:140px}.mini-form input,.mini-form select{padding:7px;font-size:11px}.inline-form{display:flex;gap:5px;align-items:center}.inline-form select{min-width:125px;padding:7px;font-size:11px}.subcell{display:block;color:#8994a5;font-size:10px;margin-top:4px}.file-list{margin-top:15px}.file-row,.staff-row{display:flex;align-items:center;gap:11px;padding:12px 0;border-top:1px solid var(--line)}.file-row>span:nth-child(2),.staff-row>span:nth-child(2){flex:1;min-width:0}.file-row b,.file-row small,.staff-row b,.staff-row small{display:block}.file-row small,.staff-row small{font-size:10px;color:var(--muted);margin-top:4px}.file-row a{font-size:11px;color:#8a6a31;font-weight:700}.file-icon{width:31px;height:34px;border-radius:7px;background:#f2eee6;color:#9c7940;display:grid;place-items:center}.order-card{padding:15px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:9px}.order-card b,.order-card small{display:block}.order-card small{font-size:10px;color:var(--muted);margin-top:5px}.progress-line{grid-column:span 2;height:5px;background:#edf0f4;border-radius:10px;overflow:hidden}.progress-line i{height:100%;display:block;background:linear-gradient(90deg,#b58c4b,#e0c58f);border-radius:10px}.login-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:#fff}.login-card{width:min(420px,calc(100% - 44px));margin:auto;padding:50px 0}.login-brand{display:flex;align-items:center;gap:13px;margin-bottom:55px;color:var(--navy)}.login-brand h1{font:700 18px 'Playfair Display';letter-spacing:3px;margin:0}.login-brand p{font-size:9px;letter-spacing:2px;color:#8d7955;margin:5px 0}.login-card h2{font:700 34px 'Playfair Display';color:var(--navy);margin:10px 0}.login-card .eyebrow{color:#9a7a42}.login-foot{font-size:10px;color:#9ba5b2;margin-top:35px;text-align:center}.login-side{background:var(--navy);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:10%}.login-side h2{font:700 clamp(38px,5vw,62px) 'Playfair Display';line-height:1.13;margin:17px 0}.login-side h2 em{color:#d9b779}.login-side>p:last-child{color:#b6c2d3;max-width:330px;line-height:1.8}.gold{color:#d9b779}hr{border:0;border-top:1px solid var(--line);margin:23px 0}@media(max-width:1050px){.stat-grid{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr}.main{padding:28px 24px}}@media(max-width:700px){.sidebar{width:100%;height:auto;position:relative;inset:auto;padding:13px 16px;display:block}.brand{padding:0 3px 12px}.sidebar .nav-label,.sidebar-bottom{display:none}.sidebar .nav-link{display:inline-block;padding:9px 10px;font-size:11px}.main{margin:0;padding:20px 14px 40px}.topbar{align-items:flex-start;flex-direction:column;gap:14px}.topbar h1{font-size:25px}.stat-grid,.stat-grid.three{grid-template-columns:1fr 1fr;gap:9px}.stat-card{padding:15px;min-height:115px}.stat-card strong{font-size:21px}.mini-stats{flex-wrap:wrap}.mini-stats div{min-width:40%}.panel{padding:15px}.form-grid{grid-template-columns:1fr}.span-2{grid-column:span 1}.login-wrap{grid-template-columns:1fr}.login-side{display:none}.inline-form{min-width:180px}.stat-grid.three{grid-template-columns:1fr}}
/* Interactive dashboard and financial overview */
.stat-card.stat-click{display:block;color:inherit;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;position:relative;overflow:hidden}
.stat-card.stat-click:after{content:"";position:absolute;inset:auto -35px -48px auto;width:110px;height:110px;border-radius:50%;background:linear-gradient(135deg,#c6a15b18,#4d7fbb10);transition:transform .25s ease}
.stat-card.stat-click:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(16,29,54,.12);border-color:#d8c49e}
.stat-card.stat-click:hover:after{transform:scale(1.35)}
.stat-card.stat-click .stat-note b{float:right;color:#9b7940}
.top-actions{display:flex;gap:10px;flex-wrap:wrap}
.mini-stats a{background:#fff;border:1px solid var(--line);border-radius:9px;padding:12px 16px;display:flex;gap:24px;align-items:center;flex:1;transition:all .2s ease}
.mini-stats a:hover{border-color:#c6a15b;transform:translateY(-2px);box-shadow:var(--shadow)}
.cost-overview{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0 20px}
.cost-overview>div{background:linear-gradient(135deg,#f8f9fb,#fff);border:1px solid var(--line);border-radius:10px;padding:15px}
.cost-overview small,.cost-overview strong{display:block}.cost-overview small{font-size:11px;color:var(--muted)}.cost-overview strong{font-size:20px;color:var(--navy);margin-top:8px}
.table-link{color:var(--navy);font-weight:700}.table-link:hover,.text-link:hover{color:#a17a36;text-decoration:underline}
.subheading{font:700 15px 'Playfair Display';color:var(--navy);margin:25px 0 8px}
@media(max-width:700px){.cost-overview{grid-template-columns:1fr}.top-actions{width:100%}.top-actions .btn{flex:1}.client-summary{grid-template-columns:1fr 1fr!important}}

/* Refined typography: use a consistent regular sans-serif throughout the portal. */
body{font-family:'DM Sans',Arial,sans-serif;font-weight:400}
.topbar h1,.panel h2,.subheading,.login-brand h1,.login-card h2,.login-side h2{font-family:'DM Sans',Arial,sans-serif;font-weight:400}
.brand-mark{font-family:'DM Sans',Arial,sans-serif;font-weight:400}
.nav-label,.eyebrow,.nav-link,.btn,.stat-card strong,.mini-stats b,.status,.text-link,.table-link,th,b,strong,label{font-weight:400}
input,select,textarea{font-family:'DM Sans',Arial,sans-serif;font-weight:400}
/* Card-based expense overview on the dashboard. */
.expense-dashboard-card{background:linear-gradient(145deg,#fff 0%,#fbfcfe 100%);border:1px solid var(--line);border-radius:16px;padding:23px;margin:18px 0;box-shadow:var(--shadow);transition:box-shadow .2s ease,border-color .2s ease}
.expense-dashboard-card:hover{box-shadow:0 18px 40px rgba(20,35,60,.09);border-color:#d8c49e}
.expense-card-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.expense-card-head h2{font-size:20px;font-weight:400;color:var(--navy);margin:6px 0}
.expense-card-head p{font-size:12px;color:var(--muted);margin:0;line-height:1.6}
.expense-kicker{font-size:9px;letter-spacing:1.5px;color:#9a7a42}
.expense-metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.expense-metric{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.expense-metric:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#d8c49e}
.expense-metric small,.expense-metric strong,.expense-metric>span:last-child{display:block}
.expense-metric small{font-size:11px;color:var(--muted);margin-top:8px}
.expense-metric strong{font-size:21px;color:var(--navy);margin:5px 0}
.expense-metric>span:last-child{font-size:10px;color:#9aa4b3}
.expense-recent-head{display:flex;justify-content:space-between;align-items:center;margin:20px 0 8px}
.expense-recent-head h3{font-size:13px;font-weight:400;margin:0;color:var(--navy)}
.expense-list-item{display:flex;align-items:center;gap:11px;padding:11px 2px;border-top:1px solid var(--line)}
.expense-list-icon{width:30px;height:30px;border-radius:9px;background:#fff5e4;color:#a8792b;display:grid;place-items:center;flex:none}
.expense-list-main{flex:1;min-width:0}.expense-list-main b,.expense-list-main small{display:block}.expense-list-main b{font-size:12px;color:var(--ink);font-weight:400}.expense-list-main small{font-size:10px;color:var(--muted);margin-top:4px;white-space:normal}.expense-list-item>strong{font-size:12px;color:var(--navy);white-space:nowrap}.expense-empty{padding:20px;text-align:center;color:var(--muted);font-size:11px;border-top:1px solid var(--line)}
.profit-highlight{background:linear-gradient(120deg,#101d36,#1c3152);border-radius:15px;padding:24px 28px;color:#fff;display:flex;align-items:center;justify-content:space-between;margin:18px 0;box-shadow:0 14px 32px rgba(16,29,54,.14)}
.profit-highlight small,.profit-highlight strong,.profit-highlight span{display:block}.profit-highlight small{font-size:11px;color:#c5d0df}.profit-highlight strong{font-size:30px;font-weight:400;margin:7px 0}.profit-highlight span{font-size:11px;color:#c5d0df}.profit-mark{font-size:38px;color:#d9b779;border:1px solid #d9b77966;width:58px;height:58px;border-radius:15px;display:grid;place-items:center}.positive-value{color:#16845b;font-weight:400}.negative-value{color:#bd4650;font-weight:400}.report-note{font-size:11px;margin:0 0 25px}
@media(max-width:700px){.expense-card-head{align-items:flex-start;flex-direction:column}.expense-metric-grid{grid-template-columns:1fr}.expense-dashboard-card{padding:16px}.profit-highlight{padding:19px}.profit-highlight strong{font-size:24px}}
/* Enforce regular, non-italic typography consistently across portal screens. */
body,h1,h2,h3,h4,h5,h6,p,a,button,input,select,textarea,label,small,span,div,th,td,b,strong,em,i{font-style:normal}
h1,h2,h3,h4,h5,h6,b,strong,th,label,.btn,.nav-link,.status,.text-link,.table-link,.stat-card strong{font-weight:400!important}


/* Cost control dashboard: distinct, responsive cards for every metric and recent expense. */
.cost-control-section{margin:22px 0 26px;display:grid;gap:14px}
.cost-control-heading-card,.cost-control-recent-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px;box-shadow:var(--shadow)}
.cost-control-heading-card{display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(135deg,#fff 0%,#f9fbfe 100%)}
.cost-control-heading-copy{min-width:0}
.cost-control-kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:20px;background:#f5f0e6;color:#92703b;font-size:10px;letter-spacing:1.25px;font-weight:400}
.cost-control-kicker-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);display:inline-block}
.cost-control-heading-card h2{font-size:21px;font-weight:400;color:var(--navy);margin:11px 0 5px}
.cost-control-heading-card p,.cost-control-recent-head p{font-size:12px;line-height:1.6;color:var(--muted);margin:0}
.cost-control-manage{white-space:nowrap;flex:none}
.cost-control-metric-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.cost-control-metric-card{min-width:0;min-height:156px;display:flex;flex-direction:column;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:17px 16px;box-shadow:0 7px 22px rgba(20,35,60,.035);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.cost-control-metric-card:hover{transform:translateY(-4px);border-color:#d8c49e;box-shadow:0 15px 30px rgba(20,35,60,.09)}
.cost-control-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:16px;margin-bottom:12px}
.cost-control-icon.amber{background:#fff5e4;color:#b27b21}.cost-control-icon.navy{background:#eaf0f9;color:#35527c}.cost-control-icon.violet{background:#f1edfa;color:#7756a5}.cost-control-icon.green{background:#e8f6ef;color:#16845b}.cost-control-icon.gold{background:#f8f0df;color:#9a742f}
.cost-control-label{font-size:11px;line-height:1.4;color:var(--muted);min-height:30px}
.cost-control-metric-card>strong{font-size:21px;line-height:1.25;color:var(--navy);font-weight:400;margin:4px 0 5px;overflow-wrap:anywhere}
.cost-control-caption{font-size:10px;line-height:1.4;color:#98a2b1}
.cost-control-profit-card{background:linear-gradient(145deg,#fff 0%,#fbf8f0 100%)}
.cost-control-recent-card{padding:20px 22px}
.cost-control-recent-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.cost-control-recent-head h3{font-size:15px;font-weight:400;color:var(--navy);margin:0 0 4px}
.cost-control-expense-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cost-control-expense-item{min-width:0;display:flex;align-items:center;gap:11px;padding:13px;background:#fbfcfe;border:1px solid var(--line);border-radius:12px;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.cost-control-expense-item:hover{border-color:#d8c49e;transform:translateY(-2px);box-shadow:var(--shadow)}
.cost-control-expense-icon,.cost-control-empty-icon{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:10px;background:#fff5e4;color:#a8792b}
.cost-control-expense-info{flex:1;min-width:0}.cost-control-expense-info strong,.cost-control-expense-info small{display:block;overflow:hidden;text-overflow:ellipsis}
.cost-control-expense-info strong{font-size:12px;font-weight:400;color:var(--ink);white-space:nowrap}.cost-control-expense-info small{font-size:10px;color:var(--muted);margin-top:4px;white-space:normal}
.cost-control-expense-amount{font-size:12px;font-weight:400;color:var(--navy);white-space:nowrap}
.cost-control-empty-card{display:flex;align-items:center;gap:13px;padding:16px;background:#fbfcfe;border:1px dashed #d9e0e9;border-radius:12px}
.cost-control-empty-icon{width:40px;height:40px;background:#edf2f8;color:#526987;font-size:17px}
.cost-control-empty-card>div{flex:1;min-width:0}.cost-control-empty-card>div strong{font-size:12px;font-weight:400;color:var(--ink)}.cost-control-empty-card p{font-size:11px;color:var(--muted);margin:4px 0 0}
@media(max-width:1250px){.cost-control-metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:850px){.cost-control-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cost-control-expense-grid{grid-template-columns:1fr}}
@media(max-width:600px){.cost-control-heading-card{align-items:flex-start;flex-direction:column;padding:18px}.cost-control-recent-card{padding:16px}.cost-control-recent-head{align-items:flex-start;flex-direction:column}.cost-control-metric-grid{grid-template-columns:1fr 1fr;gap:9px}.cost-control-metric-card{padding:14px;min-height:150px}.cost-control-metric-card>strong{font-size:18px}.cost-control-empty-card{align-items:flex-start;flex-wrap:wrap}.cost-control-empty-card>div{flex:1 1 calc(100% - 60px)}.cost-control-empty-card .btn{width:100%}}

/* Mobile-first layout hardening: prevent content from escaping its containers. */
html{width:100%;max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%}
body{width:100%;max-width:100%;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box;min-width:0}
img,svg,video,canvas,iframe{max-width:100%;height:auto}
.main{width:calc(100% - 248px);min-width:0}
.main>*{min-width:0;max-width:100%}
.topbar>*,.panel-head>*,.expense-card-head>*,.cost-control-heading-card>*{min-width:0}
p,h1,h2,h3,h4,h5,h6,small,td,th,label,.stat-note,.muted,.cost-control-caption,.cost-control-label{overflow-wrap:anywhere;word-break:normal}
input,select,textarea,button{max-width:100%}
.table-wrap{max-width:100%;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
table{min-width:620px}
.stat-grid,.expense-metric-grid,.cost-control-metric-grid,.cost-control-expense-grid,.two-col,.form-grid{min-width:0}
.stat-card,.panel,.expense-dashboard-card,.cost-control-heading-card,.cost-control-recent-card,.cost-control-metric-card{min-width:0;max-width:100%}
.stat-card strong,.cost-control-metric-card>strong{overflow-wrap:anywhere;word-break:break-word}

/* Tablet and phone navigation: move the sidebar menu into a compact top bar. */
@media(max-width:700px){
  html,body{overflow-x:hidden}
  .sidebar{position:sticky;top:0;left:0;right:0;z-index:100;width:100%;height:auto;max-height:none;padding:9px 12px 8px;margin:0;display:flex;flex-direction:column;gap:5px;box-shadow:0 5px 18px rgba(16,29,54,.14)}
  .brand{padding:0 3px 7px;margin:0;min-height:34px;gap:8px;letter-spacing:1.4px}
  .brand-mark{width:30px;height:30px;font-size:19px;flex:none}
  .brand b{font-size:12px}
  .brand small{font-size:8px;letter-spacing:2px}
  .sidebar .nav-label{display:none}
  .sidebar nav,.sidebar>.nav-menu,.sidebar .navigation{display:flex;flex-direction:row;align-items:center;gap:5px;width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding:1px 0 4px;margin:0;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .sidebar .nav-link{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:auto;white-space:nowrap;padding:8px 11px;margin:0;border-radius:8px;font-size:11px;line-height:1.2;background:rgba(255,255,255,.045)}
  .sidebar .nav-link:hover,.sidebar .nav-link.active{background:#263957;color:#fff}
  .sidebar-bottom{display:none!important}
  .main,.main.narrow{width:100%;max-width:100%;margin:0;padding:18px 14px 36px}
  .topbar{width:100%;align-items:flex-start;flex-direction:column;gap:12px;margin-bottom:18px}
  .topbar h1{font-size:24px;line-height:1.25;overflow-wrap:anywhere}
  .topbar p{max-width:100%;line-height:1.55}
  .top-actions{width:100%;display:grid;grid-template-columns:1fr;gap:8px}
  .top-actions .btn{width:100%;white-space:normal;text-align:center}
  .stat-grid,.stat-grid.three{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:16px 0 12px}
  .stat-card{padding:13px;min-height:120px}
  .stat-card strong{font-size:clamp(17px,5vw,22px);line-height:1.25}
  .stat-card small{font-size:11px;line-height:1.35}
  .stat-note{font-size:10px;line-height:1.35}
  .mini-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 18px}
  .mini-stats a,.mini-stats div{min-width:0;padding:11px;gap:8px;justify-content:space-between}
  .mini-stats span{font-size:11px}
  .mini-stats b{font-size:14px}
  .expense-dashboard-card,.cost-control-heading-card,.cost-control-recent-card{padding:14px;margin:14px 0;border-radius:13px}
  .expense-card-head,.cost-control-heading-card{align-items:flex-start;flex-direction:column;gap:12px}
  .expense-card-head .btn,.cost-control-manage{width:100%;white-space:normal}
  .expense-metric-grid,.cost-control-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .expense-metric,.cost-control-metric-card{padding:12px;min-height:130px}
  .expense-metric strong,.cost-control-metric-card>strong{font-size:17px;line-height:1.25}
  .expense-metric small,.cost-control-label{font-size:10px;line-height:1.35}
  .expense-recent-head,.cost-control-recent-head{align-items:flex-start;flex-direction:column;gap:7px}
  .cost-control-expense-grid{grid-template-columns:minmax(0,1fr)}
  .cost-control-expense-item{padding:10px;gap:8px}
  .cost-control-expense-amount{font-size:11px}
  .cost-control-empty-card{align-items:flex-start;flex-wrap:wrap}
  .cost-control-empty-card .btn{width:100%}
  .panel{padding:14px;margin:14px 0}
  .panel-head{align-items:flex-start;gap:10px;flex-wrap:wrap}
  .panel h2{font-size:16px;line-height:1.35}
  .form-grid,.two-col{grid-template-columns:minmax(0,1fr)}
  .form-grid .span-2,.span-2{grid-column:span 1}
  .form-panel{padding:16px}
  .inline-form{flex-wrap:wrap;min-width:0}
  .inline-form select{min-width:0;max-width:100%}
  .profit-highlight{gap:12px;flex-wrap:wrap;padding:16px}
  .profit-highlight strong{font-size:23px;overflow-wrap:anywhere}
}

@media(max-width:380px){
  .main,.main.narrow{padding-left:10px;padding-right:10px}
  .stat-grid,.stat-grid.three{gap:7px}
  .stat-card{padding:10px;min-height:116px}
  .stat-card strong{font-size:16px}
  .stat-icon{width:28px;height:28px;margin-bottom:10px}
  .sidebar{padding-left:9px;padding-right:9px}
  .sidebar .nav-link{padding:8px 9px;font-size:10px}
  .cost-control-metric-card{padding:10px;min-height:125px}
  .cost-control-metric-card>strong{font-size:16px}
}

@media(min-width:701px) and (max-width:1050px){
  .main{width:calc(100% - 220px);margin-left:220px;padding:26px 20px 45px}
  .sidebar{width:220px}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cost-control-metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}


/* FINAL MOBILE NAVIGATION FIX: compact top bar + tap-to-open dropdown.
   This block intentionally comes last to override older mobile menu rules. */
.mobile-topbar { display: none; }

@media (max-width: 700px) {
  body {
    padding-top: 58px !important;
  }

  .mobile-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    height: 58px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    background: var(--navy);
    box-shadow: 0 4px 16px rgba(16, 29, 54, .18);
  }

  .mobile-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    text-decoration: none;
  }

  .mobile-brand .brand-mark {
    width: 34px;
    height: 34px;
    font-size: 21px;
    flex: none;
  }

  .mobile-brand b,
  .mobile-brand small {
    display: block;
  }

  .mobile-brand b {
    font-size: 13px;
    letter-spacing: 1.4px;
  }

  .mobile-brand small {
    margin-top: 3px;
    color: #b9c4d5;
    font-size: 8px;
    letter-spacing: 2px;
  }

  .mobile-menu-toggle {
    width: 42px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 9px;
    background: rgba(255,255,255,.08);
    cursor: pointer;
  }

  .mobile-menu-toggle span {
    display: block;
    width: 19px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
  }

  /* Hidden by default; shown only after the hamburger is tapped. */
  .sidebar {
    position: fixed !important;
    top: 58px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    z-index: 1099 !important;
    display: none !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    max-height: calc(100dvh - 58px) !important;
    margin: 0 !important;
    padding: 12px 15px 16px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: none !important;
    visibility: visible !important;
    background: var(--navy) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,.2) !important;
  }

  .sidebar.menu-open {
    display: flex !important;
  }

  /* The mobile brand is already shown in the fixed top bar. */
  .sidebar > .brand {
    display: none !important;
  }

  .sidebar-menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 3px !important;
    width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: normal !important;
  }

  .sidebar .nav-label {
    display: block !important;
    padding: 5px 10px 9px !important;
  }

  .sidebar .nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 11px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    background: transparent !important;
  }

  .sidebar .nav-link:hover,
  .sidebar .nav-link:focus {
    background: #263957 !important;
    color: #fff !important;
  }

  .sidebar-bottom {
    display: block !important;
    width: 100% !important;
    margin-top: 12px !important;
    padding-top: 14px !important;
    border-top: 1px solid #34435b !important;
  }

  .sidebar-bottom .user-mini {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #fff !important;
  }

  .sidebar-bottom .user-mini b {
    display: block !important;
    color: #fff !important;
  }

  .sidebar-bottom .user-mini small {
    display: block !important;
    color: #98a4b7 !important;
  }

  .sidebar-bottom form {
    display: block !important;
    margin: 0 !important;
  }

  .sidebar-bottom .logout {
    display: block !important;
    width: 100% !important;
    padding: 15px 0 5px !important;
    color: #fff !important;
    text-align: left !important;
  }

  .main,
  .main.narrow {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 18px 14px 36px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .mobile-menu-toggle span {
    transition: none !important;
  }
}