/* ============================================================================
   New World Kitchen — Dashboard stylesheet
   ============================================================================
   Used by:
     - index.php  (login screen + main dashboard)
     - delivery-email.php

   Page-specific styles that don't fit the shared visual language stay in their
   respective files as small inline <style> blocks. See:
     - delivery-email.php (.btn-schedule-large, .container-narrow override, etc.)

   When editing: keep selectors here only if they're either (a) shared between
   pages, or (b) clearly part of the dashboard's visual primitives (buttons,
   forms, tables, modals, layout). One-off page-specific rules belong inline.
============================================================================ */


/* ============================================================================
   Reset + variables
============================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth !important; }

:root {
    --green-dark:   #2a4a2e;
    --green-mid:    #3d6b42;
    --green-brand:  #65b16e;
    --green-muted:  #559162;
    --green-light:  #e8f0e9;
    --green-pale:   #f4f8f4;
    --amber:        #c17f3a;
    --amber-light:  #fdf3e7;
    --text-primary: #1a2e1b;
    --text-muted:   #5a7060;
    --text-light:   #8a9e8c;
    --border:       #d0ddd2;
    --white:        #ffffff;
    --radius:       12px;
    --radius-sm:    6px;

    /* Alias for legacy references — earlier versions of the code used
       --primary-color; defining it here so those references resolve to the
       intended dark green rather than falling back to currentColor. */
    --primary-color: var(--green-dark);
}

/* Base body — note: the login screen overrides this with its own centering
   rules using the .login-page class on <body>. See "Login screen" below. */
body {
    font-family: 'DM Sans', sans-serif;
    background: var(--green-pale);
    color: var(--text-primary);
    min-height: 100vh;
    padding: 0 0 60px;
}


/* ============================================================================
   Login screen
   Activated when <body class="login-page">. Resets the dashboard body's
   normal-flow layout to a centered card.
============================================================================ */
body.login-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.login-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 40px 36px;
    width: 100%;
    max-width: 360px;
    text-align: center;
}
.login-card img { height: 48px; margin-bottom: 20px; }
.login-card h1 {
    font-family: "Jost", sans-serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--green-dark);
    margin-bottom: 6px;
}
.login-card p {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 24px;
}
.login-card input[type="password"],
.login-card input[type="text"] {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    color: var(--text-primary);
    margin-bottom: 14px;
    outline: none;
}
.login-card input[type="password"]:focus { border-color: var(--green-mid); }
.login-card button {
    width: 100%;
    background: var(--green-dark);
    color: var(--green-light);
    border: none;
    border-radius: var(--radius-sm);
    padding: 11px;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.login-card button:hover { background: var(--green-mid); }
.error-msg {
    color: #991b1b;
    font-size: 13px;
    margin-bottom: 12px;
}


/* ============================================================================
   Customer / address display (used inside delivery and pickup tables)
   These were previously duplicated in the login <style> block, where they
   couldn't take effect on the dashboard because :root was unreachable. Now
   the canonical rules live here and apply on both pages.
============================================================================ */
.customer-stack {
    flex-direction: column;
    gap: 2px;
   line-height: 1.1;
   font-weight: 400;
}
.customer-stack br {
  display: none;
}
.name-line {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 2px;
}
.email-line {
    display: block;
    font-size: 14px;
    width: fit-content;
    color: var(--primary-color);
    cursor: pointer;
    text-decoration: none;
    padding: 2px 4px;
    margin-left: -4px;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}
.email-line:hover {
    background-color: rgba(90, 112, 96, 0.1);
    text-decoration: underline;
}
.copy-success {
    color: #2e7d32 !important;
    font-weight: bold;
    transition: all 0.2s;
}
.phone-line {
    font-size: 12px;
    margin-top: 2px;
}
.pulse-dot {
    height: 8px;
    width: 8px;
    background-color: var(--green-mid);
    border-radius: 50%;
    display: inline-block;
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(61, 107, 66, 0.7); }
    70%  { transform: scale(1);    box-shadow: 0 0 0 6px rgba(61, 107, 66, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(61, 107, 66, 0); }
}


/* ============================================================================
   Draggable delivery rows
   These were in the login <style> block, meaning they were dead on the
   dashboard. Moved here so .draggable-row actually gets cursor/outline/opacity
   feedback when dragged.
============================================================================ */
.draggable-row { cursor: grab; }
.draggable-row:active { cursor: grabbing; }
.draggable-row.drag-over { outline: 2px dashed var(--green-mid); outline-offset: -2px; background: var(--green-light); }
.draggable-row.dragging { opacity: 0.4; }


/* ============================================================================
   Print rules (login-block versions; main block has its own where applicable)
============================================================================ */
@media print {
    /* Hide everything except the summary tables */
    .sidebar, .nav-header, .btn, .notice-bar, .filters { display: none !important; }
    body { background: white; color: black; }
    #totals .items-total:nth-child(2) { width: 100% !important; border: none !important; }
}


/* ============================================================================
   Header (shared between dashboard and delivery-email)
============================================================================ */
.header {
    background: white;
    padding: 20px 32px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--border);
}
.header a { padding-top: 6px; }
.header img { margin-right: 10px; }
.header-logo { height: 44px; width: auto; }



