/**
 * G-Orders — Shared UI Design System
 * -----------------------------------
 * A modern, consistent look for every G-Orders screen.
 * Everything is scoped under `.gorders-ui` so a screen opts in by wrapping
 * its output in <div class="gorders-ui"> ... </div>. Screens that have not
 * been converted are completely unaffected.
 *
 * Version tracks the plugin (GLYKOTEXNIES_ORDERS_VERSION).
 */

.gorders-ui {
    /* ---- Design tokens ---- */
    --go-primary: #474747;        /* charcoal — primary buttons, headers, links */
    --go-primary-600: #383838;
    --go-primary-700: #2b2b2b;
    --go-primary-50: #f2f1ec;     /* warm light tint */

    --go-accent: #b8b7a3;         /* taupe/sage — accents, focus, left borders */
    --go-accent-dark: #9a9884;

    --go-bg: #f5f4f0;
    --go-surface: #ffffff;
    --go-surface-2: #f6f5f1;
    --go-border: #e6e3db;
    --go-border-strong: #d3cfc3;

    --go-text: #333333;
    --go-text-soft: #575757;
    --go-muted: #7a786e;

    /* semantic status colors: text / background (amber/green/red kept for meaning) */
    --go-blue: #474747;      --go-blue-bg: #f2f1ec;
    --go-amber: #b45309;     --go-amber-bg: #fef3c7;
    --go-green: #15803d;     --go-green-bg: #dcfce7;
    --go-red: #b91c1c;       --go-red-bg: #fee2e2;
    --go-slate: #6b6a5c;     --go-slate-bg: #eceae2;

    --go-radius: 14px;
    --go-radius-sm: 10px;
    --go-radius-pill: 999px;

    --go-shadow: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.05);
    --go-shadow-md: 0 6px 20px rgba(16,24,40,.09);
    --go-shadow-lg: 0 14px 40px rgba(16,24,40,.14);

    --go-gap: 20px;

    --go-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* ---- Base ---- (tokens + typography only; no width constraint so wide
       admin tables keep their own layout) */
    font-family: var(--go-font);
    color: var(--go-text);
    line-height: 1.55;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

/* Centered narrow layout — opt in with `gorders-ui go-page` on card screens. */
.gorders-ui.go-page {
    max-width: 900px;
    margin: 32px auto;
    padding: 0 20px;
}
.gorders-ui *,
.gorders-ui *::before,
.gorders-ui *::after { box-sizing: border-box; }

.gorders-ui h1, .gorders-ui h2, .gorders-ui h3, .gorders-ui h4 {
    /* Inherit color from context so headings are dark on light surfaces and
       white inside dark/selected cards & headers (avoids dark-on-dark text). */
    color: inherit;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
}

/* =========================================================
   Page header
   ========================================================= */
.gorders-ui .go-header,
.gorders-ui .order-view-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 34px 28px;
    margin-bottom: 28px;
    border-radius: var(--go-radius);
    color: #fff;
    background: linear-gradient(135deg, var(--go-primary) 0%, var(--go-primary-700) 100%);
    box-shadow: var(--go-shadow-md);
}
.gorders-ui .go-header h1,
.gorders-ui .go-header h2,
.gorders-ui .order-view-header h2 {
    color: #fff;
    font-size: 25px;
    margin: 0;
}
.gorders-ui .order-icon,
.gorders-ui .go-header .go-header-icon {
    font-size: 40px;
    line-height: 1;
}

/* header status row */
.gorders-ui .order-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}
.gorders-ui .status-label { font-weight: 600; opacity: .9; }
.gorders-ui .status-value {
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.35);
    padding: 5px 16px;
    border-radius: var(--go-radius-pill);
    font-weight: 600;
    backdrop-filter: blur(2px);
}

/* =========================================================
   Card grid + cards
   ========================================================= */
.gorders-ui .go-grid,
.gorders-ui .view-cards-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--go-gap);
    margin-bottom: 28px;
}
@media (min-width: 720px) {
    .gorders-ui .go-grid.go-grid-2,
    .gorders-ui .view-cards-container { grid-template-columns: 1fr 1fr; }
}

.gorders-ui .go-card,
.gorders-ui .view-card,
.gorders-ui .section-card {
    background: var(--go-surface);
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius);
    box-shadow: var(--go-shadow);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}
.gorders-ui .go-card:hover,
.gorders-ui .view-card:hover {
    box-shadow: var(--go-shadow-md);
}

.gorders-ui .card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background: var(--go-surface-2);
    border-bottom: 1px solid var(--go-border);
    font-weight: 700;
}
.gorders-ui .card-header h3 { font-size: 16px; }
.gorders-ui .card-icon { font-size: 20px; line-height: 1; }
.gorders-ui .card-content,
.gorders-ui .card-body { padding: 20px; }

