@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* =====================================================
   DARK MODE (default)
   ===================================================== */
:root,
[data-bs-theme="dark"] {
  --color-bg:         #0d0d0d;
  --color-surface:    #161616;
  --color-surface-2:  #1f1f1f;
  --color-border:     #2a2a2a;
  --color-accent:     #00b4d8;
  --color-accent-dim: #0090a8;
  --color-text:       #f0f0f0;
  --color-text-muted: #888888;
  --color-text-hint:  #555555;
  --color-success:    #22c55e;
  --color-danger:     #ef4444;
  --color-warning:    #f59e0b;
  --color-shadow:     rgba(0,0,0,0.4);
}

/* =====================================================
   LIGHT MODE
   ===================================================== */
[data-bs-theme="light"] {
  --color-bg:         #f0f2f5;
  --color-surface:    #ffffff;
  --color-surface-2:  #f8f9fa;
  --color-border:     #dee2e6;
  --color-accent:     #0094b3;
  --color-accent-dim: #007a96;
  --color-text:       #1a1a2e;
  --color-text-muted: #6c757d;
  --color-text-hint:  #adb5bd;
  --color-success:    #16a34a;
  --color-danger:     #dc2626;
  --color-warning:    #d97706;
  --color-shadow:     rgba(0,0,0,0.08);
}

/* =====================================================
   BASE
   ===================================================== */
* { box-sizing: border-box; }

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  transition: background-color 0.2s, color 0.2s;
}

/* =====================================================
   NAVBAR
   ===================================================== */
.navbar {
  background-color: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-border);
  height: 56px;
  transition: background-color 0.2s;
}
.navbar-brand {
  color: var(--color-text) !important;
  font-size: 17px;
  letter-spacing: -0.3px;
}
.navbar-brand .accent { color: var(--color-accent); }

.nav-link { color: var(--color-text-muted) !important; font-size: 13.5px; }
.nav-link:hover { color: var(--color-text) !important; }
.nav-link.active {
  color: var(--color-accent) !important;
  border-bottom: 2px solid var(--color-accent);
}

/* Mobile nav collapse */
@media (max-width: 767px) {
  .navbar-collapse {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: 8px 0 12px;
    margin: 0 -12px;
    padding-left: 16px;
  }
  .nav-link.active { border-bottom: none; border-left: 2px solid var(--color-accent); padding-left: 12px; }
  .navbar { height: auto; min-height: 56px; }
}

/* Theme toggle button */
.theme-toggle-btn {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text-muted);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  transition: all 0.15s;
  flex-shrink: 0;
}
.theme-toggle-btn:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* User avatar */
.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #000;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Page wrapper */
.page-wrapper {
  padding-top: 56px;
  min-height: 100vh;
}

/* =====================================================
   CARDS
   ===================================================== */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  transition: background-color 0.2s;
}
.card-header {
  background-color: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
}

/* Metric cards */
.card-metric {
  border-left: 3px solid var(--color-accent) !important;
  background-color: var(--color-surface-2) !important;
}
.card-metric .metric-owner {
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.card-metric .metric-net {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}

/* =====================================================
   TABLE
   ===================================================== */
.table {
  --bs-table-bg: transparent;
  --bs-table-hover-bg: var(--color-surface-2);
  margin-bottom: 0;
}
.table thead th {
  background-color: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-color: var(--color-border);
  padding: 10px 12px;
  white-space: nowrap;
}
.table tbody tr:hover td { background-color: var(--color-surface-2) !important; }
.table td {
  border-color: var(--color-border);
  color: var(--color-text);
  padding: 10px 12px;
  vertical-align: middle;
}

/* Amount colors */
.amount-in  { color: var(--color-success); font-weight: 600; }
.amount-out { color: var(--color-danger);  font-weight: 600; }

/* =====================================================
   FORMS
   ===================================================== */
.form-control, .form-select {
  background-color: var(--color-surface-2) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
  font-size: 13.5px;
  transition: border-color 0.15s;
}
.form-control::placeholder { color: var(--color-text-hint); }
.form-control:focus, .form-select:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 2px rgba(0,180,216,0.15) !important;
  background-color: var(--color-surface-2) !important;
  color: var(--color-text) !important;
}
.form-label {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 4px;
}
.form-text { color: var(--color-text-hint); font-size: 11px; }

/* Radio type toggle */
.btn-group-type .btn-check:checked + .btn-outline-success {
  background: var(--color-success); color: #fff; border-color: var(--color-success);
}
.btn-group-type .btn-check:checked + .btn-outline-danger {
  background: var(--color-danger);  color: #fff; border-color: var(--color-danger);
}
[data-bs-theme="dark"] .btn-outline-success { color: var(--color-success); border-color: var(--color-success); }
[data-bs-theme="dark"] .btn-outline-danger  { color: var(--color-danger);  border-color: var(--color-danger);  }

/* =====================================================
   BUTTONS
   ===================================================== */
