/**
 * Chatwoot Captain - Shared Design System
 * 
 * This CSS file matches Chatwoot's native design system including:
 * - Color palette
 * - Typography
 * - Spacing
 * - Components (buttons, cards, forms, tables)
 * - Responsive breakpoints
 */

/* ============================================
   CSS VARIABLES (Chatwoot Theme)
   ============================================ */
:root {
  /* Primary Colors */
  --w-500: #1f93ff;
  --w-600: #1976d2;
  --w-700: #1565c0;
  --w-50: #e3f2fd;
  --w-100: #bbdefb;
  
  /* Secondary Colors */
  --s-500: #7c3aed;
  --s-600: #6d28d9;
  
  /* Semantic Colors */
  --g-500: #16a34a;  /* Green - Success */
  --g-50: #dcfce7;
  --r-500: #dc2626;  /* Red - Danger */
  --r-50: #fef2f2;
  --y-500: #eab308;  /* Yellow - Warning */
  --y-50: #fefce8;
  --b-500: #2563eb;  /* Blue - Info */
  --b-50: #eff6ff;
  
  /* Neutral Colors (Slate) */
  --c-50: #f8fafc;
  --c-75: #f1f5f9;
  --c-100: #e2e8f0;
  --c-200: #cbd5e1;
  --c-300: #94a3b8;
  --c-400: #64748b;
  --c-500: #475569;
  --c-600: #334155;
  --c-700: #1e293b;
  --c-800: #0f172a;
  --c-900: #020617;
  
  /* Background Colors */
  --color-background: #f8fafc;
  --color-background-light: #ffffff;
  --color-background-dark: #f1f5f9;
  
  /* Text Colors */
  --color-body: #334155;
  --color-heading: #1e293b;
  --color-muted: #64748b;
  --color-light: #94a3b8;
  
  /* Border */
  --color-border: #e2e8f0;
  --color-border-dark: #cbd5e1;
  
  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --font-size-micro: 0.625rem;   /* 10px */
  --font-size-mini: 0.75rem;     /* 12px */
  --font-size-small: 0.8125rem;  /* 13px */
  --font-size-default: 0.875rem; /* 14px */
  --font-size-medium: 1rem;      /* 16px */
  --font-size-large: 1.125rem;   /* 18px */
  --font-size-bigger: 1.25rem;   /* 20px */
  --font-size-big: 1.5rem;       /* 24px */
  
  /* Spacing */
  --space-micro: 0.25rem;   /* 4px */
  --space-smaller: 0.5rem;  /* 8px */
  --space-small: 0.75rem;   /* 12px */
  --space-one: 1rem;        /* 16px */
  --space-slab: 1.25rem;    /* 20px */
  --space-two: 1.5rem;      /* 24px */
  --space-medium: 2rem;     /* 32px */
  --space-large: 2.5rem;    /* 40px */
  --space-larger: 3rem;     /* 48px */
  --space-mega: 4rem;       /* 64px */
  
  /* Border Radius */
  --border-radius-micro: 0.125rem;  /* 2px */
  --border-radius-small: 0.25rem;   /* 4px */
  --border-radius-normal: 0.5rem;   /* 8px */
  --border-radius-medium: 0.75rem;  /* 12px */
  --border-radius-large: 1rem;      /* 16px */
  --border-radius-rounded: 9999px;
  
  /* Shadows */
  --shadow-small: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-medium: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-large: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  
  /* Transitions */
  --transition-fast: 100ms ease-in-out;
  --transition-normal: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-default);
  line-height: 1.5;
  color: var(--color-body);
  background-color: var(--color-background);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading);
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: var(--space-small);
}

h1 { font-size: var(--font-size-big); }
h2 { font-size: var(--font-size-bigger); }
h3 { font-size: var(--font-size-large); }
h4 { font-size: var(--font-size-medium); }
h5 { font-size: var(--font-size-default); }
h6 { font-size: var(--font-size-small); }

p {
  margin-bottom: var(--space-one);
}

a {
  color: var(--w-500);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--w-700);
  text-decoration: underline;
}

.text-muted { color: var(--color-muted); }
.text-light { color: var(--color-light); }
.text-success { color: var(--g-500); }
.text-danger { color: var(--r-500); }
.text-warning { color: var(--y-500); }
.text-info { color: var(--b-500); }