/* =========================================================
   Detail rows (label : value)
   ========================================================= */
.gorders-ui .view-field,
.gorders-ui .detail-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--go-border);
}
.gorders-ui .view-field:last-child,
.gorders-ui .detail-line:last-child { border-bottom: none; }
.gorders-ui .view-field label,
.gorders-ui .detail-label {
    font-weight: 600;
    color: var(--go-muted);
    min-width: 140px;
}
.gorders-ui .field-value,
.gorders-ui .detail-value {
    font-weight: 600;
    color: var(--go-text);
    text-align: right;
    flex: 1;
}

/* image + comments */
.gorders-ui .order-image-view { text-align: center; }
.gorders-ui .order-image-view img {
    max-width: 100%;
    max-height: 320px;
    border-radius: var(--go-radius-sm);
    box-shadow: var(--go-shadow);
}
.gorders-ui .image-filename { margin-top: 10px; font-size: 13px; color: var(--go-muted); }
.gorders-ui .comments-view {
    background: var(--go-primary-50);
    padding: 16px 18px;
    border-radius: var(--go-radius-sm);
    border-left: 4px solid var(--go-accent);
    color: var(--go-text-soft);
}

/* =========================================================
   Status badges (pill)
   ========================================================= */
.gorders-ui .go-badge,
.gorders-ui .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--go-radius-pill);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
}
.gorders-ui .go-badge::before,
.gorders-ui .status-badge::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.gorders-ui .status-paralifthike { color: var(--go-slate); background: var(--go-slate-bg); }
.gorders-ui .status-sto_fourno   { color: var(--go-amber); background: var(--go-amber-bg); }
.gorders-ui .status-etoimi       { color: var(--go-green); background: var(--go-green-bg); }
.gorders-ui .status-akirothike   { color: var(--go-red);   background: var(--go-red-bg); }

/* =========================================================
   Buttons
   ========================================================= */
.gorders-ui .btn,
.gorders-ui .go-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border: 1px solid transparent;
    border-radius: var(--go-radius-sm);
    font-size: 15px;
    font-weight: 600;
    font-family: var(--go-font);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.gorders-ui .btn:hover,
.gorders-ui .go-btn:hover { transform: translateY(-1px); text-decoration: none; }
.gorders-ui .btn:active,
.gorders-ui .go-btn:active { transform: translateY(0); }
.gorders-ui .btn-icon { font-size: 17px; }

