/* ===========================================================================
   Department portal — additions to citizen_app.css, not a second design.
   The components are deliberately the same ones residents see; only the chrome
   says "internal", so staff and the public are demonstrably looking at one
   system rather than two that might disagree.
   =========================================================================== */

body.dept .appbar { background: #14303f; }
body.dept .appbar-kicker { color: #8fc0d4; }

/* A wider column than the citizen app: this is a work surface, and on a laptop
   a ward officer is comparing rows, not reading one card at a time. */
@media (min-width: 760px) and (max-width: 1079.98px) {
  body.dept .app { max-width: 780px; }
  body.dept .tabbar { max-width: 780px; }
  body.dept .toasts { max-width: 780px; }
}

/* --- Metric strip --------------------------------------------------------- */

.metrics-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
}

.metric-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 10px;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  display: block;
}

.metric-tile b { display: block; font: 800 21px Manrope, 'DM Sans', sans-serif; }
.metric-tile span { display: block; font-size: 10.5px; color: var(--ink-3); line-height: 1.3; margin-top: 2px; }
.metric-tile.alert b { color: var(--bad); }
.metric-tile.alert { border-color: var(--bad-soft); background: var(--bad-soft); }
.metric-tile.good b { color: var(--ok); }

/* --- Work rows ------------------------------------------------------------ */

.work { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
        padding: 13px; box-shadow: var(--shadow); }
.work + .work { margin-top: 10px; }
.work-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
/* The status pill is a flex item next to a title that can run to two lines, so
   it was shrinking until "Open" broke across lines as "Op / en". It keeps its
   own width; the title is what wraps. */
.work-top > .pill { flex: 0 0 auto; white-space: nowrap; }
.work-top > div { min-width: 0; }
.work-top b { font: 700 13.5px Manrope, 'DM Sans', sans-serif; }
.work .code { font-size: 10.5px; letter-spacing: .4px; color: var(--ink-3); font-weight: 700; margin-top: 2px; }
.work .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
              font-size: 11.5px; color: var(--ink-3); margin-top: 8px; }
.work .said { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-2);
              background: var(--surface-2); border-radius: 10px; padding: 9px 11px; }

/* Compact inline editor inside a work row. */
.work form { margin-top: 10px; display: grid; gap: 7px; }
.work form .line { display: flex; gap: 7px; flex-wrap: wrap; }
.work form select, .work form input {
  min-height: 40px; padding: 8px 10px; font-size: 13px; border-radius: 9px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  flex: 1 1 140px; min-width: 0;
}
.work form button { min-height: 40px; padding: 8px 16px; flex: 0 0 auto; }

/* --- Filter chips --------------------------------------------------------- */

.filters { display: flex; gap: 7px; flex-wrap: wrap; }

