/* TEUgrid brand layer (brand guide v1.0, 06.10.2026), co-branded for Luka Rijeka.
   Loaded last (app.js on app pages, linked directly on the login page) so it wins over
   the Bootstrap/daisyUI/hx bundles without rebuilding them.

   The guide splits the theme in two:
   - customer sets primary + secondary colour and the logo (here: Luka Rijeka navy and teal);
   - TEUgrid fixes neutrals, status colours, typefaces, radius, focus ring and the "Powered by" stamp.
   Words use the device's own UI font (Segoe UI / SF Pro / Roboto); JetBrains Mono is for codes, numbers,
   dates, times and plates; Archivo only draws the TEUgrid wordmark. Mono + Archivo are loaded by a <link>
   in base.html.twig / login.html.twig / pdf/base.html.twig. */

:root {
  /* customer theme: Luka Rijeka (teal on navy is 4.7 : 1, so the secondary is used as given) */
  --tg-primary: #20307A;
  --tg-primary-deep: #17204F;
  --tg-secondary: #00ADEF;

  /* TEUgrid fixed */
  --tg-steel: #1C3440;
  --tg-yellow: #F5B800;
  --tg-n100: #F4F5F5;
  --tg-n200: #E6E9EA;
  --tg-n300: #CDD3D5;
  --tg-n500: #7C878C;
  --tg-n600: #5A656A;
  --tg-n700: #3E474C;
  --tg-n900: #14181B;
  --tg-available: #1B7A43;
  --tg-occupied: #2B5CC8;
  --tg-damaged: #C8352B;
  --tg-hold: #7A4FC4;
  --tg-blocked: #3E474C;

  --tg-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --tg-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* hx variables the existing styles already read */
  --font-family-default: var(--tg-font);
  --font-family-body: var(--tg-font);
  --font-family-ui: var(--tg-font);
  --font-family-heading: var(--tg-font);
  --font-family-mono: var(--tg-font-mono);
}

/* daisyUI 4 theme variables (oklch "L C H"). The hx bundle defines them on .hx, so that is targeted too;
   every btn-*, badge-*, alert-* then follows the brand. */
:root, [data-theme], .hx {
  --p: 34.50% 0.1272 269.29;   /* primary = customer navy */
  --pc: 100% 0 0;
  --s: 70.56% 0.1495 234.92;   /* secondary = customer teal */
  --sc: 20.61% 0.0086 240.33;
  --a: 81.64% 0.1675 84.40;    /* accent = Gantry Yellow (never as text on light) */
  --ac: 20.61% 0.0086 240.33;
  --n: 31.10% 0.0369 231.37;   /* neutral = TEUgrid Steel */
  --nc: 96.94% 0.0011 197.14;
  --su: 51.24% 0.1215 152.66;  /* status: available */
  --suc: 100% 0 0;
  --in: 50.58% 0.1768 263.16;  /* status: occupied */
  --inc: 100% 0 0;
  --er: 55.33% 0.1855 28.60;   /* status: damaged */
  --erc: 100% 0 0;
  --b2: 96.94% 0.0011 197.14;  /* N100 */
  --b3: 93.20% 0.0035 219.53;  /* N200 */
  --bc: 20.61% 0.0086 240.33;  /* N900 */
  --rounded-box: 4px;
  --rounded-btn: 4px;
  --rounded-badge: 4px;
  --tab-radius: 4px;
}

/* ---- Type ---- */
body, .hx, .btn, input, select, textarea, button { font-family: var(--tg-font); }
body { color: var(--tg-n900); -webkit-font-smoothing: antialiased; }
:is(h1, h2, h3, .h1, .h2, .card-title, .lh .lh-title) { font-family: var(--tg-font); }
code, kbd, pre, .font-mono, .ctx .ctx-value, .ctx .ctx-copy.tooltip { font-family: var(--tg-font-mono); }

/* ---- Surfaces: flat, 1 px borders, 4 px corners, no drop shadows ---- */
.content_down { background: var(--tg-n100); }
.content_down .card,
.content_down .d-flex.align-items-center:has(> h1.me-3.mb-0),
.lh {
  border: 1px solid var(--tg-n300);
  border-radius: 4px;
  box-shadow: none;
}
.content_down .d-flex.align-items-center:has(> h1.me-3.mb-0):has(+ .card) { border-radius: 4px 4px 0 0; }
:focus-visible { outline: 2px solid var(--tg-n900); outline-offset: 2px; }

/* App header: same customer primary as the sidebar (guide 5.1), so the two read as one surface */
.content_up { background-color: var(--tg-primary); }

/* ---- Sidebar: customer primary, 4 px secondary bar on the active item ---- */
#sidebarCollapse .sidebar,
#sidebarCollapse .menu { background: var(--tg-primary); }
#sidebarCollapse .menu :where(a, summary):is(:hover, :focus) { background: rgb(255 255 255 / 0.08); }
#sidebarCollapse .menu a.active,
#sidebarCollapse .menu a.active:is(:hover, :focus) {
  background: rgb(255 255 255 / 0.12) !important;
  box-shadow: inset 4px 0 0 var(--tg-secondary);
  color: #fff !important;
}
.sidebar-collapsed #sidebarCollapse .menu.menu-sidebar > li > a.active,
.sidebar-collapsed #sidebarCollapse .menu.menu-sidebar > li > details:has(a.active) > summary { box-shadow: inset 4px 0 0 var(--tg-secondary); }
.sidebar-collapsed .menu.menu-sidebar > li > details > ul { background: var(--tg-primary-deep); }

