/* Brand shell - a full-height charcoal navigation panel with the logo on it,
   a light band for the topbar and footer, a page ground one step deeper so
   the white cards lift, and red and orange only where they mean something:
   the active row, the buttons, the rules. Loads after drishti.css and
   overrides only what that file set for a light panel and a navy second
   colour. To return to the previous look, remove the <link> in base.html
   and login.html. */

:root {
  /* Graphite. Neutral on purpose: a warm base next to maroon reads as dried
     blood, a blue one fights the warm accents. The ground and band below sit
     on the same neutral axis, so all three surfaces agree and the red and
     orange stand against them. The Default theme then lays a two per cent
     warm wash over the panel - see .app-sidebar below. */
  --shell-bg:          #2A2C2F;
  --shell-active:      var(--thsti-maroon);
  --shell-rule-active: var(--thsti-orange);
  --shell-fg:          rgba(255, 255, 255, 0.84);
  --shell-fg-dim:      rgba(255, 255, 255, 0.50);
  --shell-hover:       rgba(255, 255, 255, 0.07);
  --shell-line:        rgba(255, 255, 255, 0.10);

  /* Three light surfaces, deepest to lightest: ground, band, card. */
  --ground:            #E6E8EB;
  --band:              #F4F5F7;
  --ground-line:       #D8DBE0;
}

body  { background: var(--ground); }
.card { border-color: var(--ground-line); }

/* Topbar and footer share the band. */
.app-topbar { background-color: var(--band); }
.app-footer { background: var(--band); border-top-color: var(--ground-line); }
.sidebar-toggle { border-color: var(--ground-line); }
.health-chip    { border-color: var(--ground-line); }
.icon-btn:hover { background: var(--thsti-surface); }

/* Chrome that sits straight on the ground has to be visible against it. */
.step-line { background: var(--ground-line); }
.step .dot { background: var(--thsti-surface); border: 1px solid var(--ground-line); }
.step.is-current .dot,
.step.is-done .dot { border-color: transparent; }

/* ---- navigation panel --------------------------------------------------- */

.app-sidebar {
  background: var(--shell-bg);
  color: var(--shell-fg);
  border-right: 0;
}

/* Default theme only: a faint, even warmth over the whole panel. One thin
   wash over the graphite, the same strength top to bottom - a touch of the
   brand orange at the head shading to the brand maroon at the foot - so
   nothing collects at one end. Maroon carries most of it: orange over a dark
   grey reads brown, maroon reads as a warm charcoal.

   This is why the base stays neutral. A warm base was tried and read as dried
   blood; two or three per cent over a neutral one does not. */
body[data-theme="dark"] .app-sidebar {
  background:
    linear-gradient(180deg,
      rgba(245, 137, 32, 0.022) 0%,
      rgba(200, 70, 45, 0.032) 50%,
      rgba(168, 37, 43, 0.038) 100%),
    var(--shell-bg);
}

/* The logo sits on the panel itself: no plate, no coloured seam. An inset
   hairline rather than a border, so the head stays exactly topbar height. */
.sidebar-head {
  background-color: transparent;
  background-image: none;
  box-shadow: inset 0 -2px 0 var(--shell-line);   /* same weight as the topbar's rule */
}

/* Sidebar foot and page footer share this height so their rules meet. */
/* Sidebar foot and page footer share this; both are one line. */
:root { --foot-h: 48px; }
/* The initials, with the full name small beneath them. */
.brand-text { display: grid; gap: 3px; }
.brand-name {
  color: #fff;
  font-size: 18px;
  letter-spacing: 0.06em;
  line-height: 1;
}
.brand-sub {
  color: var(--shell-fg-dim);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.2;
  white-space: nowrap;
}

/* In the drawer the close button takes 44px of the head, so the full name
   is allowed to run to a second line there. */
@media (max-width: 991px) {
  body .app-sidebar .sidebar-brand { padding-left: var(--sp-2); padding-right: var(--sp-3); }
  .brand-sub { white-space: normal; }
}

