/* ═══════════════════════════════════════════════════════════════
   Kalkulio – Design System
   ═══════════════════════════════════════════════════════════════
   Layer 1: Design tokens  (CSS custom properties)
   Layer 2: Semantic component classes  (dk-*)
   Layer 3: Builder-specific utilities  (do not modify)
   ═══════════════════════════════════════════════════════════════ */


/* ── Layer 1: Design Tokens ─────────────────────────────────── */

:root {
  /* Navy scale – sidebar, header, accents */
  --c-navy-950: #0B1E33;
  --c-navy-900: #091628;
  --c-navy-800: #112B45;
  --c-navy-700: #1A3054;
  --c-navy-600: #1E3A5F;

  /* Gold scale – buttons, highlights */
  --c-gold-300: #E8C97A;
  --c-gold-400: #D9B45B;
  --c-gold-500: #C8A23A;
  --c-gold-600: #B08A2A;
  --c-gold-700: #9A7522;

  /* Typography – optimised for white / light surfaces */
  --text-primary:   #0F172A;   /* slate-900  */
  --text-secondary: #475569;   /* slate-600  */
  --text-muted:     #94A3B8;   /* slate-400  */

  /* Surfaces – light theme */
  --surface-base:    #F8FAFC;  /* page background   */
  --surface-raised:  #FFFFFF;  /* cards             */
  --surface-overlay: #F1F5F9;  /* table thead       */
  --surface-input:   #FFFFFF;  /* form controls     */

  /* Borders */
  --border-subtle:      #E2E8F0;           /* card edges, dividers  */
  --border-input:       #CBD5E1;           /* input default state   */
  --border-input-focus: var(--c-gold-500); /* input focused state   */

  /* Feedback */
  --color-error:   #DC2626;
  --color-success: #16A34A;
}


/* ── Layer 2: Component Classes ─────────────────────────────── */

/* Global */
html { scroll-behavior: smooth; }
details summary::-webkit-details-marker { display: none; }
*:focus-visible { outline: 2px solid var(--c-gold-500); outline-offset: 2px; }

/* ── Card ──────────────────────────────────────────────────── */
.dk-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 0.75rem;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06), 0 4px 16px rgba(15, 23, 42, 0.04);
}
.dk-card-2xl {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 1rem;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06), 0 4px 16px rgba(15, 23, 42, 0.04);
}

/* ── Calculator preview stage ──────────────────────────────
   Simulates how the widget looks embedded on a client page.  */
.calc-stage {
  background: #EEF2F7;
  border: 1px solid #D1D9E6;
  border-radius: 12px;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.calc-stage-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7B8EAA;
  margin-bottom: 28px;
}
.calc-stage-card {
  width: 100%;
  max-width: 480px;
  background: #112B45;
  border: 1px solid rgba(241, 245, 249, 0.08);
  border-radius: 16px;
  padding: 32px;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.25),
    0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ── Data Table ────────────────────────────────────────────── */
.dk-table {
  width: 100%;
  font-size: 0.875rem;
  border-collapse: collapse;
}
.dk-table thead {
  background: var(--surface-overlay);
  border-bottom: 1px solid var(--border-subtle);
}
.dk-table th {
  padding: 11px 24px;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.dk-table td {
  padding: 13px 24px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
}
.dk-table tr:last-child td { border-bottom: none; }
.dk-table tbody tr:hover td { background: #F8FAFC; }
.dk-table-footer {
  padding: 9px 24px;
  font-size: 0.75rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border-subtle);
}

/* ── Form Controls ─────────────────────────────────────────── */
.dk-input,
.dk-select,
.dk-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--surface-input);
  border: 1px solid var(--border-input);
  border-radius: 0.5rem;
  padding: 9px 13px;
  color: var(--text-primary);
  font-size: 0.875rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.dk-input:focus,
.dk-select:focus,
.dk-textarea:focus {
  outline: none;
  border-color: var(--border-input-focus);
  box-shadow: 0 0 0 3px rgba(200, 162, 58, 0.15);
}
.dk-select option   { background: #fff; color: var(--text-primary); }
.dk-textarea        { resize: vertical; }

/* ── Stat / big number ─────────────────────────────────────── */
.dk-stat {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--c-gold-600);
}

/* ── Status Badges ─────────────────────────────────────────── */
.badge-published {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(22, 163, 74, 0.10);
  color: #15803D;
}
.badge-draft {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: #F1F5F9;
  color: var(--text-muted);
}

