/* assets/styles.css — clean UI */
:root{
  --bg:#f5f6f8; --card:#ffffff; --muted:#647083; --fg:#0b0e14; --accent:#ff7a00; --line:#e7e9ee;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;color:var(--fg);background:var(--bg)}
a{color:inherit;text-decoration:none}
.header{display:flex;align-items:center;gap:16px;padding:14px 20px;border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:2;box-shadow:0 6px 20px rgba(10,20,40,.06)}
.header img{height:44px;object-fit:contain}
.header h1{font-size:18px;margin:0;color:#0b0e14}
.wrap{max-width:1140px;margin:0 auto;padding:20px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{background:var(--card);border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.card .thumb{width:100%;aspect-ratio:4/3;background:#ddd;display:flex;align-items:center;justify-content:center}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .content{padding:12px 14px 16px}
.tag{display:inline-block;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12px;margin-right:8px}
.price{font-size:20px;font-weight:800;color:var(--accent); margin-top:8px}
.footer{padding:24px;text-align:center;color:var(--muted);border-top:1px solid var(--line);margin-top:40px;background:transparent}
.btn{display:inline-block;background:var(--accent);color:#000;padding:10px 16px;border-radius:10px;font-weight:700;border:0}
.btn-outline{display:inline-block;border:1px solid var(--line);padding:8px 12px;border-radius:10px;color:#0b0e14;background:transparent}
.form{max-width:100%;background:var(--card);padding:16px;border-radius:12px;border:1px solid var(--line)}
.form .row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.form label{display:block;margin:6px 0 6px;color:var(--muted);font-size:12px}
.form input[type="text"], .form input[type="number"], .form textarea{width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;background:transparent;color:inherit}
.form textarea{min-height:120px}
.form .checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.alert{padding:10px 12px;border-radius:10px;background:#11221a;color:#0aa36c;border:1px solid #1f6d3f;margin-bottom:14px}
.error{background:#2b1313;border-color:#6d1f1f;color:#ffd0d0}
.admin-header{display:flex;align-items:center;justify-content:space-between}
table{width:100%;border-collapse:collapse;background:var(--card);border-radius:12px;overflow:hidden;border:1px solid var(--line)}
th,td{padding:12px;border-bottom:1px solid var(--line);text-align:left}
th{background:rgba(0,0,0,.04)}
.login{max-width:380px;margin:60px auto;padding:24px;background:var(--card);border-radius:16px}
.small{color:var(--muted);font-size:12px}
.section-head{display:flex;align-items:center;justify-content:space-between;margin:18px 0 12px}
.section-head h3{margin:0;font-size:20px}
.filters{display:flex;gap:10px;flex-wrap:wrap}
.search{display:flex;gap:8px;flex-wrap:wrap}
.search input{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:transparent;color:inherit;min-width:160px}

/* ===== FIX layout do login (labels e inputs em linhas separadas) ===== */
.login form label{ display:block; margin:10px 0 6px; color:var(--muted);}
.login form input[type="text"], .login form input[type="password"]{ display:block; width:100%; padding:10px; border:1px solid var(--line); border-radius:10px; background:transparent; color:inherit;}
.login .btn, .login .btn-outline{margin-top:8px}

/* ====== HOME LISTING COMPACT ====== */
/* Afeta apenas a grade logo após .section-head (home) */
.section-head + .grid{
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:12px;
}
.section-head + .grid .card .thumb{ aspect-ratio:3/2; }
.section-head + .grid .card .content{ padding:10px 12px 12px; }
.section-head + .grid .tag{ font-size:11px; padding:3px 8px; }
.section-head + .grid .price{ font-size:18px; }

/* Em telas muito grandes, permita mais colunas e lacunas menores */
@media (min-width: 1280px){
  .wrap{ max-width: 1240px; }
  .section-head + .grid{
    grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
    gap:12px;
  }
}
/* === v4: HOME CARDS MENORES (escopo: .inventory-grid) === */
.inventory-grid{
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap:10px !important;
}
.inventory-grid .card .thumb{ aspect-ratio:3/2 !important; }
.inventory-grid .card .content{ padding:8px 10px 10px !important; }
.inventory-grid .tag{ font-size:10.5px !important; padding:3px 7px !important; }
.inventory-grid .price{ font-size:17px !important; }
@media (min-width: 1360px){
  .wrap{ max-width: 1280px !important; }
  .inventory-grid{
    grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)) !important;
    gap:10px !important;
  }
}
.filters .search{ display:flex; flex-wrap:wrap; gap:8px; }
.filters .search .row{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:8px;
  width:100%;
}
.filters .search input{
  min-width:0 !important;
  width:100%;
}
@media (max-width: 480px){
  .filters .search{ display:block !important; }
  .filters .search .row{ grid-template-columns:1fr !important; gap:8px !important; }
  .filters .search .btn{ width:100% !important; display:block; }
}
@media (min-width: 481px) and (max-width: 767px){
  .filters .search .row{ grid-template-columns:1fr 1fr !important; }
}
@media (min-width: 768px) and (max-width: 1023px){
  .filters .search .row{ grid-template-columns:repeat(3, 1fr) !important; }
}
@media (min-width: 1024px) and (max-width: 1279px){
  .filters .search .row{ grid-template-columns:repeat(4, 1fr) !important; }
}
@media (min-width: 1280px){
  .filters .search .row{ grid-template-columns:repeat(5, 1fr) !important; }
}