/* The mark is cut tight to its artwork, so it is sized by height and takes
   the width its shape needs; the head is 64px and this leaves 10px above
   and below. The rail is 72px wide, so the mark drops a step there. */
.sidebar-brand { padding: 0 var(--sp-4); gap: 10px; }
.sidebar-brand .brand-logo { height: 36px; width: auto; }
body[data-sidebar="rail"] .sidebar-brand .brand-logo { height: 34px; width: auto; }

.sidebar-nav { padding-top: var(--sp-4); }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); }

.nav-list { gap: 0; }
.nav-link {
  color: var(--shell-fg);
  font-size: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
}
body[data-sidebar="rail"] .nav-link { padding-top: 9px; padding-bottom: 9px; }
.app-sidebar .nav-group + .nav-group { margin-top: var(--sp-3); }
.nav-link:hover { background: var(--shell-hover); color: #fff; }
.nav-link .icon { opacity: 0.78; }
.nav-link:hover .icon { opacity: 1; }

.nav-link.is-active {
  background: var(--shell-active);
  border-left-color: var(--shell-rule-active);
  color: #fff;
}
.nav-link.is-active .icon { opacity: 1; }

.app-sidebar .nav-heading { color: var(--shell-fg-dim); }
.app-sidebar .nav-group-rule { background: var(--shell-line); }

.sidebar-foot { border-top: 1px solid var(--shell-line); }
.btn-ghost-light {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--shell-fg);
}
.btn-ghost-light:hover {
  background: var(--shell-hover);
  border-color: rgba(255, 255, 255, 0.38);
  color: #fff;
}

/* ---- red where the system used navy as a second chrome colour -----------
   Navy keeps the jobs where it means something - information, work in
   progress - and leaves the chrome. */

/* Table headers carry the brand as a rule under ink text, not as a dark red
   band - a block of maroon on every list was the heaviest red on the page. */
.table-navy thead tr { background: var(--thsti-surface); }
.table-navy thead th {
  color: var(--thsti-text);
  border-bottom: 2px solid var(--thsti-maroon);
}
.table-navy.table-stickycol thead th:first-child { background: var(--thsti-surface); }

.btn-primary:hover,
.btn-primary:active { background: var(--thsti-maroon-dark); border-color: var(--thsti-maroon-dark); }
.btn-quiet:hover { border-color: var(--thsti-maroon); color: var(--thsti-maroon); }
.tab:hover { color: var(--thsti-maroon); }
.pager button:hover:not(:disabled) { border-color: var(--thsti-maroon); color: var(--thsti-maroon); }
.dropdown-menu .menu-item:hover { color: var(--thsti-maroon); }
.icon-btn:hover { color: var(--thsti-maroon); }
.linkish:hover { color: var(--thsti-maroon-dark); }
a:hover { color: var(--thsti-maroon-dark); }

/* Card titles in ink, not navy: the maroon icon beside them is the accent. */
.card-head h3 { color: var(--thsti-text); font-size: 17px; }

.input:focus, .select:focus, .textarea:focus {
  border-color: var(--thsti-maroon);
  box-shadow: 0 0 0 3px var(--thsti-maroon-100);
}
.outstanding > summary:focus-visible { outline-color: var(--thsti-maroon); }
.query-detail > summary { color: var(--thsti-maroon); }
.preview-box { border-left-color: var(--thsti-maroon); }

/* ================================================================= themes
   Three, chosen in the profile menu or the sidebar foot and kept in this
   browser (vts/js/theme.js). One attribute on <body>:

     data-theme="dark"   the graphite panel above, with the light page (default)
     data-theme="light"  a light panel with the light page
     data-theme="night"  everything dark, for low light (vts/css/night.css)

   Default and Light differ in the navigation panel only; the topbar, ground
   and content are the same in both. Most of the panel reads the --shell-*
   tokens, so Light is mainly a reassignment of those, plus the handful of
   rules above that spell white out for a dark panel.
   ========================================================================= */

