/* ============================================================
   Salon Center v2 — bundle entry
   ------------------------------------------------------------
   Mọi CSS v2 đều scope dưới `.sc2` và prefix `sc2-` để KHÔNG
   đụng với CSS toàn cục của app MVC (và ngược lại).
   Thứ tự @import = thứ tự cascade. Giữ root trước layout.
   ============================================================ */
@import url("./sc2-root.css?v=20261012-shared-tech-view");
@import url("./sc2-layout.css?v=20261015-combined-header44-underline2");
@import url("./sc2-resize.css?v=20261013-splitter-hover-grip");
@import url("./sc2-tech.css?v=20261023-tech-clocked-out");
@import url("./sc2-ticket.css?v=20261029-ticket-halftone");
@import url("./sc2-coming.css?v=20261014-coming-shared-list-yellow-gap-centered-grip");
@import url("./sc2-checkin.css?v=20261014-checkin-launcher-theme");
@import url("./sc2-bottom-sheet.css?v=20261015-common-bottom-sheets");

#sc2-root,
#quickSaleModal .sc2-frame-header {
   --sc2-header-h: 44px;
   --sc2-header-tool-size: 32px;
}

#quickSaleModal .sc2-frame-header {
   margin: 0;
}

#sc2-root .sc2-frame:not(.is-collapsed) > .sc2-frame__header,
#sc2-root .sc2-coming__header,
.sc2-frame-header {
   display: flex;
   align-items: center;
   flex: 0 0 var(--sc2-header-h, 44px);
   height: var(--sc2-header-h, 44px);
   min-height: var(--sc2-header-h, 44px);
   gap: 6px;
   padding: 0 max(10px, var(--sc2-safe-right, 0px)) 0 max(10px, var(--sc2-safe-left, 0px));
   border-bottom: 1px solid var(--sc2-frame-border, #e1e6e9);
   background: var(--sc2-frame-bg, #fff);
   color: var(--sc2-header-fg, var(--bs-text));
}

:is(#sc2-root .sc2-frame__header, #quickSaleModal .sc2-frame-header) :is(.sc2-tech-tabs, .sc2-ticket-tabs),
.sc2-frame-header__tabs {
   display: flex;
   flex: 1;
   min-width: 0;
   align-self: stretch;
   gap: 2px;
   padding: 0;
}

/* Collapsed columns show only the expand button and vertical title. */
#sc2-root .sc2-frame.is-collapsed > .sc2-frame__header :is(.sc2-tech-tabs, .sc2-ticket-tabs) {
   display: none;
}

:is(#sc2-root .sc2-frame__header, #quickSaleModal .sc2-frame-header) :is(.sc2-tech-tab, .sc2-ticket-tab),
#sc2-root .sc2-frame-tabs__display,
#sc2-root .sc2-coming__tab,
.sc2-frame-header__tab,
:is(#sc2-root, #quickSaleModal .sc2-frame-header) .sc2-frame__collapse {
   cursor: pointer;
   transition: background-color 0.15s ease, color 0.15s ease;
}

:is(#sc2-root, #quickSaleModal .sc2-frame-header) .sc2-frame__collapse:is(:hover, :focus-visible) {
   background: color-mix(in srgb, var(--sc2-primary, var(--bs-main, #359520)) 12%, transparent);
   color: var(--pos-primary-text, var(--sc2-primary, var(--bs-main, #359520)));
}

:is(#sc2-root, #quickSaleModal .sc2-frame-header) .sc2-frame__collapse:focus-visible {
   outline: 2px solid var(--sc2-primary, var(--bs-main, #359520));
   outline-offset: 1px;
}

.sc2-frame-header__select {
   display: inline-flex;
   align-items: center;
   flex: none;
   position: relative;
   height: var(--sc2-header-h, 44px);
   min-height: var(--sc2-header-h, 44px);
   gap: 6px;
   padding: 0 8px;
   border: 0;
   border-radius: 0;
   background: transparent;
   box-shadow: none;
   color: var(--sc2-muted, #6d7782);
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 0;
}

:is(#sc2-root .sc2-frame__header, #quickSaleModal .sc2-frame-header) .sc2-tech-tab {
   height: 100%;
   min-height: 0;
}

:is(#sc2-root .sc2-frame__header, #quickSaleModal .sc2-frame-header) :is([data-sc2-tech-tab="all"], [data-sc2-ticket-tab="all"]),
:is(#sc2-root .sc2-frame__header, #quickSaleModal .sc2-frame-header):has(:is([data-sc2-tech-tab="all"], [data-sc2-ticket-tab="all"]).is-active)
   .sc2-frame-tabs__display {
   font-size: 15px;
}

:is(#sc2-root .sc2-frame__header, #quickSaleModal .sc2-frame-header) :is(.sc2-tech-tab, .sc2-ticket-tab).is-active,
#sc2-root .sc2-frame-tabs__display,
#sc2-root .sc2-coming__tab.is-active,
.sc2-frame-header__tab.is-active,
.sc2-frame-header__select {
   color: var(--pos-primary-text, var(--sc2-primary, var(--bs-main)));
}

:is(#sc2-root .sc2-frame__header, #quickSaleModal .sc2-frame-header) :is(.sc2-tech-tab, .sc2-ticket-tab):hover,
#sc2-root .sc2-frame-tabs__display:hover,
#sc2-root .sc2-coming__tab:hover,
#sc2-root .sc2-workspace-nav__tab:hover,
#sc2-root .sc2-combined-header .sc2-combined-header__children :is(.sc2-ticket-tab, .sc2-coming__tab):hover,
.sc2-frame-header__tab:hover,
.sc2-frame-header__select:hover {
   background: var(--pos-surface2, #f6f8f7);
}

:is(#sc2-root .sc2-frame__header, #quickSaleModal .sc2-frame-header) :is(.sc2-tech-tab, .sc2-ticket-tab).is-active::after,
#sc2-root .sc2-frame-tabs__display::after,
#sc2-root .sc2-coming__tab.is-active::after,
.sc2-frame-header__tab.is-active::after,
.sc2-frame-header__select::after {
   content: "";
   position: absolute;
   height: 2px;
   right: 0px;
   bottom: 0;
   left: 0px;
   border-radius: 0;
   background: var(--sc2-primary, var(--bs-main));
}

:is(#sc2-root, #quickSaleModal .sc2-frame-header) :is(.sc2-tech-tab__count, .sc2-ticket-tab__count, .sc2-coming__tab-count,
   .sc2-coming__total, .sc2-coming__late, .sc2-workspace-nav__count,
   .sc2-frame-tabs__count),
.sc2-frame-header .sc2-frame-header__count {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 20px;
   min-height: 20px;
   height: 20px;
   padding: 0 5px;
   border-radius: 6px;
   background: var(--pos-surface2, #f0f2f4);
   color: var(--sc2-muted, #6d7782);
   font-size: 11px;
   font-weight: 600;
   line-height: 1;
   font-variant-numeric: tabular-nums;
}

:is(#sc2-root, #quickSaleModal .sc2-frame-header) :is(.sc2-tech-tab, .sc2-ticket-tab, .sc2-coming__tab,
      .sc2-workspace-nav__tab).is-active :is(.sc2-tech-tab__count, .sc2-ticket-tab__count,
      .sc2-coming__tab-count, .sc2-workspace-nav__count),
   #sc2-root .sc2-frame-tabs__count,
#sc2-root .sc2-coming__total,
.sc2-frame-header__tab.is-active .sc2-frame-header__count,
.sc2-frame-header__select .sc2-frame-header__count {
   background: var(--pos-primary-soft, color-mix(in srgb, var(--sc2-primary, var(--bs-main)) 12%, white));
   color: var(--pos-primary-text, var(--sc2-primary, var(--bs-main)));
}

#sc2-root .sc2-frame__actions,
.sc2-frame-header .sc2-frame__actions {
   flex: 0 0 auto;
   width: auto;
   min-height: var(--sc2-header-tool-size, 32px);
   gap: 4px;
}

:is(#sc2-root, #quickSaleModal .sc2-frame-header) :is(.sc2-icon-btn, .sc2-frame__collapse),
.sc2-frame-header .sc2-frame-header__tool {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
   width: var(--sc2-header-tool-size, 32px);
   height: var(--sc2-header-tool-size, 32px);
   padding: 0;
   border: 0;
   border-radius: 4px;
   background: transparent;
   color: var(--sc2-muted, #6d7782);
}

.sc2-frame-header__select {
   display: none;
   flex: 1;
   min-width: 0;
}

.sc2-frame-header__select select {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   cursor: pointer;
}

.sc2-frame-header__select > i {
   margin-left: auto;
   color: var(--sc2-muted, #6d7782);
}

.sc2-frame-header button:focus-visible,
.sc2-frame-header__select:focus-within {
   outline: 2px solid var(--sc2-primary, var(--bs-main));
   outline-offset: -3px;
}

#sc2-root [data-sc2-ticket-search]:not([hidden]):not(.dis-none) {
   display: inline-flex;
}

#sc2-root :is([data-sc2-tech-searchbar], [data-sc2-ticket-searchbar]):not(.is-open) {
   display: none;
}

#sc2-root .sc2-frame-tabs__display > i {
   order: 1;
   margin-left: 2px;
   color: var(--sc2-muted);
}

#sc2-root .sc2-frame--pending.is-collapsed > .sc2-frame__header {
   flex-basis: 48px;
   height: 48px;
}

#sc2-root .sc2-coming {
   background: var(--sc2-frame-bg);
}

#sc2-root .sc2-coming__chevron {
   order: -1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: var(--sc2-header-tool-size);
   height: var(--sc2-header-tool-size);
   margin-left: 0;
   color: var(--sc2-muted);
}

#sc2-root .sc2-coming__ico {
   display: none;
}

#sc2-root .sc2-coming__title {
   font-size: 12px;
}

#sc2-root .sc2-coming__late-label {
   margin-left: 10px;
   padding-left: 12px;
   border-left: 1px solid var(--sc2-frame-border);
   color: #c23636;
   font-size: 12px;
}

#sc2-root .sc2-coming__late {
   background: #fef2f2;
   color: #c23636;
}

#sc2-root .sc2-workspace-nav__tab {
   min-height: 44px;
   height: 44px;
   padding: 0 12px;
}

#sc2-root .sc2-workspace-nav__label {
   display: inline-flex;
   align-items: center;
   gap: 6px;
}

#sc2-root .sc2-workspace-nav__count {
   position: static;
}

#sc2-root .sc2-workspace-nav__tab.is-active::after {
   height: 2px;
   border-radius: 0;
}

#sc2-root:is([data-sc2-layout="tablet"], [data-sc2-layout="mobile"]) {
   --sc2-header-h: 52px;
   --sc2-header-tool-size: 44px;
}

@media (pointer: coarse) {
   #sc2-root,
   .sc2-frame-header {
      --sc2-header-h: 52px;
      --sc2-header-tool-size: 44px;
   }
}

#sc2-root[data-sc2-layout="mobile"] {
   --sc2-header-h: 48px;
   --sc2-header-tool-size: 44px;
}

#sc2-root[data-sc2-layout="mobile"] .sc2-frame__header > .sc2-frame__collapse {
   display: none;
}

#sc2-root[data-sc2-layout="mobile"] .sc2-frame > .sc2-frame__header {
   flex-wrap: nowrap;
   gap: 4px;
   padding: 0 max(8px, var(--sc2-safe-right, 0px)) 0 max(8px, var(--sc2-safe-left, 0px));
}

#sc2-root[data-sc2-layout="mobile"] #sc2-frame-tech > .sc2-frame__header {
   --sc2-header-h: 44px;
}

#sc2-root[data-sc2-layout="mobile"] .sc2-workspace-nav__tabs {
   scroll-padding-inline: 8px;
}

#sc2-root[data-sc2-layout="mobile"] .sc2-workspace-nav__tab {
   flex: 0 0 auto;
   height: 44px;
   min-height: 44px;
   padding: 0 8px;
   font-size: 12px;
   line-height: 16px;
}

#sc2-root[data-sc2-layout="mobile"] .sc2-workspace-nav__label {
   gap: 4px;
}

#sc2-root[data-sc2-layout="mobile"] .sc2-frame__header :is(.sc2-tech-tab, .sc2-ticket-tab),
#sc2-root[data-sc2-layout="mobile"] .sc2-frame-tabs__display {
   gap: 4px;
   padding: 0 6px;
   font-size: 12px;
   line-height: 18px;
}

#sc2-root[data-sc2-layout="mobile"] .sc2-frame__header :is([data-sc2-tech-tab="all"], [data-sc2-ticket-tab="all"]),
#sc2-root[data-sc2-layout="mobile"] .sc2-frame__header:has(:is([data-sc2-tech-tab="all"], [data-sc2-ticket-tab="all"]).is-active)
   .sc2-frame-tabs__display {
   font-size: 14px;
}

#sc2-root[data-sc2-layout="mobile"] :is(.sc2-tech-tab__count, .sc2-ticket-tab__count,
   .sc2-frame-tabs__count, .sc2-workspace-nav__count) {
   min-width: 18px;
   min-height: 18px;
   height: 18px;
   padding: 0 4px;
   border-radius: 4px;
   font-size: 10px;
}

#sc2-root[data-sc2-layout="mobile"] .sc2-frame-tabs__display > i {
   font-size: 10px;
}

#sc2-root .sc2-frame-search {
   --swift-search-width: 100%;
   --swift-search-height: 36px;
   flex: 0 0 auto;
   align-self: stretch;
   width: auto;
   min-height: 36px;
   margin: 8px 8px 0;
}

#sc2-root .sc2-frame-search:not(.is-open),
#sc2-root .sc2-frame.is-collapsed > .sc2-frame-search {
   display: none;
}

