* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

:root {
    --sidebar-width: 270px;
    --sidebar-collapsed-width: 78px;
    --status-chart-width: 340px;
    --status-chart-height: 260px;
    --sales-chart-height: 280px;
    --primary: #ea1d2c;
    --bg: #f4f6fb;
    --card: #ffffff;
    --text: #1f2937;
    --muted: #6b7280;
}

body {
    background: var(--bg);
    color: var(--text);
}

svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.login-body {
    min-height: 100vh;
    background: linear-gradient(135deg, #ea1d2c, #ff6b35);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.login-card {
    width: min(360px, 100%);
    background: #fff;
    padding: 32px;
    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(0,0,0,.25);
}

.brand {
    text-align: center;
    margin-bottom: 24px;
}

.brand-icon {
    font-size: 42px;
}

.brand h1 {
    margin-top: 8px;
    font-size: 26px;
}

.brand p {
    color: var(--muted);
    font-size: 14px;
}

.login-card input {
    width: 100%;
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    outline: none;
}

.login-card button {
    width: 100%;
    padding: 14px;
    border: 0;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}

#loginMessage {
    display: block;
    margin-top: 12px;
    color: var(--primary);
    text-align: center;
}

.setup-login-link {
    display: block;
    margin-top: 16px;
    color: #b91c1c;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
}

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

.setup-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: linear-gradient(135deg, #111827, #374151);
}

.setup-card {
    width: min(460px, 100%);
    padding: 30px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 25px 60px rgba(0,0,0,.3);
}

.setup-status {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f3f4f6;
    color: #374151;
    font-size: 14px;
    line-height: 1.45;
}

.setup-status.ready {
    background: #eff6ff;
    color: #1d4ed8;
}

.setup-status.success {
    background: #dcfce7;
    color: #166534;
}

.setup-status.warning {
    background: #fff7ed;
    color: #9a3412;
}

.setup-status.error {
    background: #fee2e2;
    color: #991b1b;
}

.setup-form.hidden {
    display: none;
}

.setup-form label {
    display: block;
    margin: 12px 0 6px;
    font-weight: bold;
}

.setup-form input {
    width: 100%;
    padding: 13px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    outline: none;
}

.setup-form input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(234, 29, 44, .12);
}

.setup-form small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
}

.setup-form button {
    width: 100%;
    margin-top: 20px;
    padding: 14px;
    border: 0;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}

.setup-form button:disabled {
    cursor: wait;
    opacity: .65;
}

.app-layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background: #111827;
    color: #fff;
    padding: 18px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    transition: width .2s ease, min-width .2s ease;
}

body.sidebar-collapsed .sidebar {
    width: var(--sidebar-collapsed-width);
    min-width: var(--sidebar-collapsed-width);
}

.sidebar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 26px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
}

.logo-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.logo h2 {
    font-size: 22px;
    white-space: nowrap;
}

.logo span {
    color: #9ca3af;
    font-size: 13px;
    white-space: nowrap;
}

.sidebar-toggle {
    border: none;
    background: #1f2937;
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    cursor: pointer;
    display: grid;
    place-items: center;
}

body.sidebar-collapsed .logo-icon,
body.sidebar-collapsed .logo-text,
body.sidebar-collapsed .nav-label {
    display: none;
}

body.sidebar-collapsed .sidebar {
    padding-left: 0;
    padding-right: 0;
}

body.sidebar-collapsed .nav-btn {
    justify-content: center;
}

body.sidebar-collapsed .sidebar-top {
    position: static;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 18px;
}

body.sidebar-collapsed .sidebar-toggle {
    position: static;
    margin: 0 auto;
    transform: none;
    background: var(--primary);
    z-index: 5;
}

.nav-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 14px;
    margin-bottom: 10px;
    border: none;
    border-radius: 14px;
    background: transparent;
    color: #d1d5db;
    text-align: left;
    cursor: pointer;
    font-size: 15px;
    text-decoration: none;
}

.nav-btn:hover,
.nav-btn.active {
    background: var(--primary);
    color: #fff;
}

.nav-btn.admin-only:not(.is-visible) {
    display: none;
}

.mobile-floating-nav,
.mobile-orders-menu,
.mobile-orders-backdrop {
    display: none;
}

.logout-btn {
    margin-top: 20px;
}

.main {
    flex: 1;
    min-width: 0;
    padding: clamp(14px, 2vw, 28px);
    overflow-y: auto;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px;
    gap: 16px;
}

