:root{
  --bg:#0b1020;
  --panel:#131c34;
  --panel-2:#192441;
  --border:#2a3961;
  --text:#edf2ff;
  --muted:#aeb8d6;
  --accent:#6ea8fe;
  --accent-2:#8ef0cf;
  --danger:#c73a5b;
  --white:#ffffff;
  --ink:#101828;
  --shadow:0 18px 50px rgba(0,0,0,.28);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,#08101f 0%, #0d1427 100%);
  color:var(--text);
}

button,input,textarea{
  font:inherit;
}

button{
  border:1px solid transparent;
  border-radius:14px;
  padding:14px 16px;
  background:linear-gradient(180deg,#5d9dff 0%, #3f7fe0 100%);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(42,91,191,.28);
}

button.secondary{
  background:transparent;
  border-color:var(--border);
  color:var(--text);
  box-shadow:none;
}

button.ghost{
  background:transparent;
  color:var(--muted);
  border-color:transparent;
  box-shadow:none;
  padding:6px 8px;
}

button.danger{
  background:linear-gradient(180deg,#d84b6c 0%, #b83052 100%);
  box-shadow:0 10px 24px rgba(184,48,82,.28);
}

label{
  display:flex;
  flex-direction:column;
  gap:8px;
}

label > span{
  font-size:.92rem;
  color:var(--muted);
  font-weight:600;
}

input, textarea{
  width:100%;
  border-radius:14px;
  border:1px solid var(--border);
  background:#0e1830;
  color:var(--text);
  padding:14px 15px;
  min-height:50px;
}

textarea{resize:vertical}

.app-header{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
  padding:26px 22px 10px;
}

.eyebrow{
  margin:0 0 8px;
  text-transform:uppercase;
  font-size:.74rem;
  letter-spacing:.12em;
  color:var(--accent-2);
  font-weight:800;
}

h1{
  margin:0;
  font-size:clamp(1.8rem,4vw,2.6rem);
}

h2,h3{margin:0}
.subtle,.helper,.muted,.tiny{color:var(--muted)}
.tiny{font-size:.83rem}

.layout{
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:20px;
  padding:0 22px 28px;
}

.sidebar{
  position:sticky;
  top:14px;
  align-self:start;
  background:rgba(19,28,52,.9);
  backdrop-filter:blur(16px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}

.step-nav{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:18px;
}

.step-nav button{
  text-align:left;
  background:transparent;
  box-shadow:none;
  border-color:var(--border);
  color:var(--muted);
}

.step-nav button.active{
  background:rgba(110,168,254,.15);
  border-color:#5d9dff;
  color:#fff;
}

.sidebar-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:12px;
}

.content{min-width:0}
.step{display:none}
.step.active{display:block}

.section-card,.sheet{
  background:rgba(19,28,52,.92);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
}

.section-head{
  margin-bottom:18px;
}

.section-head p{
  margin:8px 0 0;
  color:var(--muted);
}

.grid{
  display:grid;
  gap:14px;
}

.grid.two{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.full{grid-column:1 / -1}

.stacked-cards{
  display:grid;
  gap:14px;
}

.mini-card,.repeat-card{
  border:1px solid var(--border);
  background:rgba(13,20,39,.55);
  border-radius:16px;
  padding:16px;
}

.mini-card h3,.repeat-card h3{margin-bottom:10px}
.repeat-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:10px;
}

.table-controls,.photo-toolbar,.signature-actions,.action-grid,.header-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.repeat-list{
  display:grid;
  gap:14px;
}

.sprinkler-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.photo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
}

.photo-card{
  border:1px solid var(--border);
  background:rgba(13,20,39,.55);
  border-radius:16px;
  padding:14px;
}

.photo-card img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:12px;
  display:block;
  margin-bottom:12px;
}

#signaturePad{
  width:100%;
  height:220px;
  background:#fff;
  border-radius:16px;
  border:1px dashed #99a7cb;
  touch-action:none;
}

.status-box{
  margin-top:14px;
  border:1px solid var(--border);
  background:rgba(13,20,39,.55);
  border-radius:14px;
  padding:14px;
  color:var(--muted);
}

.sheet-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:14px;
}

.recent-list{
  display:grid;
  gap:12px;
}

.recent-item{
  border:1px solid var(--border);
  background:rgba(13,20,39,.55);
  border-radius:14px;
  padding:14px;
}

.recent-item h3{
  font-size:1rem;
  margin:0 0 4px;
}

.recent-item p{
  margin:0 0 8px;
  color:var(--muted);
}

.report-shell{
  margin-top:18px;
  background:#fff;
  color:#111827;
  border-radius:20px;
  overflow:hidden;
  border:1px solid #d0d7e7;
}

