/* 1) Reset / Normalize */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
}

/*
  2) Theme tokens
  - Default: light
  - Dark: :root[data-bt-theme="dark"]
  - If user has not chosen a theme, prefers-color-scheme decides.
*/
:root {
  color-scheme: light;

  /* Typography */
  --bt-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;

  /* Font Size (rem) */
  --bt-h1: 2rem; /* 32px */
  --bt-h2: 1.5rem; /* 24px */
  --bt-h3: 1.25rem; /* 20px */
  --bt-h4: 1.125rem; /* 18px */
  --bt-h5: 1rem; /* 16px */
  --bt-p: 0.875rem; /* 14px */
  --bt-p2: 0.75rem; /* 12px */

  /* Spacing scale */
  --bt-space-2: 0.5rem; /* 8px  */
  --bt-space-3: 0.75rem; /* 12px */
  --bt-space-4: 1rem; /* 16px */
  --bt-space-5: 1.25rem; /* 20px */
  --bt-space-6: 1.5rem; /* 24px */
  --bt-space-8: 2rem; /* 32px */

  /* Radius */
  --bt-radius: 1.125rem; /* 18px */
  --bt-radius2: 2rem;
  --bt-circle: 50%;

  /* Layout */
  --bt-gap: 1rem;
  --bt-gap2: 0.625rem;
  --bt-sidebar-w: 20rem; /* 320px */
  --bt-sidebar-w-collapsed: 7.5rem; /* 108px */
  --bt-header-h: 76px;
  --bt-footer-h: 56px;
  --bt-padding: 1.5rem;
  --bt-padding2: 0.75rem;
  --bt-padding3: 0.35rem;

  /* Brand / semantic */
  --bt-primary: #5b6cff;
  --bt-primary-2: #6d59ff;
  --bt-accent: #ff6b57; /* buton/çerçeve */
  --bt-accent-soft: rgba(255, 107, 87, 0.12);

  --bt-save: #17b26a;
  --bt-resend: #7a5af8;
  --bt-danger: #dc2626;
  --bt-warn: #b45309;

  --bt-alert-ok-text: #065f46;
  --bt-alert-err-text: #7f1d1d;
  --bt-alert-warn-text: #78350f;
  --bt-alert-info-text: #1e3a8a;

  /* Surfaces (LIGHT) */
  --bt-bg: #f6f7fb;
  --bt-surface: #ffffff;
  --bt-card: #ffffff;
  --bt-hero-bg: #eef1fb;
  --bt-surface-2: #f8fafc;
  --bt-surface-3: #f3f4f6;
  --bt-elevated: #ffffff;
  --bt-soft-bg: rgba(15, 23, 42, 0.04);

  /* Text */
  --bt-text: #101828;
  --bt-muted: rgba(16, 24, 40, 0.6);
  --bt-label: #374151;

  /* Lines / borders */
  --bt-line: #eaecf0;
  --bt-border: rgba(0, 0, 0, 0.06);

  /* Inputs / UI */
  --bt-input-bg: var(--bt-surface);
  --bt-input-border: var(--bt-line);
  --bt-input-shadow: 0 0 0 4px var(--bt-accent-soft, rgba(91, 108, 255, 0.16));

  /* Alerts */
  --bt-alert-ok-bg: #ecfdf3;
  --bt-alert-ok-border: #b7f0c6;
  --bt-alert-err-bg: #fff1f2;
  --bt-alert-err-border: #fecaca;

  /* Shadow */
  --bt-shadow: 0 12px 32px rgba(16, 24, 40, 0.08);
}

/* If user hasn't picked a theme yet, respect OS preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-bt-theme]) {
    color-scheme: dark;

    --bt-bg: #0b1220;
    --bt-surface: #0f172a;
    --bt-card: #111c33;
    --bt-surface-2: #162033;
    --bt-surface-3: #1b263b;
    --bt-elevated: #182235;
    --bt-soft-bg: rgba(255, 255, 255, 0.06);
    --bt-surface-2: #162033;
    --bt-surface-3: #1b263b;
    --bt-elevated: #182235;
    --bt-soft-bg: rgba(255, 255, 255, 0.06);

    --bt-text: #e5e7eb;
    --bt-muted: rgba(229, 231, 235, 0.68);

    --bt-line: rgba(255, 255, 255, 0.08);
    --bt-border: rgba(255, 255, 255, 0.1);

    --bt-input-bg: rgba(255, 255, 255, 0.03);
    --bt-input-border: rgba(255, 255, 255, 0.1);

    --bt-shadow: 0 16px 44px rgba(0, 0, 0, 0.35);

    --bt-alert-ok-bg: rgba(23, 178, 106, 0.12);
    --bt-alert-ok-border: rgba(23, 178, 106, 0.3);
    --bt-alert-err-bg: rgba(220, 38, 38, 0.12);
    --bt-alert-err-border: rgba(220, 38, 38, 0.3);

    --bt-alert-ok-text: #bbf7d0;
    --bt-alert-err-text: #fecaca;
    --bt-alert-warn-text: #fde68a;
    --bt-alert-info-text: #bfdbfe;
  }
}

/* Explicit DARK theme (user choice) */
:root[data-bt-theme="dark"] {
  color-scheme: dark;

  --bt-bg: #0b1220;
  --bt-surface: #0f172a;
  --bt-card: #111c33;
  --bt-hero-bg: rgba(255, 255, 255, 0.02);

  --bt-text: #e5e7eb;
  --bt-muted: rgba(229, 231, 235, 0.68);

  --bt-line: rgba(255, 255, 255, 0.08);
  --bt-border: rgba(255, 255, 255, 0.1);

  --bt-input-bg: rgba(255, 255, 255, 0.03);
  --bt-input-border: rgba(255, 255, 255, 0.1);

  --bt-shadow: 0 16px 44px rgba(0, 0, 0, 0.35);

  --bt-alert-ok-bg: rgba(23, 178, 106, 0.12);
  --bt-alert-ok-border: rgba(23, 178, 106, 0.3);
  --bt-alert-err-bg: rgba(220, 38, 38, 0.12);
  --bt-alert-err-border: rgba(220, 38, 38, 0.3);

  --bt-alert-ok-text: #bbf7d0;
  --bt-alert-err-text: #fecaca;
  --bt-alert-warn-text: #fde68a;
  --bt-alert-info-text: #bfdbfe;
}

