/* Dutch Oriental — admin brand theme (variable-driven). Lives in an app
   static dir so whitenoise ManifestStaticFilesStorage collects it. */

:root {
  --body-fg: #1A2B48; --body-bg: #FAF8F4; --body-quiet-color: #6B6257;
  --body-medium-color: #4A5464; --body-loud-color: #10203A;
  --primary: #006873; --secondary: #006873; --primary-fg: #FFFFFF; --accent: #C49A82;
  --header-color: #9FD9D2; --header-branding-color: #FFFFFF; --header-bg: #006873;
  --header-link-color: #FFFFFF;
  --breadcrumbs-fg: #55493C; --breadcrumbs-link-fg: #006873; --breadcrumbs-bg: #F1EDE7;
  --link-fg: #006873; --link-hover-color: #00918E; --link-selected-fg: #00565F;
  --hairline-color: #F0EBE3; --border-color: #E4DED6; --darkened-bg: #F4F1EB;
  --selected-bg: #EFEAE2; --selected-row: #FFF6E6;
  --button-fg: #FFFFFF; --button-bg: #006873; --button-hover-bg: #00918E;
  --default-button-bg: #006873; --default-button-hover-bg: #00918E;
  --object-tools-fg: #FFFFFF; --object-tools-bg: #8A6A55; --object-tools-hover-bg: #6E5343;
  --message-success-bg: #E4F3EC; --message-warning-bg: #FBF0DC; --message-error-bg: #FBE9E7;
  --font-family-primary: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --dom-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --body-fg: #1A2B48; --body-bg: #FAF8F4; --body-quiet-color: #6B6257;
    --header-bg: #006873; --header-branding-color: #FFFFFF;
    --breadcrumbs-bg: #F1EDE7; --breadcrumbs-fg: #55493C;
    --hairline-color: #F0EBE3; --border-color: #E4DED6; --darkened-bg: #F4F1EB;
    --selected-bg: #EFEAE2; --selected-row: #FFF6E6;
    --primary: #006873; --secondary: #006873; --link-fg: #006873;
  }
}


/* ==========================================================================
   THE WORKING PALETTE — bold and bright, for figures and charts.

   Vikas, 14 October 2026: *"we needto use more colors for dashboard"*. He is
   right and the dashboard proved it: fifteen colours on that screen, thirteen
   of them grey-green, so every number carried the same weight and nothing read
   at a glance. The teal and sand above stay — they are the brand and they are
   the CHROME: headers, rails, panels. These are different: they are what the
   DATA wears, and data has to be told apart across a room on a laptop screen.

   THE EIGHT ARE IN A FIXED ORDER AND NEVER CYCLED. The order is the
   colour-blindness safety mechanism, not decoration: about one man in twelve
   cannot tell certain pairs apart, and this office has twenty-seven people on
   these screens. Validated against this platform's own surfaces --- worst
   adjacent pair 9.1 ΔE under protanopia, 19.6 to normal vision, both clear of
   the floor --- in light AND in dark. Do not insert, reorder or invent a
   ninth: a ninth series folds into "Other" or the chart is split.

   STATUS COLOURS ARE NOT SERIES COLOURS. Paid, balance, cancelled and
   no-show mean the same thing on every screen and are never reused for
   "the fourth boat". They always travel with a word, never colour alone.
   ========================================================================== */
:root {
  /* The data series, in order. Boats, cruises, agents, months. */
  --c1: #2a78d6;   /* blue    */
  --c2: #eb6834;   /* orange  */
  --c3: #1baf7a;   /* aqua    */
  --c4: #eda100;   /* yellow  */
  --c5: #e87ba4;   /* magenta */
  --c6: #008300;   /* green   */
  --c7: #6250d6;   /* violet  */
  --c8: #e34948;   /* red     */

  /* One hue, light to dark, for a quantity: a day grid, a heat column. */
  --seq-1: #cde2fb; --seq-2: #9ec5f4; --seq-3: #6da7ec;
  --seq-4: #3987e5; --seq-5: #256abf; --seq-6: #184f95; --seq-7: #0d366b;

  /* State. Fixed, never themed, never a series. */
  --good:     #0ca30c;   /* paid, settled, aboard      */
  --warning:  #fab219;   /* balance to collect, held   */
  --serious:  #ec835a;   /* needs checking, part paid  */
  --critical: #d03b3b;   /* cancelled, refused, over   */
  --gone:     #898781;   /* no-show, not operated      */

  /* Chart chrome. Recessive on purpose: the data is the only loud thing. */
  --ink-1: #13303a; --ink-2: #52514e; --ink-muted: #898781;
  --grid: #e1e0d9; --axis: #c3c2b7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500;
    --c5: #d55181; --c6: #008300; --c7: #9085e9; --c8: #e66767;
    --ink-1: #f0efec; --ink-2: #c3c2b7;
    --grid: #2c2c2a; --axis: #383835;
  }
}
:root[data-theme="dark"] {
  --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500;
  --c5: #d55181; --c6: #008300; --c7: #9085e9; --c8: #e66767;
  --ink-1: #f0efec; --ink-2: #c3c2b7;
  --grid: #2c2c2a; --axis: #383835;
}

