/**
 * TeklifDT — Theme tokens & Bootstrap overrides
 * Tüm renkler CSS variables üzerinden; sabit #fff/#000 yasak.
 */

:root {
  --font: 'Plus Jakarta Sans', system-ui, sans-serif;

  --background: #F7F8FA;
  --surface: #FFFFFF;
  --surface-hover: #F8FAFC;
  --surface-elevated: #FFFFFF;
  --sidebar: #FCFCFD;
  --navbar: #FFFFFF;
  --border: #E7EAF0;

  --text: #1F2937;
  --text-main: #1F2937;
  --text-secondary: #6B7280;
  --text-on-primary: #F5F7FA;
  --text-on-accent: #1F2937;
  --link: #5C3601;
  --link-hover: #734401;

  --navy: #080C1A;
  --navy-deep: #050810;
  --gold: #734401;
  --gold-deep: #5C3601;
  --gold-light: #8F5501;

  --primary: #734401;
  --primary-hover: #5C3601;
  --primary-dark: #5C3601;
  --primary-light: #8F5501;
  --success: #16A34A;
  --danger: #DC2626;
  --warning: #F59E0B;
  --info: #3B82F6;

  --input-bg: var(--surface);
  --shadow-color: rgba(15, 23, 42, 0.08);
  --shadow: 0 4px 12px var(--shadow-color);
  --shadow-md: 0 8px 24px var(--shadow-color);
  --shadow-lg: 0 12px 30px var(--shadow-color);
  --overlay: rgba(15, 23, 42, 0.45);

  --accent-soft: rgba(115, 68, 1, 0.15);
  --color-teal-soft: rgba(115, 68, 1, 0.12);
  --color-blue-soft: rgba(59, 130, 246, 0.1);
  --color-amber-soft: rgba(245, 158, 11, 0.12);
  --color-green-soft: rgba(22, 163, 74, 0.1);
  --color-rose-soft: rgba(220, 38, 38, 0.1);
  --color-violet-soft: rgba(124, 58, 237, 0.1);
  --color-slate-soft: var(--border);

  --status-new-bg: #dbeafe;
  --status-new-fg: #1d4ed8;
  --status-following-bg: #fef3c7;
  --status-following-fg: #b45309;
  --status-won-bg: #dcfce7;
  --status-won-fg: #15803d;
  --status-lost-bg: #fee2e2;
  --status-lost-fg: #b91c1c;

  --badge-neutral-bg: var(--surface-hover);
  --badge-neutral-fg: var(--text);
  --table-head-bg: var(--surface-hover);

  --color-teal: var(--primary);
  --color-teal-soft: var(--accent-soft);
  --color-blue: var(--info);
  --color-amber: var(--warning);
  --color-green: var(--success);
  --color-violet: var(--primary);
  --color-rose: var(--danger);
  --color-slate: var(--text-secondary);

  --bs-body-bg: var(--background);
  --bs-body-color: var(--text);
  --bs-border-color: var(--border);
  --bs-primary: var(--primary);
  --bs-primary-rgb: 115, 68, 1;
  --bs-secondary-color: var(--text-secondary);
  --bs-tertiary-color: var(--text-secondary);
  --bs-link-color: var(--link);
  --bs-link-hover-color: var(--link-hover);
}

[data-theme="dark"] {
  --background: #111315;
  --surface: #1A1D21;
  --surface-hover: #23282E;
  --surface-elevated: #1F2429;
  --sidebar: #15181B;
  --navbar: #181B1F;
  --border: #31363C;

  --text: #F5F7FA;
  --text-main: #F5F7FA;
  --text-secondary: #B3BAC5;
  --text-on-primary: #F5F7FA;
  --text-on-accent: #F5F7FA;
  --link: #8F5501;
  --link-hover: #734401;

  --navy: #080C1A;
  --navy-deep: #050810;
  --gold: #734401;
  --gold-deep: #5C3601;
  --gold-light: #8F5501;

  --primary: #734401;
  --primary-hover: #8F5501;
  --primary-dark: #8F5501;
  --primary-light: #A66401;
  --success: #2FBF71;
  --danger: #EF4444;
  --warning: #F59E0B;
  --info: #60A5FA;

  --input-bg: #20242A;
  --shadow-color: rgba(0, 0, 0, 0.45);
  --shadow: 0 5px 15px var(--shadow-color);
  --shadow-md: 0 10px 35px var(--shadow-color);
  --shadow-lg: 0 15px 45px var(--shadow-color);
  --overlay: rgba(0, 0, 0, 0.55);

  --accent-soft: rgba(115, 68, 1, 0.18);
  --color-teal-soft: rgba(115, 68, 1, 0.14);
  --color-blue-soft: rgba(96, 165, 250, 0.14);
  --color-amber-soft: rgba(245, 158, 11, 0.16);
  --color-green-soft: rgba(47, 191, 113, 0.14);
  --color-rose-soft: rgba(239, 68, 68, 0.14);
  --color-violet-soft: rgba(167, 139, 250, 0.14);
  --color-slate-soft: rgba(179, 186, 197, 0.12);

  --status-new-bg: rgba(96, 165, 250, 0.18);
  --status-new-fg: #93C5FD;
  --status-following-bg: rgba(245, 158, 11, 0.18);
  --status-following-fg: #FCD34D;
  --status-won-bg: rgba(47, 191, 113, 0.18);
  --status-won-fg: #6EE7A8;
  --status-lost-bg: rgba(239, 68, 68, 0.18);
  --status-lost-fg: #FCA5A5;

  --badge-neutral-bg: var(--surface-hover);
  --badge-neutral-fg: var(--text);
  --table-head-bg: var(--surface-hover);
}