/* ============================================================================
   Dashboard styles (extracted verbatim from index.php main <style> block)
   Original line range in index.php: 666–1358
============================================================================ */

a {
    color: var(--green-dark);
}
a:hover {
    color: var(--green-mid);
}
.header-title {
    font-family: "Jost", sans-serif;
    font-weight: bold !important;
    color: var(--green-dark);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 27px;
    min-width: 170px;
}
.header-subtitle {
    color: #8aad8c;
    font-size: 13px;
    margin-top: 2px;
}

/* Main layout */
.container {
    max-width: 90%;
    margin: 0 auto;
    padding: 0px 24px 0;
}

/* Date picker card */
.fetch-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 28px;
    margin: 28px 0;
}
.fetch-card h2 {
    font-family: "Jost", sans-serif;
    font-size: 17px;
    font-weight: bold;
    color: var(--green-dark);
    margin-bottom: 16px;
}
/* ── Collapsible menu list ── */
.menu-list {
    float: right;
    width: 38%;
    margin: 0 0 20px 20px;
    background: var(--green-light);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    overflow: hidden;
}
.menu-list-header {
    display: block;
    padding: 10px 16px;
    font-family: "Jost", sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--green-dark);
    cursor: pointer;
    user-select: none;
    list-style: none;
}
.menu-list-header::-webkit-details-marker { display: none; }
.menu-refresh-btn {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s, transform 0.4s;
    vertical-align: middle;
    margin-left: 6px;
    background: none;
    border: none;
    padding: 0;
    color: var(--green-dark);
}
.menu-refresh-btn:hover { opacity: 1; }
.menu-refresh-btn.spinning svg { animation: spin 0.8s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.menu-list-header::before {
    content: '▶ ';
    font-size: 10px;
    display: inline-block;
    transition: transform 0.2s;
}
details.menu-list[open] .menu-list-header::before {
    transform: rotate(90deg);
}
.menu-list-body {
    padding: 4px 16px 12px;
    border-top: 1px solid var(--border);
}
.menu-list-section {
    margin: 6px 0;
    font-size: 0.7em;
    line-height: 1.5;
    color: var(--text-primary);
}
.menu-list-section strong {
    color: var(--green-dark);
}
.menu-product-link {
    color: var(--text-primary);
    text-decoration: none;
}
.menu-product-link:hover {
    color: var(--green-dark);
    text-decoration: underline;
}
.date-row {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}
.date-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.date-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.date-group input[type="date"] {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--white);
    outline: none;
    transition: border-color 0.15s;
}
.date-group input[type="date"]:focus {
    border-color: var(--green-mid);
}
.btn,
.btn:hover {
    color: white;
}
.btn-fetch, .btn-secondary, .btn-primary {
    background: var(--green-dark);
    color: #e8f0e9;
    border: none;
    border-radius: 6px;
    padding: 10px 18px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.btn-fetch:hover { background: var(--green-mid); }
.btn-secondary {
    background-color: #65b16e;
    color: white;
}
.btn-secondary:hover {
    background-color: #439748;
}
/* Error */
.error-box {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius);
    padding: 16px 20px;
    color: #991b1b;
    font-size: 14px;
    margin-bottom: 24px;
}

