html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* Dark theme variables (forced, darker) */
:root {
    --bg: #0c0c0c; /* page background: near-black */
    --panel: #060708; /* panels/cards: slightly lighter than bg */
    --muted: #7f8b95; /* muted text */
    --text: #eeeeee; /* primary text (soft white) */
    --primary: #cccccc; /* primary/link color */
    --border: rgba(255,255,255,0.035); /* very subtle borders */
    --input-bg: #212529; /* New */
    --input-border: #495057; /* New */
    --panel-lighter: rgba(255,255,255,0.01); /* New */
    --panel-light: rgba(255,255,255,0.02); /* New */
}

/* Base dark background and text */
body.dark-theme {
  background-color: var(--bg);
  color: var(--text);
}

/* Ensure links and nav items read on dark background */
body.dark-theme a,
body.dark-theme .navbar-brand,
body.dark-theme .nav-link {
  color: var(--primary);
}
a:hover, .nav-link:hover {
    color: var(--primary) !important;
    text-decoration: underline;
}

/* Force common Bootstrap light classes to dark look where used */
.bg-white, .bg-light {
  background-color: var(--panel) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* Cards, containers, other panels */
.container, .card, .dropdown-menu {
  background-color: transparent; /* Only needed if overriding */
}

/* Forms: darker, less translucent */
.form-control, .form-select, .form-check-input {
    background-color: var(--panel-light);
    color: var(--text);
    border: 1px solid rgba(255,255,255,0.04);
}

/* Focus ring adapted for darker theme (subtle) */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.08rem rgba(255,255,255,0.03), 0 0 0 0.2rem rgba(47,143,230,0.14);
  outline: none;
}

/* Tables */
.table {
  color: var(--text);
  border-color: var(--border);
}
.table thead th {
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}

.table tbody td {
  color: var(--text);
  border-top: 1px solid rgba(255,255,255,0.02);
  vertical-align: middle;
}

/* Unified table styling for finance-related tables */
.finance-table,
.unified-table {
    background-color: var(--panel-lighter);
    color: var(--text);
    border: 1px solid rgba(255,255,255,0.03);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0;
}

.finance-table thead th,
.unified-table thead th {
    background-color: var(--panel-light);
    color: var(--text);
    font-weight: 600;
    border-bottom: 2px solid rgba(255,255,255,0.06);
    white-space: nowrap;
}

.finance-table tbody tr,
.unified-table tbody tr {
    background-color: var(--panel-lighter);
    transition: background-color 0.15s ease;
}

.finance-table tbody tr:hover,
.unified-table tbody tr:hover {
    background-color: var(--panel-light);
}

.finance-table tbody tr td,
.unified-table tbody tr td {
    background-color: transparent;
    color: var(--text);
    border-top: 1px solid rgba(255,255,255,0.02);
    vertical-align: middle;
}

/* Column width constraints for consistent layouts */
.table th:first-child,
.table td:first-child {
    min-width: 150px; /* Primary column (names) */
}

.table th.text-end,
.table td.text-end {
    min-width: 80px;
    max-width: 120px;
    text-align: right !important;
}

.table th:last-child,
.table td:last-child {
    min-width: 100px; /* Action column */
    text-align: right;
}

/* Specific column sizing for different table types */
/* Finance/Group tables */
.finance-table th:nth-child(1),
.finance-table td:nth-child(1) {
    width: 40%; /* Name/Category column */
}

.finance-table th:nth-child(2),
.finance-table td:nth-child(2),
.finance-table th:nth-child(3),
.finance-table td:nth-child(3) {
    width: 15%; /* Numeric columns */
}

.finance-table th:nth-child(4),
.finance-table td:nth-child(4) {
    width: 15%; /* Currency/Value column */
}

.finance-table th:nth-child(5),
.finance-table td:nth-child(5),
.finance-table th:last-child,
.finance-table td:last-child {
    width: 15%; /* Share/Actions column */
}

/* Project tables (5-column layout) */
.project-table th:nth-child(1),
.project-table td:nth-child(1) {
    width: 30%; /* Project name */
}

.project-table th:nth-child(2),
.project-table td:nth-child(2),
.project-table th:nth-child(3),
.project-table td:nth-child(3),
.project-table th:nth-child(4),
.project-table td:nth-child(4),
.project-table th:nth-child(5),
.project-table td:nth-child(5) {
    width: 14%; /* Numeric columns */
    text-align: right;
}

