/* ============================================================================
   Running Biomech — Design System (theme.css)
   Reconstrução original da linguagem "admin claro" (estilo AdminPress):
   tema claro, base em cards, sidebar + topbar, Poppins, paleta primary-blue
   + success/info/warning/danger. Implementação própria — não usa os assets
   licenciados do template. Spec completa em docs/DESIGN_SYSTEM.md.
============================================================================ */

/* ----------------------------- TOKENS ----------------------------- */
:root{
  /* superfícies */
  --bg:#f4f6f9;
  --card:#ffffff;
  --sidebar-bg:#ffffff;
  --topbar-bg:#ffffff;

  /* texto */
  --heading:#2a3547;
  --body:#5a6a85;
  --muted:#99abb4;

  /* linhas */
  --border:#eaeff5;
  --border-strong:#e1e7ef;

  /* marca + ações */
  --primary:#398bf7;
  --primary-deep:#1f6fe0;
  --primary-soft:#eaf3ff;

  /* status */
  --success:#2dce89;       --success-soft:#e7faf1;
  --info:#0bb5e7;          --info-soft:#e6f7fd;
  --warning:#ffb22b;       --warning-soft:#fff5e3;
  --danger:#fb4f59;        --danger-soft:#ffeaec;

  /* tipografia */
  --font:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fs-base:14px; --fs-sm:13px; --fs-xs:12px;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600;

  /* espaçamento (escala de 4) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;

  /* forma */
  --radius:6px; --radius-sm:4px; --radius-lg:10px; --radius-pill:999px;

  /* sombra (tom levemente arroxeado, assinatura do gênero) */
  --shadow-sm:0 1px 2px rgba(43,53,71,.05);
  --shadow:0 0 13px rgba(82,63,105,.06);
  --shadow-md:0 6px 20px rgba(43,53,71,.10);

  /* layout */
  --sidebar-w:240px; --topbar-h:64px;
}

/* ----------------------------- BASE ------------------------------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); font-size:var(--fs-base); font-weight:var(--fw-regular);
  color:var(--body); background:var(--bg); line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{font-family:var(--font); color:var(--heading); font-weight:var(--fw-semibold); margin:0; line-height:1.3}
h1{font-size:24px} h2{font-size:21px} h3{font-size:18px} h4{font-size:16px} h5{font-size:14px}
a{color:var(--primary); text-decoration:none}
a:hover{color:var(--primary-deep)}
small,.text-sm{font-size:var(--fs-sm)}
.text-xs{font-size:var(--fs-xs)}
.text-muted{color:var(--muted)}
.text-heading{color:var(--heading)}

/* --------------------------- APP SHELL ---------------------------- */
.app{display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh}

