/* Prevent flash by applying theme on html before body loads */
        html.light {
            background: #f4f6f8;
        }

        html.dark {
            background: #0f172a;
        }
        
        /* --------------------
           COMMON CSS FROM BOTH FILES
        -------------------- */
        * { box-sizing: border-box; }

        body {
            font-family: "Segoe UI", Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* LIGHT THEME */
        body.light {
            background: #f4f6f8;
            color: #111827;
        }

        body.light .container {
            background: #ffffff;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        body.light label { 
            color: #374151; 
        }

        body.light input, body.light textarea, body.light select {
            background: #ffffff;
            border: 1px solid #d1d5db;
            color: #111827;
        }

        /* DARK THEME */
        body.dark {
            background: #0f172a;
            color: #e5e7eb;
        }

        body.dark .container {
            background: #111827;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }

        body.dark label { color: #9ca3af; }

        body.dark input, body.dark textarea, body.dark select {
            background: #020617;
            border: 1px solid #1f2933;
            color: #f9fafb;
        }

        /* *** sidenav css *** */

        /* ---------- OVERLAY SIDEBAR ---------- */
        .sidenav {
            height: 100%;
            width: 0;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 10000;
            overflow-x: hidden;
            padding-top: 60px;
            transition: 0.4s;
        }

        body.light .sidenav { background-color: #ffffff; box-shadow: 4px 0 15px rgba(0,0,0,0.1); }

        body.dark .sidenav { background-color: #020617; box-shadow: 4px 0 20px rgba(0,0,0,0.6); }

        .sidenav a {
            padding: 12px 24px;
            text-decoration: none;
            font-size: 16px;
            display: block;
            white-space: nowrap;        /* prevent wrapping */
            overflow: hidden;           /* hide overflow */
            text-overflow: ellipsis;    /* optional: show ... if too long */
            transition: background 0.2s, color 0.2s;
        }

        body.light .sidenav a { color: #374151; }
        body.dark .sidenav a { color: #e5e7eb; }

        .sidenav a:hover { background: rgba(37, 99, 235, 0.1); }

        .sidenav .closebtn {
            position: absolute;
            top: 12px;
            right: 16px;
            font-size: 28px;
            cursor: pointer;
        }

        /* ---------- BURGER ICON ---------- */
        .sidebar-open-btn {
            position: fixed;
            top: 18px;
            left: 14px;
            font-size: 26px;
            cursor: pointer;
            z-index: 10001;
        }

        /* COMMON CONTAINER & FORM STYLES */
        .container { max-width: 1200px; margin: 40px auto; padding: 28px 32px; border-radius: 8px; }

        h2 { text-align: center; margin-bottom: 25px; font-weight: 600; }

        .form-row { display: flex; gap: 20px; flex-wrap: wrap; }

        .form-group { flex: 1; margin-bottom: 18px; }

        label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; }

        input, textarea, select { width: 100%; padding: 10px 12px; border-radius: 5px; font-size: 14px; }

        input:focus, textarea:focus, select:focus { outline: none; border-color: #2563eb; }

        button[type="submit"] { width: 100%; padding: 12px; background: #2563eb; color: #fff; border: none; font-size: 15px; font-weight: 600; border-radius: 6px; cursor: pointer; }

        button[type="submit"]:hover { background: #1d4ed8; }

        /* Floating Theme Toggle */
        .floating-toggle {
            position: fixed; top: 60px; right: 10px; z-index: 9999;
            padding: 10px 14px; border-radius: 50px; font-size: 13px; font-weight: 500;
            background: transparent; color: inherit; border: 1px solid #9ca3af;
            cursor: pointer; box-shadow: 0 6px 15px rgba(0,0,0,0.2);
            transition: background 0.3s, transform 0.2s;
        }

        .floating-toggle:hover { transform: translateY(-2px); }

        body.light .floating-toggle { background: #ffffff; }

        body.dark .floating-toggle { background: #020617; }


        /* Validation */
        input.error, textarea.error, select.error { border-color: #dc2626 !important; }

        .error-message { font-size: 12px; margin-top: 4px; color: #dc2626; }

        body.dark .error-message { color: #f87171; }


        /* Profit / Loss */
        .profit { color: #16a34a; font-weight: 600; }

        .loss { color: #dc2626; font-weight: 600; }


        /* Table Styling */
        .project-table { border-collapse: collapse; border-radius: 6px; overflow: hidden; border: 1px solid; width: 100%; }

        body.light .project-table { border-color: #d1d5db; }

        body.light .project-table th, body.light .project-table td { border: 1px solid #e5e7eb; }

        body.dark .project-table { border-color: #374151; }

        body.dark .project-table th, body.dark .project-table td { border: 1px solid #4b5563; }

        .project-table th:first-child { border-top-left-radius: 6px; }

        .project-table th:last-child { border-top-right-radius: 6px; }

        .project-table tr:last-child td:first-child { border-bottom-left-radius: 6px; }

        .project-table tr:last-child td:last-child { border-bottom-right-radius: 6px; }

        .project-table th, .project-table td { padding: 14px 16px; font-size: 15px; line-height: 1.5; }

        @media (max-width: 600px) { 
            .container { margin: 20px 12px; padding: 22px; } 
            .project-table th, .project-table td { padding: 10px 12px; font-size: 14px; } 
        }


        /* styling for welcome page login and subcription button  */

        /* Primary action buttons (Login / Subscription) */
        .action-btn {
            padding: 12px 28px;
            background: #2563eb;
            color: #ffffff;
            border: none;
            font-size: 15px;
            font-weight: 600;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.2s, transform 0.2s;
        }

        .action-btn:hover {
            background: #1d4ed8;
            transform: translateY(-1px);
        }

        /* Secondary button (Subscription) */
        .action-btn.secondary {
            background: transparent;
            color: #2563eb;
            border: 2px solid #2563eb;
        }

        .action-btn.secondary:hover {
            background: #2563eb;
            color: #ffffff;
        }

        /* Dark mode tweaks */
        body.dark .action-btn.secondary {
            color: #93c5fd;
            border-color: #93c5fd;
        }

        body.dark .action-btn.secondary:hover {
            background: #2563eb;
            color: #ffffff;
        }

        /* --------------------------
           Destructive (Delete) button
        -------------------------- */
        .action-btn.danger {
            background: transparent;
            border: 2px solid #dc2626;
            color: #dc2626;
            transition: background 0.2s, color 0.2s, transform 0.15s;
        }

        .action-btn.danger:hover {
            background: #dc2626;
            color: #ffffff;
            transform: translateY(-1px);
        }

        /* Dark mode tweaks */
        body.dark .action-btn.danger {
            border-color: #f87171;
            color: #f87171;
        }

        body.dark .action-btn.danger:hover {
            background: #b91c1c;
            color: #ffffff;
        }


        button[disabled] {
            opacity: 0.55;
            cursor: not-allowed;
        }

        /* Flash messages */
        .flash-message {
            padding: 10px 14px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 12px;
            text-align: center;
        }

        .flash-message.success {
            background: rgba(22, 163, 74, 0.1);
            color: #16a34a;
            border: 1px solid #16a34a;
        }

        .flash-message.error {
            background: rgba(220, 38, 38, 0.1);
            color: #dc2626;
            border: 1px solid #dc2626;
        }

        body.dark .flash-message.success {
            background: rgba(34, 197, 94, 0.15);
            color: #22c55e;
            border-color: #22c55e;
        }

        body.dark .flash-message.error {
            background: rgba(248, 113, 113, 0.15);
            color: #f87171;
            border-color: #f87171;
        }



        /* *** login page styling *** */
        /* Forgot password link */
        .forgot-link {
            display: inline-block;
            margin-top: 6px;
            font-size: 13px;
            font-weight: 500;
            color: #2563eb;
            text-decoration: none;
            transition: color 0.2s, transform 0.2s;
        }

        .forgot-link:hover {
            color: #1d4ed8;
            transform: translateY(-1px);
            text-decoration: underline;
        }

        /* Dark mode */
        body.dark .forgot-link {
            color: #93c5fd;
        }

        body.dark .forgot-link:hover {
            color: #bfdbfe;
        }

        /* ***entries page style*** */
        /* --------------------------
           Tabs wrapper & scroll
        -------------------------- */
        .table-wrapper {
            overflow-x: auto;    /* enable horizontal scroll */
            width: 100%;         /* full width */
            text-align: center;
        }

        .tabs-wrapper {
            display: flex;
            flex-direction: column;
            gap: 0;
            max-height: 500px; /* scroll area height */
            overflow-y: auto;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            min-width: max-content; 
        }

        /* Scrollbar styling */
        .tabs-wrapper::-webkit-scrollbar {
            width: 6px;
        }
        .tabs-wrapper::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 3px;
        }
        body.dark .tabs-wrapper::-webkit-scrollbar-thumb {
            background: #555;
        }

        /* Header tab */
        .header-tab {
            background: #e5e7eb;
            font-weight: 600;
            cursor: default; /* unclickable */
            position: sticky;
            top: 0;
            z-index: 10;
        }
        body.dark .header-tab {
            background: #1f2937;
        }

        /* Data tabs */
        .tab-entry:not(.header-tab) {
            border-top: 1px solid #d1d5db;
            border-radius: 0;
            padding: 12px;
            background: #ffffff;
            cursor: pointer;
            transition: background 0.2s, box-shadow 0.2s;
        }
        .tab-entry:hover {
            background: #f0f4ff;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        }
        body.dark .tab-entry:not(.header-tab) {
            background: #111827;
            border-color: #374151;
        }
        body.dark .tab-entry:hover {
            background: #1f2937;
        }

        /* Horizontal row inside tab */
        .tab-row {
            display: flex;
            gap: 12px;
            flex-wrap: nowrap;
            padding-top: 20px; 
            padding-bottom: 20px;
            align-items: center;
            min-width: max-content; /* ensures row doesn't shrink */
        }
        .tab-row > div {
            flex: 1 0 auto;
            min-width: 100px;
            font-size: 14px;
            text-align: center;
        }

        /* Filter dropdown/input */
        .entry-filter {
            width: 100%;
            padding: 10px 12px;
            border-radius: 5px;
            border: 1px solid #d1d5db;
            font-size: 14px;
        }
        body.dark .entry-filter {
            background: #020617;
            border: 1px solid #1f2933;
            color: #f9fafb;
        }

        /* --------------------------
           Total row styling
        -------------------------- */
        .total-row {
            font-weight: 600;
        }

        body.light .total-row {
            background: #f3f4f6;          /* light gray */
            color: #111827;               /* dark text */
        }

        body.dark .total-row {
            background: #1f2937;          /* dark slate */
            color: #f9fafb;               /* light text */
        }

        body.dark .total-row td {
            color: #f9fafb;               /* ensure all cells are visible */
        }

        .project-table tfoot tr {
            background-color: var(--card-bg, #f5f5f5);
            color: var(--text-color, #111);
        }

        body.dark .project-table tfoot tr {
            background-color: #1f2933;
            color: #e5e7eb;
        }

        /* --------------------------
           Action column styling for entries pg
        -------------------------- */
        div.action-cell, td.action-cell {
            text-align: center;
            width: 80px; /* fixed width for action column */
        }

        div.action-cell a, td.action-cell a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            border-radius: 8px;
            border: 1px solid transparent;
            text-decoration: none;
            font-size: 16px;
            transition: background 0.2s, border-color 0.2s;
        }

        body.light div.action-cell a:hover, body.light td.action-cell a:hover {
            background: #eef2ff;
            border-color: #c7d2fe;
        }

        body.dark div.action-cell a:hover, body.dark td.action-cell a:hover {
            background: #1f2937;
            border-color: #374151;
        }

        a {
            text-decoration: none;   /* no underline */
            color: inherit;          /* no default blue/purple */
            cursor: pointer;         /* pointer cursor */
        }

        /* Optional: keep hover clean */
        a:hover,
        a:focus,
        a:active {
            text-decoration: none;
            color: inherit;
        }


        /*pagination css*/
        .pagination-wrapper {
            margin-top: 25px;
            text-align: center;
            font-size: 14px;
            user-select: none;
        }

        .page-link {
            margin: 0 6px;
            text-decoration: none;
            color: var(--primary-color);   /* auto matches your theme */
            font-weight: 500;
        }

        .page-link:hover {
            text-decoration: underline;
        }

        .current-page {
            margin: 0 6px;
            font-weight: 700;
            color: var(--primary-color);
        }

        .page-disabled {
            margin: 0 6px;
            color: #aaa;
        }

        .page-dots {
            margin: 0 4px;
            color: #999;
        }


        /*  filter button styling */
        .filter-bar {
            overflow: hidden;
            margin-bottom: 30px;
        }

        /* Prevent stretched button */
        .filter-actions{
            float: right;
            padding-bottom: 5px;
        }
        .filter-actions .action-btn {
            width: auto;
            padding: 8px 16px;
            white-space: nowrap;
        }

        /* Reset button subtle look */
        .filter-actions .reset-btn {
            background: transparent;
            border: 1px solid var(--border-color, #ccc);
            color: inherit;
        }

        .filter-actions .reset-btn:hover {
            background: rgba(0,0,0,0.05);
        }

        /* export modal for entries.html/singleproject/singleledger */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.45);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }

        /* Modal Box */
        .modal-box {
            background: #fff;
            padding: 22px;
            border-radius: 10px;
            width: 360px;
            box-shadow: 0 5px 18px rgba(0,0,0,0.15);
        }

        /* Radio Group */
        .radio-group {
            display: flex;
            gap: 18px;
            margin-top: 6px;
        }

        .modal-actions {
            margin-top: 18px;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        /* =================================
           EXPORT MODAL - THEME COMPATIBLE
        ================================= */

        /* Overlay */
        .export-modal {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.55);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }

        /* Modal Box */
        .export-box {
            width: 420px;
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid;
        }

        /* Light Mode */
        body.light .export-box {
            background: #ffffff;
            border-color: #e5e7eb;
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        }

        /* Dark Mode */
        body.dark .export-box {
            background: #111827;
            border-color: #374151;
            box-shadow: 0 10px 25px rgba(0,0,0,0.6);
        }

        /* Header */
        .export-header {
            padding: 14px 18px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid;
        }

        body.light .export-header {
            border-color: #e5e7eb;
        }

        body.dark .export-header {
            border-color: #374151;
        }

        .export-header h2 {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
        }

        .export-close {
            cursor: pointer;
            font-size: 18px;
            transition: color 0.2s;
        }

        .export-close:hover {
            color: #2563eb;
        }

        /* Body */
        .export-body {
            padding: 16px 18px;
        }

        /* Section Title */
        .export-section h4 {
            margin: 0 0 10px;
            font-size: 13px;
            font-weight: 600;
        }

        body.light .export-section h4 {
            color: #374151;
        }

        body.dark .export-section h4 {
            color: #9ca3af;
        }

        /* Divider (your <hr>) */
        .export-section hr {
            border: none;
            border-top: 1px solid;
            margin: 12px 0;
        }

        body.light .export-section hr {
            border-color: #e5e7eb;
        }

        body.dark .export-section hr {
            border-color: #374151;
        }

        /* Radio labels */
        .export-section label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            margin-bottom: 8px;
            cursor: pointer;
        }

        /* Footer */
        .export-footer {
            padding: 12px 16px;
            border-top: 1px solid;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        body.light .export-footer {
            border-color: #e5e7eb;
        }

        body.dark .export-footer {
            border-color: #374151;
        }

        /* Make reset-btn dark-mode friendly */
        body.dark .reset-btn {
            border-color: #374151;
            color: #e5e7eb;
        }

        body.dark .reset-btn:hover {
            background: #1f2937;
        }

        /* Animation */
        @keyframes modalFade {
            from { transform: scale(.96); opacity: .6; }
            to { transform: scale(1); opacity: 1; }
        }

        .export-section input[type="radio"] {
            margin: 0;          /* remove default uneven spacing */
            transform: translateY(1px);  /* tiny optical alignment fix */
            width: 30px;
        }

        .text-danger {
            color: red;
        }


        /* report page styling */
        /* Header */
        .page-header {
            margin-bottom: 20px;
        }

        .subtitle {
            color: #888;
            font-size: 14px;
        }

        /* Tabs */
        .tabs-container {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .tab-btn {
            padding: 10px 16px;
            border-radius: 6px;
            border: 1px solid #d1d5db;
            cursor: pointer;
            font-size: 14px;
            background: transparent;
            transition: all 0.2s;
        }

        body.dark .tab-btn {
            border-color: #374151;
        }

        /* Active tab */
        .tab-btn.active {
            background: #2563eb;
            color: #ffffff;
            border-color: #2563eb;
        }

        /* FORCE active style in dark mode */
        body.dark .tab-btn.active {
            background: #2563eb !important;
            color: #ffffff !important;
            border-color: #2563eb !important;
        }

        /* Hover */
        .tab-btn:hover {
            background: rgba(37, 99, 235, 0.1)
        }

        /* Dark hover */
        body.dark .tab-btn:hover {
            background: rgba(37, 99, 235, 0.2)
        }

        body.dark .tab-btn {
            background: #020617;
            border-color: #374151;
            color: #e5e7eb;
        }

        .tab-btn.active {
            background: #2563eb;
            color: white;
            border-color: #2563eb;
        }

        /* Tab content */
        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        /* Card */
        .card {
            /*border: 1px solid #e5e7eb;*/
            /*border-radius: 10px;*/
            background: #ffffff;
        }

        body.dark .card {
            background: #111827;   /* matches your container/profile style */
            border-color: #374151;
        }

        .card-body {
            min-height: 120px;
        }

        .card-body hr{
            height: 1px;
            background-color: #e5e7eb;
        }

        body.dark .card-container{
            border:1px solid #374151; 
            margin-bottom: 30px; 
            padding: 20px 5px; 
            border-radius: 10px;
        }

        body.light .card-container{
            border:1px solid #d1d5db; 
            margin-bottom: 30px; 
            padding: 20px 5px; 
            border-radius: 10px;
        }
        
        /*ledger readonly field style*/
        body.light .readonly-field {
            background: #ffffff;
            border: 1px solid #d1d5db;
            color: #111827;
        }

        body.dark .readonly-field {
            background: #020617;
            border: 1px solid #1f2933;
            color: #f9fafb;
        }

        .readonly-field {
            width: 100%;
            padding: 10px 12px;
            border-radius: 5px;
            font-size: 14px;
            min-height: 42px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }       

        .readonly-projects-field {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            min-height: 42px;
            padding: 10px 12px;
            border-radius: 5px;
        }

        body.light .readonly-projects-field {
            background: #ffffff;
            border: 1px solid #d1d5db;
            color: #111827;
        }

        body.dark .readonly-projects-field {
            background: #020617;
            border: 1px solid #1f2933;
            color: #f9fafb;
        } 

        .project-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .project-name {
            white-space: nowrap;
        }

        .remove-project-btn {
            border: none;
            background: none;
            color: #dc2626;
            cursor: pointer;
            font-size: 16px;
            line-height: 1;
            padding: 0;
        }

        body.dark .remove-project-btn {
            color: #f87171;
        }

        .remove-project-btn:hover {
            opacity: 0.8;
        }

        .flash-message.info {
            background: rgba(37, 99, 235, 0.1);   /* subtle blue */
            color: #2563eb;
            border: 1px solid #2563eb;
        }

        body.dark .flash-message.info {
            background: rgba(147, 197, 253, 0.15);  /* soft blue for dark */
            color: #93c5fd;
            border-color: #93c5fd;
        }

        /* 🔹 Info Box (Profile Dashboard) */
        /* 🔹 Database Info Box */
        .db-info-box {
            border: 1px solid #ddd;
            background: var(--card-bg);
            padding: 16px 18px;
            border-radius: 10px;
            width: 100%;          /* 🔥 changed from 320px */
            max-width: 320px;     /* 🔥 keeps same look */
            margin-top: 20px;
            box-shadow: var(--card-shadow);
        }

        /* Title */
        .db-info-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 14px;
            color: var(--text-color);
        }

        /* Rows */
        .db-info-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 0;
            font-size: 13px;
            color: var(--text-muted);
            border-bottom: 1px solid #ddd;
            gap: 8px;              /* 🔥 small improvement */
            flex-wrap: wrap;       /* 🔥 allows wrapping */
        }

        /* Remove border from last row */
        .db-info-row:last-child {
            border-bottom: none;
        }

        /* Values */
        .db-info-row span:last-child {
            font-weight: 600;
            color: var(--text-color);
            text-align: right;     /* 🔥 keeps alignment clean */
            word-break: break-word;
        }        

        @media (max-width: 480px) {
            .db-info-row {
                flex-direction: column;
                align-items: flex-start;
            }

            .db-info-row span:last-child {
                text-align: left;
                margin-top: 2px;
            }
        }

        /* *** loader style *** */
        /* 🔹 FULL PAGE LOADER */
        .page-loader {
            position: fixed;
            inset: 0;
            z-index: 99999;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.4s ease, visibility 0.4s ease;
        }

        /* Theme support */
        /* loader should follow html theme immediately */

        html.light .page-loader {
            background: #f4f6f8;
        }

        html.dark .page-loader {
            background: #0f172a;
        }

        /* Loader box */
        .loader-box {
            text-align: center;
        }

        /* Spinner */
        .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid rgba(37, 99, 235, 0.2);
            border-top-color: #2563eb;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin: 0 auto 10px;
        }

        /* Text */
        .loader-text {
            font-size: 14px;
            color: var(--text-muted);
        }

        /* Animation */
        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Hide class */
        .page-loader.hidden {
            opacity: 0;
            visibility: hidden;
        }

        /* 🍏 Apple-style theme fade */
        .theme-fade {
            position: fixed;
            inset: 0;
            opacity: 0;
            pointer-events: none;
            z-index: 99998;
            transition: opacity 0.22s ease-in-out;
        }

        /* match theme */
        html.light .theme-fade {
            background: #ffffff;
        }

        html.dark .theme-fade {
            background: #0f172a;
        }

        /* active */
        .theme-fade.active {
            opacity: 0.18;
        }