/* Extracted from index.css L2872-L3026: Rabo / monthly tracking visual system */

/* =================================================================
   TOMLEDGER — Monthly Tracking visual system
   Build 20260311.1055
   Scope: #monthly panel/tile/stat/table styles only.
   Calendar appearance lives in core/calendar-styles.js.
   ================================================================= */

#monthly {
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.4;
  position: relative;
  isolation: isolate;
}

/* Subtle top-left light source */
#monthly::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 35% at 18% 0%, rgba(76,125,255,0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* Page title */
#monthly h2 {
  font-size: 34px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #E8EDFF !important;
  margin-bottom: 28px !important;
}

#monthly h3 { font-size: 16px; font-weight: 600; color: #E8EDFF; }
#monthly h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: #556080; margin: 28px 0 12px; }

/* Panel cards */
#monthly .card {
  background: rgba(10,14,28,0.52);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 24px 28px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 20px 60px rgba(0,0,0,0.5);
  margin-bottom: 20px;
}
#monthly .card::before { display: none; }
#monthly .card:hover {
  transform: none;
  background: rgba(14,20,38,0.62);
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 20px 60px rgba(0,0,0,0.5);
}
#monthly .card-header { border-bottom: 1px solid rgba(255,255,255,0.07); padding-bottom: 18px; margin-bottom: 22px; }
#monthly .card-title  { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: #E8EDFF; }

/* Year / Month tiles */
#monthly .month-card {
  background: linear-gradient(145deg, #141C30 0%, #0C1222 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 28px 24px 26px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 12px 40px rgba(0,0,0,0.65);
  cursor: pointer;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
#monthly .month-card::before,
#monthly .month-card::after { display: none; }

#monthly .month-card:hover {
  transform: translateY(-3px);
  background: linear-gradient(145deg, #192340 0%, #101A30 100%);
  border-color: rgba(76,125,255,0.28);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 18px 50px rgba(0,0,0,0.7);
}
#monthly .month-card.active {
  background: linear-gradient(145deg, #1A2848 0%, #111E3A 100%);
  border-color: rgba(76,125,255,0.65);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 0 0 1px rgba(76,125,255,0.2),
    0 0 24px rgba(76,125,255,0.28),
    0 0 60px rgba(76,125,255,0.12),
    0 14px 44px rgba(0,0,0,0.65);
}

/* Year tiles — large year number */
#monthly .month-card[data-action="monthly-year"] .month-name {
  font-size: 38px !important;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #E8EDFF;
  margin-bottom: 8px;
  line-height: 1;
}
/* Month tiles — full month name must fit without clipping */
#monthly .month-card[data-action="monthly-month"] .month-name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #E8EDFF;
  margin-bottom: 6px;
  line-height: 1.2;
  word-break: break-word;
}
#monthly .month-summary { font-size: 12px; color: #6A7A9E; line-height: 1.7; }

/* Stat cards */
#monthly .stat-card {
  background: linear-gradient(145deg, #141D32 0%, #0E1628 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 13px;
  padding: 18px 20px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 6px 24px rgba(0,0,0,0.5);
}
#monthly .stat-card::before { display: none; }
#monthly .stat-card:hover   { transform: none; }
#monthly .stats-grid  { gap: 14px; margin-bottom: 28px; }
#monthly .stat-label  { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #556080; margin-bottom: 8px; }
#monthly .stat-value  { font-size: 26px; font-weight: 600; letter-spacing: -0.025em; color: #E8EDFF; line-height: 1.1; }

/* Table */
#monthly table { border-collapse: collapse; width: 100%; margin-bottom: 24px; }
#monthly table thead tr { background: rgba(255,255,255,0.03); }
#monthly table thead th { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: #556080; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,0.06); }
#monthly table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.04); }
#monthly table tbody tr:last-child { border-bottom: none; }
#monthly table tbody tr:hover { background: rgba(76,125,255,0.04); }
#monthly table tbody td { font-size: 13px; padding: 11px 14px; color: #E8EDFF; }

/* Light mode */
[data-theme="light"] #monthly::before { display: none; }
[data-theme="light"] #monthly h2 { color: #111827 !important; }
[data-theme="light"] #monthly .card,
[data-theme="light"] #monthly .month-card,
[data-theme="light"] #monthly .stat-card  { background: rgba(255,255,255,0.38) !important; backdrop-filter: blur(14px) !important; border-color: rgba(255,255,255,0.50) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.07) !important; }
[data-theme="light"] #monthly .month-card:hover { background: #F5F7FF !important; border-color: rgba(76,125,255,0.25) !important; }
[data-theme="light"] #monthly .month-card.active { background: #EEF2FF !important; border-color: rgba(76,125,255,0.5) !important; box-shadow: 0 0 0 1px rgba(76,125,255,0.15), 0 4px 20px rgba(0,0,0,0.08) !important; }
[data-theme="light"] #monthly .month-name,
[data-theme="light"] #monthly .card-title,
[data-theme="light"] #monthly .stat-value { color: #111827; }
[data-theme="light"] #monthly .stat-label,
[data-theme="light"] #monthly .month-summary,
[data-theme="light"] #monthly h4 { color: #6B7280; }
[data-theme="light"] #monthly table thead tr { background: #F3F5FA; }
[data-theme="light"] #monthly table thead th { color: #9CA3AF; border-color: rgba(0,0,0,0.06); }
[data-theme="light"] #monthly table tbody td { color: #111827; }

/* ── End ─────────────────────────────────────────────────── */