/* Backyard Shack — admin dashboard styles.
   Loaded alongside styles.css (shares its :root tokens). */

body.admin-body{background:var(--bg);}

/* ---------- login ---------- */
.admin-login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
}
.admin-login-card{
  width:100%;max-width:380px;background:var(--bg-card);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:32px 28px;
}
.admin-login-card .brand{justify-content:center;margin-bottom:22px;}
.admin-login-card h1{font-family:var(--font-display);font-size:20px;margin:0 0 22px;text-align:center;}
.admin-login-card .field{margin-bottom:14px;}

/* ---------- shell ---------- */
.admin-shell{display:flex;min-height:100vh;}
.admin-sidebar{
  width:230px;flex-shrink:0;background:var(--bg-raised);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:20px 0;position:sticky;top:0;height:100vh;
}
.admin-sidebar .brand{padding:0 20px 22px;}
.admin-nav{flex:1;display:flex;flex-direction:column;gap:2px;padding:0 10px;}
.admin-nav a{
  display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;
  color:var(--muted);font-weight:700;font-size:13.5px;
}
.admin-nav a:hover{color:var(--ink);background:rgba(255,255,255,.04);}
.admin-nav a.active{color:var(--yellow-ink);background:var(--yellow);}
.admin-who{padding:16px 20px 0;border-top:1px solid var(--line);margin-top:10px;}
.admin-who-name{font-weight:800;font-size:13.5px;}
.admin-who-role{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;margin-top:2px;}
.admin-logout{
  margin:14px 20px 0;background:none;border:1px solid var(--line);color:var(--muted);
  border-radius:10px;padding:9px 12px;font-size:12.5px;font-weight:700;cursor:pointer;width:calc(100% - 40px);
}
.admin-logout:hover{color:var(--bad);border-color:var(--bad);}

.admin-main{flex:1;min-width:0;padding:28px 32px 60px;}
.admin-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap;}
.admin-header h1{font-family:var(--font-display);font-size:24px;margin:0;}
.admin-header p{color:var(--muted);margin:4px 0 0;font-size:13.5px;}

/* ---------- stat tiles ---------- */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:28px;}
.stat-tile{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;}
.stat-tile .stat-label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;}
.stat-tile .stat-value{font-family:var(--font-display);font-size:26px;margin-top:6px;}
.stat-tile.warn .stat-value{color:var(--warn);}
.stat-tile.bad .stat-value{color:var(--bad);}

/* ---------- panels / tables ---------- */
.panel{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:22px;}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.panel-head h2{font-size:15px;margin:0;font-weight:800;}

