/* ── shared.css — common base for all admin and client portal pages ── */

/* Variables + reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#0a0b0d;--black:#0a0b0d;--dark:#1c1a17;--warm:#252118;--sand:#f0ebe3;--cream:#faf8f5;
  --white:#ffffff;--amber:#c9842a;--amber-lt:#e09a42;--stone:#8a8278;--stone-lt:#b8b2a8;
  --serif:'Fraunces',Georgia,serif;
  --sans:'DM Sans',system-ui,sans-serif;
  --ff-head:var(--serif);--ff-body:var(--sans);
  --sb-width:220px;
  --blue:#1759ff;--blue-dark:#1044cc;
  --r-lg:32px;--r-md:20px;--r-sm:12px;--r-pill:100px;
  --body-bg:#f0f2f5;--surface:#ffffff;
  --text-2:rgba(10,11,13,.55);--text-3:rgba(10,11,13,.4);
  --border:#e5e7eb;--border-lt:#f1f3f5;--gray-mid:#e5e7eb;
  /* Status colors */
  --status-success:#2d9e6e;--status-error:#e87070;--status-warning:#e8a430;
  --status-info:#5a9fd4;--status-gallery:#9b7fd4;--status-retouch:#c9a43a;
}
html{scroll-behavior:smooth}
:focus{outline:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Body */
body{display:flex;min-height:100vh;overflow-x:hidden;background:var(--body-bg);color:var(--ink);font-family:var(--sans);scrollbar-gutter:stable}

/* Sidebar — always dark */
.sb-logo{padding:1.6rem 1.4rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
.sb-logo-a{text-decoration:none;display:flex;flex-direction:column;gap:3px}
.sb-logo-name{font-family:var(--serif);font-size:1rem;font-weight:700;color:#fff;letter-spacing:.01em;line-height:1.2}
.sb-logo-sub{font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin-top:2px}
.sb-nav{flex:1;padding:.75rem 0;overflow-y:auto;min-height:0}
.sb-link{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:rgba(255,255,255,.45);font-size:.78rem;font-weight:500;letter-spacing:.02em;padding:.55rem 1.4rem;border-left:2px solid transparent;transition:color .15s,border-color .15s,background .15s;position:relative}
.sb-link:hover{color:rgba(255,255,255,.8);background:rgba(255,255,255,.03)}
.sb-link.active{color:#fff;border-left-color:var(--blue);background:rgba(23,89,255,.12)}
.sb-badge{display:none;align-items:center;justify-content:center;background:var(--blue);color:#fff;font-size:.52rem;font-weight:800;border-radius:999px;min-width:14px;height:14px;padding:0 3px;letter-spacing:0;line-height:14px;flex-shrink:0;margin-left:auto;text-align:center;font-family:system-ui,sans-serif}
.sb-badge.has-count{display:flex}
.sb-foot{padding:1rem 1.4rem 1.4rem;border-top:1px solid rgba(255,255,255,.06);flex-shrink:0;position:sticky;bottom:0;background:#0f0e0c}
.sb-signout{background:none;border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.4);font-family:var(--sans);font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.45rem .9rem;cursor:pointer;transition:color .15s,border-color .15s;width:100%}
.sb-signout:hover{color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.3)}

/* Mobile top bar (always dark) */
.mobile-header{display:none;position:fixed;top:0;left:0;right:0;height:56px;background:#0f0e0c;border-bottom:1px solid rgba(255,255,255,.08);align-items:center;justify-content:space-between;padding:0 1rem 0 1.2rem;z-index:199}
.sb-toggle{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:.5rem;cursor:pointer;color:rgba(255,255,255,.7);border-radius:4px;transition:color .15s,background .15s;-webkit-tap-highlight-color:transparent}
.sb-toggle:hover{color:#fff;background:rgba(255,255,255,.07)}
.sb-toggle svg{width:20px;height:20px;flex-shrink:0;transition:transform .2s}
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:149;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.sb-overlay.sb-open{display:block}
@media(max-width:768px){
  html,body{height:100%;overflow:hidden}
  body{flex-direction:column}
  .mobile-header{display:flex}
}

/* Main content */
.main,.portal-main{flex:1;min-width:0;padding:2rem;overflow-y:auto;max-width:1080px;margin-inline:auto;width:100%}

/* Page header */
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.75rem;flex-wrap:wrap;gap:1rem}
.page-title{font-family:var(--serif);font-size:1.4rem;font-weight:700;color:var(--ink);margin-bottom:1.5rem}
/* When the page-title is immediately followed by a subtitle, tighten the
   gap between them — the subtitle's own margin-bottom takes over. */
.page-title:has(+ .page-sub){margin-bottom:.4rem}
.page-sub{font-size:.85rem;color:var(--text-2);margin-bottom:2rem}

/* Buttons — pill-shaped, matches public site */
.btn,.btn-amber,.btn-primary,.btn-outline,.btn-danger{font-family:var(--sans);font-size:.9375rem;font-weight:600;padding:.875rem 1.875rem;cursor:pointer;border:none;transition:background .18s,border-color .18s,color .18s,transform .12s;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;border-radius:var(--r-pill);letter-spacing:0;text-transform:none;line-height:1.2}
.btn:disabled,.btn-amber:disabled,.btn-primary:disabled,.btn-outline:disabled,.btn-danger:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn,.btn-amber,.btn-primary{background:var(--blue);color:#fff}
.btn:hover,.btn-amber:hover,.btn-primary:hover{background:var(--blue-dark);color:#fff;transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--black);border:1px solid var(--gray-mid)}
.btn-outline:hover{background:rgba(0,0,0,.04);border-color:var(--black);color:var(--black);transform:translateY(-1px)}
.btn-danger{background:#dc2626;color:#fff;border:none}
.btn-danger:hover{background:#b91c1c;color:#fff;transform:translateY(-1px)}
.btn-sm{font-size:.825rem;padding:.55rem 1.1rem;font-weight:600;border-radius:6px}
.btn-x{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:1.1rem;line-height:1;padding:.2rem .35rem;flex-shrink:0;transition:color .15s;border-radius:0}
.btn-x:hover{color:#e87070}
.portal-btn{width:100%;background:var(--blue);color:#fff;border:none;padding:.875rem 1.875rem;font-family:var(--sans);font-size:.9375rem;font-weight:600;cursor:pointer;margin-top:.5rem;transition:background .18s,transform .12s;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;gap:.4rem}
.portal-btn:hover{background:var(--blue-dark);transform:translateY(-1px)}
.portal-btn:disabled{opacity:.5;cursor:not-allowed}
@keyframes btn-spin{to{transform:rotate(360deg)}}
.btn-loading{pointer-events:none;opacity:0.6}
.btn-loading::after{content:'';display:inline-block;width:14px;height:14px;margin-left:8px;vertical-align:middle;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:btn-spin .6s linear infinite}

/* Loading / empty */
.loading{text-align:center;padding:3rem;color:var(--text-3);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
.empty{text-align:center;padding:3rem;color:var(--text-3);font-size:.85rem}
.empty-state{text-align:center;padding:4rem 2rem;border:1px solid var(--border);border-radius:var(--r-sm)}
.empty-state p{color:var(--text-2);margin-bottom:1.25rem;font-size:.9rem}
.empty-state a:not(.btn-amber){color:var(--blue);font-size:.82rem;text-decoration:none}
.empty-state a:not(.btn-amber):hover{text-decoration:underline}

/* Full-screen loading overlay */
.loading-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:999;align-items:center;justify-content:center;flex-direction:column;gap:1rem}
.loading-overlay.active{display:flex}
.spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.2);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-size:.82rem;color:rgba(255,255,255,.6)}

/* Success state */
.success-icon{font-size:3rem;margin-bottom:1rem;color:var(--blue)}
.success-title{font-family:var(--serif);font-size:1.4rem;font-weight:700;margin-bottom:.75rem;color:var(--ink)}
.success-body{font-size:.9rem;color:var(--text-2);line-height:1.7;margin-bottom:2rem}

/* Badges */
.badge{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:.2rem .5rem;border-radius:3px}
.badge-draft,.badge-default{color:var(--text-3);border:1px solid var(--border)}
.badge-ready,.badge-confirmed,.badge-paid,.badge-invoice_paid,.badge-active,.badge-PAID,.badge-COMPLETED{color:#2d9e6e;border:1px solid rgba(45,158,110,.3)}
.badge-pending,.badge-submitted,.badge-sent,.badge-unpaid,.badge-pending_approval,.badge-pending_deposit,.badge-pending_contract,.badge-DRAFT,.badge-UNPAID,.badge-SENT,.badge-PARTIALLY_PAID{color:#e8a430;border:1px solid rgba(232,164,48,.3)}
.badge-completed,.badge-delivered,.badge-gallery_published,.badge-reschedule_requested,.badge-selections_submitted,.badge-finals_delivered{color:#5a9fd4;border:1px solid rgba(90,159,212,.3)}
.badge-cancelled,.badge-overdue,.badge-no_show,.badge-declined,.badge-CANCELED,.badge-FAILED,.badge-OVERDUE{color:#e87070;border:1px solid rgba(232,112,112,.3)}
.badge-expired,.badge-inactive{color:var(--text-3);border:1px solid var(--border)}

/* Modal */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--border);padding:2rem;width:90%;max-width:440px;box-shadow:0 24px 64px rgba(0,0,0,.12);border-radius:var(--r-md)}
.modal-title{font-family:var(--serif);font-size:1rem;margin-bottom:1.25rem;color:var(--ink)}
.modal-actions{display:flex;gap:.75rem;margin-top:1.25rem;justify-content:flex-end}
.modal-error{font-size:.8rem;color:#e87070;margin-top:.75rem;display:none}

/* Form fields — aligned with public-site .form-field (style-v2.css) */
.field,.form-field{margin-bottom:1rem}
.field label,.form-field label{display:block;font-size:.78rem;font-weight:500;color:var(--ink);margin-bottom:.4rem;letter-spacing:0;text-transform:none}
.field input,.field select,.field textarea,
.form-field input,.form-field select,.form-field textarea{
  width:100%;
  padding:.75rem 1rem;
  border:1.5px solid var(--gray-mid);
  border-radius:var(--r-sm);
  font-family:var(--ff-body);
  font-size:.9375rem;
  background:var(--white);
  color:var(--black);
  transition:border-color .18s;
}
.field input:focus,.field select:focus,.field textarea:focus,
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:none;border-color:var(--blue);
}
.field textarea,.form-field textarea{resize:vertical}
.field select,.form-field select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  color-scheme:light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  padding-right:2.5rem;
}
.field select option,.form-field select option{background:#fff;color:var(--ink)}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type="number"]{-moz-appearance:textfield}

/* Toast */
.toast{position:fixed;bottom:1.5rem;right:1.5rem;padding:.75rem 1.25rem;font-size:.82rem;font-weight:500;border-radius:var(--r-sm);z-index:999;transform:translateY(20px);opacity:0;transition:transform .2s ease,opacity .2s ease;pointer-events:none}
.toast.show{transform:translateY(0);opacity:1;pointer-events:auto}
.toast-success{background:#2d9e6e;color:#fff}
.toast-error{background:#e87070;color:#fff}

/* Error message */
.error-msg{background:rgba(232,112,112,.06);border:1px solid rgba(232,112,112,.25);color:#e87070;padding:1rem 1.25rem;font-size:.85rem;border-radius:var(--r-sm);margin-bottom:1rem}

/* ─────────────────────────────────────────────────────────────
   Unified card style — all card variants render as white cards
   with a thin gray border, modeled after .pkg-card on /client/book/.
   Higher specificity (body .x) so these win over per-page inline
   <style> rules without using !important.
   ───────────────────────────────────────────────────────────── */
body .tile,
body .listing-card,
body .purchase-card,
body .booking-card,
body .invoice-card,
body .event-card,
body .addon-card,
body .lead-card,
body .couponcard,
body .metric-card,
body .chart-card,
body .gallery-card,
body .schedule-info,
body .deposit-box,
body .amount-box,
body .opt-out-box,
body .success-cred{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  transition:border-color .15s,box-shadow .15s;
}
body .tile:hover,
body .listing-card:hover,
body .purchase-card:hover,
body .booking-card:hover,
body .invoice-card:hover,
body .event-card:hover,
body .addon-card:hover,
body .lead-card:hover,
body .couponcard:hover,
body .metric-card:hover,
body .chart-card:hover,
body .gallery-card:hover{
  border-color:rgba(10,11,13,.18);
  box-shadow:0 4px 16px rgba(10,11,13,.06);
}

/* ─────────────────────────────────────────────────────────────
   Unified primary button style — pill, sentence-case, DM Sans.
   Mirrors .btn-primary from style-v2.css. Covers legacy class
   names (`.book-btn`, `.confirm-btn`, etc.) used across client
   pages so the marketing site and portal share one button look.
   Higher specificity overrides per-page inline <style> rules.
   ───────────────────────────────────────────────────────────── */
body .book-btn,
body .confirm-btn,
body .btn-login,
body .sign-btn,
body .pay-btn,
body .listing-dl,
body .btn-amber-link,
body #app-install-btn,
body .gallery-cart-btn,
body .credit-pay-btn,
body .optout-ach-btn{
  font-family:var(--ff-body);
  font-size:.9375rem;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  background:var(--blue);
  color:#fff;
  border:none;
  border-radius:var(--r-pill);
  padding:.875rem 1.875rem;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  line-height:1.2;
  transition:background .18s,transform .12s;
}
body .book-btn:hover,
body .confirm-btn:hover,
body .btn-login:hover,
body .sign-btn:hover,
body .pay-btn:hover,
body .listing-dl:hover,
body .btn-amber-link:hover,
body #app-install-btn:hover,
body .gallery-cart-btn:hover,
body .credit-pay-btn:hover,
body .optout-ach-btn:hover{
  background:var(--blue-dark);
  transform:translateY(-1px);
  color:#fff;
  opacity:1;
}
body .book-btn:disabled,
body .confirm-btn:disabled,
body .btn-login:disabled,
body .sign-btn:disabled,
body .pay-btn:disabled,
body #app-install-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
}