/* Direction: GlowCare — soft blush skincare studio. Warm cream paper, dusty rose actions, deep plum navigation, editorial serif display. */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #fbf5f3;
  --surface: #fffdf9;
  --surface-2: #f6e9e6;
  --border: #e7d4d5;
  --border-strong: #b8b0b0;
  --ink: #38282d;
  --muted: #766469;
  --accent: #b86f7d;
  --accent-hover: #9c5e6a;
  --accent-ink: #1a1012;
  --accent-text: #9a4e5e;
  --accent-strong: #844f5a;
  --accent-soft: #f3dfe1;
  --accent-border: #ddb9be;
  --success: #6e9b7b;
  --success-ink: #38282d;
  --success-soft: #eaeae5;
  --success-strong: #4f6f58;
  --warning: #c99a52;
  --warning-ink: #38282d;
  --warning-soft: #f5eae0;
  --warning-strong: #846635;
  --danger: #c76d6d;
  --danger-ink: #38282d;
  --danger-soft: #f5e5e3;
  --danger-strong: #8f4e4e;
  --chart-1: #b86f7d;
  --chart-2: #af8505;
  --chart-3: #5a7d1a;
  --chart-4: #209a91;
  --chart-5: #1c71b4;
  --chart-6: #a87bcf;

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --radius-card: 18px;
  --radius-btn: 12px;
  --radius-input: 12px;
  --shadow-card: 0 1px 2px rgba(69, 44, 52, 0.05), 0 8px 24px -12px rgba(69, 44, 52, 0.12);
  --x-sidebar: #3A252B;
  --x-plum: #452C34;
  --x-rose: #E8C7CB;
  --x-rose2: #D49AA3;
  --x-blush: #F3DFE1;
  --x-info: #7F91A8;
  --x-on-plum: #FBF5F3;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #1a1012;
  --surface: #31282a;
  --surface-2: #251c1e;
  --border: #3a3133;
  --border-strong: #5f5859;
  --ink: #fbf5f3;
  --muted: #a19999;
  --accent: #b86f7d;
  --accent-hover: #c38591;
  --accent-ink: #1a1012;
  --accent-text: #c38691;
  --accent-strong: #c38691;
  --accent-soft: #3d252a;
  --accent-border: #613b42;
  --success: #6e9b7b;
  --success-ink: #ffffff;
  --success-soft: #2c2f29;
  --success-strong: #7aa386;
  --warning: #c99a52;
  --warning-ink: #ffffff;
  --warning-soft: #412e20;
  --warning-strong: #c99a52;
  --danger: #c76d6d;
  --danger-ink: #ffffff;
  --danger-soft: #402426;
  --danger-strong: #cf8484;
  --chart-1: #b86f7d;
  --chart-2: #d8923d;
  --chart-3: #6a8e2f;
  --chart-4: #0cb4aa;
  --chart-5: #3485c9;
  --chart-6: #b689de;
}

/* GlowCare — app-specific styling: panels, sidebar, tables, status badges, calendar. */

.panel { @apply rounded-2xl border border-border bg-surface shadow-sm; }
.panel-blush { @apply rounded-2xl border border-border bg-accent-soft; }

.nav-link {
  display: flex; align-items: center; gap: .75rem; white-space: nowrap;
  padding: .6rem .9rem; border-radius: .75rem; font-size: .92rem;
  color: color-mix(in srgb, var(--x-on-plum) 72%, transparent);
  transition: background .15s, color .15s;
}
.nav-link:hover { background: color-mix(in srgb, var(--x-on-plum) 10%, transparent); color: var(--x-on-plum); }
.nav-link:focus-visible { outline: 2px solid var(--x-rose2); outline-offset: 2px; }
.nav-link.is-active { background: var(--x-blush); color: var(--x-plum); font-weight: 500; }
.nav-link.is-active svg { color: var(--accent-text); }

.avatar {
  display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem;
  border-radius: 999px; background: var(--x-rose); color: var(--x-plum);
  font-size: .8rem; font-weight: 600; letter-spacing: .02em;
}

.tbl { width: 100%; font-size: .875rem; border-collapse: collapse; }
.tbl th {
  text-align: left; font-weight: 500; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); padding: .8rem 1rem; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.tbl td { padding: .85rem 1rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); vertical-align: middle; }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl a.row-link { font-weight: 500; color: var(--ink); }
.tbl a.row-link:hover { color: var(--accent-text); text-decoration: underline; }

/* status badges + calendar cards share --c */
.st {
  --c: var(--muted);
  display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .15rem .6rem;
  font-size: .72rem; font-weight: 500; white-space: nowrap;
  background: color-mix(in srgb, var(--c) 16%, transparent);
  color: color-mix(in srgb, var(--c) 60%, var(--ink));
}
.st::before { content: ""; width: .4rem; height: .4rem; border-radius: 999px; background: var(--c); }
.st-confirmed { --c: var(--x-info); }
.st-checked-in { --c: var(--warning); }
.st-in-progress { --c: var(--accent); }
.st-completed { --c: var(--success); }
.st-cancelled { --c: var(--danger); }
.st-no-show { --c: var(--muted); }
.st-unpaid { --c: var(--danger); }
.st-partially-paid { --c: var(--warning); }
.st-paid { --c: var(--success); }
.st-active { --c: var(--success); }
.st-inactive { --c: var(--muted); }

.ap {
  display: block; border-radius: .65rem; border: 1px solid var(--border);
  border-left: 3px solid var(--c, var(--muted)); background: var(--surface);
  padding: .4rem .55rem; font-size: .75rem; line-height: 1.3;
  transition: transform .15s, box-shadow .15s;
}
.ap.st { display: block; border-radius: .65rem; color: var(--ink); background: var(--surface); }
.ap.st::before { display: none; }
.ap:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.ap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.cal-scroll { overflow-x: auto; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-width: 840px; }
.cal-cell { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: .5rem; min-height: 9rem; display: flex; flex-direction: column; gap: .35rem; }
.cal-cell.is-today { background: color-mix(in srgb, var(--accent-soft) 70%, transparent); }
.cal-cell.is-off { background: color-mix(in srgb, var(--surface-2) 55%, transparent); color: var(--muted); }
.cal-head { padding: .6rem .5rem; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.hour-row { display: grid; grid-template-columns: 4.5rem 1fr; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); min-height: 3.5rem; }
.hour-row:last-child { border-bottom: 0; }

.kpi-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .75rem; background: var(--accent-soft); color: var(--accent-text); }

.bar { height: .5rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }

.day-chip {
  display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); font-size: .8rem; cursor: pointer;
}
.day-chip:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong, var(--ink)); }
.day-chip input { accent-color: var(--accent); }

/* authentication */
.auth-card .label { color: var(--x-on-plum); }
.auth-card .hint, .auth-card .muted { color: color-mix(in srgb, var(--x-on-plum) 70%, transparent); }
.auth-card a:not(.btn) { color: var(--x-rose); text-decoration: underline; text-underline-offset: 3px; }
.auth-card a:not(.btn):hover { color: var(--x-on-plum); }
.auth-blob { position: absolute; border-radius: 999px; background: var(--x-rose); opacity: .35; filter: blur(2px); }

@keyframes rise { from { transform: translateY(10px); } to { transform: none; } }
.rise { animation: rise .5s ease both; }
html.reduced-motion .rise { animation: none; }
html.reduced-motion .ap { transition: none; }