/* File: front/src/assets/styles/main.css */
/* Last change: Added typography module to the import chain */
/*********************************
 * --- BASE STYLES ---
 *********************************/
/* File: front/src/assets/styles/_base.css */
/* Last change: MINIMAL - only essential reset and base styles */
/* ==========================================================================
   Essential Reset
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, ul, ol, li,
input, button, textarea, select {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
}
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
/* ==========================================================================
   Base Styles
   ========================================================================== */
html, body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  scrollbar-gutter: stable;
}
/*********************************
  * --- DESIGN TOKENS ---
  *********************************/
/* File: front/src/assets/styles/_typography.css */
/* Last change: Defined font primitives and semantic text hierarchies */
:root {
    /*********************************
     * --- FONT FAMILY ---
     *********************************/
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
  
    /*********************************
     * --- FONT WEIGHTS (PRIMITIVES) ---
     *********************************/
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
  
    /*********************************
     * --- FONT SIZES (PRIMITIVES) ---
     *********************************/
    --font-size-xs: 0.75rem;   /* 12px */
    --font-size-sm: 0.875rem;  /* 14px */
    --font-size-base: 1rem;    /* 16px */
    --font-size-lg: 1.125rem;  /* 18px */
    --font-size-xl: 1.25rem;   /* 20px */
    --font-size-2xl: 1.5rem;   /* 24px */
  
    /*********************************
     * --- LINE HEIGHTS ---
     *********************************/
    --line-height-tight: 1.1;
    --line-height-snug: 1.3;
    --line-height-normal: 1.5;
  
    /*********************************
     * --- SEMANTIC TEXT HIERARCHY ---
     *********************************/
    /* Primary Content (Items, Headers) */
    --text-primary-size: var(--font-size-base);
    --text-primary-weight: var(--font-weight-semibold);
    --text-primary-lh: var(--line-height-snug);
  
    /* Secondary Content (Descriptions) */
    --text-secondary-size: var(--font-size-sm);
    --text-secondary-weight: var(--font-weight-regular);
    --text-secondary-lh: var(--line-height-normal);
  
    /* Tertiary Content (Status, Meta, Timestamps) */
    --text-tertiary-size: var(--font-size-xs);
    --text-tertiary-weight: var(--font-weight-medium);
    --text-tertiary-lh: var(--line-height-normal);
  
    /* Active/Interactive Elements */
    --text-active-weight: var(--font-weight-bold);
  }
/* File: front/src/assets/styles/_colors.css */
/* Purpose: Defines role-specific color palettes (sender, hauler, etc.). */
:root {
  /* ==========================================================================
     GLOBAL CANVAS
     ========================================================================== */
  --color-canvas: hsl(var(--sys-background));

  /* ==========================================================================
     SENDER (Client) Palette
     ========================================================================== */
  --cln-emphasis: 217 91% 60%; /* Blue */
  --cln-hover: 217 91% 55%;
  --cln-contrast: 0 0% 100%; /* White text on blue */
  
  /* These use the base theme variables from _modes.css */
  --cln-background: var(--sys-background);
  --cln-surface: var(--sys-surface);
  --cln-input: var(--sys-input);
  --cln-border: var(--sys-border);
  --cln-muted: var(--sys-muted);

  /* ==========================================================================
     HAULER (Carrier) Palette
     ========================================================================== */
  --crr-emphasis: var(--success-hsl); /* Green */
  --crr-hover: var(--success-hover-hsl);
  --crr-contrast: var(--success-contrast-hsl);

  /* These also use the base theme variables */
  --crr-background: var(--sys-background);
  --crr-surface: var(--sys-surface);
  --crr-input: var(--sys-input);
  --crr-border: var(--sys-border);
  --crr-muted: var(--sys-muted);

  /* ==========================================================================
     ROLE ALIASES (used by components)
     ========================================================================== */
  
  /* Default to Sender theme */
  --emphasis: var(--cln-emphasis);
  --hover: var(--cln-hover);
  --emphasis-contrast: var(--cln-contrast);
}
/* When a component is inside a Sender section */
.role-sender {
  --emphasis: var(--cln-emphasis);
  --hover: var(--cln-hover);
  --emphasis-contrast: var(--cln-contrast);
}
/* When a component is inside a Hauler section */
.role-hauler {
  --emphasis: var(--crr-emphasis);
  --hover: var(--crr-hover);
  --emphasis-contrast: var(--crr-contrast);
}
/* File: front/src/assets/styles/_modes.css */
/* Last change: Implemented 3+3 palette architecture (P1/P2/P3 + G1/G2/G3). */
/*********************************
 * --- 1. PRIMITIVES (Inputs) ---
 *********************************/
