:root {
            --background-light: #f4f7f9; --background-dark: #0d1117;
            --card-light: #ffffff; --card-dark: #161b22;
            --border-light: #e5e7eb; --border-dark: #30363d;
            --text-primary-light: #111827; --text-primary-dark: #c9d1d9;
            --text-secondary-light: #6b7280; --text-secondary-dark: #8b949e;
            --primary-500: #4f46e5; --primary-600: #4338ca;
            --primary-100-light: #e0e7ff; --primary-100-dark: rgba(79, 70, 229, 0.2);
            --success: #10b981; --error: #ef4444;
        }
        html.dark { color-scheme: dark; }
        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--background-light);
            color: var(--text-primary-light);
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        html.dark body { background-color: var(--background-dark); color: var(--text-primary-dark); }
        .glass-header {
            background-color: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border-light);
        }
        html.dark .glass-header { background-color: rgba(22, 27, 34, 0.7); border-bottom: 1px solid var(--border-dark); }
        .card {
            background-color: var(--card-light); border-radius: 0.75rem;
            border: 1px solid var(--border-light);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }
        html.dark .card { background-color: var(--card-dark); border-color: var(--border-dark); }
        .card:hover { transform: translateY(-3px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.07); }
        .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 600; padding: 0.65rem 1.25rem; border-radius: 0.5rem; transition: all 0.2s ease; border: 1px solid transparent; cursor: pointer; }
        .btn-primary { background-color: var(--primary-500); color: white; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 1px 0 hsla(0,0%,100%,.15); }
        .btn-primary:hover { background-color: var(--primary-600); transform: translateY(-1px); }
        .btn-secondary { background-color: var(--card-light); color: var(--text-primary-light); border-color: var(--border-light); }
        html.dark .btn-secondary { background-color: var(--card-dark); color: var(--text-primary-dark); border-color: var(--border-dark); }
        .btn-secondary:hover { background-color: var(--background-light); }
        html.dark .btn-secondary:hover { background-color: #21262d; }
        .input-field { width: 100%; padding: 0.75rem 1rem; background-color: var(--background-light); border: 1px solid var(--border-light); border-radius: 0.5rem; transition: border-color 0.2s, box-shadow 0.2s; color: var(--text-primary-light); }
        html.dark .input-field { background-color: var(--card-dark); border-color: var(--border-dark); color: var(--text-primary-dark); }
        .input-field:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px var(--primary-100-dark); }
        .tab { cursor: pointer; padding: 0.75rem 1rem; border-bottom: 2px solid transparent; transition: all 0.3s ease; color: var(--text-secondary-light); font-weight: 500; display: flex; align-items: center; gap: 0.5rem; }
        html.dark .tab { color: var(--text-secondary-dark); }
        .tab.active { color: var(--primary-500); border-bottom-color: var(--primary-500); font-weight: 600; }
        .fab-container { position: fixed; bottom: 2rem; right: 2rem; z-index: 40; }
        .fab { width: 3.5rem; height: 3.5rem; border-radius: 50%; background-color: var(--primary-500); color: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.2); cursor: pointer; transition: all 0.3s ease; }
        .fab:hover { background-color: var(--primary-600); transform: scale(1.05); }
        .fab-options { position: absolute; bottom: 4.5rem; right: 0; display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-end; visibility: hidden; opacity: 0; transform: translateY(10px); transition: all 0.3s ease; }
        .fab-container.open .fab-options { visibility: visible; opacity: 1; transform: translateY(0); }
        .fab-option { display: flex; align-items: center; gap: 0.75rem; background-color: var(--card-light); color: var(--text-primary-light); padding: 0.5rem 1rem; border-radius: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.15); cursor: pointer; white-space: nowrap; }
        html.dark .fab-option { background-color: var(--card-dark); color: var(--text-primary-dark); }
        .modal { position: fixed; inset: 0; background-color: rgba(0,0,0,0.3); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 50; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.3s ease; }
        .modal-content { position: relative; margin: auto; padding: 1.5rem; width: 100%; max-width: 32rem; border-radius: 0.75rem; background-color: var(--card-light); animation: scaleIn 0.3s ease; }
        html.dark .modal-content { background-color: var(--card-dark); }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes scaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        .spinner { border: 4px solid rgba(128, 128, 128, 0.2); width: 24px; height: 24px; border-radius: 50%; border-left-color: var(--primary-500); animation: spin 1s ease infinite; }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        .sidebar { transition: width 0.3s ease; }
        .sidebar-item { transition: background-color 0.2s ease, color 0.2s ease; }
        .sidebar-item.active { background-color: var(--primary-100-light); color: var(--primary-500); font-weight: 600; }
        html.dark .sidebar-item.active { background-color: var(--primary-100-dark); }
        .sub-tab { padding: 0.5rem 1rem; border: 1px solid var(--border-light); color: var(--text-secondary-light); background-color: var(--card-light); cursor: pointer; transition: all 0.2s; }
        html.dark .sub-tab { border-color: var(--border-dark); color: var(--text-secondary-dark); background-color: var(--card-dark); }
        .sub-tab:first-child { border-radius: 0.5rem 0 0 0.5rem; }
        .sub-tab:last-child { border-radius: 0 0.5rem 0.5rem 0; }
        .sub-tab.active { background-color: var(--primary-100-light); color: var(--primary-600); border-color: var(--primary-500); font-weight: 600; }
        html.dark .sub-tab.active { background-color: var(--primary-100-dark); }
        .transaction-type-btn { background-color: var(--background-light); border: 1px solid var(--border-light); color: var(--text-primary-light); padding: 0.75rem; border-radius: 0.5rem; font-weight: 500; text-align: center; transition: background-color 0.2s; }
        html.dark .transaction-type-btn { background-color: var(--background-dark); border-color: var(--border-dark); color: var(--text-primary-dark); }
        .transaction-type-btn:hover { background-color: var(--border-light); }
        html.dark .transaction-type-btn:hover { background-color: var(--border-dark); }
        .task-card { border-left-width: 4px; }
        .task-card-todo { border-left-color: #9ca3af; } /* gray-400 */
        .task-card-inprogress { border-left-color: #3b82f6; } /* blue-500 */
        .task-card-completed { border-left-color: #10b981; } /* green-500 */

/* --- Sidebar UX Upgrades --- */
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; border-radius:0.5rem; border:1px solid var(--border-light); background: var(--card-light); }
html.dark .icon-btn { background: var(--card-dark); border-color: var(--border-dark); }
.icon-btn:hover { filter: brightness(0.98); }

/* Collapsed (icon-only) rail */
body.sidebar-collapsed #sidebar { width: 4.5rem; } /* 72px */
body.sidebar-collapsed #sidebar .sidebar-item { justify-content: center; }
body.sidebar-collapsed #sidebar .sidebar-item .sidebar-label { display: none; }
body.sidebar-collapsed #sidebar .p-4.border-b h1 { display: none; }
body.sidebar-collapsed #sidebar .p-4.border-t #user-email,
body.sidebar-collapsed #sidebar .p-4.border-t #user-role { display: none; }
body.sidebar-collapsed #sidebar .p-4.border-t .flex.items-center.gap-3 img { margin: 0 auto; }
body.sidebar-collapsed #sidebar .p-4.border-t .flex.items-center.justify-between { justify-content: center; }
body.sidebar-collapsed #sidebar #theme-toggle-btn { margin-left: 0; }

/* Give content more space when collapsed on large screens */
@media (min-width: 1024px) {
  body.sidebar-collapsed #app-content { padding-left: 0.5rem; }
}

/* Mobile & tablet: off-canvas sidebar with backdrop */
@media (max-width: 1024px) {
  #sidebar { position: fixed; left: 0; top: 0; height: 100vh; transform: translateX(-100%); transition: transform 0.3s ease, width 0.3s ease; z-index: 50; }
  body.sidebar-open #sidebar { transform: translateX(0); }
  /* When sidebar is open on mobile, prevent body scroll (iOS-safe) */
  body.sidebar-open { overflow: hidden; touch-action: none; }
}

/* Ensure main content uses full width on mobile by default */
@media (max-width: 1024px) {
  #main-app > .flex { /* the layout wrapper with aside + content */ }
}


/* --- Mobile Drawer Sidebar --- */
@media (max-width: 1024px) {
  #sidebar {
    width: 80%;
    max-width: 20rem; /* 320px */
    background: var(--card-light);
    color: var(--text-primary-light);
  }
  html.dark #sidebar {
    background: var(--card-dark);
    color: var(--text-primary-dark);
  }
  #sidebar .sidebar-item {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border-radius: 0.5rem;
  }
  #sidebar .sidebar-item svg {
    flex-shrink: 0;
  }
  #sidebar-profile {
    background: inherit;
  }
}


}