.btn-cash-in  { background: var(--color-success); color: #fff; font-weight: 600; border: none; }
.btn-cash-in:hover  { background: #15803d; color: #fff; }
.btn-cash-out { background: var(--color-danger);  color: #fff; font-weight: 600; border: none; }
.btn-cash-out:hover { background: #b91c1c; color: #fff; }
.btn-accent   { background: var(--color-accent);  color: #000; font-weight: 600; border: none; }
.btn-accent:hover   { background: var(--color-accent-dim); color: #000; }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.btn-ghost:hover { background: var(--color-surface-2); color: var(--color-text); border-color: var(--color-border); }

/* Action buttons in table */
.btn-action {
  padding: 4px 8px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1;
}
.btn-action:hover         { background: var(--color-surface-2); color: var(--color-text); }
.btn-action.danger:hover  { color: var(--color-danger); border-color: var(--color-danger); }

/* =====================================================
   PAGE HEADER
   ===================================================== */
.page-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--color-surface);
}
.page-header h1 {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  color: var(--color-text);
}

/* =====================================================
   FILTER PANEL
   ===================================================== */
.filter-panel {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 14px 20px;
}

/* =====================================================
   SUMMARY BAR
   ===================================================== */
.summary-bar {
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  padding: 10px 20px;
  display: flex;
  gap: 20px;
  font-size: 13px;
  align-items: center;
  flex-wrap: wrap;
}
.summary-bar .label { color: var(--color-text-muted); margin-right: 3px; font-size: 11px; }
.summary-bar .val   { font-weight: 600; }

/* =====================================================
   OFFCANVAS
   ===================================================== */
.offcanvas {
  background-color: var(--color-surface) !important;
  border-left: 1px solid var(--color-border) !important;
  width: 420px !important;
}
.offcanvas-header {
  border-bottom: 1px solid var(--color-border);
  padding: 16px 20px;
}
.offcanvas-title { font-weight: 600; font-size: 15px; color: var(--color-text); }
.offcanvas-body  { padding: 20px; overflow-y: auto; }

/* =====================================================
   DROPDOWN
   ===================================================== */
.dropdown-menu {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 16px var(--color-shadow);
}
.dropdown-item { color: var(--color-text); font-size: 13.5px; }
.dropdown-item:hover { background: var(--color-surface-2); color: var(--color-text); }
.dropdown-divider { border-color: var(--color-border); }
.dropdown-item-text { color: var(--color-text-muted) !important; }

/* =====================================================
   PAGINATION
   ===================================================== */
.pagination .page-link {
  background: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text-muted);
  font-size: 13px;
}
.pagination .page-link:hover { background: var(--color-accent); color: #000; border-color: var(--color-accent); }
.pagination .page-item.active .page-link {
  background: var(--color-accent); border-color: var(--color-accent); color: #000; font-weight: 600;
}
.pagination .page-item.disabled .page-link { background: var(--color-surface); color: var(--color-text-hint); }

/* =====================================================
   ALERTS
   ===================================================== */
.alert-success {
  background: rgba(34,197,94,0.12);
  border-color: rgba(34,197,94,0.3);
  color: var(--color-success);
}
.alert-danger {
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.3);
  color: var(--color-danger);
}

/* =====================================================
   LOGIN PAGE
   ===================================================== */
.login-page {
  min-height: 100vh;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 36px 32px;
}
.login-logo {
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 6px;
  color: var(--color-text);
}
.login-logo span { color: var(--color-accent); }
.login-subtitle  { text-align: center; color: var(--color-text-muted); font-size: 13px; margin-bottom: 28px; }

/* =====================================================
   CATEGORY BADGE
   ===================================================== */
.cat-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.small-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  display: inline-block;
  font-weight: 500;
}

/* =====================================================
   REFERENCE LINK
   ===================================================== */
.ref-link { color: var(--color-accent); font-size: 14px; }
.ref-link:hover { color: var(--color-text); }

/* =====================================================
   SECTION TITLE
   ===================================================== */
.section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

/* =====================================================
   MISC UTILITIES
   ===================================================== */
.text-accent    { color: var(--color-accent); }
.text-muted-sm  { color: var(--color-text-muted); font-size: 12px; }
.bg-surface     { background-color: var(--color-surface) !important; }
.bg-surface-2   { background-color: var(--color-surface-2) !important; }
.border-custom  { border-color: var(--color-border) !important; }

/* =====================================================
   MOBILE FAB
   ===================================================== */
@media (max-width: 767px) {
  .mobile-fab {
    position: fixed;
    bottom: 20px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1040;
  }
  .mobile-fab .btn {
    border-radius: 50px;
    padding: 12px 22px;
    box-shadow: 0 4px 16px var(--color-shadow);
    font-size: 13px;
    font-weight: 600;
  }

  /* Offcanvas full-width on mobile */
  .offcanvas { width: 100% !important; }

  /* Page header stacks nicely */
  .page-header { padding: 12px 16px; }
  .page-header h1 { font-size: 15px; }

  /* Summary bar wraps */
  .summary-bar { padding: 8px 16px; gap: 12px; font-size: 12px; }

  /* Table: smaller text, tighter padding */
  .table td, .table thead th { padding: 8px 10px; font-size: 12px; }

  /* Filter panel */
  .filter-panel { padding: 12px 16px; }

  /* Card padding */
  .card { border-radius: 8px; }

  /* Login card on small screens */
  .login-card { padding: 28px 20px; }

  /* Dashboard cards */
  .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }
}

/* =====================================================
   LIGHT MODE SPECIFIC OVERRIDES
   ===================================================== */
[data-bs-theme="light"] .navbar      { box-shadow: 0 1px 8px rgba(0,0,0,0.08); }
[data-bs-theme="light"] .table thead th { background-color: #f1f3f5; }
[data-bs-theme="light"] .dropdown-menu  { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
[data-bs-theme="light"] .navbar-toggler-icon {
  filter: invert(1) brightness(0.3);
}
[data-bs-theme="light"] .offcanvas { border-left: 1px solid var(--color-border) !important; }
[data-bs-theme="light"] .btn-ghost  { color: #333; }
[data-bs-theme="light"] .btn-action { color: #555; }
[data-bs-theme="light"] .card-metric { box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
[data-bs-theme="light"] .page-header  { box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
[data-bs-theme="light"] .modal-content { background: var(--color-surface) !important; border-color: var(--color-border) !important; }
/* Close button: invert in dark, normal in light */
[data-bs-theme="dark"]  .btn-close-themed { filter: invert(1); }
[data-bs-theme="light"] .btn-close-themed { filter: none; }