/* ===========================================================
   GIMBLE STORIES — Admin Panel styles
   =========================================================== */
body.admin-body{ background:var(--ivory-2); }

/* ---------- login screen ---------- */
.login-screen{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 15% 20%, rgba(180,137,63,0.10), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(122,35,49,0.10), transparent 45%),
    var(--ink);
  padding:24px;
}
.login-card{
  width:100%; max-width:400px;
  background:var(--ivory);
  padding:52px 42px;
  border-radius:2px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,0.55);
  text-align:center;
}
.login-card img{ height:44px; margin:0 auto 8px; }
.login-card .eyebrow{ margin-top:18px; }
.login-card h1{ font-size:26px; margin-top:16px; }
.login-card p.hint{ color:var(--ink-soft); font-size:13.5px; margin-top:10px; }
.login-form{ margin-top:32px; text-align:left; display:flex; flex-direction:column; gap:18px; }
.login-form .btn{ width:100%; justify-content:center; margin-top:6px; }
.login-error{
  display:none; background:rgba(122,35,49,0.08); color:var(--wine);
  border:1px solid rgba(122,35,49,0.25); font-size:12.5px; padding:10px 14px; border-radius:2px;
  margin-top:16px;
}
.login-error.show{ display:block; }
.login-footnote{ margin-top:26px; font-size:11.5px; color:var(--ink-soft); }
.login-footnote a{ color:var(--wine); }

/* ---------- shell ---------- */
.admin-shell{ display:none; min-height:100vh; }
.admin-shell.show{ display:flex; }

.admin-sidebar{
  width:250px; flex:none;
  background:var(--ink); color:var(--ivory);
  display:flex; flex-direction:column;
  padding:30px 22px;
  position:sticky; top:0; height:100vh;
}
.admin-sidebar .brand{ display:flex; align-items:center; gap:10px; margin-bottom:40px; }
.admin-sidebar .brand img{ height:30px; filter:brightness(0) invert(1); }
.admin-nav{ display:flex; flex-direction:column; gap:4px; flex:1; }
.admin-nav button{
  display:flex; align-items:center; gap:12px;
  background:none; border:none; color:rgba(247,242,233,0.7);
  padding:13px 14px; border-radius:3px; text-align:left; font-size:14px;
  transition:all .25s;
}
.admin-nav button .dot{ width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.6; }
.admin-nav button:hover{ background:rgba(247,242,233,0.06); color:var(--ivory); }
.admin-nav button.active{ background:var(--gold); color:var(--ink); font-weight:500; }
.admin-nav button.active .dot{ background:var(--ink); }
.sidebar-foot{ border-top:1px solid rgba(247,242,233,0.12); padding-top:18px; margin-top:18px; }
.sidebar-foot .who{ font-size:12px; color:rgba(247,242,233,0.5); margin-bottom:12px; }
.sidebar-foot button{ width:100%; }

.admin-main{ flex:1; padding:40px 44px; max-width:1180px; }
.admin-view{ display:none; }
.admin-view.active{ display:block; animation:fadeUp .5s var(--ease); }

.admin-header{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:30px; flex-wrap:wrap; gap:14px; }
.admin-header h1{ font-size:30px; }
.admin-header p{ color:var(--ink-soft); margin-top:6px; font-size:14px; }

/* ---------- cards / stats ---------- */
.stat-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:34px; }
.stat-card{ background:var(--ivory); border:1px solid var(--line); padding:24px; border-radius:3px; }
.stat-card .lbl{ font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); }
.stat-card .val{ font-family:var(--font-display); font-size:30px; margin-top:10px; color:var(--ink); }
.stat-card .val.wine{ color:var(--wine); }
.stat-card .val.gold{ color:var(--gold); }
@media (max-width:1000px){ .stat-cards{ grid-template-columns:repeat(2,1fr); } }

.panel{ background:var(--ivory); border:1px solid var(--line); border-radius:3px; padding:30px; margin-bottom:26px; }
.panel h3{ font-size:18px; margin-bottom:18px; }

