/* NorthStar — Common utility classes shared across all pages */

/* ── Status lines ── */
.status     { font-size:13px; min-height:18px; color:var(--muted) }
.status.ok  { color:#16a34a }
.status.err { color:#dc2626 }

/* ── Buttons ── */
.btn        { background:linear-gradient(180deg,#ff9c1f,#f28000); color:#fff; padding:9px 16px; border-radius:9px; border:none; cursor:pointer; font-size:14px; font-family:inherit; font-weight:600; box-shadow:0 1px 2px rgba(15,23,36,0.10), inset 0 1px 0 rgba(255,255,255,0.18); transition:transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease }
.btn:hover:not(:disabled) { filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 5px 12px -3px rgba(240,128,0,0.50), inset 0 1px 0 rgba(255,255,255,0.18) }
.btn:active:not(:disabled) { transform:translateY(0); filter:brightness(0.97); box-shadow:0 1px 2px rgba(15,23,36,0.12) }
.btn:disabled { opacity:0.5; cursor:not-allowed }
.btn-sm     { padding:6px 12px; font-size:12px }
.btn-ghost  { background:#fff; color:#374151; border:1px solid #d9e3ee; padding:8px 14px; border-radius:9px; cursor:pointer; font-size:13px; font-family:inherit; transition:background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease }
.btn-ghost:hover { background:#f4f8fb; border-color:#bccde0; box-shadow:0 2px 6px -2px rgba(15,23,36,0.12) }
.btn-danger { background:#fee2e2; color:#dc2626; border:1px solid #fecaca; padding:8px 12px; border-radius:9px; cursor:pointer; font-size:13px; font-family:inherit; transition:background-color 0.12s ease }
.btn-danger:hover { background:#fecaca }
.btn-teal   { background:linear-gradient(180deg,#15b8a8,#0c9b9a); color:#fff; padding:9px 16px; border-radius:9px; border:none; cursor:pointer; font-size:13px; font-family:inherit; font-weight:600; box-shadow:0 1px 2px rgba(15,23,36,0.10), inset 0 1px 0 rgba(255,255,255,0.16); transition:transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease }
.btn-teal:hover:not(:disabled) { filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 5px 12px -3px rgba(13,148,136,0.45), inset 0 1px 0 rgba(255,255,255,0.16) }
.btn-teal:active:not(:disabled) { transform:translateY(0); filter:brightness(0.97) }
.btn-teal:disabled { opacity:0.5; cursor:not-allowed }

/* ── Cards ── */
.card       { background:#fff; border-radius:12px; padding:20px; box-shadow:var(--shadow-card); margin-bottom:14px; border:1px solid var(--line) }
.card-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:#8da1b8; margin:0 0 14px }

/* ── Form fields ── */
.field-group       { display:flex; flex-direction:column; gap:5px }
.field-group label { font-size:12px; font-weight:600; color:#374151; text-transform:uppercase; letter-spacing:0.04em }
.field { padding:8px 10px; border:1px solid #d9e3ee; border-radius:8px; font-size:14px; font-family:inherit; background:#fff; color:#0f1724; transition:border-color 0.15s ease, box-shadow 0.15s ease }
.field:hover { border-color:#c2d3e4 }
.field:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(14,165,164,0.16) }
select.field, input.field, textarea.field { width:100% }
textarea.field { min-height:80px; resize:vertical }

/* ── Badge base ── */
.badge { display:inline-block; font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px }