/* Task tables (3-4 column layout) */
.task-table th:nth-child(1),
.task-table td:nth-child(1) {
    width: 50%; /* Task name */
}

.task-table th:nth-child(2),
.task-table td:nth-child(2),
.task-table th:nth-child(3),
.task-table td:nth-child(3) {
    width: 15%; /* Hours/Cost */
    text-align: right;
}

.task-table th:last-child,
.task-table td:last-child {
    width: 20%; /* Actions */
    text-align: right;
}

/* Admin/User tables (3-column layout) */
.admin-table th:nth-child(1),
.admin-table td:nth-child(1) {
    width: 40%; /* Username */
}

.admin-table th:nth-child(2),
.admin-table td:nth-child(2) {
    width: 30%; /* Role */
}

.admin-table th:nth-child(3),
.admin-table td:nth-child(3) {
    width: 30%; /* Actions */
    text-align: right;
}

/* Responsive table wrapper */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Small table variant */
.table-sm thead th,
.table-sm tbody td {
    padding: 0.4rem;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    /* Stack action buttons on medium screens */
    .table td:last-child .btn,
    .table td:last-child form {
        margin-bottom: 0.25rem;
    }
    
    .table td:last-child {
        white-space: normal;
    }
}

@media (max-width: 767.98px) {
    /* Reduce padding on small screens */
    .table thead th,
    .table tbody td {
        /*padding: 0.5rem 0.25rem;*/
        font-size: 0.875rem;
    }
    
    /* Allow text wrapping on mobile */
    .table th,
    .table td {
        white-space: normal;
    }
    
    /* Adjust column widths for mobile */
    .table th:first-child,
    .table td:first-child {
        min-width: 100px;
    }
    
    .table th.text-end,
    .table td.text-end {
        min-width: 60px;
    }
}

@media (max-width: 575.98px) {
    /* Very small screens - make tables scrollable */
    .table-responsive {
        font-size: 0.8rem;
    }
    
    .table thead th,
    .table tbody td {
        padding: 0.4rem 0.2rem;
    }
    
    /* Hide share column on very small screens */
    .finance-table th:nth-child(5),
    .finance-table td:nth-child(5) {
        display: none;
    }
}

/* Button group alignment in tables */
.table td .btn-group {
    display: inline-flex;
    gap: 0.25rem;
}

.table td form {
    display: inline;
    margin: 0;
}

.table td .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Ensure text alignment is consistent */
.text-end {
    text-align: right !important;
}