/* Summary stats */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
.stat-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    text-align: center;
}
.gift-card.stat-card {
    width: 100%;
    font-size: 0.5em !important;
}
.stat-number {
    font-family: "Jost", sans-serif;
    font-size: 36px;
    font-weight: bold;
    color: var(--green-dark);
    line-height: 1;
    margin-bottom: 6px;
}
.gift-card .stat-number {
    font-size: 1em;    
}
.stat-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
}
.stat-card.delivery .stat-number { color: var(--amber); }
.stat-card a {
    text-decoration: none;
}
/* Section headers */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    width: 100%;
}
.section-title {
    font-family: "Jost", sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: var(--green-dark);
    display: flex;
    align-items: center;
    gap: 10px;
}
.delivery-print-schedule-buttons {
  display: flex;
  justify-content: flex-end;
  align-self: flex-end;
  margin-left: auto;
  gap: 10px;
}
.section-pickup {
    margin-top: 12px;
}
.badge {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 99px;
}
.badge-pickup {
    background: #d1e2d9;
    color: var(--green-dark);
}
.badge-delivery {
    background: var(--amber-light);
    color: var(--amber);
}

/* Copy button */
.btn-copy, .btn-copy-email {
    background: var(--green-dark);
    color: #e8f0e9;
    border: none;
    border-radius: 6px;
    padding: 10px 18px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.email-group .btn-copy-email {
        border: 1px solid var(--border);
        display:inline;
        padding: 7px 8px 4px;
        margin-left: 6px;
        color: white;
}
.btn-copy:hover, .btn-copy-email:hover,
.update-menu-btn:hover  {
    background: var(--green-mid);
    color: white;
}
.btn-copy.copied {
    border-color: var(--green-mid);
    color: white;
    font-weight: bold;
    text-transform: uppercase;
}

/* Tables */
.table-wrap {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 32px;
}
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
thead th {
    background: var(--green-light);
    padding: 11px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--green-dark);
    border-bottom: 1px solid var(--border);
}
tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f4f0;
    vertical-align: top;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--green-pale); }
