/* Alpha visual system. Keep data, forms and print certificates in their original flows. */
:root{
  --green:#91f34b;--green-dark:#13c785;--ink:#eff8f5;--muted:#a4b6ba;
  --bg:#071116;--line:#2b444a;--danger:#ff897e;
  --panel:#10232a;--panel-2:#152d35;--panel-3:#1d3740;
  --cyan:#36c8ea;--violet:#b880ec;--amber:#f2b45c;
  --ring:0 0 0 3px rgba(80,223,185,.3);
}
html{scroll-behavior:smooth}
body{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:radial-gradient(ellipse at 100% -12%,rgba(14,116,107,.25),transparent 37%),radial-gradient(ellipse at -25% 72%,rgba(16,86,91,.16),transparent 38%),var(--bg);color:var(--ink)}
h1,h2,h3{letter-spacing:-.025em}h2{line-height:1.18}p{line-height:1.5}a{color:#a4efdb}small,.muted{color:var(--muted)}
main{padding-bottom:56px}
.card,.step,.survey-item,.modal-card,.ashp-room,.ashp-room-collapsed,.installer-job-card{
  background:linear-gradient(145deg,rgba(24,48,56,.96),rgba(13,31,38,.98));
  border:1px solid var(--line);border-radius:17px;box-shadow:0 15px 32px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.035)
}
.card,.step{padding:20px}.card{margin-bottom:14px}
.app-header{background:rgba(7,18,23,.97);border-bottom:1px solid #234047;box-shadow:0 6px 20px rgba(0,0,0,.24);backdrop-filter:blur(16px)}
.brand-logo,.sidebar-brand img,.mobile-sidebar-brand img{object-fit:contain;background:#030907;border:0;box-shadow:none}
.desktop-sidebar,.mobile-sidebar{background:linear-gradient(160deg,#0a171d 0%,#091318 65%,#0c1d1c 100%);border-color:#253c42}
.sidebar-brand,.mobile-sidebar-brand,.sidebar-bottom,.mobile-sidebar-bottom{border-color:#294148}
.sidebar-link,.mobile-sidebar-link{font-weight:650;color:#a6b9bc;transition:background .2s,color .2s,transform .2s}
.sidebar-link:hover,.mobile-sidebar-link:hover{background:#18373c;color:#fff;transform:translateX(2px)}
.sidebar-link.active,.mobile-sidebar-link.active{background:linear-gradient(90deg,#234b37,#123238);color:#bcffb7;box-shadow:inset 3px 0 #83ee74}
.sidebar-icon{color:#63dbad}
.primary,.secondary,.danger,.fileBtn,.attachment-action,.shortcut,.survey-filter,.survey-type-filter{transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease}
.primary{background:linear-gradient(110deg,#a0fa64 0%,#54eb7a 48%,#08cf9d 100%);color:#09241c;border:1px solid rgba(185,255,196,.32);box-shadow:0 6px 23px rgba(24,215,141,.18);font-weight:800}
.primary:hover,.shortcut:hover,.fileBtn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(20,201,145,.25)}
.secondary{background:#203640;border:1px solid #385761;color:#e5f2ef}
.secondary:hover{background:#2c4850;border-color:#70aabb}
.danger{background:#4b2526;color:#ffb0a8}
button:focus-visible,a:focus-visible,[role=button]:focus-visible{outline:2px solid #87f4b7;outline-offset:3px}
input,select,textarea{background:#0b2028;border:1px solid #3a565c;color:#eef8f5;border-radius:10px;min-width:0}
input::placeholder,textarea::placeholder{color:#91a8aa}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:var(--ring);border-color:#55dbb4}
label{color:#dbeae7}
.upload-card,.detail-row,.detail-photo,.preview-photo-item,.ashp-subitem,.ashp-room-summary,.assignment-strip,.string-card,.project-actions{background:#132a32;border:1px solid #355158;border-radius:13px}
.fileBtn{background:#1b4545;border:1px solid #41857a;color:#d4ffe8}
.attachment-action{color:#8ef1c4;border-color:#518b7e}
.attachment-action:hover{background:#20443d}
.calc,.review-note,.readonly-note,.registration-identity,.project-next{background:#163c34;color:#c0fbd2;border-color:#38755a}
.status-pill,.list-status,.assignment-status.assigned,.installer-status.active,.tracker-status.done{background:#1b4d38;color:#adf8c4;border-color:#3d8b61}
.list-status.complete,.installer-status.active{background:#1b4d38;color:#adf8c4}
.status-pill.draft,.list-status.draft,.tracker-status.active{background:#493a24;color:#ffd996;border-color:#987040}
.list-status.draft{background:#493a24;color:#ffd996}
.installer-status.blocked{background:#4b2526;color:#ffb0a8}
.registration-identity span,.registration-identity small{color:#c7e2d5}
.installer-row .invite-delivery{color:#a7e9b5}.installer-row .invite-delivery-failed{color:#ffb0a8}
.survey-ref,.open-hint{color:#99edba}
.tracker-status.pending{background:#213138;color:#adbfc0;border-color:#40555a}
.survey-type-badge.solar{background:#4d3820;color:#ffe3a4}.survey-type-badge.ashp{background:#163d51;color:#a2e8ff}
.survey-filter,.survey-type-filter{background:#152d35;color:#dceeea;border-color:#3d555b}
.survey-filter.active,.survey-type-filter.active{background:#245845;border-color:#6acb96;color:#ceffcf}
.progress{background:#27434a}.progress>div{background:linear-gradient(90deg,#8bf34a,#08cf9d)}
.modal-backdrop{background:rgba(1,9,13,.76);backdrop-filter:blur(6px)}
.modal-card{background:linear-gradient(145deg,#1a3138,#0e2229);border:1px solid #41636b}
.modal-card p{color:#bbcbca}
.survey-type-choice,.installer-row,.ashp-photo-item,.calendar-agenda-item{background:#152d35;border-color:#39535a}
details{border-color:#35525a}summary:hover{color:#a8f8c9}

/* Main dashboard */
.eyebrow{display:block;color:#86efad;font-size:.72rem;font-weight:800;letter-spacing:.15em;margin-bottom:12px}
.dashboard-hero{position:relative;isolation:isolate;overflow:hidden;min-height:215px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;padding:27px 30px;background:linear-gradient(90deg,rgba(5,22,26,.96) 0%,rgba(6,30,32,.84) 44%,rgba(5,24,27,.18) 100%),url('/solar-roof-hero.png') center 48%/cover}
.dashboard-hero:after,.installers-heading:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,transparent 40%,rgba(4,20,25,.42))}
.dashboard-hero .hero-copy{max-width:510px}.dashboard-hero h2{font-size:clamp(1.65rem,3.1vw,2.65rem);margin:0 0 9px;max-width:530px}.dashboard-hero p{margin:0;color:#d1e2e1;max-width:480px}
.dashboard-hero .home-primary-action{align-self:flex-end;flex:0 0 auto}.dashboard-hero .backup-tools{width:100%;min-height:0}
.dashboard-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 14px}
.dashboard-kpi{display:flex;flex-direction:column;align-items:flex-start;min-height:130px;gap:4px;padding:15px 17px;border:1px solid #34535a;border-radius:16px;background:linear-gradient(145deg,#17313a,#0f232b);box-shadow:0 12px 23px rgba(0,0,0,.13)}
.dashboard-kpi strong{font-size:clamp(1.65rem,3vw,2.15rem);letter-spacing:-.04em;line-height:1.12}.dashboard-kpi>span:last-child{font-size:.82rem;color:#cadad8;font-weight:650}
.kpi-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;margin-bottom:4px;font-size:1.25rem}
.kpi-green .kpi-icon{background:#1e5440;color:#8ffa88}.kpi-cyan .kpi-icon{background:#14475a;color:#54d9f7}.kpi-violet .kpi-icon{background:#3e2c54;color:#cca2fd}.kpi-amber .kpi-icon{background:#543b22;color:#ffd195}
.dashboard-shortcuts{border:1px solid #314e53;background:linear-gradient(120deg,#132b31,#10252b);padding:14px 17px;border-radius:15px;margin-bottom:14px}
.dashboard-shortcuts>strong{display:block;margin-bottom:10px}.dashboard-shortcuts>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.shortcut{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;border-radius:10px;border:1px solid #395861;padding:8px 12px;text-decoration:none;color:#e9f7f3;background:#19333c;cursor:pointer;font-weight:700}
.shortcut span{flex:1;text-align:left}.shortcut-cyan{color:#83e5f7}.shortcut-violet{color:#d3b0ff}.shortcut-amber{color:#f6ce8b}
.dashboard-tools{padding:17px}.survey-summary{color:#d1e3df}.survey-search-row{gap:10px}
.tracker-scroll{background:#10242b;border-color:#36525a}.project-tracker thead th{background:#163b38;color:#aaf7c4}
.project-tracker .tracker-project,.project-tracker tr:nth-child(even) .tracker-project{background:#10272e}
.project-tracker tbody tr:nth-child(even){background:#142c33}.project-tracker tbody tr:hover{background:#1c3d3b}
.tracker-status{background:#24373c;border-color:#42575b;color:#bcccca}
.tracker-next button{border-color:#4e7575}

/* Calendar and management */
.calendar-heading,.installers-heading{position:relative;overflow:hidden}
.installers-heading{min-height:205px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;background:linear-gradient(90deg,rgba(6,27,31,.96),rgba(6,32,37,.79) 53%,rgba(7,28,35,.35)),url('/installer-hero.png') center 42%/cover}
.installers-heading h2{font-size:clamp(1.9rem,4vw,2.6rem);margin:0 0 7px}.installers-heading p{margin:0;color:#cededc}
.installer-grid .card{min-width:0}.installer-grid h3{color:#f0faf5}
.installer-delete-btn{padding:7px 9px;font-size:.78rem}
.calendar-panel{background:linear-gradient(145deg,#152e37,#0e222a);border-color:#365862}
.calendar-day{background:#1a333b;color:#e9f4ef;border-color:#35545b;border-radius:10px;transition:background .2s,border-color .2s,transform .2s}
.calendar-day:hover{background:#244750;transform:translateY(-1px);border-color:#62dbb1}
.calendar-day.selected{background:linear-gradient(140deg,#40dc84,#0ebd9e);color:#06231d;border-color:#80f8a2;box-shadow:0 7px 18px rgba(16,211,148,.2)}
.calendar-day.today .calendar-day-number{background:#92f46a;color:#09241c}
.calendar-day-events{min-width:0}.calendar-chip{background:#296047;color:#c8f9d7}
.calendar-chip.type-installation,.calendar-tag.type-installation{background:#5c4025;color:#ffe3ae}
.calendar-chip.type-survey,.calendar-tag.type-survey{background:#1d5268;color:#b2eeff}
.calendar-chip.type-commissioning,.calendar-tag.type-commissioning{background:#534164;color:#ebcafa}
.calendar-chip.type-visit,.calendar-tag.type-visit{background:#215b50;color:#c6ffdf}
.calendar-agenda-item{border-radius:12px}.calendar-agenda-item:hover{border-color:#68dab4}
.calendar-agenda-item p{color:#b7d0cf}
.calendar-modal-card{background:#142b33}

/* Documents, installation and account views */
.detail h3,.step h2{border-color:#5ee6a0}
.detail-photo img,.photoPreview img{border-radius:10px}
.project-checks>div{background:#152f36;border-color:#345960}
.handover-card{background:linear-gradient(150deg,#1a343a,#0f262c)}.handover-row{border-color:#3a565d}
.handover-state.ready{color:#9bf4b3}.handover-state.missing{color:#ffd99a}
.installer-job-card:hover,.survey-item:hover{border-color:#66c59d}
.commission-main{max-width:870px}
.commission-nav button{background:#183038;border-color:#36545b;color:#d9eeea;border-radius:11px}
.commission-nav button.active{background:linear-gradient(120deg,#245f49,#1a5255);border-color:#79e9a8;color:#e1ffe8}
.string-card{background:#153038;border-color:#426068}.string-card h4{border-color:#436965;color:#a8f7c3}
.commission-step .upload-card{background:#14313a}.commission-controls{background:linear-gradient(0deg,#071116 75%,rgba(7,17,22,.91));border-top:1px solid #294248}
.commission-page-nav a{color:#b5f6ca;border-color:#4b8067}.commission-page-nav a:hover{background:#234c3d}

/* Login and authentication */
.login-screen{background:radial-gradient(circle at 82% 10%,rgba(15,155,142,.22),transparent 34%),radial-gradient(circle at 8% 85%,rgba(57,174,91,.11),transparent 40%),#061017}
.login-logo-frame{border-color:#4ac889;box-shadow:0 0 32px rgba(23,189,137,.17)}
.login-input-wrap input{background:#102a31;border-color:#466567}
.registration-panel{background:linear-gradient(145deg,#173339,#0d252b);border-color:#396064}

@media(min-width:601px){
  main{max-width:1400px;padding:28px 28px 45px}
  #appShell:has(#homeView:not(.hidden)) main{max-width:1600px}
  .installer-role main{max-width:1050px}
}
@media(max-width:760px){
  .project-tracker tbody tr,.project-tracker tbody tr:nth-child(even){background:#122931;border-color:#36545a}
  .project-tracker .tracker-project,.project-tracker tr:nth-child(even) .tracker-project{background:#17343b}
  .dashboard-hero{padding:25px 20px;min-height:190px}
  .dashboard-kpis{gap:8px}
  .dashboard-kpi{min-height:112px;padding:12px}
}
@media(max-width:600px){
  main{padding:12px 12px max(32px,env(safe-area-inset-bottom))}
  .app-header{padding:10px 14px}
  .brand-logo{width:64px;height:46px}
  .app-header h1{font-size:1.03rem}
  .mobile-menu-btn{background:#172c33;border:1px solid #4c6869;border-radius:12px}
  .card,.step{padding:16px;border-radius:15px}
  .dashboard-hero{min-height:240px;padding:20px;background:linear-gradient(90deg,rgba(6,23,27,.96),rgba(6,26,30,.62)),url('/solar-roof-hero.png') center/cover}
  .dashboard-hero h2{font-size:1.65rem;max-width:330px}.dashboard-hero .home-primary-action{width:100%}.dashboard-hero .home-primary-action button{min-height:44px}
  .dashboard-hero .home-primary-action .primary,.dashboard-hero .home-primary-action .secondary{width:auto;min-width:0;flex:1 1 40%;padding:10px 6px;font-size:.85rem}
  .dashboard-kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .dashboard-kpi{min-height:106px;padding:9px 7px;border-radius:12px;gap:4px}
  .dashboard-kpi strong{font-size:1.5rem}.dashboard-kpi>span:last-child{font-size:.65rem;line-height:1.2}
  .kpi-icon{width:28px;height:28px;font-size:1.05rem}
  .dashboard-shortcuts{padding:13px}.dashboard-shortcuts>div{gap:6px}.shortcut{padding:8px;min-height:51px;font-size:.69rem;line-height:1.2}.shortcut span{text-align:center}
  .installers-heading{min-height:200px;align-items:stretch;flex-direction:column}.installers-heading .primary{width:100%}
  .calendar-heading{display:flex;flex-direction:row;align-items:center}.calendar-heading .primary{width:auto;white-space:nowrap;padding:9px;font-size:.82rem}.calendar-heading h2{font-size:1.3rem}.calendar-heading p{font-size:.76rem}
  .calendar-panel{padding:11px}
  .calendar-toolbar{gap:5px;margin-bottom:10px}
  .calendar-toolbar h2{font-size:1rem;margin:0 auto 0 3px;white-space:nowrap}
  .calendar-toolbar button{min-width:33px;min-height:35px;padding:6px;font-size:.82rem}
  .calendar-day{min-height:46px;padding:4px 2px;text-align:center;border-radius:8px}
  .calendar-day-number{min-height:19px;font-size:.78rem}
  .calendar-day.today .calendar-day-number{margin:auto;width:19px;height:19px}
  .calendar-day-events{display:flex;align-items:center;justify-content:center;gap:2px;margin-top:2px}
  .calendar-chip{display:block;width:5px;height:5px;min-width:5px;padding:0;border-radius:50%;font-size:0;line-height:0}
  .calendar-more{font-size:.52rem}
  .calendar-weekdays,.calendar-grid{gap:3px}
  .calendar-weekdays{font-size:.67rem}
  .calendar-agenda h2{font-size:1.12rem;margin-bottom:8px}
  .calendar-agenda-item{padding:11px;margin:7px 0}
  .commission-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .commission-nav button{min-height:42px;padding:5px;font-size:.77rem}
  .commission-controls{padding:10px 12px max(10px,env(safe-area-inset-bottom))}
  .commission-photos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:355px){
  .dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-shortcuts>div{grid-template-columns:1fr}
  .calendar-toolbar h2{font-size:.88rem}
  .calendar-toolbar button{min-width:28px}
}
/* iOS Home Screen apps draw under the translucent status bar. Keep header
   controls and the slide-out navigation clear of the clock and battery even
   when Safari reports safe-area-inset-top as zero. Browser tabs are unchanged. */
@media(max-width:600px){
  html.ios-standalone .app-header{
    padding-top:max(calc(10px + env(safe-area-inset-top, 0px)), 66px);
  }
  html.ios-standalone .mobile-sidebar{
    padding-top:max(calc(16px + env(safe-area-inset-top, 0px)), 70px);
  }
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .primary,.secondary,.fileBtn,.shortcut,.sidebar-link,.mobile-sidebar-link,.calendar-day{transition:none}
}

/* Surveyor imagery stays separate from the installer network hero. */
.surveyor-heading,.surveyor-portal-hero{background:linear-gradient(90deg,rgba(5,22,27,.97) 0%,rgba(6,30,35,.81) 49%,rgba(6,27,32,.2) 100%),url('/surveyor-hero.png') center 47%/cover}
.surveyor-portal-hero{min-height:205px;display:flex;flex-direction:column;justify-content:flex-end}
.surveyor-heading h2,.surveyor-heading p,.surveyor-portal-hero h2,.surveyor-portal-hero p{color:#f5fff8;text-shadow:0 2px 10px rgba(0,0,0,.4)}
@media(max-width:600px){.surveyor-heading,.surveyor-portal-hero{background:linear-gradient(90deg,rgba(5,22,27,.96),rgba(6,30,35,.57)),url('/surveyor-hero.png') 62% center/cover}}