/**
 * SCANADO s5o-base.css — SHARED base stylesheet for OMS (backend) and OMC
 * (customer portal). This file is kept BYTE-IDENTICAL in both repos (copied by
 * hand for now). It holds only what both portals share; system-specific rules
 * live in oms.css / omc.css. All classes use the neutral `s5o-` prefix.
 *
 * OMS is the reference: shared rules are extracted from OMS and OMC follows.
 *
 * Contents (grows as more is unified):
 *   - Web fonts (@font-face) + font tokens (--s5o-f-*)
 *   - Base typography (html/body, headings, pre/code, strong)
 *   - Sidebar design tokens (--s5o-sidebar-*)
 *   - Sidebar chrome (#s5o-sidebar frame, .item, accordion nav, user section)
 *   - Sidebar responsive layout (desktop fixed / mobile toggle)
 *
 * NOT here (stays system-specific): the brand/header block inside the sidebar
 * (logo + subtitle differs per portal), colour tokens (OMS and OMC still use
 * different colour sets), and each portal's own components.
 *
 * Both portals use the same asset schema (/assets/ext/fonts/…), so this file is
 * now fully byte-identical in both repos — copy it verbatim, no per-copy edits.
 */

/* ==========================================================================
   FONTS
   ========================================================================== */
@font-face {
  font-family: "ScanadoSans";
  src:
    local(""),
    url("/assets/ext/fonts/Bould/Bould-Medium.woff2?v19a") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ScanadoSans";
  src:
    local(""),
    url("/assets/ext/fonts/Bould/Bould-Bold.woff2?v19a") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ScanadoMono";
  src:
    local(""),
    url("/assets/ext/fonts/Bould/Bould-Regular.woff2?v19a") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ScanadoMono";
  src:
    local(""),
    url("/assets/ext/fonts/Bould/Bould-Bold.woff2?v19a") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   FONT TOKENS
   ========================================================================== */
:root {
  --s5o-f-text: "ScanadoSans", sans-serif;
  --s5o-f-text-mono: "ScanadoMono", monospace;
  --s5o-f-mono: "ScanadoMono", monospace;
}

/* ==========================================================================
   COLOUR TOKENS — mirror Fomantic UI's palette (see build/fomantic-custom/
   src/site/globals/site.variables). These are for OWN .s5o-* elements, which
   are NOT Fomantic components (Fomantic components get their colours from LESS
   at build time). Same values here → custom CSS matches Fomantic. If a colour
   changes, change it in site.variables AND here.
   ========================================================================== */
:root {
  --s5o-c-fui-blue:   #2185D0;  /* @blue   — primary / links */
  --s5o-c-fui-green:  #21BA45;  /* @green  — success         */
  --s5o-c-fui-orange: #F2711C;  /* @orange — warning         */
  --s5o-c-fui-red:    #DB2828;  /* @red    — error           */
  --s5o-c-fui-teal:   #00B5AD;  /* @teal   — secondary       */
  --s5o-c-fui-purple: #A333C8;  /* @purple — credit note     */

  --s5o-c-text:       #333333;  /* @textColor       */
  --s5o-c-text-light: #666666;  /* @lightTextColor  */
  --s5o-c-text-muted: #999999;  /* @mutedTextColor  */

  --s5o-c-border:     #E0E0E0;  /* @borderColor     */
  --s5o-c-bg:         #F8F9FA;  /* page / @offWhite */
  --s5o-c-bg-dark:    #1B1C1D;  /* @black           */

  /* Domain — NOT a Fomantic colour (stable business meaning):
     a credit/balance in the customer's favour is BLUE (their money),
     a debt/negative amount is RED. Intentionally not Fomantic green/red. */
  --s5o-c-money-positive: #2196F3;  /* credit → blue */
  --s5o-c-money-negative: #F44336;  /* debt   → red  */
}

/* ==========================================================================
   BASE TYPOGRAPHY
   ========================================================================== */
html,
body {
  font-family: var(--s5o-f-text), sans-serif;
  font-feature-settings: "tnum" !important;
  font-size: 16px;
  font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
p {
  font-family: var(--s5o-f-text), sans-serif;
}

pre,
code,
samp {
  font-family: var(--s5o-f-mono), monospace;
}

b,
strong {
  font-weight: 600;
}

/* ==========================================================================
   SIDEBAR — DESIGN TOKENS
   ========================================================================== */
:root {
  /* Sidebar transparency palette */
  --s5o-sidebar-hover: rgba(255, 255, 255, 0.05);
  --s5o-sidebar-active: rgba(255, 255, 255, 0.08);
  --s5o-sidebar-highlight: rgba(255, 255, 255, 0.1);
  --s5o-sidebar-border: rgba(255, 255, 255, 0.06);
  --s5o-sidebar-text: rgba(255, 255, 255, 0.85);
  --s5o-sidebar-text-dim: rgba(255, 255, 255, 0.8);
  --s5o-sidebar-text-muted: rgba(255, 255, 255, 0.6);
  --s5o-sidebar-text-faint: rgba(255, 255, 255, 0.5);
  --s5o-sidebar-overlay: rgba(0, 0, 0, 0.15);

  /* Layout */
  --s5o-sidebar-width: 260px;
  --s5o-sidebar-bg: #1b1c1d;
  --s5o-mobile-topbar-height: 50px;
  --s5o-footer-height: 2.75rem;   /* 44px */
}

/* ==========================================================================
   SIDEBAR — CHROME  (frame, items, accordion nav, user section)
   The brand/header block (logo + subtitle) is NOT here — it differs per portal
   and lives in oms.css / omc.css.
   ========================================================================== */
#s5o-sidebar {
  background-color: var(--s5o-sidebar-bg) !important;
  width: var(--s5o-sidebar-width) !important;
  overflow-y: auto;
  z-index: 1000;
  display: flex !important;
  flex-direction: column;
}

#s5o-sidebar .item.active {
  background-color: var(--s5o-sidebar-active) !important;
}