/* sidebar */
.sidebar{
  background:var(--sidebar-bg); border-right:1px solid var(--border);
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column; overflow-y:auto;
}
.sidebar .brand{display:flex; align-items:center; gap:10px; height:var(--topbar-h); padding:0 var(--sp-5); border-bottom:1px solid var(--border)}
.sidebar .brand .logo{width:34px; height:34px; flex:0 0 34px; border-radius:9px; display:grid; place-items:center; background:var(--primary)}
.sidebar .brand b{font-weight:var(--fw-semibold); font-size:16px; color:var(--heading); letter-spacing:-.01em}
.nav{padding:var(--sp-4) var(--sp-3); display:flex; flex-direction:column; gap:2px}
.nav-section{font-size:11px; font-weight:var(--fw-semibold); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:var(--sp-4) var(--sp-3) var(--sp-2)}
.nav-link{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--radius);
  color:var(--body); font-weight:var(--fw-medium); font-size:var(--fs-base); cursor:pointer;
  border-left:3px solid transparent; transition:background .15s,color .15s;
}
.nav-link svg{width:19px; height:19px; flex:0 0 19px; stroke:currentColor; fill:none; stroke-width:1.8}
.nav-link:hover{background:var(--bg); color:var(--heading)}
.nav-link.active{background:var(--primary-soft); color:var(--primary-deep); border-left-color:var(--primary)}
.nav-link .pill{margin-left:auto; font-size:10px; font-weight:var(--fw-semibold); padding:1px 7px; border-radius:var(--radius-pill); background:var(--danger); color:#fff}

/* main */
.main{min-width:0; display:flex; flex-direction:column}

/* topbar */
.topbar{
  height:var(--topbar-h); background:var(--topbar-bg); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:var(--sp-4);
  padding:0 var(--sp-6);
}
.topbar .menu-btn{display:none; background:none; border:none; cursor:pointer; color:var(--heading); padding:6px}
.topbar .search{display:flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:8px 12px; min-width:220px; color:var(--muted)}
.topbar .search input{border:none; background:none; outline:none; font-family:var(--font); font-size:var(--fs-base); color:var(--heading); width:100%}
.topbar .spacer{flex:1}
.topbar-actions{display:flex; align-items:center; gap:var(--sp-3)}
.icon-btn{position:relative; width:38px; height:38px; border-radius:var(--radius); border:1px solid var(--border); background:var(--card); display:grid; place-items:center; cursor:pointer; color:var(--body)}
.icon-btn:hover{background:var(--bg); color:var(--heading)}
.icon-btn svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8}
.icon-btn .dot{position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%; background:var(--danger); border:2px solid var(--card)}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer; padding:4px 6px; border-radius:var(--radius)}
.user-chip:hover{background:var(--bg)}
.user-chip .who{line-height:1.2}
.user-chip .who b{display:block; font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--heading)}
.user-chip .who span{font-size:var(--fs-xs); color:var(--muted)}

/* content */
.content{padding:var(--sp-6); flex:1}
.page-head{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); margin-bottom:var(--sp-6)}
.page-head h1{font-size:21px}
.breadcrumb{display:flex; gap:7px; align-items:center; font-size:var(--fs-sm); color:var(--muted); margin-top:3px}
.breadcrumb a{color:var(--muted)} .breadcrumb a:hover{color:var(--primary)}
.breadcrumb .sep{opacity:.6}

/* ----------------------------- AVATAR ----------------------------- */
.avatar{width:38px; height:38px; flex:0 0 38px; border-radius:var(--radius-pill); display:grid; place-items:center; font-weight:var(--fw-semibold); font-size:var(--fs-sm); color:#fff; background:var(--primary)}
.avatar.sm{width:30px; height:30px; flex-basis:30px; font-size:var(--fs-xs)}

/* ------------------------------ CARD ------------------------------ */
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)}
.card + .card{margin-top:var(--sp-6)}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); padding:var(--sp-5) var(--sp-6); border-bottom:1px solid var(--border)}
.card-title{font-size:16px; font-weight:var(--fw-semibold); color:var(--heading)}
.card-sub{font-size:var(--fs-sm); color:var(--muted); margin-top:2px}
.card-body{padding:var(--sp-6)}

/* grid de colunas */
.grid{display:grid; gap:var(--sp-6)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}

/* --------------------------- STAT CARD ---------------------------- */
.stat{display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-5) var(--sp-6); background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)}
.stat .tile{width:52px; height:52px; flex:0 0 52px; border-radius:var(--radius); display:grid; place-items:center}
.stat .tile svg{width:24px; height:24px; stroke-width:1.9; fill:none}
.stat .val{font-size:22px; font-weight:var(--fw-semibold); color:var(--heading); line-height:1.1}
.stat .lbl{font-size:var(--fs-sm); color:var(--muted); margin-top:2px}
.tile.t-primary{background:var(--primary-soft)} .tile.t-primary svg{stroke:var(--primary)}
.tile.t-success{background:var(--success-soft)} .tile.t-success svg{stroke:var(--success)}
.tile.t-info{background:var(--info-soft)}        .tile.t-info svg{stroke:var(--info)}
.tile.t-warning{background:var(--warning-soft)}  .tile.t-warning svg{stroke:var(--warning)}

