/* ============================================================
   APP.CSS · Winfield Street Coffee admin
   Palette: ink #231F20, surface #FFFCF4, page #F1F1E3,
   bronze #825D2D (hover #623216), border #E3E0CF.
   Type: Neue Montreal. Radius 8px, 16px for large cards.
   Colour tokens come from themeCSS() in core/Helpers.php.
   ============================================================ */

/* --- Brand typeface --- */
@font-face {
    font-family: 'Neue Montreal';
    src: url('/assets/fonts/neuemontreal-regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Montreal';
    src: url('/assets/fonts/neuemontreal-medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* The panel uses 550/600/700 in places; map them to the medium cut so the
   browser never synthesises a fake bold over the regular file. */
@font-face {
    font-family: 'Neue Montreal';
    src: url('/assets/fonts/neuemontreal-medium.otf') format('opentype');
    font-weight: 600 700;
    font-style: normal;
    font-display: swap;
}

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

body {
    font-family: var(--font-sans);
    color: var(--color-primary);
    background: var(--color-bg);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: clip;
    max-width: 100vw;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; }

/* --- App Layout --- */
.app-wrapper {
    display: flex;
    min-height: 100vh;
}

.app-main {
    flex: 1;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin var(--transition);
}

.app-content {
    flex: 1;
    padding: 28px 32px;
    max-width: 1400px;
    width: 100%;
}

/* --- Sidebar --- */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background: #FFFCF4;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: transform var(--transition);
    overflow: hidden;
}

.sidebar-header {
    padding: 20px 20px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-logo img {
    height: 27px;
    width: auto;
}

.sidebar-logo-text {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.sidebar-close {
    display: none;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--color-muted);
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 12px 12px;
}

.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}
.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(35,31,32,0.1);
    border-radius: 4px;
}

.nav-section {
    margin-bottom: 8px;
}

.nav-section-title {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
    padding: 12px 12px 6px;
}

/* --- Collapsible nav layers (sections + subgroups) --- */
.nav-section-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px 12px 6px;
    font: inherit;
    color: var(--color-muted);
    border-radius: var(--radius-sm);
}

.nav-section-toggle .nav-section-title {
    padding: 0;
    flex: 1;
    text-align: left;
}

.nav-section-toggle:hover .nav-section-title {
    color: var(--color-primary);
}

.nav-section-caret {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--color-muted);
    opacity: 0.7;
    transition: transform 0.25s ease;
}

.nav-collapsed > .nav-section-toggle .nav-section-caret,
.nav-collapsed > .nav-subgroup-toggle .nav-section-caret {
    transform: rotate(-90deg);
}

/* Smooth expand/collapse without hardcoded heights */
.nav-section-items {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.25s ease;
}

.nav-no-anim .nav-section-items,
.nav-no-anim .nav-section-caret {
    transition: none;
}

.nav-section-items-inner {
    overflow: hidden;
    min-height: 0;
}

.nav-collapsed > .nav-section-items {
    grid-template-rows: 0fr;
}

/* Aggregated badge shown on a group header while it's collapsed */
.nav-group-badge {
    display: none;
}

.nav-collapsed > .nav-section-toggle .nav-group-badge,
.nav-collapsed > .nav-subgroup-toggle .nav-group-badge {
    display: flex;
}

/* Subgroup (2nd layer) — a nav-item that expands children */
.nav-subgroup-toggle {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.nav-subgroup-toggle .nav-section-caret {
    margin-left: auto;
}

.nav-subgroup.has-active > .nav-subgroup-toggle {
    color: var(--color-primary);
    font-weight: 550;
}

/* Child items — indented, slightly smaller, with a guide line */
.nav-item-sub {
    margin-left: 22px;
    padding: 7px 12px 7px 18px;
    font-size: 0.85rem;
    border-left: 1px solid var(--border-color);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.nav-item-sub.active {
    border-left-color: var(--color-primary);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 450;
    color: #4A4441;
    transition: all var(--transition);
    position: relative;
}

.nav-item:hover {
    background: rgba(35,31,32,0.04);
    color: var(--color-primary);
}

.nav-item.active {
    background: rgba(35,31,32,0.06);
    color: var(--color-primary);
    font-weight: 550;
}

/* Nav icons: Lucide strokes, never filled. Hover is a soft rotate with a
   slight overshoot, which is the motion the client signed off on. */
.nav-item i,
.nav-item svg {
    font-size: 1.1rem;
    width: 20px;
    height: 20px;
    text-align: center;
    opacity: 0.85;
    color: var(--color-icon);
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
}

.nav-item:hover i,
.nav-item:hover svg {
    transform: rotate(15deg) scale(1.1);
    color: var(--color-icon-hover);
}

.nav-item.active i,
.nav-item.active svg {
    opacity: 1;
    transform: rotate(0);
    color: var(--color-icon);
}

/* Lucide ships stroke-only paths. Filling them turns every glyph into a
   blob, so the fill stays off everywhere in the shell. */
.nav-item i,
.nav-item svg,
.nav-item:hover i,
.nav-item:hover svg,
.nav-item.active i,
.nav-item.active svg,
.sidebar svg,
.topbar svg {
    fill: none;
}

.nav-badge {
    margin-left: auto;
    background: var(--color-danger);
    color: #FFFCF4;
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    padding: 0 6px;
}

.sidebar-footer {
    border-top: 1px solid var(--border-color);
    padding: 12px;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #FFFCF4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
}

.user-avatar-sm {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
}

.user-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.user-name {
    font-size: 0.85rem;
    font-weight: 550;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role {
    font-size: 0.72rem;
    color: var(--color-muted);
}

.nav-item-logout {
    color: var(--color-muted);
    margin-top: 4px;
}
.nav-item-logout:hover {
    color: var(--color-danger);
    background: rgba(81,7,7,0.06);
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(35,31,32,0.3);
    z-index: 99;
    backdrop-filter: blur(2px);
}

/* --- Topbar --- */
.topbar {
    height: var(--topbar-height);
    background: #FFFCF4;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    position: sticky;
    top: 0;
    /* Above Leaflet (panes ~400, controls ~1000) so the store picker and
       profile dropdowns never render underneath an embedded map. */
    z-index: 1100;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.topbar-menu-btn {
    display: none;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--color-muted);
}
.topbar-menu-btn:hover { background: rgba(35,31,32,0.04); }

.topbar-title {
    font-size: 1.15rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: #231F20;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topbar-search {
    position: relative;
    display: flex;
    align-items: center;
}

/* Direct children only — otherwise the rule leaks into the search-results
   dropdown and breaks every nested <i>/<svg> there. */
.topbar-search > i,
.topbar-search > svg {
    position: absolute;
    left: 12px;
    width: 18px;
    height: 18px;
    color: var(--color-muted);
    pointer-events: none;
}

.topbar-search input {
    width: 240px;
    height: 38px;
    padding: 0 14px 0 36px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--color-bg);
    font-size: 0.85rem;
    color: var(--color-primary);
    transition: all var(--transition);
    outline: none;
}

.topbar-search input:focus {
    border-color: var(--border-color);
    background: #FFFCF4;
    box-shadow: 0 0 0 3px rgba(35,31,32,0.04);
}

.topbar-search input::placeholder {
    color: var(--color-muted);
}

.topbar-icon-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    position: relative;
    transition: all var(--transition);
}
.topbar-icon-btn:hover {
    background: rgba(35,31,32,0.04);
    color: var(--color-primary);
}

.notification-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background: var(--color-danger);
    border-radius: 50%;
    border: 2px solid #FFFCF4;
}

/* --- Cards --- */
.card {
    background: #FFFCF4;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-color);
}

.card-title {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #231F20;
}

.card-body {
    padding: 22px;
}

.card-body-flush {
    padding: 0;
}

/* --- Stat Cards --- */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: #FFFCF4;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: box-shadow var(--transition);
}

.stat-card:hover {
    box-shadow: var(--shadow-md);
}

.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.stat-icon-primary { background: rgba(35,31,32,0.06); color: #231F20; }
.stat-icon-success { background: rgba(61,90,61,0.08); color: var(--color-success); }
.stat-icon-warning { background: rgba(130,93,45,0.08); color: var(--color-warning); }
.stat-icon-accent  { background: rgba(130,93,45,0.08); color: var(--color-accent); }
.stat-icon-danger  { background: rgba(81,7,7,0.08); color: var(--color-danger); }

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.stat-label {
    font-size: 0.78rem;
    color: var(--color-muted);
    margin-top: 2px;
}

/* --- Dashboard Components --- */
.stats-row-6 {
    grid-template-columns: repeat(3, 1fr);
}

.stat-card-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    animation: dashFadeIn 0.4s ease both;
    animation-delay: calc(var(--anim-delay, 0) * 0.08s);
}

.stat-card-link:hover {
    border-color: var(--border-color);
}

@keyframes dashFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.stat-trend {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    vertical-align: middle;
}

.stat-trend i,
.stat-trend svg {
    width: 16px;
    height: 16px;
}

.stat-trend-up { color: var(--color-success); }
.stat-trend-down { color: var(--color-danger); }

.stat-icon-completed { background: rgba(61,90,61,0.08); color: var(--color-success); }
.stat-icon-muted { background: rgba(35,31,32,0.04); color: var(--color-muted); }

/* Dashboard Header */
.dash-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
}

.dash-greeting {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
    color: #231F20;
}

.dash-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dash-date {
    font-size: 0.85rem;
    color: var(--color-muted);
}

.dash-store-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
}

.dash-store-badge i,
.dash-store-badge svg {
    width: 14px;
    height: 14px;
}

.dash-store-open {
    background: rgba(61,90,61,0.1);
    color: var(--color-success);
}

.dash-store-closed {
    background: rgba(81,7,7,0.1);
    color: var(--color-danger);
}

/* Dashboard Rows */
.dash-row-2 {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
    margin-bottom: 20px;
}
/* Sem alertas, o grafico herdava 1fr de um grid de 2 colunas e deixava 380px
   de vazio a direita. A view marca a linha quando o card ao lado nao existe. */
.dash-row-2.dash-row-2-solo { grid-template-columns: 1fr; }

.dash-chart-card {
    min-height: 300px;
}

.dash-chart-total {
    font-size: 0.82rem;
    color: var(--color-muted);
    margin-top: 2px;
}

.dash-row-4 {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
}

/* Quick Actions */
.dash-quick-actions {
    display: grid;
    /* 2026-09-01: era repeat(4, 1fr) com apenas 3 cartoes, entao sobrava uma
       coluna inteira vazia a direita. auto-fit distribui o que existir pela
       largura toda, e continua certo se um atalho for adicionado ou removido. */
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.dash-action-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: #FFFCF4;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 0.88rem;
    font-weight: 550;
    color: var(--color-primary);
    text-decoration: none;
    transition: all var(--transition);
    box-shadow: var(--shadow);
}

.dash-action-card:hover {
    border-color: var(--border-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.dash-action-card i,
.dash-action-card svg {
    width: 20px;
    height: 20px;
    color: var(--color-accent);
    flex-shrink: 0;
}

/* Alerts */
.dash-alerts-card {
    height: 360px;
    max-height: 360px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dash-alerts-card .card-header {
    flex-shrink: 0;
}

.dash-alerts-card .card-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.dash-alerts-list {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: 100%;
}

.dash-alert-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    text-decoration: none;
    color: var(--color-primary);
    border-bottom: 1px solid var(--border-color);
    transition: background var(--transition);
}

.dash-alert-item:last-child { border-bottom: none; }
.dash-alert-item:hover { background: rgba(35,31,32,0.02); }

.dash-alert-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dash-alert-icon i,
.dash-alert-icon svg {
    width: 16px;
    height: 16px;
}

.dash-alert-warning .dash-alert-icon { background: rgba(130,93,45,0.1); color: var(--color-warning); }
.dash-alert-danger .dash-alert-icon { background: rgba(81,7,7,0.1); color: #510707; }
.dash-alert-success .dash-alert-icon { background: rgba(61,90,61,0.1); color: #3D5A3D; }
.dash-alert-info .dash-alert-icon { background: rgba(130,93,45,0.08); color: var(--color-accent); }
.dash-alert-accent .dash-alert-icon { background: rgba(130,93,45,0.08); color: #825D2D; }

.dash-alert-text {
    flex: 1;
    font-size: 0.84rem;
    line-height: 1.4;
}

.dash-alert-arrow {
    width: 14px;
    height: 14px;
    color: var(--color-muted);
    flex-shrink: 0;
}

/* Activity Timeline */
.dash-activity-list {
    display: flex;
    flex-direction: column;
}

.dash-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
}

.dash-activity-item:last-child { border-bottom: none; }

.dash-activity-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(35,31,32,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.dash-activity-icon i,
.dash-activity-icon svg {
    width: 14px;
    height: 14px;
    color: var(--color-muted);
}

.dash-activity-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dash-activity-text {
    font-size: 0.84rem;
    line-height: 1.4;
}

.dash-activity-time {
    font-size: 0.75rem;
    color: var(--color-muted);
}

.dash-hide-mobile { /* shown by default */ }

/* Modals sit above the sticky topbar (z-index 1100) and above Leaflet.
   Inline overlay styles predate this rule, so it is load-bearing. */
.modal-overlay { z-index: 1300 !important; }

/* --- Tables --- */
.table {
    width: 100%;
    border-collapse: collapse;
}

.table th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 550;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
    padding: 12px 22px;
    border-bottom: 1px solid var(--border-color);
    background: #F7F5E9;
}

.table td {
    padding: 14px 22px;
    font-size: 0.88rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

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

.table-row-link {
    cursor: pointer;
    transition: background var(--transition);
}
.table-row-link:hover {
    background: rgba(35,31,32,0.02);
}

/* --- Badges --- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 550;
    letter-spacing: 0.01em;
}

.badge-primary { background: rgba(130,93,45,0.1); color: #825D2D; }
.badge-success { background: rgba(61,90,61,0.1); color: #3D5A3D; }
.badge-warning { background: rgba(130,93,45,0.1); color: #623216; }
.badge-danger  { background: rgba(81,7,7,0.1); color: #510707; }
.badge-info    { background: rgba(130,93,45,0.1); color: #825D2D; }
.badge-muted   { background: rgba(35,31,32,0.05); color: var(--color-muted); }
.badge-outline { background: transparent; border: 1px solid var(--border-color); color: var(--color-muted); }

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    /* One shape for every button in the dashboard: a full pill. */
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 550;
    transition: all var(--transition);
    border: 1px solid transparent;
    white-space: nowrap;
}

.btn-sm {
    padding: 6px 14px;
    font-size: 0.8rem;
}

/* Quiet buttons, the way the storefront and ezCater draw them: a border and
   the word, nothing filled until you hover. Icons inside them are hidden so
   every button reads as one short label. */
.btn-primary {
    background: transparent;
    color: #231f20;
    border-color: #231f20;
}
.btn-primary:hover {
    background: #231f20;
    color: #fff;
    border-color: #231f20;
}

.btn-secondary {
    background: transparent;
    color: #231f20;
    border-color: #d7d3c4;
}
.btn-secondary:hover {
    background: #231f20;
    color: #fff;
    border-color: #231f20;
}
/* Buttons read as text alone: the icon beside a label is noise. */
.btn-primary > i, .btn-primary > svg,
.btn-secondary > i, .btn-secondary > svg { display: none; }

/* Unless the icon is all there is: a handful of buttons carry no label (copy
   a coupon code, send a chat message) and hiding their icon left an empty
   pill nobody could read. They are marked with .btn-icon-only, never guessed
   at: :only-child counts elements and ignores text, so "<svg> New order"
   looked icon-only too and turned every labelled button into a circle. */
.btn-icon-only > i, .btn-icon-only > svg { display: inline-flex; }
.btn-icon-only {
    padding: 10px;
    aspect-ratio: 1;
}

.btn-ghost {
    background: transparent;
    color: var(--color-muted);
}
.btn-ghost:hover {
    background: rgba(35,31,32,0.04);
    color: var(--color-primary);
}

.btn-danger {
    background: var(--color-danger);
    color: #FFFCF4;
    border-color: var(--color-danger);
}
.btn-danger:hover {
    background: #3B0505;
}

.btn-full { width: 100%; }

.page-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* --- Forms --- */
.form-group {
    margin-bottom: 18px;
}

.form-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82rem;
    font-weight: 550;
    margin-bottom: 6px;
    color: #3A3533;
}

.form-label-link {
    font-size: 0.78rem;
    font-weight: 450;
    color: var(--color-accent);
}
.form-label-link:hover {
    text-decoration: underline;
}

.form-input {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: #FFFCF4;
    font-size: 0.9rem;
    color: var(--color-primary);
    transition: all var(--transition);
    outline: none;
}

.form-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(35,31,32,0.06);
}

.form-input::placeholder {
    color: #9B948D;
}

.input-password-wrapper {
    position: relative;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-muted);
    padding: 4px;
}
.password-toggle:hover { color: var(--color-primary); }

.form-check {
    margin-bottom: 24px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #4A4441;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
}

/* Anything marked hidden stays hidden. A class that sets its own display
   (.alert is flex, badges and cards are too) otherwise beats the browser's
   [hidden] rule and paints an empty box: the order page showed an empty
   amber bar on every visit (2026-09-18). */
[hidden] { display: none !important; }

/* --- Alerts --- */
.alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 450;
    margin-bottom: 20px;
    animation: slideDown 0.3s ease;
}

