/* ── Gursk Medica Sales CRM — app.css ── */

/* ── CSS Variables (Light theme) ─────────────────────────── */
:root {
  --g1:   #1a6b3c;   /* green primary */
  --g2:   #2d9157;   /* green secondary */
  --bg:   #f4f6f8;
  --card: #ffffff;
  --bd:   #dee2e6;
  --tx:   #212529;
  --tx2:  #6c757d;
  --red:  #dc3545;
  --blue: #0d6efd;
}

/* ── Dark theme ───────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --g1:   #2ecc71;
    --g2:   #27ae60;
    --bg:   #0d1117;
    --card: #161b22;
    --bd:   #30363d;
    --tx:   #e6edf3;
    --tx2:  #8b949e;
  }
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--tx);
  font-size: 14px;
  line-height: 1.5;
}

input, select, textarea, button {
  font-family: inherit;
}

/* ── Buttons ──────────────────────────────────────────────── */
.bsave {
  background: var(--g1);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 16px;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
  transition: background .15s;
}
.bsave:hover { background: var(--g2); }

.bbtn {
  background: transparent;
  color: var(--tx);
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 6px 14px;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  transition: border-color .15s, background .15s;
}
.bbtn:hover { border-color: var(--g1); background: var(--bg); }

/* ── Nav tab buttons ──────────────────────────────────────── */
.nav-btn {
  padding: 14px 14px;
  background: transparent;
  color: rgba(255,255,255,.75);
  border: none;
  border-bottom: 3px solid transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.nav-btn:hover { color: #fff; }
.nav-btn.on {
  color: #fff;
  border-bottom-color: #fff;
}

/* ── Tab buttons (inside modules) ────────────────────────── */
.tab-main {
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--tx2);
  font-size: 13px;
  cursor: pointer;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}
.tab-main.on {
  color: var(--g1);
  border-bottom-color: var(--g1);
  font-weight: 700;
}

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 14px;
}

/* ── Toast notifications ──────────────────────────────────── */
.toast {
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  pointer-events: auto;
  animation: toast-in .2s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  max-width: 320px;
}
.toast-ok  { background: #198754; }
.toast-err { background: #dc3545; }
.toast-warn{ background: #fd7e14; }
.toast-info{ background: #0d6efd; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Status badges ────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--tx2); }

/* ── Print styles ─────────────────────────────────────────── */
@media print {
  #topnav, .no-print, nav { display: none !important; }
  body { background: #fff; color: #111; }
}

/* ── Mobile adjustments ───────────────────────────────────── */
@media (max-width: 600px) {
  #topnav { padding: 0 10px; }
  .nav-btn { padding: 12px 10px; font-size: 12px; }
}