/*
 * Euphoria Terminal — Shared Design System
 * core.css — Single source of truth for all pages
 *
 * Every page links this file. Page-specific styles stay inline.
 * To change a brand value, edit HERE — never in individual pages.
 */

/* ─── SELF-HOSTED FONTS ─── */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter/inter-latin-300-normal.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter/inter-latin-300-italic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter/inter-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter/inter-latin-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter/inter-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter/inter-latin-500-italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter/inter-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter/inter-latin-600-italic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter/inter-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter/inter-latin-700-italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
}

/* ─── RESET ─── */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}

/* ─── LOGO ─── */
/* EUPHORIA logo text styling - used across all pages */
.logo-text{
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'SF Pro Text',sans-serif;
  letter-spacing:4px;font-weight:300;font-size:16px;color:rgba(255,255,255,0.9);
  text-transform:uppercase;
}

/* ─── EUPHORIA SVG DRAW ANIMATION ─── */
.euphoria-logo-svg {
  height: 24px;
  width: auto;
  color: var(--text);
  flex-shrink: 0;
}
.euphoria-logo-svg path {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: logoDrawIn 1.2s ease forwards;
}
.euphoria-logo-svg path:nth-child(1)  { animation-delay: 0s }
.euphoria-logo-svg path:nth-child(2)  { animation-delay: 0.05s }
.euphoria-logo-svg path:nth-child(3)  { animation-delay: 0.1s }
.euphoria-logo-svg path:nth-child(4)  { animation-delay: 0.15s }
.euphoria-logo-svg path:nth-child(5)  { animation-delay: 0.2s }
.euphoria-logo-svg path:nth-child(6)  { animation-delay: 0.3s }
.euphoria-logo-svg path:nth-child(7)  { animation-delay: 0.35s }
.euphoria-logo-svg path:nth-child(8)  { animation-delay: 0.45s }
.euphoria-logo-svg path:nth-child(9)  { animation-delay: 0.5s }
.euphoria-logo-svg path:nth-child(10) { animation-delay: 0.55s }
.euphoria-logo-svg path:nth-child(11) { animation-delay: 0.65s }
.euphoria-logo-svg path:nth-child(12) { animation-delay: 0.75s }
.euphoria-logo-svg path:nth-child(13) { animation-delay: 0.8s }
.euphoria-logo-svg path:nth-child(14) { animation-delay: 0.85s }
.euphoria-logo-svg path:nth-child(15) { animation-delay: 0.95s }
.euphoria-logo-svg path:nth-child(16) { animation-delay: 1.0s }
.euphoria-logo-svg path:nth-child(17) { animation-delay: 1.05s }
.euphoria-logo-svg path:nth-child(18) { animation-delay: 1.15s }
.euphoria-logo-svg path:nth-child(19) { animation-delay: 1.2s }

@keyframes logoDrawIn {
  to { stroke-dashoffset: 0; }
}

/* ─── DESIGN TOKENS (Dark Mode — Default) ─── */
:root{
  color-scheme: dark;

  /* Background & Surface */
  --bg:#000000;
  --surface:rgba(255,255,255,0.05);
  --surface-hi:rgba(255,255,255,0.08);
  --surface-hover:rgba(255,255,255,0.07);
  --glass:rgba(255,255,255,0.05);
  --glass-border:rgba(255,255,255,0.1);

  /* Borders */
  --border:rgba(255,255,255,0.1);
  --border-hi:rgba(255,255,255,0.15);
  --border-strong:rgba(255,255,255,0.2);
  --border-active:rgba(49,130,206,0.5);

  /* Text */
  --text:#ffffff;
  --text-secondary:rgba(255,255,255,0.6);
  --text-dim:rgba(255,255,255,0.4);
  --text-tertiary:rgba(255,255,255,0.35);
  --text-muted:rgba(255,255,255,0.4);
  --muted:rgba(255,255,255,0.4);

  /* Brand */
  --accent:#3182ce;

  /* Status */
  --green:#10b981;
  --red:#ef4444;
  --blue:#3182ce;
  --yellow:#f59e0b;
  --cyan:#63b3ed;
  --magenta:#a855f7;
  --orange:#f97316;

  /* RGB channel values for rgba() usage */
  --red-rgb:239,68,68;
  --green-rgb:16,185,129;
  --yellow-rgb:245,158,11;
  /* --accent-rgb: defined but unused — preserved for future JS/inline use */
  --accent-rgb:49,130,206;

  /* Glow */
  --glow:0 0 24px rgba(49,130,206,0.12);

  /* Radius */
  --radius:14px;
  --radius-sm:10px;
  --radius-xs:7px;

  /* Shadows */
  --shadow-sm:0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:0 8px 32px rgba(0,0,0,0.5);

  /* Easing */
  --ease:cubic-bezier(.4,0,.2,1);
  --spring:cubic-bezier(.175,.885,.32,1.275);

  /* Layout */
  --sidebar-w:260px;
  --header-h:56px;
}