.topbar h1 {
    font-size: clamp(24px, 3vw, 30px);
}

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

.live-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #dcfce7;
    color: #166534;
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: bold;
    white-space: nowrap;
}

.live-badge span {
    width: 9px;
    height: 9px;
    background: #22c55e;
    border-radius: 50%;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.summary-card {
    background: var(--card);
    padding: 22px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,.06);
    border-left: 6px solid #3b82f6;
}

.summary-card p {
    color: var(--muted);
    font-size: 14px;
}

.summary-card h2 {
    margin-top: 8px;
    font-size: clamp(24px, 3vw, 30px);
}

.summary-card.green {
    border-left-color: #22c55e;
}

.summary-card.money {
    border-left-color: #8b5cf6;
}

.summary-card.orange {
    border-left-color: #f59e0b;
}

.charts-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--status-chart-width);
    gap: 18px;
    align-items: stretch;
    margin-bottom: 28px;
}

.chart-card {
    background: var(--card);
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,.06);
    min-width: 0;
}

.chart-card h3 {
    margin-bottom: 16px;
}

.sales-chart-card {
    height: var(--sales-chart-height);
}

.sales-chart-card canvas {
    max-height: calc(var(--sales-chart-height) - 70px);
}

.status-chart-card {
    height: var(--status-chart-height);
}

.status-chart-card canvas {
    max-height: calc(var(--status-chart-height) - 70px);
}

.orders-header {
    margin-bottom: 16px;
}

.orders-header h2 {
    font-size: 24px;
}

.orders-header p {
    color: var(--muted);
}

.orders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
    gap: 16px;
}

.order-card {
    background: var(--card);
    padding: 18px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,.06);
    border-left: 6px solid #9ca3af;
}

.order-card.pending {
    border-left-color: #f59e0b;
}

.order-card.paid {
    border-left-color: #22c55e;
}

.order-card.preparing {
    border-left-color: #3b82f6;
}

.order-card.ready {
    border-left-color: #10b981;
}

.order-card.out_for_delivery {
    border-left-color: #f97316;
}

.order-card.delivered {
    border-left-color: #6b7280;
}

.order-card.cancelled {
    border-left-color: #ef4444;
}

.order-card h3 {
    margin-bottom: 10px;
}

.order-card p {
    margin-bottom: 6px;
    color: #4b5563;
    overflow-wrap: anywhere;
}

.address-box {
    margin-top: 12px;
    padding: 12px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 14px;
    color: #9a3412;
}

.address-box strong {
    display: block;
    margin-bottom: 6px;
}

.address-box span {
    display: block;
    overflow-wrap: anywhere;
}

.status-pill,
.payment-pill {
    display: inline-block;
    margin-top: 8px;
    margin-right: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f3f4f6;
    font-size: 13px;
    font-weight: bold;
}

.payment-pill {
    background: #eef2ff;
    color: #3730a3;
}

.order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.primary-btn {
    border: 0;
    border-radius: 14px;
    background: var(--primary);
    color: #fff;
    padding: 13px 18px;
    font-weight: bold;
    cursor: pointer;
}

.secondary-btn {
    border: 0;
    border-radius: 12px;
    background: #f3f4f6;
    color: #374151;
    padding: 10px 12px;
    cursor: pointer;
}

.danger-btn {
    border: 0;
    border-radius: 12px;
    background: #fee2e2;
    color: #991b1b;
    padding: 10px 12px;
    cursor: pointer;
}

.product-toolbar {
    margin-bottom: 18px;
}

.product-toolbar input {
    width: 100%;
    max-width: 420px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    outline: none;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
    gap: 16px;
}

.product-card {
    background: var(--card);
    padding: 16px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,.06);
}

.product-message-card {
    grid-column: 1 / -1;
}

.product-image {
    width: 100%;
    height: 170px;
    border-radius: 16px;
    object-fit: contain;
    object-position: center;
    background: #f3f4f6;
    margin-bottom: 12px;
    display: block;
}

.product-placeholder {
    width: 100%;
    height: 170px;
    border-radius: 16px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.product-card h3 {
    margin-bottom: 6px;
}

.product-card p {
    color: #4b5563;
    margin-bottom: 6px;
    overflow-wrap: anywhere;
}

.product-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.modal {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, .65);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 300;
}

.modal.hidden {
    display: none;
}