/* Keep the legend below the resizable workspace, above the application footer. */
#sc2-root {
   display: flex;
   flex-direction: column;
}

#sc2-root > .sc2-grid {
   flex: 1 1 0;
   height: 0;
}

.sc2-legend {
   --sc2-legend-fade-start: 0px;
   --sc2-legend-fade-end: 0px;
   position: relative;
   z-index: 31;
   display: flex;
   flex: 0 0 auto;
   align-items: center;
   gap: 12px;
   width: 100%;
   min-height: 42px;
   padding: 0 max(12px, var(--sc2-safe-right)) 0 max(12px, var(--sc2-safe-left));
   border-top: 1px solid var(--sc2-frame-border);
   background: var(--sc2-frame-bg);
   color: var(--sc2-muted);
   font-size: 11px;
   font-weight: 500;
   line-height: 18px;
}

.sc2-legend[data-open="false"] {
   min-height: 0;
   height: 0;
   border: 0;
}

.sc2-legend__toggle {
   display: inline-grid;
   flex: none;
   place-items: center;
   width: 28px;
   height: 28px;
   padding: 0;
   border: 1px solid transparent;
   border-radius: 50%;
   background: color-mix(in srgb, var(--sc2-muted) 8%, var(--sc2-frame-bg));
   color: var(--sc2-header-fg);
   font-size: 16px;
   cursor: pointer;
}