:root {
  --sys-primary-h: 0;
  --sys-primary-s: 85%;
  --sys-primary-l: 50%;
  --sys-primary-base: hsl(var(--sys-primary-h), var(--sys-primary-s), var(--sys-primary-l));
  --sys-primary-white-mix: 0.12;
  --sys-primary-l-mixed: calc(var(--sys-primary-l) + (100% - var(--sys-primary-l)) * var(--sys-primary-white-mix));
}
/*********************************
 * --- 2A. GREY PALETTES ---
 *********************************/
/* G1: Cool Steel (Modrý nádych) – DEFAULT */
:root,
:root[data-palette-grey="G1"] {
  --sys-grey-h: 220;
  --sys-grey-s: 10%;
}
/* G2: Warm Sand (Žltý nádych) */
:root[data-palette-grey="G2"] {
  --sys-grey-h: 40;
  --sys-grey-s: 8%;
}
/* G3: Rose Mist (Červený nádych) */
:root[data-palette-grey="G3"] {
  --sys-grey-h: 350;
  --sys-grey-s: 6%;
}
/*********************************
 * --- 2B. GREY SCALE (20 steps) ---
 *********************************/
:root {
  --color-grey-1: hsl(var(--sys-grey-h), var(--sys-grey-s), 99%);
  --color-grey-2: hsl(var(--sys-grey-h), var(--sys-grey-s), 98%);
  --color-grey-3: hsl(var(--sys-grey-h), var(--sys-grey-s), 97%);
  --color-grey-4: hsl(var(--sys-grey-h), var(--sys-grey-s), 95%);
  --color-grey-5: hsl(var(--sys-grey-h), var(--sys-grey-s), 93%);
  --color-grey-6: hsl(var(--sys-grey-h), var(--sys-grey-s), 90%);
  --color-grey-7: hsl(var(--sys-grey-h), var(--sys-grey-s), 87%);
  --color-grey-8: hsl(var(--sys-grey-h), var(--sys-grey-s), 84%);
  --color-grey-9: hsl(var(--sys-grey-h), var(--sys-grey-s), 80%);
  --color-grey-10: hsl(var(--sys-grey-h), var(--sys-grey-s), 76%);
  --color-grey-11: hsl(var(--sys-grey-h), var(--sys-grey-s), 72%);
  --color-grey-12: hsl(var(--sys-grey-h), var(--sys-grey-s), 68%);
  --color-grey-13: hsl(var(--sys-grey-h), var(--sys-grey-s), 64%);
  --color-grey-14: hsl(var(--sys-grey-h), var(--sys-grey-s), 60%);
  --color-grey-15: hsl(var(--sys-grey-h), var(--sys-grey-s), 55%);
  --color-grey-16: hsl(var(--sys-grey-h), var(--sys-grey-s), 50%);
  --color-grey-17: hsl(var(--sys-grey-h), var(--sys-grey-s), 45%);
  --color-grey-18: hsl(var(--sys-grey-h), var(--sys-grey-s), 40%);
  --color-grey-19: hsl(var(--sys-grey-h), var(--sys-grey-s), 35%);
  --color-grey-20: hsl(var(--sys-grey-h), var(--sys-grey-s), 30%);
}
/*********************************
 * --- 3A. PRIMARY PALETTES ---
 *********************************/
