/* =====================================================================
   Glow Salon Manager — theme
   Plum + lilac + brass. Sidebar on desktop, offcanvas + bottom bar on phones.
   ===================================================================== */

:root{
  --plum:#2E1F3E;
  --plum-2:#3B2950;
  --lilac:#7C5CFC;
  --brass:#E8B44C;
  --mist:#F6F5FA;
  --ink:#1D1A24;
  --muted:#6E6880;
  --line:#E7E4EF;
  --ok:#1E9E6A;
  --warn:#D98218;
  --bad:#D3455B;

  --sidebar-w:248px;
  --topbar-h:60px;
  --radius:14px;
}

*{ -webkit-tap-highlight-color:transparent; }

body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  background:var(--mist);
  color:var(--ink);
  font-size:15px;
  padding-bottom:env(safe-area-inset-bottom);
}

h1,h2,h3,h4,h5,.font-display{ font-family:'Sora','Inter',system-ui,sans-serif; letter-spacing:-.01em; }

/* ------------------------------------------------------------ topbar */
.topbar{
  position:sticky; top:0; z-index:1030;
  height:var(--topbar-h);
  display:flex; align-items:center; gap:.5rem;
  padding:0 1rem;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.topbar-title h1{ font-size:1.05rem; margin:0; font-weight:600; }
.topbar-title .crumb{ font-size:.72rem; color:var(--muted); display:block; line-height:1; }
.btn-icon{
  width:40px; height:40px; display:inline-grid; place-items:center;
  border:0; background:transparent; border-radius:10px; color:var(--plum); font-size:1.25rem;
}
.btn-icon:hover{ background:var(--mist); }
.avatar{
  width:32px; height:32px; border-radius:50%;
  background:var(--plum); color:#fff; font-weight:600; font-size:.85rem;
  display:grid; place-items:center;
}

/* ----------------------------------------------------------- sidebar */
.sidebar{
  background:var(--plum);
  color:#fff;
  width:var(--sidebar-w);
  display:flex; flex-direction:column;
}
.sidebar-brand{
  display:flex; align-items:center; gap:.65rem;
  padding:1.1rem 1rem; border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar-brand .mark{
  width:36px; height:36px; border-radius:10px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--lilac),var(--brass));
  display:grid; place-items:center; font-family:'Sora',sans-serif; font-weight:700; color:#1a1024;
}
.sidebar-brand strong{ display:block; font-size:.92rem; line-height:1.2; }
.sidebar-brand small{ color:rgba(255,255,255,.55); font-size:.7rem; }
.sidebar-nav{ list-style:none; margin:0; padding:.75rem .6rem; flex:1 1 auto; overflow-y:auto; }
.sidebar-nav a{
  display:flex; align-items:center; gap:.75rem;
  padding:.62rem .75rem; margin-bottom:2px;
  color:rgba(255,255,255,.75); text-decoration:none;
  border-radius:10px; font-size:.9rem; font-weight:500;
}
.sidebar-nav a:hover{ background:var(--plum-2); color:#fff; }
.sidebar-nav a.active{ background:var(--lilac); color:#fff; }
.sidebar-nav i{ font-size:1.05rem; }
.sidebar-foot{
  padding:.75rem 1rem 1.25rem; border-top:1px solid rgba(255,255,255,.08);
}
.sidebar-foot a{ color:rgba(255,255,255,.7); text-decoration:none; font-size:.85rem; }
.sidebar-foot a:hover{ color:#fff; }

@media (min-width:992px){
  /* Bootstrap's .offcanvas-lg forces `background-color: transparent !important`
     at this breakpoint, so the plum panel needs !important to win it back. */
  .sidebar{
    position:fixed; top:0; left:0; height:100vh; z-index:1040;
    background:var(--plum) !important;
    visibility:visible !important;
    transform:none !important;
  }
  .topbar{ margin-left:var(--sidebar-w); }
  .content{ margin-left:var(--sidebar-w); }
}

/* ----------------------------------------------------------- content */
.content{ padding:1.1rem; padding-bottom:5.5rem; }
@media (min-width:992px){ .content{ padding:1.5rem 1.75rem 3rem; } }

.card{ border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 1px 2px rgba(29,26,36,.04); }
.card-header{ background:#fff; border-bottom:1px solid var(--line); font-weight:600; font-family:'Sora',sans-serif; font-size:.95rem; }

/* stat tiles */
.stat{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem; height:100%; }
.stat .label{ font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.stat .value{ font-family:'Sora',sans-serif; font-size:1.5rem; font-weight:700; margin-top:.15rem; }
.stat .sub{ font-size:.78rem; color:var(--muted); }
.stat .ico{ float:right; font-size:1.2rem; color:var(--lilac); opacity:.8; }
.stat.accent{ background:var(--plum); color:#fff; border-color:var(--plum); }
.stat.accent .label,.stat.accent .sub{ color:rgba(255,255,255,.65); }
.stat.accent .ico{ color:var(--brass); }

/* buttons */
.btn-accent{ background:var(--lilac); border-color:var(--lilac); color:#fff; font-weight:500; }
.btn-accent:hover,.btn-accent:focus{ background:#6a49f0; border-color:#6a49f0; color:#fff; }
.btn-plum{ background:var(--plum); border-color:var(--plum); color:#fff; }
.btn-plum:hover{ background:var(--plum-2); border-color:var(--plum-2); color:#fff; }
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{ outline:3px solid rgba(124,92,252,.45); outline-offset:2px; }

.form-control:focus,.form-select:focus{ border-color:var(--lilac); box-shadow:0 0 0 .2rem rgba(124,92,252,.15); }
.form-label{ font-size:.82rem; font-weight:600; color:var(--muted); margin-bottom:.25rem; }

/* -------------------------------------------------------------- table */
.table{ margin:0; }
.table > :not(caption) > * > *{ padding:.75rem .9rem; }
.table thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); background:#FBFAFD; border-bottom:1px solid var(--line); white-space:nowrap;
}
.table tbody tr:hover{ background:#FBFAFD; }

/* Below 768px, .table-stack turns each row into a card with data-label prefixes */
@media (max-width:767.98px){
  .table-stack thead{ display:none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td{ display:block; width:100%; }
  .table-stack tr{
    background:#fff; border:1px solid var(--line); border-radius:12px;
    margin-bottom:.6rem; padding:.35rem .25rem;
  }
  .table-stack td{
    display:flex; justify-content:space-between; align-items:center; gap:1rem;
    border:0; padding:.4rem .75rem; text-align:right;
  }
  .table-stack td::before{
    content:attr(data-label);
    font-size:.72rem; text-transform:uppercase; letter-spacing:.04em;
    color:var(--muted); font-weight:600; text-align:left; flex:0 0 auto;
  }
  .table-stack td.cell-actions{ justify-content:flex-end; border-top:1px solid var(--line); margin-top:.25rem; padding-top:.55rem; }
  .table-stack td.cell-actions::before{ margin-right:auto; }
}

.empty{ text-align:center; padding:2.5rem 1rem; color:var(--muted); }
.empty i{ font-size:2rem; display:block; margin-bottom:.5rem; color:var(--line); }

/* ------------------------------------------------------- bottom nav */
.bottomnav{
  position:fixed; bottom:0; left:0; right:0; z-index:1035;
  display:flex; justify-content:space-around; align-items:flex-end;
  background:#fff; border-top:1px solid var(--line);
  padding:.35rem .25rem calc(.35rem + env(safe-area-inset-bottom));
}
.bottomnav a{
  flex:1; text-align:center; text-decoration:none; color:var(--muted);
  font-size:.65rem; padding:.3rem 0; display:block;
}
.bottomnav a i{ display:block; font-size:1.15rem; margin-bottom:.1rem; }
.bottomnav a.active{ color:var(--lilac); }
.bottomnav a.fab{
  flex:0 0 54px; height:54px; width:54px; margin:-22px .25rem 0;
  border-radius:50%; background:var(--lilac); color:#fff;
  display:grid; place-items:center; box-shadow:0 6px 16px rgba(124,92,252,.4);
}
.bottomnav a.fab i{ font-size:1.4rem; margin:0; }

/* ---------------------------------------------------------- billing */
.pos-item{ border:1px solid var(--line); border-radius:12px; padding:.75rem; background:#fff; margin-bottom:.6rem; }
.pos-total{ position:sticky; top:calc(var(--topbar-h) + 1rem); }
.pos-total .row-line{ display:flex; justify-content:space-between; padding:.3rem 0; font-size:.9rem; }
.pos-total .grand{ font-family:'Sora',sans-serif; font-size:1.35rem; font-weight:700; border-top:1px dashed var(--line); padding-top:.6rem; margin-top:.4rem; }

/* ------------------------------------------------------------- login */
.login-wrap{
  min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:1.25rem;
  background:radial-gradient(120% 90% at 15% 0%, #4a3163 0%, var(--plum) 55%, #1d1329 100%);
}
.login-card{ width:100%; max-width:400px; background:#fff; border-radius:18px; padding:1.75rem; }
.login-card .mark{
  width:48px; height:48px; border-radius:14px;
  background:linear-gradient(135deg,var(--lilac),var(--brass));
  display:grid; place-items:center; font-family:'Sora',sans-serif; font-weight:700; font-size:1.3rem; color:#1a1024;
}

/* ------------------------------------------------------------- print */
.receipt{ max-width:780px; margin:2rem auto; padding:2rem; background:#fff; font-size:14px; }
.receipt h2{ margin:0; }
.receipt .brand{ border-bottom:2px solid var(--plum); padding-bottom:1rem; margin-bottom:1.25rem; }
.receipt table{ width:100%; border-collapse:collapse; }
.receipt th,.receipt td{ padding:.5rem; border-bottom:1px solid #e5e5e5; text-align:left; }
.receipt th{ font-size:.75rem; text-transform:uppercase; color:#666; }
.receipt .num{ text-align:right; }

@media print{
  .topbar,.sidebar,.bottomnav,.no-print{ display:none !important; }
  body{ background:#fff; }
  .content{ margin:0; padding:0; }
  .receipt{ margin:0; padding:0; max-width:none; }
  a[href]:after{ content:none !important; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}