:root,
[data-theme="sgtaxi"] {
    --color-primary: #004ac6;
    --color-primary-content: #ffffff;
    --color-secondary: #6b38d4;
    --color-secondary-content: #ffffff;
    --color-accent: #006056;
    --color-accent-content: #ffffff;
    --color-neutral: #121c2a;
    --color-neutral-content: #eaf1ff;
    --color-base-100: #f8f9ff;
    --color-base-200: #e6eeff;
    --color-base-300: #d9e3f6;
    --color-base-content: #121c2a;
    --color-info: #2563eb;
    --color-info-content: #ffffff;
    --color-success: #007b6e;
    --color-success-content: #ffffff;
    --color-warning: #f59e0b;
    --color-warning-content: #121c2a;
    --color-error: #ba1a1a;
    --color-error-content: #ffffff;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html {
    background-color: #121c2a;
}

@media (min-width: 1024px) {
    html {
        background-color: #121c2a;
    }
    body.sgtaxi-daisy {
        background: linear-gradient(to right, #121c2a 18rem, #f8f9ff 18rem);
    }
    .sgtaxi-shell > .drawer-content {
        background:
            radial-gradient(circle at top left, rgba(0, 74, 198, 0.045), transparent 26rem),
            linear-gradient(180deg, #f8f9ff 0%, #eef4ff 100%);
    }
}

@media (max-width: 1023px) {
    html {
        background-color: #f8f9ff;
    }
    body.sgtaxi-daisy {
        background:
            radial-gradient(circle at top left, rgba(0, 74, 198, 0.045), transparent 26rem),
            linear-gradient(180deg, #f8f9ff 0%, #eef4ff 100%);
    }
}

/* =====================================================================
   ANTI-FOUC CORE LAYOUT
   These rules fire immediately from the static CSS, before Tailwind's
   browser script initialises. They replicate every Tailwind utility
   class that is critical for the first render of the shell layout.
   ===================================================================== */

body.sgtaxi-daisy {
    min-height: 100vh;
}

/* --- Shell / Drawer wrapper ----------------------------------------- */
.sgtaxi-shell {
    min-height: 100vh;
    width: 100%;
    position: relative;
}

/* Desktop: turn the drawer into a sticky sidebar + content grid */
@media (min-width: 1024px) {
    .sgtaxi-shell {
        display: grid;
        grid-auto-columns: max-content auto;
    }
}

/* --- Drawer content column ------------------------------------------ */
.sgtaxi-shell > .drawer-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.sgtaxi-shell > .drawer-content > main {
    flex: 1 1 0%;
}

/* Main padding – replicate p-3 md:p-5 lg:p-7 */
.sgtaxi-main-pad {
    padding: 0.75rem;
}
@media (min-width: 768px) {
    .sgtaxi-main-pad {
        padding: 1.25rem;
    }
}
@media (min-width: 1024px) {
    .sgtaxi-main-pad {
        padding: 1.75rem;
    }
}

/* ---- Navbar: DaisyUI .navbar handles base layout. These add sticky + backdrop ---- */
/* DaisyUI's static CSS already provides: display:flex, align-items:center, min-height, width */
/* We only add what DaisyUI doesn't include in its static output: */
.sgtaxi-app-navbar {
    position: sticky;
    top: 0;
    z-index: 30;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* Fallback for bg-base-100/95 before Tailwind resolves the opacity modifier */
    background-color: rgba(248, 249, 255, 0.95);
}

/* Hamburger: visible on mobile, hidden on desktop (fallback for lg:hidden) */
.sgtaxi-hamburger {
    display: flex;
    flex: none;
}
@media (min-width: 1024px) {
    .sgtaxi-hamburger {
        display: none;
    }
}

/* Username in navbar: hidden on mobile (fallback for hidden md:inline) */
/* Note: Tailwind handles this fine once loaded; this is just the initial paint */
.sgtaxi-navbar-username-wrap {
    display: none;
}
@media (min-width: 768px) {
    .sgtaxi-navbar-username-wrap {
        display: inline;
        max-width: 10rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}


.sgtaxi-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    background: #004ac6;
    color: #ffffff;
    flex-shrink: 0;
}

.sgtaxi-brand-mark i,
.sgtaxi-brand-mark svg,
.sgtaxi-brand-mark [data-lucide] {
    width: 1.25rem; /* Equivalent to w-5 */
    height: 1.25rem; /* Equivalent to h-5 */
    display: inline-block;
}

.sgtaxi-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* gap-3 */
    margin-bottom: 1.25rem; /* mb-5 */
    padding: 0.5rem; /* px-2 py-2 */
    color: #ffffff;
    text-decoration: none;
}

.sgtaxi-sidebar-brand span.block {
    display: block;
}

.sgtaxi-sidebar-brand .text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    display: block;
    color: #ffffff;
}

.sgtaxi-sidebar-brand .text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
    display: block;
    color: rgba(234, 241, 255, 0.6); /* Equivalent to text-neutral-content/60 */
}

