/* ================================================================
   Expenditure — Main Application CSS
   Theme variables are in theme.css (loaded before this file).
   Responsive breakpoints are in responsive.css (loaded after).
================================================================ */

/* ── Reset / Base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background:  var(--bg);
    color:       var(--text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size:   14px;
    line-height: 1.6;
    margin:      0;
    min-height:  100vh;
    transition:  background var(--transition), color var(--transition);
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }

img { max-width: 100%; }

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

/* ── Layout ─────────────────────────────────────────────────────── */
.app-wrapper {
    display: flex;
    min-height: 100vh;
}

/* ── Sidebar ────────────────────────────────────────────────────── */
.sidebar {
    position:   fixed;
    top:        0;
    left:       0;
    bottom:     0;
    width:      var(--sidebar-width);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    display:    flex;
    flex-direction: column;
    z-index:    200;
    transition: transform var(--transition), width var(--transition);
    overflow:   hidden;
}

.sidebar-brand {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     0 20px;
    height:      var(--navbar-height);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    text-decoration: none;
}

.sidebar-brand-icon {
    width:       34px;
    height:      34px;
    background:  var(--primary);
    border-radius: var(--radius-sm);
    display:     flex;
    align-items: center;
    justify-content: center;
    font-size:   16px;
    color:       #fff;
    flex-shrink: 0;
}

.sidebar-brand-text {
    font-size:   16px;
    font-weight: 800;
    color:       var(--text);
    letter-spacing: -.3px;
    white-space: nowrap;
    overflow:    hidden;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding:    12px 0;
}

.sidebar-section-label {
    font-size:    10px;
    font-weight:  700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color:        var(--sidebar-muted);
    padding:      16px 20px 6px;
    white-space:  nowrap;
    overflow:     hidden;
}

.sidebar-section-label:first-child { padding-top: 6px; }

