/* EnVision Ops — base styles.
   Brand palette and fonts follow audioenvision.com (green #24B24B, dark gray #54595F, Didact Gothic headings).
   Fonts are self-hosted in /assets/fonts so the site's Content-Security-Policy can stay 'self'-only. */
@font-face{font-family:'Didact Gothic';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/didact-gothic-400.woff2) format('woff2')}
@font-face{font-family:'Yantramanav';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/yantramanav-400.woff2) format('woff2')}
@font-face{font-family:'Yantramanav';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/yantramanav-500.woff2) format('woff2')}
@font-face{font-family:'Yantramanav';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/yantramanav-700.woff2) format('woff2')}

/* Design tokens (every stylesheet uses these): type 12/13/14/15/17/20, radius 6 controls / 8 cards / 10 dialogs, 4px spacing steps */
:root{
 --r-sm:6px; --r-md:8px; --r-lg:10px; --r-pill:999px;
 --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
 --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-lg:15px; --fs-xl:17px; --fs-2xl:20px;
 --shadow-sm:0 1px 2px rgba(31,34,36,.06);
 --shadow-md:0 2px 8px rgba(31,34,36,.10);
 --shadow-lg:0 8px 24px rgba(31,34,36,.18);
 --ae-border:#c9d1cc; --ae-line-soft:#e8ece9; --ae-surface-2:#f7faf8; --ae-green-line:#9fd8ad;
 --ae-danger:#b4232f; --ae-danger-dark:#8c1f2a; --ae-danger-wash:#fdecec; --ae-danger-line:#f0b9bf;
 --ae-warn:#8a5a00; --ae-warn-wash:#fff4d6; --ae-warn-line:#f0d58a;
 --ae-green:#24b24b;        /* logo / website primary green: accents, underlines, borders */
 --ae-green-strong:#1c8f3c; /* button fill: readable with white text */
 --ae-green-dark:#17752f;   /* links and green text on white */
 --ae-green-light:#61ce70;  /* website accent green */
 --ae-green-wash:#eaf7ed;   /* subtle green backgrounds */
 --ae-ink:#1f2224;          /* near-black from the logo */
 --ae-gray:#54595f;         /* website secondary gray */
 --ae-muted:#6c7277;
 --ae-line:#dde3df;
 --ae-surface:#f4f6f5;
 --ae-head:'Didact Gothic','Yantramanav',system-ui,sans-serif;
 --ae-body:'Yantramanav',system-ui,-apple-system,'Segoe UI',sans-serif;
 --focus-ring:0 0 0 3px rgba(36,178,75,.22);
}
*{box-sizing:border-box}
body{margin:0;background:var(--ae-surface);color:var(--ae-ink);font:var(--fs-md)/1.45 var(--ae-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--ae-green-dark);text-underline-offset:2px}
a:hover{color:var(--ae-green-strong)}
:focus-visible{outline:2px solid var(--ae-green);outline-offset:2px}