/* ============================================
   LAYOUT
   ============================================ */
.captain-container {
  width: 100%;
  max-width: 100%;
  padding: var(--space-one);
}

.captain-container--full {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-two);
}

.captain-row {
  display: flex;
  flex-wrap: wrap;
  margin: calc(var(--space-smaller) * -1);
}

.captain-col {
  flex: 1;
  padding: var(--space-smaller);
}

.captain-grid {
  display: grid;
  gap: var(--space-one);
}

.captain-grid--2 { grid-template-columns: repeat(2, 1fr); }
.captain-grid--3 { grid-template-columns: repeat(3, 1fr); }
.captain-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
  .captain-grid--2,
  .captain-grid--3,
  .captain-grid--4 {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   CARDS
   ============================================ */
.captain-card {
  background: var(--color-background-light);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-normal);
  padding: var(--space-one);
  box-shadow: var(--shadow-small);
}

.captain-card--elevated {
  box-shadow: var(--shadow-medium);
}

.captain-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-small);
  margin-bottom: var(--space-one);
  border-bottom: 1px solid var(--color-border);
}

.captain-card__title {
  font-size: var(--font-size-medium);
  font-weight: 600;
  color: var(--color-heading);
  margin: 0;
}

.captain-card__body {
  padding: var(--space-small) 0;
}

.captain-card__footer {
  padding-top: var(--space-small);
  margin-top: var(--space-one);
  border-top: 1px solid var(--color-border);
}

/* ============================================
   BUTTONS
   ============================================ */
.woot-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-smaller);
  padding: var(--space-smaller) var(--space-one);
  font-family: var(--font-family);
  font-size: var(--font-size-default);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--border-radius-small);
  cursor: pointer;
  transition: all var(--transition-normal);
  white-space: nowrap;
}

.woot-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.woot-button:focus {
  outline: 2px solid var(--w-500);
  outline-offset: 2px;
}

/* Button Variants */
.woot-button--primary {
  background-color: var(--w-500);
  color: white;
  border-color: var(--w-500);
}

.woot-button--primary:hover:not(:disabled) {
  background-color: var(--w-600);
  border-color: var(--w-600);
}

.woot-button--secondary {
  background-color: white;
  color: var(--c-600);
  border-color: var(--color-border-dark);
}

.woot-button--secondary:hover:not(:disabled) {
  background-color: var(--c-50);
}

.woot-button--success {
  background-color: var(--g-500);
  color: white;
  border-color: var(--g-500);
}

.woot-button--success:hover:not(:disabled) {
  background-color: #15803d;
}

.woot-button--danger {
  background-color: var(--r-500);
  color: white;
  border-color: var(--r-500);
}

.woot-button--danger:hover:not(:disabled) {
  background-color: #b91c1c;
}

.woot-button--warning {
  background-color: var(--y-500);
  color: var(--c-800);
  border-color: var(--y-500);
}

.woot-button--ghost {
  background-color: transparent;
  color: var(--c-600);
  border-color: transparent;
}

.woot-button--ghost:hover:not(:disabled) {
  background-color: var(--c-75);
}

/* Button Sizes */
.woot-button--small {
  padding: var(--space-micro) var(--space-smaller);
  font-size: var(--font-size-small);
}

.woot-button--large {
  padding: var(--space-small) var(--space-slab);
  font-size: var(--font-size-medium);
}

.woot-button--full {
  width: 100%;
}

.woot-button--icon {
  padding: var(--space-smaller);
  width: 36px;
  height: 36px;
}

.woot-button--icon-small {
  padding: var(--space-micro);
  width: 28px;
  height: 28px;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
.captain-form-group {
  margin-bottom: var(--space-one);
}

.captain-label {
  display: block;
  font-size: var(--font-size-small);
  font-weight: 500;
  color: var(--color-heading);
  margin-bottom: var(--space-micro);
}

.captain-input,
.captain-select,
.captain-textarea {
  width: 100%;
  padding: var(--space-smaller) var(--space-small);
  font-family: var(--font-family);
  font-size: var(--font-size-default);
  color: var(--color-body);
  background-color: white;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--border-radius-small);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.captain-input:focus,
.captain-select:focus,
.captain-textarea:focus {
  outline: none;
  border-color: var(--w-500);
  box-shadow: 0 0 0 3px var(--w-50);
}

.captain-input::placeholder {
  color: var(--color-light);
}

.captain-textarea {
  min-height: 100px;
  resize: vertical;
}

.captain-checkbox-group {
  display: flex;
  align-items: center;
  gap: var(--space-smaller);
}

.captain-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--w-500);
}