.sidebar-item {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     9px 20px;
    color:       var(--sidebar-text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    margin:      1px 8px;
    transition:  background var(--transition), color var(--transition);
    font-size:   13.5px;
    font-weight: 500;
    white-space: nowrap;
    overflow:    hidden;
    position:    relative;
}

.sidebar-item:hover {
    background: var(--sidebar-hover-bg);
    color:      var(--text);
}

.sidebar-item.active {
    background: var(--sidebar-active-bg);
    color:      var(--sidebar-active);
}

.sidebar-item.active .sidebar-item-icon {
    color: var(--sidebar-active);
}

.sidebar-item-icon {
    width:       18px;
    text-align:  center;
    font-size:   14px;
    flex-shrink: 0;
    color:       var(--sidebar-muted);
    transition:  color var(--transition);
}

.sidebar-item:hover .sidebar-item-icon {
    color: var(--text-muted);
}

.sidebar-item-label { flex: 1; }

.sidebar-badge {
    font-size:    10px;
    font-weight:  700;
    padding:      2px 6px;
    border-radius: 20px;
    background:   var(--danger);
    color:        #fff;
    flex-shrink:  0;
}

/* ── Sidebar Locked Items (no active membership) ─────────────── */
.sidebar-section-locked {
    opacity: 0.55;
    display: flex;
    align-items: center;
    gap: 5px;
}
.sidebar-lock-icon {
    font-size: 9px;
    color: var(--sidebar-muted);
    margin-left: auto;
}
.sidebar-item-locked {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     9px 14px 9px 18px;
    border-radius: var(--radius-sm);
    opacity:     0.38;
    cursor:      not-allowed;
    user-select: none;
    pointer-events: none;
    color:       var(--sidebar-text);
    font-size:   13px;
    font-weight: 500;
    transition:  none;
}
.sidebar-item-lock-badge {
    font-size:  9px;
    margin-left: auto;
    color:      var(--sidebar-muted);
    flex-shrink: 0;
}

/* ── Sidebar Submenu ─────────────────────────────────────────── */
.sidebar-item-toggle {
    cursor: pointer;
}
.sidebar-item-arrow {
    display:     block;
    font-size:   10px;
    color:       var(--sidebar-muted);
    flex-shrink: 0;
    margin-left: auto;
    transition:  transform var(--transition), color var(--transition);
}
.sidebar-item-toggle.open .sidebar-item-arrow,
.sidebar-item-toggle.active .sidebar-item-arrow {
    transform: rotate(90deg);
}
.sidebar-item-toggle.active .sidebar-item-arrow {
    color: var(--sidebar-active);
}
.sidebar-submenu {
    overflow:   hidden;
    max-height: 0;
    transition: max-height 0.25s ease;
}
.sidebar-submenu.open {
    max-height: 400px;
}
.sidebar-subitem {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         8px 20px 8px 40px;
    color:           var(--sidebar-text);
    text-decoration: none;
    border-radius:   var(--radius-sm);
    margin:          1px 8px;
    transition:      background var(--transition), color var(--transition);
    font-size:       13px;
    font-weight:     500;
    white-space:     nowrap;
    overflow:        hidden;
}
.sidebar-subitem:hover {
    background: var(--sidebar-hover-bg);
    color:      var(--text);
}
.sidebar-subitem.active {
    background: var(--sidebar-active-bg);
    color:      var(--sidebar-active);
}
.sidebar-subitem.active .sidebar-item-icon {
    color: var(--sidebar-active);
}
/* Hide submenus and arrow when sidebar is collapsed */
.sidebar-collapsed .sidebar-submenu { max-height: 0 !important; }
.sidebar-collapsed .sidebar-item-arrow {
    display: none;
}

/* ── Collapsed sidebar flyout panel ─────────────────────────── */
.sidebar-flyout {
    position:       fixed;
    background:     var(--sidebar-bg);
    border:         1px solid rgba(255,255,255,.1);
    border-left:    2px solid var(--primary);
    border-radius:  0 10px 10px 0;
    padding:        4px 0 6px;
    min-width:      176px;
    z-index:        9999;
    box-shadow:     4px 6px 20px rgba(0,0,0,.45);
    pointer-events: none;
    opacity:        0;
    transform:      translateX(-4px);
    transition:     opacity .14s ease, transform .14s ease;
}
.sidebar-flyout.visible {
    opacity:        1;
    transform:      translateX(0);
    pointer-events: auto;
}
.sidebar-flyout-title {
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color:          var(--sidebar-muted);
    padding:        8px 14px 5px;
    margin-bottom:  2px;
}
.sidebar-flyout-item {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         8px 16px 8px 14px;
    font-size:       13px;
    font-weight:     500;
    color:           var(--sidebar-text);
    text-decoration: none;
    transition:      background .1s, color .1s;
    white-space:     nowrap;
}
.sidebar-flyout-item i {
    font-size:   13.5px;
    width:       18px;
    text-align:  center;
    color:       var(--sidebar-muted);
    flex-shrink: 0;
    transition:  color .1s;
}
.sidebar-flyout-item:hover           { background: var(--sidebar-hover-bg); color: var(--text); }
.sidebar-flyout-item:hover i         { color: var(--text-muted); }
.sidebar-flyout-item.active          { background: var(--sidebar-active-bg); color: var(--sidebar-active); font-weight: 600; }
.sidebar-flyout-item.active i        { color: var(--sidebar-active); }

.sidebar-footer {
    padding:      12px;
    border-top:   1px solid var(--border);
    flex-shrink:  0;
}

.sidebar-user {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     8px 10px;
    border-radius: var(--radius-sm);
    cursor:      pointer;
    transition:  background var(--transition);
    text-decoration: none;
}

.sidebar-user:hover { background: var(--sidebar-hover-bg); }

.sidebar-avatar {
    width:       34px;
    height:      34px;
    border-radius: 50%;
    background:  var(--primary);
    display:     flex;
    align-items: center;
    justify-content: center;
    font-size:   13px;
    font-weight: 700;
    color:       #fff;
    flex-shrink: 0;
    text-transform: uppercase;
}

.sidebar-avatar img {
    width:   34px;
    height:  34px;
    border-radius: 50%;
    object-fit: cover;
}

.sidebar-user-info { overflow: hidden; flex: 1; }
.sidebar-user-name {
    font-size:   13px;
    font-weight: 600;
    color:       var(--sidebar-text);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}
.sidebar-user-role {
    font-size:   11px;
    color:       var(--sidebar-muted);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

/* Sidebar collapsed state */
.sidebar-collapsed .sidebar {
    width: 62px;
    overflow: visible;
}
.sidebar-collapsed .sidebar-nav {
    overflow-y: auto;
    overflow-x: clip; /* clip (not hidden) so tooltips can escape on x-axis */
    scrollbar-width: none;
}
.sidebar-collapsed .sidebar-nav::-webkit-scrollbar { display: none; }

.sidebar-collapsed .sidebar-brand-text,
.sidebar-collapsed .sidebar-user-info {
    opacity: 0;
    width: 0;
    overflow: hidden;
    pointer-events: none;
    flex: none;
}
/* Section labels: collapse to zero height so they don't leave gaps */
.sidebar-collapsed .sidebar-section-label {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
}
/* Label & badge: collapse width so icon stays truly centred */
.sidebar-collapsed .sidebar-item-label {
    opacity: 0;
    flex: none;
    width: 0;
    overflow: hidden;
    pointer-events: none;
}
.sidebar-collapsed .sidebar-badge {
    opacity: 0;
    width: 0;
    padding: 0;
    overflow: hidden;
    pointer-events: none;
}
.sidebar-collapsed .sidebar-item {
    justify-content: center;
    padding: 10px 0;
    margin: 2px 6px;
    gap: 0;
}
.sidebar-collapsed .sidebar-item-icon {
    width: 20px;
    font-size: 16px;
    text-align: center;
    flex-shrink: 0;
}
.sidebar-collapsed .sidebar-brand {
    justify-content: center;
}
.sidebar-collapsed .sidebar-user {
    justify-content: center;
}
.sidebar-collapsed .sidebar-avatar { margin: 0; }

/* Hover tooltip flyout for collapsed sidebar */
#sidebar-tooltip {
    position: fixed;
    background: #1e293b;
    color: #f1f5f9;
    padding: 5px 11px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .15s, transform .15s;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
#sidebar-tooltip.visible {
    opacity: 1;
    transform: translateX(0);
}

/* ── Main Wrapper ────────────────────────────────────────────────── */
.main-wrapper {
    flex: 1;
    margin-left:  var(--sidebar-width);
    min-height:   100vh;
    display:      flex;
    flex-direction: column;
    transition:   margin-left var(--transition);
    min-width:    0;
}

.sidebar-collapsed .main-wrapper {
    margin-left: 62px;
}

/* ── Top Navbar ─────────────────────────────────────────────────── */
.app-navbar {
    position:     sticky;
    top:          0;
    height:       var(--navbar-height);
    background:   var(--navbar-bg);
    border-bottom: 1px solid var(--border);
    display:      flex;
    align-items:  center;
    padding:      0 20px;
    gap:          12px;
    z-index:      100;
    flex-shrink:  0;
    transition:   background var(--transition);
}

.navbar-toggle {
    width:   36px;
    height:  36px;
    border:  none;
    background: transparent;
    color:   var(--text-muted);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor:  pointer;
    font-size: 16px;
    transition: background var(--transition), color var(--transition);
    flex-shrink: 0;
}
.navbar-toggle:hover {
    background: var(--surface-2);
    color: var(--text);
}

#nav-back-btn {
    color: var(--text-muted);
    opacity: .75;
}
#nav-back-btn:hover {
    opacity: 1;
    color: var(--primary);
    background: var(--surface-2);
}

