/* Nyirahindwe O&M — styles. Calendar styles taken from the reference mockup (28 Sept 2026). */
  :root {
    --ink: #16262A;
    --ink-soft: #4C6167;
    --line: #D8E1DF;
    --line-soft: #E9EFED;
    --surface: #FFFFFF;
    --page: #F2F5F4;
    --deep: #17333A; --night: #E4EAEC;
    --row-h: 124px;
    --head-h: 36px;

    --c-grey:   #9AA5A3; --c-grey-bg:   #EEF1F0;
    --c-yellow: #C9931F; --c-yellow-bg: #FBEFD7;
    --c-blue:   #3572A5; --c-blue-bg:   #E3EDF5;
    --c-green:  #2F7A54; --c-green-bg:  #E4F2EA;
    --c-red:    #B5432E; --c-red-bg:    #FAE7E2;

    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ink: #EAF0EF; --ink-soft: #AEC0BF; --line: #2C4247; --line-soft: #233639;
      --surface: #16282C; --page: #0F1E21; --deep: #0C1B1E; --night: #1B2F33;
      --c-grey:   #7C8B89; --c-grey-bg:   #1F2E30;
      --c-yellow: #E0B450; --c-yellow-bg: #35290F;
      --c-blue:   #6EA6D8; --c-blue-bg:   #1A2E3B;
      --c-green:  #63B98D; --c-green-bg:  #14301F;
      --c-red:    #E28572; --c-red-bg:    #35201A;
    }
  }
  :root[data-theme="dark"] {
    --ink: #EAF0EF; --ink-soft: #AEC0BF; --line: #2C4247; --line-soft: #233639;
    --surface: #16282C; --page: #0F1E21; --deep: #0C1B1E; --night: #1B2F33;
    --c-grey:   #7C8B89; --c-grey-bg:   #1F2E30;
    --c-yellow: #E0B450; --c-yellow-bg: #35290F;
    --c-blue:   #6EA6D8; --c-blue-bg:   #1A2E3B;
    --c-green:  #63B98D; --c-green-bg:  #14301F;
    --c-red:    #E28572; --c-red-bg:    #35201A;
  }

  html, body { height: 100%; }
  * { box-sizing: border-box; }
  html { scroll-padding-top: env(safe-area-inset-top, 0px); }
  body {
    margin: 0; background: var(--page); color: var(--ink);
    font-family: "Public Sans", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, .brand { font-family: "Space Grotesk", system-ui, sans-serif; }

  .app { max-width: 1180px; margin: 0 auto; padding: 20px 20px 60px; }

  .topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
  }
  .brand { display: flex; align-items: baseline; gap: 10px; }
  .brand .mark {
    width: 34px; height: 34px; border-radius: 8px; background: var(--deep);
    display: flex; align-items: center; justify-content: center; flex: none;
  }
  .brand .mark svg { width: 18px; height: 18px; }
  .brand .name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
  .brand .sub { font-size: 13px; color: var(--ink-soft); font-weight: 500; }

  .nav-cluster { display: flex; align-items: center; gap: 14px; }
  .month-nav { display: flex; align-items: center; gap: 4px; }
  .month-nav button {
    height: 30px; border-radius: 7px; border: 1px solid var(--line);
    background: var(--surface); color: var(--ink); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .month-nav button:not(#todayBtn) { width: 30px; }
  .month-nav button:hover { border-color: var(--ink-soft); }
  .month-label { font-size: 14px; font-weight: 600; min-width: 190px; text-align: center; }

  .view-toggle { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
  .view-toggle button {
    border: none; background: var(--surface); color: var(--ink-soft);
    font: inherit; font-size: 13px; font-weight: 600; padding: 7px 12px; cursor: pointer;
  }
  .view-toggle button.active { background: var(--deep); color: #fff; }
  .view-toggle button, .month-nav button { white-space: nowrap; }
  .view-toggle { flex: none; }
  .nav-cluster { flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
  .view-toggle button:not(.active):hover { background: var(--line-soft); }

  .legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 2px 0 14px; }
  .legend .item { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); }
  .legend .swatch { width: 12px; height: 8px; border-radius: 3px; flex: none; }

  .overdue-alert {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    border: 1px solid var(--c-red); background: var(--c-red-bg); color: var(--c-red);
    font: inherit; font-weight: 700; font-size: 13px; padding: 10px 14px; border-radius: 10px;
    margin-bottom: 14px; cursor: pointer;
  }
  .overdue-alert:hover { filter: brightness(0.97); }

  .calendar-wrap { display: flex; gap: 6px; align-items: flex-start; }
  .month-gutter { width: 32px; flex: none; display: flex; flex-direction: column; }
  .gutter-spacer { height: var(--head-h); }
  .gutter-cell {
    height: var(--row-h); display: flex; align-items: center; justify-content: flex-end;
    padding-right: 4px; font-size: 11px; font-weight: 700; color: var(--ink-soft); text-transform: capitalize;
    border-bottom: 1px solid transparent;
  }

  .cal-card {
    flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    overflow: hidden;
  }
  .weekday-row { height: var(--head-h); display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--line); }
  .weekday-row div {
    display: flex; align-items: center; justify-content: flex-end;
    padding: 0 10px 0 8px; font-size: 12px; font-weight: 600; color: var(--ink-soft);
  }
  .weeks { display: flex; flex-direction: column; }
  .week-row { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--line); }
  .week-row:last-child { border-bottom: none; }
  .week-row.current-week { background: var(--line-soft); }

  .day-cell {
    height: var(--row-h); padding: 6px 6px 22px; border-right: 1px solid var(--line-soft);
    position: relative; cursor: pointer; transition: background .12s ease; overflow: hidden;
  }
  .day-cell:last-child { border-right: none; }
  .day-cell:hover { background: var(--line-soft); }
  .day-cell.today .num { background: var(--deep); color: #fff; }

  .day-cell .num {
    font-size: 12.5px; font-weight: 600; width: 22px; height: 22px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center; margin-bottom: 5px;
  }
  .day-badge {
    display: block; font-size: 9px; font-weight: 700; padding: 2px 5px; border-radius: 4px;
    margin-bottom: 2px; letter-spacing: .01em; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  .daily-bar { height: 15px; border-radius: 4px; margin-bottom: 3px; display: flex; align-items: center; padding: 0 6px;
    font-size: 9.5px; font-weight: 700; color: #fff; letter-spacing: .01em; white-space: nowrap; overflow: hidden; }

  .lc-marker {
    font-size: 9px; font-weight: 700; padding: 2px 5px; border-radius: 4px;
    margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  }
  .lc-more { font-size: 9px; font-weight: 700; color: var(--ink-soft); padding: 1px 5px; }

  .week-banner {
    position: absolute; left: 4px; right: 4px; bottom: 4px; height: 15px;
    border-radius: 4px; display: flex; align-items: center; padding: 0 6px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .01em;
    overflow: hidden; white-space: nowrap; cursor: pointer;
  }

  .bottom-banner { margin-top: 16px; }
  .side-title { font-size: 13px; font-weight: 700; margin: 2px 0 10px; color: var(--ink-soft); }

  .row-card {
    display: flex; align-items: center; gap: 10px; background: var(--surface);
    border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; margin-bottom: 6px; cursor: pointer;
  }
  .row-card:hover { border-color: var(--ink-soft); }
  .row-card .swatch { width: 8px; height: 8px; border-radius: 50%; flex: none; }
  .row-card .t { font-size: 13px; font-weight: 600; flex: 1; }
  .row-card .d { font-size: 11.5px; color: var(--ink-soft); flex: none; white-space: nowrap; }

  .list-section { margin-bottom: 20px; }
  .list-section-title { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
  .list-empty { font-size: 13px; color: var(--ink-soft); padding: 8px 2px; }

  .status-pill {
    display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700;
    padding: 3px 8px; border-radius: 999px;
  }
  .status-pill .dot { width: 6px; height: 6px; border-radius: 50%; }

  .scrim {
    position: fixed; inset: 0; background: rgba(10, 20, 22, .38);
    display: none; align-items: flex-end; justify-content: center; z-index: 20;
  }
  .scrim.open { display: flex; }
  @media (min-width: 640px) { .scrim { align-items: center; } }

  .sheet {
    background: var(--surface); width: 100%; max-width: 480px;
    border-radius: 16px 16px 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    max-height: 82vh; overflow-y: auto; border: 1px solid var(--line);
  }
  @media (min-width: 640px) { .sheet { border-radius: 16px; max-height: 78vh; } }

  .sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
  .sheet-head h3 { margin: 0; font-size: 18px; }
  .sheet-close {
    border: none; background: var(--line-soft); width: 28px; height: 28px; border-radius: 7px;
    cursor: pointer; color: var(--ink-soft); flex: none; display: flex; align-items: center; justify-content: center;
  }
  .sheet-sub { font-size: 13px; color: var(--ink-soft); margin-bottom: 16px; }

  .report-status { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--line-soft); border-radius: 10px; padding: 10px 12px; margin-bottom: 16px; }
  .report-status .label { font-size: 12px; color: var(--ink-soft); font-weight: 600; }

  .task-list { display: flex; flex-direction: column; gap: 1px; background: var(--line-soft); border-radius: 10px; overflow: hidden; margin-bottom: 16px; }
  .task-row { display: flex; align-items: center; gap: 10px; background: var(--surface); padding: 10px 12px; }
  .task-row .check {
    width: 18px; height: 18px; border-radius: 5px; flex: none; display: flex; align-items: center; justify-content: center;
  }
  .task-row .check svg { width: 11px; height: 11px; }
  .task-row .t { font-size: 13.5px; flex: 1; line-height: 1.3; }
  .task-row .tag { font-size: 10.5px; color: var(--ink-soft); font-weight: 600; }

  .actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .btn {
    font: inherit; font-size: 13px; font-weight: 700; border-radius: 9px; padding: 9px 14px;
    border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer;
  }
  .btn.primary { background: var(--deep); border-color: var(--deep); color: #fff; }
  .btn.warn { background: var(--c-red); border-color: var(--c-red); color: #fff; }
  .btn:hover { filter: brightness(1.05); }

  .note { font-size: 12px; color: var(--ink-soft); margin-top: 16px; line-height: 1.5; border-top: 1px dashed var(--line); padding-top: 12px; }

  .footer-note { text-align: center; font-size: 12px; color: var(--ink-soft); margin-top: 22px; }
  .back-btn { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px 0 8px; border-radius:7px; border:1px solid var(--line); background:var(--surface); cursor:pointer; font-size:12.5px; font-weight:700; color:var(--ink); margin-right:6px; white-space:nowrap; flex:none; }
  .back-btn:hover { border-color:var(--ink-soft); }
  /* back button and arrows stay at the top of the screen while scrolling */
  .stick-nav { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:10px; margin:0 -20px 8px; padding:8px 20px; padding-top:calc(8px + env(safe-area-inset-top, 0px)); background:color-mix(in srgb, var(--page) 92%, transparent); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-bottom:1px solid var(--line-soft); }
  .stick-nav h1 { margin:0 0 0 4px !important; font-size:20px !important; line-height:1.2; min-width:0; }
  .stick-nav .t-short { display:none; }
  @media (max-width: 640px) {
    .stick-nav { margin:0 -10px 8px; padding-left:10px; padding-right:10px; gap:8px; }
    .stick-nav h1 { font-size:16px !important; margin-left:0 !important; }
    .stick-nav .t-long { display:none; }
    .stick-nav .t-short { display:inline; }
  }

  /* ---------- V1 additions ---------- */
  .cal-controls { display:flex; justify-content:flex-end; margin-bottom:14px; }
  .daily-bar { cursor:pointer; }
  .topbar { position: relative; z-index: 25; }
  [hidden] { display:none !important; }

  /* top bar: who is signed in, network, menu */
  .top-right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
  .signed { font-size:12.5px; color:var(--ink-soft); }
  .netpill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:4px 9px; border-radius:999px; background:var(--c-green-bg); color:var(--c-green); }
  .netpill::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
  .netpill.off { background:var(--c-red-bg); color:var(--c-red); }
  .netpill.unknown { background:var(--line-soft); color:var(--ink-soft); }
  .menu-btn { height:30px; padding:0 11px; border-radius:7px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
  .menu-btn:hover { border-color:var(--ink-soft); }
  .menu-btn.active { background:var(--deep); border-color:var(--deep); color:#fff; }

  /* app-wide banners (sign in again, new version) */
  .app-banner { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; border:1px solid var(--c-yellow); background:var(--c-yellow-bg); color:var(--ink); border-radius:10px; padding:10px 14px; margin-bottom:14px; font-size:13px; }
  .app-banner b { color:var(--c-yellow); }
  .app-banner.red { border-color:var(--c-red); background:var(--c-red-bg); }
  .app-banner.red b { color:var(--c-red); }

  /* bottom bar: what is kept on this device (§3.4) */
  .syncbar { position:fixed; left:0; right:0; bottom:0; z-index:15; background:var(--surface); border-top:1px solid var(--line); padding:8px 20px calc(8px + env(safe-area-inset-bottom, 0px)); font-size:12.5px; color:var(--ink-soft); }
  .syncbar .inner { max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
  .syncbar .off { color:var(--c-red); font-weight:700; }
  .syncbar .linkbtn, .linkbtn { background:none; border:0; padding:0; font:inherit; color:var(--c-blue); text-decoration:underline; cursor:pointer; }
  body.has-syncbar .app { padding-bottom:70px; }
  body.report-open .syncbar { display:none; }   /* the report screens have their own bottom bar */

  /* sign-in screen */
  .signin { max-width:420px; margin:12vh auto 0; padding:0 20px; }
  .signin .card { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px; }
  .signin h1 { margin:14px 0 6px; font-size:22px; }
  .signin p { color:var(--ink-soft); font-size:13.5px; line-height:1.5; margin:0 0 14px; }
  .btn:disabled { opacity:.45; cursor:not-allowed; filter:none; }
  .btn.big { min-height:44px; padding:0 18px; font-size:14px; }

  /* screens built from cards: diagnostics, managers, report placeholder */
  .screen-head h1 { margin:0 0 4px; font-size:22px; letter-spacing:-0.01em; }
  .screen-head p { margin:0 0 16px; color:var(--ink-soft); font-size:13px; line-height:1.5; }
  .card2 { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 18px 16px; margin-bottom:14px; }
  .card2 h2 { margin:0 0 4px; font-size:16px; font-weight:600; }
  .card2 .hint { color:var(--ink-soft); font-size:12.5px; margin:0 0 10px; line-height:1.5; }
  .kv { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-top:1px solid var(--line-soft); font-size:13px; }
  .kv:first-of-type { border-top:0; }
  .kv .k { font-weight:600; }
  .kv .v { text-align:right; color:var(--ink-soft); overflow-wrap:anywhere; }
  .badge { display:inline-block; padding:1px 8px; border-radius:99px; font-size:11.5px; font-weight:700; margin-right:4px; }
  .badge.ok { background:var(--c-green-bg); color:var(--c-green); }
  .badge.bad { background:var(--c-red-bg); color:var(--c-red); }
  .badge.warn { background:var(--c-yellow-bg); color:var(--c-yellow); }
  .badge.info { background:var(--line-soft); color:var(--ink-soft); }
  ul.log { list-style:none; padding:0; margin:6px 0 0; font-size:12.5px; color:var(--ink-soft); }
  ul.log li { padding:3px 0; border-top:1px dashed var(--line); }
  .actions { margin-top:10px; }
  .card2 textarea, .card2 input[type=text], .card2 input[type=email], .app-modal input[type=text], .app-modal input[type=email] {
    width:100%; font:inherit; font-size:14px; padding:8px 10px; border-radius:8px; border:1px solid var(--line); background:var(--page); color:var(--ink); }
  .card2 textarea { min-height:80px; }
  label.btn { display:inline-flex; align-items:center; position:relative; }
  label.btn input { position:absolute; opacity:0; width:1px; height:1px; }
  .thumb { max-width:140px; border-radius:6px; margin-top:8px; display:block; }
  .form-row { display:grid; grid-template-columns:1fr 1fr auto; gap:8px; align-items:end; }
  .form-row label { display:block; font-size:12px; color:var(--ink-soft); margin-bottom:3px; }
  @media (max-width: 640px) { .form-row { grid-template-columns:1fr; } .card2 { padding:12px; } }
  table.plain { width:100%; border-collapse:collapse; font-size:13px; }
  table.plain th { text-align:left; font-size:12px; font-weight:600; color:var(--ink-soft); padding:6px 4px; border-bottom:1px solid var(--line); }
  table.plain td { padding:7px 4px; border-bottom:1px solid var(--line-soft); vertical-align:middle; overflow-wrap:anywhere; }
  table.plain tr:last-child td { border-bottom:0; }

  /* report screen skeleton (the report bodies come in the next steps) */
  #reportScreen { font-size:14px; padding-bottom:90px; }
  #reportScreen .report-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
  #reportScreen .arrows { display:flex; gap:4px; }
  #reportScreen .arrows button { width:30px; height:30px; border-radius:7px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; }
  #reportScreen .span { color:var(--ink-soft); font-size:13px; margin-top:3px; }
  #reportScreen .status-wrap { text-align:right; }
  .pill { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; font-size:12.5px; font-weight:700; }
  .pill::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
  .pill.in_progress { background:var(--c-yellow-bg); color:var(--c-yellow); }
  .pill.submitted { background:var(--c-blue-bg); color:var(--c-blue); }
  .pill.approved { background:var(--c-green-bg); color:var(--c-green); }
  .pill.rejected { background:var(--c-red-bg); color:var(--c-red); }
  .pill.future { background:var(--c-grey-bg); color:var(--c-grey); }
  #reportScreen .hist { font-size:12px; color:var(--ink-soft); margin-top:5px; }
  #reportScreen .actionbar { position:fixed; left:0; right:0; bottom:0; background:var(--surface); border-top:1px solid var(--line); padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px)); z-index:20; }
  #reportScreen .actionbar .inner { max-width:1080px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
  #reportScreen .actionbar .info { font-size:13px; color:var(--ink-soft); }
  #reportScreen .actionbar .btns { display:flex; gap:8px; }
  #reportScreen .actionbar .off { color:var(--c-red); font-weight:700; }

  /* app modal and toast */
  .app-modal-bg { position:fixed; inset:0; background:rgba(10,20,22,.45); display:none; align-items:center; justify-content:center; z-index:80; padding:20px; }
  .app-modal-bg.open { display:flex; }
  .app-modal { background:var(--surface); border-radius:14px; max-width:480px; width:100%; padding:20px; border:1px solid var(--line); max-height:86vh; overflow:auto; }
  .app-modal h3 { margin:0 0 8px; font-size:18px; }
  .app-modal p { font-size:13.5px; color:var(--ink-soft); line-height:1.5; }
  .app-modal .btns { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; flex-wrap:wrap; }
  .app-modal .choice { border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:8px 0; font-size:13px; }
  .app-modal .choice b { display:block; margin-bottom:2px; }
  .app-modal .choice .who { color:var(--ink-soft); font-size:12px; margin-top:3px; }
  .app-toast { position:fixed; left:50%; bottom:70px; transform:translateX(-50%); background:var(--deep); color:#fff; padding:9px 16px; border-radius:8px; font-size:13px; opacity:0; pointer-events:none; transition:opacity .2s; z-index:90; max-width:90vw; }
  .app-toast.show { opacity:1; }

  @media (max-width: 640px) {
    .app { padding-left:10px; padding-right:10px; }
    :root { --row-h: 112px; }
    .month-label { min-width:0; font-size:13px; }
    .day-cell { padding:4px 3px 22px; }
    .daily-bar, .week-banner { font-size:8.5px; padding:0 3px; }
    .day-badge { font-size:8px; padding:2px 3px; }
    .row-card { flex-wrap:wrap; }
    .row-card .d { white-space:normal; }
  }
  @media (prefers-reduced-motion: reduce) { .app-toast { transition:none; } }

  /* ---------- daily report (step 2), taken from the reference mockup ---------- */
#reportScreen h1, #reportScreen h2, #reportScreen h3 { font-family:"Space Grotesk",system-ui,sans-serif; }
#reportScreen button, #reportScreen input, #reportScreen select, #reportScreen textarea { font:inherit; color:inherit; }
#reportScreen .tpick { display:inline-flex; align-items:center; gap:3px; border:1px solid transparent; border-radius:7px; padding:1px; }
#reportScreen .tpick select { min-width:0; width:auto; padding:0 4px; }
#reportScreen .tpick span { color:var(--ink-soft); }
#reportScreen .banner { border-radius:10px; padding:11px 14px; margin-bottom:14px; font-size:13px; border:1px solid var(--c-red); background:var(--c-red-bg); }
#reportScreen .banner b { color:var(--c-red); }
#reportScreen .banner.review { border-color:var(--c-yellow); background:var(--c-yellow-bg); }
#reportScreen .banner.review b { color:var(--c-yellow); }
#reportScreen .banner.good { border-color:var(--c-green); background:var(--c-green-bg); }
#reportScreen .banner.good b { color:var(--c-green); }
#reportScreen .banner ul, .app-modal ul { margin:6px 0 0; padding-left:18px; }
#reportScreen .banner li, .app-modal li { margin:2px 0; }
#reportScreen .linkbtn { background:none; border:0; padding:0; font:inherit; color:var(--c-blue); text-decoration:underline; cursor:pointer; }
#reportScreen .chk-r { color:var(--c-red); font-weight:700; }
#reportScreen .chk-w { color:var(--c-yellow); font-weight:700; }
#reportScreen section.card { background:var(--surface); border:1px solid var(--line); border-radius:14px; margin-bottom:16px; overflow:hidden; }
#reportScreen .remind { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; padding:10px 16px; margin:0 0 16px; border:1px dashed var(--line); border-radius:12px; font-size:13px; color:var(--ink); }
#reportScreen .remind-k { font-weight:600; }
#reportScreen .remind-n { color:var(--ink-soft); font-size:12px; }
#reportScreen .card-head { padding:14px 18px 8px; }
#reportScreen .card-head h2 { margin:0; font-size:17px; font-weight:600; letter-spacing:-0.01em; }
#reportScreen .card-head p { margin:3px 0 0; font-size:12.5px; color:var(--ink-soft); }
#reportScreen .card-body { padding:0 18px 16px; }
#reportScreen .scroll { overflow-x:auto; }
#reportScreen table { border-collapse:collapse; width:100%; font-variant-numeric:tabular-nums; }
#reportScreen th { text-align:left; font-size:12px; font-weight:600; color:var(--ink-soft); padding:7px 6px; border-bottom:1px solid var(--line); white-space:nowrap; vertical-align:bottom; }
#reportScreen th .slot { display:block; font-family:"Space Grotesk",sans-serif; font-size:16px; color:var(--ink); }
#reportScreen th.nightcol, #reportScreen td.nightcol { background:color-mix(in srgb, var(--night) 50%, transparent); }
#reportScreen td { padding:4px 6px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
#reportScreen tr:last-child td { border-bottom:none; }
#reportScreen td.lbl { font-size:13px; white-space:nowrap; }
#reportScreen td.ref { font-size:12px; color:var(--ink-soft); white-space:nowrap; }
#reportScreen td.grp { font-size:12px; font-weight:700; color:var(--ink-soft); padding-top:12px; }
#reportScreen tr.timerow td { border-bottom:1px solid var(--line); }
#reportScreen td.na { color:var(--ink-soft); font-size:12.5px; text-align:center; }
#reportScreen input[type=number], #reportScreen input[type=text], #reportScreen input[type=time], #reportScreen select, #reportScreen textarea { width:100%; min-width:76px; height:32px; border:1px solid var(--line); border-radius:6px; background:var(--surface); padding:0 8px; font-size:13px; }
#reportScreen input[type=number] { text-align:right; }
#reportScreen input:disabled, #reportScreen select:disabled { background:var(--line-soft); color:var(--ink-soft); cursor:not-allowed; }
#reportScreen .warn { border-color:var(--c-yellow) !important; background:var(--c-yellow-bg) !important; }
#reportScreen .alarm { border-color:var(--c-red) !important; background:var(--c-red-bg) !important; }
#reportScreen .missing { border:1.5px dashed var(--c-red) !important; }
#reportScreen .shift-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
#reportScreen .shift-box { border:1px solid var(--line-soft); border-radius:10px; padding:12px; }
#reportScreen .shift-box.nightbox { background:color-mix(in srgb, var(--night) 50%, transparent); }
#reportScreen .shift-box h3 { margin:0 0 10px; font-size:14px; font-weight:600; }
#reportScreen .shift-box h3 span { font-family:"Public Sans",sans-serif; font-weight:500; color:var(--ink-soft); font-size:12.5px; margin-left:6px; }
#reportScreen .field { display:grid; grid-template-columns:170px 1fr; gap:8px; align-items:center; margin-bottom:7px; font-size:13px; }
#reportScreen .field > label { color:var(--ink-soft); }
#reportScreen .check { display:flex; align-items:center; gap:6px; white-space:nowrap; }
#reportScreen .check input { width:16px; height:16px; }
#reportScreen .sub-h { font-size:13px; font-weight:600; margin:16px 0 4px; }
#reportScreen .events { display:flex; flex-direction:column; gap:10px; }
#reportScreen .event { border:1px solid var(--line); border-radius:10px; padding:10px 12px; display:grid; grid-template-columns:170px 1fr auto; gap:10px; align-items:start; }
#reportScreen .event .fields { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
#reportScreen .event.carried { border-color:var(--c-red); background:var(--c-red-bg); }
#reportScreen .event .ro { padding:7px 0; font-size:13.5px; }
#reportScreen .event .fields label { display:block; font-size:11.5px; color:var(--ink-soft); margin-bottom:3px; }
#reportScreen .event .fields .wide { grid-column:1/-1; }
#reportScreen .event .who { font-size:11.5px; color:var(--ink-soft); margin-top:6px; }
#reportScreen .none { font-size:12.5px; color:var(--ink-soft); }
#reportScreen .icon-btn { border:1px solid var(--line); background:var(--surface); border-radius:7px; width:30px; height:30px; cursor:pointer; color:var(--ink-soft); }
#reportScreen .icon-btn:hover { color:var(--c-red); border-color:var(--c-red); }
#reportScreen .btn { border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:8px 14px; font-weight:600; font-size:13px; cursor:pointer; }
#reportScreen .btn:hover { border-color:var(--ink-soft); }
#reportScreen .btn.primary { background:var(--deep); border-color:var(--deep); color:#fff; }
#reportScreen .btn.good { background:var(--c-green); border-color:var(--c-green); color:#fff; }
#reportScreen .btn.bad { color:var(--c-red); border-color:var(--c-red); }
#reportScreen .add-row { display:flex; gap:8px; align-items:center; margin-top:10px; }
#reportScreen .add-row select { width:auto; }
@media (max-width: 820px) { #reportScreen .shift-grid { grid-template-columns:1fr; } #reportScreen .event { grid-template-columns:1fr; } }
/* guidance under the name of a line, instead of a separate column */
  #reportScreen .hint { display:block; font-size:11.5px; font-style:italic; color:var(--ink-soft); font-weight:400; margin-top:1px; white-space:normal; }
/* first column stays visible when the table scrolls sideways */
  #reportScreen table.stick th:first-child, #reportScreen table.stick td:first-child { position:sticky; left:0; z-index:2; background:var(--surface); }
#reportScreen table.stick td.lbl, #reportScreen table.stick th:first-child { box-shadow:1px 0 0 var(--line); }
#reportScreen table.stick td.grp { position:static; background:transparent; }
#reportScreen table.stick td.grp > span { position:sticky; left:12px; }
/* rain gauge: time and mm on one line, wrapping if needed, never overlapping */
  #reportScreen .rain { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; }
#reportScreen .rain-k { color:var(--ink-soft); font-size:12.5px; white-space:nowrap; }
#reportScreen .rain-v { display:flex; align-items:center; gap:8px; }
#reportScreen .rain-v input[type=number] { width:110px; }
#reportScreen .field .ho { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
@media (max-width: 640px) {
    .app { padding-left:10px; padding-right:10px; }
    #reportScreen .card-head { padding:12px 12px 6px; }
    #reportScreen .card-body { padding:0 12px 14px; }
    #reportScreen .shift-box { padding:10px; }
    #reportScreen .field { grid-template-columns:1fr; gap:3px; margin-bottom:10px; }
    #reportScreen .field > label { font-size:12px; }
    #reportScreen .card-body.scroll:has(table.stick) { padding-left:0; padding-right:0; }
    #reportScreen table.stick td.lbl { white-space:normal; min-width:118px; max-width:150px; }
    #reportScreen table.stick th:first-child, #reportScreen table.stick td:first-child { padding-left:12px; }
    #reportScreen table.stick th:last-child, #reportScreen table.stick td:last-child { padding-right:12px; }
    #reportScreen table.day3 { table-layout:fixed; }
    #reportScreen table.day3 td.lbl { white-space:normal; }
    #reportScreen table.day3 td:first-child > div { flex-wrap:wrap; row-gap:4px; }
    #reportScreen table.day3 select { min-width:0; }
    #reportScreen table.day3 td[style*="width:260px"] { width:auto !important; }
  }
#reportScreen .banner.info { border-color:var(--line); background:var(--surface); color:var(--ink-soft); }
#reportScreen .banner code, #reportScreen .banner .linkbtn { overflow-wrap:anywhere; }
.app-modal .chk-r { color:var(--c-red); font-weight:700; }
.app-modal .chk-w { color:var(--c-yellow); font-weight:700; }
#reportScreen .actionbar .btns { flex-wrap:wrap; }
#reportScreen textarea { height:auto; }
#reportScreen .card-body ul.log { margin-top:0; }