/* =====================================================
   LuxTravely Platform — Global Form & UI Shared Styles
   main.css  |  Load AFTER Tailwind, BEFORE page CSS
   ===================================================== */

/* ── CSS Custom Properties (Design Tokens) ── */
:root {
    --lux-gold:        var(--lp-gold);
    --lux-gold-hover:  var(--lp-gold-dark);
    --lux-gold-light:  rgba(179,166,134,.22);
    --lux-gold-ring:   rgba(179,166,134,.35);
    --lux-border:      var(--lp-line);   /* gray-300 */
    --lux-radius:      0.375rem;  /* 6px */
    --lux-radius-lg:   0.75rem;   /* 12px */
    --lux-shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
    --lux-shadow:      0 4px 12px rgba(0,0,0,.08);
    --lux-transition:  0.18s ease;
}

/* ── Global Input Style (input-lux) ──
   Used across ALL modules: agent, traveler, driver, corporate, admin.
   Define once here — never repeat per-page.
   ────────────────────────────────────────────────── */
.input-lux {
    display: block;
    width: 100%;
    padding: 0.625rem 0.75rem;           /* 10px 12px */
    border: 1px solid var(--lux-border);
    border-radius: var(--lux-radius);
    background-color: var(--lp-card, #fff);
    color: var(--lp-ink);                       /* gray-900 */
    font-size: 0.875rem;                  /* text-sm */
    line-height: 1.5;
    transition: border-color var(--lux-transition),
                box-shadow var(--lux-transition);
    -webkit-appearance: none;
    appearance: none;
}

/* Hide native browser date/time picker icons — prevents double-icon
   flash before datetime-picker.js injects its own CSS + SVG toggle.
   Duplicated from the JS-injected stylesheet as a static rule so it
   applies before any JavaScript executes.                           */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button,
input[type="time"]::-webkit-clear-button {
    display: none;
    -webkit-appearance: none;
    appearance: none;
}

.input-lux:focus {
    outline: none;
    border-color: var(--lux-gold);
    box-shadow: 0 0 0 3px var(--lux-gold-ring);
}

.input-lux:disabled,
.input-lux[readonly] {
    background-color: var(--lp-card2);            /* gray-50 */
    cursor: not-allowed;
    opacity: 0.75;
}

.input-lux.input-error,
.input-lux:invalid:not(:focus):not(:placeholder-shown) {
    border-color: var(--lp-err);                /* red-500 */
    box-shadow: 0 0 0 3px rgba(191,71,59,.18);
}

/* ── Textarea variant ── */
textarea.input-lux {
    resize: vertical;
    min-height: 5rem;
}

/* ── Select arrow override (Tailwind resets the browser arrow; restore it) ── */
select.input-lux {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    background-size: 1.125rem;
    padding-right: 2.25rem;
}

/* ── Lux primary button ── */
.btn-lux-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    background-color: var(--lux-gold);
    color: var(--lp-on-gold, #2A2618);
    border: 1px solid transparent;
    border-radius: var(--lux-radius);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--lux-transition),
                box-shadow var(--lux-transition),
                transform var(--lux-transition);
}

.btn-lux-primary:hover {
    background-color: var(--lux-gold-hover);
    box-shadow: 0 2px 8px var(--lux-gold-ring);
}

/* ── Stat card (shared across dashboards) ── */
.stat-card {
    background: var(--lp-card, #fff);
    border-radius: var(--lux-radius-lg);
    padding: 1.25rem;
    box-shadow: var(--lux-shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--lux-shadow);
}

/* ── Action card (quick-action grids) ── */
.action-card {
    background: var(--lp-card, white);
    border-radius: var(--lux-radius-lg);
    padding: 1.25rem;
    text-align: center;
    cursor: pointer;
    border: 1px solid var(--lp-line);
    box-shadow: var(--lux-shadow-sm);
    transition: border-color 0.2s ease,
                transform 0.25s cubic-bezier(0.4,0,0.2,1),
                box-shadow 0.25s ease;
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.action-card:hover {
    border-color: var(--lux-gold);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 24px var(--lux-gold-light);
}

/* ── Date/Time Input Specific Styles ── */
.form-datetime-custom {
    position: relative;
}

.form-datetime-custom > label {
    position: absolute;
    top: 0;
    left: 0.875rem;
    transform: translateY(-50%);
    padding: 0 0.25rem;
    background: var(--lp-card, white);
    color: var(--lp-ink);
    font-size: 0.75rem;
    font-weight: 600;
    pointer-events: none;
    z-index: 1 !important;
}

.form-datetime-custom > input {
    height: 2.75rem;
    padding-top: 0.5rem;
}