/* _shared/kit.css - common component styles for agentsclub UI kits.
   Pairs with ../../colors_and_type.css (tokens). */

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column;
       color: var(--fg-1); font-family: var(--font-ui); -webkit-font-smoothing: antialiased;
       background-color: var(--canvas);
       background-image: radial-gradient(var(--grid) 1px, transparent 1.3px);
       background-size: 22px 22px; }

/* ---- Button (sharp corners, candy bottom edge) ---- */
.btn { border: none; font: 700 14px/1 var(--font-ui); color: var(--fg-on-color); padding: 15px 26px;
       border-radius: var(--r-lg); cursor: pointer; position: relative; top: 0;
       display: inline-flex; align-items: center; gap: 9px;
       transition: filter .12s ease, top .07s ease, box-shadow .07s ease; user-select: none; }
.btn:active { top: 4px; box-shadow: 0 0 0 currentColor !important; }
.btn-primary { background: var(--primary); box-shadow: 0 4px 0 var(--primary-press); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-success { background: var(--success); box-shadow: 0 4px 0 var(--success-edge); }
.btn-danger  { background: var(--danger);  box-shadow: 0 4px 0 var(--danger-edge); }
.btn-ghost { background: transparent; color: var(--fg-1); border: 1.5px solid var(--fg-1); box-shadow: none; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { padding: 11px 18px; font-size: 12.5px; border-radius: var(--r-md); }
.btn-lg { padding: 17px 32px; font-size: 15px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Icon button (chrome) ---- */
.iconbtn { width: 38px; height: 38px; border-radius: var(--r-md); border: none; background: transparent;
           color: var(--fg-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
           transition: background .12s, color .12s; }
.iconbtn:hover { background: var(--surface-2); color: var(--primary); }

/* ---- Card ---- */
.card { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-sm);
         border: 1px solid var(--border-1); transition: border-color .15s, box-shadow .15s; }
.card:hover { border-color: var(--ink); box-shadow: var(--shadow-hard); }

/* ---- Stat pill ---- */
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--r-full);
        font: 700 15px/1 var(--font-ui); background: var(--surface); box-shadow: var(--shadow-xs);
        border: 1px solid var(--border-1); }

/* ---- Progress bar (sharp, thin, orange fill) ---- */
.track { background: var(--surface-3); overflow: hidden; height: 8px; }
.track > .fill { height: 100%; background: var(--primary); transition: width .5s cubic-bezier(.2,.8,.2,1); }

/* ---- Status badge / tag (sharp corners) ---- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px;
         font: 700 12px/1 var(--font-ui); }
.badge-ip { background: var(--primary-soft); color: var(--primary); }
.badge-dn { background: var(--success-soft); color: var(--success); }
.badge-lk { background: var(--surface-3); color: var(--fg-3); }
/* Added for the notification queue (/mgmt/notifications): "failed" is the one
   state there that has to read as a problem, and badge-lk made it look like
   just another neutral status. */
.badge-er { background: var(--danger-soft); color: var(--danger); }
.badge-tag { background: var(--accent-2); color: var(--accent-2-ink); }

.overline { font: var(--overline); color: var(--fg-3); }

/* frosted sticky nav */
.frost { background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 999px; border: 3px solid var(--canvas); }