/* ===================================================================
   ROOT VARIABLES
   =================================================================== */
:root {
  --bg-base:      #0c0c10;
  --bg-surface:   #12121a;
  --bg-card:      #18181f;
  --bg-card-hover:#1e1e28;
  --border:       #252530;
  --border-light: #2e2e3e;

  --text-primary: #eeeef5;
  --text-secondary:#9898b5;
  --text-muted:   #50506a;

  --accent:       #f97316;
  --accent-hover: #ea6a0a;
  --accent-dim:   rgba(249,115,22,.12);
  --accent-glow:  rgba(249,115,22,.25);

  --cyan:         #22d3ee;
  --cyan-dim:     rgba(34,211,238,.12);
  --green:        #22c55e;
  --green-dim:    rgba(34,197,94,.12);
  --purple:       #a855f7;
  --purple-dim:   rgba(168,85,247,.12);
  --red:          #ef4444;
  --yellow:       #eab308;

  --sidebar-w:    220px;
  --radius:       12px;
  --radius-sm:    8px;
  --ease:         0.18s ease;
}

/* ===================================================================
   RESET & BASE
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.55;
}

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

/* ===================================================================
   APP SHELL
   =================================================================== */
.app-wrapper { display: flex; height: 100vh; overflow: hidden; }

.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app-content {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px;
}

/* ===================================================================
   SIDEBAR
   =================================================================== */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--text-primary);
}

.brand-icon {
  width: 30px; height: 30px;
  background: var(--accent);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 15px;
  flex-shrink: 0;
}

.sidebar-nav { padding: 10px 8px; flex: 1; }

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 500;
  transition: background var(--ease), color var(--ease);
  margin-bottom: 2px;
}

.sidebar-nav a i { font-size: 15px; width: 16px; text-align: center; }

.sidebar-nav a:hover { background: var(--bg-card); color: var(--text-primary); }
.sidebar-nav a.active { background: var(--accent-dim); color: var(--accent); }
.sidebar-nav a.active i { color: var(--accent); }

.sidebar-footer {
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
}

/* ===================================================================
   APP HEADER
   =================================================================== */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  flex-shrink: 0;
}

.page-title { font-size: 17px; font-weight: 700; color: var(--text-primary); }

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

/* ===================================================================
   BUTTONS
   =================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all var(--ease);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.4;
}

.btn:disabled { opacity: 0.4; pointer-events: none; }
.btn-sm { padding: 5px 11px; font-size: 12px; }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); color: #fff; }

.btn-outline {
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
}
.btn-outline:hover { border-color: var(--text-secondary); color: var(--text-primary); background: var(--bg-card-hover); }

.btn-ghost { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); }
.btn-ghost:hover { color: var(--text-primary); border-color: var(--border-light); background: var(--bg-card-hover); }

/* ===================================================================
   CARDS
   =================================================================== */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text-primary);
}

.card-header .card-header-sub { font-size: 12px; color: var(--text-muted); font-weight: 400; }

.card-body { padding: 18px; }

.card-footer {
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  background: transparent;
}

/* ===================================================================
   STAT CARDS
   =================================================================== */
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px 18px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--ease), transform var(--ease);
}

.stat-card:hover { border-color: var(--border-light); transform: translateY(-1px); }

.stat-strip {
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  border-radius: 12px 0 0 12px;
}

.stat-card.c-orange .stat-strip { background: var(--accent); }
.stat-card.c-cyan   .stat-strip { background: var(--cyan); }
.stat-card.c-green  .stat-strip { background: var(--green); }
.stat-card.c-purple .stat-strip { background: var(--purple); }

.stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.stat-value {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1;
  margin-bottom: 10px;
}

.stat-card.c-orange .stat-value { color: var(--accent); }
.stat-card.c-cyan   .stat-value { color: var(--cyan); }
.stat-card.c-green  .stat-value { color: var(--green); }
.stat-card.c-purple .stat-value { color: var(--purple); }

.stat-footer { display: flex; align-items: center; gap: 8px; }

.stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
}

.stat-badge.up   { background: var(--green-dim);  color: var(--green); }
.stat-badge.down { background: rgba(239,68,68,.12); color: var(--red); }
.stat-badge.neutral { background: rgba(255,255,255,.06); color: var(--text-muted); }

.stat-sub { font-size: 12px; color: var(--text-muted); }

/* ===================================================================
   FORMS
   =================================================================== */
.form-control, .form-select {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 7px 12px;
  font-size: 13px;
  width: 100%;
  outline: none;
  appearance: none;
  transition: border-color var(--ease), box-shadow var(--ease);
}

.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.form-control::placeholder { color: var(--text-muted); }
.form-control-sm, .form-select-sm { padding: 5px 10px; font-size: 12px; }
.form-control[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.5); cursor: pointer; }

/* select arrow */
.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='%23606078' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  padding-right: 30px;
}

/* ===================================================================
   TABLES
   =================================================================== */
.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }

thead th {
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  text-align: left;
}

tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 13.5px;
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--ease); cursor: default; }
tbody tr:hover td { background: var(--bg-card-hover); }
tbody tr.clickable { cursor: pointer; }
tbody tr td:last-child { cursor: default; }

.td-primary { font-weight: 600; color: var(--text-primary) !important; }
.td-amount  { font-weight: 700; color: var(--text-primary) !important; font-size: 14px; }
.td-sub     { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ===================================================================
   BADGES
   =================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2px;
  white-space: nowrap;
}

.badge-orange  { background: var(--accent-dim);  color: var(--accent); }
.badge-cyan    { background: var(--cyan-dim);    color: var(--cyan); }
.badge-green   { background: var(--green-dim);   color: var(--green); }
.badge-purple  { background: var(--purple-dim);  color: var(--purple); }
.badge-red     { background: rgba(239,68,68,.12); color: var(--red); }
.badge-gray    { background: rgba(255,255,255,.07); color: var(--text-secondary); }
.badge-yellow  { background: rgba(234,179,8,.12); color: var(--yellow); }

.badge-success { background: var(--green-dim);   color: var(--green); }
.badge-warning { background: rgba(234,179,8,.12); color: var(--yellow); }
.badge-danger  { background: rgba(239,68,68,.12); color: var(--red); }

/* ===================================================================
   ALERTS
   =================================================================== */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  border: 1px solid transparent;
  margin-bottom: 14px;
}

.alert-success { background: var(--green-dim);    border-color: rgba(34,197,94,.3);   color: var(--green); }
.alert-warning { background: rgba(234,179,8,.1);  border-color: rgba(234,179,8,.3);   color: var(--yellow); }
.alert-danger  { background: rgba(239,68,68,.1);  border-color: rgba(239,68,68,.3);   color: var(--red); }
.alert-info    { background: var(--cyan-dim);     border-color: rgba(34,211,238,.3);  color: var(--cyan); }

/* ===================================================================
   FILTER BAR
   =================================================================== */
.filter-bar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 16px;
}

.filter-bar .filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.filter-group { display: flex; flex-direction: column; gap: 4px; }
.filter-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }

/* ===================================================================
   CHART HOVER HEADER
   =================================================================== */
.chart-header { margin-bottom: 12px; }
.chart-hover-value {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--text-primary);
  line-height: 1;
  min-height: 32px;
}
.chart-hover-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  min-height: 16px;
  transition: all .1s;
}

/* ===================================================================
   DETAIL VIEW
   =================================================================== */
.detail-pair {
  display: flex;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.detail-pair:last-child { border-bottom: none; }
.detail-key {
  flex: 0 0 110px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  padding-top: 1px;
}
.detail-val { flex: 1; font-size: 13.5px; color: var(--text-primary); }

/* ===================================================================
   BREADCRUMB
   =================================================================== */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--text-primary); }
.breadcrumb i { font-size: 10px; }

/* ===================================================================
   SPINNER
   =================================================================== */
.spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.1);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===================================================================
   STATUS DOT
   =================================================================== */
.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.dot-green  { background: var(--green); box-shadow: 0 0 5px var(--green); }
.dot-yellow { background: var(--yellow); }
.dot-red    { background: var(--red); }

/* ===================================================================
   SCROLLBAR
   =================================================================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-surface); }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ===================================================================
   UTILITY
   =================================================================== */
.d-none      { display: none !important; }
.d-flex      { display: flex; }
.d-grid      { display: grid; }
.flex-1      { flex: 1; }
.items-center{ align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 20px; }
.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: 4px; }
.mb-2  { margin-bottom: 8px; }
.mb-3  { margin-bottom: 16px; }
.mb-4  { margin-bottom: 24px; }
.mt-2  { margin-top: 8px; }
.mt-3  { margin-top: 16px; }
.mt-4  { margin-top: 24px; }
.p-0   { padding: 0 !important; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.text-sm   { font-size: 12px; }
.text-muted{ color: var(--text-muted); }
.text-right{ text-align: right; }
.text-center { text-align: center; }
.w-100 { width: 100%; }

.col-2-equal { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.col-3-equal { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.col-4-equal { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.col-7-5     { display: grid; grid-template-columns: 7fr 5fr; gap: 20px; }
.col-2-3     { display: grid; grid-template-columns: 2fr 3fr; gap: 20px; }

/* attachment */
.attachment-img { max-width: 100%; border-radius: var(--radius-sm); display: block; }

/* Quick filter click targets */
.quick-filter-link {
  cursor: pointer;
  border-radius: 4px;
  padding: 1px 3px;
  margin: -1px -3px;
  transition: background var(--ease);
  display: inline-block;
}
.quick-filter-link:hover {
  background: var(--accent-dim);
  color: var(--accent);
}

/* Receipt detail form layout overrides */
.detail-pair { align-items: flex-start; }
.detail-pair label.detail-key { padding-top: 6px; }
.detail-pair .form-control,
.detail-pair .form-select { flex: 1; }
.btn-danger { background: var(--red); color: #fff; border: none; }
.btn-danger:hover { background: #c0392b; }