/* PoćerajUtovar's own look (Nick, 2026-10-22: "ovo sve što je uzeto od LoadHuntera
 * moramo izmijeniti da ne izgleda kao kod njih, izmijeni dovoljno da se vidi da
 * nije kopirano").
 *
 * The captured app draws every colour, the corner rounding and the font through
 * its own CSS variables (and so do our screens, tms/screens/dsm.css, on purpose).
 * This file sets those variables to DSM's own: a navy sidebar, DSM blue for
 * everything that was purple, tighter corners, and the TMS's typefaces — Barlow
 * for text, Barlow Condensed for headings, DM Mono for figures (the TMS's own
 * files, self-hosted: tms/fonts). It is loaded after the app's stylesheet, by
 * the dashboard page and by every screen, so one change here changes both, in
 * the light and the dark theme. The app's bundle is not edited.
 *
 * The handful of places where the app wrote purple straight into a class
 * instead of through a variable (the active menu item's gradient, its hover,
 * the sign-in page's backdrop) are named below and given ours. */
@import url('/tms/fonts/fonts.css');
/* Corporate and Highway (tms/themes.css): only under html[data-pu-theme=…]; this file is Modern */
@import url('/tms/themes.css');
/* the vendor's own pages (Factoring, Emails & Templates, Profile) laid out our way (TODO I9) */
@import url('/tms/vendor-pages.css');

