/* Company Hub — CRM design system (Odoo/Zoho-inspired) */
:root {
  --brand: #714b67; --brand-dark: #5d3d55; --brand-ink: #f3eaf1;
  --bg: #f1f0f5; --sheet: #ffffff; --ink: #1f2532; --muted: #7c8493;
  --accent: #714b67; --accent-soft: #f3ecf2; --line: #e2e2ea; --line-dark: #cfcfda;
  --green: #28a06a; --green-soft: #e3f4ec; --amber: #c47f0e; --amber-soft: #fcf1dd;
  --red: #d44b3f; --red-soft: #fbe9e7; --gray: #67707f; --gray-soft: #ededf2;
  --purple: #6d5bd0; --purple-soft: #edeafa; --teal: #0e8f8f; --teal-soft: #e0f2f2;
  --shadow: 0 1px 3px rgba(31,37,50,.08);
  --banner: 0px;            /* update banner: 0 until one is showing */
  --chrome: calc(104px + var(--banner));   /* app bar + control bar: what sticky sits under */
  /* --accent is the link/emphasis colour; --accent-bg is the same plum used as a
     SURFACE under white text. They split apart in dark mode, where the text
     colour has to go light but a button still has to carry white. */
  --accent-bg: #714b67;
  --sheet-2: #fafafc;       /* table headers, group headers, empty states */
  --line-soft: #f2f2f6;     /* the faint rule between rows */
  --kb-bg: #e9e7ee; --kb-line: #dcd9e4;      /* kanban board furniture */
  --code-bg: #262433; --code-ink: #e8e6f0;   /* code blocks (dark in both themes) */
  --amber-dark: #a86c0c; --amber-ink: #7a5205;
}

/* ---- Dark theme -------------------------------------------------------
   data-theme is written on <html> by the inline script in base.html before
   the first paint, so there is no flash. "System" resolves to light or dark
   there rather than here, which keeps one set of values to maintain.
   Only tokens change below: no component restyles itself for dark. */
:root[data-theme="dark"] {
  color-scheme: dark;       /* native controls, scrollbars and form widgets */
  --brand: #3b2a36; --brand-dark: #2b1e27; --brand-ink: #e8dfe6;
  --bg: #14151a; --sheet: #1c1e25; --sheet-2: #23262f;
  --ink: #e7e8ee; --muted: #99a0ae;
  --accent: #d7a6c6; --accent-bg: #8a5c7d; --accent-soft: #33252f;
  --line: #2c2f3a; --line-dark: #3a3e4b; --line-soft: #262932;
  --green: #4fc48d; --green-soft: #143028;
  --amber: #e0a33a; --amber-soft: #33280f;
  --amber-dark: #c98d21; --amber-ink: #e6cfa0;
  --red: #f0796c; --red-soft: #35201f;
  --gray: #99a0ae; --gray-soft: #2a2d37;
  --purple: #9d8ff0; --purple-soft: #262340;
  --teal: #45bcbc; --teal-soft: #103030;
  --kb-bg: #20222b; --kb-line: #32353f;
  --code-bg: #11131a; --code-ink: #dfe1ea;
  --shadow: 0 1px 3px rgba(0,0,0,.45);
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
       sans-serif; background: var(--bg); color: var(--ink); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.01em; }

/* ================= Toasts ================= */
#toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 200; display: flex;
          flex-direction: column; gap: .5rem; max-width: 340px; }
.toast { display: block; background: #2b2733; color: #fff; border-radius: 10px;
         padding: .6rem .8rem; box-shadow: 0 10px 30px rgba(31,37,50,.28);
         font-size: .85rem; animation: toast-in .18s ease-out; }
