/* Studio workspace. Shared visual system for the existing console components. */
html[data-console-theme] {
  --ui-canvas: #000;
  --ui-sidebar: #101316;
  --ui-surface: #15191d;
  --ui-surface-alt: #1b2126;
  --ui-segment: #101418;
  --ui-input: #0d1115;
  --ui-button: #212830;
  --ui-hover: #2a333d;
  --ui-selected: #273315;
  --ui-table-head: #1d242a;
  --ui-border: #303a43;
  --ui-border-strong: #45525e;
  --ui-input-border: #576573;
  --ui-heading: #f4f8fc;
  --ui-text: #e9eff6;
  --ui-muted: #b3c0cd;
  --ui-dim: #a0aebc;
  --ui-placeholder: #95a4b3;
  --ui-accent: #c4f15a;
  --ui-accent-solid: #c4f15a;
  --ui-accent-hover: #d5ff77;
  --ui-accent-soft: #253219;
  --ui-accent-border: #64833f;
  --ui-on-accent: #18210d;
  --ui-focus: #c4f15a48;
  --ui-backdrop: #04070bd6;
  --ui-scrollbar: #55646f;
  --dm-card-radius: 12px;
  --dm-dialog-radius: 16px;
  --dm-space: 16px;
  --dm-window-shadow: 0 22px 72px #0008;
  --dm-sidebar-width: 224px;
  --bg: var(--ui-canvas);
  --bg-card: var(--ui-surface);
  --bg-elevated: var(--ui-surface-alt);
  --bg-hover: var(--ui-hover);
  --border: var(--ui-border);
  --border-light: var(--ui-border-strong);
  --text: var(--ui-text);
  --text-strong: var(--ui-heading);
  --text-muted: var(--ui-muted);
  --text-dim: var(--ui-dim);
  --lime: var(--ui-accent);
  --lime-hover: var(--ui-accent-hover);
  --lime-dim: var(--ui-accent-soft);
  --accent-contrast: var(--ui-on-accent);
}
html:is([data-console-theme="light"], [data-console-theme="windows"]) {
  --ui-canvas: #eef2f6;
  --ui-sidebar: #f7f9fb;
  --ui-surface: #fff;
  --ui-surface-alt: #f0f4f7;
  --ui-segment: #e9eef3;
  --ui-input: #fff;
  --ui-button: #e8edf2;
  --ui-hover: #dfe7ef;
  --ui-selected: #e5efd8;
  --ui-table-head: #edf2f6;
  --ui-border: #ccd5de;
  --ui-border-strong: #9eacb9;
  --ui-input-border: #7b8a98;
  --ui-heading: #18222e;
  --ui-text: #273644;
  --ui-muted: #4b5c6e;
  --ui-dim: #55677a;
  --ui-placeholder: #5c6e80;
  --ui-accent: #3d5d14;
  --ui-accent-soft: #e5efd8;
  --ui-accent-border: #819f62;
  --ui-focus: #51782639;
  --ui-backdrop: #18283990;
  --dm-window-shadow: 0 22px 64px #18283940;
}
html[data-console-theme] body { color-scheme: var(--ui-color-scheme); }

html[data-console-theme] #mainSidebar {
  background: var(--ui-sidebar) !important;
  border-radius: 14px !important;
}
.workspace-brand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  padding: 15px 14px;
  border-bottom: 1px solid var(--ui-border);
}
.workspace-brand img { flex: 0 0 auto; border-radius: 9px; object-fit: contain; }
.workspace-brand strong, .workspace-brand span { display: block; }
.workspace-brand strong { color: var(--ui-heading); font-size: 14px; line-height: 1.25; }
.workspace-brand span { color: var(--ui-muted); font-size: 11px; margin-top: 2px; }
html[data-console-theme] #mainSidebar .sidebar__nav { padding: 7px 8px 14px; }
html[data-console-theme] #mainSidebar .sidebar__btn {
  min-height: 38px;
  padding: 6px 9px;
  gap: 9px;
  border-radius: 8px !important;
}
html[data-console-theme] #mainSidebar .sidebar__btn > .ui-icon {
  flex: 0 0 23px;
  width: 23px !important;
  height: 23px !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-console-theme] #mainSidebar .sidebar__btn[aria-current="page"] {
  background: var(--ui-selected) !important;
  color: var(--ui-heading) !important;
  box-shadow: none !important;
}
html[data-console-theme] #mainSidebar .sidebar__btn[aria-current="page"] > .ui-icon {
  color: var(--ui-accent) !important;
}
html[data-console-theme] #mainSidebar .sidebar__group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}
@media (min-width: 901px) {
  html[data-console-theme] #mainSidebar { width: var(--dm-sidebar-width) !important; }
  html[data-console-theme] .main-content {
    margin-left: calc(var(--dm-sidebar-width) + 36px) !important;
    width: calc(100% - var(--dm-sidebar-width) - 56px) !important;
    padding: 18px 0 32px !important;
  }
}