@media (max-width: 1024px) {
  body.drawer-ready #sidebar-open-btn { display: block; }
  body.sidebar-open #sidebar-open-btn { display: none; }
}


/* --- Smooth slide animation for mobile drawer --- */
@media (max-width: 1024px) {
  #sidebar {
    transition: transform 0.3s ease-in-out;
  }
  body.sidebar-open #sidebar {
    transform: translateX(0);
  }
  body:not(.sidebar-open) #sidebar {
    transform: translateX(-100%);
  }
  #sidebar-backdrop {
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
  }
  body.sidebar-open #sidebar-backdrop {
    opacity: 1;
  }
}


/* --- Burger button always visible on mobile (except when drawer is open) --- */
#sidebar-open-btn { display: none; }

@media (max-width: 1024px) {
  #sidebar-open-btn { display: block; }
  body.sidebar-open #sidebar-open-btn { display: none; }
}


/* --- Ensure profile section always shows at bottom on all devices --- */
#sidebar {
  display: flex;
  flex-direction: column;
}
#sidebar > .p-4.border-t {
  margin-top: auto;
}


/* Sidebar layout fix */
#sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#sidebar .nav-links {
  flex: 1;
  overflow-y: auto;
}

#sidebar .sidebar-profile {
  border-top: 1px solid var(--border-color, #e5e7eb);
  padding: 1rem;
  background: inherit;
}

@media (max-width: 1023px) {
  #sidebar-open-btn {
    display: none;
  }
}

@media (max-width: 1023px) {
  #mobile-header {
    display: none;
  }
}