/* ─── LIGHT MODE ─── */
body.light{
  color-scheme: light;
  --bg: #ffffff;
  --surface: rgba(49,130,206,0.05);
  --surface-hi: rgba(49,130,206,0.08);
  --surface-hover: rgba(49,130,206,0.08);
  --border: rgba(49,130,206,0.2);
  --border-hi: rgba(49,130,206,0.3);
  --border-strong: rgba(49,130,206,0.3);
  --border-active: rgba(49,130,206,0.5);
  --text: #1a1a2e;
  --text-secondary: rgba(0,0,0,0.6);
  --text-dim: rgba(0,0,0,0.4);
  --text-tertiary: rgba(0,0,0,0.35);
  --text-muted: rgba(0,0,0,0.4);
  --muted: rgba(0,0,0,0.4);
  --accent: #3182ce;
  --green: #10b981;
  --red: #ef4444;
  --yellow: #f59e0b;
  --cyan: #63b3ed;
  --magenta: #a855f7;
  --orange: #f97316;
  --glow: 0 0 24px rgba(49,130,206,0.08);
  --glass: rgba(255,255,255,0.6);
  --glass-border: rgba(49,130,206,0.2);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
}

/* ─── TYPOGRAPHY ─── */
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;
  font-size:16px;
  line-height:1.5;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:'cv11','ss01';
  letter-spacing:-0.015em;
}
code,pre,code *{font-family:'JetBrains Mono','SF Mono',Consolas,monospace}

/* ─── SCROLLBAR STYLING ─── */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
/* Webkit */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

/* ─── BASE ELEMENTS ─── */
button{cursor:pointer;border:none;background:none;color:var(--text);font-family:inherit}
input,textarea{font-family:inherit;color:var(--text);background:none;border:none;outline:none}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ─── ACCESSIBILITY ─── */
/* Keyboard focus: visible outline for all interactive elements */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
/* Remove outline for mouse users on elements that have their own focus style */
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
a:focus:not(:focus-visible){outline:none}

/* ─── SELECTION ─── */
::selection{
  background:rgba(49,130,206,0.35);
  color:var(--text);
}

/* ─── ANIMATIONS ─── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
@keyframes msgSlideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeSlideIn{to{opacity:1;transform:translateY(0)}}
/* overridden by app.css pulse */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px) scale(0.96)}to{opacity:1;transform:none}}
@keyframes toastOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(40px)}}

/* ─── TOAST SYSTEM ─── */
.toast-container{position:fixed;top:64px;right:20px;z-index:999;display:flex;flex-direction:column;gap:8px}
.toast{
  padding:12px 18px 12px 16px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;
  background:rgba(0,0,0,0.95);border:1px solid rgba(255,255,255,0.08);color:var(--text);
  backdrop-filter:blur(40px) saturate(180%);animation:toastIn .3s var(--spring);
  max-width:340px;box-shadow:var(--shadow-lg);
  border-left:3px solid rgba(255,255,255,0.12);
  transition:all 0.2s var(--ease);
}
body.light .toast{background:rgba(255,255,255,0.95);border-color:rgba(0,0,0,0.06);color:var(--text)}
.toast.error{border-color:rgba(255,69,58,0.15);border-left-color:var(--red);color:var(--red)}
.toast.success{border-color:rgba(48,209,88,0.15);border-left-color:var(--green);color:var(--green)}
.toast.info{border-color:rgba(49,130,206,0.15);border-left-color:var(--accent);color:var(--cyan)}
.toast.warning{border-color:rgba(255,159,10,0.15);border-left-color:var(--orange);color:var(--orange)}

/* ─── BUTTONS ─── */
/* Standardized button classes for consistency across all pages */
.btn{
  height:36px;padding:0 16px;border-radius:6px;font-size:13px;font-weight:600;
  background:var(--surface);border:1px solid var(--border);color:var(--text);
  transition:all .15s var(--ease);cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;gap:6px;font-family:inherit;
}
.btn:hover{background:var(--surface-hi);border-color:var(--border-hi)}
.btn:active{transform:scale(0.96);transition-duration:.1s}
.btn:disabled{opacity:.3;cursor:not-allowed}

