/* TechShop UI v2 — layout moderno, menu interativo, dark theme */
:root{
  --bg: #0b1020;
  --bg-elev: #10152b;
  --surface: #121936;
  --card: #151d42;
  --border: #273056;
  --text: #eaf0ff;
  --muted: #a8b0d9;
  --primary: #7c5cff;
  --primary-2: #5b8cff;
  --accent: #2de3a0;
  --danger: #ff5c7c;
  --warning: #ffca5c;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing: border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(60rem 60rem at -10% -10%, rgba(124,92,255,.18), transparent 40%),
    radial-gradient(50rem 50rem at 110% 0%, rgba(45,227,160,.1), transparent 45%),
    var(--bg);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Open Sans','Helvetica Neue',sans-serif;
  letter-spacing:.1px;
}

/* Links e botões */
a{color:inherit;text-decoration:none}
button{cursor:pointer}
button, .btn{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid var(--border);
  border-radius:12px;
  padding:.65rem .9rem;
  background:linear-gradient(180deg, #1b2450, #121936);
  color:var(--text);
  transition: .2s ease-in-out;
  position:relative; overflow:hidden;
}
button:hover, .btn:hover{transform: translateY(-1px); box-shadow: var(--shadow);}
button.primary, .btn.primary{
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
}
button.ghost, .btn.ghost{
  background: transparent; border-color: var(--border);
}
.badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.75rem; padding:.2rem .5rem; border-radius:999px;
  border:1px solid var(--border); color:#cdd3ff; background:#101734;
}

/* Layout geral */
.layout{display:grid; grid-template-columns: 260px 1fr; min-height:100vh}
.sidebar{
  background: linear-gradient(180deg, #0f1430, #0d1229);
  border-right:1px solid var(--border);
  padding:16px 12px; position:sticky; top:0; height:100vh; overflow:auto;
}
.sidebar .brand{
  display:flex; align-items:center; gap:.6rem; padding:10px 12px; margin:6px 6px 14px;
  font-weight:800; letter-spacing:.4px; font-size:1.1rem;
  border-radius:12px; background:linear-gradient(180deg,#141b3b, #0f1531); border:1px solid var(--border);
}
.brand .logo{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:linear-gradient(135deg,var(--primary),var(--accent));}

.sidebar .search{
  margin:10px 10px 14px; position:relative;
}
.sidebar .search input{
  width:100%; padding:.6rem .9rem .6rem 2.2rem; border-radius:12px;
  background:#0c1331; border:1px solid var(--border); color:var(--text);
}
.sidebar .search svg{position:absolute; left:.65rem; top:.55rem; opacity:.7}

.nav{
  display:flex; flex-direction:column; gap:6px; margin:0 6px;
}
.nav .item{
  border-radius:12px; padding:10px 12px; display:flex; align-items:center; gap:.7rem;
  border:1px solid transparent; color:#cfd6ff;
}
.nav .item svg{opacity:.9}
.nav .item:hover{background:#151c3f; border-color:var(--border); transform: translateY(-1px);}
.nav .item.active{background:linear-gradient(180deg,#18204a,#12193a); border-color:var(--border); color:#fff;}
.nav .item .chev{margin-left:auto;opacity:.7;transition:transform .2s;}
.nav .item[aria-expanded="true"] .chev{transform:rotate(90deg)}

.submenu{
  display:none; padding:6px 0 6px 34px;
}
.submenu.show{display:block}
.submenu a{
  display:flex; align-items:center; gap:.5rem; padding:8px 10px; margin:4px 0;
  border-radius:10px; color:#b8c1f6;
}
.submenu a:hover{background:#151c3f; color:#fff}

.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px; border-bottom:1px solid var(--border);
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(18,25,58,.65), rgba(18,25,58,.35));
}
.topbar .left{display:flex; align-items:center; gap:12px}
.topbar .right{display:flex; align-items:center; gap:8px}
.kbd{border:1px solid var(--border); background:#0e1536; padding:.15rem .4rem; border-radius:6px; font-size:.75rem; color:#a2a9d8}

/* Conteúdo */
.content{display:flex; flex-direction:column; min-width:0}
.container{padding:20px;}

/* Cards / tabelas */
.grid{display:grid; grid-template-columns: repeat(12, 1fr); gap:14px;}
.card{
  grid-column: span 12 / span 12;
  background: radial-gradient(1200px 400px at 110% -20%, rgba(124,92,255,.25), transparent 50%),
              radial-gradient(900px 300px at -10% 120%, rgba(45,227,160,.18), transparent 55%),
              var(--card);
  border:1px solid var(--border); border-radius:18px; padding:16px; box-shadow: var(--shadow);
}
.card.compact{padding:12px}
.stat{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px; border-radius:16px; border:1px solid var(--border);
  background: linear-gradient(180deg,#101736,#0c1230);
}
.stat .label{color:var(--muted); font-size:.9rem}
.stat .value{font-weight:800; font-size:1.6rem}

/* Dash */
@media (min-width: 700px){
  .col-4{grid-column: span 4 / span 4}
  .col-6{grid-column: span 6 / span 6}
  .col-8{grid-column: span 8 / span 8}
  .col-12{grid-column: span 12 / span 12}
}

/* Tabelas */
table{width:100%; border-collapse:collapse; background:transparent; border-radius:14px; overflow:hidden}
th,td{padding:12px; border-bottom:1px solid var(--border); text-align:left}
th{background:#131a3b; color:#cfd6ff; font-weight:600}

/* Inputs */
input,select,textarea{
  background:#0d1536; color:var(--text);
  border:1px solid var(--border); border-radius:12px; padding:.65rem .8rem; width:100%;
}

/* Footer */
.footer{padding:18px; color:var(--muted); border-top:1px solid var(--border); margin-top:10px}

/* Menu colapsado */
body.menu-collapsed .layout{grid-template-columns: 76px 1fr}
body.menu-collapsed .sidebar .brand span.txt{display:none}
body.menu-collapsed .sidebar .search{display:none}
body.menu-collapsed .nav .title{display:none}
body.menu-collapsed .submenu{display:none !important}

/* micro animação (ripple) */
.btn, .nav .item, .submenu a{position:relative; overflow:hidden}
.btn::after, .nav .item::after, .submenu a::after{
  content:""; position:absolute; width:6px; height:6px; background:#fff3;
  border-radius:50%; transform:scale(1); opacity:0; pointer-events:none;
  transition: transform .6s, opacity .6s;
}
.btn:active::after, .nav .item:active::after, .submenu a:active::after{
  transform:scale(16); opacity:1;
}

/* Light mode (opcional) */
body.light{
  --bg: #f3f6ff; --bg-elev:#fff; --surface:#fff; --card:#fff; --border:#e2e7ff;
  --text:#121428; --muted:#5b6280; --shadow: 0 10px 30px rgba(40,56,140,.15);
}
body.light .topbar{background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.45))}
body.light .sidebar{background: linear-gradient(180deg, #f7f9ff, #eef2ff)}
body.light .nav .item:hover{background:#eef2ff}