.navbar-page-title {
    font-size:   16px;
    font-weight: 700;
    color:       var(--text);
    flex: 1;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.navbar-right {
    display:     flex;
    align-items: center;
    gap:         6px;
    flex-shrink: 0;
}

/* Workspace selector */
.ws-selector {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     6px 12px;
    border:      1px solid var(--border);
    border-radius: var(--radius-sm);
    background:  transparent;
    color:       var(--text);
    cursor:      pointer;
    font-size:   13px;
    font-weight: 500;
    transition:  background var(--transition), border-color var(--transition);
    max-width:   180px;
}
.ws-selector:hover {
    background:     var(--surface-2);
    border-color:   var(--border-light);
}
.ws-selector-name {
    flex: 1;
    overflow:    hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Icon button (for navbar actions) */
.icon-btn {
    width:       36px;
    height:      36px;
    border:      none;
    background:  transparent;
    color:       var(--text-muted);
    border-radius: var(--radius-sm);
    display:     flex;
    align-items: center;
    justify-content: center;
    cursor:      pointer;
    font-size:   15px;
    position:    relative;
    transition:  background var(--transition), color var(--transition);
    text-decoration: none;
}
.icon-btn:hover {
    background: var(--surface-2);
    color:      var(--text);
}

.icon-btn .badge-dot {
    position:   absolute;
    top:        6px;
    right:      6px;
    width:      8px;
    height:     8px;
    background: var(--danger);
    border-radius: 50%;
    border:     2px solid var(--navbar-bg);
}

/* User dropdown trigger */
.user-menu-trigger {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     4px 10px 4px 4px;
    border:      none;
    background:  transparent;
    color:       var(--text);
    border-radius: 30px;
    cursor:      pointer;
    font-size:   13px;
    font-weight: 500;
    transition:  background var(--transition);
}
.user-menu-trigger:hover { background: var(--surface-2); }

.user-avatar-sm {
    width:       30px;
    height:      30px;
    border-radius: 50%;
    background:  var(--primary);
    display:     flex;
    align-items: center;
    justify-content: center;
    font-size:   12px;
    font-weight: 700;
    color:       #fff;
    text-transform: uppercase;
    flex-shrink: 0;
}
.user-avatar-sm img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

/* Alpine.js dropdown */
[x-cloak] { display: none !important; }

.dropdown-panel {
    position:   absolute;
    top:        calc(100% + 8px);
    right:      0;
    background: var(--surface);
    border:     1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    min-width:  200px;
    z-index:    500;
    overflow:   hidden;
}

.dropdown-header {
    padding:     12px 16px;
    border-bottom: 1px solid var(--border);
}
.dropdown-header-name {
    font-size:   13px;
    font-weight: 700;
    color:       var(--text);
}
.dropdown-header-email {
    font-size:   12px;
    color:       var(--text-muted);
    overflow:    hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-item {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     9px 16px;
    color:       var(--text-muted);
    font-size:   13px;
    text-decoration: none;
    cursor:      pointer;
    transition:  background var(--transition), color var(--transition);
    border:      none;
    background:  none;
    width:       100%;
    text-align:  left;
}
.dropdown-item:hover {
    background: var(--surface-2);
    color:      var(--text);
}
.dropdown-item i { width: 16px; text-align: center; }

.dropdown-divider {
    border-top: 1px solid var(--border);
    margin:     4px 0;
}

/* ── Main Content Area ─────────────────────────────────────────── */
.app-content {
    flex: 1;
    padding: 24px;
}

/* Page header */
.page-header {
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap:     wrap;
    gap:           12px;
}

.page-header-left { flex: 1; }

.page-title {
    font-size:   22px;
    font-weight: 800;
    color:       var(--text);
    margin:      0 0 2px;
    line-height: 1.2;
}

.page-subtitle {
    font-size:  13px;
    color:      var(--text-muted);
    margin:     0;
}

.page-actions {
    display:    flex;
    align-items: center;
    gap:        8px;
    flex-wrap:  wrap;
}

/* ── Cards ─────────────────────────────────────────────────────── */
.card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    transition:    background var(--transition), border-color var(--transition);
}

.card-header {
    padding:       16px 20px;
    border-bottom: 1px solid var(--border);
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    gap:           12px;
}

.card-title {
    font-size:   14px;
    font-weight: 700;
    color:       var(--text);
    margin:      0;
}

.card-subtitle {
    font-size: 12px;
    color:     var(--text-muted);
    margin:    2px 0 0;
}

.card-body { padding: 20px; }

.card-footer {
    padding:    12px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 0 0 var(--radius) var(--radius);
}

/* Stat cards */
.stat-card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       20px;
    display:       flex;
    align-items:   flex-start;
    gap:           16px;
    transition:    background var(--transition), border-color var(--transition), transform .15s;
}

.stat-card:hover { transform: translateY(-2px); }

.stat-icon {
    width:         44px;
    height:        44px;
    border-radius: var(--radius-sm);
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     18px;
    flex-shrink:   0;
}

.stat-body { flex: 1; min-width: 0; }

.stat-label {
    font-size:  11px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color:      var(--text-muted);
    margin:     0 0 4px;
}

.stat-value {
    font-size:   24px;
    font-weight: 800;
    color:       var(--text);
    margin:      0;
    line-height: 1.2;
}

.stat-change {
    font-size:  12px;
    font-weight: 600;
    margin:     4px 0 0;
    display:    flex;
    align-items: center;
    gap:        4px;
}

.stat-change.up   { color: var(--success); }
.stat-change.down { color: var(--danger); }

/* ── Grid ───────────────────────────────────────────────────────── */
.stats-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap:                   16px;
    margin-bottom:         24px;
}

