/* ==========================================================================
   Harvest Data Portal - Custom UI/UX Stylesheet
   Modern, sleek, high-contrast theming for Dark & Light modes.
   ========================================================================== */

/* --- Google Font & Typography --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    --portal-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --portal-font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* Theme Accent Colors */
    --portal-primary: #2563eb;
    --portal-primary-hover: #1d4ed8;
    --portal-accent: #10b981;
    --portal-accent-hover: #059669;
    --portal-warning: #f59e0b;
    --portal-danger: #ef4444;

    /* Dark Theme Surface Defaults */
    --portal-card-bg: #1e2430;
    --portal-card-border: rgba(255, 255, 255, 0.08);
    --portal-card-hover-border: rgba(37, 99, 235, 0.4);
    --portal-nav-bg: rgba(23, 28, 38, 0.85);
    --portal-nav-border: rgba(255, 255, 255, 0.08);
    --portal-telemetry-bg: #141822;
}

[data-bs-theme="light"] {
    --portal-card-bg: #ffffff;
    --portal-card-border: rgba(0, 0, 0, 0.08);
    --portal-card-hover-border: rgba(37, 99, 235, 0.4);
    --portal-nav-bg: rgba(255, 255, 255, 0.9);
    --portal-nav-border: rgba(0, 0, 0, 0.08);
    --portal-telemetry-bg: #f8fafc;
}

/* --- Base Body & Flex Layout --- */
html, body {
    font-family: var(--portal-font-sans);
    letter-spacing: -0.01em;
    min-height: 100vh;
}

body {
    display: flex;
    flex-direction: column;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    position: relative;
    padding-bottom: 0 !important; /* Overriding old fixed footer margin */
}

main.main-content {
    flex: 1 0 auto;
    padding-top: 1.5rem;
    padding-bottom: 3rem;
}

/* --- App Navbar --- */
.portal-navbar {
    background-color: var(--portal-nav-bg) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--portal-nav-border);
    transition: background-color 0.2s ease, border-color 0.2s ease;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    z-index: 1030;
}

.portal-brand {
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    color: var(--bs-heading-color);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.portal-brand:hover {
    color: var(--portal-primary);
}

.portal-brand-logo {
    height: 34px;
    width: auto;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.portal-brand:hover .portal-brand-logo {
    transform: scale(1.05);
}

/* Nav Links & Pills */
.portal-nav-link {
    font-weight: 500;
    font-size: 0.925rem;
    padding: 0.5rem 0.9rem !important;
    border-radius: 0.5rem;
    color: var(--bs-secondary-color) !important;
    transition: all 0.15s ease-in-out;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.portal-nav-link:hover {
    color: var(--bs-body-color) !important;
    background-color: rgba(125, 125, 125, 0.1);
}

.portal-nav-link.active {
    color: #ffffff !important;
    background-color: var(--portal-primary) !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

/* Nav Dropdown Menus */
.portal-dropdown-menu {
    border: 1px solid var(--portal-card-border);
    background-color: var(--portal-card-bg);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
    border-radius: 0.75rem;
    padding: 0.5rem;
}

.portal-dropdown-item {
    border-radius: 0.4rem;
    padding: 0.5rem 0.85rem;
    font-weight: 500;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.15s ease;
}

.portal-dropdown-item:hover {
    background-color: rgba(37, 99, 235, 0.12);
    color: var(--portal-primary);
}

/* Theme Toggle Button */
.portal-theme-toggle {
    width: 38px;
    height: 38px;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--portal-card-border);
    background: transparent;
    color: var(--bs-body-color);
    transition: all 0.2s ease;
}

.portal-theme-toggle:hover {
    background-color: rgba(125, 125, 125, 0.12);
    transform: rotate(15deg);
}

/* --- Cards & Containers --- */
.portal-card {
    background-color: var(--portal-card-bg);
    border: 1px solid var(--portal-card-border);
    border-radius: 0.875rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    overflow: hidden;
}

.portal-card-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.18);
    border-color: var(--portal-card-hover-border);
}

.portal-card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--portal-card-border);
    padding: 1rem 1.25rem;
}

.portal-card-footer {
    background-color: transparent;
    border-top: 1px solid var(--portal-card-border);
    padding: 0.875rem 1.25rem;
}