:root, :root:root {
  --pu-navy: #0B1F3A;
  --pu-navy-2: #12294A;
  --pu-blue: #0B5FFF;
  --pu-blue-2: #3D7EFF;
  --pu-font: 'Barlow', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --pu-font-head: 'Barlow Condensed', 'Barlow', 'Segoe UI', system-ui, sans-serif;
  --pu-font-num: 'DM Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --radius: .375rem;
  --background: #F2F5F9;
  --foreground: #14233A;
  --card: #FFFFFF;
  --card-foreground: #14233A;
  --popover: #FFFFFF;
  --popover-foreground: #14233A;
  --primary: var(--pu-blue);
  --primary-text: #0A4FD6;
  --primary-foreground: #FFFFFF;
  --secondary: #E8EEF6;
  --secondary-foreground: #14233A;
  --muted: #EDF1F7;
  --muted-foreground: #5B6B82;
  --accent: #E6EEFC;
  --accent-foreground: #0B1F3A;
  --border: #DCE3EC;
  --input: #D3DCE8;
  --ring: #3D7EFF;
  --chart-1: #9CC0FF; --chart-2: #5B95FF; --chart-3: #0B5FFF; --chart-4: #0A47BF; --chart-5: #0B1F3A;

  --sidebar: var(--pu-navy);
  --sidebar-foreground: #D6E0EE;
  --sidebar-primary: var(--pu-blue);
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: rgba(255, 255, 255, .08);
  --sidebar-accent-foreground: #FFFFFF;
  --sidebar-border: rgba(255, 255, 255, .09);
  --sidebar-ring: var(--pu-blue-2);
  --sub-pro: linear-gradient(135deg, #0B5FFF, #0B1F3A);
  --sub-unlimited: linear-gradient(135deg, #0B1F3A, #0B5FFF);
  --font-sans: var(--pu-font);
  --font-inter: var(--pu-font);
}
.dark, :root.dark, html.dark {
  --background: #0A1220;
  --foreground: #E4EAF3;
  --card: #111C2E;
  --card-foreground: #E4EAF3;
  --popover: #111C2E;
  --popover-foreground: #E4EAF3;
  --primary: #2C6CFF;
  --primary-text: #8DB2FF;
  --primary-foreground: #FFFFFF;
  --secondary: #182740;
  --secondary-foreground: #E4EAF3;
  --muted: #162338;
  --muted-foreground: #95A5BD;
  --accent: #1A2B48;
  --accent-foreground: #E4EAF3;
  --border: rgba(255, 255, 255, .09);
  --input: rgba(255, 255, 255, .14);
  --ring: #3D7EFF;
  --chart-1: #9CC0FF; --chart-2: #6EA0FF; --chart-3: #3D7EFF; --chart-4: #2C6CFF; --chart-5: #1C4FCC;
  --sidebar: #07111F;
  --sidebar-foreground: #CBD6E6;
  --sidebar-primary: #2C6CFF;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: rgba(255, 255, 255, .07);
  --sidebar-accent-foreground: #FFFFFF;
  --sidebar-border: rgba(255, 255, 255, .08);
  --sidebar-ring: #3D7EFF;
}

/* ── type ── */
html, body, button, input, select, textarea { font-family: var(--pu-font); }
body { letter-spacing: .005em; }
h1, h2, h3, .text-2xl, .text-3xl { font-family: var(--pu-font-head); letter-spacing: .01em; }
/* figures stay in Barlow with even widths (.mono on our screens): DM Mono is too wide for the Dispatch table */
.font-mono, code, kbd, pre { font-family: var(--pu-font-num); }

/* ── the sidebar: navy, white text, a solid DSM-blue bar on the open screen ── */
[data-sidebar="sidebar"] { color: var(--sidebar-foreground); }
[data-sidebar="group-label"] { color: #8FA3BF; text-transform: uppercase; font-size: 11px; letter-spacing: .08em; font-weight: 600; }
[data-sidebar="menu-button"] { border-radius: 6px; }
[data-sidebar="menu-button"] svg { color: #9FB3CF; }
.data-\[active\=true\]\:bg-nav-link-active[data-active=true],
.data-\[state\=open\]\:hover\:bg-nav-link-active[data-state=open]:hover {
  background-image: none; background-color: var(--sidebar-primary); color: #fff;
  box-shadow: inset 3px 0 0 #9CC0FF;
}
[data-sidebar="menu-button"][data-active="true"] svg { color: #fff; }
.hover\:bg-nav-link-hover:hover { background-image: none; background-color: var(--sidebar-accent); color: #fff; }
.bg-\[hsla\(266\,\ 30\%\,\ 45\%\,\ 0\.7\)\], .bg-\[hsla\(266\,30\%\,45\%\,0\.7\)\] { background-color: rgba(11, 95, 255, .7); }
[data-sidebar="header"] { border-bottom: 1px solid var(--sidebar-border); }
[data-sidebar="footer"] .bg-card, [data-sidebar="footer"] [class*="bg-white"] { background: var(--pu-navy-2); }
[data-sidebar="sidebar"] .text-foreground, [data-sidebar="sidebar"] .text-card-foreground { color: #EEF3FA; }
[data-sidebar="sidebar"] .text-muted-foreground { color: #93A6C1; }

/* ── the name at the top of the sidebar (name.js writes it): white on navy, in the TMS's heading face, with our mark ── */
html body [data-slot="sidebar-header"] div:has(> svg[viewBox="0 0 204 38"])::before {
  color: #FFFFFF; font-family: var(--pu-font-head); font-weight: 700; font-size: 22px; letter-spacing: .015em;
  padding-left: 36px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%230B5FFF'/%3E%3Cpath d='M9.5 24V8.5h6.2a4.6 4.6 0 0 1 0 9.2H9.5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17.5 22.5h6M21 19.5l3 3-3 3' fill='none' stroke='%239CC0FF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 50% / 28px 28px;
}
[data-slot="sidebar-header"] button, [data-sidebar="trigger"] { color: #CFE0FF; }

/* ── the sign-in page: no purple backdrop ── */
.bg-auth-gradient,
.bg-\[linear-gradient\(180deg\,\#010101_0\%\,\#5F30F7_50\%\,\#AB70FC_100\%\)\],
[class*="5F30F9"], [class*="5F30F7"], [class*="AB70FC"] {
  background-image: linear-gradient(160deg, #07111F 0%, #0B1F3A 45%, #0B5FFF 130%) !important;
}
.bg-hero-radial { background-image: radial-gradient(120% 100% at 50% 110%, #0B5FFF 0%, #0B1F3A 55%, #07111F 100%) !important; }

/* ── account menu: the vendor's own pages and its subscription badge are gone (boot.js marks them) ── */
[data-pu-gone] { display: none !important; }

/* ── the account menu (sidebar footer): a row under the mouse keeps its white text — the app's own
 *    hover:bg-muted turned it light grey under white letters, unreadable on the navy menu ── */
[data-sidebar="footer"] li.hover\:bg-muted:hover { background-color: var(--sidebar-accent); }