/* ============================================================
   Acacia Media - Admin & Client portal UI
   App styling in the Raisin Bloom brand palette.
   ============================================================ */
:root{
  --ink:#2b4430; --ink-soft:#2a3d2f; --cream:#faf1d8; --gold:#ddaf55; --gold-dk:#8c6013;
  --peach:#ca9778; --olive:#87853e;
  --bg:#f5eddc; --surface:#ffffff; --surface-2:#fbf6ea;
  --line:#e7dcc4; --line-2:#efe6d2; --muted:#8b7867;
  --side:#1f3324; --side-2:#33513b; --side-line:rgba(255,255,255,.1);
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Work Sans',system-ui,-apple-system,sans-serif;
  --r:10px; --r-sm:7px; --shadow:0 10px 30px rgba(34,50,38,.10); --shadow-sm:0 4px 14px rgba(34,50,38,.07);
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; }
body{ font-family:var(--sans); color:var(--ink-soft); background:var(--bg); line-height:1.55; -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
h1,h2,h3,h4{ font-family:var(--serif); color:var(--ink); margin:0; font-weight:600; line-height:1.1; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---- brand lockup ---- */
.p-brand{ display:flex; align-items:center; gap:9px; }
.p-brand img{ width:30px; height:auto; }
.p-brand .wm{ font-family:var(--serif); font-weight:600; font-size:1.3rem; letter-spacing:.14em; color:var(--ink); text-transform:uppercase; line-height:1; }
.p-brand .wm em{ font-family:var(--sans); font-style:normal; font-weight:600; font-size:.5rem; letter-spacing:.3em; color:var(--gold-dk); display:block; margin-top:3px; }

/* ---- buttons ---- */
.btn{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--sans); font-size:.82rem; font-weight:600; letter-spacing:.02em; border:1px solid transparent; border-radius:var(--r-sm); padding:10px 16px; cursor:pointer; transition:.2s ease; background:none; color:var(--ink); white-space:nowrap; }
.btn-gold{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.btn-gold:hover{ background:#d3a343; }
.btn-ink{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.btn-ink:hover{ background:#432c2c; }
.btn-ghost{ border-color:var(--line); color:var(--ink); background:var(--surface); }
.btn-ghost:hover{ border-color:var(--gold); }
.btn-sm{ padding:7px 12px; font-size:.76rem; }
.btn-block{ width:100%; justify-content:center; }

/* ---- badges / status pills ---- */
.badge{ display:inline-flex; align-items:center; gap:5px; font-size:.7rem; font-weight:600; letter-spacing:.04em; padding:4px 10px; border-radius:999px; text-transform:uppercase; }
.b-new{ background:#fbe7c6; color:#8c6013; }
.b-booked{ background:#e8ecd0; color:#5b6018; }
.b-progress{ background:#f2dcc8; color:#8a4b28; }
.b-delivered{ background:#dbead9; color:#3c5a34; }
.b-paid{ background:#dbead9; color:#3c5a34; }
.b-sent{ background:#fbe7c6; color:#8c6013; }
.b-draft{ background:#ece4d6; color:#7a6a58; }
.b-replied{ background:#e6e0ef; color:#5a4b72; }

/* ============================================================
   Login
   ============================================================ */
.auth{ min-height:100vh; display:grid; place-items:center; padding:24px; background:
   radial-gradient(1200px 500px at 50% -10%, #fff7e6 0%, var(--bg) 60%); }
.auth-card{ width:100%; max-width:400px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:34px 32px; text-align:center; }
.auth-card .p-brand{ justify-content:center; margin-bottom:22px; }
.auth-card h1{ font-size:1.7rem; margin-bottom:4px; }
.auth-card .sub{ color:var(--muted); font-size:.9rem; margin-bottom:22px; }
.auth-card .field{ text-align:left; }
.demo-note{ margin-top:20px; padding-top:18px; border-top:1px dashed var(--line); }
.demo-note p{ font-size:.76rem; color:var(--muted); margin:0 0 10px; }
.demo-row{ display:flex; gap:10px; }
.demo-row .btn{ flex:1; }

/* ---- forms ---- */
.field{ margin-bottom:15px; }
.field label{ display:block; font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.field input,.field select,.field textarea{ width:100%; font-family:var(--sans); font-size:.92rem; color:var(--ink); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 12px; }
.field textarea{ min-height:90px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:0; border-color:var(--gold); background:#fff; box-shadow:0 0 0 3px rgba(221,175,85,.18); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* ============================================================
   App shell (admin = sidebar, client = topbar)
   ============================================================ */
.app{ display:grid; grid-template-columns:242px 1fr; min-height:100vh; }
.side{ background:var(--side); color:#e9ddd0; display:flex; flex-direction:column; padding:22px 16px; position:sticky; top:0; height:100vh; }
.side .p-brand{ padding:4px 8px 20px; }
.side .p-brand .wm{ color:#fff; }
.side nav{ display:flex; flex-direction:column; gap:2px; }
.side nav a{ display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:var(--r-sm); font-size:.88rem; font-weight:500; color:#cbb9ab; transition:.18s; }
.side nav a svg{ width:18px; height:18px; opacity:.85; }
.side nav a:hover{ background:var(--side-2); color:#fff; }
.side nav a.active{ background:var(--gold); color:var(--ink); }
.side nav a.active svg{ opacity:1; }
.side-foot{ margin-top:auto; padding:14px 8px 2px; border-top:1px solid var(--side-line); }
.side-foot .who{ font-size:.82rem; color:#e9ddd0; font-weight:600; }
.side-foot .role{ font-size:.72rem; color:#a68f81; }
.side-foot a.out{ display:inline-block; margin-top:8px; font-size:.76rem; color:#c9b4a6; }
.side-foot a.out:hover{ color:#fff; }

.main{ min-width:0; }
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px clamp(18px,3vw,34px); background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.topbar h1{ font-size:1.45rem; }
.topbar .tb-sub{ font-size:.82rem; color:var(--muted); margin-top:2px; }
.topbar .tb-right{ display:flex; align-items:center; gap:12px; }
.avatar{ width:38px; height:38px; border-radius:50%; background:var(--peach); color:#fff; display:grid; place-items:center; font-weight:600; font-size:.85rem; }
.content{ padding:clamp(18px,3vw,34px); max-width:1120px; }

/* client-only top nav */
.cbar{ display:flex; align-items:center; justify-content:space-between; padding:14px clamp(18px,4vw,40px); background:var(--surface); border-bottom:1px solid var(--line); }
.cbar .links{ display:flex; align-items:center; gap:8px; }

/* ---- section heads ---- */
.sec-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin:6px 0 16px; }
.sec-head h2{ font-size:1.5rem; }
.sec-head .hint{ font-size:.85rem; color:var(--muted); }

/* ---- metric tiles ---- */
.tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:24px; }
.tile{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; }
.tile .n{ font-family:var(--serif); font-size:2rem; color:var(--ink); line-height:1; }
.tile .l{ font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-top:7px; }

/* ---- cards / panels ---- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); }
.card + .card{ margin-top:18px; }
.card-h{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line-2); }
.card-h h3{ font-size:1.15rem; }
.card-b{ padding:6px 20px 8px; }
.card-b.pad{ padding:20px; }

/* ---- table ---- */
.table{ width:100%; border-collapse:collapse; font-size:.88rem; }
.table th{ text-align:left; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; padding:12px 12px; border-bottom:1px solid var(--line); }
.table td{ padding:13px 12px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
.table tr:last-child td{ border-bottom:0; }
.table tr:hover td{ background:var(--surface-2); }
.table .t-main{ font-weight:600; color:var(--ink); }
.table .t-sub{ font-size:.78rem; color:var(--muted); }
.table .right{ text-align:right; }
.row-actions{ display:flex; gap:6px; justify-content:flex-end; }
.table-wrap{ overflow-x:auto; }

/* ---- gallery cards (client) ---- */
.gal-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; }
.galc{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.galc .cov{ aspect-ratio:3/2; background:var(--side) center/cover; position:relative; }
.galc .cov .badge{ position:absolute; top:10px; left:10px; }
.galc .cov.empty{ display:grid; place-items:center; background:linear-gradient(150deg,var(--side),var(--side-2)); color:#e3c98f; }
.galc .b{ padding:14px 16px 16px; display:flex; flex-direction:column; flex:1; }
.galc .b h3{ font-size:1.2rem; }
.galc .b .meta{ font-size:.78rem; color:var(--muted); margin:4px 0 14px; }
.galc .b .btn{ margin-top:auto; }
.galc .b .btn + .lockline{ margin-top:8px; font-size:.72rem; color:var(--muted); text-align:center; }

/* ---- empty state ---- */
.empty{ text-align:center; padding:40px 20px; color:var(--muted); }
.empty svg{ width:38px; height:38px; color:var(--gold); margin-bottom:12px; }

/* ---- modal ---- */
.modal-bg{ position:fixed; inset:0; background:rgba(20,30,20,.5); display:none; align-items:flex-start; justify-content:center; padding:40px 18px; z-index:40; overflow:auto; }
.modal-bg.show{ display:flex; }
.modal{ width:100%; max-width:520px; background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow); }
.modal .card-h h3{ font-size:1.3rem; }
.modal .card-b{ padding:20px; }
.modal-foot{ display:flex; justify-content:flex-end; gap:10px; padding:14px 20px 20px; }

/* ---- notice ---- */
.notice{ background:var(--surface-2); border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:var(--r-sm); padding:12px 16px; font-size:.85rem; color:var(--ink-soft); margin-bottom:20px; }
.notice strong{ color:var(--ink); }

@media(max-width:820px){
  .app{ grid-template-columns:1fr; }

  /* Studio sidebar becomes a compact top header: brand + sign-out on one
     row, the nav as horizontally scrolling pills on the row below, so
     nothing overlaps or gets clipped on a phone. */
  .side{ position:static; height:auto; flex-direction:row; flex-wrap:wrap;
         align-items:center; gap:12px; padding:12px 16px; }
  .side .p-brand{ order:1; padding:0; }
  .side .p-brand img{ width:26px; }
  .side .p-brand .wm{ font-size:1.15rem; }
  .side-foot{ order:2; margin:0 0 0 auto; padding:0; border:0; }
  .side-foot .role,.side-foot .who{ display:none; }
  .side-foot a.out{ margin-top:0; color:#e9ddd0; border:1px solid var(--side-line);
                    padding:7px 14px; border-radius:999px; font-weight:600; }
  .side-foot a.out:hover{ background:var(--side-2); color:#fff; }

  .side nav{ order:3; flex-basis:100%; width:100%; flex-direction:row; gap:6px;
             overflow-x:auto; -webkit-overflow-scrolling:touch;
             padding-bottom:2px; scrollbar-width:none; }
  .side nav::-webkit-scrollbar{ display:none; }
  .side nav a{ flex:0 0 auto; white-space:nowrap; padding:9px 13px;
               font-size:.82rem; background:var(--side-2); color:#e9ddd0; }
  .side nav a svg{ width:15px; height:15px; }
  .side nav a.active{ background:var(--gold); color:var(--ink); }

  /* one sticky header at a time, so the topbar does not overlap the nav */
  .topbar{ position:static; }
  .topbar h1{ font-size:1.25rem; }

  .field-row{ grid-template-columns:1fr; }
}