.alert-success { background: rgba(61,90,61,0.08); color: #2C412C; border: 1px solid rgba(61,90,61,0.15); }
.alert-error   { background: rgba(81,7,7,0.08); color: #3B0505; border: 1px solid rgba(81,7,7,0.15); }
.alert-warning { background: rgba(130,93,45,0.08); color: #623216; border: 1px solid rgba(130,93,45,0.15); }
.alert-info    { background: rgba(130,93,45,0.08); color: #623216; border: 1px solid rgba(130,93,45,0.15); }

.alert-close {
    font-size: 1.2rem;
    line-height: 1;
    color: inherit;
    opacity: 0.5;
}
.alert-close:hover { opacity: 1; }

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Empty State --- */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--color-muted);
}

.empty-state i {
    font-size: 2.5rem;
    opacity: 0.3;
    margin-bottom: 12px;
}

.empty-state p {
    font-size: 0.95rem;
    font-weight: 550;
    margin-bottom: 4px;
    color: #6E6862;
}

.empty-state span {
    font-size: 0.82rem;
}

/* --- Page Header --- */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
}

.page-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.page-heading {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* --- Icon Button --- */
.btn-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    transition: all var(--transition);
    flex-shrink: 0;
}
.btn-icon:hover {
    background: rgba(35,31,32,0.05);
    color: var(--color-primary);
}
.btn-icon-danger:hover {
    background: rgba(81,7,7,0.06);
    color: var(--color-danger);
}

/* --- Filters Bar --- */
.filters-bar {
    margin-bottom: 20px;
    padding: 12px 16px;
}

.filters-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-item {
    position: relative;
    display: flex;
    align-items: center;
}

.filter-item-grow {
    flex: 1;
    min-width: 180px;
}

.filter-icon {
    position: absolute;
    left: 12px;
    font-size: 0.9rem;
    color: var(--color-muted);
    pointer-events: none;
}

.filter-input {
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: #FFFCF4;
    font-size: 0.85rem;
    color: var(--color-primary);
    outline: none;
    transition: all var(--transition);
}

.filter-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(35,31,32,0.04);
}

.filter-item-grow .filter-input {
    width: 100%;
    padding-left: 36px;
}

.filter-select {
    min-width: 140px;
    appearance: auto;
    cursor: pointer;
}

/* --- Table Responsive --- */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- Product Table Cells --- */
/*
 * The thumbnail must stay 48px no matter which rows are on screen.
 * The Menu Manager filters rows with display:none and the table uses auto
 * layout, so hidden rows drop out of the column width calculation. The photo
 * is an <img>, and the global reset above (img { max-width: 100% }) lets it be
 * squeezed down to whatever the column happens to be; the placeholder is a
 * <div> with no such clamp, so it was the only rigid thing holding the column
 * open. Filtering to a category where every product has a photo removed that
 * last placeholder and the photos collapsed to the declared column width.
 * min-width gives the cell a real floor and max-width opts out of the reset,
 * so both variants are rigid and the column can no longer move.
 */
.product-thumb,
.product-thumb-placeholder {
    width: 48px;
    min-width: 48px;
    max-width: none;
    height: 48px;
    border-radius: 8px;
}

.product-thumb {
    object-fit: cover;
}

.product-thumb-placeholder {
    background: #EAE7D6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #CFCBB8;
    font-size: 1.1rem;
}

.product-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.product-cell-name {
    font-weight: 550;
    font-size: 0.88rem;
    color: var(--color-primary);
}

.product-cell-desc {
    font-size: 0.78rem;
    color: var(--color-muted);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-price {
    font-weight: 600;
    font-size: 0.88rem;
}

.product-compare-price {
    display: block;
    text-decoration: line-through;
    color: var(--color-muted);
    font-size: 0.75rem;
    margin-top: 1px;
}

/* --- Dietary Tags Inline --- */
.dietary-tags-inline {
    display: flex;
    gap: 4px;
    margin-top: 3px;
    flex-wrap: wrap;
}

.dietary-tag {
    font-size: 0.62rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    background: rgba(61,90,61,0.08);
    color: var(--color-success);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* --- Toggle Switch --- */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    cursor: pointer;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    background: #CFCBB8;
    border-radius: 22px;
    transition: background 0.25s ease;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background: #FFFCF4;
    border-radius: 50%;
    transition: transform 0.25s ease;
    box-shadow: 0 1px 3px rgba(35,31,32,0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--color-success);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(18px);
}

/* --- Status Toggle Items --- */
.status-toggles {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.status-toggle-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    cursor: default;
}

.status-toggle-item + .status-toggle-item {
    border-top: 1px solid var(--border-color);
}

.status-toggle-label {
    font-size: 0.85rem;
    font-weight: 450;
    color: #3A3533;
}

/* --- Form Grid (Product Form) --- */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 24px;
    align-items: start;
    min-width: 0;
}

/* --- Field Grid (the house standard for edit forms) ---
   Compact two-per-row fields that wrap on narrow screens. Use this for
   entity forms (driver, store details, settings cards); .form-grid above
   is a PAGE layout (main column + sidebar), not a field layout. */
.form-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px 18px;
    align-items: start;
    min-width: 0;
}
.form-fields .form-group {
    margin: 0;
    min-width: 0;
}
.form-fields .form-label {
    margin-bottom: 5px;
}
.form-fields .form-span-all {
    grid-column: 1 / -1;
}
.form-fields .form-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 2px;
}
.form-check-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}
.form-check-inline input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary, #231F20);
}

.form-grid-single {
    grid-template-columns: 1fr;
    max-width: 760px;
}

.form-column-main {
    min-width: 0;
    overflow: hidden;
}
/* form-column-side intentionally has no overflow:hidden — the Order
   Summary card uses position: sticky, which only works when none of
   its ancestors clip the overflow. */
.form-column-side {
    min-width: 0;
}

.form-column-main .card,
.form-column-side .card {
    margin-bottom: 20px;
}

.form-row {
    display: flex;
    gap: 16px;
}

.form-col-2 {
    flex: 1;
    min-width: 0;
}

.form-textarea {
    height: auto;
    padding: 10px 14px;
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

.form-hint {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--color-muted);
}

.form-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 18px 0;
}

.form-input-file {
    padding: 8px 14px;
    height: auto;
    font-size: 0.82rem;
}

/* --- Form Sticky Header --- */
.form-sticky-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Wrap at every width — order detail can have 6+ action buttons, which
       overflowed the viewport on phones/tablets rendering above the 768px
       mobile breakpoint (e.g. Safari "Request Desktop Website"). */
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 24px;
    padding: 14px 20px;
    background: #FFFCF4;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    position: sticky;
    top: var(--topbar-height);
    z-index: 40;
}

.form-sticky-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.form-sticky-left .page-heading {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.form-sticky-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 1;
    min-width: 0;
    /* 2026-09-01: o header quebra linha por desenho (havia 6+ botoes soltos).
       Quando quebrava, o bloco de acoes comecava colado a ESQUERDA. Agora que
       o secundario virou um menu so, margin-left:auto mantem tudo ancorado a
       direita mesmo depois da quebra. */
    margin-left: auto;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

/* --- Image Upload --- */
.image-upload-area {
    position: relative;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all var(--transition);
    background: #F7F5E9;
}

.image-upload-area:hover {
    border-color: var(--border-color);
}

.image-upload-area.drag-over {
    border-color: var(--color-accent);
    background: rgba(130,93,45,0.03);
    box-shadow: 0 0 0 3px rgba(130,93,45,0.08);
}

.image-upload-placeholder {
    padding: 36px 20px;
    text-align: center;
    cursor: pointer;
    color: var(--color-muted);
}

.image-upload-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: rgba(35,31,32,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-upload-icon i {
    font-size: 1.3rem;
    opacity: 0.4;
}

.image-upload-placeholder p {
    font-size: 0.85rem;
    font-weight: 500;
    color: #4A4441;
    margin-bottom: 4px;
}

.image-upload-placeholder span {
    font-size: 0.75rem;
    color: var(--color-muted);
}

.image-preview {
    position: relative;
}

.image-preview img {
    width: 100%;
    max-height: 240px;
    object-fit: cover;
    display: block;
}

.image-remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: rgba(35,31,32,0.55);
    color: #FFFCF4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: all var(--transition);
    backdrop-filter: blur(4px);
}
.image-remove-btn:hover {
    background: var(--color-danger);
    transform: scale(1.1);
}

.image-source-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.image-source-actions .btn {
    flex: 1;
    justify-content: center;
}

.product-image-picker-modal {
    max-width: 920px;
}

.product-image-picker-toolbar {
    padding: 12px 24px;
    border-bottom: 1px solid var(--border-color);
}

.product-image-picker-toolbar .filter-input {
    width: 100%;
}

.product-image-picker-body {
    max-height: 62vh;
    overflow-y: auto;
    padding: 16px 24px 24px;
}

.product-image-picker-section + .product-image-picker-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.product-image-picker-section-title {
    margin: 0 0 12px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.product-image-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.product-image-picker-card {
    min-height: 190px;
}

.product-image-picker-loading,
.product-image-picker-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 20px;
    color: var(--color-muted);
    text-align: center;
}

.product-image-picker-loading i,
.product-image-picker-empty i {
    width: 32px;
    height: 32px;
    opacity: 0.6;
}

/* --- Dietary Chips --- */
.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: #FFFCF4;
    font-size: 0.78rem;
    font-weight: 500;
    color: #6E6862;
    cursor: pointer;
    transition: all var(--transition);
    user-select: none;
}

.chip input[type="checkbox"] {
    display: none;
}

.chip i {
    font-size: 0.85rem;
    opacity: 0.5;
}

.chip:hover {
    border-color: var(--border-color);
    background: #F7F5E9;
}

.chip-active {
    border-color: var(--color-success);
    background: rgba(61,90,61,0.06);
    color: var(--color-success);
}

.chip-active i {
    opacity: 1;
}

/* --- Modifier Select List (form) --- */
.modifier-select-list {
    display: flex;
    flex-direction: column;
}

.modifier-select-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    cursor: pointer;
    transition: background var(--transition);
    border-bottom: 1px solid var(--border-color);
}

.modifier-select-item:last-child {
    border-bottom: none;
}

.modifier-select-item:hover {
    background: rgba(35,31,32,0.015);
}

.modifier-select-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}

.modifier-select-info {
    flex: 1;
    min-width: 0;
}

.modifier-select-name {
    display: block;
    font-size: 0.88rem;
    font-weight: 550;
}

.modifier-select-meta {
    display: block;
    font-size: 0.75rem;
    color: var(--color-muted);
    margin-top: 1px;
}

.modifier-select-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(35,31,32,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: all var(--transition);
    flex-shrink: 0;
}
.modifier-select-check i {
    width: 12px;
    height: 12px;
}

.modifier-select-item input:checked ~ .modifier-select-check {
    background: var(--color-primary);
    color: #FFFCF4;
}

/* --- Category Cards Grid --- */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.category-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow var(--transition);
}

.category-card:hover {
    box-shadow: var(--shadow-md);
}

.category-card-image {
    height: 120px;
    overflow: hidden;
    background: #EAE7D6;
}

.category-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-card-image-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #CFCBB8;
    font-size: 2rem;
}

.category-card-body {
    padding: 16px 18px;
    flex: 1;
}

.category-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.category-card-name {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.category-card-desc {
    font-size: 0.78rem;
    color: var(--color-muted);
    line-height: 1.4;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.category-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    color: var(--color-muted);
}

.category-card-meta i {
    font-size: 0.85rem;
    vertical-align: -1px;
    margin-right: 2px;
}

.category-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding: 10px 14px;
    border-top: 1px solid var(--border-color);
    background: #F7F5E9;
}

/* --- Accordion Cards (Modifiers) --- */
.accordion-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.accordion-card {
    overflow: hidden;
}

.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    cursor: pointer;
    transition: background var(--transition);
    user-select: none;
}

.accordion-header:hover {
    background: rgba(35,31,32,0.01);
}

.accordion-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.accordion-chevron {
    font-size: 1rem;
    color: var(--color-muted);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.accordion-open .accordion-chevron {
    transform: rotate(90deg);
}

.accordion-title {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.accordion-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 0.75rem;
    flex-wrap: wrap;
}

.accordion-header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.accordion-body {
    display: none;
    border-top: 1px solid var(--border-color);
}

.accordion-open .accordion-body {
    display: block;
}

/* --- Modifier Options List (display) --- */
.modifier-options-list {
    padding: 4px 0;
}

.modifier-option-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 10px 20px 10px 48px;
    font-size: 0.85rem;
    gap: 14px;
}

.modifier-option-item + .modifier-option-item {
    border-top: 1px solid var(--border-color);
}

.modifier-option-name {
    font-weight: 450;
}

.modifier-option-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.modifier-option-short,
.modifier-option-desc {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--color-muted);
}

.modifier-option-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.modifier-option-price {
    font-size: 0.82rem;
    white-space: nowrap;
    margin-top: 2px;
}

.price-add { color: var(--color-success); font-weight: 550; }
.price-sub { color: var(--color-danger); font-weight: 550; }

/* --- Modifiers Toolbar (search + filters + expand) --- */
.modifiers-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 0 0 16px;
}

.modifiers-filter-chips {
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: #FFFCF4;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-muted);
    cursor: pointer;
    transition: all var(--transition);
}

.filter-chip:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.filter-chip-active,
.filter-chip-active:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #FFFCF4;
}

.filter-chip-count {
    font-size: 0.68rem;
    font-weight: 600;
    background: rgba(35,31,32,0.06);
    border-radius: 999px;
    padding: 1px 7px;
}

.filter-chip-active .filter-chip-count {
    background: rgba(255,255,255,0.22);
}

.filter-chip-attention:not(.filter-chip-active) {
    border-color: #D9BE96;
    background: #FBF3E6;
    color: #623216;
}

.modifiers-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

/* --- Modifiers page: menu switcher + sections --- */
.modifiers-menu-switcher {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.modifiers-menu-switcher .menu-store-card {
    display: block;
    padding: 14px 16px;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    border: 2px solid var(--border-color);
    background: var(--color-surface, #FFFCF4);
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.modifiers-menu-switcher .menu-store-card:hover {
    border-color: var(--color-primary, #825D2D);
}

.modifiers-menu-switcher .menu-store-card-active {
    border-color: var(--color-primary, #825D2D);
    background: rgba(130,93,45, 0.06);
    box-shadow: 0 1px 4px rgba(130,93,45, 0.12);
}

.modifiers-menu-switcher .menu-store-card-all {
    opacity: 0.95;
}

.modifiers-menu-switcher .menu-store-card-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.modifiers-menu-switcher .menu-store-card-main {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.modifiers-menu-switcher .menu-store-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(35,31,32, 0.05);
    flex-shrink: 0;
}

.modifiers-menu-switcher .menu-store-card-icon i {
    width: 16px;
    height: 16px;
}

.modifiers-menu-switcher .menu-store-card-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.modifiers-menu-switcher .menu-store-card-hint {
    font-size: 0.76rem;
    color: var(--color-muted);
    margin-top: 2px;
}

.modifiers-menu-switcher .menu-store-card-count {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(35,31,32, 0.06);
    color: var(--color-muted);
}

.modifiers-menu-tabs {
    margin-bottom: 16px;
}

.modifiers-menu-section {
    margin-bottom: 28px;
}

.modifiers-menu-section-header {
    margin-bottom: 12px;
}

.modifiers-menu-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.modifiers-menu-section-title i {
    width: 18px;
    height: 18px;
    color: var(--color-muted);
}

.modifiers-menu-section-title h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
}

.modifiers-menu-section-hint {
    margin: 6px 0 0;
    font-size: 0.82rem;
}

/* --- Accordion header count pills --- */
.accordion-header-stats {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.count-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: #F7F5E9;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-muted);
    white-space: nowrap;
}

.count-pill i, .count-pill svg {
    width: 12px;
    height: 12px;
}

.count-pill-products {
    border-color: color-mix(in srgb, var(--color-primary) 30%, var(--border-color) 70%);
    background: color-mix(in srgb, var(--color-primary) 6%, #FFFCF4 94%);
    color: var(--color-primary);
}

.count-pill-warning {
    border-color: #D9BE96;
    background: #FBF3E6;
    color: #623216;
}

/* --- Linked products section inside the accordion --- */
.modifier-no-options {
    padding: 14px 20px 14px 48px;
    font-size: 0.82rem;
    margin: 0;
}

.modifier-products-section {
    border-top: 1px dashed var(--border-color);
    background: #F7F5E9;
    padding: 14px 20px 14px 48px;
}

.modifier-products-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 10px;
}

.modifier-products-title i, .modifier-products-title svg {
    width: 13px;
    height: 13px;
}

.modifier-products-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.product-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: #FFFCF4;
    font-size: 0.78rem;
    font-weight: 500;
    color: inherit;
    text-decoration: none;
    transition: all var(--transition);
}

.product-chip:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(35,31,32, 0.08);
}

.product-chip-inactive {
    opacity: 0.55;
}

.product-chip-inactive:hover { opacity: 0.8; }

.product-chip-channel {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(35,31,32,0.06);
    border-radius: 999px;
    padding: 1px 7px;
    color: var(--color-muted);
}

.modifier-products-hint {
    font-size: 0.72rem;
    margin: 10px 0 0;
}

.modifier-products-empty {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #FBF3E6;
    border: 1px solid #D9BE96;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #623216;
}

.modifier-products-empty i, .modifier-products-empty svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

.modifier-products-empty a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

/* --- "Used by products" panel in the edit modal --- */
.modal-linked-products {
    border: 1px solid var(--border-color);
    background: #F7F5E9;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 20px;
}

/* --- Modifier Option Rows (modal form) --- */
.modifier-option-row {
    display: grid;
    gap: 12px;
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, #EDE3D3 30%);
    border-radius: 12px;
    background: linear-gradient(180deg, #FFFCF4 0%, #F7F5E9 100%);
    box-shadow: 0 4px 12px rgba(35,31,32, 0.04);
}

.modifier-option-row-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px 30px;
    align-items: center;
    gap: 10px;
}

#modifier-options {
    display: grid;
    gap: 8px;
}

.modifier-option-row-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.modifier-option-price-input {
    position: relative;
    width: 100%;
    flex-shrink: 0;
}

.modifier-option-prefix {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.82rem;
    color: var(--color-muted);
    pointer-events: none;
}

.modifier-option-price-input .form-input {
    padding-left: 32px;
    font-weight: 560;
}

.modifier-option-textarea {
    min-height: 74px;
    resize: vertical;
    padding-top: 11px;
    line-height: 1.45;
}

.modifier-option-textarea::placeholder {
    color: color-mix(in srgb, var(--color-muted) 80%, #FFFCF4 20%);
    opacity: 1;
}

.modifier-option-field {
    display: grid;
    gap: 6px;
}

.modifier-plus-toggle-field {
    align-content: end;
}

.modifier-plus-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-text);
    border: 1px solid color-mix(in srgb, var(--border-color) 75%, #EDE3D3 25%);
    background: #FFFCF4;
    border-radius: 10px;
    padding: 8px 10px;
}

.modifier-plus-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.modifier-option-field-label {
    font-size: 0.72rem;
    font-weight: 520;
    color: var(--color-muted);
    line-height: 1.2;
    letter-spacing: .01em;
}

.modifier-dietary-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.modifier-dietary-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: #FFFCF4;
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 520;
    line-height: 1;
    cursor: pointer;
    transition: all var(--transition);
}

.modifier-dietary-pill input[type="radio"] {
    display: none;
}

.modifier-dietary-pill span {
    display: inline-flex;
    padding: 6px 10px;
}

.modifier-dietary-pill:hover {
    border-color: var(--border-color);
    background: #F7F5E9;
}

.modifier-dietary-pill.is-active {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(35,31,32,0.04);
}

.modifier-option-short,
.modifier-option-desc {
    overflow-wrap: anywhere;
}

/* --- Modal --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(35,31,32,0.4);
    backdrop-filter: blur(4px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal {
    background: #FFFCF4;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalIn 0.2s ease;
}

.modal-lg {
    max-width: 640px;
}

.modal > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.modal-title {
    font-size: 1.05rem;
    font-weight: 650;
}

.modal-close {
    font-size: 1.4rem;
    color: var(--color-muted);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}
.modal-close:hover {
    background: rgba(35,31,32,0.04);
    color: var(--color-primary);
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    overscroll-behavior: contain;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

/* --- Empty State (refined) --- */
.empty-state-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: rgba(35,31,32,0.03);
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state-icon i {
    font-size: 1.6rem;
    color: var(--color-muted);
    opacity: 0.4;
    margin-bottom: 0;
}

.empty-state-title {
    font-size: 1rem;
    font-weight: 600;
    color: #3A3533;
    margin-bottom: 6px;
}

.empty-state-text {
    font-size: 0.85rem;
    color: var(--color-muted);
    max-width: 320px;
    margin: 0 auto;
    line-height: 1.5;
}

/* --- Badge Icons --- */
.badge-icon {
    width: 12px;
    height: 12px;
    vertical-align: -1px;
}

/* --- Detail Icons --- */
.detail-icon {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    margin-right: 2px;
    opacity: 0.5;
}

/* --- Card Title Icons --- */
.card-title i,
.card-title svg {
    width: 16px;
    height: 16px;
    vertical-align: -2px;
    margin-right: 4px;
    opacity: 0.5;
}

/* --- Order Timeline --- */
.order-timeline {
    display: flex;
    align-items: flex-start;
    gap: 0;
    position: relative;
    padding: 8px 0;
}

.timeline-step {
    flex: 1;
    text-align: center;
    position: relative;
}

.timeline-step::before {
    content: '';
    position: absolute;
    top: 10px;
    left: -50%;
    right: 50%;
    height: 2px;
    background: rgba(35,31,32,0.08);
}

.timeline-step:first-child::before {
    display: none;
}

.timeline-done::before {
    background: var(--color-success);
}

.timeline-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(35,31,32,0.06);
    margin: 0 auto 8px;
    position: relative;
    z-index: 1;
    border: 2px solid #FFFCF4;
    box-shadow: 0 0 0 2px rgba(35,31,32,0.06);
}

.timeline-done .timeline-dot {
    background: var(--color-success);
    box-shadow: 0 0 0 2px rgba(61,90,61,0.2);
}

.timeline-current .timeline-dot {
    box-shadow: 0 0 0 3px rgba(130,93,45,0.25);
    background: var(--color-accent);
}

.timeline-label {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-muted);
    letter-spacing: 0.01em;
}

.timeline-done .timeline-label {
    color: var(--color-success);
}

.timeline-current .timeline-label {
    color: var(--color-accent);
    font-weight: 600;
}

.timeline-cancelled .timeline-dot {
    background: rgba(35,31,32,0.06) !important;
    box-shadow: 0 0 0 2px rgba(35,31,32,0.06) !important;
}

.timeline-cancelled .timeline-label {
    color: var(--color-muted) !important;
}

.timeline-cancelled-step .timeline-dot {
    background: var(--color-danger) !important;
    box-shadow: 0 0 0 3px rgba(81,7,7,0.2) !important;
}

.timeline-cancelled-step .timeline-label {
    color: var(--color-danger) !important;
    font-weight: 600;
}

/* --- Order Items List --- */
.order-items-list {
    display: flex;
    flex-direction: column;
}

.order-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
}

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

.order-item-qty {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-muted);
    min-width: 30px;
}

.order-item-qty-control {
    display: flex;
    align-items: center;
    gap: 4px;
}

.qty-input {
    width: 56px;
    height: 34px;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    background: #FFFCF4;
}

.qty-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(130,93,45,0.1);
}

.order-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.order-item-name {
    font-size: 0.88rem;
    font-weight: 550;
    color: var(--color-primary);
    overflow-wrap: break-word;
    word-break: break-word;
}

.order-item-mods {
    font-size: 0.78rem;
    color: var(--color-muted);
}

/* Grouped modifier rows on the order detail Items card — one row per
   modifier group; each pick is its own chip so 2 proteins/dips scan fast. */
.order-item-mod-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

/* 2026-09-01: a coluna do rotulo era fixa em 82px, entao nome de grupo real
   ("Add: Whole Milk Quart") era espremido e quebrava em varias linhas. O
   rotulo agora ocupa a largura toda do container, com os valores logo abaixo:
   e o mesmo layout que o mobile ja usava, so que em qualquer largura. */
.order-item-mod-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 4px;
    font-size: 0.8rem;
    line-height: 1.4;
}

.order-item-mod-row-multi {
    padding-bottom: 2px;
}

.mod-row-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding-top: 0;
    color: var(--color-muted);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.mod-row-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #E3E0CF;
    color: #4A4441;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

.mod-row-values {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
}

.mod-value-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 3px 9px;
    border-radius: 6px;
    background: #EAE7D6;
    border: 1px solid #E3E0CF;
    color: #231F20;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.mod-value-chip-popular {
    background: #FBF3E6;
    border-color: #D9BE96;
    color: #623216;
}

.mod-qty-tag {
    flex-shrink: 0;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.mod-addon-price {
    flex-shrink: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #2C412C;
    font-size: 0.74rem;
}

.mod-popular-tag {
    flex-shrink: 0;
    background: #F2E4CE;
    border: 1px solid #825D2D;
    border-radius: 4px;
    padding: 0 4px;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ── Customer analytics dashboard ─────────────────────────────────── */
.analytics-funnel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px 16px;
}

.analytics-insights-card {
    margin-bottom: 16px;
}

.analytics-insights-list {
    max-height: 220px;
}

.analytics-insights-empty {
    margin: 0;
    padding: 14px 16px;
    font-size: 0.84rem;
}

.analytics-funnel-step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 14px;
    align-items: center;
}

.analytics-funnel-bar-wrap {
    grid-column: 1 / -1;
    height: 8px;
    background: #EAE7D6;
    border-radius: 999px;
    overflow: hidden;
}

.analytics-funnel-bar {
    height: 100%;
    background: linear-gradient(90deg, #825D2D, #825D2D);
    border-radius: 999px;
    min-width: 4px;
}

.analytics-funnel-meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.analytics-funnel-label {
    font-size: 0.84rem;
    font-weight: 550;
    color: #231F20;
}

.analytics-funnel-count {
    font-size: 0.84rem;
    font-weight: 700;
    color: #231F20;
    font-variant-numeric: tabular-nums;
}

.analytics-funnel-pct {
    font-size: 0.72rem;
    color: #6E6862;
    font-variant-numeric: tabular-nums;
}

.analytics-path {
    font-size: 0.78rem;
    word-break: break-all;
}

.analytics-abandon-list {
    max-height: 420px;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.analytics-abandon-card-wrap {
    position: relative;
}

.analytics-abandon-card {
    border: 1px solid #E3E0CF;
    border-radius: 8px;
    padding: 10px 12px;
    background: #F7F5E9;
}

a.analytics-abandon-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

a.analytics-abandon-card-link:hover {
    border-color: #C9A87C;
    box-shadow: 0 1px 4px rgba(130,93,45, 0.12);
    background: #FFFCF4;
}

.analytics-abandon-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    padding-right: 28px;
}

.analytics-abandon-when {
    margin-left: auto;
    font-size: 0.76rem;
    white-space: nowrap;
}

.analytics-abandon-delete-form {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    margin: 0;
}

.analytics-abandon-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #9B948D;
    cursor: pointer;
}

.analytics-abandon-delete-btn:hover {
    background: #F5E4E4;
    border-color: #E8CFCF;
    color: #3B0505;
}

.analytics-abandon-delete-btn i,
.analytics-abandon-delete-btn svg {
    width: 14px;
    height: 14px;
}

.analytics-abandon-items {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.analytics-abandon-foot {
    margin-top: 6px;
    font-size: 0.76rem;
}

.analytics-abandon-list-full {
    max-height: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
    padding: 12px;
}

.analytics-row-current td {
    background: rgba(130,93,45, 0.06);
}

.analytics-row-link:hover td {
    background: #F7F5E9;
}

.analytics-contact-cell {
    font-size: 0.82rem;
    line-height: 1.35;
    max-width: 200px;
}

.analytics-cart-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.analytics-cart-line {
    border: 1px solid #E3E0CF;
    border-radius: 8px;
    padding: 10px 12px;
    background: #FFFCF4;
}

.analytics-cart-line-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.analytics-cart-line-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.analytics-cart-line-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    font-size: 0.85rem;
    color: #6E6862;
}

.analytics-cart-line-price {
    font-weight: 600;
    color: #231F20;
}

