/* Blossom Salon CRM — design system (matched to GlowCRM reference)
   Rose Gold (#D4A373) + Dark Charcoal (#222222) on white / soft gray surfaces. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=DM+Sans:wght@400;500;600&display=swap');

:root{
  --radius:16px; --radius-sm:8px; --radius-lg:20px; --radius-full:999px;

  --background:#ffffff;
  --surface:#fbfaf8;
  --card:#ffffff;
  --foreground:#262626;
  --muted-foreground:#8a8580;

  --primary:#d4a373;            /* rose gold */
  --primary-hover:#c2925f;
  --primary-foreground:#fdfcfb;
  --primary-soft:#f5ece1;

  --charcoal:#222222;
  --charcoal-foreground:#fafafa;

  --secondary:#f6f4f1;
  --border:#ece7e0;
  --input:#ece7e0;
  --ring:#d4a373;

  --destructive:#c9483f;
  --destructive-soft:#fbeae8;
  --success:#3f8a5e;
  --success-soft:#e9f4ee;
  --info:#3f72b0;
  --info-soft:#eaf1fa;
  --warning:#b98526;
  --warning-soft:#faf1de;

  --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -18px rgba(0,0,0,.35);
  --shadow-lift: 0 2px 6px rgba(0,0,0,.05), 0 18px 40px -24px rgba(0,0,0,.45);
  --shadow-glow: 0 10px 30px -12px rgba(212,163,115,.55);
}
*{box-sizing:border-box}
body{
  background:var(--surface); color:var(--foreground);
  font-family:'DM Sans',ui-sans-serif,system-ui,sans-serif; font-size:14.5px;
  -webkit-font-smoothing:antialiased;
  margin:0;
}
h1,h2,h3,h4,h5,.brand,.stat-value{ font-family:'Outfit',ui-sans-serif,system-ui,sans-serif; letter-spacing:-0.02em; }
a{ text-decoration:none; color:inherit; }

/* ---------- layout ---------- */
.app-shell{ display:flex; min-height:100vh; }
.sidebar{
  width:248px; flex-shrink:0; background:var(--background);
  color:var(--foreground); border-right:1px solid var(--border);
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:16px 12px;
}
.brand{ display:flex; align-items:center; gap:10px; padding:8px 8px 22px; color:var(--foreground); font-weight:600; font-size:1.1rem; }
.brand .brand-mark{
  width:36px;height:36px;border-radius:12px; background:var(--charcoal); color:var(--charcoal-foreground);
  display:flex;align-items:center;justify-content:center; font-size:1rem;
}
.nav-group-label{ font-size:.6875rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted-foreground); margin:18px 12px 6px; font-weight:600; }
.nav-link-item{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; color:var(--foreground);
  font-size:.9rem; font-weight:500; margin-bottom:2px;
  transition:background-color .2s ease, color .2s ease, transform .2s ease;
}
.nav-link-item i{ font-size:1.05rem; width:18px; text-align:center; color:var(--muted-foreground); transition:transform .2s ease, color .2s ease; }
.nav-link-item:hover{ background:var(--secondary); color:var(--foreground); }
.nav-link-item:hover i{ transform:scale(1.1); color:var(--foreground); }
.nav-link-item.active{ background:var(--primary-soft); color:var(--foreground); box-shadow:inset 0 0 0 1px rgba(212,163,115,.35); font-weight:600; }
.nav-link-item.active i{ color:var(--primary); }
.nav-badge{
  margin-left:auto; background:var(--primary); color:var(--primary-foreground); font-size:.66rem; font-weight:700;
  min-width:19px; height:19px; padding:0 6px; border-radius:var(--radius-full);
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
  box-shadow:0 0 0 2px var(--background), 0 2px 5px rgba(212,163,115,.45);
  letter-spacing:.01em;
}

.main-col{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  position:sticky; top:0; z-index:20; background:rgba(255,255,255,.85); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:12px 24px; display:flex; align-items:center; gap:16px;
  height:64px;
}
.topbar .role-pill{ font-size:.72rem; font-weight:600; color:var(--foreground); background:var(--secondary); padding:4px 12px; border-radius:var(--radius-full); border:1px solid var(--border); }
.topbar .search-box{ flex:1; max-width:360px; }
.topbar .search-box input{ border-radius:var(--radius-full); border:1px solid var(--border); background:var(--secondary); font-size:.85rem; padding:8px 16px; }
.topbar .search-box input:focus{ border-color:var(--primary); background:var(--background); box-shadow:0 0 0 4px rgba(212,163,115,.12); outline:none; }
.avatar{
  width:38px;height:38px;border-radius:50%; background:var(--charcoal);
  color:var(--charcoal-foreground); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:.8rem; flex-shrink:0;
}
.avatar-sm{ width:30px;height:30px; font-size:.68rem; }
.content{ padding:24px; max-width:1400px; width:100%; margin:0 auto; }

/* ---------- cards & stats ---------- */
.panel{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-card); }
.panel-body{ padding:20px 22px; }
.panel-header{ padding:18px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.panel-header h2{ font-size:1.05rem; font-weight:600; margin:0; }
.panel-header p{ margin:2px 0 0; font-size:.78rem; color:var(--muted-foreground); }

.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-card);
  transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s cubic-bezier(.22,1,.36,1), border-color .22s ease;
}
.stat-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lift); border-color:rgba(212,163,115,.35); }
.stat-label{ font-size:.6875rem; color:var(--muted-foreground); font-weight:600; text-transform:uppercase; letter-spacing:.09em; }
.stat-value{ font-size:1.75rem; font-weight:600; margin-top:4px; color:var(--foreground); letter-spacing:-0.03em; }
.stat-icon{ width:40px;height:40px;border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--primary-soft); color:#8a5a2e; }
.stat-trend-up{ color:var(--success); font-size:.78rem; font-weight:600; background:var(--success-soft); padding:2px 8px; border-radius:var(--radius-full); }
.stat-trend-down{ color:var(--destructive); font-size:.78rem; font-weight:600; background:var(--destructive-soft); padding:2px 8px; border-radius:var(--radius-full); }

/* ---------- tables ---------- */
.table-wrap{ overflow-x:auto; }
table.crm-table{ width:100%; border-collapse:collapse; font-size:.86rem; }
table.crm-table th{
  text-align:left; padding:10px 14px; font-size:.6875rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted-foreground); border-bottom:1px solid var(--border); font-weight:600; white-space:nowrap;
}
table.crm-table td{ padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
table.crm-table tbody tr{ transition:background-color .15s ease; }
table.crm-table tbody tr:hover{ background:var(--secondary); }
table.crm-table tbody tr:last-child td{ border-bottom:none; }

.status-badge{
  font-size:.72rem; font-weight:600; padding:4.5px 12px; border-radius:var(--radius-full);
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
}
.status-badge::before{
  content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0;
  box-shadow:0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
.badge-confirmed{ background: #e8f0fe; color: #1a73e8; }
.badge-pending{ background:var(--warning-soft); color:var(--warning); }
.badge-completed{ background:var(--success-soft); color:var(--success); }
.badge-cancelled{ background:var(--destructive-soft); color:var(--destructive); }
.badge-noshow{ background:var(--destructive-soft); color:var(--destructive); }
.badge-inservice{ background:var(--primary-soft); color:#8a5a2e; }

/* ---------- status select dropdown ---------- */
.status-select {
  font-size: .72rem;
  font-weight: 600;
  padding: 4px 26px 4px 11px;
  border-radius: var(--radius-full);
  border: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%238a8580' d='M8 11 3 6h10z'/%3E%3C/svg%3E");
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
  min-width: 100px;
}
.status-select:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.status-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(212, 163, 115, 0.25);
  transform: scale(1.02);
}
.status-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

/* Status colors - Blue for Confirmed */
.status-select.status-confirmed { 
  background-color: #e8f0fe; 
  color: #1a73e8; 
  border: 1px solid rgba(26, 115, 232, 0.2);
}
.status-select.status-pending { 
  background-color: var(--warning-soft); 
  color: var(--warning); 
  border: 1px solid rgba(185, 133, 38, 0.2);
}
.status-select.status-completed { 
  background-color: var(--success-soft); 
  color: var(--success); 
  border: 1px solid rgba(63, 138, 94, 0.2);
}
.status-select.status-cancelled { 
  background-color: var(--destructive-soft); 
  color: var(--destructive); 
  border: 1px solid rgba(201, 72, 63, 0.2);
}
.status-select.status-noshow { 
  background-color: var(--destructive-soft); 
  color: var(--destructive); 
  border: 1px solid rgba(201, 72, 63, 0.2);
}
.status-select.status-inservice { 
  background-color: var(--primary-soft); 
  color: #8a5a2e; 
  border: 1px solid rgba(212, 163, 115, 0.2);
}

/* Status dropdown options */
.status-select option {
  padding: 8px 12px;
  font-weight: 600;
  font-size: .78rem;
}
.status-select.status-confirmed option {
  background-color: #ffffff;
  color: #1a73e8;
}
.status-select.status-confirmed option:hover,
.status-select.status-confirmed option:checked {
  background-color: #e8f0fe;
  color: #1a73e8;
}
.status-select.status-pending option {
  background-color: #ffffff;
  color: var(--warning);
}
.status-select.status-pending option:hover,
.status-select.status-pending option:checked {
  background-color: var(--warning-soft);
  color: var(--warning);
}
.status-select.status-completed option {
  background-color: #ffffff;
  color: var(--success);
}
.status-select.status-completed option:hover,
.status-select.status-completed option:checked {
  background-color: var(--success-soft);
  color: var(--success);
}
.status-select.status-cancelled option,
.status-select.status-noshow option {
  background-color: #ffffff;
  color: var(--destructive);
}
.status-select.status-cancelled option:hover,
.status-select.status-cancelled option:checked,
.status-select.status-noshow option:hover,
.status-select.status-noshow option:checked {
  background-color: var(--destructive-soft);
  color: var(--destructive);
}
.status-select.status-inservice option {
  background-color: #ffffff;
  color: #8a5a2e;
}
.status-select.status-inservice option:hover,
.status-select.status-inservice option:checked {
  background-color: var(--primary-soft);
  color: #8a5a2e;
}

/* ---------- payment select dropdown ---------- */
.payment-select {
  font-size: .72rem;
  font-weight: 600;
  padding: 4px 26px 4px 11px;
  border-radius: var(--radius-full);
  border: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%238a8580' d='M8 11 3 6h10z'/%3E%3C/svg%3E");
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
  min-width: 90px;
}
.payment-select:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.payment-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(212, 163, 115, 0.25);
  transform: scale(1.02);
}
.payment-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

/* Payment colors */
.payment-select.payment-paid { 
  background-color: var(--success-soft); 
  color: var(--success); 
  border: 1px solid rgba(63, 138, 94, 0.2);
}
.payment-select.payment-due { 
  background-color: var(--warning-soft); 
  color: var(--warning); 
  border: 1px solid rgba(185, 133, 38, 0.2);
}
.payment-select.payment-unpaid { 
  background-color: var(--destructive-soft); 
  color: var(--destructive); 
  border: 1px solid rgba(201, 72, 63, 0.2);
}

/* Payment dropdown options */
.payment-select option {
  padding: 8px 12px;
  font-weight: 600;
  font-size: .78rem;
}
.payment-select.payment-paid option {
  background-color: #ffffff;
  color: var(--success);
}
.payment-select.payment-paid option:hover,
.payment-select.payment-paid option:checked {
  background-color: var(--success-soft);
  color: var(--success);
}
.payment-select.payment-due option {
  background-color: #ffffff;
  color: var(--warning);
}
.payment-select.payment-due option:hover,
.payment-select.payment-due option:checked {
  background-color: var(--warning-soft);
  color: var(--warning);
}
.payment-select.payment-unpaid option {
  background-color: #ffffff;
  color: var(--destructive);
}
.payment-select.payment-unpaid option:hover,
.payment-select.payment-unpaid option:checked {
  background-color: var(--destructive-soft);
  color: var(--destructive);
}

.name-cell{ display:flex; align-items:center; gap:10px; }
.name-cell .name{ font-weight:600; color:var(--foreground); }
.name-cell .sub{ font-size:.76rem; color:var(--muted-foreground); }

/* ---------- buttons & forms ---------- */
.btn-rose{ background:var(--primary); border-color:var(--primary); color:var(--primary-foreground); font-weight:600; border-radius:var(--radius-full); box-shadow:var(--shadow-glow); }
.btn-rose:hover{ background:var(--primary-hover); border-color:var(--primary-hover); color:var(--primary-foreground); }
.btn-outline-rose{ border-color:var(--primary); color:#8a5a2e; font-weight:600; border-radius:var(--radius-full); background:transparent; }
.btn-outline-rose:hover{ background:var(--primary); color:var(--primary-foreground); }
.btn{ border-radius:var(--radius-full); }
.btn-light{ border-radius:var(--radius-full); }
.form-control,.form-select{ border-radius:10px; border-color:var(--border); }
.form-control:focus,.form-select:focus{ border-color:var(--primary); box-shadow:0 0 0 4px rgba(212,163,115,.12); }
label.form-label{ font-size:.8rem; font-weight:600; color:var(--foreground); }

/* ---------- misc ---------- */
.page-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.page-head h1{ font-size:1.6rem; font-weight:600; margin:0; color:var(--foreground); letter-spacing:-0.02em; }
.page-head p{ color:var(--muted-foreground); margin:4px 0 0; font-size:.88rem; }

.chip-filter{ border:1px solid var(--border); border-radius:var(--radius-full); padding:6px 15px; font-size:.78rem; font-weight:600; color:var(--muted-foreground); background:var(--background); transition:all .2s ease; }
.chip-filter:hover{ border-color:rgba(212,163,115,.4); color:var(--foreground); }
.chip-filter.active{ background:var(--charcoal); border-color:var(--charcoal); color:var(--charcoal-foreground); }

.login-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--surface); padding:24px; }
.login-card{ background:var(--card); border-radius:24px; box-shadow:var(--shadow-lift); width:100%; max-width:920px; overflow:hidden; display:flex; border:1px solid var(--border); }
.login-side{ flex:1; background:linear-gradient(160deg,var(--charcoal),#3a2f28 120%); color:var(--charcoal-foreground); padding:44px 38px; display:flex; flex-direction:column; justify-content:space-between; min-width:280px; }
.login-form{ flex:1.15; padding:44px 42px; }
.demo-account{ display:flex; justify-content:space-between; font-size:.78rem; padding:6px 0; border-bottom:1px dashed rgba(255,255,255,.18); }
.empty-state{ text-align:center; padding:56px 20px; color:var(--muted-foreground); background:var(--secondary); border:1px dashed var(--border); border-radius:20px; }
.progress-thin{ height:6px; border-radius:var(--radius-full); background:var(--secondary); overflow:hidden; }
.progress-thin .progress-bar{ background:var(--primary) !important; }

@media (max-width: 900px){
  .sidebar{ position:fixed; left:-280px; z-index:40; transition:left .25s ease; }
  .sidebar.open{ left:0; }
  .login-card{ flex-direction:column; }
}

/* ---------- calendar week board ---------- */
.cal-board{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-card); overflow:hidden; }
.cal-toolbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--border); padding:16px 20px; }
.cal-nav{ display:flex; align-items:center; gap:6px; }
.cal-nav .btn{ width:32px; height:32px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; border:1px solid var(--border); background:var(--background); color:var(--foreground); }
.cal-nav .btn:hover{ border-color:rgba(212,163,115,.4); background:var(--secondary); }
.cal-nav h2{ margin:0 0 0 8px; font-size:1rem; font-weight:600; }
.cal-view-toggle{ display:flex; background:var(--secondary); border-radius:var(--radius-full); padding:4px; gap:2px; }
.cal-view-toggle a{ padding:6px 16px; border-radius:var(--radius-full); font-size:.78rem; font-weight:600; color:var(--muted-foreground); transition:all .2s ease; }
.cal-view-toggle a:hover{ color:var(--foreground); }
.cal-view-toggle a.active{ background:var(--background); color:var(--foreground); box-shadow:var(--shadow-card); }

.cal-grid-wrap{ overflow-x:auto; padding:20px; }
.cal-grid{ display:grid; grid-template-columns:64px repeat(7,minmax(120px,1fr)); gap:8px; min-width:900px; }
.cal-daylabel{ text-align:center; font-size:.72rem; font-weight:600; padding:8px 6px; border-radius:12px; color:var(--muted-foreground); }
.cal-daylabel.is-today{ background:var(--charcoal); color:var(--charcoal-foreground); }
.cal-hourlabel{ text-align:right; font-size:.68rem; color:var(--muted-foreground); padding:12px 8px 12px 0; white-space:nowrap; }
.cal-cell{ min-height:56px; }
.cal-slot{
  height:100%; min-height:56px; width:100%; border-radius:12px; border:1px solid transparent;
  padding:8px 10px; text-align:left; display:block; cursor:pointer;
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s cubic-bezier(.22,1,.36,1);
}
.cal-slot:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lift); }
.cal-slot-title{ display:block; font-size:.74rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-slot-sub{ display:block; font-size:.68rem; opacity:.75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.cal-slot-continues{ margin-top:-8px; height:calc(100% + 8px); border-top:none; border-radius:0 0 12px 12px; display:flex; align-items:center; padding:6px 10px; font-size:.66rem; opacity:.7; }

.cal-empty{ height:56px; width:100%; border-radius:12px; border:1.5px dashed var(--border); background:transparent; transition:all .2s ease; }
.cal-empty:hover{ border-color:rgba(212,163,115,.45); background:var(--primary-soft); }

.cal-tone-primary{ background:var(--primary-soft); color:#8a5a2e; border-color:rgba(212,163,115,.3); }
.cal-tone-charcoal{ background:var(--charcoal); color:var(--charcoal-foreground); }
.cal-tone-success{ background:var(--success-soft); color:var(--success); border-color:rgba(63,138,94,.25); }
.cal-tone-info{ background:var(--info-soft); color:var(--info); border-color:rgba(63,114,176,.25); }
.cal-tone-warning{ background:var(--warning-soft); color:var(--warning); border-color:rgba(185,133,38,.25); }
.cal-tone-destructive{ background:var(--destructive-soft); color:var(--destructive); border-color:rgba(201,72,63,.25); }

@media (max-width: 700px){
  .cal-grid-wrap{ padding:14px; }
}

/* ---------- dropdowns / popovers (match reference rounded-2xl style) ---------- */
.dropdown-menu{
  border-radius:18px; border:1px solid var(--border); box-shadow:var(--shadow-lift);
  padding:8px; margin-top:8px !important;
}
.dropdown-menu .dropdown-item{ border-radius:10px; padding:8px 12px; font-size:.86rem; }
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus{ background:var(--secondary); }
.dropdown-menu .dropdown-item.active{ background:var(--primary-soft); color:var(--foreground); }
.dropdown-menu .dropdown-header{ font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--muted-foreground); padding:6px 12px; }
.dropdown-menu .dropdown-divider{ border-color:var(--border); margin:6px 4px; }

.profile-menu{ width:250px; padding:8px; }
.profile-menu-head{ display:flex; align-items:center; gap:10px; padding:6px 8px 8px; }
.profile-menu .return-admin-item{ background:var(--primary-soft); color:#8a5a2e; font-weight:600; }
.profile-menu .return-admin-item:hover{ background:var(--primary); color:var(--primary-foreground); }
.profile-menu .dropdown-item.active i.bi-check2{ color:var(--primary); }

/* ---------- toggle switch (used on Permissions page) ---------- */
.toggle-switch{ position:relative; display:inline-block; width:42px; height:24px; cursor:pointer; vertical-align:middle; }
.toggle-switch input{ opacity:0; width:0; height:0; position:absolute; }
.toggle-slider{
  position:absolute; inset:0; background:var(--border); border-radius:var(--radius-full);
  transition:background-color .2s ease;
}
.toggle-slider::before{
  content:''; position:absolute; height:18px; width:18px; left:3px; top:3px;
  background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform .2s cubic-bezier(.22,1,.36,1);
}
.toggle-switch input:checked + .toggle-slider{ background:var(--primary); }
.toggle-switch input:checked + .toggle-slider::before{ transform:translateX(18px); }
.toggle-switch input:focus-visible + .toggle-slider{ box-shadow:0 0 0 3px rgba(212,163,115,.3); }

/* ---------- tier badges ---------- */
.tier-badge{ font-size:.72rem; font-weight:600; padding:4px 11px; border-radius:var(--radius-full); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.tier-badge i{ font-size:.72rem; }

/* ---------- offcanvas (View client panel) ---------- */
.crm-offcanvas{ width:380px; background:var(--card); border-left:1px solid var(--border); box-shadow:var(--shadow-lift); }
.crm-offcanvas .offcanvas-header{ border-bottom:1px solid var(--border); padding:18px 22px; }
.crm-offcanvas .offcanvas-title{ font-family:'Outfit',ui-sans-serif,system-ui,sans-serif; font-weight:600; font-size:1.05rem; }
.crm-offcanvas .offcanvas-body{ padding:22px; }
.offcanvas-backdrop.show{ opacity:.35; }
@media (max-width: 480px){
  .crm-offcanvas{ width:100%; }
}

/* ---------- settings page tab nav ---------- */
.settings-tabs .nav-link{
  border-radius:12px; color:var(--foreground); font-size:.86rem; font-weight:500; padding:10px 14px;
  display:flex; align-items:center; text-align:left; transition:background-color .2s ease, color .2s ease;
}
.settings-tabs .nav-link:hover{ background:var(--secondary); }
.settings-tabs .nav-link.active{ background:var(--primary-soft); color:var(--foreground); font-weight:600; }
.settings-tabs .nav-link.active i{ color:var(--primary); }

/* ---------- Additional utility classes for status/payment ---------- */
/* Status indicator dot for select options */
.status-select option::before,
.payment-select option::before {
  content: '● ';
}

/* Smooth animation for select changes */
.status-select,
.payment-select {
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Select option scrollbar */
select option {
  scrollbar-width: thin;
}

/* Payment status pill (for display only) */
.payment-pill {
  font-size: .72rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.payment-pill.paid {
  background: var(--success-soft);
  color: var(--success);
}
.payment-pill.due {
  background: var(--warning-soft);
  color: var(--warning);
}
.payment-pill.unpaid {
  background: var(--destructive-soft);
  color: var(--destructive);
}