.modal-content {
    width: 100%;
    max-width: 520px;
    max-height: 92vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 22px;
    padding: 24px;
    box-shadow: 0 25px 60px rgba(0,0,0,.25);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.modal-header button {
    border: 0;
    background: transparent;
    font-size: 30px;
    cursor: pointer;
}

.modal-content label {
    display: block;
    margin: 12px 0 6px;
    font-weight: bold;
}

.modal-content input,
.modal-content textarea {
    width: 100%;
    padding: 13px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    outline: none;
}

.modal-content textarea {
    min-height: 90px;
    resize: vertical;
}

.modal-content .primary-btn {
    width: 100%;
    margin-top: 18px;
}

.user-management-grid {
    display: grid;
    grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.panel-card {
    min-width: 0;
    background: var(--card);
    padding: 22px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,.06);
}

.panel-card h2 {
    margin-bottom: 5px;
}

.card-subtitle {
    color: var(--muted);
    font-size: 14px;
}

.user-form {
    margin-top: 20px;
}

.user-form label {
    display: block;
    margin: 13px 0 6px;
    font-weight: bold;
}

.user-form input,
.user-form select {
    width: 100%;
    padding: 13px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    outline: none;
}

.user-form input:focus,
.user-form select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(234, 29, 44, .12);
}

.user-form small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
}

.user-form .primary-btn {
    width: 100%;
    margin-top: 20px;
}

.primary-btn:disabled {
    cursor: wait;
    opacity: .65;
}

.form-message {
    min-height: 22px;
    margin-top: 12px;
    font-size: 14px;
    font-weight: bold;
}

.form-message.success {
    color: #15803d;
}

.form-message.error {
    color: #b91c1c;
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

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

.user-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px;
    border: 1px solid #e5e7eb;
    border-radius: 15px;
}

.user-details {
    min-width: 0;
}

.user-details h3,
.user-details p {
    overflow-wrap: anywhere;
}

.user-details p {
    margin: 4px 0;
    color: #4b5563;
}

.user-details small {
    color: var(--muted);
}

.user-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.role-pill,
.active-pill,
.inactive-pill {
    display: inline-block;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}

.role-pill {
    background: #eef2ff;
    color: #3730a3;
}

.role-admin {
    background: #fef2f2;
    color: #b91c1c;
}

.role-manager {
    background: #fff7ed;
    color: #c2410c;
}

.active-pill {
    background: #dcfce7;
    color: #166534;
}

.inactive-pill {
    background: #f3f4f6;
    color: #4b5563;
}

.empty-state {
    padding: 18px;
    border: 1px dashed #d1d5db;
    border-radius: 14px;
    color: var(--muted);
    text-align: center;
}