.analytics-cart-type {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.analytics-cart-sublist {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 0.82rem;
    color: #3A3533;
}

.analytics-cart-sublist li + li {
    margin-top: 3px;
}

.analytics-cart-mods li {
    color: #4A4441;
}

.analytics-cart-note {
    margin: 8px 0 0;
    font-size: 0.8rem;
    line-height: 1.4;
}

.analytics-sessions-table .analytics-contact-cell {
    max-width: 220px;
}

.analytics-heatmap-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.analytics-heatmap-canvas {
    width: min(360px, 100%);
    height: auto;
    aspect-ratio: 9 / 16;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: #F7F5E9;
    box-shadow: var(--theme-shadow);
}

.analytics-heatmap-note {
    font-size: 0.8rem;
    text-align: center;
    max-width: 420px;
}

.analytics-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(61,90,61, 0.1);
    color: #2C412C;
    font-size: 0.82rem;
    font-weight: 600;
    margin-right: 8px;
}

.analytics-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3D5A3D;
    box-shadow: 0 0 0 0 rgba(61,90,61, 0.5);
    animation: analytics-live-pulse 2s infinite;
}

@keyframes analytics-live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(61,90,61, 0.45); }
    70% { box-shadow: 0 0 0 8px rgba(61,90,61, 0); }
    100% { box-shadow: 0 0 0 0 rgba(61,90,61, 0); }
}

.analytics-live-card {
    margin-bottom: 16px;
}

.analytics-live-updated {
    font-size: 0.78rem;
}

.analytics-live-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--color-border);
}

.analytics-live-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.analytics-live-stat strong {
    font-size: 1.35rem;
    line-height: 1.1;
}

.analytics-live-stat span {
    font-size: 0.78rem;
    color: var(--color-muted);
}

.analytics-live-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 0;
}

.analytics-live-panel {
    padding: 16px;
}

.analytics-live-panel + .analytics-live-panel {
    border-left: 1px solid var(--color-border);
}

.analytics-live-heading {
    margin: 0 0 10px;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
}

.analytics-live-visitors,
.analytics-live-feed {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 220px;
    overflow: auto;
}

.analytics-live-visitors li,
.analytics-live-feed li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    font-size: 0.84rem;
    line-height: 1.35;
}

.analytics-live-visitor {
    padding: 0;
}

.analytics-live-visitor-link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.analytics-live-visitor-link:hover {
    background: var(--color-surface-2, rgba(35,31,32, 0.04));
}

.analytics-live-visitor-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.analytics-live-visitor-head .analytics-live-feed-time {
    margin-left: auto;
}

.analytics-live-visitor-meta {
    font-size: 0.78rem;
}

.analytics-live-stage {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.analytics-live-stage-browse {
    background: rgba(110,104,98, 0.12);
    color: #6E6862;
}

.analytics-live-stage-cart {
    background: rgba(130,93,45, 0.15);
    color: #623216;
}

.analytics-live-stage-checkout {
    background: rgba(130,93,45, 0.12);
    color: #825D2D;
}

.analytics-live-stage-ordered {
    background: rgba(61,90,61, 0.12);
    color: #2C412C;
}

.analytics-live-feed-item {
    padding: 4px 0;
}

.analytics-live-feed-main {
    min-width: 0;
}

.analytics-live-feed-time {
    flex-shrink: 0;
    color: var(--color-muted);
    font-size: 0.76rem;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .analytics-live-grid {
        grid-template-columns: 1fr;
    }
    .analytics-live-panel + .analytics-live-panel {
        border-left: none;
        border-top: 1px solid var(--color-border);
    }
    .analytics-live-stats {
        grid-template-columns: 1fr;
    }
}

.detail-dl {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 8px 16px;
    margin: 0;
    font-size: 0.88rem;
}

.detail-dl dt {
    margin: 0;
    color: var(--color-muted);
    font-weight: 600;
}

.detail-dl dd {
    margin: 0;
}

.order-item-note {
    font-size: 0.78rem;
    color: #623216;
    display: flex;
    align-items: center;
    gap: 4px;
}

.order-item-note i {
    font-size: 0.72rem;
}

.order-item-price {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-primary);
    white-space: nowrap;
}

/* --- Detail Rows --- */
.detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-row-total {
    border-top: 1px solid var(--border-color);
    margin-top: 4px;
    padding-top: 12px;
    border-bottom: none;
}

.detail-label {
    font-size: 0.82rem;
    color: var(--color-muted);
    font-weight: 450;
}

.detail-value {
    font-size: 0.88rem;
    font-weight: 550;
    color: var(--color-primary);
}

.detail-row-total .detail-label,
.detail-row-total .detail-value {
    font-size: 0.95rem;
    font-weight: 650;
}

/* --- Customer Cell (table) --- */
.customer-cell {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.customer-name {
    font-weight: 550;
    font-size: 0.88rem;
}

.customer-phone {
    font-size: 0.78rem;
    color: var(--color-muted);
}

/* --- Order Number (table) --- */
.order-number {
    font-weight: 600;
    color: var(--color-accent);
    white-space: nowrap;
}

/* --- AF badge + status badge same width in status cell --- */
.status-cell-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.status-cell-stack > * {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
}

.order-date {
    font-size: 0.78rem;
}

/* --- Product Picker --- */
.product-picker-list {
    overflow-y: auto;
    max-height: calc(60vh - 70px);
}

.picker-category-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    padding: 12px 24px 6px;
    background: #F7F5E9;
    position: sticky;
    top: 0;
    z-index: 1;
}

.picker-product {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    cursor: pointer;
    transition: background var(--transition);
    border-bottom: 1px solid var(--border-color);
}

.picker-product:hover {
    background: rgba(130,93,45,0.03);
}

.picker-product-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.picker-product-name {
    font-size: 0.88rem;
    font-weight: 500;
}

.picker-product-price {
    font-size: 0.82rem;
    color: var(--color-muted);
    font-weight: 500;
}

/* --- Order Summary --- */
/* A classe carrega o ESTILO das linhas do resumo (ver mais abaixo), e o
   detalhe do pedido reusa ela. O grude no scroll, porem, so faz sentido no
   formulario de criacao, onde o resumo e a ULTIMA coisa da coluna lateral.
   No detalhe existe o card Order Info depois dele, e o resumo grudado passava
   por cima (visto em 2026-09-04). Por isso o sticky mora numa classe a parte,
   pedida explicitamente por quem quer. */
.order-summary-card.is-sticky {
    position: sticky;
    top: calc(var(--topbar-height) + 80px);
}

.summary-items-list {
    margin-bottom: 12px;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.82rem;
    color: #4A4441;
}

.summary-totals {
    border-top: 1px solid var(--border-color);
    padding-top: 8px;
}

/* --- Catering Detail Grid --- */
.catering-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.catering-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.catering-detail-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(130,93,45,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-accent);
}

.catering-detail-icon i {
    font-size: 1rem;
}

.catering-detail-item .detail-label {
    display: block;
    font-size: 0.72rem;
    margin-bottom: 1px;
}

.catering-detail-item .detail-value {
    display: block;
    font-size: 0.88rem;
}

/* --- Button icon danger variant --- */
.btn-icon-danger {
    color: var(--color-muted);
    transition: color var(--transition);
}

.btn-icon-danger:hover {
    color: var(--color-danger);
}

/* --- Utility Classes --- */
.text-muted { color: var(--color-muted); }
.font-medium { font-weight: 500; }
.font-mono { font-family: var(--font-mono); font-size: 0.85em; }

/* --- Responsive --- */
@media (max-width: 1024px) {
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-row-6 {
        grid-template-columns: repeat(2, 1fr);
    }

    .topbar-search { display: none; }

    .form-grid {
        grid-template-columns: 1fr 300px;
    }

    .settings-grid-2col {
        grid-template-columns: 1fr;
    }

    .settings-pw-grid {
        grid-template-columns: 1fr 1fr;
    }

    .calendar-layout {
        grid-template-columns: 1fr;
    }

    .dash-row-2,
    .dash-row-4 {
        grid-template-columns: 1fr;
    }

    .dash-quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Always: keep main content from causing body-level scroll ---
   IMPORTANT: use overflow-x: clip (not hidden). hidden creates a new
   scrolling context that breaks position: sticky on descendants like
   .form-sticky-header and .topbar. clip behaves identically for the
   "block stray content" use case but doesn't establish a scroll
   container, so sticky keeps working. */
.app-main {
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
}
.app-content {
    max-width: 100%;
    overflow-x: clip;
}

@media (max-width: 768px) {
    /* --- GLOBAL: prevent horizontal scroll (clip preserves sticky) --- */
    html, body {
        overflow-x: clip;
        max-width: 100vw;
    }

    .app-main {
        margin-left: 0;
    }

    .app-content {
        padding: 16px;
    }

    /* --- Live filter row: stack and full-width on mobile --- */
    .filters-bar #menu-filters-count {
        display: block;
        text-align: right;
        margin-top: -4px;
    }

    /* --- Topbar fits in narrow widths --- */
    .topbar {
        padding: 0 12px;
    }
    .topbar-left {
        gap: 8px;
        min-width: 0;
        flex: 1;
    }
    .topbar-right {
        gap: 4px;
    }
    .topbar-profile-container > div {
        font-size: 0.75rem;
    }
    .topbar-icon-btn {
        width: 34px;
        height: 34px;
    }

    /* --- Action column in product table can host 2 buttons --- */
    .product-cell-name,
    .product-cell-desc {
        max-width: 38vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* --- Sidebar drawer --- */
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-close {
        display: flex;
    }

    .sidebar-overlay.open {
        display: block;
    }

    .topbar-menu-btn {
        display: flex;
    }

    /* --- Stats --- */
    .stats-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .stat-card {
        width: 100%;
    }

    .stat-value {
        font-size: 1.25rem;
    }

    .stat-label {
        font-size: 0.72rem;
    }

    .stat-icon {
        width: 40px;
        height: 40px;
    }

    .stat-icon i,
    .stat-icon svg {
        width: 18px;
        height: 18px;
    }

    /* --- Tables --- */
    .table th,
    .table td {
        padding: 10px 12px;
        font-size: 0.78rem;
    }

    .table-responsive {
        margin: 0 -4px;
    }

    .col-hide-sm {
        display: none;
    }

    .order-number {
        font-size: 0.75rem;
        letter-spacing: 0;
    }

    .status-cell-stack > .badge {
        font-size: 0.68rem;
    }

    /* --- Page Header --- */
    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .page-header-left {
        flex-wrap: wrap;
    }

    .page-header .btn,
    .page-header-right .btn {
        width: 100%;
        justify-content: center;
    }

    .page-heading {
        font-size: 1.25rem;
    }

    /* --- Cards --- */
    .card {
        border-radius: 8px;
    }

    .card-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* --- Forms --- */
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .form-col-2 {
        flex: auto;
        width: 100%;
    }

    .form-sticky-header {
        position: relative;
        top: auto;
        flex-wrap: wrap;
    }

    .form-sticky-actions {
        width: 100%;
        justify-content: flex-end;
    }

    /* --- Filters --- */
    .filters-row {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-item-grow {
        min-width: auto;
    }

    .filter-select {
        min-width: auto;
        width: 100%;
    }

    .filters-bar .btn {
        width: 100%;
        justify-content: center;
    }

    /* --- Modals fullscreen --- */
    .modal-overlay {
        align-items: flex-start;
        padding: 0;
    }

    .modal {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        min-height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        overflow: hidden;
    }

    .modal-lg {
        max-width: 100%;
    }

    /* --- Settings grids --- */
    .settings-pw-grid {
        grid-template-columns: 1fr;
    }

    .settings-grid-2col {
        grid-template-columns: 1fr;
    }

    .settings-profile-fields {
        grid-template-columns: 1fr;
    }

    .mfa-method-grid {
        grid-template-columns: 1fr;
    }

    /* --- Sticky header wraps actions --- */
    .form-sticky-header {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .form-sticky-actions {
        flex-wrap: wrap;
        width: auto;
    }

    /* --- Order detail column layout (clip — keeps sticky alive) --- */
    .form-column-main,
    .form-column-side {
        overflow-x: clip;
    }

    /* Calendar --- */
    .calendar-grid {
        gap: 4px;
    }

    .calendar-cell {
        padding: 4px;
        aspect-ratio: auto;
        min-height: 40px;
    }

    .calendar-day-num {
        font-size: 0.75rem;
    }

    .closure-indicator {
        font-size: 0.55rem;
        padding: 1px 3px;
    }

    .calendar-header-day {
        font-size: 0.65rem;
    }

    /* --- Users: hide less-important columns --- */
    .users-hide-mobile {
        display: none;
    }

    /* --- Categories --- */
    .category-grid {
        grid-template-columns: 1fr;
    }

    /* --- Accordion (Modifiers) --- */
    .accordion-header {
        padding: 14px 16px;
        flex-wrap: wrap;
    }

    .accordion-header-stats {
        order: 3;
        width: 100%;
        padding-left: 28px;
    }

    .modifiers-toolbar-actions {
        margin-left: 0;
    }

    .modifier-products-section,
    .modifier-no-options {
        padding-left: 16px;
    }

    .modifier-option-item {
        padding-left: 36px;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .modifier-option-price {
        margin-top: 0;
    }

    .modifier-option-row-top {
        grid-template-columns: minmax(0, 1fr) 98px 28px;
        align-items: center;
    }

    .modifier-option-row-grid {
        grid-template-columns: 1fr;
    }

    /* --- Order Timeline --- */
    .order-timeline {
        flex-wrap: wrap;
        gap: 4px;
    }

    .timeline-step {
        min-width: 60px;
    }

    .timeline-label {
        font-size: 0.68rem;
    }

    /* --- Order Items --- */
    .order-item {
        padding: 12px 16px;
        gap: 10px;
    }

    /* --- Catering Detail Grid --- */
    .catering-detail-grid {
        grid-template-columns: 1fr;
    }

    /* --- Order detail grid --- */
    .order-detail-grid {
        grid-template-columns: 1fr;
    }

    /* --- Dashboard mobile --- */
    .stats-row-6 {
        grid-template-columns: 1fr;
    }

    .dash-header {
        flex-direction: column;
        align-items: stretch;
    }

    .dash-header .btn {
        width: 100%;
        justify-content: center;
    }

    .dash-greeting {
        font-size: 1.2rem;
    }

    .dash-meta {
        flex-wrap: wrap;
        gap: 8px;
    }

    .dash-row-2,
    .dash-row-4 {
        grid-template-columns: 1fr;
    }

    .dash-quick-actions {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .dash-action-card {
        padding: 12px 14px;
        font-size: 0.82rem;
    }

    .dash-hide-mobile {
        display: none;
    }

    .dash-chart-card {
        min-height: 240px;
    }
}

/* --- Extra Small (max-width: 480px) --- */
@media (max-width: 480px) {
    .col-hide-xs {
        display: none;
    }

    .app-content {
        padding: 12px;
    }

    .topbar-title {
        font-size: 1rem;
    }

    .stat-value {
        font-size: 1.1rem;
    }

    .stats-row {
        gap: 8px;
    }

    .stat-card {
        padding: 14px;
    }

    .card-body {
        padding: 16px;
    }

    .card-header {
        padding: 14px 16px;
    }

    .page-heading {
        font-size: 1.1rem;
    }

    .badge {
        font-size: 0.65rem;
        padding: 2px 6px;
    }

    .btn {
        padding: 10px 16px;
        font-size: 0.82rem;
    }

    .btn-sm {
        padding: 7px 12px;
        font-size: 0.75rem;
    }

    .form-input,
    .filter-input {
        font-size: 0.85rem;
    }

    .modal-body {
        padding: 16px;
    }

    .modal-footer {
        padding: 12px 16px;
        flex-direction: column;
    }

    .modal-footer .btn {
        width: 100%;
    }

    .dash-greeting {
        font-size: 1.1rem;
    }

    .dash-quick-actions {
        grid-template-columns: 1fr 1fr;
    }

    .dash-action-card {
        flex-direction: column;
        text-align: center;
        padding: 12px 8px;
        font-size: 0.78rem;
        gap: 6px;
    }
}



/* ============================================================
   PROFILE DROPDOWN (Topbar)
   ============================================================ */

/* ============================================================
   STORE SCOPE PICKER (topbar)
   ============================================================ */
.store-picker-container {
    position: relative;
    margin-right: 12px;
}

.store-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 10px;
    background: rgba(35,31,32,0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--color-primary);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    transition: all var(--transition);
    max-width: 220px;
}

.store-picker:hover {
    border-color: var(--border-strong, #CFCBB8);
    background: rgba(130,93,45,0.06);
}

.store-picker-static {
    cursor: default;
}

.store-picker i,
.store-picker svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: none;
    color: var(--color-icon);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
}

.store-picker:not(.store-picker-static):hover i,
.store-picker:not(.store-picker-static):hover svg {
    color: var(--color-icon-hover);
}

.store-picker-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.store-picker-caret {
    margin-left: auto;
    opacity: 0.7;
}

.store-picker[aria-expanded="true"] .store-picker-caret {
    transform: rotate(180deg);
}

/* Reuses the profile dropdown shell, so both menus feel identical. */
/* Anchored to the right edge of the picker. It used to open leftwards, which
   was fine while the language switch sat between it and the avatar; with that
   gone the picker sits near the window edge and a left anchored panel spilled
   past it. */
.store-dropdown {
    width: 268px;
    max-width: calc(100vw - 24px);
    right: 0;
    left: auto;
    padding-bottom: 6px;
}

.store-dropdown-title {
    padding: 12px 16px 8px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
    background: #F7F5E9;
    border-bottom: 1px solid var(--border-color);
}

.store-dropdown-list {
    list-style: none;
    padding: 6px;
    margin: 0;
    max-height: 320px;
    overflow-y: auto;
}

.store-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    background: none;
    border: none;
    font: inherit;
    font-size: 0.85rem;
    color: var(--color-primary);
    text-align: left;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.store-dropdown-item:hover {
    background: rgba(130,93,45,0.08);
}

.store-dropdown-item.is-active {
    background: rgba(130,93,45,0.1);
    font-weight: 600;
}

.store-dropdown-item i,
.store-dropdown-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: none;
    color: var(--color-icon);
}

.store-dropdown-item > span {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.store-dropdown-item small {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--color-muted);
}

.store-dropdown-check {
    margin-left: auto;
    color: var(--color-accent) !important;
}

@media (max-width: 640px) {
    .store-picker-label { display: none; }
    .store-picker { max-width: none; padding: 0 8px; }
}

.topbar-profile-container {
    position: relative;
    margin-left: 12px;
}

/* O gatilho que abre o menu */
.topbar-profile-trigger {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 50%;
    transition: all var(--transition);
}
.topbar-profile-trigger:hover {
    box-shadow: 0 0 0 4px rgba(35,31,32,0.05);
}

/* O container do dropdown */
.profile-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 260px;
    background: #FFFCF4;
    border-radius: 14px; /* Apple style radius */
    box-shadow: 0 10px 30px rgba(35,31,32,0.1);
    border: 1px solid var(--border-color);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    overflow: hidden;
}

/* Estado ativo do dropdown */
.profile-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Cabeçalho do Dropdown (Info do Usuário) */
.profile-dropdown-header {
    padding: 16px;
    background: #F7F5E9;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.profile-dropdown-header .user-avatar {
    width: 60px;
    height: 60px;
    font-size: 1.25rem;
    margin-bottom: 10px;
}
.profile-dropdown-header img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
    border: 2px solid #FFFCF4;
    box-shadow: 0 2px 5px rgba(35,31,32,0.1);
}

.profile-dropdown-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-primary);
    margin-bottom: 2px;
}
.profile-dropdown-email {
    font-size: 0.8rem;
    color: var(--color-muted);
    margin-bottom: 8px;
}