html[data-console-theme] .screen > .page-header {
  gap: 14px;
  padding: 13px 0 16px !important;
  margin: 0 0 16px !important;
  border-bottom: 1px solid var(--ui-border) !important;
  align-items: flex-end;
}
html[data-console-theme] .screen .page-title {
  font-size: 1.75rem !important;
  font-weight: 680;
  letter-spacing: -.04em;
}
html[data-console-theme] .page-header .page-subtitle { max-width: 68ch; margin-top: 5px; }
html[data-console-theme] .screen :is(.card,.today-panel,.td-card,.works-dash-card,.finance-chart-card,.master-card,.client-card,.service-card,.post-card,.pub-service-card,.settings-card,.work-list-card,.booking-card) {
  border-color: var(--ui-border) !important;
  border-radius: var(--dm-card-radius) !important;
  box-shadow: none !important;
}
html[data-console-theme] .screen :is(.filters,.works-filters,.documents-toolbar,.calendar-toolbar) {
  gap: 8px;
  row-gap: 9px;
}
html[data-console-theme] .screen :is(.finance-tabs,.expenses-tabs,.bk-cat-tabs,.leads-hub-tabs,.commerce-tabs,.calendar-view-switch) {
  background: var(--ui-segment) !important;
  border-color: var(--ui-border) !important;
  border-radius: 9px !important;
}
html[data-console-theme] :is(.screen,.modal) :is([role=tab][aria-selected=true],.finance-tab--active) {
  background: var(--ui-selected) !important;
  color: var(--ui-heading) !important;
}
html[data-console-theme] .btn { border-radius: 8px !important; }
html[data-console-theme] :is(.btn--primary,#todayScreen .btn--primary) { color: var(--ui-on-accent) !important; }
html[data-console-theme] .btn--primary:hover:not(:disabled) { color: var(--ui-on-accent) !important; }
html[data-console-theme] :is(.screen,.modal) :is(input,select,textarea):focus-visible {
  outline: 2px solid var(--ui-accent) !important;
  outline-offset: 2px;
}
html[data-console-theme] :is(.screen,.modal) :is(input,select,textarea) { scroll-margin-block: 10px; }
html[data-console-theme] :is(.screen,.modal) :is(table,.table) th {
  font-size: 11px;
  font-weight: 720;
  letter-spacing: .04em;
}
html[data-console-theme] :is(.screen,.modal) :is(table,.table) tbody tr:focus-within { background: var(--ui-hover); }

html[data-console-theme] .modal { background: var(--ui-backdrop) !important; }
html[data-console-theme] :is(.modal-content,.sheet-content,.drawer-content) {
  border-radius: var(--dm-dialog-radius) !important;
  box-shadow: var(--dm-window-shadow) !important;
  scroll-padding-block: var(--dm-space);
  overscroll-behavior: contain;
}
html[data-console-theme] .modal-content > h3 { font-size: 20px; font-weight: 680; }
html[data-console-theme] .modal-content > .modal-actions {
  margin-top: var(--dm-space);
  padding-top: var(--dm-space);
  border-top: 1px solid var(--ui-border);
}
html[data-console-theme] #loginModal {
  background: linear-gradient(110deg,#080b10f2,#11192399), url('assets/atelier/glass.jpg') center/cover !important;
}
html[data-console-theme] #loginModal .modal-content { border-radius: 20px !important; }
html[data-console-theme] #loginModal .modal-content > h3 { font-size: 24px; }
html[data-console-theme] .admin-booking-alert__panel {
  background: var(--ui-surface);
  border-color: var(--ui-border-strong);
  border-radius: var(--dm-dialog-radius);
  box-shadow: var(--dm-window-shadow);
}

#calendarScreen .cw-tabs { gap: 4px; padding: 4px; width: fit-content; max-width: 100%; border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-segment); }
#calendarScreen .cw-tabs button { padding: 7px 12px; min-height: 36px; border: 1px solid transparent; border-radius: 7px !important; }
#calendarScreen .cw-tabs button[aria-selected="true"] { border-color: var(--ui-accent-border); }
#calendarScreen .cw-live { min-height: 32px; }
#calendarScreen .calendar-month__row { gap: 6px; }
#calendarScreen .calendar-month-day { min-height: 112px; }
#calendarScreen .calendar-month-day__meta,
#calendarScreen .calendar-month-day__free { line-height: 1.35; }
html[data-console-theme] #todayScreen .td-metric { border-radius: var(--dm-card-radius); }
html[data-console-theme] #todayScreen .td-metrics { margin-block: 12px 18px; }
html[data-console-theme] #todayScreen .td-result { background: linear-gradient(140deg,var(--ui-accent-soft),var(--ui-surface)) !important; }

@media (max-width: 768px) {
  html[data-console-theme] .screen > .page-header { align-items: stretch; padding-block: 10px 14px !important; }
  html[data-console-theme] #mainSidebar .sidebar__btn { min-height: 44px; }
  html[data-console-theme] :is(.screen,.modal) .btn:not(.btn--sm) { min-height: 44px; }
  html[data-console-theme] #calendarScreen .cw-tabs { width: 100%; flex-wrap: wrap; }
  html[data-console-theme] #calendarScreen .cw-tabs button { flex: 1 1 auto; min-height: 44px; padding-inline: 8px; }
  html[data-console-theme] .modal:not(#loginModal) > .modal-content {
    max-height: 94dvh;
    border-radius: var(--dm-dialog-radius) var(--dm-dialog-radius) 0 0 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-console-theme] :is(.screen,.modal,.modal-content,.sidebar__btn,.btn) {
    animation: none !important;
    transition: none !important;
  }
}

.workspace-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.workspace-dialog-heading > h3 { margin: 0; width: auto; font-size: 21px; }
.workspace-dialog-close { display: inline-grid; place-items: center; width: 40px; min-height: 40px; padding: 0; flex: 0 0 auto; }
html[data-console-theme] :is(.work-editor-modal,.modal-content) .client-hub-modal__bar {
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-surface-alt);
}
@media (min-width: 901px) {
  html[data-console-theme] #calendarBookingModal > .modal-content { width: min(900px, calc(100vw - 48px)); max-width: none; padding: 18px 22px; }
  #calendarBookingForm {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "section section" "service client" "time client" "summary summary" "actions actions";
    align-items: start;
    gap: 12px 16px;
  }
  #calendarBookingForm > .calendar-booking-form__section-row { grid-area: section; }
  #calendarBookingForm > .calendar-booking-step:nth-of-type(1) { grid-area: service; }
  #calendarBookingForm > .calendar-booking-step:nth-of-type(2) { grid-area: time; }
  #calendarBookingForm > .calendar-booking-step:nth-of-type(3) { grid-area: client; }
  #calendarBookingForm > .calendar-booking-step { min-width: 0; margin: 0; padding: 8px 12px 10px; }
  #calBkSummary { grid-area: summary; }
  #calendarBookingForm > .modal-actions { grid-area: actions; margin: 0; padding-top: 12px; border-top: 1px solid var(--ui-border); }
}