.text-start {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

#logo {
    background: url(data:image/webp;base64,UklGRgQFAABXRUJQVlA4WAoAAAAQAAAAJwAAJwAAQUxQSNIBAAANkARJtmlbtfa3bdu2bdu2bdu2NbVt27Zt4+79cXSfxhExAYQI80TbYwJC3N7F9Kfuj/0Wpk1XkOpjtvf76ZdQJUdgGbl1+xHrv3mXYUxE7FOMTtHjpPEmdpeyOJZsUx8PeeBF1ZG4jlhz6LxFn0ESFcxdddAam+naHYQdX2Fm1IJ5ADrNuWGlMIgrSDwQ64T9e/+0EASDuHJaJvEyGxCjRTyTURtP/vcuBiBi8D720B4+IG/dXgKIH8hXZTDJ++T8jf/7HD2SuiQBMdTsISJa+c9H5vBiMOK3UBiNiPbf/1dDpVNaBYTH42cqMeIn8/pUGvZc6yzaymgjhHKjL509eu4DQO/W6ZVWRqNVWMHt29kzsf/VfkZkfCo0CudG8K0aj+NjW0dKKJz+eHjpftPYmsNDcGnmZSmC7ZcHW/bdU7CnVdnhL3D9s3f/hMDrk8fP3A6N5ZNJR/DywuouJ05vfMr/Oatli/LoyOo33z1heT8gQdX43w43zGcgSYHCfbd6A8Sdkcf3O2IRw/8qbocR2iM1ToNgr6J88ip8CoPjX1vx+vv99Fa/P0UVc3O+8kz3LVUGpXnT/nDECG/x5+vmzwvF+nn1Kjz/in/NxSOvCEYBVlA4IAwDAABwEACdASooACgAPjEUiEKiISEVWq9UIAMEtgBYj3jQ7+MHM+bN97sn3qAepHxHdwB/Cf8l+s3YA3gD0AP2A9Nf9cvga/a/9y/aM//9OQGArY9AC1WTPvGb9S+wL0h/RNFRkthyXdYCoO7Ad7WXox9uvTbeztPFp61KQK22pXfvr5r5lJPgEFear5tPAADo7yNKZU6ufPsgTT6/cZY5L/NacYOvybDNUUFRqPyMHRc3RwPlu2oL/+iCXl9elHK2CGy/6hOZQMrgAO9S9PtUpy1aCVh2G/j96+TFatncYOhX19YDeD+IPvJbEx2nYRJ6SEaNMsaasu0SLAlRhhj/GET2IIEP4D//4Yj+6pKxNZKA46Yq5pgNjm60BzQ/W+v+26Erwk/Fv0nFl2Jncza69dgezwz5lWUv4IP8XgBhMR8iyRw36FAIXXJZAB5jk9fIvwXTiWdiR8jdNblwDl+y/L/wnM+fTlrE9rUffzN8vdrnC0jy1X15i3vFud5//+i+wqS79oA6x+K74fntX8344MyOu4EjjRaLZuMTWChL8v4tZJ/IPZBIBjrrjN9lyRgRKNYI/dSRjLUXEyB9xb/h6g+XNK//FOZLLs8oMSN0KHyB76NPZ6H39nlNLRcCvd3NUZZ39efOYTkc6e52lQrqRoZD/WR/vscMmQ/+uzlxYCuV+KWx57k2aFVgfHfn+hRrC/0TkjbL4EdVwmhKAfzNTvG9uT/XtcOIW/0RMmDYvU4O7NxjAKGBqsh218NUkAC1Acv1ffnOfVfQc0SwYSeXuGx9ZJGZOkJDawvRqJYU+wa2wodwrSYac1U764A/gNmSd97rjxf4IvnC2jNYEG0ZvDobUHuZlYU+FEzeG/kkBej64u4b8xjeeRMt7p//9B2L/R7tAsR0js3XqL8LTpJFdrmaocX04Ntrfv6ucN03JqYvRecN21Q7zVj3OvejhCgwr3PgFpIKwJRUBFAt9KIUjAb7e/24BF+1E/BVYM83xBARZtC5+HMeJYIDq519L0m+Xt+XKff/mPvYGoAAAAA=);
    width: 40px;
    height: 40px;
}

#logout {
    background: url(data:image/webp;base64,UklGRhoDAABXRUJQVlA4WAoAAAAQAAAAJwAAJwAAQUxQSMkCAAANkHZb25m5A7qSsW3btu2pbdu23X6ybdtuR7VtW2NnkDvPm65GxATg/1Q39whyM9UTCj+9vvn8S6VsGiEt3OsAgNezcgwsfXQmTx6V9BFKYOUDkpsUz75aq5jBPF0onj44d2WhAnzIUsiqP9pj7i0mPqMJ5I7rsOJBHUNIE8iu7N9z9mcpgyVgrn6k4agiBUQN7FNGqcwD+6PhKou8WBDntKWGSNeXEK7ZWQJ/a4oM9YHCEkuOwKTcyyL1EaB/b7mFTUqQHPY5arAyYR53qBJAiDIlbH6NaldeKgfHg5txIiQV3gTUWoDe9AUei8G4eNm9UV0jCIewg5WwcKeERdBdB9as8IVvFizkRFz8k6/wqKOWQ3s4mLlm3rPzi9NE8Kh9jiCQpafg7cUGtRZHys5EaYn4gFtwo76VIRyK2trl3LA1E8HtGcyon0AwxYOrI9Dk6DNjI8LsG/SoSsCYctC1/kDZvfurrk7oFaKOIwAIPGFzGJK14OtA8gKKdAlNlH2xIFifw7iMKgQ+WREG+PPAR6HzcPpNfQJeOhPWWs8u2Dor8OINYquoV8CtQE6k2m3t05w+bKU7gCyQwh3gaVmgCK2/XFxj24RjqNtQgfagb2sBXx8nEtyYA/enhDVTkyhdXwv35lT1FTWg4mwTAtk2W+4t9GpuR7zYUQGtSXXUh3sAkFORQvCDg0a9nnPMtqltzfPzrwH3SZA8CnLmUH0RlJv2WJBbmnPkPcQdmtdJvLlKFVwdQYALW1h+5vqzP7yxU2wWGCcoUbUrvGOURQCXEm1npFFX9rsK0jV7tCD5Z0EnHwrQNDNWB/uNfWC8vrpvmITCNTengPnunBGRMu3ZC/a6j708JpvI8Ha8FhQu3ZKblGDPMVV/OJavBBmrLx0qiYj14CSEWzn3IHfFjYPPhCA3Uz3u76dXt7XV8A8rvj67+ex7YR3kBABWUDggKgAAABADAJ0BKigAKAA+MRiLRCIhoRHEACADBLSAAA3A3p8HAAD+/lXQAAAAAA==);
    width: 40px;
    height: 40px;
}