.sc2-legend__toggle:hover {
   background: color-mix(in srgb, var(--sc2-muted) 16%, var(--sc2-frame-bg));
}

.sc2-legend[data-open="false"] .sc2-legend__toggle {
   position: absolute;
   left: max(12px, var(--sc2-safe-left));
   bottom: max(8px, var(--sc2-safe-bottom));
   border-color: var(--sc2-frame-border);
   background: var(--sc2-frame-bg);
   box-shadow: 0 2px 8px #0002;
}

.sc2-legend__track {
   display: flex;
   flex: 1 1 auto;
   align-items: center;
   gap: 24px;
   min-width: 0;
   padding: 10px 0;
   overflow-x: auto;
   overscroll-behavior-x: contain;
   scrollbar-width: none;
   mask-image: linear-gradient(to right, transparent, #000 var(--sc2-legend-fade-start),
      #000 calc(100% - var(--sc2-legend-fade-end)), transparent);
}

.sc2-legend__track::-webkit-scrollbar { display: none; }
.sc2-legend__track[hidden] { display: none; }
.sc2-legend.fade-start { --sc2-legend-fade-start: 20px; }
.sc2-legend.fade-end { --sc2-legend-fade-end: 20px; }

.sc2-legend__group,
.sc2-legend__item {
   display: inline-flex;
   flex: none;
   align-items: center;
   white-space: nowrap;
}

.sc2-legend__group { gap: 12px; }
.sc2-legend__item { gap: 6px; }
.sc2-legend__group + .sc2-legend__group {
   padding-left: 24px;
   border-left: 1px solid var(--sc2-frame-border);
}
.sc2-legend__label { font-size: 10px; font-weight: 600; text-transform: uppercase; }

.sc2-legend__frame {
   width: 16px;
   height: 10px;
   border: 1.5px solid;
   border-radius: 3px;
}
.sc2-legend__frame--walkin { border-color: var(--sc2-tix-walkin); }
.sc2-legend__frame--appt { border-color: var(--sc2-tix-appt); }
.sc2-legend__frame--inservice { border-color: var(--sc2-tix-inservice); }
.sc2-legend__frame--pending { border-color: var(--sc2-tix-done); }
.sc2-legend__updated,
.sc2-legend__past {
   padding: 0 4px;
   border-radius: 3px;
   background: #6b7280;
   color: #fff;
}
.sc2-legend__updated { background: #03a2e2; }
.sc2-legend__dot { width: 8px; height: 8px; border-radius: 50%; }
.sc2-legend__dot--ready { background: var(--pos-confirmed-solid-fill, #059669); }
.sc2-legend__dot--busy { background: #e11d48; }
.sc2-legend__dot--out { background: #6b7280; }
.sc2-legend__progress {
   width: 22px;
   height: 5px;
   border-radius: 99px;
   background: linear-gradient(to right, #16a34a 60%, #eef1f5 60%);
}
.sc2-legend__overdue { color: #dc2626; font-size: 10px; font-weight: 700; }
.sc2-legend__icon,
.sc2-legend__item > i {
   --sc2-legend-icon-color: var(--pos-primary-text, var(--sc2-primary));
   display: inline-flex;
   flex: none;
   align-items: center;
   justify-content: center;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   color: var(--sc2-legend-icon-color);
   background: color-mix(in srgb, var(--sc2-legend-icon-color) 14%, var(--sc2-frame-bg));
   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc2-legend-icon-color) 18%, transparent);
   font-size: 11px;
   line-height: 1;
   font-style: normal;
}
.sc2-legend__icon > i { color: inherit; }
.sc2-legend__icon--request,
.sc2-legend__item > .fa-heart { --sc2-legend-icon-color: #e11d48; }
.sc2-legend__icon--group,
.sc2-legend__icon--combine,
.sc2-legend__item > .fa-user-group,
.sc2-legend__item > .fa-layer-group {
   --sc2-legend-icon-color: #7c3aed;
   background: #f3e8ff;
}
.sc2-legend__icon--chair,
.sc2-legend__item > .fa-chair {
   --sc2-legend-icon-color: #475569;
   border: 1px dashed #cbd5e1;
   background: #fff;
   box-shadow: none;
}
.sc2-legend__icon--partial,
.sc2-legend__item > .fa-circle-dollar {
   --sc2-legend-icon-color: var(--pos-primary-text, #16a34a);
}
.sc2-legend__icon--payment,
.sc2-legend__item > .fa-credit-card {
   --sc2-legend-icon-color: var(--pos-primary-ink, #fff);
   background: var(--pos-primary, var(--sc2-primary));
}

#sc2-root[data-sc2-tech-fullscreen="1"] > .sc2-legend { display: none; }

@media (max-width: 768px) {
   .sc2-legend { min-height: 38px; gap: 8px; }
   .sc2-legend__track { padding: 8px 0; }
   .sc2-legend__toggle { width: 32px; height: 32px; }
}