@font-face {
    font-family: "LINE Seed Sans TH";
    src: url("../fonts/LINESeedSansTH_W_Th.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Branch Command Center — selected concept option 1 */
.branch-overview-dashboard {
    gap: 22px;
}

.branch-overview-list {
    display: grid;
    gap: 14px;
}

.branch-overview-row {
    display: grid;
    grid-template-columns: minmax(330px, 1.45fr) minmax(610px, 2.7fr) minmax(120px, auto);
    align-items: center;
    gap: 20px;
    min-height: 156px;
    padding: 22px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    box-shadow: 0 8px 26px rgba(17, 17, 17, 0.045);
}

.branch-overview-identity {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.branch-overview-identity .branch-title-stack {
    min-width: 0;
}

.branch-overview-identity .branch-address-text {
    display: -webkit-box;
    overflow: hidden;
    color: var(--color-text-secondary);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.branch-overview-stats {
    display: grid;
    grid-template-columns: repeat(7, minmax(78px, 1fr));
    align-items: stretch;
    gap: 10px;
}

.branch-overview-stats > span:not(.branch-owner-status) {
    display: flex;
    min-width: 0;
    min-height: 68px;
    padding: 10px 12px;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: #fbfcfa;
}

.branch-overview-stats b {
    font-size: 1.25rem;
    line-height: 1;
}

.branch-overview-stats small {
    margin-top: 6px;
    color: var(--color-text-secondary);
    font-size: 0.688rem;
    font-weight: 700;
    line-height: 1.2;
}

.branch-overview-stats .branch-owner-status {
    align-self: center;
    justify-self: center;
}

.branch-overview-action {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 7px;
}

.branch-overview-action .branch-edit-workspace {
    min-width: 96px;
}

.branch-overview-action small {
    color: var(--color-text-secondary);
    font-size: 0.688rem;
    white-space: nowrap;
}

.bcc-flash {
    padding: 12px 16px;
    border-radius: var(--radius-small);
    font-weight: 700;
}

.bcc-flash-success {
    border: 1px solid rgba(36, 200, 117, 0.28);
    background: var(--color-success-soft);
    color: #087a4c;
}

.bcc-flash-error {
    border: 1px solid rgba(240, 90, 90, 0.3);
    background: var(--color-danger-soft);
    color: #a92323;
}

.bcc-branch-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 6px 6px 22px;
}

.bcc-branch-heading {
    min-width: 0;
}

.bcc-back-link {
    display: inline-block;
    margin-bottom: 10px;
    color: #15935b;
    font-size: 0.875rem;
    font-weight: 800;
    text-decoration: none;
}

.bcc-title-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.bcc-title-line h2 {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.08;
}

.bcc-branch-heading p {
    max-width: 760px;
    margin: 10px 0 0;
    color: var(--color-text-secondary);
}

.bcc-status,
.bcc-device-status,
.bcc-severity {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
}

.bcc-status.active,
.bcc-device-status.online {
    border: 1px solid rgba(36, 200, 117, 0.34);
    background: var(--color-success-soft);
    color: #087a4c;
}

.bcc-status.inactive,
.bcc-device-status.offline {
    border: 1px solid rgba(240, 90, 90, 0.3);
    background: var(--color-danger-soft);
    color: #a92323;
}

.bcc-local-nav {
    display: grid;
    grid-template-columns: repeat(7, minmax(132px, 1fr));
    gap: 0;
    margin: 0 -30px 12px;
    padding: 0 30px;
    overflow-x: auto;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.bcc-local-nav a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 58px;
    padding: 12px 16px;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.bcc-local-nav-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    opacity: 0.66;
    transition: filter 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.bcc-local-nav a:hover .bcc-local-nav-icon,
.bcc-local-nav a:focus-visible .bcc-local-nav-icon,
.bcc-local-nav a.is-active .bcc-local-nav-icon {
    opacity: 1;
    filter: invert(64%) sepia(75%) saturate(498%) hue-rotate(86deg) brightness(96%) contrast(88%);
    transform: translateY(-1px);
}

.bcc-local-nav a:hover,
.bcc-local-nav a:focus-visible,
.bcc-local-nav a.is-active {
    color: var(--color-ink);
}

.bcc-local-nav a.is-active::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 0;
    left: 14px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--color-brand-primary);
}

.bcc-metric-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
}

.bcc-metric-strip > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    min-height: 100px;
    padding: 20px 24px;
    border-right: 1px solid var(--color-border);
}

.bcc-metric-strip > div:last-child {
    border-right: 0;
}

.bcc-metric-strip strong {
    grid-row: 1 / 3;
    min-width: 74px;
    font-size: 2.125rem;
    line-height: 1;
}

.bcc-metric-strip span {
    align-self: end;
    font-weight: 800;
}

.bcc-metric-strip small {
    align-self: start;
    color: var(--color-text-secondary);
}

.bcc-overview-grid,
.bcc-two-column {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(330px, 0.9fr);
    gap: 18px;
    margin-top: 18px;
}

.bcc-surface {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
}

.bcc-section-head,
.bcc-page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.bcc-section-head h3,
.bcc-page-heading h2 {
    margin: 0;
}

.bcc-section-head span,
.bcc-page-heading p {
    display: block;
    margin: 5px 0 0;
    color: var(--color-text-secondary);
    font-size: 0.813rem;
}

.bcc-kicker {
    display: block;
    margin-bottom: 5px;
    color: #15935b;
    font-size: 0.688rem;
    font-weight: 900;
    letter-spacing: 0.09em;
}

.bcc-attention-list {
    margin-top: 14px;
}

/* Had no rule at all until now: the anchor that wraps the timestamp on an
   attention row was shipped as markup only, so it inherited link styling and
   nothing else - no touch target, no focus ring. 44px is the HIG floor for
   anything tappable, and this one is tapped on a phone in a shop. */
.bcc-attention-open {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    min-height: 44px;
    gap: 2px;
    text-decoration: none;
}

.bcc-attention-open:focus-visible {
    outline: 2px solid #2f6f4f;
    outline-offset: 2px;
    border-radius: 6px;
}

.bcc-attention-list > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-top: 1px solid var(--color-border);
}

.bcc-attention-list p {
    margin: 0;
}

.bcc-attention-list p small {
    display: block;
    margin-top: 3px;
    color: var(--color-text-secondary);
}

.bcc-attention-list time {
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}

.bcc-severity.high {
    background: var(--color-danger-soft);
    color: #b22727;
}

.bcc-severity.medium {
    background: #fff1da;
    color: #a85a00;
}

.bcc-information-list {
    margin: 14px 0 0;
}

.bcc-information-list > div {
    display: grid;
    grid-template-columns: minmax(100px, 0.7fr) minmax(0, 1.3fr);
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid var(--color-border);
}

.bcc-information-list dt {
    font-weight: 800;
}

.bcc-information-list dd {
    margin: 0;
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
}

.bcc-editor-disclosure {
    margin-top: 14px;
    border-top: 1px solid var(--color-border);
}

.bcc-editor-disclosure summary {
    padding: 14px 0 0;
    color: #15935b;
    font-weight: 800;
    cursor: pointer;
}

.bcc-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.bcc-form-grid label {
    display: grid;
    gap: 7px;
    min-width: 0;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-weight: 800;
}

.bcc-form-grid input,
.bcc-form-grid select,
.bcc-form-grid textarea,
.bcc-program-table input {
    width: 100%;
}

.bcc-form-wide {
    grid-column: 1 / -1;
}

.bcc-day-field {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
}

.bcc-day-field legend {
    padding: 0 6px;
    font-weight: 800;
}

.bcc-day-field label {
    display: inline-flex;
    align-items: center;
    grid-auto-flow: column;
    gap: 5px;
}

.bcc-day-field input {
    width: auto;
}

.bcc-quick-actions {
    margin-top: 20px;
}

.bcc-quick-actions h3 {
    margin: 0 0 10px;
}

.bcc-quick-actions > div {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.bcc-quick-actions a {
    display: flex;
    min-height: 92px;
    padding: 16px;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    color: var(--color-ink);
    text-decoration: none;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.bcc-quick-actions a:hover,
.bcc-quick-actions a:focus-visible {
    border-color: var(--color-brand-primary-hover);
    transform: translateY(-2px);
}

.bcc-quick-actions span {
    margin-top: 5px;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}

.bcc-management-summary {
    margin-top: 18px;
    padding: 22px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: rgba(255, 255, 255, 0.74);
}

.bcc-management-summary-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.bcc-management-summary-head h3,
.bcc-management-summary-head p {
    margin: 0;
}

.bcc-management-summary-head p {
    max-width: 420px;
    color: var(--color-text-secondary);
    font-size: 0.813rem;
    text-align: right;
}

.bcc-management-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.bcc-management-card {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-content: start;
    gap: 5px 12px;
    min-width: 0;
    min-height: 178px;
    padding: 16px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    color: var(--color-ink);
    text-decoration: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.bcc-management-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--color-brand-primary);
}

.bcc-management-card.is-watch::before {
    background: #ff9b4a;
}

.bcc-management-card:hover,
.bcc-management-card:focus-visible {
    border-color: rgba(36, 200, 117, 0.62);
    box-shadow: 0 10px 26px rgba(17, 17, 17, 0.08);
    transform: translateY(-2px);
}

.bcc-management-icon {
    display: inline-grid;
    grid-row: 1 / span 2;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-success-soft);
}

.bcc-management-icon img {
    width: 22px;
    height: 22px;
    filter: invert(41%) sepia(80%) saturate(491%) hue-rotate(96deg) brightness(90%) contrast(91%);
}

.bcc-management-card-status {
    justify-self: end;
    padding: 4px 8px;
    border-radius: var(--radius-pill);
    background: var(--color-success-soft);
    color: #087a4c;
    font-size: 0.625rem;
    font-weight: 900;
    line-height: 1.2;
}

.bcc-management-card.is-watch .bcc-management-card-status {
    background: #fff1da;
    color: #9a5700;
}

.bcc-management-card-label {
    align-self: end;
    color: var(--color-text-secondary);
    font-size: 0.688rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bcc-management-card > strong,
.bcc-management-card > small,
.bcc-management-card-cta {
    grid-column: 1 / -1;
}

.bcc-management-card > strong {
    margin-top: 7px;
    font-size: 1.375rem;
    line-height: 1.12;
}

.bcc-management-card > small {
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    line-height: 1.45;
}

.bcc-management-card-cta {
    align-self: end;
    margin-top: 5px;
    color: #15935b;
    font-size: 0.75rem;
    font-weight: 900;
}

.scope-fixed-branch {
    display: grid;
    gap: 3px;
    min-width: 190px;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: #f7fbf8;
}

.scope-fixed-branch span,
.scope-fixed-branch small {
    color: var(--color-text-secondary);
    font-size: 0.688rem;
}

.scope-fixed-branch strong {
    font-size: 0.875rem;
}

.bcc-page-section {
    display: grid;
    gap: 18px;
    padding-top: 18px;
}

.bcc-customer-section {
    gap: 24px;
}

.bcc-customer-filter {
    display: grid;
    grid-template-columns: repeat(5, minmax(132px, 1fr)) auto;
    align-items: end;
    gap: 16px;
}

.bcc-customer-filter label {
    display: grid;
    gap: 7px;
    min-width: 0;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-weight: 800;
}

.bcc-customer-filter input {
    width: 100%;
}

.bcc-customer-filter .btn {
    min-height: 46px;
    white-space: nowrap;
}

.bcc-customer-section :is(.panel, .business-hero, .customer-kpi) {
    min-width: 0;
    margin: 0;
}

.bcc-customer-section .customer-kpi-grid,
.bcc-customer-section .executive-decision-grid {
    gap: 16px;
}

.bcc-customer-section :is(.customer-heatmap-card, .customer-funnel-card, #branch-payment-watch, #branch-customer-table) {
    padding: 24px;
}

.bcc-page-heading p {
    max-width: 720px;
    font-size: 0.875rem;
}

.bcc-machine-table {
    overflow-x: auto;
    overflow-y: visible;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
}

.bcc-machine-table table {
    min-width: 980px;
}

.bcc-machine-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 150px;
}

.bcc-machine-cell img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.bcc-machine-summary-row > td {
    vertical-align: middle;
}

.bcc-machine-flow-row > td {
    padding: 0;
    background: #fff;
}

.bcc-machine-flow-shell {
    display: flex;
    width: 100%;
    min-height: 62px;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    border-top: 1px solid rgba(36, 200, 117, 0.14);
    background: linear-gradient(90deg, rgba(239, 255, 246, 0.72) 0%, #fff 58%);
}

.bcc-machine-flow-toggle {
    display: inline-grid;
    flex: 0 0 32px;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(36, 200, 117, 0.46);
    border-radius: var(--radius-pill);
    background: var(--color-brand-primary);
    color: #0b2015;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.bcc-machine-flow-toggle:hover,
.bcc-machine-flow-toggle:focus-visible {
    border-color: #087a4c;
    background: #40e992;
    transform: translateY(-1px);
}

.bcc-machine-flow-toggle span::before {
    content: "+";
    font-size: 1.125rem;
    font-weight: 900;
    line-height: 1;
}

.bcc-machine-flow-toggle[aria-expanded="true"] span::before {
    content: "−";
}

.bcc-machine-flow {
    flex: 0 0 auto;
    gap: 7px;
    padding: 7px 9px;
    border: 1px solid rgba(82, 100, 122, 0.1);
    border-radius: var(--radius-pill);
    background: #fff;
    box-shadow: 0 6px 16px rgba(45, 63, 84, 0.05);
}

.bcc-machine-flow .compact-node {
    min-height: 32px;
    padding: 5px 9px;
}

.bcc-machine-spec-strip {
    display: flex;
    min-width: 260px;
    align-items: center;
    flex: 1 1 360px;
    flex-wrap: wrap;
    gap: 4px 7px;
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.35;
}

.bcc-machine-spec-strip strong {
    color: var(--color-ink);
    font-weight: 900;
}

.bcc-machine-flow-detail-row[hidden] {
    display: none;
}

.bcc-machine-flow-detail-row > td {
    padding: 0;
    background: #f8fcfa;
}

.bcc-machine-flow-detail-shell {
    width: 100%;
    padding: 18px;
    border-top: 1px solid rgba(36, 200, 117, 0.28);
    border-left: 4px solid var(--color-brand-primary);
    background: linear-gradient(135deg, #f8fffa 0%, #f6faf8 100%);
}

.bcc-command-detail-panel {
    margin: 0;
    border-color: var(--color-border);
    border-radius: var(--radius-medium);
    box-shadow: 0 8px 24px rgba(17, 17, 17, 0.05);
}

.bcc-command-detail-panel .detail-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.bcc-command-detail-panel .detail-stage {
    min-width: 0;
    padding: 16px;
    border-radius: var(--radius-small);
}

.bcc-command-detail-panel .payload-box code {
    display: block;
    max-height: 240px;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 1400px) {
    .bcc-command-detail-panel .detail-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .bcc-command-detail-panel .detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.bcc-machine-icon-wrap {
    position: relative;
    display: inline-grid;
    flex: 0 0 64px;
    width: 64px;
    height: 68px;
    place-items: center;
}

.bcc-machine-icon-wrap img {
    width: 58px;
    height: 64px;
    object-fit: contain;
}

.bcc-machine-number-badge {
    position: absolute;
    top: 0;
    right: -2px;
    display: inline-grid;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    place-items: center;
    border: 2px solid #fff;
    border-radius: var(--radius-pill);
    background: #c70000;
    color: #fff;
    font-size: 0.813rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(17, 17, 17, 0.2);
}

.bcc-machine-panel-toggle {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--color-ink);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 900;
    white-space: nowrap;
    cursor: pointer;
}

.bcc-machine-panel-toggle:hover,
.bcc-machine-panel-toggle:focus-visible,
.bcc-machine-panel-toggle.is-active {
    border-color: var(--color-brand-primary);
    background: var(--color-success-soft);
    color: #087a4c;
}

.bcc-machine-start-toggle {
    min-width: 82px;
    border-color: var(--color-brand-primary);
    background: var(--color-brand-primary);
    color: #0b2015;
}

.bcc-machine-panel-toggle:disabled {
    border-color: var(--color-border);
    background: #eef2ef;
    color: #819087;
    cursor: not-allowed;
    opacity: 0.78;
}

.bcc-machine-detail-row[hidden] {
    display: none;
}

.bcc-machine-detail-row > td {
    padding: 0;
    border-top: 0;
    background: #f7fcf9;
}

.bcc-machine-inline-shell {
    padding: 20px 22px 22px;
    border-top: 1px solid rgba(36, 200, 117, 0.28);
    border-left: 4px solid var(--color-brand-primary);
    background: linear-gradient(135deg, #f8fffa 0%, #f5faf8 100%);
}

.bcc-machine-inline-panel {
    display: grid;
    gap: 16px;
}

.bcc-machine-inline-panel[hidden] {
    display: none;
}

.bcc-machine-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.bcc-machine-panel-head h3 {
    margin: 0;
}

.bcc-machine-context-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: rgba(255, 255, 255, 0.82);
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}

.bcc-machine-context-row strong {
    color: var(--color-ink);
}

/* How old the panel's last reading is, shown where the Start button is. Its
   stale form is set in ink rather than in a new colour: the point is that this
   line stops being background information, and the palette's "warning" token is
   the secondary grey (app.css:1526), so colouring it warning would have made it
   quieter than the text beside it, not louder. */
.bcc-panel-age {
    color: var(--color-text-secondary);
}

.bcc-panel-age.is-stale,
.bcc-panel-age.is-stale strong,
.bcc-table-note.is-stale {
    color: var(--color-ink);
    font-weight: 700;
}

.bcc-machine-blocked-note {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(240, 90, 90, 0.25);
    border-radius: var(--radius-small);
    background: var(--color-danger-soft);
    color: #8a2727;
    font-size: 0.75rem;
    font-weight: 700;
}

.bcc-inline-program-editor {
    display: grid;
    gap: 14px;
}

.bcc-inline-program-editor table {
    min-width: 720px;
}

.bcc-inline-program-editor input:not([type="checkbox"]) {
    width: 100%;
    min-width: 100px;
}

.bcc-inline-program-editor input[type="checkbox"] {
    width: 20px;
    min-height: 20px;
}

.bcc-inline-program-editor .btn,
.bcc-machine-inline-panel .run-program-button {
    min-width: 150px;
    justify-self: start;
}

.bcc-machine-cell small,
.bcc-table-note {
    display: block;
    margin-top: 4px;
    color: var(--color-text-secondary);
    font-size: 0.688rem;
}

/* The month's takings are the one figure a reader scans this table for, so the
   amount is set well above the row rather than merely bolded. The base here is
   1rem, not the page default: admin-shell.css:895 sets `td { font-size: 1rem }`
   on every admin table, so a size chosen against 0.875rem would have landed
   barely larger than its neighbours. That rule targets the td itself, so this
   class on the <strong> inside it wins on specificity - checked, not assumed.
   The unit rides inline beside the amount; the cycle counts below stay on
   .bcc-table-note, which is display:block. */
.bcc-machine-revenue {
    display: block;
    color: var(--color-ink);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.bcc-machine-revenue-unit {
    display: inline;
    margin-left: 3px;
    color: var(--color-text-secondary);
    font-size: 0.688rem;
    font-weight: 500;
}

.bcc-table-action {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-ink);
    font-size: 0.75rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.bcc-row-details {
    position: relative;
}

.bcc-row-details summary {
    color: #176db5;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.bcc-row-details > div {
    position: absolute;
    z-index: 20;
    right: 0;
    display: grid;
    min-width: 250px;
    gap: 7px;
    margin-top: 8px;
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    box-shadow: var(--shadow-hover);
}

.bcc-program-list {
    display: grid;
    gap: 14px;
}

.bcc-program-card form {
    display: grid;
    gap: 14px;
    margin-top: 14px;
}

.bcc-program-table {
    min-width: 720px;
}

.bcc-simple-list {
    display: grid;
    margin-top: 14px;
}

.bcc-simple-list > div:not(.bcc-empty) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-top: 1px solid var(--color-border);
}

.bcc-simple-list p {
    margin: 0;
}

.bcc-simple-list p small {
    display: block;
    margin-top: 4px;
    color: var(--color-text-secondary);
}

.bcc-empty {
    display: grid;
    gap: 5px;
    padding: 24px 0;
    color: var(--color-text-secondary);
}

.bcc-empty strong {
    color: var(--color-ink);
}

.bcc-data-note {
    max-width: 850px;
}

.bcc-data-note h3 {
    margin: 0;
}

.bcc-data-note p {
    margin: 8px 0 0;
    color: var(--color-text-secondary);
}

@media (max-width: 1180px) {
    .bcc-customer-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bcc-customer-filter .btn {
        width: 100%;
    }
}

@media (max-width: 1280px) {
    .branch-overview-row {
        grid-template-columns: minmax(300px, 1fr) minmax(0, 1.7fr) auto;
    }

    .branch-overview-stats {
        grid-template-columns: repeat(4, minmax(74px, 1fr));
    }

    .bcc-quick-actions > div {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bcc-management-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .branch-overview-row {
        grid-template-columns: 1fr auto;
    }

    .branch-overview-stats {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .bcc-overview-grid,
    .bcc-two-column {
        grid-template-columns: 1fr;
    }

    .bcc-local-nav {
        grid-template-columns: repeat(7, minmax(150px, 1fr));
    }

    .bcc-metric-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bcc-metric-strip > div:nth-child(2) {
        border-right: 0;
    }

    .bcc-metric-strip > div:nth-child(-n + 2) {
        border-bottom: 1px solid var(--color-border);
    }
}

.bcc-points-promotion-surface {
    margin-bottom: 18px;
}

@media (max-width: 700px) {
    .branch-overview-row {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .branch-overview-action {
        align-items: stretch;
    }

    .branch-overview-action small {
        text-align: center;
    }

    .branch-overview-stats {
        grid-column: auto;
        grid-row: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .branch-overview-stats .branch-owner-status {
        justify-self: stretch;
    }

    .bcc-branch-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .bcc-local-nav {
        margin-right: -14px;
        margin-left: -14px;
        padding-right: 14px;
        padding-left: 14px;
    }

    .bcc-management-summary {
        padding: 16px;
    }

    .bcc-management-summary-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .bcc-management-summary-head p {
        text-align: left;
    }

    .bcc-management-summary-grid {
        grid-template-columns: 1fr;
    }

    .bcc-metric-strip {
        grid-template-columns: 1fr;
    }

    .bcc-metric-strip > div {
        min-height: 84px;
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .bcc-metric-strip > div:last-child {
        border-bottom: 0;
    }

    .bcc-quick-actions > div,
    .bcc-form-grid {
        grid-template-columns: 1fr;
    }

    .bcc-form-wide {
        grid-column: auto;
    }

    .bcc-section-head,
    .bcc-page-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .bcc-machine-panel-head {
        align-items: stretch;
        flex-direction: column;
    }

    .bcc-machine-inline-shell {
        padding: 16px;
    }

    .bcc-machine-flow-shell {
        gap: 10px;
        padding: 10px 14px;
    }

    .bcc-machine-flow-toggle {
        flex-basis: 32px;
        width: 32px;
        min-width: 32px;
        height: 32px;
        min-height: 32px;
    }

    .bcc-machine-flow-detail-shell {
        padding: 14px;
    }

    .bcc-machine-panel-toggle {
        min-height: 44px;
    }

    .bcc-attention-list > div {
        grid-template-columns: auto minmax(0, 1fr);
    }

    /* The third child used to be a bare <time>, and this put it on the second
       row under the text. It is now wrapped in an .bcc-attention-open anchor, so
       the <time> stopped being a grid item and grid-column stopped applying to
       anything: the anchor auto-placed into column 1, under the severity badge,
       where it collided with the text beside it. Both selectors are named so the
       row still behaves whether or not the item has a link. */
    .bcc-attention-list > div > time,
    .bcc-attention-list > div > .bcc-attention-open {
        grid-column: 2;
    }

    .bcc-information-list > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .bcc-quick-actions > div {
        gap: 8px;
    }

    .bcc-quick-actions a {
        min-height: 74px;
    }

    .bcc-customer-section {
        gap: 18px;
    }

    .bcc-customer-filter {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 18px;
    }

    .bcc-customer-section :is(.customer-heatmap-card, .customer-funnel-card, #branch-payment-watch, #branch-customer-table) {
        padding: 18px;
    }
}

@font-face {
    font-family: "LINE Seed Sans TH";
    src: url("../fonts/LINESeedSansTH_W_Rg.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "LINE Seed Sans TH";
    src: url("../fonts/LINESeedSansTH_W_Bd.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "LINE Seed Sans TH";
    src: url("../fonts/LINESeedSansTH_W_XBd.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "LINE Seed Sans TH";
    src: url("../fonts/LINESeedSansTH_W_He.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "LINE Seed Sans EN";
    src: url("../fonts/LINESeedSans_W_Th.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "LINE Seed Sans EN";
    src: url("../fonts/LINESeedSans_W_Rg.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "LINE Seed Sans EN";
    src: url("../fonts/LINESeedSans_W_Bd.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "LINE Seed Sans EN";
    src: url("../fonts/LINESeedSans_W_XBd.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "LINE Seed Sans EN";
    src: url("../fonts/LINESeedSans_W_He.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light;
    --color-brand-primary: #5df591;
    --color-brand-yellow: #ebc301;
    --color-brand-primary-hover: #42d97a;
    --color-brand-primary-soft: #dffff0;
    --color-ink: #111111;
    --color-background: #f5f7f3;
    --color-surface: #ffffff;
    --color-surface-dark: #111111;
    --color-border: #e4e7e2;
    --color-text-secondary: #484c47;
    --color-text-muted: #6e716b;
    --color-mint: #5df591;
    --color-mint-soft: #dffff0;
    --color-sky: #73cfff;
    --color-sky-soft: #e0f5ff;
    --color-lavender: #a996ff;
    --color-lavender-soft: #eee9ff;
    --color-coral: #ff8f7e;
    --color-coral-soft: #ffe7e2;
    --color-success: #24c875;
    --color-success-soft: #dff8ea;
    /* Not an amber: this "warning" has always been the secondary grey, and it
       was a byte-copy of it, so the 2026-09-03 darkening left it behind as a
       stale twin. It reads the token now and cannot drift again. Renaming it is
       a separate question - admin-shell.css calls the naming a palette defect. */
    --color-warning: var(--color-text-secondary);
    --color-warning-soft: #f0f2ee;
    --color-danger: #f05a5a;
    --color-danger-soft: #ffe3e3;
    --color-info: #4d9fff;
    --color-info-soft: #e3f0ff;
    --radius-small: 10px;
    --radius-medium: 16px;
    --radius-large: 24px;
    --radius-xlarge: 32px;
    --radius-pill: 999px;
    --shadow-card: 0 8px 30px rgba(17, 17, 17, 0.06);
    --shadow-hover: 0 14px 36px rgba(17, 17, 17, 0.10);
    --transition-fast: 160ms ease;
    --transition-normal: 220ms ease;

    /* Legacy aliases keep every existing page on the shared design system. */
    --ink: var(--color-ink);
    --ink-soft: var(--color-text-secondary);
    --muted: var(--color-text-secondary);
    --line: var(--color-border);
    --bg: var(--color-background);
    --panel: var(--color-surface);
    --brand: var(--color-brand-primary);
    --brand-dark: var(--color-ink);
    --brand-warm: var(--color-brand-primary-soft);
    --brand-blue: var(--color-info);
    --brand-sky: var(--color-sky);
    --brand-teal: var(--color-mint);
    --brand-deep-teal: var(--color-success);
    --brand-green: var(--color-mint);
    --brand-gold: var(--color-brand-primary);
    --brand-orange: var(--color-coral);
    --brand-red: var(--color-danger);
    --brand-purple: var(--color-lavender);
    --danger: var(--color-danger);
    /* Its one consumer is .status.warn:1878, and app.css:5811 overrides that on
       every admin page - so this value paints in exactly one place, the customer
       order screen's "รอชำระเงิน" pill on #fff0e8. 5.20 there before, 7.87 now.
       Deliberately NOT re-declared inside .customer-page the way --muted and
       --ink-soft are: that scope pins the token to #68717d, which measures 4.45
       on that pill and would put it under the bar. */
    --warning: var(--color-text-secondary);
    --success: #087a4c;
    --shadow: var(--shadow-card);
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

html[lang="th"] {
    --app-font-family: "LINE Seed Sans TH", "LINE Seed Sans EN", Arial, Tahoma, sans-serif;
}

html[lang="en"] {
    --app-font-family: "LINE Seed Sans EN", "LINE Seed Sans TH", Arial, Tahoma, sans-serif;
}

body {
    margin: 0;
    font-family: var(--app-font-family, "LINE Seed Sans TH", Arial, Tahoma, sans-serif);
    color: var(--ink);
    background: var(--bg);
}

button,
input,
select,
textarea {
    font-family: var(--app-font-family, "LINE Seed Sans TH", Arial, Tahoma, sans-serif);
}

.language-switch {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 3px;
    min-height: 38px;
    padding: 3px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    box-shadow: 0 4px 14px rgba(17, 17, 17, 0.06);
}

.language-switch button {
    min-width: 42px;
    min-height: 32px;
    padding: 5px 9px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
}

.language-switch button[aria-pressed="true"] {
    background: var(--color-brand-primary);
    color: var(--color-ink);
}

.language-switch button:focus-visible {
    outline: 3px solid rgba(77, 159, 255, 0.4);
    outline-offset: 2px;
}

.login-card > .language-switch {
    align-self: flex-end;
    margin-bottom: -4px;
}

.customer-topbar .language-switch {
    box-shadow: none;
}

@media (max-width: 520px) {
    .language-switch { min-height: 34px; }
    .language-switch button { min-width: 36px; min-height: 28px; padding-inline: 7px; }
    .admin-top-header { gap: 8px; }
}

.login-page { min-height: 100vh; overflow: hidden; background: #f8fafb; }
.login-silk-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.login-shell { position: relative; z-index: 1; display: grid; min-height: 100vh; place-items: center; padding: 24px; }
.login-card { width: min(420px, 100%); margin: 0; padding: 34px; background: rgba(255, 255, 255, 0.84); border-color: rgba(82, 100, 122, 0.16); box-shadow: 0 22px 60px rgba(45, 63, 84, 0.16); backdrop-filter: blur(12px); }
.login-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; }
.login-brand h1 { margin: 0; font-size: 2.125rem; letter-spacing: 0; }

a {
    color: var(--brand-dark);
}

.page {
    width: min(1040px, calc(100% - 32px));
    margin: 0 auto;
    padding: 24px 0 48px;
}

.topbar {
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}

.topbar-inner {
    width: min(1040px, calc(100% - 32px));
    margin: 0 auto;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.brand {
    font-weight: 800;
    font-size: 1.125rem;
    text-decoration: none;
}

.nav {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.nav a {
    text-decoration: none;
    font-weight: 700;
}

.admin-page {
    background:
        linear-gradient(180deg, rgba(0, 212, 198, 0.14) 0, rgba(60, 147, 250, 0.05) 220px),
        var(--bg);
}

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(82, 100, 122, 0.18);
    backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(45, 63, 84, 0.08);
}

.admin-topbar .topbar-inner {
    width: min(1280px, calc(100% - 28px));
    min-height: 74px;
    align-items: center;
}

.admin-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 11px;
    color: var(--ink);
}

.admin-brand-mark {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 38px;
    border-radius: 8px;
    background: var(--brand-dark);
    color: var(--brand-teal);
    font-size: 0.938rem;
    font-weight: 800;
}

.admin-brand strong,
.admin-brand small {
    display: block;
}

.admin-brand strong {
    font-size: 1.125rem;
    line-height: 1;
}

.admin-brand small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
}

.admin-nav {
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 6px;
    overflow: visible;
    padding: 8px 0;
    scrollbar-width: thin;
    flex-wrap: wrap;
}

.admin-nav a,
.admin-nav summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--ink-soft);
    font-size: 0.875rem;
    white-space: nowrap;
    cursor: pointer;
}

.admin-nav summary {
    list-style: none;
}

.admin-nav summary::-webkit-details-marker {
    display: none;
}

.admin-nav a:hover,
.admin-nav summary:hover {
    background: #e9f5fb;
}

.admin-nav a.active {
    border-color: rgba(60, 147, 250, 0.55);
    background: linear-gradient(135deg, var(--brand-sky), var(--brand-teal));
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 110, 207, 0.22);
}

.admin-nav-group[open] > summary {
    border-color: rgba(82, 100, 122, 0.18);
    background: #eef6fb;
    color: var(--ink-soft);
    box-shadow: none;
}

.admin-nav-group {
    position: relative;
}

.admin-nav-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    display: grid;
    min-width: 210px;
    padding: 8px;
    background: #fff;
    border: 1px solid rgba(82, 100, 122, 0.16);
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(45, 63, 84, 0.16);
}

.admin-nav-menu a {
    justify-content: flex-start;
    border-radius: 6px;
}

.admin-nav .logout-link {
    margin-left: 4px;
    border-color: var(--brand-dark);
    background: var(--brand-dark);
    color: #fff;
}

.admin-mobile-nav { display: none; }

.admin-page .page {
    width: min(1280px, calc(100% - 32px));
    padding-top: 30px;
}

.hero,
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 12px 28px rgba(45, 63, 84, 0.06);
}

.hero {
    display: grid;
    gap: 16px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.stack {
    display: grid;
    gap: 16px;
}

.muted {
    color: var(--muted);
}

.status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #e6fbf6;
    color: var(--brand-deep-teal);
    font-size: 0.813rem;
    font-weight: 800;
    white-space: nowrap;
}

.status.ready {
    background: #e8f9ed;
    color: var(--success);
}

.status.warn {
    background: #fff0e8;
    color: var(--warning);
}

.status.danger {
    background: #ffe9e9;
    color: var(--danger);
}

.status--positive { background: var(--color-success-soft); color: #087a4c; }
.status--process,
.status--information { background: var(--color-info-soft); color: #235f9d; }
.status--attention { background: #fff5cc; color: #695400; }
.status--danger { background: var(--color-danger-soft); color: #a92525; }
.status--neutral,
.status--disabled { background: var(--color-warning-soft); color: var(--color-ink); }
.status-technical { margin-left: 6px; color: currentColor; font-size: 0.563rem; font-weight: 700; opacity: .68; }

.admin-breadcrumb ol { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.admin-breadcrumb li { color: var(--color-text-secondary); font-size: 0.75rem; font-weight: 700; }
.admin-breadcrumb li + li::before { content: "/"; margin-right: 7px; color: var(--color-text-muted); }
.admin-breadcrumb a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.admin-page :is(.admin-workspace, main.page, .panel) { min-width: 0; max-width: 100%; }
.admin-page .panel { overflow-x: auto; }
.admin-page main.page > table,
.admin-page main.page > section > table { display: block; width: 100%; max-width: 100%; overflow-x: auto; }
.admin-page :is(pre, code) { max-width: 100%; overflow-wrap: anywhere; white-space: pre-wrap; }

.admin-page .empty-state { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; max-width: none; margin: 0; padding: 24px; text-align: left; box-shadow: none; }
.empty-state-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--color-brand-yellow); color: var(--color-ink); font-size: 1.25rem; font-weight: 900; }
.empty-state-copy { display: grid; gap: 8px; min-width: 0; }
.empty-state-copy h2,
.empty-state-copy p { margin: 0; }
.empty-state-type { color: var(--color-text-secondary); font-size: 0.625rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.empty-state-copy dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 4px 0; }
.empty-state-copy dl > div { padding: 9px 11px; border-radius: 10px; background: var(--color-background); }
.empty-state-copy dt { color: var(--color-text-secondary); font-size: 0.688rem; font-weight: 750; }
.empty-state-copy dd { margin: 2px 0 0; font-weight: 800; }
.empty-state-primary { justify-self: start; }
.empty-state-instruction { color: var(--color-text-secondary); font-weight: 700; }

.button,
button,
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 1px solid var(--brand-dark);
    border-radius: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, var(--brand-dark), #004c94);
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
}

.button.secondary,
button.secondary {
    background: #fff;
    border-color: #a9c2d6;
    color: var(--brand-dark);
}

.danger-button {
    border-color: var(--danger);
    background: #fff;
    color: var(--danger);
}

.danger-button:hover {
    background: #ffe9e9;
}

.inline-delete-form {
    display: inline-flex;
    margin: 0;
}

.machine-identity-cell {
    width: 120px;
    min-width: 120px;
}

.machine-identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 14px;
}

.machine-icon-badge {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 96px;
    min-height: 106px;
}

.machine-icon-button {
    min-height: 106px;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    border-radius: 8px;
    text-decoration: none;
}

.machine-icon-button:hover,
.machine-icon-button.is-active {
    border-color: var(--brand);
    background: var(--brand-warm);
}

.dashboard-machine-icon {
    display: block;
    width: 86px;
    height: 96px;
    object-fit: contain;
}

.machine-number-badge {
    position: absolute;
    top: 4px;
    right: 0;
    display: inline-grid;
    place-items: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #c70000;
    color: #fff;
    font-weight: 900;
    font-size: 1rem;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(17, 17, 17, 0.18);
}

.machine-sticker-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    min-height: 34px;
    padding: 5px 10px;
    border: 1px solid rgba(29, 189, 142, 0.55);
    border-radius: 8px;
    background: #e6fbf6;
    font-size: 1.125rem;
}

.machine-action-cell {
    width: 136px;
    min-width: 136px;
    max-width: 136px;
    vertical-align: top;
}

.machine-action-cell .inline-delete-form {
    display: block;
    margin: 0;
}

.machine-action-cell .danger-button,
.machine-action-cell .detail-toggle,
.machine-action-cell .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 118px;
    min-height: 34px;
    margin-bottom: 8px;
    padding: 5px 8px;
}

.machine-action-cell .button:last-child {
    margin-bottom: 0;
}

.machine-dashboard-table {
    table-layout: fixed;
    min-width: 1120px;
}

.machine-dashboard-table th,
.machine-dashboard-table td {
    overflow-wrap: anywhere;
}

.machine-col-identity {
    width: 120px;
}

.machine-col-status {
    width: 130px;
}

.machine-col-iot {
    width: 170px;
}

.machine-col-device {
    width: 96px;
}

.machine-col-firmware {
    width: 82px;
}

.machine-col-last-seen {
    width: 120px;
}

.machine-col-programs {
    width: 172px;
}

.machine-col-command {
    width: 134px;
}

.machine-col-action {
    width: 148px;
}

.detail-toggle {
    border-color: var(--line);
    background: #fff;
    color: var(--ink);
    white-space: nowrap;
}

.detail-toggle.is-active,
.detail-toggle:hover {
    border-color: var(--brand);
    background: var(--brand-warm);
    color: var(--ink);
}

.pill-toggle {
    width: auto;
    min-height: 34px;
    border-radius: 999px;
    font-weight: 900;
}

.promo-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: auto;
    min-width: 126px;
    margin-top: 8px;
}

.promo-toggle .promo-on-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--brand-green);
    color: #fff;
    font-size: 0.563rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
}

.machine-row-group {
    border-bottom: 1px solid var(--line);
}

.promotion-editor {
    display: grid;
    gap: 14px;
}

.promo-schedule-grid {
    align-items: end;
}

.promo-days-grid {
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
}

.device-status-block {
    display: grid;
    justify-items: start;
    gap: 5px;
}

.device-status-block small {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.25;
}

.machine-run-count {
    display: grid;
    gap: 1px;
    margin-top: 12px;
    color: var(--ink);
}

.machine-running-strip,
.machine-error-strip {
    position: absolute;
    left: 50%;
    top: 52%;
    z-index: 3;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    min-height: 28px;
    margin-top: 0;
    padding: 4px 10px;
    border: 1px solid rgba(60, 147, 250, 0.38);
    border-radius: 999px;
    background: rgba(60, 147, 250, 0.34);
    color: #004c94;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0;
    box-shadow: 0 8px 18px rgba(60, 147, 250, 0.12);
    backdrop-filter: blur(3px);
    pointer-events: none;
}

.machine-error-strip {
    border-color: rgba(242, 79, 79, 0.45);
    background: rgba(242, 79, 79, 0.24);
    color: #9b1c1c;
    box-shadow: 0 8px 18px rgba(242, 79, 79, 0.12);
}

.machine-run-count strong {
    font-size: 1.25rem;
    line-height: 1;
}

.machine-run-count small {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.machine-start-button {
    width: fit-content;
    min-height: 30px;
    margin-top: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.813rem;
    font-weight: 900;
}

.machine-start-button.is-active {
    border-color: var(--brand);
    background: var(--brand-warm);
}

.machine-start-button.is-disabled {
    border-color: rgba(82, 100, 122, 0.22);
    background: #eef3f7;
    color: #8b9bab;
    cursor: not-allowed;
    pointer-events: none;
}

.start-program-panel {
    display: grid;
    gap: 14px;
}

.start-program-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}

.start-program-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.start-program-option:has(input:checked) {
    border-color: var(--brand);
    background: #ecfffb;
    box-shadow: 0 8px 18px rgba(0, 212, 198, 0.12);
}

.start-program-option input {
    width: 18px;
    min-height: 18px;
}

.start-program-option span {
    display: grid;
    gap: 2px;
}

.start-program-option small {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.run-program-button {
    width: fit-content;
}

.machine-manage-form {
    display: grid;
    gap: 12px;
}

.machine-manage-form table input,
.machine-manage-form table select {
    min-width: 0;
    width: 100%;
}

.manage-section {
    display: grid;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.advanced-program-form {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.full-span {
    grid-column: 1 / -1;
}

.machine-command-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.machine-command-form input {
    flex: 1 1 240px;
}

.machine-command-form button {
    min-width: 118px;
}

.machine-detail-row {
    display: none;
}

.machine-detail-row.is-open {
    display: table-row;
}

.machine-detail-row > td {
    padding: 0;
    background: #f8fcff;
}

.machine-flow-row > td {
    padding: 0 12px 12px;
    background: #fff;
}

.machine-row-meta {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px 10px;
}

.machine-flow-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 8px;
    width: 100%;
    min-width: 0;
}

.machine-flow {
    display: flex;
    order: 1;
    flex: 0 1 auto;
    align-items: center;
    flex-wrap: nowrap;
    width: auto;
    max-width: 100%;
    margin-left: 4px;
    padding: 8px 10px;
    border: 1px solid rgba(82, 100, 122, 0.1);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(45, 63, 84, 0.05);
}

.machine-flow-toggle {
    order: 0;
    display: inline-grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
}

.machine-flow-toggle .summary-arrow::before {
    content: "+";
    transform: none;
}

.machine-flow-toggle[aria-expanded="true"] .summary-arrow::before {
    content: "-";
    transform: none;
}

.machine-flow-command-panel {
    order: 4;
    flex: 0 0 100%;
    width: 100%;
}

.machine-flow-command-panel[hidden] {
    display: none !important;
}

.machine-flow-command-panel .command-detail-panel {
    margin-top: 0;
    max-height: 560px;
    overflow: auto;
}

.machine-spec-strip {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    order: 2;
    gap: 4px 6px;
    min-height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.35;
    white-space: normal;
}

.machine-spec-strip strong {
    color: var(--ink);
    font-weight: 900;
}

.machine-detail-shell {
    display: block;
    width: 100%;
    padding: 14px;
    border-left: 4px solid var(--brand);
    background: #f8fcff;
}

.machine-detail-panel {
    display: none;
    gap: 10px;
    width: 100%;
}

.machine-detail-panel.is-active-panel {
    display: grid;
}

.machine-detail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.row-drilldown {
    max-width: 100%;
}

.row-drilldown summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.row-drilldown summary::-webkit-details-marker {
    display: none;
}

.row-drilldown[open] summary {
    border-color: var(--brand);
    background: var(--brand-warm);
}

.mini-table-wrap {
    width: 100%;
    max-height: 520px;
    overflow: auto;
    margin-top: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.mini-table {
    min-width: 760px;
    font-size: 0.813rem;
}

.mini-table th,
.mini-table td {
    padding: 8px;
    vertical-align: top;
}

button:disabled,
input[type="submit"]:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

input,
select,
textarea {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    font: inherit;
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
    min-height: 0;
    margin: 0;
}

input:focus,
select:focus,
textarea:focus {
    outline: 3px solid rgba(0, 212, 198, 0.22);
    border-color: var(--brand);
}

label {
    display: grid;
    gap: 6px;
    font-weight: 700;
}

.check-grid {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
    padding: 14px;
    border: 1px solid #ddddda;
    border-radius: 8px;
    background: #fafaf8;
}

.check-grid label {
    display: flex;
    align-items: center;
    min-height: 48px;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink-soft);
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

.check-grid input[type="checkbox"] {
    appearance: none;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    min-height: 22px;
    padding: 0;
    border: 2px solid #b8b8b2;
    border-radius: 6px;
    background: #fff;
    display: inline-grid;
    place-items: center;
}

.check-grid input[type="checkbox"]::before {
    content: "";
    width: 11px;
    height: 7px;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(-45deg) scale(0);
    transform-origin: center;
}

.check-grid input[type="checkbox"]:checked {
    border-color: var(--brand);
    background: var(--brand);
}

.check-grid input[type="checkbox"]:checked::before {
    transform: rotate(-45deg) scale(1);
}

.check-grid label:has(input[type="checkbox"]:checked) {
    border-color: rgba(29, 189, 142, 0.72);
    background: #ecfffb;
    box-shadow: 0 0 0 2px rgba(0, 212, 198, 0.12);
}

.wide-field {
    grid-column: 1 / -1;
}

code {
    white-space: pre-wrap;
    word-break: break-word;
}

.command-flow {
    display: grid;
    gap: 8px;
    min-width: 260px;
}

.flow-preview {
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    align-items: stretch;
}

.flow-preview .flow-arrow {
    display: none;
}

.flow-step {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.flow-step strong,
.flow-step small {
    display: block;
}

.flow-step small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1.25;
}

.flow-icon {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    font-weight: 800;
}

.flow-step.ok {
    border-color: rgba(115, 204, 128, 0.55);
    background: #e8f9ed;
}

.flow-step.ok .flow-icon {
    background: var(--brand-green);
    color: #fff;
}

.flow-step.ok .flow-icon::before {
    content: "✓";
}

.flow-step.wait {
    border-color: rgba(255, 143, 92, 0.45);
    background: #fff0e8;
}

.flow-step.wait .flow-icon {
    background: var(--brand-orange);
    color: #fff;
}

.flow-step.wait .flow-icon::before {
    content: "…";
}

.flow-step.error {
    border-color: #f5b7b1;
    background: #fff5f4;
}

.flow-step.error .flow-icon {
    background: var(--danger);
    color: #fff;
}

.flow-step.error .flow-icon::before {
    content: "!";
}

.flow-arrow {
    color: var(--muted);
    font-weight: 800;
    text-align: center;
    line-height: 1;
}

.compact-flow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.compact-node {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
}

.compact-node .flow-icon {
    width: 20px;
    height: 20px;
    font-size: 0.75rem;
}

.compact-node small {
    color: var(--ink-soft);
    font-weight: 800;
    font-size: 0.75rem;
}

.compact-node.ok {
    border-color: rgba(115, 204, 128, 0.55);
    background: #e8f9ed;
}

.compact-node.ok .flow-icon {
    background: var(--brand-green);
    color: #fff;
}

.compact-node.ok .flow-icon::before {
    content: "✓";
}

.compact-node.wait {
    border-color: rgba(255, 143, 92, 0.45);
    background: #fff0e8;
}

.compact-node.wait .flow-icon {
    background: var(--brand-orange);
    color: #fff;
}

.compact-node.wait .flow-icon::before {
    content: "…";
}

.compact-node.error {
    border-color: rgba(242, 79, 79, 0.36);
    background: #fff0f0;
}

.compact-node.error .flow-icon {
    background: var(--danger);
    color: #fff;
}

.compact-node.error .flow-icon::before {
    content: "!";
}

.compact-arrow {
    color: #9a9a93;
    font-weight: 800;
}

.command-details {
    min-width: 320px;
}

.command-details summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.command-details summary::-webkit-details-marker {
    display: none;
}

.summary-arrow {
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--brand);
    color: var(--ink);
}

.summary-arrow::before {
    content: "›";
    font-weight: 800;
    transition: transform 160ms ease;
}

.command-details[open] .summary-arrow::before {
    transform: rotate(90deg);
}

.command-detail-panel {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(17, 17, 17, 0.06);
}

.detail-note {
    margin: 0 0 12px;
    color: var(--ink-soft);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.detail-stage {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fafaf8;
}

.detail-stage.ok {
    border-color: rgba(115, 204, 128, 0.55);
    background: #e8f9ed;
}

.detail-stage.wait {
    border-color: rgba(255, 143, 92, 0.45);
    background: #fff0e8;
}

.detail-stage.error {
    border-color: rgba(242, 79, 79, 0.36);
    background: #fff0f0;
}

.detail-stage h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 1rem;
}

.detail-stage h3 .flow-icon {
    width: 26px;
    height: 26px;
    font-size: 0.813rem;
}

.detail-stage.ok h3 .flow-icon {
    background: var(--brand-green);
    color: #fff;
}

.detail-stage.ok h3 .flow-icon::before {
    content: "✓";
}

.detail-stage.wait h3 .flow-icon {
    background: var(--brand-orange);
    color: #fff;
}

.detail-stage.wait h3 .flow-icon::before {
    content: "…";
}

.detail-stage.error h3 .flow-icon {
    background: var(--danger);
    color: #fff;
}

.detail-stage.error h3 .flow-icon::before {
    content: "!";
}

.detail-stage dl {
    display: grid;
    gap: 7px;
    margin: 0;
}

.detail-stage dt {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 800;
}

.detail-stage dd {
    margin: 0;
    font-size: 0.813rem;
    line-height: 1.35;
}

.payload-box {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding: 12px;
    border: 1px dashed #c9c9c3;
    border-radius: 8px;
    background: #fbfbfa;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

th,
td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

th {
    background: #f1f1ef;
    font-size: 0.813rem;
}

.qr-box {
    min-height: 150px;
    display: grid;
    place-items: center;
    border: 2px dashed var(--line);
    border-radius: 8px;
    text-align: center;
    font-weight: 800;
    word-break: break-word;
    padding: 16px;
    background: #fbfcfd;
}

.metric {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
}

.metric strong {
    display: block;
    font-size: 1.5rem;
}

.metric small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-weight: 800;
}

/* Owner executive command center */
.executive-command-center {
    display: grid;
    gap: 18px;
}

.executive-health {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    overflow: hidden;
    padding: 24px;
    border: 1px solid #c8d5ce;
    border-radius: 18px;
    background: linear-gradient(135deg, #102b25 0%, #17463b 65%, #1d5b4b 100%);
    color: #fff;
    box-shadow: 0 18px 42px rgba(14, 44, 36, 0.16);
}

.executive-health::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -105px;
    width: 250px;
    height: 250px;
    border: 36px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}

.executive-health--watch {
    background: linear-gradient(135deg, #3e2d0c 0%, #6c4c0c 66%, #8d6619 100%);
}

.executive-health--danger {
    background: linear-gradient(135deg, #3f171b 0%, #73262d 66%, #96333d 100%);
}

.executive-health-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 1.75rem;
    font-weight: 950;
}

.executive-kicker {
    display: block;
    margin-bottom: 4px;
    color: inherit;
    font-size: 0.688rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    opacity: 0.7;
}

.executive-health h2,
.executive-card-head h3 {
    margin: 0;
}

.executive-health h2 {
    font-size: clamp(1.375rem, 3vw, 2rem);
}

.executive-health p {
    margin: 5px 0 0;
    color: rgba(255, 255, 255, 0.76);
}

.executive-health-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.813rem;
    font-weight: 900;
    text-decoration: none;
}

.executive-snapshot-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.cash-summary-grid,
.finance-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.executive-stat {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(28, 38, 34, 0.05);
}

.executive-stat--primary {
    border-color: #b9d7cc;
    background: linear-gradient(145deg, #f0faf6, #fff);
}

.executive-stat > span,
.executive-stat > small {
    display: block;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 800;
}

.executive-stat > strong {
    display: block;
    margin: 7px 0 5px;
    color: #15251f;
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    line-height: 1;
}

.executive-stat > strong em {
    font-size: 0.75rem;
    font-style: normal;
}

.executive-stat .trend-up { color: #147852; }
.executive-stat .trend-down { color: #b43b43; }

.executive-decision-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.executive-money-card,
.executive-machine-card,
.owner-action-center {
    padding: 20px;
    border-radius: 16px;
}

.executive-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.executive-card-head h3 { font-size: 1.25rem; }
.executive-card-head a { color: #256a57; font-size: 0.813rem; font-weight: 900; }
.executive-card-head > small { color: var(--muted); font-weight: 800; }

.provider-breakdown {
    display: grid;
    gap: 14px;
}

.provider-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 12px;
}

.provider-row small,
.top-machine-highlight small {
    display: block;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 750;
}

.provider-value { text-align: right; }
.provider-bar { grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: 999px; background: #edf1ef; }
.provider-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #23765d, #55b68f); }
.cash-portfolio-inline { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 16px; }
.cash-portfolio-inline > div { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fafcfb; }
.cash-portfolio-inline span,
.cash-portfolio-inline strong { display: block; }
.cash-portfolio-inline span { color: var(--muted); font-size: 0.688rem; }
.business-deep-link { display: inline-block; margin-top: 11px; color: #216c55; font-size: 0.813rem; font-weight: 900; }

.data-gap-note {
    display: grid;
    gap: 3px;
    margin-top: 18px;
    padding: 12px 14px;
    border: 1px dashed #bfc5bc;
    border-radius: 10px;
    background: #f5f7f3;
}

.data-gap-note strong { color: var(--color-ink); font-size: 0.813rem; }
.data-gap-note span { color: var(--color-text-secondary); font-size: 0.75rem; line-height: 1.5; }
.executive-empty { margin: 0; padding: 24px 12px; color: var(--muted); text-align: center; }

.top-machine-highlight {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid #dbe7e2;
    border-radius: 14px;
    background: #f7fbf9;
}

.executive-machine-icon { width: 62px; height: 62px; object-fit: contain; }
.top-machine-highlight > div > strong { display: block; font-size: 1.313rem; }
.top-machine-highlight > div > span { color: #25715a; font-size: 0.688rem; font-weight: 950; }
.top-machine-value { text-align: right; }
.top-machine-value strong { display: block; color: #165d48; font-size: 1.375rem; }

.machine-health-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.machine-health-strip > div {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 2px 7px;
    padding: 11px;
}

.machine-health-strip > div + div { border-left: 1px solid var(--line); }
.machine-health-strip small { grid-column: 2; color: var(--muted); font-size: 0.688rem; }
.health-dot { width: 8px; height: 8px; border-radius: 50%; background: #b8c0bd; }
.health-dot--ok { background: #2eaa76; }
.health-dot--run { background: #368ac4; box-shadow: 0 0 0 4px rgba(54, 138, 196, 0.12); }
.health-dot--bad { background: #cf4b54; }

.action-list { display: grid; gap: 9px; }
.action-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    text-decoration: none;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.action-row:hover { transform: translateY(-1px); border-color: #9ab8ad; box-shadow: 0 8px 18px rgba(24, 58, 47, 0.08); }
.action-priority { padding: 6px 9px; border-radius: 999px; background: #edf1ef; font-size: 0.688rem; font-weight: 950; text-align: center; }
.action-row--urgent .action-priority { background: #fee9eb; color: #a52834; }
.action-row--today .action-priority { background: var(--color-brand-primary-soft); color: #087a4c; }
.action-row--watch .action-priority { background: #f0f2ee; color: var(--color-text-secondary); }
.action-row--normal .action-priority { background: #e7f6ef; color: #1d7555; }
.action-copy strong,
.action-copy small { display: block; }
.action-copy small { margin-top: 2px; color: var(--muted); font-size: 0.75rem; }
.action-arrow { color: #317560; font-size: 1.25rem; font-weight: 900; }

/* Business operations: cash, finance, P&L and ROI */
.business-filter-bar {
    padding: 12px 14px;
    border-radius: 14px;
}

.business-filter-form,
.business-inline-form {
    display: flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
}

.business-filter-form label,
.business-inline-form label {
    min-width: 150px;
}

.business-filter-form select,
.business-filter-form input,
.business-inline-form select,
.business-inline-form input {
    min-height: 42px;
}

.business-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px;
    border: 1px solid #cddbd6;
    border-radius: 17px;
    background: linear-gradient(135deg, #f1f8f5, #fff);
}

.business-hero--cash { border-color: #c8d9d2; background: linear-gradient(135deg, #edf8f3, #fff); }
.business-hero--finance { border-color: #ccd5e3; background: linear-gradient(135deg, #f0f4fb, #fff); }
.business-hero h2 { margin: 0; font-size: clamp(1.375rem, 3vw, 1.875rem); }
.business-hero p { margin: 5px 0 0; color: var(--muted); }
.business-hero-status { min-width: 150px; padding: 11px 14px; border: 1px solid #b9d9cc; border-radius: 12px; background: #eaf8f2; color: #176349; text-align: right; }
.business-hero-status.is-danger { border-color: #efc4c8; background: #fff0f1; color: #a62e39; }
.business-hero-status.is-watch { border-color: #cfd3cc; background: #f0f2ee; color: var(--color-ink); }
.business-hero-status strong,
.business-hero-status small { display: block; }
.business-hero-status small { margin-top: 2px; font-size: 0.688rem; }

.business-form-grid > .panel { align-self: start; }
.cash-workflow-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.cash-close-form input[type="file"] { padding: 10px; border: 1px dashed #aeb4ac; background: #fafbf9; }
.cash-proof-current { margin: 0; font-size: 0.813rem; font-weight: 800; }
.cash-review-form { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.cash-review-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.data-state--neutral { color: var(--color-ink); }
.data-state--neutral > strong { color: var(--color-ink); }
.data-state--good > strong { color: #087a4c; }
.data-state--error > strong { color: var(--color-danger); }
.data-state-note { display: block; margin-top: 4px; color: var(--color-text-secondary); font-size: 0.75rem; line-height: 1.45; }
.data-state-coverage { display: block; margin-top: 3px; color: var(--color-text-secondary); font-size: 0.688rem; font-weight: 800; }
.business-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.compact-ledger { display: grid; gap: 8px; }
.compact-ledger > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.compact-ledger span strong,
.compact-ledger span small { display: block; }
.compact-ledger span small { color: var(--muted); }
.trend-up { color: #177451; }
.trend-down { color: #b6313d; }

.export-menu { position: relative; }
.export-menu summary { list-style: none; cursor: pointer; }
.export-menu summary::-webkit-details-marker { display: none; }
.export-menu > div { position: absolute; z-index: 20; right: 0; top: calc(100% + 6px); display: grid; min-width: 170px; padding: 7px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 16px 34px rgba(22,34,30,.14); }
.export-menu > div a { padding: 9px 11px; border-radius: 7px; color: var(--ink); font-weight: 800; text-decoration: none; }
.export-menu > div a:hover { background: #f1f5f3; }

.goal-number,
.utility-number { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.goal-number strong,
.utility-number strong { font-size: clamp(1.875rem, 5vw, 2.875rem); line-height: 1; }
.goal-number span,
.utility-number span { color: var(--muted); font-weight: 800; }
.goal-track { height: 10px; overflow: hidden; border-radius: 999px; background: #e8eeeb; }
.goal-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1e745a, #63bb96); }
.goal-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.goal-facts > div,
.utility-average { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fafcfb; }
.goal-facts span,
.goal-facts strong,
.utility-average span,
.utility-average strong { display: block; }
.goal-facts span,
.utility-average span { color: var(--muted); font-size: 0.75rem; }
.utility-average { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.roi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.roi-grid > div { padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfc; }
.roi-grid span,
.roi-grid strong { display: block; }
.roi-grid span { color: var(--muted); font-size: 0.75rem; }
.roi-grid strong { margin-top: 5px; font-size: 1.25rem; }
.responsive-table { width: 100%; overflow-x: auto; }
.responsive-table table { min-width: 760px; }

.action-create-panel { padding: 0; overflow: hidden; }
.action-create-panel > summary { padding: 16px 18px; cursor: pointer; font-weight: 900; }
.action-create-panel > form { padding: 0 18px 18px; }
.action-board,
.alert-feed { display: grid; gap: 12px; }
.action-task-card,
.alert-card { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 18px; padding: 18px; border: 1px solid var(--line); border-left: 5px solid #a9b7b1; border-radius: 14px; background: #fff; box-shadow: 0 7px 20px rgba(28,38,34,.04); }
.action-task-card--critical { border-left-color: #c83e49; }
.action-task-card--today { border-left-color: #d39b26; }
.action-task-card--week { border-left-color: #3d83b5; }
.action-task-card--watch { border-left-color: #7b8b84; }
.action-task-main h3,
.alert-card-body h3 { margin: 8px 0 4px; }
.action-task-main p,
.alert-card-body p { margin: 0 0 9px; color: #3f4d48; }
.action-task-meta,
.alert-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 0.688rem; font-weight: 850; }
.action-task-side { display: grid; align-content: start; justify-items: end; gap: 7px; text-align: right; }
.action-task-side small { color: var(--muted); }
.action-task-side a { font-size: 0.75rem; font-weight: 900; }
.action-recommendation { padding: 9px 11px; border-radius: 9px; background: #f1f7f4; color: #245c4c; font-size: 0.813rem; }
.estimate-label { display: block; margin-top: 8px; color: #85661d; }
.action-update-form { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 9px; padding-top: 14px; border-top: 1px solid var(--line); }

.alert-card { grid-template-columns: 44px minmax(0, 1fr) 220px; border-left-width: 1px; }
.alert-card--critical { border-color: #efc5c9; background: linear-gradient(135deg,#fff7f7,#fff); }
.alert-card--warning { border-color: #cfd3cc; background: #fff; }
.alert-card--info { border-color: #cdddea; }
.alert-card-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #edf1ef; font-size: 1.25rem; font-weight: 950; }
.alert-card--critical .alert-card-icon { background: #fae6e8; color: #ad303b; }
.alert-card--warning .alert-card-icon { background: #f0f2ee; color: var(--color-ink); }
.alert-card--info .alert-card-icon { background: #e8f2fa; color: #2d6893; }
.alert-card-side { display: grid; align-content: start; justify-items: stretch; gap: 9px; }
.alert-card-side > .status { justify-self: end; }
.alert-card-side > small { color: var(--muted); text-align: right; }
.alert-card-side form label { font-size: 0.688rem; }
.machine-health-detail { display: grid; gap: 16px; padding-top: 4px; }
.ticket-row { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfc; }
.ticket-row h4 { margin: 7px 0 3px; font-size: 1.125rem; }
.ticket-row p { margin: 0 0 5px; color: var(--muted); }
.ticket-row + .ticket-row { margin-top: 8px; }
.report-rank-row { display: grid; grid-template-columns: 30px minmax(0,1fr) auto auto; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.report-rank-row > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #edf4f1; color: #27634f; font-weight: 950; }
.report-rank-row small { color: var(--muted); }
.report-rank-row b { color: #1a604a; text-align: right; }
.reports-control-bar { display: grid; gap: 14px; padding: 18px; border-color: #d7e2dd; background: linear-gradient(180deg,#ffffff 0%,#f8fbf9 100%); }
.reports-control-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.reports-control-head h2 { margin: 3px 0 4px; font-size: clamp(1.25rem,2vw,1.625rem); line-height: 1.15; }
.reports-control-head p { margin: 0; color: var(--muted); font-weight: 650; line-height: 1.45; }
.reports-control-scope { display: grid; gap: 3px; min-width: 220px; padding: 10px 12px; border: 1px solid #d8e5df; border-radius: 10px; background: rgba(255,255,255,.8); text-align: right; }
.reports-control-scope span { color: var(--muted); font-size: 0.75rem; font-weight: 850; }
.reports-control-scope strong { color: var(--ink); font-size: 0.813rem; }
.reports-control-presets,
.reports-control-exports { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.reports-control-presets a,
.reports-control-exports a { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 11px; border: 1px solid #cfddd6; border-radius: 9px; background: #fff; color: #1f3f33; font-size: 0.75rem; font-weight: 900; text-decoration: none; white-space: nowrap; }
.reports-control-presets a:hover,
.reports-control-exports a:hover,
.reports-control-presets a.is-active { border-color: #61d994; background: #eafff1; color: #0c5c3a; }
.reports-control-form { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 10px; align-items: end; }
.reports-control-field { display: grid; gap: 6px; min-width: 0; }
.reports-control-field span,
.reports-control-exports > span { color: #607268; font-size: 0.688rem; font-weight: 950; letter-spacing: 0; text-transform: uppercase; }
.reports-control-field select,
.reports-control-field input { width: 100%; min-width: 0; height: 40px; padding: 0 10px; border: 1px solid #cfddd6; border-radius: 9px; background: #fff; color: var(--ink); font: inherit; font-size: 0.813rem; font-weight: 800; }
.reports-control-field--static { min-height: 40px; padding: 8px 10px; border: 1px solid #cfddd6; border-radius: 9px; background: #f6faf8; }
.reports-control-field--static strong { color: #24523f; font-size: 0.813rem; line-height: 1.25; }
.reports-control-actions button { height: 40px; padding: 0 14px; border: 0; border-radius: 9px; background: #4be37e; color: #08311f; font-weight: 950; white-space: nowrap; cursor: pointer; }
.reports-control-actions button:hover { filter: brightness(.97); }
.reports-control-exports { padding-top: 2px; }
.role-report-hero { align-items: flex-start; }
.role-report-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.role-report-badges span { padding: 6px 9px; border: 1px solid #cddbd6; border-radius: 999px; background: rgba(255,255,255,.72); color: #2f463d; font-size: 0.688rem; font-weight: 850; }
.role-section { display: grid; gap: 14px; }
.role-section-head { display: grid; gap: 5px; }
.role-section-head h2 { margin: 0; font-size: clamp(1.375rem, 2.4vw, 1.875rem); line-height: 1.18; }
.role-section-head p { margin: 0; color: var(--muted); font-weight: 650; }
.role-kpi-grid .executive-stat { min-height: 138px; }
.revenue-split-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.revenue-split-grid article { display: grid; gap: 6px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfc; }
.revenue-split-grid span,
.revenue-split-grid small { color: var(--muted); font-size: 0.75rem; font-weight: 750; }
.revenue-split-grid strong { color: var(--ink); font-size: clamp(1.375rem,2.5vw,1.875rem); line-height: 1; overflow-wrap: anywhere; }
.report-empty-inline { display: grid; gap: 4px; margin-top: 10px; padding: 14px; border: 1px dashed #cbd6d1; border-radius: 11px; background: #fbfcfb; color: var(--muted); }
.report-empty-inline strong { color: var(--ink); }
.report-empty-inline span,
.report-empty-inline small { line-height: 1.45; }
.report-pill-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.report-pill-list span,
.manager-action-grid > div { display: grid; gap: 2px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfc; }
.report-pill-list strong,
.manager-action-grid strong { color: var(--ink); font-size: 1.375rem; line-height: 1; }
.manager-action-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.manager-action-grid span { color: var(--muted); font-size: 0.75rem; font-weight: 750; }
.role-export-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.role-export-list a { display: grid; gap: 5px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfc; color: var(--ink); text-decoration: none; }
.role-export-list a:hover { border-color: #b9d5c9; background: #f3faf6; }
.role-export-list strong { font-size: 0.875rem; }
.role-export-list span { color: var(--muted); font-size: 0.75rem; line-height: 1.4; }
.segment-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.segment-grid > div { padding:15px; border:1px solid var(--line); border-radius:12px; background:#f9fcfb; text-align:center; }
.segment-grid strong,.segment-grid span { display:block; }
.segment-grid strong { font-size: 1.75rem; }
.segment-grid span { color:var(--muted); font-size: 0.75rem; }

@media (max-width: 1280px) {
    .reports-control-form { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .reports-control-actions button { width: 100%; }
}

@media (max-width: 860px) {
    .reports-control-head { display: grid; gap: 10px; }
    .reports-control-scope { min-width: 0; text-align: left; }
    .reports-control-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .reports-control-actions { grid-column: 1 / -1; }
    .roi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .action-task-card { grid-template-columns: minmax(0, 1fr); }
    .action-task-side { justify-items: start; text-align: left; }
    .action-update-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .alert-card { grid-template-columns: 44px minmax(0, 1fr); }
    .alert-card-side { grid-column: 2; }
    .alert-card-side > .status { justify-self: start; }
    .alert-card-side > small { text-align: left; }
    .ticket-row .action-update-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 640px) {
    .reports-control-bar { padding: 14px; gap: 12px; }
    .reports-control-presets,
    .reports-control-exports { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .reports-control-exports > span { grid-column: 1 / -1; }
    .reports-control-presets a,
    .reports-control-exports a { width: 100%; white-space: normal; text-align: center; }
    .reports-control-form { grid-template-columns: minmax(0,1fr); }
    .business-hero { align-items: flex-start; flex-direction: column; padding: 14px; }
    .business-hero-status { width: 100%; text-align: left; }
    .business-filter-form,
    .business-inline-form { align-items: stretch; flex-direction: column; }
    .business-filter-form label,
    .business-inline-form label,
    .business-filter-form button,
    .business-filter-form .button,
    .business-inline-form button { width: 100%; }
    .business-field-grid,
    .goal-facts,
    .roi-grid { grid-template-columns: minmax(0, 1fr); }
    .goal-number,
    .utility-number,
    .utility-average { align-items: flex-start; flex-direction: column; }
    .export-menu { width: 100%; }
    .export-menu summary { text-align: center; }
    .export-menu > div { right: auto; left: 0; width: 100%; }
    .action-update-form { grid-template-columns: minmax(0, 1fr); }
    .alert-card { grid-template-columns: minmax(0, 1fr); }
    .alert-card-icon,
    .alert-card-side { grid-column: 1; }
    .ticket-row .action-update-form { grid-template-columns: minmax(0,1fr); }
    .report-rank-row { grid-template-columns: 30px minmax(0,1fr) auto; }
    .report-rank-row small { grid-column: 2; }
    .role-report-badges,
    .role-report-badges span { width: 100%; }
    .revenue-split-grid,
    .report-pill-list,
    .manager-action-grid,
    .role-export-list { grid-template-columns: minmax(0,1fr); }
    .role-kpi-grid .executive-stat { min-height: 116px; }
    .segment-grid { grid-template-columns:minmax(0,1fr); }
    .cash-workflow-grid { grid-template-columns: minmax(0, 1fr); }
    .cash-workflow-grid > .panel { padding: 16px; }
    .cash-workflow-grid .executive-card-head { margin-bottom: 2px; }
    .cash-workflow-grid .executive-card-head h3 { font-size: 1.125rem; }
    .cash-workflow-grid .stack { gap: 10px; }
    .business-hero-status { padding: 8px 10px; }
    .cash-review-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
    .cash-close-form textarea { min-height: 68px; }
}

.dashboard-revenue-toolbar {
    margin-top: -4px;
}

.dashboard-revenue-toolbar form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dashboard-revenue-toolbar .muted {
    font-size: 0.813rem;
}

.section-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.section-toolbar h2 {
    margin: 0;
}

.section-toolbar p {
    margin: 4px 0 0;
}

.toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.branch-link {
    display: grid;
    gap: 3px;
    color: var(--ink);
    text-decoration: none;
}

.branch-link strong,
.branch-link span {
    display: block;
}

.branch-link span {
    color: var(--muted);
    font-size: 0.813rem;
    font-weight: 800;
}

.branch-title-stack {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.branch-title-line {
    align-items: center;
    display: flex;
    gap: 8px;
}

.branch-title-line strong,
.branch-name-text {
    display: block;
}

.branch-name-text {
    color: var(--muted);
    font-size: 0.813rem;
    font-weight: 800;
}

.branch-address-text,
.branch-address-empty,
.branch-code-text {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.35;
    max-width: 330px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.branch-address-text,
.branch-address-empty {
    color: var(--muted);
}

.branch-address-text:hover {
    color: var(--ink);
}

.branch-code-text {
    color: #8a6500;
    font-size: 0.688rem;
    text-transform: uppercase;
}

.icon-edit-button {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 900;
    height: 28px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 28px;
}

.icon-edit-button:hover {
    border-color: var(--brand);
}

.qr-branch-button {
    font-size: 0.75rem;
    justify-self: start;
    min-height: 30px;
    padding: 6px 10px;
}

.branch-map-link,
.branch-map-empty {
    color: var(--muted);
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.branch-map-link:hover {
    color: var(--ink);
}

.branch-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.branch-hero h2 {
    margin: 6px 0;
    font-size: 1.75rem;
}

.branch-actions,
.log-type-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.branch-list {
    display: grid;
    gap: 10px;
}

.branch-row {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(45, 63, 84, 0.06);
}

.branch-row summary {
    display: grid;
    grid-template-columns: minmax(260px, 1.2fr) minmax(460px, 2fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 76px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
}

.branch-row summary::-webkit-details-marker {
    display: none;
}

.branch-row[open] summary {
    border-bottom: 1px solid var(--line);
    background: linear-gradient(90deg, rgba(29, 189, 142, 0.08), rgba(60, 147, 250, 0.06));
}

.branch-summary-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.branch-select-control {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin: 0;
    cursor: pointer;
}

.branch-select-control input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.branch-select-control span {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 2px solid rgba(82, 100, 122, 0.35);
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 6px 14px rgba(45, 63, 84, 0.12);
}

.branch-select-control input:checked + span {
    border-color: var(--brand);
    background: linear-gradient(135deg, var(--brand), var(--brand-teal));
    box-shadow: 0 8px 18px rgba(29, 189, 142, 0.28);
}

.branch-select-control input:checked + span::after {
    content: "";
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}

.branch-number {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand), var(--brand-teal));
    color: #fff;
    font-weight: 900;
}

.branch-summary-stats {
    display: grid;
    grid-template-columns: repeat(7, minmax(78px, 1fr));
    align-items: center;
    gap: 8px;
}

.branch-status-form {
    margin: 0;
}

.branch-status-button {
    align-items: center;
    background: #e8f9ed;
    border: 1px solid rgba(115, 204, 128, 0.45);
    border-radius: 999px;
    color: var(--brand-deep-teal);
    display: inline-flex;
    font-size: 0.813rem;
    font-weight: 900;
    justify-content: center;
    min-height: 38px;
    padding: 8px 16px;
    width: 100%;
    box-shadow: 0 6px 16px rgba(2, 129, 131, 0.12);
}

.branch-status-button.active {
    border-color: rgba(29, 189, 142, 0.7);
    background: linear-gradient(135deg, rgba(29, 189, 142, 0.18), rgba(115, 204, 128, 0.28));
    color: #02706c;
    box-shadow:
        0 0 0 3px rgba(0, 212, 198, 0.12),
        0 10px 22px rgba(2, 129, 131, 0.18);
}

.branch-status-button.inactive {
    background: #fff0f0;
    color: var(--danger);
    border-color: rgba(242, 79, 79, 0.35);
    box-shadow: 0 6px 16px rgba(242, 79, 79, 0.08);
}

.branch-summary-stats > span.branch-owner-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 16px;
    border: 1px solid rgba(29, 189, 142, 0.55);
    border-radius: 999px;
    background: #e8f9ed;
    color: #02706c;
    font-size: 0.813rem;
    font-weight: 900;
    box-shadow: 0 6px 16px rgba(2, 129, 131, 0.12);
}

.branch-summary-stats > span.branch-owner-status.inactive {
    border-color: rgba(242, 79, 79, 0.35);
    background: #fff0f0;
    color: var(--danger);
}

.branch-inline-edit {
    align-items: end;
    background: #f3fbff;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(180px, 0.9fr) minmax(180px, 1fr) minmax(260px, 1.4fr) auto;
    padding: 12px 14px;
}

.branch-inline-edit[hidden] {
    display: none;
}

.branch-summary-stats > span:not(.status) {
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #f8fcff);
}

.branch-summary-stats b,
.branch-summary-stats small {
    display: block;
}

.branch-summary-stats b {
    font-size: 1.125rem;
    line-height: 1;
}

.branch-summary-stats small {
    color: var(--muted);
    font-size: 0.688rem;
    font-weight: 800;
}

.branch-summary-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.branch-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink-soft);
    font-size: 0.813rem;
    font-weight: 900;
    white-space: nowrap;
}

.toggle-arrow {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--brand);
}

.toggle-arrow::before {
    content: ">";
    font-weight: 900;
    transition: transform 160ms ease;
}

.branch-row[open] .toggle-arrow::before {
    transform: rotate(90deg);
}

.branch-machine-panel {
    padding: 14px;
    background: #fbfbfa;
}

.quick-add-machine {
    margin: 12px 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.quick-add-machine summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
    font-weight: 900;
}

.quick-add-machine summary::-webkit-details-marker {
    display: none;
}

.quick-add-machine summary span {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
}

.quick-add-machine[open] summary {
    border-bottom: 1px solid var(--line);
    background: var(--brand-warm);
}

.quick-machine-form {
    padding: 14px;
}

.quick-add-machine > .muted {
    margin: 0 14px 14px;
}

.input-with-button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 8px;
}

.input-with-button button {
    min-width: 42px;
    padding: 8px;
    font-size: 1.25rem;
    line-height: 1;
}

.input-with-suffix {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.input-with-suffix input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-with-suffix span {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-left: 0;
    border-radius: 0 8px 8px 0;
    background: #eef6fb;
    color: var(--ink-soft);
    font-size: 0.813rem;
    font-weight: 900;
    white-space: nowrap;
}

.machine-programs summary {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-weight: 900;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.machine-programs summary::-webkit-details-marker {
    display: none;
}

.machine-programs[open] summary {
    border-color: var(--brand);
    background: var(--brand-warm);
}

.program-editor {
    display: grid;
    gap: 10px;
    min-width: 620px;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(45, 63, 84, 0.08);
}

.quick-program-setup {
    grid-column: 1 / -1;
    min-width: 0;
    box-shadow: none;
}

.program-editor table {
    border-radius: 6px;
}

.program-editor th,
.program-editor td {
    padding: 7px;
}

.program-editor input,
.program-editor select {
    min-height: 34px;
    padding: 6px 8px;
}

.mobile-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.mini-chart {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 210px;
    display: flex;
    align-items: end;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 12px 10px 12px 4px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.chart-bar {
    flex: 0 0 48px;
    min-height: 160px;
    display: grid;
    grid-template-rows: 1fr auto auto;
    align-items: end;
    justify-items: center;
    gap: 6px;
}

.chart-bar::before {
    content: "";
    width: 100%;
    height: var(--bar-height);
    min-height: 6px;
    border-radius: 6px 6px 2px 2px;
    background: var(--brand);
    box-shadow: inset 0 -10px 18px rgba(17, 17, 17, 0.08);
}

.chart-bar.is-empty::before {
    min-height: 2px;
    background: rgba(82, 100, 122, 0.18);
    box-shadow: none;
}

.chart-bar span,
.chart-bar b {
    font-size: 0.75rem;
    white-space: nowrap;
}

.owner-detail {
    padding: 0;
    overflow: hidden;
}

.owner-insights-card {
    padding: 0;
    overflow: hidden;
}

.owner-report-card {
    padding: 0;
    overflow: hidden;
}

.owner-report-detail:not(:last-child) {
    border-bottom: 1px solid var(--line);
}

.owner-report-detail summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    font-size: 1.25rem;
    font-weight: 900;
}

.owner-report-detail summary::-webkit-details-marker {
    display: none;
}

.owner-report-detail summary i {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-left: auto;
    border-radius: 999px;
    background: var(--brand);
    color: var(--ink);
    font-size: 1.25rem;
    font-style: normal;
    line-height: 1;
}

.owner-report-detail[open] summary i {
    font-size: 0;
}

.owner-report-detail[open] summary i::after {
    content: "-";
    font-size: 1.25rem;
}

.owner-report-detail > :not(summary) {
    margin-right: 18px;
    margin-left: 18px;
}

.owner-report-detail > .mini-chart,
.owner-report-detail > .hourly-chart {
    width: calc(100% - 36px);
    max-width: calc(100% - 36px);
}

.owner-report-detail > :last-child {
    margin-bottom: 18px;
}

.owner-insight-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.owner-insight-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    min-height: 76px;
    padding: 16px 18px;
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    font-weight: 900;
    text-align: left;
}

.owner-insight-toggle:last-child {
    border-right: 0;
}

.owner-insight-toggle:hover,
.owner-insight-toggle[aria-expanded="true"] {
    background: #f3fbff;
}

.owner-insight-toggle i {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--brand);
    color: var(--ink);
    font-size: 1.25rem;
    line-height: 1;
    font-style: normal;
}

.owner-insight-toggle[aria-expanded="true"] i {
    font-size: 0;
}

.owner-insight-toggle[aria-expanded="true"] i::after {
    content: "-";
    font-size: 1.25rem;
}

.owner-insight-toggle span {
    font-size: 1.25rem;
}

.owner-insight-panel {
    border-top: 1px solid var(--line);
    padding: 18px;
}

.owner-insight-panel[hidden] {
    display: none;
}

.owner-insight-panel .mini-chart,
.owner-insight-panel .hourly-chart {
    width: 100%;
    max-width: 100%;
}

.owner-insight-panel > :last-child {
    margin-bottom: 0;
}

.branch-insight-stack {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 14px;
}

.owner-branch-picker {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.owner-branch-picker legend { padding: 0 6px; font-weight: 800; }
.owner-branch-choice { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; }
.owner-branch-choice input { width: 18px; height: 18px; flex: 0 0 auto; }
.owner-branch-choice span { display: grid; min-width: 0; gap: 2px; }
.owner-branch-choice small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owner-branch-control { grid-column: 1 / -1; }
.owner-branch-control[hidden] { display: none !important; }
.branch-access-label { display: block; }
.branch-access-picker { position: relative; max-width: 420px; margin-top: 4px; }
.user-roles-table-wrap { overflow-x: auto; overflow-y: visible; }
.user-roles-table-wrap table { overflow: visible; }
.user-roles-table-wrap td { position: relative; }
.user-roles-table-wrap tr:has(.branch-access-picker) { position: relative; z-index: 6; }
.user-roles-table-wrap tr:has(.branch-access-picker:focus-within) { z-index: 12; }
.branch-access-picker::after {
    content: "";
    position: absolute;
    top: 18px;
    right: 14px;
    width: 8px;
    height: 8px;
    /* The dropdown caret for "สาขาที่มองเห็น" on users.php. It read --muted,
       which resolves on :root and so stayed at #484c47 while the muted text
       beside it - inside .page, where admin-shell.css re-points the token to
       --c-ink-dim - was #404b58: two greys a step apart on the same control.
       Reading the token instead makes it exactly the muted text in the cells
       either side - both measure rgb(64, 75, 88). 8.09 -> 8.21 on the field's
       #f5f6f7; a 2px glyph needs 3.
       One neighbour it does NOT match, and cannot: the placeholder inside this
       same input is pinned to the literal #6e6e6e by admin-shell.css, a warm
       grey where the caret is now a blue one. Left alone on purpose - a
       placeholder is meant to read lighter than content, and taking it to the
       token would put it at text weight. */
    border-right: 2px solid var(--color-text-secondary);
    border-bottom: 2px solid var(--color-text-secondary);
    transform: rotate(45deg);
    pointer-events: none;
}
.branch-access-input { width: 100%; min-height: 42px; padding-right: 42px; cursor: pointer; }
.branch-access-input:focus { cursor: text; }
.branch-access-input::-webkit-search-cancel-button { display: none; }
.branch-access-menu { position: fixed; z-index: 120; width: 100%; min-width: 280px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 16px 32px rgba(45, 63, 84, 0.16); }
.branch-access-options { display: grid; gap: 6px; max-height: 342px; overflow-y: auto; overscroll-behavior: contain; }
.branch-access-options .owner-branch-choice { min-height: 52px; }
.branch-access-options .owner-branch-choice[hidden] { display: none !important; }
.branch-access-options mark { padding: 0 2px; border-radius: 3px; background: rgba(30, 201, 164, 0.22); color: inherit; font-weight: 900; }

.branch-owner-detail {
    border-color: rgba(82, 100, 122, 0.18);
    box-shadow: 0 8px 18px rgba(45, 63, 84, 0.05);
}

.branch-owner-detail[open] { grid-column: auto; }

.branch-owner-detail summary {
    min-height: 54px;
    padding: 12px 16px;
}

.branch-owner-detail summary span {
    font-size: 1.063rem;
}

.insight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.insight-card {
    display: grid;
    gap: 8px;
    padding: 14px;
    border-radius: 8px;
    background: #f3fbff;
    border: 1px solid rgba(60, 147, 250, 0.22);
}

.insight-card span {
    color: var(--ink-soft);
    font-weight: 800;
}

.hourly-chart {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 210px;
    display: flex;
    align-items: end;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 12px 10px 12px 4px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.hour-bar {
    flex: 0 0 42px;
    min-height: 160px;
    display: grid;
    grid-template-rows: 1fr auto auto;
    align-items: end;
    justify-items: center;
    gap: 6px;
}

.hour-bar::before {
    content: "";
    width: 100%;
    height: var(--bar-height);
    min-height: 4px;
    border-radius: 6px 6px 2px 2px;
    background: var(--ink);
}

.hour-bar.is-empty::before {
    min-height: 2px;
    background: rgba(82, 100, 122, 0.16);
}

.hour-bar span,
.hour-bar b {
    font-size: 0.75rem;
    white-space: nowrap;
}

.rank-list {
    display: grid;
    gap: 10px;
}

.rank-row {
    display: grid;
    grid-template-columns: 38px 48px minmax(120px, 1fr) repeat(3, minmax(70px, auto));
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.rank-no {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--brand);
    color: var(--ink);
    font-weight: 900;
}

.rank-machine-icon {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.rank-row strong,
.rank-row small,
.rank-metrics b,
.rank-metrics small {
    display: block;
}

.rank-row small,
.rank-metrics small {
    color: var(--muted);
    font-weight: 800;
}

.rank-metrics {
    text-align: right;
}

.rank-metrics b {
    font-size: 1.25rem;
}

.machine-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.machine-card,
.error-row {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.machine-card-head {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 58px;
}

.machine-icon {
    width: 54px;
    height: 54px;
    object-fit: contain;
}

.machine-card-title {
    min-width: 0;
}

.machine-card-title strong,
.machine-card-title span {
    display: block;
}

.machine-card-title strong {
    overflow-wrap: anywhere;
}

.machine-card-title span {
    margin-top: 2px;
}

.machine-card span,
.error-row span {
    color: var(--muted);
    font-weight: 800;
}

.machine-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.machine-actions button {
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.813rem;
}

.machine-actions button[value="read_status"] {
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
}

.machine-actions button[value="stop"] {
    background: var(--brand-dark);
    color: #fff;
}

.owner-machine-table .dashboard-machine-icon {
    width: 62px;
    height: 74px;
    object-fit: contain;
    vertical-align: middle;
}

.owner-machine-code {
    display: inline-grid;
    place-items: center;
    min-width: 32px;
    height: 28px;
    margin-left: 6px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--brand-red);
    color: #fff;
}

.owner-start-form {
    margin: 8px 0 0;
}

.owner-program-count {
    display: inline-block;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-weight: 900;
}

.permission-table th:not(:first-child),
.permission-checkbox-cell {
    min-width: 118px;
    text-align: center;
}

.permission-checkbox-cell input {
    width: 20px;
    height: 20px;
    accent-color: var(--brand-deep-teal);
}

.launch-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.launch-item {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.launch-item div {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px 10px;
}

.launch-item strong,
.launch-item span {
    display: block;
}

.launch-item span {
    grid-column: 2;
    color: var(--muted);
    font-size: 0.813rem;
    font-weight: 800;
}

.launch-item p {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.45;
}

.responsive-table {
    overflow-x: auto;
}

.qr-label-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.qr-label-grid.is-print-mode {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.qr-label-card {
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
    text-align: center;
}

.qr-label-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    text-align: left;
}

.qr-label-head strong,
.qr-label-head small,
.qr-label-meta b,
.qr-label-meta code {
    display: block;
}

.qr-label-head small {
    margin-top: 3px;
    color: var(--muted);
    font-weight: 800;
}

.qr-label-image {
    width: 220px;
    height: 220px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.qr-label-meta {
    display: grid;
    justify-items: center;
    gap: 8px;
}

.qr-label-meta b {
    font-size: 1.375rem;
}

.qr-label-meta code {
    max-width: 100%;
    color: var(--muted);
    font-size: 0.75rem;
}

.qr-price-range {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #f2f2ee;
    color: var(--ink);
    font-weight: 900;
}

.qr-label-card p {
    margin: 0;
    color: var(--ink);
    font-weight: 900;
}

.old-price {
    display: block;
    color: var(--muted);
    font-size: 0.813rem;
    text-decoration: line-through;
}

.customer-page {
    min-height: 100vh;
    background:
        linear-gradient(180deg, rgba(0, 212, 198, 0.14) 0, rgba(60, 147, 250, 0.05) 280px),
        var(--bg);
}

.customer-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
}

.customer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
}

.customer-back {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-weight: 900;
    box-shadow: none;
}

.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 32px;
    border-radius: 6px;
    background: var(--ink);
    color: var(--brand);
    font-size: 0.875rem;
    line-height: 1;
}

.customer-main {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
    padding: 28px 0 56px;
}

.customer-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(340px, 1.1fr);
    gap: 22px;
    align-items: start;
}

.customer-journey-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(340px, 1.1fr);
    gap: 22px;
    align-items: start;
}

.journey-panel {
    min-height: 520px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    padding: 34px;
    border-radius: 8px;
    background: var(--ink);
    color: #fff;
    box-shadow: var(--shadow);
}

.journey-panel h1 {
    margin: 12px 0 16px;
    max-width: 11ch;
    font-size: clamp(2.625rem, 7vw, 4.875rem);
    line-height: 0.95;
}

.journey-panel .muted {
    color: rgba(255, 255, 255, 0.74);
}

.journey-steps {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.journey-steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 800;
}

.journey-steps li::before {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.3);
}

.journey-steps li.active {
    border-color: rgba(0, 212, 198, 0.72);
    background: rgba(0, 212, 198, 0.14);
    color: #fff;
}

.journey-steps li.active::before {
    background: var(--brand);
}

.branch-picker {
    display: grid;
    gap: 18px;
}

.branch-picker-head {
    padding: 26px;
    border-radius: 8px;
    background: var(--ink);
    color: #fff;
    box-shadow: var(--shadow);
}

.branch-picker-head h1 {
    margin: 8px 0 10px;
    font-size: clamp(2.125rem, 7vw, 4rem);
    line-height: 1;
}

.branch-picker-head .muted {
    max-width: 680px;
    color: rgba(255, 255, 255, 0.74);
}

.customer-machine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.customer-machine-tile {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 12px;
    min-height: 178px;
    padding: 20px 12px;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.customer-machine-tile:hover {
    border-color: var(--brand);
    transform: translateY(-1px);
    box-shadow: 0 16px 36px rgba(17, 17, 17, 0.12);
}

.customer-machine-tile.is-unavailable {
    opacity: 0.72;
}

.customer-machine-icon {
    width: 92px;
    height: 92px;
    object-fit: contain;
}

.customer-machine-number {
    display: inline-grid;
    place-items: center;
    min-width: 56px;
    height: 44px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--brand);
    color: var(--ink);
    font-size: 1.75rem;
    line-height: 1;
    font-weight: 900;
}

.hero-copy {
    min-height: 520px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    padding: 34px;
    border-radius: 8px;
    background: var(--ink);
    color: #fff;
    box-shadow: var(--shadow);
}

.hero-copy::after {
    content: "";
    width: min(220px, 42vw);
    aspect-ratio: 1;
    border-radius: 999px;
    border: 28px solid var(--brand);
    align-self: flex-end;
    opacity: 0.92;
}

.eyebrow {
    margin: 0;
    color: var(--brand);
    font-weight: 800;
}

.hero-copy h1 {
    margin: 12px 0 16px;
    max-width: 11ch;
    font-size: clamp(2.625rem, 7vw, 4.875rem);
    line-height: 0.95;
}

.machine-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.76);
    font-weight: 700;
}

.order-card,
.payment-card,
.empty-state {
    background: var(--panel);
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.order-card {
    display: grid;
    gap: 18px;
    padding: 24px;
}

.section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-heading span {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--brand);
    color: var(--ink);
    font-weight: 800;
}

.section-heading h2 {
    margin: 0;
    font-size: 1.5rem;
}

.program-list {
    display: grid;
    gap: 12px;
}

.program-option {
    display: block;
    cursor: pointer;
}

.program-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.program-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 78px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.program-content strong,
.program-content small,
.program-content b {
    display: block;
}

.program-content strong {
    font-size: 1.125rem;
}

.program-content small {
    margin-top: 4px;
    color: var(--muted);
    font-weight: 700;
}

.program-content b {
    min-width: 86px;
    text-align: right;
    font-size: 1.375rem;
}

.program-option input:checked + .program-content {
    border-color: var(--brand);
    background: #ecfffb;
    box-shadow: 0 0 0 3px rgba(0, 212, 198, 0.16);
}

.line-field {
    color: var(--ink-soft);
}

.line-field span {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.line-field em {
    color: var(--muted);
    font-style: normal;
    font-size: 0.813rem;
}

.pay-button {
    min-height: 54px;
    border-color: var(--brand);
    background: linear-gradient(135deg, var(--brand), var(--brand-teal));
    color: #fff;
    font-size: 1.063rem;
    box-shadow: 0 10px 24px rgba(0, 110, 207, 0.18);
}

.liff-state {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfbfa;
    color: var(--muted);
    font-weight: 800;
}

.payment-card {
    margin-top: 22px;
    padding: 24px;
}

.payment-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 20px;
    align-items: center;
    margin-top: 18px;
}

.qr-frame {
    padding: 12px;
    border-radius: 8px;
    background: var(--ink);
}

.customer-page .qr-box {
    min-height: 216px;
    border-color: rgba(29, 189, 142, 0.5);
    background: #fff;
}

.payment-detail {
    display: grid;
    gap: 12px;
}

.customer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.status-card {
    align-self: start;
}

.customer-progress {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.customer-progress span {
    display: grid;
    justify-items: center;
    gap: 7px;
    min-height: 76px;
    padding: 10px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 800;
    text-align: center;
}

.customer-progress b {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #ecece8;
    color: var(--muted);
}

.customer-progress span.done {
    border-color: rgba(115, 204, 128, 0.55);
    background: #e8f9ed;
    color: var(--success);
}

.customer-progress span.done b {
    background: var(--success);
    color: #fff;
}

.customer-progress span.failed {
    border-color: #f5b7b1;
    background: #fff5f4;
    color: var(--danger);
}

.customer-progress span.failed b {
    background: var(--danger);
    color: #fff;
}

.support-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.support-facts div {
    min-height: 76px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.support-facts dt {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 800;
}

.support-facts dd {
    margin: 6px 0 0;
    font-weight: 900;
    word-break: break-word;
}

.empty-state {
    max-width: 560px;
    margin: 72px auto;
    padding: 38px;
    text-align: center;
}

.empty-icon {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    margin-bottom: 14px;
    background: var(--brand);
    font-weight: 800;
}

@media (max-width: 860px) {
    .executive-snapshot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .executive-decision-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .executive-health {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .executive-health-link {
        grid-column: 2;
        justify-self: start;
    }

    .admin-topbar .topbar-inner {
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        align-items: center;
        gap: 8px;
        padding: 12px 0;
    }

    .admin-nav {
        display: none;
    }

    .admin-mobile-nav {
        position: relative;
        display: block;
    }

    .admin-mobile-nav summary {
        min-height: 42px;
        display: grid;
        place-items: center;
        padding: 8px 14px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: #fff;
        font-weight: 900;
        list-style: none;
        cursor: pointer;
    }

    .admin-mobile-nav summary::-webkit-details-marker { display: none; }

    .admin-mobile-nav nav {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 80;
        display: grid;
        width: min(320px, calc(100vw - 28px));
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        padding: 8px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 22px 50px rgba(23,37,32,.2);
    }

    .admin-mobile-nav nav a {
        padding: 11px 12px;
        border-radius: 9px;
        color: var(--ink);
        font-weight: 850;
        text-decoration: none;
    }

    .admin-mobile-nav nav a.active { background: #eaf6f1; color: #176147; }
    .admin-mobile-nav nav .logout-link { margin-top: 5px; background: var(--brand-dark); color: #fff; text-align: center; }

    .admin-page .page {
        padding-top: 22px;
    }

    .customer-hero,
    .customer-journey-shell,
    .payment-layout,
    .flow-preview {
        grid-template-columns: 1fr;
    }

    .branch-hero {
        display: grid;
    }

    .branch-row summary {
        grid-template-columns: 1fr;
    }

    .branch-summary-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .branch-summary-actions {
        justify-content: flex-start;
    }

    .hero-copy,
    .journey-panel {
        min-height: 360px;
    }
}

@media (max-width: 640px) {
    .executive-health {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 18px;
    }

    .executive-health-icon {
        width: 44px;
        height: 44px;
        border-radius: 13px;
        font-size: 1.438rem;
    }

    .executive-health-link {
        grid-column: 1;
    }

    .executive-snapshot-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cash-portfolio-inline { grid-template-columns: minmax(0,1fr); }

    .executive-card-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .top-machine-highlight {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .top-machine-value {
        grid-column: 2;
        text-align: left;
    }

    .machine-health-strip {
        grid-template-columns: minmax(0, 1fr);
    }

    .machine-health-strip > div + div {
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .action-row {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .action-priority {
        min-width: 58px;
    }

    .action-arrow {
        display: none;
    }

    .topbar-inner {
        min-height: 60px;
    }

    .customer-main {
        width: min(100% - 24px, 1120px);
        padding-top: 18px;
    }

    .customer-hero {
        gap: 14px;
    }

    .hero-copy,
    .journey-panel,
    .order-card,
    .branch-picker-head,
    .payment-card {
        padding: 18px;
    }

    .customer-machine-grid {
        grid-template-columns: 1fr 1fr;
    }

    .customer-machine-tile {
        min-height: 146px;
        padding: 12px;
    }

    .customer-machine-icon {
        width: 76px;
        height: 76px;
    }

    .customer-machine-number {
        min-width: 48px;
        height: 38px;
        font-size: 1.5rem;
    }

    .hero-copy h1 {
        font-size: 2.75rem;
    }

    .journey-panel h1 {
        font-size: 2.75rem;
    }

    .hero-copy::after {
        width: 130px;
        border-width: 18px;
    }

    .program-content {
        min-height: 72px;
        padding: 14px;
    }

    .program-content b {
        min-width: 76px;
        font-size: 1.25rem;
    }

    .customer-progress,
    .support-facts {
        grid-template-columns: 1fr 1fr;
    }

    .owner-detail summary {
        align-items: flex-start;
    }

    .owner-detail summary b {
        display: none;
    }

    .owner-report-detail summary {
        min-height: 58px;
        padding: 12px;
        font-size: 1.063rem;
    }

    .owner-report-detail > :not(summary) {
        margin-right: 12px;
        margin-left: 12px;
    }

    .owner-report-detail > .mini-chart,
    .owner-report-detail > .hourly-chart {
        width: calc(100% - 24px);
        max-width: calc(100% - 24px);
    }

    .owner-insight-tabs {
        grid-template-columns: minmax(0, 1fr);
    }

    .branch-insight-stack { grid-template-columns: minmax(0, 1fr); }

    .owner-insight-toggle {
        min-height: 58px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .owner-insight-toggle:last-child {
        border-bottom: 0;
    }

    .owner-insight-toggle span {
        font-size: 1.063rem;
    }

    .owner-insight-panel {
        padding: 12px;
    }

    .owner-detail > :not(summary) {
        margin-left: 12px;
        margin-right: 12px;
    }

    .owner-detail > .mini-chart,
    .owner-detail > .hourly-chart {
        width: calc(100% - 24px);
        max-width: calc(100% - 24px);
        overflow-x: hidden;
        padding-left: 0;
        padding-right: 0;
    }

    .mini-chart {
        gap: 4px;
        justify-content: space-between;
    }

    .chart-bar {
        flex: 1 1 0;
        min-width: 0;
        max-width: 42px;
    }

    .chart-bar span,
    .chart-bar b {
        font-size: 0.688rem;
    }

    .insight-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .insight-card {
        min-width: 0;
    }

    .insight-card span {
        overflow-wrap: anywhere;
    }

    .hourly-chart {
        gap: 3px;
        justify-content: space-between;
    }

    .hour-bar {
        flex: 1 1 0;
        min-width: 0;
        max-width: 28px;
    }

    .hour-bar span,
    .hour-bar b {
        font-size: 0.625rem;
    }

    .rank-row {
        grid-template-columns: 34px 44px 1fr;
    }

    .rank-metrics {
        grid-column: 3;
        display: flex;
        justify-content: space-between;
        text-align: left;
    }

    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .branch-summary-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .toggle-text {
        display: none;
    }
}

/* Mint / Black design system: shared foundation after legacy component rules. */
body.admin-page {
    background:
        linear-gradient(180deg, rgba(93, 245, 145, 0.12) 0, rgba(245, 247, 243, 0) 300px),
        var(--color-background);
}

.admin-page .admin-topbar {
    border-bottom-color: rgba(17, 17, 17, 0.08);
    box-shadow: 0 8px 30px rgba(17, 17, 17, 0.06);
}

.admin-page .admin-brand-mark {
    border-radius: var(--radius-small);
    background: var(--color-ink);
    color: var(--color-brand-primary);
}

.admin-page .admin-nav a:hover,
.admin-page .admin-nav summary:hover,
.admin-page .admin-nav-group[open] > summary {
    background: var(--color-brand-primary-soft);
    color: var(--color-ink);
}

.admin-page .admin-nav a.active {
    border-color: var(--color-brand-primary);
    background: var(--color-brand-primary);
    color: var(--color-ink);
    box-shadow: none;
}

.admin-page .admin-nav-menu {
    border-color: var(--color-border);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-hover);
}

.admin-page .page {
    padding-top: 34px;
    gap: 20px;
}

.admin-page .page > h1 {
    margin: 0 0 12px;
    color: var(--color-ink);
    font-size: clamp(1.875rem, 3vw, 2.5rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
}

.admin-page :is(.hero, .panel, .business-hero, .executive-stat, .metric) {
    border-color: var(--color-border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-card);
}

.admin-page .panel {
    padding: clamp(18px, 2.4vw, 26px);
}

.admin-page :is(.button, button, input[type="submit"]) {
    min-height: 44px;
    border: 1px solid var(--color-brand-primary);
    border-radius: var(--radius-pill);
    padding: 10px 18px;
    background: var(--color-brand-primary);
    color: var(--color-ink);
    box-shadow: none;
}

.admin-page button {
    min-width: 44px;
}

.admin-page :is(.executive-card-head > a, .action-task-side > a, .responsive-table td > a) {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    padding: 8px 4px;
}

.admin-page :is(.button, button, input[type="submit"]):hover {
    border-color: var(--color-brand-primary-hover);
    background: var(--color-brand-primary-hover);
}

.admin-page :is(.button.secondary, button.secondary) {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-ink);
}

.admin-page :is(.danger-button, button.danger-button) {
    border-color: var(--color-danger);
    background: var(--color-surface);
    color: #a92525;
}

.admin-page :is(input, select, textarea) {
    min-height: 46px;
    border-color: var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    color: var(--color-ink);
}

.admin-page :is(input, select, textarea):focus {
    border-color: var(--color-brand-primary-hover);
    outline: 3px solid rgba(93, 245, 145, 0.26);
}

.admin-page .status.ready { background: var(--color-success-soft); color: #087a4c; }
.admin-page .status.warn { background: var(--color-warning-soft); color: var(--color-ink); }
.admin-page .status.danger { background: var(--color-danger-soft); color: #a92525; }

.admin-page th {
    background: #f0f2ee;
    color: var(--color-ink);
}

.admin-page tbody tr:hover {
    background: #fbf9ed;
}

.admin-page .executive-health {
    grid-template-columns: minmax(0, 1fr) auto;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 8px solid var(--color-brand-primary);
    border-radius: var(--radius-xlarge);
    background: var(--color-surface-dark);
    box-shadow: var(--shadow-card);
}

.admin-page .executive-health--watch {
    border-left-color: var(--color-brand-primary);
    background: var(--color-surface-dark);
}

.admin-page .executive-health--danger {
    border-left-color: var(--color-coral);
    background: var(--color-surface-dark);
}

.admin-page .executive-health::after {
    display: none;
}

.admin-page .executive-health-link {
    border-color: var(--color-brand-primary);
    background: var(--color-brand-primary);
    color: var(--color-ink);
}

.login-page :is(button, input[type="submit"]) {
    border-color: var(--color-brand-primary);
    border-radius: var(--radius-pill);
    background: var(--color-brand-primary);
    color: var(--color-ink);
}

.login-page :is(button, input[type="submit"]):hover {
    border-color: var(--color-brand-primary-hover);
    background: var(--color-brand-primary-hover);
}

.admin-page :is(.business-hero--cash, .business-hero--finance) {
    border-color: var(--color-border);
    border-left: 7px solid var(--color-brand-primary);
    background: var(--color-surface);
}

.admin-page button.owner-insight-toggle {
    border-color: var(--color-border);
    border-radius: 0;
    background: var(--color-surface);
    color: var(--color-ink);
}

.admin-page button.owner-insight-toggle[aria-expanded="true"] {
    background: var(--color-brand-primary-soft);
}

.owner-insight-toggle small {
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}

.executive-customer-card {
    grid-column: 1 / -1;
    border-top: 5px solid var(--color-brand-primary) !important;
}

.owner-customer-pulse {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.owner-customer-pulse > div {
    display: grid;
    gap: 7px;
    padding: 15px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: #f8f8f5;
}

.owner-customer-pulse span {
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}

.owner-customer-pulse strong {
    color: var(--color-ink);
    font-size: 1.75rem;
    font-variant-numeric: tabular-nums;
}

/* Responsive application shell */
.admin-app-shell {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 252px minmax(0, 1fr);
}

.admin-sidebar-collapsed .admin-app-shell {
    grid-template-columns: minmax(0, 1fr);
}

.admin-sidebar-collapsed .admin-sidebar {
    display: none;
}

.admin-sidebar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: grid;
    /* Same pair as admin-shell.css: dvh second so a browser without it keeps vh. */
    height: 100vh;
    height: 100dvh;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 22px;
    padding: 24px 18px 18px;
    overflow: hidden;
    background: var(--color-surface-dark);
    color: #fff;
}

.admin-sidebar-pixel-blast {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    image-rendering: pixelated;
}

.admin-sidebar > .admin-brand,
.admin-sidebar > .admin-sidebar-nav,
.admin-sidebar > .admin-sidebar-logout {
    position: relative;
    z-index: 1;
}

.admin-sidebar .admin-brand {
    padding: 0 8px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
}

.admin-sidebar .admin-brand small {
    color: rgba(255, 255, 255, 0.58);
}

.admin-sidebar .admin-brand-mark {
    background: var(--color-brand-primary);
    color: var(--color-ink);
}

.admin-sidebar-nav {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-color: rgba(255, 255, 255, 0.24) transparent;
}

.admin-sidebar-nav > a,
.admin-sidebar-menu a,
.admin-sidebar-group summary,
.admin-sidebar-logout {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: var(--radius-medium);
    color: rgba(255, 255, 255, 0.76);
    font-weight: 700;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.admin-sidebar-nav > a:hover,
.admin-sidebar-menu a:hover,
.admin-sidebar-group summary:hover,
.admin-sidebar-logout:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.admin-sidebar-nav a.active,
.admin-sidebar-menu a.active {
    background: var(--color-brand-primary);
    color: var(--color-ink);
}

.admin-sidebar-group {
    display: grid;
    gap: 4px;
}

.admin-sidebar-group summary {
    list-style: none;
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.admin-sidebar-group summary::-webkit-details-marker {
    display: none;
}

.admin-sidebar-menu {
    display: grid;
    gap: 4px;
    padding-left: 8px;
}

.admin-sidebar-menu a {
    min-height: 40px;
    font-size: 0.875rem;
}

.admin-sidebar-logout {
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.admin-workspace {
    min-width: 0;
}

.admin-top-header {
    position: sticky;
    top: 0;
    z-index: 35;
    display: flex;
    min-height: 82px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px clamp(18px, 3vw, 38px);
    border-bottom: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
}

.admin-page-context {
    min-width: 0;
    margin-right: auto;
}

.admin-page-context h1 {
    margin: 0;
    color: var(--color-ink);
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    line-height: 1.15;
}

.admin-page-context small {
    display: block;
    margin-top: 4px;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}

.admin-mobile-brand,
.admin-top-header .admin-mobile-nav {
    display: none;
}

.admin-sidebar-toggle {
    min-width: 108px;
    border-color: var(--color-border) !important;
    background: var(--color-surface) !important;
    color: var(--color-ink) !important;
}

.admin-mobile-page-title {
    display: none;
}

.admin-workspace > .page {
    width: min(1320px, calc(100% - clamp(32px, 5vw, 72px)));
    padding-top: 28px;
}

/* In-app workspace tabs: persistent within the current signed-in browser session. */
.admin-work-tabs {
    position: sticky;
    top: 82px;
    z-index: 34;
    display: grid;
    min-width: 0;
    min-height: 52px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    border-bottom: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 20px rgba(17, 17, 17, 0.05);
    backdrop-filter: blur(16px);
}

.admin-work-tabs-list {
    display: flex;
    min-width: 0;
    align-items: end;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 10px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(17, 17, 17, 0.22) transparent;
}

.admin-work-tab {
    position: relative;
    display: inline-flex;
    min-width: 150px;
    max-width: 310px;
    min-height: 43px;
    flex: 0 0 auto;
    align-items: stretch;
    border: 1px solid var(--color-border);
    border-bottom: 3px solid transparent;
    border-radius: var(--radius-small) var(--radius-small) 0 0;
    background: #f4f5f2;
}

.admin-work-tab + .admin-work-tab {
    margin-left: 4px;
}

.admin-work-tab.is-active {
    border-bottom-color: var(--color-brand-primary);
    background: var(--color-surface);
    box-shadow: 0 -2px 0 rgba(93, 245, 145, 0.16) inset;
}

.admin-work-tab-link {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    overflow: hidden;
    padding: 12px 34px 8px 12px;
    color: var(--color-text-secondary);
    font-size: 0.813rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-work-tab.is-active .admin-work-tab-link {
    color: var(--color-ink);
}

.admin-page button.admin-work-tab-close {
    position: absolute;
    top: 1px;
    right: 1px;
    display: grid;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
}

.admin-page button.admin-work-tab-close img {
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    padding: 5px;
    border-radius: 999px;
    background: var(--color-danger);
    transition: transform 140ms ease, background-color 140ms ease;
}

.admin-page button.admin-work-tab-close:hover {
    border-color: transparent;
    background: transparent;
}

.admin-page button.admin-work-tab-close:hover img,
.admin-page button.admin-work-tab-close:focus-visible img {
    background: #bd1f1f;
    transform: scale(1.08);
}

.admin-page button.admin-work-tab-close:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: -2px;
}

.admin-work-tabs-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-left: 1px solid var(--color-border);
    background: var(--color-surface);
}

.admin-page .admin-work-tabs-actions button {
    min-height: 36px;
    padding: 7px 13px;
    border-radius: var(--radius-small);
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
}

.admin-page .admin-work-tabs-refresh {
    border-color: var(--color-brand-primary);
    background: var(--color-brand-primary-soft);
    color: var(--color-ink);
}

.admin-page .admin-work-tabs-clear {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
}

.admin-work-tabs-empty {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    padding: 0 12px;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}

.admin-work-tabs-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 1080px) {
    .admin-app-shell {
        grid-template-columns: 222px minmax(0, 1fr);
    }

    .admin-sidebar {
        padding-right: 14px;
        padding-left: 14px;
    }
}

@media (max-width: 860px) {
    .admin-app-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-sidebar {
        display: none;
    }

    .admin-top-header {
        min-height: 72px;
        padding: 10px 16px;
    }

    .admin-work-tabs {
        top: 72px;
    }

    .admin-work-tabs-list {
        padding-left: 7px;
    }

    .admin-work-tab {
        min-width: 132px;
        max-width: 240px;
    }

    .admin-work-tabs-actions {
        gap: 5px;
        padding-right: 7px;
        padding-left: 7px;
    }

    .admin-page .admin-work-tabs-actions button {
        min-height: 38px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .admin-mobile-brand {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        color: var(--color-ink);
    }

    .admin-mobile-brand strong,
    .admin-mobile-brand small {
        display: block;
    }

    .admin-mobile-brand small {
        color: var(--color-text-secondary);
        font-size: 0.688rem;
    }

    .admin-page-context {
        display: none;
    }

    .admin-top-header .admin-mobile-nav {
        position: relative;
        display: block;
    }

    .admin-sidebar-toggle {
        display: none;
    }

.admin-mobile-nav summary {
    min-height: 46px;
    border-color: var(--color-ink);
    background: var(--color-surface);
    color: var(--color-ink);
}

    .admin-mobile-nav nav a.active {
        background: var(--color-brand-primary);
        color: var(--color-ink);
    }

    .admin-workspace > .page {
        width: min(100% - 28px, 1320px);
        padding-top: 22px;
    }

    .admin-mobile-page-title {
        display: block;
        margin: 0 0 2px;
        color: var(--color-ink);
        font-size: clamp(1.75rem, 8vw, 2.125rem);
        line-height: 1.1;
    }

    .admin-page .executive-health {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-page .executive-health-link {
        grid-column: 1;
    }

    .owner-customer-pulse {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .owner-customer-pulse {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Customer Intelligence and accessibility */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--color-info);
    outline-offset: 3px;
}

.customer-intelligence-hero {
    border: 1px solid rgba(36, 200, 117, 0.26);
    border-left: 8px solid var(--color-brand-primary);
    background: var(--color-surface);
}

.customer-intelligence-hero h2 {
    max-width: 760px;
    margin: 8px 0;
    color: var(--color-ink);
    font-size: clamp(1.75rem, 3vw, 2.625rem);
    line-height: 1.14;
    letter-spacing: -0.025em;
}

.customer-intelligence-hero p {
    max-width: 820px;
    color: var(--color-text-secondary);
}

.customer-intelligence-hero .business-hero-status {
    display: grid;
    min-width: 220px;
    align-content: center;
    gap: 4px;
    border-radius: var(--radius-large);
}

.customer-intelligence-hero .business-hero-status span,
.customer-rule-fields label,
.customer-kpi span,
.customer-kpi small,
.customer-preference-grid span,
.customer-funnel-step span,
.customer-funnel-step small,
.customer-source-list small,
.customer-rule-list dd {
    color: var(--color-text-secondary);
}

.customer-filter-bar .business-filter-form {
    align-items: end;
}

.customer-rule-settings {
    position: relative;
}

.customer-rule-settings > summary {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    padding: 10px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-ink);
    font-weight: 700;
    cursor: pointer;
}

.customer-rule-fields {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    display: grid;
    width: min(520px, calc(100vw - 48px));
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    box-shadow: var(--shadow-hover);
}

.customer-rule-fields label {
    display: grid;
    gap: 6px;
    font-size: 0.813rem;
}

.customer-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.customer-kpi {
    display: grid;
    min-width: 0;
    min-height: 152px;
    align-content: space-between;
    gap: 8px;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-brand-primary);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    color: var(--color-ink);
    text-decoration: none;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.customer-kpi::after {
    display: none;
}

.customer-kpi--coral {
    border-top-color: var(--color-coral);
}

.customer-kpi span {
    padding-right: 24px;
    font-size: 0.875rem;
    font-weight: 700;
}

.customer-kpi strong {
    color: var(--color-ink);
    font-size: clamp(1.875rem, 3.3vw, 2.625rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.customer-kpi small {
    line-height: 1.35;
}

@media (hover: hover) {
    .customer-kpi:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-hover);
    }
}

.action-row--customer {
    border-left-color: var(--color-brand-primary);
    background: var(--color-brand-primary-soft);
}

.action-row--info {
    border-left-color: var(--color-brand-primary);
    background: #f8f8f5;
}

.customer-preference-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.customer-preference-grid > div {
    display: grid;
    min-height: 104px;
    align-content: center;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: #f8f8f5;
}

.customer-preference-grid span {
    font-size: 0.813rem;
}

.customer-preference-grid strong {
    color: var(--color-ink);
    font-size: 1.5rem;
}

.customer-heatmap-scroll {
    overflow-x: auto;
    padding-bottom: 6px;
}

.customer-heatmap {
    display: grid;
    min-width: 940px;
    grid-template-columns: 42px repeat(24, minmax(28px, 1fr));
    gap: 5px;
    align-items: center;
}

.customer-heatmap > b,
.customer-heatmap > strong {
    color: var(--color-text-secondary);
    font-size: 0.688rem;
    text-align: center;
}

.heat-cell {
    display: grid;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgba(36, 200, 117, calc(var(--heat) * .38));
    border-radius: 8px;
    background: rgba(93, 245, 145, var(--heat));
}

.heat-cell i {
    color: var(--color-ink);
    font-size: 0.625rem;
    font-style: normal;
    font-weight: 800;
}

.customer-funnel {
    display: grid;
    gap: 14px;
}

.customer-funnel-step {
    display: grid;
    grid-template-columns: minmax(160px, .6fr) minmax(200px, 1.6fr) 130px;
    gap: 14px;
    align-items: center;
}

.customer-funnel-step > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.customer-funnel-step strong {
    color: var(--color-ink);
    font-variant-numeric: tabular-nums;
}

.customer-funnel-track {
    height: 16px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: #edf0ea;
}

.customer-funnel-track i {
    display: block;
    width: var(--funnel-width);
    height: 100%;
    border-radius: inherit;
    background: var(--color-brand-primary);
}

.customer-payment-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.customer-source-list {
    display: grid;
    gap: 10px;
}

.customer-source-list > div {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
}

.customer-source-list p {
    display: grid;
    gap: 3px;
    margin: 0;
}

.customer-source-list small {
    line-height: 1.45;
}

.customer-rule-list {
    display: grid;
    gap: 0;
    margin: 0;
}

.customer-rule-list > div {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border);
}

.customer-rule-list > div:last-child {
    border-bottom: 0;
}

.customer-rule-list dt {
    color: var(--color-ink);
    font-weight: 800;
}

.customer-rule-list dd {
    margin: 0;
}

@media (max-width: 900px) {
    .customer-kpi-grid,
    .customer-payment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .customer-funnel-step {
        grid-template-columns: minmax(130px, .7fr) minmax(160px, 1.4fr);
    }

    .customer-funnel-step > small {
        grid-column: 2;
    }

    .customer-rule-fields {
        position: fixed;
        top: 92px;
        right: 16px;
        left: 16px;
        width: auto;
    }
}

@media (max-width: 620px) {
    .admin-page .empty-state { grid-template-columns: minmax(0, 1fr); padding: 18px; }
    .empty-state-copy dl { grid-template-columns: minmax(0, 1fr); }
    .empty-state-primary { width: 100%; min-height: 48px; }
    .customer-kpi-grid,
    .customer-preference-grid,
    .customer-payment-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .customer-kpi {
        min-height: 132px;
    }

    .customer-funnel-step,
    .customer-source-list > div,
    .customer-rule-list > div {
        grid-template-columns: minmax(0, 1fr);
    }

    .customer-funnel-step {
        gap: 7px;
    }

    .customer-funnel-step > small {
        grid-column: auto;
    }

    .customer-rule-fields {
        max-height: calc(100vh - 120px);
        grid-template-columns: minmax(0, 1fr);
        overflow-y: auto;
    }
}

/* P1-C F10: Marketing profile, readiness, preview and attribution */
.marketing-flow { display: grid; gap: 16px; }
.marketing-readiness-mobile { display: none; }
.marketing-insights-block { display: grid; gap: 16px; scroll-margin-top: 90px; }
.marketing-intro,
.marketing-readiness,
.marketing-priority-grid,
.marketing-section-head,
.marketing-export-actions,
.marketing-detail-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.marketing-intro {
    padding: clamp(20px, 4vw, 36px);
    border-radius: 24px;
    background: #111;
    color: #fff;
}
.marketing-intro h2 { max-width: 760px; margin: 5px 0 8px; font-size: clamp(1.625rem, 4vw, 2.75rem); line-height: 1.06; }
.marketing-intro p { max-width: 760px; margin: 0; color: rgba(255,255,255,.72); }
.marketing-intro-state { display: grid; gap: 5px; min-width: 250px; padding: 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: rgba(255,255,255,.07); }
.marketing-intro-state strong { font-size: 1.125rem; }
.marketing-intro-state span { color: rgba(255,255,255,.7); font-size: 0.75rem; }

.marketing-readiness { align-items: stretch; padding: 0; overflow: hidden; scroll-margin-top: 90px; }
.marketing-readiness-primary { flex: 0 0 min(38%, 440px); display: grid; align-content: start; gap: 10px; padding: 24px; background: #f1fdf5; border-right: 1px solid var(--color-border); }
.marketing-readiness-primary h2 { margin: 0; font-size: clamp(1.563rem, 3vw, 2.25rem); }
.marketing-readiness-primary p { margin: 0; font-size: 1.25rem; font-weight: 850; }
.marketing-readiness-primary small { color: var(--color-text-secondary); }
.marketing-readiness-primary .button { justify-self: start; margin-top: 8px; }
.marketing-readiness-checks { flex: 1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; }
.marketing-check { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; padding: 18px; border-bottom: 1px solid var(--color-border); border-right: 1px solid var(--color-border); }
.marketing-check > div { display: grid; gap: 4px; }
.marketing-check p { margin: 2px 0; color: var(--color-text-secondary); font-size: 0.75rem; }
.marketing-check small { color: var(--color-text-secondary); }
.marketing-check b { font-size: 0.75rem; }
.marketing-check.is-ready { background: #f8fff9; }

.marketing-priority-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)) minmax(280px,1.25fr); align-items: stretch; }
.marketing-priority-card,
.marketing-primary-action { display: grid; gap: 7px; min-width: 0; padding: 19px; border: 1px solid var(--color-border); border-radius: 18px; background: #fff; }
.marketing-priority-card > span,
.marketing-primary-action > span { font-size: 0.688rem; font-weight: 900; letter-spacing: .08em; }
.marketing-priority-card strong { font-size: 2.125rem; line-height: 1; }
.marketing-priority-card p,
.marketing-primary-action p { margin: 0; color: var(--color-text-secondary); }
.marketing-priority-card.is-risk { border-top: 5px solid #c83e4d; }
.marketing-priority-card.is-opportunity { border-top: 5px solid #5df591; }
.marketing-primary-action { align-content: center; background: #111; color: #fff; }
.marketing-primary-action h2 { margin: 0; }
.marketing-primary-action p { color: rgba(255,255,255,.72); }
.marketing-primary-action .button { justify-self: start; background: #5df591; color: #111; border-color: #5df591; }

.marketing-kpi-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.marketing-kpi-grid article { display: grid; gap: 6px; min-width: 0; min-height: 126px; padding: 16px; border: 1px solid var(--color-border); border-radius: 16px; background: #fff; }
.marketing-kpi-grid span { color: var(--color-text-secondary); font-size: 0.75rem; font-weight: 800; }
.marketing-kpi-grid strong { font-size: clamp(1.375rem, 2.5vw, 2rem); overflow-wrap: anywhere; }
.marketing-kpi-grid small { color: var(--color-text-secondary); }
.marketing-kpi-grid .is-unavailable { background: #f5f5f3; }
/* A card holding a sentence instead of a number reads three ways at once now:
   smaller, on its own ground, and in the secondary ink rather than the figure
   ink (Kim, 2026-09-03). #484c47 on #f5f5f3 is 7.8:1, so "dimmer" still clears
   the 4.5:1 floor by a wide margin - the point is hierarchy, not faintness. */
.marketing-kpi-grid .is-unavailable strong { font-size: 1.125rem; color: var(--color-text-secondary); }

.marketing-section-head { scroll-margin-top: 90px; }
.marketing-section-head h2 { margin: 3px 0 0; }
.marketing-section-head > small { color: var(--color-text-secondary); }
.marketing-segment { scroll-margin-top: 90px; }
.marketing-segment-form { display: grid; grid-template-columns: 1.5fr repeat(2,minmax(120px,.7fr)) auto; gap: 10px; align-items: end; }
.marketing-segment-form button { min-height: 46px; }
.marketing-preview-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.marketing-preview-summary article { display: grid; gap: 4px; min-width: 0; padding: 14px; border-radius: 13px; background: #f3f6f2; }
.marketing-preview-summary span { color: var(--color-text-secondary); font-size: 0.75rem; }
.marketing-preview-summary strong { font-size: 1.375rem; overflow-wrap: anywhere; }
.marketing-preview-summary .is-unavailable { background: #fff6df; }
.marketing-preview-summary .is-unavailable strong { font-size: 0.938rem; }
.marketing-rule-summary { padding: 12px; border-left: 4px solid #111; background: #f7f8f6; }
.marketing-export-actions { justify-content: flex-start; flex-wrap: wrap; }
.marketing-export-actions form { margin: 0; }
.marketing-customer-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.marketing-customer-cards > article { display: grid; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--color-border); border-radius: 15px; background: #fff; }
.marketing-customer-cards > article > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.marketing-customer-cards dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 0; }
.marketing-customer-cards dl > div { min-width: 0; }
.marketing-customer-cards :is(dt,dd) { margin: 0; overflow-wrap: anywhere; }
.marketing-customer-cards dt { color: var(--color-text-secondary); font-size: 0.688rem; }
.marketing-customer-cards dd { font-weight: 800; }
.marketing-empty { padding: 22px; border: 1px dashed var(--color-border); border-radius: 15px; background: #fafbf9; text-align: center; }
.marketing-empty p { margin-bottom: 0; color: var(--color-text-secondary); }

.marketing-attribution { scroll-margin-top: 90px; }
.marketing-limitations { display: grid; gap: 6px; margin: 0; padding-left: 22px; color: var(--color-text-secondary); }
.marketing-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; }
.marketing-detail-grid > article { display: grid; gap: 10px; align-content: start; }
.marketing-detail-grid h2 { margin: 0; }
.marketing-disabled-controls { grid-template-columns: repeat(3,minmax(0,1fr)); }
.marketing-disabled-controls > :is(span,h2,p) { grid-column: 1 / -1; }
.marketing-disabled-controls button:disabled { opacity: .55; cursor: not-allowed; }

@media (max-width: 980px) {
    .marketing-intro,
    .marketing-readiness { align-items: stretch; flex-direction: column; }
    .marketing-intro-state { min-width: 0; }
    .marketing-readiness-primary { flex-basis: auto; border-right: 0; border-bottom: 1px solid var(--color-border); }
    .marketing-priority-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .marketing-primary-action { grid-column: 1 / -1; }
    .marketing-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .marketing-segment-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .marketing-segment-form button { grid-column: 1 / -1; }
    .marketing-customer-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 620px) {
    .marketing-intro { display: none; order: 1; }
    .marketing-readiness { order: 2; }
    .marketing-priority-grid { order: 3; }
    .marketing-insights-block { order: 4; }
    .marketing-kpi-grid { order: 5; }
    .marketing-segment { order: 6; }
    .marketing-attribution { order: 7; }
    .marketing-detail-grid { order: 8; }
    .marketing-intro { padding: 18px; border-radius: 18px; }
    .marketing-intro h2 { font-size: 1.813rem; }
    .marketing-readiness-primary { padding: 18px; }
    .marketing-readiness-primary .button { width: 100%; min-height: 48px; text-align: center; }
    .marketing-readiness-checks,
    .marketing-priority-grid,
    .marketing-kpi-grid,
    .marketing-preview-summary,
    .marketing-customer-cards,
    .marketing-detail-grid,
    .marketing-segment-form { grid-template-columns: minmax(0,1fr); }
    .marketing-check { border-right: 0; }
    .marketing-readiness-checks { display: none; }
    .marketing-readiness-mobile { display: block; padding: 12px 16px; }
    .marketing-readiness-mobile > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 850; }
    .marketing-readiness-mobile > div { display: grid; margin: 8px -16px -12px; border-top: 1px solid var(--color-border); }
    .marketing-primary-action { grid-column: auto; }
    .marketing-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .marketing-kpi-grid article { min-height: 112px; padding: 13px; }
    .marketing-kpi-grid strong { font-size: 1.375rem; }
    .marketing-kpi-grid .is-unavailable strong { font-size: 0.938rem; }
    .marketing-section-head { align-items: flex-start; flex-direction: column; }
    .marketing-segment-form button { grid-column: auto; width: 100%; }
    .marketing-preview-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .marketing-export-actions { align-items: stretch; flex-direction: column; }
    .marketing-export-actions form,
    .marketing-export-actions button { width: 100%; }
    .marketing-customer-cards > article > div { align-items: flex-start; }
    .marketing-disabled-controls { grid-template-columns: minmax(0,1fr); }
    .marketing-disabled-controls > :is(span,h2,p) { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Super Admin Operations workspace: scoped to Machines through Maintenance. */
.operations-workflow {
    margin: 0 0 18px;
    padding: 18px;
    border: 1px solid #dfe8e2;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fffa 0%, #ffffff 72%);
    box-shadow: 0 10px 28px rgba(19, 54, 35, 0.06);
}

.operations-workflow-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.operations-workflow-heading h2 {
    margin: 2px 0 0;
    font-size: clamp(1.25rem, 1.8vw, 1.625rem);
    line-height: 1.25;
}

.operations-workflow-heading p {
    max-width: 520px;
    margin: 0;
    color: #53645a;
    font-size: 0.875rem;
    line-height: 1.55;
    text-align: right;
}

.operations-workflow-primary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.operations-workflow-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 84px;
    padding: 14px;
    border: 1px solid #d9e3dc;
    border-radius: 14px;
    background: #fff;
    color: #17231c;
    text-decoration: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.operations-workflow-card:hover,
.operations-workflow-card:focus-visible {
    border-color: #2ecf73;
    box-shadow: 0 8px 22px rgba(29, 160, 87, 0.12);
    transform: translateY(-1px);
}

.operations-workflow-card.is-active {
    border-color: #24bd65;
    background: #ebfff2;
    box-shadow: inset 0 0 0 1px #24bd65;
}

.operations-workflow-number {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    background: #e8f4ec;
    color: #167c45;
    font-size: 1.063rem;
    font-weight: 800;
}

.operations-workflow-card.is-active .operations-workflow-number {
    background: #28cc6f;
    color: #071c10;
}

.operations-workflow-card strong,
.operations-workflow-card small {
    display: block;
}

.operations-workflow-card strong {
    margin-bottom: 3px;
    font-size: 0.938rem;
    line-height: 1.3;
}

.operations-workflow-card small {
    color: #607067;
    font-size: 0.813rem;
    line-height: 1.45;
}

.operations-workflow-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e1e9e4;
}

.operations-workflow-subnav a {
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid #d9e3dc;
    border-radius: 999px;
    background: #fff;
    color: #26352c;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 20px;
    text-decoration: none;
}

.operations-workflow-subnav a:hover,
.operations-workflow-subnav a:focus-visible,
.operations-workflow-subnav a.is-active {
    border-color: #20b961;
    background: #ddfae8;
    color: #0e6837;
}

.operations-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 46px;
    padding: 2px 0;
    list-style: none;
    cursor: pointer;
}

.operations-disclosure > summary::-webkit-details-marker {
    display: none;
}

.operations-disclosure > summary::after {
    display: grid;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 10px;
    background: #e6f8ed;
    color: #147341;
    content: "+";
    font-size: 1.313rem;
    font-weight: 800;
}

.operations-disclosure[open] > summary::after {
    content: "−";
}

.operations-disclosure > summary span,
.operations-disclosure > summary small {
    display: block;
}

.operations-disclosure > summary span {
    font-size: 1.063rem;
    font-weight: 800;
}

.operations-disclosure > summary small {
    margin-left: auto;
    color: #64736a;
    font-size: 0.813rem;
    line-height: 1.4;
}

.operations-disclosure[open] > summary {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e0e8e3;
}

.operations-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 4px 2px;
    color: #434d47;
    font-size: 0.875rem;
}

.operations-pagination-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

/* 44x44 is the Apple HIG minimum for anything tappable, and page links on a
   phone are hit with a thumb while holding a basket. This was 38px, and the
   other copy of the same component was 40px - nobody chose either number, they
   were what two duplicated blocks drifted to. There is one pager now; this is
   the size it is. The .admin-pagination-* block further down is what the other
   copy used and no longer has any markup pointing at it. */
.operations-pagination-links a,
.operations-pagination-links .is-current {
    display: grid;
    min-width: 44px;
    min-height: 44px;
    padding: 7px 10px;
    place-items: center;
    border: 1px solid #d7e0da;
    border-radius: 10px;
    background: #fff;
    color: #26352c;
    font-weight: 700;
    line-height: 22px;
    text-decoration: none;
}

.operations-pagination-links a:hover,
.operations-pagination-links a:focus-visible,
.operations-pagination-links .is-current {
    border-color: #22bd64;
    background: #e2fbed;
    color: #0c6735;
}

@media (max-width: 980px) {
    .operations-workflow-primary {
        grid-template-columns: 1fr;
    }

    .operations-workflow-card {
        min-height: 72px;
    }
}

@media (max-width: 680px) {
    .operations-workflow {
        padding: 14px;
        border-radius: 14px;
    }

    .operations-workflow-heading,
    .operations-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .operations-workflow-heading p {
        max-width: none;
        text-align: left;
    }

    .operations-workflow-subnav a {
        flex: 1 1 100%;
        border-radius: 11px;
    }

    .operations-disclosure > summary {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .operations-disclosure > summary small {
        order: 3;
        width: 100%;
        margin-left: 0;
    }

    .operations-pagination-links {
        justify-content: flex-start;
    }
}



/* Manager Command Center -------------------------------------------------- */
.admin-manager-subnav {
    display: grid;
    gap: 2px;
    margin: -6px 8px 8px;
    padding: 8px 8px 10px;
    border: 1px solid rgba(255,255,255,.10);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    background: rgba(0,0,0,.20);
}

.admin-manager-subnav a {
    position: relative;
    min-height: 34px;
    padding: 7px 10px 7px 28px !important;
    border-radius: 9px !important;
    color: rgba(255,255,255,.76) !important;
    font-size: 0.813rem !important;
    font-weight: 720 !important;
}

.admin-manager-subnav a::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 50%;
    width: 7px;
    height: 7px;
    border: 1.5px solid rgba(255,255,255,.62);
    border-radius: 50%;
    transform: translateY(-50%);
}

.admin-manager-subnav a.active {
    background: rgba(85,237,135,.09) !important;
    color: #55ed87 !important;
}

.admin-manager-subnav a.active::before {
    border-color: #55ed87;
    background: #55ed87;
}

.manager-command-center {
    --manager-green: #55ed87;
    --manager-green-dark: #167744;
    --manager-red: #e3313d;
    --manager-red-soft: #fff2f3;
    --manager-amber: #ef9c00;
    --manager-amber-soft: #fff8e8;
    --manager-ink: #171a18;
    --manager-muted: #6d736f;
    --manager-line: #dde2de;
    display: grid;
    gap: 18px;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    color: var(--manager-ink);
}

.manager-command-center :is(h2,p,dl,dd,dt) { margin: 0; }
.manager-command-center a { color: inherit; text-decoration: none; }
.manager-command-center button,
.manager-command-center input,
.manager-command-center select,
.manager-command-center textarea { font: inherit; }

.manager-command-toast {
    padding: 11px 14px;
    border: 1px solid #9ee7b7;
    border-radius: 12px;
    background: #effcf3;
    color: #12683a;
    font-weight: 780;
}

.manager-command-toast.is-error {
    border-color: #ffb5ba;
    background: var(--manager-red-soft);
    color: #b51f2b;
}

.manager-command-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.manager-command-metric {
    display: grid;
    grid-template-columns: 52px auto minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    min-height: 88px;
    padding: 14px 17px;
    border: 1px solid var(--manager-line);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(23,31,26,.055);
}

.manager-command-metric-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #e2f8e9;
}

.manager-command-metric-icon img { width: 25px; height: 25px; }
.manager-command-metric > strong { font-size: clamp(1.75rem, 2.4vw, 2.25rem); line-height: 1; }
.manager-command-metric > span:last-child { display: grid; gap: 2px; min-width: 0; }
.manager-command-metric b { font-size: 1rem; line-height: 1.15; }
.manager-command-metric small { color: var(--manager-muted); font-size: 0.813rem; }
.manager-command-metric.is-critical .manager-command-metric-icon,
.manager-command-metric.is-overdue .manager-command-metric-icon { background: #ffe4e6; }
.manager-command-metric.is-critical .manager-command-metric-icon img,
.manager-command-metric.is-overdue .manager-command-metric-icon img { filter: invert(25%) sepia(92%) saturate(2860%) hue-rotate(340deg) brightness(91%); }
.manager-command-metric.is-critical > strong,
.manager-command-metric.is-overdue > strong { color: var(--manager-red); }
.manager-command-metric.is-actions .manager-command-metric-icon { background: #fff0c9; }
.manager-command-metric.is-actions .manager-command-metric-icon img { filter: invert(53%) sepia(80%) saturate(1354%) hue-rotate(4deg) brightness(95%); }

.manager-command-branches {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.manager-command-branch {
    display: grid;
    grid-template-rows: auto minmax(46px, auto) auto;
    min-width: 0;
    border: 1.5px solid var(--manager-line);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    transition: transform .16s ease, box-shadow .16s ease;
}

.manager-command-branch:hover,
.manager-command-branch.is-selected {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(22,36,27,.09);
}

.manager-command-branch.is-critical { border-color: #ef6069; }
.manager-command-branch.is-warning { border-color: #f0ad25; }
.manager-command-branch.is-healthy { border-color: #56bb78; }
.manager-command-branch-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 17px 8px; }
.manager-command-branch-head > span { display: grid; gap: 3px; min-width: 0; }
.manager-command-branch-head small { color: #343a36; font-size: 0.75rem; font-weight: 850; }
.manager-command-branch-head strong { overflow: hidden; font-size: 1.188rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.manager-command-branch-head em { padding: 5px 9px; border-radius: 999px; background: #e6f8eb; color: #187b44; font-size: 0.75rem; font-style: normal; font-weight: 850; }
.manager-command-branch.is-critical .manager-command-branch-head em { background: #ffe3e5; color: #c92431; }
.manager-command-branch.is-warning .manager-command-branch-head em { background: #fff0c6; color: #b87000; }
.manager-command-branch > p { display: flex; align-items: center; gap: 9px; padding: 4px 17px 12px; color: var(--manager-muted); font-size: 0.875rem; font-weight: 720; }
.manager-command-branch.is-critical > p { color: var(--manager-red); }
.manager-command-branch.is-warning > p { color: #ba7600; }
.manager-command-branch.is-healthy > p { color: #258553; }
.manager-command-state-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.manager-command-branch-foot { display: grid; grid-template-columns: auto minmax(0, 1fr) 18px; align-items: center; gap: 18px; min-height: 48px; padding: 10px 16px; border-top: 1px solid var(--manager-line); font-size: 0.75rem; font-weight: 760; }
.manager-command-branch-foot > span { display: flex; align-items: center; gap: 7px; min-width: 0; }
.manager-command-branch-foot img { width: 17px; height: 17px; }
.manager-command-branch-foot .manager-command-chevron { width: 15px; height: 15px; }

.manager-command-workspace {
    display: grid;
    grid-template-columns: minmax(610px, 1.75fr) minmax(390px, 1fr);
    gap: 14px;
    min-width: 0;
    align-items: stretch;
}

.manager-command-queue,
.manager-command-detail {
    min-width: 0;
    border: 1px solid var(--manager-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(23,31,26,.05);
}

.manager-command-queue { overflow: hidden; }
.manager-command-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; padding: 13px 16px; }
.manager-command-section-head h2 { font-size: 1.25rem; }
.manager-command-section-head h2 span { display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin-left: 5px; border-radius: 999px; background: var(--manager-red); color: #fff; font-size: 0.75rem; }
.manager-command-sort label { display: flex; align-items: center; gap: 6px; color: var(--manager-muted); font-size: 0.75rem; font-weight: 720; }
.manager-command-sort select { width: auto; min-width: 150px; height: 36px; padding: 6px 30px 6px 9px; border: 1px solid var(--manager-line); border-radius: 9px; background-color: #fff; }
.manager-command-clear-filter { display: block; width: fit-content; margin: -5px 16px 9px; color: var(--manager-green-dark) !important; font-size: 0.75rem; font-weight: 850; }

.manager-command-list-head,
.manager-command-row {
    display: grid;
    grid-template-columns: 36px 112px minmax(132px, 1.35fr) 68px 74px 90px 74px;
    gap: 5px;
    align-items: center;
}

.manager-command-list-head {
    padding: 8px 14px;
    border-bottom: 1px solid var(--manager-line);
    color: #565d58;
    font-size: 0.688rem;
    font-weight: 820;
}

.manager-command-list-head span:first-child { grid-column: 1 / 2; font-size: 0; }
.manager-command-list-head span:first-child::after { content: "ระดับ"; font-size: 0.688rem; }
.manager-command-row { min-height: 78px; padding: 10px 14px; border-bottom: 1px solid #ecefec; }
.manager-command-row:last-child { border-bottom: 0; }
.manager-command-row:hover { background: #f8fbf9; }
.manager-command-row.is-selected.is-critical { background: var(--manager-red-soft); }
.manager-command-row.is-selected.is-warning { background: var(--manager-amber-soft); }
.manager-command-row span { min-width: 0; }
.manager-command-severity { display: grid; place-items: center; width: 34px; height: 34px; }
.manager-command-severity img { width: 27px; height: 27px; filter: invert(26%) sepia(95%) saturate(2647%) hue-rotate(340deg) brightness(92%); }
.manager-command-row.is-warning .manager-command-severity img { filter: invert(61%) sepia(91%) saturate(1767%) hue-rotate(5deg) brightness(98%); }
.manager-command-machine { display: grid; grid-template-columns: auto 1fr; column-gap: 7px; align-items: center; }
.manager-command-machine b { grid-row: 1 / span 2; display: grid; place-items: center; min-width: 34px; height: 24px; border-radius: 7px; background: var(--manager-red); color: #fff; font-size: 0.688rem; }
.manager-command-row.is-warning .manager-command-machine b { background: #f1b528; color: #4d3700; }
.manager-command-machine strong { overflow: hidden; font-size: 0.813rem; text-overflow: ellipsis; white-space: nowrap; }
.manager-command-machine small { overflow: hidden; color: var(--manager-muted); font-size: 0.563rem; text-overflow: ellipsis; white-space: nowrap; }
.manager-command-problem,
.manager-command-detected,
.manager-command-age { display: grid; gap: 2px; }
.manager-command-problem strong { font-size: 0.813rem; }
.manager-command-problem small { overflow: hidden; color: var(--manager-muted); font-size: 0.625rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.manager-command-detected strong,
.manager-command-age strong { font-size: 0.75rem; }
.manager-command-detected small,
.manager-command-age small { color: var(--manager-muted); font-size: 0.625rem; }
.manager-command-age small.is-danger { color: var(--manager-red); font-weight: 850; }
.manager-command-assignee { display: flex; align-items: center; gap: 7px; }
.manager-command-assignee i { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: #73e59a; color: #174b2a; font-size: 0.563rem; font-style: normal; font-weight: 900; }
.manager-command-assignee small { overflow: hidden; color: #424944; font-size: 0.625rem; line-height: 1.2; text-overflow: ellipsis; }
.manager-command-open { display: grid; place-items: center; min-height: 32px; padding: 7px 8px; border-radius: 999px; background: #77e999; color: #103d20; font-size: 0.688rem; font-weight: 900; text-align: center; }

.manager-command-detail { align-self: start; overflow: hidden; }
.manager-command-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 14px 7px; background: #fff8f8; border-bottom: 1px solid var(--manager-line); }
.manager-command-detail-head > div { min-width: 0; }
.manager-command-detail-head em { display: inline-block; margin-bottom: 6px; padding: 4px 8px; border-radius: 999px; background: #ffe2e4; color: var(--manager-red); font-size: 0.688rem; font-style: normal; font-weight: 900; }
.manager-command-detail-head h2 { font-size: 1.063rem; line-height: 1.15; }
.manager-command-detail-head p { margin-top: 3px; color: #454b47; font-size: 0.75rem; font-weight: 760; }
.manager-command-detail-head > small { flex: 0 0 auto; color: var(--manager-muted); font-size: 0.625rem; }
.manager-command-detail-grid { display: grid; grid-template-columns: 1fr 1fr; padding: 6px 14px; }
.manager-command-detail-grid dl { min-width: 0; }
.manager-command-detail-grid dl + dl { padding-left: 14px; border-left: 1px solid var(--manager-line); }
.manager-command-detail-grid div { display: grid; grid-template-columns: minmax(92px, .9fr) minmax(0, 1.25fr); gap: 8px; padding: 4px 0; }
.manager-command-detail-grid dt { color: #505651; font-size: 0.625rem; font-weight: 770; }
.manager-command-detail-grid dd { overflow-wrap: anywhere; font-size: 0.625rem; line-height: 1.25; }
.manager-command-detail-grid dd.is-danger { color: var(--manager-red); font-weight: 850; }
.manager-command-detail-grid dd.is-success { color: #23824e; font-weight: 820; }
.manager-command-detail-links { display: flex; align-items: center; justify-content: center; gap: 28px; padding: 7px 16px 10px; color: var(--manager-green-dark); font-size: 0.688rem; font-weight: 850; }
.manager-command-detail-links form { margin: 0; }
.manager-command-text-action { min-height: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--manager-green-dark) !important; box-shadow: none !important; }

.manager-command-handoff { margin: 0 12px 10px; padding: 10px; border: 1px solid var(--manager-line); border-radius: 12px; background: #fff; }
.manager-command-handoff-title { display: flex; align-items: baseline; gap: 7px; margin-bottom: 6px; }
.manager-command-handoff-title strong { font-size: 0.813rem; }
.manager-command-handoff-title span { color: var(--manager-muted); font-size: 0.625rem; }
.manager-command-handoff textarea { display: block; width: 100%; height: 96px; resize: vertical; padding: 9px; border: 1px solid #d8ddd9; border-radius: 9px; background: #fbfcfb; color: #303531; font-size: 0.625rem; line-height: 1.35; }
.manager-command-action-form { margin-top: 8px; }
.manager-command-assign-disclosure { margin-bottom: 8px; border: 1px solid var(--manager-line); border-radius: 8px; background: #fbfcfb; }
.manager-command-assign-disclosure > summary { cursor: pointer; padding: 7px 9px; color: #4f5651; font-size: 0.625rem; font-weight: 820; list-style-position: inside; }
.manager-command-assign-disclosure[open] > summary { border-bottom: 1px solid var(--manager-line); }
.manager-command-assign-fields { display: grid; grid-template-columns: 1.2fr .8fr; gap: 8px; margin-bottom: 8px; }
.manager-command-assign-disclosure .manager-command-assign-fields { padding: 8px; margin-bottom: 0; }
.manager-command-assign-fields label { display: grid; gap: 4px; color: #555c57; font-size: 0.625rem; font-weight: 800; }
.manager-command-assign-fields select,
.manager-command-assign-fields input { width: 100%; height: 34px; min-height: 34px; padding: 6px 8px; border: 1px solid var(--manager-line); border-radius: 8px; background: #fff; font-size: 0.688rem; }
.manager-command-handoff-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.manager-command-handoff-actions button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 41px; padding: 8px 10px; border-radius: 10px; font-size: 0.688rem; font-weight: 880; }
.manager-command-handoff-actions img { width: 17px; height: 17px; }
.manager-command-copy { border: 1.5px solid #43c66d !important; background: #fff !important; color: #176d39 !important; }
.manager-command-copy.is-copied { background: #eafcef !important; }
.manager-command-copy.is-copy-error { border-color: var(--manager-red) !important; color: var(--manager-red) !important; }
.manager-command-save { border: 1.5px solid var(--manager-green) !important; background: var(--manager-green) !important; color: #0d351b !important; }
.manager-command-line-note { display: block; margin-top: 7px; color: var(--manager-muted); font-size: 0.563rem; text-align: center; }
.manager-command-audit { display: flex; align-items: center; gap: 8px; padding: 0 14px 12px; color: #4d544f; font-size: 0.625rem; font-weight: 720; }
.manager-command-audit img { width: 17px; height: 17px; }

.manager-command-empty { display: grid; place-items: center; gap: 7px; min-height: 210px; padding: 28px; color: var(--manager-muted); text-align: center; }
.manager-command-empty img { width: 38px; height: 38px; filter: invert(58%) sepia(81%) saturate(457%) hue-rotate(88deg) brightness(96%); }
.manager-command-empty strong { color: var(--manager-ink); font-size: 1.063rem; }
.manager-command-empty-detail { min-height: 460px; }

@media (max-width: 1320px) {
    .manager-command-workspace { grid-template-columns: minmax(570px, 1.45fr) minmax(365px, 1fr); }
    .manager-command-list-head,
    .manager-command-row { grid-template-columns: 38px 112px minmax(130px, 1fr) 72px 80px 88px 74px; gap: 6px; }
    .manager-command-row { padding-inline: 10px; }
    .manager-command-list-head { padding-inline: 10px; }
}

@media (max-width: 1160px) {
    .manager-command-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .manager-command-branches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .manager-command-workspace { grid-template-columns: minmax(0, 1fr); }
    .manager-command-detail { width: 100%; }
}

@media (max-width: 760px) {
    .manager-command-center { gap: 12px; }
    .manager-command-metrics,
    .manager-command-branches { grid-template-columns: minmax(0, 1fr); }
    .manager-command-list-head { display: none; }
    /* 38 + 92 + 130 + 78 is 338px of minimums before gaps and padding, and the
       card around it is overflow: hidden - so on a 375px phone the last column
       was clipped rather than wrapped, taking the button with it. The narrow
       block below drops the fixed track and gives the button its own row. */
    .manager-command-row { grid-template-columns: 38px minmax(92px, .8fr) minmax(130px, 1.2fr) 78px; }
    .manager-command-detected,
    .manager-command-age,
    .manager-command-assignee { display: none; }
    .manager-command-open { grid-column: 4; }
    .manager-command-detail-grid { grid-template-columns: 1fr; }
    .manager-command-detail-grid dl + dl { padding: 0; border-left: 0; }
    .manager-command-assign-fields,
    .manager-command-handoff-actions { grid-template-columns: 1fr; }
}

/* Super Admin Support Center — branch-scoped operational triage */
.admin-support-center .admin-workspace > .page {
    width: min(1500px, calc(100% - 24px));
    padding-top: 14px;
}

.support-center {
    --support-green: #55ed87;
    --support-green-dark: #167744;
    --support-red: #e3313d;
    --support-red-soft: #fff1f2;
    --support-amber: #ef9c00;
    --support-amber-soft: #fff7e2;
    --support-line: #dfe4e0;
    --support-muted: #6b726d;
    display: grid;
    gap: 12px;
    color: #171a18;
}

.support-center :is(h2,h3,p,dl,dd,dt,ol) { margin: 0; }
.support-center a { color: inherit; text-decoration: none; }
.support-center button,
.support-center input,
.support-center select { font: inherit; }

.support-toast {
    padding: 10px 14px;
    border: 1px solid #9ee7b7;
    border-radius: 10px;
    background: #effcf3;
    color: #12683a;
    font-size: 0.813rem;
    font-weight: 800;
}

.support-toast.is-error { border-color: #ffb5ba; background: var(--support-red-soft); color: #b51f2b; }

.support-global-search {
    display: grid;
    grid-template-columns: auto minmax(260px, 1fr) 92px;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--support-line);
    background: #fff;
}

.support-global-search label { font-size: 0.813rem; font-weight: 850; white-space: nowrap; }
.support-global-search input { width: 100%; height: 42px; padding: 9px 14px; border: 1px solid var(--support-line); border-radius: 9px; background: #fff; }
.support-global-search button { height: 42px; border: 1px solid var(--support-green); border-radius: 9px; background: var(--support-green); color: #113b20; font-weight: 900; }

.support-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.support-kpis article {
    display: grid;
    grid-template-columns: 48px auto minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    min-height: 82px;
    padding: 12px 14px;
    border: 1px solid var(--support-line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(20,28,23,.045);
}

.support-kpi-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; background: #e6f8ec; }
.support-kpi-icon img { width: 24px; height: 24px; }
.support-kpi-icon.is-red { background: #ffe3e6; }
.support-kpi-icon.is-red img { filter: invert(25%) sepia(92%) saturate(2850%) hue-rotate(340deg) brightness(92%); }
.support-kpi-icon.is-amber { background: #fff0c7; }
.support-kpi-icon.is-amber img { filter: invert(53%) sepia(84%) saturate(1367%) hue-rotate(4deg) brightness(96%); }
.support-kpi-icon.is-green img { filter: invert(39%) sepia(66%) saturate(923%) hue-rotate(96deg) brightness(91%); }
.support-kpis article > strong { font-size: clamp(1.688rem,2.3vw,2.125rem); line-height: 1; }
.support-kpis article > span:last-child { display: grid; gap: 2px; min-width: 0; }
.support-kpis b { font-size: 0.875rem; line-height: 1.15; }
.support-kpis small { overflow: hidden; color: var(--support-muted); font-size: 0.688rem; text-overflow: ellipsis; white-space: nowrap; }

.support-workspace {
    display: grid;
    grid-template-columns: minmax(250px,.7fr) minmax(0,1.8fr);
    gap: 10px;
    min-width: 0;
    align-items: stretch;
}

.support-branches,
.support-machines,
.support-diagnosis,
.support-timeline {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--support-line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(20,28,23,.04);
}

.support-branches,
.support-machines { display: flex; height: 100%; flex-direction: column; }

.support-branches > header,
.support-machines > header,
.support-timeline > header {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--support-line);
}

.support-branches h2,
.support-machines h2 { min-width: 0; overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.support-timeline h2 { min-width: 0; overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.support-branches h2 span { color: var(--support-muted); font-size: 0.688rem; }
.support-machines > header > span { display: grid; min-width: 23px; height: 23px; place-items: center; border-radius: 50%; background: var(--support-red); color: #fff; font-size: 0.625rem; font-weight: 900; }

.support-branch-tools { display: grid; grid-template-columns: 1fr 1.1fr; gap: 7px; padding: 9px 10px; border-bottom: 1px solid var(--support-line); }
.support-branch-tools label { display: grid; gap: 3px; color: var(--support-muted); font-size: 0.688rem; font-weight: 800; }
.support-branch-tools select,
.support-branch-tools input { width: 100%; height: 33px; min-height: 33px; padding: 6px 8px; border: 1px solid var(--support-line); border-radius: 8px; background: #fff; font-size: 0.625rem; }
.support-branch-tools select,
.support-branch-tools input { font-size: 0.75rem; }
.support-branch-tools input { grid-column: 1 / -1; }
.support-compact-submit { display: none; }

.support-branch-list,
.support-machine-list { flex: 1 1 auto; }
.support-branch-list { min-height: 438px; }
.support-branch-row { display: grid; grid-template-columns: 8px minmax(0,1fr) 24px 24px; align-items: center; gap: 8px; min-height: 62px; padding: 8px 10px; border-bottom: 1px solid #edf0ee; }
.support-branch-row:hover { background: #f8fbf9; }
.support-branch-row.is-selected { background: #f1fbf4; box-shadow: inset 0 0 0 1px #49b66f; }
.support-branch-row > i { width: 8px; height: 8px; border-radius: 50%; background: #45ad69; }
.support-branch-row.is-critical > i { background: var(--support-red); }
.support-branch-row.is-warning > i { background: var(--support-amber); }
.support-branch-row > span { display: grid; min-width: 0; }
.support-branch-row small { color: #303632; font-size: 0.625rem; font-weight: 900; }
.support-branch-row strong { overflow: hidden; font-size: 0.813rem; text-overflow: ellipsis; white-space: nowrap; }
.support-branch-row em { overflow: hidden; color: var(--support-muted); font-size: 0.625rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.support-branch-row > b { display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid #62c984; border-radius: 50%; color: #208044; font-size: 0.625rem; }
.support-branch-row > b.is-critical-count { border-color: #ef616b; color: #c82834; }
.support-branch-row > b.is-warning-count { border-color: #efad2c; color: #a96800; }

.support-pagination { display: flex; min-height: 38px; align-items: center; justify-content: center; gap: 6px; border-top: 1px solid var(--support-line); }
.support-pagination a { display: grid; min-width: 25px; height: 25px; place-items: center; border-radius: 6px; font-size: 0.625rem; }
.support-pagination a.active { background: var(--support-green); font-weight: 900; }
.support-pagination span { color: var(--support-muted); font-size: 0.563rem; }
.support-branches > footer { display: flex; min-height: 32px; align-items: center; justify-content: space-around; gap: 8px; margin-top: auto; padding: 6px 10px; border-top: 1px solid var(--support-line); color: var(--support-muted); font-size: 0.688rem; }
.support-branches > footer span { display: flex; align-items: center; gap: 4px; }
.support-branches > footer i { width: 7px; height: 7px; border-radius: 50%; background: #45ad69; }
.support-branches > footer i.is-warning { background: var(--support-amber); }
.support-branches > footer i.is-critical { background: var(--support-red); }

.support-machine-tabs { display: flex; align-items: center; gap: 18px; padding: 7px 12px 0; border-bottom: 1px solid var(--support-line); }
.support-machine-tabs a { position: relative; display: flex; gap: 5px; padding: 7px 2px 9px; color: var(--support-muted); font-size: 0.75rem; font-weight: 800; }
.support-machine-tabs a.active { color: #111; }
.support-machine-tabs a.active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--support-red); content: ""; }
.support-machine-tabs b { color: inherit; }
.support-machine-list-head,
.support-machine-row { display: grid; grid-template-columns: 42px 120px minmax(180px,1fr) 80px 95px 120px; align-items: center; gap: 8px; }
.support-machine-list-head { padding: 8px 12px; color: #565d58; font-size: 0.688rem; font-weight: 850; }
.support-machine-row { min-height: 78px; padding: 10px 12px; border-top: 1px solid #edf0ee; }
.support-machine-row:hover { background: #f8fbf9; }
.support-machine-row.is-selected.is-critical { background: var(--support-red-soft); }
.support-machine-row.is-selected.is-warning { background: var(--support-amber-soft); }
.support-machine-row > span { display: grid; min-width: 0; gap: 2px; }
.support-machine-row strong { overflow: hidden; font-size: 0.813rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.support-machine-row small { overflow: hidden; color: var(--support-muted); font-size: 0.625rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.support-machine-row small.is-danger { color: var(--support-red); font-weight: 900; }
.support-state-icon { display: grid !important; width: 31px; height: 31px; place-items: center; }
.support-state-icon img { width: 23px; height: 23px; filter: invert(27%) sepia(86%) saturate(2366%) hue-rotate(339deg) brightness(90%); }
.support-machine-row.is-warning .support-state-icon img { filter: invert(61%) sepia(89%) saturate(1514%) hue-rotate(5deg) brightness(98%); }
.support-machine-row.is-healthy .support-state-icon img { filter: invert(41%) sepia(62%) saturate(856%) hue-rotate(94deg) brightness(89%); }
.support-assignee { grid-template-columns: 25px minmax(0,1fr) !important; align-items: center; }
.support-assignee i { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #6ee492; color: #184a2a; font-size: 0.563rem; font-style: normal; font-weight: 900; }
.support-machines > footer { display: flex; min-height: 34px; align-items: center; justify-content: space-between; margin-top: auto; padding: 7px 11px; border-top: 1px solid var(--support-line); color: var(--support-muted); font-size: 0.688rem; }
.support-machines > footer a { color: var(--support-green-dark); font-weight: 850; text-decoration: underline; }

.support-diagnosis { grid-column: 1 / -1; align-self: start; }
.support-diagnosis > header { padding: 9px 11px 8px; border-bottom: 1px solid var(--support-line); background: #fffafa; }
.support-severity { display: inline-block; margin-bottom: 5px; padding: 5px 9px; border-radius: 999px; background: #e5f8eb; color: #1c7a44; font-size: 0.688rem; font-weight: 900; }
.support-severity.is-critical { background: #ffe2e5; color: #c82331; }
.support-severity.is-warning { background: #fff0c8; color: #a86b00; }
.support-diagnosis > header h2 { font-size: 1.125rem; line-height: 1.25; }
.support-diagnosis > header p { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; font-size: 0.75rem; }
.support-diagnosis > header p small { color: var(--support-muted); font-weight: 500; }
.support-detail-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 8px; padding: 8px 10px; }
.support-detail-grid section,
.support-root-grid section { min-width: 0; padding: 8px; border: 1px solid var(--support-line); border-radius: 9px; }
.support-detail-grid h3,
.support-root-grid h3 { margin-bottom: 7px; font-size: 0.875rem; }
.support-detail-grid dl { display: grid; gap: 4px; }
.support-detail-grid dl div { display: grid; grid-template-columns: minmax(65px,.85fr) minmax(0,1.3fr); gap: 5px; }
.support-detail-grid dt { color: #545b56; font-size: 0.75rem; font-weight: 800; }
.support-detail-grid dd { overflow-wrap: anywhere; font-size: 0.813rem; }
.support-detail-grid dd.is-danger { color: var(--support-red); font-weight: 900; }
.support-health-chain { display: grid; gap: 4px; padding: 0; list-style: none; }
.support-health-chain li { display: grid; grid-template-columns: 15px minmax(0,1fr); align-items: center; gap: 6px; }
.support-health-chain img { width: 14px; height: 14px; filter: invert(41%) sepia(62%) saturate(856%) hue-rotate(94deg) brightness(89%); }
.support-health-chain li.is-error img { filter: invert(27%) sepia(86%) saturate(2366%) hue-rotate(339deg) brightness(90%); }
/* The base rule paints every chain icon green, and only is-error overrode it -
   so a row the page had judged as WARN sat there in the colour of a healthy
   one. This chain exists to answer "which link in the chain is broken", and a
   warning that looks like a pass is worse than no warning. Amber matches the
   is-warning machine rows above. */
.support-health-chain li.is-warn img { filter: invert(61%) sepia(89%) saturate(1514%) hue-rotate(5deg) brightness(98%); }
.support-health-chain span { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 5px; }
.support-health-chain b { font-size: 0.75rem; }
.support-health-chain small { overflow: hidden; color: var(--support-muted); font-size: 0.688rem; text-overflow: ellipsis; white-space: nowrap; }
.support-health-chain li.is-error small { color: var(--support-red); font-weight: 850; }
.support-health-chain li.is-warn small { color: var(--support-amber, #b45309); font-weight: 850; }
.support-root-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 8px; padding: 0 10px 8px; }
.support-root-grid strong { display: block; font-size: 0.813rem; line-height: 1.35; }
.support-root-grid p { margin-top: 5px; color: var(--support-muted); font-size: 0.75rem; line-height: 1.45; }
.support-root-grid span { display: block; margin-top: 8px; color: var(--support-green-dark); font-size: 0.688rem; font-weight: 850; }
.support-root-grid progress { width: 100%; height: 7px; accent-color: #3db96b; }
.support-root-grid ol { display: grid; gap: 6px; padding-left: 19px; font-size: 0.75rem; line-height: 1.45; }
.support-detail-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; padding: 0 10px 8px; }
.support-detail-metrics span { display: grid; gap: 2px; padding: 7px; border: 1px solid var(--support-line); border-radius: 8px; }
.support-detail-metrics small { color: var(--support-muted); font-size: 0.688rem; }
.support-detail-metrics strong { overflow: hidden; font-size: 0.813rem; text-overflow: ellipsis; white-space: nowrap; }
.support-action-form { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; padding: 0 10px 8px; }
.support-submit-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.support-action-form button { display: flex; min-height: 45px; align-items: center; justify-content: center; gap: 7px; padding: 8px 10px; border-radius: 9px; font-size: 0.813rem; font-weight: 900; }
.support-action-form img { width: 16px; height: 16px; }
.support-primary-action { border: 1px solid #27b95a !important; background: #27b95a !important; color: #fff !important; }
.support-primary-action small { display: block; color: rgba(255,255,255,.82); font-size: 0.688rem; }
.support-primary-action img { filter: brightness(0) invert(1); }
.support-secondary-action { border: 1px solid #9ea59f !important; background: #fff !important; color: #2b312d !important; }
.support-scope-lock { display: flex; align-items: center; gap: 9px; margin: 0 10px 10px; padding: 9px 11px; border: 1px solid #eadca6; border-radius: 9px; background: #fffbed; color: #59543f; font-size: 0.688rem; }
.support-scope-lock img { width: 17px; height: 17px; opacity: .62; }
.support-scope-lock span { display: grid; gap: 2px; }
.support-scope-lock strong { color: #242720; font-size: 0.75rem; }

.support-timeline > header a { padding: 6px 10px; border: 1px solid var(--support-line); border-radius: 7px; font-size: 0.688rem; font-weight: 800; }
.support-timeline-track { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); min-height: 100px; padding: 13px 12px; }
.support-timeline-track article { position: relative; display: grid; align-content: start; gap: 4px; min-width: 0; padding: 13px 8px 8px; border-top: 1px solid #afb6b1; text-align: center; }
.support-timeline-track article > i { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: #44b56c; transform: translateX(-50%); }
.support-timeline-track article.is-danger > i { background: var(--support-red); }
.support-timeline-track strong { font-size: 0.688rem; }
.support-timeline-track b { overflow: hidden; font-size: 0.75rem; line-height: 1.25; overflow-wrap: anywhere; }
.support-timeline-track small { overflow: hidden; color: var(--support-muted); font-size: 0.625rem; line-height: 1.25; overflow-wrap: anywhere; }

.support-empty { display: grid; min-height: 110px; place-items: center; padding: 20px; color: var(--support-muted); font-size: 0.75rem; text-align: center; }

@media (max-width: 1320px) {
    .support-workspace { grid-template-columns: minmax(230px,.65fr) minmax(0,1.35fr); }
    .support-machine-list-head,
    .support-machine-row { grid-template-columns: 36px 96px minmax(140px,1fr) 58px 72px 88px; gap: 5px; }
}

@media (max-width: 1160px) {
    .support-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .support-workspace { grid-template-columns: minmax(230px,.7fr) minmax(0,1.3fr); }
    .support-diagnosis { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
    .support-global-search { grid-template-columns: 1fr 86px; }
    .support-global-search label { grid-column: 1 / -1; }
    .support-workspace { grid-template-columns: 1fr; }
    .support-diagnosis { grid-column: auto; }
    .support-timeline-track { grid-template-columns: repeat(3,minmax(0,1fr)); row-gap: 12px; }
}

@media (max-width: 560px) {
    .support-kpis { grid-template-columns: 1fr; }
    .support-global-search { grid-template-columns: 1fr; }
    .support-global-search button { width: 100%; }
    .support-detail-grid,
    .support-root-grid,
    .support-detail-metrics,
    .support-action-form { grid-template-columns: 1fr; }
    .support-machine-list-head { display: none; }
    .support-machine-row { grid-template-columns: 31px minmax(74px,.8fr) minmax(110px,1.2fr) 58px; }
    .support-machine-row > span:nth-child(4),
    .support-machine-row > span:nth-child(6) { display: none; }
    .support-timeline-track { grid-template-columns: 1fr; }
}

/* Branch machine connection details use a compact visual trigger. */
.admin-page .bcc-machine-flow-toggle {
    box-sizing: border-box;
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
}

/* Points-only Promotion Library — UI mockup, no ledger or award processing. */
.admin-page .dashboard-button-system .promo-template-card[hidden],
.dashboard-button-system .points-empty-state[hidden] {
    display: none !important;
}

.dashboard-button-system .points-library {
    display: grid;
    gap: 20px;
    min-width: 0;
    padding: 22px;
    border: 1px solid #bfe9cc;
    border-radius: 22px;
    background: linear-gradient(180deg, #f4fff8 0, #fff 170px);
}

.dashboard-button-system .promo-library-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.dashboard-button-system .promo-library-head > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.dashboard-button-system .promo-library-head :is(h4, p) {
    margin: 0;
}

.dashboard-button-system .promo-library-head h4 {
    font-size: 1.25rem;
    line-height: 1.3;
}

.dashboard-button-system .promo-library-head p {
    max-width: 820px;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.5;
}

.dashboard-button-system .promo-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--color-ink);
    color: #fff;
    font-size: 0.688rem;
    font-weight: 900;
    white-space: nowrap;
}

.dashboard-button-system .points-library-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
    align-items: end;
    gap: 16px;
}

.dashboard-button-system .points-search {
    display: grid;
    gap: 5px;
    min-width: 0;
    color: var(--color-text-secondary);
    font-size: 0.625rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.dashboard-button-system .points-search input {
    width: 100%;
    min-height: 44px;
    border-color: #bfc8bd;
    background: #fff;
    color: var(--color-ink);
    font-size: 0.813rem;
    text-transform: none;
}

.dashboard-button-system .points-filter-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
}

.admin-page .dashboard-button-system .points-filter-chip {
    appearance: none;
    min-height: 36px;
    margin: 0;
    padding: 7px 11px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    box-shadow: none;
    color: var(--color-text-secondary);
    font: inherit;
    font-size: 0.688rem;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
}

.admin-page .dashboard-button-system .points-filter-chip:hover {
    border-color: #9fa69d;
    color: var(--color-ink);
}

.admin-page .dashboard-button-system .points-filter-chip.is-active {
    border-color: var(--color-ink);
    background: var(--color-ink);
    color: #fff;
}

.admin-page .dashboard-button-system .points-filter-chip:focus-visible {
    outline: 3px solid rgba(77, 159, 255, .45);
    outline-offset: 3px;
}

.dashboard-button-system .points-template-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 14px;
    min-width: 0;
}

.dashboard-button-system .points-template-card strong i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 3px;
    border-radius: 50%;
    background: #edf0eb;
    color: var(--color-text-secondary);
    font-size: 0.563rem;
    font-style: normal;
    vertical-align: 1px;
}

.dashboard-button-system .points-template-card.is-selected strong i {
    background: var(--color-brand-primary);
    color: var(--color-ink);
}

.dashboard-button-system .points-empty-state {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 24px;
    border: 1px dashed #bfc8bd;
    border-radius: 14px;
    background: #fff;
    color: var(--color-text-secondary);
    text-align: center;
}

.dashboard-button-system .points-empty-state strong {
    color: var(--color-ink);
}

.dashboard-button-system .points-rule-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
    gap: 20px;
    min-width: 0;
    padding-top: 20px;
    border-top: 1px solid #d7eadd;
}

.dashboard-button-system .points-rule-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.dashboard-button-system .points-rule-summary-grid > div {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: #f8faf7;
}

.dashboard-button-system .points-rule-summary-grid span {
    color: var(--color-text-secondary);
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
}

.dashboard-button-system .points-rule-summary-grid strong {
    font-size: 0.875rem;
    line-height: 1.35;
}

.dashboard-button-system .points-setting-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #cfd4cd;
    border-radius: 10px;
    background: #fff;
}

.dashboard-button-system .points-setting-control input {
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.dashboard-button-system .points-setting-control small {
    padding: 0 10px;
    color: var(--color-text-secondary);
    font-size: 0.625rem;
    font-weight: 800;
}

.dashboard-button-system .points-common-settings {
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

.dashboard-button-system .points-human-rule {
    display: grid;
    gap: 5px;
    padding: 14px;
    border-left: 4px solid var(--color-info);
    border-radius: 12px;
    background: var(--color-info-soft);
    color: #155a9a;
}

.dashboard-button-system .points-human-rule > span {
    font-size: 0.625rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.dashboard-button-system .points-human-rule p {
    margin: 0;
    color: var(--color-ink);
    font-size: 0.813rem;
    font-weight: 800;
    line-height: 1.5;
}

.dashboard-button-system .points-safety-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.dashboard-button-system .points-safety-grid > div {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    min-width: 0;
    padding: 10px;
    border: 1px solid #ccebd6;
    border-radius: 12px;
    background: #f2fff6;
}

.dashboard-button-system .points-safety-grid b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #06c755;
    color: #fff;
    font-size: 0.688rem;
}

.dashboard-button-system .points-safety-grid span {
    display: grid;
    gap: 2px;
}

.dashboard-button-system .points-safety-grid strong {
    font-size: 0.688rem;
}

.dashboard-button-system .points-safety-grid small {
    color: var(--color-text-secondary);
    font-size: 0.563rem;
    font-weight: 700;
    line-height: 1.35;
}

.dashboard-button-system :is(.points-stacking-note, .points-source-note) {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f4f5f3;
    font-size: 0.688rem;
}

.dashboard-button-system :is(.points-stacking-note, .points-source-note) span {
    color: var(--color-text-secondary);
    font-weight: 750;
}

.dashboard-button-system .points-customer-preview {
    position: sticky;
    top: 18px;
}

.dashboard-button-system .points-earned-hero {
    display: grid;
    gap: 4px;
    padding: 16px;
    border-radius: 16px;
    background: var(--color-brand-primary);
    color: var(--color-ink);
}

.dashboard-button-system .points-earned-hero small {
    font-size: 0.563rem;
    font-weight: 800;
    text-transform: uppercase;
}

.dashboard-button-system .points-earned-hero strong {
    font-size: 1.438rem;
    line-height: 1.2;
}

.dashboard-button-system .points-earned-hero span {
    font-size: 0.688rem;
    font-weight: 800;
}

.dashboard-button-system :is(.points-balance-card, .points-event-proof) {
    display: grid;
    gap: 3px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: #fff;
}

.dashboard-button-system :is(.points-balance-card, .points-event-proof) > span {
    color: var(--color-text-secondary);
    font-size: 0.563rem;
    font-weight: 800;
    text-transform: uppercase;
}

.dashboard-button-system .points-balance-card strong {
    font-size: 1.25rem;
}

.dashboard-button-system :is(.points-balance-card, .points-event-proof) small {
    color: var(--color-text-secondary);
    font-size: 0.563rem;
    font-weight: 700;
}

.dashboard-button-system .promo-price-library-head {
    margin-top: 6px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.dashboard-button-system .promo-price-library-head .promo-count-badge {
    background: var(--color-info-soft);
    color: #155a9a;
}

.dashboard-button-system .promo-price-template-tabs {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    max-width: 620px;
}

@media (max-width: 1100px) {
    .dashboard-button-system .points-template-grid {
        grid-template-columns: repeat(2, minmax(200px, 1fr));
    }

    .dashboard-button-system .points-rule-workbench {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-button-system .points-customer-preview {
        position: static;
    }
}

@media (max-width: 780px) {
    .dashboard-button-system .points-library-toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-button-system .points-filter-row {
        justify-content: flex-start;
    }

    .admin-page .dashboard-button-system .points-filter-chip {
        min-height: 44px;
    }

    .dashboard-button-system .points-safety-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .dashboard-button-system .points-library {
        gap: 16px;
        padding: 16px;
        border-radius: 16px;
    }

    .dashboard-button-system .promo-library-head {
        flex-direction: column;
    }

    .dashboard-button-system .points-template-grid,
    .dashboard-button-system .points-rule-summary-grid,
    .dashboard-button-system .promo-price-template-tabs,
    .dashboard-button-system :is(.points-stacking-note, .points-source-note) {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-button-system .promo-price-template-tabs {
        max-width: none;
    }
}

/* Promotion Studio — UI mockup for future LINE-linked campaign templates. */
.dashboard-button-system .promotion-studio {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.dashboard-button-system .promotion-studio-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #e7b449;
    border-radius: 14px;
    background: #fff8e8;
    color: #674000;
}

.dashboard-button-system .promotion-studio-notice p {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 750;
    line-height: 1.45;
}

.dashboard-button-system .promo-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.625rem;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.dashboard-button-system .promo-status-pill.is-live {
    border: 1px solid rgba(36, 200, 117, .45);
    background: var(--color-success-soft);
    color: #087247;
}

.dashboard-button-system .promo-status-pill.is-mock {
    border: 1px solid #d5a52d;
    background: #fff1c2;
    color: #714500;
}

.dashboard-button-system .promo-template-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 14px;
    min-width: 0;
}

.admin-page .dashboard-button-system .promo-template-card {
    appearance: none;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
    min-width: 0;
    min-height: 112px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-surface);
    box-shadow: none;
    color: var(--color-ink);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.admin-page .dashboard-button-system .promo-template-card:hover {
    border-color: #b9c0b7;
    background: #f8faf7;
    transform: translateY(-1px);
}

.admin-page .dashboard-button-system .promo-template-card:focus-visible {
    outline: 3px solid rgba(77, 159, 255, .45);
    outline-offset: 3px;
}

.admin-page .dashboard-button-system .promo-template-card.is-selected {
    border-color: var(--color-ink);
    background: #f1fff6;
    box-shadow: 0 0 0 2px var(--color-brand-primary);
}

.dashboard-button-system .promo-template-card > span:nth-child(2) {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.dashboard-button-system .promo-template-card strong {
    font-size: 0.813rem;
    line-height: 1.25;
}

.dashboard-button-system .promo-template-card small {
    color: var(--color-text-secondary);
    font-size: 0.688rem;
    font-weight: 700;
    line-height: 1.35;
}

.dashboard-button-system .promo-template-card .promo-status-pill {
    grid-column: 2;
    justify-self: start;
}

.dashboard-button-system .promo-template-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: #edf0eb;
    color: var(--color-ink);
    font-size: 0.625rem;
    font-weight: 900;
    letter-spacing: -.02em;
}

.dashboard-button-system .promo-template-card.is-selected .promo-template-icon {
    background: var(--color-brand-primary);
}

.dashboard-button-system .promo-template-panel[hidden] {
    display: none !important;
}

.dashboard-button-system .promo-mock-panel,
.dashboard-button-system .promotion-editor[data-promo-template-panel="scheduled"] {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: var(--color-surface);
}

.dashboard-button-system .promo-mock-panel:focus,
.dashboard-button-system .promotion-editor[data-promo-template-panel="scheduled"]:focus {
    outline: none;
}

.dashboard-button-system .promo-builder-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: 18px;
    min-width: 0;
}

.dashboard-button-system .promo-config-card {
    display: grid;
    align-content: start;
    gap: 16px;
    min-width: 0;
}

.dashboard-button-system .promo-builder-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.dashboard-button-system .promo-builder-head > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.dashboard-button-system .promo-builder-head h4,
.dashboard-button-system .promo-builder-head p {
    margin: 0;
}

.dashboard-button-system .promo-builder-head h4 {
    font-size: 1.125rem;
    line-height: 1.3;
}

.dashboard-button-system .promo-builder-head p {
    max-width: 720px;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}

.dashboard-button-system .promo-kicker {
    color: #087247;
    font-size: 0.625rem;
    font-weight: 900;
    letter-spacing: .1em;
}

.dashboard-button-system .promo-live-head {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border);
}

.dashboard-button-system .promo-setting-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.dashboard-button-system .promo-setting-grid label {
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
    color: var(--color-text-secondary);
    font-size: 0.688rem;
    font-weight: 800;
}

.dashboard-button-system .promo-setting-grid :is(input, select) {
    width: 100%;
    min-height: 44px;
    color: var(--color-ink);
    font-size: 0.813rem;
}

.dashboard-button-system .promo-scope-check {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    color: var(--color-ink);
    font-size: 0.75rem;
    font-weight: 800;
}

.dashboard-button-system .promo-scope-check input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.dashboard-button-system .promo-scope-check small {
    color: var(--color-text-secondary);
    font-size: 0.625rem;
    font-weight: 700;
}

.dashboard-button-system .promo-rule-summary {
    display: grid;
    gap: 3px;
    padding: 12px 14px;
    border-left: 4px solid var(--color-brand-primary);
    border-radius: 10px;
    background: var(--color-brand-primary-soft);
}

.dashboard-button-system .promo-rule-summary strong {
    font-size: 0.75rem;
}

.dashboard-button-system .promo-rule-summary span {
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
}

.dashboard-button-system .promo-journey-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dashboard-button-system .promo-journey-list li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
}

.dashboard-button-system .promo-journey-list b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-ink);
    color: #fff;
    font-size: 0.688rem;
}

.dashboard-button-system .promo-reward-pair,
.dashboard-button-system .promo-budget-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.dashboard-button-system .promo-budget-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-button-system :is(.promo-reward-pair, .promo-budget-summary) > div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: #f7f8f6;
}

.dashboard-button-system :is(.promo-reward-pair, .promo-budget-summary) span {
    color: var(--color-text-secondary);
    font-size: 0.625rem;
    font-weight: 750;
}

.dashboard-button-system :is(.promo-reward-pair, .promo-budget-summary) strong {
    color: var(--color-ink);
    font-size: 1.063rem;
}

.dashboard-button-system .line-mini-preview {
    display: grid;
    align-self: start;
    width: min(100%, 330px);
    min-width: 0;
    margin: 0 auto;
    overflow: hidden;
    border: 9px solid #171817;
    border-radius: 30px;
    background: #f4f6f3;
    box-shadow: 0 18px 40px rgba(17, 17, 17, .14);
}

.dashboard-button-system .line-mini-preview:focus {
    outline: 3px solid rgba(6, 199, 85, .45);
    outline-offset: 4px;
}

.dashboard-button-system .line-mini-preview.is-previewing {
    animation: promotion-preview-highlight .7s ease;
}

@keyframes promotion-preview-highlight {
    50% { box-shadow: 0 0 0 6px rgba(6, 199, 85, .28), 0 18px 40px rgba(17, 17, 17, .14); }
}

.dashboard-button-system .line-preview-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 9px 12px;
    background: #06c755;
    color: #fff;
}

.dashboard-button-system .line-preview-top > span {
    padding: 4px 6px;
    border-radius: 6px;
    background: #fff;
    color: #06a848;
    font-size: 0.563rem;
    font-weight: 900;
}

.dashboard-button-system .line-preview-top strong {
    overflow: hidden;
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-button-system .line-preview-top em {
    font-size: 0.563rem;
    font-style: normal;
    font-weight: 800;
}

.dashboard-button-system .line-preview-body {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 18px 16px 20px;
}

.dashboard-button-system .line-preview-body h4,
.dashboard-button-system .line-preview-body p {
    margin: 0;
}

.dashboard-button-system .line-preview-body h4 {
    font-size: 1.125rem;
    line-height: 1.3;
}

.dashboard-button-system .line-preview-body p {
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}

.dashboard-button-system .line-preview-label {
    color: #087247;
    font-size: 0.563rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.dashboard-button-system .loyalty-stamp-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
}

.dashboard-button-system .loyalty-stamp-row span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border: 1px dashed #aeb5ac;
    border-radius: 50%;
    background: #fff;
    color: var(--color-text-secondary);
    font-size: 0.625rem;
    font-weight: 900;
}

.dashboard-button-system .loyalty-stamp-row span.is-earned {
    border-style: solid;
    border-color: #06c755;
    background: #06c755;
    color: #fff;
}

.dashboard-button-system :is(.line-reward-card, .line-invite-card) {
    display: grid;
    gap: 3px;
    padding: 13px;
    border: 1px solid #bfe9cc;
    border-radius: 14px;
    background: #edfff3;
}

.dashboard-button-system :is(.line-reward-card, .line-invite-card) span {
    color: #087247;
    font-size: 0.563rem;
    font-weight: 900;
    text-transform: uppercase;
}

.dashboard-button-system :is(.line-reward-card, .line-invite-card) strong {
    font-size: 0.875rem;
}

.dashboard-button-system :is(.line-reward-card, .line-invite-card) small {
    color: var(--color-text-secondary);
    font-size: 0.625rem;
    font-weight: 700;
}

.dashboard-button-system .line-customer-id {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.625rem;
}

.dashboard-button-system .line-customer-id strong {
    color: var(--color-ink);
    font-size: 0.625rem;
}

.dashboard-button-system .line-referral-hero {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px;
    padding: 12px;
    border-radius: 14px;
    background: var(--color-brand-primary-soft);
    text-align: center;
}

.dashboard-button-system .line-referral-hero > div {
    display: grid;
    gap: 2px;
}

.dashboard-button-system .line-referral-hero strong {
    font-size: 1.063rem;
}

.dashboard-button-system .line-referral-hero span {
    color: var(--color-text-secondary);
    font-size: 0.563rem;
    font-weight: 800;
}

.dashboard-button-system .line-referral-hero i {
    font-style: normal;
    font-weight: 900;
}

.dashboard-button-system .line-mock-action {
    min-height: 44px;
    padding: 10px 14px;
    border: 0;
    border-radius: 12px;
    background: #06c755;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 900;
    cursor: pointer;
}

.dashboard-button-system .line-mock-action:focus-visible {
    outline: 3px solid rgba(6, 199, 85, .4);
    outline-offset: 3px;
}

.dashboard-button-system .line-mock-qr {
    display: grid;
    place-items: center;
    width: 118px;
    height: 118px;
    margin: 0 auto;
    border: 8px solid #fff;
    border-radius: 8px;
    background:
        repeating-linear-gradient(0deg, transparent 0 7px, rgba(17, 17, 17, .85) 7px 12px),
        repeating-linear-gradient(90deg, #111 0 5px, #fff 5px 11px);
    box-shadow: 0 0 0 1px var(--color-border);
}

.dashboard-button-system .line-mock-qr span {
    padding: 5px;
    border-radius: 4px;
    background: #fff;
    color: #111;
    font-size: 0.563rem;
    font-weight: 900;
}

.dashboard-button-system .line-price-breakdown {
    display: grid;
    gap: 8px;
}

.dashboard-button-system .line-price-breakdown > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--color-text-secondary);
    font-size: 0.688rem;
}

.dashboard-button-system .line-price-breakdown .is-discount {
    color: #087247;
}

.dashboard-button-system .line-price-breakdown .is-total {
    padding-top: 9px;
    border-top: 1px solid var(--color-border);
    color: var(--color-ink);
    font-size: 0.813rem;
    font-weight: 900;
}

.dashboard-button-system .promo-data-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid rgba(77, 159, 255, .35);
    border-radius: 12px;
    background: var(--color-info-soft);
    color: #155a9a;
    font-size: 0.688rem;
}

.dashboard-button-system .promo-data-note[hidden] {
    display: none !important;
}

.dashboard-button-system .promo-data-note span {
    font-weight: 700;
}

@media (max-width: 1100px) {
    .dashboard-button-system .promo-template-tabs {
        grid-template-columns: repeat(2, minmax(200px, 1fr));
    }

    .dashboard-button-system .promo-builder-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .dashboard-button-system .promotion-studio-notice,
    .dashboard-button-system .promo-builder-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-button-system .promo-template-tabs,
    .dashboard-button-system .promo-setting-grid,
    .dashboard-button-system .promo-reward-pair,
    .dashboard-button-system .promo-budget-summary,
    .dashboard-button-system .promo-data-note {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-page .dashboard-button-system .promo-template-card {
        min-height: 104px;
    }

    .dashboard-button-system .promo-mock-panel,
    .dashboard-button-system .promotion-editor[data-promo-template-panel="scheduled"] {
        padding: 14px;
        border-radius: 16px;
    }

    .dashboard-button-system .promo-config-card > .btn,
    .dashboard-button-system .line-mini-preview {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-page .dashboard-button-system .promo-template-card {
        transition: none;
    }

    .dashboard-button-system .line-mini-preview.is-previewing {
        animation: none;
        box-shadow: 0 0 0 5px rgba(6, 199, 85, .24), 0 18px 40px rgba(17, 17, 17, .14);
    }
}

/* P1-A: shared operational scope, manager landing, and Alert → Action ownership */
.global-scope-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 18px;
    align-items: center;
    padding: 14px 16px;
    background: var(--color-surface);
    border-color: var(--color-border);
}

.scope-summary-chips {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.scope-summary-chips span {
    flex: 0 0 auto;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 6px 11px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: #f7f8f6;
    color: var(--color-ink);
    font-size: 0.75rem;
    font-weight: 800;
}

.scope-editor { grid-column: 1 / -1; }
.scope-editor > summary {
    width: max-content;
    margin-left: auto;
    cursor: pointer;
    color: var(--color-ink);
    font-weight: 850;
    font-size: 0.75rem;
}

@media (min-width: 821px) {
    .scope-editor > summary { display: none; }
    .scope-editor:not([open]) > .scope-form { display: flex !important; }
}

.scope-form { padding-top: 3px; }
.scope-updated {
    grid-column: 2;
    grid-row: 1;
    white-space: nowrap;
    color: var(--color-text-secondary);
}

.scope-notice,
.scope-adaptation-note {
    margin: 0;
    padding: 10px 13px;
    border: 1px solid #e5d37f;
    border-radius: var(--radius-small);
    background: #fff9df;
    color: #4c4216;
    font-weight: 700;
}

.scope-page-actions,
.scope-preset-bar,
.scope-branch-choices {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.context-reason-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 17px;
    border: 1px solid #cfd4ce;
    border-left: 5px solid var(--color-brand-primary);
    border-radius: var(--radius-medium);
    background: #fff;
}

.context-reason-banner > div { display: grid; gap: 3px; }
.context-reason-banner strong { color: var(--color-ink); }
.context-reason-banner span,
.context-reason-banner small { color: var(--color-text-secondary); }

.is-focused {
    outline: 3px solid rgba(93, 245, 145, .58);
    outline-offset: 2px;
    scroll-margin-top: 110px;
}

.manager-urgent-section {
    display: grid;
    gap: 14px;
    padding: 22px;
    border-radius: var(--radius-large);
    background: var(--color-surface-dark);
    color: #fff;
}

.manager-urgent-section :is(h2, h3, p, small, .executive-kicker) { color: inherit; }
.manager-urgent-section .executive-card-head > a { color: var(--color-brand-primary); }
.manager-priority-summary { display: flex; gap: 10px; flex-wrap: wrap; }
.manager-priority-summary span {
    padding: 7px 11px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,.07);
    font-size: 0.75rem;
}
.manager-priority-summary strong { color: var(--color-brand-primary); }
.manager-priority-list { display: grid; gap: 10px; }
.manager-priority-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 15px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--radius-medium);
    background: rgba(255,255,255,.07);
}
.manager-priority-item h3 { margin: 5px 0 2px; }
.manager-priority-item p { margin: 0 0 4px; }
.manager-priority-item .button { flex: 0 0 auto; }
.manager-priority-item.is-empty { background: rgba(255,255,255,.04); }

.manager-core-grid,
.manager-secondary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.manager-status-card { display: grid; gap: 11px; align-content: start; }
.manager-status-row,
.owner-recovery-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--color-border);
}
.manager-status-row:last-child,
.owner-recovery-row:last-child { border-bottom: 0; }
.manager-status-row > div,
.owner-recovery-row > div { display: grid; gap: 2px; }
.manager-status-row small,
.owner-recovery-row small { color: var(--color-text-secondary); }
.manager-status-row > a { font-weight: 850; }
.manager-team-section { display: grid; gap: 12px; }
.manager-details > summary,
.audit-summary > summary,
.dismiss-control > summary { cursor: pointer; font-weight: 850; }

.owner-recovery-list { display: grid; margin-top: 12px; }
.owner-recovery-row .button { flex: 0 0 auto; }
.owner-recovery-row.is-clear { color: var(--color-text-secondary); }

.resolution-snapshot {
    display: grid;
    gap: 3px;
    margin: 12px 0;
    padding: 12px;
    border-left: 4px solid var(--color-brand-primary);
    border-radius: var(--radius-small);
    background: #f3f6f2;
}
.resolution-snapshot small { color: var(--color-text-secondary); }
.resolution-fields { display: grid; gap: 8px; grid-column: 1 / -1; }
.audit-summary { margin-top: 10px; }
.audit-summary ol { margin: 8px 0 0; padding-left: 20px; }
.audit-summary li { margin: 6px 0; }
.audit-summary li small { display: block; color: var(--color-text-secondary); }
.compact-action-form { gap: 7px; }
.dismiss-control { padding-top: 3px; }

@media (max-width: 820px) {
    .global-scope-bar {
        grid-template-columns: minmax(0, 1fr) auto;
        position: relative;
        padding: 10px 12px;
    }
    .scope-updated { display: none; }
    .scope-editor { grid-column: 2; grid-row: 1; }
    .scope-editor > summary {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        padding: 6px 10px;
        border: 1px solid var(--color-ink);
        border-radius: var(--radius-pill);
        background: #fff;
    }
    .scope-editor[open]::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 89;
        background: rgba(17,17,17,.36);
    }
    .scope-editor[open] > .scope-form {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 90;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        max-height: 78vh;
        max-height: 78dvh;
        overflow-y: auto;
        padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
        border-radius: 22px 22px 0 0;
        background: #fff;
        box-shadow: 0 -18px 50px rgba(17,17,17,.2);
    }
    .scope-editor[open] > summary {
        position: fixed;
        right: 16px;
        /* Still a guess at where the sheet's top edge lands: summary and
           .scope-form are siblings, so CSS cannot anchor one to the other, and
           the sheet's height comes from its content. The dvh partner at least
           keeps the guess inside the visible area when the address bar is up.
           A short sheet still leaves the chip floating above it - cosmetic, and
           the tap-outside handler in _scope.php is what actually closes it. */
        bottom: min(74vh, 620px);
        bottom: min(74dvh, 620px);
        z-index: 91;
        background: var(--color-brand-primary);
    }
    .scope-summary-chips span { min-height: 34px; }
    .manager-core-grid,
    .manager-secondary-grid { grid-template-columns: minmax(0, 1fr); }
    .manager-urgent-section { padding: 16px; }
    .manager-priority-item,
    .owner-recovery-row,
    .context-reason-banner { align-items: stretch; flex-direction: column; }
    .manager-priority-item .button,
    .owner-recovery-row .button,
    .context-reason-banner .button { width: 100%; text-align: center; }
}

@media (max-width: 430px) {
    .scope-summary-chips { max-width: calc(100vw - 140px); }
    .manager-urgent-section { margin-inline: -2px; border-radius: 18px; }
    .manager-priority-summary { flex-wrap: nowrap; overflow-x: auto; }
    .manager-priority-summary span { flex: 0 0 auto; }
}

/* P1-B: focused machine workflow, mobile core actions, deterministic insights */
.machine-focus-shell {
    display: grid;
    gap: 16px;
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid #111;
    border-radius: 22px;
    background: #111;
    color: #fff;
    scroll-margin-top: 96px;
}
.machine-focus-shell :is(h1, h2, p, small, span) { color: inherit; }
.machine-focus-header,
.machine-focus-actions,
.work-order-status-split,
.contextual-insight-head,
.contextual-insight-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.machine-focus-header h1 { margin: 3px 0; font-size: clamp(2rem, 5vw, 3.375rem); line-height: 1; }
.machine-focus-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.machine-focus-evidence { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.machine-focus-evidence > div {
    display: grid;
    gap: 5px;
    min-height: 112px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 14px;
    background: rgba(255,255,255,.07);
}
.machine-focus-evidence span,
.machine-focus-evidence small { color: rgba(255,255,255,.72); }
.machine-focus-evidence strong { font-size: 1.188rem; }
.machine-focus-actions { justify-content: flex-start; flex-wrap: wrap; }
.machine-focus-actions .button:first-child { background: #5df591; color: #111; border-color: #5df591; }
.machine-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.work-order-prefill,
.work-order-existing,
.action-closure-needed,
.technical-status-note {
    display: grid;
    gap: 5px;
    padding: 13px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: #f7f8f6;
}
.work-order-prefill { grid-template-columns: repeat(2,minmax(0,1fr)); }
.work-order-prefill strong,
.work-order-prefill small { grid-column: 1 / -1; }
.duplicate-work-order-control > summary { min-height: 44px; cursor: pointer; font-weight: 850; }
.existing-work-order-summary { display: grid; gap: 7px; margin: 10px 0; }
.existing-work-order-summary p { display: grid; gap: 2px; margin: 0; padding: 10px; border: 1px solid var(--color-border); border-radius: 10px; }
.work-order-status-split { align-items: stretch; }
.work-order-status-split > div { flex: 1 1 0; display: grid; gap: 4px; padding: 12px; border: 1px solid var(--color-border); border-radius: 11px; background: #fff; }
.work-order-status-split span,
.work-order-status-split small { color: var(--color-text-secondary); }
.technical-work-order-form { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; align-items: end; }
.technical-work-order-form button { min-height: 46px; }
.action-closure-needed { grid-template-columns: minmax(0,1fr) auto; align-items: center; border-left: 5px solid #5df591; }

.insight-stack { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.contextual-insight {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--color-border);
    border-top: 5px solid #111;
    border-radius: 18px;
    background: #fff;
}
.contextual-insight--warning,
.contextual-insight--critical { border-top-color: #c83e4d; }
.contextual-insight--opportunity { border-top-color: #5df591; }
.contextual-insight h2 { margin: 0; font-size: 1.188rem; line-height: 1.28; }
.contextual-insight p { margin: 0; color: var(--color-text-secondary); }
.contextual-insight-head span { padding: 5px 9px; border-radius: 999px; background: #111; color: #fff; font-size: 0.688rem; font-weight: 850; }
.contextual-insight--opportunity .contextual-insight-head span { background: #5df591; color: #111; }
.insight-evidence { display: flex; gap: 6px; flex-wrap: wrap; }
.insight-evidence span { padding: 5px 8px; border-radius: 999px; background: #f1f3ef; color: #111; font-size: 0.688rem; font-weight: 750; }
.insight-limitation { padding: 9px 10px; border-radius: 9px; background: #f7f8f6; font-size: 0.75rem; }
.contextual-insight-actions { align-items: end; margin-top: auto; }
.contextual-insight-actions small { color: var(--color-text-secondary); font-size: 0.625rem; }
.insight-debug > summary { cursor: pointer; color: var(--color-text-secondary); font-size: 0.688rem; font-weight: 750; }
.insight-debug dl { display: grid; gap: 4px; margin: 8px 0 0; font-size: 0.688rem; }
.insight-debug dl > div { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 8px; }
.insight-debug :is(dt,dd) { margin: 0; overflow-wrap: anywhere; }

.technician-core-layout { display: grid; gap: 16px; }
.technician-priority-mobile { order: 1; }
.technician-problem-commands { order: 2; }
.technician-machine-tools { order: 3; }
.technician-device-health { order: 4; }
.technician-priority-list { display: grid; gap: 9px; }
.technician-priority-list article { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--color-border); border-radius: 12px; background: #f7f8f6; }
.technician-priority-list article > div { display: grid; gap: 2px; }
.technician-priority-list small { color: var(--color-text-secondary); }

button[aria-busy="true"] { cursor: wait; opacity: .72; }
.form-submit-status { margin: 8px 0 0; color: var(--color-text-secondary); font-size: 0.75rem; font-weight: 750; }

@media (max-width: 900px) {
    .insight-stack { grid-template-columns: minmax(0,1fr); }
    .machine-detail-grid { grid-template-columns: minmax(0,1fr); }
    .technical-work-order-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .technical-work-order-form button { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
    .machine-focus-shell { gap: 12px; padding: 16px; border-radius: 18px; }
    .machine-focus-header { align-items: flex-start; }
    .machine-focus-header h1 { font-size: 2.125rem; }
    .machine-focus-evidence { grid-template-columns: minmax(0,1fr); }
    .machine-focus-evidence > div { min-height: 0; }
    .machine-focus-actions { align-items: stretch; flex-direction: column; }
    .machine-focus-actions .button { width: 100%; min-height: 48px; text-align: center; }
    .machine-overview-hero,
    .machine-overview-kpis { margin-top: 4px; }
    .work-order-status-split,
    .contextual-insight-head,
    .contextual-insight-actions { align-items: stretch; flex-direction: column; }
    .work-order-prefill,
    .technical-work-order-form { grid-template-columns: minmax(0,1fr); }
    .work-order-prefill strong,
    .work-order-prefill small,
    .technical-work-order-form button { grid-column: auto; }
    .action-closure-needed { grid-template-columns: minmax(0,1fr); }
    .action-closure-needed .button { width: 100%; text-align: center; }
    .contextual-insight { padding: 15px; }
    .contextual-insight-actions .button { width: 100%; min-height: 48px; text-align: center; }
    .mobile-secondary-filter { padding: 10px 12px; }
    .mobile-secondary-filter .business-filter-form { display: grid; grid-template-columns: minmax(0,1fr); }
    .technician-priority-list article { grid-template-columns: auto minmax(0,1fr); }
    .technician-priority-list article .button { grid-column: 1 / -1; width: 100%; min-height: 48px; text-align: center; }
    .technician-device-health { order: 4; }
}

/* Dashboard button system — scoped UI iteration (2026-07-14). */
.dashboard-button-system {
    display: grid;
    gap: 20px;
    --dashboard-button-radius: 12px;
}

.admin-page .dashboard-button-system .btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    min-height: 40px;
    margin: 0;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: var(--dashboard-button-radius);
    background: transparent;
    box-shadow: none;
    color: var(--color-ink);
    font: inherit;
    font-size: 0.813rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.admin-page .dashboard-button-system .btn:hover {
    transform: translateY(-1px);
}

.admin-page .dashboard-button-system .btn:active {
    transform: translateY(0);
}

.admin-page .dashboard-button-system .btn:focus-visible,
.admin-page .dashboard-button-system .btn-machine-card:focus-visible {
    outline: 3px solid rgba(77, 159, 255, .45);
    outline-offset: 3px;
}

.admin-page .dashboard-button-system .btn-sm {
    min-height: 36px;
    padding: 7px 12px;
    font-size: 0.75rem;
}

.admin-page .dashboard-button-system .btn-md {
    min-height: 40px;
    padding: 9px 16px;
}

.admin-page .dashboard-button-system .btn-lg {
    min-height: 46px;
    padding: 12px 20px;
    font-size: 0.875rem;
}

.admin-page .dashboard-button-system .btn-primary {
    border-color: var(--color-brand-primary);
    background: var(--color-brand-primary);
    color: var(--color-ink);
}

.admin-page .dashboard-button-system .btn-primary:hover {
    border-color: var(--color-brand-primary-hover);
    background: var(--color-brand-primary-hover);
}

.admin-page .dashboard-button-system .btn-secondary {
    border-color: #bfc5bd;
    background: var(--color-surface);
    color: var(--color-ink);
}

.admin-page .dashboard-button-system .btn-secondary:hover {
    border-color: var(--color-ink);
    background: #f7f8f6;
}

.admin-page .dashboard-button-system .btn-ghost {
    border-color: transparent;
    background: transparent;
    color: var(--color-text-secondary);
}

.admin-page .dashboard-button-system .btn-ghost:hover {
    border-color: var(--color-border);
    background: #f1f3ef;
    color: var(--color-ink);
}

.admin-page .dashboard-button-system .btn-info {
    border-color: rgba(77, 159, 255, .45);
    background: var(--color-info-soft);
    color: #155a9a;
}

.admin-page .dashboard-button-system .btn-info:hover {
    border-color: var(--color-info);
    background: #d2e8ff;
    color: #0d477d;
}

.admin-page .dashboard-button-system .btn-warning {
    border-color: #d99a20;
    background: #fff4d6;
    color: #714500;
}

.admin-page .dashboard-button-system .btn-warning:hover {
    border-color: #ba7b00;
    background: #ffe8ad;
}

.admin-page .dashboard-button-system .btn-danger {
    border-color: var(--color-danger);
    background: var(--color-danger-soft);
    color: #8c2222;
}

.admin-page .dashboard-button-system .btn-danger:hover {
    border-color: #cf3434;
    background: #ffd1d1;
    color: #721919;
}

.admin-page .dashboard-button-system .btn-status.active {
    border-color: rgba(36, 200, 117, .55);
    background: var(--color-success-soft);
    color: #087247;
}

.admin-page .dashboard-button-system .btn-status.inactive {
    border-color: #d99a20;
    background: #fff4d6;
    color: #714500;
}

.admin-page .dashboard-button-system .btn-tab {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
}

.admin-page .dashboard-button-system .btn-tab:is(.is-active, [aria-expanded="true"]) {
    border-color: var(--color-ink);
    background: var(--color-ink);
    color: #fff;
}

.admin-page .dashboard-button-system .btn-icon {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: var(--dashboard-button-radius);
}

.admin-page .dashboard-button-system :is(.btn, button)[disabled],
.admin-page .dashboard-button-system :is(.btn, button).is-disabled,
.admin-page .dashboard-button-system :is(.btn, button)[aria-disabled="true"] {
    opacity: .48;
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
}

.admin-page .dashboard-button-system :is(.toolbar-actions, .machine-actions, .machine-command-form) {
    gap: 8px;
}

.admin-page .dashboard-button-system :is(.btn-group, .action-toolbar) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-page .dashboard-button-system .quick-add-trigger {
    width: fit-content;
    list-style: none;
}

.admin-page .dashboard-button-system .quick-add-trigger::-webkit-details-marker {
    display: none;
}

.admin-page .dashboard-button-system .btn-loading,
.admin-page .dashboard-button-system .btn[aria-busy="true"] {
    position: relative;
    color: transparent;
    cursor: wait;
    pointer-events: none;
}

.admin-page .dashboard-button-system .btn-loading::after,
.admin-page .dashboard-button-system .btn[aria-busy="true"]::after {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    color: var(--color-ink);
    content: "";
    animation: dashboard-button-spin .7s linear infinite;
}

@keyframes dashboard-button-spin {
    to { transform: rotate(360deg); }
}

.admin-page .dashboard-button-system .machine-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.admin-page .dashboard-button-system .machine-action-cell {
    width: 148px;
    min-width: 148px;
    max-width: 148px;
}

.admin-page .dashboard-button-system .machine-action-cell > :is(.button, .inline-delete-form) {
    width: 100%;
    margin: 0 0 8px;
}

.admin-page .dashboard-button-system .machine-action-cell .btn,
.admin-page .dashboard-button-system .machine-action-cell .inline-delete-form .btn {
    width: 100%;
}

.admin-page .dashboard-button-system .machine-action-cell .inline-delete-form {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

.admin-page .dashboard-button-system .icon-edit-button,
.admin-page .dashboard-button-system .machine-flow-toggle {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
}

.admin-page .dashboard-button-system .branch-toggle {
    min-width: 116px;
}

.admin-page .dashboard-button-system .btn-machine-card {
    border-radius: 14px;
}

@media (max-width: 860px) {
    .admin-page .dashboard-button-system .btn-sm,
    .admin-page .dashboard-button-system .btn-md,
    .admin-page .dashboard-button-system .btn-icon,
    .admin-page .dashboard-button-system .icon-edit-button,
    .admin-page .dashboard-button-system .machine-flow-toggle {
        min-height: 44px;
    }

    .admin-page .dashboard-button-system .btn-icon,
    .admin-page .dashboard-button-system .icon-edit-button,
    .admin-page .dashboard-button-system .machine-flow-toggle {
        width: 44px;
        min-width: 44px;
        height: 44px;
    }
}

@media (max-width: 640px) {
    .admin-page .dashboard-button-system :is(.section-toolbar, .dashboard-revenue-toolbar) .toolbar-actions,
    .admin-page .dashboard-button-system .branch-inline-edit > .btn,
    .admin-page .dashboard-button-system .dashboard-revenue-toolbar form,
    .admin-page .dashboard-button-system .dashboard-revenue-toolbar form .btn {
        width: 100%;
    }

    .admin-page .dashboard-button-system :is(.section-toolbar, .dashboard-revenue-toolbar) .toolbar-actions .btn {
        flex: 1 1 180px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-page .dashboard-button-system .btn {
        transition: none;
    }

    .admin-page .dashboard-button-system :is(.btn-loading, .btn[aria-busy="true"])::after {
        animation-duration: 1.4s;
    }
}

/* Super Admin workspace: accounts, tenants, system readiness and audit logs. */
.admin-workflow {
    margin: 0 0 18px;
    padding: 18px;
    border: 1px solid #dfe8e2;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fffa 0%, #ffffff 72%);
    box-shadow: 0 10px 28px rgba(19, 54, 35, .06);
}

.admin-workflow-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.admin-workflow-heading h2 {
    margin: 2px 0 0;
    font-size: clamp(1.25rem, 1.8vw, 1.625rem);
    line-height: 1.25;
}

.admin-workflow-heading p {
    max-width: 580px;
    margin: 0;
    color: #53645a;
    font-size: 0.875rem;
    line-height: 1.55;
    text-align: right;
}

.admin-workflow-primary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.admin-workflow-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 88px;
    padding: 14px;
    border: 1px solid #d9e3dc;
    border-radius: 14px;
    background: #fff;
    color: #17231c;
    text-decoration: none;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.admin-workflow-card:hover,
.admin-workflow-card:focus-visible {
    border-color: #2ecf73;
    box-shadow: 0 8px 22px rgba(29, 160, 87, .12);
    transform: translateY(-1px);
}

.admin-workflow-card.is-active {
    border-color: #24bd65;
    background: #ebfff2;
    box-shadow: inset 0 0 0 1px #24bd65;
}

.admin-workflow-number {
    display: grid;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 12px;
    background: #e8f4ec;
    color: #167c45;
    font-size: 1.125rem;
    font-weight: 800;
}

.admin-workflow-card.is-active .admin-workflow-number {
    background: #28cc6f;
    color: #071c10;
}

.admin-workflow-card strong,
.admin-workflow-card small { display: block; }

.admin-workflow-card strong {
    margin-bottom: 4px;
    font-size: 1rem;
    line-height: 1.3;
}

.admin-workflow-card small {
    color: #607067;
    font-size: 0.813rem;
    line-height: 1.45;
}

.admin-workflow-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e1e9e4;
}

.admin-workflow-subnav a {
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid #d9e3dc;
    border-radius: 999px;
    background: #fff;
    color: #26352c;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 20px;
    text-decoration: none;
}

.admin-workflow-subnav a:hover,
.admin-workflow-subnav a:focus-visible,
.admin-workflow-subnav a.is-active {
    border-color: #20b961;
    background: #ddfae8;
    color: #0e6837;
}

.admin-disclosure > summary,
.admin-permission-group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 46px;
    list-style: none;
    cursor: pointer;
}

.admin-disclosure > summary::-webkit-details-marker,
.admin-permission-group > summary::-webkit-details-marker { display: none; }

.admin-disclosure > summary::after,
.admin-permission-group > summary::after {
    display: grid;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 10px;
    background: #e6f8ed;
    color: #147341;
    content: "+";
    font-size: 1.313rem;
    font-weight: 800;
}

.admin-disclosure[open] > summary::after,
.admin-permission-group[open] > summary::after { content: "−"; }

.admin-disclosure > summary span,
.admin-disclosure > summary small { display: block; }

.admin-disclosure > summary span { font-size: 1.063rem; font-weight: 800; }
.admin-disclosure > summary small { margin-left: auto; color: #64736a; font-size: 0.813rem; }

.admin-disclosure[open] > summary {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e0e8e3;
}

.admin-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 4px 2px;
    color: #434d47;
    font-size: 0.875rem;
}

.admin-pagination-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.admin-pagination-links a,
.admin-pagination-links .is-current {
    display: grid;
    min-width: 40px;
    min-height: 40px;
    padding: 7px 10px;
    place-items: center;
    border: 1px solid #d7e0da;
    border-radius: 10px;
    background: #fff;
    color: #26352c;
    font-weight: 700;
    line-height: 24px;
    text-decoration: none;
}

.admin-pagination-links a:hover,
.admin-pagination-links a:focus-visible,
.admin-pagination-links .is-current {
    border-color: #22bd64;
    background: #e2fbed;
    color: #0c6735;
}

.admin-permission-layout { display: grid; gap: 16px; }

.admin-permission-user {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(220px, 1fr);
    gap: 14px;
    align-items: end;
    padding: 14px;
    border: 1px solid #dfe6e1;
    border-radius: 14px;
    background: #f8faf8;
}

.admin-permission-user p { margin: 0; color: #5d6b63; font-size: 0.813rem; line-height: 1.5; }
.admin-permission-groups { display: grid; gap: 10px; }

.admin-permission-group {
    padding: 0 14px;
    border: 1px solid #dfe6e1;
    border-radius: 14px;
    background: #fff;
}

.admin-permission-group > summary { padding: 12px 0; font-size: 0.938rem; font-weight: 800; }
.admin-permission-group[open] > summary { border-bottom: 1px solid #e2e8e4; }

.admin-permission-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 14px 0;
}

.admin-permission-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 46px;
    padding: 11px 12px;
    border: 1px solid #e2e8e4;
    border-radius: 11px;
    background: #fbfcfb;
    font-size: 0.875rem;
    line-height: 1.45;
}

.admin-permission-option input { flex: 0 0 auto; margin-top: 3px; }
.admin-permission-option.is-role-locked { background: #f1f3f1; color: #647067; }
.admin-permission-actions { display: flex; justify-content: flex-end; }

@media (max-width: 980px) {
    .admin-workflow-primary { grid-template-columns: 1fr; }
    .admin-workflow-card { min-height: 72px; }
    .admin-permission-user,
    .admin-permission-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    .admin-workflow { padding: 14px; border-radius: 14px; }
    .admin-workflow-heading,
    .admin-pagination { align-items: stretch; flex-direction: column; }
    .admin-workflow-heading p { max-width: none; text-align: left; }
    .admin-workflow-subnav a { flex: 1 1 100%; border-radius: 11px; }
    .admin-disclosure > summary { align-items: flex-start; flex-wrap: wrap; }
    .admin-disclosure > summary small { order: 3; width: 100%; margin-left: 0; }
    .admin-pagination-links { justify-content: flex-start; }
    .admin-permission-actions button { width: 100%; min-height: 44px; }
}

/* Branch-first Owner / Manager account workspace */
.branch-user-selector {
    gap: 18px;
    border-color: #cfe2d6;
    background: linear-gradient(180deg, #fbfefc 0%, #f3f9f5 100%);
}

.branch-user-selector-heading,
.branch-user-context,
.branch-role-card-header,
.branch-account-summary,
.branch-account-badges {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.branch-user-selector-heading h2,
.branch-role-card h3,
.branch-account-form h4 { margin: 0; }

.branch-user-selector-heading p {
    max-width: 680px;
    margin: 6px 0 0;
    color: #414e47;
    font-size: 0.875rem;
    line-height: 1.55;
}

.branch-user-select-form { flex: 0 1 560px; margin: 0; }
.branch-user-select-form label { margin: 0; font-size: 0.875rem; font-weight: 800; }
.branch-management-picker { position: relative; margin-top: 7px; }
.admin-page .branch-user-select-form .branch-management-search {
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: #f5f6f7;
    color: var(--color-ink);
    font-size: 0.875rem;
    font-weight: 400;
}
.admin-page .branch-user-select-form .branch-management-search:focus { background: #fff; }
.branch-management-menu {
    position: fixed;
    z-index: 140;
    min-width: 300px;
    padding: 6px;
    border: 1px solid #d6ddd9;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 16px 32px rgba(29, 60, 42, .16);
}
.branch-management-options { display: grid; gap: 4px; max-height: 344px; overflow-y: auto; overscroll-behavior: contain; }
.admin-page .branch-management-menu .branch-management-option {
    display: grid;
    min-height: 54px;
    justify-content: stretch;
    gap: 2px;
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    background: #fff;
    box-shadow: none;
    color: #24302a;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 400;
}
.admin-page .branch-management-menu .branch-management-option[hidden] { display: none !important; }
.admin-page .branch-management-menu .branch-management-option:hover,
.admin-page .branch-management-menu .branch-management-option:focus-visible,
.admin-page .branch-management-menu .branch-management-option[aria-selected="true"] { background: #f0f3f1; color: #111; }
.branch-management-option strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; }
.branch-management-option small { color: #69746e; font-size: 0.75rem; font-weight: 500; }
.branch-management-option mark { padding: 0 1px; border-radius: 2px; background: #fff0a8; color: #111; font-weight: 900; }
.branch-management-empty { margin: 0; padding: 14px 10px; color: #65736b; text-align: center; font-size: 0.813rem; }

/* Shared search treatment across admin screens. Searchable menus show six rows,
   then retain wheel/touch scrolling for all remaining results. */
.admin-page .system-search-input {
    border-color: #d6ddd9;
    border-radius: 10px;
    background: #f5f6f7;
    color: #24302a;
}
.admin-page .system-search-input:focus {
    border-color: #7f9c8b;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(55, 103, 76, .12);
    outline: 0;
}
.system-search-input::-webkit-search-cancel-button { cursor: pointer; }
.system-search-results { scrollbar-gutter: stable; }

.branch-user-context {
    min-height: 68px;
    padding: 13px 16px;
    border: 1px solid #d8e6dd;
    border-radius: 14px;
    background: #fff;
}

.branch-user-context strong,
.branch-user-context small { display: block; }
.branch-user-context strong { font-size: 1.063rem; line-height: 1.35; }
.branch-user-context small { margin-top: 4px; color: #65746b; font-size: 0.813rem; }

.branch-role-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.branch-role-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    border: 1px solid #d9e3dd;
    border-top: 5px solid #21b861;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(20, 62, 39, .06);
}

.branch-role-card.is-manager { border-top-color: #e3a51b; }
.branch-role-card-header { align-items: flex-start; }
.branch-role-label { color: #14844a; font-size: 0.75rem; font-weight: 900; letter-spacing: .08em; }
.branch-role-card.is-manager .branch-role-label { color: #996800; }
.branch-role-card h3 { margin-top: 2px; font-size: 1.313rem; line-height: 1.3; }
.branch-role-card-header p { margin: 5px 0 0; color: #59675f; font-size: 0.875rem; line-height: 1.5; }

.branch-role-count {
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 999px;
    background: #fff3d5;
    color: #8a5c00;
    font-size: 0.813rem;
    font-weight: 800;
}

.branch-role-count.is-ready { background: #ddf8e8; color: #0f713b; }
.branch-role-count.is-warning { background: #ffe7e7; color: #a52a36; }

.branch-role-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.branch-role-menu strong { margin-right: 2px; font-size: 0.813rem; }
.branch-role-menu span { padding: 7px 10px; border: 1px solid #d8e6dd; border-radius: 999px; background: #f8fbf9; color: #3f5047; font-size: 0.813rem; line-height: 1.35; }

.branch-role-scope {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.branch-role-scope > div {
    min-width: 0;
    padding: 13px;
    border-radius: 12px;
    background: #edf9f1;
}

.branch-role-scope > .is-excluded { background: #f5f6f5; }
.branch-role-scope strong { font-size: 0.875rem; }
.branch-role-scope ul { margin: 8px 0 0; padding-left: 19px; }
.branch-role-scope li { margin: 4px 0; color: #405048; font-size: 0.813rem; line-height: 1.45; }
.branch-role-scope .is-excluded li { color: #69756e; }

.branch-account-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 15px;
    border: 1px solid #dfe7e2;
    border-radius: 13px;
    background: #fafcfb;
}

.branch-account-form h4,
.branch-account-form button,
.branch-account-form .status { grid-column: 1 / -1; }
.branch-account-form label { margin: 0; font-size: 0.813rem; font-weight: 800; }
.branch-account-form input,
.branch-account-form select { min-height: 44px; margin-top: 6px; font-size: 0.875rem; }

.branch-account-list { display: grid; gap: 12px; margin-top: auto; }
.branch-account-item { padding: 14px; border: 1px solid #dbe5df; border-radius: 13px; background: #fff; }
.branch-account-item.has-warning { border-color: #e4b543; background: #fffdf6; }
.branch-account-summary { align-items: flex-start; }
.branch-account-summary strong,
.branch-account-summary span { display: block; }
.branch-account-summary strong { font-size: 1rem; line-height: 1.35; }
.branch-account-summary > div > span { margin-top: 3px; color: #647169; font-size: 0.813rem; }
.branch-account-badges { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.branch-account-warning { margin: 11px 0 0; padding: 9px 11px; border-radius: 9px; background: #fff0c9; color: #745000; font-size: 0.813rem; line-height: 1.45; }

.branch-account-edit { margin-top: 12px; }
.branch-account-edit > summary { min-height: 40px; color: #126e3d; cursor: pointer; font-size: 0.875rem; font-weight: 800; line-height: 40px; }
.branch-account-edit[open] > summary { margin-bottom: 8px; }
.branch-role-preset-form { margin: 10px 0 0; }
.branch-role-preset-form button { width: 100%; min-height: 42px; }
.branch-role-preset-form button:disabled { cursor: default; opacity: .55; }
.admin-advanced-accounts { border-style: dashed; }

@media (max-width: 1120px) {
    .branch-user-selector-heading { align-items: stretch; flex-direction: column; }
    .branch-user-select-form { flex-basis: auto; width: 100%; }
    .branch-role-scope { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .branch-role-grid { grid-template-columns: 1fr; }
    .branch-user-context { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 680px) {
    .branch-role-card { padding: 14px; }
    .branch-role-card-header,
    .branch-account-summary { align-items: flex-start; flex-direction: column; }
    .branch-account-badges { justify-content: flex-start; }
    .branch-role-scope,
    .branch-account-form { grid-template-columns: 1fr; }
    .branch-account-form h4,
    .branch-account-form button,
    .branch-account-form .status { grid-column: auto; }
    .branch-account-form button { min-height: 46px; }
}

/* ── 375px: the last three lists that still assumed a desk (2026-09-03) ──────
   Appended at the end of the file on purpose. Each of these restates a template
   that an earlier, wider media block already set, and CSS resolves that by
   source order at equal specificity - a narrower query written above the rule it
   corrects would simply lose. */
@media (max-width: 560px) {
    /* manager_view.php's alert queue. The <=760 template keeps a fixed 78px
       column for the open button; inside a card that is overflow: hidden at
       375px that column is clipped away, and the only control in the row with
       it. The button gets its own line instead. */
    .manager-command-row {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .manager-command-open {
        grid-column: 1 / -1;
        justify-self: stretch;
        margin-top: 6px;
        text-align: center;
    }

    /* customer_insights.php's rule popover. Between 900px and here it is pinned
       `position: fixed; top: 92px; right/left: 16px` - a popover anchored to the
       viewport rather than to the control that opens it, so it covers whatever
       happens to be under it and moves when the page does not. At phone width it
       is an ordinary block that pushes the page down like the disclosure it is. */
    .customer-rule-fields {
        position: static;
        top: auto;
        right: auto;
        left: auto;
        width: auto;
        margin-top: 10px;
    }
}

/* ============================================================================
 *  branch_access_codes.php — moved off the login stylesheet (Kim, 2026-09-09)
 *
 *  This was the only screen in the Admin group that shipped with
 *  include_app_css => false and include_preview_css => true, so its base layer
 *  was auth/preview.css: the stylesheet the LOGIN page uses. Two account
 *  screens that do the same job did not look like the same product. The same
 *  "Active" state rendered here as .status-pill (11px, its own pill) and on
 *  customers.php and branches.php as .status; table headers came out at 10px
 *  against 13px everywhere else; and preview.css carried its own :root with
 *  --ink / --muted / --line / --mint / --danger, names app.css does not define,
 *  which is why the colour audit needed a section of its own in
 *  admin-shell.css just for this page.
 *
 *  What moved: the page now loads app.css, uses .panel for its cards and
 *  .status for state. What stayed: the layout below, which is genuinely this
 *  page's own furniture and has no equivalent anywhere else - a two-column
 *  workspace, the two code-slot cards, the branch summary rail. Every rule is
 *  scoped to .branch-preview-page so none of it reaches the other 30 pages.
 *
 *  Tokens translated on the way across: --muted -> --color-text-muted,
 *  --line -> --color-border, --ink -> --color-ink, --danger -> --color-danger.
 *  --mint had no app.css equivalent and admin-shell.css already repoints both
 *  buttons that used it to the skin accent, so the base here is the standard
 *  brand green rather than a fourth colour nobody else uses.
 * ========================================================================= */

.branch-preview-page .branch-content-grid {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 22px;
}

.branch-preview-page .branch-primary-column,
.branch-preview-page .branch-summary-column {
    display: grid;
    align-content: start;
    gap: 16px;
    min-width: 0;
}

.branch-preview-page .branch-toolbar {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr) minmax(190px, 0.7fr);
    gap: 12px;
    padding: 16px;
}

.branch-preview-page .branch-toolbar > form,
.branch-preview-page .table-actions > form {
    display: contents;
}

.branch-preview-page .branch-toolbar label {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: var(--color-text-secondary);
    font-weight: 700;
}

.branch-preview-page .branch-toolbar select,
.branch-preview-page .branch-toolbar input,
.branch-preview-page .slot-role-selector select {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-ink);
}

.branch-preview-page .slot-role-selector select:disabled {
    background: #f0f2f3;
    color: var(--color-text-muted);
}

.branch-preview-page .mint-button {
    align-self: end;
    min-height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: var(--color-success);
    color: #0a281a;
    font-weight: 700;
    cursor: pointer;
}

.branch-preview-page .toolbar-rule {
    align-self: end;
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.45;
}

/* The first column carries the branch name and its address, and it used to be
   minmax(0, 1fr) beside an `auto` column of stat blocks with a 122px floor
   each. Under preview.css's 11px type the stats were narrow enough that the 1fr
   still had room; at the shared 13-16px scale they took it, squeezing the name
   column to 98px and pushing 9px of a Thai address out of its own box.
   Measured at 1280x900 after the move. A floor on the name column and a
   wrapping stat row fix it without changing the arrangement. */
.branch-preview-page .selected-branch-card {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 0.7fr);
    align-items: center;
    gap: 20px;
    padding: 20px;
    min-width: 0;
}

.branch-preview-page .selected-branch-card > div {
    min-width: 0;
}

.branch-preview-page .selected-branch-card > div > p {
    overflow-wrap: anywhere;
}

.branch-preview-page .selected-branch-card h2,
.branch-preview-page .code-slot-card h2,
.branch-preview-page .gmail-registration-note h2,
.branch-preview-page .account-table-panel h2,
.branch-preview-page .summary-panel h2,
.branch-preview-page .audit-preview h2 {
    margin: 0;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

.branch-preview-page .selected-branch-card > div > p:last-child,
.branch-preview-page .gmail-registration-note p,
.branch-preview-page .branch-rule {
    margin: 6px 0 0;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.branch-preview-page .selected-branch-card dl {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.branch-preview-page .selected-branch-card dl div {
    display: grid;
    min-width: 122px;
    gap: 6px;
    padding: 0 20px;
    border-left: 1px solid var(--color-border);
}

.branch-preview-page .selected-branch-card dt,
.branch-preview-page .code-meta span {
    color: var(--color-text-muted);
}

.branch-preview-page .selected-branch-card dd {
    display: grid;
    gap: 4px;
    margin: 0;
}

.branch-preview-page .branch-rule {
    padding: 12px;
    border: 1px solid #e1ddfa;
    border-radius: 9px;
    background: #f7f5ff;
    color: #554d76;
    overflow-wrap: anywhere;
}

/* A role is not a state, so it keeps a badge of its own rather than borrowing
   .status - but the two variants are the only thing left of preview.css's pill
   family, and admin-shell.css section 9 already repoints both colours. */
.branch-preview-page .role-badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.branch-preview-page .role-badge--owner {
    background: #e7f9ef;
    color: #0d6844;
}

.branch-preview-page .role-badge--manager {
    background: #fff3da;
    color: #7d5205;
}

.branch-preview-page .code-slot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.branch-preview-page .code-slot-card {
    padding: 18px;
}

.branch-preview-page .slot-generation-form {
    display: grid;
    gap: 10px;
    margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #fbfcfc;
}

.branch-preview-page .slot-role-selector {
    display: grid;
    gap: 6px;
    color: var(--color-text-secondary);
    font-weight: 700;
}

.branch-preview-page .owner-safety-warning {
    padding: 12px;
    border: 1px solid #efb25c;
    border-radius: 9px;
    background: #fff7e7;
    color: #69440b;
    line-height: 1.45;
}

.branch-preview-page .owner-safety-warning[hidden] {
    display: none;
}

.branch-preview-page .owner-safety-warning p {
    margin: 4px 0 8px;
}

.branch-preview-page .owner-safety-warning label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 700;
}

.branch-preview-page .owner-safety-warning input {
    margin-top: 3px;
}

.branch-preview-page .slot-history-note {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.branch-preview-page .code-slot-card .slot-generate-button {
    width: 100%;
    border: 0;
    background: var(--color-success);
    color: #0a281a;
}

.branch-preview-page .code-slot-card header,
.branch-preview-page .section-heading-row,
.branch-preview-page .gmail-registration-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.branch-preview-page .code-value {
    margin: 18px 0;
    padding: 13px 15px;
    border: 1px solid #dedaf5;
    border-radius: 8px;
    background: #f6f4ff;
    color: #202030;
    font-family: Consolas, monospace;
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 700;
    letter-spacing: 0.12em;
}

.branch-preview-page .code-value.is-disabled {
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.branch-preview-page .code-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.branch-preview-page .code-meta p {
    display: grid;
    gap: 3px;
    margin: 0;
}

.branch-preview-page .code-slot-card footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.branch-preview-page .code-slot-card footer > button,
.branch-preview-page .code-slot-card footer > form {
    flex: 1 1 120px;
}

.branch-preview-page .code-slot-card footer > form > button {
    width: 100%;
}

.branch-preview-page .code-slot-card button,
.branch-preview-page .table-actions button {
    min-height: 36px;
    padding: 0 8px;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-weight: 700;
    cursor: pointer;
}

.branch-preview-page .code-slot-card .danger-action,
.branch-preview-page .table-actions .danger-action {
    border-color: #f1c6ca;
    color: var(--color-danger);
}

.branch-preview-page .gmail-registration-note {
    padding: 18px;
}

.branch-preview-page .gmail-registration-note a {
    flex: 0 0 auto;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-secondary);
    font-weight: 700;
    text-decoration: none;
}

.branch-preview-page .account-table-panel,
.branch-preview-page .summary-panel,
.branch-preview-page .audit-preview {
    padding: 18px;
}

.branch-preview-page .account-table-panel {
    min-width: 0;
    overflow: hidden;
}

.branch-preview-page .section-heading-row > p {
    margin: 0;
    color: var(--color-text-muted);
}

.branch-preview-page .table-actions {
    display: flex;
    min-width: 290px;
    gap: 5px;
}

.branch-preview-page .table-action-feedback {
    margin: 14px 0 0;
    color: var(--color-text-muted);
}

/* The one flash message on the page. app.css has .status ready/danger for
   inline state, but this is a page-level banner above the grid, so it keeps its
   own box - repainted on the success token instead of preview.css's mint. */
.branch-preview-page .auth-message {
    padding: 11px 13px;
    border: 1px solid var(--color-success);
    border-radius: 9px;
    background: var(--color-success-soft);
    color: #087247;
}

.branch-preview-page .auth-message--error {
    border-color: var(--color-danger);
    background: var(--color-danger-soft);
    color: #a92525;
}

.branch-preview-page .summary-card {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
}

.branch-preview-page .summary-card > strong {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
    background: #e7f9ef;
    color: #0d6844;
    font-size: 1.25rem;
}

.branch-preview-page .summary-card > span {
    display: grid;
    font-weight: 700;
}

.branch-preview-page .summary-card small {
    margin-top: 3px;
    color: var(--color-text-muted);
    font-weight: 400;
}

.branch-preview-page .audit-preview ol {
    display: grid;
    gap: 12px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.branch-preview-page .audit-preview li {
    display: grid;
    gap: 3px;
    padding-left: 12px;
    border-left: 3px solid var(--color-success);
}

@media (max-width: 1180px) {
    .branch-preview-page .branch-content-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .branch-preview-page .branch-summary-column {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .branch-preview-page .selected-branch-card {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .branch-preview-page .branch-rule {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    .branch-preview-page .branch-toolbar,
    .branch-preview-page .selected-branch-card,
    .branch-preview-page .code-slot-grid,
    .branch-preview-page .branch-summary-column {
        grid-template-columns: 1fr;
    }

    .branch-preview-page .branch-toolbar > *,
    .branch-preview-page .selected-branch-card > *,
    .branch-preview-page .code-slot-grid > *,
    .branch-preview-page .branch-summary-column > * {
        min-width: 0;
    }

    .branch-preview-page .selected-branch-card dl {
        width: 100%;
    }

    .branch-preview-page .selected-branch-card dl div {
        flex: 1;
        min-width: 0;
        padding-left: 0;
        border-left: 0;
    }

    .branch-preview-page .gmail-registration-note,
    .branch-preview-page .section-heading-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 430px) {
    .branch-preview-page .code-meta {
        grid-template-columns: 1fr 1fr;
    }

    .branch-preview-page .code-slot-card footer {
        grid-template-columns: 1fr;
    }

    .branch-preview-main,
    .branch-preview-page .branch-content-grid,
    .branch-preview-page .branch-primary-column,
    .branch-preview-page .branch-summary-column,
    .branch-preview-page .panel {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .branch-preview-page .selected-branch-card p {
        overflow-wrap: anywhere;
    }
}