/* Keep html positioning rules */
html {
  position: relative;
  min-height: 100%;
}

/* Finance page — dark table and card overrides
   - Keep overall page background intact.
   - Ensure groups/cards and the items table use darker panels and light text.
*/
.finance-card,
.finance-table {
  background-color: var(--panel-lighter);
  border: 1px solid rgba(255,255,255,0.03);
  color: var(--text);
  border-radius: 6px;
}

.finance-card .card-header {
    background-color: var(--panel-light);
    border-bottom: 1px solid rgba(255,255,255,0.03);
    color: var(--text);
}

.finance-card .card-body {
  background-color: transparent;
  color: var(--text);
}

/* Table inside finance manager — override Bootstrap whites */
.finance-table {
  background-color: var(--panel-lighter);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.03);
  border-radius: 4px;
  overflow: hidden;
}

.finance-table thead th {
    background-color: var(--panel-light);
    color: var(--text);
    font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.finance-table tbody tr {
    background-color: var(--panel-lighter);
}

.finance-table tbody tr td {
    background-color: var(--panel-lighter);
    color: var(--text);
    border-top: none;
    vertical-align: middle;
}

/* Small adjustments: labels and placeholders lighter */
.finance-card .form-control::placeholder,
.finance-card .form-select option[disabled] {
  color: rgba(255,255,255,0.35);
}

/* Keep action buttons subtle on dark background */
.finance-card .btn-outline-primary {
  color: var(--primary);
  border-color: rgba(255,255,255,0.04);
  background-color: transparent;
}
.finance-card .btn-outline-danger {
  color: #ff6b6b;
  border-color: rgba(255,255,255,0.04);
}

/* Make small tables full width while keeping dark look */
.table.table-sm.mb-0 {
  margin-bottom: 0;
}

.form-control,
.form-select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: #f8f9fa;
}

    .form-control:focus,
    .form-select:focus {
        background-color: var(--input-bg);
        border-color: var(--input-border);
        color: #f8f9fa;
        box-shadow: none;
        outline: none;
    }

.form-control::placeholder {
    color: #adb5bd;
    opacity: 1;
}

.form-control:focus::placeholder {
    color: #adb5bd;
}

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

.form-select:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* ========================================
   UNIFIED TABLE STYLING SYSTEM
   ======================================== */

/* Base table styles - apply to all tables */
.table {
    color: var(--text);
    border-color: var(--border);
    table-layout: auto;
    width: 100%;
}

.table thead th {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
}

.table tbody td {
    color: var(--text);
    border-top: 1px solid rgba(255,255,255,0.02);
    vertical-align: middle;
}

/* Unified table styling for finance-related tables */
.finance-table,
.unified-table {
    background-color: var(--panel-lighter);
    color: var(--text);
    border: 1px solid rgba(255,255,255,0.03);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0;
}

.finance-table thead th,
.unified-table thead th {
    background-color: var(--panel-light);
    color: var(--text);
    font-weight: 600;
    border-bottom: 2px solid rgba(255,255,255,0.06);
    white-space: nowrap;
}

.finance-table tbody tr,
.unified-table tbody tr {
    background-color: var(--panel-lighter);
    transition: background-color 0.15s ease;
}

.finance-table tbody tr:hover,
.unified-table tbody tr:hover {
    background-color: var(--panel-light);
}

