/* ==========================================================================
   Floorplan Tracker Site-Wide Design System
   Loaded by: Administrator/Admin_siteheader.cfm (and future pages)
   ========================================================================== */

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES
   ========================================================================== */
:root {
    /* Brand Colors */
    --fpt-red: #EF3C39;
    --fpt-red-dark: #b1191c;
    --fpt-red-light: #ff6967;
    --fpt-red-pale: #fde8e7;
    --fpt-red-faint: #fdf5f5;

    /* Semantic Colors */
    --fpt-orange: #FF9933;
    --fpt-yellow: #FFFF00;
    --fpt-yellow-highlight: #fffde6;
    --fpt-row-alt: #f8f8fc;

    /* Grays */
    --fpt-border: #e0e0e0;
    --fpt-border-light: #eee;
    --fpt-text: #333;
    --fpt-text-light: #666;
    --fpt-text-muted: #999;
    --fpt-bg: #f5f7fa;
    --fpt-bg-white: #fff;

    /* Typography */
    --fpt-font-body: 'Times New Roman', Times, serif;
    --fpt-font-ui: 'Segoe UI', Verdana, Arial, Helvetica, sans-serif;
    --fpt-font-size: 14px;
    --fpt-font-size-sm: 12px;
    --fpt-font-size-xs: 11px;

    /* Spacing & Radii */
    --fpt-radius-sm: 4px;
    --fpt-radius-md: 8px;
    --fpt-radius-lg: 12px;
    --fpt-space-xs: 4px;
    --fpt-space-sm: 8px;
    --fpt-space-md: 16px;
    --fpt-space-lg: 24px;
    --fpt-space-xl: 32px;

    /* Shadows */
    --fpt-shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
    --fpt-shadow-md: 0 2px 12px rgba(0,0,0,0.08);
    --fpt-shadow-lg: 0 4px 20px rgba(0,0,0,0.12);

    /* Transitions */
    --fpt-transition: 0.2s ease;

    /* Customer Color (set dynamically by Admin_siteheader.cfm) */
    /* --fpt-customer-color: #EF3C39; */
}

/* ==========================================================================
   2. BASE / RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    background-color: var(--fpt-bg);
    font-family: var(--fpt-font-body);
    font-size: var(--fpt-font-size);
    color: var(--fpt-text);
    line-height: 1.5;
    padding-bottom: 40px; /* space for fixed bottom bar */
}

a { color: var(--fpt-red); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

/* Hide the browser-default spinner buttons on number inputs. The up/down
   arrows take valuable width on narrow fields and encourage accidental
   clicks. Combined with the wheel-blur handler in global.js, number inputs
   render as plain text boxes but still bring up the numeric keypad on
   phones. Same pattern as gkfsinc.com. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ==========================================================================
   3. LAYOUT UTILITIES
   ========================================================================== */
.page-wrapper {
    width: 98%;
    margin: 0 auto;
    padding: 0 0 30px;
    /* Wide tables (DealerInventory, etc.) wrapped in .fpt-overflow-x can
       still overflow the wrapper if nothing above constrains them. Clip at
       the page-wrapper boundary so .fpt-overflow-x's internal scroll works
       — otherwise the whole .fpt-card balloons past the viewport right edge
       and users see columns cut off with no scrollbar. */
    overflow-x: hidden;
    max-width: 100%;
}

.fpt-flex { display: flex; }
.fpt-flex-center { display: flex; align-items: center; }
.fpt-flex-between { display: flex; justify-content: space-between; align-items: center; }
.fpt-flex-end { display: flex; justify-content: flex-end; align-items: center; }
.fpt-flex-wrap { flex-wrap: wrap; }
.fpt-gap-sm { gap: var(--fpt-space-sm); }
.fpt-gap-md { gap: var(--fpt-space-md); }
.fpt-gap-lg { gap: var(--fpt-space-lg); }

.fpt-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fpt-space-md); }
.fpt-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--fpt-space-md); }
/* Wide-table wrapper. max-width:100% is critical — without it a 20-column
   data-table (e.g. DealerInventory) renders at its natural width (~1600px),
   stretches the wrapper past its parent, and the whole page overflows to
   the right. Users with narrower monitors see the left side of the table
   cut off because body horizontal scroll is positioned past the start. The
   max-width constraint keeps the wrapper inside its parent so overflow-x:
   auto creates an INTERNAL scrollbar on the table instead. */
