/* ==========================================================================
   leasetickets.com / Versa Energy Services — brand layer (orange + blue)
   Loaded AFTER style.css on both index.html (driver) and admin.html.
   Colors only + light polish; no layout changes for the driver app.
   ========================================================================== */
:root {
    --brand-navy-950: #061428;
    --brand-navy-900: #0B1F3A;   /* sidebar / header background */
    --brand-navy-800: #0B2545;   /* table headers, headings */
    --brand-navy-700: #13315C;
    --brand-blue-600: #1D4ED8;   /* primary buttons / links */
    --brand-blue-700: #1E40AF;   /* primary hover */
    --brand-blue-50:  #E8EFFB;   /* tints */
    --brand-orange-500: #F26B1D; /* safety orange accent / active / CTA */
    --brand-orange-600: #D9560B; /* CTA hover */
    --brand-orange-50:  #FFF1E8;
    --brand-bg:      #F3F6FA;
    --brand-border:  #DCE3EE;
    --brand-text:    #1B2A41;
    --brand-muted:   #5A6B82;
}

body { background: var(--brand-bg); color: var(--brand-text); }

/* Header bar (driver app + admin login state) */
.nav { background: var(--brand-navy-900); border-bottom: 3px solid var(--brand-orange-500); }
.brand-name span, .logo span { color: var(--brand-orange-500); }
.brand-tag, .admin-link { color: #A9BCD9; }

/* Buttons */
button { background: var(--brand-blue-600); transition: background .15s, box-shadow .15s, opacity .15s; }
button:hover { opacity: 1; background: var(--brand-blue-700); }
.submit-btn { background: var(--brand-orange-500); font-weight: 600; }
.submit-btn:hover { background: var(--brand-orange-600); }
.logout-btn { background: #64748B; }
.logout-btn:hover { background: #475569; }
.danger-btn, .danger-btn:hover { background: #DC2626; }
.gps-btn, .maps-btn, .ticket-list .complete-btn { background: var(--brand-navy-700); }
.gps-btn:hover, .maps-btn:hover { background: var(--brand-navy-800); }
.ticket-list .print-btn, .ticket-table .print-btn { background: var(--brand-navy-800); }
.edit-btn { background: var(--brand-orange-500); }
.edit-btn:hover { background: var(--brand-orange-600); }
button:focus-visible { outline: 3px solid rgba(242,107,29,.45); outline-offset: 1px; }

/* Driver/legacy tabs (driver app keeps its layout, just recolored) */
.main-tabs button.tab-active { background: var(--brand-navy-800); box-shadow: inset 0 -3px 0 var(--brand-orange-500); }
.sub-tabs { background: var(--brand-blue-50); border-left-color: var(--brand-orange-500) !important; }
.sub-tabs button { color: var(--brand-navy-800); border-color: #C9D5E6; }
.sub-tabs button:hover { background: #fff; color: var(--brand-orange-600); }
.sub-tabs button.sub-active { background: var(--brand-orange-500); border-color: var(--brand-orange-500); color: #fff; }

/* Inputs */
input, select, textarea { border-color: #C9D5E6; background: #fff; }
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--brand-blue-600);
    box-shadow: 0 0 0 3px rgba(29,78,216,.15);
}

/* Cards / sections */
.option-section { border-left-color: var(--brand-orange-500); box-shadow: 0 1px 2px rgba(11,31,58,.06); }
.login-screen, .driver-login-card { border-top: 4px solid var(--brand-orange-500); box-shadow: 0 10px 30px rgba(11,31,58,.10); }
.login-screen h2, .driver-login-card h2 { color: var(--brand-navy-800); }

/* Tables */
.ticket-table table, .rates-table { box-shadow: 0 1px 2px rgba(11,31,58,.06); }
.ticket-table th, .rates-table th { background: var(--brand-navy-800); color: #fff; font-weight: 600; letter-spacing: .2px; }
.ticket-table tr:hover { background: var(--brand-orange-50); }
.ticket-table tbody tr:nth-child(even) { background: #F8FAFD; }
.ticket-table tbody tr:nth-child(even):hover { background: var(--brand-orange-50); }

/* Modals */
.modal { background: rgba(6,20,40,.6); }
.modal-content { border-radius: 12px; border-top: 4px solid var(--brand-orange-500); box-shadow: 0 20px 50px rgba(6,20,40,.35); }
.modal-content h3 { color: var(--brand-navy-800); }

/* Badges */
.status-badge.in_progress, .status-badge.status-assigned { background: var(--brand-orange-50); color: #9A3D06; }
.status-badge.status-accepted { background: var(--brand-blue-50); color: var(--brand-blue-700); }
.edit-id { color: var(--brand-orange-600); }