/* ── Feedback boxes ────────────────────────────────────────── */
.dk-info-box {
  background: rgba(200, 162, 58, 0.07);
  border: 1px solid rgba(200, 162, 58, 0.25);
  border-radius: 0.5rem;
  color: var(--c-gold-700);
}
.dk-error-box {
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: 0.5rem;
  color: var(--color-error);
}

/* ── Mode Selection Buttons (new calculator page) ──────────── */
.mode-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 0.75rem;
  padding: 1.25rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  color: var(--text-secondary);
}
.mode-btn h3 { color: var(--text-primary); font-weight: 600; margin: 0; }
.mode-btn p  { color: var(--text-muted); font-size: 0.75rem; margin: 4px 0 0; }
.mode-btn:hover  {
  border-color: rgba(200, 162, 58, 0.45);
  background: #FFFBF0;
  box-shadow: 0 2px 8px rgba(200, 162, 58, 0.08);
}
.mode-btn.active {
  border-color: var(--c-gold-500);
  background: #FFFBF0;
  box-shadow: 0 0 0 3px rgba(200, 162, 58, 0.12);
}

/* ── Gold buttons always carry dark text (contrast requirement) */
button[class*="bg-brand-"],
a[class*="bg-brand-"] {
  color: #0B1E33 !important;
}

/* ── Embed iframe host reset ───────────────────────────────── */
.kalkulio-embed * { box-sizing: border-box; }


/* ── Layer 3: Builder-specific utilities ───────────────────── */
/* Support the drag-and-drop field builder in edit.html.        */

.sortable-ghost {
  opacity: 0.4;
  background: #EEF2F7;
  border: 2px dashed var(--c-gold-500) !important;
}
.sortable-chosen {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
  transform: rotate(0.5deg);
}

.field-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface-input);
  border: 1px solid var(--border-input);
  border-radius: 0.5rem;
  padding: 0.375rem 0.625rem;
  font-size: 0.8125rem;
  color: var(--text-primary);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field-input:focus {
  outline: none;
  border-color: var(--c-gold-500);
  box-shadow: 0 0 0 3px rgba(200, 162, 58, 0.12);
}
textarea.field-input { resize: vertical; }

.field-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.drag-handle   { touch-action: none; }
.formula-badge { transition: background 0.2s, color 0.2s; }


/* ── Excel Wizard step indicators ─────────────────────────── */
.excel-step-dot {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  background: #F1F5F9;
  color: #94A3B8;
  transition: background 0.15s, color 0.15s;
}
.excel-step-dot.active {
  background: var(--c-gold-500);
  color: #0B1E33;
}
.excel-step-dot.done {
  background: rgba(22, 163, 74, 0.1);
  color: #15803D;
}
.excel-step-arrow {
  color: #CBD5E1;
  font-size: 1rem;
  flex-shrink: 0;
}

/* ── Excel wizard sheet preview table ──────────────────────── */
.xw-preview-table {
  border-collapse: collapse;
  font-size: 0.72rem;
  white-space: nowrap;
}
.xw-preview-table th {
  background: #F8FAFC;
  color: #64748B;
  font-weight: 600;
  padding: 4px 8px;
  border: 1px solid #E2E8F0;
  min-width: 50px;
  text-align: center;
}
.xw-preview-table td {
  padding: 3px 8px;
  border: 1px solid #E2E8F0;
  color: #374151;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xw-preview-table .row-num {
  background: #F8FAFC;
  color: #94A3B8;
  font-weight: 500;
  text-align: right;
  min-width: 28px;
}


/* ── Mobile overrides ───────────────────────────────────────── */
@media (max-width: 639px) {

  /* Calc stage: tighter padding on small screens */
  .calc-stage {
    padding: 24px 16px;
  }
  .calc-stage-card {
    padding: 20px 16px;
  }

  /* Tables: ensure text doesn't break badly */
  .dk-table th,
  .dk-table td {
    padding: 10px 12px;
  }

  /* Stat numbers: slightly smaller on mobile */
  .dk-stat {
    font-size: 1.5rem;
  }
}


/* ── Footer: social share icons ─────────────────────────────── */

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94A3B8;
  text-decoration: none;
  font-size: 15px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.social-icon:hover {
  background: var(--c-gold-500);
  border-color: var(--c-gold-500);
  color: var(--c-navy-900);
}
.social-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}