/* Primary button: brand blue background */
.btn-primary{background:#3182ce;color:white;border-color:#3182ce}
.btn-primary:hover{background:#2c6fb8;border-color:#2c6fb8}
.btn-primary:active{transform:scale(0.96)}

/* Secondary button: transparent with subtle border */
.btn-secondary{background:transparent;border:1px solid rgba(255,255,255,0.15);color:white}
.btn-secondary:hover{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.25)}

/* Danger button */
.btn-danger{color:var(--red);border-color:rgba(239,68,68,0.3)}
.btn-danger:hover{background:rgba(239,68,68,0.1)}

/* Small button variant */
.btn-sm{height:28px;padding:0 12px;font-size:12px;border-radius:6px}

/* Icon button: square, centered icon */
.btn-icon{width:32px;height:32px;padding:0;border-radius:6px;display:inline-flex;
  align-items:center;justify-content:center;background:var(--surface);
  border:1px solid var(--border);color:var(--text);cursor:pointer;
  transition:all .15s var(--ease)}
.btn-icon:hover{background:var(--surface-hi);border-color:var(--border-hi)}
.btn-icon:active{transform:scale(0.96)}

/* Active state with glow (for Plan/Execute toggle) */
.btn-active-glow{box-shadow:0 0 12px rgba(49,130,206,0.4);border:1px solid #3182ce}

/* Inactive subtle state */
.btn-inactive{border:1px solid rgba(255,255,255,0.1);background:transparent}

/* ─── CARDS ─── */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;backdrop-filter:blur(40px) saturate(180%);
  transition:border-color .2s var(--ease);
}
.card:hover{border-color:var(--border-hi)}

/* ─── FORM LABELS ─── */
.form-label,
label{
  font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:.5px;color:var(--muted);display:block;margin-bottom:6px;
}

/* ─── FORM INPUTS ─── */
.input{
  width:100%;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px 16px;color:var(--text);font-size:14px;
  font-family:'Inter',sans-serif;outline:none;transition:border-color .2s;
}
.input:focus{border-color:var(--border-hi);box-shadow:0 0 0 3px rgba(49,130,206,0.12)}
.input::placeholder{color:var(--muted)}

/* ─── BADGES ─── */
.badge{
  display:inline-block;padding:2px 8px;border-radius:6px;
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;
}
.badge-green{background:rgba(48,209,88,0.12);color:var(--green)}
.badge-red{background:rgba(255,69,58,0.12);color:var(--red)}
.badge-yellow{background:rgba(255,214,10,0.12);color:var(--yellow)}
.badge-cyan{background:rgba(99,179,237,0.12);color:var(--cyan)}
.badge-magenta{background:rgba(191,90,242,0.12);color:var(--magenta)}

/* ─── TABLE HEADERS ─── */
th{
  font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:.5px;color:var(--muted);text-align:left;
}

/* ─── AVATAR ─── */
.avatar{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--cyan),var(--magenta));
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:12px;cursor:pointer;flex-shrink:0;
}

/* ─── CONNECTION DOT ─── */
.conn-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:var(--red);transition:background-color .3s var(--ease);
}
.conn-dot.connected{background:var(--green);box-shadow:0 0 8px rgba(48,209,88,0.4)}

/* ─── WORKSPACE SWITCHER ─── */
/* NOTE: Full .ws-dropdown and .ws-item rules live in app.css (opacity/transform toggle).
   This stub has been removed to prevent display:none/block conflict with app.css's
   opacity+pointer-events visibility pattern. */

/* ─── MODAL OVERLAY ─── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.7);
  backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:100;
}
.modal-overlay.show{display:flex}
.modal-content{
  background:rgba(10,10,15,0.98);border:1px solid var(--border);
  border-radius:20px;padding:24px;width:100%;max-width:440px;
  backdrop-filter:blur(40px) saturate(180%);box-shadow:var(--shadow-lg);
  animation:scaleIn .2s var(--ease);
}
body.light .modal-content{background:rgba(255,255,255,0.98)}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important}
}

/* ─── SHARED MOBILE RESPONSIVE ─── */
/* Minimum touch target: 44px */
@media (hover:none) and (pointer:coarse){
  button,.btn,.btn-sm,.btn-primary,.btn-icon,input[type="submit"],input[type="button"]{min-height:44px;min-width:44px}
  input,select,textarea{font-size:16px}
  .nav-item{min-height:44px}
}

/* Responsive typography */
@media(max-width:768px){
  body{font-size:15px}
  .card{border-radius:12px}
  /* Hide agent pills on mobile — too wide for small screens */
  .agent-pill{display:none !important}
  /* Compact header on mobile */
  .euphoria-logo-svg{height:18px}
  .ws-switcher .ws-trigger span,
  .ws-switcher span[style*="font-size:13px"]{font-size:11px !important}
  /* Header buttons smaller */
  .header-btn{width:30px !important;height:30px !important}
}

@media(max-width:480px){
  body{font-size:14px}
  ::-webkit-scrollbar{width:4px;height:4px}
}

/* Responsive tables helper class */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%}
.table-wrap table{min-width:600px}

/* Touch-friendly modal on mobile */
@media(max-width:640px){
  .modal-overlay{padding:16px}
  .modal-content{max-width:none;width:100%;margin:0;border-radius:16px;padding:20px}
}

/* Ensure no horizontal scroll on body */
html,body{max-width:100vw}

/* Safe area insets for notched devices */
@supports (padding:max(0px)){
  .header{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
  .main{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
  @media(max-width:768px){
    .header{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
    .main{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  }
}