/* ─── Semantic utilities (Bootstrap yasak sınıfların yerine) ─── */
.bg-surface { background-color: var(--surface) !important; }
.bg-surface-muted { background-color: var(--surface-hover) !important; }
.bg-navbar { background-color: var(--navbar) !important; }
.text-main { color: var(--text) !important; }
.text-subtle { color: var(--text-secondary) !important; }
.border-theme { border-color: var(--border) !important; }
.table-head { background-color: var(--table-head-bg) !important; color: var(--text-secondary) !important; }

.badge-neutral {
  background-color: var(--badge-neutral-bg) !important;
  color: var(--badge-neutral-fg) !important;
  border: 1px solid var(--border);
}

/* Bootstrap .badge → --bs-badge-color: #fff; arka plansız rozetler okunmuyor */
.badge.border:not([class*="bg-"]),
.badge-prep {
  --bs-badge-color: var(--badge-neutral-fg);
  background-color: var(--badge-neutral-bg);
  color: var(--badge-neutral-fg);
  border-color: var(--border) !important;
}

.badge-prep {
  background-color: var(--color-amber-soft);
  color: var(--text);
  --bs-badge-color: var(--text);
}

[data-theme="dark"] .badge-prep {
  color: var(--text);
  --bs-badge-color: var(--text);
}

