/* Trucks List — customer portal design tokens.
 * Additive layer over the legacy tokens declared inline in views/partials/header.ejs.
 * This file is loaded BEFORE mobile.css so its variables are available globally.
 *
 * Convention: tokens introduced here use the `--tl-` prefix to avoid collisions
 * with the older `--primary-color` / `--text-primary` / etc. that already exist
 * in header.ejs. New templates should prefer `--tl-*` tokens; older templates
 * keep working unchanged.
 */

:root {
    /* Background scale: dark page surface, cards float on top.
     * Increased contrast vs prior palette — cards now read as a distinct layer. */
    --tl-bg-1: #0f1020;
    --tl-bg-2: #16172e;
    --tl-card: #232547;
    --tl-card-2: #1c1e36;
    --tl-line: rgba(255, 255, 255, 0.10);

    /* Text (matches dashboard). */
    --tl-text: #e0e6f5;
    --tl-text-dim: #a0aac8;
    --tl-text-muted: #7c80a6;

    /* Brand — primary palette mirrors dashboard's #4e73df gradient. */
    --tl-primary: #4e73df;
    --tl-primary-2: #6a8ae4;
    --tl-primary-dark: #3a57c9;
    --tl-accent: #ff4500;

    /* Status (matches Bootstrap-style success/danger/warning used in dashboard). */
    --tl-danger: #dc3545;
    --tl-warn: #ffc107;
    --tl-ok: #28a745;

    /* Radii */
    --tl-radius-input: 12px;
    --tl-radius-btn: 12px;
    --tl-radius-card: 22px;
    --tl-radius-pill: 999px;

    /* Shadows */
    --tl-shadow-card: 0 20px 60px rgba(0, 0, 0, 0.45);

    /* Legacy tokens (previously declared inline in views/partials/header.ejs).
     * Same names, same values, moved here so all design tokens live in one place.
     * Kept without the `--tl-` prefix to remain compatible with the many
     * `var(--primary-color)` / `var(--text-primary)` references in older pages.
     */
    --primary-color: #4e73df;
    --primary-light: #6a8ae4;
    --primary-dark: #3a57c9;
    --secondary-color: #00875a;
    --secondary-light: #00b377;
    --secondary-dark: #006644;
    --accent-color: #ff5630;
    --accent-light: #ff7452;
    --accent-dark: #de350b;
    --background-light: #1e1e1e;
    --background-dark: #121212;
    --text-primary: #f0f0f0;
    --text-secondary: #b0b0b0;
    --text-light: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.2);

    /* Per-page legacy tokens (were declared in views/customer/my-trucks.ejs).
     * Added here so the local :root block can be removed. Same values.
     * Note: --text-secondary from this file is omitted — it differs from the
     * header.ejs value (#b0b0b0) and was unused in my-trucks.ejs.
     */
    --background-dark: #2a2a3c;
    --background-light: #353549;
    --primary-dark: #0d6efd;
    --primary-darker: #0b5ed7;
}

/* Shared custom-modal styles (used by /js/custom-modal.js).
 * Class prefix `cm-` avoids collisions with legacy `.modal` rules in
 * individual pages. Replaces duplicated modal CSS in my-trucks.ejs and
 * requests.ejs.
 */
.cm-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.cm-modal-content {
    background: linear-gradient(135deg, #2a2a3c 0%, #1e1e2e 100%);
    width: 80%;
    max-width: 350px;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    padding: 25px;
    color: #fff;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.cm-modal-message {
    margin-bottom: 25px;
    font-size: 18px;
    line-height: 1.5;
}

.cm-modal-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.cm-modal-button {
    background: linear-gradient(135deg, #4a4a5c 0%, #353549 100%);
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.cm-modal-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.cm-modal-button--secondary {
    background: linear-gradient(135deg, #3a3a4c 0%, #252539 100%);
}

.cm-prompt-input {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.05);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    min-height: 100px;
    font-family: inherit;
    font-size: 16px;
    resize: vertical;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Global card treatment — applies to Bootstrap .card and gives every card
 * a consistent border, radius, and shadow that reads as a distinct surface
 * on top of the darker page background. Pages can override per-class. */
.card,
.dashboard-card {
    background-color: var(--tl-card);
    border: 1px solid var(--tl-line);
    border-radius: var(--tl-radius-card);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    color: var(--tl-text);
}

/* Make the dark page background explicit on <body> so cards always float. */
body {
    background-color: var(--tl-bg-1);
}