/* ═══════════════════════════════════════════════════════
   Serenity Theme (ported from app1 vibe)
   Goal: keep app2 logic, upgrade UI to "Serenity" style
   Safe overrides via CSS variables + small component tweaks
═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,600;0,700;1,300;1,600&family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root{
  /* Core palette */
  --ser-ink:#1A1020;
  --ser-ink2:#2D1535;
  --ser-rose:#C4748A;
  --ser-rose2:#9B4F6B;
  --ser-rose-soft:#FDE8EF;
  --ser-bg:#FDFAF7;
  --ser-surface:#FFFFFF;

  /* Override system tokens (app2 uses these widely) */
  --primary:   var(--ser-rose2);
  --primary-d: #7f3550;
  --primary-l: #d9a3b4;
  --secondary: #6b5a66;
  --accent:    var(--ser-rose);
  --bg:        var(--ser-bg);
  --surface:   var(--ser-surface);
  --border:    rgba(155,79,107,.18);
  --muted:     #7a6b73;
  --dark:      var(--ser-ink);

  --radius:    14px;
  --radius-sm: 12px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 10px rgba(26,16,32,.08);
  --shadow-md: 0 12px 34px rgba(26,16,32,.10);

  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;
}

/* Dark mode tokens (make Serenity truly dark) */
html.dark-mode{
  --ser-bg:#0a0e1a;
  --ser-surface:#141929;
  --bg:      var(--ser-bg);
  --surface: var(--ser-surface);
  --border:  rgba(91,141,238,.22);
  --muted:   #93a4c7;
  --dark:    #f0f4ff;
}
html.dark-mode body,
html.dark-mode .partner-body{
  background-image: radial-gradient(1200px 600px at 20% -10%, rgba(196,116,138,.10), transparent 55%),
                    radial-gradient(900px 500px at 90% 10%, rgba(91,141,238,.10), transparent 52%);
}

/* Typography */
*, body, input, button, textarea, select{font-family:var(--font)}
h1,h2,h3,h4,.h1,.h2,.h3,.h4{font-family:var(--font-display)}

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

/* Subtle background texture like app1 */
.partner-body, body{
  background-image: radial-gradient(1200px 600px at 20% -10%, rgba(196,116,138,.10), transparent 55%),
                    radial-gradient(900px 500px at 90% 10%, rgba(155,79,107,.08), transparent 52%);
}

/* Buttons */
.btn-primary{
  background: linear-gradient(135deg, var(--ser-rose) 0%, var(--ser-rose2) 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 22px rgba(155,79,107,.22);
}
.btn-primary:hover{opacity:.95}

.btn-outline{
  border-color: rgba(155,79,107,.28) !important;
  color: var(--ser-rose2) !important;
}

/* Cards */
.card,.partner-table-card,.table-card,.panel{
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  border-color: rgba(155,79,107,.12) !important;
}

/* Sidebar */
.sidebar{
  background: linear-gradient(180deg, rgba(26,16,32,.98) 0%, rgba(45,21,53,.98) 100%) !important;
  border-right: 1px solid rgba(255,255,255,.06) !important;
}
.sidebar-brand{color:#fff !important;}
.sidebar-section{color:rgba(255,255,255,.45) !important;}
.sidebar-item{color:rgba(255,255,255,.82) !important;}
.sidebar-item:hover{background: rgba(255,255,255,.06) !important;}
.sidebar-item.active{background: rgba(196,116,138,.18) !important;border-left-color: var(--ser-rose) !important;color:#fff !important;}

/* Top nav (partner) */
.partner-topbar, .site-nav{
  background: rgba(253,250,247,.92) !important;
  border-bottom-color: rgba(155,79,107,.12) !important;
}

/* Pills/chips */
.ser-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(155,79,107,.18);
  background: rgba(253,232,239,.6);
  color: var(--ser-rose2);
  font-size:.78rem;font-weight:600;
}
.ser-chip.active{
  background: linear-gradient(135deg, var(--ser-rose) 0%, var(--ser-rose2) 100%);
  color:#fff;border-color:transparent;
}

/* Inputs */
.form-control:focus, input:focus, textarea:focus, select:focus{
  border-color: rgba(155,79,107,.45) !important;
  box-shadow: 0 0 0 4px rgba(196,116,138,.18) !important;
}

/* POS helpers */
.pos-wrap{display:grid;grid-template-columns: 1.4fr .9fr;gap:16px;align-items:start}
@media (max-width: 980px){.pos-wrap{grid-template-columns:1fr;}}

.pos-search{
  background: #fff;
  border:1px solid rgba(155,79,107,.14);
  border-radius: 14px;
  padding: 12px 14px;
  display:flex;align-items:center;gap:10px;
  box-shadow: var(--shadow-sm);
}
.pos-search input{border:none;outline:none;flex:1;background:transparent}

.pos-grid{display:grid;grid-template-columns: repeat(3, 1fr);gap:12px}
@media (max-width: 1200px){.pos-grid{grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 520px){.pos-grid{grid-template-columns:1fr;}}

.pos-card{
  background:#fff;
  border:1px solid rgba(155,79,107,.12);
  border-radius: 16px;
  padding: 12px;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  box-shadow: 0 1px 10px rgba(26,16,32,.06);
}
.pos-card:hover{transform: translateY(-1px);border-color: rgba(196,116,138,.35);box-shadow: 0 10px 28px rgba(26,16,32,.10)}
.pos-card .price{color:var(--ser-rose2);font-weight:800}
.pos-card .muted{color:var(--muted);font-size:.78rem}

.pos-cart{position:sticky;top:74px}
.pos-cart-header{
  background: linear-gradient(135deg, var(--ser-ink) 0%, var(--ser-rose2) 70%);
  padding:16px 18px;border-radius:16px 16px 0 0;color:#fff;
}
.pos-cart-body{background:#fff;border:1px solid rgba(155,79,107,.12);border-top:none;border-radius:0 0 16px 16px;padding:14px}
.pos-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(155,79,107,.08)}
.pos-row:last-child{border-bottom:none}
.pos-qty{display:inline-flex;align-items:center;gap:6px}
.pos-qty button{width:26px;height:26px;border-radius:8px;border:1px solid rgba(155,79,107,.18);background:rgba(253,232,239,.55);cursor:pointer}
.pos-remove{border:none;background:rgba(239,68,68,.10);color:#ef4444;border-radius:10px;width:30px;height:30px;cursor:pointer}