/* P1: Lightness Shift – DEFAULT
   Adjusts L channel only. Vivid, saturated across entire range.
*/
:root,
:root[data-palette-primary="P1"] {
  --color-primary-1: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 45%)));
  --color-primary-2: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 42%)));
  --color-primary-3: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 39%)));
  --color-primary-4: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 36%)));
  --color-primary-5: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 33%)));
  --color-primary-6: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 30%)));
  --color-primary-7: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 27%)));
  --color-primary-8: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 24%)));
  --color-primary-9: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 21%)));
  --color-primary-10: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 18%)));
  --color-primary-11: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 15%)));
  --color-primary-12: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 12%)));
  --color-primary-13: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 9%)));
  --color-primary-14: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 6%)));
  --color-primary-15: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 3%)));
  --color-primary-16: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 0%)));
  --color-primary-17: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) - 4%)));
  --color-primary-18: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) - 9%)));
  --color-primary-19: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) - 14%)));
  --color-primary-20: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) - 19%)));
}
/* P2: White Mix (Tint Blend)
   Mixes base color with white (light) and black (dark).
   Soft, pastel lights. Desaturated transitions. Premium feel.
*/
:root[data-palette-primary="P2"] {
  --color-primary-1: color-mix(in hsl, var(--sys-primary-base), white 95%);
  --color-primary-2: color-mix(in hsl, var(--sys-primary-base), white 92%);
  --color-primary-3: color-mix(in hsl, var(--sys-primary-base), white 88%);
  --color-primary-4: color-mix(in hsl, var(--sys-primary-base), white 84%);
  --color-primary-5: color-mix(in hsl, var(--sys-primary-base), white 80%);
  --color-primary-6: color-mix(in hsl, var(--sys-primary-base), white 74%);
  --color-primary-7: color-mix(in hsl, var(--sys-primary-base), white 68%);
  --color-primary-8: color-mix(in hsl, var(--sys-primary-base), white 60%);
  --color-primary-9: color-mix(in hsl, var(--sys-primary-base), white 52%);
  --color-primary-10: color-mix(in hsl, var(--sys-primary-base), white 44%);
  --color-primary-11: color-mix(in hsl, var(--sys-primary-base), white 36%);
  --color-primary-12: color-mix(in hsl, var(--sys-primary-base), white 28%);
  --color-primary-13: color-mix(in hsl, var(--sys-primary-base), white 20%);
  --color-primary-14: color-mix(in hsl, var(--sys-primary-base), white 12%);
  --color-primary-15: color-mix(in hsl, var(--sys-primary-base), white 5%);
  --color-primary-16: var(--sys-primary-base);
  --color-primary-17: color-mix(in hsl, var(--sys-primary-base), black 10%);
  --color-primary-18: color-mix(in hsl, var(--sys-primary-base), black 22%);
  --color-primary-19: color-mix(in hsl, var(--sys-primary-base), black 34%);
  --color-primary-20: color-mix(in hsl, var(--sys-primary-base), black 46%);
}
/* P3: Reserved (TBD)
   Candidate: OKLCH perceptual, chroma shift, or complementary blend.
   Currently mirrors P1 as placeholder.
*/
:root[data-palette-primary="P3"] {
  --color-primary-1: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 45%)));
  --color-primary-2: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 42%)));
  --color-primary-3: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 39%)));
  --color-primary-4: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 36%)));
  --color-primary-5: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 33%)));
  --color-primary-6: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 30%)));
  --color-primary-7: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 27%)));
  --color-primary-8: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 24%)));
  --color-primary-9: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 21%)));
  --color-primary-10: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 18%)));
  --color-primary-11: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 15%)));
  --color-primary-12: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 12%)));
  --color-primary-13: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 9%)));
  --color-primary-14: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 6%)));
  --color-primary-15: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 3%)));
  --color-primary-16: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) + 0%)));
  --color-primary-17: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) - 4%)));
  --color-primary-18: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) - 9%)));
  --color-primary-19: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) - 14%)));
  --color-primary-20: hsl(var(--sys-primary-h), var(--sys-primary-s), clamp(0%, 100%, calc(var(--sys-primary-l-mixed) - 19%)));
}
/*********************************
 * --- 4. SEMANTIC MAPPINGS ---
 *********************************/