.content-grid {
    display:               grid;
    grid-template-columns: repeat(12, 1fr);
    gap:                   20px;
}

.col-8  { grid-column: span 8; }
.col-7  { grid-column: span 7; }
.col-6  { grid-column: span 6; }
.col-5  { grid-column: span 5; }
.col-4  { grid-column: span 4; }
.col-12 { grid-column: span 12; }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn-primary {
    background:    var(--primary);
    color:         #fff;
    border:        none;
    padding:       8px 18px;
    border-radius: var(--radius-sm);
    font-size:     13px;
    font-weight:   600;
    cursor:        pointer;
    transition:    background var(--transition), transform .1s;
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    text-decoration: none;
}
.btn-primary:hover { background: var(--primary-hover); color: #fff; }
.btn-primary:active { transform: scale(.98); }

.btn-secondary {
    background:    var(--surface-2);
    color:         var(--text);
    border:        1px solid var(--border);
    padding:       7px 18px;
    border-radius: var(--radius-sm);
    font-size:     13px;
    font-weight:   600;
    cursor:        pointer;
    transition:    background var(--transition);
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    text-decoration: none;
}
.btn-secondary:hover { background: var(--surface-hover); color: var(--text); }

.btn-danger {
    background:  var(--danger);
    color:       #fff;
    border:      none;
    padding:     8px 18px;
    border-radius: var(--radius-sm);
    font-size:   13px;
    font-weight: 600;
    cursor:      pointer;
    transition:  background var(--transition);
    display:     inline-flex;
    align-items: center;
    gap:         6px;
}
.btn-danger:hover { background: #dc2626; color: #fff; }

.btn-ghost {
    background:  transparent;
    color:       var(--text-muted);
    border:      1px solid var(--border);
    padding:     7px 16px;
    border-radius: var(--radius-sm);
    font-size:   13px;
    font-weight: 500;
    cursor:      pointer;
    transition:  background var(--transition), color var(--transition);
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    text-decoration: none;
}
.btn-ghost:hover {
    background: var(--surface-2);
    color: var(--text);
}

.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-lg { padding: 11px 24px; font-size: 15px; }
.btn-icon { padding: 8px; gap: 0; }
.btn-loading { opacity: .7; pointer-events: none; }

/* ── Form Controls ──────────────────────────────────────────────── */
.form-label {
    display:     block;
    font-size:   12px;
    font-weight: 600;
    color:       var(--text-muted);
    margin-bottom: 6px;
    letter-spacing: .3px;
}

.form-control,
.form-select {
    width:         100%;
    background:    var(--surface-2);
    border:        1px solid var(--border);
    color:         var(--text);
    border-radius: var(--radius-sm);
    padding:       9px 12px;
    font-size:     13px;
    transition:    border-color var(--transition), background var(--transition);
    outline:       none;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    background:   var(--surface);
    box-shadow:   0 0 0 3px rgba(37,99,235,.15);
}

.form-control::placeholder { color: var(--text-faint); }

.form-control.is-invalid { border-color: var(--danger); }
.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239,68,68,.15);
}

.invalid-feedback {
    font-size: 12px;
    color:     var(--danger);
    margin-top: 4px;
}

.form-group { margin-bottom: 16px; }

.input-group {
    display:  flex;
    position: relative;
}