.sgtaxi-sidebar {
    background: #121c2a;
    color: #eaf1ff;
    width: 18rem; /* Equivalent to w-72 */
    display: flex;
    flex-direction: column;
    min-height: 100%; /* Equivalent to min-h-full */
    padding: 1rem; /* Equivalent to p-4 */
    box-sizing: border-box;
}

.sgtaxi-sidebar .menu {
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    gap: 0.25rem; /* gap-1 */
    padding: 0; /* p-0 */
    margin: 0;
}

.sgtaxi-sidebar .menu li {
    display: block;
    width: 100%;
}

.sgtaxi-sidebar .menu li > a,
.sgtaxi-sidebar .menu li > button {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* gap-3 */
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    color: #eaf1ff;
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sgtaxi-sidebar .menu li > a:hover,
.sgtaxi-sidebar .menu li > button:hover,
.sgtaxi-sidebar .menu li > a:focus,
.sgtaxi-sidebar .menu li > button:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.sgtaxi-sidebar .menu-title {
    color: rgba(234, 241, 255, 0.58) !important;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 1rem; /* mt-4 */
    padding: 0.5rem 0.75rem;
    display: block;
}

/* Sidebar menu icon sizing */
.sgtaxi-sidebar .menu i,
.sgtaxi-sidebar .menu svg,
.sgtaxi-sidebar .menu [data-lucide] {
    width: 1rem;
    height: 1rem;
    display: inline-block;
    flex-shrink: 0;
}

/* Sidebar Custom Cards styling (Static equivalents of Tailwind utilities to avoid FOUC) */
.sgtaxi-sidebar-card {
    margin-top: 1rem; /* mt-4 */
    border-radius: 1rem; /* rounded-2xl */
    padding: 1rem; /* p-4 */
    font-size: 0.75rem; /* text-xs */
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* shadow-md */
}

.sgtaxi-sidebar-card .flex {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem; /* gap-3 */
}

.sgtaxi-sidebar-card .relative.z-10 {
    position: relative;
    z-index: 10;
}

.sgtaxi-sidebar-card span.p-2 {
    padding: 0.5rem;
    border-radius: 0.75rem; /* rounded-xl */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sgtaxi-sidebar-card h4 {
    font-weight: 700; /* font-bold */
    font-size: 0.875rem; /* text-sm */
    margin: 0 0 0.125rem 0; /* mb-0.5 */
}

.sgtaxi-sidebar-card p {
    margin: 0 0 0.5rem 0;
}

/* Subscription Card Specifics */
.sgtaxi-card-subscription {
    background-color: rgba(127, 29, 29, 0.2); /* bg-red-950/20 */
    border: 1px solid rgba(239, 68, 68, 0.3); /* border border-red-500/30 */
    color: #fca5a5; /* text-red-200 */
}

.sgtaxi-card-subscription .absolute.-right-6 {
    position: absolute;
    right: -1.5rem;
    top: -1.5rem;
    height: 4rem;
    width: 4rem;
    border-radius: 9999px;
    background-color: rgba(239, 68, 68, 0.1); /* bg-red-500/10 */
    filter: blur(16px); /* blur-lg */
}

.sgtaxi-card-subscription span.p-2 {
    background-color: rgba(239, 68, 68, 0.2); /* bg-red-500/20 */
    color: #f87171; /* text-red-400 */
}

.sgtaxi-card-subscription h4 {
    color: #fee2e2; /* text-red-100 */
}

.sgtaxi-card-subscription p {
    color: #fca5a5; /* text-red-300 */
}

.sgtaxi-card-subscription p strong {
    color: #fee2e2; /* text-red-100 */
}

.sgtaxi-card-subscription .leading-relaxed {
    line-height: 1.625;
    color: rgba(252, 165, 165, 0.8); /* text-red-300/80 */
    background-color: rgba(0, 0, 0, 0.1); /* bg-black/10 */
    border-radius: 0.5rem; /* rounded-lg */
    border: 1px solid rgba(239, 68, 68, 0.1); /* border-red-500/10 */
    padding: 0.5rem;
    margin-top: 0.5rem;
}

/* Promo Card Specifics */
.sgtaxi-card-promo {
    background: linear-gradient(135deg, #004ac6, #6b38d4); /* bg-gradient-to-br from-[#004ac6] to-[#6b38d4] */
    color: #ffffff; /* text-white */
    cursor: pointer;
    box-shadow: 0 10px 15px -3px rgba(0, 74, 198, 0.1), 0 4px 6px -4px rgba(0, 74, 198, 0.1);
    transition: all 0.3s ease;
}

.sgtaxi-card-promo:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(0, 74, 198, 0.15), 0 8px 10px -6px rgba(0, 74, 198, 0.15);
}

.sgtaxi-card-promo .absolute.-right-10 {
    position: absolute;
    right: -2.5rem;
    top: -2.5rem;
    height: 9rem;
    width: 9rem;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.15); /* bg-white/15 */
    filter: blur(24px); /* blur-2xl */
}

.sgtaxi-card-promo span.p-2 {
    background-color: rgba(255, 255, 255, 0.2); /* bg-white/20 */
    color: #ffffff;
}

.sgtaxi-card-promo p {
    color: rgba(255, 255, 255, 0.9); /* text-white/90 */
    line-height: 1.375;
}

.sgtaxi-card-promo span.inline-flex {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem; /* gap-1 */
    font-size: 11px;
    font-weight: 700;
    margin-top: 0.75rem; /* mt-3 */
    background-color: #ffffff;
    color: #004ac6;
    padding: 0.25rem 0.75rem; /* px-3 py-1 */
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s ease;
}

.sgtaxi-card-promo span.inline-flex:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

/* Footer Card Specifics */
.sgtaxi-card-footer {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(234, 241, 255, 0.75);
}

.sgtaxi-card-footer-icon {
    padding: 0.5rem;
    border-radius: 0.75rem;
    background-color: rgba(255, 255, 255, 0.05);
    color: rgba(234, 241, 255, 0.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sgtaxi-card-footer h4 {
    color: #eaf1ff;
    font-weight: 700;
    font-size: 0.875rem;
    margin: 0 0 0.125rem 0;
}

.sgtaxi-card-footer p {
    margin: 0;
    color: rgba(234, 241, 255, 0.75);
}

/* Static definitions to avoid layout shifts (FOUC) before Tailwind compiles in-browser
   NOTE: drawer-content flex column rules are defined in the Anti-FOUC block at the top.  */

/* Promo card – full hover without needing Tailwind hover: variants */
.sgtaxi-card-promo:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(0, 74, 198, 0.2), 0 8px 10px -6px rgba(0, 74, 198, 0.15);
}

.sgtaxi-card-promo:active {
    transform: scale(0.98);
}

/* Promo card glow orb hover – using adjacent sibling approach, no Tailwind group-hover */
.sgtaxi-card-promo-glow {
    position: absolute;
    right: -2.5rem;
    top: -2.5rem;
    height: 9rem;
    width: 9rem;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.15);
    filter: blur(24px);
    transition: transform 0.5s ease;
}

.sgtaxi-card-promo:hover .sgtaxi-card-promo-glow {
    transform: scale(1.5);
}

/* Promo card icon bounce – CSS-native, no Tailwind animate-bounce needed */
.sgtaxi-promo-icon {
    padding: 0.5rem;
    border-radius: 0.75rem;
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: sgtaxi-bounce 1s infinite;
}

@keyframes sgtaxi-bounce {
    0%, 100% { transform: translateY(-20%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
    50%       { transform: translateY(0);   animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}

/* Subscription card glow orb */
.sgtaxi-subscription-glow {
    position: absolute;
    right: -1.5rem;
    top: -1.5rem;
    height: 4rem;
    width: 4rem;
    border-radius: 9999px;
    background-color: rgba(239, 68, 68, 0.1);
    filter: blur(16px);
}

/* Subscription card renewal info box */
.sgtaxi-subscription-info {
    line-height: 1.625;
    color: rgba(252, 165, 165, 0.8);
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    border: 1px solid rgba(239, 68, 68, 0.1);
    padding: 0.5rem;
    margin-top: 0.5rem;
}

@media (min-width: 1024px) {
    .lg\:drawer-open {
        grid-auto-columns: max-content auto;
        display: grid;
        width: 100%;
        position: relative;
    }
    
    .lg\:drawer-open > .drawer-toggle {
        display: none;
    }
    
    .lg\:drawer-open > .drawer-toggle ~ .drawer-side {
        pointer-events: auto;
        visibility: visible;
        overscroll-behavior: auto;
        opacity: 1;
        width: auto;
        display: block;
        position: sticky;
        grid-column-start: 1;
        grid-row-start: 1;
        transition: none !important;
    }
    
    .lg\:drawer-open > .drawer-toggle ~ .drawer-side > .drawer-overlay {
        cursor: default;
        background-color: transparent;
    }
    
    .lg\:drawer-open > .drawer-toggle ~ .drawer-side > :not(.drawer-overlay) {
        translate: 0% !important;
        transition: none !important;
    }
    
    .lg\:drawer-open > .drawer-content {
        grid-column-start: 2;
        grid-row-start: 1;
        min-width: 0;
    }
}


.sgtaxi-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
}

.sgtaxi-card {
    border: 1px solid rgba(115, 118, 134, 0.16);
    border-radius: 0.45rem;
    box-shadow: 0 8px 18px rgba(18, 28, 42, 0.055);
}

.sgtaxi-card.card,
.sgtaxi-card.stat,
.sgtaxi-card.alert {
    border-radius: 0.45rem;
}

.sgtaxi-card > .card-body > form > .card-body,
.sgtaxi-card .sgtaxi-card-body-content {
    padding: 0;
}

.sgtaxi-card .card-footer,
.sgtaxi-card-actions {
    align-items: center;
    border-top: 1px solid rgba(115, 118, 134, 0.13);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
}

.sgtaxi-card .card-footer:empty,
.sgtaxi-card-actions:empty {
    display: none;
}

.sgtaxi-daisy .font-weight-bold {
    font-weight: 700;
}

.sgtaxi-daisy .text-primary {
    color: #004ac6;
}

.sgtaxi-daisy .text-success {
    color: #007b6e;
}

.sgtaxi-daisy .text-danger,
.sgtaxi-daisy .text-error {
    color: #ba1a1a;
}

.sgtaxi-kpi {
    min-height: 7.25rem;
    padding: 1.15rem 1.25rem;
}

.sgtaxi-kpi .stat-value {
    font-size: clamp(1.85rem, 2.2vw, 2.45rem);
    line-height: 1;
}

.sgtaxi-panel-title {
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: rgba(18, 28, 42, 0.68);
}

.sgtaxi-table-wrap {
    overflow-x: auto;
}

.sgtaxi-table-wrap table {
    width: 100%;
}

.sgtaxi-clean-table {
    border-collapse: separate;
    border-spacing: 0;
}

.sgtaxi-clean-table :where(th, td) {
    border-bottom: 1px solid rgba(115, 118, 134, 0.13);
}

.sgtaxi-clean-table tbody tr:nth-child(even) {
    background: rgba(0, 74, 198, 0.035);
}

.sgtaxi-clean-table tbody tr:hover {
    background: rgba(0, 74, 198, 0.065);
}

.sgtaxi-daisy .badge {
    border-radius: 0.4rem;
    white-space: nowrap;
}

.sgtaxi-status-badge {
    min-width: 6.6rem;
    justify-content: center;
}

.sgtaxi-data-card .card-body {
    padding: 1rem;
}

.sgtaxi-period-header {
    align-items: end;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(9rem, 0.72fr) minmax(0, 4fr);
}

.sgtaxi-period-title {
    min-width: 9rem;
}

.sgtaxi-period-filters {
    align-items: end;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(10rem, 1.2fr) minmax(15rem, 1.05fr) minmax(15rem, 1.05fr) auto;
}

.sgtaxi-period-filters .join {
    width: 100%;
}

.sgtaxi-period-filters .join .input[type="date"] {
    min-width: 8.1rem;
}

.sgtaxi-period-filters .join .input[type="time"] {
    min-width: 5.7rem;
}

.sgtaxi-search-btn {
    min-width: 5.6rem;
}

.sgtaxi-period-stats {
    margin-top: 1.25rem;
}

.sgtaxi-period-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr) minmax(16rem, 1fr);
}

.sgtaxi-period-main {
    min-width: 0;
}

.sgtaxi-period-full {
    grid-column: 1 / -1;
}

.sgtaxi-mini-card {
    background: #ffffff;
    border: 1px solid rgba(115, 118, 134, 0.14);
    border-radius: 0.42rem;
    box-shadow: 0 8px 18px rgba(18, 28, 42, 0.045);
    min-width: 0;
    overflow: hidden;
}

.sgtaxi-mini-card-header {
    border-bottom: 1px solid rgba(115, 118, 134, 0.13);
    padding: 0.9rem 1rem;
}

.sgtaxi-mini-card-header h3 {
    color: #004ac6;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
}

.sgtaxi-mini-card-body {
    padding: 1rem;
}

.sgtaxi-compact-table {
    table-layout: auto;
}

.sgtaxi-compact-table :where(th, td) {
    padding: 0.72rem 0.85rem;
    vertical-align: middle;
}

.sgtaxi-compact-table thead th {
    color: rgba(18, 28, 42, 0.68);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.sgtaxi-compact-table tfoot th {
    color: rgba(18, 28, 42, 0.68);
    font-weight: 700;
}

.sgtaxi-empty-state {
    align-items: center;
    background: rgba(0, 74, 198, 0.035);
    border: 1px dashed rgba(115, 118, 134, 0.22);
    border-radius: 0.4rem;
    color: rgba(18, 28, 42, 0.58);
    display: flex;
    justify-content: center;
    min-height: 5.5rem;
    padding: 1.25rem;
    text-align: center;
}

.sgtaxi-update-modal {
    border: 1px solid rgba(115, 118, 134, 0.16);
    border-radius: 0.5rem;
}

.sgtaxi-update-icon {
    align-items: center;
    background: #004ac6;
    border-radius: 0.45rem;
    color: #ffffff;
    display: inline-flex;
    flex: 0 0 auto;
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}

.sgtaxi-update-pill {
    align-items: center;
    background: rgba(0, 74, 198, 0.045);
    border: 1px solid rgba(115, 118, 134, 0.16);
    border-radius: 0.4rem;
    color: rgba(18, 28, 42, 0.76);
    display: inline-flex;
    gap: 0.4rem;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0.45rem 0.65rem;
}

.sgtaxi-list-summary {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 16rem));
    margin-bottom: 1rem;
}

