/* ======================================================
   Valet Parking – Clean App CSS (Dashboard + Five Star Auth)
   ====================================================== */

/* ---------- Base Reset ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #0f172a;         /* default app background (dashboard) */
    color: #0f172a;
}

/* ======================================================
   Shared Layout (Dashboard pages)
   ====================================================== */

.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-header {
    background: linear-gradient(90deg, #0f172a, #111827);
    color: #f9fafb;
    padding: 12px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.7);
}

.app-header h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.app-header .header-right {
    display: flex;
    gap: 10px;
    align-items: center;
}

.app-main {
    flex: 1;
    padding: 16px;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    overflow-y: auto;
}

/* Card */
.card {
    background: #ffffff;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

h2 { margin: 0 0 12px 0; }

.subtitle {
    margin-top: 0;
    margin-bottom: 16px;
    color: #6b7280;
    font-size: 13px;
}

/* Buttons (default app buttons) */
.btn {
    padding: 8px 16px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary {
    background: #2563eb;
    color: #ffffff;
}
.btn-primary:hover { background: #1d4ed8; }

.btn-outline {
    background: transparent;
    color: #e5e7eb;
    border: 1px solid #4b5563;
}
.btn-outline:hover { border-color: #9ca3af; }

/* Forms (default app forms) */
form {
    display: grid;
    gap: 12px;
}

label {
    font-size: 13px;
    color: #4b5563;
    display: block;
    margin-bottom: 4px;
}

input, select, textarea {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    font-size: 14px;
    background: #f9fafb;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.3);
}

textarea { min-height: 60px; }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.error {
    color: #b91c1c;
    font-size: 12px;
}

/* Success message (usable on login too) */
.success {
    color: #065f46;
    background: #ecfdf5;
    border: 1px solid rgba(16,185,129,0.35);
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
}

/* ======================================================
   Tables (dashboard)
   ====================================================== */

.table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.table-search-input {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    font-size: 13px;
    min-width: 200px;
}

.table-wrapper { width: 100%; overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

th, td {
    padding: 8px 6px;
    text-align: left;
}

th {
    border-bottom: 1px solid #e5e7eb;
    color: #6b7280;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

tr:nth-child(even) { background: #f9fafb; }

/* Status pills */
.status-pill {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    display: inline-block;
}

.status-CHECKED_IN { background: #dbeafe; color: #1d4ed8; }
.status-REQUESTED  { background: #fef3c7; color: #92400e; }
.status-PREPARING  { background: #e0f2fe; color: #0369a1; }
.status-READY      { background: #dcfce7; color: #166534; }
.status-DELIVERED  { background: #dcfce7; color: #166534; }
.status-CANCELLED  { background: #fee2e2; color: #b91c1c; }

/* Responsive */
@media (max-width: 768px) {
    .form-row { grid-template-columns: 1fr; }

    table, thead, tbody, th, td, tr { display: block; }
    thead { display: none; }

    tr {
        margin-bottom: 12px;
        background: #ffffff;
        border-radius: 10px;
        padding: 8px;
        box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
    }

    td {
        display: flex;
        justify-content: space-between;
        padding: 4px 0;
    }

    td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6b7280;
        margin-right: 8px;
        font-size: 12px;
    }

    .table-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .table-search-input { width: 100%; }
}

/* Scrollbar */
.app-main::-webkit-scrollbar { width: 8px; }
.app-main::-webkit-scrollbar-thumb {
    background: #9ca3af;
    border-radius: 999px;
}
.app-main::-webkit-scrollbar-track { background: transparent; }

/* ======================================================
   Five Star Parking – AUTH THEME (Login/Register/Reset)
   ====================================================== */

:root {
    --gold-light: #f6d365;
    --gold-main:  #d4af37;
    --gold-dark:  #b8860b;
    --ink:        #111827;
    --muted:      #6b7280;
    --danger:     #991b1b;
}

/* Only pages using <body class="auth-page"> get this */
body.auth-page {
    background: linear-gradient(180deg, #0b0f19 0%, #0b0f19 55%, #0a1226 100%);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 12px;
}

/* Gold border wrapper */
.brand-frame {
    padding: 2px;
    border-radius: 22px;
    background: linear-gradient(
            135deg,
            var(--gold-light) 0%,
            var(--gold-main) 35%,
            var(--gold-dark) 70%,
            var(--gold-light) 100%
    );
    box-shadow:
            0 20px 45px rgba(0,0,0,0.45),
            0 0 0 1px rgba(212,175,55,0.35);
}

/* Inner auth card */
.brand-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.94) 100%);
    border-radius: 20px;
    padding: 26px 22px 22px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
    max-width: 420px;
    width: 100%;
}

.brand-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}
.brand-logo img {
    height: 64px;
    width: auto;
}

.brand-subtitle {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--muted);
}

/* Auth inputs inside brand-card */
.brand-card input[type="text"],
.brand-card input[type="password"],
.brand-card input[type="number"] {
    width: 100%;
    padding: 11px 12px;
    border-radius: 12px;
    border: 1px solid rgba(17,24,39,0.12);
    font-size: 14px;
    outline: none;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.brand-card input:focus {
    border-color: var(--gold-main);
    box-shadow: 0 0 0 4px rgba(212,175,55,0.22);
}

/* Gold primary button */
.btn-gold {
    width: 100%;
    padding: 12px 14px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.12);
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    color: var(--ink);
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-main) 35%, var(--gold-dark) 100%);
    box-shadow: 0 10px 22px rgba(212,175,55,0.22);
    transition: transform .06s ease, filter .15s ease;
}
.btn-gold:hover { filter: brightness(0.98); }
.btn-gold:active { transform: translateY(1px); }

/* Outline links */
.btn-gold-outline {
    padding: 9px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
    border: 1px solid rgba(212,175,55,0.55);
    background: rgba(212,175,55,0.10);
    text-decoration: none;
}
.btn-gold-outline:hover { background: rgba(212,175,55,0.16); }

/* Auth messages */
.msg-error {
    background: #fef2f2;
    border: 1px solid rgba(239,68,68,0.35);
    color: var(--danger);
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
    margin-top: 10px;
}
.msg-success {
    background: #f0fdf4;
    border: 1px solid rgba(34,197,94,0.35);
    color: #166534;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
    margin-top: 10px;
}
.msg-warning {
    background: #fffbeb;
    border: 1px solid rgba(245,158,11,0.45);
    color: #92400e;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
    margin-top: 10px;
}
.field-error{
    margin-top: 6px;
    color: var(--danger);
    font-size: 12px;
}
/* ======================================================
   Admin Brand Card (Five Star Gold – Admin Forms)
   ====================================================== */

.admin-brand-wrapper {
    max-width: 760px;
    margin: 0 auto;
}

/* Gold gradient frame */
.admin-brand-frame {
    padding: 2px;
    border-radius: 22px;
    background: linear-gradient(
            135deg,
            var(--gold-light) 0%,
            var(--gold-main) 35%,
            var(--gold-dark) 70%,
            var(--gold-light) 100%
    );
    box-shadow:
            0 20px 45px rgba(0,0,0,0.45),
            0 0 0 1px rgba(212,175,55,0.35);
}

/* Inner admin card */
.admin-brand-card {
    background: linear-gradient(
            180deg,
            rgba(255,255,255,0.98) 0%,
            rgba(255,255,255,0.94) 100%
    );
    border-radius: 20px;
    padding: 26px 24px 22px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

/* Headings */
.admin-brand-card h2 {
    margin: 0 0 6px;
    color: var(--ink);
    font-size: 20px;
}

.admin-brand-subtitle {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--muted);
}

/* Inputs focus = gold */
.admin-brand-card input:focus,
.admin-brand-card select:focus,
.admin-brand-card textarea:focus {
    border-color: var(--gold-main);
    box-shadow: 0 0 0 4px rgba(212,175,55,0.22);
}

/* Admin CTA button */
.btn-gold-admin {
    background: linear-gradient(
            135deg,
            var(--gold-light) 0%,
            var(--gold-main) 35%,
            var(--gold-dark) 100%
    );
    color: var(--ink);
    font-weight: 700;
    border-radius: 999px;
    padding: 10px 18px;
    border: 1px solid rgba(0,0,0,0.12);
    box-shadow: 0 10px 22px rgba(212,175,55,0.22);
}

.btn-gold-admin:hover {
    filter: brightness(0.97);
}


/* ======================================================
   Dashboard (Valet Console)
   Scoped styles to avoid conflicts
   ====================================================== */

.dash-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dash-logo {
    height: 36px;
    width: auto;
    border-radius: 8px;
    display: block;
}

@media (max-width: 600px) {
    .dash-logo { height: 30px; }
}

.dash-title-block h1 {
    margin: 0;
}

.dash-subtitle {
    margin-top: 4px;
    color: #6b7280;
    font-size: 13px;
}

.dash-subtitle a {
    color: inherit;
    text-decoration: underline;
}

/* Alert */
.dash-alert {
    display: none;
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fef3c7;
    color: #92400e;
    font-size: 13px;
    border: 1px solid rgba(146, 64, 14, 0.18);
}

/* Ticket table (responsive) */
.ticket-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ticket-table th,
.ticket-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: top;
}

.ticket-table th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}

.row-requested {
    background: #fffbeb;
}

/* Make table container scroll nicely on desktop */
.table-scroll {
    overflow-x: auto;
}

/* Mobile table -> cards */
@media (max-width: 800px) {
    .ticket-table thead { display: none; }
    .ticket-table,
    .ticket-table tbody,
    .ticket-table tr,
    .ticket-table td {
        display: block;
        width: 100%;
    }

    .ticket-table tr {
        margin-bottom: 10px;
        border-radius: 14px;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
        overflow: hidden;
    }

    .ticket-table td {
        border-bottom: none;
        padding: 10px 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }

    .ticket-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #6b7280;
        font-size: 12px;
        flex: 1;
    }

    .ticket-table td > * {
        flex: 1;
        text-align: right;
    }

    .ticket-table td:last-child {
        justify-content: flex-end;
    }
}
.dash-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.dash-btn {
    border: 1px solid rgba(212,175,55,0.55);
    background: rgba(212,175,55,0.10);
    color: #f9fafb;                 /* readable on dark header */
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.dash-btn:hover {
    filter: brightness(1.05);
}

.dash-btn-primary {
    border: 1px solid rgba(0,0,0,0.12);
    color: #111827;                 /* dark text on gold */
    background: linear-gradient(135deg, #f6d365 0%, #d4af37 35%, #b8860b 100%);
    box-shadow: 0 10px 22px rgba(212,175,55,0.20);
}

.dash-btn-primary:hover { filter: brightness(0.98); }

/* ── Nav Dropdowns ── */
.nav-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.nav-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    user-select: none;
}
.nav-dropdown-toggle::after {
    content: '▾';
    font-size: 10px;
    opacity: 0.7;
}
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 160px;
    background: #1c1c2e;
    border: 1px solid rgba(212,175,55,0.25);
    border-radius: 8px;
    padding: 10px 0 4px;
    z-index: 200;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
/* Invisible bridge fills the gap between button and menu so hover doesn't break */
.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    display: block;
}
.nav-dropdown-menu a {
    display: block;
    padding: 9px 16px;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.15s;
}
.nav-dropdown-menu a:hover {
    background: rgba(212,175,55,0.12);
    color: #d4af37;
}

/* Make the table “Open” button match too */
.ticket-table .dash-btn {
    color: #111827;                 /* inside white table/card */
    background: rgba(212,175,55,0.12);
}
/* ======================================================
   Ticket Details Page – Gold Theme (scoped)
   ====================================================== */

.ticket-shell .card {
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(0,0,0,0.18);
}

.ticket-two-column {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 16px;
}
@media (max-width: 800px) {
    .ticket-two-column { grid-template-columns: 1fr; }
}

.ticket-info-list { font-size: 14px; }
.ticket-info-list dt { font-weight: 700; color: rgba(255,255,255,0.75); margin-top: 8px; }
.ticket-info-list dd { margin: 0; color: rgba(255,255,255,0.92); }

.ticket-card-title { margin: 0 0 8px; color: #111827; }
.ticket-muted { color: #6b7280; font-size: 13px; margin-top: 0; }

.ticket-panel {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(212,175,55,0.18);
    border-radius: 16px;
    padding: 14px 14px;
}

.ticket-panel h2 { margin: 0 0 6px; color: #111827; }
.ticket-panel .subtitle { margin-bottom: 12px; }

.ticket-actions {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ======================================================
   Contact links – FIXED: per-link brand colors + icons
   Use in HTML like:
   <a class="contact-pill contact-sms" ...>SMS</a>
   <a class="contact-pill contact-whatsapp" ...>WhatsApp</a>
   <a class="contact-pill contact-link" ...>View link</a>
   ====================================================== */

.ticket-contact-links {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
}

/* Base pill (applies even if you forget classes, thanks to selector) */
.ticket-contact-links a,
.ticket-contact-links a.contact-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 8px 12px;
    text-decoration: none;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid rgba(212,175,55,0.45);
    background: rgba(212,175,55,0.10);
    color: #111827;
    transition: filter 0.15s ease, transform 0.05s ease;
}

.ticket-contact-links a:hover {
    filter: brightness(0.98);
    transform: translateY(-1px);
}

/* Icons (emoji) */
.ticket-contact-links a.contact-sms::before       { content: "📩"; }
.ticket-contact-links a.contact-whatsapp::before  { content: "💬"; }
.ticket-contact-links a.contact-link::before      { content: "🔗"; }

/* SMS – blue */
.ticket-contact-links a.contact-sms {
    background: rgba(37, 99, 235, 0.10);
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, 0.25);
}

/* WhatsApp – green */
.ticket-contact-links a.contact-whatsapp {
    background: rgba(34, 197, 94, 0.12);
    color: #166534;
    border-color: rgba(34, 197, 94, 0.35);
}

/* View customer link – gold */
.ticket-contact-links a.contact-link {
    background: rgba(212, 175, 55, 0.14);
    color: #111827;
    border-color: rgba(212, 175, 55, 0.45);
}

/* Slightly tighter on small screens */
@media (max-width: 420px) {
    .ticket-contact-links a,
    .ticket-contact-links a.contact-pill {
        padding: 8px 10px;
        gap: 6px;
        font-size: 12px;
    }
}

/* ======================================================
   Tip box -> premium
   ====================================================== */

.tip-box {
    margin-top: 14px;
    border-radius: 14px;
    padding: 12px 12px;
    border: 1px solid rgba(212,175,55,0.25);
    background: rgba(212,175,55,0.08);
    max-width: 100%;
}
.tip-box.paid {
    background: #ecfdf5;
    border-color: rgba(16,185,129,0.35);
}
.tip-title {
    font-weight: 800;
    font-size: 13px;
    color: #111827;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tip-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 900;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(17,24,39,0.10);
    color: #111827;
    white-space: nowrap;
}
.tip-pill.paid {
    background: rgba(16,185,129,0.20);
    color: #065f46;
}
.tip-row {
    font-size: 13px;
    color: #374151;
    margin-top: 6px;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.tip-row strong { color: #111827; }

/* Tip table */
.tip-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    margin-top: 10px;
}
.tip-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    table-layout: fixed;
}
.tip-table th, .tip-table td {
    border-top: 1px solid rgba(17,24,39,0.10);
    padding: 8px 6px;
    text-align: left;
    color: #374151;
    vertical-align: top;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.tip-table th { color: #6b7280; font-weight: 800; }
.tip-table td.session-cell { overflow-wrap: anywhere; word-break: break-word; }

.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
@media (max-width: 520px) {
    .tip-table th, .tip-table td { padding: 7px 5px; font-size: 11px; }
}

/* Photo grid */
.ticket-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.ticket-photo-card {
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(212,175,55,0.25);
    box-shadow: 0 10px 25px rgba(0,0,0,0.10);
}
.ticket-photo-card img {
    width: 100%;
    display: block;
    object-fit: cover;
    max-height: 160px;
}
.ticket-photo-meta {
    padding: 8px 10px;
    font-size: 11px;
    color: #4b5563;
}

/* Upload hint/status */
.upload-hint { font-size: 12px; color: #6b7280; margin-top: 6px; }
.upload-status { font-size: 12px; margin-top: 8px; color: #374151; }
.upload-status.error { color: #b91c1c; }
.upload-status.ok { color: #166534; }
.upload-status.warn { color: #92400e; }

/* Ticket header: logo + actions */
.ticket-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ticket-header-logo {
    height: 28px;
    width: auto;
    border-radius: 8px;
    border: 1px solid rgba(212,175,55,0.25);
    background: rgba(255,255,255,0.06);
    padding: 2px;
}
/* ======================================================
   Ticket Details – FIX: ensure readable text on white cards
   ====================================================== */

.ticket-shell .ticket-info-list dt{
    color: #6b7280 !important;
    font-weight: 700;
    margin-top: 8px;
}

.ticket-shell .ticket-info-list dd{
    color: #111827 !important;
    margin: 0;
}

.ticket-shell .ticket-card-title{
    color: #111827;
}
/* ======================================================
   Customer Ticket Page (Public Link) – Five Star Theme
   Scoped to .customer-page so it won't affect admin pages
   ====================================================== */

body.customer-page{
    background: linear-gradient(180deg, #0b0f19 0%, #0b0f19 55%, #0a1226 100%);
    color: var(--ink);
}

/* Layout */
.customer-wrap{
    min-height: 100vh;
    padding: 18px 14px 38px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.customer-card{
    width: 100%;
    max-width: 520px;
}

/* Card with gold frame (same family as auth/admin) */
.customer-frame{
    padding: 2px;
    border-radius: 22px;
    background: linear-gradient(
            135deg,
            var(--gold-light) 0%,
            var(--gold-main) 35%,
            var(--gold-dark) 70%,
            var(--gold-light) 100%
    );
    box-shadow:
            0 20px 45px rgba(0,0,0,0.45),
            0 0 0 1px rgba(212,175,55,0.35);
}

.customer-inner{
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.94) 100%);
    border-radius: 20px;
    padding: 18px 18px 22px;
}

/* Marketing header */
.customer-marketing{
    background: linear-gradient(180deg, rgba(212,175,55,0.16) 0%, rgba(255,255,255,0.92) 70%);
    border: 1px solid rgba(212,175,55,0.35);
    border-radius: 18px;
    padding: 12px 14px;
    margin-bottom: 14px;
}

.customer-brand-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.customer-brand-left h2{
    margin: 0;
    font-size: 18px;
    letter-spacing: 0.2px;
    color: #111827;
}

.customer-brand-contact,
.customer-brand-site{
    margin-top: 2px;
    font-size: 13px;
    color: #111827;
    font-weight: 800;
}

.customer-brand-logo{
    width: 46px;
    height: 46px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.08);
    background: #fff;
    overflow: hidden;
    flex: 0 0 auto;
}
.customer-brand-logo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ticket top row */
.customer-ticket-title{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.customer-ticket-code{
    margin: 0;
    font-size: 22px;
    color: #111827;
    line-height: 1.1;
    letter-spacing: 0.3px;
}

.customer-subtitle{
    margin: 8px 0 0;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.35;
}

/* Info blocks */
.customer-info-grid{
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.customer-info-item{
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 10px 12px;
}

.customer-info-item .label{
    font-size: 12px;
    color: #6b7280;
    font-weight: 800;
    margin-bottom: 3px;
}

.customer-info-item .value{
    font-size: 15px;
    color: #111827;
    font-weight: 900;
}

/* Primary CTA button (gold) */
.customer-btn{
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.12);
    font-weight: 900;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    color: #111827;
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-main) 35%, var(--gold-dark) 100%);
    box-shadow: 0 10px 22px rgba(212,175,55,0.20);
}
.customer-btn:hover{ filter: brightness(0.98); }
.customer-btn:active{ transform: translateY(1px); }

/* Messages + divider */
.customer-message{
    margin-top: 14px;
    font-size: 14px;
    color: #374151;
    text-align: center;
    line-height: 1.35;
}

.customer-divider{
    margin: 16px 0;
    border: 0;
    border-top: 1px dashed rgba(0,0,0,0.15);
}

/* Tip UI */
.customer-tip-title{
    margin: 0 0 10px;
    color: #111827;
    font-size: 16px;
}
.customer-tip-note{
    margin: 0 0 12px;
    color: #6b7280;
    font-size: 13px;
}
.customer-tip-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 10px; }

.customer-tip-option{
    width: auto;
    padding: 10px 14px;
    font-size: 14px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.12);
    font-weight: 900;
    cursor: pointer;
    color: #111827;
    background: rgba(212,175,55,0.14);
}
.customer-tip-option:hover{ transform: translateY(-1px); }
.customer-tip-option.tip-selected{ border-color: #111827; filter: brightness(0.98); }
.customer-tip-option.tip-dim{ opacity: 0.55; }

.customer-tip-selected-label{
    font-size: 13px;
    color: #111827;
    margin: 6px 0 12px;
    font-weight: 900;
}

.customer-tip-input{
    flex: 1;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    font-size: 14px;
    background: #fff;
}

/* Tip paid box */
.customer-tip-received{
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #ecfdf5;
    border: 1px solid rgba(16,185,129,0.35);
    color: #065f46;
    font-size: 14px;
    line-height: 1.35;
}
.customer-tip-received strong{ color: #064e3b; }

/* Terms */
.customer-terms{
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 10px 12px;
    background: #fff;
}
.customer-terms summary{
    cursor: pointer;
    font-weight: 900;
    color: #111827;
    list-style: none;
}
.customer-terms summary::-webkit-details-marker{ display:none; }

.customer-small-muted{
    color: #6b7280;
    font-size: 13px;
    line-height: 1.45;
}

.customer-clean{
    margin: 10px 0 0;
    padding-left: 16px;
    color: #111827;
    font-size: 13px;
    line-height: 1.5;
}

/* Footer */
.customer-footer{
    margin-top: 14px;
    text-align: center;
    color: #111827;
}
.customer-footer .big{
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.2px;
}
.customer-footer .small{
    margin-top: 2px;
    font-size: 13px;
    font-weight: 800;
    opacity: 0.85;
}

/* Mobile polish */
@media (max-width: 420px){
    .customer-inner{ padding: 16px 14px 18px; }
    .customer-brand-left h2{ font-size: 17px; }
}

/* ======================================================
   Contact Links – branded actions
   (kept for compatibility; now overridden properly above)
   ====================================================== */

.contact-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    transition: filter 0.15s ease, transform 0.05s ease;
    white-space: nowrap;
}

.contact-pill:hover {
    filter: brightness(0.98);
    transform: translateY(-1px);
}

/* SMS – neutral blue */
.contact-sms {
    background: rgba(37, 99, 235, 0.10);     /* blue-500 */
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, 0.25);
}

/* WhatsApp – soft green */
.contact-whatsapp {
    background: rgba(34, 197, 94, 0.12);     /* green-500 */
    color: #166534;
    border-color: rgba(34, 197, 94, 0.35);
}

/* Customer link – gold themed */
.contact-link {
    background: rgba(212, 175, 55, 0.14);    /* gold */
    color: #111827;
    border-color: rgba(212, 175, 55, 0.45);
}
/* ======================================================
   Admin Dashboard Stats (dope + professional)
   ====================================================== */

.admin-stats-shell{
    margin-bottom: 14px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(212,175,55,0.18);
    background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

.admin-stats-head{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.admin-stats-title{
    color: rgba(255,255,255,0.92);
    font-weight: 900;
    letter-spacing: 0.2px;
    font-size: 14px;
}

.admin-date{
    display:flex;
    align-items:center;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-date input[type="date"]{
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.92);
    font-weight: 800;
    outline: none;
}

.admin-stats-grid{
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 980px){
    .admin-stats-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
    .admin-stats-grid{ grid-template-columns: 1fr; }
}

.admin-stat-card{
    text-decoration: none;
    border-radius: 16px;
    padding: 12px 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    box-shadow: 0 10px 22px rgba(0,0,0,0.16);
    transition: transform .08s ease, filter .15s ease, border-color .15s ease;
}

.admin-stat-card:hover{
    transform: translateY(-2px);
    filter: brightness(1.02);
    border-color: rgba(212,175,55,0.30);
}

.admin-stat-card .t{
    color: rgba(255,255,255,0.76);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-stat-card .n{
    margin-top: 6px;
    color: rgba(255,255,255,0.96);
    font-weight: 1000;
    font-size: 26px;
    letter-spacing: 0.2px;
}

.admin-stat-card .s{
    margin-top: 3px;
    color: rgba(255,255,255,0.70);
    font-size: 12px;
    font-weight: 700;
}

.admin-stat-gold{
    background: linear-gradient(135deg, rgba(246,211,101,0.14) 0%, rgba(212,175,55,0.10) 45%, rgba(184,134,11,0.10) 100%);
    border-color: rgba(212,175,55,0.22);
}

/* Drilldown tips header */
.admin-tips-top{
    display:flex;
    justify-content:flex-start;
    gap: 10px;
    flex-wrap: wrap;
}
.admin-tips-total{
    border-radius: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(212,175,55,0.22);
    background: rgba(212,175,55,0.10);
}
.admin-tips-total .k{
    font-size: 12px;
    color: #6b7280;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.admin-tips-total .v{
    margin-top: 6px;
    font-size: 26px;
    font-weight: 1000;
    color: #111827;
}
/* ======================================================
   Admin filters - Location select polish
   ====================================================== */

.admin-location{
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.92);
    font-weight: 800;
    outline: none;
    min-width: 220px;
}

.admin-location option{
    color: #111827;
}

.dash-scope{
    color: rgba(255,255,255,0.65);
    font-weight: 700;
    font-size: 12px;
    margin-left: 6px;
}

/* Survey – purple */
.ticket-contact-links a.contact-survey {
    background: rgba(168, 85, 247, 0.12);
    color: #6d28d9;
    border-color: rgba(168, 85, 247, 0.28);
}
.ticket-contact-links a.contact-survey::before { content: "📝"; }

/* ======================================================
   Feedback Dashboard (CEO-friendly)
   ====================================================== */

.feedback-head{
    display:flex;
    justify-content: space-between;
    align-items:flex-start;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.feedback-table th, .feedback-table td{
    vertical-align: top;
}

.fb-ticket{
    font-weight: 900;
    color: #111827;
}

.fb-sub{
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    font-weight: 700;
}

.fb-pill{
    display:inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(212,175,55,0.35);
    background: rgba(212,175,55,0.10);
    color: #111827;
    font-weight: 900;
    font-size: 12px;
    white-space: nowrap;
}

.fb-plate{
    display:inline-block;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(17,24,39,0.10);
    background: #f9fafb;
    font-weight: 900;
}

.fb-ratings{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    min-width: 240px;
}

.fb-rate{
    border: 1px solid rgba(17,24,39,0.10);
    background: #f9fafb;
    border-radius: 12px;
    padding: 8px 10px;
}

.fb-rate .k{
    display:block;
    font-size: 11px;
    color: #6b7280;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fb-rate .v{
    display:block;
    margin-top: 4px;
    font-size: 18px;
    font-weight: 1000;
    color: #111827;
}

.fb-comment{
    font-size: 13px;
    color: #111827;
    line-height: 1.45;
    max-width: 420px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 800px){
    .fb-ratings{ grid-template-columns: 1fr; min-width: 0; }
    .fb-comment{ max-width: 100%; }
}