/* Webbdin Flow v0.8.1 — internal workspace dark-grey correction.
   Scope is only the signed-in .shell. Public landing/booking themes remain separate. */
:root{--flow-orange:#FF6A2F;--flow-orange-soft:#FF9867;--flow-orange-deep:#CF4614}

body:has(.shell){
  color-scheme:dark;
  background:#17191D;
  color:#F4F1EC;
}
body:has(.shell) .ambient{
  opacity:1;
  background:
    radial-gradient(circle at 84% 8%,rgba(255,106,47,.105),transparent 28%),
    radial-gradient(circle at 12% 22%,rgba(67,84,101,.16),transparent 33%),
    linear-gradient(135deg,#17191D 0%,#1B1D21 48%,#202226 100%);
}
body:has(.shell) .ambient:after{
  background:
    linear-gradient(120deg,transparent 0 56%,rgba(255,106,47,.035) 56% 62%,transparent 62%),
    radial-gradient(circle at 50% 100%,rgba(255,255,255,.025),transparent 44%);
}

.shell{
  --accent:#FF6A2F;
  --accent-rgb:255,106,47;
  --ink:#F5F2EC;
  --muted:#B7BBC2;
  --dim:#8E949E;
  --bg:#17191D;
  --panel:#22252A;
  --line:rgba(255,255,255,.085);
  --line-hi:rgba(255,255,255,.16);
  --success:#8FD6AB;
  --danger:#FF9B8C;
  color:var(--ink);
  background:transparent;
}
.shell .brand{color:#F7F4EF}.shell .brand b,.shell .brand-mark{color:var(--accent)}
.shell .sidebar{
  background:linear-gradient(180deg,rgba(33,36,41,.98),rgba(27,29,33,.97));
  border-color:rgba(255,255,255,.085);
  box-shadow:18px 0 45px rgba(0,0,0,.19),inset -1px 0 0 rgba(255,255,255,.025);
  backdrop-filter:blur(24px);
}
.shell .company-chip,.shell .profile-block{border-color:rgba(255,255,255,.075)}
.shell .company-chip strong,.shell .profile-block strong{color:#F5F2EC}
.shell .company-chip small,.shell .profile-block small{color:#949AA4}
.shell .nav-link{color:#C6CAD0}
.shell .nav-link .icon{color:#AEB4BC}
.shell .nav-link:hover{color:#fff;background:rgba(255,255,255,.045)}
.shell .nav-link.active{
  color:#fff;
  background:linear-gradient(100deg,rgba(255,106,47,.13),rgba(255,106,47,.025));
  border-color:rgba(255,106,47,.38);
  box-shadow:inset 3px 0 0 var(--accent),0 8px 22px rgba(0,0,0,.09);
}
.shell .nav-link.active .icon{color:var(--accent)}

.shell .topbar{border-color:rgba(255,255,255,.07)}
.shell .breadcrumb{color:#9299A4}.shell .breadcrumb span{color:#E8E5E0}
.shell .mode-pill{color:#AEB4BC}.shell .mode-pill i{background:#56C889;box-shadow:0 0 10px rgba(86,200,137,.35)}
.shell .global-search,.shell .searchbox{
  background:#22252A;
  border-color:rgba(255,255,255,.085);
  color:#AEB4BC;
  box-shadow:0 4px 18px rgba(0,0,0,.12);
}
.shell kbd{border-color:rgba(255,255,255,.09);background:#2A2D32;color:#9EA4AD}
.shell .icon-btn{background:#22252A;border-color:rgba(255,255,255,.085);color:#DFE2E5;box-shadow:0 5px 16px rgba(0,0,0,.13)}
.shell .icon-btn:hover{background:#2A2D32;border-color:rgba(255,106,47,.28)}
.shell .avatar{color:#FF9B70;background:linear-gradient(145deg,#3A2B27,#27292E);border-color:rgba(255,106,47,.25)}
.shell .monogram{color:#FF9B70;background:linear-gradient(145deg,#362722,#24262B);border-color:rgba(255,106,47,.30)}

.shell .page-header h1,.shell h1,.shell h2,.shell h3,.shell strong{color:#F5F2EC}
.shell p,.shell .muted{color:#B7BBC2}
.shell .eyebrow{color:#A8AEB7}
.shell .page-header h1 em,.shell .accent{color:var(--accent)!important}

.shell .glass,.shell .panel,.shell .v2-metric,.shell .metric,.shell .workspace-launcher,.shell .summary-strip,
.shell .service-card,.shell .person-card,.shell .customer-card,.shell .automation-inspector,.shell .journey-canvas,
.shell .booking-row,.shell .review-card,.shell .statistics-chart,.shell .status-distribution,.shell .service-statistics,
.shell .measured-insights,.shell .billing-summary,.shell .pricing-card{
  background:linear-gradient(150deg,rgba(255,255,255,.025),transparent 35%),#22252A!important;
  border-color:rgba(255,255,255,.08)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.035)!important;
  color:#F4F1EC;
}
.shell .workspace-launcher{
  background:linear-gradient(110deg,#24272C,#202328 58%,#252321)!important;
  border-color:rgba(255,106,47,.12)!important;
}
.shell .workspace-launcher:before{background:linear-gradient(145deg,rgba(255,255,255,.045),transparent 48%)}
.shell .tactile-icon,.shell .app-tile{
  color:var(--accent);
  background:linear-gradient(145deg,#2C2F34,#1B1D21)!important;
  border-color:rgba(255,106,47,.26)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 18px rgba(0,0,0,.25),0 0 16px rgba(255,106,47,.055)!important;
}
.shell .tactile-icon:before,.shell .app-tile:before{background:radial-gradient(ellipse at 35% 15%,rgba(255,106,47,.13),transparent 68%)}
.shell .launcher-button{color:#E8E5E0}.shell .workspace-command{border-color:rgba(255,255,255,.075)}

.shell .v2-metric .metric-top,.shell .metric-top{color:#A8AEB7}
.shell .v2-metric strong,.shell .metric strong{color:#F6F3EE}
.shell .v2-metric small,.shell .metric small{color:#8F96A1!important}
.shell .metric-icon{background:#2C2928;color:var(--accent)}

.shell .btn{
  color:#EDEAE5;
  border-color:rgba(255,255,255,.13);
  background:linear-gradient(180deg,#2A2D32,#202328);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 5px 15px rgba(0,0,0,.14);
}
.shell .btn:hover{background:#2D3035;border-color:rgba(255,106,47,.34)}
.shell .btn.primary,.shell .dock-add{
  background:linear-gradient(145deg,#FF9A68 0%,#FF6A2F 58%,#D94A14 100%)!important;
  color:#fff!important;border-color:#FF8652!important;
  box-shadow:inset 0 2px 1px rgba(255,255,255,.34),0 8px 22px rgba(255,106,47,.22)!important;
}
.shell .tag,.shell .status{background:#292C31;border-color:rgba(255,255,255,.085);color:#B9BEC6}
.shell .status.confirmed,.shell .status.completed{color:#A4E3BB;background:#1F2D28;border-color:#325444}

.shell input:not([type=checkbox]):not([type=color]),.shell select,.shell textarea{
  background:#181A1E;color:#F1EEE9;border-color:rgba(255,255,255,.10)
}
.shell input::placeholder,.shell textarea::placeholder{color:#777F8A}
.shell select option{background:#202328;color:#F1EEE9}
.shell .field span{color:#C1C5CB}.shell .field small{color:#8E959F}
.shell input[type=color]{background:#181A1E;border-color:rgba(255,255,255,.10)}

.shell .appointment,.shell .choice,.shell .booking-row{background:#25282D!important;border-color:rgba(255,255,255,.075)!important}
.shell .appointment:hover,.shell .choice:hover,.shell .booking-row:hover{background:#2A2D32!important}
.shell .appointment time{color:#E4E1DC}.shell .appointment small{color:#949BA5}
.shell .divider{background:rgba(255,255,255,.075)}
.shell .mini-stat{border-color:rgba(255,255,255,.075)}.shell .mini-stat span{color:#A2A8B1}
.shell .chart-labels,.shell .page-note{color:#858C97}.shell .chart-interactive,.shell .chart-canvas{color:#B6BBC3}
.shell .stars{color:var(--accent)}.shell .quote{color:#F0EDE8}
.shell .note{background:#252321;border-color:rgba(255,106,47,.18);color:#B7BBC2}.shell .note .icon{color:var(--accent)}
.shell .segmented{background:#191B1F;border-color:rgba(255,255,255,.075)}
.shell .segmented button{color:#949BA5}.shell .segmented button.active{background:#2A2D32;color:#F2EFEA;box-shadow:0 3px 8px rgba(0,0,0,.18)}
.shell .data-table th{color:#868E99;border-color:rgba(255,255,255,.075)}
.shell .data-table td{border-color:rgba(255,255,255,.055)}.shell .data-table tbody tr:hover{background:#26292E}

/* Calendar: remove the green slab and white canvas. */
.shell .v2-calendar,.shell .calendar-board,.shell .calendar-agenda,.shell .cal-day-column,.shell .calendar-grid{
  background:#1F2226!important;border-color:rgba(255,255,255,.09)!important;
  box-shadow:0 16px 35px rgba(0,0,0,.20)!important;
}
.shell .calendar-scroll{scrollbar-color:#525760 #1A1C20}
.shell .v2-cal-head{
  background:linear-gradient(180deg,#292C31,#25282D)!important;
  border-bottom-color:rgba(255,106,47,.16)!important;
  box-shadow:0 5px 18px rgba(0,0,0,.18)!important;
}
.shell .v2-cal-head>div{border-right-color:rgba(255,255,255,.065)!important}
.shell .v2-cal-head strong{color:#F1EEE9}.shell .v2-cal-head small{color:#9098A2}
.shell .cal-timezone{color:#9299A3}
.shell .v2-time-column{background:#25282D!important;border-right-color:rgba(255,255,255,.07)!important}
.shell .v2-time-column>span{color:#9299A3}
.shell .v2-cal-column{
  border-right-color:rgba(255,255,255,.055)!important;
  background:
    repeating-linear-gradient(180deg,transparent 0,transparent calc(var(--hour-height) - 1px),rgba(255,255,255,.065) calc(var(--hour-height) - 1px),rgba(255,255,255,.065) var(--hour-height)),
    repeating-linear-gradient(180deg,transparent 0,transparent calc(var(--hour-height)/2 - 1px),rgba(255,255,255,.025) calc(var(--hour-height)/2 - 1px),rgba(255,255,255,.025) calc(var(--hour-height)/2)),
    #1F2226!important;
}
.shell .v2-cal-event{
  color:#F6F3EE!important;
  background:linear-gradient(135deg,#34373D,#292C31)!important;
  border-color:rgba(255,255,255,.10)!important;
  border-left:3px solid var(--event-color)!important;
  box-shadow:0 8px 20px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
.shell .v2-cal-event strong{color:#F6F3EE!important}
.shell .v2-cal-event .event-time,.shell .v2-cal-event .event-service{color:#C0C5CC!important}
.shell .v2-cal-event:hover{filter:brightness(1.08);box-shadow:0 10px 24px rgba(0,0,0,.28)!important}
.shell .filter-pill{background:#22252A;color:#B9BEC6;border-color:rgba(255,255,255,.085)}
.shell .filter-pill.active{background:#2C2928;color:#fff;border-color:rgba(255,106,47,.35);box-shadow:inset 0 0 0 1px rgba(255,106,47,.08)}
.shell .calendar-total{color:#969DA7}

/* Settings / brand editor: readable dark workspace while the public-site preview keeps its selected theme. */
.shell .brand-settings-grid>.stack>form,.shell .brand-settings-grid>.stack>.panel,.shell .brand-preview{
  background:linear-gradient(145deg,#24272C,#202328)!important;
  border-color:rgba(255,255,255,.085)!important;
}
.shell .brand-settings-grid legend,.shell .brand-settings-grid h2,.shell .brand-settings-grid h3{color:#F5F2EC!important}
.shell .brand-settings-grid fieldset{border-color:rgba(255,106,47,.18)!important;background:#1D1F23!important}
.shell .brand-settings-grid .theme-card,.shell .brand-settings-grid [class*="theme-"]{
  color:inherit;
}
.shell .brand-preview .preview-tabs{background:#181A1E;border-color:rgba(255,255,255,.075)}
.shell .brand-preview .preview-tabs button{color:#AEB4BC}.shell .brand-preview .preview-tabs button.active{background:#2A2D32;color:#fff}
.shell .connection{border-color:rgba(255,255,255,.075)!important}.shell .connection p{color:#969DA7}

/* Automation / reviews / statistics are kept in the same dark-grey language. */
.shell .journey-node{background:#25282D!important;border-color:rgba(255,255,255,.075)!important;color:#F4F1EC}
.shell .journey-node.selected{border-color:rgba(255,106,47,.45)!important;box-shadow:0 10px 24px rgba(0,0,0,.2),0 0 0 1px rgba(255,106,47,.08)!important}
.shell .journey-track:before{background:rgba(255,106,47,.20)}
.shell .journey-copy small,.shell .journey-channel{color:#9299A3}
.shell .message-device{background:linear-gradient(160deg,#25282D,#1B1D21);border-color:rgba(255,255,255,.095);box-shadow:0 22px 55px rgba(0,0,0,.28)}
.shell .message-bubble{background:#3A2A25;color:#F2EEE8}.shell .message-preview-label{color:#9299A3}

/* Mobile preview of the workspace itself should also use dark grey, not green. */
.shell.device-preview{border-color:rgba(255,255,255,.12);box-shadow:0 28px 90px rgba(0,0,0,.42),inset 0 0 0 5px #30343A;background:#1C1E22}
.device-preview .mobile-dock{border-color:rgba(255,255,255,.10);background:rgba(34,37,42,.95);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 32px rgba(0,0,0,.28)}
.device-preview .mobile-hero-widget{border-color:rgba(255,106,47,.16);background:linear-gradient(120deg,#282B30,#242327)}
.device-preview .widget-date{color:#FF9B70}

body:has(.shell) dialog{background:linear-gradient(145deg,#272A2F,#1D1F23);color:#F5F2EC;border-color:rgba(255,255,255,.10);box-shadow:0 30px 90px rgba(0,0,0,.46)}
body:has(.shell) dialog .modal-title{border-color:rgba(255,255,255,.075)}
body:has(.shell) dialog input:not([type=checkbox]):not([type=color]),body:has(.shell) dialog select,body:has(.shell) dialog textarea{background:#181A1E;color:#F5F2EC;border-color:rgba(255,255,255,.10)}

/* High contrast should remain dark instead of reverting to the legacy green palette. */
html[data-contrast=high] .shell{--muted:#E1E3E6;--dim:#C8CDD4;--line:rgba(255,255,255,.28);--panel:#202328}
html[data-contrast=high] .shell .glass,html[data-contrast=high] .shell .sidebar,html[data-contrast=high] .shell .v2-metric{background:#202328!important;backdrop-filter:none}
@media(prefers-reduced-transparency:reduce){.shell .glass,.shell .sidebar,.shell .mobile-dock{background:#22252A!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.shell .glass,.shell .sidebar,body:has(.shell) dialog,.shell .mobile-dock{background:#22252A!important}}
/* Dashboard next-visit card must follow the dark workspace too. */
.shell .next-visit{
  background:linear-gradient(135deg,#292C31,#24272C)!important;
  border-color:rgba(255,106,47,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 8px 20px rgba(0,0,0,.16)!important;
  color:#F4F1EC!important;
}
.shell .next-label{color:#AAB0B9!important}.shell .next-time{color:#FF7E48!important}
.shell .next-visit>strong{color:#F4F1EC!important}.shell .next-visit>small{color:#949BA5!important}
/* The brand-preview simulates the customer's public site, so it must keep the customer's own theme. */
.shell .brand-device .monogram{
  color:var(--accent)!important;
  background:linear-gradient(145deg,rgba(var(--accent-rgb),.20),rgba(var(--accent-rgb),.06))!important;
  border-color:rgba(var(--accent-rgb),.38)!important;
}
.shell .brand-device .btn.primary{
  background:linear-gradient(145deg,var(--accent-top) 0%,var(--accent) 56%,var(--accent-bottom) 100%)!important;
  color:var(--button-ink)!important;
  border-color:color-mix(in srgb,var(--accent) 70%,white)!important;
  box-shadow:inset 0 2px 1px rgba(255,255,255,.34),0 7px 18px rgba(var(--accent-rgb),.22)!important;
}
.shell .brand-device .service-mini-icon{color:var(--accent)!important}