.sgtaxi-form-compat .card-body,
.sgtaxi-daisy form.auto-validate .card-body {
    display: grid;
    gap: 0.85rem;
    padding: 0;
}

.sgtaxi-form-compat .form-row,
.sgtaxi-daisy form.auto-validate .form-row {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.sgtaxi-form-compat [class*="col-"],
.sgtaxi-daisy form.auto-validate [class*="col-"] {
    grid-column: 1 / -1;
    max-width: none;
    min-width: 0;
    padding: 0;
    width: 100%;
}

.sgtaxi-form-compat .input-group,
.sgtaxi-daisy form.auto-validate .input-group {
    align-items: stretch;
    display: flex;
    flex-wrap: nowrap;
    min-width: 0;
}

.sgtaxi-form-compat .input-group-prepend,
.sgtaxi-daisy form.auto-validate .input-group-prepend {
    display: flex;
    flex: 0 0 auto;
}

.sgtaxi-form-compat .input-group-text,
.sgtaxi-daisy form.auto-validate .input-group-text {
    align-items: center;
    background: rgba(0, 74, 198, 0.045);
    border: 1px solid rgba(115, 118, 134, 0.24);
    border-radius: 0.4rem 0 0 0.4rem;
    color: rgba(18, 28, 42, 0.72);
    display: flex;
    font-size: 0.84rem;
    font-weight: 600;
    min-width: 8rem;
    padding: 0.45rem 0.65rem;
}

.sgtaxi-daisy input.form-control,
.sgtaxi-daisy select.form-control,
.sgtaxi-daisy textarea.form-control,
.sgtaxi-daisy .select2-container--default .select2-selection--single {
    background: #ffffff;
    border: 1px solid rgba(115, 118, 134, 0.28);
    border-radius: 0.4rem;
    color: #121c2a;
    min-height: 2.05rem;
    padding: 0.38rem 0.62rem;
    width: 100%;
}

.sgtaxi-form-compat .input-group > input.form-control,
.sgtaxi-form-compat .input-group > select.form-control,
.sgtaxi-form-compat .input-group > textarea.form-control,
.sgtaxi-daisy form.auto-validate .input-group > input.form-control,
.sgtaxi-daisy form.auto-validate .input-group > select.form-control,
.sgtaxi-daisy form.auto-validate .input-group > textarea.form-control,
.sgtaxi-daisy form.auto-validate .input-group > .select2-container {
    border-radius: 0 0.4rem 0.4rem 0;
    flex: 1 1 auto;
    min-width: 0;
}

.sgtaxi-daisy textarea.form-control {
    min-height: 5rem;
}

.sgtaxi-daisy .select2-container {
    min-width: 0;
    width: 100% !important;
}

.sgtaxi-daisy .select2-container--default .select2-selection--single {
    align-items: center;
    display: flex;
}

.sgtaxi-daisy .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #121c2a;
    line-height: 1.25;
    padding-left: 0;
}

