/* UP Forest Department – Saw Mill Inspection. Forest green & white, mobile-first, Hindi-first. */
@font-face { font-family: "Noto Sans Devanagari"; src: url("../fonts/NotoSansDevanagari-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Noto Sans Devanagari"; src: url("../fonts/NotoSansDevanagari-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url("../fonts/NotoSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url("../fonts/NotoSans-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --green-900: #075e54; --green-800: #128c7e; --green-700: #12a37f; --green-600: #1ebe6e; --green-100: #e4f9ee; --green-50: #f1fcf6;
  --ink: #1c2b29; --muted: #5f6f62; --line: #c6f2db; --bg: #f3fbf7; --card: #ffffff;
  --red: #ca0909; --red-bg: #fff1f0; --amber: #b26a00; --amber-bg: #fff8ea; --blue: #0456b1; --blue-bg: #eef5fe;
  --purple: #5c1e92; --purple-bg: #f6f0fc; --teal: #006954; --teal-bg: #dbf7e8; --grey-bg: #f1f4f6;
  --radius: 10px; --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --tap: 48px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Noto Sans Devanagari", "Noto Sans", system-ui, sans-serif; font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--bg); }
a { color: var(--green-800); }
h1, h2, h3 { line-height: 1.3; margin: 0 0 .6rem; }
h1 { font-size: 1.45rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.05rem; }
img { max-width: 100%; }
.muted { color: var(--muted); } .small { font-size: .875rem; } .nowrap { white-space: nowrap; }
.mono { font-family: "Noto Sans", ui-monospace, monospace; }

/* Top bar */
.topbar { background: var(--green-800); color: #fff; position: sticky; top: 0; z-index: 30; box-shadow: 0 2px 4px rgba(0,0,0,.15); }
.topbar-inner { max-width: 1280px; margin: 0 auto; padding: .55rem 1rem; display: flex; align-items: center; gap: .75rem; }
.brand { color: #fff; text-decoration: none; font-weight: 700; line-height: 1.2; display: flex; align-items: center; gap: .6rem; }
.brand small { display: block; font-weight: 400; opacity: .85; font-size: .78rem; }
.brand-mark { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--green-800); display: grid; place-items: center; font-size: 1.1rem; flex: none; }
.topnav { display: flex; gap: .15rem; margin-left: auto; flex-wrap: wrap; }
.topnav a { color: #fff; text-decoration: none; padding: .45rem .7rem; border-radius: 8px; font-size: .95rem; }
.topnav a:hover, .topnav a.active { background: rgba(255,255,255,.16); }
.net { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; padding: .2rem .6rem; border-radius: 99px; background: rgba(255,255,255,.15); white-space: nowrap; }
.net::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #95edbe; }
.net.offline { background: #ffd7db; color: var(--red); } .net.offline::before { background: var(--red); }
.badge-count { background: #ffca28; color: #000; border-radius: 99px; padding: 0 .4rem; font-size: .75rem; margin-left: .2rem; font-family: "Noto Sans"; }
.sync-bar { display: none; background: var(--amber-bg); color: var(--amber); text-align: center; padding: .35rem 1rem; font-size: .9rem; }
.sync-bar.show { display: block; }

main { max-width: 1280px; margin: 0 auto; padding: 1rem 1rem 6rem; }

/* Bottom nav for phones */
.bottomnav { display: none; }
@media (max-width: 820px) {
  .topnav { display: none; }
  .bottomnav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--line); z-index: 30; padding-bottom: env(safe-area-inset-bottom); }
  .bottomnav a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 58px; text-decoration: none; color: var(--muted); font-size: .72rem; gap: 2px; }
  .bottomnav a .ico { font-size: 1.3rem; line-height: 1; }
  .bottomnav a.active { color: var(--green-800); font-weight: 700; }
  .brand small { display: none; }
}

/* Cards & layout */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem; margin-bottom: 1rem; }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-head h1 { margin: 0; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem .9rem; text-decoration: none; color: var(--ink); border-left: 5px solid var(--green-700); box-shadow: var(--shadow); }
.stat .n { font-size: 1.7rem; font-weight: 700; font-family: "Noto Sans", sans-serif; line-height: 1.1; }
.stat .l { font-size: .85rem; color: var(--muted); }
.stat.warn { border-left-color: var(--red); } .stat.warn .n { color: var(--red); }
.stat.amber { border-left-color: var(--amber); } .stat.blue { border-left-color: var(--blue); } .stat.purple { border-left-color: var(--purple); } .stat.teal { border-left-color: var(--teal); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: var(--tap); padding: .55rem 1.1rem; border-radius: 8px; border: 1px solid var(--green-800); background: var(--green-800); color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--green-900); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-outline { background: #fff; color: var(--green-800); } .btn-outline:hover { background: var(--green-50); }
.btn-danger { background: var(--red); border-color: var(--red); } .btn-danger:hover { background: #9d0606; }
.btn-sm { min-height: 36px; padding: .3rem .75rem; font-size: .9rem; }
.btn-block { width: 100%; }
.linkbtn { background: none; border: 0; color: var(--green-800); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }

/* Forms */
label { font-weight: 700; display: block; margin-bottom: .25rem; }
.field { margin-bottom: 1rem; }
.field .help { font-size: .82rem; color: var(--muted); margin-top: .2rem; }
.field .err, .errorlist { color: var(--red); font-size: .88rem; margin: .25rem 0 0; padding: 0; list-style: none; }
input[type=text], input[type=password], input[type=date], input[type=number], input[type=search], input[type=email], select, textarea {
  width: 100%; min-height: var(--tap); padding: .55rem .7rem; border: 1px solid #97e8bd; border-radius: 8px; font: inherit; background: #fff; color: var(--ink);
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus, .btn:focus-visible, a:focus-visible { outline: 3px solid #6adea0; outline-offset: 1px; }
.filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem .8rem; align-items: end; }
.filters .field { margin: 0; } .filters label { font-size: .85rem; }
.check { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.check input { width: 22px; height: 22px; }

/* Choice pills (big touch targets) */
.choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: inline-flex; align-items: center; min-height: var(--tap); padding: .45rem 1rem; border: 2px solid #97e8bd; border-radius: 99px; background: #fff; cursor: pointer; font-weight: 700; user-select: none; }
.choice input:checked + span { background: var(--green-800); border-color: var(--green-800); color: #fff; }
.choice input:focus-visible + span { outline: 3px solid #6adea0; }
.choice.na input:checked + span { background: #5b7f90; border-color: #5b7f90; }

/* Tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tbl { width: 100%; border-collapse: collapse; background: #fff; font-size: .93rem; }
.tbl th, .tbl td { padding: .55rem .6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl th { background: var(--green-100); color: var(--green-900); font-weight: 700; white-space: nowrap; position: sticky; top: 0; }
.tbl tr:hover td { background: var(--green-50); }
.tbl .row-overdue td:first-child { border-left: 4px solid var(--red); }

/* Status chips */
.chip { display: inline-block; padding: .1rem .6rem; border-radius: 99px; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.chip-grey { background: var(--grey-bg); color: #415b68; } .chip-blue { background: var(--blue-bg); color: var(--blue); }
.chip-amber { background: var(--amber-bg); color: var(--amber); } .chip-teal { background: var(--teal-bg); color: var(--teal); }
.chip-purple { background: var(--purple-bg); color: var(--purple); } .chip-red { background: var(--red-bg); color: var(--red); }
.chip-green { background: var(--green-100); color: var(--green-800); } .chip-dark { background: #344852; color: #fff; }
.chip-overdue { background: var(--red); color: #fff; }

/* Messages */
.msg { padding: .75rem 1rem; border-radius: 8px; margin-bottom: .75rem; border: 1px solid; }
.msg-success { background: var(--green-100); border-color: #94e7bb; color: var(--green-900); }
.msg-error { background: var(--red-bg); border-color: #fa9999; color: var(--red); }
.msg-info, .msg-warning { background: var(--amber-bg); border-color: #ffd08a; color: #6d4100; }
.placeholder-banner { background: repeating-linear-gradient(45deg, #fffaeb, #fffaeb 10px, #fff5d7 10px, #fff5d7 20px); border: 1px dashed #f0b400; color: #6d4100; padding: .6rem .9rem; border-radius: 8px; margin-bottom: 1rem; font-size: .92rem; }
.disclaimer { border-left: 4px solid var(--red); background: var(--red-bg); padding: .6rem .9rem; border-radius: 6px; color: var(--red); font-size: .92rem; }

/* Key/value */
dl.kv { display: grid; grid-template-columns: minmax(130px, 34%) 1fr; gap: .35rem .9rem; margin: 0; }
dl.kv dt { color: var(--muted); } dl.kv dd { margin: 0; font-weight: 700; word-break: break-word; }

/* Photos */
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .8rem; }
.photo { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.photo img { display: block; width: 100%; height: 170px; object-fit: cover; background: #ddd; cursor: zoom-in; }
.photo .meta { padding: .5rem .6rem; font-size: .8rem; line-height: 1.45; }
.flag { color: var(--red); font-weight: 700; }

/* Stepper (inspection form) */
.stepper { display: flex; gap: 0; margin: 0 0 1rem; padding: 0; list-style: none; overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.stepper li { flex: 1; min-width: 88px; }
.stepper button { width: 100%; min-height: 56px; border: 0; background: none; font: inherit; color: var(--muted); cursor: pointer; padding: .4rem; display: flex; flex-direction: column; align-items: center; gap: 2px; border-bottom: 4px solid transparent; }
.stepper .num { width: 26px; height: 26px; border-radius: 50%; background: var(--grey-bg); display: grid; place-items: center; font-size: .85rem; font-weight: 700; font-family: "Noto Sans"; }
.stepper button[aria-current="step"] { color: var(--green-800); font-weight: 700; border-bottom-color: var(--green-800); }
.stepper button[aria-current="step"] .num, .stepper button.done .num { background: var(--green-800); color: #fff; }
.step[hidden] { display: none; }
.step-nav { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--bg) 30%); padding: 1rem 0 .5rem; display: flex; gap: .6rem; justify-content: space-between; z-index: 5; }
@media (max-width: 820px) { .step-nav { bottom: 58px; } }
.q { border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem; margin-bottom: .8rem; background: #fff; }
.q.invalid { border-color: var(--red); box-shadow: 0 0 0 2px var(--red-bg); }
.q .qtext { font-weight: 700; margin-bottom: .55rem; }
.q .qno { display: inline-block; min-width: 2rem; color: var(--green-800); font-family: "Noto Sans"; }
.req { color: var(--red); font-weight: 700; }
.tag { display: inline-block; font-size: .72rem; padding: 0 .45rem; border-radius: 99px; background: var(--blue-bg); color: var(--blue); margin-left: .25rem; font-weight: 700; vertical-align: middle; }
.section-h { margin: 1.2rem 0 .6rem; padding-bottom: .3rem; border-bottom: 2px solid var(--green-100); color: var(--green-800); }
.gpsbox { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; padding: .7rem .9rem; border-radius: 8px; background: var(--green-50); border: 1px dashed #94e7bb; }
.gpsbox.bad { background: var(--red-bg); border-color: #fa9999; }
.issues { margin: 0; padding-left: 1.2rem; color: var(--red); }
.issues li { margin: .2rem 0; }

/* Camera modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 100; display: none; flex-direction: column; color: #fff; }
.modal.open { display: flex; }
.modal video, .modal canvas, .modal .preview { flex: 1; width: 100%; min-height: 0; object-fit: contain; background: #000; }
.modal .bar { padding: .8rem; display: flex; gap: .6rem; align-items: center; justify-content: space-between; flex-wrap: wrap; background: #111; }
.modal .gpsline { font-size: .9rem; }
.shutter { width: 72px; height: 72px; border-radius: 50%; border: 5px solid #fff; background: var(--green-700); cursor: pointer; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 110; display: none; align-items: center; justify-content: center; padding: 1rem; cursor: zoom-out; }
.lightbox.open { display: flex; } .lightbox img { max-height: 100%; max-width: 100%; }

.pagination { display: flex; gap: .4rem; align-items: center; justify-content: center; margin: 1rem 0; flex-wrap: wrap; }
.empty { text-align: center; color: var(--muted); padding: 2rem 1rem; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: .5rem 0 .5rem 1rem; border-left: 3px solid var(--green-100); position: relative; font-size: .9rem; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: .9rem; width: 11px; height: 11px; border-radius: 50%; background: var(--green-700); }
.login-wrap { max-width: 420px; margin: 6vh auto; }
.chart-box { position: relative; height: 280px; }
@media print { .topbar, .bottomnav, .step-nav, .no-print { display: none !important; } main { padding: 0; } .card { box-shadow: none; } }

/* ==========================================================================
   Admin shell (division administrator / range officer): fixed sidebar layout.
   Field officers keep the mobile-first top bar above.
   ========================================================================== */
body.shell {
  --s-ink: #1c2b29; --s-bg: #f3fbf7; --s-side: #128c7e; --s-primary: #0e7c6f; --s-soft: #e2f7ec; --s-soft-ink: #0b6b5f;
  --s-line: #d7efe4; --s-muted: #5f706c; --s-gold: #34b7f1;
  background: var(--s-bg); color: var(--s-ink); font-size: 17px; line-height: 1.7; overflow-x: hidden;
}
.shell a { color: #0b7a6e; }
.shell .muted { color: var(--s-muted); }
.shell a:focus-visible, .shell button:focus-visible, .shell .button:focus-visible { outline: 3px solid var(--s-gold); outline-offset: 1px; }

/* Sidebar */
.side { position: fixed; top: 0; left: 0; bottom: 0; width: 240px; background: var(--s-side); color: #fff; padding: 36px 24px 20px; display: flex; flex-direction: column; z-index: 40; transition: width .15s; }
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; }
.side-brand { color: #fff !important; text-decoration: none; font-size: 19px; font-weight: 700; line-height: 1.3; display: flex; align-items: center; gap: 8px; }
.brand-icon { font-size: 26px; line-height: 1; }
.side-toggle { background: rgba(255,255,255,.08); color: #e9fff7; border: 0; border-radius: 8px; width: 30px; height: 30px; cursor: pointer; font: inherit; font-size: 16px; line-height: 1; flex-shrink: 0; }
.side-toggle:hover { background: rgba(255,255,255,.16); color: #fff; }
.side-eyebrow { color: #c9f5e6; font-size: 11px; letter-spacing: 2px; margin-top: 12px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.14); flex-shrink: 0; }
.side-nav { flex: 1 1 0%; min-height: 0; overflow: hidden auto; margin-top: 22px; padding-right: 6px; scrollbar-width: thin; scrollbar-color: #7fe0c0 transparent; }
.side-nav a, .side-nav button { display: block; width: 100%; text-align: left; color: #e9fff7 !important; background: none; border: 0; border-radius: 8px; padding: 9px 15px; margin-bottom: 5px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; line-height: 1.45; }
.side-nav a:hover, .side-nav button:hover { background: rgba(255,255,255,.07); color: #fff !important; }
.side-nav a.active { background: #0b6b60; color: #fff !important; }
.side-nav .logout-form { margin: 0; }
.asidefoot { flex-shrink: 0; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 0 10px; margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); font-size: 13px; }
.asidefoot .avatar { grid-row: 1 / 3; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #dcf8c6; color: #075e54; font-family: "Noto Sans", sans-serif; font-size: 12px; }
.asidefoot b { line-height: 1.5; overflow-wrap: anywhere; }
.asidefoot small { color: #d2f7ea; line-height: 1.5; overflow-wrap: anywhere; }
body.sidebar-collapsed .side { width: 72px; padding-left: 14px; padding-right: 14px; }
body.sidebar-collapsed .brand-name, body.sidebar-collapsed .side-eyebrow, body.sidebar-collapsed .side-nav, body.sidebar-collapsed .asidefoot { display: none; }
body.sidebar-collapsed .side-head { flex-direction: column; }
body.sidebar-collapsed .side-toggle { transform: rotate(180deg); }
body.sidebar-collapsed .shell-main { margin-left: 72px; }

/* Main column */
.shell-main { margin-left: 240px; max-width: none; padding: 0; min-width: 0; transition: margin-left .15s; }
.status-strip { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: #ebf8ff; border: 0; border-bottom: 1px solid #b9e4f7; border-radius: 0; margin: 0; padding: 12px 42px; font-size: 13px; color: #0a5f86; min-height: 40px; }
.status-strip .net { background: #e3faec; color: #0e7c6f; }
.status-strip .net.offline { background: #ffeded; color: #c2252d; }
.status-strip .sync-bar { padding: 0; background: none; text-align: left; font-size: 13px; }
.status-strip .sync-bar.show { display: inline; }
.shell-header { min-height: 72px; padding: 18px 42px; background: #fff; border-bottom: 1px solid #dcefe6; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.shell .chip { font-size: 12px; border-radius: 20px; padding: 5px 12px; background: #e2f7ec; color: #0b6b5f; font-weight: 600; }
#app { padding: 38px 42px 60px; max-width: 1500px; margin: auto; min-width: 0; }
.shell h1 { font-size: 33px; letter-spacing: -.5px; margin: 12px 0; }
.shell h2 { font-size: 21px; margin: 0 0 16px; }
.shell .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.shell .help { font-size: 13px; color: #5b6b68; margin: 6px 0 14px; }
.shell .notice { padding: 13px 18px; border: 1px solid #b9e4f7; background: #ebf8ff; color: #0a5f86; border-radius: 8px; font-size: 13px; margin: 22px 0; }
.shell .notice-tight { display: inline-block; margin: 6px 0 4px; }
.shell .tools { display: flex; gap: 12px; margin: 18px 0; flex-wrap: wrap; align-items: center; }

/* Buttons (reference style: soft grey-green secondary, deep green primary) */
.shell :where(.button, .btn, button:not(.side-toggle, .linkbtn, .nav-btn, .shutter)) {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; cursor: pointer; border: 0; border-radius: 8px;
  padding: 10px 18px; background: var(--s-soft); color: var(--s-soft-ink); font: inherit; font-size: 16px; font-weight: 600; text-decoration: none; line-height: 1.3;
}
.shell :where(.button, .btn, button:not(.side-toggle, .linkbtn, .nav-btn)):hover { filter: brightness(.96); }
.shell .button.primary, .shell .btn:not(.btn-outline, .btn-danger) { background: var(--s-primary); color: #fff; border: 0; }
.shell .btn-outline { background: var(--s-soft); color: var(--s-soft-ink); border: 0; }
.shell .btn-danger, .shell .button.danger { background: #fff; color: #c2252d; border: 1px solid #ffc2c2; }
.shell .button.small, .shell .btn-sm { min-height: 34px; padding: 5px 12px; font-size: 14px; }
.shell .side-nav button { min-height: 0; padding: 9px 15px; background: none; color: #e9fff7; display: block; text-align: left; }

/* Cards, forms, tables */
.shell .card { background: #fff; border: 1px solid var(--s-line); border-radius: 12px; padding: 26px; margin: 22px 0 0; box-shadow: none; }
.shell .page-head { margin-bottom: .5rem; }
.shell .page-head h1 { margin: 12px 0; }
.shell input[type=text], .shell input[type=password], .shell input[type=date], .shell input[type=number], .shell input[type=search], .shell input[type=email], .shell select, .shell textarea {
  border: 1px solid #c9e6d8; border-radius: 7px; background: #fff; padding: 10px 12px; color: #1c2b29; min-height: 46px;
}
.shell table.tbl, .shell .dashboard-register { width: 100%; border-collapse: collapse; text-align: left; background: #fff; font-size: 15px; }
.shell .tbl th, .shell .dashboard-register th { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #5b6b68; background: #f2fbf6; font-weight: 600; white-space: nowrap; }
.shell .tbl th, .shell .tbl td, .shell .dashboard-register th, .shell .dashboard-register td { padding: 15px 12px; border-bottom: 1px solid #e3f3eb; vertical-align: top; }
.shell .tbl tr:hover td { background: #effbf5; }
.shell td small { display: block; color: #5f706c; margin-top: 4px; font-size: 13px; }
.shell .tablewrap, .shell .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.shell .empty { text-align: center; padding: 42px; color: #5f706c; }
.shell .grid-2 { gap: 0 22px; }
.inline-filter, .dashboard-view-selector { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: fit-content; max-width: 100%; margin: 14px 0; font-weight: 600; }
.inline-filter label, .dashboard-view-selector label { margin: 0; font-weight: 600; }
.dashboard-view-selector select { min-width: 210px; width: auto; }
.inline-filter select { width: auto; }

/* Summary ring cards */
.shell .dashboard-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 14px; margin: 22px 0; }
.shell .dashboard-stats .analytics-circle { width: 112px; height: 112px; }
.shell .dashboard-stats .analytics-circle::before { inset: 10px; }
.shell .dashboard-stats .analytics-circle strong { font-size: 30px; }
.shell .stat.circle-stat { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; border-radius: 14px; padding: 20px 10px; border: 1px solid var(--s-line); border-left-width: 1px; box-shadow: none; color: var(--s-ink); text-decoration: none; }
.shell .stat.circle-stat:hover { filter: brightness(.98); }
.circle-stat > span:first-child { font-weight: 600; }
.circle-stat small { color: #4b5d59; font-size: 14px; }
.analytics-circle { --ring: #12a37f; width: 132px; height: 132px; flex-shrink: 0; border-radius: 50%; background: conic-gradient(var(--ring) var(--progress), #e8f2ee 0); display: grid; place-items: center; position: relative; }
.analytics-circle::before { content: ""; position: absolute; inset: 11px; background: #fff; border-radius: 50%; }
.analytics-circle strong { position: relative; z-index: 1; font-family: "Noto Sans", sans-serif; font-size: 34px; line-height: 1.1; color: var(--ring); }
.analytics-circle.tone-green { --ring: #1fbf5b; } .analytics-circle.tone-yellow { --ring: #f5b400; } .analytics-circle.tone-red { --ring: #f0434b; }
.summary-card-all { --summary-fill: #e3f5fe; --summary-border: #8fd6f7; --summary-ring: #1d9bf0; }
.summary-card-filled { --summary-fill: #e3faec; --summary-border: #9fe8bd; --summary-ring: #1fbf5b; }
.summary-card-left { --summary-fill: #fff1e3; --summary-border: #ffc58f; --summary-ring: #ff8a00; }
.summary-card-partial { --summary-fill: #f3ebff; --summary-border: #cdb2ff; --summary-ring: #8b5cf6; }
.summary-card-notstarted { --summary-fill: #ffeded; --summary-border: #ffb3b3; --summary-ring: #f0434b; }
.summary-card-renewed { --summary-fill: #dcf7f2; --summary-border: #8ee0d3; --summary-ring: #12b5a0; }
.summary-card-pending { --summary-fill: #fff8db; --summary-border: #ffe07a; --summary-ring: #f2b705; }
.shell .dashboard-stats .summary-card { background: var(--summary-fill); border-color: var(--summary-border); }
.shell .dashboard-stats .summary-card .analytics-circle { --ring: var(--summary-ring); }
.shell .dashboard-stats .summary-card.selected { box-shadow: 0 0 0 2px var(--summary-ring); }

/* Breadcrumb + unit tree */
#dashboard-detail { scroll-margin-top: 20px; }
.detail-navigation { margin: 12px 0 8px; }
.dashboard-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px; background: #fff; border: 1px solid #d3ece1; border-radius: 16px; }
.dashboard-breadcrumb .crumb { display: inline-flex; flex-direction: column; align-items: center; padding: 7px 12px; border-radius: 8px; background: var(--s-soft); color: var(--s-soft-ink); font-weight: 600; text-decoration: none; line-height: 1.3; }
.dashboard-breadcrumb .crumb small { font-size: 11px; font-weight: 400; }
.dashboard-breadcrumb .selected-unit { background: var(--s-side); color: #fff; }
.unit-tree { margin: 24px 0 34px; }
.tree-root { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: fit-content; min-width: 180px; max-width: 100%; margin: 0 auto 44px; padding: 15px 28px; border-radius: 40px; background: var(--s-side); color: #fff; box-shadow: 0 5px 16px rgba(7, 94, 84,.1); text-align: center; }
.tree-root > small { color: #c9f5e6; font-size: 12px; }
.tree-root > span { font-size: 21px; font-weight: 700; }
.tree-root > b { font-size: 14px; font-weight: 400; color: #d8f8ec; }
.tree-root::after { content: ""; position: absolute; top: 100%; height: 23px; width: 2px; background: #8fdcc0; }
.unit-branches { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 28px 22px; align-items: stretch; }
.unit-branches::before { content: ""; position: absolute; height: 2px; top: -22px; left: 0; right: 0; background: #8fdcc0; }
.branch-card { position: relative; padding: 22px 18px 18px; background: #fff; border: 1px solid #d3ece1; border-radius: 22px; box-shadow: 0 6px 20px rgba(7, 94, 84,.03); text-align: center; min-width: 0; }
.branch-card::before { content: ""; position: absolute; bottom: 100%; left: 50%; width: 2px; height: 22px; background: #8fdcc0; }
.branch-title { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; font-size: 21px; font-weight: 700; background: #e6f7ef; border: 1px solid transparent; border-radius: 30px; color: var(--s-side) !important; padding: 11px 15px; text-decoration: none; line-height: 1.3; }
.branch-title:hover { border-color: #7fdcb5; }
.branch-title .unit-name small { display: block; font-size: 12px; font-weight: 400; }
.branch-progress { margin: 22px auto 0; width: 114px; height: 114px; }
.branch-progress strong { font-size: 27px; color: var(--s-ink); }
.branch-caption { margin: 10px 0 18px; color: #55665f; font-size: 14px; }
.branch-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.branch-metric { border-radius: 14px; padding: 9px 2px; background: #eef9f3; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.branch-metric > span { font-size: 12px; color: #4b5d59; }
.count-link { font-family: "Noto Sans", sans-serif; font-size: 23px; font-weight: 700; line-height: 1.2; border-radius: 10px; padding: 2px 8px; text-decoration: underline; }
.count-link:hover { background: rgba(255,255,255,.7); }
.metric-green .count-link { color: #0b7a3e !important; } .metric-red .count-link { color: #c2252d !important; } .metric-yellow .count-link { color: #8a5a00 !important; }
.branch-hint { display: block; color: #5b6b68; margin-top: 17px; font-size: 12px; }
.colour-card-red { background: #ffeded; border-color: #ffbdbd; } .colour-card-red .branch-title { background: #ffd9d9; }
.colour-card-yellow { background: #fff6d6; border-color: #ffe07a; } .colour-card-yellow .branch-title { background: #ffeca8; }
.colour-card-green { background: #e3faec; border-color: #a6ebc4; } .colour-card-green .branch-title { background: #c9f3db; }
.colour-card-red .branch-metric, .colour-card-yellow .branch-metric, .colour-card-green .branch-metric { background: rgba(255,255,255,.48); }
.colour-card-red .analytics-circle::before { background: #ffeded; } .colour-card-yellow .analytics-circle::before { background: #fff6d6; } .colour-card-green .analytics-circle::before { background: #e3faec; }

/* Register rows */
.dashboard-register tbody tr.completion-row-red > td { background: #ffeded; }
.dashboard-register tbody tr.completion-row-yellow > td { background: #fff6d6; }
.dashboard-register tbody tr.completion-row-green > td { background: #e3faec; }
.actions-cell { white-space: nowrap; } .actions-cell .button { margin: 0 4px 4px 0; }
.source-flag { display: inline-block; background: #fff4cc; color: #8a5a00; border-radius: 6px; padding: 2px 8px; font-weight: 600; font-size: 14px; white-space: nowrap; }
.source-complete { color: #0b7a3e; font-weight: 600; white-space: nowrap; }
.register-record { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid #dff1e8; }
.charts-card summary { cursor: pointer; list-style: none; } .charts-card summary h2 { display: inline; margin: 0; }
.charts-card summary::before { content: "▸ "; } .charts-card[open] summary::before { content: "▾ "; }
.charts-card[open] summary { margin-bottom: 16px; }
.shell .msg { border-radius: 8px; }
.shell dl.kv dd { font-weight: 600; }
.unit-card h2 { margin-bottom: 6px; }

@media (max-width: 1100px) { .status-strip, .shell-header { padding-left: 24px; padding-right: 24px; } #app { padding: 28px 24px 60px; } }
@media (max-width: 820px) {
  .side { position: sticky; top: 0; bottom: auto; width: 100%; height: auto; padding: 12px 16px; flex-direction: column; }
  .side-eyebrow, .asidefoot, .side-toggle { display: none; }
  .side-brand { font-size: 19px; }
  .side-nav { display: flex; gap: 6px; overflow-x: auto; margin-top: 10px; padding: 0 0 4px; flex: none; }
  .side-nav a, .side-nav button, .side-nav .logout-form { flex: 0 0 auto; width: auto; margin: 0; padding: 7px 12px; font-size: 14px; white-space: nowrap; }
  .side-nav .logout-form button { padding: 7px 12px; }
  .shell-main, body.sidebar-collapsed .shell-main { margin-left: 0; }
  body.sidebar-collapsed .side { width: 100%; } body.sidebar-collapsed .side-nav { display: flex; } body.sidebar-collapsed .brand-name { display: inline; }
  .status-strip, .shell-header { padding: 8px 16px; } .shell-header { min-height: 52px; font-size: 14px; }
  #app { padding: 20px 16px 48px; }
  .shell h1 { font-size: 27px; }
  .shell .card { padding: 18px; }
  .shell .dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .analytics-circle { width: 104px; height: 104px; } .analytics-circle strong { font-size: 27px; }
  .unit-branches { grid-template-columns: 1fr; margin-left: 12px; padding-left: 23px; gap: 20px; }
  .unit-branches::before { inset: -22px auto 0 0; height: auto; width: 2px; }
  .tree-root { margin-left: 0; }
  .branch-card::before { left: -24px; top: 36px; bottom: auto; width: 23px; height: 2px; }
  .register-record { grid-template-columns: 1fr; }
}
@media print { .side, .status-strip, .shell-header { display: none !important; } .shell-main { margin: 0 !important; } #app { padding: 0; } }
.shell .dashboard-register, .shell .licence-register { min-width: 1100px; }
.shell .licence-register td.mono, .shell .dashboard-register td.mono { white-space: nowrap; }
.register-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; align-items: end; margin: 18px 0; }
.register-filters label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.register-count { font-size: 14px; color: #4b5d59; margin: 14px 0 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tools .inline-filter { flex-wrap: nowrap; } .tools .inline-filter input { width: 260px; max-width: 60vw; }


/* ---------- reference parity: strip, header, forms, buttons ---------- */
.status-strip .net-text.offline { color: #c2252d; font-weight: 600; }
.status-strip .sync-bar { display: inline; margin-right: 6px; }
.status-strip .sync-bar.busy { color: #8a5a00; font-weight: 600; }
.shell .status-strip button, .shell .status-strip .button { min-height: 0; padding: 10px 14px; font-size: 15px; }
.shell .status-strip a:not(.button) { color: #0a6aa6; font-size: 13px; }
.header-chips { display: inline-flex; gap: 8px; align-items: center; }
.shell .chip-link { text-decoration: none; color: #0b6b5f; }
.shell .chip-link:hover { background: #d1f2e2; }
.shell .badge-count { background: #dcf8c6; color: #075e54; }
.eyebrow { font-size: 11px; letter-spacing: 2px; color: #0e7c6f; font-weight: bold; margin-top: 8px; }
.formwrap { max-width: 820px; margin: auto; }
.shell .field { margin: 0 0 18px; }
.shell .field label { display: block; font-weight: 600; margin-bottom: 8px; line-height: 1.6; }
.shell .field input, .shell .field select, .shell .field textarea { width: 100%; }
.shell input[readonly] { background: #eaf7f1; color: #4b5d59; }
.shell .error { color: #c1452a; background: #fff5f0; padding: 12px; border-radius: 6px; }
.shell .err { color: #c1452a; font-size: 14px; display: block; }
.inline-fields { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 12px 0; }
.inline-fields label { margin: 0; font-weight: 400; }
.inline-fields input:not([type=checkbox]), .inline-fields select { width: auto; min-width: 150px; max-width: 100%; }
.inline-fields input.search { width: 320px; }
.inline-fields.stacked { align-items: flex-end; }
.inline-fields.stacked > div label { display: block; font-size: 14px; margin-bottom: 4px; }
.shell form.inline { display: inline; }
.shell button.danger, .shell .button.danger { background: #fff1f1; color: #c2252d; border: 1px solid #ffc2c2; }
.shell button.primary, .shell .button.primary { background: var(--s-primary); color: #fff; }
.shell button.small, .shell .button.small { min-height: 34px; padding: 6px 12px; font-size: 14px; }
.shell button:disabled { opacity: .55; cursor: not-allowed; }
.shell .actions { display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 22px; }
.reviewline { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 12px 0; border-bottom: 1px solid #dff1e8; }
.reviewline span { color: #5f706c; }
details.backups { margin-top: 16px; } details.backups summary, details.register-owner summary { cursor: pointer; font-weight: 600; margin: 8px 0; }
.hi-file-label { display: inline-block; background: #0e7c6f; color: #fff; padding: 13px 18px; border-radius: 8px; cursor: pointer; margin: 10px 6px 10px 0; font-weight: 600; }
.hi-file-native { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.hi-file-native:focus + .help, .hi-file-label:focus-within { outline: 3px solid var(--s-gold); }
#toast { position: fixed; bottom: 25px; right: 25px; background: #0e7c6f; color: #fff; border-radius: 8px; padding: 15px 22px; display: none; z-index: 200; max-width: 90vw; }
.completion-percent { display: inline-block; min-width: 56px; text-align: center; border-radius: 20px; padding: 3px 10px; font-weight: 700; }
.completion-red { background: #ffecec; color: #c2252d; } .completion-yellow { background: #fff4cc; color: #8a5a00; } .completion-green { background: #e3faec; color: #0b7a3e; }
.licence-register td { vertical-align: top; min-width: 110px; white-space: normal; }
.licence-register td:first-child, .licence-register th:first-child { min-width: 50px; }
.licence-register-card { padding-top: 12px; }
.shell .row h1 { margin-right: auto; }
.login-box { margin-top: 6vh; }
body.shell-guest .side-nav:not(.guest-nav), body.shell-guest .asidefoot { display: none; }

/* ---------- renewal form (single page, sectioned) ---------- */
.renewal-form { max-width: 1120px; margin: auto; }
.renewal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.renewal-sub { font-size: 12px; color: #5f706c; }
.renewal-jumps { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.renewal-jumps a { padding: 8px 12px; background: #e2f7ec; color: #128c7e !important; border-radius: 6px; text-decoration: none; font-size: 15px; }
.renewal-jumps a:hover { background: #d1f2e2; }
.progress { height: 6px; background: #d9f5e7; border-radius: 8px; margin: 10px 0 18px; overflow: hidden; }
.progress i { height: 100%; display: block; background: #25d366; border-radius: 8px; transition: width .2s; }
.renewal-form section.card { scroll-margin-top: 20px; }
.renewal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.renewal-field { min-width: 0; }
.renewal-field.wide { grid-column: 1 / -1; }
.renewal-field[hidden] { display: none; }
.renewal-field > label { display: block; margin-bottom: 8px; font-weight: 600; line-height: 1.6; }
.renewal-field > label .req { color: #b23924; }
.renewal-field > label small { font-weight: 400; color: #55665f; }
.renewal-field input, .renewal-field select, .renewal-field textarea { width: 100%; }
.renewal-field textarea { min-height: 96px; }
.renewal-field .help { margin: 6px 0 0; }
.renewal-field.invalid input, .renewal-field.invalid select, .renewal-field.invalid textarea, .renewal-field.invalid .gpsbox { border-color: #c2252d; box-shadow: 0 0 0 2px #ffeded; }
.renewal-field.prefilled input, .renewal-field.prefilled textarea { background: #ebf8ff; }
.renewal-field .remarks { margin-top: 8px; }
.renewal-readonly { background: #ebf8ff; border: 1px solid #b9e4f7; border-radius: 8px; padding: 10px 14px; color: #0a5f86; font-size: 14px; }
.renewal-readonly b { color: #1c2b29; }
.renewal-actions { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; background: #fff; border: 1px solid #d3ece1; border-radius: 10px; padding: 14px 16px; box-shadow: 0 -3px 18px rgba(7, 94, 84,.06); z-index: 5; margin-top: 22px; }
.renewal-actions > span { margin-right: auto; font-size: 14px; color: #4b5d59; }
.renewal-photos { display: flex; gap: 18px; flex-wrap: wrap; }
.shell .gpsbox { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border-radius: 8px; background: #effbf5; border: 1px solid #c9e6d8; }
.shell .gpsbox.bad { background: #ffeded; border-color: #ffbdbd; }
.shell .photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 10px 0; }
@media (max-width: 700px) {
  .renewal-grid { grid-template-columns: 1fr; }
  .renewal-field.wide { grid-column: auto; }
  .renewal-actions { position: static; }
  .renewal-actions button { flex: 1 1 0%; }
  .inline-fields input.search { width: 100%; }
  .reviewline { grid-template-columns: 1fr; gap: 4px; }
}

/* ==========================================================================
   Government UI system – one consistent look for list / register pages
   (page header · filter panel · data table · status pills · row actions · print)
   ========================================================================== */
body.shell { --g-line: #d3ece1; --g-line-soft: #e6f5ee; --g-head: #e6f7ef; --g-ink-2: #2f4a45; --g-muted: #5b6b68; }

/* Page header */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap;
  padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--g-line); }
.page-header .eyebrow { margin: 0 0 4px; }
.shell .page-header h1 { margin: 0; font-size: 28px; line-height: 1.3; letter-spacing: 0; }
.page-header .sub { margin: 6px 0 0; color: var(--g-muted); font-size: 14.5px; line-height: 1.6; }
.page-header .sub b { color: var(--s-ink); }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.shell .page-actions :where(.button, button) { min-height: 40px; padding: 8px 16px; font-size: 15px; }
.back-link { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; text-decoration: none; margin-bottom: 10px; }

/* Panels */
.panel { background: #fff; border: 1px solid var(--g-line); border-radius: 10px; margin: 0 0 20px; overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
  padding: 12px 18px; background: #f7fdfa; border-bottom: 1px solid var(--g-line); font-size: 14.5px; color: var(--g-ink-2); }
.panel-head h2 { margin: 0 !important; font-size: 17px !important; color: var(--s-ink); }
.panel-head .meta { color: var(--g-muted); font-size: 14px; }
.panel-body { padding: 16px 18px; }
.panel > .empty, .panel .empty { padding: 36px 18px; }

/* Filter panel */
.filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 14px; align-items: end; }
.filter-grid .wide { grid-column: span 2; }
.filter-grid label, .filter-grid .f-label { display: block; font-size: 13px; font-weight: 600; color: var(--g-ink-2); margin: 0 0 5px; line-height: 1.4; }
.shell .filter-grid :where(input, select) { width: 100%; min-height: 40px; padding: 7px 10px; font-size: 15px; border-color: #c4e3d4; }
.filter-actions { display: flex; gap: 8px; align-items: center; }
.shell .filter-actions :where(.button, button) { min-height: 40px; padding: 7px 16px; font-size: 15px; }
.filter-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; font-size: 13px; color: var(--g-muted); align-items: center; }

/* Data table */
.table-scroll { overflow: auto; max-height: calc(100vh - 230px); -webkit-overflow-scrolling: touch; }
.table-scroll.no-max { max-height: none; }
.shell table.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; line-height: 1.55; background: #fff; }
.shell .data-table thead th { position: sticky; top: 0; z-index: 2; background: var(--g-head); color: var(--g-ink-2); font-size: 13px; font-weight: 700;
  text-transform: none; letter-spacing: 0; text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--g-line); white-space: nowrap; vertical-align: bottom; }
.shell .data-table td { padding: 10px 12px; border-bottom: 1px solid var(--g-line-soft); vertical-align: top; color: var(--s-ink); background: #fff; }
.shell .data-table tbody tr:nth-child(even) td { background: #f8fdfa; }
.shell .data-table tbody tr:hover td { background: #eafaf1; }
.shell .data-table tbody tr:last-child td { border-bottom: 0; }
.shell .data-table td.center, .shell .data-table th.center { text-align: center; }
.shell .data-table td.num, .shell .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shell .data-table .nowrap { white-space: nowrap; }
.shell .data-table td.serial { color: var(--g-muted); font-variant-numeric: tabular-nums; text-align: center; width: 1%; }
.shell .data-table .licence-no { font-weight: 700; white-space: nowrap; color: #075e54; }
.shell .data-table .cell-main { font-weight: 600; color: var(--s-ink); display: block; }
.shell .data-table .cell-sub { display: block; color: var(--g-muted); font-size: 13px; line-height: 1.5; margin-top: 2px; }
.shell .data-table td small { font-size: 13px; color: var(--g-muted); margin-top: 3px; }
.shell .data-table .unit-path { display: block; font-size: 13px; color: var(--g-muted); }
.shell .data-table .unit-path b { color: var(--s-ink); font-weight: 600; }
.shell .data-table td.empty { text-align: center; padding: 40px 12px; color: var(--g-muted); background: #fff; }
.shell .data-table tr.stripe-red td:first-child { box-shadow: inset 4px 0 0 #f0434b; }
.shell .data-table tr.stripe-yellow td:first-child { box-shadow: inset 4px 0 0 #f5b400; }
.shell .data-table tr.stripe-green td:first-child { box-shadow: inset 4px 0 0 #1fbf5b; }
.shell .data-table.compact td, .shell .data-table.compact th { padding: 8px 10px; }

/* Status pills (one vocabulary for every page) */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  line-height: 1.6; white-space: nowrap; border: 1px solid transparent; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.pill.no-dot::before { display: none; }
.pill-ok { background: #e3faec; color: #0b7a3e; border-color: #a6ebc4; }
.pill-warn { background: #fff4cc; color: #8a5a00; border-color: #ffe08a; }
.pill-danger { background: #ffecec; color: #c2252d; border-color: #ffc2c2; }
.pill-info { background: #e3f5fe; color: #0a6aa6; border-color: #a8def8; }
.pill-muted { background: #f0f6f4; color: #4a5a57; border-color: #d8e6e1; }
/* Workflow status chips share the pill look */
.shell .chip { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.6; border: 1px solid transparent; }
.shell .chip.chip-grey { background: #f0f6f4; color: #4a5a57; border-color: #d8e6e1; }
.shell .chip.chip-blue { background: #e3f5fe; color: #0a6aa6; border-color: #a8def8; }
.shell .chip.chip-amber { background: #fff4cc; color: #8a5a00; border-color: #ffe08a; }
.shell .chip.chip-teal { background: #dcf7f2; color: #0b7a6e; border-color: #8ee0d3; }
.shell .chip.chip-purple { background: #f3ebff; color: #6d3fd6; border-color: #cdb2ff; }
.shell .chip.chip-red { background: #ffecec; color: #c2252d; border-color: #ffc2c2; }
.shell .chip.chip-green { background: #e3faec; color: #0b7a3e; border-color: #a6ebc4; }
.shell .chip.chip-dark { background: #334744; color: #fff; }
.shell .chip.chip-overdue { background: #c2252d; color: #fff; }

/* Row actions */
.row-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; white-space: nowrap; }
.shell .row-actions :where(.button, button) { min-height: 32px; padding: 4px 12px; font-size: 13.5px; border-radius: 6px; }
.shell .row-actions form { display: inline; margin: 0; }

/* Units table chips */
.beat-list { display: flex; flex-wrap: wrap; gap: 6px; }
.beat-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; border: 1px solid var(--g-line); border-radius: 999px; font-size: 13.5px; background: #fff; }
.beat-chip .count { background: var(--g-head); color: var(--g-ink-2); border-radius: 999px; padding: 0 8px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Print: official register layout (A4 landscape, header repeated on every page) */
.print-only { display: none; }
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body.shell { background: #fff; font-size: 11px; }
  .side, .status-strip, .shell-header, .no-print, .page-actions, #toast { display: none !important; }
  .shell-main { margin: 0 !important; } #app { padding: 0 !important; max-width: none; }
  .print-only { display: block; }
  .print-title { text-align: center; font-size: 15px; font-weight: 700; margin: 0 0 2px; }
  .print-meta { text-align: center; font-size: 11px; margin: 0 0 8px; }
  .page-header { display: none; }
  .panel { border: 0; border-radius: 0; overflow: visible; margin: 0; }
  .panel-head { display: none; }
  .table-scroll { max-height: none; overflow: visible; }
  .shell table.data-table { font-size: 10.5px; border: 1px solid #000; }
  .shell .data-table thead { display: table-header-group; }
  .shell .data-table thead th { position: static; background: #eee !important; color: #000; border: 1px solid #000; padding: 4px 5px; white-space: normal; }
  .shell .data-table td { border: 1px solid #000; padding: 3px 5px; background: #fff !important; color: #000; }
  .shell .data-table tr { page-break-inside: avoid; }
  .shell .data-table .cell-sub, .shell .data-table td small, .shell .data-table .unit-path { color: #000; font-size: 10px; }
  .pill, .shell .chip { border: 0; background: none !important; color: #000 !important; padding: 0; font-weight: 400; }
  .pill::before { display: none; }
  .shell .data-table tr[class*="stripe-"] td:first-child { box-shadow: none; }
}

@media (max-width: 820px) {
  .shell .page-header h1 { font-size: 23px; }
  .filter-grid { grid-template-columns: 1fr 1fr; }
  .filter-grid .wide { grid-column: 1 / -1; }
  .table-scroll { max-height: none; }
  .panel-head, .panel-body { padding: 12px; }
}
.renewal-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shell .panel-body .field { margin: 0; }
.shell .panel-body .field label { font-size: 14.5px; margin-bottom: 6px; }
@media (max-width: 820px) { .renewal-grid.three { grid-template-columns: 1fr; } }
.panel .pagination { margin: 0; padding: 10px 16px; border-top: 1px solid var(--g-line); background: #f7fdfa; }
.shell .pagination :where(.button, .btn) { min-height: 34px; padding: 4px 12px; font-size: 14px; }
.audit-detail small { display: block; max-width: 460px; word-break: break-word; }
.notice-row { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 14px 18px; border-bottom: 1px solid var(--g-line-soft); margin: 0; }
.notice-row:last-of-type { border-bottom: 0; }
.notice-row.unread { box-shadow: inset 4px 0 0 #0e7c6f; background: #effbf5; }
.notice-main { min-width: 0; }
.notice-row .cell-main { font-weight: 600; display: block; }
.notice-row .cell-sub { color: var(--g-muted); font-size: 14px; display: block; margin-top: 2px; }
.notice-side { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.notice-side small { color: var(--g-muted); font-size: 13px; white-space: nowrap; }
.shell .notice-side button { min-height: 34px; padding: 4px 14px; font-size: 14px; }
.page-header > div:first-child { flex: 1 1 420px; min-width: 0; }
.page-header > .page-actions { flex: 0 0 auto; }
.page-header .sub { max-width: 820px; }
@media (max-width: 820px) {
  .page-header > .page-actions { flex: 1 1 100%; }
  .shell .page-actions :where(.button, button) { min-height: 36px; padding: 6px 12px; font-size: 14px; }
  .status-strip { padding: 8px 16px; gap: 6px; }
  .shell .status-strip button, .shell .status-strip .button { min-height: 32px; padding: 4px 10px; font-size: 13px; }
}
/* Licence list = the printed register (9 numbered columns) */
.shell .data-table thead tr.col-numbers th { top: var(--head-row-h, 58px); font-weight: 600; font-size: 12px; padding: 3px 12px; background: #f1faf6; color: var(--g-muted); }
.shell .licence-table thead tr:first-child th { white-space: normal; line-height: 1.35; height: 58px; }
.shell .licence-table td { font-size: 14px; }
.shell .licence-table .status-2 { margin-top: 5px; }
@media print {
  .shell .data-table thead tr.col-numbers th { background: #fff !important; font-weight: 400; padding: 1px 4px; }
  .shell .licence-table td { font-size: 10.5px; }
}
.shell table.licence-table { table-layout: fixed; min-width: 1100px; }
.shell .licence-table td { overflow-wrap: anywhere; }
.shell .licence-table .row-actions { flex-direction: column; align-items: stretch; gap: 4px; }
@media print { .shell table.licence-table { min-width: 0; } }
/* नवीनीकरण स्थिति dropdown inside tables */
.renewal-select { margin: 0; }
.shell .renewal-select select { width: 100%; min-height: 34px; padding: 4px 8px; font-size: 13.5px; font-weight: 600; border-radius: 999px; cursor: pointer; }
.shell .renewal-select select.renewal-pending { background: #f0f6f4; color: #4a5a57; border-color: #c4e3d4; }
.shell .renewal-select select.renewal-renewed { background: #e3faec; color: #0b7a3e; border-color: #a6ebc4; }
.shell table.dashboard-register { min-width: 1180px; }
.shell .dashboard-register .row-actions { flex-direction: column; align-items: stretch; gap: 4px; }
.shell .licence-table td { overflow-wrap: break-word; word-break: normal; }
.shell .licence-table .licence-no { white-space: normal; overflow-wrap: anywhere; }
.shell table.dashboard-register { min-width: 1464px; }

/* ==========================================================================
   WhatsApp-inspired brand layer: teal #128C7E · logo green #25D366 · sky #34B7F1 · bubble #DCF8C6
   (#25D366 is an accent only — white text sits on teal for legibility)
   ========================================================================== */
body.shell { --wa-teal: #128c7e; --wa-teal-dark: #075e54; --wa-green: #25d366; --wa-sky: #34b7f1; --wa-bubble: #dcf8c6; }
.side { background: linear-gradient(180deg, #149c8c 0%, #128c7e 45%, #0e7c6f 100%); box-shadow: 2px 0 12px rgba(7, 94, 84, .12); }
.side-eyebrow { border-bottom-color: rgba(255,255,255,.22); }
.side-nav a, .side-nav button { color: #f2fffa !important; }
.side-nav a:hover, .side-nav button:hover { background: rgba(255,255,255,.14); color: #fff !important; }
.side-nav a.active { background: rgba(255,255,255,.2); color: #fff !important; box-shadow: inset 4px 0 0 var(--wa-green); }
.asidefoot { border-top-color: rgba(255,255,255,.22); }
.side-toggle { background: rgba(255,255,255,.16); color: #fff; }
.shell-header { border-bottom: 3px solid var(--wa-green); }
.shell .eyebrow { color: var(--wa-teal); }
.page-header { border-bottom-color: #c9eedd; }
.shell .button.primary, .shell button.primary, .shell .btn:not(.btn-outline, .btn-danger) { background: #0e7c6f; }
.shell .button.primary:hover, .shell button.primary:hover { background: #0b6b60; filter: none; }
.shell :where(.button, .btn, button:not(.side-toggle, .linkbtn, .nav-btn, .shutter)) { border: 1px solid #c4ecd8; }
.shell .button.primary, .shell button.primary { border-color: #0e7c6f; }
.panel-head { background: linear-gradient(180deg, #f4fdf8, #eefaf4); }
.shell .data-table thead th { background: #e3f8ee; color: #0b4f47; border-bottom-color: #bfe9d4; }
.tree-root, .dashboard-breadcrumb .selected-unit { background: linear-gradient(135deg, #12a37f, #128c7e); }
.analytics-circle::before { background: #fff; }
.progress i { background: linear-gradient(90deg, #25d366, #12a37f); }
.shell a:focus-visible, .shell button:focus-visible, .shell .button:focus-visible, .shell :focus-visible { outline-color: var(--wa-sky); }
.confirm-delete .confirm-subject { font-weight: 600; margin-top: 0; }
.confirm-delete .actions { margin-top: 18px; }
.id-form [data-unit] { display: inline-flex; align-items: center; gap: 8px; }
.id-form [data-unit][hidden] { display: none; }
.id-extra summary { cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--g-ink-2); margin: 6px 0; }