body[data-theme="light"] {
  --shell-bg:     #F8F6F6;                      /* warm off-white, not #fff */
  --shell-fg:     var(--thsti-text);
  --shell-fg-dim: var(--thsti-text-2nd);
  --shell-hover:  rgba(168, 37, 43, 0.06);
  --shell-line:   var(--thsti-border);
}

body[data-theme="light"] .app-sidebar { border-right: 1px solid #D7DADE; }

/* The panel's own segment of the topbar's rule: solid maroon, so the panel
   still reads as a distinct surface without a dark ground to separate it. */
body[data-theme="light"] .sidebar-head {
  box-shadow: none;
  background-image: linear-gradient(var(--thsti-maroon), var(--thsti-maroon));
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: bottom left;
}

body[data-theme="light"] .brand-name { color: var(--thsti-maroon); }
body[data-theme="light"] .brand-sub  { color: var(--thsti-text-2nd); }

body[data-theme="light"] .nav-link:hover { color: var(--thsti-maroon); }
body[data-theme="light"] .nav-link .icon { opacity: 0.6; }
body[data-theme="light"] .nav-link:hover .icon,
body[data-theme="light"] .nav-link.is-active .icon { opacity: 1; }
body[data-theme="light"] .nav-link.is-active { color: #fff; }

body[data-theme="light"] .sidebar-nav::-webkit-scrollbar-thumb { background: var(--thsti-disabled); }

body[data-theme="light"] .btn-ghost-light {
  border-color: var(--thsti-border);
  color: var(--thsti-text-2nd);
}
body[data-theme="light"] .btn-ghost-light:hover {
  background: var(--thsti-maroon-100);
  border-color: var(--thsti-maroon-300);
  color: var(--thsti-maroon);
}

/* ---- the two controls ---------------------------------------------------- */

/* In the profile menu: a three-part segmented control. */
.dropdown-menu .menu-group { padding: 4px 10px 6px; }
.dropdown-menu .menu-group .menu-label {
  margin-bottom: 6px;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--thsti-text-2nd);
}
.theme-switch {
  display: flex;
  /* wider than the menu's own 210px, so three labels never crush */
  min-width: 232px;
  border: 1px solid var(--thsti-border);
  border-radius: var(--r-1);
  overflow: hidden;
}
.theme-opt {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 6px;
  background: var(--thsti-surface);
  border: 0;
  font-family: var(--thsti-font-body);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--thsti-body);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.theme-opt + .theme-opt { border-left: 1px solid var(--thsti-border); }
/* never squeezed by a longer label */
.theme-opt .icon { width: 14px; height: 14px; flex: 0 0 auto; }
.theme-opt:hover { background: var(--thsti-panel); color: var(--thsti-maroon); }
.theme-opt[aria-checked="true"] { background: var(--thsti-maroon); color: #fff; cursor: default; }

/* In the sidebar foot, beside Sign out: one quiet button showing the theme it
   will switch to, so the choice is one click from every page. */
.sidebar-foot { gap: var(--sp-2); }
/* layout.css leaves the line-height to the body's 1.6, which made this
   button six pixels taller than the icon-only one beside it. */
.btn-ghost-light { padding: 7px var(--sp-3); line-height: 1.2; }
.sidebar-foot > .btn-ghost-light { flex: 1 1 auto; width: auto; min-width: 0; }
.sidebar-foot > .theme-toggle { flex: 0 0 auto; padding-left: 9px; padding-right: 9px; }
.theme-toggle .icon { width: 16px; height: 16px; }

/* One icon at a time: whichever theme the button moves to next. */
.app-sidebar .theme-toggle .icon { display: none; }
body[data-theme="dark"]  .app-sidebar .theme-toggle .when-dark,
body[data-theme="light"] .app-sidebar .theme-toggle .when-light,
body[data-theme="night"] .app-sidebar .theme-toggle .when-night { display: block; }

/* 72px holds one button across, so the two stack. */
body[data-sidebar="rail"] .sidebar-foot {
  flex-direction: column; align-items: stretch; gap: 6px; padding: 8px var(--sp-4);
}
body[data-sidebar="rail"] .sidebar-foot > .btn-ghost-light { flex: 0 0 auto; width: 100%; }
body[data-sidebar="rail"] .btn-ghost-light { padding: 7px 0; }

/* The drawer shows full labels, so the foot goes back to one row. */
@media (max-width: 991px) {
  body[data-sidebar="rail"] .sidebar-foot {
    flex-direction: row; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-4);
  }
  body[data-sidebar="rail"] .sidebar-foot > .btn-ghost-light { flex: 1 1 auto; width: auto; }
  body[data-sidebar="rail"] .btn-ghost-light { padding: 7px var(--sp-3); }
  body[data-sidebar="rail"] .sidebar-foot > .theme-toggle {
    flex: 0 0 auto; padding-left: 9px; padding-right: 9px;
  }
}

/* ---- page heading in the page, not the topbar ---------------------------
   Title and its one-line explanation read as a unit; an action, if the page
   has one, sits to the right on the same baseline. */

.page-head {
  align-items: flex-end;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.page-head .page-title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.page-head .sub {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  max-width: none;   /* one-line explanations, not paragraphs - let them run */
}

/* ---- two cards side by side ---------------------------------------------
   vts.css spaces stacked cards with `.card + .card { margin-top }`. In a grid
   the second card is still an adjacent sibling, so it was pushed a gutter down
   and stretched a gutter shorter than the first.

   Equal height is only half of it: the scrolling panes then fill the card
   instead of leaving it part empty. The cap moves from the pane to the card,
   so the row cannot grow without bound. */

.grid > .card + .card { margin-top: 0; }
.grid > .card { display: flex; flex-direction: column; max-height: 700px; }
.grid > .card > .card-body.flush { flex: 1 1 auto; min-height: 0; display: flex; }
.grid > .card .scroll-560,
.grid > .card .console-tall {
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

/* ---- warning words need a darker ink ------------------------------------
   #F58920 is the accent orange: right for a rule or a bar, too light for a
   word on white. Anything that spells out a warning uses this instead. */

:root { --warn-ink: #99510B; }

.summary-table .row-attention .row-name,
.row-status.is-warn,
.activity-item.is-warn,
.status-cell .detail.is-warn,
.kpi-value.is-warning,
.status-table .is-warning,
.pill-warning { color: var(--warn-ink); }

/* One lone text box reads as a box; with the icon it reads as a search. */
.card-body .filterbar .input-icon { flex: 1 1 auto; min-width: 0; }

/* A line under a table saying what the table covers. */
.table-note { margin: 0; font-size: var(--fs-xs); color: var(--thsti-text-2nd); }

/* ---- type: one step larger throughout -----------------------------------
   The scale lives in the tokens, so most of the interface follows these
   five. The components below set a literal size and are lifted to match. */

:root {
  --fs-body:    16px;
  --fs-sm:      15px;
  --fs-xs:      14px;
  --fs-label:   13px;
  --fs-section: 21px;
}

.empty h4                  { font-size: 17px; }
.topbar-title .name        { font-size: 18px; }
.topbar-title .crumb       { font-size: 12px; }
.user-btn .who             { font-size: 14px; }
.user-btn .role            { font-size: 12px; }
.app-sidebar .nav-heading  { font-size: 11.5px; }
.step .dot                 { font-size: 12px; }
.tab .count                { font-size: 12px; }
.summary-grid .label       { font-size: 11.5px; }
.summary-grid .value       { font-size: 16px; }
.summary-grid .value.small { font-size: 13px; }
.dropzone-text strong      { font-size: 17px; }
.file-name .secondary,
.status-cell .detail       { font-size: 12px; }

@media (max-width: 640px) {
  .topbar-title .name { font-size: 16px; }
}