/* Dropfood role design contract. Shared tokens, with a shell suited to each role. */
:root {
    --df-brand: #06c167;
    --df-action: #087f46;
    --df-action-hover: #066437;
    --df-action-soft: #eaf7ef;
    --df-background: #f6f7f6;
    --df-surface: #fff;
    --df-text: #17221b;
    --df-muted: #59645d;
    --df-border: #dfe5e1;
    --df-radius: 16px;
    --df-control-radius: 10px;
    --df-shadow: 0 2px 8px rgb(23 34 27 / 4%);
    --df-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --dash-bg: var(--df-background);
    --dash-card-bg: var(--df-surface);
    --dash-text: var(--df-text);
    --dash-text-muted: var(--df-muted);
    --dash-border: var(--df-border);
}

.df-app {
    font-family: var(--df-font);
    color: var(--df-text);
    background: var(--df-background);
    line-height: 1.6;
    --uber-bg: var(--df-background);
    --uber-text: var(--df-text);
    --uber-text-secondary: var(--df-muted);
    --uber-green: var(--df-action);
    --uber-green-hover: var(--df-action-hover);
    --uber-border: var(--df-border);
    --dash-orange: var(--df-action);
}

.df-app *, .df-app *::before, .df-app *::after { box-sizing: border-box; }
.df-app [hidden] { display: none !important; }
.df-app a, .df-app button, .df-app input, .df-app select, .df-app textarea { -webkit-tap-highlight-color: transparent; }
.df-app :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--df-action);
    outline-offset: 3px;
}
.df-app button:disabled { cursor: not-allowed; opacity: .55; }
.df-app .df-main:focus { outline: none; }
.df-skip-link { position: fixed; top: -80px; left: 16px; z-index: 20000; padding: 12px 20px; border-radius: 10px; background: var(--df-text); color: #fff !important; }
.df-skip-link:focus { top: 12px; }

/* The same customer header and navigation are rendered on shopping and account routes. */
.df-header { min-height: 84px; gap: 20px; }
.df-header .brand > span { color: var(--df-text); font-size: 25px; letter-spacing: -1.1px; }
.df-header .brand > span > span { color: var(--df-brand) !important; }
.df-header .header-nav { gap: 14px; }
.df-header .header-center { min-width: 0; }
.df-header .basket-btn { min-height: 44px; background: var(--df-text); color: #fff; }
.df-header .nav-link { color: var(--df-muted); font-size: 13px; font-weight: 650; }
.df-header .account > summary { min-height: 44px; }
.df-header .df-nav-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.df-header .account > div { min-width: 240px; border-radius: var(--df-radius); border-color: var(--df-border); box-shadow: 0 12px 36px rgb(23 34 27 / 12%); }
.df-header .account > div a { min-height: 44px; font-size: 13px; }
.df-workspace-label { display: inline-flex; align-items: center; gap: 10px; color: var(--df-muted); font-size: 14px; font-weight: 650; margin-right: auto; }
.df-workspace-label i { color: var(--df-action); }
.df-workspace-nav { background: var(--df-surface); border-bottom: 1px solid var(--df-border); }
.df-workspace-nav__inner { display: flex; align-items: center; gap: 6px; max-width: 1440px; margin: 0 auto; padding: 10px 32px; overflow-x: auto; scrollbar-width: thin; }
.df-workspace-link { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 14px; border-radius: 10px; color: var(--df-muted); font-size: 13px; font-weight: 650; text-decoration: none !important; white-space: nowrap; }
.df-workspace-link i { font-size: 14px; }
.df-workspace-link:hover { background: var(--df-background); color: var(--df-text); }
.df-workspace-link.is-active { color: var(--df-action); background: var(--df-action-soft); box-shadow: inset 0 0 0 1px #c8e6d3; }
.df-branch-name { padding: 0 16px; border-left: 1px solid var(--df-border); color: var(--df-muted); font-size: 13px; font-weight: 650; white-space: nowrap; }
.df-app .df-main { flex: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: 32px; min-width: 0; }
.df-app .df-main > :first-child { margin-top: 0; }
.df-page-heading { margin-bottom: 28px; }
.df-page-heading h1 { font-size: clamp(26px, 2.5vw, 32px); font-weight: 800; line-height: 1.25; letter-spacing: -.8px; margin: 6px 0 0; }
.df-eyebrow { color: var(--df-action); font-size: 12px; font-weight: 750; letter-spacing: .7px; }
.df-app :is(.panel, .dash-card) { border-radius: var(--df-radius); border-color: var(--df-border); box-shadow: var(--df-shadow); }
.df-app .panel { padding: 24px; }
.df-app :is(.button, .btn-primary, .btn-custom) { min-height: 44px; border-radius: var(--df-control-radius); background: var(--df-action); border-color: var(--df-action); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.df-app :is(.button, .btn-primary, .btn-custom):hover { background: var(--df-action-hover); border-color: var(--df-action-hover); color: #fff; transform: none; }
.df-app .button.secondary { background: #fff; border: 1px solid var(--df-border); color: var(--df-text); }
.df-app .button.secondary:hover { background: var(--df-background); border-color: #b9c9bf; color: var(--df-text); }
.df-app .button.secondary :is(i, svg) { color: inherit; }
.df-app .button.secondary.danger { background: #fff1f0; color: #b91c1c; border-color: #fecaca; }
.df-app .button.secondary.danger:hover { background: #fee2e2; color: #991b1b; }
.df-app .button.small { min-height: 40px; font-size: 13px; }
.df-app .notice { border-radius: 12px; border: 1px solid #c8e6d3; background: var(--df-action-soft); color: #14532d; font-size: 14px; }
.df-app .notice.error { background: #fff1f0; border-color: #fecaca; color: #a52a22; }
.df-app .badge { font-size: 12px; line-height: 1.4; border-radius: 8px; }
.df-app .footer { margin-top: auto; }
.df-app .footer-links-grid { display: flex; flex-wrap: wrap; align-content: center; gap: 16px 24px; }
.df-app .footer-links-grid a { color: #e4eae6; font-size: 13px; }
.df-app .promo-card-hidden { display: none; }

/* Account primitives are scoped so Bootstrap and retained page styles do not restyle shopping. */
.customer-account { min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.customer-account .container { width: 100%; max-width: none; padding-inline: 0; }
.customer-account :is(h1, h2, h3, h4, h5, h6) { color: var(--df-text); font-family: var(--df-font); }
.customer-account h1 { font-size: clamp(26px, 2.5vw, 32px); font-weight: 800; letter-spacing: -.8px; line-height: 1.25; }
.customer-account :is(.card, .settings-card, .wallet-card, .support-card, .order-card, .address-card, .glass-card, .dash-card) { background: #fff; color: var(--df-text); border: 1px solid var(--df-border); border-radius: var(--df-radius); box-shadow: var(--df-shadow); }
.customer-account :is(.settings-card, .support-card, .wallet-card) { padding: 24px; }
.customer-account .address-card.is-default { background: var(--df-action-soft); border-color: #91c6a5; }
.customer-account .address-card:hover { transform: none; box-shadow: 0 4px 14px rgb(23 34 27 / 7%); }
.customer-account :is(.address-content h4, .form-section h5, .settings-nav-item, .payment-method-title, .conversation-item) { color: var(--df-text); }
.customer-account .settings-nav-item:hover { background: var(--df-background); color: var(--df-text); }
.customer-account .settings-nav-item.active { color: var(--df-action); background: var(--df-action-soft); }
.customer-account .form-label { color: var(--df-muted); font-size: 13px; font-weight: 650; letter-spacing: 0; text-transform: none; }
.customer-account :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), select, textarea) { background: #fff; color: var(--df-text); border: 1px solid #cbd5ce; border-radius: var(--df-control-radius); min-height: 46px; padding: 11px 14px; font-size: 14px; }
.customer-account :is(input, select, textarea):focus { background: #fff; color: var(--df-text); border-color: var(--df-action); box-shadow: 0 0 0 3px rgb(8 127 70 / 12%); }
.customer-account input::placeholder, .customer-account textarea::placeholder { color: #707c74; }
.customer-account :is(.text-slate-300, .text-slate-400, .text-slate-500, .text-slate-600) { color: var(--df-muted); }
.customer-account .text-white:not(.btn):not(.btn *):not(button):not(button *):not(.badge):not(.badge *):not([class*="bg-"]):not([class*="bg-"] .text-white) { color: var(--df-text) !important; }
.customer-account :is(h1, h2, h3, h4, h5, h6).text-white { color: var(--df-text) !important; }
.customer-account .dash-table td { background: #fff; color: var(--df-text); border-bottom: 1px solid var(--df-border) !important; }
.customer-account .dash-table th { color: var(--df-muted); font-size: 12px; letter-spacing: 0; text-transform: none; }
.customer-account .status-pill { padding: 5px 10px; font-size: 12px; font-weight: 700; }
.customer-account :is(.status-delivered, .status-completed) { color: #166534; background: #ecf8ef; }
.customer-account :is(.status-in-progress, .status-pending) { color: #92400e; background: #fffbeb; }
.customer-account :is(.status-picked-up, .status-assigned) { color: #1e40af; background: #eff6ff; }
.customer-account :is(.status-cancelled, .status-failed) { color: #b91c1c; background: #fff1f0; }
.customer-account .address-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.customer-account .row:not([class*="gap-"]) { gap: 0; }
.customer-account .grid-cols-1 { grid-template-columns: minmax(0, 1fr); }
.customer-account .grid { min-width: 0; }
.customer-account .grid > * { min-width: 0; }
.customer-account .balance-card { background: var(--df-action-soft); color: var(--df-text); box-shadow: var(--df-shadow); }
.customer-account .balance-card :is(.text-white, .balance-label, .balance-amount) { color: var(--df-text) !important; }
.customer-account :is(.btn-save, .btn-save-main) { min-height: 44px; border-radius: var(--df-control-radius); background: var(--df-action); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.df-customer #locationPickerModal .modal-content { background: #fff; color: var(--df-text); border: 1px solid var(--df-border); border-radius: 20px; }
.df-customer #locationPickerModal :is(h6, .text-white) { color: var(--df-text) !important; }
.df-customer #locationPickerModal [class*="text-white/"] { color: var(--df-muted); }
.df-customer #locationPickerModal [class*="bg-white/"] { background: var(--df-background); }
.df-customer #locationPickerModal .bg-brand-orange { color: #fff !important; }
.customer-account .btn-secondary { background: var(--df-text); border-color: var(--df-text); color: #fff; }
.customer-account .btn-outline-secondary { background: #fff; border-color: var(--df-border); color: var(--df-text); }
.customer-account .btn-default { color: var(--df-text); background: #eef3ef; }

/* Operational roles share the same surfaces and controls; their sidebar stays available. */
.df-driver .sidebar, .df-company .sidebar, .df-admin .sidebar { border-color: var(--df-border); }
.df-driver .nav-item { min-height: 46px; font-size: 13px; border-radius: 10px; }
.df-driver .nav-item.active { background: var(--df-action-soft); color: var(--df-action); font-weight: 750; box-shadow: inset 0 0 0 1px #c8e6d3; }
.df-driver .sidebar { padding: 24px 18px; }
.df-driver .sidebar-logo-container { margin-bottom: 24px; }
.df-driver .sidebar-logo-collapsed { display: none; }
.df-sidebar-close, .df-sidebar-backdrop { display: none; }
.df-driver .top-bar { height: 80px; padding: 16px 32px; }
.df-driver .content-area { padding: 108px 32px 32px; width: 100%; max-width: 1600px; margin-inline: auto; min-width: 0; }
.df-driver .main-wrapper { background: var(--df-background); }
.df-driver .content-area > div { min-width: 0; }
.df-driver .content-area :is(h1, h2).text-3xl { font-size: 30px; line-height: 1.25; letter-spacing: -.75px; font-weight: 800; }
.df-driver .content-area :is(.text-\[9px\], .text-\[10px\]) { font-size: 12px; letter-spacing: .2px; }
.df-driver .content-area :is(.tracking-widest, .tracking-\[3px\], .tracking-\[2px\]) { letter-spacing: .3px; }
.df-driver .content-area .font-black { font-weight: 750; }
.df-driver .content-area :is(.rounded-3xl, .rounded-\[32px\]) { border-radius: var(--df-radius); }
.df-driver .content-area .shadow-2xl { box-shadow: var(--df-shadow); }
.df-driver .content-area :is(button, a).uppercase { text-transform: none; letter-spacing: 0; }
.df-driver .content-area button:not(.sr-only) { min-height: 40px; }
.df-driver .content-area :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea) { min-height: 44px; font-size: 14px; }
.df-app [class~="bg-[#06C167]"], .df-app .bg-dash-orange, .df-app .bg-brand-orange { background-color: var(--df-action) !important; color: #fff; }
.df-app [class~="text-[#06C167]"], .df-app .text-dash-orange, .df-app .text-brand-orange { color: var(--df-action); }
.df-driver .bottom-nav { height: calc(68px + env(safe-area-inset-bottom)); }
.df-driver .mobile-nav-item { min-width: 54px; min-height: 44px; justify-content: center; font-size: 11px; }
.df-driver .mobile-nav-item.active { color: var(--df-action); }
.df-avatar-initial { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; background: var(--df-action-soft); color: var(--df-action); font-size: 15px; font-weight: 750; }
.df-app .account-dropdown__menu { background: #fff; border-color: var(--df-border); box-shadow: 0 12px 36px rgb(23 34 27 / 12%); }
.df-app .account-dropdown__item { color: var(--df-text); min-height: 44px; }
.df-app .account-dropdown__heading { color: var(--df-muted); }
.df-app .account-dropdown__item:hover { color: var(--df-action); background: var(--df-action-soft); }
.df-app .account-dropdown__logout { color: #b91c1c; }
.df-app .account-dropdown__switch, .df-app .account-dropdown__footer { border-color: var(--df-border); }
.df-app .dash-swal-popup { background: #fff !important; color: var(--df-text) !important; border: 1px solid var(--df-border) !important; border-radius: 20px !important; font-family: var(--df-font) !important; }
.df-app .dash-swal-title { color: var(--df-text) !important; }
.df-app .dash-swal-content { color: var(--df-muted) !important; }
.df-app .dash-swal-confirm { background: var(--df-action) !important; color: #fff !important; font-size: 14px !important; text-transform: none !important; letter-spacing: 0 !important; min-height: 44px; }
.df-app .dash-swal-cancel { background: #eef1ee !important; color: var(--df-text) !important; font-size: 14px !important; text-transform: none !important; letter-spacing: 0 !important; min-height: 44px; }

/* Restaurant tabs retain the menu editor's tools inside the common role navigation. */
.df-restaurant .ue-manager-wrapper { padding: 0 0 32px; gap: 24px; }
.df-restaurant .ue-portal-sidebar { top: 110px; border-radius: var(--df-radius); }
.df-restaurant .ue-kpi-card { border-radius: var(--df-radius); box-shadow: var(--df-shadow); }
.df-restaurant .ue-sidebar-link { min-height: 44px; font-size: 13px; }
.df-restaurant .ue-sidebar-link.active { color: var(--df-action); background: var(--df-action-soft); }

@media (min-width: 768px) {
    .customer-account .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .customer-account .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
    .df-header { gap: 12px; }
    .df-header .header-nav { gap: 8px; }
    .df-header .desktop-nav-link { display: none; }
}
@media (max-width: 1024px) {
    .df-header { flex-wrap: wrap; gap: 12px; }
    .df-header .header-center { order: 3; flex: 0 0 100%; width: 100%; margin: 4px 0 0; justify-content: space-between; }
    .df-header .header-nav { margin-left: auto; }
    .df-driver .top-bar { height: 72px; padding: 12px 16px; }
    .df-driver .df-sidebar-close { display: flex; align-items: center; justify-content: center; position: absolute; top: 20px; right: 12px; width: 36px; height: 36px; border: 1px solid var(--df-border); border-radius: 10px; background: #fff; color: var(--df-text); }
    .df-driver .df-sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 9999; background: rgb(23 34 27 / 40%); border: 0; }
    .df-driver.df-sidebar-open { overflow: hidden; }
    .df-driver .sidebar-logo-container { padding-right: 28px; }
    .df-driver .content-area { padding: 96px 20px 24px; }
    .df-driver .main-wrapper { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
    .df-driver .top-bar > .flex { gap: 12px; min-width: 0; }
    .df-driver .top-bar .pl-4 { padding-left: 12px; }
}
@media (max-width: 767px) {
    .df-app .df-main { padding: 24px 16px; }
    .df-header { padding-inline: 16px; }
    .df-header .header-center { flex: 0 0 100%; width: 100%; margin: 4px 0 0; justify-content: space-between; }
    .df-header .header-nav { margin-left: auto; }
    .df-header .location-selector { min-width: 0; }
    .df-header .location-label-wrapper { min-width: 0; }
    .df-header .location-timing-label, .df-header .location-dot-divider { display: none; }
    .df-workspace-nav__inner { padding: 8px 16px; gap: 4px; }
    .df-workspace-link { padding: 10px 12px; font-size: 12px; }
    .df-workspace-nav, .df-workspace-nav__inner { width: 100%; min-width: 0; max-width: 100vw; }
    .df-workspace-label { font-size: 12px; }
    .df-restaurant .df-header .brand > span { font-size: 22px; }
    .df-restaurant .df-header .header-nav > .desktop-account { display: none; }
    .df-app .panel { padding: 20px; }
    .df-app .footer-links-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
    .customer-account :is(.settings-card, .support-card, .wallet-card) { padding: 20px; }
    .customer-account .settings-grid { grid-template-columns: minmax(0, 1fr); }
    .customer-account .settings-nav { flex-direction: row; overflow-x: auto; padding-bottom: 6px; }
    .customer-account .settings-nav-item { flex-shrink: 0; padding: 10px 12px; font-size: 13px; }
    .df-driver .content-area { padding: 92px 16px 24px; }
    .df-driver .content-area :is(h1, h2).text-3xl { font-size: 26px; }
    .df-driver .top-bar > .flex { gap: 8px; }
    .df-driver #driver-shift-toggle, .df-driver #driver-sos-trigger { min-width: 40px; }
}
@media (max-width: 380px) {
    .df-header .brand > span { font-size: 22px; }
    .df-header { gap: 8px; }
    .df-workspace-label { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .df-app *, .df-app *::before, .df-app *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}