.order-number {
    font-weight: 600;
    color: var(--green-dark);
}
.customer-name {
    font-weight: 500;
}
.email-cell {
    color: var(--text-muted);
    font-size: 13px;
}
.items-cell {
    color: var(--text-muted);
    font-size: 13px;
    max-width: 280px;
}
.items-list {
    list-style: none;
}
.items-list li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.phone-cell {
    color: var(--text-muted);
    font-size: 13px;
    white-space: nowrap;
}
.address-cell {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
    text-transform: capitalize;
}
.zone-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.zone-1 { background: #e8f0e9; color: #2a4a2e; }
.zone-2 { background: #fdf3e7; color: #8a4a00; }
.zone-3 { background: #eef0fd; color: #2a3580; }

/* Delivery section accent */
.section-delivery .section-title { color: var(--amber); }
thead.delivery-head th {
    background: var(--amber-light);
    color: var(--amber);
    border-bottom-color: #f5d8a8;
}

/* Delivery section column widths */
#driver-sort-th,
#addr-sort-th,
#window-th {
width: 180px;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-light);
    font-size: 14px;
}

/* Hidden email lists for copy */
.email-list-hidden { display: none; }

/* Window input for delivery */
.window-input {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    width: 140px;
    color: var(--text-primary);
    background: var(--white);
}
.window-input:focus {
    outline: none;
    border-color: var(--amber);
}
.unfulfilled-txt {
    display:none;
}
.unfulfilled-view .unfulfilled-txt {
        display:inline-block;
}
.unfulfilled-view .total-txt,
.unfulfilled-view .gift-card {
    display: none;
}
.gv-link {
    color: var(--text-primary); /* Keeps it matching your other text */
    text-decoration: none;
    transition: color 0.15s ease;
}

.gv-link:hover{
    color: #2e7d32; /* A subtle Google Voice green */
    text-decoration: underline;
}

.text-muted {
    color: #999;
}
.order-link, .name-line {
    font-weight: bold;
}
.driver-select {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 5px 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    width: 160px;
    color: var(--text-primary);
    background: var(--white);
    cursor: pointer;
}

.driver-select:focus {
    outline: none;
    border-color: var(--amber);
}

.window-input {
    width: 140px;
}
.sales-total {
   font-family: "Jost", sans-serif;
    margin-top: 5px;
    margin-left: 20px;
        font-family: Jost;
        font-weight: bold;
        font-size: 24px;
        line-height: 20px;
    }
.sales-total-txt {
    font-size: 14px;
}
.order-highlights {
    margin-left: 20px;
}
.section-delivery button:hover,
.section-delivery a.btn:hover,
.generate-menu-email-btn:hover {
    background: #ce9255 !important;
}
.routing-tools h3 {
    font-family: "Jost", sans-serif;
    font-weight: bold;
}
.routing-tools button:hover {
    background: #898989 !important;
}
.item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.item-links {
    display: none;
    gap: 4px;
    font-size: 9px;
}
.item-row:hover .item-links {
    display: inline-flex;
}
.item-links a {
    color: var(--green-mid);
    text-decoration: none;
    font-weight: 600;
    padding: 0px 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--white);
    line-height: 1.6;
}
.item-links a:hover {
    border-color: var(--green-mid);
    background: var(--green-light);
}
.item-totals {
    display:flex;
    justify-content: space-between;
}
.items-total {
    width: 48%;
}
.section-delivery .btn-fetch,
.section-delivery .btn-primary,
.section-delivery .btn-secondary {
   background: #c57e37;
}
.sync-indicator {
   font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #e8f0e9; /* Light green */
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 600;
    color: #2a4a2e;
}
.edit-menu-link {
   font-weight: normal;
}
  /* Supercategory filter row — sits below the tabs toolbar. Shown only on
 * the Recipes tab (components don't have categories). */
.supercat-row {
     max-width: 88.5%;
     margin: 0 auto !important;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 8px;
     margin: -8px 0 20px;
     padding: 10px 12px;
     background: transparent;
     border: none;
     border-radius: var(--radius);
 }
.supercat-btn { padding: 5px 12px; font-size: 12px; font-weight: 500; color: var(--text-muted); background: transparent; border: 1px solid var(--border); border-radius: 6px; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background 0.1s, color 0.1s, border-color 0.1s; }
.supercat-btn:hover { border-color: var(--green-mid); color: var(--green-dark); }
.supercat-btn.active { background: var(--green-dark); color: #e8f0e9; border-color: var(--green-dark); }
.supercat-dropdown-wrap { margin-left: auto; }
.supercat-dropdown { font-family: inherit; font-size: 12px; color: var(--text-primary); background: var(--white); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; cursor: pointer; }
.supercat-dropdown:hover { border-color: var(--green-mid); }
.supercat-clear { font-size: 12px; color: var(--text-muted); text-decoration: none; padding: 5px 10px; border-radius: 6px; }
.supercat-clear:hover { color: var(--danger, #a63a3a); background: #fef2f2; }
.search { flex: 1; min-width: 220px; max-width: 320px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 14px; font-family: 'DM Sans', sans-serif; font-size: 14px; background: var(--white); }
.search:focus { outline: none; border-color: var(--green-mid); }
.actions { display: flex; gap: 10px; }
@media (max-width: 1500px) {
   .container {
      max-width: 100%;
   }
}
@media (max-width: 1342px) {
   #all-order-items {
      display:none;
   }
   #unfulfilled-order-items {
      width: 60%;
   }
}
@media (max-width: 1320px) {
   .container {
      max-width: 100%;
   }
   .delivery-head tr th:nth-of-type(3),
   #delivery-prep-form .items-cell {
      display:none;
   }
}
@media (max-width: 1200px) {
   .container {
      max-width: 100%;
   }
   .app-title,
   .menu-list {
      display: none !important;
   }
   .section-header {
      display: inline;
   }
   .section-header div {
      margin-bottom: 10px;
   }
}
@media (max-width: 1030px) {
   .delivery-head tr th:nth-of-type(1),
   #delivery-prep-form .order-number {
      display:none;
   }
}
@media (max-width: 950px) {
   .header-logo {
   display: none;
}
.sales-total {
   margin-left: 0;
}
}
@media (max-width: 850px) {
   #unfulfilled-order-items {
   width: 100%;
}
   .order-highlights {
       font-size: 14px;
   }
   .header {
      display: block;
   }
   .sales-total {
      font-family: "Jost", sans-serif;
      text-align: center;
      margin-bottom: 20px;
   }
}
@media (max-width: 750px) {
   html, body {
     max-width: 100%;
     overflow-x: hidden;
   }
   .stats-row {
       grid-template-columns: repeat(2, 1fr);
   }
.stat-number {
   font-size: 30px;
}
.stat-label {
   font-size: 9px;
}
  .routing-tools,
  .section-delivery th,
  .section-delivery td {
     display: none;
  }

  .section-delivery th:first-of-type,
  .section-delivery th:nth-of-type(2),
  #delivery-prep-form .order-number,
   .section-delivery td.order-number,
   #delivery-prep-form .customer-info-cell,
    .section-delivery td.customer-info-cell {
       display: table-cell !important;
       min-width: 100px;
    }
    .section-delivery td.customer-info-cell {
       width: 100%;
    }
    .section-delivery tr {
       display: flex;
    }
    .section-delivery th:nth-of-type(2) {
       width: 100%;
    }
}

/* ============================================================================
   Delivery email page (delivery-email.php specific styles)
   Extracted from delivery-email.php <style> block.
   Two classes were renamed to avoid conflicts with index.php:
     .btn-schedule  →  .btn-schedule-large  (index.php uses .btn-schedule
                       as a no-op marker on its dashboard "Schedule" buttons)
     .btn-copy      →  .btn-copy-inline    (index.php has its own bigger
                       .btn-copy style for the dashboard's "Copy all emails"
                       button, which is visually different from this small
                       inline copy affordance)
   See delivery-email.php for the corresponding HTML class updates.
============================================================================ */