.calendar-booking-step { border-color: var(--ui-border); background: var(--ui-surface-alt); }
html:is([data-console-theme="light"], [data-console-theme="windows"]) .calendar-section-badge--wash {
  color: #145375; background: #e5f4ff; border-color: #90b8d0;
}
html:is([data-console-theme="light"], [data-console-theme="windows"]) .calendar-section-badge--detailing {
  color: #50377b; background: #efe9fa; border-color: #b6a7d2;
}
html:is([data-console-theme="light"], [data-console-theme="windows"]) .calendar-section-badge--commerce {
  color: #65470b; background: #fcf3dd; border-color: #c6ad77;
}

html[data-console-theme] ::selection {
  color: var(--ui-on-accent);
  background: var(--ui-accent-solid);
}
html[data-console-theme] :is(input, textarea) { caret-color: var(--ui-accent); }
html[data-console-theme] .screen :is(.client-hub-table-wrap,.wh-table-wrap,.calendar-board) {
  scrollbar-color: var(--ui-scrollbar) transparent;
  overscroll-behavior-inline: contain;
}
html[data-console-theme] .screen .empty-state {
  padding: 24px 16px;
  color: var(--ui-muted);
}
html[data-console-theme] :is(.screen,.modal) p.error[role="alert"] {
  color: var(--ui-danger);
  overflow-wrap: anywhere;
}
@media (max-width: 768px) {
  html[data-console-theme] .screen .page-title { font-size: 1.5rem !important; }
}