.sgtaxi-daisy .select2-container--default .select2-selection--single .select2-selection__arrow {
    min-height: 2.05rem;
}

.sgtaxi-daisy .help-block,
.sgtaxi-daisy .invalid-feedback,
.sgtaxi-daisy .text-muted {
    color: rgba(18, 28, 42, 0.58);
    font-size: 0.82rem;
}

.sgtaxi-daisy .btn-group {
    display: inline-flex;
    gap: 0.25rem;
}

.sgtaxi-daisy .btn-sm {
    min-height: 2rem;
}

.sgtaxi-daisy a[aria-disabled="true"],
.sgtaxi-daisy .btn-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.sgtaxi-form-compat .form-group,
.sgtaxi-daisy form.auto-validate .form-group {
    margin-bottom: 0.85rem;
}

.sgtaxi-form-compat label,
.sgtaxi-daisy form.auto-validate label {
    color: rgba(18, 28, 42, 0.72);
    display: inline-block;
    font-size: 0.86rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.sgtaxi-daisy .dataTables_wrapper {
    color: #121c2a;
}

.sgtaxi-daisy .dataTables_wrapper .row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 0 0.75rem;
}

.sgtaxi-daisy .dataTables_wrapper .row > div {
    flex: 1 1 14rem;
    max-width: 100%;
    padding: 0;
}

.sgtaxi-daisy .dataTables_length,
.sgtaxi-daisy .dataTables_filter,
.sgtaxi-daisy .dataTables_info,
.sgtaxi-daisy .dataTables_paginate {
    font-size: 0.875rem;
}

.sgtaxi-daisy .dataTables_wrapper .row:first-child {
    justify-content: space-between;
}

.sgtaxi-daisy .dataTables_wrapper .row:last-child {
    align-items: center;
    justify-content: space-between;
    margin: 0.85rem 0 0;
}

.sgtaxi-daisy .dataTables_wrapper .row:last-child > div {
    flex: 0 1 auto;
}

.sgtaxi-daisy .dataTables_info {
    white-space: normal;
}

.sgtaxi-daisy .dataTables_paginate,
.sgtaxi-daisy .dataTables_paginate .pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: flex-end;
    margin: 0;
}

.sgtaxi-daisy .dataTables_filter input,
.sgtaxi-daisy .dataTables_length select {
    background: #ffffff;
    border: 1px solid rgba(115, 118, 134, 0.28);
    border-radius: 0.4rem;
    padding: 0.35rem 0.55rem;
}

.sgtaxi-daisy .dataTables_paginate .paginate_button,
.sgtaxi-daisy .pagination .page-link {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 0.35rem;
    color: #004ac6;
    display: inline-flex;
    justify-content: center;
    margin: 0 0.1rem;
    min-height: 2rem;
    min-width: 2rem;
    padding: 0.35rem 0.55rem;
}