#s5o-sidebar .item:hover {
  background-color: var(--s5o-sidebar-hover) !important;
}

#s5o-sidebar .item i.icon {
  margin-right: 0.5em;
}

#s5o-sidebar .ui.divider.inverted {
  border-top-color: var(--s5o-sidebar-highlight);
  margin: 0.5rem 0;
}

/* Sidebar: Accordion sections */
#s5o-sidebar .s5o-nav-accordion {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0;
}

#s5o-sidebar .s5o-nav-accordion .title {
  color: var(--s5o-sidebar-text) !important;
  padding: 0.85rem 1.15rem !important;
  font-size: 0.95rem;
  border-top: 1px solid var(--s5o-sidebar-border);
  cursor: pointer;
}

#s5o-sidebar .s5o-nav-accordion .title:first-child {
  border-top: none;
}

#s5o-sidebar .s5o-nav-accordion .title:hover {
  background-color: var(--s5o-sidebar-hover);
}

#s5o-sidebar .s5o-nav-accordion .title .dropdown.icon {
  float: right;
  margin-right: 0;
}

#s5o-sidebar .s5o-nav-accordion .title i.icon:not(.dropdown) {
  margin-right: 0.5em;
}

#s5o-sidebar .s5o-nav-accordion .content {
  padding: 0 !important;
  background: var(--s5o-sidebar-overlay);
}

#s5o-sidebar .s5o-nav-accordion .content .item {
  padding: 0.7rem 1.15rem 0.7rem 2.5rem !important;
  color: var(--s5o-sidebar-text-dim) !important;
  display: block;
  font-size: 0.9rem;
}

#s5o-sidebar .s5o-nav-accordion .content .item:hover {
  background-color: var(--s5o-sidebar-hover) !important;
  color: white !important;
}

#s5o-sidebar .s5o-nav-accordion .content .item.active {
  background-color: var(--s5o-sidebar-highlight) !important;
  color: white !important;
}

/* Sidebar: User section (pushed to bottom via flexbox) */
#s5o-sidebar .user-section-wrapper {
  margin-top: auto;
  border-top: 1px solid var(--s5o-sidebar-highlight);
}

#s5o-sidebar .user-section-meta {
  font-size: 0.75rem;
  color: var(--s5o-sidebar-text-faint);
}

/* Mobile top bar — hidden on desktop, shown in the mobile media query below.
   Same structure in both portals; portal-specific bits (logo size) stay in
   oms.css / omc.css. */
.s5o-mobile-topbar {
  display: none !important;
}

/* ==========================================================================
   SIDEBAR — RESPONSIVE LAYOUT  (desktop fixed / mobile toggle)
   ========================================================================== */
@media (min-width: 769px) {
  body.has-sidebar {
    padding-left: var(--s5o-sidebar-width);
  }

  body.has-sidebar .ui.container:not(.fluid) {
    width: auto !important;
    max-width: none !important;
    margin-left: 2rem !important;
    margin-right: 2rem !important;
  }

  #s5o-sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh !important;
    transform: none !important;
    visibility: visible !important;
  }

  .pusher {
    transform: none !important;
    min-height: 100vh;
  }

  body.has-sidebar #s5o-footer {
    left: var(--s5o-sidebar-width);
  }
}

