/* ═══════════════════════════════════════════════════════════════
   Ensoria Theme — OpenClaw Control UI
   
   Brand Identity: ENSORIA-BRAND.md v1.1 (ENSORIA-IDENTITY-MANIFEST.md)
   Maps the full Ensoria teal palette to OpenClaw's CSS custom properties.
   
   Palette:
     Soft   → #D1EEEA  (accent-soft / highlight)
     Teal-1 → #A1D7D6  (accent hover, secondary accent)
     Teal-2 → #79BBC3  (dark mode primary accent)
     Teal-3 → #599BAE  (support blue)
     Core   → #3F7994  (light mode primary accent)
     Deep   → #2A5674  (primary hover / active)
   
   Typography: Inter (body/display), JetBrains Mono (code)
   ═══════════════════════════════════════════════════════════════ */

/* ── Import Inter from Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── Import JetBrains Mono from Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&display=swap');


/* ═══════════════════════════════════════════════
   DESIGN TOKENS — Ensoria Dark Theme
   ═══════════════════════════════════════════════ */
:root[data-theme="dark"],
:root[data-theme="openknot"],
:root[data-theme="dash"],
:root[data-theme-mode="dark"] {
  /* ── Font Stack ── */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter', 'SF Pro Display', -apple-system, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace;

  /* ── Accent (Teal) ── */
  --accent: #79BBC3;
  --accent-hover: #A1D7D6;
  --accent-2: #599BAE;
  --accent-2-subtle: rgba(89, 155, 174, 0.16);
  --accent-muted: #BBD7DA;
  --accent-subtle: rgba(121, 187, 195, 0.18);
  --accent-glow: rgba(121, 187, 195, 0.20);

  /* ── Backgrounds ── */
  --bg: #0D1A23;
  --bg-hover: rgba(209, 238, 234, 0.06);
  --bg-elevated: #122431;
  --bg-muted: #173244;
  --bg-accent: #0F171E;

  /* ── Cards & Surfaces ── */
  --card: #122431;
  --card-highlight: rgba(209, 238, 234, 0.04);

  /* ── Panels ── */
  --panel: #0F1A24;
  --panel-strong: #122431;
  --chrome: #0D1A23;
  --chrome-strong: #122431;

  /* ── Text ── */
  --text: #ECF8F7;
  --text-strong: #F5FCFB;
  --chat-text: #E2EDEC;
  --foreground: #ECF8F7;

  /* ── Muted Text ── */
  --muted: #BBD7DA;
  --muted-strong: #D1E9EA;

  /* ── Borders ── */
  --border: rgba(209, 238, 234, 0.12);
  --border-strong: rgba(209, 238, 234, 0.24);
  --input: rgba(209, 238, 234, 0.16);

  /* ── Ring / Focus ── */
  --ring: #79BBC3;
  --focus: #79BBC3;
  --focus-ring: 0 0 0 2px rgba(121, 187, 195, 0.24);
  --focus-glow: rgba(121, 187, 195, 0.15);

  /* ── Primary Foreground (text on accent bg) ── */
  --primary-foreground: #0D1A23;

  /* ── Popovers ── */
  --popover: #173244;
  --popover-foreground: #ECF8F7;

  /* ── Secondary ── */
  --secondary: #173244;
  --secondary-foreground: #BBD7DA;
  --surface-2: #173244;

  /* ── Semantic Colors ── */
  --info: #599BAE;
  --info-muted: rgba(89, 155, 174, 0.18);
  --ok: #5DB987;
  --ok-subtle: rgba(93, 185, 135, 0.14);
  --ok-muted: rgba(93, 185, 135, 0.7);
  --warn: #E0B85E;
  --warn-subtle: rgba(224, 184, 94, 0.14);
  --danger: #D96C7E;
  --danger-subtle: rgba(217, 108, 126, 0.14);
  --danger-color: #D96C7E;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.32);

  /* ── Radius ── */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* ── Transitions ── */
  --duration-fast: 180ms;
  --duration-normal: 280ms;
  --duration-slow: 400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
}