.sgtaxi-daisy .dataTables_paginate .paginate_button.current,
.sgtaxi-daisy .pagination .active .page-link {
    background: #004ac6;
    border-color: #004ac6;
    color: #ffffff;
}

.sgtaxi-daisy .dataTables_empty {
    color: rgba(18, 28, 42, 0.58);
    padding: 1.5rem;
    text-align: center;
}

@media (min-width: 1024px) {
    .sgtaxi-form-compat .col-lg-2,
    .sgtaxi-daisy form.auto-validate .col-lg-2 {
        grid-column: span 2 / span 2;
    }

    .sgtaxi-form-compat .col-lg-3,
    .sgtaxi-daisy form.auto-validate .col-lg-3 {
        grid-column: span 3 / span 3;
    }

    .sgtaxi-form-compat .col-lg-4,
    .sgtaxi-daisy form.auto-validate .col-lg-4 {
        grid-column: span 4 / span 4;
    }

    .sgtaxi-form-compat .col-lg-6,
    .sgtaxi-daisy form.auto-validate .col-lg-6 {
        grid-column: span 6 / span 6;
    }

    .sgtaxi-form-compat .col-lg-9,
    .sgtaxi-daisy form.auto-validate .col-lg-9 {
        grid-column: span 9 / span 9;
    }

    .sgtaxi-form-compat .col-lg-12,
    .sgtaxi-daisy form.auto-validate .col-lg-12 {
        grid-column: span 12 / span 12;
    }
}

@media (max-width: 640px) {
    .sgtaxi-form-compat .input-group,
    .sgtaxi-daisy form.auto-validate .input-group {
        display: grid;
    }

    .sgtaxi-form-compat .input-group-text,
    .sgtaxi-daisy form.auto-validate .input-group-text {
        border-radius: 0.4rem 0.4rem 0 0;
        min-width: 0;
    }

    .sgtaxi-form-compat .input-group > input.form-control,
    .sgtaxi-form-compat .input-group > select.form-control,
    .sgtaxi-form-compat .input-group > textarea.form-control,
    .sgtaxi-daisy form.auto-validate .input-group > input.form-control,
    .sgtaxi-daisy form.auto-validate .input-group > select.form-control,
    .sgtaxi-daisy form.auto-validate .input-group > textarea.form-control,
    .sgtaxi-daisy form.auto-validate .input-group > .select2-container {
        border-radius: 0 0 0.4rem 0.4rem;
    }
}

.sgtaxi-legacy-fragment > .row,
.sgtaxi-legacy-fragment #estadisticas > .row,
.sgtaxi-legacy-fragment #estadisticas-clientes > .row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
}

.sgtaxi-legacy-fragment > .row > [class*="col-"],
.sgtaxi-legacy-fragment #estadisticas > .row > [class*="col-"],
.sgtaxi-legacy-fragment #estadisticas-clientes > .row > [class*="col-"] {
    grid-column: span 12 / span 12;
    max-width: none;
    padding: 0;
}

.sgtaxi-legacy-fragment .card {
    background: #ffffff;
    border: 1px solid rgba(115, 118, 134, 0.14);
    border-radius: 0.45rem;
    box-shadow: 0 8px 18px rgba(18, 28, 42, 0.05);
    margin-bottom: 0;
}

.sgtaxi-legacy-fragment .card-header {
    border-bottom: 1px solid rgba(115, 118, 134, 0.18);
    padding: 0.875rem 1rem;
}

.sgtaxi-legacy-fragment .card-body {
    padding: 1rem;
}

.sgtaxi-legacy-fragment .table,
.sgtaxi-legacy-fragment table {
    border-collapse: collapse;
    width: 100%;
}

.sgtaxi-legacy-fragment th,
.sgtaxi-legacy-fragment td {
    border-bottom: 1px solid rgba(115, 118, 134, 0.13);
    padding: 0.7rem;
}

