/* Rove by LE — TEST COPY styles. Visual language follows app-redesign/styles.css. */
:root{
  --navy:#0B1320;--gold:#D4B073;--cream:#FAF6EC;--ink:#1E1E1E;--muted:#777971;--line:#E7E5DC;
  --field:#FDFCF8;--panel:#FFFFFF;--grad:linear-gradient(115deg,#EEDAB5,#B8925A);
  --ok-bg:#E8F0E9;--ok:#426653;--prog-bg:#ECF0F5;--prog:#586A80;--bad-bg:#F6E9E3;--bad:#A05A46;--pend-bg:#F4EEDF;--pend:#806335;
  --sidebar:343px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--navy);font:13px/1.5 Montserrat,Arial,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
button,input,textarea,select{font:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
h1{font-size:31px;letter-spacing:-1px;margin:8px 0 10px;line-height:1.2}
h2{font-size:17px;letter-spacing:-.3px;margin:0 0 20px}
h3{font-size:14px;margin:0 0 7px}
p{line-height:1.7;margin:7px 0}
.muted,small{color:var(--muted);font-size:11px;line-height:1.7}
.eyebrow{font-size:10px;letter-spacing:2px;text-transform:uppercase;font-weight:600;color:var(--muted)}
.gold{color:var(--gold)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Logos: exact files at natural size on exact plates. Never filtered, faded, cropped or transformed. */
.rove-logo{display:block;max-width:none;max-height:none;flex:none}
.plate-dark{background:#0C0D0F}
.plate-light{background:#FEF9F3}
.plate-icon{background:#FBFAF5}
.plate{display:flex;justify-content:center;align-items:center;flex:none}

/* Test badge */
.test-badge{position:fixed;top:8px;left:50%;margin-left:-82px;width:164px;text-align:center;z-index:90;pointer-events:none;
  background:#A05A46;color:#fff;font-size:10px;font-weight:700;letter-spacing:1px;padding:5px 8px;border-radius:5px}

/* Buttons */
button,.btn{border:1px solid var(--line);border-radius:8px;background:#fff;padding:11px 17px;min-height:44px;color:var(--navy);
  font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-size:12px;line-height:1.3}
.btn:hover{text-decoration:none}
button:disabled{cursor:not-allowed;opacity:.55}
.primary{background:var(--grad);border:0;color:var(--navy)}
.secondary{background:transparent}
.danger{color:var(--bad);border-color:#E8CFC6}
.link-btn{border:0;background:none;padding:6px;min-height:0;color:var(--navy);text-decoration:underline;font-weight:600}
.icon-btn{padding:8px 11px;min-width:44px}
.small-btn{min-height:36px;padding:7px 12px;font-size:11px}

/* Shell */
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);background:var(--navy);color:#C1C6CE;display:flex;flex-direction:column;z-index:40;overflow:hidden}
.sidebar-scroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
.sidebar .logo-plate{padding:16px;justify-content:center}
.nav{display:grid;gap:6px;padding:24px 22px}
.nav a{padding:13px 15px;border-radius:8px;font-size:12px;display:flex;gap:12px;align-items:center;border-left:3px solid transparent;min-height:44px}
.nav a:hover{background:#16202F;text-decoration:none}
.nav a.active{background:#1B2638;color:#EEDAB5;border-left-color:var(--gold)}
.nav a span[aria-hidden]{font-size:16px;width:22px;text-align:center}
.sidebar-foot{margin-top:auto;border-top:1px solid #222C3B;padding:20px 22px 24px;font-size:11px;line-height:1.8}
.sidebar-foot .muted{color:#9CA3AD}
.sidebar-foot button{margin-top:12px;background:transparent;color:#EEDAB5;border-color:#2A3446;width:100%}
.avatar{display:grid;place-items:center;background:#E9DFC9;color:var(--navy);border-radius:50%;width:36px;height:36px;font-size:11px;font-weight:700;flex-shrink:0}
.shell{margin-left:var(--sidebar);min-height:100vh}
.topbar{height:80px;border-bottom:1px solid var(--line);padding:0 42px;display:flex;justify-content:space-between;align-items:center;background:#FDFAF3;gap:16px}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:16px;min-width:0}
.menu-btn,.topbar .icon-plate{display:none}
.topbar .icon-plate{padding:6px}
.main{padding:33px 42px 48px;max-width:1450px;margin:auto}
.drawer-backdrop{display:none}

.heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px;flex-wrap:wrap}
.heading p{color:var(--muted);font-size:12px;margin:0}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grid{display:grid;grid-template-columns:1.7fr 1fr;gap:22px}
.grid>*,.stack>*{min-width:0}
.grid.equal{grid-template-columns:1fr 1fr}
.stack{display:grid;gap:22px;align-content:start}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px;min-width:0}
.dark{background:var(--navy);color:#fff;border:0}
.dark .muted,.dark small{color:#A5ABB3}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.metric{padding:22px}
.metric strong{display:block;font-size:28px;letter-spacing:-1px;margin:10px 0 4px}
.metric small{font-size:10px}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:14px;flex-wrap:wrap}
.section-head h2{margin:0}
.text-link{font-size:11px;font-weight:600;text-decoration:underline}
.row{padding:14px 0;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px}
.row:first-child{border-top:0}
.row p{margin:3px 0;font-size:11px}
.empty{padding:28px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:12px;background:var(--field)}
.empty p{margin:0 0 12px}

.pill{font-size:10px;font-weight:600;border-radius:5px;padding:5px 9px;display:inline-block;white-space:nowrap;background:var(--pend-bg);color:var(--pend)}
.pill.green{background:var(--ok-bg);color:var(--ok)}
.pill.blue{background:var(--prog-bg);color:var(--prog)}
.pill.red{background:var(--bad-bg);color:var(--bad)}
.pill.gray{background:#EFEEE8;color:#55574F}

.tabs{display:flex;gap:22px;border-bottom:1px solid var(--line);margin-bottom:22px;overflow-x:auto;white-space:nowrap}
.tabs button{border:0;border-radius:0;background:none;padding:12px 0;font-size:12px;color:var(--muted);font-weight:500;border-bottom:2px solid transparent}
.tabs button[aria-selected=true]{color:var(--navy);border-bottom-color:var(--gold);font-weight:700}
.filters{display:flex;gap:12px;margin-bottom:20px;align-items:center;flex-wrap:wrap}
.search{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:0 14px;flex:1;min-width:200px;min-height:44px}
.search input{border:0;background:transparent;width:100%;min-width:0;padding:12px 0;color:var(--ink)}
.search input:focus{outline:0}
.search:focus-within{outline:2px solid var(--gold);outline-offset:2px}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{min-height:38px;padding:8px 13px;font-size:11px}
.seg button[aria-pressed=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
select.sort{border:1px solid var(--line);border-radius:8px;background:#fff;padding:10px;min-height:44px;color:var(--ink)}

.table{width:100%;border-collapse:collapse;text-align:left;font-size:12px}
.table th{color:var(--muted);font-size:10px;letter-spacing:1px;font-weight:600;padding:12px 10px;border-bottom:1px solid var(--line);text-transform:uppercase;white-space:nowrap}
.table td{padding:16px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.table tbody tr:last-child td{border-bottom:0}
.table small{display:block;margin-top:3px}
.table .num,.table th.num{text-align:right;white-space:nowrap}
.table tr.clickable{cursor:pointer}
.table tr.clickable:hover td{background:#FDFBF6}
.table-wrap{overflow-x:auto}
.items-table input{width:100%;border:1px solid var(--line);background:var(--field);border-radius:7px;padding:10px;color:var(--ink);min-height:40px;font-size:12px}
.items-table input.num{text-align:right}
.items-table td{padding:8px 6px;vertical-align:middle}
.items-table .c-qty{width:90px}.items-table .c-price{width:130px}.items-table .c-amt{width:110px}.items-table .c-del{width:52px}
.items-table input[aria-invalid=true]{border-color:var(--bad);background:var(--bad-bg)}

.field{display:block;font-size:11px;font-weight:600;margin-bottom:16px}
.field input,.field textarea,.field select{display:block;width:100%;border:1px solid var(--line);background:var(--field);border-radius:8px;padding:12px;margin-top:7px;color:var(--ink);font-size:13px;min-height:44px}
.field textarea{min-height:90px;resize:vertical}
.field .err{display:block;color:var(--bad);font-weight:500;margin-top:5px;font-size:11px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.field-grid .span2{grid-column:1/-1}
.check{display:flex;gap:10px;align-items:center;font-size:12px;font-weight:600;margin-bottom:16px;min-height:44px}
.check input{width:18px;height:18px;accent-color:#B8925A}
.form-error{color:var(--bad);background:var(--bad-bg);border-radius:8px;padding:10px 12px;font-size:12px;margin:0 0 14px}

.totals .row{padding:10px 0}
.totals .grand{font-size:20px;font-weight:800}
.notice{padding:14px;background:#F7F1E6;border-radius:8px;font-size:11px;line-height:1.7}

/* Stage rail */
.stages{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:4px 0 22px}
.stages button{display:block;text-align:left;border:0;border-top:3px solid #E9E9E2;border-radius:0;background:none;padding:10px 0 0;font-size:11px;color:var(--muted);min-height:44px}
.stages button.done{border-top-color:var(--gold);color:var(--navy)}
.stages button.current{font-weight:800;color:var(--navy)}

/* Timeline */
.timeline{padding-left:21px;border-left:1px solid var(--line);margin-left:5px}
.timeline p{position:relative;margin:0 0 18px;font-size:12px}
.timeline p:before{content:'';position:absolute;left:-26px;top:6px;width:9px;height:9px;background:var(--gold);border-radius:50%}

/* Chart */
.chart{display:flex;align-items:flex-end;gap:12px;height:170px;padding-top:24px;border-bottom:1px solid #41434A}
.chart .bar-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;min-width:0}
.chart .bar-val{font-size:10px;color:#DCE0E5;margin-bottom:5px;white-space:nowrap}
.chart .bar{width:100%;max-width:44px;background:linear-gradient(#EEDAB5,#B8925A);border-radius:4px 4px 0 0;min-height:2px}
.chart-labels{display:flex;gap:12px;margin-top:10px;font-size:10px;color:#A5ABB3}
.chart-labels span{flex:1;text-align:center}

/* Login */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px 20px}
.login-inner{width:100%;max-width:420px;display:grid;gap:22px;justify-items:center}
.login .plate-light{padding:12px 16px}
.login .plate-icon{padding:8px;display:none}
.login .tagline{text-align:center;margin:0}
.login .card{width:100%}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:76px}
.pw-wrap button{position:absolute;right:4px;bottom:2px;min-height:40px;border:0;background:none;font-size:11px;padding:8px 10px}

/* Modal + toast */
.modal-backdrop{position:fixed;inset:0;background:rgba(11,19,32,.45);display:flex;align-items:center;justify-content:center;padding:20px;z-index:100}
.modal{background:#fff;border-radius:12px;border-top:3px solid var(--gold);padding:24px;width:100%;max-width:480px;max-height:calc(100vh - 40px);overflow:auto}
.modal h2{margin-bottom:12px}
.modal .actions{justify-content:flex-end;margin-top:18px}
.toast-root{position:fixed;right:20px;bottom:20px;display:grid;gap:8px;z-index:110}
.toast{background:var(--navy);color:#fff;padding:12px 16px;border-radius:8px;font-size:12px;max-width:340px;border-left:3px solid var(--gold)}
.toast.error{border-left-color:#E09A84}
.sheet{display:grid;gap:10px}
.sheet .btn,.sheet button{width:100%;justify-content:flex-start}

/* Document sheet (invoice / estimate) */
.doc-sheet{background:#fff;padding:40px;color:var(--ink)}
.doc-head{display:flex;justify-content:space-between;gap:24px;border-bottom:2px solid var(--gold);padding-bottom:20px;margin-bottom:22px;flex-wrap:wrap}
.doc-head h2,.doc-sheet h2{color:var(--navy)}
.doc-title{text-align:right}
.doc-title h2{font-size:26px;letter-spacing:2px;margin:0 0 4px}
.doc-title .num{font-size:15px;font-weight:700;color:var(--navy)}
.doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.doc-grid .right{text-align:right}
.doc-sheet .table th{color:var(--navy)}
.doc-totals{margin-left:auto;width:100%;max-width:340px;margin-top:10px}
.doc-totals .row{padding:7px 0;font-size:12px}
.doc-totals .balance{font-size:16px;font-weight:800;color:var(--navy);border-top:2px solid var(--gold)}
.doc-foot{margin-top:28px;border-top:1px solid var(--line);padding-top:16px;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:flex-start}
.doc-foot-text{flex:1 1 260px;display:grid;gap:10px;align-content:start}
.doc-foot-text p{margin:0}
.doc-foot .powered{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.doc-foot .plate-light{padding:8px}
.doc-test-mark{font-size:10px;letter-spacing:1px;color:var(--bad);font-weight:700}

.swatches{display:flex;gap:10px;margin:12px 0;flex-wrap:wrap}
.swatch{width:42px;height:42px;border-radius:8px;border:1px solid var(--line)}
.brand-preview{display:grid;gap:14px;justify-items:start}
.brand-preview .plate-light{padding:16px}
.brand-preview .plate-icon{padding:10px}
.brand-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

.bottom-nav{display:none}

/* Constrained desktop: sidebar becomes a drawer */
@media screen and (max-width:1100px) and (min-width:761px){
  .sidebar{left:calc(-1 * var(--sidebar) - 10px);transition:left .2s}
  body.drawer-open .sidebar{left:0}
  body.drawer-open .drawer-backdrop{display:block;position:fixed;inset:0;background:rgba(11,19,32,.4);z-index:35}
  .shell{margin-left:0}
  .menu-btn{display:inline-flex}
  .topbar{height:96px;padding:0 28px}
  .topbar .icon-plate{display:flex}
  .main{padding:30px 32px 48px}
  .metrics{grid-template-columns:repeat(2,1fr)}
}
@media screen and (max-width:1100px){.grid{grid-template-columns:1fr}}

/* Phone (screen only: a printed Letter page is ~720 CSS px wide) */
@media screen and (max-width:760px){
  body{font-size:12px}
  .sidebar{display:none}
  .shell{margin-left:0}
  .topbar{height:96px;padding:0 20px}
  .topbar .icon-plate{display:flex}
  .desktop-label,.hide-mobile{display:none!important}
  .main{padding:24px 20px calc(96px + env(safe-area-inset-bottom))}
  .heading{align-items:flex-start;margin-bottom:22px}
  .heading h1{font-size:26px}
  .heading .actions{width:100%}
  .heading .actions .primary{flex:1}
  .grid,.grid.equal,.doc-grid{grid-template-columns:1fr}
  .doc-grid .right,.doc-title{text-align:left}
  .metrics{grid-template-columns:1fr 1fr;gap:12px}
  .metric{padding:16px}
  .metric strong{font-size:22px}
  .card{padding:18px}
  .field-grid{grid-template-columns:1fr}
  .filters .search{flex-basis:100%}
  .stages{gap:4px}
  .stages button{font-size:9px}
  .doc-sheet{padding:20px}
  .bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;height:calc(72px + env(safe-area-inset-bottom));padding:8px 4px env(safe-area-inset-bottom);z-index:30;background:var(--navy);justify-content:space-around}
  .bottom-nav a,.bottom-nav button{color:#AAAEB5;font-size:10px;display:grid;justify-items:center;gap:3px;min-width:56px;background:none;border:0;padding:4px;min-height:56px;font-weight:500}
  .bottom-nav [aria-hidden]{font-size:19px}
  .bottom-nav .active{color:var(--gold)}
  .toast-root{bottom:90px;left:20px;right:20px}
  /* Jobs table becomes stacked labeled rows */
  .stack-table thead{display:none}
  .stack-table tr{display:block;border-bottom:1px solid var(--line);padding:10px 0}
  .stack-table td{display:flex;justify-content:space-between;gap:12px;border:0;padding:5px 0;text-align:right}
  .stack-table td::before{content:attr(data-label);color:var(--muted);font-size:10px;letter-spacing:1px;text-transform:uppercase;font-weight:600;text-align:left}
  .stack-table td:first-child{text-align:left;display:block}
  .stack-table td:first-child::before{content:none}
  .items-table{min-width:560px}
  .test-badge{top:36px}
  .items-table td:first-child{min-width:210px}
}
@media screen and (max-width:400px){
  .login{padding:32px 12px}
  .login .plate-light{padding:12px 0}
}
/* Lockups are never shrunk: where a full lockup cannot fit, use the icon or omit the optional lockup. */
@media screen and (max-width:760px){
  .doc-foot .powered,.brand-preview .lockup{display:none}
}
@media screen and (max-width:339px){
  .login .plate-light{display:none}
  .login .plate-icon{display:flex}
}

/* Print: only the selected document */
@page{size:letter portrait;margin:.5in}
@media print{
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  html,body{background:#fff!important;font-size:10.5pt}
  .sidebar,.topbar,.bottom-nav,.no-print,.test-badge,#modal-root,#toast-root,.drawer-backdrop,.heading{display:none!important}
  .shell{margin:0}
  .main{padding:0;max-width:none;margin:0}
  .grid{display:block}
  .card.doc-sheet{border:0;border-radius:0;box-shadow:none;padding:0;background:#fff}
  .doc-sheet{font-size:10.5pt;color:var(--ink)}
  .doc-sheet .table{font-size:10pt}
  .doc-sheet .table td{padding:8px 6px}
  .doc-sheet p{line-height:1.45}
  .doc-head{padding-bottom:14px;margin-bottom:14px}
  .doc-grid{margin-bottom:10px}
  .doc-foot{flex-wrap:nowrap;margin-top:18px}
  .doc-sheet thead{display:table-header-group}
  .doc-sheet tr{break-inside:avoid;page-break-inside:avoid}
  .doc-totals,.doc-foot .powered{break-inside:avoid;page-break-inside:avoid}
  .doc-grid{grid-template-columns:1fr 1fr}
  .doc-grid .right,.doc-title{text-align:right}
  .table-wrap{overflow:visible}
  a{text-decoration:none}
}
.show-mobile{display:none}
@media screen and (max-width:760px){.show-mobile{display:block}}