@media (max-width: 1180px) {
    :root {
        --status-chart-width: 300px;
        --status-chart-height: 260px;
        --sales-chart-height: 270px;
    }

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

@media (max-width: 860px) {
    body.has-mobile-navigation {
        padding-bottom: calc(98px + env(safe-area-inset-bottom));
    }

    body.mobile-orders-open {
        overflow: hidden;
    }

    .app-layout {
        display: block;
    }

    .sidebar {
        display: none !important;
    }

    .main {
        padding: 14px 14px calc(18px + env(safe-area-inset-bottom));
    }

    .mobile-floating-nav {
        position: fixed;
        left: 50%;
        bottom: calc(12px + env(safe-area-inset-bottom));
        z-index: 120;
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: min(520px, calc(100% - 20px));
        min-height: 72px;
        padding: 8px 10px;
        border: 1px solid rgba(229, 231, 235, .9);
        border-radius: 26px;
        background: rgba(255, 255, 255, .94);
        box-shadow: 0 18px 45px rgba(17, 24, 39, .24);
        transform: translateX(-50%);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .mobile-nav-item {
        flex: 1 1 0;
        min-width: 0;
        padding: 5px 2px;
        border: 0;
        background: transparent;
        color: #6b7280;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        cursor: pointer;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-nav-item.admin-only:not(.is-visible) {
        display: none;
    }

    .mobile-nav-icon {
        width: 40px;
        height: 36px;
        border-radius: 14px;
        display: grid;
        place-items: center;
        transition: transform .18s ease, background .18s ease, color .18s ease;
    }

    .mobile-nav-icon svg {
        width: 23px;
        height: 23px;
    }

    .mobile-nav-label {
        max-width: 100%;
        overflow: hidden;
        color: inherit;
        font-size: 10px;
        font-weight: 700;
        line-height: 1.1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-nav-item.active {
        color: var(--primary);
    }

    .mobile-nav-item.active .mobile-nav-icon {
        background: #fff0f1;
        transform: translateY(-2px);
    }

    .mobile-nav-item:focus-visible,
    .mobile-order-filter:focus-visible,
    .mobile-orders-header button:focus-visible {
        outline: 3px solid rgba(234, 29, 44, .3);
        outline-offset: 2px;
    }

    .mobile-nav-orders .mobile-nav-icon,
    .mobile-nav-orders.active .mobile-nav-icon {
        width: 58px;
        height: 58px;
        border: 5px solid var(--bg);
        border-radius: 50%;
        background: linear-gradient(135deg, #ff6b35, var(--primary));
        color: #fff;
        box-shadow: 0 12px 24px rgba(234, 29, 44, .32);
        transform: translateY(-18px);
    }

    .mobile-nav-orders .mobile-nav-icon svg {
        width: 25px;
        height: 25px;
    }

    .mobile-nav-orders .mobile-nav-label {
        margin-top: -15px;
    }

    .mobile-nav-orders[aria-expanded="true"] .mobile-nav-icon {
        box-shadow: 0 14px 30px rgba(234, 29, 44, .48);
        transform: translateY(-20px) scale(1.05);
    }

    .mobile-nav-logout {
        color: #991b1b;
    }

    .mobile-orders-backdrop {
        position: fixed;
        inset: 0;
        z-index: 110;
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: rgba(17, 24, 39, .44);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .2s ease, visibility .2s ease;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    body.mobile-orders-open .mobile-orders-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .mobile-orders-menu {
        position: fixed;
        left: 50%;
        bottom: calc(96px + env(safe-area-inset-bottom));
        z-index: 115;
        display: block;
        width: min(500px, calc(100% - 24px));
        max-height: calc(100vh - 120px - env(safe-area-inset-bottom));
        max-height: calc(100dvh - 120px - env(safe-area-inset-bottom));
        padding: 18px;
        border: 1px solid #e5e7eb;
        border-radius: 24px;
        background: #fff;
        box-shadow: 0 24px 55px rgba(17, 24, 39, .28);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translate(-50%, 18px) scale(.97);
        transform-origin: bottom center;
        transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    }

    body.mobile-orders-open .mobile-orders-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, 0) scale(1);
    }

    .mobile-orders-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
    }

    .mobile-orders-header strong,
    .mobile-orders-header span {
        display: block;
    }

    .mobile-orders-header strong {
        font-size: 19px;
    }

    .mobile-orders-header span {
        margin-top: 2px;
        color: var(--muted);
        font-size: 13px;
    }

    .mobile-orders-header button {
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 50%;
        background: #f3f4f6;
        color: #374151;
        display: grid;
        place-items: center;
        cursor: pointer;
    }

    .mobile-orders-header button svg {
        width: 19px;
        height: 19px;
    }

    .mobile-orders-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .mobile-order-filter {
        min-width: 0;
        min-height: 60px;
        padding: 10px;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        background: #f9fafb;
        color: #374151;
        display: flex;
        align-items: center;
        gap: 9px;
        text-decoration: none;
    }

    .mobile-order-filter > span {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        border-radius: 12px;
        background: #fff;
        display: grid;
        place-items: center;
    }

    .mobile-order-filter svg {
        width: 19px;
        height: 19px;
    }

    .mobile-order-filter strong {
        overflow-wrap: anywhere;
        font-size: 12px;
        line-height: 1.2;
    }

    .mobile-order-filter.active {
        border-color: rgba(234, 29, 44, .35);
        background: #fff0f1;
        color: #b91c1c;
    }

    .mobile-order-filter:last-child {
        grid-column: 1 / -1;
    }

    .topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .summary-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 18px;
    }

    .summary-card {
        min-height: 96px;
        padding: 14px;
        border-radius: 16px;
        border-left-width: 4px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .summary-card p {
        font-size: 12px;
        line-height: 1.2;
    }

    .summary-card h2 {
        margin-top: 5px;
        font-size: clamp(19px, 4vw, 24px);
        overflow-wrap: anywhere;
    }

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

    .product-card {
        min-width: 0;
        padding: 12px;
        border-radius: 16px;
    }

    .product-image,
    .product-placeholder {
        height: clamp(110px, 18vw, 150px);
        border-radius: 12px;
        margin-bottom: 9px;
    }

    .charts-grid {
        grid-template-columns: 1fr;
    }

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

    .sales-chart-card {
        height: 260px;
    }

    .status-chart-card {
        height: 300px;
    }
}

@media (max-width: 520px) {
    .main {
        padding-right: 10px;
        padding-left: 10px;
    }

    .topbar {
        gap: 10px;
        margin-bottom: 16px;
    }

    .topbar h1 {
        font-size: 22px;
        line-height: 1.15;
    }

    .topbar p {
        font-size: 12px;
        line-height: 1.35;
    }

    .topbar > .primary-btn {
        width: 100%;
        padding: 11px 14px;
    }

    .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 14px;
    }

    .summary-card {
        min-height: 0;
        height: 92px;
        padding: 10px;
        border-radius: 14px;
        box-shadow: 0 7px 18px rgba(0,0,0,.055);
    }

    .summary-card p {
        font-size: 11px;
    }

    .summary-card h2 {
        margin-top: 4px;
        font-size: clamp(17px, 5.2vw, 22px);
        line-height: 1.1;
    }

    .charts-grid {
        gap: 12px;
        margin-bottom: 20px;
    }

    .chart-card {
        padding: 14px;
        border-radius: 16px;
    }

    .chart-card h3 {
        margin-bottom: 10px;
        font-size: 15px;
    }

    .sales-chart-card {
        height: 230px;
    }

    .status-chart-card {
        height: 260px;
    }

    .orders-header {
        margin-bottom: 12px;
    }

    .orders-header h2 {
        font-size: 20px;
    }

    .orders-header p {
        font-size: 12px;
    }

    .orders-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .order-card {
        padding: 14px;
        border-left-width: 4px;
        border-radius: 14px;
    }

    .product-toolbar {
        margin-bottom: 10px;
    }

    .product-toolbar input {
        max-width: none;
        padding: 11px 12px;
        border-radius: 12px;
        font-size: 13px;
    }

    .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .product-card {
        padding: 7px;
        border-radius: 12px;
        box-shadow: 0 6px 16px rgba(0,0,0,.055);
    }

    .product-image,
    .product-placeholder {
        height: clamp(76px, 22vw, 110px);
        border-radius: 9px;
        margin-bottom: 7px;
    }

    .product-card h3 {
        min-height: 28px;
        margin-bottom: 4px;
        display: -webkit-box;
        overflow: hidden;
        font-size: 12px;
        line-height: 1.18;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .product-card p {
        margin-bottom: 3px;
        font-size: 10px;
        line-height: 1.2;
    }

    .product-card .product-category,
    .product-card .product-description {
        display: none;
    }

    .product-price strong {
        color: #111827;
        font-size: 12px;
        white-space: nowrap;
    }

    .product-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        margin-top: 7px;
    }

    .product-actions .secondary-btn,
    .product-actions .danger-btn {
        width: 100%;
        min-width: 0;
        min-height: 30px;
        padding: 6px 1px;
        border-radius: 8px;
        font-size: 9px;
        font-weight: 700;
    }

    .product-message-card {
        grid-column: 1 / -1;
        padding: 16px;
    }

    .product-message-card h3 {
        min-height: 0;
        font-size: 16px;
    }

    .product-message-card p {
        display: block;
        font-size: 13px;
    }

    .modal {
        padding: 10px;
        align-items: flex-end;
    }

    .modal-content {
        border-radius: 20px 20px 0 0;
    }

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

    .user-badges {
        justify-content: flex-start;
    }
}

@media (max-width: 380px) {
    .summary-card {
        height: 86px;
        padding: 8px;
    }

    .summary-card h2 {
        font-size: 17px;
    }

    .products-grid {
        gap: 5px;
    }

    .product-card {
        padding: 6px;
    }

    .product-actions .secondary-btn,
    .product-actions .danger-btn {
        font-size: 8px;
    }

    .mobile-floating-nav {
        width: calc(100% - 12px);
        padding-right: 4px;
        padding-left: 4px;
    }

    .mobile-nav-label {
        font-size: 9px;
    }

    .mobile-orders-menu {
        width: calc(100% - 16px);
        padding: 14px;
    }
}
.brand-runtime-logo,.branding-logo-preview img{width:100%;height:100%;object-fit:contain;border-radius:inherit}.branding-grid{align-items:start}.branding-preview{display:flex;align-items:center;gap:14px;padding:16px;margin:12px 0;border:1px solid var(--border-color,#e5e7eb);border-radius:14px}.branding-logo-preview{width:64px;height:64px;display:grid;place-items:center;border-radius:16px;background:var(--brand-primary,#d63939);color:#fff;font-size:28px;font-weight:800;overflow:hidden;flex:none}.branding-preview div:last-child{display:flex;flex-direction:column}.field-upload{display:flex;flex-direction:column;gap:8px;margin:16px 0}
.settings-link-icon svg{width:22px;height:22px;display:block}.logo-icon,.brand-icon{overflow:hidden}.logo-icon .brand-runtime-logo,.brand-icon .brand-runtime-logo{width:100%;height:100%;object-fit:contain}

/* Controle de estoque */
.product-stock-summary {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(34, 197, 94, .08);
    border: 1px solid rgba(34, 197, 94, .2);
    color: var(--text, #111827);
}
.product-stock-summary strong { color: #15803d; }
.product-stock-summary small { color: var(--muted, #64748b); }
.product-stock-summary.out-of-stock {
    background: rgba(239, 68, 68, .08);
    border-color: rgba(239, 68, 68, .22);
}
.product-stock-summary.out-of-stock strong { color: #b91c1c; }
.field-help { display:block; margin-top:-6px; color:var(--muted,#64748b); font-size:12px; line-height:1.45; }

/* Página de configurações */
.settings-page-main { min-width: 0; }
.settings-page-header { align-items: flex-start; }
.settings-page-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding-bottom: 28px;
}
.settings-page-card {
    min-width: 0;
    background: var(--card, #fff);
    color: var(--text, #111827);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
    display: grid;
    gap: 18px;
    align-content: start;
}
.settings-card-heading { display:flex; gap:13px; align-items:flex-start; }
.settings-card-heading h2 { margin:0 0 4px; font-size:18px; }
.settings-card-heading p { margin:0; color:var(--muted,#64748b); }
.settings-card-icon {
    width:42px; height:42px; min-width:42px; border-radius:13px;
    display:grid; place-items:center;
    background:rgba(214,57,57,.1); color:var(--primary,#d63939);
}
.settings-card-icon svg { width:22px; height:22px; }
.settings-page-field { display:grid; gap:7px; }
.settings-page-field > span { font-weight:700; }
.settings-page-field select { width:100%; min-height:44px; border-radius:11px; }
.settings-page-links { display:grid; gap:10px; }
.settings-page-link {
    display:grid; gap:3px; padding:14px 15px; border:1px solid var(--border,#e5e7eb);
    border-radius:13px; color:inherit; text-decoration:none; background:var(--surface,#f8fafc);
    transition:.18s ease;
}
.settings-page-link:hover { transform:translateY(-1px); border-color:rgba(214,57,57,.4); color:inherit; }
.settings-page-link span { color:var(--muted,#64748b); font-size:13px; }
.settings-page-card .notification-sound-row,
.settings-page-card .notification-volume-field,
.settings-page-card .notification-file-field { margin:0; }

@media (max-width: 900px) {
    .settings-page-grid { grid-template-columns: 1fr; gap:12px; }
}
@media (max-width: 640px) {
    .settings-page-card { border-radius:15px; padding:15px; gap:14px; }
    .settings-page-header { margin-bottom:12px; }
    .settings-card-icon { width:38px; height:38px; min-width:38px; }
    .notification-file-actions { display:grid; grid-template-columns:1fr; width:100%; }
    .notification-file-actions .secondary-btn,
    .notification-file-actions .file-button { width:100%; justify-content:center; }
}

/* Identidade: somente acentos visuais; texto segue o tema claro/escuro. */
.settings-card-icon {
    background: color-mix(in srgb, var(--brand-primary, #d63939) 10%, var(--card, #fff));
    color: var(--brand-primary, #d63939);
}
.settings-page-link:hover {
    border-color: color-mix(in srgb, var(--brand-primary, #d63939) 34%, var(--border, #e5e7eb));
    color: inherit;
}

/* =========================================================
   Docyla — imagens de produtos quadradas e preenchidas
   Painel administrativo
   ========================================================= */
.products-grid .product-image,
.products-grid .product-placeholder {
    width: 100%;
    height: auto !important;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 12px;
    background: #f3f4f6;
}

.products-grid img.product-image {
    object-fit: fill !important;
    object-position: center !important;
    display: block;
}

/* =========================================================
   Docyla — proteção responsiva das imagens de produtos no admin
   O quadro 1:1 nunca ultrapassa a largura interna do card.
   ========================================================= */
.products-grid,
.products-grid .product-card {
    min-width: 0;
}

.products-grid .product-card {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.products-grid .product-image,
.products-grid .product-placeholder {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    flex-shrink: 1;
}

.products-grid img.product-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block;
}

@media (max-width: 520px) {
    .products-grid {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .products-grid .product-card {
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
        overflow: hidden;
    }

    .products-grid .product-image,
    .products-grid .product-placeholder {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }
}

/* Ajustes de responsividade das configurações */
.settings-page-grid,
.settings-page-card,
.settings-card-heading,
.settings-card-heading > div,
#notificationSettingsCard,
#notificationSettingsCard * { min-width: 0; box-sizing: border-box; }

#notificationSettingsCard { overflow: visible; width: 100%; max-width: 100%; }
#notificationSettingsCard .notification-sound-row,
#notificationSettingsCard .notification-volume-field,
#notificationSettingsCard .notification-file-field {
    width: 100%; max-width: 100%; flex-wrap: wrap; align-items: flex-start;
}
#notificationSettingsCard .notification-sound-row > div,
#notificationSettingsCard .notification-volume-field > span:first-child,
#notificationSettingsCard .notification-file-field > div:first-child {
    flex: 1 1 220px; overflow-wrap: anywhere;
}
#notificationSettingsCard .notification-volume-control {
    min-width: 0; width: min(100%, 300px); flex: 1 1 220px;
}
#notificationSettingsCard .notification-volume-control input[type="range"] {
    width: 100%; min-width: 0; flex: 1 1 auto;
}
#notificationSettingsCard .notification-file-actions {
    width: auto; max-width: 100%; flex: 1 1 280px; justify-content: flex-end;
}
#notificationSettingsCard .notification-file-actions > * { max-width: 100%; }

@media (max-width: 1180px) {
    .settings-page-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .settings-page-header, .topbar { min-width: 0; overflow: visible; }
    .settings-page-header > div, .topbar > div { min-width: 0; max-width: 100%; }
    .settings-page-header h1, .settings-page-header p, .settings-user-chip { max-width: 100%; overflow-wrap: anywhere; }
    #notificationSettingsCard .notification-sound-row,
    #notificationSettingsCard .notification-volume-field,
    #notificationSettingsCard .notification-file-field { display: grid !important; grid-template-columns: minmax(0,1fr); gap: 12px; }
    #notificationSettingsCard .notification-volume-control,
    #notificationSettingsCard .notification-file-actions { width: 100%; max-width: none; }
    #notificationSettingsCard .notification-file-actions { display: grid; grid-template-columns: 1fr; }
}

/* Personalização unificada */
.personalization-main { min-width: 0; }
.personalization-grid { display:grid; grid-template-columns:minmax(0, .92fr) minmax(0, 1.35fr); gap:18px; align-items:start; padding-bottom:30px; }
.personalization-card { min-width:0; overflow:visible; }
.personalization-card h2 { margin:0 0 16px; }
.personalization-form { min-width:0; }
.personalization-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.personalization-fields label, .personalization-uploads label { display:grid; gap:7px; min-width:0; }
.personalization-fields .span-2 { grid-column:1/-1; }
.personalization-fields input, .personalization-uploads input, .admin-theme-mode select { width:100%; min-width:0; }
.personalization-uploads { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.personalization-checks { display:flex; flex-wrap:wrap; gap:12px 18px; margin:8px 0; }
.compact-branding-preview { max-width:100%; }
.form-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.theme-section-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:16px; }
.theme-section-heading h2 { margin:0; }
.admin-theme-mode { display:grid; gap:6px; min-width:180px; font-weight:700; }
.admin-theme-mode select { min-height:42px; border:1px solid var(--admin-border,var(--food-border)); border-radius:10px; background:var(--admin-input-bg,var(--food-card)); color:var(--admin-text-strong,var(--food-text)); padding:0 12px; }

@media (max-width: 1180px) { .personalization-grid { grid-template-columns:1fr; } }
@media (max-width: 640px) {
    .personalization-fields, .personalization-uploads { grid-template-columns:1fr; }
    .personalization-fields .span-2 { grid-column:auto; }
    .theme-section-heading { align-items:stretch; flex-direction:column; }
    .admin-theme-mode { min-width:0; width:100%; }
    .global-theme-actions .primary-btn { width:100%; }
}

/* Ícones Font Awesome e hover do menu */
.nav-btn > i, .sidebar-toggle > i, .mobile-nav-icon > i, .mobile-order-filter > span > i,
.mobile-orders-header button > i { width:22px; text-align:center; font-size:17px; transition:transform .18s ease; }
.nav-btn:hover > i { transform:translateX(3px) scale(1.06); }
.sidebar-toggle:hover > i { transform:rotate(90deg); }
.mobile-nav-item:hover .mobile-nav-icon > i { transform:translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
    .nav-btn > i, .sidebar-toggle > i, .mobile-nav-icon > i { transition:none !important; transform:none !important; }
}

/* Transição leve entre páginas. A entrada só começa depois de o tema global
   estar resolvido, evitando flashes com as cores-base entre uma tela e outra. */
body .main { opacity:0; transform:translateY(4px); transition:opacity .16s ease, transform .16s ease; }
html[data-theme-ready="true"] body.panel-page-ready .main { opacity:1; transform:none; }
body.panel-page-leaving .main { opacity:0; transform:translateY(3px); }
html:not([data-theme-ready="true"]) body .main { opacity:0 !important; }
@media (prefers-reduced-motion: reduce) {
    html[data-theme-ready="true"] body .main { opacity:1 !important; transform:none !important; transition:none !important; }
}


/* Salvaguarda final da tela de autenticação. */
body.login-body,
body.setup-body {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Orientação curta para senhas administrativas. */
.password-guidance {
    display: block;
    margin: -4px 0 14px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}


/* Correções finais de responsividade: controles compactos não são esticados. */
.user-form input[type="checkbox"],
.user-form input[type="radio"],
.personalization-checks input[type="checkbox"],
.personalization-checks input[type="radio"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 16px !important;
    border-radius: 4px;
}
.personalization-checks label {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: auto !important;
    max-width: 100%;
    margin: 0 !important;
    line-height: 1.35;
}
.personalization-checks { align-items:center; }

#notificationSettingsCard {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}
#notificationSettingsCard .notification-sound-row,
#notificationSettingsCard .notification-volume-field,
#notificationSettingsCard .notification-file-field {
    min-height: 0 !important;
    height: auto !important;
}
#notificationSettingsCard button,
#notificationSettingsCard input,
#notificationSettingsCard label,
#notificationSettingsCard span,
#notificationSettingsCard div { max-width: 100%; }

/* Menu: ícones sem bloco/fundo quadrado. */
.nav-btn > i,
.sidebar-toggle > i,
.mobile-nav-icon > i,
.mobile-order-filter > span > i,
.mobile-orders-header button > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    line-height: 1;
}

/* Mobile 2x2 consistente para controles que cabem lado a lado. */
@media (max-width: 640px) {
    .personalization-fields,
    .personalization-uploads {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    .personalization-fields .span-2 { grid-column: 1 / -1 !important; }
    .personalization-fields label,
    .personalization-uploads label {
        min-width: 0;
        margin: 0;
        align-content: start;
        overflow-wrap: anywhere;
    }
    .personalization-fields input,
    .personalization-fields select,
    .personalization-fields textarea,
    .personalization-uploads input {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }
    .personalization-uploads .field-upload {
        margin: 10px 0 0;
        min-width: 0;
        overflow: hidden;
    }
    .personalization-uploads input[type="file"] {
        font-size: 12px;
        overflow: hidden;
    }
    .personalization-checks {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 12px !important;
        align-items: start !important;
    }
    .personalization-checks label {
        width: 100% !important;
        min-width: 0;
        align-items: flex-start;
    }
    .settings-page-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    #notificationSettingsCard { grid-column: 1 / -1; }
    .settings-page-card { min-width: 0; padding: 13px; }
    .settings-card-heading,
    .settings-card-heading > div,
    .settings-card-heading h2,
    .settings-card-heading p,
    .settings-page-link,
    .settings-page-link strong,
    .settings-page-link span {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}
@media (max-width: 420px) {
    .personalization-card { padding-left: 12px; padding-right: 12px; }
    .personalization-fields,
    .personalization-uploads,
    .personalization-checks { gap: 8px !important; }
    .personalization-fields label,
    .personalization-uploads label,
    .personalization-checks label { font-size: 12px; }
    .personalization-fields input,
    .personalization-fields select,
    .personalization-fields textarea,
    .admin-theme-mode select { font-size: 14px; }
}

/* Evita flash da navegação com uma paleta anterior durante a troca de página. */
html:not([data-theme-ready="true"]) body .sidebar,
html:not([data-theme-ready="true"]) body .mobile-floating-nav,
html:not([data-theme-ready="true"]) body .mobile-orders-menu,
html:not([data-theme-ready="true"]) body .mobile-orders-backdrop {
    visibility: hidden !important;
}