/* Esteja UI foundations
 * Shared visual primitives only. Page-specific layouts stay in their existing files.
 */
:root{
  --font-ui: 'DM Sans', sans-serif;
  --font-heading: 'Manrope', sans-serif;
  /* Brand violet for backgrounds, borders and icons. Violet text is darker: at least 4.5:1 on the lilac tints. */
  --violet: #7c57ff;
  --violet-text: #6d47ec;
  --violet-hover: #6d47ec;
  --ds-brand: var(--brand, #6f3e58);
  --ds-accent: var(--accent, #ead8e6);
  --ds-page: var(--page, #f7f4f7);
  --ds-surface: var(--surface, #ffffff);
  --ds-surface-soft: var(--soft, #fbf8fb);
  --ds-ink: var(--ink, #171722);
  --ds-muted: var(--muted, #696674);
  --ds-line: var(--line, #e8e0e8);
  --ds-line-strong: color-mix(in srgb, var(--ds-brand) 24%, var(--ds-line));
  --ds-success: #2f7a5a;
  --ds-success-bg: #e5f3eb;
  --ds-warning: #986116;
  --ds-warning-bg: #fff2dc;
  --ds-danger: #a45363;
  --ds-danger-bg: #f8e9ee;
  /* Red text on --ds-danger-bg: --ds-danger there is 4.47:1, this one 4.87:1 (as "Annullato" in the Home). */
  --danger-text: #9a4f62;
  --ds-info: #315fa6;
  --ds-info-bg: #e9f0ff;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-7: 32px;
  --ds-space-8: 40px;
  --ds-radius-sm: 8px;
  --ds-radius-md: 10px;
  --ds-radius-lg: 14px;
  --ds-radius-xl: 18px;
  --ds-radius-pill: 999px;
  --ds-control-height: 44px;
  --ds-control-compact: 38px;
  --ds-control-tall: 48px;
  --ds-shadow-sm: 0 2px 10px rgb(46 28 50 / 5%);
  --ds-shadow-md: 0 10px 30px rgb(46 28 50 / 12%);
  --control-radius: var(--ds-radius-md);
}

html{ background: var(--ds-page); }
body{
  font-family: var(--font-ui);
  color: var(--ds-ink);
  background: var(--ds-page);
}
h1,h2,h3,h4,h5,h6{ font-family: var(--font-heading); }
button,input,select,textarea{ font-family: var(--font-ui); }

/* Shared layout scale: deliberately wide for the future calendar. */
main{ width: 100%; max-width: none; padding: var(--ds-space-6) var(--ds-space-7) var(--ds-space-7); }
.app-header{ height: 64px; padding: 10px var(--ds-space-6); gap: var(--ds-space-5); }
.header-tools{ gap: var(--ds-space-2); }
.header-tools .iconbutton{ width: 40px; min-width: 40px; height: 40px; min-height: 40px; }
.global-search-wrap{ width: min(420px, 34vw); }
.global-search-wrap input{ min-height: 40px; height: 40px; border-radius: var(--ds-radius-pill); }

/* Sidebar: same structure and navigation,tighter operational rhythm. */
aside{ width: 232px; padding: 22px var(--ds-space-4); }
.workspace{ margin-left: 232px; }
#nav{ gap: var(--ds-space-1); margin-top: var(--ds-space-6); }
#nav button{ min-height: 44px; padding: 10px var(--ds-space-3); gap: var(--ds-space-4); border-radius: var(--ds-radius-md); font-size: 14px; }

/* Type hierarchy used by every page without changing copy. */
.topline h1,.home-intro h1{ font-size: 34px; line-height: 1.15; letter-spacing: -0.025em; }
.topline h2,.home-card h2,.panel h2{ font-size: 20px; line-height: 1.25; }
.eyebrow,.topline .eyebrow{ letter-spacing: .12em; }
label{ font-size: 13px; font-weight: 600; color: var(--ds-muted); }

/* Controls */
.btn,.textbtn,.control-button,.actions button,.card .btn{
  min-height: var(--ds-control-height);
  border-radius: var(--ds-radius-md);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.btn,.control-button,.actions button,.card .btn{
  padding: 0 var(--ds-space-4);
  border: 1px solid var(--ds-line);
  background: var(--ds-surface);
  color: var(--ds-ink);
}
.btn.primary,.btn.primary:hover,.btn[data-variant="primary"],.actions .primary{
  border-color: var(--ds-brand);
  background: var(--ds-brand);
  color: #fff;
}
.btn.danger,.btn[data-variant="danger"],.actions .danger{
  border-color: var(--ds-danger);
  background: var(--ds-danger);
  color: #fff;
}
.textbtn{ padding: 0 var(--ds-space-2); border: 0; background: transparent; color: var(--ds-brand); }
.iconbutton{ border: 1px solid var(--ds-line); border-radius: var(--ds-radius-md); background: var(--ds-surface); color: var(--ds-ink); }
.btn:hover,.control-button:hover,.actions button:hover,.card .btn:hover,.iconbutton:hover{ border-color: var(--ds-line-strong); box-shadow: var(--ds-shadow-sm); }
.btn:active,.control-button:active,.actions button:active{ transform: translateY(1px); }
.btn:disabled,.control-button:disabled,.actions button:disabled{ cursor: not-allowed; opacity: .55; box-shadow: none; transform: none; }

input:not([type="checkbox"]):not([type="radio"]),select,textarea,.control-button{
  min-height: var(--ds-control-height);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  color: var(--ds-ink);
  font-size: 14px;
}
input:not([type="checkbox"]):not([type="radio"]),select{ height: var(--ds-control-height); padding: 0 var(--ds-space-3); }
textarea{ min-height: 104px; padding: var(--ds-space-3); resize: vertical; }
input::placeholder,textarea::placeholder{ color: var(--ds-muted); opacity: .72; }
/* Pointer focus keeps controls clean; keyboard focus remains visible. */
:where(button, a, summary, [role="button"]):focus:not(:focus-visible){ outline: none; }
:focus-visible{ outline: 3px solid color-mix(in srgb, var(--ds-brand) 28%, transparent); outline-offset: 2px; }
input:focus,select:focus,textarea:focus{ border-color: var(--ds-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-brand) 14%, transparent); outline: none; }

/* Surfaces and data grouping */
.card,.panel,.home-card,.home-metric{
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
}
.card{ padding: var(--ds-space-5); }
.badge,.status,.home-status,.gift-status{
  min-height: 26px;
  padding: 4px 9px;
  border-radius: var(--ds-radius-sm);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}
.badge.success,.status.completed,.home-status.completed{ color: var(--ds-success); background: var(--ds-success-bg); }
.badge.warning,.status.pending,.home-status.pending{ color: var(--ds-warning); background: var(--ds-warning-bg); }
.badge.danger,.status.cancelled,.home-status.cancelled{ color: var(--danger-text); background: var(--ds-danger-bg); }
.status.in-progress,.home-status.in-progress{ color: var(--ds-info); background: var(--ds-info-bg); }

/* Dialogs and common modal framing. Booking keeps its own layout. */
dialog:not(.booking-dialog){ border: 1px solid var(--ds-line); border-radius: var(--ds-radius-xl); box-shadow: var(--ds-shadow-md); background: var(--ds-surface); color: var(--ds-ink); }
.modalhead{ margin-bottom: var(--ds-space-5); }
.modalfoot{ gap: var(--ds-space-2); margin-top: var(--ds-space-5); }
/* The dialog itself holds the focus when it opens (openDialog in app.js): no ring around the whole window. */
dialog:focus{ outline: none; }
.close{ width: 40px; height: 40px; border-radius: var(--ds-radius-pill); border: 1px solid var(--ds-line); background: var(--ds-surface-soft); color: var(--ds-ink); }

@media (max-width: 1150px) {
  aside{ width: 208px; }
  .workspace{ margin-left: 208px; }
  main{ padding-inline: var(--ds-space-6); }
  .global-search-wrap{ width: min(360px, 40vw); }
}
@media (max-width: 700px) {
  aside{ width: 100%; padding: var(--ds-space-3); }
  .workspace{ margin-left: 0; }
  .app-header{ height: auto; min-height: 60px; padding: 10px var(--ds-space-4); }
  .global-search-wrap{ width: auto; flex: 1; }
  main{ padding: var(--ds-space-5) var(--ds-space-4) var(--ds-space-6); }
  .topline h1,.home-intro h1{ font-size: 28px; }
}
/* Help line under the notes about a client (preferences, appointment notes): keep sensitive data to what the treatment needs. */
.notes-privacy-hint{margin:8px 0 0;color:var(--muted);font-size:12px;line-height:1.5}