@tailwind base;
@tailwind components;
@tailwind utilities;

/* --- LIGHT MODE VARIABLES --- */
:root {
    --bg-page: #f8fafc;
    --bg-card: #ffffff;
    --text-main: #0f172a;
    --text-sub: #64748b;
    --border-color: #e2e8f0;
    
    /* THEMES */
    --theme-blue-bg: #eff6ff; --theme-blue-border: #60a5fa; 
    --theme-blue-header: #dbeafe; --theme-blue-text: #1e40af;
    
    --theme-indigo-bg: #eef2ff; --theme-indigo-border: #6366f1;
    --theme-indigo-header: #e0e7ff; --theme-indigo-text: #312e81;
    
    --theme-green-bg: #f0fdf4; --theme-green-border: #22c55e;
    --theme-green-header: #dcfce7; --theme-green-text: #14532d;

    --theme-rose-bg: #fff1f2; --theme-rose-border: #f43f5e;
    --theme-rose-header: #ffe4e6; --theme-rose-text: #881337;
}

body {
    font-family: 'Inter', sans-serif;
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.16), transparent 30%),
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 28%),
        linear-gradient(180deg, #eef4ff 0%, #f8fafc 35%, #eef2ff 100%);
    background-attachment: fixed;
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* --- CARDS --- */
.card-base {
    background-color: var(--bg-card);
    border-radius: 20px;
    box-shadow: 0 18px 50px -28px rgba(15, 23, 42, 0.35);
    overflow: hidden;
    height: 100%;
    display: flex; flex-direction: column;
    position: relative;
}

.card-base::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255,255,255,0.75);
    pointer-events: none;
}

/* Theme Classes */
.card-blue { border: 1px solid rgba(96, 165, 250, 0.35); }
.header-blue {
    background: linear-gradient(135deg, rgba(219, 234, 254, 0.95), rgba(224, 242, 254, 0.95));
    color: var(--theme-blue-text);
    border-bottom: 1px solid rgba(96, 165, 250, 0.35);
    padding: 14px 18px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
}

.card-indigo { border: 2px solid var(--theme-indigo-border); box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.1); }
.header-indigo { background-color: var(--theme-indigo-header); color: var(--theme-indigo-text); border-bottom: 2px solid var(--theme-indigo-border); padding: 12px 16px; font-weight: 800; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; }

/* The Dual Dashboard Card */
.card-dashboard { border: 2px solid var(--border-color); }
.header-green { background-color: var(--theme-green-header); color: var(--theme-green-text); border-bottom: 1px solid var(--theme-green-border); padding: 10px; font-weight: 800; text-transform: uppercase; font-size: 0.7rem; text-align: center; }
.header-rose { background-color: var(--theme-rose-header); color: var(--theme-rose-text); border-bottom: 1px solid var(--theme-rose-border); padding: 10px; font-weight: 800; text-transform: uppercase; font-size: 0.7rem; text-align: center; }