.finance-table tbody tr td,
.unified-table tbody tr td {
    background-color: transparent;
    color: var(--text);
    border-top: 1px solid rgba(255,255,255,0.02);
    vertical-align: middle;
}

/* Column width constraints for consistent layouts */
.table th:first-child,
.table td:first-child {
    min-width: 150px; /* Primary column (names) */
}

.table th.text-end,
.table td.text-end {
    min-width: 80px;
    max-width: 120px;
    text-align: right !important;
}

.table th:last-child,
.table td:last-child {
    min-width: 100px; /* Action column */
    text-align: right;
}

/* Specific column sizing for different table types */
/* Finance/Group tables */
.finance-table th:nth-child(1),
.finance-table td:nth-child(1) {
    width: 40%; /* Name/Category column */
}

.finance-table th:nth-child(2),
.finance-table td:nth-child(2),
.finance-table th:nth-child(3),
.finance-table td:nth-child(3) {
    width: 15%; /* Numeric columns */
}

.finance-table th:nth-child(4),
.finance-table td:nth-child(4) {
    width: 15%; /* Currency/Value column */
}

.finance-table th:nth-child(5),
.finance-table td:nth-child(5),
.finance-table th:last-child,
.finance-table td:last-child {
    width: 15%; /* Share/Actions column */
}

/* Project tables (5-column layout) */
.project-table th:nth-child(1),
.project-table td:nth-child(1) {
    width: 30%; /* Project name */
}

.project-table th:nth-child(2),
.project-table td:nth-child(2),
.project-table th:nth-child(3),
.project-table td:nth-child(3),
.project-table th:nth-child(4),
.project-table td:nth-child(4),
.project-table th:nth-child(5),
.project-table td:nth-child(5) {
    width: 14%; /* Numeric columns */
    text-align: right;
}

/* Task tables (3-4 column layout) */
.task-table th:nth-child(1),
.task-table td:nth-child(1) {
    width: 50%; /* Task name */
}

.task-table th:nth-child(2),
.task-table td:nth-child(2),
.task-table th:nth-child(3),
.task-table td:nth-child(3) {
    width: 15%; /* Hours/Cost */
    text-align: right;
}

.task-table th:last-child,
.task-table td:last-child {
    width: 20%; /* Actions */
    text-align: right;
}

/* Admin/User tables (3-column layout) */
.admin-table th:nth-child(1),
.admin-table td:nth-child(1) {
    width: 40%; /* Username */
}

.admin-table th:nth-child(2),
.admin-table td:nth-child(2) {
    width: 30%; /* Role */
}

.admin-table th:nth-child(3),
.admin-table td:nth-child(3) {
    width: 30%; /* Actions */
    text-align: right;
}

/* Responsive table wrapper */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Small table variant */
.table-sm thead th,
.table-sm tbody td {
    padding: 0.4rem;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    /* Stack action buttons on medium screens */
    .table td:last-child .btn,
    .table td:last-child form {
        margin-bottom: 0.25rem;
    }
    
    .table td:last-child {
        white-space: normal;
    }
}

@media (max-width: 767.98px) {
    /* Reduce padding on small screens */
    .table thead th,
    .table tbody td {
        padding: 0.5rem 0.25rem;
        font-size: 0.875rem;
    }
    
    /* Allow text wrapping on mobile */
    .table th,
    .table td {
        white-space: normal;
    }
    
    /* Adjust column widths for mobile */
    .table th:first-child,
    .table td:first-child {
        min-width: 100px;
    }
    
    .table th.text-end,
    .table td.text-end {
        min-width: 60px;
    }
}

@media (max-width: 575.98px) {
    /* Very small screens - make tables scrollable */
    .table-responsive {
        font-size: 0.8rem;
    }
    
    .table thead th,
    .table tbody td {
        padding: 0.4rem 0.2rem;
    }
    
    /* Hide share column on very small screens */
    .finance-table th:nth-child(5),
    .finance-table td:nth-child(5) {
        display: none;
    }
}

/* Button group alignment in tables */
.table td .btn-group {
    display: inline-flex;
    gap: 0.25rem;
}

.table td form {
    display: inline;
    margin: 0;
}

.table td .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Ensure text alignment is consistent */
.text-end {
    text-align: right !important;
}

.text-start {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}