/* ----------------------------- BUTTON ----------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font); font-weight:var(--fw-medium);
  font-size:var(--fs-base); line-height:1; padding:10px 16px; border-radius:var(--radius); border:1px solid transparent;
  cursor:pointer; transition:background .15s,border-color .15s,color .15s; white-space:nowrap; text-decoration:none;
}
.btn svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2}
.btn-primary{background:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-deep); color:#fff}
.btn-light{background:var(--card); color:var(--body); border-color:var(--border-strong)}
.btn-light:hover{background:var(--bg); color:var(--heading)}
.btn-outline{background:transparent; color:var(--primary); border-color:var(--primary)}
.btn-outline:hover{background:var(--primary-soft)}
.btn-sm{padding:7px 12px; font-size:var(--fs-sm)}
.btn-block{width:100%; justify-content:center}
.btn:disabled{opacity:.6; cursor:not-allowed}

/* ----------------------------- BADGE ------------------------------ */
.badge{display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-xs); font-weight:var(--fw-medium); padding:4px 9px; border-radius:var(--radius-pill); line-height:1}
.badge-success{background:var(--success-soft); color:#1a9b63}
.badge-info{background:var(--info-soft); color:#0a8fb8}
.badge-warning{background:var(--warning-soft); color:#b67d09}
.badge-danger{background:var(--danger-soft); color:#d8323c}
.badge-muted{background:var(--bg); color:var(--muted); border:1px solid var(--border)}
.badge-primary{background:var(--primary-soft); color:var(--primary-deep)}

/* ----------------------------- TABLE ------------------------------ */
.table{width:100%; border-collapse:collapse}
.table th{text-align:left; font-size:var(--fs-xs); font-weight:var(--fw-semibold); letter-spacing:.04em; text-transform:uppercase; color:var(--muted); padding:12px var(--sp-6); border-bottom:1px solid var(--border)}
.table td{padding:14px var(--sp-6); border-bottom:1px solid var(--border); color:var(--body); vertical-align:middle}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr:hover{background:var(--bg)}
.table .cell-main{display:flex; align-items:center; gap:12px}
.table .cell-main b{font-weight:var(--fw-medium); color:var(--heading)}
.table .cell-main span{font-size:var(--fs-xs); color:var(--muted)}

/* --------------------------- FORM CONTROLS ------------------------ */
.form-label{display:block; font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--heading); margin-bottom:6px}
.form-control{
  width:100%; font-family:var(--font); font-size:var(--fs-base); color:var(--heading);
  background:var(--card); border:1px solid var(--border-strong); border-radius:var(--radius); padding:10px 12px; transition:border-color .15s,box-shadow .15s;
}
.form-control:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft)}
.form-control::placeholder{color:var(--muted)}

/* ---------------------------- UTILITIES --------------------------- */
.flex{display:flex} .items-center{align-items:center} .justify-between{justify-content:space-between}
.gap-2{gap:var(--sp-2)} .gap-3{gap:var(--sp-3)} .gap-4{gap:var(--sp-4)}
.mt-4{margin-top:var(--sp-4)} .mt-6{margin-top:var(--sp-6)}
.empty{padding:48px 24px; text-align:center; color:var(--body)}
.empty b{display:block; font-size:16px; color:var(--heading); margin-bottom:6px}
.spinner{width:16px;height:16px;border:2px solid var(--border-strong);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------------------- RESPONSIVE -------------------------- */
@media(max-width:920px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed; left:0; top:0; width:var(--sidebar-w); z-index:50; transform:translateX(-100%); transition:transform .22s ease; box-shadow:var(--shadow-md)}
  body.nav-open .sidebar{transform:none}
  body.nav-open::after{content:""; position:fixed; inset:0; background:rgba(42,53,71,.4); z-index:40}
  .topbar .menu-btn{display:grid; place-items:center}
  .topbar .search{display:none}
  .grid.cols-4{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}
  .content{padding:var(--sp-4)}
  .hide-sm{display:none}
}