/* Dentiq brand layer — підключається ПІСЛЯ inline-стилів index.html і перекриває токени. */
:root {
  --primary: #1E88C9;
  --primary-light: #EAF5FC;
  --primary-hover: #17629A;
  --blue: #1E88C9;
  --blue-light: #EAF5FC;
  --gold: #1E88C9;
  --bg: #F4F7FB;
  --border: #E3E9F0;
  --border-light: #EEF2F7;
  --text: #0E1826;
  --text2: #5A6B80;
  --text3: #94A3B8;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(14,24,38,.05), 0 4px 14px rgba(14,24,38,.05);
}
html { -webkit-font-smoothing: antialiased; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: -.005em; }

/* ── Сайдбар ─────────────────────────────────────────── */
.sidebar { width: 240px; border-right: 1px solid var(--border); background: #fff; }
.main { margin-left: 240px; padding: 28px 36px; }
.sidebar-logo { padding: 22px 20px 16px; border-bottom: none; }
#sidebarClientId { margin-top: -6px; margin-bottom: 10px; opacity: .55; }
.sidebar-nav { padding: 6px 10px; }
.nav-item { border-left: none; border-radius: 10px; padding: 9px 12px; margin: 1px 0; gap: 11px; font-weight: 500; color: var(--text2); }
.nav-item:hover { background: var(--bg); color: var(--text); }
.nav-item.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }
.nav-item .icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 0; flex: none; }
.nav-item .icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nav-item.active .icon svg { stroke-width: 2.2; }
.nav-child { padding-left: 43px !important; }
.nav-arrow { margin-left: auto; font-size: 11px; opacity: .55; }
.sidebar-footer { border-top: 1px solid var(--border); padding: 14px 20px; }
.dq-powered { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text3); letter-spacing: .01em; }
.dq-powered b { color: var(--text2); font-weight: 650; }
.dq-mark { width: 18px; height: 18px; border-radius: 5px; background: linear-gradient(135deg, #2B9CD6, #17629A); color: #fff; font-size: 10px; font-weight: 800; display: inline-grid; place-items: center; }

/* ── Заголовки сторінок ──────────────────────────────── */
.page-header h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.page-header .subtitle { font-size: 13px; color: var(--text2); }

/* ── Картки, кнопки, форми ───────────────────────────── */
.card { border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.stat-card { border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.stat-card .num { letter-spacing: -.02em; }
.btn { border-radius: 10px; font-weight: 600; letter-spacing: -.005em; }
.btn-primary { background: var(--primary); box-shadow: 0 4px 12px rgba(30,136,201,.25); }
.btn-primary:hover { background: var(--primary-hover); }
input, select, textarea { border-radius: 10px !important; }
input:focus, select:focus, textarea:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(30,136,201,.15); outline: none; }
table th { color: var(--text2); letter-spacing: .06em; font-size: 11.5px; }

/* ── Вкладки розділу «Клініка» ───────────────────────── */
.dq-tabs { display: flex; gap: 4px; margin-bottom: 22px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.dq-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px 11px; margin-bottom: -1px; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--text2); border-bottom: 2px solid transparent; white-space: nowrap; border-radius: 8px 8px 0 0; transition: color .12s, background .12s; }
.dq-tab:hover { color: var(--text); background: var(--bg); }
.dq-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.dq-tab svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ── Екран входу ─────────────────────────────────────── */
#loginScreen { background: radial-gradient(1200px 600px at 20% -10%, #EAF5FC, #F4F7FB 60%) !important; }
#loginScreen > div { border: 1px solid var(--border); box-shadow: 0 20px 60px rgba(14,24,38,.10) !important; border-radius: 20px !important; }
#loginScreen input { letter-spacing: 2px !important; font-family: ui-monospace, Menlo, monospace; font-size: 15px !important; }
.dq-login-brand { display: flex; align-items: center; justify-content: center; gap: 9px; font-weight: 800; font-size: 20px; color: var(--text); letter-spacing: -.02em; margin-bottom: 6px; }
.dq-login-brand .dq-mark { width: 30px; height: 30px; border-radius: 9px; font-size: 15px; }

/* ── Бургер (видимий лише на мобільному) ─────────────── */
.dq-burger { display: none; position: fixed; top: 12px; left: 12px; z-index: 1001; width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--border); background: #fff; box-shadow: var(--shadow-sm); cursor: pointer; align-items: center; justify-content: center; }
.dq-burger svg { width: 20px; height: 20px; stroke: var(--text); fill: none; stroke-width: 2; stroke-linecap: round; }
.dq-overlay { display: none; position: fixed; inset: 0; background: rgba(14,24,38,.45); z-index: 999; }

@media (max-width: 900px) {
  .dq-burger { display: inline-flex; }
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; z-index: 1000; box-shadow: none; }
  body.nav-open .sidebar { transform: none; box-shadow: 0 0 40px rgba(14,24,38,.25); }
  body.nav-open .dq-overlay { display: block; }
  .main { margin-left: 0; padding: 64px 14px 24px; }
  .page-header h1 { font-size: 21px; }
  .dq-tabs { margin-inline: -14px; padding-inline: 14px; }
  /* дашборд: багатоколонкові inline-сітки — в одну колонку */
  .main [style*="grid-template-columns:1fr 1fr"],
  .main [style*="grid-template-columns:1fr 1.5fr"],
  .main [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  .main [style*="grid-template-columns:repeat(auto-fit,minmax(180px,1fr))"] { grid-template-columns: 1fr 1fr !important; }
  .card { padding: 16px; }
  table { font-size: 13px; }
  #loginScreen > div { width: calc(100% - 32px) !important; padding: 28px 22px !important; }
}