.input-prefix,
.input-suffix {
    display:     flex;
    align-items: center;
    padding:     9px 12px;
    background:  var(--surface);
    border:      1px solid var(--border);
    color:       var(--text-muted);
    font-size:   13px;
    white-space: nowrap;
}
.input-prefix { border-right: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-suffix { border-left: none;  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.input-group .form-control { border-radius: 0; }
.input-group .form-control:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group .form-control:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* ── Tables ─────────────────────────────────────────────────────── */
.table-wrapper {
    overflow-x:    auto;
    border-radius: var(--radius);
    border:        1px solid var(--border);
}

.table {
    width:           100%;
    border-collapse: collapse;
    font-size:       13px;
}

.table th {
    padding:      10px 16px;
    background:   var(--surface-2);
    color:        var(--text-muted);
    font-size:    11px;
    font-weight:  600;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-align:   left;
    white-space:  nowrap;
    border-bottom: 1px solid var(--border);
}

.table td {
    padding:      11px 16px;
    color:        var(--text);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.table tr:last-child td { border-bottom: none; }

.table tbody tr:hover td { background: var(--surface-2); }

/* ── Badges ─────────────────────────────────────────────────────── */
.badge {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    padding:       3px 8px;
    border-radius: 20px;
    font-size:     11px;
    font-weight:   600;
    letter-spacing: .3px;
}

.badge-success { background: var(--success-light); color: var(--success); }
.badge-danger  { background: var(--danger-light);  color: var(--danger); }
.badge-warning { background: var(--warning-light); color: var(--warning); }
.badge-info    { background: var(--info-light);    color: var(--info); }
.badge-primary { background: var(--primary-light); color: var(--primary); }
.badge-neutral { background: rgba(148,163,184,.15); color: var(--text-muted); }

/* ── Alerts ─────────────────────────────────────────────────────── */
.alert {
    display:       flex;
    align-items:   flex-start;
    gap:           12px;
    padding:       14px 16px;
    border-radius: var(--radius-sm);
    border:        1px solid;
    font-size:     13px;
    margin-bottom: 16px;
}

.alert-success { background: var(--success-light); border-color: rgba(16,185,129,.3); color: var(--success); }
.alert-danger  { background: var(--danger-light);  border-color: rgba(239,68,68,.3);  color: var(--danger); }
.alert-warning { background: var(--warning-light); border-color: rgba(245,158,11,.3); color: var(--warning); }
.alert-info    { background: var(--info-light);    border-color: rgba(14,165,233,.3); color: var(--info); }

.alert i { margin-top: 1px; }


/* ── Toast Notifications ────────────────────────────────────────── */
.wh-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 360px;
    width: calc(100vw - 40px);
}

.wh-toast {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9px;
    box-shadow: 0 4px 20px rgba(0,0,0,.13);
    pointer-events: all;
    position: relative;
    overflow: hidden;
    animation: whToastIn .22s cubic-bezier(.22,1,.36,1);
    font-size: 13px;
    border-left: 4px solid transparent;
}
.wh-toast.wh-toast-success { border-left-color: var(--success); }
.wh-toast.wh-toast-error   { border-left-color: var(--danger);  }
.wh-toast.wh-toast-warning { border-left-color: var(--warning); }
.wh-toast.wh-toast-info    { border-left-color: var(--info);    }

.wh-toast.wh-toast-out { animation: whToastOut .2s ease forwards; }

.wh-toast-icon {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}
.wh-toast.wh-toast-success .wh-toast-icon { color: var(--success); }
.wh-toast.wh-toast-error   .wh-toast-icon { color: var(--danger);  }
.wh-toast.wh-toast-warning .wh-toast-icon { color: var(--warning); }
.wh-toast.wh-toast-info    .wh-toast-icon { color: var(--info);    }

.wh-toast-body { flex: 1; min-width: 0; }
.wh-toast-title {
    font-weight: 700;
    color: var(--text);
    font-size: 13px;
    line-height: 1.3;
    margin: 0;
    word-break: break-word;
}
.wh-toast-msg {
    color: var(--text-muted);
    font-size: 12px;
    margin: 2px 0 0;
    word-break: break-word;
}

.wh-toast-close {
    background: none;
    border: none;
    color: var(--text-faint);
    cursor: pointer;
    font-size: 13px;
    padding: 0 0 0 6px;
    flex-shrink: 0;
    line-height: 1;
    opacity: .7;
    transition: opacity .15s;
    margin-top: 1px;
}
.wh-toast-close:hover { opacity: 1; }

.wh-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    transform-origin: left;
}
.wh-toast.wh-toast-success .wh-toast-progress { background: var(--success); }
.wh-toast.wh-toast-error   .wh-toast-progress { background: var(--danger);  }
.wh-toast.wh-toast-warning .wh-toast-progress { background: var(--warning); }
.wh-toast.wh-toast-info    .wh-toast-progress { background: var(--info);    }

@keyframes whToastIn {
    from { opacity: 0; transform: translateX(40px) scale(.96); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes whToastOut {
    from { opacity: 1; transform: translateX(0); max-height: 120px; margin-bottom: 0; }
    to   { opacity: 0; transform: translateX(30px); max-height: 0; padding: 0; margin: 0; }
}

/* ── Modal ──────────────────────────────────────────────────────── */
.modal-content {
    background:    var(--surface) !important;
    border:        1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    color:         var(--text) !important;
}

.modal-header {
    border-bottom: 1px solid var(--border) !important;
    padding:       16px 20px !important;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
}

.modal-title {
    font-weight: 700 !important;
    display:     flex;
    align-items: center;
    min-width:   0;
    flex:        1;
}

/* .modal-close is the class every modal in the app actually uses — it had
   no rule at all until now, so every modal's close button rendered as an
   unstyled default <button> (the white square overlapping the title). */
.modal-close {
    background:    transparent;
    border:        none;
    color:         var(--text-muted);
    font-size:     16px;
    cursor:        pointer;
    padding:       6px;
    line-height:   1;
    flex-shrink:   0;
    border-radius: 6px;
    transition:    color var(--transition), background var(--transition);
}
.modal-close:hover { color: var(--text); background: var(--surface-2); }

.modal-footer {
    border-top: 1px solid var(--border) !important;
    padding:    12px 20px !important;
}

.btn-close-modal {
    background:  transparent;
    border:      none;
    color:       var(--text-muted);
    font-size:   20px;
    cursor:      pointer;
    padding:     0;
    line-height: 1;
    transition:  color var(--transition);
}
.btn-close-modal:hover { color: var(--text); }

/* ── Breadcrumbs ────────────────────────────────────────────────── */
.breadcrumb {
    display:    flex;
    align-items: center;
    gap:        6px;
    font-size:  12px;
    color:      var(--text-muted);
    margin:     0;
    padding:    0;
    list-style: none;
}

.breadcrumb-item { display: flex; align-items: center; gap: 6px; }
.breadcrumb-item::before { content: '/'; color: var(--text-faint); }
.breadcrumb-item:first-child::before { display: none; }
.breadcrumb-item a { color: var(--text-muted); }
.breadcrumb-item a:hover { color: var(--text); }
.breadcrumb-item.active { color: var(--text); }

/* ── Empty State ────────────────────────────────────────────────── */
.empty-state {
    text-align:  center;
    padding:     60px 24px;
    color:       var(--text-muted);
}
.empty-state-icon { font-size: 48px; margin-bottom: 16px; opacity: .5; }
.empty-state-title { font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 8px; }
.empty-state-text  { font-size: 13px; margin: 0 0 20px; }

/* ── Loading Spinner ────────────────────────────────────────────── */
.spinner {
    width:       20px;
    height:      20px;
    border:      2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation:   spin .6s linear infinite;
    display:     inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Utility ────────────────────────────────────────────────────── */
.text-success { color: var(--success) !important; }
.text-danger  { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-info    { color: var(--info) !important; }
.text-muted   { color: var(--text-muted) !important; }
.text-primary { color: var(--primary) !important; }

.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }

.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }

.border-top    { border-top:    1px solid var(--border) !important; }
.border-bottom { border-bottom: 1px solid var(--border) !important; }

.bg-surface   { background: var(--surface) !important; }
.bg-surface-2 { background: var(--surface-2) !important; }

.rounded-lg { border-radius: var(--radius-lg) !important; }

.truncate {
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

/* ── Amount colors ──────────────────────────────────────────────── */
.amount-income  { color: var(--success); font-weight: 700; }
.amount-expense { color: var(--danger); font-weight: 700; }
.amount-transfer { color: var(--info); font-weight: 700; }

/* ── Overlay for mobile sidebar ─────────────────────────────────── */
.sidebar-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.5);
    z-index:    199;
    backdrop-filter: blur(2px);
}

/* ── Tom Select Override ────────────────────────────────────────── */
.ts-wrapper .ts-control {
    background:  var(--surface-2) !important;
    border:      1px solid var(--border) !important;
    color:       var(--text) !important;
    border-radius: var(--radius-sm) !important;
}
.ts-wrapper.focus .ts-control {
    border-color: var(--primary) !important;
    box-shadow:   0 0 0 3px rgba(37,99,235,.15) !important;
}
.ts-dropdown {
    background:  var(--surface) !important;
    border:      1px solid var(--border) !important;
    box-shadow:  var(--shadow) !important;
}
.ts-dropdown .option { color: var(--text) !important; }
.ts-dropdown .option:hover,
.ts-dropdown .option.active { background: var(--surface-2) !important; }
.ts-wrapper .ts-control .item { color: var(--text) !important; }

/* ── Bootstrap overrides for both themes ───────────────────────── */

/* Ensure Bootstrap text/bg utilities use our variables */
body { color: var(--text); background-color: var(--bg); }

/* Bootstrap form controls */
.form-control, .form-select {
    background-color: var(--surface-2) !important;
    border-color:     var(--border) !important;
    color:            var(--text) !important;
}
.form-control:focus, .form-select:focus {
    background-color: var(--surface) !important;
    border-color:     var(--primary) !important;
    color:            var(--text) !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.15) !important;
}
.form-control::placeholder { color: var(--text-faint) !important; opacity: 1; }
.form-select option {
    background: var(--surface);
    color:      var(--text);
}

/* Bootstrap card */
.card {
    background-color: var(--surface) !important;
    border-color:     var(--border) !important;
    color:            var(--text) !important;
}
.card-header, .card-footer {
    background-color: var(--surface-2) !important;
    border-color:     var(--border) !important;
    color:            var(--text) !important;
}
.card-body { color: var(--text); }

/* Bootstrap modal */
.modal-content {
    background-color: var(--surface) !important;
    border-color:     var(--border) !important;
    color:            var(--text) !important;
}
.modal-header, .modal-footer {
    border-color: var(--border) !important;
    color:        var(--text) !important;
}
.modal-title { color: var(--text) !important; }
.btn-close { filter: var(--btn-close-filter, none); }

/* Bootstrap list-group */
.list-group-item {
    background-color: var(--surface) !important;
    border-color:     var(--border) !important;
    color:            var(--text) !important;
}
.list-group-item:hover {
    background-color: var(--surface-2) !important;
}

/* Bootstrap nav tabs */
.nav-tabs { border-color: var(--border) !important; }
.nav-tabs .nav-link {
    color: var(--text-muted) !important;
    border-color: transparent !important;
}
.nav-tabs .nav-link:hover {
    color: var(--text) !important;
    border-color: var(--border) var(--border) transparent !important;
}
.nav-tabs .nav-link.active {
    color:            var(--text) !important;
    background-color: var(--surface) !important;
    border-color:     var(--border) var(--border) var(--surface) !important;
}

/* Bootstrap table */
.table { color: var(--text) !important; }
.table > :not(caption) > * > * {
    background-color: transparent !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--surface-2) !important;
    color: var(--text) !important;
}
.table-hover > tbody > tr:hover > * {
    background-color: var(--surface-hover) !important;
    color: var(--text) !important;
}

