/* Eden Fish Farm Custom Aquaculture Theme & Mobile-Responsive Design */

:root {
    --eden-primary: #0f4c81;
    --eden-teal: #00a896;
    --eden-ocean: #028090;
    --eden-dark: #023e8a;
    --eden-red: #e63946;
    --eden-yellow: #f4a261;
    --eden-green: #2a9d8f;
    --eden-bottom-nav-height: 64px;
}

.bg-gradient-eden {
    background-color: #0d3b66;
    background-image: linear-gradient(180deg, #0d3b66 10%, #0077b6 100%);
    background-size: cover;
}

.sidebar-eden {
    background-color: #0f2b48 !important;
    background-image: linear-gradient(180deg, #0f2b48 0%, #173d63 100%) !important;
}

.sidebar-eden .nav-item.active .nav-link {
    font-weight: 700;
    background: rgba(255, 255, 255, 0.12);
    border-left: 4px solid #00f0ff;
}

/* Operational Status Badges */
.badge-red-unpaid {
    background-color: #fee2e2;
    color: #b91c1c;
    border: 1px solid #f87171;
    font-weight: 700;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.badge-yellow-pending {
    background-color: #fef3c7;
    color: #b45309;
    border: 1px solid #fbbf24;
    font-weight: 700;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.badge-green-settled {
    background-color: #d1fae5;
    color: #047857;
    border: 1px solid #34d399;
    font-weight: 700;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.card-red-indicator {
    border-left: 0.35rem solid #e63946 !important;
}

.card-yellow-indicator {
    border-left: 0.35rem solid #f59e0b !important;
}

.card-green-indicator {
    border-left: 0.35rem solid #10b981 !important;
}

.card-cyan-indicator {
    border-left: 0.35rem solid #06b6d4 !important;
}

.calc-display {
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 1rem;
}

.calc-display .metric-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: #64748b;
}

.calc-display .metric-val {
    font-size: 1.4rem;
    font-weight: 800;
}

.report-header {
    border-bottom: 3px solid #0f4c81;
    padding-bottom: 1.2rem;
    margin-bottom: 2rem;
}

/* =======================================================
   MOBILE FRIENDLY STYLING & TOUCH OPTIMIZATIONS
   ======================================================= */

/* Touch input prevent iOS auto-zoom */
@media (max-width: 991.98px) {
    input[type="text"],
    input[type="number"],
    input[type="date"],
    input[type="tel"],
    select.form-control,
    textarea.form-control {
        font-size: 16px !important; /* Prevents auto-zoom on iPhone/Android */
        min-height: 46px;
    }

    .btn:not(.btn-sm):not(.btn-xs):not(.card-header .btn):not(.table .btn) {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn-sm,
    .btn-xs,
    .card-header .btn,
    .card-header a.btn,
    .table .btn {
        min-height: 32px !important;
        font-size: 0.78rem !important;
        padding: 0.25rem 0.55rem !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        flex-shrink: 0;
    }

    /* Page container padding adjustments */
    .container-fluid {
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
    }

    .card-body {
        padding: 1rem !important;
    }

    /* Keep KPI cards compact and legible */
    .h5.font-weight-bold {
        font-size: 1.25rem !important;
    }

    /* Topbar on mobile */
    .topbar {
        height: 3.8rem !important;
        padding: 0 0.75rem !important;
    }

    .topbar .navbar-brand {
        font-size: 0.95rem;
    }
}

/* Mobile Bottom Navigation Bar (Dock) */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--eden-bottom-nav-height);
    background: #0f2b48;
    box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.18);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1040;
    padding: 0 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    text-decoration: none !important;
    font-size: 0.68rem;
    font-weight: 600;
    flex: 1;
    height: 100%;
    transition: color 0.15s ease-in-out;
}

.mobile-nav-item i {
    font-size: 1.15rem;
    margin-bottom: 2px;
}

.mobile-nav-item.active {
    color: #00f0ff;
    font-weight: 700;
}

.mobile-nav-item:hover {
    color: #ffffff;
}

/* Prominent Center Action Button in Mobile Nav */
.mobile-nav-center {
    position: relative;
    top: -12px;
    background: #10b981;
    color: #ffffff !important;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45);
    border: 3px solid #ffffff;
}

.mobile-nav-center i {
    font-size: 1.4rem;
    margin: 0;
}

.mobile-nav-center span {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
}

/* Add bottom padding to body on mobile so bottom dock doesn't obscure content */
@media (max-width: 767.98px) {
    body {
        padding-bottom: calc(var(--eden-bottom-nav-height) + 16px) !important;
    }

    footer.sticky-footer {
        display: none !important;
    }

    /* Hide the 6.5rem sidebar on mobile devices - bottom dock provides all navigation */
    #accordionSidebar.sidebar,
    .sidebar {
        display: none !important;
        width: 0 !important;
    }

    /* Off-canvas slide-out when hamburger menu is clicked */
    body.sidebar-toggled #accordionSidebar.sidebar,
    body.sidebar-toggled .sidebar {
        display: block !important;
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: var(--eden-bottom-nav-height);
        width: 250px !important;
        z-index: 1050;
        box-shadow: 4px 0 25px rgba(0, 0, 0, 0.4);
        overflow-y: auto;
    }

    #content-wrapper {
        width: 100% !important;
        min-width: 0 !important;
    }

    .container-fluid {
        padding-left: 0.65rem !important;
        padding-right: 0.65rem !important;
    }

    /* Smooth horizontal touch scroll for tables */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        border: 0 !important;
        margin-bottom: 0.5rem;
    }

    .table th, .table td {
        white-space: nowrap;
        padding: 0.6rem 0.5rem !important;
    }

    /* Nav pills scroll horizontally on phone */
    .nav-pills {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
    }

    .nav-pills .nav-item {
        flex: 0 0 auto;
    }

    .nav-pills .nav-link {
        padding: 0.4rem 0.75rem;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    /* Modal full-screen/sheet on mobile */
    .modal-dialog {
        margin: 0.5rem;
    }

    /* Card headers on mobile: ensure title and action buttons wrap gracefully and never squish buttons */
    .card-header.d-flex,
    .card-header.justify-content-between {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        align-items: center !important;
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    .card-header h6,
    .card-header .h6 {
        font-size: 0.95rem !important;
        line-height: 1.35 !important;
        margin-bottom: 0 !important;
    }

    .card-header .btn,
    .card-header a.btn {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        font-size: 0.78rem !important;
        padding: 0.3rem 0.65rem !important;
        min-height: 32px !important;
        line-height: 1.2;
    }
}

/* Card header base responsive styles */
.card-header.d-flex,
.card-header.justify-content-between {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.card-header .btn,
.card-header a.btn,
.table .btn,
.badge {
    white-space: nowrap !important;
}

.btn-xs {
    padding: 0.2rem 0.45rem;
    font-size: 0.75rem;
    line-height: 1.2;
    border-radius: 0.2rem;
    white-space: nowrap;
}

/* Report KPI Cards & Metric Display */
.report-kpi {
    border-left: 4px solid #0f4c81;
    padding: 0.85rem 0.65rem;
    background: #f8fafc;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.15s ease-in-out;
}

.kpi-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.03em;
    line-height: 1.25;
    margin-bottom: 0.25rem;
}

.report-kpi-value {
    font-size: clamp(1.05rem, 3.6vw, 1.45rem);
    font-weight: 800;
    white-space: nowrap;
    line-height: 1.25;
    margin: 0.25rem 0;
}

.kpi-curr {
    font-size: 0.75em;
    font-weight: 600;
    opacity: 0.85;
    margin-right: 2px;
}

.kpi-subtext {
    font-size: 0.72rem;
    line-height: 1.2;
}

@media (max-width: 575.98px) {
    .report-kpi {
        padding: 0.65rem 0.45rem;
    }
    .report-kpi-value {
        font-size: clamp(0.92rem, 3.5vw, 1.15rem);
    }
    .kpi-label {
        font-size: 0.62rem;
    }
    .kpi-subtext {
        font-size: 0.68rem;
    }
}

/* Print Stylesheet */
@media print {
    #accordionSidebar, .navbar, .btn-print-hide, .mobile-bottom-nav, footer {
        display: none !important;
    }
    #content-wrapper {
        margin: 0 !important;
        padding: 0 !important;
    }
    body {
        background: #fff !important;
        padding-bottom: 0 !important;
    }
    .card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }
}