/* THE SAME WORD IS THE SAME COLOUR ON EVERY SCREEN. Until now "cancelled" was
   one red on the booking sheet, another on the gangway and a third on the
   manifest. A pill carries its word; the colour is the second channel. */
.dom-state { display:inline-block; padding:.12em .6em; border-radius:999px;
  font-size:.82em; font-weight:700; letter-spacing:.02em; white-space:nowrap;
  border:1px solid transparent }
.dom-state.paid      { background:#E6F6E6; border-color:#9FD99F; color:#076B07 }
.dom-state.balance   { background:#FEF4DC; border-color:#F3D89A; color:#7A5600 }
.dom-state.check     { background:#FDEDE4; border-color:#F3C3AB; color:#8A3E1B }
.dom-state.cancelled { background:#FBE6E6; border-color:#EBAFAF; color:#8E2222 }
.dom-state.gone      { background:#F0F0EE; border-color:#D5D4CF; color:#55544F }
.dom-state.upcoming  { background:#E7F1FB; border-color:#AFCDF0; color:#1B4C86 }

#header { padding: 14px 24px; border-bottom: 3px solid var(--accent); }
#branding h1, #branding h1 a:link, #branding h1 a:visited, #site-name, #site-name a {
  font-family: var(--dom-display); font-weight: 300; font-size: 23px;
  letter-spacing: 2px; color: #FFFFFF;
}
#content h1, .colM h1 {
  font-family: var(--dom-display); font-weight: 400; font-size: 26px; color: #006873;
}
.module h2, .module caption, .inline-group h2 {
  background: #006873; font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: #FFFFFF;
}
.module { border-radius: 6px; overflow: hidden; }
.button, input[type=submit], input[type=button], .submit-row input, a.button {
  border-radius: 4px; font-weight: 700;
}

/* ==========================================================================
   EXCEL'S TICK BOXES, IN EVERY COLUMN FILTER ON EVERY SCREEN.

   Vikas, 10 October 2026: *"can you put a tick box same as excel next to the
   list so user can tick which ones to select"*, and then *"this tick box
   apply in all tables in all screen in the entire program"*.

   Tabulator marks a chosen item in a filter list with a class and a
   highlight and nothing else, so on a column like STATUS there was no way to
   see at a glance which of CHECK, CANCELLED and BALANCE were on -- you had
   to read the shading. The box is drawn from that same `active` class, so it
   follows every tick with no script and nothing to redraw.

   IT LIVES HERE, not in a sheet, because the list is appended to <body> by
   Tabulator and this stylesheet is on every admin page. The booking sheet,
   the import preview, the farm sheets and anything built after them get it
   without being touched.
   ========================================================================== */
.tabulator-edit-list-item { position: relative; padding-left: 2.1em !important; }
.tabulator-edit-list-item::before {
  content: ""; position: absolute; left: .62em; top: 50%; margin-top: -.53em;
  width: 1.06em; height: 1.06em; box-sizing: border-box;
  border: 1px solid #9fb0ae; border-radius: 3px; background: #fff;
}
.tabulator-edit-list-item.active::before {
  background: #1f3864; border-color: #1f3864;
}
.tabulator-edit-list-item.active::after {
  content: ""; position: absolute; left: 1.02em; top: 50%; margin-top: -.38em;
  width: .28em; height: .6em;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* A group header in a grouped list is not a value and takes no box. */
.tabulator-edit-list-group::before,
.tabulator-edit-list-group::after { content: none; }
.tabulator-edit-list-group { padding-left: .7em !important; }