/* ============================================================
   IPTunnel Admin — Base (tokens.css + fonts.css required first)
   Internetshub typography on a neutral control-plane canvas.
   ============================================================ */

/* -- mini reset (also inline in index.html; parse guarantee) -- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
h1, h2, h3, h4, h5, h6, p, ol, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
ol { padding-left: 1.2em; }
img, svg { display: inline-block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: inherit; text-decoration: none; }
code { font-family: var(--font-mono); font-size: 0.95em; }
table { border-collapse: collapse; }

/* -- body / canvas -- */
body {
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: 1.5;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* -- focus -- */
.app-shell :focus-visible,
.ui-dialog :focus-visible,
.ui-menu :focus-visible {
  outline: 2px solid rgba(24, 122, 92, 0.68);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* -- text helpers -- */
.mono { font-family: var(--font-mono); font-size: 0.95em; }
.num  { font-variant-numeric: tabular-nums; }
.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }

/* house micro-label: mono uppercase kicker */
.kicker {
  font: 500 10px var(--font-mono);
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--success);
}

/* -- icon sizing -- */
.icon { width: 18px; height: 18px; flex: none; vertical-align: -3px; }
.icon-sm { width: 14px; height: 14px; vertical-align: -2px; }
.icon-lg { width: 22px; height: 22px; vertical-align: -4px; }

/* -- scrollbars -- */
.app-shell ::-webkit-scrollbar,
.ui-dialog ::-webkit-scrollbar,
.ui-sheet ::-webkit-scrollbar,
.sup-conversation::-webkit-scrollbar { width: 10px; height: 10px; }
.app-shell ::-webkit-scrollbar-thumb,
.ui-dialog ::-webkit-scrollbar-thumb,
.ui-sheet ::-webkit-scrollbar-thumb,
.sup-conversation::-webkit-scrollbar-thumb {
  background: #b9b5ab; border-radius: 999px;
  border: 2px solid transparent; background-clip: content-box;
}
.app-shell ::-webkit-scrollbar-thumb:hover { background-color: #8b887f; }
.app-shell ::-webkit-scrollbar-track { background: transparent; }

::selection { background: rgba(89, 215, 173, 0.34); }

/* -- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .app-shell *,
  .ui-dialog *,
  .ui-menu *,
  .app-sidebar,
  .sidebar-backdrop-v2 {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}