/* Bootstrap alerts */
.alert {
    color: var(--text) !important;
}

/* Bootstrap dropdown */
.dropdown-menu {
    background-color: var(--surface) !important;
    border-color:     var(--border) !important;
    color:            var(--text) !important;
}
.dropdown-item {
    color: var(--text-muted) !important;
}
.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--surface-2) !important;
    color:            var(--text) !important;
}
.dropdown-divider { border-color: var(--border) !important; }

/* Bootstrap btn-close: invert in dark, normal in light */
html[data-theme="light"] .btn-close  { filter: none; }
html[data-theme="dark"]  .btn-close  { filter: invert(1) grayscale(100%) brightness(200%); }
/* system fallback (JS normally resolves system before CSS runs) */
html[data-theme="system"] .btn-close { filter: none; }
@media (prefers-color-scheme: dark) {
    html[data-theme="system"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
}

/* Bootstrap badge text visibility */
.badge.text-bg-success { background-color: var(--success-light) !important; color: var(--success) !important; }
.badge.text-bg-danger  { background-color: var(--danger-light)  !important; color: var(--danger)  !important; }
.badge.text-bg-warning { background-color: var(--warning-light) !important; color: var(--warning) !important; }
.badge.text-bg-info    { background-color: var(--info-light)    !important; color: var(--info)    !important; }
.badge.text-bg-primary { background-color: var(--primary-light) !important; color: var(--primary) !important; }

/* Input group addons */
.input-group-text {
    background-color: var(--surface) !important;
    border-color:     var(--border) !important;
    color:            var(--text-muted) !important;
}

/* Pagination */
.page-item .page-link {
    background-color: var(--surface-2) !important;
    border-color:     var(--border) !important;
    color:            var(--text-muted) !important;
}
.page-item.active .page-link {
    background-color: var(--primary) !important;
    border-color:     var(--primary) !important;
    color:            #fff !important;
}
.page-item:not(.active) .page-link:hover {
    background-color: var(--surface-hover) !important;
    color:            var(--text) !important;
}
.page-item.disabled .page-link {
    background-color: var(--surface-2) !important;
    color:            var(--text-faint) !important;
}

/* Progress bars */
.progress {
    background-color: var(--surface-2) !important;
}

/* Text utility overrides for both themes */
.text-dark    { color: var(--text) !important; }
.text-body    { color: var(--text) !important; }
.text-secondary { color: var(--text-muted) !important; }

/* Ensure hardcoded inline colors override with theme vars where possible */
h1, h2, h3, h4, h5, h6 { color: var(--text); }
p, span, label, td, th, li { color: inherit; }
small, .small { color: var(--text-muted); }

/* ── Custom Modal Overlay (used across all pages) ───────────────── */
.modal-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0, 0, 0, 0.55);
    z-index:         1060;
    display:         none;
    align-items:     center;
    justify-content: center;
    padding:         16px;
}
.modal-overlay .modal {
    display:          block !important;
    position:         relative;
    background:       var(--surface);
    border:           1px solid var(--border);
    border-radius:    var(--radius-lg);
    box-shadow:       0 20px 60px rgba(0,0,0,.25);
    max-height:       90vh;
    overflow-y:       auto;
    max-width:        100%;
    width:            500px;
}