.gorders-ui .btn-primary,
.gorders-ui .go-btn-primary {
    background: var(--go-primary); color: #fff;
    box-shadow: 0 2px 8px rgba(71,71,71,.22);
}
.gorders-ui .btn-primary:hover,
.gorders-ui .go-btn-primary:hover { background: var(--go-primary-600); color: #fff; }

.gorders-ui .btn-secondary,
.gorders-ui .go-btn-secondary {
    background: var(--go-surface); color: var(--go-text);
    border-color: var(--go-border-strong);
}
.gorders-ui .btn-secondary:hover,
.gorders-ui .go-btn-secondary:hover { background: var(--go-surface-2); color: var(--go-text); }

.gorders-ui .btn-danger  { background: var(--go-red);   color: #fff; }
.gorders-ui .btn-success { background: var(--go-green); color: #fff; }

/* =========================================================
   Form inputs (shared vocabulary: .form-field / .modern-input / .modern-label)
   ========================================================= */
.gorders-ui .form-field { margin-bottom: 18px; }
.gorders-ui .modern-label,
.gorders-ui label.go-label {
    display: block;
    font-weight: 600;
    color: var(--go-text-soft);
    margin-bottom: 6px;
    font-size: 14px;
}
.gorders-ui .modern-input,
.gorders-ui input[type="text"].go-input,
.gorders-ui input[type="email"].go-input,
.gorders-ui input[type="tel"].go-input,
.gorders-ui select.go-input,
.gorders-ui textarea.go-input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--go-border-strong);
    border-radius: var(--go-radius-sm);
    font-size: 15px;
    font-family: var(--go-font);
    color: var(--go-text);
    background: var(--go-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.gorders-ui .modern-input:focus,
.gorders-ui .go-input:focus {
    outline: none;
    border-color: var(--go-accent-dark);
    box-shadow: 0 0 0 3px rgba(184,183,163,.40);
}

/* =========================================================
   Actions row
   ========================================================= */
.gorders-ui .view-actions,
.gorders-ui .go-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 32px 0;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 640px) {
    .gorders-ui { margin: 20px auto; padding: 0 14px; }
    .gorders-ui .go-header,
    .gorders-ui .order-view-header { padding: 24px 18px; }
    .gorders-ui .view-field,
    .gorders-ui .detail-line { flex-direction: column; align-items: flex-start; gap: 6px; }
    .gorders-ui .view-field label,
    .gorders-ui .detail-label { min-width: 0; width: 100%; }
    .gorders-ui .field-value,
    .gorders-ui .detail-value { text-align: left; width: 100%; }
    .gorders-ui .order-status { flex-direction: column; gap: 6px; }
}

/* ===================================================================
   Legibility fix: force light text on dark (charcoal) backgrounds.
   These elements have a charcoal background but inherited dark text
   from the .gorders-ui wrapper. Scoped + !important to beat inline CSS.
   =================================================================== */
.gorders-ui #order-popup button,
.gorders-ui #order-popup button *,
.gorders-ui #order-popup button:hover,
.gorders-ui #order-popup button:hover *,
.gorders-ui .active-type,
.gorders-ui .active-type *,
.gorders-ui .add-photo-btn,
.gorders-ui .add-photo-btn *,
.gorders-ui .admin-button,
.gorders-ui .admin-button *,
.gorders-ui .admin-button:hover,
.gorders-ui .admin-button:hover *,
.gorders-ui .admin-table-header,
.gorders-ui .admin-table-header *,
.gorders-ui .btn-next,
.gorders-ui .btn-next *,
.gorders-ui .btn-primary,
.gorders-ui .btn-primary *,
.gorders-ui .btn-primary:hover,
.gorders-ui .btn-primary:hover *,
.gorders-ui .btn-print,
.gorders-ui .btn-print *,
.gorders-ui .btn-search,
.gorders-ui .btn-search *,
.gorders-ui .btn-search:hover,
.gorders-ui .btn-search:hover *,
.gorders-ui .btn-submit,
.gorders-ui .btn-submit *,
.gorders-ui .button-primary,
.gorders-ui .button-primary *,
.gorders-ui .button-primary:hover,
.gorders-ui .button-primary:hover *,
.gorders-ui .card-datepicker .ui-datepicker-header,
.gorders-ui .card-datepicker .ui-datepicker-header *,
.gorders-ui .card-datepicker .ui-state-active,
.gorders-ui .card-datepicker .ui-state-active *,
.gorders-ui .date-stats-box,
.gorders-ui .date-stats-box *,
.gorders-ui .download-photos-btn,
.gorders-ui .download-photos-btn *,
.gorders-ui .download-photos-btn:hover,
.gorders-ui .download-photos-btn:hover *,
.gorders-ui .edit-order-button,
.gorders-ui .edit-order-button *,
.gorders-ui .edit-order-button:hover,
.gorders-ui .edit-order-button:hover *,
.gorders-ui .event-count,
.gorders-ui .event-count *,
.gorders-ui .form-action-button,
.gorders-ui .form-action-button *,
.gorders-ui .form-action-button.save-button,
.gorders-ui .form-action-button.save-button *,
.gorders-ui .image-card:has(input:checked),
.gorders-ui .image-card:has(input:checked) *,
.gorders-ui .manage-btn,
.gorders-ui .manage-btn *,
.gorders-ui .manage-btn:hover,
.gorders-ui .manage-btn:hover *,
.gorders-ui .mobile-button,
.gorders-ui .mobile-button *,
.gorders-ui .nav-today,
.gorders-ui .nav-today *,
.gorders-ui .order-form-header,
.gorders-ui .order-form-header *,
.gorders-ui .order-number-display,
.gorders-ui .order-number-display *,
.gorders-ui .order-status-container button,
.gorders-ui .order-status-container button *,
.gorders-ui .order-status-container button:hover,
.gorders-ui .order-status-container button:hover *,
.gorders-ui .popup-btn,
.gorders-ui .popup-btn *,
.gorders-ui .popup-btn:hover,
.gorders-ui .popup-btn:hover *,
.gorders-ui .print-daily-button.active,
.gorders-ui .print-daily-button.active *,
.gorders-ui .print-daily-button:hover:not(:disabled),
.gorders-ui .print-daily-button:hover:not(:disabled) *,
.gorders-ui .print-daily-button:not(:disabled):hover,
.gorders-ui .print-daily-button:not(:disabled):hover *,
.gorders-ui .print-page-value,
.gorders-ui .print-page-value *,
.gorders-ui .search-header,
.gorders-ui .search-header *,
.gorders-ui .section-header,
.gorders-ui .section-header *,
.gorders-ui .size-button:has(input:checked),
.gorders-ui .size-button:has(input:checked) *,
.gorders-ui .stats-card.received,
.gorders-ui .stats-card.received *,
.gorders-ui .stats-card.total,
.gorders-ui .stats-card.total *,
.gorders-ui .status-badge.status-etoimi,
.gorders-ui .status-badge.status-etoimi *,
.gorders-ui .status-badge.status-paralifthike,
.gorders-ui .status-badge.status-paralifthike *,
.gorders-ui .status-baking,
.gorders-ui .status-baking *,
.gorders-ui .status-received,
.gorders-ui .status-received *,
.gorders-ui .submit-button,
.gorders-ui .submit-button *,
.gorders-ui .submit-button:hover,
.gorders-ui .submit-button:hover *,
.gorders-ui .tab-button.active,
.gorders-ui .tab-button.active *,
.gorders-ui .ui-datepicker-calendar .ui-state-active,
.gorders-ui .ui-datepicker-calendar .ui-state-active *,
.gorders-ui .ui-datepicker-header,
.gorders-ui .ui-datepicker-header *,
.gorders-ui .upload-btn,
.gorders-ui .upload-btn * {
    color: #ffffff !important;
}

/* ===================================================================
   Color-coded status pills (orders table / list badges).
   Higher specificity + !important so they win over the charcoal
   inline background AND the light-text override above.
   Scoped to .status-badge so the header status chip is unaffected.
   =================================================================== */
.gorders-ui .status-badge.status-paralifthike,
.gorders-ui .status-badge.status-received {
    background: #eceae2 !important; color: #57564a !important;
    border: 1px solid #d8d5c8 !important;
}
.gorders-ui .status-badge.status-epivevaiothike,
.gorders-ui .status-badge.status-accepted {
    background: #d7f0ec !important; color: #0f766e !important;
    border: 1px solid #b6e3dc !important;
}
.gorders-ui .status-badge.status-sto_fourno,
.gorders-ui .status-badge.status-baking {
    background: #fef3c7 !important; color: #b45309 !important;
    border: 1px solid #fbe6a2 !important;
}
.gorders-ui .status-badge.status-etoimi,
.gorders-ui .status-badge.status-ready {
    background: #dcfce7 !important; color: #15803d !important;
    border: 1px solid #b9f0cb !important;
}
.gorders-ui .status-badge.status-akirothike,
.gorders-ui .status-badge.status-canceled {
    background: #fee2e2 !important; color: #b91c1c !important;
    border: 1px solid #f6c9c9 !important;
}

/* ===================================================================
   Section-card header sits on a LIGHT surface — force dark text so the
   screens' inline `color:white` (meant for their old dark header) can't
   leak white-on-light onto the section titles.
   =================================================================== */
.gorders-ui .card-header { color: var(--go-text); }
.gorders-ui .card-header h1,
.gorders-ui .card-header h2,
.gorders-ui .card-header h3,
.gorders-ui .card-header h4 { color: var(--go-text); }
.gorders-ui .card-header .section-description,
.gorders-ui .card-header .header-subtitle { color: var(--go-muted); }

/* ===================================================================
   Selected / checked option cards have a dark (charcoal) background —
   force white text on the card body and its labels (scoped to the
   selected state only, so light unselected cards are untouched).
   =================================================================== */
.gorders-ui .radio-card-option:has(input:checked) .card-content,
.gorders-ui .radio-card-option:has(input:checked) .card-content *,
.gorders-ui .card-grid-option:has(input:checked) .card-content,
.gorders-ui .card-grid-option:has(input:checked) .card-content *,
.gorders-ui .cake-option:has(input:checked) .cake-card-content,
.gorders-ui .cake-option:has(input:checked) .cake-card-content *,
.gorders-ui .radio-card:has(input:checked) .card-content,
.gorders-ui .radio-card:has(input:checked) .card-content *,
.gorders-ui .size-button:has(input:checked),
.gorders-ui .size-button:has(input:checked) *,
.gorders-ui .image-card:has(input:checked) .card-text {
    color: #ffffff !important;
}
/* keep the little selection check mark visible (don't whitewash it) */
.gorders-ui .selection-indicator .checkmark { color: var(--go-primary) !important; }

/* the header filter controls sit on solid white, so they must opt out of the
   .admin-table-header whitewash above (white-on-white text). This covers the
   dropdown options too: the * rule whitewashes them, hiding the open list. */
.gorders-ui .admin-table-header .search-filter,
.gorders-ui .admin-table-header .status-filter,
.gorders-ui .admin-table-header .date-filter,
.gorders-ui .admin-table-header .admin-date-picker,
.gorders-ui .admin-table-header .status-filter option,
.gorders-ui .admin-table-header .date-filter option {
    color: #1a1a1a !important;
    -webkit-text-fill-color: #1a1a1a;
    caret-color: #1a1a1a;
}
.gorders-ui .admin-table-header .search-filter::placeholder,
.gorders-ui .admin-table-header .admin-date-picker::placeholder {
    color: rgba(0, 0, 0, .5) !important;
    -webkit-text-fill-color: rgba(0, 0, 0, .5);
    opacity: 1;
}