/* --- INPUTS --- */
.input-label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; color: #475569; margin-bottom: 6px; display: block; letter-spacing: 0.08em; }
.input-field { width: 100%; padding: 10px 12px; border: 2px solid var(--border-color); border-radius: 8px; background-color: #ffffff; color: var(--text-main); font-weight: 600; outline: none; transition: border-color 0.2s; }
.input-field:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
.setting-input { background: #ffffff; border: 1px solid var(--border-color); border-radius: 6px; padding: 6px 10px; color: var(--text-main); text-align: right; font-weight: 700; outline: none; }

/* --- BUTTONS --- */
.btn-primary { width: 100%; padding: 12px; background-color: #2563eb; color: white; font-weight: 700; border-radius: 8px; transition: opacity 0.2s; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.05em; }
.btn-primary:hover { opacity: 0.9; }
.btn-secondary { padding: 9px 16px; border-radius: 999px; font-size: 0.85rem; font-weight: 700; background-color: rgba(255,255,255,0.82); border: 1px solid rgba(148, 163, 184, 0.22); color: var(--text-sub); display: flex; align-items: center; gap: 6px; transition: all 0.18s ease; box-shadow: 0 10px 25px -18px rgba(15,23,42,0.4); backdrop-filter: blur(12px); }
.btn-secondary:hover { border-color: rgba(59, 130, 246, 0.35); color: var(--text-main); transform: translateY(-2px); box-shadow: 0 16px 30px -20px rgba(37,99,235,0.45); }
.btn-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 14px; border: 1px solid rgba(148, 163, 184, 0.22); background: rgba(255,255,255,0.8); color: var(--text-sub); cursor: pointer; transition: all 0.2s; box-shadow: 0 10px 25px -18px rgba(15,23,42,0.4); backdrop-filter: blur(10px); }
.btn-icon:hover { border-color: #ef4444; color: #ef4444; background: #fef2f2; }

/* --- TABLES --- */
table { width: 100%; border-collapse: separate; border-spacing: 0; }
thead th { position: sticky; top: 0; z-index: 10; background-color: #f1f5f9; color: #475569; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; padding: 12px 14px; text-align: left; border-bottom: 2px solid var(--border-color); }
tbody tr { background: white; }
tbody tr td { border-bottom: 1px solid var(--border-color); padding: 12px 14px; }
tbody tr:hover { background-color: #eff6ff !important; cursor: pointer; }

/* --- UTILS --- */
.header-title { color: var(--text-main); letter-spacing: -0.04em; }
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #93c5fd, #818cf8); border-radius: 10px; }
.tab-row { display: flex; gap: 4px; padding: 4px; background: #f1f5f9; border-bottom: 2px solid var(--border-color); }
.tab-btn { flex: 1; padding: 10px; font-size: 0.8rem; font-weight: 700; color: var(--text-sub); border-radius: 6px; text-align: center; cursor: pointer; transition: all 0.2s; }
.tab-btn.active { background-color: #2563eb; color: white; box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2); }

/* --- SMART ANALYTICS CARDS --- */
.analytics-card {
    transition: all .2s ease;
}
.analytics-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.app-shell {
    position: relative;
}

.dashboard-header {
    background: linear-gradient(135deg, rgba(255,255,255,0.88), rgba(255,255,255,0.58));
    border: 1px solid rgba(255,255,255,0.72);
    box-shadow: 0 20px 45px -30px rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(18px);
    position: relative;
    z-index: 35;
    overflow: visible;
}

.target-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255,255,255,0.94), rgba(219,234,254,0.82));
    box-shadow: 0 24px 45px -30px rgba(37, 99, 235, 0.45);
}

.target-card::after {
    content: "";
    position: absolute;
    top: -40px;
    right: -10px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(59,130,246,0.18), transparent 65%);
    pointer-events: none;
}

.form-shell {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98));
}

.glass-panel {
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.84));
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 22px 45px -32px rgba(15, 23, 42, 0.28);
}

.stat-tile {
    border: 1px solid rgba(226,232,240,0.9);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.96));
    box-shadow: 0 14px 30px -28px rgba(15,23,42,0.55);
}

.mini-stat {
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 16px 24px -24px rgba(15,23,42,0.38);
}

.analytics-card {
    border: 1px solid rgba(255,255,255,0.7);
    box-shadow: 0 18px 30px -26px rgba(15,23,42,0.38);
}

.trip-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98));
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 20px 45px -35px rgba(15,23,42,0.45);
}

.expense-block {
    background: linear-gradient(180deg, rgba(254,242,242,0.72), rgba(255,255,255,0.9));
}

#formContainer input,
#formContainer select,
#configMonth,
#setEmi,
#setTenure,
#setSalary {
    border-radius: 14px !important;
    border-color: #d8e1ee !important;
    background: rgba(255,255,255,0.96);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

#formContainer input:focus,
#formContainer select:focus,
#configMonth:focus,
#setEmi:focus,
#setTenure:focus,
#setSalary:focus {
    border-color: rgba(59,130,246,0.55) !important;
    box-shadow: 0 0 0 4px rgba(59,130,246,0.12);
    transform: translateY(-1px);
}

@media (max-width: 640px) {
    .dashboard-header {
        border-radius: 20px;
        padding: 16px 14px;
    }

    .target-card {
        border-radius: 20px;
    }

    .card-base,
    .glass-panel,
    .trip-card,
    .stat-tile,
    .mini-stat {
        border-radius: 18px !important;
    }
}

@media (max-width: 900px) {
    .toolbar-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .toolbar-actions .btn-secondary,
    .toolbar-actions .btn-icon,
    .toolbar-actions > div {
        width: 100%;
    }

    .toolbar-actions > div {
        justify-content: center;
        min-height: 42px;
    }

    .ledger-panel {
        height: min(72vh, 760px);
    }
}

@media (max-width: 640px) {
    body {
        padding-bottom: max(18px, env(safe-area-inset-bottom));
    }

    .toolbar-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .toolbar-actions .btn-secondary {
        justify-content: center;
        min-height: 46px;
        padding: 10px 12px;
        font-size: 0.8rem;
    }

    .toolbar-actions .btn-icon {
        width: 100%;
        border-radius: 16px;
    }

    .ledger-panel {
        height: min(70vh, 680px);
    }

    .ledger-table {
        table-layout: auto;
    }

    .ledger-table thead th,
    .ledger-table tbody td {
        padding: 9px 8px;
        font-size: 0.76rem;
    }

    .ledger-table tbody td:last-child {
        min-width: 104px;
    }

    .ledger-table button {
        font-size: 0.72rem;
        padding: 7px 10px !important;
    }

    .trip-card {
        padding: 18px;
    }
}