/* ===================================================
   Farm Inputs & Outputs (Cash Flow, CAPEX & OPEX, Tax)
   =================================================== */

.card-capex-border {
    border-left: 0.35rem solid #00bcd4 !important;
}

.card-opex-border {
    border-left: 0.35rem solid #fb8c00 !important;
}

.card-inflow-border {
    border-left: 0.35rem solid #2e7d32 !important;
}

.card-balance-border {
    border-left: 0.35rem solid #0f4c81 !important;
}

/* Operational Badges for Financial Flow */
.badge-capex {
    background-color: #e0f7fa;
    color: #006064;
    border: 1px solid #4dd0e1;
    font-weight: 700;
    padding: 0.28rem 0.55rem;
    border-radius: 6px;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.badge-opex {
    background-color: #fff3e0;
    color: #e65100;
    border: 1px solid #ffb74d;
    font-weight: 700;
    padding: 0.28rem 0.55rem;
    border-radius: 6px;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.badge-inflow {
    background-color: #e8f5e9;
    color: #1b5e20;
    border: 1px solid #81c784;
    font-weight: 700;
    padding: 0.28rem 0.55rem;
    border-radius: 6px;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.badge-etims {
    background-color: #004d40;
    color: #a7f3d0;
    border: 1px solid #059669;
    font-weight: 700;
    padding: 0.25rem 0.55rem;
    border-radius: 6px;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
    letter-spacing: 0.03em;
}

.badge-kra {
    background-color: #ede7f6;
    color: #4527a0;
    border: 1px solid #b39ddb;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.mpesa-pill {
    background-color: #f1f5f9;
    color: #1e293b;
    border: 1px solid #cbd5e1;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.18rem 0.5rem;
    border-radius: 9999px;
    display: inline-block;
    margin: 2px 3px 2px 0;
    white-space: nowrap;
    transition: background-color 0.15s;
}

.mpesa-pill:hover {
    background-color: #e2e8f0;
    color: #0f172a;
}

.cashflow-table th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
    background-color: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
}

.cashflow-table td {
    vertical-align: middle;
    font-size: 0.88rem;
}

.cashflow-filter-btn {
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    margin-right: 0.35rem;
    margin-bottom: 0.35rem;
    border: 1px solid #cbd5e1;
    background-color: #fff;
    color: #475569;
    transition: all 0.2s;
}

.cashflow-filter-btn.active,
.cashflow-filter-btn:hover {
    background-color: #0f4c81;
    color: #fff;
    border-color: #0f4c81;
}

.cashflow-filter-btn.active-capex {
    background-color: #00838f !important;
    color: #fff !important;
    border-color: #00838f !important;
}

.cashflow-filter-btn.active-opex {
    background-color: #e65100 !important;
    color: #fff !important;
    border-color: #e65100 !important;
}

.cashflow-filter-btn.active-etims {
    background-color: #004d40 !important;
    color: #fff !important;
    border-color: #004d40 !important;
}

@media (max-width: 767.98px) {
    .cashflow-card-row {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 0.85rem;
        margin-bottom: 0.75rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
}