/* ==========================================================================
   InstaPraxis v6 — modern design layer
   Loaded AFTER app.css / polish.css on every page (injected by js/api.js), so
   it refines the existing design system instead of replacing it: same brand
   (navy + teal/mint), same class names, crisper depth, rhythm and focus states.
   ========================================================================== */
:root{
  --vs-bg:         #f4f7fb;
  --vs-bg-2:       #eaf2fa;
  --vs-line:       #e2e9f1;
  --vs-radius:     18px;
  --vs-radius-sm:  12px;
  --vs-radius-btn: 12px;
  --vs-shadow-1:   0 1px 2px rgba(10,46,87,.04), 0 6px 18px rgba(10,46,87,.05);
  --vs-shadow-2:   0 14px 34px rgba(10,46,87,.08);
  --vs-shadow-3:   0 24px 60px rgba(10,46,87,.18);
  --v6-grad:       linear-gradient(135deg, #0a2e57 0%, #0d3b66 45%, #1b9aaa 140%);
  --v6-accent-grad:linear-gradient(135deg, #1b9aaa 0%, #34bfb0 100%);
  --v6-ring:       0 0 0 3px rgba(27,154,170,.28);
}

body.app, .app{
  background:
    radial-gradient(1100px 520px at 110% -10%, rgba(98,217,200,.10), transparent 60%),
    radial-gradient(900px 480px at -10% 0%, rgba(13,59,102,.06), transparent 55%),
    var(--vs-bg);
  background-attachment: fixed;
}

/* ---------- header: glass + accent hairline ---------- */
.app-header{
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(226,233,241,.9);
  box-shadow: 0 1px 0 rgba(10,46,87,.03), 0 8px 24px rgba(10,46,87,.04);
}
.app-header::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(27,154,170,.55), rgba(98,217,200,.55), transparent);
  opacity: .55; pointer-events: none;
}
.app-nav a{border-radius: 999px; transition: background .15s ease, color .15s ease}
.app-nav a.active{
  background: var(--vs-primary) !important; color: #fff !important;
  box-shadow: 0 6px 16px rgba(10,46,87,.18);
}
.app-nav a.active .nav-ic{color: #9be7e7}

/* ---------- content rhythm + entrance ---------- */
.app-main{animation: v6-in .28s ease both}
@keyframes v6-in{from{opacity:0; transform: translateY(6px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ .app-main{animation: none} }

h1{letter-spacing: -.025em}
h2, h3{letter-spacing: -.015em}

/* ---------- surfaces ---------- */
.card, .panel{
  border-radius: var(--vs-radius);
  border-color: var(--vs-line);
  box-shadow: var(--vs-shadow-1);
}
.card:hover, .panel:hover{box-shadow: var(--vs-shadow-2)}
.panel .head{border-bottom-color: var(--vs-line)}
.stat{border-radius: 16px; box-shadow: var(--vs-shadow-1)}

/* ---------- buttons ---------- */
.btn{border-radius: var(--vs-radius-btn); letter-spacing: -.005em}
.btn-primary{
  background: var(--v6-grad); background-size: 140% 140%;
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 8px 18px rgba(10,46,87,.20);
}
.btn-primary:hover{background-position: 100% 0; box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 12px 24px rgba(10,46,87,.26)}
.btn-accent{background: var(--v6-accent-grad)}
.btn-line{border-radius: var(--vs-radius-btn)}
.btn:focus-visible, a:focus-visible, button:focus-visible{outline: none; box-shadow: var(--v6-ring)}

/* ---------- forms ---------- */
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"],
input[type="date"], input[type="time"], input[type="search"], select, textarea{
  border-radius: 11px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input:focus, select:focus, textarea:focus{
  border-color: #1b9aaa !important; box-shadow: var(--v6-ring) !important; outline: none;
}

/* ---------- tables & badges ---------- */
.table{border-radius: var(--vs-radius); box-shadow: var(--vs-shadow-1)}
.table tbody tr:hover td{background: #f6fafd}
.badge{border-radius: 999px; font-weight: 700}

/* ---------- toasts / modals sit above the glass header ---------- */
.vs-toast, .toast{border-radius: 14px; box-shadow: var(--vs-shadow-3)}

/* ---------- small screens: tighter gutters, bigger tap targets ---------- */
@media (max-width: 640px){
  .app-main{padding: 18px 14px}
  .btn{min-height: 42px}
  .btn-sm{min-height: 36px}
}