.captain-help-text {
  font-size: var(--font-size-mini);
  color: var(--color-muted);
  margin-top: var(--space-micro);
}

.captain-error-text {
  font-size: var(--font-size-mini);
  color: var(--r-500);
  margin-top: var(--space-micro);
}

/* ============================================
   STATUS INDICATORS
   ============================================ */
.captain-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-smaller);
  font-size: var(--font-size-small);
}

.captain-status__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.captain-status--online .captain-status__dot { background-color: var(--g-500); }
.captain-status--offline .captain-status__dot { background-color: var(--c-300); }
.captain-status--busy .captain-status__dot { background-color: var(--r-500); }
.captain-status--away .captain-status__dot { background-color: var(--y-500); }

.captain-status--pulse .captain-status__dot {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ============================================
   BADGES
   ============================================ */
.captain-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-micro) var(--space-smaller);
  font-size: var(--font-size-mini);
  font-weight: 500;
  border-radius: var(--border-radius-rounded);
}

.captain-badge--success {
  background-color: var(--g-50);
  color: var(--g-500);
}

.captain-badge--danger {
  background-color: var(--r-50);
  color: var(--r-500);
}

.captain-badge--warning {
  background-color: var(--y-50);
  color: #a16207;
}

.captain-badge--info {
  background-color: var(--w-50);
  color: var(--w-600);
}

.captain-badge--neutral {
  background-color: var(--c-100);
  color: var(--c-600);
}

/* ============================================
   TABLES
   ============================================ */
.captain-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-default);
}

.captain-table th,
.captain-table td {
  padding: var(--space-small) var(--space-one);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.captain-table th {
  background-color: var(--c-50);
  font-weight: 600;
  color: var(--color-heading);
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.captain-table tbody tr:hover {
  background-color: var(--c-50);
}

.captain-table--striped tbody tr:nth-child(even) {
  background-color: var(--c-50);
}

/* ============================================
   ALERTS & NOTIFICATIONS
   ============================================ */
.captain-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-small);
  padding: var(--space-small) var(--space-one);
  border-radius: var(--border-radius-normal);
  border-left: 4px solid;
  margin-bottom: var(--space-one);
}

.captain-alert--info {
  background-color: var(--b-50);
  border-left-color: var(--b-500);
  color: #1e40af;
}

.captain-alert--success {
  background-color: var(--g-50);
  border-left-color: var(--g-500);
  color: #166534;
}

.captain-alert--warning {
  background-color: var(--y-50);
  border-left-color: var(--y-500);
  color: #a16207;
}

.captain-alert--danger {
  background-color: var(--r-50);
  border-left-color: var(--r-500);
  color: #991b1b;
}

.captain-alert__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.captain-alert__content {
  flex: 1;
}

.captain-alert__title {
  font-weight: 600;
  margin-bottom: var(--space-micro);
}

/* ============================================
   LOADING STATES
   ============================================ */
.captain-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-top-color: var(--w-500);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.captain-spinner--large {
  width: 40px;
  height: 40px;
  border-width: 3px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.captain-skeleton {
  background: linear-gradient(90deg, var(--c-100) 25%, var(--c-50) 50%, var(--c-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--border-radius-small);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================
   NAVIGATION / TABS
   ============================================ */
.captain-tabs {
  display: flex;
  gap: var(--space-micro);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-one);
}

.captain-tab {
  padding: var(--space-small) var(--space-one);
  font-size: var(--font-size-default);
  font-weight: 500;
  color: var(--color-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-bottom: -1px;
}

.captain-tab:hover {
  color: var(--color-heading);
}

.captain-tab--active {
  color: var(--w-500);
  border-bottom-color: var(--w-500);
}

/* ============================================
   SIDEBAR PANEL SPECIFIC
   ============================================ */
.captain-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-background-light);
}

.captain-panel__header {
  padding: var(--space-one);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-background-light);
}

.captain-panel__title {
  font-size: var(--font-size-medium);
  font-weight: 600;
  color: var(--color-heading);
  display: flex;
  align-items: center;
  gap: var(--space-smaller);
}