/* ---------- table ---------- */
.table-wrap{ overflow-x:auto; }
table.data-table{ width:100%; border-collapse:collapse; font-size:14px; min-width:640px; }
.data-table th{
  text-align:left; font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-soft); padding:12px 14px; border-bottom:1px solid var(--line);
}
.data-table td{ padding:14px; border-bottom:1px solid var(--line); vertical-align:middle; }
.data-table tr:hover td{ background:rgba(180,137,63,0.05); }
.badge{ font-size:11px; padding:4px 10px; border-radius:20px; letter-spacing:0.04em; }
.badge.paid{ background:rgba(94,138,90,0.15); color:#3e6a3a; }
.badge.pending{ background:rgba(180,137,63,0.18); color:#8a6626; }
.badge.overdue{ background:rgba(122,35,49,0.14); color:var(--wine); }
.row-actions{ display:flex; gap:8px; }
.icon-btn{
  background:none; border:1px solid var(--line); width:32px; height:32px; border-radius:3px;
  display:inline-flex; align-items:center; justify-content:center; font-size:13px;
  transition:all .25s;
}
.icon-btn:hover{ border-color:var(--gold); color:var(--gold); }
.icon-btn.danger:hover{ border-color:var(--wine); color:var(--wine); }
.empty-state{ text-align:center; padding:60px 20px; color:var(--ink-soft); }
.empty-state .mark{ font-family:var(--font-display); font-style:italic; font-size:22px; color:var(--ink); margin-bottom:10px; }

/* ---------- invoice form ---------- */
.form-section-title{ font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); margin:28px 0 16px; }
.form-section-title:first-child{ margin-top:0; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; }
.grid-4{ display:grid; grid-template-columns:1.4fr 0.5fr 0.7fr 0.7fr auto; gap:12px; align-items:end; }
@media (max-width:800px){ .grid-2,.grid-3{ grid-template-columns:1fr; } .grid-4{ grid-template-columns:1fr 1fr; } }

.afield{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.afield label{ font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); }
.afield input, .afield select, .afield textarea{
  border:1px solid var(--line); background:#fff; padding:11px 13px; border-radius:3px;
  font-family:var(--font-body); font-size:14.5px; color:var(--ink);
}
.afield input:focus, .afield select:focus, .afield textarea:focus{ outline:none; border-color:var(--gold); }
.afield textarea{ resize:vertical; min-height:70px; }

.items-table{ margin-top:6px; }
.items-head{ display:grid; grid-template-columns:1.4fr 0.5fr 0.7fr 0.7fr 34px; gap:12px; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); padding:0 2px 8px; }
.item-row{ display:grid; grid-template-columns:1.4fr 0.5fr 0.7fr 0.7fr 34px; gap:12px; align-items:center; margin-bottom:10px; }
.item-row input{ border:1px solid var(--line); border-radius:3px; padding:10px 12px; font-size:14px; width:100%; background:#fff; }
.item-row input:focus{ outline:none; border-color:var(--gold); }
.item-amt{ font-family:var(--font-display); font-size:15px; text-align:right; padding-right:6px; }
.remove-item{ background:none; border:none; color:var(--wine); font-size:18px; opacity:.6; }
.remove-item:hover{ opacity:1; }
.add-item-btn{ margin-top:8px; }

.totals-box{ margin-left:auto; max-width:360px; margin-top:24px; }
.totals-box .trow{ display:flex; justify-content:space-between; padding:10px 0; font-size:14.5px; border-bottom:1px dashed var(--line); }
.totals-box .trow.grand{ border-bottom:none; border-top:2px solid var(--ink); margin-top:6px; padding-top:16px; font-size:19px; font-family:var(--font-display); }
.totals-box .trow.grand span:last-child{ color:var(--wine); }
.totals-box input{ width:90px; border:1px solid var(--line); border-radius:3px; padding:6px 8px; text-align:right; font-size:14px; }

.form-actions{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }

/* invoice preview modal */
.modal-overlay{
  position:fixed; inset:0; background:rgba(20,17,14,0.6); z-index:800;
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal-box{
  background:#fff; max-width:640px; width:100%; max-height:88vh; overflow:auto;
  border-radius:4px; padding:38px;
}
.modal-close{ float:right; background:none; border:none; font-size:22px; }
.inv-preview-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:26px; }
.inv-preview-head img{ height:34px; }
.inv-preview-head .meta{ text-align:right; font-size:13px; color:var(--ink-soft); }
.inv-preview-head .meta strong{ display:block; color:var(--ink); font-size:16px; font-family:var(--font-display); }
.inv-two-col{ display:flex; justify-content:space-between; gap:20px; margin-bottom:24px; font-size:13.5px; }
.inv-two-col div strong{ display:block; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
.inv-items-table{ width:100%; border-collapse:collapse; font-size:13.5px; margin-bottom:20px; }
.inv-items-table th{ text-align:left; border-bottom:1px solid var(--ink); padding:8px 6px; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; }
.inv-items-table td{ padding:9px 6px; border-bottom:1px solid var(--line); }
.inv-items-table td:last-child, .inv-items-table th:last-child{ text-align:right; }
.inv-totals{ margin-left:auto; max-width:260px; }
.inv-totals div{ display:flex; justify-content:space-between; padding:6px 0; font-size:13.5px; }
.inv-totals div.grand{ border-top:1.5px solid var(--ink); margin-top:6px; padding-top:10px; font-weight:600; font-size:16px; }
.modal-actions{ display:flex; gap:12px; margin-top:26px; }

.toast{
  position:fixed; bottom:26px; right:26px; z-index:1000;
  background:var(--ink); color:var(--ivory); padding:16px 22px; border-radius:3px;
  font-size:13.5px; box-shadow:0 20px 40px -14px rgba(0,0,0,0.5);
  transform:translateY(20px); opacity:0; transition:all .35s var(--ease); pointer-events:none;
  border-left:3px solid var(--gold);
}
.toast.show{ transform:translateY(0); opacity:1; }

@media (max-width:920px){
  .admin-sidebar{ display:none; }
  .admin-main{ padding:26px 18px; }
}