/* Page header / back link */
.back-link { color: var(--text-muted); text-decoration: none; font-size: 13px; display: inline-block; margin-bottom: 24px; }
.back-link:hover { color: var(--green-dark); }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 16px; }
.page-header h1 { font-family: 'Jost', sans-serif; font-size: 24px; font-weight: 700; color: var(--green-dark); }
.page-header p { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

/* Schedule button (renamed from .btn-schedule) */
.btn-schedule-large {
    background: var(--green-dark);
    color: var(--green-light);
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-schedule-large:hover { background: var(--green-mid); }
.btn-schedule-large:disabled { opacity: 0.6; cursor: not-allowed; }

/* Status banner */
.schedule-status {
    display: none;
    border-radius: 8px;
    padding: 14px 18px;
    font-size: 14px;
    margin-bottom: 24px;
    border: 1px solid;
}
.schedule-status.success { background: var(--green-light); border-color: #b8d0bc; color: var(--green-dark); }
.schedule-status.error   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* Warning */
.warning-box { background: #fff8f0; border: 1px solid #f5d8a0; border-radius: 8px; padding: 14px 18px; font-size: 13px; color: #7a4a10; margin-bottom: 24px; }

/* Route group card */
.route-group { background: var(--white); border: 2px solid var(--border); border-radius: var(--radius); margin-bottom: 32px; overflow: hidden; }
.route-header { background: var(--green-light); padding: 16px 24px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.route-info h2 { font-family: 'Jost', sans-serif; font-size: 20px; font-weight: 700; color: var(--green-dark); }
.route-info p { font-size: 13px; color: var(--green-mid); font-weight: 500; margin-top: 2px; }
.route-status { font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 99px; display: none; }
#route-status { margin: 0 4px; }
.route-status.success { background: #dcfce7; color: #166534; display: inline-block; }
.route-status.error   { background: #fee2e2; color: #991b1b; display: inline-block; }

/* Email-copy block (subject + body previews) */
.copy-block { padding: 20px 24px; border-bottom: 1px solid #f0f4f0; }
.copy-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-light); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.subject-preview { background: var(--green-pale); padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; }
.body-preview { background: #fafcfa; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; font-family: Georgia, serif; font-size: 14px; line-height: 1.6; white-space: pre-wrap; }

/* Inline copy button (renamed from .btn-copy — index.php's .btn-copy is
   a different, larger style for the "Copy all emails" action) */
.btn-copy-inline { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 12px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.btn-copy-inline:hover { border-color: var(--green-mid); color: var(--green-dark); }

/* Recipient table */
.recipient-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.recipient-table td { padding: 8px 0; border-bottom: 1px solid #f9fbf9; color: var(--text-muted); }
.recipient-table tr:last-child td { border-bottom: none; }

/* ── Dashboard tabs (Delivery / Pickup / Lists) ─────────────────────────────
   Mirrors the .ml-tab-* pattern from menu-log.php but uses .dash-tab-* so the
   two stylesheets don't collide if ever loaded together. */
.dash-tab-nav {
    display: flex;
    gap: 4px;
    margin-top: 24px;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--border);
    flex-wrap: wrap;
}
.dash-tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 10px 22px;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: color .15s, border-color .15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.dash-tab-btn:hover { color: var(--green-dark); }
.dash-tab-btn.active { color: var(--green-dark); border-bottom-color: var(--green-dark); }
.dash-tab-btn .dash-tab-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-light);
    background: var(--green-pale);
    border-radius: 99px;
    padding: 2px 9px;
    min-width: 20px;
    text-align: center;
}
.dash-tab-btn.active .dash-tab-count {
    background: var(--green-light);
    color: var(--green-dark);
}

.dash-tab-content { display: none; }
.dash-tab-content.active { display: block; }

/* ── Weekly Workflow strip ──────────────────────────────────────────────────
   Cross-section actions that apply to the whole week. Sits above the tabs so
   it's visible regardless of which tab is active. */
.weekly-workflow {
    background: var(--green-pale);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 18px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.weekly-workflow-label {
    font-family: 'Jost', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--green-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 4px;
}
.weekly-workflow .btn { margin: 0; }
.weekly-workflow-status {
    font-size: 13px;
    color: var(--text-muted);
    margin-left: auto;
}
.weekly-workflow-status.success { color: #166534; font-weight: 600; }
.weekly-workflow-status.error   { color: #991b1b; font-weight: 600; }
@keyframes row-flash {
    0%   { background-color: var(--amber-light, #fef3e2); }
    100% { background-color: transparent; }
}
.row-highlight {
    animation: row-flash 1.8s ease-out forwards;
}