/* ============================================================
   REMMI Desktop v2 · Clean Professional Overlay
   Loads AFTER desktop.css — overrides critical surfaces to
   deliver a flatter, sharper, more professional SaaS look.
   Applies only to ≥1024px. Mobile is untouched.
   ============================================================ */

@media (min-width: 1024px) {
  /* ── Design tokens override ──────────────────────────── */
  :root {
    --v2-sidebar-w:        248px;
    --v2-topbar-h:         64px;
    --v2-content-max:      1240px;
    --v2-content-pad:      32px;

    --v2-bg:               #f7f3ec;
    --v2-bg-subtle:        #efe9df;
    --v2-surface:          #ffffff;
    --v2-surface-hover:    #fbf7f1;
    --v2-surface-muted:    #f9f5ef;

    --v2-border:           #ebe3d6;
    --v2-border-strong:    #ddd1be;
    --v2-border-focus:     #e05a25;

    --v2-text:             #1a1410;
    --v2-text-secondary:   #5a4939;
    --v2-text-muted:       #8f7c69;
    --v2-text-on-accent:   #ffffff;

    --v2-accent:           #e05a25;
    --v2-accent-hover:     #cc4e1c;
    --v2-accent-soft:      #fdeee5;
    --v2-accent-border:    #f6c9b0;

    --v2-success:          #1e7845;
    --v2-success-soft:     #e8f7ee;
    --v2-warning:          #b87d10;
    --v2-warning-soft:     #fdf4df;
    --v2-danger:           #c42a14;
    --v2-danger-soft:      #fde9e6;

    --v2-shadow-xs:        0 1px 2px rgba(28,20,16,.04);
    --v2-shadow-sm:        0 1px 3px rgba(28,20,16,.05), 0 1px 2px rgba(28,20,16,.03);
    --v2-shadow-md:        0 4px 12px rgba(28,20,16,.06), 0 1px 3px rgba(28,20,16,.04);
    --v2-shadow-lg:        0 10px 24px rgba(28,20,16,.08), 0 2px 4px rgba(28,20,16,.04);
    --v2-shadow-focus:     0 0 0 3px rgba(224,90,37,.18);

    --v2-radius-xs:        4px;
    --v2-radius-sm:        6px;
    --v2-radius-md:        10px;
    --v2-radius-lg:        14px;

    --v2-ease:             cubic-bezier(.2,.7,.3,1);
    --v2-dur:              .16s;
    --v2-dur-lg:           .24s;
  }

  /* ══════════════════════════════════════════════════════════
     1. FOUNDATION — background, typography base
     ══════════════════════════════════════════════════════════ */
  html,
  body {
    background: var(--v2-bg) !important;
    color:      var(--v2-text);
  }

  body {
    font-feature-settings: "cv11", "ss01", "ss03";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Tabular nums where numbers matter */
  .dashboard-booking-price,
  .dashboard-booking-time-pill,
  .analytics-metric-value,
  .analytics-revenue-value,
  .analytics-service-count,
  td, th,
  .price, .amount, .booking-time,
  input[type="time"], input[type="date"], input[type="number"] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
  }


  /* ══════════════════════════════════════════════════════════
     2. APP SHELL — grid with sidebar + topbar + content
     ══════════════════════════════════════════════════════════ */
  .app-shell {
    background: var(--v2-bg) !important;
    display:    grid;
    grid-template-columns: 1fr;
    grid-template-rows:    var(--v2-topbar-h) 1fr;
    width:      calc(100vw - var(--v2-sidebar-w)) !important;
    margin-left: var(--v2-sidebar-w) !important;
    min-height: 100dvh;
  }

  /* ══════════════════════════════════════════════════════════
     3. SIDEBAR — flat, clean, crisp active state
     ══════════════════════════════════════════════════════════ */
  .bottom-nav {
    width:          var(--v2-sidebar-w) !important;
    background:     var(--v2-surface) !important;
    border-right:   1px solid var(--v2-border) !important;
    box-shadow:     none !important;
    padding:        18px 12px 16px !important;
    gap:            1px !important;
  }

  /* Kill old ::before brand (we'll use injected logo-block) */
  .bottom-nav::before { display: none !important; }

  /* Logo block from sidebar-desktop.js */
  .sidebar-logo-block {
    display:       flex !important;
    align-items:   center;
    gap:           10px;
    padding:       6px 10px 16px !important;
    margin:        0 0 8px 0 !important;
    border-bottom: 1px solid var(--v2-border);
  }
  .sidebar-logo-mark {
    width:         32px !important;
    height:        32px !important;
    min-width:     32px;
    border-radius: 8px !important;
    background:    linear-gradient(135deg, var(--v2-accent) 0%, #ff7740 100%) !important;
    color:         #fff !important;
    font-weight:   800 !important;
    font-size:     16px !important;
    display:       grid;
    place-items:   center;
    box-shadow:    0 2px 6px rgba(224,90,37,.3) !important;
    font-family:   var(--font-display), var(--font-body);
  }
  .sidebar-logo-texts { line-height: 1.15; }
  .sidebar-logo-name {
    font-weight:    700 !important;
    font-size:      15px !important;
    letter-spacing: -.02em !important;
    color:          var(--v2-text) !important;
    background:     none !important;
    -webkit-text-fill-color: initial !important;
  }
  .sidebar-logo-sub {
    font-size:  10px !important;
    font-weight: 500 !important;
    color:      var(--v2-text-muted) !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-top: 1px;
  }

  /* Section labels */
  .sidebar-section-label {
    padding:        14px 12px 6px !important;
    font-size:      10px !important;
    font-weight:    600 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    color:          var(--v2-text-muted) !important;
  }

  /* Nav buttons */
  .bottom-nav .bottom-nav-btn {
    min-height:      38px !important;
    padding:         0 12px !important;
    border-radius:   var(--v2-radius-sm) !important;
    font-size:       14px !important;
    font-weight:     500 !important;
    color:           var(--v2-text-secondary) !important;
    gap:             10px !important;
    transition:      background-color var(--v2-dur) var(--v2-ease),
                     color var(--v2-dur) var(--v2-ease);
  }
  .bottom-nav .bottom-nav-btn:hover {
    background: var(--v2-surface-muted) !important;
    color:      var(--v2-text) !important;
  }
  .bottom-nav .bottom-nav-btn.active {
    background:  var(--v2-accent-soft) !important;
    color:       var(--v2-accent) !important;
    font-weight: 600 !important;
  }
  .bottom-nav .bottom-nav-btn.active::before {
    left:   -6px !important;
    top:    6px !important;
    bottom: 6px !important;
    width:  3px !important;
    background:    var(--v2-accent) !important;
    box-shadow:    none !important;
    border-radius: 0 3px 3px 0 !important;
  }
  .bottom-nav-icon, .bottom-nav-icon-svg {
    width:  18px !important;
    height: 18px !important;
    opacity: .85;
  }
  .bottom-nav .bottom-nav-btn.active .bottom-nav-icon-svg {
    opacity: 1;
  }
  .bottom-nav-label { font-size: 14px !important; }

  /* User widget */
  .sidebar-user-widget {
    margin:     auto 0 0 0 !important;
    padding:    10px 10px !important;
    border:     1px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-md) !important;
    background: var(--v2-surface) !important;
    gap:        10px !important;
    box-shadow: var(--v2-shadow-xs);
    transition: background var(--v2-dur) var(--v2-ease),
                border-color var(--v2-dur) var(--v2-ease);
  }
  .sidebar-user-widget:hover {
    background:   var(--v2-surface-muted) !important;
    border-color: var(--v2-border-strong) !important;
  }
  .sidebar-user-widget:focus-visible {
    outline:        2px solid var(--v2-accent) !important;
    outline-offset: 2px !important;
    box-shadow:     var(--v2-shadow-focus) !important;
  }
  .sidebar-user-avatar {
    width:      32px !important;
    height:     32px !important;
    min-width:  32px;
    font-size:  12px !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, var(--v2-accent) 0%, #ff7740 100%) !important;
    color:      #fff !important;
    font-weight: 700 !important;
    display:    grid;
    place-items: center;
  }
  .sidebar-user-name {
    font-size:   13px !important;
    font-weight: 600 !important;
    color:       var(--v2-text) !important;
  }
  .sidebar-user-role {
    font-size: 11px !important;
    color:     var(--v2-text-muted) !important;
    margin-top: 1px !important;
  }


  /* ══════════════════════════════════════════════════════════
     4. TOPBAR — sticky, clean (injected via JS)
     ══════════════════════════════════════════════════════════ */
  .v2-topbar {
    position:       sticky;
    top:            0;
    z-index:        30;
    height:         var(--v2-topbar-h);
    background:     rgba(247,243,236,.88);
    backdrop-filter: saturate(1.5) blur(10px);
    -webkit-backdrop-filter: saturate(1.5) blur(10px);
    border-bottom:  1px solid var(--v2-border);
    display:        flex;
    align-items:    center;
    padding:        0 var(--v2-content-pad);
    gap:            16px;
  }
  .v2-topbar-titles {
    flex: 1;
    min-width: 0;
  }
  .v2-topbar-title {
    font-size:      17px;
    font-weight:    600;
    color:          var(--v2-text);
    letter-spacing: -.015em;
    line-height:    1.2;
    margin:         0;
    overflow:       hidden;
    text-overflow:  ellipsis;
    white-space:    nowrap;
  }
  .v2-topbar-subtitle {
    font-size:   12px;
    color:       var(--v2-text-muted);
    line-height: 1.3;
    margin:      2px 0 0 0;
  }
  .v2-topbar-actions {
    display:     flex;
    align-items: center;
    gap:         8px;
  }

  /* Legacy header — hide if topbar is injected */
  body.v2-has-topbar #app-header,
  body.v2-has-topbar .header-wrap {
    display: none !important;
  }


  /* ══════════════════════════════════════════════════════════
     5. CONTENT — centered container
     ══════════════════════════════════════════════════════════ */
  #app-content.page-content,
  .page-content {
    max-width:  var(--v2-content-max) !important;
    width:      100%;
    margin:     0 auto !important;
    padding:    28px var(--v2-content-pad) 64px !important;
    background: transparent !important;
  }


  /* ══════════════════════════════════════════════════════════
     6. CARDS — flat, clean
     ══════════════════════════════════════════════════════════ */
  .card {
    background:    var(--v2-surface) !important;
    border:        1px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-lg) !important;
    box-shadow:    var(--v2-shadow-sm) !important;
    padding:       24px !important;
    transition:    border-color var(--v2-dur) var(--v2-ease),
                   box-shadow var(--v2-dur) var(--v2-ease);
  }
  .card:hover {
    border-color: var(--v2-border-strong) !important;
  }

  /* Page titles */
  .page-title,
  h1.page-title,
  h2.page-title,
  h3.page-title {
    font-size:      20px !important;
    font-weight:    600 !important;
    color:          var(--v2-text) !important;
    letter-spacing: -.015em;
    margin:         0 0 4px 0 !important;
  }

  .helper-text {
    color:     var(--v2-text-muted) !important;
    font-size: 13px !important;
    line-height: 1.5;
  }


  /* ══════════════════════════════════════════════════════════
     7. BUTTONS — flatter, crisper
     ══════════════════════════════════════════════════════════ */
  .btn {
    height:          38px !important;
    padding:         0 16px !important;
    border-radius:   var(--v2-radius-sm) !important;
    font-size:       14px !important;
    font-weight:     500 !important;
    letter-spacing:  -.005em !important;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    border:          1px solid transparent !important;
    transition:      background var(--v2-dur) var(--v2-ease),
                     border-color var(--v2-dur) var(--v2-ease),
                     color var(--v2-dur) var(--v2-ease),
                     box-shadow var(--v2-dur) var(--v2-ease);
    cursor:          pointer;
  }
  .btn-sm {
    height:   32px !important;
    padding:  0 12px !important;
    font-size: 13px !important;
  }
  .btn:focus-visible {
    outline:    none !important;
    box-shadow: var(--v2-shadow-focus) !important;
  }

  .btn-primary {
    background:   var(--v2-accent) !important;
    color:        #fff !important;
    border-color: var(--v2-accent) !important;
    box-shadow:   0 1px 2px rgba(224,90,37,.25) !important;
  }
  .btn-primary:hover {
    background:   var(--v2-accent-hover) !important;
    border-color: var(--v2-accent-hover) !important;
    box-shadow:   0 2px 6px rgba(224,90,37,.35) !important;
  }
  .btn-primary:active {
    background: #b8441a !important;
    box-shadow: 0 1px 2px rgba(224,90,37,.25) !important;
  }

  .btn-ghost {
    background:   var(--v2-surface) !important;
    color:        var(--v2-text) !important;
    border-color: var(--v2-border) !important;
    box-shadow:   var(--v2-shadow-xs) !important;
  }
  .btn-ghost:hover {
    background:   var(--v2-surface-muted) !important;
    border-color: var(--v2-border-strong) !important;
  }

  .btn-danger {
    background:   var(--v2-danger) !important;
    color:        #fff !important;
    border-color: var(--v2-danger) !important;
  }
  .btn-danger:hover {
    background:   #a8200d !important;
    border-color: #a8200d !important;
  }

  .btn[disabled],
  .btn:disabled {
    opacity: .5 !important;
    cursor:  not-allowed !important;
  }


  /* ══════════════════════════════════════════════════════════
     8. FORMS — clean, readable
     ══════════════════════════════════════════════════════════ */
  .field {
    display:       flex;
    flex-direction: column;
    gap:           6px;
  }
  .field label {
    font-size:    12px !important;
    font-weight:  500 !important;
    color:        var(--v2-text-secondary) !important;
    letter-spacing: -.005em;
  }

  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  input[type="time"],
  input[type="date"],
  input[type="url"],
  input:not([type]),
  select,
  textarea {
    background:    var(--v2-surface) !important;
    border:        1px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-sm) !important;
    padding:       0 12px !important;
    height:        38px !important;
    font-size:     14px !important;
    color:         var(--v2-text) !important;
    transition:    border-color var(--v2-dur) var(--v2-ease),
                   box-shadow var(--v2-dur) var(--v2-ease),
                   background var(--v2-dur) var(--v2-ease);
  }
  textarea {
    height:    auto !important;
    min-height: 80px !important;
    padding:   10px 12px !important;
    line-height: 1.5;
    resize:    vertical;
  }
  input::placeholder, textarea::placeholder {
    color:   var(--v2-text-muted) !important;
    opacity: 1;
  }
  input:hover, select:hover, textarea:hover {
    border-color: var(--v2-border-strong) !important;
  }
  input:focus, select:focus, textarea:focus {
    outline:      none !important;
    border-color: var(--v2-accent) !important;
    box-shadow:   var(--v2-shadow-focus) !important;
    background:   var(--v2-surface) !important;
  }

  /* Checkboxes / radios */
  input[type="checkbox"],
  input[type="radio"] {
    accent-color: var(--v2-accent);
    width:        16px !important;
    height:       16px !important;
    cursor:       pointer;
  }


  /* ══════════════════════════════════════════════════════════
     9. STACK / ROW utility updates
     ══════════════════════════════════════════════════════════ */
  .stack { gap: 16px !important; }
  .row   { gap: 8px !important; }


  /* ══════════════════════════════════════════════════════════
     10. DASHBOARD
     ══════════════════════════════════════════════════════════ */
  /* Booking cards */
  .dashboard-booking-card {
    padding:        16px 18px !important;
    border-radius:  var(--v2-radius-md) !important;
    border:         1px solid var(--v2-border) !important;
    box-shadow:     var(--v2-shadow-xs) !important;
    gap:            12px !important;
  }
  .dashboard-booking-card:hover {
    border-color: var(--v2-border-strong) !important;
    box-shadow:   var(--v2-shadow-sm) !important;
  }
  .dashboard-booking-client {
    font-size:   15px !important;
    font-weight: 600 !important;
    color:       var(--v2-text) !important;
    letter-spacing: -.01em;
  }
  .dashboard-booking-service {
    font-size: 13px !important;
    color:     var(--v2-text-secondary) !important;
  }
  .dashboard-booking-time-pill {
    font-size:     12px !important;
    font-weight:   600 !important;
    padding:       3px 8px !important;
    border-radius: var(--v2-radius-xs) !important;
    background:    var(--v2-accent-soft) !important;
    color:         var(--v2-accent) !important;
    border:        1px solid var(--v2-accent-border) !important;
  }
  .dashboard-booking-price {
    font-size:   15px !important;
    font-weight: 700 !important;
    color:       var(--v2-text) !important;
  }
  .dashboard-booking-meta { gap: 10px !important; flex-wrap: wrap; }
  .dashboard-booking-badges { gap: 6px !important; flex-wrap: wrap; }

  /* Status badges — make them clean pills */
  [class*="booking-status"],
  [class*="payment-status"],
  .dashboard-booking-status,
  .dashboard-booking-payment-status {
    font-size:      11px !important;
    font-weight:    600 !important;
    padding:        3px 8px !important;
    border-radius:  var(--v2-radius-xs) !important;
    letter-spacing: .01em;
    display:        inline-flex;
    align-items:    center;
    gap:            4px;
    border:         1px solid transparent;
  }
  .hcb-confirmed {
    font-size:     11px !important;
    padding:       3px 8px !important;
    border-radius: var(--v2-radius-xs) !important;
    background:    var(--v2-success-soft) !important;
    color:         var(--v2-success) !important;
    border:        1px solid #c5e8d1 !important;
  }

  /* Calendar cells */
  .calendar-cell {
    border-radius: var(--v2-radius-sm) !important;
    border:        1px solid var(--v2-border) !important;
    background:    var(--v2-surface) !important;
    transition:    all var(--v2-dur) var(--v2-ease);
  }
  .calendar-cell:hover {
    border-color: var(--v2-accent-border) !important;
    background:   var(--v2-accent-soft) !important;
  }
  .calendar-cell-active {
    border-color: var(--v2-accent) !important;
    background:   var(--v2-accent-soft) !important;
    color:        var(--v2-accent) !important;
  }
  .calendar-cell-past { opacity: .5; }

  /* Week-day chips */
  .week-day-chip {
    border-radius: var(--v2-radius-md) !important;
    border:        1px solid var(--v2-border) !important;
    background:    var(--v2-surface) !important;
  }
  .week-day-chip:hover {
    border-color: var(--v2-border-strong) !important;
  }
  .week-day-chip-active {
    border-color: var(--v2-accent) !important;
    background:   var(--v2-accent-soft) !important;
    color:        var(--v2-accent) !important;
  }

  /* Service cards in "new booking" modal */
  .dashboard-service-card {
    border-radius: var(--v2-radius-md) !important;
    border:        1px solid var(--v2-border) !important;
    background:    var(--v2-surface) !important;
    transition:    all var(--v2-dur) var(--v2-ease);
  }
  .dashboard-service-card:hover {
    border-color: var(--v2-border-strong) !important;
  }
  .dashboard-service-card.is-active {
    border-color: var(--v2-accent) !important;
    background:   var(--v2-accent-soft) !important;
  }


  /* ══════════════════════════════════════════════════════════
     11. CLIENTS
     ══════════════════════════════════════════════════════════ */
  .clients-page-layout {
    display:        grid;
    grid-template-columns: 1fr;
    gap:            20px;
  }
  .clients-toolbar-card {
    padding: 24px !important;
  }
  .clients-toolbar-hero {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    margin-bottom:   16px;
  }
  .clients-toolbar-title {
    font-size:      24px !important;
    font-weight:    700 !important;
    letter-spacing: -.02em !important;
    margin:         0 !important;
  }
  .clients-toolbar-add {
    width:  36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background:    var(--v2-accent) !important;
    color:         #fff !important;
    border:        none !important;
    display:       grid;
    place-items:   center;
    font-size:     18px !important;
    cursor:        pointer;
    transition:    background var(--v2-dur) var(--v2-ease),
                   transform var(--v2-dur) var(--v2-ease);
    box-shadow:    0 2px 6px rgba(224,90,37,.3);
  }
  .clients-toolbar-add:hover {
    background: var(--v2-accent-hover) !important;
    transform:  scale(1.06);
  }
  .clients-toolbar-controls {
    display:      flex;
    flex-wrap:    wrap;
    gap:          12px;
    align-items:  flex-end;
  }
  .clients-search-field {
    flex: 1 1 260px;
    min-width: 0;
  }
  .clients-sort-field { flex: 0 0 auto; }
  .clients-sort-row {
    display: flex;
    gap:     6px;
  }
  .clients-toolbar-actions {
    margin-left: auto;
  }

  /* Client drill / detail card */
  .client-drill-card {
    padding: 28px !important;
  }
  .client-drill-back {
    background:  transparent !important;
    border:      none !important;
    color:       var(--v2-text-muted) !important;
    font-size:   13px !important;
    cursor:      pointer;
    padding:     6px 0 !important;
    transition:  color var(--v2-dur) var(--v2-ease);
  }
  .client-drill-back:hover { color: var(--v2-accent) !important; }
  .client-drill-title {
    font-size:      22px !important;
    font-weight:    700 !important;
    letter-spacing: -.02em !important;
    margin:         6px 0 0 0 !important;
  }
  .client-drill-subtitle {
    color:     var(--v2-text-muted) !important;
    font-size: 13px !important;
    margin:    4px 0 0 0 !important;
  }
  .client-drill-title-risk {
    font-size:     11px !important;
    font-weight:   600 !important;
    padding:       3px 8px !important;
    border-radius: var(--v2-radius-xs) !important;
    margin-left:   8px;
  }
  .client-drill-title-risk.is-high {
    background: var(--v2-danger-soft);
    color:      var(--v2-danger);
  }
  .client-drill-title-risk.is-medium {
    background: var(--v2-warning-soft);
    color:      var(--v2-warning);
  }


  /* ══════════════════════════════════════════════════════════
     12. ANALYTICS
     ══════════════════════════════════════════════════════════ */
  .analytics-page {
    display:        grid;
    grid-template-columns: 1fr;
    gap:            20px;
  }
  .analytics-hero-card {
    padding: 28px !important;
    background: linear-gradient(135deg, #fff 0%, #fdf7ef 100%) !important;
  }
  .analytics-hero-title {
    font-size:      28px !important;
    font-weight:    700 !important;
    letter-spacing: -.025em !important;
    margin:         0 0 4px 0 !important;
  }
  .analytics-hero-subtitle {
    color:     var(--v2-text-muted) !important;
    font-size: 14px !important;
    margin:    0 !important;
  }

  /* Period switcher */
  .analytics-period-card {
    padding: 16px 20px !important;
  }
  .analytics-period-switch {
    display: inline-flex;
    background: var(--v2-surface-muted);
    border-radius: var(--v2-radius-sm);
    padding: 4px;
    gap: 2px;
  }
  .analytics-period-btn {
    height:        32px !important;
    padding:       0 14px !important;
    background:    transparent !important;
    border:        none !important;
    color:         var(--v2-text-secondary) !important;
    font-size:     13px !important;
    font-weight:   500 !important;
    border-radius: calc(var(--v2-radius-sm) - 2px) !important;
    cursor:        pointer;
    transition:    all var(--v2-dur) var(--v2-ease);
  }
  .analytics-period-btn:hover {
    color: var(--v2-text) !important;
  }
  .analytics-period-btn.is-active {
    background:  var(--v2-surface) !important;
    color:       var(--v2-text) !important;
    box-shadow:  var(--v2-shadow-xs) !important;
    font-weight: 600 !important;
  }

  /* Week strip */
  .analytics-week-strip {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .analytics-week-day {
    flex: 0 0 auto;
    min-width: 56px;
    height: 44px;
    padding: 4px 10px;
    background: var(--v2-surface) !important;
    border: 1px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-sm) !important;
    font-size: 12px !important;
    color: var(--v2-text-secondary) !important;
    cursor: pointer;
    transition: all var(--v2-dur) var(--v2-ease);
  }
  .analytics-week-day:hover {
    border-color: var(--v2-border-strong) !important;
  }
  .analytics-week-day.is-active {
    border-color: var(--v2-accent) !important;
    background:   var(--v2-accent-soft) !important;
    color:        var(--v2-accent) !important;
    font-weight:  600;
  }

  /* Revenue card */
  .analytics-revenue-card { padding: 24px !important; }
  .analytics-revenue-title {
    font-size:   13px !important;
    color:       var(--v2-text-muted) !important;
    margin:      0 0 8px 0 !important;
    font-weight: 500;
  }
  .analytics-revenue-main {
    display:     flex;
    align-items: baseline;
    gap:         12px;
    flex-wrap:   wrap;
  }
  .analytics-revenue-value {
    font-size:      32px !important;
    font-weight:    700 !important;
    letter-spacing: -.025em !important;
    color:          var(--v2-text) !important;
    line-height:    1.1;
  }
  .analytics-trend-chip {
    font-size:     12px !important;
    font-weight:   600 !important;
    padding:       3px 8px !important;
    border-radius: var(--v2-radius-xs) !important;
  }
  .analytics-trend-chip.trend-up,
  .analytics-trend-chip.is-up {
    background: var(--v2-success-soft) !important;
    color:      var(--v2-success) !important;
  }
  .analytics-trend-chip.trend-down,
  .analytics-trend-chip.is-down {
    background: var(--v2-danger-soft) !important;
    color:      var(--v2-danger) !important;
  }
  .analytics-trend-chip.trend-flat,
  .analytics-trend-chip.is-flat {
    background: var(--v2-surface-muted) !important;
    color:      var(--v2-text-muted) !important;
  }
  .analytics-revenue-compare {
    color:     var(--v2-text-muted) !important;
    font-size: 12px !important;
    margin:    8px 0 0 0 !important;
  }

  /* Metric cards */
  .analytics-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  @media (max-width: 1280px) {
    .analytics-metrics-grid { grid-template-columns: repeat(2, 1fr); }
  }
  .analytics-metric-card {
    background:    var(--v2-surface) !important;
    border:        1px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-md) !important;
    padding:       16px 18px !important;
    transition:    border-color var(--v2-dur) var(--v2-ease);
  }
  .analytics-metric-card:hover {
    border-color: var(--v2-border-strong) !important;
  }
  .analytics-metric-title {
    font-size:   12px !important;
    color:       var(--v2-text-muted) !important;
    margin:      0 0 6px 0 !important;
    font-weight: 500;
  }
  .analytics-metric-value {
    font-size:      22px !important;
    font-weight:    700 !important;
    letter-spacing: -.015em !important;
    color:          var(--v2-text) !important;
    margin:         0 !important;
    line-height:    1.15;
  }
  .analytics-metric-hint {
    font-size:   12px !important;
    margin:      4px 0 0 0 !important;
    font-weight: 500;
  }
  .analytics-metric-hint.is-up     { color: var(--v2-success) !important; }
  .analytics-metric-hint.is-down   { color: var(--v2-danger) !important; }
  .analytics-metric-hint.is-flat,
  .analytics-metric-hint.is-neutral { color: var(--v2-text-muted) !important; }

  /* Chart card */
  .analytics-chart-card { padding: 24px !important; }
  .analytics-chart-head {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    margin-bottom:   16px;
    gap:             12px;
    flex-wrap:       wrap;
  }
  .analytics-section-title {
    font-size:      15px !important;
    font-weight:    600 !important;
    letter-spacing: -.01em !important;
    color:          var(--v2-text) !important;
    margin:         0 !important;
  }
  .analytics-chart-caption {
    font-size: 13px !important;
    color:     var(--v2-text-muted) !important;
  }

  /* Services list bars */
  .analytics-services-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .analytics-service-row {
    display: grid;
    grid-template-columns: 28px 1fr 1fr auto;
    align-items: center;
    gap: 12px;
    font-size: 13px;
  }
  .analytics-service-rank {
    width:         24px;
    height:        24px;
    border-radius: 50%;
    background:    var(--v2-surface-muted);
    color:         var(--v2-text-secondary);
    display:       grid;
    place-items:   center;
    font-size:     11px;
    font-weight:   700;
  }
  .analytics-service-title {
    color: var(--v2-text);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .analytics-service-bar {
    height: 6px;
    background: var(--v2-surface-muted);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
    display: block;
  }
  .analytics-service-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--v2-accent) 0%, #ff7740 100%);
    border-radius: 999px;
  }
  .analytics-service-count {
    color: var(--v2-text-muted);
    font-size: 12px;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  /* Best client */
  .analytics-best-client {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--v2-surface-muted);
    border-radius: var(--v2-radius-md);
    border: 1px solid var(--v2-border);
  }
  .analytics-best-client-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--v2-accent) 0%, #ff7740 100%);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 14px;
  }
  .analytics-best-client-main { flex: 1; min-width: 0; }
  .analytics-best-client-name {
    font-weight: 600;
    color: var(--v2-text);
    margin: 0;
    font-size: 14px;
  }
  .analytics-best-client-meta {
    font-size: 12px;
    color: var(--v2-text-muted);
    margin: 2px 0 0 0;
  }
  .analytics-best-client-tag {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--v2-radius-xs);
    background: var(--v2-accent-soft);
    color: var(--v2-accent);
    border: 1px solid var(--v2-accent-border);
  }

  /* Bars (revenue) */
  .analytics-bars, .analytics-bars-half {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    height: 140px;
    padding: 8px 0;
  }
  .analytics-bar-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
  }


  /* ══════════════════════════════════════════════════════════
     13. SETTINGS page
     ══════════════════════════════════════════════════════════ */
  body[data-route="settings"] #app-content,
  body[data-route="settings"] .page-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px !important;
  }
  body[data-route="settings"] .card {
    margin: 0 !important;
  }


  /* ══════════════════════════════════════════════════════════
     14. PROFILE page
     ══════════════════════════════════════════════════════════ */
  .profile-home-link-block {
    background: linear-gradient(135deg, var(--v2-accent) 0%, #ff7740 100%) !important;
    color: #fff !important;
    border-radius: var(--v2-radius-lg) !important;
    padding: 24px !important;
    box-shadow: 0 4px 14px rgba(224,90,37,.25) !important;
    border: none !important;
  }


  /* ══════════════════════════════════════════════════════════
     15. MODALS / SHEETS — cleaner surface
     ══════════════════════════════════════════════════════════ */
  .dashboard-swipe-complete-modal,
  .booking-action-sheet,
  .dashboard-create-booking-modal,
  .dashboard-group-bookings-modal {
    background:    var(--v2-surface) !important;
    border-radius: var(--v2-radius-lg) !important;
    border:        1px solid var(--v2-border) !important;
    box-shadow:    var(--v2-shadow-lg) !important;
    padding:       24px !important;
  }


  /* ══════════════════════════════════════════════════════════
     16. TOASTS
     ══════════════════════════════════════════════════════════ */
  .toast,
  [class*="toast-"] {
    border-radius: var(--v2-radius-md) !important;
    box-shadow:    var(--v2-shadow-lg) !important;
    font-size:     13px !important;
  }


  /* ══════════════════════════════════════════════════════════
     17. SCROLLBAR polish
     ══════════════════════════════════════════════════════════ */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: #d8cdbc;
    border-radius: 10px;
    border: 2px solid var(--v2-bg);
  }
  ::-webkit-scrollbar-thumb:hover { background: #c4b6a0; }


  /* ══════════════════════════════════════════════════════════
     18. ACCESSIBILITY — focus-visible everywhere
     ══════════════════════════════════════════════════════════ */
  *:focus-visible {
    outline: 2px solid var(--v2-accent);
    outline-offset: 2px;
    border-radius: var(--v2-radius-xs);
  }
  .btn:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  .sidebar-user-widget:focus-visible {
    outline: none;
  }


  /* ══════════════════════════════════════════════════════════
     19. REDUCED MOTION
     ══════════════════════════════════════════════════════════ */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      transition-duration: .01ms !important;
    }
  }
}