/* Header: white bar so the black + green logo reads correctly, green rule underneath */
header{background:#fff;color:var(--ae-ink);display:flex;align-items:center;justify-content:space-between;padding:8px 20px;gap:var(--sp-4);border-bottom:2px solid var(--ae-green);box-shadow:var(--shadow-sm);position:relative;z-index:5}
header a{color:var(--ae-green-dark)}
.brand{display:flex;align-items:center;gap:var(--sp-3);text-decoration:none;color:inherit;min-width:0}
.brand img{height:43px;width:auto;display:block}
.brand-title{font-family:var(--ae-head);font-size:20px;letter-spacing:.02em;color:var(--ae-gray);padding-left:var(--sp-3);border-left:1px solid var(--ae-line);white-space:nowrap}
header small{display:block;color:var(--ae-muted);font-size:var(--fs-xs)}
.account{display:flex;align-items:center;gap:var(--sp-3);color:var(--ae-gray);font-size:var(--fs-sm)}

nav{display:flex;overflow:auto;background:#fff;border-bottom:1px solid var(--ae-line);padding:0 var(--sp-3)}
nav a{padding:12px 17px;font-size:17px;text-decoration:none;color:var(--ae-gray);white-space:nowrap;font-weight:500;border-bottom:2px solid transparent;transition:color .15s,border-color .15s,background-color .15s}
nav a:hover{color:var(--ae-ink);border-bottom-color:var(--ae-line);background:var(--ae-surface-2)}
nav a.active{color:var(--ae-green-dark);border-bottom-color:var(--ae-green);font-weight:700}

main{max-width:1500px;margin:var(--sp-4) auto;padding:0 var(--sp-4)}
.heading{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3) var(--sp-4);row-gap:var(--sp-1);flex-wrap:wrap}
h1,h2,h3{font-family:var(--ae-head);font-weight:400;letter-spacing:.01em;color:var(--ae-ink);overflow-wrap:anywhere}
h1{margin:0 0 var(--sp-2);font-size:var(--fs-2xl);line-height:1.2}
h2{font-size:var(--fs-xl);line-height:1.25}
h3{font-size:var(--fs-lg);line-height:1.3}
.muted,small{color:var(--ae-muted)}
.muted{font-size:var(--fs-sm);overflow-wrap:anywhere}
.filters{display:flex;gap:var(--sp-2);margin:var(--sp-2) 0 var(--sp-3);flex-wrap:wrap}
input,select,textarea{font:inherit;color:inherit;border:1px solid var(--ae-border);border-radius:var(--r-sm);padding:7px 10px;background:#fff;max-width:100%;min-width:0;transition:border-color .15s,box-shadow .15s,background-color .15s}
input:hover:not(:focus):not([type=checkbox]):not([type=radio]),select:hover:not(:focus),textarea:hover:not(:focus){border-color:#aab4ae}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ae-green);box-shadow:var(--focus-ring)}
input:disabled,select:disabled,textarea:disabled{background-color:var(--ae-surface);color:var(--ae-muted);cursor:not-allowed}
/* dropdown arrow drawn in CSS so it sits 12px from the right edge instead of touching the border */
select:not([multiple]):not([size]):not(.cell-edit){-webkit-appearance:none;appearance:none;padding-right:32px;
 background-image:linear-gradient(45deg,transparent 50%,var(--ae-gray) 50%),linear-gradient(135deg,var(--ae-gray) 50%,transparent 50%);
 background-position:calc(100% - 17px) 52%,calc(100% - 12px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
::placeholder{color:#8b9490;opacity:1}
input[name=q]{flex:1;min-width:210px}
input[type=checkbox],input[type=radio]{accent-color:var(--ae-green-strong)}
button{font:inherit;font-weight:600;cursor:pointer;border:0;border-radius:var(--r-sm);padding:7px 14px;background:var(--ae-green-strong);color:#fff;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s}
button:hover{background:var(--ae-green-dark)}
button:active{filter:brightness(.95)}
button:disabled{opacity:.6;cursor:not-allowed}
button:not(.appt):not(.mcal-day):not(.mo-date):not(.mo-more):not(.more-appts):focus-visible{box-shadow:var(--focus-ring)}
button.secondary{background:var(--ae-gray);box-shadow:none}
button.secondary:hover{background:#41454a}
header button.secondary{background:#fff;color:var(--ae-gray);border:1px solid var(--ae-border);padding:5px 12px}
header button.secondary:hover{background:var(--ae-surface);color:var(--ae-ink)}
header a.header-link{border:1px solid var(--ae-border);border-radius:var(--r-sm);padding:6px 14px;font-size:17px;text-decoration:none;color:var(--ae-gray);font-weight:600;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s}
header a.header-link:hover{background:var(--ae-surface);color:var(--ae-ink)}
header a.header-link.active{border-color:var(--ae-green);color:var(--ae-green-dark);background:var(--ae-green-wash)}
button.small{font-size:var(--fs-sm);padding:5px 10px;line-height:1.4;white-space:nowrap}
button.done{background:var(--ae-green-strong)}
.scroll{overflow-x:auto;background:#fff;border:1px solid var(--ae-line);border-radius:var(--r-md);box-shadow:var(--shadow-sm)}
table{border-collapse:collapse;width:100%;min-width:950px;font-size:var(--fs-sm)}
th,td{position:relative;text-align:left;padding:6px 10px;line-height:1.4;border-bottom:1px solid var(--ae-line-soft);vertical-align:middle}
th{background:var(--ae-surface-2);white-space:nowrap;color:var(--ae-gray);font-weight:600;border-bottom:1px solid var(--ae-line)}
tbody tr{transition:background-color .12s}
tr:last-child td{border-bottom:0}
/* Keep one record per line in data tables (wide tables scroll sideways instead of wrapping into tall rows) */
.scroll>table td,.scroll>table th{white-space:nowrap}
.empty{padding:var(--sp-5);background:#fff;border:1px dashed var(--ae-border);border-radius:var(--r-md);color:var(--ae-muted)}
.notice,.ambig,.sched-status{border-radius:var(--r-md);overflow-wrap:anywhere}
.panel{border-radius:var(--r-md);box-shadow:var(--shadow-sm)}

/* Sign-in page */
.login{max-width:400px;background:#fff;margin:9vh auto;padding:var(--sp-5);border-radius:var(--r-lg);border-top:3px solid var(--ae-green);box-shadow:var(--shadow-md)}
.login-logo{display:block;width:180px;max-width:70%;height:auto;margin:0 auto var(--sp-2)}
.login h1{text-align:center;color:var(--ae-gray);margin:0 0 var(--sp-2)}
.login label,.editor label{display:flex;flex-direction:column;gap:var(--sp-1);margin:var(--sp-3) 0 var(--sp-1);font-weight:500;font-size:var(--fs-sm)}
.login input,.login button{width:100%}
.error{color:var(--ae-danger)}
.editor{max-width:950px}
.editor form{background:#fff;border-radius:var(--r-lg);padding:var(--sp-4);border:1px solid var(--ae-line);box-shadow:var(--shadow-sm)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-1) var(--sp-4)}
.fields input,.fields select,.fields textarea{width:100%}
.fields .check{flex-direction:row;align-items:center}

/* Desktop: the whole app page fits in the window. Header, tabs, filters and toolbars keep their natural height,
   the data table takes the remaining space and scrolls inside itself (so its scrollbars and anything below it stay visible). */
@media(min-width:761px){
 body.app-page{height:100vh;display:flex;flex-direction:column;overflow:hidden}
 body.app-page>header,body.app-page>nav{flex:none}
 body.app-page>main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;margin-top:var(--sp-3);margin-bottom:var(--sp-3);width:calc(100% - 32px);max-width:none;margin-left:var(--sp-4);margin-right:var(--sp-4);padding:0}
 body.app-page>main>*{flex:none}
 body.app-page>main>.scroll{flex:1 1 auto;min-height:140px;max-height:none!important;overflow:auto}
 body.app-page>main>.scroll>table{margin:0}
 body.app-page>main>.muted{margin:var(--sp-1) 0 0}
 body.app-page .heading h1{margin-bottom:var(--sp-1)}
 body.app-page .filters{margin:var(--sp-1) 0 var(--sp-2)}
 body.app-page .inventory-view-tools{margin:2px 0 var(--sp-1)}
 body.app-page .report-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-3);margin:0 0 var(--sp-1)}
 body.app-page .report-tools button{padding:4px 12px}
 body.app-page .report-tools p{margin:0}
 body.app-page .report-tools p.muted{flex-basis:100%;font-size:var(--fs-sm)}
}

/* Admin menu (admins only; navigation only — each page enforces its own access). Hidden on phones. */
.admin-menu{position:relative}
.admin-menu summary{list-style:none;cursor:pointer;border:1px solid var(--ae-border);border-radius:var(--r-sm);padding:6px 14px;font-size:17px;color:var(--ae-gray);font-weight:600;white-space:nowrap}
.admin-menu summary::-webkit-details-marker{display:none}
.admin-menu summary::after{content:" \25BE";font-size:.8em}
.admin-menu[open] summary,.admin-menu summary:hover{background:var(--ae-surface);color:var(--ae-ink)}
.admin-menu.is-active summary{border-color:var(--ae-green);color:var(--ae-green-dark);background:var(--ae-green-wash)}
.admin-menu-list{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:260px;display:grid;gap:2px;padding:var(--sp-1);background:#fff;border:1px solid var(--ae-line);border-radius:var(--r-md);box-shadow:var(--shadow-lg)}
.admin-menu-list a{padding:7px var(--sp-3);font-size:17px;border-radius:var(--r-sm);text-decoration:none;color:var(--ae-ink);white-space:nowrap}
.admin-menu-list a:hover,.admin-menu-list a.active{background:var(--ae-green-wash);color:var(--ae-green-dark)}

/* Main navigation wrapper: desktop is the normal tab bar; phones get a sticky ☰ Menu bar (see app_nav(), nav.js). */
.mnav{flex:none}
.mnav-bar{display:none}

/* Phones and narrow windows */
@media(max-width:650px){
 header{padding:6px var(--sp-3);align-items:center}
 .brand img{height:36px}
 .brand-title{font-size:18px;padding-left:var(--sp-2)}
 .account{flex-direction:column;align-items:end;gap:var(--sp-1);font-size:var(--fs-sm)}
 header .account{min-width:0;flex-shrink:1}
 header .account span{white-space:normal;text-align:right;overflow-wrap:anywhere}
 main{padding:0 var(--sp-3);margin:var(--sp-3) auto}
 .fields{grid-template-columns:1fr}
 .login{margin:6vh var(--sp-3)}
 .filters>*{flex:1}
}
@media(max-width:560px){.brand{flex-direction:column;align-items:flex-start;gap:1px}.brand-title{font-size:17px;line-height:1.1;padding-left:0;border-left:0}}
@media(max-width:760px){
 .admin-menu{display:none}
 nav .mobile-hide-reports{display:none!important}
 html{scroll-padding-top:64px} /* things scrolled into view aren't hidden under the sticky bar */
 .mnav{position:sticky;top:0;z-index:80;background:#fff;border-bottom:1px solid var(--ae-line)}
 .mnav-bar{display:flex;align-items:center;gap:var(--sp-3);padding:4px var(--sp-3);min-height:52px}
 .mnav-toggle{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;min-width:44px;padding:6px 14px;background:#fff;color:var(--ae-ink);border:1px solid var(--ae-border);border-radius:var(--r-md);font-weight:600;font-size:17px}
 .mnav-toggle:hover,.mnav-toggle[aria-expanded="true"]{background:var(--ae-surface);color:var(--ae-ink)}
 .mnav-icon{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:22px}
 .mnav-icon span{display:block;height:2px;border-radius:var(--r-sm);background:currentColor}
 .mnav-current{font-family:var(--ae-head);font-size:20px;color:var(--ae-green-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
 .mnav nav{display:none;position:absolute;left:0;right:0;top:100%;flex-wrap:wrap;gap:var(--sp-2);padding:10px var(--sp-3) var(--sp-3);overflow:visible;
  background:#fff;border-bottom:1px solid var(--ae-line);box-shadow:var(--shadow-lg)}
 .mnav-open .mnav nav{display:flex}
 .mnav nav a{order:9;display:inline-flex;align-items:center;min-height:48px;padding:8px 20px;font-size:17px;border:1px solid var(--ae-line);border-radius:var(--r-md)}
 .mnav nav a.active{background:var(--ae-green-wash);border-color:var(--ae-green)}
 .mnav nav .nav-schedule{order:0}.mnav nav .nav-projects{order:1}.mnav nav .nav-inventory{order:2}.mnav nav .nav-orders{order:3}.mnav nav .nav-labor{order:4}
 /* touch targets: at least 44px, 16px text in fields (stops iOS zooming on focus). Zero specificity, so component rules still win. */
 :where(body:not(.schedule-page)) :where(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea){min-height:44px;font-size:16px}
 :where(body:not(.schedule-page)) :where(button){min-height:44px}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
/* text and containers never overlap: flex/grid children may shrink */
main,.panel,.heading>*,.filters>*,.account>*{min-width:0}
.account-link{color:inherit;text-decoration:none}.account-link:hover span,.account-link:focus-visible span{text-decoration:underline}