.btn-surface {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.btn-surface:hover {
  background-color: var(--surface-hover) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.surface-pill {
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.copy-block {
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* Bootstrap text-muted → token */
.text-muted { color: var(--text-secondary) !important; }

/* ─── Base ─── */
body {
  background: var(--background);
  color: var(--text);
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.nav-sublink):not(.plan-reminder-item) {
  color: var(--link);
}
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.nav-sublink):not(.plan-reminder-item):hover {
  color: var(--link-hover);
}

/* ─── Forms ─── */
.form-control,
.form-select,
.form-check-input,
.input-group-text {
  background-color: var(--input-bg);
  border-color: var(--border);
  color: var(--text);
}
.form-control::placeholder { color: var(--text-secondary); opacity: 1; }
.form-control:focus,
.form-select:focus {
  background-color: var(--input-bg);
  border-color: var(--primary);
  color: var(--text);
  box-shadow: 0 0 0 0.2rem rgba(115, 68, 1, 0.25);
}
.form-label,
.form-check-label { color: var(--text); }
.form-text { color: var(--text-secondary); }

/* ─── Tables ─── */
.table { color: var(--text); --bs-table-bg: transparent; --bs-table-color: var(--text); }
.table > :not(caption) > * > * {
  background-color: transparent;
  border-color: var(--border);
  color: var(--text);
  box-shadow: none;
}
.table thead th,
.table .table-head th {
  background-color: var(--table-head-bg);
  color: var(--text-secondary);
  border-color: var(--border);
}
.table-hover > tbody > tr:hover > * {
  background-color: var(--surface-hover);
  color: var(--text);
}

/* ─── Cards & panels ─── */
.card {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.card-header,
.card-footer {
  background-color: var(--surface-hover);
  border-color: var(--border);
  color: var(--text);
}

/* ─── Modals ─── */
.modal-content {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.modal-header,
.modal-footer { border-color: var(--border); }
.modal-title { color: var(--text); }
.btn-close { filter: none; opacity: 0.65; }
[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.8;
}

/* ─── Dropdowns ─── */
.dropdown-menu {
  background-color: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-lg);
}
.dropdown-item { color: var(--text); }
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--surface-hover);
  color: var(--primary);
}
.dropdown-item-text { color: var(--text-secondary); }
.dropdown-divider { border-color: var(--border); }

/* ─── Nav tabs & pills ─── */
.nav-tabs { border-bottom-color: var(--border); }
.nav-tabs .nav-link { color: var(--text-secondary); border-color: transparent; }
.nav-tabs .nav-link:hover { color: var(--text); border-color: var(--border); }
.nav-tabs .nav-link.active {
  background-color: var(--surface);
  border-color: var(--border) var(--border) var(--surface);
  color: var(--primary);
}
.nav-pills .nav-link { color: var(--text-secondary); }
.nav-pills .nav-link.active {
  background-color: var(--primary);
  color: var(--text-on-primary);
}

/* ─── Accordion ─── */
.accordion-item {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.accordion-button {
  background-color: var(--surface-hover);
  color: var(--text);
}
.accordion-button:not(.collapsed) {
  background-color: var(--surface-hover);
  color: var(--primary);
  box-shadow: inset 0 -1px 0 var(--border);
}
.accordion-body { color: var(--text); }

/* ─── Pagination ─── */
.page-link {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.page-link:hover {
  background-color: var(--surface-hover);
  border-color: var(--border);
  color: var(--primary);
}
.page-item.active .page-link {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--text-on-primary);
}
.page-item.disabled .page-link {
  background-color: var(--surface-hover);
  border-color: var(--border);
  color: var(--text-secondary);
}

/* ─── Breadcrumb ─── */
.breadcrumb-item,
.breadcrumb-item a { color: var(--text-secondary); }
.breadcrumb-item.active { color: var(--text); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-secondary); }

/* ─── List group ─── */
.list-group-item {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

/* ─── Badges (Bootstrap) ─── */
.badge.bg-secondary { background-color: var(--surface-hover) !important; color: var(--text) !important; }
.badge.bg-warning { background-color: var(--warning) !important; color: var(--text-on-accent) !important; }

/* ─── Toasts ─── */
.toast {
  background-color: var(--surface-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}
.toast.toast-success { background-color: var(--success); color: var(--text-on-primary); border-color: transparent; }
.toast.toast-danger { background-color: var(--danger); color: var(--text-on-primary); border-color: transparent; }
.toast.toast-warning { background-color: var(--warning); color: var(--text-on-accent); border-color: transparent; }
.toast.toast-info { background-color: var(--primary); color: var(--text-on-primary); border-color: transparent; }
.toast.toast-success .btn-close,
.toast.toast-danger .btn-close,
.toast.toast-info .btn-close { filter: brightness(0) invert(1); opacity: 0.85; }

/* ─── Tooltips & popovers ─── */
.tooltip .tooltip-inner {
  background-color: var(--surface-elevated);
  color: var(--text);
  border: 1px solid var(--border);
}
.popover {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.popover-header {
  background-color: var(--surface-hover);
  border-bottom-color: var(--border);
  color: var(--text);
}
.popover-body { color: var(--text); }

/* ─── CRM status badges ─── */
.crm-status-new { background: var(--status-new-bg); color: var(--status-new-fg); }
.crm-status-following { background: var(--status-following-bg); color: var(--status-following-fg); }
.crm-status-won { background: var(--status-won-bg); color: var(--status-won-fg); }
.crm-status-lost { background: var(--status-lost-bg); color: var(--status-lost-fg); }

.badge-status-draft { background: var(--badge-neutral-bg); color: var(--text-secondary); }
.badge-status-sent { background: var(--status-new-bg); color: var(--status-new-fg); }
.badge-status-approved { background: var(--status-won-bg); color: var(--status-won-fg); }
.badge-status-rejected { background: var(--status-lost-bg); color: var(--status-lost-fg); }

/* ─── Buttons outline fix ─── */
.btn-outline-secondary {
  border-color: var(--border);
  color: var(--text-secondary);
}
.btn-outline-secondary:hover {
  background-color: var(--surface-hover);
  border-color: var(--border);
  color: var(--text);
}
.btn-link { color: var(--link); }
.btn-link:hover { color: var(--link-hover); }

/* ─── Topbar / sidebar dark polish ─── */
[data-theme="dark"] .topbar {
  background: var(--navbar);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .sidebar {
  background: var(--sidebar);
  border-right-color: var(--border);
  box-shadow: none;
}
[data-theme="dark"] .sidebar-brand {
  background: var(--sidebar);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .sidebar-brand-icon {
  background: var(--accent-soft);
  color: var(--primary-light);
}
[data-theme="dark"] .sidebar-nav .nav-link i { color: var(--text-secondary); }
[data-theme="dark"] .sidebar-nav .nav-link:hover,
[data-theme="dark"] .sidebar-nav .nav-link.active {
  background: var(--surface-hover);
  color: var(--text);
  box-shadow: none;
}
[data-theme="dark"] .sidebar-footer {
  background: var(--sidebar);
  border-top-color: var(--border);
}
[data-theme="dark"] body::before { opacity: 0.15; }

/* ─── Stat cards dark ─── */
[data-theme="dark"] .stat-card {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="dark"] .stat-card.stat-patients,
[data-theme="dark"] .stat-card.stat-offers,
[data-theme="dark"] .stat-card.stat-monthly,
[data-theme="dark"] .stat-card.stat-approved,
[data-theme="dark"] .stat-card.stat-operations,
[data-theme="dark"] .stat-card.stat-operations-clinic {
  background: var(--surface);
}
[data-theme="dark"] .stat-card .stat-value { color: var(--text); }
[data-theme="dark"] .stat-card .stat-icon {
  background: var(--accent-soft);
  color: var(--primary-light);
}
[data-theme="dark"] .panel-card .panel-header {
  background: var(--surface-hover);
  color: var(--text);
}
[data-theme="dark"] .dash-mini-stat--teal .dash-mini-value,
[data-theme="dark"] .dash-mini-stat--blue .dash-mini-value,
[data-theme="dark"] .dash-mini-stat--green .dash-mini-value,
[data-theme="dark"] .dash-mini-stat--rose .dash-mini-value,
[data-theme="dark"] .dash-mini-stat--amber .dash-mini-value,
[data-theme="dark"] .dash-mini-stat--slate .dash-mini-value {
  color: var(--text);
}

/* ─── Reports / charts ─── */
[data-theme="dark"] .reports-period-tab.active {
  background: var(--accent-soft);
  color: var(--primary-light);
  box-shadow: inset 0 0 0 1px var(--primary);
}
[data-theme="dark"] .reports-trend-label,
[data-theme="dark"] .reports-trend-count { color: var(--text); }

/* ─── Dental chart ─── */
[data-theme="dark"] .dental-chart-svg .tooth-label { fill: var(--text-secondary); }
[data-theme="dark"] .dental-chart-svg .quadrant-label { fill: var(--primary-light); }
[data-theme="dark"] .selected-teeth-display {
  background: var(--accent-soft);
  border-color: var(--primary);
  color: var(--text);
}

/* ─── Clinic logos — dark mode (multiply siyahlaştırır) ─── */
[data-theme="dark"] .sidebar-logo,
[data-theme="dark"] .offer-clinic-logo,
[data-theme="dark"] .preview-logo,
[data-theme="dark"] .logo-img-light,
[data-theme="dark"] .quote-clinic-logo,
[data-theme="dark"] .settings-logo-frame img,
[data-theme="dark"] #previewLogoImg {
  mix-blend-mode: normal;
  filter: brightness(1.28) contrast(1.04);
  background: transparent;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
}

[data-theme="dark"] .settings-logo-frame {
  background: var(--surface-hover);
  border-color: var(--border);
}

/* ─── Offer builder topbar btn ─── */
.offer-topbar .btn-surface,
.dashboard-hero-actions .btn-surface,
.dash-hero-actions .btn-surface {
  font-weight: 600;
  color: var(--text);
}

/* ─── Table premium ─── */
.table-premium thead th {
  background: var(--table-head-bg);
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}
.table-premium tbody td {
  border-bottom: 1px solid var(--border);
  color: var(--text);
  background: transparent;
}
.table-premium tbody tr:hover td { background: var(--surface-hover); }

.crm-table-card .table thead th {
  background: var(--table-head-bg);
  color: var(--text-secondary);
  border-color: var(--border);
}
.crm-table-card .table tbody td { color: var(--text); border-color: var(--border); }

/* ─── Panel headers ─── */
.panel-card .panel-header {
  background: var(--surface-hover);
  color: var(--text);
  border-bottom-color: var(--border);
}

/* ─── Bootstrap subtle badges (dark) ─── */
[data-theme="dark"] .bg-primary-subtle { background-color: var(--accent-soft) !important; }
[data-theme="dark"] .bg-success-subtle { background-color: var(--color-green-soft) !important; }
[data-theme="dark"] .bg-warning-subtle { background-color: var(--color-amber-soft) !important; }
[data-theme="dark"] .bg-danger-subtle { background-color: var(--color-rose-soft) !important; }
[data-theme="dark"] .bg-info-subtle { background-color: var(--color-blue-soft) !important; }
[data-theme="dark"] .bg-secondary-subtle { background-color: var(--surface-hover) !important; }
[data-theme="dark"] .text-primary-emphasis,
[data-theme="dark"] .text-primary { color: var(--primary-light) !important; }
[data-theme="dark"] .text-success-emphasis { color: var(--success) !important; }
[data-theme="dark"] .text-warning-emphasis { color: var(--warning) !important; }
[data-theme="dark"] .text-danger { color: var(--danger) !important; }
[data-theme="dark"] .text-info-emphasis { color: var(--info) !important; }
[data-theme="dark"] .border-primary-subtle { border-color: var(--primary) !important; }

/* ─── Offer builder dark ─── */
[data-theme="dark"] .offer-builder { background: var(--background); }
[data-theme="dark"] .offer-topbar {
  background: var(--navbar);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .offer-panel,
[data-theme="dark"] .offer-sidebar-panel,
[data-theme="dark"] .offer-card-block {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .offer-topbar-title,
[data-theme="dark"] .offer-section-title { color: var(--text); }

/* ─── Dashboard page dark ─── */
[data-theme="dark"] .dash-panel,
[data-theme="dark"] .dash-finance-card,
[data-theme="dark"] .dash-kpi-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text);
}
[data-theme="dark"] .dash-finance-label,
[data-theme="dark"] .dash-finance-value { color: var(--text) !important; }
[data-theme="dark"] .dash-chart-wrap {
  background: transparent;
}

[data-theme="dark"] .dash-prep-panel {
  background: linear-gradient(145deg, var(--surface) 0%, rgba(245, 158, 11, 0.12) 100%);
}

/* ─── Treatments / templates / users ─── */
[data-theme="dark"] .treatments-head,
[data-theme="dark"] .tpl-card,
[data-theme="dark"] .tpl-sidebar,
[data-theme="dark"] .users-stat-card {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .tpl-card-builtin,
[data-theme="dark"] .tpl-card-custom {
  background: linear-gradient(90deg, var(--surface-hover) 0%, var(--surface) 35%);
}
[data-theme="dark"] .brand-card,
[data-theme="dark"] .model-row {
  background: var(--surface);
  border-color: var(--border);
}

/* ─── Skeleton ─── */
[data-theme="dark"] .skel {
  background: linear-gradient(90deg, var(--surface-hover) 0%, var(--surface-elevated) 45%, var(--surface-hover) 90%);
}

/* ─── Code blocks ─── */
code { color: var(--primary-light); }
[data-theme="dark"] pre,
[data-theme="dark"] .app-dialog-copy {
  background: var(--surface-hover);
  border-color: var(--border);
  color: var(--text);
}

/* ─── Primary buttons text ─── */
.btn-primary,
.btn-success,
.btn-danger,
.btn-info { color: var(--text-on-primary); }
.btn-warning { color: var(--text-on-accent); }

/* ─── Chart.js / canvas labels (dashboard reports) ─── */
[data-theme="dark"] canvas { filter: none; }

/* ─── Login page (optional dark) ─── */
[data-theme="dark"] .login-page {
  background: var(--background);
  color: var(--text);
}
[data-theme="dark"] .login-card {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .login-card .form-control {
  background: var(--input-bg);
  border-color: var(--border);
  color: var(--text);
}

/* ─── Offer builder & treatments (ek) ─── */
[data-theme="dark"] .offer-builder::before {
  opacity: 0.35;
}

[data-theme="dark"] .offer-builder .panel-card,
[data-theme="dark"] .offer-builder .panel-header {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="dark"] .offer-builder .panel-header {
  background: var(--surface-hover);
}

[data-theme="dark"] .treatments-page-head {
  background: var(--navbar);
  border-bottom-color: var(--border);
}

[data-theme="dark"] .treatment-accordion .accordion-item {
  background: var(--surface);
  box-shadow: none;
}

[data-theme="dark"] .model-block {
  border-bottom-color: var(--border);
}

[data-theme="dark"] .brand-desc {
  color: var(--text-secondary);
}

[data-theme="dark"] .variation-item td,
[data-theme="dark"] .model-row td {
  color: var(--text);
}


/* Fix native select multiple dark mode */

[data-theme=\

dark\] select[multiple] { background-color: var(--input-bg); color: var(--text); }

[data-theme=\

dark\] select[multiple] option { background-color: var(--input-bg); color: var(--text); padding: 5px; }

[data-theme=\

dark\] select[multiple] option:checked { background-color: var(--primary); color: #fff; }