.filter {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.filter.on { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }
.filter i { font-style: normal; opacity: .75; }

/* --- Ward table ----------------------------------------------------------- */

.ward-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.ward-row:first-of-type { border-top: 0; }
.ward-row b { font: 700 13.5px Manrope, 'DM Sans', sans-serif; display: block; }
.ward-row .who { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.ward-row .nums { display: flex; gap: 10px; text-align: right; font-size: 11px; color: var(--ink-3); }
.ward-row .nums em { font-style: normal; display: block; font: 800 15px Manrope, 'DM Sans', sans-serif;
                     color: var(--ink); }
.ward-row .nums .bad em { color: var(--bad); }

/* --- KPI bars ------------------------------------------------------------- */

.kpi { padding: 12px 0; border-top: 1px solid var(--line); }
.kpi:first-of-type { border-top: 0; }
.kpi-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.kpi-top b { font: 700 13px Manrope, 'DM Sans', sans-serif; }
.kpi-top span { font: 800 14px Manrope, 'DM Sans', sans-serif; }
.kpi-bar { height: 7px; border-radius: 4px; background: var(--surface-2); margin: 8px 0 6px; overflow: hidden; }
.kpi-bar i { display: block; height: 100%; border-radius: 4px; background: var(--ok); }
.kpi-bar i.low { background: var(--bad); }
.kpi-bar i.mid { background: var(--warn); }
.kpi p { margin: 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.45; }

/* An icon sitting in running text, sized to the line it sits on. */
.icon-inline { width: 13px; height: 13px; vertical-align: -2px; flex: 0 0 13px; }

/* --- Components the department templates were hand-rolling inline ---------
   These replace repeated style="" attributes. A one-off inline style is a
   shortcut; thirty of them are a second, undocumented design system that
   drifts from the first one. */

/* A list row: something on the left, status or an action on the right. */
.row-split {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}

.row-split:first-of-type { border-top: 0; }
.row-split .main { min-width: 0; }
.row-split .main b { display: block; font: 700 13px Manrope, 'DM Sans', sans-serif; }
.row-split .main span { display: block; font-size: 11.5px; color: var(--ink-3); line-height: 1.4; margin-top: 2px; }
.row-split .side { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.row-split .side b { font: 800 14px Manrope, 'DM Sans', sans-serif; }

/* Assigning a ward owner: the portal's most repeated action. */
.assign { padding: 13px 0; border-top: 1px solid var(--line); }
.assign:first-of-type { border-top: 0; }
.assign-ward { display: block; font: 700 13.5px Manrope, 'DM Sans', sans-serif; }
.assign-where { display: block; font-size: 11.5px; color: var(--ink-3); line-height: 1.4; margin: 2px 0 9px; }
.assign-fields { display: flex; gap: 8px; flex-wrap: wrap; }

.assign-fields input {
  flex: 2 1 210px;
  min-width: 0;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: 13.5px 'DM Sans', sans-serif;
}

.assign-fields input.narrow { flex: 1 1 130px; }
.assign-fields .btn { flex: 0 0 auto; }

.assign-hint {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-3);
}

.assign-hint svg { width: 13px; height: 13px; flex: 0 0 13px; margin-top: 2px; }

/* Two fields side by side, e.g. a coordinate pair. */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* A closing note under a card's content. */
.note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }

/* ===========================================================================
   Desktop work surface (>= 1080px)
   ---------------------------------------------------------------------------
   The department portal deliberately reuses the citizen shell: a ward officer
   reads it on a phone in the field, and staff and residents should be looking
   at recognisably one system. But the shell is a 480px column with a hamburger
   and a tab bar pinned to the bottom, and on a desktop that read as "the mobile
   site" next to the sidebar pages (/overview, /map, /graph, ...) that the same
   menu links to.

   So: one layout, three widths. Below 760px it is the phone. Up to 1080px it is
   the wider column above. From 1080px the five primary destinations leave the
   bottom bar and become a left rail beside a full-width canvas, which is the
   shape base.html already uses for every other internal page. No template or
   markup changes - the same <nav class="tabbar"> is restyled in place.
   =========================================================================== */

@media (min-width: 1080px) {
  body.dept .app {
    max-width: none;
    border: 0;
    box-shadow: none;
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "bar bar"
      "nav main";
    /* The rail's column is painted here, not on the rail itself. The rail is
       sticky and therefore only as tall as the viewport, so its own background
       would stop halfway down a long queue; the title bar covers the top row,
       so this gradient only ever shows beside the content. */
    background:
      linear-gradient(to right,
        var(--surface) 0 251px,
        var(--line) 251px 252px,
        var(--app-bg) 252px);
  }

  /* Full-width title bar. It stops being sticky because the rail sticks
     instead, and two stacked sticky bars would need a hardcoded offset. */
  body.dept .appbar {
    grid-area: bar;
    position: static;
    padding: 15px 24px;
    gap: 14px;
  }

  body.dept .appbar-titles h1 { font-size: 20px; }
  body.dept .appbar-kicker { font-size: 9.5px; }

  /* --- The bottom tab bar becomes the left rail -------------------------- */
  body.dept .tabbar,
  body.dept .tabbar.five {
    grid-area: nav;
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
    bottom: auto;
    align-self: start;
    max-height: 100vh;
    overflow-y: auto;
    max-width: none;
    margin: 0;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    grid-template-columns: none;
    background: transparent;
    border-right: 0;
    box-shadow: none;
  }

  body.dept .tabbar a,
  body.dept .tabbar.five a {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 11px;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--ink-2);
  }

  body.dept .tabbar a:hover { background: var(--surface-2); color: var(--ink); }
  body.dept .tabbar a.active { background: var(--brand-soft); color: var(--brand-ink); }
  body.dept .tabbar a.active svg { transform: none; }
  body.dept .tabbar svg { width: 19px; height: 19px; flex: 0 0 19px; }
  body.dept .tabbar.five span,
  body.dept .tabbar span { max-width: none; font-size: inherit; }

  /* --- Canvas ------------------------------------------------------------ */
  /* Nothing is pinned to the bottom any more, so stop reserving a tab bar's
     worth of padding for it. */
  body.dept .app-main {
    grid-area: main;
    padding: 20px 26px 34px;
  }

  /* The canvas fills the width the way every base.html page does; a capped
     column just left dead space under a title bar that spans the screen. The
     card grid below sets its own column width, so nothing stretches - a wider
     monitor buys another column of cases, not wider cases. Running text is
     capped on its own, because that genuinely does get hard to read long. */
  body.dept .provenance,
  body.dept .app-footer,
  body.dept .sub-head { max-width: 980px; }

  body.dept .toasts { left: auto; right: 26px; margin: 0; max-width: 520px; }

  /* Use the width: the case and work-order lists are a long phone column
     otherwise. Two up at this width, more on a very wide screen. */
  body.dept .app-main > div:has(> .work + .work) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
    gap: 12px;
    align-items: start;
  }

  body.dept .app-main > div:has(> .work + .work) .work + .work { margin-top: 0; }

  body.dept .metrics-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  body.dept .metric-tile { padding: 14px; }
  body.dept .metric-tile b { font-size: 24px; }
  body.dept .metric-tile span { font-size: 11.5px; }

  /* The area filter is a toolbar here, not a full-width field. */
  body.dept .area-pick { max-width: 440px; }
}