@media (max-width: 420px) {
    .toolbar-actions {
        grid-template-columns: 1fr;
    }

    .ledger-panel {
        height: min(68vh, 620px);
    }

    .ledger-table thead th,
    .ledger-table tbody td {
        padding: 8px 6px;
        font-size: 0.72rem;
    }
}

.ledger-table {
    table-layout: fixed;
}

.ledger-table th,
.ledger-table td {
    white-space: normal;
    word-break: break-word;
    vertical-align: top;
}

.ledger-table thead th {
    font-size: 0.68rem;
    line-height: 1.2;
}

.ledger-table tbody td {
    padding: 11px 12px;
    line-height: 1.35;
}

.ledger-table button {
    white-space: nowrap;
}

.page-nav {
    align-items: center;
    position: relative;
    z-index: 5;
}

.page-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(255,255,255,0.8);
    color: #475569;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 25px -18px rgba(15,23,42,0.35);
    transition: all 0.18s ease;
}

button.page-link {
    cursor: pointer;
    appearance: none;
}

.page-link:hover {
    color: #1e3a8a;
    border-color: rgba(59,130,246,0.3);
    transform: translateY(-1px);
}

.page-link.is-active {
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 16px 30px -20px rgba(37,99,235,0.55);
}

.toolbar-menu-wrap {
    position: relative;
    z-index: 80;
}

.toolbar-actions {
    position: relative;
    z-index: 70;
}

.toolbar-menu-trigger {
    min-height: 44px;
    justify-content: center;
}

.toolbar-menu {
    min-width: 290px;
    z-index: 60 !important;
    max-height: min(78vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    top: calc(100% + 10px);
    right: 0;
}

.toolbar-menu-backdrop {
    z-index: 55;
}

.toolbar-menu-item {
    justify-content: flex-start;
    width: 100%;
    margin-top: 6px;
    min-height: 42px;
}

.toolbar-menu-item i {
    width: 16px;
    text-align: center;
}

@media (max-width: 900px) {
    .toolbar-menu-wrap {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .page-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .page-nav::-webkit-scrollbar {
        display: none;
    }

    .page-link {
        white-space: nowrap;
        min-height: 46px;
        padding: 11px 14px;
        font-size: 0.82rem;
        justify-content: center;
    }

    .toolbar-actions {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .toolbar-menu {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        top: calc(env(safe-area-inset-top) + 10px) !important;
        bottom: calc(env(safe-area-inset-bottom) + 10px) !important;
        width: auto !important;
        min-width: 0 !important;
        max-height: none;
        overflow-y: auto;
        border-radius: 18px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
        z-index: 70 !important;
        box-shadow: 0 24px 45px -24px rgba(15, 23, 42, 0.65);
    }

    .toolbar-menu-trigger {
        width: 100%;
        min-height: 48px;
        font-size: 0.9rem;
        font-weight: 800;
    }

    .toolbar-menu-item {
        min-height: 46px;
        font-size: 0.85rem;
    }

    .header-blue {
        padding: 12px 14px;
        font-size: 0.72rem;
    }

    #formContainer input,
    #formContainer select,
    #configMonth,
    #setEmi,
    #setTenure,
    #setSalary {
        min-height: 48px;
    }

    .toolbar-mobile-hide {
        display: none !important;
    }

    .ledger-panel {
        height: min(72vh, 720px);
        border-radius: 20px;
    }

    .ledger-panel .overflow-y-auto {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ledger-table {
        table-layout: auto;
        width: max-content;
        min-width: 100%;
    }

    #tableTrips,
    #tableFuels,
    #tableAdvances,
    #tableEmis {
        min-width: 620px;
    }

    #tableParties,
    #tableMonthly,
    #tableYearly,
    #tablePumps,
    #tablePartyDetail,
    #tablePumpDetail {
        min-width: 720px;
    }

    .ledger-table thead th {
        white-space: nowrap;
        font-size: 0.66rem;
    }

    .ledger-table tbody td {
        white-space: nowrap;
        font-size: 0.78rem;
    }

    .ledger-table tbody td:first-child,
    .ledger-table tbody td:nth-child(2) {
        white-space: normal;
    }
}

body.menu-open {
    overflow: hidden;
}