.captain-panel__body {
  flex: 1;
  padding: var(--space-one);
  overflow-y: auto;
}

.captain-panel__footer {
  padding: var(--space-one);
  border-top: 1px solid var(--color-border);
  background: var(--color-background);
}

/* ============================================
   CALL STATUS SPECIFIC
   ============================================ */
.captain-call-status {
  display: flex;
  align-items: center;
  padding: var(--space-small) var(--space-one);
  background: var(--c-50);
  border-radius: var(--border-radius-normal);
  margin-bottom: var(--space-one);
}

.captain-call-status__indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: var(--space-small);
  flex-shrink: 0;
}

.captain-call-status--idle .captain-call-status__indicator { background: var(--c-300); }
.captain-call-status--registered .captain-call-status__indicator { background: var(--g-500); }
.captain-call-status--ringing .captain-call-status__indicator { 
  background: var(--y-500);
  animation: pulse 1s infinite;
}
.captain-call-status--active .captain-call-status__indicator { background: var(--w-500); }
.captain-call-status--error .captain-call-status__indicator { background: var(--r-500); }

.captain-call-timer {
  font-size: var(--font-size-big);
  font-weight: 600;
  font-family: 'SF Mono', 'Roboto Mono', monospace;
  text-align: center;
  padding: var(--space-one);
  color: var(--color-heading);
}

.captain-call-controls {
  display: flex;
  gap: var(--space-smaller);
}

.captain-call-controls .woot-button {
  flex: 1;
}

/* ============================================
   CONTACT INFO SECTION
   ============================================ */
.captain-contact-info {
  background: var(--c-50);
  border-radius: var(--border-radius-normal);
  padding: var(--space-one);
  margin-top: var(--space-one);
}

.captain-contact-info__title {
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: var(--space-smaller);
}

.captain-contact-info__item {
  display: flex;
  align-items: center;
  gap: var(--space-smaller);
  font-size: var(--font-size-small);
  color: var(--color-muted);
  margin-bottom: var(--space-micro);
}

.captain-contact-info__item:last-child {
  margin-bottom: 0;
}

/* ============================================
   EMPTY STATES
   ============================================ */
.captain-empty {
  text-align: center;
  padding: var(--space-large);
  color: var(--color-muted);
}

.captain-empty__icon {
  font-size: 48px;
  margin-bottom: var(--space-one);
  opacity: 0.5;
}

.captain-empty__title {
  font-size: var(--font-size-medium);
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: var(--space-smaller);
}

.captain-empty__description {
  font-size: var(--font-size-default);
  margin-bottom: var(--space-one);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-smaller); }
.gap-2 { gap: var(--space-one); }
.gap-3 { gap: var(--space-two); }

.mt-1 { margin-top: var(--space-smaller); }
.mt-2 { margin-top: var(--space-one); }
.mt-3 { margin-top: var(--space-two); }
.mb-1 { margin-bottom: var(--space-smaller); }
.mb-2 { margin-bottom: var(--space-one); }
.mb-3 { margin-bottom: var(--space-two); }

.p-1 { padding: var(--space-smaller); }
.p-2 { padding: var(--space-one); }
.p-3 { padding: var(--space-two); }

.hidden { display: none; }
.visible { visibility: visible; }
.invisible { visibility: hidden; }

.w-full { width: 100%; }
.h-full { height: 100%; }

.rounded { border-radius: var(--border-radius-normal); }
.rounded-lg { border-radius: var(--border-radius-large); }
.rounded-full { border-radius: var(--border-radius-rounded); }

.shadow { box-shadow: var(--shadow-medium); }
.shadow-lg { box-shadow: var(--shadow-large); }

.border { border: 1px solid var(--color-border); }
.border-t { border-top: 1px solid var(--color-border); }
.border-b { border-bottom: 1px solid var(--color-border); }

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */
@media (max-width: 1200px) {
  .captain-container--full {
    padding: var(--space-one);
  }
}

@media (max-width: 768px) {
  .captain-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .captain-tab {
    flex-shrink: 0;
  }
  
  .captain-call-controls {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  :root {
    --space-one: 0.75rem;
    --space-two: 1rem;
  }
  
  .captain-card {
    padding: var(--space-small);
  }
}