/* 3) Global defaults */
html,
body {
  font-family: var(--bt-font);
  color: var(--bt-text);
  font-weight: 400;
  background: var(--bt-bg);
  line-height: 1.5;
  height: 100%;
}

a {
  color: var(--bt-primary);
  text-decoration: none;
}

button {
  border: none;
  border-radius: var(--bt-radius);
  cursor: pointer;
}

/* 4) Utilities */
.hidden {
  display: none !important;
}
.text-muted {
  opacity: 0.6;
}

.bt-required {
  color: red;
}

/* 5) Bildirimler */
.bt-field-error {
  margin-top: 6px;
  font-size: var(--bt-p2);
  font-weight: 400;
  line-height: 1.2;
  color: #b42318;
}

.bt-input.is-invalid {
  border-color: #f04438 !important;
  box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.12);
}

:root[data-bt-theme="dark"] .bt-card,
:root[data-bt-theme="dark"] .bt-pages__card,
:root[data-bt-theme="dark"] .bt-panel,
:root[data-bt-theme="dark"] .bt-section,
:root[data-bt-theme="dark"] .bt-widget,
:root[data-bt-theme="dark"] .bt-report-card {
  background: var(--bt-card);
  color: var(--bt-text);
  border-color: var(--bt-border);
}

:root[data-bt-theme="dark"] .bt-pages__table,
:root[data-bt-theme="dark"] .bt-pages__pager,
:root[data-bt-theme="dark"] .bt-modal__dialog,
:root[data-bt-theme="dark"] .bt-line-list-modal__dialog,
:root[data-bt-theme="dark"] .bt-line-list-modal .bt-modal__body,
:root[data-bt-theme="dark"] .bt-line-list-modal__foot {
  background: var(--bt-card);
  color: var(--bt-text);
}

:root[data-bt-theme="dark"] .bt-pages__table th,
:root[data-bt-theme="dark"] .bt-modal__head,
:root[data-bt-theme="dark"] .bt-readonly,
:root[data-bt-theme="dark"] .bt-stat,
:root[data-bt-theme="dark"] .bt-line-list__chip,
:root[data-bt-theme="dark"] .bt-line-list-editor__row.is-ghost,
:root[data-bt-theme="dark"] .bt-line-list-editor__index {
  background: var(--bt-surface-2);
  color: var(--bt-text);
}

:root[data-bt-theme="dark"] .bt-pages__table td,
:root[data-bt-theme="dark"] .bt-pages__table th,
:root[data-bt-theme="dark"] .bt-detail,
:root[data-bt-theme="dark"] .bt-pages__detail,
:root[data-bt-theme="dark"] .bt-pages__name,
:root[data-bt-theme="dark"] .bt-modal__title,
:root[data-bt-theme="dark"] .bt-stat span,
:root[data-bt-theme="dark"] .bt-stat strong {
  color: var(--bt-text);
}

:root[data-bt-theme="dark"] .bt-pages__avatar,
:root[data-bt-theme="dark"] .bt-avatarbox,
:root[data-bt-theme="dark"] .bt-pages__photo img {
  background: var(--bt-surface-3);
}

:root {
  --bt-breakpoint-tablet: 1200px;
  --bt-breakpoint-mobile: 767px;
  --bt-safe-top: env(safe-area-inset-top, 0px);
  --bt-safe-right: env(safe-area-inset-right, 0px);
  --bt-safe-bottom: env(safe-area-inset-bottom, 0px);
  --bt-safe-left: env(safe-area-inset-left, 0px);
}

html,
body {
  min-height: 100%;
}

body.bt-mobile-nav-open,
body.bt-mobile-nav-open .bt-content {
  overflow: hidden;
}