/* "Powered by TEUgrid" stamp: pinned to the sidebar footer (guide 6.3), symbol only on the icon rail */
.sidebar { display: flex; flex-direction: column; min-height: 100vh; }
.sidebar_bottom { flex: 1; }
.tg-stamp { display: flex; justify-content: center; padding: 14px 0 16px; text-decoration: none; }
/* the 160 px sidebar is barely wider than the 24 px badge: tighten it so it keeps ~8 px clear space each side */
.tg-stamp .tg-badge { gap: 6px !important; padding: 0 7px !important; }
.tg-stamp .tg-badge > span { gap: 0.25em !important; font-size: 11px !important; }
.tg-stamp .tg-badge > span > span:last-child { font-size: 12px; }
.tg-stamp:hover .tg-badge { border-color: var(--tg-n500) !important; }
/* the icon rail is too narrow for the badge: symbol only, still linking to teugrid.com */
.sidebar-collapsed .tg-stamp .tg-badge > span { display: none !important; }
.sidebar-collapsed .tg-stamp .tg-badge { width: 24px; padding: 0 !important; justify-content: center; }

/* ---- Login (templates/default/index.html.twig) ---- */
.tg-login { min-height: 100vh; background: var(--tg-n100); color: var(--tg-n900); }
.tg-login-brand { flex: 0 0 42%; display: flex; align-items: center; justify-content: center; padding: 48px; background: var(--tg-primary); box-shadow: inset 0 -6px 0 var(--tg-secondary); }
.tg-login-brand img { width: 100%; max-width: 240px; max-height: 80px; object-fit: contain; }
.tg-login-brand-stack { display: flex; flex-direction: column; align-items: center; gap: 28px; width: 100%; }
.tg-login-teugrid { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; text-decoration: none; }
.tg-login-teugrid span { font-size: 13px; letter-spacing: 0.04em; color: #fff; opacity: 0.85; }
.tg-login-teugrid:hover span, .tg-login-teugrid:focus-visible span { opacity: 1; text-decoration: underline; }
.tg-login-connect { margin: 12px 0 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tg-login-brand .tg-login-connect img { width: 148px; height: 148px; max-width: none; max-height: none; padding: 10px; background: #fff; border-radius: 6px; }
.tg-login-connect figcaption { max-width: 220px; font-size: 13px; line-height: 18px; text-align: center; color: rgb(255 255 255 / 0.85); }
.tg-login-side { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px; }
.tg-login-card { width: 100%; max-width: 380px; padding: 32px; background: #fff; border: 1px solid var(--tg-n300); border-radius: 4px; }
.tg-login-card h1 { margin: 0 0 24px; font-size: 32px; line-height: 38px; font-weight: 700; color: var(--tg-n900); }
.tg-login-card label { display: block; margin: 16px 0 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tg-n600); }
.tg-login-card .form-control { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--tg-n500); border-radius: 4px; font-size: 16px; background: #fff; color: var(--tg-n900); }
.tg-login-card .btn-primary { height: 40px; margin-top: 24px; border: 0; border-radius: 4px; background: var(--tg-primary); color: #fff; font-size: 15px; font-weight: 600; text-transform: none; }
.tg-login-card .btn-primary:hover { background: var(--tg-primary-deep); }
.tg-login-card .alert { margin: 16px 0 0; }
.tg-login-stamp { display: flex; justify-content: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--tg-n200); }
.tg-login-card .login-form, .tg-login-card .login-form > div { width: 100%; max-width: none; margin-left: 0; margin-right: 0; padding: 0; }

/* Container numbers, ISO codes, references, dates, times and plates are always mono so columns line up (guide 3.1/4.4) */
:is(.grid-type-date, .grid-type-datetime, .grid-type-time, .grid-column-number, .grid-column-container_number, .grid-column-containerAnnouncement_number,
    .grid-column-type_isoCode, .grid-column-isoType_isoCode, .grid-column-containerType_isoCode,
    .grid-column-booking_friendlyId, .grid-column-truck_registrationNumber, .grid-column-registrationNumber,
    .grid-column-vehicleIdent, .grid-column-bat) {
  font-family: var(--tg-font-mono);
  font-variant-ligatures: none;
}

/* Customer logo in the sidebar: full logo open, logo mark on the folded icon rail */
.sidebar-logo-mark { display: none; }
.sidebar-collapsed .sidebar_top .sidebar-logo { display: none; }
.sidebar-collapsed .sidebar_top { justify-content: center; height: 52px; padding: 0; } /* = .content_up height, so rail top and header form one band */
/* admin.css whitens every sidebar logo (filter: brightness(100)), which would also fill the mark's navy separator lines */
.sidebar-collapsed .sidebar_top .sidebar-logo-mark { display: block; width: 34px; height: 32px; margin: 0; object-fit: contain; filter: none; }
.sidebar-collapsed .sidebar_top > a { display: flex; justify-content: center; width: 100%; }