/* A small semantic layer on top of Tailwind so the markup stays readable.
   Written as plain CSS on purpose: Tailwind arrives from the CDN, which has no
   build step and therefore cannot expand @apply in an external stylesheet. */

.card { background:#0f172a; border:1px solid #1e293b; border-radius:.75rem; padding:1rem; }
.label { display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em;
         color:#64748b; margin-bottom:.25rem; }
.value { font-size:1.25rem; font-weight:600; font-variant-numeric:tabular-nums; }
.sub { font-size:.7rem; color:#64748b; margin-top:.125rem; }

.input { background:#020618; border:1px solid #334155; border-radius:.5rem;
         padding:.375rem .5rem; font-size:.875rem; color:#e2e8f0; }
.input:focus { border-color:#0ea5e9; outline:none; }

.btn { background:#0369a1; color:#fff; padding:.5rem 1rem; border-radius:.5rem;
       font-size:.875rem; font-weight:500; transition:background .15s; }
.btn:hover { background:#0284c7; }
.btn-sm { background:#334155; color:#f1f5f9; padding:.375rem .75rem; border-radius:.5rem;
          font-size:.75rem; font-weight:500; transition:background .15s; }
.btn-sm:hover { background:#475569; }
.btn-sm-danger { background:#991b1b; color:#fff; padding:.375rem .75rem; border-radius:.5rem;
                 font-size:.75rem; font-weight:500; transition:background .15s; }
.btn-sm-danger:hover { background:#b91c1c; }

.badge { display:inline-block; font-size:.7rem; padding:.25rem .5rem; border-radius:.375rem;
         font-weight:500; white-space:nowrap; }
.badge-ok { background:#052e16; color:#6ee7b7; }
.badge-warn { background:#451a03; color:#fcd34d; }
.badge-err { background:#450a0a; color:#fca5a5; }
.badge-off, .badge-dim { background:#1e293b; color:#94a3b8; }

table { border-collapse:collapse; width:100%; }
th { font-weight:500; }
td, th { padding-right:.75rem; }
pre { white-space:pre-wrap; word-break:break-word; }
[x-cloak] { display:none !important; }

/* Installed PWA on notched phones: keep content clear of the system bars. */
.safe-area { padding-left:max(1rem, env(safe-area-inset-left));
             padding-right:max(1rem, env(safe-area-inset-right));
             padding-top:max(1.5rem, env(safe-area-inset-top));
             padding-bottom:max(1.5rem, env(safe-area-inset-bottom)); }
.toast { bottom:max(1.5rem, calc(env(safe-area-inset-bottom) + .75rem)); }
.btn:disabled { opacity:.6; cursor:default; }

/* --- Phones: the page must never scroll sideways ----------------------- */

/* iOS zooms into any field under 16px when it gets focus, and an installed
   PWA stays zoomed afterwards, so the whole page pans sideways. !important
   because Tailwind's text-xs/text-sm arrive later and would win otherwise. */
@media (max-width: 640px) {
  input, select, textarea { font-size:16px !important; }
}

/* Safety net only: wide content (tables, tabs) scrolls inside its own box.
   clip, unlike hidden, creates no scroll container, so fixed/sticky still work. */
html, body { overflow-x:clip; }

/* Horizontally scrollable strips (the tab bar) without a visible scrollbar. */
.no-scrollbar { scrollbar-width:none; }
.no-scrollbar::-webkit-scrollbar { display:none; }