/* Shared styles for tenant dashboard pages.

   These are operational screens staff use all day, so this is a re-skin, not a
   re-layout: the density is deliberate and unchanged. Everything here already
   consumed the --brand-* tokens, which is why swapping the palette in app.css
   carried the whole staff area with it. */

.tenant-page {
    background: var(--brand-canvas);
    color: var(--brand-ink);
    min-height: calc(100vh - 3.5rem);
    font-family: var(--font-body);
    line-height: 1.5;
}

.tenant-page-inner {
    max-width: 72rem;
    margin: 0 auto;
    padding: clamp(1rem, 4vw, 1.5rem);
}

.tenant-page-header {
    margin-bottom: 1.5rem;
}

.tenant-page-header h1 {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 600;
    color: var(--brand-ink);
    margin: 0 0 0.25rem;
}

.tenant-page-subtitle {
    color: var(--brand-muted);
    margin: 0;
}

.tenant-page-tenant-name {
    color: var(--brand-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0.35rem 0 0;
}

.tenant-loading,
.tenant-empty {
    color: var(--brand-muted);
    padding: 2rem 0;
}

.tenant-error {
    background: var(--brand-error-soft);
    color: var(--brand-error);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
}

.tenant-status {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.tenant-status.success {
    background: var(--brand-success-soft);
    color: var(--brand-secondary);
}

.tenant-status.info {
    background: var(--brand-canvas-deep);
    color: var(--brand-muted);
}

.status-message {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.status-message.success {
    background: var(--brand-success-soft);
    color: var(--brand-secondary);
}

.status-message.error {
    background: var(--brand-error-soft);
    color: var(--brand-error);
}

.tenant-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.tenant-search {
    flex: 1;
    min-width: 12rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--brand-line);
    border-radius: 0.5rem;
    font-size: 1rem;
    font-family: inherit;
    background: var(--brand-surface);
}

.tenant-search:focus {
    outline: 2px solid var(--brand-accent-tint);
    border-color: var(--brand-accent);
}

.tenant-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--brand-line);
    border-radius: 0.75rem;
    background: var(--brand-surface);
}

.tenant-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.tenant-table th,
.tenant-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--brand-line);
    vertical-align: top;
}

.tenant-table th {
    background: var(--brand-canvas-deep);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--brand-gold-ink);
}

.tenant-table tbody tr:last-child td {
    border-bottom: none;
}

.tenant-table tbody tr.row-muted {
    opacity: 0.65;
}

.status-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Off the tokens rather than the old #fff3cd/#d1ecf1 literals, so the badges
   move with the palette instead of drifting away from it. */
.status-badge.status-pending {
    background: var(--brand-canvas-deep);
    color: var(--brand-gold-ink);
}

.status-badge.status-confirmed {
    background: var(--brand-accent-soft);
    color: var(--brand-accent);
}

.status-badge.status-completed,
.status-badge.status-active {
    background: var(--brand-success-soft);
    color: var(--brand-secondary);
}

/* In progress must not reuse the Completed green: "being worked on" and "finished"
   are the two states a busy front desk most needs to tell apart at a glance. */
.status-badge.status-inprogress {
    background: var(--brand-live-soft);
    color: var(--brand-live);
}

.status-badge.status-waiting {
    background: var(--brand-waiting-soft);
    color: var(--brand-waiting);
}

.status-badge.status-cancelled,
.status-badge.status-inactive {
    background: var(--brand-error-soft);
    color: var(--brand-error);
}

.status-badge.status-special {
    background: var(--brand-gold-soft);
    color: var(--brand-gold-ink);
    margin-left: 0.35rem;
}

.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.btn-tenant-primary {
    padding: 0.45rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    border-radius: 0.375rem;
    background: var(--brand-accent);
    color: white;
    cursor: pointer;
    min-height: 44px;
}

.btn-tenant-primary:hover:not(:disabled) {
    background: var(--brand-accent-hover);
}

.btn-tenant-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-tenant-secondary {
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid var(--brand-secondary);
    border-radius: 0.375rem;
    background: white;
    color: var(--brand-secondary);
    cursor: pointer;
    min-height: 44px;
}

.btn-tenant-secondary:hover {
    background: var(--brand-success-soft);
}

.btn-tenant-teal {
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    border-radius: 0.375rem;
    background: var(--brand-secondary);
    color: white;
    cursor: pointer;
    min-height: 44px;
}

.btn-tenant-teal:hover:not(:disabled) {
    opacity: 0.9;
}