/* --- Fleet Dashboard Header & Stats --- */
.fleet-hero-banner {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
    border: 1px solid var(--portal-card-border);
    border-radius: 1rem;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
}

.fleet-stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.825rem;
    font-weight: 600;
}

/* Live Pulse Dots */
.live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

.live-dot-online {
    background-color: var(--portal-accent);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: livePulse 2s infinite;
}

.live-dot-offline {
    background-color: var(--portal-danger);
}

@keyframes livePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
        box-shadow: 0 0 0 7px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* --- Telemetry Strip & Status Indicators (LEDs) --- */
.telemetry-strip {
    background-color: var(--portal-telemetry-bg);
    border: 1px solid var(--portal-card-border);
    border-radius: 0.875rem;
    padding: 1.25rem;
}

.status-indicator-card {
    background-color: var(--portal-card-bg);
    border: 1px solid var(--portal-card-border);
    border-radius: 0.65rem;
    padding: 0.75rem 0.5rem;
    text-align: center;
    transition: all 0.2s ease;
}

.status-indicator-card .indicator-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
    margin-bottom: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sleek LED Indicator Pills */
.led-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.led-on, .led-off {
    height: 32px;
    width: 60px;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.led-on {
    color: #ffffff;
    background-color: #10b981;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.led-off {
    color: rgba(255, 255, 255, 0.4);
    background-color: #334155;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

[data-bs-theme="light"] .led-off {
    color: #64748b;
    background-color: #e2e8f0;
    border: 1px solid #cbd5e1;
}

/* --- Metric KPI Summary Cards --- */
.kpi-card {
    background-color: var(--portal-card-bg);
    border: 1px solid var(--portal-card-border);
    border-radius: 0.75rem;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.kpi-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary-color);
}

.kpi-value {
    font-size: 1.35rem;
    font-weight: 700;
    margin-top: 0.25rem;
    margin-bottom: 0;
    font-family: var(--portal-font-mono);
}

/* --- Breadcrumbs --- */
.breadcrumb {
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
}

.breadcrumb-item a {
    text-decoration: none;
    color: var(--bs-secondary-color);
    transition: color 0.15s ease;
}

.breadcrumb-item a:hover {
    color: var(--portal-primary);
}

/* --- Harvester Tractor Icon (Streamline Agriculture Tractor) --- */
.bi-tractor::before {
    content: "";
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.2em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3.625 9.0248c-0.191335 0-0.351665-0.075-0.481-0.225-0.129335-0.15-0.194-0.325-0.194-0.525s0.064665-0.375 0.194-0.525c0.129335-0.15 0.289665-0.225 0.481-0.225h3.725c0.41935 0 0.77835 0.14585 1.077 0.4375 0.29865 0.29165 0.48965 0.64585 0.573 1.0625H3.625Zm2.122 9.475c0.902 0 1.66965-0.31565 2.303-0.947 0.63335-0.63135 0.95-1.398 0.95-2.3 0-0.902-0.31565-1.66965-0.947-2.303-0.63135-0.63335-1.398-0.95-2.3-0.95-0.902 0-1.669665 0.31565-2.303 0.947s-0.95 1.398-0.95 2.3c0 0.902 0.315665 1.66965 0.947 2.303 0.631335 0.63335 1.398 0.95 2.3 0.95Zm13.8735 0c0.51965 0 0.96285-0.18185 1.3295-0.5455 0.36665-0.36385 0.55-0.8055 0.55-1.325 0-0.51965-0.18185-0.96285-0.5455-1.3295-0.36385-0.36665-0.8055-0.55-1.325-0.55-0.51965 0-0.96285 0.18185-1.3295 0.5455-0.36665 0.36385-0.55 0.8055-0.55 1.325 0 0.51965 0.18185 0.96285 0.5455 1.3295 0.36385 0.36665 0.8055 0.55 1.325 0.55Zm-13.8675-1.5c-0.48535 0-0.898835-0.16985-1.2405-0.5095C4.170835 16.15065 4 15.73815 4 15.2528c0-0.48535 0.169835-0.89885 0.5095-1.2405 0.339665-0.34165 0.75215-0.5125 1.2375-0.5125 0.48535 0 0.89885 0.16985 1.2405 0.5095 0.34165 0.33965 0.5125 0.75215 0.5125 1.2375 0 0.48535-0.16985 0.89885-0.5095 1.2405-0.33965 0.34165-0.75215 0.5125-1.2375 0.5125Zm14.497-3.7c0.31665 0.08335 0.57915 0.175 0.7875 0.275 0.20835 0.1 0.44585 0.25 0.7125 0.45v-6.5c0-0.43335-0.14165-0.79165-0.425-1.075s-0.64165-0.425-1.075-0.425H13.45l-1.225-1.224995 1.55-1.55-0.45-0.45-3.525 3.524995 0.45 0.475 1.525-1.525 1.225 1.191v2.609c0 0.69435-0.2375 1.28875-0.7125 1.78325-0.475 0.4945-1.0625 0.74175-1.7625 0.74175H8.8c0.28335 0.23335 0.50415 0.45835 0.6625 0.675 0.15835 0.21665 0.3375 0.49165 0.5375 0.825h0.525c1.08335 0 2.01665-0.4 2.8-1.2 0.78335-0.8 1.175-1.74165 1.175-2.825v-1.55h5.75v5.775Zm-3.925 2.7c0.1-0.36665 0.20415-0.65415 0.3125-0.8625 0.10835-0.20835 0.2625-0.42915 0.4625-0.6625H10.45c0.03335 0.3 0.05 0.55415 0.05 0.7625 0 0.20835-0.01665 0.4625-0.05 0.7625h5.875Zm3.3125 4c-0.94165 0-1.74165-0.32215-2.4-0.9665-0.65835-0.64415-0.9875-1.422-0.9875-2.3335 0-0.95285 0.33675-1.7661 1.01025-2.43975 0.67365-0.6735 1.4869-1.01025 2.43975-1.01025 0.9115 0 1.68935 0.3295 2.3335 0.9885C22.67785 14.89715 23 15.69265 23 16.6248c0 0.95-0.325 1.75-0.975 2.4-0.65 0.65-1.44585 0.975-2.3875 0.975Zm-13.9375 0c-1.316665 0-2.429165-0.4631-3.3375-1.38925C1.454165 17.6842 1 16.56395 1 15.2498c0-1.31415 0.4625-2.43435 1.3875-3.3605 0.925-0.92635 2.044915-1.3895 3.35975-1.3895 1.315 0 2.43585 0.4634 3.3625 1.39025C10.0366 12.8167 10.5 13.93755 10.5 15.25255c0 1.31485-0.4625 2.43475-1.3875 3.35975-0.925 0.925-2.0625 1.3875-3.4125 1.3875Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3.625 9.0248c-0.191335 0-0.351665-0.075-0.481-0.225-0.129335-0.15-0.194-0.325-0.194-0.525s0.064665-0.375 0.194-0.525c0.129335-0.15 0.289665-0.225 0.481-0.225h3.725c0.41935 0 0.77835 0.14585 1.077 0.4375 0.29865 0.29165 0.48965 0.64585 0.573 1.0625H3.625Zm2.122 9.475c0.902 0 1.66965-0.31565 2.303-0.947 0.63335-0.63135 0.95-1.398 0.95-2.3 0-0.902-0.31565-1.66965-0.947-2.303-0.63135-0.63335-1.398-0.95-2.3-0.95-0.902 0-1.669665 0.31565-2.303 0.947s-0.95 1.398-0.95 2.3c0 0.902 0.315665 1.66965 0.947 2.303 0.631335 0.63335 1.398 0.95 2.3 0.95Zm13.8735 0c0.51965 0 0.96285-0.18185 1.3295-0.5455 0.36665-0.36385 0.55-0.8055 0.55-1.325 0-0.51965-0.18185-0.96285-0.5455-1.3295-0.36385-0.36665-0.8055-0.55-1.325-0.55-0.51965 0-0.96285 0.18185-1.3295 0.5455-0.36665 0.36385-0.55 0.8055-0.55 1.325 0 0.51965 0.18185 0.96285 0.5455 1.3295 0.36385 0.36665 0.8055 0.55 1.325 0.55Zm-13.8675-1.5c-0.48535 0-0.898835-0.16985-1.2405-0.5095C4.170835 16.15065 4 15.73815 4 15.2528c0-0.48535 0.169835-0.89885 0.5095-1.2405 0.339665-0.34165 0.75215-0.5125 1.2375-0.5125 0.48535 0 0.89885 0.16985 1.2405 0.5095 0.34165 0.33965 0.5125 0.75215 0.5125 1.2375 0 0.48535-0.16985 0.89885-0.5095 1.2405-0.33965 0.34165-0.75215 0.5125-1.2375 0.5125Zm14.497-3.7c0.31665 0.08335 0.57915 0.175 0.7875 0.275 0.20835 0.1 0.44585 0.25 0.7125 0.45v-6.5c0-0.43335-0.14165-0.79165-0.425-1.075s-0.64165-0.425-1.075-0.425H13.45l-1.225-1.224995 1.55-1.55-0.45-0.45-3.525 3.524995 0.45 0.475 1.525-1.525 1.225 1.191v2.609c0 0.69435-0.2375 1.28875-0.7125 1.78325-0.475 0.4945-1.0625 0.74175-1.7625 0.74175H8.8c0.28335 0.23335 0.50415 0.45835 0.6625 0.675 0.15835 0.21665 0.3375 0.49165 0.5375 0.825h0.525c1.08335 0 2.01665-0.4 2.8-1.2 0.78335-0.8 1.175-1.74165 1.175-2.825v-1.55h5.75v5.775Zm-3.925 2.7c0.1-0.36665 0.20415-0.65415 0.3125-0.8625 0.10835-0.20835 0.2625-0.42915 0.4625-0.6625H10.45c0.03335 0.3 0.05 0.55415 0.05 0.7625 0 0.20835-0.01665 0.4625-0.05 0.7625h5.875Zm3.3125 4c-0.94165 0-1.74165-0.32215-2.4-0.9665-0.65835-0.64415-0.9875-1.422-0.9875-2.3335 0-0.95285 0.33675-1.7661 1.01025-2.43975 0.67365-0.6735 1.4869-1.01025 2.43975-1.01025 0.9115 0 1.68935 0.3295 2.3335 0.9885C22.67785 14.89715 23 15.69265 23 16.6248c0 0.95-0.325 1.75-0.975 2.4-0.65 0.65-1.44585 0.975-2.3875 0.975Zm-13.9375 0c-1.316665 0-2.429165-0.4631-3.3375-1.38925C1.454165 17.6842 1 16.56395 1 15.2498c0-1.31415 0.4625-2.43435 1.3875-3.3605 0.925-0.92635 2.044915-1.3895 3.35975-1.3895 1.315 0 2.43585 0.4634 3.3625 1.39025C10.0366 12.8167 10.5 13.93755 10.5 15.25255c0 1.31485-0.4625 2.43475-1.3875 3.35975-0.925 0.925-2.0625 1.3875-3.4125 1.3875Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Data Tables --- */
.portal-table-container {
    background-color: var(--portal-card-bg);
    border: 1px solid var(--portal-card-border);
    border-radius: 0.875rem;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.portal-table {
    margin-bottom: 0;
}

.portal-table thead th {
    background-color: rgba(125, 125, 125, 0.05);
    border-bottom: 1px solid var(--portal-card-border);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
    padding: 0.85rem 1rem;
}

.portal-table tbody td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--portal-card-border);
    vertical-align: middle;
}

.portal-table tbody tr:last-child td {
    border-bottom: none;
}

.portal-table tbody tr:hover {
    background-color: rgba(37, 99, 235, 0.04);
}

/* --- App Footer --- */
.portal-footer {
    background-color: var(--portal-nav-bg);
    border-top: 1px solid var(--portal-nav-border);
    padding: 1rem 0;
    font-size: 0.825rem;
    color: var(--bs-secondary-color);
}

.portal-footer a {
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.portal-footer a:hover {
    color: var(--portal-primary);
}

/* --- Buttons & Badges --- */
.btn-portal-primary {
    background-color: var(--portal-primary);
    border-color: var(--portal-primary);
    color: #ffffff;
    font-weight: 500;
    border-radius: 0.5rem;
    transition: all 0.15s ease-in-out;
}

.btn-portal-primary:hover {
    background-color: var(--portal-primary-hover);
    border-color: var(--portal-primary-hover);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn-portal-accent {
    background-color: var(--portal-accent);
    border-color: var(--portal-accent);
    color: #ffffff;
    font-weight: 500;
    border-radius: 0.5rem;
    transition: all 0.15s ease-in-out;
}

.btn-portal-accent:hover {
    background-color: var(--portal-accent-hover);
    border-color: var(--portal-accent-hover);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}