/*!
 * Diari Site Theme — ONE file for entire site
 * Light (default) + Dark secondary
 * All pages: user / manager / admin / public / index
 */
:root,
html[data-theme="light"],
html[data-bs-theme="light"] {
  --ink: #1c1630;
  --text: #1c1630;
  --muted: #6b6280;
  --bg: #f5f1ff;
  --bg-soft: #efe9fc;
  --surface: #ffffff;
  --surface-2: #f8f5ff;
  --card: #ffffff;
  --line: #e4dcf5;
  --line-strong: #d4c8f0;
  --primary: #7657e8;
  --primary-2: #9b7cff;
  --primary-soft: rgba(118, 87, 232, 0.12);
  --primary-ink: #ffffff;
  --accent: #5b4b8a;
  --danger: #e11d48;
  --ok: #059669;
  --warn: #d97706;
  --neu-light: #ffffff;
  --neu-dark: #cfc8dd;
  --shadow: 0 14px 40px rgba(90, 60, 180, 0.12);
  --shadow-sm: 0 6px 18px rgba(90, 60, 180, 0.08);
  --shadow-neu: 10px 10px 24px var(--neu-dark), -10px -10px 24px var(--neu-light);
  --glow: 0 0 24px rgba(118, 87, 232, 0.22);
  --radius: 20px;
  --radius-sm: 14px;
  --radius-pill: 999px;
  --topbar-bg: rgba(255, 255, 255, 0.92);
  --input-bg: #ffffff;
  --input-text: #1c1630;
  --focus: rgba(118, 87, 232, 0.35);
  --nav-bg: rgba(255, 255, 255, 0.88);
  --nav-link: rgba(28, 22, 48, 0.72);
  --nav-link-hover: #7657e8;
  --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f7f3ff 100%);
  --sidebar-text: #1c1630;
  --sidebar-link: #4b3d69;
  --sidebar-active-bg: linear-gradient(90deg, rgba(118, 87, 232, 0.14), transparent);
  --hero-bg: linear-gradient(125deg, #ffffff 0%, #efe7ff 45%, #e8deff 100%);
  --swal-bg: #ffffff;
  --swal-text: #1c1630;
  color-scheme: light;
}

html[data-theme="dark"],
html[data-bs-theme="dark"],
html.dark,
html.theme-dark {
  --ink: #f3eeff;
  --text: #f3eeff;
  --muted: #c4bbd8;
  --bg: #0f0c16;
  --bg-soft: #16131f;
  --surface: #1a1528;
  --surface-2: #221c32;
  --card: #1a1528;
  --line: #3a314f;
  --line-strong: #4a4066;
  --primary: #a78bfa;
  --primary-2: #c4b0ff;
  --primary-soft: rgba(167, 139, 250, 0.18);
  --primary-ink: #120c1e;
  --accent: #c4b0ff;
  --danger: #fb7185;
  --ok: #34d399;
  --warn: #fbbf24;
  --neu-light: #242033;
  --neu-dark: #0e0b14;
  --shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-neu: 8px 8px 20px var(--neu-dark), -6px -6px 16px var(--neu-light);
  --glow: 0 0 28px rgba(167, 139, 250, 0.25);
  --radius: 20px;
  --radius-sm: 14px;
  --radius-pill: 999px;
  --topbar-bg: rgba(22, 19, 31, 0.94);
  --input-bg: #1c1828;
  --input-text: #f5f0ff;
  --focus: rgba(155, 124, 255, 0.4);
  --nav-bg: rgba(24, 18, 47, 0.88);
  --nav-link: rgba(255, 255, 255, 0.72);
  --nav-link-hover: #ffffff;
  --sidebar-bg: linear-gradient(180deg, #1a1030 0%, #2a1a4a 55%, #1d1236 100%);
  --sidebar-text: #ffffff;
  --sidebar-link: #d8d0ed;
  --sidebar-active-bg: rgba(167, 139, 250, 0.18);
  --hero-bg: linear-gradient(120deg, #21133e, #7657e8 70%, #9b6cf6);
  --swal-bg: #1c1828;
  --swal-text: #f3eeff;
  color-scheme: dark;
}

/* ========== Base ========== */
html, body {
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: Vazirmatn, Tahoma, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}

body {
  background:
    radial-gradient(900px 420px at 100% -10%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 55%),
    radial-gradient(700px 320px at -5% 0%, color-mix(in srgb, var(--primary-2) 10%, transparent), transparent 50%),
    var(--bg) !important;
}

a { color: var(--primary); }
a:hover { color: var(--primary-2); }

.text-secondary, .text-muted, .opacity-75 { color: var(--muted) !important; }

/* ========== Cards / panels ========== */
.card, .panel, .admin-panel, .manager-card, .manager-module,
.quota-box, .feature, .stat-card, .diari-card, .manager-hero {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}

.manager-hero {
  background: var(--hero-bg) !important;
}

/* ========== Forms ========== */
.form-control, .form-select, input, select, textarea {
  background: var(--input-bg) !important;
  color: var(--input-text) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm);
}
.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 0.2rem var(--focus) !important;
}
.form-label, label { color: var(--ink); }

/* ========== Buttons ========== */
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-2)) !important;
  border: 0 !important;
  color: var(--primary-ink) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: var(--radius-pill);
  font-weight: 700;
}
.btn-outline-primary {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  border-radius: var(--radius-pill);
}
.btn-outline-primary:hover {
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
}
.btn-outline-secondary, .btn-outline-light {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
  border-radius: var(--radius-pill);
}
.btn-light {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  border-radius: var(--radius-pill);
}

/* ========== Nav (public / index) ========== */
.diari-nav, .navbar {
  background: var(--nav-bg) !important;
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm);
}
.nav-link {
  color: var(--nav-link) !important;
  font-size: 0.9rem;
}
.nav-link:hover, .nav-link.active {
  color: var(--nav-link-hover) !important;
}
.language-picker {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink);
}

/* ========== User topbar ========== */
.u-topbar {
  background: var(--topbar-bg) !important;
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter: blur(14px);
}
.u-brand, .u-actions .btn { color: var(--ink); }
.u-brand-mark {
  background: linear-gradient(135deg, var(--primary-2), var(--primary));
  box-shadow: var(--glow);
}

/* ========== Manager / Admin sidebar ========== */
body.manager-shell, body.admin-shell, body.diari-admin {
  background: var(--bg) !important;
  color: var(--ink) !important;
}

.manager-side {
  background: var(--sidebar-bg) !important;
  color: var(--sidebar-text) !important;
  border-left: 1px solid var(--line);
  box-shadow: -10px 0 32px color-mix(in srgb, var(--primary) 8%, transparent);
}
.manager-brand { color: var(--sidebar-text) !important; }
.manager-brand-mark {
  background: linear-gradient(135deg, var(--primary-2), var(--primary)) !important;
  box-shadow: var(--glow);
}
.manager-link {
  color: var(--sidebar-link) !important;
  border-radius: var(--radius-sm);
}
.manager-link:hover {
  background: var(--primary-soft);
  color: var(--primary) !important;
}
.manager-link.active {
  background: var(--sidebar-active-bg) !important;
  color: var(--primary) !important;
  box-shadow: inset 3px 0 0 var(--primary);
  font-weight: 700;
}
html[data-theme="dark"] .manager-link.active,
html.dark .manager-link.active {
  color: #fff !important;
  box-shadow: inset 3px 0 0 var(--primary-2);
}

.manager-topbar {
  background: var(--topbar-bg) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm);
}

.manager-stat-icon {
  background: linear-gradient(135deg, var(--primary), var(--primary-2)) !important;
  box-shadow: var(--glow);
  color: #fff;
}

/* ========== Tables ========== */
.table {
  --bs-table-bg: var(--surface);
  --bs-table-color: var(--ink);
  --bs-table-border-color: var(--line);
  color: var(--ink);
}
.table thead th {
  background: var(--surface-2) !important;
  color: var(--muted);
  border-color: var(--line);
}

/* ========== Modal / Swal ========== */
.modal-content {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius);
}
.modal-header, .modal-footer {
  border-color: var(--line) !important;
}

.swal2-popup,
.diari-swal-popup {
  background: var(--swal-bg) !important;
  color: var(--swal-text) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  font-family: Vazirmatn, Tahoma, sans-serif !important;
}
.swal2-title, .diari-swal-title { color: var(--swal-text) !important; font-weight: 800 !important; }
.swal2-html-container, .diari-swal-html { color: var(--muted) !important; }
.swal2-confirm, .diari-swal-confirm {
  background: linear-gradient(135deg, var(--primary), var(--primary-2)) !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 700 !important;
}
.swal2-cancel, .diari-swal-cancel {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-pill) !important;
}
.swal2-deny, .diari-swal-deny {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  border-radius: var(--radius-pill) !important;
}
.swal2-icon.swal2-info { border-color: var(--primary) !important; color: var(--primary) !important; }

/* ========== Progress / chips ========== */
.progress {
  background: var(--surface-2) !important;
  border-radius: var(--radius-pill);
}
.progress-bar {
  background: linear-gradient(90deg, var(--primary), var(--primary-2)) !important;
}
.badge, .diari-chip {
  border-radius: var(--radius-pill);
}

/* ========== Theme toggle button ========== */
[data-theme-toggle], #themeToggle {
  width: 36px;
  height: 36px;
  padding: 0 !important;
  display: inline-grid;
  place-items: center;
  border-radius: 50% !important;
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  color: var(--primary) !important;
}
[data-theme-toggle] i, #themeToggle i {
  font-size: 1rem;
  line-height: 1;
}

/* ========== Utilities tied to theme ========== */
.border { border-color: var(--line) !important; }
.bg-white, .bg-light {
  background: var(--surface) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html.dark .bg-white,
html.dark .bg-light {
  background: var(--surface) !important;
  color: var(--ink) !important;
}

/* Studio costbar / shells */
.studio-costbar, .studio-shell, .studio-tools {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}


/* table spacing — consistent, no overlap */
.table,
table.tr-table,
.table-responsive,
.table-wrap {
  margin-bottom: 1rem;
}
.table + .table,
.table-responsive + .table-responsive {
  margin-top: 0.5rem;
}
.table th, .table td,
.tr-table th, .tr-table td {
  vertical-align: middle;
  padding: 0.65rem 0.85rem;
}
.manager-card .table-responsive,
.admin-panel .table-responsive {
  margin: 0 0 1rem;
}