/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ATELIER: the studio back office, cloned from GlossGenius (5 November 2026)

   GlossGenius (Refero site 830) runs salons, spas and studios: bookings, clients, packages, payments,
   the same day as a photo-booth business. Its app, sampled from the pixels (Clients 81e2c9af,
   Calendar bd279ce7, Analytics 6b299c22):
     a sage grey desk #eff1f0 with the menu sitting straight on it, the page as one white rounded sheet
     the open screen a white pill in the menu · charcoal pill buttons #2a2e2d · outline pills beside them
     pastel pink initials #f4dfec · hairlines #e6e9e8 · a deep green note when something is saved
   Fonts: Hanken Grotesk for titles, the closest open face to GlossGenius's Basel Grotesk (a licensed
   face) and Inter for everything else, as GlossGenius itself uses.
   ⛔ Admin only. Tokens in looks/tokens.css; the components in looks/flat.css.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* the menu sits on the desk: no panel, no edge; the open screen is a white pill */
html[data-look="atelier"] #rail { background: transparent; border-right: 0; padding: 14px 10px 12px 12px; }
html[data-look="atelier"] .rl { color: var(--lk-ink-2); font-weight: 500; border-radius: 10px; }
html[data-look="atelier"] .rl svg { stroke: var(--lk-ink-2); }
@media (hover: hover) { html[data-look="atelier"] .rl:hover { background: rgba(255, 255, 255, .6); } }
html[data-look="atelier"] .rl.on { background: #ffffff; color: var(--lk-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
html[data-look="atelier"] .rl.on svg { stroke: var(--lk-ink); }
html[data-look="atelier"] .rl .count { background: var(--lk-acc-fill); color: var(--lk-acc-ink); }
html[data-look="atelier"] #rail .foot { border-top: 0; }
html[data-look="atelier"] #rail .user .av, html[data-look="atelier"] .lk-av { background: var(--lk-acc-fill); color: var(--lk-acc-ink); }

/* the bar sits on the desk too; the page below it is the sheet */
html[data-look="atelier"] #main { margin-left: 240px; padding: 0 12px 12px 0; }
html[data-look="atelier"] #topbar, html[data-look="atelier"] #topbar.glass { background: transparent; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 10px 4px; margin: 0; min-height: 60px; position: relative; }
html[data-look="atelier"] #topbar .search { background: #ffffff; border-color: transparent; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); max-width: 420px; }
html[data-look="atelier"] #topbar .search:hover, html[data-look="atelier"] #topbar .search:focus-within { border-color: var(--lk-field); }
html[data-look="atelier"] #view { max-width: none; min-height: calc(100vh - 72px); padding: 26px 28px 40px; background: #ffffff; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
html[data-look="atelier"] #view > * { max-width: 1240px; }

/* page headers: GlossGenius's small, calm title, actions on the right */
html[data-look="atelier"] .band { margin-bottom: 20px; }
/* the line above the title stays: on the Event Manager it carries the event's status chips, which are information */
html[data-look="atelier"] .band .kick { font-size: 12.5px; margin-bottom: 6px; }
html[data-look="atelier"] .band .sub { margin-top: 4px; }
html[data-look="atelier"] .band .bstat { background: var(--lk-card-2); border-color: transparent; }

/* cards inside the sheet: hairline, 12px; charcoal pills and outline pills */
html[data-look="atelier"] .btn-glass { background: #ffffff; border-color: var(--lk-line-2); }
html[data-look="atelier"] .btn-glass:hover:not(:disabled) { background: var(--lk-card-2); }
html[data-look="atelier"] #topbar .btn-volt { background: var(--lk-act); color: var(--lk-act-ink); }
html[data-look="atelier"] .kpi .ic { background: var(--lk-acc-soft); }
html[data-look="atelier"] .kpi .ic svg { stroke: var(--lk-acc-ink); }
html[data-look="atelier"] .tbl tbody tr:hover { background: #f3f7f6; }
html[data-look="atelier"] .seg { background: var(--lk-card-2); }
html[data-look="atelier"] .fpill.on { background: var(--lk-act); border-color: var(--lk-act); }
html[data-look="atelier"] #login { background: var(--lk-page); }

@media (max-width: 1100px) {
  html[data-look="atelier"] #rail { background: var(--lk-page); border-right: 1px solid var(--lk-line); }
  html[data-look="atelier"] #main { margin-left: 0; padding: 0 8px 90px; }
  html[data-look="atelier"] #topbar, html[data-look="atelier"] #topbar.glass { padding: 10px 8px; }
  html[data-look="atelier"] #view { padding: 20px 18px 32px; min-height: calc(100vh - 140px); }
}
@media (max-width: 560px) {
  html[data-look="atelier"] #main { padding: 0 0 80px; }
  html[data-look="atelier"] #view { border-radius: 16px 16px 0 0; padding: 18px 14px 28px; }
}