/* ═══════════════════════════════════════════════
   DESIGN TOKENS — Ensoria Light Theme
   ═══════════════════════════════════════════════ */
:root[data-theme="light"],
:root[data-theme="openknot-light"],
:root[data-theme="dash-light"],
:root[data-theme-mode="light"] {
  /* ── Font Stack ── */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter', 'SF Pro Display', -apple-system, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace;

  /* ── Accent (Teal) ── */
  --accent: #3F7994;
  --accent-hover: #2A5674;
  --accent-2: #79BBC3;
  --accent-2-subtle: rgba(121, 187, 195, 0.12);
  --accent-muted: #4D6D7D;
  --accent-subtle: rgba(63, 121, 148, 0.08);
  --accent-glow: rgba(63, 121, 148, 0.14);

  /* ── Backgrounds ── */
  --bg: #F4F5F6;
  --bg-hover: rgba(42, 86, 116, 0.05);
  --bg-elevated: #FFFFFF;
  --bg-muted: #EDF5F6;
  --bg-accent: #F8FBFB;

  /* ── Cards & Surfaces ── */
  --card: #FFFFFF;
  --card-highlight: rgba(42, 86, 116, 0.03);

  /* ── Panels ── */
  --panel: #FFFFFF;
  --panel-strong: #F8FBFB;
  --chrome: #F4F5F6;
  --chrome-strong: #FFFFFF;

  /* ── Text ── */
  --text: #173244;
  --text-strong: #0D1A23;
  --chat-text: #173244;
  --foreground: #173244;

  /* ── Muted Text ── */
  --muted: #4D6D7D;
  --muted-strong: #3A5A6A;

  /* ── Borders ── */
  --border: rgba(42, 86, 116, 0.12);
  --border-strong: rgba(42, 86, 116, 0.22);
  --input: rgba(42, 86, 116, 0.16);

  /* ── Ring / Focus ── */
  --ring: #3F7994;
  --focus: #3F7994;
  --focus-ring: 0 0 0 2px rgba(63, 121, 148, 0.20);
  --focus-glow: rgba(63, 121, 148, 0.12);

  /* ── Primary Foreground (text on accent bg) ── */
  --primary-foreground: #FFFFFF;

  /* ── Popovers ── */
  --popover: #FFFFFF;
  --popover-foreground: #173244;

  /* ── Secondary ── */
  --secondary: #EDF5F6;
  --secondary-foreground: #4D6D7D;
  --surface-2: #EDF5F6;

  /* ── Semantic Colors ── */
  --info: #3F7994;
  --info-muted: rgba(63, 121, 148, 0.12);
  --ok: #5DB987;
  --ok-subtle: rgba(93, 185, 135, 0.10);
  --ok-muted: rgba(93, 185, 135, 0.7);
  --warn: #D4A84C;
  --warn-subtle: rgba(212, 168, 76, 0.10);
  --danger: #C95B6E;
  --danger-subtle: rgba(201, 91, 110, 0.10);
  --danger-color: #C95B6E;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px rgba(23, 50, 68, 0.06);
  --shadow-md: 0 12px 30px rgba(42, 86, 116, 0.10);
  --shadow-lg: 0 24px 60px rgba(42, 86, 116, 0.18);
  --shadow-xl: 0 32px 80px rgba(42, 86, 116, 0.20);
  --shadow-card: 0 2px 8px rgba(23, 50, 68, 0.08);

  /* ── Radius ── */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* ── Transitions ── */
  --duration-fast: 180ms;
  --duration-normal: 280ms;
  --duration-slow: 400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
}


/* ═══════════════════════════════════════════════
   BRAND WORDMARK — Ensoria wordmark (dark + light)
   ═══════════════════════════════════════════════ */