.sgtaxi-legacy-fragment thead th {
    color: rgba(18, 28, 42, 0.68);
    font-size: 0.78rem;
    text-transform: uppercase;
}

.sgtaxi-legacy-fragment .dataTables_wrapper {
    color: #121c2a;
}

.sgtaxi-legacy-fragment .dataTables_wrapper .row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 0 0.75rem;
}

.sgtaxi-legacy-fragment .dataTables_wrapper .row > div {
    flex: 1 1 14rem;
    max-width: 100%;
    padding: 0;
}

.sgtaxi-legacy-fragment .dataTables_wrapper .row:last-child {
    justify-content: space-between;
    margin: 0.75rem 0 0;
}

.sgtaxi-legacy-fragment .dataTables_wrapper .row:last-child > div {
    flex: 0 1 auto;
}

.sgtaxi-legacy-fragment .dataTables_length,
.sgtaxi-legacy-fragment .dataTables_filter,
.sgtaxi-legacy-fragment .dataTables_info,
.sgtaxi-legacy-fragment .dataTables_paginate {
    font-size: 0.875rem;
}

.sgtaxi-legacy-fragment .dataTables_filter input,
.sgtaxi-legacy-fragment .dataTables_length select {
    border: 1px solid rgba(115, 118, 134, 0.28);
    border-radius: 0.4rem;
    padding: 0.35rem 0.55rem;
}

.sgtaxi-legacy-fragment .dataTables_paginate .paginate_button,
.sgtaxi-legacy-fragment .pagination .page-link {
    border: 1px solid transparent;
    border-radius: 0.35rem;
    color: #004ac6;
    margin: 0 0.1rem;
    padding: 0.35rem 0.55rem;
}

.sgtaxi-legacy-fragment .dataTables_paginate .paginate_button.current,
.sgtaxi-legacy-fragment .pagination .active .page-link {
    background: #004ac6;
    border-color: #004ac6;
    color: #ffffff;
}

.sgtaxi-legacy-fragment .dataTables_empty {
    color: rgba(18, 28, 42, 0.58);
    padding: 1.5rem;
    text-align: center;
}

@media (min-width: 768px) {
    .sgtaxi-legacy-fragment > .row > .col-lg-3,
    .sgtaxi-legacy-fragment > .row > .col-xl-3,
    .sgtaxi-legacy-fragment #estadisticas > .row > .col-lg-3,
    .sgtaxi-legacy-fragment #estadisticas > .row > .col-xl-3 {
        grid-column: span 4 / span 4;
    }

    .sgtaxi-legacy-fragment > .row > .col-lg-6,
    .sgtaxi-legacy-fragment > .row > .col-xl-6,
    .sgtaxi-legacy-fragment #estadisticas > .row > .col-lg-6,
    .sgtaxi-legacy-fragment #estadisticas > .row > .col-xl-6 {
        grid-column: span 8 / span 8;
    }

    .sgtaxi-legacy-fragment > .row > .col-lg-12,
    .sgtaxi-legacy-fragment > .row > .col-xl-12,
    .sgtaxi-legacy-fragment #estadisticas > .row > .col-lg-12,
    .sgtaxi-legacy-fragment #estadisticas > .row > .col-xl-12 {
        grid-column: span 12 / span 12;
    }
}

@media (min-width: 1180px) {
    .sgtaxi-legacy-fragment > .row > .col-lg-3,
    .sgtaxi-legacy-fragment > .row > .col-xl-3,
    .sgtaxi-legacy-fragment #estadisticas > .row > .col-lg-3,
    .sgtaxi-legacy-fragment #estadisticas > .row > .col-xl-3 {
        grid-column: span 3 / span 3;
    }

    .sgtaxi-legacy-fragment > .row > .col-lg-6,
    .sgtaxi-legacy-fragment > .row > .col-xl-6,
    .sgtaxi-legacy-fragment #estadisticas > .row > .col-lg-6,
    .sgtaxi-legacy-fragment #estadisticas > .row > .col-xl-6 {
        grid-column: span 6 / span 6;
    }
}

@media (max-width: 767px) {
    .sgtaxi-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .sgtaxi-kpi {
        min-height: 0;
    }
}

@media (max-width: 1180px) {
    .sgtaxi-period-header,
    .sgtaxi-period-filters,
    .sgtaxi-period-grid {
        grid-template-columns: 1fr;
    }

    .sgtaxi-search-btn {
        width: 100%;
    }
}

/* Static styles for Login page split background and plans to avoid FOUC */
.sgtaxi-login-info {
    background-color: #121c2a !important;
    color: #eaf1ff !important;
    box-sizing: border-box;
}

.sgtaxi-login-form-container {
    background-color: #f8f9ff !important;
    box-sizing: border-box;
    border-left: 1px solid rgba(115, 118, 134, 0.16);
}

.sgtaxi-login-plans-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .sgtaxi-login-plans-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .sgtaxi-login-plans-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }
}