/* DataTable + Export Modal styles moved to: /assets/datatable/datatable.css */

/* Suppress browser-native password reveal / clear icons (Edge, Chrome) */
input[type=password]::-ms-reveal,
input[type=password]::-ms-clear { display: none !important; }
input[type=password]::-webkit-contacts-auto-fill-button,
input[type=password]::-webkit-credentials-auto-fill-button { visibility: hidden; pointer-events: none; position: absolute; }


/* ================================================================
   TOM SELECT — Theme overrides (matches app CSS variables)
================================================================ */
.ts-wrapper.form-control,
.ts-wrapper.form-select { padding:0; }

.ts-wrapper .ts-control {
    background    : var(--surface-2) !important;
    border        : 1.5px solid var(--border) !important;
    border-radius : var(--radius-sm, 6px) !important;
    color         : var(--text) !important;
    min-height    : 38px;
    padding       : 6px 10px !important;
    box-shadow    : none !important;
    gap           : 4px;
    cursor        : pointer;
}
.ts-wrapper.focus .ts-control {
    border-color : #6366f1 !important;
    box-shadow   : 0 0 0 3px rgba(99,102,241,.15) !important;
}
.ts-wrapper .ts-control input {
    color         : var(--text) !important;
    font-size     : 13px;
    line-height   : 1.5;
    background    : transparent !important;
}
.ts-wrapper .ts-control input::placeholder { color: var(--text-muted); }

