:root {
    color-scheme: light;
    --ink: #172c28;
    --ink-soft: #42534f;
    --muted: #83908c;
    --line: #e7ebe8;
    --paper: #f6f8f5;
    --white: #fff;
    --mint: #c9f278;
    --mint-soft: #eff8df;
    --coral: #f37d64;
    --coral-soft: #fff0eb;
    --blue: #a8c8ec;
    --yellow: #f2ce68;
    --green: #a8d6ae;
    --font-body: 'DM Sans', sans-serif;
    --font-display: 'Manrope', sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
[hidden] { display: none !important; }

.app-shell { min-height: 100vh; }

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 10;
    display: flex;
    width: 250px;
    flex-direction: column;
    padding: 27px 18px 18px;
    background: var(--ink);
    color: #f5f8f3;
}

.brand { display: flex; align-items: center; gap: 11px; padding: 0 8px; }
.brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px 12px 12px 3px; background: var(--mint); color: var(--ink); font-family: var(--font-display); font-size: 22px; font-weight: 800; }
.brand-copy { display: grid; gap: 2px; }
.brand-copy strong { font-family: var(--font-display); font-size: 19px; line-height: 1; letter-spacing: 0; }
.brand-copy small { color: #a4b4ae; font-size: 9px; font-weight: 700; letter-spacing: 1.1px; }
.sidebar-label { margin: 54px 8px 13px; color: #71847e; font-size: 9px; font-weight: 700; letter-spacing: 1.05px; }
.main-nav { display: grid; gap: 5px; }
.nav-link { display: flex; min-height: 43px; align-items: center; gap: 12px; padding: 0 11px; border-radius: 7px; color: #b1beb9; font-size: 12px; font-weight: 600; transition: background .18s ease, color .18s ease; }
.nav-link:hover { background: #223a35; color: var(--white); }
.nav-link.is-active { background: #2b433d; color: var(--white); }
.nav-icon { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid #4a605a; border-radius: 6px; color: var(--mint); font-size: 8px; font-weight: 700; }
.nav-link.is-active .nav-icon { border-color: var(--mint); background: var(--mint); color: var(--ink); }
.sidebar-bottom { display: grid; gap: 15px; margin-top: auto; }
.salon-chip { display: flex; min-height: 52px; align-items: center; gap: 9px; padding: 0 9px; border: 1px solid #344a44; border-radius: 8px; }
.salon-chip > span:nth-child(2), .profile-row > span:nth-child(2) { display: grid; flex: 1; gap: 3px; }
.salon-chip strong, .profile-row strong { font-size: 10px; font-weight: 600; }
.salon-chip small, .profile-row small { color: #93a49e; font-size: 9px; }
.status-dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #8ed58a; box-shadow: 0 0 0 3px rgb(142 213 138 / 13%); }
.chip-more, .profile-more { color: #a8b7b1; font-size: 15px; letter-spacing: 1px; }
.profile-row { display: flex; align-items: center; gap: 9px; padding: 0 6px; }
.avatar, .top-avatar { display: grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; border-radius: 50%; background: #f2cead; color: #594338; font-size: 9px; font-weight: 700; }
.profile-more { padding: 5px; border: 0; background: transparent; cursor: pointer; }

.main-content { min-height: 100vh; margin-left: 250px; }
.topbar { display: flex; height: 65px; align-items: center; justify-content: space-between; padding: 0 42px; border-bottom: 1px solid var(--line); background: rgb(255 255 255 / 76%); }
.breadcrumb { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; }
.breadcrumb strong { color: var(--ink); font-weight: 600; }
.crumb-slash { color: #c4cbc7; }
.topbar-right { display: flex; align-items: center; gap: 16px; }
.today-label { color: #667570; font-size: 10px; font-weight: 600; }
.top-avatar { width: 29px; height: 29px; flex-basis: 29px; background: #d9e7de; color: #38534b; }
.menu-toggle { display: none; }

.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 37px 42px 24px; }
.eyebrow { margin: 0 0 9px; color: #87928e; font-size: 9px; font-weight: 700; letter-spacing: 1.05px; }
.eyebrow-dot { display: inline-block; width: 4px; height: 4px; margin: 0 5px 2px; border-radius: 50%; background: var(--coral); }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 6px; font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1.25; letter-spacing: 0; }
.page-subtitle { margin: 0; color: var(--muted); font-size: 12px; }
.button { display: inline-flex; min-height: 39px; align-items: center; justify-content: center; gap: 9px; padding: 0 15px; border: 0; border-radius: 6px; font-size: 11px; font-weight: 700; transition: transform .15s ease, background .15s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--ink); color: var(--white); }
.button-primary:hover { background: #27463e; }
.button-plus { color: var(--mint); font-size: 19px; font-weight: 400; line-height: 1; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin: 0 42px 16px; }
.metric-card { position: relative; min-height: 147px; overflow: hidden; padding: 17px 17px 14px; border: 1px solid var(--line); border-radius: 7px; background: var(--white); }
.metric-card.metric-dark { border-color: var(--ink); background: var(--ink); color: var(--white); }
.metric-top { display: flex; align-items: center; justify-content: space-between; color: #8b9792; font-size: 8px; font-weight: 700; letter-spacing: .85px; }
.metric-dark .metric-top { color: #b2c0ba; }
.metric-symbol { color: #a7b3ae; font-family: var(--font-display); font-size: 9px; font-weight: 700; }
.symbol-mint { color: #83bd78; font-size: 15px; }
.symbol-coral { color: var(--coral); font-size: 17px; }
.symbol-yellow { color: #d7ac38; font-size: 17px; }
.metric-value { position: relative; z-index: 1; margin-top: 14px; font-family: var(--font-display); font-size: 29px; font-weight: 700; line-height: 1; }
.metric-value small { color: #8b9792; font-family: var(--font-body); font-size: 10px; font-weight: 600; }
.metric-dark .metric-value small { color: #bdc9c3; }
.metric-foot { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; margin-top: 13px; color: #9aa49f; font-size: 9px; }
.trend-up { color: #c9f278; font-size: 9px; font-weight: 700; }
.metric-note { color: #88948f; font-size: 9px; }
.metric-progress { height: 4px; overflow: hidden; margin-top: 15px; border-radius: 4px; background: #edf0ec; }
.metric-progress span { display: block; height: 100%; border-radius: inherit; background: #a8d6ae; }
.metric-spark { position: absolute; right: 15px; bottom: 16px; display: flex; height: 41px; align-items: flex-end; gap: 4px; opacity: .68; }
.metric-spark i { width: 5px; border-radius: 2px 2px 0 0; background: #49635b; }
.metric-spark i:nth-child(1) { height: 35%; }.metric-spark i:nth-child(2) { height: 47%; }.metric-spark i:nth-child(3) { height: 40%; }.metric-spark i:nth-child(4) { height: 68%; }.metric-spark i:nth-child(5) { height: 56%; }.metric-spark i:nth-child(6) { height: 75%; }.metric-spark i:nth-child(7) { height: 61%; }.metric-spark i:nth-child(8) { height: 88%; }.metric-spark i:nth-child(9) { height: 69%; }.metric-spark i:nth-child(10) { height: 81%; }.metric-spark i:nth-child(11) { height: 74%; }.metric-spark i:nth-child(12) { height: 100%; background: var(--mint); }
.payment-dot { width: 6px; height: 6px; border-radius: 50%; }
.cash-dot { margin-left: 1px; background: var(--coral); }.card-dot { margin-left: 5px; background: #90b8e5; }
.payment-bar { display: flex; height: 4px; gap: 3px; margin-top: 14px; }
.payment-bar i:first-child { width: 35%; border-radius: 4px 0 0 4px; background: var(--coral); }.payment-bar i:last-child { flex: 1; border-radius: 0 4px 4px 0; background: #a8c8ec; }
.metric-mini-bars { position: absolute; right: 17px; bottom: 14px; display: flex; height: 29px; align-items: flex-end; gap: 4px; }
.metric-mini-bars i { width: 6px; border-radius: 3px 3px 0 0; background: #dceee0; }.metric-mini-bars i:nth-child(1) { height: 40%; }.metric-mini-bars i:nth-child(2) { height: 67%; }.metric-mini-bars i:nth-child(3) { height: 51%; }.metric-mini-bars i:nth-child(4) { height: 83%; }.metric-mini-bars i:nth-child(5) { height: 62%; }.metric-mini-bars i:nth-child(6) { height: 100%; background: #abd9b0; }.metric-mini-bars i:nth-child(7) { height: 77%; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(290px, .95fr); gap: 13px; margin: 0 42px 14px; }
.panel { border: 1px solid var(--line); border-radius: 7px; background: var(--white); }
.sales-panel, .schedule-panel { min-width: 0; padding: 18px 18px 0; }
.panel-heading { display: flex; min-height: 44px; align-items: flex-start; justify-content: space-between; gap: 14px; }
.panel-heading .eyebrow { margin-bottom: 5px; }
h2 { margin-bottom: 0; font-family: var(--font-display); font-size: 14px; font-weight: 700; line-height: 1.4; letter-spacing: 0; }
.text-link, .table-footer a, .schedule-link { color: #62756d; font-size: 9px; font-weight: 700; }
.text-link span, .table-footer a span, .schedule-link span { padding-left: 4px; color: #82a85f; font-size: 13px; }
.table-wrap { overflow-x: auto; }
.sales-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.sales-table thead { height: 35px; border-bottom: 1px solid #edf0ed; }
.sales-table th { color: #99a29e; font-size: 8px; font-weight: 700; letter-spacing: .6px; text-align: left; }
.sales-table td { height: 55px; border-bottom: 1px solid #f0f2ef; color: #77837e; font-size: 9px; }
.sales-table tbody tr:last-child td { border-bottom: 0; }
.client-cell { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.client-cell strong { font-size: 9px; font-weight: 600; }
.client-avatar { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; font-size: 8px; font-weight: 700; }
.tone-rose { background: #f9e0d8; color: #975745; }.tone-blue { background: #dceafa; color: #4a6b8e; }.tone-yellow { background: #f7edce; color: #84703b; }
.time-cell { color: #98a39e !important; font-variant-numeric: tabular-nums; }
.amount-cell { text-align: right !important; }
.amount-strong { color: var(--ink) !important; font-weight: 700; }
.table-footer { display: flex; min-height: 38px; align-items: center; justify-content: space-between; border-top: 1px solid #edf0ed; color: #9aa49f; font-size: 9px; }
.table-footer a { color: #62756d; }
.date-pill { padding: 5px 8px; border-radius: 4px; background: #f0f5e9; color: #718f54; font-size: 7px; font-weight: 700; letter-spacing: .5px; }
.appointment-list { margin-top: 8px; }
.appointment { display: grid; min-height: 51px; grid-template-columns: 39px 3px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.appointment time { color: #78847f; font-size: 9px; font-variant-numeric: tabular-nums; }
.appointment-line { width: 3px; height: 27px; border-radius: 4px; }
.line-coral { background: var(--coral); }.line-blue { background: #8bb7e5; }.line-yellow { background: #e6c14f; }.line-green { background: #83c090; }
.appointment-copy { display: grid; gap: 3px; min-width: 0; }
.appointment-copy strong { overflow: hidden; color: #364740; font-size: 9px; font-weight: 600; text-overflow: ellipsis; }
.appointment-copy small, .appointment-duration { color: #9aa49f; font-size: 8px; }
.appointment-duration { white-space: nowrap; }
.schedule-link { display: block; padding: 10px 0 14px; border-top: 1px solid #edf0ed; }

.bottom-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(290px, .95fr); gap: 13px; margin: 0 42px 32px; }
.objective-panel { display: flex; min-height: 146px; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; }
.objective-copy { flex: 1; }
.objective-copy .eyebrow { margin-bottom: 7px; }
.objective-copy h2 { font-size: 13px; }
.objective-copy > p:not(.eyebrow) { margin: 5px 0 14px; color: #919b96; font-size: 9px; }
.objective-progress { height: 5px; overflow: hidden; border-radius: 4px; background: #edf0ed; }
.objective-progress span { display: block; height: 100%; border-radius: inherit; background: var(--coral); }
.objective-meta { display: flex; justify-content: space-between; margin-top: 7px; color: #9aa49f; font-size: 8px; }
.objective-meta strong { color: #54655e; font-size: 8px; }
.objective-ring { display: grid; width: 83px; height: 83px; flex: 0 0 83px; place-items: center; border-radius: 50%; background: conic-gradient(var(--mint) 0 68%, #edf1eb 68% 100%); }
.objective-ring > div { display: grid; width: 67px; height: 67px; align-content: center; justify-items: center; border-radius: 50%; background: var(--white); }
.objective-ring strong { font-family: var(--font-display); font-size: 19px; line-height: 1; }.objective-ring strong small { font-family: var(--font-body); font-size: 9px; }.objective-ring span { margin-top: 4px; color: #9aa49f; font-size: 6px; font-weight: 700; letter-spacing: .6px; }
.tip-panel { display: flex; min-height: 146px; align-items: flex-start; gap: 12px; padding: 21px 19px; background: #eff5e8; }
.tip-mark { display: grid; width: 21px; height: 21px; flex: 0 0 21px; place-items: center; border: 1px solid #91aa7e; border-radius: 50%; color: #738c60; font-family: Georgia, serif; font-size: 12px; font-style: italic; }
.tip-panel .eyebrow { margin-bottom: 6px; color: #84977a; }
.tip-panel h2 { margin-bottom: 6px; font-size: 12px; }
.tip-panel p:last-child { max-width: 315px; margin-bottom: 0; color: #788871; font-size: 9px; line-height: 1.6; }

.caisse-heading { align-items: center; margin-bottom: 21px; }
.register-status { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 5px; background: var(--white); color: #5a6b64; font-size: 9px; font-weight: 600; }
.register-status .status-dot { width: 6px; height: 6px; flex-basis: 6px; }
.register-time { padding-left: 8px; border-left: 1px solid var(--line); color: #9aa49f; font-size: 8px; font-weight: 400; }
.pos-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 16px; margin: 0 42px 32px; }
.catalog-column { min-width: 0; }
.catalog-toolbar { margin-bottom: 14px; }
.search-box { display: flex; height: 40px; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); }
.search-icon { color: #8e9a94; font-family: Georgia, serif; font-size: 21px; line-height: 1; transform: rotate(-20deg); }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 10px; }
.search-box input::placeholder, .client-input::placeholder { color: #a3ada8; }
.category-tabs { display: flex; overflow-x: auto; gap: 7px; margin-top: 12px; padding-bottom: 4px; scrollbar-width: thin; }
.category-tab { min-height: 34px; flex: 0 0 auto; padding: 0 11px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #85918c; cursor: pointer; font-size: 9px; font-weight: 600; white-space: nowrap; }
.category-tab:hover { color: var(--ink); }
.category-tab.is-selected { border-color: #dce8cf; background: #eaf3df; color: #526a42; }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.service-card { display: flex; min-height: 137px; flex-direction: column; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); text-align: left; cursor: pointer; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.service-card:hover { transform: translateY(-2px); border-color: #cbd9c3; box-shadow: 0 5px 15px rgb(23 44 40 / 6%); }
.service-card-top { display: flex; width: 100%; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.service-category { padding: 4px 6px; border-radius: 3px; font-size: 7px; font-weight: 700; letter-spacing: .5px; }
.category-coupe { background: #e6f1e6; color: #668a67; }.category-couleur { background: #fff0e9; color: #b96e58; }.category-soin { background: #eaf1fb; color: #6886ac; }
.service-add { display: grid; width: 21px; height: 21px; place-items: center; border: 1px solid #e7ece7; border-radius: 50%; color: #687870; font-size: 15px; line-height: 1; }
.service-card > strong { color: #253a33; font-size: 10px; font-weight: 700; }
.service-duration { margin-top: 4px; color: #9aa49f; font-size: 8px; }
.service-price { margin-top: auto; padding-top: 12px; color: #324840; font-family: var(--font-display); font-size: 11px; font-weight: 800; }
.catalog-empty { padding: 32px 10px; color: #88948e; font-size: 11px; text-align: center; }

.ticket-panel { position: sticky; top: 15px; padding: 17px; border: 1px solid var(--line); border-radius: 7px; background: var(--white); }
.ticket-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 17px; }
.ticket-head .eyebrow { margin-bottom: 5px; }
.ticket-head h2 { font-size: 15px; }
.clear-ticket { padding: 5px 0 5px 8px; border: 0; background: transparent; color: #b47b70; cursor: pointer; font-size: 9px; font-weight: 600; }
.field-label { display: block; margin-bottom: 7px; color: #8b9691; font-size: 8px; font-weight: 700; letter-spacing: .7px; }
.client-input { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; outline: 0; background: var(--white); color: #4a5b54; font-size: 9px; }
.client-input:focus { border-color: #a9c28c; }
.ticket-items { max-height: 245px; overflow-y: auto; margin: 12px 0 0; }
.ticket-empty { display: grid; min-height: 100px; align-content: center; justify-items: center; border-top: 1px solid #edf0ed; border-bottom: 1px solid #edf0ed; text-align: center; }
.ticket-empty > span { display: grid; width: 24px; height: 24px; place-items: center; margin-bottom: 6px; border-radius: 50%; background: #f0f5ed; color: #7e9a69; font-size: 16px; }
.ticket-empty strong { color: #65746d; font-size: 9px; }
.ticket-empty small { margin-top: 4px; color: #a1aaa6; font-size: 8px; }
.ticket-item { padding: 11px 0; border-top: 1px solid #edf0ed; }
.ticket-item-main, .ticket-item-detail { display: flex; align-items: center; justify-content: space-between; }
.ticket-item-main strong { color: #3d5048; font-size: 9px; }
.remove-item { width: 22px; height: 22px; border: 0; border-radius: 4px; background: transparent; color: #a1aaa6; cursor: pointer; font-size: 16px; }
.remove-item:hover { background: var(--coral-soft); color: #bc6554; }
.ticket-item-detail { margin-top: 7px; color: #6e7d76; font-size: 9px; }
.quantity-control { display: flex; height: 23px; align-items: center; gap: 8px; border: 1px solid #e9ede9; border-radius: 4px; }
.quantity-control button { width: 22px; height: 21px; border: 0; background: transparent; color: #74827b; cursor: pointer; }
.quantity-control span { min-width: 8px; color: #52635b; font-size: 8px; text-align: center; }
.ticket-summary { display: grid; gap: 10px; padding: 13px 0; border-bottom: 1px solid #edf0ed; }
.ticket-summary > div { display: flex; align-items: center; justify-content: space-between; color: #89948f; font-size: 9px; }
.ticket-summary > div strong { color: #53635c; font-size: 9px; font-weight: 600; }
.discount-button { padding: 0; border: 0; background: transparent; color: #8da66f; cursor: pointer; font-size: 9px; font-weight: 700; }
.ticket-summary .ticket-total { margin-top: 2px; color: #53635c; font-size: 10px; font-weight: 700; }
.ticket-summary .ticket-total strong { color: var(--ink); font-family: var(--font-display); font-size: 15px; font-weight: 800; }
.ticket-panel > select { margin-bottom: 14px; }
.payment-label { margin-top: 1px; }
.payment-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 14px; }
.payment-option { display: flex; min-height: 53px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--line); border-radius: 5px; background: var(--white); color: #89948f; cursor: pointer; font-size: 8px; }
.payment-option.is-chosen { border-color: #a7bf8b; background: #f5f9ef; color: #47603a; }
.payment-icon { font-family: var(--font-display); font-size: 11px; font-weight: 800; }.cash-icon { color: #7eaa68; font-size: 13px; }.other-icon { color: #94a19a; font-size: 10px; }
.checkout-button { display: flex; width: 100%; min-height: 43px; align-items: center; justify-content: space-between; padding: 0 13px; border: 0; border-radius: 5px; background: var(--ink); color: var(--white); cursor: pointer; font-size: 10px; font-weight: 700; }
.checkout-button span:last-child { color: var(--mint); }
.checkout-button:hover:not(:disabled) { background: #27463e; }
.checkout-button:disabled { background: #a5b0ab; cursor: not-allowed; }
.ticket-note { margin: 8px 0 0; color: #a0aaa5; font-size: 7px; text-align: center; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 20; max-width: calc(100vw - 32px); padding: 12px 16px; transform: translateY(12px); border-radius: 5px; background: var(--ink); color: white; opacity: 0; pointer-events: none; font-size: 10px; transition: opacity .2s ease, transform .2s ease; }
.toast.is-visible { transform: translateY(0); opacity: 1; }

.logout-form { margin-top: -8px; }
.logout-button { width: 100%; padding: 7px 9px; border: 1px solid #344a44; border-radius: 5px; background: transparent; color: #b1beb9; cursor: pointer; font-size: 9px; text-align: left; }
.logout-button:hover { border-color: #61766e; color: var(--white); }
.workspace-switch { display: inline-flex; min-height: 34px; align-items: center; padding: 0 11px; border: 1px solid #dce8cf; border-radius: 5px; background: #f2f7e9; color: #526a42; font-size: 9px; font-weight: 700; white-space: nowrap; }
.workspace-switch:hover { background: #e7f1d8; }

.login-page { min-height: 100vh; background: #f7f8f5; }
.login-layout { display: grid; min-height: 100vh; grid-template-columns: minmax(320px, .92fr) minmax(380px, 1.08fr); }
.login-brand-panel { position: relative; display: flex; min-height: 100vh; flex-direction: column; overflow: hidden; padding: 34px clamp(28px, 5vw, 76px); background: var(--ink); color: var(--white); }
.login-brand { position: relative; z-index: 1; align-self: flex-start; }
.login-brand-message { position: relative; z-index: 1; width: min(100%, 460px); margin: auto 0; padding: 58px 0; }
.login-brand-message .eyebrow { color: #a7b8af; }
.login-brand-message h1 { margin: 18px 0 22px; color: #f4f7f0; font-size: clamp(34px, 4vw, 56px); font-weight: 600; line-height: 1.16; }
.login-brand-line { display: block; width: 48px; height: 3px; margin-bottom: 14px; background: var(--mint); }
.login-brand-message > p:last-child { margin: 0; color: #bac7c1; font-size: 11px; }
.login-decoration { position: absolute; right: -70px; bottom: -175px; color: rgb(201 242 120 / 6%); font-family: var(--font-display); font-size: 530px; font-weight: 800; line-height: 1; pointer-events: none; }
.login-location { position: relative; z-index: 1; color: #93a49c; font-size: 8px; font-weight: 700; letter-spacing: 1.1px; }
.login-location span { padding: 0 5px; color: var(--mint); }
.login-form-panel { display: flex; min-height: 100vh; flex-direction: column; align-items: center; justify-content: center; padding: 42px 28px 30px; }
.login-form-wrap { width: min(100%, 365px); margin: auto 0; }
.login-form-wrap > .eyebrow { margin-bottom: 8px; color: #8c9992; }
.login-form-wrap h2 { margin-bottom: 8px; font-size: 25px; }
.login-intro { margin-bottom: 27px; color: #87938d; font-size: 11px; line-height: 1.6; }
.login-form { display: grid; gap: 9px; }
.login-form > label, .user-create-form > label { display: flex; justify-content: space-between; margin-top: 6px; color: #7e8a84; font-size: 8px; font-weight: 700; letter-spacing: .7px; }
.login-form > label span, .user-create-form > label span { color: #9da7a2; font-size: 8px; font-weight: 500; letter-spacing: 0; }
.login-form > input, .user-create-form > input, .user-create-form > select { width: 100%; min-height: 43px; padding: 0 12px; border: 1px solid #e1e7e1; border-radius: 5px; outline: 0; background: #fff; color: var(--ink); font-size: 12px; }
.login-form > input:focus, .user-create-form > input:focus, .user-create-form > select:focus { border-color: #a7bf8b; box-shadow: 0 0 0 3px rgb(167 191 139 / 16%); }
.login-form > input[name="pin"], .user-create-form > input[name="pin"] { letter-spacing: 5px; }
.login-submit, .admin-submit { display: flex; min-height: 45px; align-items: center; justify-content: space-between; margin-top: 13px; padding: 0 15px; border: 0; border-radius: 5px; background: var(--ink); color: var(--white); cursor: pointer; font-size: 10px; font-weight: 700; }
.login-submit span, .admin-submit span { color: var(--mint); font-size: 17px; }
.login-submit:hover, .admin-submit:hover { background: #27463e; }
.login-help { margin: 15px 0 0; color: #929d97; font-size: 9px; text-align: center; }
.login-copyright { color: #9ba59f; font-size: 8px; }
.form-alert, .admin-alert { padding: 11px 12px; border: 1px solid #f0d0c8; border-radius: 5px; background: #fff3f0; color: #a54f3f; font-size: 10px; line-height: 1.5; }
.form-alert { margin: 0 0 15px; }

.admin-heading { align-items: center; }
.admin-summary { display: flex; gap: 8px; }
.admin-summary span { display: inline-flex; align-items: center; gap: 5px; min-height: 33px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--white); color: #87938d; font-size: 9px; }
.admin-summary strong { color: #42564d; font-family: var(--font-display); font-size: 12px; }
.admin-alert { margin: -8px 42px 15px; }
.admin-alert-success { border-color: #dce9d3; background: #f2f8ed; color: #57774a; }
.admin-layout { display: grid; grid-template-columns: minmax(250px, .75fr) minmax(0, 1.65fr); align-items: start; gap: 14px; margin: 0 42px 32px; }
.user-create-panel, .users-list-panel { min-width: 0; padding: 18px; }
.admin-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.admin-panel-heading .eyebrow { margin-bottom: 5px; }
.admin-panel-heading h2 { font-size: 14px; }
.admin-panel-symbol { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 6px; background: #eff6e7; color: #74945b; font-size: 19px; }
.user-create-form { display: grid; gap: 8px; }
.user-create-form > input, .user-create-form > select { min-height: 38px; font-size: 10px; }
.user-create-form > label { margin-top: 5px; }
.admin-submit { min-height: 40px; margin-top: 7px; font-size: 9px; }
.admin-form-note { margin: 10px 0 0; color: #9aa49f; font-size: 8px; line-height: 1.5; }
.user-count { padding: 5px 8px; border-radius: 4px; background: #f2f5f0; color: #77847d; font-size: 8px; }
.users-table-wrap { overflow-x: auto; }
.users-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.users-table th { height: 33px; border-bottom: 1px solid #edf0ed; color: #99a29e; font-size: 7px; font-weight: 700; letter-spacing: .5px; text-align: left; }
.users-table td { height: 57px; border-bottom: 1px solid #f0f2ef; color: #77837e; font-size: 8px; }
.users-table tr:last-child td { border-bottom: 0; }
.user-name-cell { display: flex; align-items: center; gap: 8px; }
.user-name-cell > span:last-child { display: grid; gap: 3px; }
.user-name-cell strong { color: #34473f; font-size: 9px; font-weight: 600; }
.user-name-cell small { color: #98a39e; font-size: 8px; }
.role-pill { padding: 4px 6px; border-radius: 3px; font-size: 7px; font-weight: 700; }
.role-admin { background: #f7efd8; color: #88713c; }.role-cashier { background: #e9f1fa; color: #637e9c; }
.account-status { display: inline-flex; align-items: center; gap: 5px; color: #738379; font-size: 8px; }
.account-status i { width: 6px; height: 6px; border-radius: 50%; background: #84bd7d; }
.account-status.is-disabled i { background: #c58c7e; }
.account-status.is-disabled { color: #a27b72; }
.last-login-cell { color: #8e9994 !important; font-variant-numeric: tabular-nums; }
.user-action-cell { text-align: right; }
.user-toggle-button { padding: 5px 7px; border: 1px solid #e4e9e4; border-radius: 4px; background: white; color: #718078; cursor: pointer; font-size: 8px; }
.user-toggle-button:hover { border-color: #d3a39a; color: #a1594b; }
.self-account { color: #9aa49f; font-size: 8px; }
.users-empty { display: grid; min-height: 130px; align-content: center; justify-items: center; gap: 5px; border-top: 1px solid #edf0ed; color: #8b9791; font-size: 9px; }
.users-empty strong { color: #53645c; font-size: 10px; }

.staff-page-layout { display: grid; grid-template-columns: minmax(270px, .72fr) minmax(0, 1.7fr); align-items: start; gap: 14px; margin: 0 42px 32px; }
.staff-create-panel { padding: 18px; }
.staff-form { display: grid; gap: 8px; }
.staff-form > label { margin-top: 4px; color: #829089; font-size: 8px; font-weight: 700; letter-spacing: .6px; }
.staff-form > label span { color: #9da7a2; font-weight: 500; letter-spacing: 0; }
.staff-form > input, .staff-form > select, .staff-edit-form input, .staff-edit-form select { width: 100%; min-width: 0; min-height: 36px; padding: 0 9px; border: 1px solid #e3e9e3; border-radius: 4px; outline: 0; background: white; color: #40534a; font-size: 9px; }
.staff-form > input:focus, .staff-form > select:focus, .staff-edit-form input:focus, .staff-edit-form select:focus { border-color: #a7bf8b; }
.staff-list { display: grid; gap: 10px; }
.staff-card { min-width: 0; padding: 15px; }
.staff-card.is-archived { background: #fafbf9; }
.staff-card-heading { display: flex; min-width: 0; align-items: center; gap: 9px; margin-bottom: 14px; }
.staff-card-name { display: grid; flex: 1; gap: 3px; min-width: 0; }
.staff-card-name strong { overflow: hidden; color: #34473f; font-size: 11px; text-overflow: ellipsis; }
.staff-card-name small { color: #98a39e; font-size: 8px; }
.staff-edit-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 9px; }
.staff-edit-form > span { display: grid; gap: 5px; min-width: 0; }
.staff-edit-form label { color: #829089; font-size: 7px; font-weight: 700; letter-spacing: .5px; }
.staff-edit-form input, .staff-edit-form select { min-height: 32px; font-size: 8px; }
.staff-edit-form > button { min-height: 32px; }
.staff-card-footer { display: flex; align-items: center; gap: 16px; margin-top: 13px; padding-top: 10px; border-top: 1px solid #edf0ed; }
.staff-card-footer > div { display: grid; gap: 4px; }
.staff-card-footer > div > span { color: #9aa49f; font-size: 7px; font-weight: 700; letter-spacing: .45px; }
.staff-card-footer > div > strong { color: #44574e; font-family: var(--font-display); font-size: 9px; }
.staff-card-footer > form { margin-left: auto; }
.staff-empty { display: grid; min-height: 130px; align-content: center; justify-items: center; gap: 6px; padding: 18px; color: #8b9791; font-size: 9px; text-align: center; }
.staff-empty strong { color: #53645c; font-size: 11px; }
.commission-total { display: grid; gap: 6px; min-width: 155px; padding: 12px 15px; border: 1px solid #e7ebe8; border-radius: 6px; background: white; }
.commission-total > span { color: #87938d; font-size: 8px; font-weight: 700; letter-spacing: .7px; }
.commission-total > strong { color: #34483f; font-family: var(--font-display); font-size: 16px; }
.commission-page-layout { display: grid; gap: 14px; margin: 0 42px 32px; }
.commission-due-panel, .commission-history-panel { min-width: 0; padding: 18px; }
.commission-table { min-width: 820px; }
.commission-table td { padding: 7px 5px; }
.commission-due-amount { color: #31473d !important; font-weight: 700; }
.payout-form { display: flex; align-items: center; gap: 5px; }
.payout-form input, .payout-form select { min-height: 30px; padding: 0 6px; border: 1px solid #e3e9e3; border-radius: 4px; background: white; color: #54645c; font-size: 8px; }
.payout-form input { width: 95px; }
.payout-form select { max-width: 90px; }
.payout-form .user-toggle-button { min-height: 30px; background: #f3f7ec; color: #546e43; }
.commission-empty { height: 75px !important; color: #89958f !important; text-align: center; }

.assignment-block { margin-top: 10px; padding-top: 9px; border-top: 1px dashed #e8ede8; }
.assignment-heading { display: block; margin-bottom: 5px; color: #89958f; font-size: 7px; font-weight: 700; letter-spacing: .55px; }
.assignment-block > select { width: 100%; min-height: 36px; padding: 0 8px; border: 1px solid #e3e9e3; border-radius: 4px; outline: 0; background: white; color: #53645c; font-size: 9px; }
.assignment-block > select:focus { border-color: #a7bf8b; }
.assignment-commission { display: block; margin-top: 5px; color: #85928a; font-size: 8px; }
.ticket-validation { margin: 9px 0 0; color: #a15d4f; font-size: 8px; line-height: 1.45; text-align: center; }

.analytics-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(290px, .8fr); gap: 13px; margin: 0 42px 14px; }
.revenue-chart-panel, .payment-chart-panel, .top-services-panel, .admin-alerts-panel { min-width: 0; padding: 18px; }
.chart-unit { color: #98a39e; font-size: 8px; font-weight: 700; }
.revenue-chart { display: flex; height: 190px; align-items: stretch; gap: 8px; padding-top: 20px; border-bottom: 1px solid #edf0ed; }
.revenue-chart-column { display: grid; min-width: 0; flex: 1; grid-template-rows: 18px 1fr 20px; justify-items: center; align-items: end; gap: 4px; color: #85918b; }
.revenue-chart-column > strong { color: #617169; font-size: 7px; font-weight: 600; }
.revenue-bar { display: block; width: min(26px, 68%); height: var(--bar-height); min-height: 3px; align-self: end; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #b9df88, #80af72); transition: height .25s ease; }
.revenue-chart-column:last-child .revenue-bar { background: linear-gradient(180deg, #f39b7d, #e87861); }
.revenue-chart-column > small { align-self: center; color: #8d9993; font-size: 8px; }
.payment-chart-body { display: flex; min-height: 190px; align-items: center; justify-content: space-around; gap: 18px; }
.payment-donut { display: grid; width: 132px; height: 132px; flex: 0 0 132px; place-items: center; border-radius: 50%; }
.payment-donut > div { display: grid; width: 96px; height: 96px; align-content: center; justify-items: center; gap: 4px; border-radius: 50%; background: white; }
.payment-donut strong { color: #31463d; font-family: var(--font-display); font-size: 11px; text-align: center; }
.payment-donut span { color: #98a39e; font-size: 7px; font-weight: 700; letter-spacing: .7px; }
.payment-legend { display: grid; gap: 10px; }
.payment-legend > div { display: grid; grid-template-columns: 8px minmax(55px,1fr) auto; align-items: center; gap: 6px; color: #839089; font-size: 8px; }
.payment-legend i { width: 7px; height: 7px; border-radius: 2px; background: var(--payment-color); }
.payment-legend strong { color: #4a5d53; font-size: 8px; }
.top-service-row { display: grid; grid-template-columns: minmax(90px,1fr) minmax(80px,1.3fr) auto; align-items: center; gap: 10px; min-height: 36px; color: #53645c; font-size: 9px; }
.top-service-row > strong { color: #40544a; font-size: 8px; text-align: right; }
.top-service-track { height: 6px; overflow: hidden; border-radius: 4px; background: #edf1eb; }
.top-service-track > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#a8d6ae,#c9f278); }
.admin-alerts-panel { display: grid; align-content: start; }
.admin-alert-link { display: grid; grid-template-columns: 29px minmax(0,1fr) 12px; align-items: center; gap: 9px; min-height: 53px; border-top: 1px solid #edf0ed; }
.alert-icon { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 6px; background: #eff6e7; color: #65864f; font-size: 8px; font-weight: 700; }
.alert-coral { background: #fff0eb; color: #b26754; }.alert-blue { background: #edf4fc; color: #6485a7; }.alert-yellow { background: #fbf4dc; color: #927c38; }
.admin-alert-link > span:nth-child(2) { display: grid; gap: 3px; }
.admin-alert-link strong { color: #46584f; font-size: 9px; }
.admin-alert-link small { color: #919d96; font-size: 8px; }
.admin-alert-link > span:last-child { color: #95a39b; font-size: 13px; }
.appointment-admin-list { display: grid; }
.appointment-admin-row { display: flex; min-height: 56px; align-items: center; gap: 9px; border-top: 1px solid #edf0ed; }
.appointment-admin-copy { display: grid; flex: 1; min-width: 0; gap: 4px; }
.appointment-admin-copy strong { color: #46584f; font-size: 9px; }
.appointment-admin-copy small { overflow: hidden; color: #929e97; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.client-search-form, .date-filter { display: flex; gap: 6px; }
.client-search-form input, .date-filter input { min-height: 33px; padding: 0 8px; border: 1px solid #e3e9e3; border-radius: 4px; }
.client-page-layout, .appointment-page-layout, .inventory-layout, .expense-layout { display: grid; grid-template-columns: minmax(250px,.7fr) minmax(0,1.7fr); align-items: start; gap: 14px; margin: 0 42px 32px; }
.client-form-panel, .clients-list-panel, .appointment-form-panel, .appointment-list-panel, .inventory-form-panel, .inventory-list-panel, .expense-form-panel, .expense-list-panel { min-width: 0; padding: 18px; }
.client-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.client-actions .user-toggle-button { text-decoration: none; }
.client-actions a, .appointment-status-form select { color: #62756d; font-size: 8px; }
.loyalty-adjust-form { display: flex; align-items: center; gap: 8px; padding: 8px; }
.loyalty-adjust-form input { min-height: 32px; padding: 0 8px; border: 1px solid #e3e9e3; border-radius: 4px; }
.appointment-admin-row time { min-width: 72px; color: #6d7e75; font-size: 9px; }
.appointment-admin-row .appointment-status-form { display: flex; gap: 4px; }
.appointment-admin-row .appointment-status-form select { max-width: 100px; min-height: 29px; border: 1px solid #e3e9e3; border-radius: 4px; }
.stock-adjust-form { display: flex; gap: 4px; margin-bottom: 4px; }
.stock-adjust-form input { width: 74px; min-height: 28px; padding: 0 4px; border: 1px solid #e3e9e3; border-radius: 3px; font-size: 8px; }
.stock-adjust-form input[name="note"] { width: 90px; }
.expense-list-panel { overflow: hidden; }
.loyalty-redemption { display: grid; gap: 6px; margin: 9px 0; padding: 9px; border: 1px solid #e1ead5; border-radius: 5px; background: #f8fbf3; color: #61764e; font-size: 9px; }
.loyalty-redemption > label { display: flex; align-items: center; gap: 7px; font-weight: 700; }
.loyalty-redemption input[type="checkbox"] { width: 15px; height: 15px; accent-color: #77985d; }
.loyalty-redemption > small { color: #8a9980; font-size: 8px; }
#loyalty-redemption-fields { display: flex; align-items: center; gap: 8px; }
#loyalty-points-used { width: 84px; min-height: 32px; padding: 0 7px; border: 1px solid #dbe5d1; border-radius: 4px; }
#loyalty-value { color: #61764e; font-size: 8px; }
.discount-restricted { color: #9ba59f; font-size: 8px; }
.split-payment-toggle { display: flex; align-items: center; gap: 7px; margin: 8px 0; color: #78867f; font-size: 8px; }
.split-payment-toggle input { width: 14px; height: 14px; accent-color: #647d50; }
.split-payment-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; margin-bottom: 10px; }
.split-payment-fields label { display: grid; gap: 4px; color: #89958f; font-size: 7px; font-weight: 700; }
.split-payment-fields input { width: 100%; min-width: 0; min-height: 30px; padding: 0 5px; border: 1px solid #e3e9e3; border-radius: 4px; font-size: 8px; }
.register-closed { color: #a16052; }
.register-control { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: -7px 42px 16px; padding: 11px 14px; }
.register-form { display: flex; align-items: center; gap: 8px; }
.register-form label { color: #7f8c85; font-size: 8px; font-weight: 700; }
.register-form input { min-height: 32px; padding: 0 8px; border: 1px solid #e3e9e3; border-radius: 4px; font-size: 9px; }
.register-form > input[type="number"] { width: 115px; }
.register-session-info { display: flex; gap: 20px; color: #8a9690; font-size: 8px; }
.register-session-info span { display: grid; gap: 4px; }
.register-session-info strong { color: #52645b; font-size: 9px; }
.register-close-form { margin-left: auto; }
.catalog-section-heading { margin: 18px 0 8px; }
.catalog-section-heading .eyebrow { margin: 0; }
.product-card { border-style: dashed; }
.sales-history-panel, .activity-panel { margin: 0 42px 32px; padding: 18px; }
.sales-filter { display: flex; flex-wrap: wrap; align-items: end; gap: 9px; margin-bottom: 12px; }
.sales-filter label { display: grid; gap: 4px; color: #829089; font-size: 7px; font-weight: 700; }
.sales-filter input, .sales-filter select { min-height: 32px; padding: 0 7px; border: 1px solid #e3e9e3; border-radius: 4px; font-size: 9px; }
.sales-history-table { min-width: 900px; }
.sale-actions { display: flex; gap: 5px; }
.sale-actions a { text-decoration: none; }
.refund-caption { display: block; margin-top: 4px; color: #a16052; font-size: 7px; }
.refund-dialog { width: min(430px,calc(100vw - 28px)); padding: 20px; border: 1px solid #e3e9e3; border-radius: 7px; box-shadow: 0 18px 60px rgb(23 44 40 / 22%); }
.refund-dialog::backdrop { background: rgb(20 35 30 / 38%); }
.refund-dialog form { display: grid; gap: 9px; }
.refund-dialog label { color: #829089; font-size: 8px; font-weight: 700; }
.refund-dialog input, .refund-dialog textarea, .refund-dialog select { width: 100%; padding: 8px; border: 1px solid #e3e9e3; border-radius: 4px; font: inherit; font-size: 10px; }
.dialog-close { border: 0; background: none; color: #85918b; font-size: 20px; cursor: pointer; }
.backup-layout { display: grid; grid-template-columns: minmax(260px,.7fr) minmax(0,1.5fr); gap: 14px; margin: 0 42px 32px; }
.backup-create-panel, .backup-list-panel { min-width: 0; padding: 18px; }
.backup-description { color: #7f8c85; font-size: 10px; line-height: 1.6; }
.activity-panel { overflow: hidden; }

.catalogue-admin-layout { display: grid; grid-template-columns: minmax(270px, .78fr) minmax(0, 1.55fr); align-items: start; gap: 14px; margin: 0 42px 32px; }
.catalogue-create-panel, .category-manager-panel, .service-manager-panel { min-width: 0; padding: 18px; }
.catalogue-create-form { display: grid; gap: 8px; }
.catalogue-create-form > label, .category-edit-fields label, .service-edit-form > label, .service-edit-numbers label { color: #829089; font-size: 7px; font-weight: 700; letter-spacing: .55px; }
.catalogue-create-form > input, .catalogue-create-form > select, .category-edit-fields input, .service-edit-form > input, .service-edit-form > select, .service-edit-numbers input { width: 100%; min-width: 0; min-height: 34px; padding: 0 8px; border: 1px solid #e3e9e3; border-radius: 4px; outline: 0; background: white; color: #40534a; font-size: 9px; }
.catalogue-create-form input:focus, .catalogue-create-form select:focus, .category-edit-fields input:focus, .service-edit-form input:focus, .service-edit-form select:focus, .service-edit-numbers input:focus { border-color: #a7bf8b; }
.catalogue-create-row, .service-create-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.catalogue-create-row > span, .service-create-row > span { display: grid; gap: 6px; }
.catalogue-create-row input[type="color"], .category-edit-fields input[type="color"] { min-height: 34px; padding: 3px; cursor: pointer; }
.catalogue-service-heading { margin: 25px 0 11px; padding-top: 17px; border-top: 1px solid #edf0ed; }
.category-manager-panel { margin-bottom: 14px; }
.category-admin-list { display: grid; }
.category-admin-item { padding: 14px 0; border-top: 1px solid #edf0ed; }
.category-admin-item.is-archived, .service-admin-card.is-archived { background: #fafbf9; }
.category-edit-heading, .service-admin-title { display: flex; min-height: 25px; align-items: center; gap: 8px; margin-bottom: 11px; }
.category-edit-heading > strong, .service-admin-title > strong { color: #41544b; font-size: 10px; font-weight: 700; }
.category-color-chip { display: inline-block; width: 11px; height: 11px; flex: 0 0 11px; border-radius: 50%; background: var(--category-color, #A8D6AE); }
.category-edit-heading .user-count { margin-left: auto; }
.category-edit-fields { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(80px, .8fr) minmax(130px, 1.4fr) 64px 62px; align-items: end; gap: 8px; }
.category-edit-fields > span, .service-edit-numbers > span { display: grid; gap: 5px; min-width: 0; }
.category-edit-fields input { min-height: 32px; }
.catalogue-actions, .category-secondary-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 9px; }
.category-secondary-actions { margin-top: 5px; }
.category-secondary-actions form, .service-delete-form { display: inline-flex; align-items: center; gap: 8px; }
.danger-action { color: #a5695c; }
.danger-action:hover { border-color: #dfb6ad; background: #fff5f2; color: #a24e40; }
.service-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.service-admin-card { min-width: 0; padding: 12px; border: 1px solid #e8ece8; border-radius: 5px; }
.service-admin-title { flex-wrap: wrap; }
.service-admin-title > strong { flex: 1; }
.service-edit-form { display: grid; gap: 6px; }
.service-edit-form > input, .service-edit-form > select { min-height: 32px; }
.service-edit-numbers { display: grid; grid-template-columns: .9fr 1.2fr 1fr .7fr; gap: 6px; }
.service-create-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.service-edit-numbers input { min-height: 32px; }
.service-delete-form { display: flex; justify-content: flex-end; margin-top: 8px; }
.catalogue-usage-note { color: #9a8179; font-size: 8px; }
.category-tab[style*="--category-color"] { border-color: color-mix(in srgb, var(--category-color) 28%, transparent); }
.category-tab.is-selected[style*="--category-color"] { border-color: color-mix(in srgb, var(--category-color) 52%, white); background: color-mix(in srgb, var(--category-color) 16%, white); color: #35473f; }
.service-category[style*="--category-color"] { background: color-mix(in srgb, var(--category-color) 19%, white); color: color-mix(in srgb, var(--category-color) 70%, #172c28); }

@media (max-width: 1180px) {
    .topbar { padding-right: 28px; padding-left: 28px; }
    .page-heading, .metric-grid, .dashboard-grid, .bottom-grid, .pos-layout { margin-right: 28px; margin-left: 28px; }
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metric-card { min-height: 137px; }
    .pos-layout { grid-template-columns: minmax(0, 1fr) 310px; }
    .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 850px) {
    .sidebar { width: min(290px, 82vw); transform: translateX(-101%); transition: transform .22s ease; box-shadow: 14px 0 32px rgb(15 35 29 / 13%); }
    .sidebar.is-open { transform: translateX(0); }
    .main-content { margin-left: 0; }
    .topbar { justify-content: flex-start; gap: 12px; }
    .menu-toggle { display: block; min-width: 44px; min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); color: #53635c; cursor: pointer; font-size: 10px; }
    .nav-link { min-height: 48px; }
    .dashboard-grid, .bottom-grid { grid-template-columns: 1fr; }
    .schedule-panel { padding-bottom: 0; }
    .pos-layout { grid-template-columns: minmax(0, 1fr) 300px; }
    .ticket-panel { position: static; }
    .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .category-tab { min-height: 38px; }
    .payment-option { min-height: 60px; }
    .admin-layout { grid-template-columns: minmax(0, 1fr); }
    .catalogue-admin-layout { grid-template-columns: minmax(0, 1fr); }
    .staff-page-layout { grid-template-columns: minmax(0, 1fr); }
    .client-page-layout, .appointment-page-layout, .inventory-layout, .expense-layout { grid-template-columns: minmax(0,1fr); }
    .analytics-grid { grid-template-columns: minmax(0,1fr); }
    .backup-layout { grid-template-columns: minmax(0,1fr); }
    .category-edit-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .topbar { height: 56px; justify-content: flex-start; gap: 12px; padding: 0 16px; }
    .topbar-right { gap: 9px; margin-left: auto; }
    .today-label { font-size: 8px; }
    .breadcrumb { gap: 6px; font-size: 9px; }
    .page-heading { align-items: flex-start; margin: 25px 16px 18px; }
    h1 { font-size: 22px; }
    .page-subtitle { font-size: 10px; }
    .page-heading .button { min-height: 35px; padding: 0 10px; font-size: 9px; white-space: nowrap; }
    .metric-grid, .dashboard-grid, .bottom-grid, .pos-layout { margin-right: 16px; margin-left: 16px; }
    .metric-grid { gap: 9px; }
    .metric-card { min-height: 128px; padding: 13px; }
    .metric-value { font-size: 25px; }
    .metric-foot { flex-wrap: wrap; gap: 4px; }
    .metric-note { font-size: 8px; }
    .dashboard-grid, .bottom-grid { gap: 9px; }
    .sales-panel, .schedule-panel { padding-right: 12px; padding-left: 12px; }
    .sales-table { min-width: 540px; }
    .objective-panel { min-height: 138px; padding: 15px; }
    .objective-ring { width: 70px; height: 70px; flex-basis: 70px; }
    .objective-ring > div { width: 57px; height: 57px; }
    .objective-ring strong { font-size: 16px; }
    .tip-panel { min-height: 126px; padding: 16px; }
    .caisse-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
    .register-status { font-size: 8px; }
    .pos-layout { grid-template-columns: minmax(0, 1fr); }
    .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .service-card { min-height: 129px; padding: 10px; }
    .category-tabs { gap: 2px; }
    .category-tab { padding: 0 9px; }
    .ticket-panel { padding: 14px; }
    .login-layout { grid-template-columns: 1fr; }
    .login-brand-panel { min-height: auto; padding: 22px 20px 17px; }
    .login-brand-message { margin: 27px 0 20px; padding: 0; }
    .login-brand-message h1 { margin: 10px 0 14px; font-size: 27px; }
    .login-brand-line { margin-bottom: 9px; }
    .login-brand-message > p:last-child { font-size: 9px; }
    .login-decoration { right: -40px; bottom: -65px; font-size: 230px; }
    .login-location { font-size: 7px; }
    .login-form-panel { min-height: auto; padding: 31px 20px 20px; }
    .login-form-wrap h2 { font-size: 22px; }
    .login-copyright { margin-top: 20px; }
    .admin-heading { flex-direction: column; align-items: flex-start; }
    .admin-alert { margin-right: 16px; margin-left: 16px; }
    .admin-layout { margin-right: 16px; margin-left: 16px; }
    .catalogue-admin-layout { margin-right: 16px; margin-left: 16px; }
    .staff-page-layout, .commission-page-layout { margin-right: 16px; margin-left: 16px; }
    .user-create-panel, .users-list-panel { padding: 14px; }
    .catalogue-create-panel, .category-manager-panel, .service-manager-panel { padding: 14px; }
    .category-edit-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .service-admin-grid { grid-template-columns: minmax(0, 1fr); }
    .service-create-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .staff-edit-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .staff-card-heading { flex-wrap: wrap; }
    .staff-card-footer { flex-wrap: wrap; gap: 12px; }
    .commission-total { min-width: 0; }
    .commission-due-panel, .commission-history-panel { padding: 13px; }
    .client-page-layout, .appointment-page-layout, .inventory-layout, .expense-layout, .analytics-grid, .backup-layout, .sales-history-panel, .activity-panel { margin-right: 16px; margin-left: 16px; }
    .client-form-panel, .clients-list-panel, .appointment-form-panel, .appointment-list-panel, .inventory-form-panel, .inventory-list-panel, .expense-form-panel, .expense-list-panel, .revenue-chart-panel, .payment-chart-panel, .top-services-panel, .admin-alerts-panel { padding: 13px; }
    .payment-chart-body { gap: 10px; }
    .payment-donut { width: 105px; height: 105px; flex-basis: 105px; }
    .payment-donut > div { width: 75px; height: 75px; }
    .register-control { align-items: flex-start; flex-direction: column; margin-right: 16px; margin-left: 16px; }
    .register-form { flex-wrap: wrap; }
    .register-close-form { margin-left: 0; }
    .split-payment-fields { grid-template-columns: 1fr; }
    .client-search-form, .date-filter { flex-wrap: wrap; }
    .sales-filter { align-items: stretch; }
    .client-actions { min-width: 180px; }
    .refund-dialog { padding: 15px; }
    .workspace-switch { min-height: 31px; padding: 0 8px; font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}