.admin-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.admin-table th{
  text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  font-weight:700;padding:10px 20px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.admin-table td{padding:12px 20px;border-bottom:1px solid var(--line);vertical-align:middle;}
.admin-table tr:last-child td{border-bottom:none;}
.admin-table tr.inactive-row{opacity:.5;}
.admin-thumb{width:38px;height:38px;border-radius:8px;object-fit:cover;background:#0a0a0a;}
.admin-empty{padding:32px 20px;text-align:center;color:var(--muted);font-size:13.5px;}

.pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;}
.pill-good{background:rgba(47,214,107,.14);color:var(--good);}
.pill-warn{background:rgba(255,179,71,.14);color:var(--warn);}
.pill-bad{background:rgba(255,92,77,.14);color:var(--bad);}
.pill-muted{background:rgba(156,156,150,.14);color:var(--muted);}
.pill-role{background:rgba(255,199,0,.14);color:var(--yellow);}

.row-actions{display:flex;gap:8px;flex-wrap:wrap;}
.mini-btn{
  background:none;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:6px 11px;
  font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;
}
.mini-btn:hover{border-color:var(--yellow);color:var(--yellow);}
.mini-btn.danger:hover{border-color:var(--bad);color:var(--bad);}
.mini-btn[disabled]{opacity:.4;cursor:not-allowed;}

/* ---------- forms / modal ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;}
.form-grid .field-full{grid-column:1 / -1;}
.field label{display:block;color:var(--muted);font-size:12px;margin-bottom:6px;font-weight:700;}
.field input, .field select, .field textarea{
  width:100%;background:var(--bg-raised);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;color:var(--ink);font-size:14px;font-family:inherit;
}
.field textarea{resize:vertical;min-height:70px;}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--yellow);outline-offset:1px;}

.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:80;display:flex;align-items:flex-start;
  justify-content:center;padding:40px 20px;overflow-y:auto;opacity:0;pointer-events:none;transition:opacity .15s ease;
}
.modal-overlay.open{opacity:1;pointer-events:auto;}
.modal{
  width:100%;max-width:520px;background:var(--bg-card);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:24px;
}
.modal h3{font-family:var(--font-display);font-size:18px;margin:0 0 18px;}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;}

.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.admin-msg{font-size:13px;min-height:1em;margin-top:10px;}
.admin-msg.error{color:var(--bad);}
.admin-msg.ok{color:var(--good);}

@media (max-width:860px){
  .admin-shell{flex-direction:column;}
  /* Sidebar becomes a top bar: brand and sign-out stay put, only the nav
     links scroll horizontally — so sign-out is always reachable, never
     scrolled out of view. */
  .admin-sidebar{
    width:100%;height:auto;position:sticky;top:0;z-index:30;
    flex-direction:row;align-items:center;overflow:visible;
    padding:10px 12px;gap:10px;
  }
  .admin-sidebar .brand{padding:0;margin-bottom:0;flex-shrink:0;}
  .admin-sidebar .brand-word{display:none;} /* logo alone is enough at this width */
  .admin-nav{
    flex-direction:row;padding:0;gap:4px;flex:1;min-width:0;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
  }
  .admin-nav a{padding:9px 12px;white-space:nowrap;}
  .admin-who{display:none;}
  .admin-logout{
    display:block;margin:0;width:auto;flex-shrink:0;
    padding:9px 14px;white-space:nowrap;
  }
  .admin-main{padding:18px 14px 40px;}
  .admin-header{margin-bottom:18px;}
  .admin-header h1{font-size:20px;}
  .stat-row{grid-template-columns:repeat(2,1fr);gap:10px;}
  .stat-tile{padding:13px 14px;}
  .stat-tile .stat-value{font-size:21px;}
  .form-grid{grid-template-columns:1fr;}
  .toolbar{width:100%;}
  .toolbar select, .toolbar .field-inline{flex:1;min-width:0;}
}

/* Below this width, admin-table rows become stacked cards instead of a
   cramped horizontal-scroll table — nothing to scroll sideways to find. */
@media (max-width:700px){
  .admin-table thead{display:none;}
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td{display:block;width:100%;}
  .admin-table{border-collapse:separate;}
  .admin-table tr{padding:14px 16px;border-bottom:1px solid var(--line);}
  .admin-table tr:last-child{border-bottom:none;}
  .admin-table td{
    border-bottom:none;padding:5px 0;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
  }
  .admin-table td[data-label]::before{
    content:attr(data-label);flex-shrink:0;
    color:var(--muted);font-size:10.5px;font-weight:700;
    text-transform:uppercase;letter-spacing:.05em;
  }
  .admin-table td:not([data-label]){justify-content:flex-end;padding-top:8px;}
  .admin-table td.admin-thumb-cell{display:none;} /* name+slug already identify the row */
  .admin-table td input[type="number"]{width:90px !important;}
  .row-actions{justify-content:flex-end;}

  .modal-overlay{padding:0;align-items:flex-end;}
  .modal{max-width:100%;border-radius:18px 18px 0 0;max-height:92vh;overflow-y:auto;padding:20px 18px 18px;}
  .modal-actions{flex-direction:column-reverse;gap:8px;}
  .modal-actions .btn, .modal-actions button{width:100%;}
}