.fpt-overflow-x { overflow-x: auto; max-width: 100%; width: 100%; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */
.page-title {
    text-align: center;
    padding: 15px 0 10px;
    margin: 0;
    font-family: var(--fpt-font-body);
    font-size: 28px;
    font-weight: 600;
}

.fpt-section-title {
    font-family: var(--fpt-font-body);
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 var(--fpt-space-md);
    padding-bottom: 10px;
    border-bottom: 2px solid var(--fpt-border);
}

.fpt-subtitle {
    font-size: 16px;
    color: var(--fpt-text-light);
}

.fpt-text-right { text-align: right; }
.fpt-text-center { text-align: center; }
.fpt-text-sm { font-size: var(--fpt-font-size-sm); }
.fpt-text-xs { font-size: var(--fpt-font-size-xs); }
.fpt-text-bold { font-weight: 700; }
.fpt-text-muted { color: var(--fpt-text-muted); }

/* Customer Color (set dynamically via --fpt-customer-color) */
.fpt-customer-color { color: var(--fpt-customer-color); }
.fpt-customer-bg { background-color: var(--fpt-customer-color); color: #fff; }

/* ==========================================================================
   5. NAVIGATION / SITE HEADER
   ========================================================================== */
.fpt-header {
    background: var(--fpt-bg-white);
    box-shadow: var(--fpt-shadow-md);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* DEV Banner */
.dev-banner {
    background-color: #FF8C00;
    color: #fff;
    text-align: center;
    padding: 6px 10px;
    font-family: var(--fpt-font-ui);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Row 1: Logo + Welcome + Search */
.header-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--fpt-border-light);
    flex-wrap: wrap;
    gap: 10px;
}
.header-logo img { max-height: 55px; width: auto; }
.header-welcome {
    text-align: center;
    font-family: var(--fpt-font-ui);
    font-size: 13px;
    flex: 1;
}
.header-welcome .user-name { font-weight: 700; font-size: 14px; }
.header-welcome .datetime { font-size: var(--fpt-font-size-xs); color: var(--fpt-text-light); }
.header-message { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.header-notes a { color: var(--fpt-red); font-weight: 700; font-size: 13px; text-decoration: none; }
.header-notes a:hover { text-decoration: underline; }
.header-notes .no-notes { font-size: var(--fpt-font-size-xs); color: var(--fpt-text-muted); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.header-search { display: flex; align-items: center; gap: 4px; }
.header-search input[type="text"] {
    padding: 6px 10px; border: 1px solid #ccc; border-radius: var(--fpt-radius-sm);
    font-size: var(--fpt-font-size-sm); width: 80px;
}
.header-search input[type="text"]:focus {
    outline: none; border-color: var(--fpt-red);
    box-shadow: 0 0 0 2px rgba(239,60,57,0.15);
}
.header-search button {
    padding: 6px 12px; background: var(--fpt-red); color: #fff; border: none;
    border-radius: var(--fpt-radius-sm); font-size: var(--fpt-font-size-sm); cursor: pointer;
}
.header-search button:hover { background: var(--fpt-red-dark); }
.pw-link {
    font-size: var(--fpt-font-size-xs); color: var(--fpt-red); text-decoration: none;
    border: 1px solid var(--fpt-red); padding: 5px 10px; border-radius: var(--fpt-radius-sm);
    transition: all var(--fpt-transition); white-space: nowrap;
}
.pw-link:hover { background: var(--fpt-red); color: #fff; text-decoration: none; }

/* Main Navigation Bar */
.main-nav { background: linear-gradient(135deg, var(--fpt-red) 0%, var(--fpt-red-dark) 100%); }
.nav-container { display: flex; justify-content: space-between; align-items: center; max-width: 95%; margin: 0 auto; padding: 0 16px; }

/* Hamburger Toggle */
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 10px; z-index: 1001; }
.nav-toggle span { display: block; width: 24px; height: 3px; background: #fff; margin: 5px 0; border-radius: 2px; transition: all 0.3s ease; }
.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); }

/* Nav Menu */
.nav-menu { display: flex; justify-content: space-between; flex: 1; list-style: none; margin: 0; padding: 0; }
.nav-menu > li { position: relative; }
.nav-menu > li > a {
    display: flex; align-items: center; gap: 5px; padding: 12px 14px; color: #fff; text-decoration: none;
    font-family: var(--fpt-font-ui); font-size: var(--fpt-font-size-sm); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px; transition: background var(--fpt-transition); white-space: nowrap;
}
.nav-menu > li > a:hover, .nav-menu > li:hover > a { background: rgba(255,255,255,0.15); }
.nav-menu > li > a img { width: 20px; height: 20px; }

/* Dropdown Arrow */
.nav-menu > li.has-dropdown > a::after {
    content: ''; border: 4px solid transparent; border-top-color: #fff; margin-left: 4px; margin-top: 2px;
}

/* Dropdown Menu */
.dropdown {
    position: absolute; top: 100%; left: 0; background: var(--fpt-bg-white); min-width: 220px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 0 0 var(--fpt-radius-sm) var(--fpt-radius-sm);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all var(--fpt-transition);
    z-index: 1000; list-style: none; margin: 0; padding: 6px 0;
}
.dropdown-scroll { max-height: 70vh; overflow-y: auto; }
.nav-menu > li:hover > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown li a {
    display: block; padding: 8px 16px; color: var(--fpt-text); text-decoration: none;
    font-family: var(--fpt-font-ui); font-size: var(--fpt-font-size-sm); transition: all 0.15s;
}
.dropdown li a:hover { background: var(--fpt-red-pale); color: var(--fpt-red); padding-left: 20px; }
.dropdown .sep { border-top: 1px solid var(--fpt-border-light); margin: 4px 0; }

/* Nested Dropdown */
.dropdown li { position: relative; }
.dropdown li.has-dropdown > a::after {
    content: ''; border: 4px solid transparent; border-left-color: var(--fpt-text-muted);
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
}
.dropdown .dropdown { top: 0; left: 100%; border-radius: var(--fpt-radius-sm); }
.dropdown li:hover > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

/* Logout */
/* Mobile View Link - hidden on desktop */
.mobile-view-link { display: none; }

.nav-logout a { background: rgba(220,53,69,0.2); }
.nav-logout a:hover { background: rgba(220,53,69,0.4) !important; }

/* Bottom Bar */
.site-bottom-bar {
    background-color: #555; border-top: 1px solid #777; position: fixed; bottom: 0; left: 0;
    width: 100%; height: 32px; z-index: 999; display: flex; align-items: center;
    justify-content: space-between; padding: 0 15px; box-sizing: border-box;
    font-family: var(--fpt-font-ui); font-size: var(--fpt-font-size-xs); color: #ccc;
}
.site-bottom-bar a { color: #ccc; text-decoration: none; }
.site-bottom-bar a:hover { color: #fff; }
.bottom-search { display: flex; align-items: center; gap: 4px; }
.bottom-search input[type="text"] {
    padding: 3px 6px; font-size: var(--fpt-font-size-xs); border: 1px solid #888;
    border-radius: 3px; width: 70px; background: #666; color: #fff;
}
.bottom-search button {
    padding: 3px 8px; font-size: var(--fpt-font-size-xs); background: #777; color: #fff;
    border: 1px solid #888; border-radius: 3px; cursor: pointer;
}

/* ==========================================================================
   6. CARDS
   ========================================================================== */
/* -- Tabs -- */
.fpt-tabs { margin-bottom: 20px; }
.fpt-tab-buttons {
    display: flex; gap: 0; padding: 0; list-style: none;
    border-bottom: 3px solid var(--fpt-customer-color, var(--fpt-red));
    margin-bottom: 0;
}
.fpt-tab-btn {
    padding: 10px 28px; background: #eee; border: 1px solid #ccc;
    border-bottom: 3px solid var(--fpt-customer-color, var(--fpt-red));
    border-radius: 8px 8px 0 0; cursor: pointer;
    font-family: var(--fpt-font-body); font-size: 15px; font-weight: 600;
    color: var(--fpt-text-light); transition: all var(--fpt-transition);
    margin-right: -1px; margin-bottom: -3px; position: relative;
}
.fpt-tab-btn:hover { background: #f5f5f5; color: var(--fpt-text); }
.fpt-tab-btn.active {
    background: var(--fpt-bg-white); color: var(--fpt-customer-color, var(--fpt-red));
    border-color: var(--fpt-customer-color, var(--fpt-red));
    border-bottom-color: var(--fpt-bg-white);
    z-index: 1;
}
.fpt-tab-content { display: none; }
.fpt-tab-content.active { display: block; }

/* -- Cards -- */
.fpt-card {
    background: var(--fpt-bg-white);
    border: 1px solid var(--fpt-border);
    border-radius: var(--fpt-radius-sm);
    box-shadow: var(--fpt-shadow-md);
    padding: 15px 15px;
    margin-bottom: 15px;
    width: 100%;
}

.fpt-card-header {
    font-family: var(--fpt-font-body);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: var(--fpt-space-md);
    padding: 6px 16px 10px;
    border-bottom: 2px solid var(--fpt-border);
    color: var(--fpt-customer-color, var(--fpt-red));
    background: transparent;
}
/* Tinted-bar variant — brand background with white text, sits flush
   at the top of a padding:0 card. */
.fpt-card-header.fpt-customer-bg,
.fpt-card-header.fpt-red-bg {
    background: var(--fpt-customer-color, var(--fpt-red));
    color: #fff;
    padding: 10px 16px;
    margin-bottom: 0;
    border-bottom: none;
}

.fpt-card-sm { padding: var(--fpt-space-md); }
.fpt-card-flush { padding: 0; }
.fpt-card-flush .fpt-card-header { padding: var(--fpt-space-md) var(--fpt-space-lg); margin-bottom: 0; }
.fpt-card-flush .fpt-card-body { padding: var(--fpt-space-lg) 28px; }

/* ==========================================================================
   7. FORMS
   ========================================================================== */
.fpt-form-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 10px 16px;
    align-items: center;
    font-size: var(--fpt-font-size);
}

.fpt-form-group { margin-bottom: var(--fpt-space-md); }

.fpt-label {
    display: block;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--fpt-text);
    font-size: var(--fpt-font-size);
}
.fpt-label .required { color: var(--fpt-red); margin-left: 2px; }
.fpt-form-grid .fpt-label { text-align: right; margin-bottom: 0; }

.fpt-input, .fpt-select, .fpt-textarea {
    padding: 8px 12px;
    border: 1px solid var(--fpt-border);
    border-radius: 4px;
    font-size: 13px;
    font-family: var(--fpt-font-ui);
    transition: border-color var(--fpt-transition), box-shadow var(--fpt-transition);
}

/* Full width only inside form grids, not globally */
.fpt-form-grid .fpt-input,
.fpt-form-grid .fpt-select,
.fpt-form-grid .fpt-textarea { width: 100%; }
.fpt-input:focus, .fpt-select:focus, .fpt-textarea:focus {
    outline: none;
    border-color: var(--fpt-red);
    box-shadow: 0 0 0 3px rgba(239,60,57,0.12);
}
.fpt-input[readonly] { background: #f5f5f5; color: var(--fpt-text-light); }
.fpt-input-sm { padding: 6px 10px; font-size: var(--fpt-font-size-sm); }
.fpt-select { cursor: pointer; }

.fpt-form-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.fpt-checkbox, .fpt-radio { accent-color: var(--fpt-red); width: 18px; height: 18px; cursor: pointer; }

/* ==========================================================================
   7b. PAGE TITLE BAR
   ========================================================================== */
.fpt-title-bar {
    text-align: center;
    padding: 14px 16px;
    margin: 0 0 12px;
    font-family: var(--fpt-font-body);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--fpt-red-dark);
    text-transform: uppercase;
}

/* ==========================================================================
   7c. FILTER BAR
   ========================================================================== */
.fpt-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    flex-wrap: wrap;
}

.fpt-filter-bar label {
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    flex: none;
}

/* HTML5 date inputs auto-size narrow by default -- the old
 * <cfinput type="datefield"> had width="100" baked in; replacing it
 * with <input type="date"> during the CF 2023 sweep dropped that.
 * Give every bare date input enough room for mm/dd/yyyy + the
 * calendar icon so forms don't look cramped. Specificity note:
 * input[type="date"] is 0,0,1,1; most other input rules in the
 * app are tag-only (0,0,0,1) so this wins without !important. */
input[type="date"] {
    min-width: 11em;
    width: 11em;
    padding: 2px 6px;
    box-sizing: content-box;
    font-size: 14px;
    font-family: inherit;
}

.fpt-filter-bar select,
.fpt-filter-bar input[type="date"],
.fpt-filter-bar input[type="text"],
.fpt-filter-bar .fpt-select,
.fpt-filter-bar .fpt-input {
    flex: none;
    width: auto;
    min-width: 120px;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
}

.fpt-filter-bar button,
.fpt-filter-bar .fpt-btn {
    flex: none;
}

/* ==========================================================================
   8. BUTTONS - Contemporary Flat Design
   ========================================================================== */
.fpt-btn {
    display: inline-flex;
    background: var(--fpt-red);
    color: #fff;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--fpt-font-ui);
    cursor: pointer;
    text-decoration: none;
    line-height: 1.4;
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.fpt-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    text-decoration: none;
}
.fpt-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.fpt-btn:focus-visible {
    outline: 2px solid var(--fpt-red);
    outline-offset: 2px;
}

/* Primary - solid brand red */
.fpt-btn-primary {
    background: var(--fpt-red);
    color: #fff;
}
.fpt-btn-primary:hover {
    background: var(--fpt-red-dark);
    box-shadow: 0 4px 14px rgba(239,60,57,0.35);
    color: #fff;
}

/* Secondary - outlined */
.fpt-btn-secondary {
    background: var(--fpt-bg-white);
    color: var(--fpt-red);
    border: 1.5px solid var(--fpt-red);
    box-shadow: none;
}
.fpt-btn-secondary:hover {
    background: var(--fpt-red-pale);
    color: var(--fpt-red-dark);
    box-shadow: 0 2px 8px rgba(239,60,57,0.12);
}

/* Danger - solid red (kept distinct for destructive actions) */
.fpt-btn-danger {
    background: #dc3545;
    color: #fff;
}
.fpt-btn-danger:hover {
    background: #b02a37;
    box-shadow: 0 4px 14px rgba(220,53,69,0.35);
    color: #fff;
}

/* Warning - solid amber */
.fpt-btn-warning {
    background: #f0ad4e;
    color: #333;
}
.fpt-btn-warning:hover {
    background: #d99a3e;
    box-shadow: 0 4px 14px rgba(240,173,78,0.35);
}

/* Info - solid blue */
.fpt-btn-info {
    background: #0d6efd;
    color: #fff;
}
.fpt-btn-info:hover {
    background: #0a58ca;
    box-shadow: 0 4px 14px rgba(13,110,253,0.35);
    color: #fff;
}

/* Ghost - minimal, no border */
.fpt-btn-ghost {
    background: transparent;
    color: var(--fpt-red);
    box-shadow: none;
}
.fpt-btn-ghost:hover {
    background: var(--fpt-red-faint);
    box-shadow: none;
}

/* Icon button - square, for toolbar actions */
.fpt-btn-icon {
    padding: 8px;
    border-radius: 6px;
    min-width: 36px;
    min-height: 36px;
}
.fpt-btn-icon img { width: 18px; height: 18px; }

/* Sizes */
.fpt-btn-xs { padding: 4px 10px; font-size: 11px; border-radius: 5px; }
.fpt-btn-sm { padding: 7px 16px; font-size: 13px; border-radius: 6px; }
.fpt-btn-lg { padding: 14px 32px; font-size: 16px; border-radius: 10px; }

/* Full width */
.fpt-btn-block { display: flex; width: 100%; }

/* Button group */
.fpt-btn-group { display: inline-flex; gap: 0; }
.fpt-btn-group .fpt-btn { border-radius: 0; border-right: 1px solid rgba(255,255,255,0.2); }
.fpt-btn-group .fpt-btn:first-child { border-radius: 8px 0 0 8px; }
.fpt-btn-group .fpt-btn:last-child { border-radius: 0 8px 8px 0; border-right: none; }

/* Disabled state */
.fpt-btn:disabled, .fpt-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   9. DATA TABLES
   ========================================================================== */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--fpt-font-body);
    font-size: var(--fpt-font-size-sm);
    border: 1px solid var(--fpt-border-light);
}
.data-table th {
    padding: 8px;
    font-size: var(--fpt-font-size-xs);
    font-weight: 600;
    color: #fff;
    text-align: left;
    white-space: nowrap;
    background-color: var(--fpt-red-dark);
    border: 1px solid rgba(255,255,255,0.2);
}
.data-table td {
    padding: 6px 8px;
    border: 1px solid var(--fpt-border-light);
}
.data-table td.num, .data-table th.num { text-align: right; }
.data-table tr:hover { background-color: var(--fpt-yellow-highlight) !important; }
.data-table tr.alt { background-color: var(--fpt-row-alt); }

/* Utility alignment classes (global) */
.text-right, .num { text-align: right; }
.text-center, .center { text-align: center; }
.text-left { text-align: left; }

/* Sticky Header */
.data-table thead th { position: sticky; top: 0; z-index: 1; }

/* Column Group Headers */
.data-table .col-group-header th { text-align: center; border-bottom: none; padding-bottom: 2px; }
.data-table .col-header th { padding-top: 2px; }

/* Info Row */
.data-table .info-row th { text-align: left; font-size: var(--fpt-font-size-sm); padding: 8px; }

/* Totals Row */
.data-table tfoot td { font-weight: 700; padding-top: 10px; border-top: 2px solid var(--fpt-border); }

/* Table Links */
.data-table a { color: var(--fpt-red); text-decoration: none; }
.data-table a:hover { text-decoration: underline; }
/* VIN / Stock / Make-Model drill-in links go to VehicleDetail.cfm — those
   should read as plain text in black, not accent-red. The underline on
   hover is enough to signal "link". Per-page row-color overrides (e.g.
   DealerInventory's white-on-red past-term rows) still win via higher
   specificity. */
.data-table a[href*="VehicleDetail.cfm"],
.data-table a[href*="VehicleDetail.cfm"]:visited { color: #000; text-decoration: none; }
.data-table a[href*="VehicleDetail.cfm"]:hover   { text-decoration: underline; }

/* In-Table Inputs */
.fpt-tbl-input {
    text-align: right; font-size: var(--fpt-font-size-sm); padding: 4px 6px;
    border: 1px solid #ddd; border-radius: var(--fpt-radius-sm); width: 85px;
    font-family: var(--fpt-font-body);
}
.fpt-tbl-input:focus { border-color: var(--fpt-red); box-shadow: 0 0 0 2px rgba(239,60,57,0.12); outline: none; }

.fpt-tbl-checkbox { width: 18px; height: 18px; cursor: pointer; accent-color: var(--fpt-red); }

/* ==========================================================================
   10. ALERTS & MESSAGES
   ========================================================================== */
.fpt-alert {
    padding: 14px 18px;
    border-radius: var(--fpt-radius-md);
    margin-bottom: 20px;
    font-size: var(--fpt-font-size);
    border-left: 4px solid;
}
.fpt-alert-error { background: #fee; border-color: var(--fpt-red); color: var(--fpt-red); border-left-color: var(--fpt-red); }
.fpt-alert-success { background: #d4edda; border-color: #c3e6cb; color: #155724; border-left-color: #28a745; }
.fpt-alert-warning { background: #fff3cd; border-color: #ffc107; color: #856404; border-left-color: var(--fpt-orange); }
.fpt-alert-info { background: #d1ecf1; border-color: #bee5eb; color: #0c5460; border-left-color: #17a2b8; }

/* ==========================================================================
   11. TOTALS BAR
   ========================================================================== */
.fpt-totals-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--fpt-red-faint) 0%, var(--fpt-red-pale) 100%);
    border: 1px solid #f5c2bf;
    border-radius: var(--fpt-radius-md);
    margin-bottom: var(--fpt-space-md);
    font-size: var(--fpt-font-size);
}
.fpt-totals-bar strong { color: var(--fpt-red); }
.fpt-totals-bar input[readonly] {
    text-align: right; font-weight: 700; font-size: 15px;
    border: 2px solid var(--fpt-border); padding: 8px 12px; border-radius: 6px;
    background: var(--fpt-bg-white); width: 120px; font-family: var(--fpt-font-body);
}

/* ==========================================================================
   12. BADGES & STATUS INDICATORS
   ========================================================================== */
.fpt-badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: var(--fpt-font-size-xs); font-weight: 600; line-height: 1.4;
}
.fpt-badge-success { background: #d4edda; color: #155724; }
.fpt-badge-danger { background: #f8d7da; color: #721c24; }
.fpt-badge-warning { background: #fff3cd; color: #856404; }

/* Standing Indicators (backward compatible) */
.standing-warning { background-color: var(--fpt-orange) !important; color: #fff; }
.standing-alert { background-color: var(--fpt-red) !important; color: #fff; }
.standing-alert a, .standing-warning a { color: #fff; }

/* Value Indicators */
.negative { color: var(--fpt-red); }
.over-limit { color: var(--fpt-red); font-weight: 600; }

/* ==========================================================================
   13. ACTION BAR
   ========================================================================== */
.action-bar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 0;
    margin-bottom: 8px;
}
.action-bar a, .action-bar span {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--fpt-font-ui); font-size: 12px; font-weight: 500;
    color: var(--fpt-text); text-decoration: none; padding: 7px 14px;
    background: var(--fpt-bg-white); border: 1px solid var(--fpt-border);
    border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.action-bar a:hover {
    background-color: var(--fpt-red-pale); border-color: var(--fpt-red);
    color: var(--fpt-red); text-decoration: none;
}
.action-bar img { height: 20px; width: auto; vertical-align: middle; }

/* ==========================================================================
   14. SUMMARY LAYOUT (sidebar + main)
   ========================================================================== */
.summary-layout { display: flex; gap: 8px; align-items: flex-start; }
.summary-sidebar { width: 90px; flex-shrink: 0; }
.summary-sidebar iframe { width: 100%; height: 1250px; border: 1px solid var(--fpt-border); border-radius: var(--fpt-radius-sm); }
.summary-main { flex: 1; min-width: 0; overflow-x: auto; }

/* ==========================================================================
   15. NO DATA / EMPTY STATE
   ========================================================================== */
.no-data {
    text-align: center; padding: 40px 20px;
    font-size: 16px; color: var(--fpt-text-light);
}

/* ==========================================================================
   16. MODAL
   ========================================================================== */
.fpt-modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 2000; justify-content: center; align-items: flex-start;
    padding-top: 60px; overflow-y: auto;
}
.fpt-modal-overlay.active { display: flex; }
.fpt-modal {
    background: var(--fpt-bg-white); border-radius: var(--fpt-radius-lg);
    box-shadow: var(--fpt-shadow-lg); width: 100%; max-width: 550px;
    margin-bottom: 40px; overflow: hidden;
    animation: fpt-modal-in 0.2s ease-out;
}
@keyframes fpt-modal-in {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
.fpt-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 20px; background-color: var(--fpt-red-dark);
    color: #fff; font-size: 18px; font-weight: 700;
}
.fpt-modal-close {
    background: none; border: none; color: #fff; font-size: 24px;
    cursor: pointer; padding: 0 5px; line-height: 1; opacity: 0.8;
}
.fpt-modal-close:hover { opacity: 1; }
.fpt-modal-body { padding: 20px; }
.fpt-modal-footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 12px 20px; border-top: 1px solid var(--fpt-border-light);
    background: var(--fpt-bg);
}

/* ==========================================================================
   17. FOOTER SPACER
   ========================================================================== */
.fpt-footer-spacer { height: 40px; }

/* ==========================================================================
   18. PRINT STYLES
   ========================================================================== */
@media print {
    .fpt-header, .main-nav, .site-bottom-bar, .action-bar, .dev-banner,
    .nav-toggle, .fpt-footer-spacer { display: none !important; }
    body { padding-bottom: 0; background: #fff; }
    .fpt-card { box-shadow: none; border: 1px solid #ddd; }
    .page-wrapper { max-width: 100%; padding: 0; }
    .data-table th { background-color: #333 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ==========================================================================
   19. RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
    .nav-toggle { display: block; }
    .nav-container { flex-wrap: wrap; }
    .nav-menu { display: none; flex-direction: column; width: 100%; background: var(--fpt-red); max-height: 80vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .nav-menu.active { display: flex; }
    .nav-menu > li > a { padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .dropdown { position: static; box-shadow: none; opacity: 1; visibility: visible; transform: none; display: none; background: rgba(0,0,0,0.15); }
    .nav-menu li.has-dropdown.open > .dropdown { display: block; }
    .dropdown li a { color: #fff; padding: 10px 30px; font-size: 13px; }
    .dropdown li a:hover, .dropdown li a:active { background: rgba(255,255,255,0.15); color: #fff; padding-left: 30px; }
    .dropdown .dropdown { left: 0; top: 0; background: rgba(0,0,0,0.1); }
    .dropdown .dropdown li a { padding-left: 45px; }
    .nav-menu > li.has-dropdown > a::after { transition: transform 0.2s ease; }
    .nav-menu > li.has-dropdown.open > a::after { transform: rotate(180deg); }
    .dropdown li.has-dropdown > a::after { border-left-color: #fff; transition: transform 0.2s ease; }
    .dropdown li.has-dropdown.open > a::after { transform: translateY(-50%) rotate(90deg); }
    .header-info { flex-direction: column; text-align: center; }
    .header-logo img { max-height: 45px; }
    .header-actions { justify-content: center; flex-wrap: wrap; }
    .mobile-view-link { display: list-item; }
    .mobile-view-link a { background: rgba(255,200,0,0.25); }
}

/* iPad landscape */
@media (max-width: 1100px) and (min-width: 769px) {
    .header-info { flex-direction: row; text-align: left; }
    .header-logo img { max-height: 50px; }
    .nav-menu > li > a { padding: 12px 16px; font-size: 12px; }
}

@media (max-width: 768px) {
    /* !important beats the per-form inline grid-template-columns overrides
       (170px/160px/140px label columns on VehicleChargeAdd / VehicleTitleAdd /
       VehicleAuditAdd / VehiclePaymentAdd etc.) so every popup form stacks
       labels above inputs on phones without needing per-file edits. */
    .fpt-form-grid { grid-template-columns: 1fr !important; }
    .fpt-form-grid .fpt-label { text-align: left; }
    /* Inputs/selects/textarea get at least 16px font so iOS doesn't zoom
       on focus. */
    .fpt-input, .fpt-select, .fpt-textarea { font-size: 16px; }
    /* Primary submit buttons go full-width inside forms for easy tap. */
    form .fpt-btn.fpt-btn-primary { width: 100%; padding: 14px; font-size: 16px; }
    .page-title { font-size: 22px; }
    .fpt-card { padding: var(--fpt-space-md); }
    .fpt-totals-bar { flex-direction: column; align-items: stretch; gap: 10px; }
    .fpt-grid-2, .fpt-grid-3 { grid-template-columns: 1fr; }
    .summary-layout { flex-direction: column; }
    .summary-sidebar { width: 100%; }
    .summary-sidebar iframe { height: 200px; }
    .site-bottom-bar { font-size: 10px; padding: 0 8px; }
    .bottom-search { display: none; }
    .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Compact mobile header, two-row layout:
         Row 1: logo | welcome text | hamburger
         Row 2: VIN/stock last-6 search spanning the full width
       Reset-Password only lives in the hamburger drawer on phones. */
    .fpt-header { padding: 0; }
    .header-info {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "logo welcome actions" "search search search";
        align-items: center; gap: 6px 10px; padding: 6px 10px; min-height: 0;
    }
    .header-logo    { grid-area: logo; }
    .header-logo img { max-height: 32px; }
    .header-welcome { grid-area: welcome; text-align: left; }
    .header-welcome .user-name { font-size: 13px; font-weight: 700; }
    .header-welcome .datetime  { display: none; }
    .header-search  { grid-area: search; display: flex; gap: 6px; width: 100%; }
    .header-search label { display: none; }
    .header-search input[type="text"] { flex: 1; min-width: 0; }
    .header-actions { display: none !important; }
}

/* Shared inline-icon link used wherever a text label like [edit] / [delete]
   or an <img src="IMAGES/*.png"> button has been swapped for an SVG. Keep
   the chip compact so it works both in dense data tables and inline next
   to text. .fpt-icon-link-danger is the destructive variant.
   .fpt-icon-link-print flags the printer tint. */
.fpt-icon-link { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; margin:0 2px; border-radius:3px; background:#f1f5f9; color:#475569; text-decoration:none; vertical-align:middle; transition:background .15s, color .15s; }
.fpt-icon-link:visited { color:#475569; }
.fpt-icon-link:hover   { color:#0f172a; background:#e2e8f0; text-decoration:none; }
.fpt-icon-link-danger,
.fpt-icon-link-danger:visited { color:#c00; background:#fde8e8; }
.fpt-icon-link-danger:hover    { color:#fff; background:#c00; }
.fpt-icon-link-print,
.fpt-icon-link-print:visited { color:#0033cc; background:#e7edff; }
.fpt-icon-link-print:hover    { color:#fff; background:#0033cc; }
.fpt-icon-link-add,
.fpt-icon-link-add:visited { color:#065f46; background:#d1fae5; }
.fpt-icon-link-add:hover    { color:#fff; background:#059669; }
.fpt-icon-link-lg { width:32px; height:32px; }
.fpt-icon-link-lg svg { width:18px; height:18px; }

/* Mobile-only items inside the hamburger drawer. Hidden on desktop; shown
   when the mobile breakpoint kicks in. The <li class="mobile-only-item">
   markup lives in Floorplan_siteheader.cfm's .nav-menu.
   !important because the parent .nav-menu is display:flex and the "X Close"
   row was leaking into the desktop top nav for some users (observed in
   production on DealerInventory.cfm). */
.mobile-only-item { display: none !important; }
@media (max-width: 1100px) {
    .mobile-only-item { display: block !important; }
    /* Explicit X Close row at the top of the mobile drawer. Belt-and-
       suspenders — the hamburger button on the header also closes when
       re-tapped, but if a user is used to the X-in-drawer pattern this
       guarantees a close path. */
    .mobile-close-row a.mobile-close-btn {
        display: flex; align-items: center; justify-content: flex-start;
        padding: 10px 20px; background: rgba(0,0,0,0.15);
        color: #fff; font-weight: 700; font-size: 15px;
    }
}

@media (max-width: 480px) {
    .page-wrapper { padding: 0 10px 20px; }
    .fpt-card { padding: 12px; border-radius: var(--fpt-radius-md); }
}

/* ============================================================================
   VehicleDetail iframe content styling (Notes / Charges / Activity / Payments
   / Title / Audit / Images). Each frame loads inside Dealer_VehicleDetail.cfm
   without the site header; these classes give them a consistent modern look.
   ============================================================================ */
.vd-frame {
    font-family: var(--fpt-font-ui);
    color: var(--fpt-text);
    padding: 10px 14px 18px;
    background: #fff;
}
.vd-empty {
    text-align: center;
    color: var(--fpt-text-light);
    padding: 28px 14px;
    font-size: 14px;
    font-style: italic;
}
.vd-totals {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    background: var(--fpt-bg-soft);
    border-left: 3px solid var(--fpt-customer-color, var(--fpt-red));
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
}
.vd-totals span:last-child { font-size: 15px; color: var(--fpt-customer-color, var(--fpt-red)); }
.vd-row {
    padding: 10px 12px;
    border: 1px solid var(--fpt-border-light);
    border-radius: 6px;
    background: #fff;
    margin-bottom: 8px;
    transition: background 0.1s ease, border-color 0.1s ease;
}
.vd-row:hover { background: #fafafa; border-color: var(--fpt-border); }
.vd-row.vd-row-flag { background: #fffbe5; border-color: #f1d97a; }
.vd-row.vd-row-deleted { opacity: 0.5; }
.vd-meta { font-size: 11px; color: var(--fpt-text-light); margin-bottom: 4px; }
.vd-meta strong { color: var(--fpt-text); font-weight: 600; }
.vd-type { font-size: 12px; font-weight: 700; color: var(--fpt-customer-color, var(--fpt-red)); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.3px; }
.vd-notes { font-size: 13px; color: var(--fpt-text); margin-top: 4px; line-height: 1.45; }
.vd-notes strong { font-weight: 600; }
.vd-amount { font-size: 15px; font-weight: 700; color: var(--fpt-text); white-space: nowrap; padding-left: 10px; }
.vd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.vd-table th, .vd-table td { padding: 8px 10px; border-bottom: 1px solid var(--fpt-border-light); text-align: left; }
.vd-table th { background: var(--fpt-bg-soft); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--fpt-text-light); }
.vd-table tr:hover td { background: #fafafa; }
.vd-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }