/* ================================================
   INLINE INVOICE DISCOUNTS - Custom Styles
   ================================================ */

/* Discount column styling */
.bill_col_discount {
    min-width: 150px;
}

.bill_col_discount .input-group-append {
    width: 60px;
}

.bill_col_discount .js_item_discount_type {
    font-size: 12px;
    padding: 0.25rem;
}

/* Hide discount column when needed */
.bill_col_discount.hidden {
    display: none !important;
}

/* Disabled button styling */
button.disabled,
a.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ================================================
   LOGIN SPLIT LAYOUT
   ================================================ */

.login-split-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 9999;
    font-family: inherit;
}

/* Left hero panel */
.login-split-left {
    flex: 1 1 50%;
    background-image: url('/public/images/login pi.jpeg');
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.login-split-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.55) 100%);
    display: flex;
    align-items: flex-end;
    padding: 52px 48px;
}

.login-split-tagline h1 {
    color: #ffffff;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.18;
    margin: 0 0 14px;
    letter-spacing: -0.5px;
}

.login-split-tagline h1 span {
    color: #d4a820;
}

.login-split-tagline p {
    color: rgba(255,255,255,0.78);
    font-size: 15px;
    margin: 0;
    letter-spacing: 0.2px;
}

/* Right form panel */
.login-split-right {
    flex: 0 0 460px;
    background-color: #0d2418;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 40px 0;
}

.login-split-form-wrap {
    width: 360px;
    max-width: 90%;
}

.login-split-logo {
    text-align: center;
    margin-bottom: 32px;
}

.login-split-logo img {
    max-height: 64px;
    max-width: 200px;
    object-fit: contain;
}

.login-split-title {
    color: #ffffff;
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 6px;
    letter-spacing: -0.3px;
}

.login-split-subtitle {
    color: rgba(255,255,255,0.55);
    font-size: 14px;
    margin: 0 0 30px;
}

.login-split-field {
    margin-bottom: 18px;
}

.login-split-label {
    display: block;
    color: rgba(255,255,255,0.75);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 7px;
}

.login-split-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #163222;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    transition: border-color 0.2s;
}

.login-split-input-wrap:focus-within {
    border-color: rgba(212,168,32,0.6);
}

.login-split-icon {
    color: rgba(255,255,255,0.45);
    padding: 0 12px;
    font-size: 14px;
    flex-shrink: 0;
}

.login-split-input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-size: 14px;
    padding: 12px 0;
    outline: none;
}

.login-split-input::placeholder {
    color: rgba(255,255,255,0.3);
}

.login-split-input:-webkit-autofill,
.login-split-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #163222 inset !important;
    -webkit-text-fill-color: #ffffff !important;
}

.login-split-eye {
    padding: 0 12px;
    cursor: pointer;
    color: rgba(255,255,255,0.45);
    font-size: 14px;
    flex-shrink: 0;
    transition: color 0.2s;
}

.login-split-eye:hover {
    color: rgba(255,255,255,0.8);
}

.login-split-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px;
}

.login-split-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.65);
    font-size: 13px;
    cursor: pointer;
    margin: 0;
}

.login-split-remember input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: #d4a820;
    cursor: pointer;
    flex-shrink: 0;
}

.login-split-forgot {
    color: #d4a820 !important;
    font-size: 13px;
    text-decoration: none;
    transition: opacity 0.2s;
}

.login-split-forgot:hover {
    opacity: 0.8;
    text-decoration: none;
}

.login-split-btn {
    width: 100%;
    background-color: #d4a820;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 13px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s, opacity 0.2s;
    margin-bottom: 20px;
}

.login-split-btn:hover {
    background-color: #b8901a;
}

.login-split-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.login-split-signup-link {
    text-align: center;
    color: rgba(255,255,255,0.55);
    font-size: 13px;
    margin-bottom: 20px;
}

.login-split-signup-link a {
    color: #d4a820 !important;
    font-weight: 600;
    text-decoration: none;
}

.login-split-copyright {
    text-align: center;
    color: rgba(255,255,255,0.3);
    font-size: 12px;
    margin: 0;
}

/* Responsive: stack on small screens */
@media (max-width: 768px) {
    .login-split-left {
        display: none;
    }
    .login-split-right {
        flex: 1 1 100%;
    }
}

@media (max-width: 480px) {
    .login-split-form-wrap {
        width: 100%;
        padding: 0 24px;
    }
}

/* ================================================
   DESIGN SYSTEM - dashboard/sidebar visual language
   Colors match the login page exactly (#0d2418 green,
   #d4a820 gold) - structural patterns (icon boxes, quick
   actions bar, gradient stat cards) inspired by the
   Urban Wheels reference app. Additive only - nothing
   here overrides page structure, just how these specific
   components look.
   ================================================ */

:root {
    --gc-green: #0d2418;
    --gc-green-light: #163222;
    --gc-gold: #d4a820;
    --gc-gold-dark: #b8901a;
    --gc-sidebar-accent: #966800;
    --gc-sidebar-accent-dark: #704e00;
    --gc-r2: 10px;
    --gc-r3: 14px;
    --gc-sh2: 0 4px 14px rgba(0, 0, 0, .12);
}

/* ── Sidebar icon boxes ── */
.gc-ico {
    width: 26px;
    height: 26px;
    min-width: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .6);
    font-size: 13px;
    margin-right: 10px;
    vertical-align: middle;
    transition: background .15s ease, color .15s ease;
}
.sidebar-nav ul li a:hover .gc-ico {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}
.sidebar-nav > ul > li > a.active .gc-ico,
.sidebar-nav > ul > li.active > a .gc-ico {
    background: linear-gradient(135deg, var(--gc-sidebar-accent), var(--gc-sidebar-accent-dark));
    color: #fff;
}
.gc-ico i,
.sidenav-menu-item .gc-ico .tb {
    width: auto !important;
    font-size: 13px !important;
    color: inherit !important;
}

/* current-page indicator: translucent outline via a real border (not `outline`/
   `box-shadow`, which browsers can inject their own default-blue version of on
   focus regardless of overrides) — a border is never auto-generated by the
   browser, so this can't be confused with or fought by a native focus ring. */
.sidebar-nav ul li,
.sidebar-nav ul li a,
.sidebar-nav ul li a *,
.sidebar-nav ul li a:focus,
.sidebar-nav ul li a:focus-visible,
.sidebar-nav ul li a:active,
.sidebar-nav ul li a:hover,
.sidebar-nav ul li:focus,
.sidebar-nav ul li:focus-within {
    outline: none !important;
    outline-style: none !important;
    outline-width: 0 !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
.sidebar-nav > ul > li > a.active,
.sidebar-nav > ul > li.active > a {
    position: relative;
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: var(--gc-r2);
}
.sidebar-nav > ul > li > a.active .hide-menu,
.sidebar-nav > ul > li.active > a .hide-menu {
    background: linear-gradient(90deg, var(--gc-sidebar-accent), var(--gc-sidebar-accent-dark));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

/* the base theme has several unrelated `:hover { color: #20aee3 }` (blue) rules
   that end up matching sidebar links too (generic link/dropdown/pagination
   hover styles) — force plain translucent white on hover, not the active item */
.sidebar-nav ul li a:not(.active):hover,
.sidebar-nav ul li a:not(.active):hover .hide-menu,
.sidebar-nav ul li a:not(.active):hover i {
    color: rgba(255, 255, 255, .85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, .85) !important;
}

/* ── Sidebar menu text: smaller, tighter rows ── */
.sidebar-nav ul li a {
    padding: 9px 30px 9px 15px;
    font-size: 13px;
}
.sidebar-nav ul li.nav-small-cap {
    color: rgba(255, 255, 255, .35);
    font-size: 11px;
}

/* the submenu expand arrow (e.g. "Team") used a blue-grey border by default */
.sidebar-nav .has-arrow::after {
    border-color: rgba(255, 255, 255, .4);
}

/* ── Sidebar scrollbar: visible at rest, not just on hover ──
   NOTE: the bundled PerfectScrollbar build uses v1.x class names
   (.ps__rail-y / .ps__thumb-y) — NOT the v0.7-style .ps__scrollbar-y-rail /
   .ps__scrollbar-y that the rest of this theme's CSS was written for and
   that never actually existed in the rendered DOM. */
.left-sidebar .ps__rail-y,
#main-scroll-sidebar .ps__rail-y {
    opacity: .45 !important;
}
.left-sidebar .ps__rail-y:hover,
.left-sidebar .ps--scrolling-y > .ps__rail-y,
#main-scroll-sidebar .ps__rail-y:hover,
#main-scroll-sidebar .ps--scrolling-y > .ps__rail-y {
    opacity: .75 !important;
}
.left-sidebar .ps__thumb-y,
#main-scroll-sidebar .ps__thumb-y {
    background-color: rgba(255, 255, 255, .35) !important;
    opacity: 1 !important;
    right: 2px !important;
    width: 5px !important;
}

/* ── Quick actions bar ── */
.gc-quick {
    background: linear-gradient(125deg, #0B1A2E 0%, #142A45 60%, #1E3A5F 100%);
    border-radius: var(--gc-r3);
    padding: 18px 20px;
    margin-bottom: 20px;
}
.gc-quick-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .45);
    margin-bottom: 12px;
}
.gc-qa-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: filter .15s ease, background .15s ease;
    margin: 0 8px 8px 0;
}
.gc-qa-btn:hover { text-decoration: none; }
.gc-qa-primary { background: #fff; color: var(--gc-green); box-shadow: var(--gc-sh2); }
.gc-qa-primary:hover { filter: brightness(.96); color: var(--gc-green); }
.gc-qa-gold { background: linear-gradient(135deg, var(--gc-gold), var(--gc-gold-dark)); color: #fff; box-shadow: 0 4px 14px rgba(180, 130, 30, .35); }
.gc-qa-gold:hover { filter: brightness(1.06); color: #fff; }
.gc-qa-outline { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .18); }
.gc-qa-outline:hover { background: rgba(255, 255, 255, .16); color: #fff; }

/* ── Gradient stat cards ── */
.gc-stat {
    border-radius: var(--gc-r3);
    padding: 20px 18px;
    color: #fff;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    display: block;
    min-height: 108px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.gc-stat:hover { transform: translateY(-3px); color: #fff; text-decoration: none; }
.gc-stat::after {
    content: '';
    position: absolute;
    top: -18px;
    right: -18px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .09);
}
.gc-stat .stat-icon {
    position: absolute;
    bottom: 10px;
    right: 16px;
    font-size: 2.4rem;
    opacity: .3;
    line-height: 1;
}
.gc-stat .stat-label {
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    opacity: .82;
    margin-bottom: 6px;
}
.gc-stat .stat-val {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 4px;
}
.gc-stat .stat-sub { font-size: .72rem; opacity: .72; }

.gc-stat-grey  { background: linear-gradient(135deg, #374151, #4b5563); }
.gc-stat-green { background: linear-gradient(135deg, #059669, #10b981); }
.gc-stat-blue  { background: linear-gradient(135deg, #1d4ed8, #2563eb); }
.gc-stat-red   { background: linear-gradient(135deg, #b91c1c, #dc2626); }
.gc-stat-gold  { background: linear-gradient(135deg, var(--gc-gold-dark), var(--gc-gold)); }
.gc-stat-purple{ background: linear-gradient(135deg, #6d28d9, #8b5cf6); }
.gc-stat-pink  { background: linear-gradient(135deg, #be185d, #e11d48); }

/* ── Card gutters (this app's Bootstrap build ships .col-lg-3 etc with
   ZERO left/right padding - checked public/vendor/css/bootstrap/bootstrap.min.css
   directly, only .col-xl-auto got the gutter rule. Was always true; just
   invisible on plain white-on-white cards until these gradient ones. ) ── */
.gc-stat-col {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
}

/* ── Sidebar: inset "pill" nav items + hover feedback, matching the
   Urban Wheels reference (rounded floating highlight instead of an
   edge-to-edge rectangle, subtle hover background on every item) ── */
#sidebarnav {
    padding: 0 10px !important;
}
.sidebar-nav > ul > li > a {
    border-radius: var(--gc-r2) !important;
}
.sidebar-nav ul li a:hover {
    background: rgba(255, 255, 255, .05);
}

/* ================================================
   FLEET / VEHICLES PAGE - filter pills + photo cards
   ================================================ */

/* ── Filter pill bar ── */
.gc-pills {
    background: #fff;
    border-radius: var(--gc-r3);
    box-shadow: var(--gc-sh2);
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

/* ── Filter row: pills + search/actions sharing one line, wrapping
   gracefully to a second line only when there's genuinely no room -
   a flex row does this correctly, a fixed Bootstrap col split doesn't. ── */
.gc-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.gc-filter-bar .gc-pills { margin-bottom: 0; flex: 1 1 auto; }
.gc-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.gc-filter-actions input {
    width: 220px;
    max-width: 100%;
    flex-shrink: 0;
}
.gc-filter-actions .btn {
    white-space: nowrap;
    flex-shrink: 0;
}
.gc-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.gc-pill:hover { text-decoration: none; background: #f3f4f6; }
.gc-pill span {
    background: #e5e7eb;
    color: #4b5563;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 12px;
}
.gc-pill.gc-pill-active { background: #111827; color: #fff; }
.gc-pill.gc-pill-active span { background: rgba(255,255,255,.2); color: #fff; }
.gc-pill-green.gc-pill-active  { background: #059669; }
.gc-pill-purple.gc-pill-active { background: #7c3aed; }
.gc-pill-blue.gc-pill-active   { background: #2563eb; }
.gc-pill-gold.gc-pill-active   { background: var(--gc-gold-dark); }
.gc-pill-red.gc-pill-active    { background: #dc2626; }

/* ── Vehicle photo card ── */
.gc-vcard {
    background: #fff;
    border-radius: var(--gc-r3);
    box-shadow: var(--gc-sh2);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .15s ease, box-shadow .15s ease;
}
.gc-vcard:hover { transform: translateY(-3px); }
.gc-vcard-photo {
    position: relative;
    height: 160px;
    background: #eef1f0;
}
.gc-vcard-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gc-vcard-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b6c0bb;
    font-size: 2.6rem;
}
.gc-vcard-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
}
.gc-vcard-badge.badge-success   { background: #059669; }
.gc-vcard-badge.badge-info      { background: #7c3aed; }
.gc-vcard-badge.badge-primary   { background: #2563eb; }
.gc-vcard-badge.badge-warning   { background: var(--gc-gold-dark); }
.gc-vcard-badge.badge-secondary { background: #6b7280; }

.gc-vcard-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.gc-vcard-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.gc-vcard-title {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
}
.gc-vcard-title:hover { color: var(--gc-gold-dark); text-decoration: none; }
.gc-vcard-plate {
    background: #111827;
    color: #f5d78e;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 2px 8px;
    border-radius: 5px;
    white-space: nowrap;
}
.gc-vcard-meta {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #f0f0ee;
    border-bottom: 1px solid #f0f0ee;
    padding: 10px 0;
    margin-bottom: 10px;
}
.gc-vcard-meta div { text-align: center; flex: 1; }
.gc-vcard-meta strong { display: block; font-size: 13px; color: #1f2937; }
.gc-vcard-meta span { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #9ca3af; }
.gc-vcard-owner {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.gc-vcard-actions {
    margin-top: auto;
    display: flex;
    gap: 6px;
}

/* ── Avatar initials circle (customers, and anywhere else a person needs a
   quick identity marker without a real photo) ── */
.gc-avatar {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gc-gold), var(--gc-gold-dark));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -.02em;
}

/* ================================================
   DETAIL / PROFILE PAGES - hero card + info panels
   (customer show, and reusable for other "record detail"
   pages later - investor/driver/vehicle show pages etc.)
   ================================================ */

.gc-hero {
    background: linear-gradient(125deg, #0B1A2E 0%, #142A45 60%, #1E3A5F 100%);
    border-radius: var(--gc-r3);
    padding: 22px 26px;
    color: #fff;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
.gc-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
.gc-hero-id {
    display: flex;
    align-items: center;
    gap: 16px;
}
.gc-hero-avatar {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gc-gold), var(--gc-gold-dark));
    color: #1f2937;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
}
.gc-hero-name {
    font-size: 22px;
    font-weight: 800;
    color: var(--gc-gold);
    margin-bottom: 6px;
    line-height: 1.2;
}
.gc-hero-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gc-hero-badge {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.gc-hero-since {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.4);
    margin-top: 8px;
}
.gc-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.gc-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.1);
}
.gc-hero-stats > div { min-width: 90px; }
.gc-hero-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.4);
    margin-bottom: 4px;
}
.gc-hero-stat-val { font-size: 20px; font-weight: 800; color: #fff; }
.gc-hero-stat-val.gold { color: var(--gc-gold); }

/* ── Info panels ── */
.gc-panel {
    background: #fff;
    border-radius: var(--gc-r3);
    box-shadow: var(--gc-sh2);
    margin-bottom: 20px;
    overflow: hidden;
}
.gc-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid #f0f0ee;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #374151;
}
.gc-panel-head .gc-panel-head-title { display: flex; align-items: center; gap: 10px; }
.gc-panel-head i { color: var(--gc-gold-dark); font-size: 16px; }
.gc-panel-body { padding: 6px 18px 12px; }
.gc-panel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #f7f7f5;
    font-size: 13px;
}
.gc-panel-row:last-child { border-bottom: none; }
.gc-panel-row .label { color: #9ca3af; }
.gc-panel-row .value { color: #1f2937; font-weight: 600; text-align: right; }

/* ── Vehicle detail page ── */
.gc-vs-card { padding-bottom: 4px; }
.gc-vs-photo {
    height: 190px;
    background: #eef0ee;
    position: relative;
    overflow: hidden;
}
.gc-vs-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gc-vs-photo-placeholder {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eef0ee, #e2e5e1);
    font-size: 2.6rem;
    color: #9ca3af;
}
.gc-vs-status-pill {
    position: absolute;
    bottom: 10px;
    left: 12px;
    font-size: 11px;
    padding: 3px 12px;
}
.gc-vs-identity { padding: 14px 18px 4px; }
.gc-vs-name { font-size: 16px; font-weight: 800; color: #1f2937; line-height: 1.3; }
.gc-vs-plate {
    font-family: monospace;
    font-weight: 900;
    background: var(--gc-green);
    color: var(--gc-gold);
    padding: 3px 12px;
    border-radius: 4px;
    font-size: 13px;
    letter-spacing: 1.5px;
}
.gc-vs-tag {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
}
.gc-vs-investor-strip {
    margin-top: 10px;
    background: #fdf8ec;
    border: 1px solid #f3e6c1;
    border-radius: var(--gc-r2);
    padding: 7px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #6b7280;
}
.gc-vs-investor-strip i { color: var(--gc-gold-dark); }
.gc-vs-investor-strip a { color: var(--gc-gold-dark); font-weight: 600; text-decoration: none; }

.gc-vs-rev-row { display: flex; gap: 10px; padding: 6px 18px 18px; }
.gc-vs-rev-card { flex: 1; text-align: center; padding: 12px 6px; border-radius: var(--gc-r2); }
.gc-vs-rev-green { background: #d1fae5; }
.gc-vs-rev-red { background: #fee2e2; }
.gc-vs-rev-green .gc-vs-rev-val { color: #059669; }
.gc-vs-rev-red .gc-vs-rev-val { color: #dc2626; }
.gc-vs-rev-val { font-size: 14px; font-weight: 800; }
.gc-vs-rev-label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; margin-top: 3px; }

.gc-vs-table { font-size: 13px; }
.gc-vs-table thead th {
    background: #fafaf9;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #9ca3af;
    border-top: none;
}
.gc-vs-table tbody tr:hover td { background: #fdf8ec; }

/* ================================================
   BOOKINGS TABLE polish
   ================================================ */
.gc-ref-link {
    font-weight: 800;
    color: var(--gc-gold-dark);
    text-decoration: none;
}
.gc-ref-link:hover { color: var(--gc-gold); text-decoration: underline; }
.gc-row-overdue td { background: rgba(220, 38, 38, .04) !important; }
.gc-row-overdue:hover td { background: rgba(220, 38, 38, .08) !important; }

/* ── Sidebar category headings (Rentals, Fleet, Carwash, Finance, Admin) ── */
.sidebar-nav ul li.gc-nav-section {
    padding: 18px 15px 6px;
    margin: 0;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8b8f9a;
    pointer-events: none;
    list-style: none;
}
.sidebar-nav ul li.gc-nav-section .hide-menu { color: #8b8f9a; font-size: 10.5px; padding: 0; }
.sidebar-nav ul li.gc-nav-section + li.gc-nav-section { display: none; }
/* collapsed sidebar: the words go, a thin rule keeps the groups apart */
.mini-sidebar .sidebar-nav ul li.gc-nav-section {
    padding: 0;
    margin: 10px 16px 6px;
    border-top: 1px solid rgba(139, 143, 154, .35);
    height: 0;
}
.mini-sidebar .sidebar-nav ul li.gc-nav-section .hide-menu { display: none; }

/* ── Topbar: every control is 40px tall and sits on the one centre line ──
   hamburger, search, bell, calendar and the profile picture; the bell and calendar use the sidebar's icons and size */
@media (min-width: 768px) {
    .topbar .navbar-collapse,
    .topbar .navbar-nav,
    .topbar .navbar-top-right { align-items: center !important; }

    /* hamburger */
    .topbar .main-hamburger-menu .nav-link {
        width: 40px; height: 40px; padding: 0 !important; line-height: 1;
        display: inline-flex; align-items: center; justify-content: center;
    }

    /* search */
    .topbar .top-search-bar { padding: 0 0 0 8px !important; }
    .topbar .top-search-bar .top-search-container { display: flex; align-items: center; height: 40px; max-width: 220px; }
    .topbar .top-search-bar .top-search-container input { height: 40px !important; min-height: 40px !important; }
    .topbar .top-search-bar .top-search-container i { top: 50% !important; transform: translateY(-50%); font-size: 16px; color: #000; }

    /* bell and calendar: plain icons, the sidebar's size and colour */
    .topbar .topbar-plain-icon > .nav-link {
        position: relative; width: 40px; height: 40px; padding: 0 !important; line-height: 1;
        display: inline-flex; align-items: center; justify-content: center;
        background: transparent !important; border: 0 !important; box-shadow: none !important;
    }
    .topbar .topbar-plain-icon > .nav-link:hover { background: #f3f4f6 !important; border-radius: 4px; }
    .topbar .topbar-plain-icon > .nav-link i { font-size: 20px; color: #000 !important; vertical-align: middle; }
    .topbar .topbar-plain-icon .notify { top: 5px; right: 5px; }

    /* profile: the picture in a ring, and the name on the same line */
    .topbar .u-pro { height: 40px; }
    .topbar .u-pro > .nav-link { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1; }
    .topbar .u-pro > .nav-link img {
        width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%;
        border: 2px solid var(--ee-primary-500, #dc2626); padding: 2px; background: #fff; object-fit: cover;
    }
}
@media (max-width: 767px) {
    .topbar .u-pro > .nav-link img { width: 36px; height: 36px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--ee-primary-500, #dc2626); padding: 2px; background: #fff; object-fit: cover; }
}