/* ===== Texno Grand CRM — design tokens & theming ===== */
:root {
  --accent: #6366f1;
  --accent-rgb: 99, 102, 241;
  --accent-fg: #ffffff;
  --accent-soft: rgba(99, 102, 241, 0.12);
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 20px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sidebar-w: 256px;
  --sidebar-collapsed: 76px;
  --header-h: 64px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Dark theme (default) ---------- */
[data-theme="dark"] {
  --bg: #0a0e17;
  --bg-2: #0e131f;
  --surface: #141a28;
  --surface-2: #1a2234;
  --surface-3: #222c42;
  --elevated: #161d2d;
  --border: #232c40;
  --border-soft: #1b2334;
  --text: #eef2f9;
  --text-2: #9aa6bd;
  --text-3: #66718a;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.36);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.55);
  --ring: rgba(var(--accent-rgb), 0.45);
  --green: #34d399; --green-bg: rgba(52,211,153,.13);
  --red: #f87171; --red-bg: rgba(248,113,113,.13);
  --amber: #fbbf24; --amber-bg: rgba(251,191,36,.13);
  --blue: #60a5fa; --blue-bg: rgba(96,165,250,.13);
  --violet: #a78bfa; --violet-bg: rgba(167,139,250,.13);
  --pink: #f472b6; --pink-bg: rgba(244,114,182,.13);
  --cyan: #22d3ee; --cyan-bg: rgba(34,211,238,.13);
  --teal: #2dd4bf; --teal-bg: rgba(45,212,191,.13);
  color-scheme: dark;
}

/* ---------- Light theme ---------- */
[data-theme="light"] {
  --bg: #f6f7fb;
  --bg-2: #eef1f7;
  --surface: #ffffff;
  --surface-2: #f7f8fc;
  --surface-3: #eef1f7;
  --elevated: #ffffff;
  --border: #e6e9f0;
  --border-soft: #eef1f6;
  --text: #131826;
  --text-2: #5a6378;
  --text-3: #8c95a8;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 10px 28px rgba(16,24,40,.08);
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06);
  --shadow-lg: 0 24px 60px rgba(16,24,40,.16);
  --ring: rgba(var(--accent-rgb), 0.35);
  --green: #059669; --green-bg: rgba(5,150,105,.1);
  --red: #dc2626; --red-bg: rgba(220,38,38,.1);
  --amber: #d97706; --amber-bg: rgba(217,119,6,.1);
  --blue: #2563eb; --blue-bg: rgba(37,99,235,.1);
  --violet: #7c3aed; --violet-bg: rgba(124,58,237,.1);
  --pink: #db2777; --pink-bg: rgba(219,39,119,.1);
  --cyan: #0891b2; --cyan-bg: rgba(8,145,178,.1);
  --teal: #0d9488; --teal-bg: rgba(13,148,136,.1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#root { height: 100%; }
::selection { background: rgba(var(--accent-rgb), .3); }

/* ---- custom blurred background image (Customize → Background) ---- */
/* html paints the base color; body goes transparent so the fixed image +
   dim layers show through the gaps between the opaque content cards. */
html[data-bg="on"] { background: var(--bg); }
html[data-bg="on"] body { background: transparent; }
html[data-bg="on"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -2;
  background-image: var(--bg-image);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  filter: blur(var(--bg-blur, 14px));
  transform: scale(1.12);            /* hide the blur fade at the edges */
  pointer-events: none;
}
html[data-bg="on"] body::after {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: rgba(0, 0, 0, var(--bg-dim, 0.38));
  pointer-events: none;
}
/* separate the boxes: float the cards above the blurred backdrop */
html[data-bg="on"] .tg-card,
html[data-bg="on"] .tg-panel {
  box-shadow: 0 10px 34px rgba(0, 0, 0, .30);
}

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: padding-box; }

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
a { color: inherit; text-decoration: none; }

/* density */
:root {
  --row-pad: 13px;
  --card-pad: 20px;
  --grid-gap: 16px;
  --page-pad: 26px;
  --section-mb: 22px;
}
[data-density="compact"] {
  --row-pad: 7px;
  --card-pad: 12px;
  --grid-gap: 10px;
  --page-pad: 18px;
  --section-mb: 14px;
}
[data-density="comfortable"] {
  --row-pad: 13px;
  --card-pad: 20px;
  --grid-gap: 16px;
  --page-pad: 26px;
  --section-mb: 22px;
}
[data-density="spacious"] {
  --row-pad: 20px;
  --card-pad: 28px;
  --grid-gap: 24px;
  --page-pad: 38px;
  --section-mb: 32px;
}

/* ---- utility primitives used across pages ---- */
.app-shell { display: flex; height: 100vh; overflow: hidden; }
.main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.content { flex: 1; overflow-y: auto; overflow-x: hidden; }
.page { padding: var(--page-pad, 26px) calc(var(--page-pad, 26px) + 4px) 60px; max-width: 1560px; margin: 0 auto; }
@media (max-width: 720px){ .page { padding: 18px 16px 50px; } }

.fade-in { animation: fadeIn .35s var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px);} to{opacity:1;transform:none;} }
.pop-in { animation: popIn .2s var(--ease); }
@keyframes popIn { from { opacity:0; transform: scale(.97);} to {opacity:1; transform:none;} }

@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin .8s linear infinite; }

@keyframes shimmer { 0%{background-position:-400px 0;} 100%{background-position:400px 0;} }
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: 8px;
}

/* focus */
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }