/* ============================================================
   FinanceBoard — app.css  (version finale complète)
   ============================================================ */

/* ── Variables ──────────────────────────────────────────────── */
:root {
  --sidebar-w:   260px;
  --topbar-h:    60px;
  --color-bg:    #f1f5f9;
  --color-surface: #ffffff;
  --color-border: #e2e8f0;
  --color-text:  #0f172a;
  --color-muted: #64748b;
  --primary:     #3b82f6;
  --success:     #10b981;
  --danger:      #ef4444;
  --warning:     #f59e0b;
  --info:        #06b6d4;
  --purple:      #8b5cf6;
  --orange:      #f97316;
  --sidebar-bg:  #0f172a;
  --sidebar-hover: rgba(255,255,255,.07);
  --sidebar-active: rgba(59,130,246,.18);
  --sidebar-text: #94a3b8;
  --sidebar-active-text: #93c5fd;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,.1);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.12);
  --transition: all .2s ease;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  margin: 0; padding: 0;
  min-height: 100vh;
  display: flex;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  background: var(--sidebar-bg);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 200;
  transition: transform .25s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

.sidebar-brand {
  display: flex;
  align-items: center;
  padding: 18px 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.brand-icon { font-size: 24px; }
.brand-text { color:#fff; font-weight:700; font-size:15px; letter-spacing:-.3px; margin-left:10px; }

.sidebar-nav { list-style:none; margin:0; padding:8px 8px; flex:1; }
.sidebar-nav li { margin-bottom:1px; }

.nav-separator {
  height: auto;
  margin: 10px 12px 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.nav-section-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.25);
  display: block;
  padding: 0 4px;
}

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: var(--sidebar-text);
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  transition: var(--transition);
  white-space: nowrap;
}
.sidebar-nav .nav-link i { font-size: 15px; flex-shrink:0; }
.sidebar-nav .nav-link:hover  { background: var(--sidebar-hover); color:#e2e8f0; }
.sidebar-nav .nav-link.active { background: var(--sidebar-active); color: var(--sidebar-active-text); }

.sidebar-footer {
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.avatar-circle {
  width:32px; height:32px;
  background: var(--primary);
  color:#fff;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; flex-shrink:0;
}

/* ── Main wrapper ───────────────────────────────────────────── */
.main-wrapper { flex:1; display:flex; flex-direction:column; min-width:0; min-height:100vh; }

/* ── Topbar ─────────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 100;
  gap: 12px;
  box-shadow: var(--shadow-sm);
}
.topbar-title { font-size:15px; font-weight:600; color:var(--color-text); margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Page content ───────────────────────────────────────────── */
.page-content { flex:1; padding:24px; max-width:1400px; width:100%; }
.page-heading  { font-size:20px; font-weight:700; margin:0; color:var(--color-text); }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card-header { background:var(--color-surface); border-bottom:1px solid var(--color-border); padding:13px 20px; font-size:13.5px; }
.card-body   { padding: 20px; }
.card-footer { background:#fafafa; border-top:1px solid var(--color-border); padding:11px 20px; }

/* ── KPI Cards ──────────────────────────────────────────────── */
.kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s;
  position: relative;
  overflow: hidden;
}
.kpi-card::before { content:''; position:absolute; top:0; left:0; width:4px; height:100%; }
.kpi-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.kpi-card.kpi-green::before  { background: var(--success); }
.kpi-card.kpi-red::before    { background: var(--danger);  }
.kpi-card.kpi-blue::before   { background: var(--primary); }
.kpi-card.kpi-purple::before { background: var(--purple);  }
.kpi-card.kpi-orange::before { background: var(--orange);  }
.kpi-icon { font-size:22px; width:46px; height:46px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.kpi-green  .kpi-icon { background:#d1fae5; color:var(--success); }
.kpi-red    .kpi-icon { background:#fee2e2; color:var(--danger);  }
.kpi-blue   .kpi-icon { background:#dbeafe; color:var(--primary); }
.kpi-purple .kpi-icon { background:#ede9fe; color:var(--purple);  }
.kpi-orange .kpi-icon { background:#ffedd5; color:var(--orange);  }
.kpi-body     { flex:1; min-width:0; }
.kpi-label    { font-size:11px; font-weight:600; color:var(--color-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.kpi-value    { font-size:22px; font-weight:800; color:var(--color-text); line-height:1.1; }
.kpi-currency { font-size:13px; font-weight:600; color:var(--color-muted); }
.kpi-sub      { font-size:11px; color:var(--color-muted); margin-top:4px; }

/* ── Stat mini ──────────────────────────────────────────────── */
.stat-mini { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:14px 16px; border-left-width:3px; }
.stat-mini.stat-red    { border-left-color: var(--danger); }
.stat-mini.stat-green  { border-left-color: var(--success); }
.stat-mini.stat-orange { border-left-color: var(--orange); }
.stat-mini-label { font-size:11px; font-weight:600; color:var(--color-muted); text-transform:uppercase; letter-spacing:.04em; }
.stat-mini-value { font-size:18px; font-weight:800; color:var(--color-text); }

/* ── Tables ─────────────────────────────────────────────────── */
.table { --bs-table-hover-bg:#f8fafc; font-size:13.5px; }
.table thead th { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--color-muted); background:#f8fafc; border-bottom:1px solid var(--color-border); padding:9px 12px; white-space:nowrap; }
.table > :not(caption) > * > * { padding:9px 12px; vertical-align:middle; }
.table tbody tr { border-bottom:1px solid #f1f5f9; }
.table tbody tr:last-child { border-bottom:none; }
.table tbody tr:hover { background:#f8fafc; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn { font-size:13px; font-weight:500; border-radius:var(--radius-sm); padding:7px 14px; transition:var(--transition); }
.btn-primary { background:var(--primary); border-color:var(--primary); }
.btn-primary:hover { background:#2563eb; border-color:#2563eb; }
.btn-success { background:var(--success); border-color:var(--success); }
.btn-danger  { background:var(--danger);  border-color:var(--danger); }
.btn-lg { padding:10px 20px; font-size:14px; }
.btn-sm { padding:5px 11px; font-size:12px; }
.btn-xs { padding:3px 8px; font-size:11px; border-radius:6px; }

/* ── Forms ──────────────────────────────────────────────────── */
.form-label { font-size:12.5px; font-weight:600; color:var(--color-muted); margin-bottom:5px; }
.form-control, .form-select {
  border:1px solid #cbd5e1; border-radius:var(--radius-sm);
  font-size:13.5px; padding:8px 12px;
  color:var(--color-text); background:var(--color-surface);
  transition:border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(59,130,246,.12); outline:none; }
.form-control-lg { padding:10px 14px; font-size:15px; }
.form-check-input:checked { background-color:var(--primary); border-color:var(--primary); }
.invalid-feedback { font-size:12px; }

/* ── Badges ─────────────────────────────────────────────────── */
.badge { font-size:11px; font-weight:600; padding:3px 8px; border-radius:6px; letter-spacing:.02em; }

/* ── Alerts ─────────────────────────────────────────────────── */
.alert-flash { border-radius:var(--radius-md); margin-bottom:20px; font-size:13.5px; }

/* ── Pagination ─────────────────────────────────────────────── */
.pagination { gap:4px; }
.page-link { border-radius:var(--radius-sm)!important; border:1px solid var(--color-border); color:var(--color-text); font-size:13px; padding:5px 10px; }
.page-link:hover { background:#f1f5f9; color:var(--primary); }
.page-item.active .page-link { background:var(--primary); border-color:var(--primary); }

/* ── Account ────────────────────────────────────────────────── */
.account-list { display:flex; flex-direction:column; }
.account-item { display:flex; align-items:center; gap:12px; padding:12px 20px; text-decoration:none; color:var(--color-text); border-bottom:1px solid #f1f5f9; transition:background .15s; }
.account-item:last-child { border-bottom:none; }
.account-item:hover { background:#f8fafc; }
.account-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.account-card { transition:transform .15s, box-shadow .15s; }
.account-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.account-type-icon { width:44px; height:44px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:20px; }
.account-balances { display:flex; flex-direction:column; gap:6px; }
.balance-row { display:flex; justify-content:space-between; align-items:center; }

/* ── Reminders ──────────────────────────────────────────────── */
.reminder-list { display:flex; flex-direction:column; }
.reminder-item { display:flex; align-items:center; gap:10px; padding:10px 20px; border-bottom:1px solid #f1f5f9; font-size:13px; }
.reminder-item:last-child { border-bottom:none; }
.reminder-item.reminder-overdue { background:#fff5f5; }
.reminder-row { padding:13px 20px; border-bottom:1px solid var(--color-border); transition:background .15s; }
.reminder-row:last-child { border-bottom:none; }
.reminder-row:hover { background:#f8fafc; }
.reminder-row.reminder-row-overdue { background:#fff5f5; }
.reminder-priority-bar { width:3px; height:40px; border-radius:2px; flex-shrink:0; }

/* ── Type selector (ledger form) ────────────────────────────── */
.type-selector { display:flex; flex-wrap:wrap; gap:8px; }
.type-option { display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 14px; border:1.5px solid var(--color-border); border-radius:var(--radius-sm); cursor:pointer; font-size:11.5px; font-weight:500; color:var(--color-muted); transition:var(--transition); min-width:80px; text-align:center; user-select:none; }
.type-option i { font-size:18px; }
.type-option:hover { border-color:var(--primary); color:var(--primary); background:#eff6ff; }
.type-option.active { border-color:var(--primary); background:#eff6ff; color:var(--primary); }

/* ── Login ──────────────────────────────────────────────────── */
.login-box { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-lg); padding:40px; width:100%; max-width:420px; backdrop-filter:blur(10px); }
.login-logo { font-size:52px; margin-bottom:8px; }
.login-input { background:rgba(255,255,255,.08)!important; border:1px solid rgba(255,255,255,.15)!important; color:#fff!important; border-radius:var(--radius-sm)!important; }
.login-input::placeholder { color:rgba(255,255,255,.4)!important; }
.login-input:focus { background:rgba(255,255,255,.12)!important; border-color:var(--primary)!important; box-shadow:0 0 0 3px rgba(59,130,246,.25)!important; }

/* ── Sidebar overlay ────────────────────────────────────────── */
.sidebar-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:199; display:none; }
.sidebar-overlay.show { display:block!important; }

/* ── Nav pills ──────────────────────────────────────────────── */
.nav-pills .nav-link { font-size:13px; padding:6px 14px; color:var(--color-muted); border-radius:var(--radius-sm); }
.nav-pills .nav-link.active { background:var(--primary); color:#fff; }
.nav-pills .nav-link:hover:not(.active) { background:#f1f5f9; color:var(--color-text); }

/* ── Misc ───────────────────────────────────────────────────── */
.fw-mono { font-family:'SFMono-Regular',Consolas,'Liberation Mono',monospace; }
.opacity-60 { opacity:.6; }
hr { border-color:var(--color-border); }

/* ══════════════════════════════════════════════════════
   TASKS
   ══════════════════════════════════════════════════════ */
.task-list-group {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.task-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid #f1f5f9;
  transition: background .12s;
}
.task-row:last-child { border-bottom: none; }
.task-row:hover      { background: #f8fafc; }
.task-row.task-done  { opacity: .55; }

.task-checkbox-btn {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
  padding: 0;
}
.task-checkbox-btn:hover    { border-color: var(--success); background: #d1fae5; }
.task-checkbox-btn.checked  { background: var(--success); border-color: var(--success); color: #fff; }
.task-checkbox-btn.inprogress { border-color: var(--primary); background: #dbeafe; }

.priority-dot           { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.priority-dot-critical  { background: var(--danger); }
.priority-dot-high      { background: var(--warning); }
.priority-dot-medium    { background: var(--primary); }
.priority-dot-low       { background: #94a3b8; }

.task-title { flex-grow:1; font-size:13.5px; font-weight:500; line-height:1.4; }
.task-title.done-text { text-decoration:line-through; color:#94a3b8; }
.task-meta { display:flex; gap:6px; align-items:center; flex-shrink:0; font-size:11px; }
.task-actions { display:flex; gap:4px; align-items:center; flex-shrink:0; }
.task-actions .btn { padding:2px 6px; font-size:11px; }
.overdue-badge { color:var(--danger); font-weight:600; }

/* Priority pick (form) */
.priority-pick { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border:2px solid var(--pc); border-radius:8px; cursor:pointer; font-size:13px; font-weight:500; color:var(--pc); background:transparent; transition:all .15s; user-select:none; }
.priority-pick:hover { background:var(--pb); }
.priority-pick.active { background:var(--pb); font-weight:700; }
.priority-pick .dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* ══════════════════════════════════════════════════════
   NOTES
   ══════════════════════════════════════════════════════ */
.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  align-items: start;
}
.note-card {
  border-radius: 10px;
  padding: 14px;
  position: relative;
  border: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  transition: transform .15s, box-shadow .15s;
  cursor: pointer;
  min-height: 100px;
  word-break: break-word;
}
.note-card:hover { transform:translateY(-3px) rotate(-.5deg); box-shadow:0 8px 20px rgba(0,0,0,.12); z-index:2; }
.note-card-title   { font-size:13.5px; font-weight:700; margin-bottom:6px; line-height:1.3; color:#1e293b; }
.note-card-excerpt { font-size:12px; color:#475569; line-height:1.5; max-height:80px; overflow:hidden; }
.note-card-footer  { display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding-top:8px; border-top:1px solid rgba(0,0,0,.06); gap:6px; }
.note-card-actions { display:none; gap:3px; }
.note-card:hover .note-card-actions { display:flex; }
.note-card .btn-xs { padding:2px 5px; font-size:10px; }
.note-card-tag     { font-size:10px; background:rgba(0,0,0,.06); padding:1px 6px; border-radius:10px; color:#475569; }
.note-type-badge   { font-size:10px; padding:2px 6px; border-radius:6px; background:rgba(0,0,0,.07); color:#475569; }
.note-pin-indicator { position:absolute; top:8px; right:8px; font-size:14px; color:var(--warning); }

/* Color picker (note card) */
.note-color-picker { display:none; gap:5px; flex-wrap:wrap; margin-top:8px; padding-top:8px; border-top:1px dashed rgba(0,0,0,.1); }
.note-card:hover .note-color-picker { display:flex; }
.color-dot { width:18px; height:18px; border-radius:50%; border:2px solid rgba(0,0,0,.15); cursor:pointer; padding:0; transition:transform .1s; }
.color-dot:hover,.color-dot.active { transform:scale(1.3); border-color:#374151; }

/* Color pick (form) */
.color-pick-btn { width:28px; height:28px; border-radius:50%; border:2px solid rgba(0,0,0,.15); cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; transition:transform .1s,border-color .1s; color:#374151; flex-shrink:0; }
.color-pick-btn:hover,.color-pick-btn.active { transform:scale(1.25); border-color:#374151!important; }

/* Note view */
.note-view-card { border:1px solid rgba(0,0,0,.08)!important; border-radius:14px!important; box-shadow:0 4px 20px rgba(0,0,0,.08); }
.note-content-text { font-size:15px; line-height:1.7; color:#334155; white-space:pre-wrap; }
.note-code-block { background:#1e293b; color:#e2e8f0; padding:16px; border-radius:8px; font-family:'SFMono-Regular',Consolas,monospace; font-size:13px; overflow-x:auto; line-height:1.6; }
.note-link-block { display:flex; align-items:center; background:rgba(59,130,246,.08); border:1px solid rgba(59,130,246,.2); border-radius:8px; padding:14px; }
.color-pick-sm { width:18px; height:18px; border-radius:50%; border:2px solid rgba(0,0,0,.12); cursor:pointer; padding:0; transition:transform .1s; }
.color-pick-sm:hover,.color-pick-sm.active { transform:scale(1.3); border-color:#374151; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .sidebar { position:fixed; left:0; top:0; height:100vh; transform:translateX(-100%); z-index:300; }
  .sidebar.mobile-open { transform:translateX(0); box-shadow:var(--shadow-lg); }
  .main-wrapper { width:100%; }
  .page-content { padding:16px; }
  .topbar { padding:0 16px; }
  .kpi-value { font-size:18px; }
  .notes-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
@media (max-width: 575.98px) {
  .page-content  { padding:12px; }
  .kpi-card      { padding:14px; gap:10px; }
  .kpi-value     { font-size:16px; }
  .kpi-icon      { width:38px; height:38px; font-size:18px; }
  .type-option   { min-width:70px; padding:8px 10px; font-size:11px; }
  .login-box     { padding:28px 20px; }
  .card-body     { padding:14px; }
  .card-header   { padding:11px 14px; }
  .page-heading  { font-size:17px; }
  .notes-grid    { grid-template-columns: 1fr 1fr; }
}
@media print {
  .sidebar,.topbar,.btn,.alert,#sidebarClose { display:none!important; }
  .main-wrapper { width:100%; }
  .page-content { padding:0; }
}