@media (max-width: 768px) {
  .s5o-mobile-topbar {
    display: flex !important;
    height: var(--s5o-mobile-topbar-height);
    z-index: 999;
  }

  body.has-sidebar {
    padding-left: 0;
    padding-top: var(--s5o-mobile-topbar-height);
  }

  #s5o-sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh !important;
    transform: translate3d(-100%, 0, 0);
    visibility: hidden;
    transition:
      transform 0.3s ease,
      visibility 0.3s ease;
  }

  #s5o-sidebar.visible {
    transform: translate3d(0, 0, 0) !important;
    visibility: visible !important;
  }
}

/* ==========================================================================
   FONT AWESOME × FOMANTIC RECONCILIATION
   Every icon carries BOTH a FA style class (fa-light/fa-brands) AND Fomantic's
   `.icon` class. We keep `.icon` because Fomantic components (button, input,
   label, menu) select their icon *structurally* via `> .icon` to size/position
   it — dropping it would break those layouts. But `.icon` forces
   `font-family: icons` + weight 400, which under FA7 renders a tofu box; so we
   re-assert the FA font + weight for the combined elements. Loaded after
   semantic.min.css and FA7, so this wins. Legacy `fal`/`fab` matched too.
   ========================================================================== */
i.fa-light.icon, i.fal.icon,
i.fa-brands.icon, i.fab.icon { width: 1.25em; }
i.fa-light.icon, i.fal.icon { font-family: "Font Awesome 7 Pro" !important; font-weight: 300 !important; }    /* light */
i.fa-brands.icon, i.fab.icon { font-family: "Font Awesome 7 Brands" !important; font-weight: 400 !important; } /* brands */

/* ==========================================================================
   FOMANTIC UI OVERRIDES — minimal tweaks to Fomantic defaults that can't be
   configured via classes.
   ========================================================================== */
.ui.menu {
  font-family: var(--s5o-f-text), sans-serif;
}

.ui.table thead th {
  font-size: 0.85em;
  line-height: 1.2em;
}

table.ui td.id {
  font-size: 80%;
}

.ui[class*="very compact"].table > tbody > tr > td,
.ui[class*="very compact"].table > tfoot > tr > td,
.ui[class*="very compact"].table > tr > td {
  padding: 0 0.6em;
}

pre code {
  font-family: var(--s5o-f-mono), monospace;
  padding: 0;
  font-size: 0.8rem;
  line-height: 0.8rem;
  white-space: pre-wrap;
}

/* Reduce flag spacing */
i.flag:not(.icon)::before {
  content: "\00A0\00A0\00A0" !important;
  background-position: left center !important;
}

/* ==========================================================================
   BREADCRUMB  (own container above the content — see page-skeleton doc)
   ========================================================================== */
.s5o-breadcrumb {
  padding: 0.25rem 0 1rem;
}

.s5o-breadcrumb .ui.divider {
  margin: 0.5rem 0;
}

.s5o-breadcrumb .breadcrumb .section {
  color: var(--s5o-c-text-muted);
}

.s5o-breadcrumb .breadcrumb a.section:hover {
  color: var(--s5o-c-fui-blue);
}

.s5o-breadcrumb .breadcrumb .active.section {
  color: var(--s5o-c-text);
  font-weight: 600;
}

/* ==========================================================================
   FOOTER  (#s5o-footer, fixed dark bar). Height + sidebar offset are shared;
   the desktop `left: sidebar-width` offset is in the sidebar responsive block.
   ========================================================================== */
#s5o-footer {
  background-color: var(--s5o-sidebar-bg) !important;
  padding: 0.6rem 1.25rem !important;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--s5o-footer-height);
  margin: 0 !important;
}

#s5o-footer .footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#s5o-footer .footer-left,
#s5o-footer .footer-right {
  color: var(--s5o-sidebar-text-muted);
  font-size: 0.85rem;
}

#s5o-footer .footer-right a {
  color: var(--s5o-sidebar-text-muted);
}

#s5o-footer .footer-right a:hover {
  color: #fff;
}

#s5o-footer .footer-sep {
  margin: 0 0.4rem;
  opacity: 0.4;
}

#s5o-footer .commit-hash,
#s5o-footer #doy-badge {
  color: var(--s5o-sidebar-text-faint);   /* 0.5 — a dezent technical detail */
  font-family: var(--s5o-f-text-mono), monospace;
  font-size: 0.85em;
}

/* Keep page content clear of the fixed footer. OMC has #main-content; OMS uses
   a .s5o-spacer-footer element until its content wrapper gets an id. Both are
   kept so the spacing works in each portal. */
#main-content {
  padding-bottom: calc(var(--s5o-footer-height) + 2rem) !important;
}

.s5o-spacer-footer {
  padding-bottom: calc(var(--s5o-footer-height) + 1rem);
}