/* ══════════════════════════════════════════════════════════
   19-A. TOPBAR ACTIONS — search + bell + CTA
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* Topbar right side action cluster */
  .v2-topbar .v2-topbar-actions {
    gap: 10px !important;
  }

  /* Global search */
  .v2-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 300px;
    max-width: 34vw;
  }
  .v2-search-icon {
    position: absolute;
    left: 12px;
    color: var(--v2-text-muted);
    pointer-events: none;
  }
  .v2-search-input {
    width: 100% !important;
    height: 36px !important;
    padding: 0 52px 0 36px !important;
    background: var(--v2-surface) !important;
    border: 1px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-sm) !important;
    font-size: 13px !important;
    color: var(--v2-text) !important;
    transition: border-color var(--v2-dur) var(--v2-ease),
                box-shadow var(--v2-dur) var(--v2-ease);
  }
  .v2-search-input::placeholder {
    color: var(--v2-text-muted) !important;
    opacity: 1;
  }
  .v2-search-input:focus {
    outline: none !important;
    border-color: var(--v2-accent) !important;
    box-shadow: var(--v2-shadow-focus) !important;
  }
  .v2-search-kbd {
    position: absolute;
    right: 10px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    background: var(--v2-surface-muted);
    border: 1px solid var(--v2-border);
    border-radius: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--v2-text-muted);
    pointer-events: none;
  }
  @media (max-width: 1279px) {
    .v2-search { width: 220px; }
    .v2-search-kbd { display: none; }
    .v2-search-input { padding-right: 12px !important; }
  }

  /* Icon button (bell) */
  .v2-icon-btn {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: var(--v2-radius-sm);
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
    color: var(--v2-text-secondary);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background var(--v2-dur) var(--v2-ease),
                border-color var(--v2-dur) var(--v2-ease),
                color var(--v2-dur) var(--v2-ease);
  }
  .v2-icon-btn:hover {
    background: var(--v2-surface-muted);
    border-color: var(--v2-border-strong);
    color: var(--v2-text);
  }
  .v2-icon-btn:focus-visible {
    outline: none;
    border-color: var(--v2-accent);
    box-shadow: var(--v2-shadow-focus);
  }
  .v2-bell-dot {
    position: absolute;
    top: 8px; right: 8px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--v2-accent);
    box-shadow: 0 0 0 2px var(--v2-surface);
  }

  /* Primary CTA */
  .v2-cta-btn {
    height: 36px;
    padding: 0 14px;
    background: var(--v2-accent);
    border: 1px solid var(--v2-accent);
    border-radius: var(--v2-radius-sm);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.005em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(224,90,37,.3);
    transition: background var(--v2-dur) var(--v2-ease),
                box-shadow var(--v2-dur) var(--v2-ease);
  }
  .v2-cta-btn:hover {
    background: var(--v2-accent-hover);
    border-color: var(--v2-accent-hover);
    box-shadow: 0 2px 8px rgba(224,90,37,.4);
  }
  .v2-cta-btn:focus-visible {
    outline: none;
    box-shadow: var(--v2-shadow-focus);
  }
  @media (max-width: 1279px) {
    .v2-cta-btn span { display: none; }
    .v2-cta-btn { width: 36px; padding: 0; justify-content: center; }
  }


  /* ══════════════════════════════════════════════════════════
     19-B. NAV COUNTS — badges on sidebar items
     ══════════════════════════════════════════════════════════ */
  .v2-nav-count {
    margin-left: auto;
    padding: 1px 7px;
    min-width: 20px;
    height: 18px;
    background: var(--v2-surface-muted);
    color: var(--v2-text-muted);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }
  .bottom-nav .bottom-nav-btn.active .v2-nav-count {
    background: var(--v2-accent);
    color: #fff;
  }


  /* ══════════════════════════════════════════════════════════
     19-C. DASHBOARD KPI GRID
     ══════════════════════════════════════════════════════════ */
  .v2-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 24px 0 !important;
  }
  @media (max-width: 1279px) {
    .v2-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  .v2-kpi-card {
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-lg);
    padding: 18px 20px;
    box-shadow: var(--v2-shadow-sm);
    transition: border-color var(--v2-dur) var(--v2-ease),
                box-shadow var(--v2-dur) var(--v2-ease),
                transform var(--v2-dur) var(--v2-ease);
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .v2-kpi-card:hover {
    border-color: var(--v2-border-strong);
    box-shadow: var(--v2-shadow-md);
    transform: translateY(-1px);
  }

  .v2-kpi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 8px;
  }
  .v2-kpi-icon {
    width: 36px; height: 36px;
    border-radius: 9px;
    display: grid;
    place-items: center;
  }
  .v2-kpi-icon-accent  { background: var(--v2-accent-soft);  color: var(--v2-accent); }
  .v2-kpi-icon-success { background: var(--v2-success-soft); color: var(--v2-success); }
  .v2-kpi-icon-warning { background: var(--v2-warning-soft); color: var(--v2-warning); }
  .v2-kpi-icon-neutral { background: var(--v2-surface-muted); color: var(--v2-text-secondary); }

  .v2-kpi-trend {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: var(--v2-radius-xs);
    background: var(--v2-success-soft);
    color: var(--v2-success);
  }
  .v2-kpi-trend.is-down {
    background: var(--v2-danger-soft);
    color: var(--v2-danger);
  }
  .v2-kpi-trend.is-flat {
    background: var(--v2-surface-muted);
    color: var(--v2-text-muted);
  }

  .v2-kpi-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--v2-text-muted);
    margin-bottom: 6px;
    letter-spacing: -.005em;
  }
  .v2-kpi-value {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--v2-text);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    min-height: 30px;
  }
  .v2-kpi-hint {
    font-size: 12px;
    color: var(--v2-text-secondary);
    margin-top: 6px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }


  /* ══════════════════════════════════════════════════════════
     19-D. CLIENTS SEGMENT TABS
     ══════════════════════════════════════════════════════════ */
  .v2-clients-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--v2-surface-muted);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-md);
    margin-bottom: 16px !important;
    align-self: flex-start;
    flex-wrap: wrap;
  }
  .v2-clients-tab {
    background: transparent;
    border: none;
    padding: 7px 14px;
    border-radius: calc(var(--v2-radius-md) - 4px);
    font-size: 13px;
    font-weight: 500;
    color: var(--v2-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background var(--v2-dur) var(--v2-ease),
                color var(--v2-dur) var(--v2-ease),
                box-shadow var(--v2-dur) var(--v2-ease);
  }
  .v2-clients-tab:hover {
    color: var(--v2-text);
  }
  .v2-clients-tab.is-active {
    background: var(--v2-surface);
    color: var(--v2-text);
    font-weight: 600;
    box-shadow: var(--v2-shadow-xs);
  }
  .v2-clients-tab-count {
    min-width: 22px;
    padding: 0 6px;
    height: 18px;
    border-radius: 999px;
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--v2-text-muted);
    font-variant-numeric: tabular-nums;
  }
  .v2-clients-tab.is-active .v2-clients-tab-count {
    background: var(--v2-accent-soft);
    border-color: var(--v2-accent-border);
    color: var(--v2-accent);
  }

  /* Place tabs in the clients grid correctly */
  body[data-route="clients"] .clients-page-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
  body[data-route="clients"] .v2-clients-tabs {
    order: -1;
  }
}

/* ══════════════════════════════════════════════════════════
   20. ≥1440px — wider layouts
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  :root {
    --v2-sidebar-w: 260px;
    --v2-content-max: 1320px;
  }
  .analytics-metrics-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ══════════════════════════════════════════════════════════
   21. ≥1600px — more breathing room
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1600px) {
  :root {
    --v2-content-max: 1400px;
    --v2-content-pad: 40px;
  }
}