/* Role badges */
.role-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.role-superadmin { background: #231F20; color: #FFFCF4; }
.role-owner { background: #510707; color: #FFFCF4; }
.role-admin { background: #623216; color: #FFFCF4; }
.role-manager { background: #825D2D; color: #FFFCF4; }
.role-staff { background: #E3E0CF; color: #3A3533; }
.role-kitchen { background: #C9A87C; color: #231F20; }
.role-demo { background: #E4EBE0; color: #2C412C; border: 1px solid #A8BCA8; }

/* Lista de Links do Menu */
.profile-dropdown-list {
    list-style: none;
    padding: 6px;
    margin: 0;
}

.profile-dropdown-item a, 
.profile-dropdown-item button {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    color: #3A3533;
    font-size: 0.85rem;
    text-decoration: none;
    border-radius: 8px;
    transition: background var(--transition);
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
}

.profile-dropdown-item a:hover, 
.profile-dropdown-item button:hover {
    background: #EAE7D6;
}

.profile-dropdown-item i, 
.profile-dropdown-item svg {
    width: 16px;
    height: 16px;
    margin-right: 12px;
    color: var(--color-muted);
}

.profile-dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 6px 0;
}

/* Item de Logout (Vermelho) */
.profile-dropdown-item-logout a,
.profile-dropdown-item-logout button {
    color: var(--color-danger);
}
.profile-dropdown-item-logout i,
.profile-dropdown-item-logout svg {
    color: var(--color-danger);
}
.profile-dropdown-item-logout a:hover,
.profile-dropdown-item-logout button:hover {
    background: rgba(81,7,7, 0.05);
}

/* ============================================================
   AVATAR PREVIEW (User Form)
   ============================================================ */
.avatar-preview {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    background: #EAE7D6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--color-muted);
}

.avatar-placeholder i,
.avatar-placeholder svg {
    width: 36px;
    height: 36px;
    opacity: 0.4;
}

/* ============================================================
   CLOSURE LIST (Calendar)
   ============================================================ */
.closure-list {
    display: flex;
    flex-direction: column;
}

.closure-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
}

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

.closure-date-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 44px;
}

.closure-day {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
}

.closure-month {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-muted);
}

.closure-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.closure-reason {
    font-size: 0.88rem;
    font-weight: 550;
}

.closure-meta {
    font-size: 0.78rem;
    color: var(--color-muted);
}

.closure-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ============================================================
   CALENDAR LAYOUT (two-column)
   ============================================================ */
.calendar-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    align-items: start;
}

/* ============================================================
   TABLE RESPONSIVE
   ============================================================ */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   SETTINGS GRIDS (named classes replace inline styles)
   ============================================================ */
.settings-profile-fields {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.settings-pw-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.settings-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* ============================================================
   MFA METHOD SELECTOR
   ============================================================ */
.mfa-method-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.mfa-method-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    background: #F7F5E9;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition);
    text-align: center;
}

.mfa-method-option input[type="radio"] {
    display: none;
}

.mfa-method-option:hover {
    border-color: var(--border-color);
}

.mfa-method-option.active {
    border-color: var(--color-accent);
    background: rgba(130,93,45,0.04);
}

.mfa-method-option i,
.mfa-method-option svg {
    width: 24px;
    height: 24px;
    color: var(--color-muted);
}

.mfa-method-option.active i,
.mfa-method-option.active svg {
    color: var(--color-accent);
}

.mfa-method-label {
    font-weight: 600;
    font-size: 0.88rem;
}

.mfa-method-desc {
    font-size: 0.75rem;
    color: var(--color-muted);
}

/* ============================================================
   UTILITIES
   ============================================================ */
/* --- Reports --- */
.stats-row-4 {
    grid-template-columns: repeat(4, 1fr);
}
.report-row-2 {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.report-trend {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 6px;
    vertical-align: middle;
}
.report-trend svg { width: 14px; height: 14px; }
.report-trend-up { color: var(--color-success); }
.report-trend-down { color: var(--color-danger); }
.stat-icon-muted { background: rgba(35,31,32,0.04); color: var(--color-muted); }
.filters-bar {
    padding: 16px 20px;
    margin-bottom: 20px;
}
.filters-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.filter-select {
    min-width: 140px;
}

@media (max-width: 1024px) {
    .report-row-2 { grid-template-columns: 1fr 1fr; }
    .stats-row-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .report-row-2 { grid-template-columns: 1fr; }
    .stats-row-4 { grid-template-columns: 1fr 1fr; }
    .filters-row { flex-direction: column; align-items: stretch; }
}
@media (max-width: 480px) {
    .stats-row-4 { grid-template-columns: 1fr; }
}

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 20px; }
.mb-5 { margin-bottom: 32px; }
.mt-1 { margin-top: 4px; }
.mt-3 { margin-top: 12px; }
.text-center { text-align: center; }
.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.text-primary { color: var(--color-primary); }
.py-4 { padding-top: 20px; padding-bottom: 20px; }
.form-col-2 { flex: 1; min-width: 0; }
.form-divider { border: none; border-top: 1px solid var(--border-color); margin: 16px 0; }
.form-hint { font-size: 0.82rem; color: var(--color-muted); }
.form-textarea { min-height: 80px; resize: vertical; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 16px; border-top: 1px solid var(--border-color); }
.form-label-link {
    float: right;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-accent, #825D2D);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    transition: color var(--transition);
}
.form-label-link:hover { color: #623216; text-decoration: underline; }

/* ============================================================
   Additions for Bundles / Gift Cards / Catering modules
   ============================================================ */

/* --- Input Icon Wrapper (currency prefix etc.) --- */
.input-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.input-icon-wrapper .form-input {
    padding-left: 28px;
}
.input-icon-left {
    position: absolute;
    left: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-muted);
    pointer-events: none;
    z-index: 1;
    line-height: 1;
}

/* --- Toggle Row (label + toggle side-by-side) --- */
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}
.toggle-row + .toggle-row {
    border-top: 1px solid var(--border-color);
}
.toggle-row-label {
    font-size: 0.88rem;
    font-weight: 500;
    color: #3A3533;
}

/* --- Image Upload Preview (bundles / products) --- */
.image-upload-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius);
    background: #F7F5E9;
    overflow: hidden;
    transition: all var(--transition);
}
.image-upload-preview:hover {
    border-color: var(--border-color);
}
.image-upload-preview img {
    width: 100%;
    max-height: 280px;
    object-fit: cover;
    display: block;
    border-radius: var(--radius);
}

/* --- Form Help text --- */
.form-help {
    display: block;
    font-size: 0.75rem;
    color: var(--color-muted);
    margin-top: 4px;
    line-height: 1.45;
}

/* --- Table Image Cell --- */
.table-img-cell {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.table-img-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.table-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EAE7D6;
    color: #CFCBB8;
}

/* --- Bundle Item Card (inside form) --- */
.bundle-item-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: #FFFCF4;
    transition: box-shadow var(--transition);
}
.bundle-item-card:hover {
    box-shadow: 0 2px 8px rgba(35,31,32,0.04);
}
.bundle-item-qty {
    width: 64px;
    flex-shrink: 0;
}
.bundle-item-qty .form-input {
    text-align: center;
    padding: 4px 8px;
    height: 36px;
    font-weight: 600;
}
.bundle-item-name {
    flex: 1;
    min-width: 0;
    font-weight: 550;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bundle-item-swap {
    width: 160px;
    flex-shrink: 0;
}
.bundle-item-swap select {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    background: #FFFCF4;
    color: var(--color-primary);
    cursor: pointer;
    appearance: auto;
}
.bundle-item-swap select:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.bundle-item-actions {
    flex-shrink: 0;
}

/* --- Summary Items (Quote/Order) --- */
.summary-items-list {
    font-size: 0.85rem;
    margin-bottom: 16px;
}
.summary-line {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    gap: 12px;
}
.summary-totals {
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
}

/* --- Product Picker Modal --- */
.product-picker-list {
    overflow-y: auto;
    max-height: 50vh;
}
.picker-category-title {
    padding: 8px 24px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
    background: #F7F5E9;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1;
}
.picker-product {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    cursor: pointer;
    transition: background var(--transition);
    border-bottom: 1px solid var(--border-color);
}
.picker-product:hover {
    background: rgba(35,31,32,0.02);
}
.picker-product-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.picker-product-name {
    font-weight: 500;
    font-size: 0.88rem;
}
.picker-product-price {
    font-size: 0.78rem;
    color: var(--color-muted);
}

/* --- Order Item Row (Catering / Order create) --- */
.order-items-list { list-style: none; }
.order-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-color);
}
.order-item:last-child { border-bottom: none; }
.order-item-qty-control { width: 64px; flex-shrink: 0; }
.qty-input {
    width: 100%;
    height: 34px;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.88rem;
}
.order-item-info { flex: 1; min-width: 0; }
.order-item-name { font-weight: 550; font-size: 0.88rem; display: block; }
.order-item-mods { font-size: 0.78rem; color: var(--color-muted); }
.order-item-price { font-weight: 600; font-size: 0.88rem; white-space: nowrap; }

/* --- Detail Rows (order detail / giftcard detail) --- */
.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.88rem;
}
.detail-row-total {
    /* 2026-09-01: era 2px na cor primaria, o que virava uma barra escura
       grossa cortando o resumo. Uma linha fina na cor da borda separa igual
       e nao rouba a atencao do numero. */
    margin-top: 8px;
    padding-top: 10px;
    font-weight: 700;
    font-size: 1rem;
}
.detail-label { color: var(--color-muted); }
.detail-value { font-weight: 600; }

/* --- Modal --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(35,31,32,0.45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    backdrop-filter: blur(2px);
}
.modal {
    background: #FFFCF4;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(35,31,32,0.2);
    width: 100%;
    max-width: 520px;
    overflow: hidden;
    animation: modalIn 0.2s ease;
}
.modal-lg { max-width: 640px; }
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-color);
}
.modal-title {
    font-size: 1rem;
    font-weight: 650;
}
.modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.3rem;
    color: var(--color-muted);
    transition: all var(--transition);
}
.modal-close:hover { background: rgba(35,31,32,0.06); color: var(--color-primary); }
.modal-body { padding: 24px; overflow-y: auto; }
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 24px;
    border-top: 1px solid var(--border-color);
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- Searchable Select Dropdown --- */
.searchable-select {
    position: relative;
}
.searchable-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: #FFFCF4;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition);
}
.searchable-select-trigger:hover {
    border-color: var(--border-color);
}
.searchable-select-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #FFFCF4;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    animation: modalIn 0.15s ease;
    overflow: hidden;
}
.searchable-select-search {
    position: relative;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
}
.searchable-select-search input {
    width: 100%;
    height: 34px;
    padding: 0 12px 0 32px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    outline: none;
    transition: border-color var(--transition);
}
.searchable-select-search input:focus {
    border-color: var(--color-primary);
}
.searchable-select-options {
    max-height: 240px;
    overflow-y: auto;
}
.searchable-select-option {
    padding: 10px 14px;
    cursor: pointer;
    transition: background var(--transition);
    border-bottom: 1px solid var(--border-color);
}
.searchable-select-option:last-child { border-bottom: none; }
.searchable-select-option:hover {
    background: rgba(35,31,32,0.03);
}

/* --- Segmented Tabs --- */
.tabs-nav {
    display: inline-flex;
    background: rgba(35,31,32, 0.04);
    padding: 4px;
    border-radius: 8px;
    gap: 4px;
}

.tab-btn {
    background: transparent;
    border: none;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-light);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-btn:hover {
    color: var(--color-text);
}