/* Arrow */
.ts-wrapper:not(.multi) .ts-control::after {
    border-top-color : var(--text-muted) !important;
}

/* Selected item (single) */
.ts-wrapper:not(.multi) .ts-control .item {
    color     : var(--text) !important;
    font-size : 13px;
}

/* Selected pills (multi) */
.ts-wrapper.multi .ts-control .item {
    background    : rgba(99,102,241,.15) !important;
    border        : 1px solid rgba(99,102,241,.3) !important;
    color         : #6366f1 !important;
    border-radius : 5px !important;
    font-size     : 12px;
    font-weight   : 600;
}
.ts-wrapper.multi .ts-control .item .remove {
    color        : #6366f1 !important;
    border-left  : 1px solid rgba(99,102,241,.3) !important;
}

/* Dropdown */
.ts-dropdown {
    background    : var(--surface) !important;
    border        : 1.5px solid var(--border) !important;
    border-radius : 10px !important;
    box-shadow    : 0 8px 24px rgba(0,0,0,.18) !important;
    margin-top    : 4px !important;
    overflow      : hidden;
}
.ts-dropdown .ts-dropdown-content {
    max-height : 230px;
    padding    : 4px 0;
}
.ts-dropdown .option {
    color        : var(--text) !important;
    font-size    : 13px;
    padding      : 9px 14px !important;
    transition   : background .1s;
}
.ts-dropdown .option:hover,
.ts-dropdown .option.active {
    background : rgba(99,102,241,.12) !important;
    color      : var(--text) !important;
}
.ts-dropdown .option.selected {
    background  : rgba(99,102,241,.15) !important;
    font-weight : 600;
    color       : var(--primary) !important;
}
/* Search input inside dropdown */
.ts-dropdown .ts-dropdown-header,
.ts-dropdown-header { padding: 8px 10px; border-bottom: 1px solid var(--border); }

/* dropdown_input plugin — dedicated instant-search box pinned at the top of an open dropdown */
.ts-wrapper .dropdown-input {
    background    : var(--surface-2) !important;
    color         : var(--text) !important;
    border        : none !important;
    border-bottom : 1.5px solid var(--border) !important;
    padding       : 10px 14px !important;
    font-size     : 13px;
    border-radius : 10px 10px 0 0 !important;
}
.ts-wrapper .dropdown-input::placeholder { color: var(--text-muted); opacity: 1; }
.ts-wrapper.focus .ts-dropdown .dropdown-input { border-bottom-color: #6366f1 !important; outline: 0; }

/* No results */
.ts-dropdown .no-results {
    color      : var(--text-muted);
    font-size  : 12px;
    text-align : center;
    padding    : 14px;
}
/* Optgroup labels */
.ts-dropdown .optgroup-header {
    font-size   : 10px;
    font-weight : 700;
    color       : var(--text-muted);
    text-transform : uppercase;
    letter-spacing : .06em;
    padding     : 8px 14px 4px;
}

/* ── Row action icons (edit / delete / view) — one consistent, always-horizontal style ─────────────── */
.row-actions { display:inline-flex; align-items:center; justify-content:flex-end; gap:6px; white-space:nowrap; }
.row-actions form { display:inline-flex; margin:0; }
.row-act { width:34px; height:34px; padding:0; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
           border-radius:10px; border:1px solid var(--border); background:var(--surface-2); color:var(--text-muted);
           font-size:13px; line-height:1; text-decoration:none; cursor:pointer; transition:background .15s, color .15s, border-color .15s, transform .12s; }
.row-act:hover { transform:translateY(-1px); }
.row-act.edit:hover   { background:color-mix(in srgb,var(--primary,#2563eb) 14%,transparent); color:var(--primary,#2563eb); border-color:color-mix(in srgb,var(--primary,#2563eb) 45%,var(--border)); }
.row-act.view:hover   { background:color-mix(in srgb,#0ea5e9 14%,transparent); color:#0ea5e9; border-color:color-mix(in srgb,#0ea5e9 45%,var(--border)); }
.row-act.del          { color:#ef4444; }
.row-act.del:hover    { background:rgba(239,68,68,.14); border-color:rgba(239,68,68,.5); }
.row-act:focus-visible { outline:2px solid var(--primary,#2563eb); outline-offset:2px; }