.btn-tenant-teal:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-tenant-danger {
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    border-radius: 0.375rem;
    background: var(--brand-error-soft);
    color: var(--brand-error);
    cursor: pointer;
    min-height: 44px;
}

.btn-tenant-danger:hover:not(:disabled) {
    background: var(--brand-error-soft);
    filter: brightness(0.96);
}

.btn-tenant-danger:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-tenant-ghost {
    padding: 0.45rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid var(--brand-line);
    border-radius: 0.375rem;
    background: white;
    color: var(--brand-muted);
    cursor: pointer;
    min-height: 44px;
}

.btn-tenant-ghost:hover:not(:disabled) {
    background: var(--brand-canvas-deep);
}

.edit-overlay {
    position: fixed;
    inset: 0;
    background: rgba(42, 35, 32, 0.5);
    display: grid;
    place-items: center;
    z-index: 1000;
    padding: 1rem;
}

.edit-dialog {
    background: var(--brand-surface);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    width: min(32rem, 100%);
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-2);
}

.edit-dialog h3 {
    margin: 0 0 1rem;
    font-family: var(--font-display);
    font-size: var(--step-1);
    color: var(--brand-ink);
}

.edit-field {
    margin-bottom: 0.85rem;
}

.edit-field label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--brand-muted);
}

.edit-field .form-control {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--brand-line);
    border-radius: 0.35rem;
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box;
}

.edit-field .form-control:focus {
    outline: 2px solid var(--brand-accent-tint);
    border-color: var(--brand-accent);
}

.edit-field .form-control:disabled {
    background: var(--brand-canvas-deep);
    color: var(--brand-muted);
}

.edit-service-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.9rem;
    cursor: pointer;
}

.dashboard-quick-links a {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.edit-alert {
    background: var(--brand-error-soft);
    color: var(--brand-error);
    padding: 0.5rem 0.75rem;
    border-radius: 0.35rem;
    margin-bottom: 0.85rem;
    font-size: 0.88rem;
}

.edit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.dashboard-card {
    background: var(--brand-surface);
    border: 1px solid var(--brand-line);
    border-radius: 0.75rem;
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.dashboard-card:hover {
    border-color: var(--brand-gold);
    box-shadow: var(--shadow-1);
}

.dashboard-card-value {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 600;
    color: var(--brand-ink);
    line-height: 1.1;
}

.dashboard-card-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-gold-ink);
    margin-top: 0.35rem;
}

.dashboard-section {
    background: var(--brand-surface);
    border: 1px solid var(--brand-line);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.dashboard-section h2 {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 600;
    color: var(--brand-ink);
    margin: 0 0 1rem;
}

.dashboard-schedule-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--brand-line);
}

.dashboard-schedule-item:last-child {
    border-bottom: none;
}

.dashboard-schedule-time {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--brand-ink);
    white-space: nowrap;
}

.dashboard-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .tenant-table .hide-mobile {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Gallery management (/tenant/gallery)
   --------------------------------------------------------------------------- */

.artwork-plan-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    align-items: baseline;
    background: var(--brand-surface);
    border: 1px solid var(--brand-line);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--brand-ink-soft);
}

.artwork-plan-tier {
    font-weight: 600;
    color: var(--brand-ink);
}

.artwork-manage-card {
    background: var(--brand-surface);
    border: 1px solid var(--brand-line);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.artwork-manage-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.artwork-manage-title h2 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    margin: 0;
    color: var(--brand-ink);
}

.artwork-manage-title p {
    margin: 0.25rem 0 0;
    color: var(--brand-ink-soft);
    font-size: 0.9rem;
}

.artwork-manage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.artwork-display-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--brand-ink);
    cursor: pointer;
}

.artwork-manage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.9rem;
}

.artwork-manage-item {
    position: relative;
    margin: 0;
    display: grid;
    gap: 0.4rem;
    border: 1px solid var(--brand-line);
    border-radius: var(--radius-sm);
    padding: 0.5rem;
    background: var(--brand-canvas);
}

.artwork-manage-item.is-cover {
    border-color: var(--brand-accent);
}

.artwork-manage-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--brand-canvas-deep);
}

.artwork-manage-item figcaption {
    font-size: 0.8rem;
    color: var(--brand-ink-soft);
    min-height: 1.1rem;
}

.artwork-cover-badge,
.artwork-service-badge {
    position: absolute;
    top: 0.8rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-pill, 999px);
}

.artwork-cover-badge {
    left: 0.8rem;
    background: var(--brand-accent);
    color: var(--brand-surface);
}

.artwork-service-badge {
    right: 0.8rem;
    background: var(--brand-canvas-deep);
    color: var(--brand-ink);
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.artwork-manage-item-actions {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.artwork-manage-item-actions .btn-tenant-ghost,
.artwork-manage-item-actions .btn-tenant-secondary,
.artwork-manage-item-actions .btn-tenant-danger {
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
}

.artwork-upload-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.9rem;
    flex-wrap: wrap;
}

/* The InputFile rides inside the styled label; the native control stays reachable
   by assistive tech but does not paint. */
.artwork-upload-label {
    position: relative;
    overflow: hidden;
    display: inline-block;
    cursor: pointer;
}

.artwork-upload-label input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.artwork-upload-hint {
    font-size: 0.8rem;
    color: var(--brand-muted);
}

/* Owner data cleanup */
.cleanup-tabs {
    display: flex;
    gap: 0.35rem;
    margin: 1rem 0 0.75rem;
    flex-wrap: wrap;
}

.cleanup-tab {
    border: 1px solid var(--brand-border, #d6d0c8);
    background: var(--brand-surface, #fff);
    color: var(--brand-ink, #1a1a1a);
    border-radius: var(--radius-pill, 999px);
    padding: 0.4rem 0.9rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.cleanup-tab.active {
    background: var(--brand-accent, #8b5a2b);
    border-color: var(--brand-accent, #8b5a2b);
    color: var(--brand-surface, #fff);
}

.cleanup-filters {
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}

.cleanup-filter-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--brand-ink-soft, #555);
}

.cleanup-filter-label .form-control {
    min-width: 9rem;
}

.cleanup-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.cleanup-check-col {
    width: 2.5rem;
    text-align: center;
}

.cleanup-table tr.selected {
    background: color-mix(in srgb, var(--brand-accent, #8b5a2b) 8%, transparent);
}

.cleanup-action-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    background: var(--brand-surface, #fff);
    border: 1px solid var(--brand-border, #d6d0c8);
    border-radius: var(--radius-md, 0.6rem);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
    z-index: 2;
}

.cleanup-selected-count {
    font-weight: 600;
}

.cleanup-result {
    margin: 0.75rem 0;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md, 0.6rem);
    background: color-mix(in srgb, var(--brand-accent, #8b5a2b) 10%, transparent);
}

.cleanup-failures {
    margin: 0.5rem 0 0;
    padding-left: 1.2rem;
    color: var(--brand-danger, #a12);
}


/* ---------------------------------------------------------------------------------------
   Signage studio (/tenant/signage)
--------------------------------------------------------------------------------------- */

.signage-explainer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

@media (max-width: 720px) {
    .signage-explainer {
        grid-template-columns: 1fr;
    }
}

.signage-explainer li {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--brand-border, #d6d0c8);
    border-radius: var(--radius-sm, 0.4rem);
    background: color-mix(in srgb, var(--brand-accent, #8b5a2b) 4%, transparent);
    font-size: 0.85rem;
    color: var(--brand-muted, #6b6259);
}

.signage-explainer strong {
    color: var(--brand-text, #241f1a);
}

.signage-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

/* "Add a page" sits far down the left column, a full screen below the toolbar — so editing
   there leaves no Save button and no unsaved-changes indicator anywhere on screen. This bar
   follows the viewport instead of the document, and only while there is something to save.
   Pinned to the bottom rather than the top: the tenant nav is already sticky at top:0 with a
   height that changes as it wraps, so nothing can reliably sit beneath it. */
.signage-unsaved-bar {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: calc(100vw - 2rem);
    padding: 0.6rem 0.9rem;
    background: var(--brand-surface, #fff);
    border: 1px solid var(--brand-border, #d6d0c8);
    border-radius: 999px;
    box-shadow: 0 6px 20px rgb(0 0 0 / 14%);
}

.signage-unsaved-bar span {
    font-size: 0.85rem;
    font-weight: 600;
}

@media (max-width: 480px) {
    .signage-unsaved-bar {
        left: 1rem;
        right: 1rem;
        transform: none;
        justify-content: space-between;
    }
}

.signage-save-state {
    margin-left: auto;
    align-self: center;
    font-size: 0.85rem;
}

.signage-save-state.dirty {
    color: var(--brand-accent, #8b5a2b);
    font-weight: 600;
}

.signage-save-state.clean {
    color: var(--brand-muted, #6b6259);
}

.signage-examples {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.signage-examples-label {
    align-self: center;
    font-size: 0.85rem;
    font-weight: 600;
}

.signage-example {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    max-width: 15rem;
    padding: 0.5rem 0.7rem;
    text-align: left;
    background: var(--brand-surface, #fff);
    border: 1px solid var(--brand-border, #d6d0c8);
    border-radius: var(--radius-sm, 0.4rem);
    font: inherit;
    cursor: pointer;
}

.signage-example:hover {
    border-color: var(--brand-accent, #8b5a2b);
}

.signage-example small {
    color: var(--brand-muted, #6b6259);
    font-size: 0.78rem;
}

.signage-add-page {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.signage-add-page-label {
    font-size: 0.85rem;
    font-weight: 600;
}

.signage-field-error,
.signage-page-problem {
    color: var(--brand-danger, #a1332b);
}

.signage-field-error {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
}

.signage-page-item.invalid {
    border-color: var(--brand-danger, #a1332b);
}

.signage-hint.inline {
    margin: 0;
    font-size: 0.8rem;
}

.signage-preview-card {
    position: sticky;
    top: 1rem;
}

@media (max-width: 1100px) {
    .signage-preview-card {
        position: static;
    }
}

.signage-studio {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .signage-studio {
        grid-template-columns: 1fr;
    }
}

.signage-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.signage-card {
    background: var(--brand-surface, #fff);
    border: 1px solid var(--brand-border, #d6d0c8);
    border-radius: var(--radius-md, 0.6rem);
    padding: 1rem;
}

.signage-card h2 {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
}

.signage-card h3 {
    margin: 1rem 0 0.5rem;
    font-size: 0.95rem;
}

.signage-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.signage-card-inner {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--brand-border, #d6d0c8);
}

.signage-hint {
    margin: 0.35rem 0 0.75rem;
    font-size: 0.85rem;
    color: var(--brand-muted, #6b6259);
}

.signage-field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}

.signage-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
}

.signage-field.grow {
    flex: 1;
    min-width: 12rem;
}

.signage-field > span {
    font-weight: 600;
}

.signage-field input,
.signage-field select {
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--brand-border, #d6d0c8);
    border-radius: var(--radius-sm, 0.4rem);
    background: var(--brand-bg, #fff);
    font: inherit;
}

.signage-field input[type="range"] {
    padding: 0.35rem 0;
    border: none;
    background: transparent;
    width: 100%;
}

.signage-field.color input {
    padding: 0.15rem;
    width: 3.5rem;
    height: 2.1rem;
}

.signage-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.signage-fieldset {
    margin: 1rem 0 0;
    padding: 0.75rem;
    border: 1px solid var(--brand-border, #d6d0c8);
    border-radius: var(--radius-sm, 0.4rem);
}

.signage-fieldset legend {
    padding: 0 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.signage-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.signage-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--brand-border, #d6d0c8);
    border-radius: 999px;
    font-size: 0.85rem;
    cursor: pointer;
}

.signage-chip.selected {
    background: color-mix(in srgb, var(--brand-accent, #8b5a2b) 12%, transparent);
    border-color: var(--brand-accent, #8b5a2b);
}

.signage-canvas-elements {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.signage-canvas-element {
    padding: 0.75rem;
    border: 1px solid var(--brand-border, #d6d0c8);
    border-radius: var(--radius-sm, 0.4rem);
    background: color-mix(in srgb, var(--brand-surface, #fff) 92%, var(--brand-muted, #f4f5f8));
}

.signage-canvas-element textarea {
    width: 100%;
    resize: vertical;
    font: inherit;
}

.signage-page-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.signage-page-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem;
    border: 1px solid var(--brand-border, #d6d0c8);
    border-radius: var(--radius-sm, 0.4rem);
}

.signage-page-item.selected {
    border-color: var(--brand-accent, #8b5a2b);
    background: color-mix(in srgb, var(--brand-accent, #8b5a2b) 6%, transparent);
}

.signage-page-summary {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: none;
    border: 0;
    padding: 0.2rem;
    font: inherit;
    text-align: left;
    cursor: pointer;
    min-width: 0;
}

.signage-page-index {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand-accent, #8b5a2b) 15%, transparent);
    font-size: 0.8rem;
    font-weight: 700;
}

.signage-page-label {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.signage-page-label small {
    color: var(--brand-muted, #6b6259);
}

.signage-page-actions {
    display: flex;
    gap: 0.2rem;
}

/* Narrow phones: the page row's summary and its four action buttons cannot share a line
   without the title wrapping mid-word, so stack them instead. */
@media (max-width: 480px) {
    .signage-page-item {
        flex-wrap: wrap;
    }

    .signage-page-summary {
        flex: 1 0 100%;
    }

    .signage-page-actions {
        margin-left: auto;
    }

    .signage-examples,
    .signage-add-page {
        flex-direction: column;
        align-items: stretch;
    }

    .signage-example {
        max-width: none;
    }
}

.signage-image-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.signage-image-option {
    width: 4.5rem;
    height: 4.5rem;
    padding: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--brand-bg, #fff);
    border: 2px solid var(--brand-border, #d6d0c8);
    border-radius: var(--radius-sm, 0.4rem);
    font-size: 0.8rem;
    cursor: pointer;
}

.signage-image-option.selected {
    border-color: var(--brand-accent, #8b5a2b);
}

.signage-image-option img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.signage-preview-frame {
    position: relative;
    width: 100%;
    max-height: 60vh;
    margin: 0 auto;
    background: #000;
    border: 1px solid var(--brand-border, #d6d0c8);
    border-radius: var(--radius-sm, 0.4rem);
    overflow: hidden;
}

.signage-preview-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.signage-preview-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    text-align: center;
    color: #9aa3b5;
    font-size: 0.9rem;
}

.signage-preview-caption {
    margin: 0.5rem 0 0.75rem;
    font-size: 0.85rem;
    color: var(--brand-muted, #6b6259);
    text-align: center;
}

.signage-device-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.signage-device {
    padding: 0.75rem;
    border: 1px solid var(--brand-border, #d6d0c8);
    border-radius: var(--radius-sm, 0.4rem);
}

.signage-device.revoked {
    opacity: 0.55;
}

.signage-device-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.signage-device-meta {
    font-size: 0.8rem;
    color: var(--brand-muted, #6b6259);
}

.signage-device-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

/* ---------------------------------------------------------------------------
   Menu organizer — arranging categories into rows/columns and ordering the
   services inside them. Rows on the board are rows here, so the editor reads
   as the thing it edits rather than as a form describing it.
   --------------------------------------------------------------------------- */

.menu-organizer {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.organizer-denied {
    color: var(--brand-muted, #6b6b6b);
    font-style: italic;
}

.organizer-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.organizer-toolbar-text h2 {
    margin: 0;
    font-size: 1.05rem;
}

.organizer-hint {
    margin: 0.25rem 0 0;
    color: var(--brand-muted, #6b6b6b);
    font-size: 0.85rem;
    max-width: 46rem;
}

.organizer-toolbar-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.organizer-status {
    margin: 0;
    font-size: 0.85rem;
    color: var(--brand-muted, #6b6b6b);
}

.organizer-status.success {
    color: var(--brand-ink, #2b2b2b);
}

.organizer-status.error {
    color: var(--brand-error, #b3261e);
}

.organizer-row {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
}

.organizer-row-label {
    flex: 0 0 auto;
    width: 3.4rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand-muted, #6b6b6b);
}

.organizer-row-cards {
    flex: 1 1 auto;
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.organizer-row--new {
    border: 1px dashed var(--brand-line, #d6d0c8);
    border-radius: var(--radius-md, 0.6rem);
    padding: 0.6rem 0.85rem;
    font-size: 0.8rem;
    color: var(--brand-muted, #6b6b6b);
}

.organizer-category {
    flex: 1 1 15rem;
    min-width: 13rem;
    background: var(--brand-surface, #fff);
    border: 1px solid var(--brand-line, #d6d0c8);
    border-radius: var(--radius-md, 0.6rem);
    padding: 0.7rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Full width on the board, so full width here too. */
.organizer-category.is-span {
    flex-basis: 100%;
}

.organizer-category.is-drop-target {
    border-color: var(--brand-accent, #8a6d3b);
    box-shadow: 0 0 0 2px var(--brand-accent-soft, rgba(138, 109, 59, 0.25));
}

.organizer-category-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.organizer-category-head h3 {
    margin: 0;
    font-size: 0.95rem;
}

.organizer-count {
    font-size: 0.75rem;
    color: var(--brand-muted, #6b6b6b);
    font-variant-numeric: tabular-nums;
}

.organizer-category-controls {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.organizer-btn {
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.35rem;
    border: 1px solid var(--brand-line, #d6d0c8);
    border-radius: var(--radius-sm, 0.35rem);
    background: var(--brand-canvas, #faf8f5);
    color: var(--brand-ink, #2b2b2b);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
}

.organizer-btn:hover:not(:disabled) {
    border-color: var(--brand-accent, #8a6d3b);
}

.organizer-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.organizer-span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--brand-muted, #6b6b6b);
    margin-left: auto;
    cursor: pointer;
}

.organizer-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.organizer-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.45rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 0.35rem);
    background: var(--brand-canvas, #faf8f5);
    cursor: grab;
}

.organizer-item:hover {
    border-color: var(--brand-line, #d6d0c8);
}

.organizer-item.is-dragging {
    opacity: 0.45;
}

.organizer-grip {
    color: var(--brand-muted, #6b6b6b);
    font-size: 0.85rem;
    cursor: grab;
}

.organizer-item-name {
    flex: 1 1 auto;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.organizer-badge {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.1rem 0.3rem;
    border-radius: var(--radius-sm, 0.35rem);
    background: var(--brand-error-soft, #fbe6e3);
    color: var(--brand-error, #b3261e);
}

.organizer-item-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.organizer-move-select {
    max-width: 7rem;
    font-size: 0.75rem;
    padding: 0.15rem 0.25rem;
    border: 1px solid var(--brand-line, #d6d0c8);
    border-radius: var(--radius-sm, 0.35rem);
    background: var(--brand-surface, #fff);
    color: var(--brand-ink, #2b2b2b);
}

.organizer-empty {
    margin: 0;
    padding: 0.6rem;
    border: 1px dashed var(--brand-line, #d6d0c8);
    border-radius: var(--radius-sm, 0.35rem);
    font-size: 0.8rem;
    color: var(--brand-muted, #6b6b6b);
    text-align: center;
}

@media (max-width: 640px) {
    .organizer-row {
        flex-direction: column;
        gap: 0.35rem;
    }

    .organizer-row-label {
        width: auto;
        justify-content: flex-start;
    }
}

/* POS station */
.pos-station-switch {
    display: inline-flex;
    border: 1px solid var(--brand-line);
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
}

.pos-station-switch-btn {
    border: none;
    background: transparent;
    color: var(--brand-ink);
    font: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.45rem 0.9rem;
    min-height: 44px;
    cursor: pointer;
}

.pos-station-switch-btn.is-active {
    background: var(--brand-accent);
    color: #fff;
}

.pos-station-top {
    position: relative;
    z-index: 200;
    background: var(--brand-canvas);
    border-bottom: 1px solid var(--brand-line);
}

.pos-station-top-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    max-width: 72rem;
    margin: 0 auto;
    padding: 0.65rem clamp(1rem, 4vw, 2rem);
}

.pos-station-title {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.pos-station-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    display: flex;
    background: var(--brand-surface);
    border-top: 1px solid var(--brand-line);
}

.pos-station-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0.5rem;
    text-decoration: none;
    color: var(--brand-ink);
    font-weight: 600;
    font-size: 0.85rem;
    text-align: center;
}

.pos-station-tab.active,
.pos-station-tab:hover {
    color: var(--brand-accent);
    background: var(--brand-accent-soft);
}

.pos-station-pin {
    position: fixed;
    inset: 0;
    z-index: 4000;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.pos-station-pin-card {
    background: var(--brand-canvas);
    border-radius: 1rem;
    padding: 1.25rem;
    width: min(22rem, 100%);
    text-align: center;
}

.pos-station-pin-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem 0;
}

.pos-station-pin-dots span {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    border: 2px solid var(--brand-line);
}

.pos-station-pin-dots span.is-filled {
    background: var(--brand-ink);
    border-color: var(--brand-ink);
}

.pos-station-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.pos-station-key {
    min-height: 52px;
    font-size: 1.25rem;
    font-weight: 600;
    border: 1px solid var(--brand-line);
    border-radius: 0.75rem;
    background: var(--brand-surface);
    color: var(--brand-ink);
    cursor: pointer;
}

.pos-station-password {
    display: block;
    width: 100%;
    min-height: 48px;
    margin: 0.75rem 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--brand-line);
    border-radius: 0.75rem;
    font-size: 1rem;
}

.pos-station-password-submit {
    width: 100%;
    margin-bottom: 0.5rem;
}

.pos-station-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    font-weight: 500;
}

.pos-station-switch-error {
    margin: 0.5rem 0 0;
}