:root {
  --color-grid-hover: var(--color-grey-2);
  --color-grid-selected: var(--color-grey-4);
  --color-grid-line: var(--color-grey-7);
  --color-grid-today: var(--color-primary-4);

  --color-bg-app: var(--color-grey-1);
  --color-bg-panel: white;
  --color-bg-canvas: var(--color-grey-2);
  --color-bg-hover: var(--color-grey-2);
  --color-bg-input: hsl(var(--sys-grey-h), 12%, 97%);
  --color-border: var(--color-grey-7);
  --color-text-primary: var(--color-grey-19);
  --color-text-secondary: var(--color-grey-15);
  --color-text-tertiary: var(--color-grey-11);
  --color-bg-light: var(--color-brand-light);
  --color-light-highlight-primary: color-mix(in hsl, var(--color-brand-lightest), white 50%);
  --color-bg-light-hover: var(--color-brand-lighter);
  --color-panel-active: var(--color-brand-subtle);
  --color-panel-active-hover: var(--color-primary-4);
  --color-border-active: var(--color-brand-border);
  --color-border-strong: var(--color-primary-12);
  --color-border-muted: var(--color-grey-7);
  --color-text-active: var(--color-primary-20);
  --color-text-subtle: var(--color-grey-15);

  /* --- BRAND SEMANTICS (formerly mapped via color-mix) --- */
  --color-brand-primary: var(--color-primary-16);
  --color-brand-hover: var(--color-primary-18);
  --color-brand-active: var(--color-primary-20);

  /* Surfaces & Backgrounds */
  --color-brand-light: var(--color-primary-3);
  /* formerly white 87% / 85% */
  --color-brand-lighter: var(--color-primary-2);
  /* formerly white 90% */
  --color-brand-lightest: var(--color-primary-1);
  /* formerly white 95% */

  --color-brand-subtle: var(--color-primary-5);
  /* formerly white 80% */
  --color-brand-muted: var(--color-primary-7);
  /* formerly white 70% */
  --color-brand-solid: var(--color-primary-13);
  /* formerly white 25% */

  /* Borders */
  --color-brand-border: var(--color-primary-10);
  /* formerly white 50% */
  --color-brand-border-subtle: var(--color-primary-8);
  /* formerly white 60% */

  /* Text */
  --color-text-brand: var(--color-primary-16);
  --color-text-brand-strong: var(--color-primary-20);
}
/*********************************
  * --- LEGACY OVERRIDES ---
  *********************************/
/* @import './_themes.css'; */
/*********************************
  * --- UTILITIES ---
  *********************************/
/* File: front/src/assets/styles/_properties.css */
/* Last change: Added a global utility class section for behavioral styles. */
/* ==========================================================================
   1. Default Theme (2D)
   These variables apply everywhere unless overridden by a specific theme class.
   ========================================================================== */
:root {
  /* --- Borders & Radii --- */
  --border-radius: 6px;
  --border-radius-large: 8px;
  --border-radius-small: 4px;

  /* --- Shadows (2D has no shadows by default) --- */
  --input-shadow: none;
  --button-shadow: none;
  --panel-shadow: none; /* For cards, modals, etc. */

  /* --- Focus Rings (consistent across the app) --- */
  --input-shadow-focus: 0 0 0 2px hsl(var(--hover) / 0.35);
  --button-shadow-focus: 0 0 0 3px hsl(var(--hover) / 0.4);
  --input-shadow-focus-error: 0 0 0 2px hsl(var(--danger-hsl) / 0.35);

    /* --- Layout --- */
  --navbar-height: 50px;
}
/* ==========================================================================
   2. 3D Theme (activated by adding .theme-3d to a container)
   ========================================================================== */
.theme-3d {
  /* --- Shadows (overrides the defaults to create depth) --- */
  --input-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
  --button-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --panel-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

  /* --- Focus Rings for 3D (combines focus ring with the shadow) --- */
  --input-shadow-focus: 0 0 0 2px hsl(var(--hover) / 0.35), 
                      inset 0 2px 4px rgba(0, 0, 0, 0.06);
  --button-shadow-focus: 0 0 0 3px hsl(var(--hover) / 0.4),
                         0 1px 3px rgba(0, 0, 0, 0.1);
  --input-shadow-focus-error: 0 0 0 2px hsl(var(--danger-hsl) / 0.35),
                                inset 0 2px 4px rgba(0, 0, 0, 0.06);
}
/* ==========================================================================
   3. Global Utility Classes
   ========================================================================== */
/* Prevents text selection globally when any drag operation is active */
body.is-dragging {
  user-select: none;
  -webkit-user-select: none; /* For Safari */
}