/**
 * (re)expense Dashboard - Custom Styles
 * Overrides for Tabler UI framework
 */

/* Mobile Safe Area - Account for phone status bar */
@supports (padding-top: env(safe-area-inset-top)) {
    .navbar.navbar-vertical {
        padding-top: env(safe-area-inset-top);
    }

    .page-wrapper {
        padding-top: env(safe-area-inset-top);
    }
}

/* Fallback for Capacitor apps - add minimum padding on mobile */
@media (max-width: 992px) {
    .navbar.navbar-vertical {
        padding-top: max(env(safe-area-inset-top, 0px), 0px);
    }

    /* Ensure hamburger menu is visible and accessible */
    .navbar-toggler {
        position: relative;
        z-index: 1050;
        padding: 0.5rem;
        min-width: 44px;
        min-height: 44px;
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
}

/* The Modern Broker Theme */
:root {
    --tblr-primary: #3B82F6;
    --tblr-primary-rgb: 59, 130, 246;
    --tblr-primary-darken: #2563EB;
    --tblr-primary-lt: rgba(59, 130, 246, 0.1);
}

/* Navbar Brand */
.navbar-brand {
    font-size: 1.25rem;
    font-weight: 700;
}

.navbar-brand .text-primary {
    color: #3B82F6 !important;
}

/* Welcome Banner */
#welcome-banner {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    color: white;
    border: none;
}

#welcome-banner .card-stamp-icon {
    background: rgba(255, 255, 255, 0.2) !important;
}

#welcome-banner h3,
#welcome-banner p,
#welcome-banner strong {
    color: white;
}

#welcome-banner .text-secondary {
    color: rgba(255, 255, 255, 0.85) !important;
}

#welcome-banner .btn-primary {
    background: white;
    color: #3B82F6;
    border: none;
}

#welcome-banner .btn-primary:hover {
    background: rgba(255, 255, 255, 0.9);
}

#welcome-banner .btn:not(.btn-primary) {
    color: white;
    border-color: rgba(255, 255, 255, 0.5);
}

#welcome-banner .btn:not(.btn-primary):hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
}

/* Stat Cards */
.card .h1 {
    font-size: 1.75rem;
    font-weight: 700;
}

/* Progress Bars */
.progress-bar.bg-primary {
    background-color: #3B82F6 !important;
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
    border: none;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Quick Action Buttons */
.btn-outline-primary:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: #3B82F6;
    color: #3B82F6;
}

/* Charts */
#chart-mileage {
    min-height: 280px;
}

/* Table Improvements */
.table-vcenter td {
    vertical-align: middle;
}

.text-green {
    color: #2fb344 !important;
}

/* Card Status Bars */
.card-status-start.bg-success {
    background: #2fb344 !important;
}

.card-status-start.bg-info {
    background: #4299e1 !important;
}

.card-status-start.bg-warning {
    background: #f59f00 !important;
}

.card-status-start.bg-purple {
    background: #3B82F6 !important;
}

/* Avatar Colors */
.avatar.bg-success-lt {
    background: rgba(47, 179, 68, 0.1);
    color: #2fb344;
}

.avatar.bg-info-lt {
    background: rgba(66, 153, 225, 0.1);
    color: #4299e1;
}

.avatar.bg-warning-lt {
    background: rgba(245, 159, 0, 0.1);
    color: #f59f00;
}

.avatar.bg-purple-lt {
    background: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
}

.avatar.bg-green-lt {
    background: rgba(47, 179, 68, 0.1);
    color: #2fb344;
}

/* Sidebar Active State */
.navbar-vertical .nav-link.active {
    background: rgba(59, 130, 246, 0.15);
    color: #3B82F6 !important;
}

/* Badge Colors */
.badge.bg-green-lt {
    background: rgba(47, 179, 68, 0.1);
    color: #2fb344;
}

.badge.bg-blue-lt {
    background: rgba(32, 107, 196, 0.1);
    color: #206bc4;
}

/* Insight Cards */
.card-sm .card-body {
    padding: 1rem;
}

.card-sm .avatar {
    width: 2.5rem;
    height: 2.5rem;
}

/* List Group Items */
.list-group-item {
    border-left: none;
    border-right: none;
}

.list-group-item:first-child {
    border-top: none;
}

/* Page Header */
.page-header {
    background: white;
    margin-bottom: 0;
    padding: 1.5rem 0;
}

.page-title {
    margin-bottom: 0;
}

/* Status Indicator */
.status-indicator-animated .status-indicator-circle {
    animation: status-pulsate 1.5s ease-in-out infinite;
}

@keyframes status-pulsate {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.5); }
    100% { opacity: 1; transform: scale(1); }
}

/* Responsive Tweaks */
@media (max-width: 768px) {
    .card .h1 {
        font-size: 1.5rem;
    }

    #welcome-banner h3 {
        font-size: 1.25rem;
    }

    .btn-list {
        flex-direction: column;
    }

    .btn-list .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* Loading State */
.spinner-border-sm {
    width: 1rem;
    height: 1rem;
}

/* Smooth Transitions */
.card,
.btn,
.nav-link {
    transition: all 0.2s ease;
}

/* Dark Sidebar */
.navbar-vertical[data-bs-theme="dark"] {
    background: #1a1a2e;
}

.navbar-vertical[data-bs-theme="dark"] .nav-link {
    color: rgba(255, 255, 255, 0.7);
}

.navbar-vertical[data-bs-theme="dark"] .nav-link:hover {
    color: white;
    background: rgba(255, 255, 255, 0.05);
}

.navbar-vertical[data-bs-theme="dark"] .nav-link.active {
    color: #60A5FA !important;
    background: rgba(59, 130, 246, 0.2);
}

/* Google Places Autocomplete Dropdown Styles */
.pac-container {
    font-family: inherit;
    border-radius: 8px;
    border: 1px solid var(--tblr-border-color, #e6e8e9);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    margin-top: 4px;
    z-index: 10000;
}

.pac-item {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    border-top: 1px solid var(--tblr-border-color, #e6e8e9);
    line-height: 1.5;
}

.pac-item:first-child {
    border-top: none;
}

.pac-item:hover {
    background-color: var(--tblr-bg-surface-secondary, #f6f8fb);
}

.pac-item-selected,
.pac-item-selected:hover {
    background-color: var(--tblr-primary-lt, #e7f1ff);
}

.pac-icon {
    margin-right: 10px;
    background-image: none;
    width: 20px;
    height: 20px;
    background-color: var(--tblr-primary, #3B82F6);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/%3E%3Cpath d='M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z'/%3E%3C/svg%3E") no-repeat center center;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/%3E%3Cpath d='M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z'/%3E%3C/svg%3E") no-repeat center center;
    mask-size: contain;
    -webkit-mask-size: contain;
}

.pac-item-query {
    font-weight: 500;
    color: var(--tblr-body-color, #1d273b);
    font-size: 14px;
}

.pac-matched {
    font-weight: 600;
    color: var(--tblr-primary, #3B82F6);
}

/* Hide Google logo in dropdown */
.pac-logo::after {
    display: none;
}

/* Clickable KPI Cards */
a.card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

a.card-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

a.card-link .h1,
a.card-link .subheader,
a.card-link div {
    color: inherit;
}