@media (max-width:480px) {
    #complete-order-button-container {
        padding-top:10px;
    }
}


.nav-tabs .nav-item .nav-link {
    background-color: white;
    color: Gray;
}

.nav-tabs .nav-item .nav-link.active {
    background-color: #28a745;
    color: #FFF;
}

.tab-content {
    border: 1px solid #dee2e6;
    border-top: transparent;
    padding: 15px;
}

.tab-content .tab-pane {
    background-color: #FFF;
    min-height: 200px;
    height: auto;
}

/* ============================================================
   Dash UI polish (2026-07-18) — additive only, no markup changes.
   Shared tokens + refinement layered on top of Bootstrap/MDB.
   ============================================================ */
:root {
    --dash-green: #28a745;
    --dash-gray: #adb5bd;
    --dash-blue: #0d6efd;
    --dash-muted: #6c757d;
    --dash-line: #e4e8ee;
    --dash-radius: 10px;
    --dash-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
}

/* Order cards: consistent spacing, radius, subtle shadow */
.tab-content .card, .dash-page .card {
    border: 1px solid var(--dash-line);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow);
    margin-bottom: 14px;
    overflow: hidden;
}
.tab-content .card .card-header, .dash-page .card .card-header {
    background-color: #fbfcfd;
    border-bottom: 1px solid var(--dash-line);
    font-weight: 600;
}

/* State cue by tab (no markup change): #home=Active, #menu1=Completed, #menu2=Scheduled */
#home  .card { border-left: 4px solid var(--dash-green); }
#menu1 .card { border-left: 4px solid var(--dash-gray); }
#menu2 .card { border-left: 4px solid var(--dash-blue); }

/* Status chips (available for count badges / states) */
.dash-chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.5;
    background: #eef1f5;
    color: var(--dash-muted);
}
.dash-chip--active    { background: #e6f4ec; color: #1f8f5f; }
.dash-chip--completed { background: #eef1f5; color: var(--dash-muted); }
.dash-chip--scheduled { background: #e7f0ff; color: #0b5ed7; }

/* Tabs: keep the green active, add a count-badge look + clearer inactive */
.nav-tabs .nav-item .nav-link { border-radius: 0; }
.nav-tabs .nav-item .nav-link .count {
    font-weight: 600;
    opacity: .8;
}

/* Bigger tap targets on phones (merchants live on mobile) */
@media (max-width: 576px) {
    .tab-content .btn-sm {
        padding: .5rem .9rem;
        font-size: .95rem;
        width: 100%;
        margin-top: 6px;
    }
    .nav-tabs .nav-item .nav-link { padding: .6rem .25rem; }
}

/* Friendly empty state (used where a tab/list has no rows) */
.dash-empty {
    text-align: center;
    color: var(--dash-muted);
    padding: 48px 16px;
    font-size: .95rem;
}
.dash-empty .dash-empty-ico { font-size: 42px; line-height: 1; margin-bottom: 12px; }
.dash-empty .dash-empty-title { font-weight: 600; color: var(--dash-ink, #1b2330); font-size: 1.05rem; }
.dash-empty .dash-empty-sub { margin-top: 4px; }

/* Unified top nav: active link + consistent brand sizing */
.navbar .nav-link.active { color: var(--dash-green) !important; font-weight: 600; }
.navbar-brand img { max-height: 34px; width: auto; }

/* 3rd-party delivery provider badges — a branded pill instead of the plain word.
   Class is provider-badge--<lowercased provider name>. Drop-in ready for real logo
   SVGs later (add a background-image + text-indent per provider). */
.provider-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 6px;
    font-size: .82rem;
    font-weight: 700;
    color: #fff;
    background: #5a6b7b; /* neutral fallback so an unmapped provider is still visible */
    letter-spacing: .2px;
    line-height: 1.5;
    white-space: nowrap;
}
.provider-badge--doordash      { background: #eb1700; }
.provider-badge--uber          { background: #000; }
.provider-badge--ubereats      { background: #06c167; }
.provider-badge--grubhub       { background: #f63440; }
.provider-badge--firstdelivery { background: #5a6b7b; }
.provider-badge--stream        { background: #6c5ce7; }
.provider-badge--postmates     { background: #0f0f0f; }

/* ============================================================
   Dash chrome refinement (2026-07-18, pass 2) — additive.
   Soft ground so white cards read as cards; center + constrain
   the order board; refine the nav and card typography.
   ID/child selectors keep specificity above the page's inline
   <style> (.container{max-width:100%;padding:0}) without editing it.
   ============================================================ */
body { background: #f1f4f8; color: var(--dash-ink, #1b2330); }
:root { --dash-ink: #1b2330; }

/* Center + constrain ONLY the outer board container (direct child of
   #content_div_id). Inner card .container elements are deeper, untouched. */
#content_div_id > .container {
    max-width: 960px;
    margin: 22px auto 48px;
    padding: 0 16px;
}

/* Kill the large legacy top margins so the nav sits at the very top */
#content_div_id.mt-6 { margin-top: 0 !important; }
.dash-nav.mt-5 { margin-top: 0 !important; }

/* Top nav: sticky white bar, hairline base, quiet pill links */
.dash-nav {
    background: #fff !important;
    border-bottom: 1px solid var(--dash-line);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
    padding: .55rem 1.25rem;
    position: sticky;
    top: 0;
    z-index: 1030;
}
.dash-nav .navbar-brand img { max-height: 40px; width: auto; }
.navbar .nav-link {
    color: #55606e;
    font-weight: 500;
    font-size: .95rem;
    padding: .4rem .8rem !important;
    margin-left: 3px;
    border-radius: 8px;
    transition: background .12s, color .12s;
}
.navbar .nav-link:hover { background: #eef2f7; color: #1b2330; }
.navbar .nav-link.active {
    color: #28a745 !important;
    font-weight: 700;
    background: #e9f6ee;
}

/* Tabs: rounded top corners on the group, tighter type */
.nav-tabs { border-bottom: 1px solid var(--dash-line); }
.nav-tabs .nav-item .nav-link { border-color: var(--dash-line); }
.nav-tabs .nav-item:first-child .nav-link { border-top-left-radius: var(--dash-radius); }
.nav-tabs .nav-item:last-child  .nav-link { border-top-right-radius: var(--dash-radius); }

/* Tab content shell: connect to the tabs, soften edges */
.tab-content {
    border: 1px solid var(--dash-line);
    border-top: 0;
    border-radius: 0 0 var(--dash-radius) var(--dash-radius);
    background: #fff;
    padding: 16px;
}

/* Card typography + spacing */
.tab-content .card .card-header, .dash-page .card .card-header {
    padding: .6rem 1rem;
    font-size: .92rem;
    letter-spacing: -.005em;
}
.tab-content .card .card-body { padding: .85rem 1rem; }
.tab-content .card .card-body .col-12.font-weight-bold { font-size: 1.02rem; }

/* FUTURE ORDER flag: a small pill instead of loud red text */
.tab-content .text-danger {
    display: inline-block;
    background: #fdecec;
    color: #c0392b !important;
    font-weight: 700;
    font-size: .68rem;
    letter-spacing: .04em;
    padding: 1px 7px;
    border-radius: 999px;
    vertical-align: middle;
}

/* Action buttons: keep the Bootstrap green, just a touch more presence */
.tab-content .btn-success.btn-sm {
    font-weight: 600;
    padding: .4rem .95rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}


/* Shared content column for growth/courier (mirrors the orders board width) */
.dash-page {
    max-width: 960px;
    margin: 22px auto 48px;
    padding: 0 16px;
}
.dash-page .cd-wrap, .dash-page.cd-wrap { margin: 0 auto; }

/* ============================================================
   Mobile nav (<= 991px) — verified against a 390px frame.
   The default navbar overflows on phones: the always-visible right
   links run off-screen (Settings clipped, Logout gone) and the logo
   hides behind the hamburger. Force a clean stacked layout instead:
   logo on top, all links spread evenly across one full-width row.
   ============================================================ */
@media (max-width: 991px) {
    .dash-nav { padding: .4rem .5rem; }
    .dash-nav .container-fluid {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .dash-nav .navbar-toggler { display: none !important; }
    .dash-nav .navbar-collapse {
        display: flex !important;   /* override Bootstrap's collapsed display:none */
        flex: 0 0 auto;
        justify-content: center;
    }
    .dash-nav .navbar-collapse .navbar-nav { display: none; }
    .dash-nav .navbar-brand { margin: 0; }
    .dash-nav .navbar-brand img { max-height: 30px; }
    .dash-nav .d-flex.align-items-center {
        width: 100%;
        justify-content: space-between;
        gap: 2px;
        margin: 0;
    }
    .dash-nav .d-flex.align-items-center .nav-link {
        padding: .35rem .4rem !important;
        font-size: .84rem;
        margin-left: 0;
    }
    /* Tighten the board gutter on phones */
    #content_div_id > .container { margin-top: 14px; padding: 0 10px; }
}