@media (min-width: 1280px) {
    .sgtaxi-login-plans-grid {
        gap: 1.5rem;
    }
}

.sgtaxi-login-plan-card {
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.03);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .sgtaxi-login-plan-card {
        padding: 1rem;
    }
}

.sgtaxi-login-plan-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.05);
}

.sgtaxi-login-plan-card.premium {
    border-color: rgba(0, 74, 198, 0.4);
    background: linear-gradient(135deg, rgba(0, 74, 198, 0.15), rgba(107, 56, 212, 0.15));
}

.sgtaxi-login-plan-card.premium:hover {
    border-color: rgba(0, 74, 198, 0.6);
    background: linear-gradient(135deg, rgba(0, 74, 198, 0.2), rgba(107, 56, 212, 0.2));
}

.sgtaxi-login-plan-card.premium .plan-subtitle {
    color: rgba(147, 197, 253, 0.75);
}

.sgtaxi-login-plan-card.premium .plan-price {
    color: #93c5fd;
}

.sgtaxi-login-plan-card.premium .plan-price-subtitle {
    color: rgba(147, 197, 253, 0.55);
}

.sgtaxi-login-plan-card.apple {
    border-color: rgba(245, 158, 11, 0.5);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 4px 32px rgba(245, 158, 11, 0.12);
}

.sgtaxi-login-plan-card.apple:hover {
    border-color: rgba(245, 158, 11, 0.75);
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 6px 40px rgba(245, 158, 11, 0.2);
}

.sgtaxi-login-plan-card .absolute.-right-12 {
    position: absolute;
    right: -3rem;
    top: -3rem;
    height: 6rem;
    width: 6rem;
    border-radius: 9999px;
    background-color: rgba(0, 74, 198, 0.2);
    filter: blur(24px);
}

.sgtaxi-login-plan-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0.25rem 0 0.5rem 0;
    color: #ffffff;
}

.sgtaxi-login-plan-card .plan-subtitle {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: rgba(234, 241, 255, 0.5);
}

.sgtaxi-login-plan-card .plan-price {
    font-size: 1.5rem;
    font-weight: 900;
    color: #ffffff;
}

.sgtaxi-login-plan-card .plan-price-subtitle {
    font-size: 0.65rem;
    display: block;
    color: rgba(234, 241, 255, 0.6);
    text-align: right;
}

.sgtaxi-login-plan-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sgtaxi-login-plan-card li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    color: rgba(234, 241, 255, 0.85);
}

.sgtaxi-login-plan-card li i {
    width: 0.875rem;
    height: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #10b981; /* Success green */
}

.sgtaxi-login-plan-card .badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Custom premium badge for the zero commission differentiator on dark background (e.g., login cards) */
.sgtaxi-badge-differentiator {
    background-color: rgba(52, 211, 153, 0.12) !important;
    color: #34d399 !important; /* Bright emerald for dark backgrounds */
    border: 1px solid rgba(52, 211, 153, 0.25) !important;
    padding: 0.2rem 0.6rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.725rem !important;
    font-weight: 700 !important;
    display: inline-block !important;
}

/* Custom premium badge for the zero commission differentiator on light background (e.g., internal modal) */
.sgtaxi-badge-differentiator-light {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: #065f46 !important; /* Deep emerald for light backgrounds */
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    padding: 0.2rem 0.6rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.725rem !important;
    font-weight: 700 !important;
    display: inline-block !important;
}

/* Override success green for warning/gold stars in plan cards */
.sgtaxi-login-plan-card li i.text-warning {
    color: #f59e0b !important;
}

/* Apple card glow orb */
.sgtaxi-login-plan-card.apple .absolute.-right-12 {
    background-color: rgba(245, 158, 11, 0.2);
}

/* Apple card: dark text for white background */
.sgtaxi-login-plan-card.apple .plan-subtitle {
    color: rgba(180, 83, 9, 0.8);
}

.sgtaxi-login-plan-card.apple .plan-price {
    color: #b45309;
}

.sgtaxi-login-plan-card.apple .plan-price-subtitle {
    color: rgba(180, 83, 9, 0.55);
}

.sgtaxi-login-plan-card.apple h3 {
    color: #0f172a;
}

.sgtaxi-login-plan-card.apple p {
    color: rgba(15, 23, 42, 0.65);
}

.sgtaxi-login-plan-card.apple li {
    color: rgba(15, 23, 42, 0.85);
}

.sgtaxi-login-plan-card.apple li i {
    color: #059669;
}

.sgtaxi-login-plan-card.apple li i.text-warning {
    color: #d97706 !important;
}

.sgtaxi-login-plan-card.apple li i.fa-apple {
    color: #0f172a !important;
}

.sgtaxi-login-plan-card.apple hr {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

.sgtaxi-login-plan-card.apple .sgtaxi-badge-differentiator {
    background-color: rgba(245, 158, 11, 0.12) !important;
    color: #92400e !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}