/* Liquid Glass: application chrome only. Booking, auth and business rules stay independent. */
:root {
  --glass-bg: #f7f3ff;
  --glass-surface: #ffffff;
  --glass-pane: #fdfbff;
  --glass-tint: rgba(255, 255, 255, .76);
  --glass-edge: rgba(255, 255, 255, .95);
  --glass-line: #e5def2;
  --glass-text: #231b35;
  --glass-muted: #665b78;
  --glass-accent: #4f2bd9;
  --glass-selected: #eee6ff;
  --glass-shadow: 0 8px 28px rgba(68, 36, 134, .09), inset 0 1px 0 rgba(255, 255, 255, .8);
  --glass-purple: linear-gradient(155deg, #7950eb 0%, #6437eb 48%, #4f2bd9 100%);
  --glass-blur: blur(18px) saturate(135%);
}
:root[data-theme="dark"] {
  --glass-bg: #151121;
  --glass-surface: #211b30;
  --glass-pane: #251e35;
  --glass-tint: rgba(37, 29, 58, .85);
  --glass-edge: rgba(209, 190, 255, .29);
  --glass-line: #443653;
  --glass-text: #f5f0ff;
  --glass-muted: #c9bedc;
  --glass-accent: #d2bfff;
  --glass-selected: #3b2b5e;
  --glass-shadow: 0 10px 32px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(233, 220, 255, .14);
}
#appView {
  color: var(--glass-text);
  background: radial-gradient(ellipse at 6% 5%, rgba(124, 92, 255, .13), transparent 46%),
    radial-gradient(ellipse at 100% 65%, rgba(255, 138, 122, .09), transparent 45%), var(--glass-bg);
}
#appView .workspace { background: transparent; }
#appView .muted { color: var(--glass-muted); }
#appView :is(.topbar, .sidebar, .mobile-bottom-nav, .agenda-mobile-week, .dashboard-calendar, .segmented) {
  background: var(--glass-pane);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
}
/* Opaque first: old browsers keep contrast without backdrop-filter. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #appView :is(.topbar, .sidebar, .mobile-bottom-nav, .agenda-mobile-week, .dashboard-calendar, .segmented) {
    background: var(--glass-tint);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
}
#appView .topbar {
  margin: 14px 24px 0;
  top: 14px;
  padding: 12px 22px;
  height: auto;
  min-height: 78px;
  border-radius: 26px;
  gap: 16px;
}
#appView .topbar-title { min-width: 0; }
#appView .topbar-title h2 { color: var(--glass-text); }
#appView .top-actions { align-items: center; flex-wrap: wrap; justify-content: flex-end; }
#appView .sidebar {
  top: 14px;
  height: calc(100dvh - 28px);
  margin: 14px 0 14px 14px;
  border-radius: 26px;
  overflow-y: auto;
  scrollbar-width: thin;
}
#appView .nav-item { color: var(--glass-muted); min-height: 44px; }
#appView .nav-item.active {
  background: var(--glass-selected);
  color: var(--glass-accent);
  box-shadow: inset 0 1px 0 var(--glass-edge);
}
#appView :is(.theme-toggle, .mobile-bell, .notification-btn, .icon-btn.bordered) {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: 1px solid var(--glass-edge);
  background: var(--glass-selected);
  color: var(--glass-accent);
  box-shadow: var(--glass-shadow);
}
#appView .btn.primary {
  background: var(--glass-purple);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .42);
  box-shadow: 0 6px 18px rgba(79, 43, 217, .2), inset 0 1px 1px rgba(255, 255, 255, .45);
}
#appView :is(.btn.secondary, .btn.ghost) {
  background: var(--glass-selected);
  color: var(--glass-accent);
  border: 1px solid var(--glass-line);
}
#appView :is(.card, .stat-card, .finance-stat, .item-card, .appointment-card, .dashboard-appointment-row, .client-mobile-card, .clients-table-wrap, .agenda-board) {
  background: var(--glass-surface);
  color: var(--glass-text);
  border-color: var(--glass-line);
  box-shadow: 0 5px 20px rgba(35, 17, 68, .045);
}
#appView .appointment-card { border-left-color: #7c5cff; border-radius: 18px; }
#appView .appointment-card.cancelled { border-left-color: var(--glass-muted); }
#appView .appointment-card p { color: var(--glass-muted); }
#appView .agenda-board { border-radius: 22px; }
#appView :is(.day-time, .week-day, .week-head, .day-row, .day-content) { border-color: var(--glass-line); }
#appView .day-time { color: var(--glass-muted); }
#appView .week-head { background: var(--glass-surface); }
#appView .summary-chip {
  background: var(--glass-pane);
  border-color: var(--glass-line);
  color: var(--glass-muted);
  padding: 9px 13px;
  box-shadow: inset 0 1px 0 var(--glass-edge);
}
#appView .summary-chip strong { color: var(--glass-text); }
#appView :is(.dashboard-day, .agenda-mobile-day, .segmented button) {
  color: var(--glass-muted);
  background: transparent;
  border: 1px solid transparent;
  min-height: 44px;
}
#appView :is(.dashboard-day.active, .agenda-mobile-day.active, .segmented button.active) {
  background: var(--glass-purple);
  border-color: rgba(255, 255, 255, .45);
  box-shadow: 0 5px 14px rgba(79, 43, 217, .22), inset 0 1px 1px rgba(255, 255, 255, .45);
  color: #fff;
}
#appView :is(.agenda-controls, .finance-filters) :is(input, select) {
  background: var(--glass-pane);
  border-color: var(--glass-line);
  color: var(--glass-text);
  min-height: 44px;
  min-width: 0;
  box-shadow: inset 0 1px 0 var(--glass-edge);
}
#appView select option { background: var(--glass-surface); color: var(--glass-text); }
#appView .more-grid button { border-radius: 20px; border-color: var(--glass-line); background: var(--glass-surface); }
#appView .more-grid button:not(.more-danger) strong { color: var(--glass-text); }
#appView .more-menu-icon { border: 1px solid var(--glass-edge); background: var(--glass-selected); color: var(--glass-accent); }
#appView :is(button, a, input, select, textarea):focus-visible {
  outline: 3px solid var(--glass-accent);
  outline-offset: 3px;
}
#appView button:disabled { opacity: .6; cursor: not-allowed; transform: none; }
/* Dialog bodies remain solid; only the surrounding scrim uses a light blur. */
:root:has(#appView:not(.hidden)) dialog.modal {
  color: var(--glass-text);
  background: var(--glass-surface);
  border: 1px solid var(--glass-edge);
  box-shadow: 0 24px 70px rgba(20, 10, 44, .25);
}
:root:has(#appView:not(.hidden)) .modal .modal-head {
  background: var(--glass-surface);
  border-color: var(--glass-line);
}
:root:has(#appView:not(.hidden)) .modal::backdrop {
  background: rgba(18, 10, 36, .45);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
@media (min-width: 721px) and (max-width: 1000px) {
  #appView .sidebar { margin-left: 8px; border-radius: 22px; padding-inline: 6px; }
  #appView .sidebar .klikou-logo { max-width: 100%; height: auto; }
  #appView .sidebar-footer { padding-inline: 0; }
  #appView .sidebar-footer .btn { max-width: 100%; overflow-wrap: anywhere; padding-inline: 3px; }
  #appView .sidebar-support { overflow-wrap: anywhere; }
  #appView .topbar { margin-inline: 16px; padding-inline: 16px; }
}
@media (max-width: 720px) {
  #appView {
    --glass-dock-height: 72px;
    --glass-dock-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    padding-bottom: calc(var(--glass-dock-height) + var(--glass-dock-bottom) + 28px);
  }
  #appView .topbar {
    margin: 10px 12px 0;
    top: max(10px, env(safe-area-inset-top, 0px));
    min-height: 70px;
    padding: 10px 14px;
    border-radius: 25px;
    gap: 8px;
  }
  #appView .mobile-header-actions { gap: 8px; }
  #appView .topbar-mobile-logo { width: 106px; max-width: 32vw; height: auto; }
  #appView .page { padding: 22px 16px 88px; }
  #appView #page-dashboard { padding-top: 20px; }
  #appView :is(.agenda-mobile-week, .dashboard-calendar) { border-radius: 24px; padding: 8px; }
  #appView .agenda-mobile-week { gap: 4px; margin-block: 16px 12px; }
  #appView :is(.dashboard-day, .agenda-mobile-day) { border-radius: 17px; padding: 10px 3px; }
  #appView .agenda-mobile-day span { font-size: 11px; }
  #appView .agenda-mobile-day strong { font-size: 17px; }
  #appView #agendaProfessionalFilter { border-radius: 18px; padding: 13px 14px; }
  #appView .agenda-summary { gap: 7px; scrollbar-width: thin; }
  #appView .day-time { font-size: 11px; padding-top: 16px; }
  #appView .appointment-card { padding: 14px 12px; }
  #appView .appointment-card h4 { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
  #appView .appointment-card p { font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
  #appView .appointment-card .status-pill { font-size: 10px; }
  #appView .mobile-bottom-nav {
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: var(--glass-dock-bottom);
    height: var(--glass-dock-height);
    padding: 7px;
    gap: 3px;
    border-radius: 29px;
    box-shadow: 0 10px 34px rgba(47, 20, 102, .17), inset 0 1px 0 var(--glass-edge);
  }
  #appView .mobile-nav-item {
    color: var(--glass-muted);
    border: 1px solid transparent;
    border-radius: 21px;
    min-height: 44px;
    min-width: 0;
    gap: 4px;
  }
  #appView .mobile-nav-item.active {
    color: var(--glass-accent);
    background: var(--glass-selected);
    border-color: var(--glass-edge);
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 3px 10px rgba(79, 43, 217, .08);
  }
  #appView .mobile-nav-item small { font-size: 10px; }
  #appView #newAppointmentBtn {
    width: 58px;
    height: 58px;
    right: max(20px, env(safe-area-inset-right, 0px));
    bottom: calc(var(--glass-dock-height) + var(--glass-dock-bottom) + 18px);
    border-radius: 50%;
    box-shadow: 0 10px 26px rgba(79, 43, 217, .28), inset 0 2px 2px rgba(255, 255, 255, .55);
  }
  :root:has(#appView:not(.hidden)) .toast {
    left: 16px;
    right: 16px;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    background: var(--glass-text);
    color: var(--glass-surface);
  }
  :root:has(#appView:not(.hidden)) dialog.modal { border-radius: 24px 24px 0 0; }
}
@media (prefers-reduced-transparency: reduce) {
  #appView :is(.topbar, .sidebar, .mobile-bottom-nav, .agenda-mobile-week, .dashboard-calendar, .segmented) {
    background: var(--glass-pane);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  :root:has(#appView:not(.hidden)) .modal::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  #appView button { transition: none; }
  #appView .btn:hover { transform: none; }
}
@media (forced-colors: active) {
  #appView :is(.topbar, .sidebar, .mobile-bottom-nav, .agenda-mobile-week, .dashboard-calendar, .segmented) {
    background: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  #appView :is(.mobile-nav-item.active, .nav-item.active, .agenda-mobile-day.active, .dashboard-day.active, .segmented button.active, .btn.primary) {
    background: Highlight;
    color: HighlightText;
    border: 1px solid Highlight;
    box-shadow: none;
  }
}

/* Consistent vector icons in desktop/sidebar navigation */
#appView .nav-item .sidebar-nav-icon { width:19px; height:19px; min-width:19px; flex:0 0 19px; display:block; stroke:currentColor; }
#appView .nav-item { gap:12px; }
#appView .nav-item.active .sidebar-nav-icon { stroke-width:2.1; }