/* ============================================================================
   MikroTik Billing — Golden-Ratio Design Layer  (theme.css)
   Loaded AFTER Bootstrap + the inline design system so it refines, never fights.
   Principles: golden-ratio (φ≈1.618) spacing & type rhythm, consistent surfaces,
   clear hierarchy, visible feedback & focus (Shneiderman's rules), accessibility.
   Purely cosmetic — no layout/width/position changes, so nothing structural breaks.
   ========================================================================== */

:root {
  /* ── Golden / Fibonacci spacing scale (px) ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 13px;
  --sp-4: 21px;
  --sp-5: 34px;
  --sp-6: 55px;

  /* ── Type scale — golden ratio between heading steps, base 14px ── */
  --fs-xs:   11px;
  --fs-sm:   12.5px;
  --fs-base: 14px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   22px;   /* ≈ 14 × φ  */
  --fs-2xl:  29px;   /* ≈ 18 × φ  */
  --fs-3xl:  37px;

  --lh-body: 1.6;    /* ≈ φ — comfortable reading */
  --lh-tight: 1.25;

  /* ── Refined radii & elevation (layered, soft) ── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --e-1: 0 1px 2px rgba(15,23,42,.05);
  --e-2: 0 2px 8px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --e-3: 0 10px 30px -8px rgba(15,23,42,.18), 0 4px 10px -4px rgba(15,23,42,.10);

  --ease: .18s cubic-bezier(.4, 0, .2, 1);

  /* Align Bootstrap component tokens with the app accent + golden radii */
  --bs-primary: #3b82f6;
  --bs-primary-rgb: 59, 130, 246;
  --bs-border-radius: var(--r-md);
  --bs-border-radius-sm: var(--r-sm);
  --bs-border-radius-lg: var(--r-lg);
  --bs-body-line-height: var(--lh-body);
}

/* ── Typographic hierarchy ─────────────────────────────────────────────── */
body { line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, .h1 { font-size: var(--fs-3xl); }
h2, .h2 { font-size: var(--fs-2xl); }
h3, .h3 { font-size: var(--fs-xl); }
h4, .h4 { font-size: var(--fs-lg); }
h5, .h5 { font-size: var(--fs-md); }
h6, .h6 { font-size: var(--fs-base); }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
  line-height: var(--lh-tight);
  letter-spacing: -0.011em;
  font-weight: 700;
}
.text-muted, small, .small { letter-spacing: 0; }

/* ── Buttons — consistent rhythm + clear feedback ──────────────────────── */
.btn {
  --bs-btn-border-radius: var(--r-sm);
  font-weight: 500;
  letter-spacing: .01em;
  padding: var(--sp-2) var(--sp-4);
  transition: transform var(--ease), box-shadow var(--ease), background-color var(--ease), border-color var(--ease);
}
.btn-sm { padding: 5px var(--sp-3); }
.btn-lg { padding: var(--sp-3) var(--sp-5); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { box-shadow: 0 1px 2px rgba(37,99,235,.25); }
.btn-primary:hover { box-shadow: 0 4px 12px -2px rgba(37,99,235,.45); }
.btn-success { box-shadow: 0 1px 2px rgba(16,185,129,.22); }
.btn-success:hover { box-shadow: 0 4px 12px -2px rgba(16,185,129,.42); }
.btn:disabled, .btn.disabled { transform: none; box-shadow: none; }

/* ── Cards — soft, consistent surfaces ─────────────────────────────────── */
.card {
  border: 1px solid rgba(226,232,240,.9);
  border-radius: var(--r-md);
  box-shadow: var(--e-1);
  transition: box-shadow var(--ease), transform var(--ease);
}
.card.shadow-sm { box-shadow: var(--e-2) !important; }
.card-header {
  background: linear-gradient(180deg, #ffffff, #fbfcfe);
  border-bottom: 1px solid rgba(226,232,240,.8);
  font-weight: 600;
  letter-spacing: .005em;
  padding: var(--sp-3) var(--sp-4);
}
.card-body { padding: var(--sp-4); }

/* KPI / stat cards feel tactile */
.card.border-0.shadow-sm:hover { box-shadow: var(--e-3) !important; transform: translateY(-2px); }

/* ── Tables — quiet headers, comfortable rows, clear hover ─────────────── */
.table { --bs-table-hover-bg: rgba(59,130,246,.05); }
.table > thead th,
.table > thead > tr > th {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: #475569;
}
.table.table-dark > thead th { color: #e2e8f0; }
.table > tbody > tr { transition: background-color var(--ease); }
.table > :not(caption) > * > * { padding-top: 9px; padding-bottom: 9px; }
.table-sm > :not(caption) > * > * { padding-top: 6px; padding-bottom: 6px; }

/* ── Forms — clear focus feedback + accessible rings ───────────────────── */
.form-control, .form-select {
  border-radius: var(--r-sm);
  border-color: #e2e8f0;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.form-control:focus, .form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}
.form-label { font-weight: 600; font-size: var(--fs-sm); color: #334155; margin-bottom: 5px; }
.input-group-text { background: #f8fafc; border-color: #e2e8f0; }

/* ── Nav pills / tabs — clear active state ─────────────────────────────── */
.nav-pills .nav-link {
  border-radius: var(--r-sm);
  color: #475569;
  font-weight: 500;
  transition: background-color var(--ease), color var(--ease);
}
.nav-pills .nav-link:hover { background: rgba(59,130,246,.08); color: var(--bs-primary); }
.nav-pills .nav-link.active { box-shadow: 0 2px 8px -2px rgba(37,99,235,.5); }

/* ── Modals — elevated, softened ───────────────────────────────────────── */
.modal-content { border: none; border-radius: var(--r-lg); box-shadow: var(--e-3); overflow: hidden; }
.modal-header, .modal-footer { border-color: rgba(226,232,240,.8); padding: var(--sp-3) var(--sp-4); }
.modal-body { padding: var(--sp-4); }
.modal-title { font-weight: 700; }

/* ── Badges — legible, consistent ──────────────────────────────────────── */
.badge { font-weight: 600; letter-spacing: .02em; border-radius: 999px; padding: .34em .68em; }

/* ── Alerts / toasts ───────────────────────────────────────────────────── */
.alert { border-radius: var(--r-md); border: 1px solid rgba(226,232,240,.9); }
.toast, .toast-container .toast { border-radius: var(--r-md); box-shadow: var(--e-3); }

/* ── Accessibility: always-visible keyboard focus ──────────────────────── */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.nav-link:focus-visible, .form-control:focus-visible, .form-select:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* ── Refined scrollbars (feedback without noise) ───────────────────────── */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }

/* ── Motion sensitivity ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
  .btn:hover, .card:hover { transform: none !important; }
}