.toast:hover { text-decoration: none; background: #383345; }
.toast b { display: block; font-weight: 600; margin-bottom: .1rem; }
.toast span { display: block; color: rgba(255,255,255,.75); font-size: .82rem;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast.go { opacity: 0; transform: translateY(6px); transition: .55s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
.n-preview { display: block; color: var(--muted); font-style: italic;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-foot { display: flex; align-items: center; justify-content: space-between;
              gap: .5rem; padding: .5rem .7rem; }
.notif-foot a, .notif-foot .linkbtn { font-size: .8rem; color: var(--accent); }

/* ================= Update banner ================= */
body.has-update { --banner: 40px; padding-top: 40px; }
/* `display: flex` below would beat the UA rule for [hidden], so say it here */
.update-bar[hidden] { display: none; }
.update-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 120; height: 40px;
              box-sizing: border-box; display: flex; align-items: center;
              justify-content: center; gap: .8rem; padding: 0 2.2rem;
              background: var(--amber-soft); color: var(--amber-ink);
              border-bottom: 1px solid var(--amber); font-size: .88rem; font-weight: 500; }
.update-bar span { display: inline-flex; align-items: center; gap: .45rem; }
.update-bar .btn { background: var(--amber); border-color: var(--amber); color: #fff;
                   font-weight: 600; }
.update-bar .btn:hover { background: var(--amber-dark); }
.update-bar .ub-close { background: none; border: 0; color: var(--amber-ink); cursor: pointer;
                        font-size: .95rem; line-height: 1; padding: .2rem .35rem;
                        position: absolute; right: .6rem; }
@media (max-width: 560px) { .update-bar { font-size: .8rem; padding-right: 2rem; } }

.msgs { padding: .5rem 1.2rem 0; }
.flash { background: var(--green-soft); color: var(--green); border: 1px solid var(--green);
         border-radius: 6px; padding: .5rem .8rem; font-size: .87rem; font-weight: 500;
         display: flex; align-items: center; gap: .45rem; }
.flash.error { background: var(--red-soft); color: var(--red); border-color: var(--red); }

/* ================= Top app bar ================= */
.appbar { background: var(--brand); color: var(--brand-ink); display: flex; align-items: center;
          gap: .25rem; padding: 0 1rem 0 .8rem; height: 46px; position: sticky;
          top: var(--banner); z-index: 50; }
.appbar .brand { color: #fff; font-weight: 700; font-size: .98rem; padding: 0 .7rem 0 .2rem;
                 display: flex; align-items: center; gap: .45rem; white-space: nowrap; }
.appbar .brand img { border-radius: 5px; }
.appbar nav { display: flex; align-items: center; gap: .15rem; overflow-x: auto; }
.appbar nav a { color: rgba(255,255,255,.78); padding: .34rem .8rem; border-radius: 6px;
                font-weight: 500; font-size: .9rem; white-space: nowrap; }
.appbar nav a:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.appbar nav a.active { background: rgba(0,0,0,.28); color: #fff; }
.appbar .search { margin-left: auto; width: 300px; }
.appbar .search input { width: 100%; padding: .35rem .8rem; border-radius: 6px; border: 0;
                        background: rgba(255,255,255,.16); color: #fff; font: inherit; font-size: .87rem; }
.appbar .search input::placeholder { color: rgba(255,255,255,.55); }
.appbar .search input:focus { outline: 0; background: var(--sheet); color: var(--ink); }
.appbar .user { display: flex; align-items: center; gap: .6rem; margin-left: .8rem;
                font-size: .85rem; color: rgba(255,255,255,.85); white-space: nowrap; }
.appbar .user form { display: inline; }
.appbar .user button { background: none; border: 0; color: rgba(255,255,255,.65);
                       cursor: pointer; font: inherit; padding: 0; }
.appbar .user button:hover { color: #fff; }

/* ================= Control bar ================= */
.control-bar { background: var(--sheet); border-bottom: 1px solid var(--line);
               display: flex; align-items: center; gap: 1rem; padding: .55rem 1.2rem;
               position: sticky; top: calc(46px + var(--banner)); z-index: 40; min-height: 50px; }
.control-bar .bc { font-size: .95rem; font-weight: 600; }
.control-bar .bc a { color: var(--muted); font-weight: 500; }
.control-bar .bc .sep { color: var(--line-dark); margin: 0 .35rem; }
.control-bar .cb-actions { display: flex; gap: .5rem; align-items: center; }
.control-bar .cb-right { margin-left: auto; display: flex; gap: .8rem; align-items: center;
                         font-size: .82rem; color: var(--muted); }
.view-switch { display: flex; border: 1px solid var(--line-dark); border-radius: 6px; overflow: hidden; }
.view-switch a { padding: 0 .65rem; min-height: 34px; display: inline-flex;
                align-items: center; color: var(--muted); font-size: .85rem; }
.view-switch a:hover { text-decoration: none; background: var(--gray-soft); }
.view-switch a.active { background: var(--accent-bg); color: #fff; }

.page { padding: .3rem 1.2rem 3rem; }
/* a kanban board sizes itself to the window — no page scroll underneath it */
.page:has(.kb) { padding-bottom: .6rem; overflow: hidden; }

/* ================= Buttons ================= */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
       padding: 0 .9rem; min-height: 34px; box-sizing: border-box;
       border-radius: 6px; border: 1px solid var(--line-dark); background: var(--sheet);
       color: var(--ink); font: inherit; font-weight: 500; font-size: .87rem; cursor: pointer;
       white-space: nowrap; }
.btn:hover { background: var(--gray-soft); text-decoration: none; }
.btn.primary { background: var(--accent-bg); border-color: var(--accent-bg); color: #fff; }
.btn.primary:hover { background: var(--brand-dark); }
.btn.small { padding: 0 .6rem; min-height: 27px; font-size: .8rem; }

/* ================= Record: sheet + chatter ================= */
.record-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.1rem;
               align-items: start; max-width: 1420px; }
@media (max-width: 1100px) { .record-wrap { grid-template-columns: 1fr; } }
.sheet { background: var(--sheet); border: 1px solid var(--line); border-radius: 4px;
         box-shadow: var(--shadow); padding: 1.5rem 2rem 1.2rem; }
.sheet-top { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-start;
             margin-bottom: 1.2rem; }
.sheet-top .kind-tag { font-size: .72rem; font-weight: 700; text-transform: uppercase;
                       letter-spacing: .07em; color: var(--muted); }
.sheet-top h1 { margin: .1rem 0 .3rem; font-size: 1.55rem; font-weight: 650; }
.sheet-top .sub { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* Ticket reference (T-0012 / JC-0003 / P-0007) beside the kind label */
.sheet-top .kind-tag .ref { background: var(--gray-soft); color: var(--ink);
    padding: .05rem .35rem; border-radius: 4px; margin-left: .15rem;
    letter-spacing: .04em; }

/* Counts in the information grid that open a list or a tab */
.fval .cnt { cursor: pointer; border-bottom: 1px dashed var(--line-dark);
    color: inherit; text-decoration: none; }
.fval .cnt:hover { border-bottom-color: var(--accent); color: var(--accent);
    text-decoration: none; }
details.dd.cnt-dd { display: inline-block; }
.cnt-dd .dd-menu { min-width: 190px; max-height: 300px; overflow-y: auto;
    padding: .35rem; }
.cnt-dd .dd-menu a { display: block; padding: .3rem .5rem; border-radius: 6px;
    font-weight: 400; }
.cnt-dd .dd-menu a:hover { background: var(--accent-soft); text-decoration: none; }

/* Empty grid slot: holds the column shape without drawing a rule */
.frow.frow-blank { border-bottom: 0; }

/* "+" assign buttons — square, so they read as an action not a word */
.btn.small.plus { padding: 0; width: 22px; height: 22px; justify-content: center;
    font-size: 1rem; line-height: 1; font-weight: 600; }

/* "+ Sites" picker on a ticket's Sites tab */
/* NOTE: `.msdd .dd-menu` and `.msdd .checklist` are defined further down this
   file, so these need the extra class to outrank them — same-specificity rules
   would silently lose on source order. */
details.dd.msdd.site-picker { display: inline-block; }
.msdd.site-picker > summary > .btn { width: auto; }
.msdd.site-picker .dd-menu { left: 0; right: auto; width: 380px; max-width: 92vw;
    max-height: 460px; display: flex; flex-direction: column; overflow: hidden; }
.msdd.site-picker .checklist { overflow-y: auto; flex: 1; max-height: 260px; }
.msdd.site-picker .checklist > div { columns: 1; }
/* one site per line — the client name trails the site name, never wraps under it */
.msdd.site-picker .checklist label { display: block; padding: .2rem .1rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: .88rem; cursor: pointer; }
.msdd.site-picker .checklist label:hover { background: var(--accent-soft);
    border-radius: 5px; }
.msdd.site-picker .checklist input { margin-right: .35rem; vertical-align: -1px; }
.msdd.site-picker .ms-scope { display: block; padding: .25rem .1rem .4rem;
    font-size: .84rem; color: var(--muted); }
.msdd.site-picker .ms-foot { padding-top: .5rem; margin-top: .3rem;
    border-top: 1px solid var(--line); flex-shrink: 0; }

/* Smart buttons (related-record counters) */
.sbtns { display: flex; border: 1px solid var(--line-dark); border-radius: 6px;
         overflow: hidden; flex-shrink: 0; }
.sbtn { display: flex; flex-direction: column; align-items: flex-start; padding: .45rem .95rem;
        border-right: 1px solid var(--line); min-width: 86px; color: var(--ink); cursor: pointer; }
.sbtn:last-child { border-right: 0; }
.sbtn:hover { background: var(--accent-soft); text-decoration: none; }
.sbtn b { font-size: 1.02rem; font-weight: 700; line-height: 1.2; }
.sbtn span { font-size: .72rem; color: var(--muted); }

/* Field grid */
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem 2.5rem;
         margin-bottom: .4rem; }
@media (max-width: 720px) { .fgrid { grid-template-columns: 1fr; } }
.frow { display: grid; grid-template-columns: 138px minmax(0, 1fr); align-items: baseline;
        padding: .32rem 0; border-bottom: 1px solid var(--line-soft); font-size: .9rem; }
.flabel { color: var(--muted); font-size: .84rem; }
.fval { font-weight: 500; word-break: break-word; }
.fval code { background: var(--gray-soft); padding: .05rem .4rem; border-radius: 4px;
             font-size: .84rem; font-weight: 400; }
.fval.empty-val { color: var(--line-dark); font-weight: 400; }

/* Notebook tabs (inside sheet) */
.nb-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line-dark); margin-top: 1.1rem;
           flex-wrap: wrap; }
.nb-tabs a { padding: .5rem 1.1rem; font-weight: 600; font-size: .87rem; color: var(--muted);
             border-bottom: 3px solid transparent; margin-bottom: -1px; display: flex;
             align-items: center; gap: .45rem; }
.nb-tabs a:hover { color: var(--ink); text-decoration: none; }
.nb-tabs a.active { color: var(--accent); border-color: var(--accent); }
.chip { background: var(--gray-soft); color: var(--gray); border-radius: 99px; font-size: .7rem;
        font-weight: 700; padding: .02rem .48rem; }
.nb-tabs a.active .chip { background: var(--accent-soft); color: var(--accent); }
.tabpane { display: none; padding-top: 1rem; }
.tabpane.active { display: block; }
.tabpane .toolbar { margin-bottom: .7rem; }

/* Chatter */
.chatter { display: flex; flex-direction: column; gap: 1rem; }
.chatter .composer { background: var(--sheet); border: 1px solid var(--line); border-radius: 4px;
                     box-shadow: var(--shadow); padding: .9rem 1rem; }
.chatter .composer h4 { margin: 0 0 .6rem; font-size: .82rem; text-transform: uppercase;
                        letter-spacing: .05em; color: var(--muted);
                        display: flex; align-items: center; gap: .4rem;
                        padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.c-buttons { display: flex; gap: .45rem; margin-top: .6rem; }
/* chat */
.chat-msg { display: flex; gap: .55rem; padding: .55rem .1rem; border-top: 1px solid var(--line-soft); }
.chat-msg:first-of-type { border-top: 0; }
.chat-msg .body { min-width: 0; flex: 1; }
.chat-msg .meta { font-size: .75rem; color: var(--muted); margin-bottom: .12rem; }
.chat-msg .meta b { color: var(--ink); }
.chat-msg .md { font-size: .88rem; }
.composer .chat-msg:first-of-type { margin-top: .7rem; border-top: 1px solid var(--line); }
#tab-chat .chat-msg { border: 0; padding: .35rem 0; align-items: flex-start; }
#tab-chat .chat-msg .body { background: var(--gray-soft); border-radius: 10px;
                            padding: .45rem .75rem; flex: 0 1 auto; max-width: 78%; }
#tab-chat .chat-msg.mine { flex-direction: row-reverse; }
#tab-chat .chat-msg.mine .body { background: var(--accent-soft); }
.c-files select, .c-files input[type=text] { margin-top: .5rem; }
.dropzone { display: flex; align-items: center; justify-content: center;
            flex-direction: column; gap: .2rem; text-align: center; cursor: pointer;
            border: 2px dashed var(--line-dark); border-radius: 8px;
            padding: 1rem .8rem; color: var(--muted); background: var(--sheet-2); }
.dropzone:hover { border-color: var(--accent); background: var(--accent-soft); }
.dropzone.over { border-color: var(--accent); background: var(--accent-soft);
                 color: var(--accent); }
.dz-idle { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.dropzone b { color: var(--ink); font-size: .88rem; }
.dropzone .muted { font-size: .78rem; }
.dz-list { display: flex; flex-direction: column; gap: .2rem; width: 100%; }
.dz-file { font-size: .82rem; color: var(--ink); background: var(--gray-soft);
           border-radius: 5px; padding: .18rem .5rem; overflow: hidden;
           text-overflow: ellipsis; white-space: nowrap; }
.chatter textarea { width: 100%; border: 1px solid var(--line); border-radius: 6px;
                    padding: .5rem .7rem; font: inherit; font-size: .88rem; resize: vertical; }
.chatter .c-actions { display: flex; gap: .5rem; margin-top: .55rem; align-items: center; }
.chatter .c-actions input[type=file] { font-size: .78rem; width: auto; }
.msg { display: flex; gap: .7rem; padding: .7rem 1rem; background: var(--sheet);
       border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--shadow); }
.msg .body { min-width: 0; flex: 1; }
.msg .meta { font-size: .78rem; color: var(--muted); margin-bottom: .1rem; }
.msg .meta b { color: var(--ink); }
/* Notes preview at three lines; a click opens the rest.
   Height-based rather than -webkit-line-clamp: inside a -webkit-box, Firefox
   and Safari drop list markers, so typed "1. 2. 3." lists lost their numbers. */
.note-md { max-height: 4.8em; overflow: hidden; position: relative; }   /* 3 x 1.6 line-height */
.note-md.clamped::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: 1.5em; background: linear-gradient(rgba(255,255,255,0), var(--sheet)); }
.note-md.open { max-height: none; }
.note-md.open::after { display: none; }
.note-md.clamped { cursor: pointer; }
.note-md.clamped:hover { opacity: .82; }
.note-md > :first-child { margin-top: 0; }
.note-md > :last-child { margin-bottom: 0; }
.note-more { display: none; font-size: .74rem; font-weight: 600; color: var(--accent);
             cursor: pointer; margin-top: .1rem; }
.note-md.clamped + .note-more, .note-md.open + .note-more { display: block; }

.c-actions { font-size: .74rem; color: var(--muted); margin-top: .15rem; }
.c-edit { display: inline-block; }
.c-edit summary { list-style: none; cursor: pointer; color: var(--accent); display: inline; }
.c-edit summary::-webkit-details-marker { display: none; }
.c-edit summary:hover { text-decoration: underline; }
.c-edit[open] { display: block; }
.c-edit form { margin: .35rem 0; }
.c-edit textarea { width: 100%; box-sizing: border-box; margin-bottom: .35rem; }
.c-actions .linkbtn { font-size: .74rem; }
.side-card { background: var(--sheet); border: 1px solid var(--line); border-radius: 4px;
             box-shadow: var(--shadow); padding: .9rem 1rem; }
.side-card h4 { margin: 0 0 .5rem; font-size: .82rem; text-transform: uppercase;
                letter-spacing: .05em; color: var(--muted); }
.side-card .rows .row { display: flex; gap: .5rem; padding: .3rem 0; font-size: .87rem;
                        border-bottom: 1px solid var(--line-soft); align-items: center; }
.side-card .rows .row:last-child { border-bottom: 0; }
.side-card .rows .grow { flex: 1; min-width: 0; }

/* Avatars */
.av { width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: .68rem;
      font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0; text-transform: uppercase; }

/* ================= List views ================= */
.list-wrap { background: var(--sheet); border: 1px solid var(--line); border-radius: 4px;
             box-shadow: var(--shadow); overflow: visible; }   /* clipping would kill sticky headers */
table.o-list { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.o-list th { position: sticky; top: calc(var(--chrome) + 6px); z-index: 4;
                  background-clip: padding-box;
                  text-align: left; padding: .5rem .8rem; font-size: .72rem; color: var(--muted);
                  text-transform: uppercase; letter-spacing: .05em; background: var(--sheet-2);
                  border-bottom: 1px solid var(--line-dark); white-space: nowrap;
                  box-shadow: inset 0 -1px 0 var(--line-dark); }
table.o-list thead th::before { content: ''; position: absolute; left: 0; right: 0;
    bottom: 100%; height: 12px; background: var(--bg); }
/* inside a record tab the table has no control bar above it */
.tabpane table.o-list th, .sheet table.o-list th { top: 0; }
.tabpane table.o-list th::before, .sheet table.o-list th::before { display: none; }
table.o-list td { padding: .48rem .8rem; border-bottom: 1px solid var(--line-soft); }
table.o-list tbody tr { cursor: pointer; }
table.o-list tbody tr:hover { background: var(--accent-soft); }
table.o-list .cbx { width: 30px; text-align: center; }
table.o-list input[type=checkbox] { accent-color: var(--accent); }
table.o-list tr.group-hd { cursor: default; }
table.o-list tr.group-hd:hover { background: none; }
table.o-list tr.group-hd td { position: sticky; top: calc(var(--chrome) + 36px); z-index: 3;
  padding: .55rem .8rem .35rem; background: var(--sheet-2);
  border-bottom: 1px solid var(--line-dark); font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
table.o-list tr.group-hd .gcount { font-weight: 500; color: var(--muted); margin-left: .3rem; }
.tree-l { color: var(--line-dark); margin: 0 .35rem 0 .6rem; }
tr.tree-row td:nth-child(2) { color: var(--ink); }
td .rowact { visibility: hidden; font-size: .8rem; }
tr:hover .rowact { visibility: visible; }

/* Filter toolbar */
.toolbar { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.lsearch { display: flex; align-items: center; gap: .4rem; background: var(--sheet);
           border: 1px solid var(--line-dark); border-radius: 6px; padding: 0 .6rem;
           min-height: 34px; box-sizing: border-box; color: var(--muted); }
.cb-actions .lsearch input { width: 230px; }
.filter-dd { min-width: 0; }
.filter-dd > summary { list-style: none; min-width: 0; }
.filter-dd > summary::-webkit-details-marker { display: none; }
.filter-dd > summary > .btn { max-width: 100%; }
.filter-dd .btn svg { flex-shrink: 0; }
.filter-dd .btn .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                       min-width: 0; }
.filter-dd .dd-menu a { display: block; padding: .32rem .55rem; border-radius: 6px;
                        color: var(--ink); font-size: .85rem; white-space: nowrap; }
.filter-dd .dd-menu a:hover { background: var(--accent-soft); text-decoration: none; }
.filter-dd .dd-menu a.current { background: var(--gray-soft); font-weight: 600; }
.lsearch input { border: 0; outline: 0; background: none; font-size: .85rem;
                 color: var(--ink); width: 200px; }
.lsearch .lclear { font-size: .78rem; color: var(--accent); }
@media (max-width: 640px) { .lsearch { flex: 1; } .lsearch input { width: 100%; flex: 1; } }
.toolbar .label { font-size: .75rem; color: var(--muted); font-weight: 600;
                  text-transform: uppercase; letter-spacing: .05em; }
a.fpill { display: inline-block; padding: .24rem .8rem; border-radius: 99px; font-size: .8rem;
          font-weight: 550; color: var(--muted); background: var(--sheet);
          border: 1px solid var(--line-dark); }
a.fpill:hover { text-decoration: none; color: var(--ink); background: var(--gray-soft); }
a.fpill.active { background: var(--accent-bg); border-color: var(--accent-bg); color: #fff; }
.page > .toolbar { margin-bottom: .8rem; }

/* ================= Kanban ================= */
/* columns share the window width; minimized ones collapse to a spine */
/* Columns stretch to the same height and fill the window, so a card can be
   dropped anywhere down the column — not just next to the cards already in it. */
/* The board fills the window and never scrolls the page: each column keeps its
   title fixed at the top and scrolls its own cards underneath. */
.kb { display: flex; gap: .7rem; overflow-x: auto; overflow-y: hidden;
      align-items: stretch; height: calc(100vh - var(--chrome) - 16px); }
.kb-col { background: var(--kb-bg); border-radius: 8px; padding: .6rem .6rem .3rem;
          flex: 1 1 0; min-width: 190px; transition: flex-basis .12s ease;
          display: flex; flex-direction: column; max-height: 100%; }
.kb-body { flex: 1 1 auto; order: 1; overflow-y: auto; overflow-x: hidden;
           min-height: 0; }   /* the whole scroll area is the drop zone */
.kb-col.over { background: var(--accent-soft); outline: 2px dashed var(--accent); }
.kb-col h4 { flex: 0 0 auto; padding: .1rem .2rem .45rem .3rem; margin: 0 0 .35rem;
             border-bottom: 1px solid var(--kb-line);
             font-size: .75rem; text-transform: uppercase;
             letter-spacing: .06em; color: var(--gray); display: flex; gap: .4rem;
             justify-content: space-between; align-items: center; }
.kb-col .kb-right { display: flex; align-items: center; gap: .15rem; flex-shrink: 0; }
.kb-count { background: var(--kb-line); border-radius: 99px; padding: .02rem .42rem;
            font-size: .72rem; font-weight: 700; }
.kb-min { background: none; border: 0; cursor: pointer; color: var(--gray);
          font: inherit; font-size: .95rem; line-height: 1; padding: 0 .2rem;
          border-radius: 4px; }
.kb-min:hover { background: var(--kb-line); color: var(--ink); }
.kb-empty { color: var(--line-dark); text-align: center; margin: .2rem 0 .5rem; }
/* minimized: the whole spine is a click target, with a visible expand control */
.kb-col.min { flex: 0 0 52px; min-width: 52px; cursor: pointer;
              justify-content: flex-start; }
.kb-col.min:hover { background: var(--accent-soft); }
.kb-col.min .kb-body, .kb-col.min .kb-empty { display: none; }
.kb-col.min h4 { flex-direction: column; gap: .55rem; margin: 0;
                 border-bottom: 0; padding: .1rem 0; }
.kb-col.min .kb-title { writing-mode: vertical-rl; text-orientation: mixed;
                        order: 2; }
.kb-col.min .kb-right { flex-direction: column-reverse; gap: .35rem; }
.kb-col.min .kb-min { font-size: 0; background: var(--kb-line); border-radius: 6px;
                      width: 26px; height: 26px; display: flex;
                      align-items: center; justify-content: center; }
.kb-col.min .kb-min::after { content: '»'; font-size: .95rem; color: var(--ink); }
.kb-col.min .kb-min:hover { background: var(--accent-bg); }
.kb-col.min .kb-min:hover::after { color: #fff; }
.kb-card { background: var(--sheet); border-radius: 6px; padding: .6rem .8rem; margin-bottom: .55rem;
           box-shadow: var(--shadow); border-left: 3px solid var(--gray); display: block;
           color: var(--ink); font-size: .87rem; }
.kb-card:hover { text-decoration: none; box-shadow: 0 3px 10px rgba(31,37,50,.14); }
.kb-card[draggable] { cursor: grab; }
.kb-card.dragging { opacity: .45; }
.kb-card b { display: block; margin-bottom: .15rem; }
.kb-card .muted { font-size: .78rem; }
.kb-card.active, .kb-card.live, .kb-card.online { border-left-color: var(--green); }
.kb-card.planning, .kb-card.commissioning, .kb-card.on_hold { border-left-color: var(--amber); }
.kb-card.done, .kb-card.dormant { border-left-color: var(--gray); }
.kb-card.offline { border-left-color: var(--red); }
.kb-card.bench, .kb-card.planned { border-left-color: var(--purple); }

/* ================= Pills ================= */
.pill { display: inline-block; padding: .1rem .6rem; border-radius: 99px; font-size: .74rem;
        font-weight: 600; text-transform: capitalize; background: var(--gray-soft);
        color: var(--gray); white-space: nowrap; }
.pill.live, .pill.active, .pill.online { background: var(--green-soft); color: var(--green); }
.pill.commissioning, .pill.planning, .pill.prospect, .pill.on_hold { background: var(--amber-soft); color: var(--amber); }
.pill.offline { background: var(--red-soft); color: var(--red); }
.pill.bench, .pill.planned { background: var(--purple-soft); color: var(--purple); }
.pill.done, .pill.dormant, .pill.retired, .pill.decommissioned { background: var(--gray-soft); color: var(--gray); }
.pill.restricted { background: var(--red-soft); color: var(--red); }

/* ================= KPI tiles ================= */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .9rem;
        margin-bottom: 1.1rem; }
.kpi { background: var(--sheet); border: 1px solid var(--line); border-radius: 4px;
       box-shadow: var(--shadow); padding: .8rem 1rem; display: flex; gap: .8rem;
       align-items: center; }
.kpi .ic { width: 40px; height: 40px; border-radius: 8px; background: var(--accent-soft);
           display: flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.kpi b { font-size: 1.35rem; display: block; line-height: 1.15; }
.kpi span { font-size: .78rem; color: var(--muted); }
.kpi a { color: inherit; }
.kpi a:hover { text-decoration: none; }

/* ================= Markdown (notes tab / knowledge) ================= */
.md { line-height: 1.6; font-size: .92rem; }
.md :first-child { margin-top: 0; } .md :last-child { margin-bottom: 0; }
/* markers are written into the HTML as text (see core/markdown.py), so the
   browser's own ::marker is switched off and the text one is hung instead */
/* Markers are written into the HTML as text (see core/markdown.py) and laid
   out INSIDE the item: an outside ::marker (or a negative text-indent) falls
   outside the box and gets clipped by the notes' overflow, which is how typed
   "1. 2. 3." lists ended up with no numbers. */
.md ol, .md ul { list-style: none; padding-left: 0; margin: .4em 0; }
.md li { margin: .12em 0; }
.md .li-n { color: var(--muted); margin-right: .35em; }
.md li > ol, .md li > ul { margin-left: 1.2em; }
.md h1, .md h2 { font-size: 1.1rem; border-bottom: 1px solid var(--line); padding-bottom: .3rem; }
.md h3 { font-size: .98rem; }
.md pre { background: var(--code-bg); color: var(--code-ink); padding: .8rem 1rem; border-radius: 6px;
          overflow-x: auto; font-size: .82rem; }
.md code { background: var(--gray-soft); padding: .07rem .35rem; border-radius: 4px; font-size: .86em; }
.md pre code { background: none; padding: 0; }
.md table { border-collapse: collapse; font-size: .87rem; }
.md th, .md td { border: 1px solid var(--line); padding: .3rem .6rem; }
.md blockquote { border-left: 3px solid var(--accent); margin: .6rem 0; padding: .1rem .9rem;
                 color: var(--muted); }
a.mention { background: var(--accent-soft); color: var(--accent); font-weight: 600;
            padding: .02rem .3rem; border-radius: 4px; }
a.mention:hover { text-decoration: none; filter: brightness(.95); }
.mention-pop { position: absolute; z-index: 140; background: var(--sheet); padding: .3rem;
               border: 1px solid var(--line-dark); border-radius: 8px;
               box-shadow: 0 10px 28px rgba(31,37,50,.18); max-height: 220px;
               overflow-y: auto; }
.mention-pop button { display: block; width: 100%; text-align: left; border: 0;
                      background: none; font: inherit; font-size: .87rem; cursor: pointer;
                      padding: .3rem .55rem; border-radius: 6px; white-space: nowrap; }
.mention-pop button:hover, .mention-pop button.on { background: var(--accent-soft); }

a.wikilink { background: var(--accent-soft); padding: .03rem .3rem; border-radius: 4px;
             font-weight: 550; }
a.wikilink:hover { text-decoration: none; filter: brightness(.95); }
a.wikilink-missing { background: var(--red-soft); color: var(--red); }

/* ================= Files ================= */
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .9rem; }
.file-card { background: var(--sheet); border: 1px solid var(--line); border-radius: 6px;
             overflow: hidden; display: block; }
.file-card img { width: 100%; height: 110px; object-fit: cover; display: block; }
.file-card .ficon { height: 110px; display: flex; align-items: center; justify-content: center;
                    font-size: 1.9rem; background: var(--gray-soft); }
.file-card .fmeta { padding: .45rem .65rem; font-size: .76rem; }

/* ================= Forms ================= */
form.stack label { display: block; font-weight: 600; font-size: .83rem; margin: .85rem 0 .25rem; }
form.stack label:first-child { margin-top: 0; }
input[type=text], input[type=password], input[type=url], input[type=email], input[type=search],
input[type=file], select, textarea {
  width: 100%; padding: .45rem .65rem; border: 1px solid var(--line-dark); border-radius: 6px;
  font: inherit; font-size: .9rem; background: var(--sheet); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft);
                                            border-color: var(--accent); }
textarea { font-family: ui-monospace, "Cascadia Code", Menlo, monospace; font-size: .85rem; }
.errors { color: var(--red); font-size: .85rem; }
.helptext { color: var(--muted); font-size: .77rem; display: block; margin-top: .15rem; }

/* ================= Login ================= */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center;
              background: linear-gradient(140deg, var(--brand-dark) 0%, var(--brand) 55%, #8d6180 100%); }
.login-box { background: var(--sheet); border: 1px solid var(--line); border-radius: 10px;
             padding: 2rem 2.2rem; width: 400px; color: var(--ink);
             box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.login-box h1 { margin: 0 0 .1rem; }
/* the logo carries its own white plate — round it so it reads as a plate
   and not a gap when the card behind it is dark */
.login-box img { border-radius: 8px; }

.muted { color: var(--muted); }
.empty { color: var(--muted); font-size: .87rem; padding: .4rem 0; }
.mt { margin-top: .9rem; }

/* ---- Checkbox multi-select (project sites) ---- */
/* `details.dd` sets display:inline-block, so this needs equal specificity */
details.dd.msdd { display: block; }
details.dd.msdd > summary { list-style: none; display: block; }
.msdd > summary::-webkit-details-marker { display: none; }
.msdd > summary > .btn { width: 100%; justify-content: space-between; font-weight: 400;
                         min-height: 36px; }
.msdd > summary > .btn .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msdd > summary > .btn .caret { color: var(--muted); flex-shrink: 0; }
.msdd[open] > summary > .btn { border-color: var(--accent); }
.msdd .dd-menu { left: 0; right: 0; min-width: 0; max-height: 340px; padding: .5rem; }
.msdd .ms-top { display: flex; gap: .4rem; margin-bottom: .5rem; }
.msdd .ms-top .listfilter { flex: 1; min-width: 0; margin: 0; }
.msdd .checklist { border: 0; padding: 0; max-height: 230px; overflow-y: auto; }
.msdd .checklist > div { columns: 2; }
@media (max-width: 720px) { .msdd .checklist > div { columns: 1; } }
.msdd .ms-none { color: var(--muted); font-size: .82rem; text-align: center; margin: .4rem 0 0; }
.checklist { border: 1px solid var(--line-dark); border-radius: 6px; padding: .6rem .8rem;
             max-height: 300px; overflow-y: auto; background: var(--sheet); }
.checklist > div { columns: 2; column-gap: 1.6rem; }
@media (max-width: 720px) { .checklist > div { columns: 1; } }
.checklist > div > div { break-inside: avoid; }
.listfilter { margin-bottom: .45rem; }
.checklist label { display: flex; align-items: center; gap: .45rem; font-weight: 400;
                   font-size: .88rem; margin: 0 0 .35rem; cursor: pointer; }
.checklist input[type=checkbox] { width: auto; accent-color: var(--accent); }

/* Plain (non-code) textareas */
textarea.plain { font-family: inherit; font-size: .92rem; }

/* ---- Job card statuses & priorities ---- */
.pill.open { background: var(--teal-soft); color: var(--teal); }
.pill.in_progress { background: var(--green-soft); color: var(--green); }
.pill.cancelled { background: var(--red-soft); color: var(--red); }
.pill.follow_up { background: var(--amber-soft); color: var(--amber); }
.pill.urgent { background: var(--red-soft); color: var(--red); }
.pill.high { background: var(--amber-soft); color: var(--amber); }
.pill.low, .pill.normal { background: var(--gray-soft); color: var(--gray); }
.kb-card.open { border-left-color: var(--teal); }
.kb-card.in_progress { border-left-color: var(--green); }
.kb-card.cancelled { border-left-color: var(--red); }

/* ---- Inline quick-set dropdowns ---- */
.qform { display: inline-flex; }
.qform select { width: auto; padding: .18rem 1.4rem .18rem .5rem; font-size: .82rem;
                font-weight: 550; border-radius: 6px; background: var(--sheet); cursor: pointer; }
.fval .qform select { font-size: .86rem; padding: .15rem 1.3rem .15rem .4rem; }

/* ---- Click-to-open pill/assign dropdowns ---- */
details.dd { position: relative; display: inline-block; }
details.dd > summary { list-style: none; cursor: pointer; display: inline-block; }
details.dd > summary::-webkit-details-marker { display: none; }
details.dd > summary .pill:hover, details.dd[open] > summary .pill { filter: brightness(.94); }
.dd-menu { position: absolute; top: calc(100% + 5px); left: 0; z-index: 70;
           background: var(--sheet); border: 1px solid var(--line-dark); border-radius: 8px;
           box-shadow: 0 10px 28px rgba(31,37,50,.18); padding: .35rem;
           min-width: 175px; max-height: 280px; overflow-y: auto; }
.dd-menu form { display: flex; flex-direction: column; gap: 2px; }
.dd-menu button { background: none; border: 0; text-align: left; cursor: pointer;
                  font: inherit; font-size: .85rem; padding: .3rem .5rem;
                  border-radius: 6px; white-space: nowrap; }
.dd-menu button:hover { background: var(--accent-soft); }
.dd-menu button.current { background: var(--gray-soft); }

.act-head { display: flex; align-items: baseline; gap: .8rem; margin: 1.4rem 0 .6rem; }
.act-head h3 { margin: 0; display: flex; align-items: center; gap: .45rem; font-size: 1rem; }
.act-head .muted { font-size: .82rem; }
.act-head { flex-wrap: wrap; }
.act-head .act-filter { margin-left: auto; align-self: center; }

/* ---- Appearance switch (user menu) ---- */
.theme-row { padding: .3rem .55rem .45rem; border-bottom: 1px solid var(--line);
             margin-bottom: .25rem; }
.theme-lbl { display: flex; align-items: center; gap: .4rem; color: var(--muted);
             font-size: .78rem; margin-bottom: .3rem; }
.theme-switch { display: flex; border: 1px solid var(--line-dark); border-radius: 6px;
                overflow: hidden; }
/* `.dd-menu button` sets its own look, so these need the extra class to win */
.theme-switch button.tgl { flex: 1; width: auto; background: var(--sheet); border: 0;
    padding: .25rem .1rem; font: inherit; font-size: .78rem; color: var(--muted);
    cursor: pointer; text-align: center; border-radius: 0; }
.theme-switch button.tgl + button.tgl { border-left: 1px solid var(--line-dark); }
.theme-switch button.tgl:hover { background: var(--accent-soft); color: var(--ink); }
.theme-switch button.tgl.active { background: var(--accent-bg); color: #fff; font-weight: 600; }

/* ---- Notification bell ---- */
.appbar details.bell > summary { position: relative; display: inline-flex;
    align-items: center; list-style: none; }
.appbar details.bell > summary::-webkit-details-marker { display: none; }
.bell .badge { position: absolute; top: -3px; right: -4px; min-width: 15px;
    height: 15px; padding: 0 3px; border-radius: 99px; background: var(--red);
    color: #fff; font-size: .62rem; font-weight: 700; line-height: 15px;
    text-align: center; box-sizing: border-box; }
.notif-panel { width: 340px; max-width: calc(100vw - 24px); padding: 0;
               max-height: 420px; overflow-x: hidden; overflow-y: auto; }
.notif .n-text, .notif .n-target { overflow-wrap: anywhere; }
.notif-head { display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; padding: .55rem .7rem; border-bottom: 1px solid var(--line);
    position: sticky; top: 0; background: var(--sheet); }
.notif-head b { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted); }
.notif-head .linkbtn { color: var(--accent); font-size: .76rem; }
.notif { display: flex; align-items: flex-start; gap: .3rem;
         border-bottom: 1px solid var(--line-soft); }
.notif:hover { background: var(--accent-soft); }
.appbar .notif .n-body { display: block; flex: 1; padding: .5rem .3rem .5rem .7rem;
    font-size: .84rem; line-height: 1.35; border-radius: 0; }
.appbar .notif .n-body:hover { background: none; }
.notif .n-text, .notif .n-target, .notif .n-time { display: block; }
.notif .n-target { color: var(--accent); font-weight: 600; }
.notif .n-time { color: var(--muted); font-size: .73rem; margin-top: .1rem; }
.appbar .notif form { padding: .5rem .55rem 0 0; }
.appbar .notif button.n-read { width: auto; padding: .2rem .3rem; color: var(--muted);
    border-radius: 6px; }
.appbar .notif button.n-read:hover { color: var(--green); background: var(--green-soft); }
.appbar .notif-all { display: block; text-align: center; font-size: .8rem;
    color: var(--accent); padding: .5rem; border-radius: 0; }
.notif-panel .empty { padding: 1rem .7rem; text-align: center; }

/* ---- Appbar menus (hamburger + 3-dot) ---- */
.appbar details.dd > summary { color: rgba(255,255,255,.85); font-size: 1.15rem;
    padding: .15rem .55rem; border-radius: 6px; }
.appbar details.dd > summary:hover, .appbar details.dd[open] > summary {
    background: rgba(255,255,255,.14); }
.appbar .dd-menu a, .appbar .dd-menu button { display: block; width: 100%;
    color: var(--ink); padding: .45rem .7rem; font-size: .9rem; text-align: left;
    background: none; border: 0; cursor: pointer; border-radius: 6px; font: inherit; }
.appbar .dd-menu a:hover, .appbar .dd-menu button:hover {
    background: var(--accent-soft); text-decoration: none; }
.dd-menu.dd-right { left: auto; right: 0; }
/* the burger exists only while the sidebar is hidden — see the 900px block
   below, where both are switched together. `details.dd` sets display, so this
   selector has to be at least as specific to win. */
details.dd.mobile-nav { display: none; }
/* full nav, no inner scrollbar */
.mobile-nav .dd-menu { max-height: none; overflow: visible; min-width: 210px; }
.usermenu > summary { font-weight: 700; }

/* ---- Support ticket pills ---- */
.pill.resolved { background: var(--green-soft); color: var(--green); }
/* Ticket severity = the MSA fault classification; it drives the response SLA,
   so Critical has to read at a glance. (.high / .low come from the priority
   rules above.) */
.pill.critical { background: var(--red-soft); color: var(--red); font-weight: 700; }
.pill.medium { background: var(--teal-soft); color: var(--teal); }
/* Ticket lifecycle */
.pill.new { background: var(--purple-soft); color: var(--purple); }
.pill.triaged { background: var(--teal-soft); color: var(--teal); }
.pill.waiting { background: var(--amber-soft); color: var(--amber); }
.pill.closed, .pill.rejected, .pill.duplicate { background: var(--gray-soft); color: var(--gray); }

/* ---- Mobile ---- */
/* mid-widths keep sideways scrolling for wide tables; below 760px rows become
   cards and nothing needs to scroll */
@media (min-width: 761px) and (max-width: 1000px) { .list-wrap { overflow-x: auto; } }
@media (max-width: 900px) {
  .appbar { padding: 0 .6rem; gap: .4rem; }
  .appbar nav { display: none; }
  .appbar .search { width: auto; flex: 1; min-width: 0; }
  .appbar .user .uname { display: none; }
  .control-bar { flex-wrap: wrap; gap: .4rem .8rem; padding: .5rem .7rem; }
  .control-bar .cb-right { margin-left: 0; width: 100%; justify-content: space-between; }
  .page { padding: .8rem .7rem 3rem; }
  .sheet { padding: 1rem 1rem .9rem; }
  .sheet-top { flex-direction: column; gap: .8rem; }
  .sbtns { flex-wrap: wrap; align-self: stretch; }
  .sbtn { flex: 1; min-width: 80px; }
  .frow { grid-template-columns: 112px minmax(0, 1fr); }
  .record-wrap { gap: .8rem; }
  /* narrow screens: rows become cards (see the 760px block below) */
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .entity-head .actions, .cb-actions { flex-wrap: wrap; }
  .kb { grid-auto-columns: 78vw; }
  .checklist > div { columns: 1; }
  .login-box { width: 92vw; padding: 1.4rem 1.2rem; }
}

/* ================= Sidebar shell (module nav moved off the top bar) ================= */
.shell { display: flex; min-height: 100vh; }
.sidenav { width: 208px; flex-shrink: 0; background: var(--brand); color: var(--brand-ink);
           position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
           padding: .7rem .55rem .8rem; transition: width .15s ease; overflow: hidden; }
.sidenav .brand { display: flex; align-items: center; gap: .55rem; color: #fff;
                  font-weight: 700; font-size: 1rem; padding: .25rem .55rem 1rem;
                  white-space: nowrap; }
.sidenav .brand img { background: var(--sheet); border-radius: 6px; flex-shrink: 0; }
.sidenav .brand:hover { text-decoration: none; }
.sidenav nav { display: flex; flex-direction: column; gap: 2px; }
.sidenav nav a { display: flex; align-items: center; gap: .6rem; color: rgba(255,255,255,.78);
                 padding: .48rem .6rem; border-radius: 7px; font-weight: 500;
                 font-size: .92rem; white-space: nowrap; }
.sidenav nav a:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.sidenav nav a.active { background: rgba(0,0,0,.28); color: #fff; }
.sidenav .ico { width: 1.35em; text-align: center; flex-shrink: 0; }
.collapse-btn { margin-top: auto; background: rgba(255,255,255,.1); border: 0;
                color: rgba(255,255,255,.75); border-radius: 7px; padding: .45rem .5rem;
                cursor: pointer; font: inherit; font-size: .82rem; white-space: nowrap; }
.collapse-btn:hover { background: rgba(255,255,255,.18); color: #fff; }
.collapse-btn .when-min { display: none; }

html.nav-min .sidenav { width: 58px; padding-left: .4rem; padding-right: .4rem; }
html.nav-min .sidenav .lbl { display: none; }
html.nav-min .sidenav nav a { justify-content: center; padding: .48rem .3rem; }
html.nav-min .sidenav .brand { justify-content: center; padding-left: 0; padding-right: 0; }
html.nav-min .collapse-btn .when-open { display: none; }
html.nav-min .collapse-btn .when-min { display: inline; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.main .page { flex: 1; }

/* Appbar goes light now that the sidebar carries the brand color */
.appbar { background: var(--sheet); border-bottom: 1px solid var(--line); color: var(--ink);
          gap: .6rem; }
.appbar .search { margin-left: 0; flex: 1; max-width: 480px; }
.appbar .search input { background: var(--bg); color: var(--ink);
                        border: 1px solid var(--line); }
.appbar .search input::placeholder { color: var(--muted); }
.appbar .search input:focus { background: var(--sheet); outline: 2px solid var(--accent-soft);
                              border-color: var(--accent); }
.appbar .user { margin-left: auto; color: var(--ink); }
.appbar .user a { color: var(--muted); }
.appbar .user button { color: var(--ink); }
.appbar details.dd > summary { color: var(--muted); }
.appbar details.dd > summary:hover, .appbar details.dd[open] > summary {
    background: var(--gray-soft); color: var(--ink); }
.brand-mobile { display: none; }

/* Sidebar out, burger in — these three belong together: the burger must appear
   only when the sidebar is hidden. */
@media (max-width: 900px) {
  .sidenav { display: none; }
  details.dd.mobile-nav { display: inline-block; }
  .brand-mobile { display: inline-flex; align-items: center; }
}

/* ================= Narrow screens: list rows become cards ================= */
@media (max-width: 760px) {
  /* control bar: search on its own line, filters share the next one and
     truncate rather than running off the screen */
  .cb-actions { flex: 1 1 100%; flex-wrap: wrap; row-gap: .4rem; }
  .cb-actions .lsearch { order: -2; flex: 1 1 100%; }
  /* the three filters share one line; "+ New" is pushed onto the next */
  .cb-actions .filter-dd { order: -1; flex: 1 1 30%; }
  .cb-actions > .btn { order: 5; }
  .cb-actions .filter-dd > summary, .cb-actions .filter-dd > summary > .btn { width: 100%; }
  .cb-actions .lsearch input { width: 100%; flex: 1; }

  .list-wrap { background: none; border: 0; box-shadow: none; overflow: visible; }
  table.o-list, table.o-list tbody, table.o-list tr, table.o-list td { display: block; }
  table.o-list { min-width: 0; }
  table.o-list thead { display: none; }
  table.o-list tr.group-hd td { position: static; }
  table.o-list tbody tr { background: var(--sheet); border: 1px solid var(--line);
      border-radius: 8px; box-shadow: var(--shadow); margin-bottom: .55rem;
      padding: .6rem .8rem; position: relative; }
  table.o-list tbody tr:hover { background: var(--sheet); }
  table.o-list td { border: 0; padding: .16rem 0; display: flex; gap: .6rem;
      align-items: baseline; font-size: .87rem; }
  table.o-list td code { white-space: nowrap; }   /* keep JC-0002 in one piece */
  table.o-list td::before { content: attr(data-label); flex: 0 0 78px; color: var(--muted);
      font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
      padding-top: .12rem; }
  table.o-list td.is-title { display: block; font-size: 1rem; font-weight: 600;
      margin-bottom: .3rem; padding-right: 2rem; }
  table.o-list td.is-title::before, table.o-list td.no-label::before { display: none; }
  table.o-list td.no-label { display: none; }          /* checkbox + avatar cells */
  table.o-list td.no-label.has-action { display: block; position: absolute;
      top: .5rem; right: .6rem; padding: 0; }
  table.o-list td.is-empty { display: none; }
  table.o-list td.full { display: block; text-align: center; }
  table.o-list td.full::before { display: none; }
  table.o-list .rowact { visibility: visible; }
  table.o-list tr.group-hd { background: none; border: 0; box-shadow: none;
      margin: .6rem 0 .3rem; padding: 0; }
  table.o-list tr.group-hd td { display: block; background: none; border: 0; }
  table.o-list tr.group-hd td::before { display: none; }
}

/* very narrow (folded phones): drop the filter icons so the labels fit */
@media (max-width: 430px) {
  .cb-actions .filter-dd .btn svg { display: none; }
  .cb-actions .filter-dd .btn { padding: 0 .5rem; }
}

/* ---- Live search suggestions ---- */
.sugg { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 90;
        background: var(--sheet); border: 1px solid var(--line-dark); border-radius: 10px;
        box-shadow: 0 12px 32px rgba(31,37,50,.2); overflow: hidden; }
.sugg-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem;
             color: var(--ink); font-size: .88rem; }
.sugg-item:hover, .sugg-item.active { background: var(--accent-soft); text-decoration: none; }
.sugg-item .s-ico { flex-shrink: 0; }
.sugg-item .s-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
                    white-space: nowrap; font-weight: 550; }
.sugg-item .s-kind { color: var(--muted); font-size: .74rem; text-transform: capitalize;
                     flex-shrink: 0; }

/* file view/download actions */
.file-card { cursor: pointer; }
.f-actions { font-size: .74rem; margin-top: .25rem; }

/* composer: stacked controls, contained within the card */
.c-stack { display: flex; flex-direction: column; gap: .45rem; margin-top: .55rem; }
.c-stack input[type=file] { width: 100%; font-size: .8rem; }
.c-stack select, .c-stack input[type=text] { width: 100%; font-size: .85rem; }
.c-stack .btn { justify-content: center; }
.chatter .composer { overflow: hidden; }

.linkbtn { background: none; border: 0; padding: 0; color: var(--red); cursor: pointer;
           font: inherit; font-size: inherit; }
.linkbtn:hover { text-decoration: underline; }

.f-folder { margin-bottom: 1.1rem; }
.f-folder h4 { margin: 0 0 .55rem; font-size: .85rem; display: flex; align-items: center; gap: .45rem; }

.sugg-item .s-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sugg-item .s-snip { color: var(--muted); font-size: .72rem; overflow: hidden;
                     text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }

/* mono menu icons */
.sidenav .ico svg { display: block; }
.sidenav nav a svg { flex-shrink: 0; }
.appbar .dd-menu a svg { vertical-align: -3px; margin-right: .35rem; }

/* Ticket composer: "reply to the client" makes a note public (MSA response). */
.reply-toggle { display:flex; align-items:center; gap:6px; margin:6px 0 2px;
                font-size:12px; color:var(--muted); cursor:pointer; }
.reply-toggle input { margin:0; }
.vis-pub { color: var(--green); font-weight: 600; }
.vis-int { color: var(--muted); }