.hidden{display:none !important}

.report{
  padding:30px;
}

.report-cover{
  display:grid;
  gap:16px;
  padding-bottom:24px;
  border-bottom:2px solid #d8e0f0;
  margin-bottom:24px;
}

.report-cover h2{
  font-size:2rem;
}

.report-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.report-section{
  margin-bottom:22px;
}

.report-section h3{
  font-size:1.1rem;
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:1px solid #d8e0f0;
}

.report-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 18px;
}

.report-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-height:54px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:10px 12px;
}

.report-field strong{
  color:#475467;
  font-size:.85rem;
}

.report-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid #d8e0f0;
  border-radius:14px;
}

.report-table th,.report-table td{
  padding:12px;
  border-bottom:1px solid #e7ecf4;
  text-align:left;
  vertical-align:top;
}

.report-table th{
  background:#f7f9fd;
  color:#475467;
  font-size:.9rem;
}

.report-table tr:last-child td{border-bottom:none}

.report-photos{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.report-photo{
  border:1px solid #d8e0f0;
  border-radius:14px;
  padding:10px;
}

.report-photo img{
  width:100%;
  max-height:280px;
  object-fit:cover;
  border-radius:10px;
  display:block;
  margin-bottom:8px;
}

.report-signature{
  max-width:420px;
  border:1px solid #d8e0f0;
  border-radius:12px;
  padding:10px;
  background:#fff;
}

@media (max-width: 980px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:static}
}

@media (max-width: 700px){
  .app-header{flex-direction:column}
  .grid.two,.report-meta,.report-grid,.report-photos,.sprinkler-grid{grid-template-columns:1fr}
}

@media print{
  body{
    background:#fff;
    color:#111827;
  }

  .no-print, .app-header, .sidebar, form{
    display:none !important;
  }

  .layout{
    display:block;
    padding:0;
  }

  .content{
    padding:0;
  }

  .report-shell{
    display:block !important;
    border:none;
    border-radius:0;
    margin:0;
    box-shadow:none;
  }

  .report{
    padding:24px;
  }

  .report-photo img{
    max-height:240px;
  }
}


/* Branded report styling */
.report-shell{
  background:#fff;
  color:#101828;
}

.report{
  padding:34px 34px 24px;
  background:#fff;
  color:#101828;
}

.report-header{
  display:flex;
  align-items:center;
  gap:20px;
  padding-bottom:16px;
  margin-bottom:22px;
  border-bottom:3px solid #1f3a5f;
}

.report-header img{
  max-width:340px;
  width:100%;
  height:auto;
  display:block;
}

.report-header-copy{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.report-header-copy h1{
  margin:0;
  color:#1f3a5f;
  font-size:1.8rem;
  line-height:1.1;
}

.report-header-copy p{
  margin:0;
  color:#475467;
  font-weight:600;
}

.report-cover{
  display:grid;
  gap:12px;
  padding-bottom:18px;
  border-bottom:1px solid #d8e0f0;
  margin-bottom:20px;
}

.report-cover h2{
  font-size:1.7rem;
  color:#1f3a5f;
}

.report-section{
  margin-bottom:20px;
  break-inside:avoid;
}

.report-section h3{
  margin-bottom:10px;
  padding-bottom:6px;
  border-bottom:2px solid #d8e0f0;
  color:#1f3a5f;
  text-transform:uppercase;
  font-size:1rem;
  letter-spacing:.04em;
}

.report-field{
  background:#fff;
  border:1px solid #d8e0f0;
  border-radius:8px;
  padding:10px 12px;
}

.report-field strong{
  color:#475467;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.report-table{
  border:1px solid #cfd8ea;
}

.report-table th{
  background:#eef3fb;
  color:#1f3a5f;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:.82rem;
}

.report-table td{
  background:#fff;
}

.report-footer{
  margin-top:28px;
  padding-top:12px;
  border-top:2px solid #d8e0f0;
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:#475467;
  font-size:.84rem;
}

.report-page-note{
  text-align:right;
}

@media (max-width: 700px){
  .report-header{
    flex-direction:column;
    align-items:flex-start;
  }

  .report-header img{
    max-width:280px;
  }

  .report-footer{
    flex-direction:column;
  }
}

@media print{
  @page{
    size:auto;
    margin:0.5in;
  }

  .report-shell{
    border:none;
    border-radius:0;
    margin:0;
    box-shadow:none;
  }

  .report{
    padding:0;
  }

  .report-header img{
    max-width:320px;
  }

  .report-section,
  .report-table,
  .report-photo,
  .report-signature{
    break-inside:avoid;
  }

  .report-footer{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    background:#fff;
  }
}