.tab-btn.active {
    background: #FFFCF4;
    color: var(--color-text);
    box-shadow: 0 1px 3px rgba(35,31,32,0.1);
    font-weight: 600;
}

/* --- Linked Modifier List (Product Form) --- */
.product-modifier-linked-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}
.product-modifier-linked-item {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: #FFFCF4;
    overflow: hidden;
}
.product-modifier-linked-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: #F7F5E9;
}
.product-modifier-linked-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.product-modifier-linked-options {
    border-top: 1px solid var(--border-color);
    padding: 8px 14px;
    font-size: 0.82rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.product-modifier-linked-option {
    display: flex;
    justify-content: space-between;
    color: #3A3533;
}
.product-modifier-linked-info--clickable {
    cursor: pointer;
}
.product-modifier-linked-info--clickable:hover strong {
    color: var(--color-primary, #825D2D);
}
.product-modifier-linked-option--clickable {
    cursor: pointer;
    border-radius: 4px;
    padding: 2px 4px;
    margin: -2px -4px;
}
.product-modifier-linked-option--clickable:hover {
    background: rgba(35,31,32, 0.04);
}
.product-modifier-linked-option--clickable:focus-visible,
.product-modifier-linked-info--clickable:focus-visible {
    outline: 2px solid var(--color-primary, #825D2D);
    outline-offset: 2px;
}

.product-square-sync-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.product-square-sync-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.product-square-sync-group-card {
    min-width: 0;
}

@media (max-width: 900px) {
    .product-square-sync-grid,
    .product-square-sync-groups {
        grid-template-columns: 1fr;
    }
}

/* Sortable JS */
.sortable-ghost {
    opacity: 0.4;
    background-color: #F7F5E9;
    border: 1px dashed var(--c-border);
}

/* ============================================================
   Customer support detail layout
   ============================================================ */
.cs-detail {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-top: 16px;
}
.cs-detail > aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.cs-conversation {
    padding: 0;
}
.cs-conversation-header {
    padding: 18px 22px;
    border-bottom: 1px solid #E3E0CF;
}
.cs-conversation-list {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cs-msg {
    border: 1px solid #E3E0CF;
    border-radius: 12px;
    padding: 12px 16px;
    background: #F7F5E9;
    max-width: 82%;
    align-self: flex-start;
}
.cs-msg.is-staff {
    background: rgba(35,31,32, 0.06);
    border-color: rgba(35,31,32, 0.18);
    align-self: flex-end;
}
.cs-msg.is-internal {
    background: #F2E4CE;
    border-color: #C9A87C;
}
.cs-msg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
    gap: 8px;
    flex-wrap: wrap;
}
.cs-msg-header strong {
    color: #231F20;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.cs-msg-header time {
    color: #6E6862;
}
.cs-msg-body {
    /* nl2br() already renders the breaks; pre-wrap on top doubled every one */
    white-space: normal;
    line-height: 1.55;
    color: #231F20;
    font-size: 14px;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.cs-reply-form {
    border-top: 1px solid #E3E0CF;
    padding: 18px 22px;
}
.cs-reply-textarea {
    width: 100%;
    border: 1px solid #CFCBB8;
    border-radius: 10px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
}
.cs-reply-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    flex-wrap: wrap;
    gap: 10px;
}
.cs-side-card {
    padding: 18px 20px;
}
.cs-side-card h4 {
    margin: 0 0 10px;
    font-size: 14px;
    color: #231F20;
}
.cs-inline-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.cs-inline-form select {
    flex: 1 1 160px;
    min-width: 0;
    border: 1px solid #CFCBB8;
    border-radius: 8px;
    padding: 8px 10px;
}

@media (max-width: 900px) {
    .cs-detail {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .cs-conversation-header,
    .cs-conversation-list,
    .cs-reply-form,
    .cs-side-card {
        padding: 14px 16px;
    }
    .cs-msg {
        padding: 12px 14px;
    }
    .cs-msg-header {
        font-size: 12px;
    }
    .cs-reply-actions .btn {
        width: 100%;
    }
    .cs-inline-form .btn {
        width: 100%;
    }
}

/* ==================================================================== */
/* === Manual Order Builder (/orders/create) ========================== */
/* ==================================================================== */

/* Wider picker modal */
.modal-xl {
    max-width: 1080px;
    width: 100%;
    height: 88vh;
    max-height: 88vh;
}

/* Picker layout */
.manual-picker {
    display: flex;
    flex-direction: column;
}
.manual-picker-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.manual-picker-search {
    flex: 1;
    min-height: 38px;
}
.manual-picker-channel {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    background: rgba(35,31,32,0.04);
    padding: 4px 10px;
    border-radius: 999px;
}

/* "N in order" pill shown next to the modal title once items have been
   added — keeps the admin oriented while they're still picking. */
.picker-count-badge {
    margin-left: 10px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--color-accent);
    background: rgba(130,93,45,0.1);
    padding: 4px 10px;
    border-radius: 999px;
}

/* Brief "Added: <name>" toast that fades in at the top of the picker
   after each item is added. */
.picker-toast {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translate(-50%, -10px);
    background: #231F20;
    color: #FFFCF4;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 9px 16px;
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(35,31,32,0.15);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    z-index: 60;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    white-space: nowrap;
    max-width: 80vw;
    overflow: hidden;
    text-overflow: ellipsis;
}
.picker-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}
.picker-toast i,
.picker-toast svg {
    width: 16px;
    height: 16px;
    color: #6E8A6E;
}
.manual-picker-body {
    display: grid;
    /* Sidebar removed by request — single grid column now. */
    grid-template-columns: 1fr;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.manual-picker-sidebar {
    border-right: 1px solid var(--border-color);
    background: #F7F5E9;
    overflow-y: auto;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.picker-cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 16px;
    background: transparent;
    border: 0;
    border-left: 2px solid transparent;
    text-align: left;
    font-size: 0.82rem;
    color: var(--color-muted);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.picker-cat:hover {
    background: rgba(35,31,32,0.04);
    color: var(--color-primary);
}
.picker-cat.is-active {
    background: #FFFCF4;
    color: var(--color-primary);
    border-left-color: var(--color-primary);
    font-weight: 600;
}
.picker-cat-count {
    font-size: 0.7rem;
    color: var(--color-muted);
    background: rgba(35,31,32,0.05);
    padding: 1px 7px;
    border-radius: 999px;
}
.picker-cat.is-active .picker-cat-count {
    background: rgba(35,31,32,0.08);
    color: var(--color-primary);
}

.manual-picker-grid {
    overflow-y: auto;
    padding: 16px 20px 24px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
    align-content: start;
}
.manual-picker-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--color-muted);
}
.manual-picker-empty i {
    width: 38px;
    height: 38px;
    margin-bottom: 8px;
    opacity: 0.6;
}

.picker-card {
    display: flex;
    flex-direction: column;
    background: #FFFCF4;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    text-align: left;
    cursor: pointer;
    /* Explicit color/font so the card never inherits anything weird from
       a parent <button>, modal-body, or browser default that would make
       the name/price text invisible. */
    color: var(--color-primary);
    font-family: inherit;
    font-size: 0.86rem;
    /* Lock a min height so the body always has room even when aspect-ratio
       on the thumb fails to allocate space (older Chrome on Hostinger was
       collapsing the card to thumb-only). */
    min-height: 220px;
    user-select: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.picker-card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.picker-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(35,31,32,0.06);
    border-color: var(--border-color);
}
.picker-card-thumb {
    height: 120px;
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
    background-color: var(--color-bg);
}
.picker-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.picker-card-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
}
.picker-card-thumb-empty i {
    width: 32px;
    height: 32px;
}
.picker-card-body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
    min-height: 90px;
}
.picker-card-name {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1.25;
}
.picker-card-desc {
    font-size: 0.74rem;
    color: var(--color-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.picker-card-meta {
    margin-top: auto;
    padding-top: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.picker-card-price {
    font-weight: 600;
    font-size: 0.84rem;
    color: var(--color-primary);
}
.picker-card-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--color-muted);
    background: rgba(35,31,32,0.05);
    border-radius: 999px;
    padding: 2px 7px;
}
.picker-card-chip i {
    width: 11px;
    height: 11px;
}

/* Modifier Modal */
.manual-modifier-modal {
    max-width: 600px;
    height: auto;
    max-height: 90vh;
}
.manual-modifier-body {
    padding: 0 24px 16px;
}
.manual-modifier-baseprice {
    padding: 14px 0;
    font-size: 0.85rem;
    color: var(--color-muted);
    border-bottom: 1px dashed var(--border-color);
    margin-bottom: 14px;
}
.manual-modifier-baseprice strong {
    color: var(--color-primary);
}
.manual-modifier-empty {
    padding: 24px;
    text-align: center;
    color: var(--color-muted);
}
.manual-modifier-footer {
    border-top: 1px solid var(--border-color);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    background: #FFFCF4;
}
.manual-modifier-total {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary);
}
.manual-modifier-actions {
    display: flex;
    gap: 8px;
}

.manual-mod-group {
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
}
.manual-mod-group:last-of-type {
    border-bottom: 0;
}
.manual-mod-group-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.manual-mod-group-header h4 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
}
.manual-mod-group-meta {
    font-size: 0.72rem;
    color: var(--color-muted);
    text-transform: lowercase;
}
.manual-mod-required {
    color: var(--color-danger);
    background: rgba(81,7,7,0.1);
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 4px;
}
.manual-mod-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.manual-mod-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: #FFFCF4;
}
.manual-mod-row-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.manual-mod-row-name {
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--color-primary);
}
.manual-mod-row-price {
    font-size: 0.74rem;
    color: var(--color-muted);
}
.manual-mod-toggle {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: #FFFCF4;
    color: var(--color-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.12s ease;
}
.manual-mod-toggle i {
    width: 16px;
    height: 16px;
}
.manual-mod-toggle:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.manual-mod-toggle.is-active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #FFFCF4;
}
.manual-mod-variants {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.manual-mod-variant {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: #FFFCF4;
    font-size: 0.78rem;
    color: var(--color-primary);
    cursor: pointer;
    transition: all 0.12s ease;
}
.manual-mod-variant span {
    color: var(--color-muted);
    font-size: 0.72rem;
}
.manual-mod-variant:hover {
    border-color: var(--color-accent);
}
.manual-mod-variant.is-active {
    background: var(--color-accent);
    color: #FFFCF4;
    border-color: var(--color-accent);
}
.manual-mod-variant.is-active span {
    color: rgba(255,255,255,0.85);
}
/* Add-on row with sized variants (Small / Medium / Large) + stepper:
   the variant <select> renders BELOW the option name (inside
   .manual-mod-row-info) so it can't collide with the stepper on
   narrow widths and is always visible regardless of flex pressure. */
.manual-mod-addon-variant {
    display: block;
    margin-top: 4px;
    width: 100%;
    max-width: 200px;
    height: 32px;
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: #FFFCF4;
    font-size: 0.84rem;
    color: var(--color-primary);
    cursor: pointer;
}

.manual-mod-stepper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    background: #FFFCF4;
}
.manual-mod-stepper button {
    width: 26px;
    height: 26px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    border-radius: 4px;
    transition: background var(--transition);
}
.manual-mod-stepper button:hover {
    background: rgba(35,31,32,0.05);
}
.manual-mod-stepper span {
    min-width: 24px;
    text-align: center;
    font-weight: 600;
    font-size: 0.86rem;
}
.manual-mod-qty {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 4px 0 0;
}
.manual-mod-qty-first {
    margin-bottom: 4px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}
.manual-mod-stepper-lg {
    min-width: 140px;
}
.manual-mod-stepper-lg button {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
}
.manual-mod-stepper-lg span {
    min-width: 36px;
    font-size: 1.05rem;
}

/* Items list — new qty button + chips */
.order-item-qty-control {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 2px;
    background: #FFFCF4;
}
.order-item-qty-control .qty-btn {
    width: 26px;
    height: 26px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    border-radius: 4px;
}
.order-item-qty-control .qty-btn:hover {
    background: rgba(35,31,32,0.05);
}
.order-item-qty-control .qty-input {
    width: 32px;
    height: 26px;
    border: 0;
    background: transparent;
    text-align: center;
    font-weight: 600;
    font-size: 0.86rem;
    pointer-events: none;
}
.order-item-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.order-item-chip {
    background: #EAE7D6;
    border-radius: 4px;
    padding: 1px 7px;
    font-size: 0.74rem;
    color: #3A3533;
}
.order-item-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Responsive */
@media (max-width: 900px) {
    .modal-xl {
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
    .manual-picker-body {
        grid-template-columns: 1fr;
    }
    .manual-picker-sidebar {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
        padding: 8px 12px;
        gap: 6px;
    }
    .picker-cat {
        border-left: 0;
        border-bottom: 3px solid transparent;
        padding: 7px 12px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .picker-cat.is-active {
        border-left: 0;
        border-bottom-color: var(--color-accent);
    }
    .manual-picker-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}
@media (max-width: 600px) {
    .manual-picker-grid {
        grid-template-columns: 1fr 1fr;
        padding: 12px;
        gap: 10px;
    }
    .manual-modifier-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .manual-modifier-actions {
        justify-content: space-between;
    }
    .manual-modifier-actions .btn {
        flex: 1;
    }
    .order-item {
        flex-wrap: wrap;
    }
    .order-item-info {
        flex-basis: 100%;
        order: 3;
    }
    .order-item-actions {
        order: 4;
        margin-left: auto;
    }
}

/* ==================================================================== */
/* === Clients module ================================================= */
/* ==================================================================== */

/* Generic table cell utilities reused on /clients and /clients/{id} */
.table-wrap { width: 100%; overflow-x: auto; }
.table .num  { text-align: right; font-variant-numeric: tabular-nums; }
.table th.num { text-align: right; }
.cell-strong { font-weight: 600; color: var(--color-primary); }
.cell-muted  { color: var(--color-muted); }
.cell-badge  { margin-left: 6px; vertical-align: middle; }
.cell-actions { text-align: right; width: 1%; white-space: nowrap; }

/* Address + card lists on /clients/{id} */
.client-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.client-list-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--border-color);
}
.client-list-item:last-child { border-bottom: 0; }
.client-list-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}
.client-list-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
}
.client-list-sub {
    font-size: 0.82rem;
    color: var(--color-muted);
    line-height: 1.4;
}
.client-list-note {
    font-size: 0.78rem;
    color: #623216;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}
.client-list-note i { width: 12px; height: 12px; }

.client-add-collapse {
    border-top: 1px solid var(--border-color);
    background: #F7F5E9;
}
.client-add-collapse summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 22px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.client-add-collapse summary::-webkit-details-marker { display: none; }
.client-add-collapse summary i { width: 14px; height: 14px; }
.client-add-collapse[open] summary {
    border-bottom: 1px solid var(--border-color);
}
.client-add-form {
    padding: 16px 22px 20px;
    background: #FFFCF4;
}

/* Customer autocomplete dropdown used inside /orders/create/* */
.customer-suggest {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    background: #FFFCF4;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    max-height: 280px;
    overflow-y: auto;
    display: none;
}
.customer-suggest.is-open { display: block; }
.customer-suggest-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.customer-suggest-item:last-child { border-bottom: 0; }
.customer-suggest-item:hover,
.customer-suggest-item.is-focused {
    background: rgba(35,31,32,0.04);
}
.customer-suggest-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-primary);
}
.customer-suggest-meta {
    font-size: 0.74rem;
    color: var(--color-muted);
}
.customer-suggest-empty {
    padding: 14px;
    text-align: center;
    color: var(--color-muted);
    font-size: 0.82rem;
}
.customer-suggest-create {
    background: rgba(130,93,45,0.05);
    border-top: 1px dashed var(--border-color);
}
.customer-suggest-create .customer-suggest-name {
    color: var(--color-accent);
}

.customer-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(61,90,61,0.08);
    color: #3D5A3D;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}
.customer-pill button {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    line-height: 1;
    font-size: 1rem;
}

/* ==================================================================== */
/* === FAQ admin list ================================================== */
/* ==================================================================== */
.faq-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.faq-row {
    border-bottom: 1px solid var(--border-color);
}
.faq-row:last-child {
    border-bottom: 0;
}
.faq-row-inner {
    background: #FFFCF4;
    transition: background 0.12s ease;
}
.faq-row-inner[open] {
    background: #F7F5E9;
}
.faq-row-head {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    user-select: none;
}
.faq-row-head::-webkit-details-marker { display: none; }
.faq-drag {
    cursor: grab;
    color: var(--color-muted);
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.faq-drag:hover { color: var(--color-primary); }
.faq-drag i,
.faq-drag svg {
    width: 16px;
    height: 16px;
}
.faq-scope-pill {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 9px;
    border-radius: 999px;
}
.faq-scope-both     { background: rgba(35,31,32,0.06);       color: var(--color-primary); }
.faq-scope-pickup   { background: rgba(130,93,45,0.1);   color: var(--color-accent); }
.faq-scope-catering { background: rgba(61,90,61,0.1);    color: var(--color-success); }
.faq-q-text {
    flex: 1;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.faq-row-chev {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    transition: transform 0.18s ease;
}
.faq-row-inner[open] .faq-row-chev {
    transform: rotate(180deg);
}
.faq-row-body {
    padding: 6px 20px 18px 46px;
    border-top: 1px dashed var(--border-color);
    margin-top: 4px;
}
.faq-row-ghost {
    opacity: 0.5;
}

.faq-new-card summary {
    list-style: none;
}
.faq-new-card summary::-webkit-details-marker { display: none; }

@media (max-width: 720px) {
    .faq-row-head { padding: 12px 14px; gap: 8px; }
    .faq-q-text { font-size: 0.88rem; }
    .faq-row-body { padding: 8px 14px 16px 14px; }
}

/* Tip presets in /orders/create */
/* Segmented tip row, the same one the storefront checkout shows. */
.tip-block-label { margin: 0 0 8px; font-size: 0.82rem; font-weight: 600; }
.tip-presets {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    border: 1px solid #d7d3c4;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.tip-preset {
    min-width: 0;
    padding: 8px 2px;
    border: 0;
    border-right: 1px solid #d7d3c4;
    border-radius: 0;
    background: #fff;
    color: #231f20;
    font-size: 12.5px;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
}
.tip-preset:last-child { border-right: 0; }
.tip-preset:hover { background: #f3f0e8; }
.tip-preset.is-active {
    background: #231f20;
    color: #fff;
}
.tip-current { margin: 8px 0 12px; font-size: 0.78rem; color: var(--color-muted); }

/* --- Analytics data tables + inline links (same family as .table) --- */
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 550;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
    padding: 12px 22px;
    border-bottom: 1px solid var(--border-color);
    background: #F7F5E9;
    white-space: nowrap;
}

.data-table td {
    padding: 12px 22px;
    font-size: 0.86rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

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

.text-link {
    color: var(--color-accent, #825D2D);
    text-decoration: none;
    font-weight: 550;
}

.text-link:hover {
    text-decoration: underline;
}

/* ── Winfield date & time picker (ezCater-style popover) ─────────────── */
.wsc-dtp-host { position: relative; }
.wsc-dtp-hidden-field {
    position: absolute !important;
    width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
    margin: 0; padding: 0; border: 0;
}
.wsc-dtp-trigger {
    display: flex; align-items: center; gap: 9px;
    width: 100%; min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #D4CFC0;
    border-radius: 8px;
    background: #FFFCF4;
    font-size: 14px; font-family: inherit; color: #231F20;
    cursor: pointer; text-align: left;
}
.wsc-dtp-trigger:hover { border-color: #825D2D; }
.wsc-dtp-trigger.is-open { border-color: #825D2D; box-shadow: 0 0 0 3px rgba(130,93,45,.12); }
.wsc-dtp-trigger.is-placeholder .wsc-dtp-trigger-label { color: #8a837b; }
.wsc-dtp-trigger-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsc-dtp-caret { flex-shrink: 0; color: #8a837b; }
.wsc-dtp-pop {
    position: absolute; z-index: 1400;
    top: calc(100% + 6px); left: 0;
    width: min(560px, calc(100vw - 32px));
    background: #FFFCF4;
    border: 1px solid #E3E0CF;
    border-radius: 14px;
    box-shadow: 0 16px 44px rgba(35,31,32,.16);
    padding: 16px;
}
.wsc-dtp-cols { display: flex; gap: 18px; }
.wsc-dtp-cal { flex: 1 1 55%; min-width: 0; }
.wsc-dtp-times { flex: 1 1 45%; min-width: 0; display: flex; flex-direction: column; }
.wsc-dtp-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.wsc-dtp-cal-title { font-size: 14.5px; color: #231F20; }
.wsc-dtp-nav {
    width: 30px; height: 30px; border: none; border-radius: 8px;
    background: transparent; color: #231F20; cursor: pointer; font-size: 15px;
}
.wsc-dtp-nav:hover { background: #F1EDDE; }
.wsc-dtp-dow, .wsc-dtp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.wsc-dtp-dow span {
    text-align: center; font-size: 11px; font-weight: 600;
    color: #8a837b; padding: 4px 0; text-transform: uppercase; letter-spacing: .04em;
}
.wsc-dtp-day {
    aspect-ratio: 1; border: none; border-radius: 8px;
    background: transparent; font-size: 13.5px; font-family: inherit;
    color: #231F20; cursor: pointer;
}
.wsc-dtp-day:hover:not(:disabled) { background: #F1EDDE; }
.wsc-dtp-day:disabled { color: #C9C3B4; cursor: default; }
.wsc-dtp-day.is-today { font-weight: 700; }
.wsc-dtp-day.is-selected { background: #231F20; color: #FFF8ED; font-weight: 600; }
.wsc-dtp-times-title { font-size: 13px; font-weight: 600; color: #231F20; margin-bottom: 8px; }
.wsc-dtp-chips {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
    overflow-y: auto; max-height: 264px; padding-right: 4px;
    align-content: start;
}
.wsc-dtp-chip {
    border: 1px solid #D4CFC0; border-radius: 999px;
    background: #FFFCF4; padding: 7px 4px;
    font-size: 13px; font-family: inherit; color: #231F20;
    cursor: pointer; white-space: nowrap;
}
.wsc-dtp-chip:hover { border-color: #825D2D; }
.wsc-dtp-chip.is-selected { background: #231F20; border-color: #231F20; color: #FFF8ED; font-weight: 600; }
.wsc-dtp-empty { margin: 0; font-size: 13px; color: #8a837b; }
.wsc-dtp-update {
    display: block; width: 100%; margin-top: 14px;
    padding: 12px; border: none; border-radius: 10px;
    background: #231F20; color: #FFF8ED;
    font-size: 14.5px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.wsc-dtp-update:hover { background: #3A3536; }
@media (max-width: 560px) {
    .wsc-dtp-cols { flex-direction: column; }
    .wsc-dtp-chips { max-height: 180px; grid-template-columns: repeat(3, 1fr); }
}

/* /orders/create: right column follows the scroll; warn bar mirrors the
   picker toast but sits at the bottom for form validation messages. */
.order-create-side-sticky {
    position: sticky;
    /* Clears the fixed topbar and the sticky page header above it. */
    top: calc(var(--topbar-height) + 80px);
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.order-create-side-sticky .card { margin-bottom: 0; }
/* The catering form used to collapse to one column, which dropped the
   summary below the form and left the sticky with nowhere to stick. Two
   columns, and the side column stretched to the row so the sticky has the
   whole scroll to work with. */
.order-create-grid > .form-column-side { align-self: stretch; }
/* The summary card carries its own sticky for the pickup form. Inside this
   wrapper the wrapper is the sticky one; a second sticky made the card ride
   over the Payment card below it. */
.order-create-side-sticky .order-summary-card.is-sticky { position: static; }
.form-warn-bar {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translate(-50%, 12px);
    background: #231F20;
    color: #FFFCF4;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 11px 18px;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(35,31,32,0.28);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    z-index: 1250;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    max-width: 86vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.form-warn-bar.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}
.form-warn-bar i,
.form-warn-bar svg {
    width: 16px;
    height: 16px;
    color: #E5C990;
    flex-shrink: 0;
}

/* ── Menu de acoes do pedido (2026-09-01) ──────────────────────────────
   Antes o header do pedido tinha 6 botoes soltos com o mesmo peso visual.
   Agora so as acoes de status ficam visiveis; o resto vive aqui: gatilho
   discreto (fundo transparente, texto ink, icone e texto menores) alinhado
   a direita, e um painel que so aparece no clique. */
.order-actions-menu { position: relative; display: inline-flex; }

.order-actions-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--color-text, #231F20);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.order-actions-trigger:hover,
.order-actions-trigger[aria-expanded="true"] {
    background: var(--color-surface-2, #FFF8ED);
    border-color: var(--color-border, #E3E0CF);
}
.order-actions-trigger i { width: 14px; height: 14px; }

.order-actions-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1200;           /* abaixo do .modal-overlay (1300), acima do resto */
    min-width: 194px;
    padding: 6px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #E3E0CF);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(35, 31, 32, .12);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.order-actions-dropdown[hidden] { display: none; }

.order-actions-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--color-text, #231F20);
    font-size: 0.8rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    line-height: 1.2;
    cursor: pointer;
}
.order-actions-item:hover { background: var(--color-surface-2, #FFF8ED); }
.order-actions-item i { width: 14px; height: 14px; flex: 0 0 14px; color: var(--color-muted, #8a837b); }

/* ── Campo compacto (2026-09-01) ───────────────────────────────────────
   Padrao pra select/input que vive AO LADO de um btn-sm: o .form-input
   cheio ficava bem mais alto que o botao e desequilibrava a linha (era o
   caso do "Assign a driver..."). Usar sempre que o campo dividir a linha
   com um botao pequeno. */
.form-input-sm {
    height: 34px;
    padding: 0 30px 0 10px;
    font-size: 0.82rem;
    line-height: 34px;
    border-radius: 8px;
}
select.form-input-sm {
    background-position: right 10px center;
    background-size: 14px;
}

/* Variantes do item do menu de acoes: a decisao de status pesa mais que as
   utilitarias, e cancelar/rejeitar precisa ler como destrutivo sem virar um
   bloco vermelho. O form dentro do menu nao pode ganhar margem propria. */
.order-actions-dropdown form { margin: 0; }
.order-actions-dropdown form .order-actions-item { width: 100%; }
.order-actions-item-strong { font-weight: 700; }
.order-actions-item-danger { color: var(--color-danger, #510707); }
.order-actions-item-danger i { color: var(--color-danger, #510707); }
.order-actions-sep {
    height: 1px;
    margin: 5px 6px;
    background: var(--color-border, #E3E0CF);
}

/* ── Delivery reporting (2026-09-01) ───────────────────────────────────
   Estrutura de cartoes do "Delivery reporting" do ezCater, na paleta da
   casa. auto-fit garante que a faixa ocupe a largura TOTAL do container em
   vez de deixar sobra a direita. */
.report-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}
.report-metric {
    padding: 14px 16px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #E3E0CF);
    border-radius: 10px;
    min-width: 0;
}
.report-metric-label {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted, #8a837b);
}
.report-metric-value {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 6px;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-text, #231F20);
    font-variant-numeric: tabular-nums;
}
.report-metric-goal {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--color-muted, #8a837b);
}
.report-metric-sub { margin-top: 2px; font-size: 0.8rem; color: var(--color-muted, #8a837b); }
.report-metric-hint { margin-top: 8px; font-size: 0.74rem; line-height: 1.5; color: var(--color-muted, #8a837b); }

.report-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}
.report-pill-ok    { background: #E4EFE7; color: #3D5A3D; }
.report-pill-warn  { background: #FBF0DC; color: #825D2D; }
.report-pill-bad   { background: #F7E4E4; color: #510707; }
.report-pill-muted { background: #F1EDDE; color: #8a837b; }

/* ── Acoes rapidas do dashboard (2026-09-01) ───────────────────────────
   auto-fit faz a faixa ocupar a largura TOTAL do container, que era a
   reclamacao do Rodrigo sobre os blocos empilhados sobrando espaco a direita. */
.dash-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.dash-quick {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #E3E0CF);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
    transition: background-color .15s ease;
}
.dash-quick:hover { background: var(--color-surface-2, #FFF8ED); }
/* Urgencia sinalizada pelo icone, nao por uma barra lateral: o pedido foi
   padronizar com os outros cartoes do painel. */
.dash-quick-urgent .dash-quick-icon i { color: #825D2D; }
.dash-quick-icon i { width: 18px; height: 18px; color: var(--color-muted, #8a837b); }
.dash-quick-body { display: flex; align-items: baseline; gap: 7px; min-width: 0; flex: 1; }
.dash-quick-count {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text, #231F20);
    font-variant-numeric: tabular-nums;
}
.dash-quick-label { font-size: 0.82rem; color: var(--color-muted, #8a837b); line-height: 1.3; }
.dash-quick-arrow { width: 15px; height: 15px; color: var(--color-muted, #8a837b); flex-shrink: 0; }

/* Lista de sinais tambem ocupa a largura toda em telas largas. */
@media (min-width: 1100px) {
    .analytics-insights-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
}

/* ── Sub-itens do menu (2026-09-01) ────────────────────────────────────
   Espelha a hierarquia do menu do ezCater (Upcoming / Completed / Rejected /
   Canceled) sob Orders, pra quem opera nos dois nao ter que traduzir. */
.nav-subitems {
    display: flex;
    flex-direction: column;
    margin: 2px 0 6px 0;
    padding-left: 30px;
    border-left: 1px solid var(--color-border, #E3E0CF);
    margin-left: 18px;
}
.nav-subitem {
    padding: 5px 10px;
    font-size: 0.8rem;
    color: var(--color-muted, #8a837b);
    text-decoration: none;
    border-radius: 6px;
    line-height: 1.3;
}
.nav-subitem:hover { color: var(--color-text, #231F20); background: var(--color-surface-2, #FFF8ED); }
.nav-subitem.active { color: var(--color-text, #231F20); font-weight: 700; }

/* ── Pedidos: alternador lista/calendario (2026-09-01) ─────────────────
   Formato do ezCater: dois icones discretos acima da barra de filtros. */
.orders-display-toggle {
    display: inline-flex;
    gap: 2px;
    margin-bottom: 12px;
    padding: 3px;
    background: var(--color-surface-2, #FFF8ED);
    border: 1px solid var(--color-border, #E3E0CF);
    border-radius: 8px;
}
.orders-display-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    border-radius: 6px;
    color: var(--color-muted, #8a837b);
    text-decoration: none;
}
.orders-display-btn i { width: 15px; height: 15px; }
.orders-display-btn:hover { color: var(--color-text, #231F20); }
.orders-display-btn.active {
    background: var(--color-surface, #fff);
    color: var(--color-text, #231F20);
    box-shadow: 0 1px 2px rgba(35,31,32,.08);
}

.orders-calendar { padding: 16px; }
.orders-calendar-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--color-text, #231F20);
    margin-bottom: 12px;
}
.orders-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}
.orders-calendar-dow {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted, #8a837b);
    padding: 0 0 4px 2px;
}
.orders-calendar-cell {
    min-height: 92px;
    padding: 6px;
    border: 1px solid var(--color-border, #E3E0CF);
    border-radius: 8px;
    background: var(--color-surface, #fff);
    min-width: 0;
}
.orders-calendar-cell.is-empty { border-color: transparent; background: transparent; }
.orders-calendar-cell.is-today { border-color: #825D2D; }
.orders-calendar-daynum {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--color-muted, #8a837b);
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
}
.orders-calendar-chip {
    display: block;
    padding: 4px 6px;
    margin-bottom: 4px;
    background: var(--color-surface-2, #FFF8ED);
    border-radius: 6px;
    font-size: 0.7rem;
    line-height: 1.35;
    color: var(--color-text, #231F20);
    text-decoration: none;
    overflow: hidden;
}
.orders-calendar-chip:hover { background: #F1EDDE; }
.orders-calendar-time { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }
/* O ezCater mostra o VALOR no chip do dia, nao o nome: e o dado que a loja
   olha pra dimensionar o dia. O nome fica no title, ao passar o mouse. */
.orders-calendar-value {
    display: block;
    color: var(--color-muted, #8a837b);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 900px) {
    .orders-calendar-grid { grid-template-columns: repeat(7, minmax(64px, 1fr)); }
    .orders-calendar { overflow-x: auto; }
    .orders-calendar-cell { min-height: 72px; }
}

/* ── Order Summary sem divisoria por linha (2026-09-01) ────────────────
   .detail-row e generico e traz border-bottom, entao dentro do resumo cada
   linha (subtotal, entrega, sterno, utensilios, imposto, gorjeta) virava uma
   risca. O resumo le melhor como bloco continuo: espacamento separa, nao
   linha. Escopado ao card pra nao mexer nas outras telas que usam a classe. */
.order-summary-card .detail-row { border-bottom: 0; }
.order-summary-card .detail-row-total {
    border-top: 0;
    margin-top: 8px;
    padding-top: 10px;
}

/* Mais e menos de quantidade. Era `width/height:32px` inline em cada botao, e
   estilo inline nao pode ser sobreposto por media query: virou classe pra o
   celular poder cresce-los sem `!important`. Desktop segue com os 32px. */
.qty-step { width: 32px; height: 32px; }

/* Grades de Settings que antes eram `style` inline. Viraram classe porque
   media query nao vence estilo inline: com 1fr + tres colunas de 120px, a
   linha estourava 390px e nao havia como corrigir so no CSS. */
.settings-cols { display: grid; gap: 12px; }
.settings-cols-4 { grid-template-columns: minmax(0, 1fr) 120px 120px 120px; align-items: end; }
.settings-cols-3 {
    grid-template-columns: minmax(0, 1fr) 120px 120px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--border-color);
}

/* =====================================================================
   CAMADA MOBILE (2026-09-08)
   =====================================================================
   Tudo aqui vive dentro de @media (max-width: 768px), entao o desktop nao e
   tocado por construcao, nao por cuidado. Fica no FIM do arquivo de proposito:
   com a mesma especificidade, a regra que vem depois vence, e e assim que este
   bloco corrige o bloco mobile antigo sem precisar edita-lo.

   Escrito depois de medir as 25 telas do painel num viewport de 390px, nao de
   olhar. O que a medicao acusou:
     - a gaveta lateral abria ATRAS do header (z-index 100 contra 1100)
     - todo botao de cabecalho virava largura total, empilhando uma torre
     - `.data-table`, que e a classe da casa, nunca entrou no bloco mobile:
       so o `.table` antigo entrou, e por isso as tabelas apareciam espremidas
     - 40 a 132 controles por tela com menos de 40px de altura
   ===================================================================== */
@media (max-width: 768px) {

    /* --- 1. A gaveta tem que ficar ACIMA do header ---------------------
       Regressao minha: subi `.topbar` pra z-index 1100 numa rodada anterior
       pra o seletor de loja nao sumir atras do mapa Leaflet, e com isso a
       gaveta (z-index 100) passou a abrir por baixo do header. As camadas
       agora sao: Leaflet ~400-1000 < topbar 1100 < gaveta 1200 < modal 1300. */
    .sidebar { z-index: 1201; }
    .sidebar-overlay { z-index: 1200; }

    /* A gaveta ocupa a altura toda e rola sozinha, senao item de baixo
       (Log Out) fica inalcancavel em tela curta. */
    .sidebar {
        top: 0;
        height: 100dvh;
        max-height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        width: min(86vw, 320px);
    }
    /* O travamento do scroll de fundo ja e feito pelo initSidebar(), que poe
       overflow:hidden direto no body. Nao ha regra aqui pra nao virar CSS
       morto esperando uma classe que ninguem aplica. */

    /* --- 2. Botao de cabecalho para de empilhar ------------------------
       A regra antiga era `.page-header .btn { width: 100% }`, entao duas ou
       tres acoes viravam uma torre de botoes de largura total. Agora eles
       dividem a linha, e so ficam largura total quando ha um so. */
    .page-header { gap: 10px; }
    .page-header-actions,
    .page-header-right {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }
    .page-header .btn,
    .page-header-right .btn,
    .page-header-actions .btn {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
    }
    /* Acao unica ocupa a linha inteira: e o alvo mais facil de acertar. */
    .page-header-actions > .btn:only-child,
    .page-header-right > .btn:only-child { flex-basis: 100%; }

    /* --- 3. Alvo de toque -----------------------------------------------
       Minimo de 44px e a recomendacao da Apple e da WCAG 2.5.8 (44x44). A
       medicao achou 40 a 132 controles por tela abaixo de 40px, incluindo o
       proprio botao do menu e o seletor de loja. */
    .btn,
    .nav-item,
    .topbar-menu-btn,
    .topbar-icon-btn,
    .sidebar-close,
    .store-picker,
    .topbar-profile-trigger,
    .nav-section-toggle,
    .store-dropdown-item {
        min-height: 44px;
    }
    .btn-icon,
    .topbar-icon-btn {
        min-width: 44px;
        min-height: 44px;
    }
    .nav-item, .nav-section-toggle { padding-top: 11px; padding-bottom: 11px; }
    /* Caixa de selecao de 17px e alvo de dedo ruim; 22px ja e confortavel. */
    input[type="checkbox"], input[type="radio"] { min-width: 22px; min-height: 22px; }
    /* Campo com menos de 16px faz o iOS dar zoom sozinho ao focar. */
    input, select, textarea { font-size: 16px; min-height: 44px; }
    textarea { min-height: 88px; }

    /* --- 4. Tabela ------------------------------------------------------
       `.data-table` e a classe da casa e nunca tinha entrado no bloco mobile:
       ficava com o padding de 22px do desktop, e por isso a coluna de nome
       quebrava em tres linhas. Aqui ela ganha densidade e um minimo de largura,
       pra rolar de lado em vez de esmagar a coluna. */
    .data-table th,
    .data-table td {
        padding: 12px 10px;
        font-size: 0.82rem;
    }
    .data-table th { font-size: 0.68rem; }
    .data-table { min-width: 520px; }
    /* Todo container direto de tabela rola de lado, com inercia de toque. */
    .table-responsive,
    .card-body-flush > div:has(> table),
    .card-body > div:has(> table),
    /* Tabela filha DIRETA do card, sem div no meio: e o caso do Analytics, e
       era o unico que ainda transbordava depois da primeira passada. */
    .card-body:has(> table),
    .card-body-flush:has(> table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Badge de status nao quebra dentro da pilula ("In production" virava
       duas linhas e desalinhava a linha inteira). */
    .badge { white-space: nowrap; }

    /* --- 4b. Tabela vira CARTAO ----------------------------------------
       Rolar uma tabela de quatro colunas de lado num celular e o pior dos dois
       mundos: metade da informacao fica escondida e o nome do cliente quebra em
       quatro linhas (na lista de pedidos, "TEST ORDER, DO NOT PREPARE" ocupava
       quatro). Cada linha vira um cartao, com o titulo da coluna a esquerda e o
       valor a direita.

       O gancho e uma classe UNICA que o `rotularCelulasDeTabela()` poe na
       tabela, junto com o `data-label` de cada celula copiado do <thead>. Um
       seletor so, em vez de repetir `.table` e `.data-table` em catorze regras,
       e a lista de quais tabelas entram fica no JS, num lugar so. Tabela que
       precise continuar tabular e so marcar com `.keep-table` no HTML.
       Nada disto muda o desktop: a classe existe la, e so nao e usada. */
    .is-stackable,
    .is-stackable tbody,
    .is-stackable tr,
    .is-stackable td {
        display: block;
        width: auto;
        min-width: 0;
    }
    .is-stackable thead { display: none; }
    .is-stackable tr {
        border: 1px solid var(--border-color);
        border-radius: 10px;
        background: var(--color-white, #fff);
        padding: 2px;
        margin-bottom: 10px;
    }
    .is-stackable tbody tr:last-child { margin-bottom: 0; }
    .is-stackable td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        padding: 10px 14px;
        border: 0;
        text-align: right;
        font-size: 0.86rem;
    }
    .is-stackable td + td { border-top: 1px solid var(--border-color); }
    .is-stackable td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        text-align: left;
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--color-muted);
        white-space: nowrap;
    }
    /* Celula sem rotulo (coluna de acao) ocupa a linha e alinha a direita. */
    .is-stackable td:not([data-label]) { justify-content: flex-end; }
    /* Celula vazia nao vira linha em branco dentro do cartao. */
    .is-stackable td:empty { display: none; }
    /* Ja que nao rola mais de lado, some com a largura minima. */
    .is-stackable { min-width: 0; }

    /* --- 4c. Barra de filtro ---------------------------------------------
       O bloco mobile antigo poe `.filters-row` em coluna e todo `.btn` da
       barra em largura total. Num campo de busca isso e certo; numa fileira de
       chips curtos (Today / Tomorrow / Next 7 days / All) vira uma torre de
       quatro botoes, que foi exatamente a queixa. Agora a linha QUEBRA em vez
       de empilhar: campo e select ocupam a linha inteira porque precisam,
       botao ocupa so o que precisa e divide a linha com os vizinhos. */
    .filters-row {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }
    .filters-row > .filter-item,
    .filters-row > .filter-item-grow,
    .filters-row input[type="text"],
    .filters-row input[type="search"],
    .filters-row input[type="date"],
    .filters-row select,
    .filters-bar input[type="text"],
    .filters-bar input[type="search"],
    .filters-bar select {
        flex: 1 1 100%;
        min-width: 0;
    }
    .filters-bar .btn,
    .filters-row .btn {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
    }

    /* --- 5. Respiro e leitura ------------------------------------------ */
    .main-content, .content-area { padding-left: 14px; padding-right: 14px; }
    .card-body { padding: 16px; }
    .page-heading { font-size: 1.15rem; }
    /* Grade de cartoes de metrica vira uma coluna: dois por linha em 390px
       espreme o numero e o rotulo. */
    .stats-row, .report-metric-grid { grid-template-columns: 1fr; }
    /* Formulario de entidade numa coluna so. */
    .form-fields { grid-template-columns: 1fr; max-width: none; }
    .settings-cols-4, .settings-cols-3 { grid-template-columns: 1fr; align-items: stretch; }

    /* Controles que escaparam da lista por nao terem classe conhecida. */
    .profile-dropdown-item button,
    .profile-dropdown-item a { min-height: 44px; }
    .analytics-abandon-delete, .analytics-abandon-delete-btn { min-height: 44px; min-width: 44px; }
    /* Chip de filtro fica em 36px: 44 deixaria a fileira pesada demais, e 36
       com espacamento ja passa no minimo de 24px da WCAG 2.5.8. */
    .filter-chip { min-height: 36px; }
    /* Escolha de gorjeta no pedido manual: sao cinco botoes numa linha so, e
       36px e o maximo que cabe sem quebrar a fileira. */
    .tip-preset { min-height: 36px; }
    /* O mais e o menos de quantidade: 32x32 em `style` INLINE, entao media
       query nao alcanca por especificidade. O `!important` aqui e a unica saida
       e e deliberado. Miro pelo aria-label, que existe pra acessibilidade e por
       isso e mais estavel que qualquer classe de layout. */
    .qty-step,
    .quantity-control button,
    .qty-control button {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }
    /* Os steppers montados por JS (template string) so tem o aria-label como
       gancho estavel, e nesses o tamanho continua inline. */
    button[aria-label="Decrease"],
    button[aria-label="Increase"] {
        width: 40px !important;
        height: 40px !important;
    }
    /* Duas colunas de detalhe (conversa + acoes) empilham. */
    .cs-detail { grid-template-columns: 1fr; }
    .cs-msg { max-width: 100%; }
}

/* Minimal action buttons: the same family the customer sees on the order page. */
.btn-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 12px; border: 1px solid var(--border-color); border-radius: 7px; background: transparent; color: #231F20; font: inherit; font-size: 13px; font-weight: 500; line-height: 1.4; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn-action:hover { border-color: #6f6a61; background: rgba(35,31,32,.03); }
.btn-action:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.btn-action.is-destructive { color: #a23535; }
.btn-action:disabled { opacity: .5; cursor: not-allowed; background: transparent; }
/* Ticket page: the resolution cards were glued to the conversation. */
.cs-side-card { margin-bottom: 16px; }
.cs-side-card .native-payment { margin: 12px 0 0; box-shadow: none; }
.native-payment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.native-payment-actions form { margin: 0; }
.native-payment-note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: #6f6a61; }
.native-payment-policy { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: 8px; background: #FFF8ED; }
.native-payment-policy p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; }

/* Order page: minimal actions, ticket dot, resend */
.order-ticket-indicators { display: inline-flex; align-items: center; gap: 6px; }
.order-ticket-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.order-ticket-dot.is-critical { background: #510707; }
.order-ticket-dot.is-warning { background: #b8860b; }
.order-ticket-dot:focus-visible { outline: 2px solid #825D2D; outline-offset: 3px; }
.order-ticket-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .01em; text-decoration: none; border: 1px solid transparent; white-space: nowrap; }
.order-ticket-chip.is-critical { color: #510707; background: #faf0ef; border-color: #eccfcc; }
.order-ticket-chip.is-warning { color: #7a5a06; background: #fdf6e3; border-color: #ecdcb4; }
.order-ticket-chip:hover { filter: brightness(.97); }
.order-ticket-chip:focus-visible { outline: 2px solid #825D2D; outline-offset: 2px; }
.order-ticket-more { color: #6f6a61; font-size: 11px; font-weight: 600; }
.order-ticket-action { color: #231f20; font-size: 11.5px; font-weight: 600; text-decoration: underline;
    text-underline-offset: 2px; background: none; border: 0; padding: 0; margin-left: 2px; white-space: nowrap; }
.order-ticket-action:hover { opacity: .7; }
.order-ticket-action:focus-visible { outline: 2px solid #825D2D; outline-offset: 2px; }
.order-receipt-actions { display: flex; flex-flow: row wrap; align-items: center; gap: 8px; }
.order-receipt-actions form { margin: 0; }
.order-receipt-panel .order-receipt-copy-btn { flex: 0 0 auto; min-width: 56px; }
.order-comms .notif-resend-form { margin: 10px 0 0; }
.order-comms .notif-resend-form .btn-action { min-height: 32px; padding: 5px 11px; }