/* Shared wordmark mixin via CSS custom property */
:root {
  --ensoria-wordmark-dark: url('/assets/ensoria-logo-icon-horizontal-dark.svg');
  --ensoria-wordmark-light: url('/assets/ensoria-logo-icon-horizontal-light.svg');
}

/* ── Login gate logo — replace favicon with wordmark ── */
.login-gate__logo {
  content: var(--ensoria-wordmark-dark) !important;
  width: 148px !important;
  height: auto !important;
  max-height: 40px !important;
  object-fit: contain !important;
}

[data-theme-mode="light"] .login-gate__logo {
  content: var(--ensoria-wordmark-light) !important;
}

/* ── Sidebar brand wordmark ── */
.sidebar-brand {
  display: flex !important;
  flex: 1 !important;
  min-width: 148px !important;
  min-height: 56px !important;
  padding: 14px 12px !important;
  background: var(--ensoria-wordmark-dark) no-repeat 14px center !important;
  background-size: auto 24px !important;
  overflow: hidden !important;
}

.sidebar-brand__logo,
.sidebar-brand__copy {
  display: none !important;
}

[data-theme-mode="light"] .sidebar-brand {
  background-image: var(--ensoria-wordmark-light) !important;
}

.sidebar-brand::after {
  display: none !important;
}

.sidebar--collapsed .sidebar-brand {
  display: none !important;
}

/* Nascondi l'intera sezione "Appearance" e il selettore nella topbar */
.settings-appearance,
.topbar-theme-mode {
  display: none !important;
}

/* Rimuovi il gap tra le azioni nella topbar */
.topnav-shell__actions {
  gap: 0 !important;
}

/* ═══════════════════════════════════════════════
   TOPNAV — Style tweaks
   ═══════════════════════════════════════════════ */
.topnav-shell {
  border-bottom: none !important;
}


/* ═══════════════════════════════════════════════
   CHAT — User bubbles in teal
   ═══════════════════════════════════════════════ */
[data-theme-mode="dark"] .chat-line.user .chat-bubble {
  background: rgba(121, 187, 195, 0.14) !important;
  border-color: rgba(121, 187, 195, 0.18) !important;
}

[data-theme-mode="light"] .chat-line.user .chat-bubble {
  background: rgba(63, 121, 148, 0.08) !important;
  border-color: rgba(63, 121, 148, 0.16) !important;
}


/* ═══════════════════════════════════════════════
   BUTTONS — Primary accent
   ═══════════════════════════════════════════════ */
.btn.primary {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: var(--primary-foreground) !important;
}

.btn.primary:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}


/* ═══════════════════════════════════════════════
   ACCENT DECORATION — Teal left border on cards
   ═══════════════════════════════════════════════ */
/* Add subtle teal left border to config section cards */
.config-section-card {
  border-left: 3px solid var(--accent) !important;
}

/* Dashboard overview cards get a subtle accent bottom border */
.ov-card {
  border-bottom: 2px solid var(--accent-subtle) !important;
}


/* ═══════════════════════════════════════════════
   SCROLLBARS — Teal tint
   ═══════════════════════════════════════════════ */
::-webkit-scrollbar-thumb {
  background: var(--border-strong) !important;
  border-radius: var(--radius-full) !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent) !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
}


/* ═══════════════════════════════════════════════
   CHAT COMPOSE FOCUS — Teal ring
   ═══════════════════════════════════════════════ */
.chat-compose__field textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-subtle) !important;
}


/* ═══════════════════════════════════════════════
   SELECTION — Teal highlight
   ═══════════════════════════════════════════════ */
::selection {
  background: var(--accent) !important;
  color: var(--primary-foreground) !important;
}


/* ═══════════════════════════════════════════════
   MOBILE — Responsive
   ═══════════════════════════════════════════════ */
@media (max-width: 767px) {
  .sidebar-brand {
    align-items: center !important;
    padding: 10px 0 !important;
  }
  .sidebar-brand::after {
    font-size: 16px !important;
    text-align: center !important;
  }
  .sidebar-shell__body {
    align-items: center !important;
  }
}