/* =============================================================================
   Design tokens (copied from the N SEVEN system frontend, N SEVEN blue palette)
   -----------------------------------------------------------------------------
   Single source of truth for every colour in the admin panel. The brand palette
   is fixed; the "mode-aware" blocks flip between light mode (this panel's
   default) and the dark glass look (body.dark-only, toggled from the header).

   Token names keep the --wavy-* prefix so these files stay drop-in compatible
   with the N SEVEN / Whatsavy frontends; only the mode selectors differ:
     - :root            -> light values (default)
     - body.dark-only   -> dark values   (.wavy-dark forces dark on any element)
     - .wavy-light      -> light values on any element, even inside dark mode
   ============================================================================= */

:root {
  /* ---- Brand (fixed) ---------------------------------------------------- */
  --wavy-primary: #2D6CDF;
  --wavy-primary-rgb: 45, 108, 223;
  --wavy-primary-dark: #1E57BE;
  --wavy-primary-dark-rgb: 30, 87, 190;
  --wavy-primary-light: #EAF2FF;
  --wavy-primary-light-rgb: 234, 242, 255;
  --wavy-on-primary: #FFFFFF;
  --wavy-gradient: linear-gradient(135deg, #2D6CDF 0%, #1E57BE 100%);
  --wavy-gradient-hover: linear-gradient(135deg, #2560CC 0%, #184BA5 100%);
  --wavy-gradient-soft: linear-gradient(135deg, rgba(45, 108, 223, 0.22) 0%, rgba(30, 87, 190, 0.12) 100%);

  /* ---- Semantic (fixed) ------------------------------------------------- */
  --wavy-success: #16A34A;
  --wavy-success-rgb: 22, 163, 74;
  --wavy-success-dark: #15803D;
  --wavy-warning: #E9A23B;
  --wavy-warning-rgb: 233, 162, 59;
  --wavy-warning-dark: #C9852A;
  --wavy-on-warning: #303030;
  --wavy-error: #D9534F;
  --wavy-error-rgb: 217, 83, 79;
  --wavy-error-dark: #B7413D;
  --wavy-info: #0891B2;
  --wavy-info-rgb: 8, 145, 178;
  --wavy-info-dark: #0E7490;
  --wavy-neutral: #828282;
  --wavy-neutral-rgb: 130, 130, 130;
  --wavy-neutral-dark: #666666;
  --wavy-neutral-darker: #555555;
  /* Extra accent used only by the POS "staff requests" shortcut. */
  --wavy-accent: #7C4DDB;
  --wavy-accent-dark: #6639C2;

  /* ---- Neutral scale (fixed) -------------------------------------------- */
  --wavy-white: #FFFFFF;
  --wavy-gray-50: #F7F9FC;
  --wavy-gray-100: #EEF1F6;
  --wavy-gray-200: #D9D9D9;
  --wavy-gray-300: #BDBDBD;
  --wavy-gray-500: #828282;
  --wavy-gray-600: #666666;
  --wavy-gray-900: #303030;

  /* ---- Dark surfaces (fixed; near-black neutrals with a hint of blue) ---- */
  --wavy-dark-bg: #111318;
  --wavy-dark-surface: #1A1D24;
  --wavy-dark-surface-2: #23272F;
  --wavy-dark-surface-3: #2D323B;
  --wavy-dark-surface-rgb: 26, 29, 36;
  --wavy-dark-border: rgba(255, 255, 255, 0.12);
  --wavy-dark-text: #F2F2F2;
  --wavy-dark-text-2: #C7C7C7;
  --wavy-dark-text-3: #A3A3A3;

  /* ---- Mode-aware: light defaults ---------------------------------------- */
  color-scheme: light;
  --wavy-bg: #F7F9FC;
  --wavy-page-bg: #F7F9FC;
  --wavy-app-panel: #FFFFFF;
  --wavy-app-panel-border: #D9D9D9;
  --wavy-chat-panel: var(--wavy-app-panel);
  --wavy-chat-panel-2: #F7F9FC;
  --wavy-chat-panel-solid: #FFFFFF;
  --wavy-chat-card: #FFFFFF;
  --wavy-chat-card-hover: #F1F6FD;
  --wavy-surface: #FFFFFF;
  --wavy-surface-2: #F7F9FC;
  --wavy-surface-3: #EEF1F6;
  --wavy-surface-rgb: 255, 255, 255;
  --wavy-header-bg: #FFFFFF;
  --wavy-header-icon: #303030;

  --wavy-text: #303030;
  --wavy-text-2: #666666;
  --wavy-text-3: #828282;
  --wavy-text-muted: #666666;
  --wavy-text-inverse: #FFFFFF;
  --wavy-heading: #303030;

  --wavy-border: #D9D9D9;
  --wavy-border-strong: #BDBDBD;
  --wavy-divider: #E8ECF2;

  --wavy-primary-text: #1F56B8;
  --wavy-primary-text-hover: #1A4A9F;
  --wavy-primary-soft: #EAF2FF;
  --wavy-primary-soft-strong: #D6E4FF;
  --wavy-success-text: #15803D;
  --wavy-success-soft: #DCFCE7;
  --wavy-warning-text: #9A6212;
  --wavy-warning-soft: #FCF1E0;
  --wavy-error-text: #B7413D;
  --wavy-error-soft: #FAE6E5;
  --wavy-info-text: #0E7490;
  --wavy-info-soft: #E0F5FA;
  --wavy-neutral-text: #666666;
  --wavy-neutral-soft: #EEF1F6;

  --wavy-glass-bg: #FFFFFF;
  --wavy-glass-bg-hover: #F7F9FC;
  --wavy-glass-border: #D9D9D9;
  --wavy-glass-blur: none;

  --wavy-input-bg: #FFFFFF;
  --wavy-input-bg-focus: #FFFFFF;
  --wavy-input-border: #D9D9D9;
  --wavy-input-text: #303030;
  --wavy-input-placeholder: #828282;

  --wavy-btn-dark-bg: #303030;
  --wavy-btn-dark-text: #FFFFFF;
  --wavy-btn-light-bg: #FFFFFF;
  --wavy-btn-light-hover: #EEF2F8;

  --wavy-table-bg: #FFFFFF;
  --wavy-table-head-bg: #EAF2FF;
  --wavy-table-head-border: #2D6CDF;
  --wavy-table-head-text: #303030;
  --wavy-table-text: #303030;
  --wavy-table-border: #E8ECF2;
  --wavy-table-hover: #F1F6FD;
  --wavy-table-stripe: #F7F9FC;

  --wavy-bubble-out: #E3EDFF;
  --wavy-bubble-in: #EEF1F6;

  /* Home screen pieces (HomeView in the N SEVEN frontend). */
  --wavy-tile-bg: rgba(45, 108, 223, 0.08);
  --wavy-tile-bg-hover: rgba(45, 108, 223, 0.14);
  --wavy-segment-bg: #F7F9FC;
  --wavy-segment-border: #D9D9D9;
  --wavy-segment-text: #666666;
  --wavy-segment-active: var(--wavy-primary);
  --wavy-loader-overlay: rgba(255, 255, 255, 0.68);

  --wavy-modal-bg: #FFFFFF;
  --wavy-modal-header-bg: #F7F9FC;
  --wavy-modal-close-bg: transparent;
  --wavy-modal-close-color: #828282;

  --wavy-overlay: rgba(48, 48, 48, 0.45);
  --wavy-scrollbar: #C6CCD6;
  --wavy-scrollbar-hover: #A8B0BD;
  --wavy-shadow-sm: 0 1px 3px rgba(48, 48, 48, 0.08);
  --wavy-shadow: 0 6px 18px rgba(48, 48, 48, 0.10);
  --wavy-shadow-lg: 0 16px 40px rgba(48, 48, 48, 0.16);
  --wavy-focus-ring: 0 0 0 0.2rem rgba(45, 108, 223, 0.28);
}

/* ---- Mode-aware: dark values ------------------------------------------- */
/* Screen only: invoices and reports printed from dark mode keep the light
   palette (dark text on white paper). */
@media not print {
body.dark-only,
.wavy-dark {
  color-scheme: dark;
  --wavy-bg: var(--wavy-dark-bg);
  /* Page: deep neutral with one soft top light and a fine grain (no corner
     blobs, no banding). Layers: grain, top spotlight, vertical base. */
  --wavy-page-bg:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") repeat,
    radial-gradient(1200px 560px at 50% -12%, rgba(45, 108, 223, 0.12) 0%, rgba(45, 108, 223, 0) 60%),
    linear-gradient(180deg, #13161D 0%, #0D0F14 55%, #0A0C10 100%);
  /* Run/app panel: the rounded surface every screen sits in. */
  --wavy-app-panel: rgba(255, 255, 255, 0.10);
  --wavy-app-panel-border: rgba(255, 255, 255, 0.06);
  --wavy-chat-panel: var(--wavy-app-panel);
  --wavy-chat-panel-2: rgba(255, 255, 255, 0.05);
  --wavy-chat-panel-solid: #22262E;
  --wavy-chat-card: rgba(255, 255, 255, 0.08);
  --wavy-chat-card-hover: rgba(255, 255, 255, 0.13);
  --wavy-surface: var(--wavy-dark-surface);
  --wavy-surface-2: var(--wavy-dark-surface-2);
  --wavy-surface-3: var(--wavy-dark-surface-3);
  --wavy-surface-rgb: 26, 29, 36;
  --wavy-header-bg: rgba(17, 19, 24, 0.55);
  --wavy-header-icon: #F2F2F2;

  --wavy-text: #F2F2F2;
  --wavy-text-2: #C7C7C7;
  --wavy-text-3: #A3A3A3;
  --wavy-text-muted: #A3A3A3;
  --wavy-text-inverse: #303030;
  --wavy-heading: #FFFFFF;

  --wavy-border: rgba(255, 255, 255, 0.12);
  --wavy-border-strong: rgba(255, 255, 255, 0.36);
  --wavy-divider: rgba(255, 255, 255, 0.10);

  --wavy-primary-text: #6FA3F7;
  --wavy-primary-text-hover: #97BDF9;
  --wavy-primary-soft: rgba(45, 108, 223, 0.16);
  --wavy-primary-soft-strong: rgba(45, 108, 223, 0.28);
  --wavy-success-text: #4ADE80;
  --wavy-success-soft: rgba(22, 163, 74, 0.16);
  --wavy-warning-text: #E9A23B;
  --wavy-warning-soft: rgba(233, 162, 59, 0.16);
  --wavy-error-text: #E8736F;
  --wavy-error-soft: rgba(217, 83, 79, 0.16);
  --wavy-info-text: #22D3EE;
  --wavy-info-soft: rgba(8, 145, 178, 0.16);
  --wavy-neutral-text: #C7C7C7;
  --wavy-neutral-soft: rgba(130, 130, 130, 0.22);

  --wavy-glass-bg: rgba(255, 255, 255, 0.04);
  --wavy-glass-bg-hover: rgba(255, 255, 255, 0.07);
  --wavy-glass-border: rgba(255, 255, 255, 0.14);
  --wavy-glass-blur: blur(14px);

  --wavy-input-bg: rgba(255, 255, 255, 0.08);
  --wavy-input-bg-focus: rgba(255, 255, 255, 0.11);
  --wavy-input-border: rgba(255, 255, 255, 0.32);
  --wavy-input-text: #F2F2F2;
  --wavy-input-placeholder: #A3A3A3;

  --wavy-btn-dark-bg: #2D323B;
  --wavy-btn-dark-text: #F2F2F2;
  --wavy-btn-light-bg: #2D323B;
  --wavy-btn-light-hover: #394050;

  --wavy-table-bg: rgba(255, 255, 255, 0.03);
  --wavy-table-head-bg: rgba(45, 108, 223, 0.16);
  --wavy-table-head-border: rgba(45, 108, 223, 0.55);
  --wavy-table-head-text: #FFFFFF;
  --wavy-table-text: #D6D6D6;
  --wavy-table-border: rgba(255, 255, 255, 0.08);
  --wavy-table-hover: rgba(45, 108, 223, 0.10);
  --wavy-table-stripe: rgba(255, 255, 255, 0.02);

  --wavy-bubble-out: #1D3A6E;
  --wavy-bubble-in: rgba(255, 255, 255, 0.11);

  --wavy-tile-bg: rgba(45, 108, 223, 0.08);
  --wavy-tile-bg-hover: rgba(45, 108, 223, 0.16);
  --wavy-segment-bg: rgba(26, 29, 36, 0.95);
  --wavy-segment-border: transparent;
  --wavy-segment-text: #C7C7C7;
  --wavy-segment-active: var(--wavy-gradient);
  --wavy-loader-overlay: rgba(8, 8, 8, 0.4);

  --wavy-modal-bg: rgba(26, 29, 36, 0.92);
  --wavy-modal-header-bg: transparent;
  --wavy-modal-close-bg: rgba(255, 255, 255, 0.1);
  --wavy-modal-close-color: #6FA3F7;

  --wavy-overlay: rgba(0, 0, 0, 0.6);
  --wavy-scrollbar: rgba(255, 255, 255, 0.22);
  --wavy-scrollbar-hover: rgba(255, 255, 255, 0.35);
  --wavy-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --wavy-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --wavy-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
  --wavy-focus-ring: 0 0 0 0.2rem rgba(45, 108, 223, 0.35);
}
}

/* ---- Force light values on one element (e.g. the login card) ----------- */
.wavy-light {
  color-scheme: light;
  --wavy-bg: #F7F9FC;
  --wavy-page-bg: #F7F9FC;
  --wavy-app-panel: #FFFFFF;
  --wavy-app-panel-border: #D9D9D9;
  --wavy-surface: #FFFFFF;
  --wavy-surface-2: #F7F9FC;
  --wavy-surface-3: #EEF1F6;
  --wavy-surface-rgb: 255, 255, 255;
  --wavy-header-bg: #FFFFFF;
  --wavy-header-icon: #303030;
  --wavy-text: #303030;
  --wavy-text-2: #666666;
  --wavy-text-3: #828282;
  --wavy-text-muted: #666666;
  --wavy-text-inverse: #FFFFFF;
  --wavy-heading: #303030;
  --wavy-border: #D9D9D9;
  --wavy-border-strong: #BDBDBD;
  --wavy-divider: #E8ECF2;
  --wavy-primary-text: #1F56B8;
  --wavy-primary-text-hover: #1A4A9F;
  --wavy-primary-soft: #EAF2FF;
  --wavy-primary-soft-strong: #D6E4FF;
  --wavy-success-text: #15803D;
  --wavy-success-soft: #DCFCE7;
  --wavy-warning-text: #9A6212;
  --wavy-warning-soft: #FCF1E0;
  --wavy-error-text: #B7413D;
  --wavy-error-soft: #FAE6E5;
  --wavy-info-text: #0E7490;
  --wavy-info-soft: #E0F5FA;
  --wavy-neutral-text: #666666;
  --wavy-neutral-soft: #EEF1F6;
  --wavy-glass-bg: #FFFFFF;
  --wavy-glass-bg-hover: #F7F9FC;
  --wavy-glass-border: #D9D9D9;
  --wavy-glass-blur: none;
  --wavy-input-bg: #FFFFFF;
  --wavy-input-bg-focus: #FFFFFF;
  --wavy-input-border: #D9D9D9;
  --wavy-input-text: #303030;
  --wavy-input-placeholder: #828282;
  --wavy-overlay: rgba(48, 48, 48, 0.45);
  --wavy-shadow-sm: 0 1px 3px rgba(48, 48, 48, 0.08);
  --wavy-shadow: 0 6px 18px rgba(48, 48, 48, 0.10);
  --wavy-shadow-lg: 0 16px 40px rgba(48, 48, 48, 0.16);
  --wavy-focus-ring: 0 0 0 0.2rem rgba(45, 108, 223, 0.28);
}