/* ---------- Base / design tokens ---------- */
:root {
   color-scheme: dark;
   --bg: #080f1d;
   --sidebar: #0d1729;
   --panel: #101c30;
   --panel-hover: #14233a;
   --border: #243650;
   --text: #edf3ff;
   --muted: #93a5c0;
   --green: #46e6ad;
   --green-dark: #123c3a;
   --red: #ff667b;
   --radius: 16px;
   --shadow: 0 12px 32px rgb(0 0 0 / 12%);
}

* {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
}

body {
   margin: 0;
   background: var(--bg);
   color: var(--text);
   font-family:
      Inter,
      ui-sans-serif,
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      sans-serif;
   font-size: 14px;
   line-height: 1.5;
}

button,
input,
select {
   font: inherit;
}

button,
select {
   cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
   outline: 2px solid var(--green);
   outline-offset: 3px;
}

a {
   color: inherit;
   text-decoration: none;
}

h1,
h2,
h3,
p {
   margin-top: 0;
}

h1 {
   margin-bottom: 6px;
   font-size: clamp(1.45rem, 2vw, 2rem);
   letter-spacing: -0.04em;
}

h2 {
   margin-bottom: 0;
   font-size: 1rem;
   letter-spacing: -0.02em;
}

h3 {
   margin-bottom: 6px;
   font-size: 0.9rem;
}

p {
   margin-bottom: 0;
}

.muted {
   color: var(--muted);
}

.small {
   font-size: 0.78rem;
}

.accent,
.positive {
   color: var(--green);
}

.negative {
   color: var(--red);
}

.eyebrow {
   color: var(--green);
   font-size: 0.7rem;
   font-weight: 750;
   letter-spacing: 0.14em;
   margin-bottom: 8px;
}

.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

/* ---------- Main layout ---------- */
.app-shell {
   min-height: 100vh;
}

.sidebar {
   position: fixed;
   inset: 0 auto 0 0;
   z-index: 5;
   display: flex;
   flex-direction: column;
   width: 235px;
   padding: 28px 18px 20px;
   background: var(--sidebar);
   border-right: 1px solid var(--border);
}

.brand {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 0 7px;
   font-size: 1.05rem;
   font-weight: 800;
   letter-spacing: -0.03em;
}

.brand-icon {
   display: grid;
   place-items: center;
   width: 36px;
   height: 36px;
   border-radius: 12px;
   background: var(--green);
   color: #07201d;
   font-size: 1.2rem;
}

.main-nav {
   display: grid;
   gap: 8px;
   margin-top: 42px;
}

.nav-link {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 12px 14px;
   border-radius: 10px;
   color: #c3d0e5;
   transition:
      background 0.2s,
      color 0.2s;
}

.nav-link span {
   width: 20px;
   font-size: 1.15rem;
   text-align: center;
}

.nav-link:hover,
.active {
   background: var(--green-dark);
   color: var(--green);
}

.sidebar-note {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   margin-top: auto;
   padding: 15px 12px;
   border: 1px solid var(--border);
   border-radius: 12px;
   color: #c6d3e8;
   font-size: 0.8rem;
}

.note-icon {
   color: var(--green);
   font-size: 1.25rem;
}

.main-content {
   max-width: 1800px;
   margin-left: 235px;
   padding: 30px clamp(20px, 3vw, 46px) 24px;
}

.page-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   margin-bottom: 26px;
}

.month-picker,
.sort-control {
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 9px 12px;
   border: 1px solid var(--border);
   border-radius: 10px;
   background: var(--panel);
}

select,
input {
   min-width: 0;
   color: var(--text);
   background: transparent;
   border: 0;
}

select option {
   background: var(--panel);
   color: var(--text);
}

.month-picker select {
   max-width: 145px;
}

.summary-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 16px;
   margin-bottom: 22px;
}

.summary-card,
.panel {
   min-width: 0;
   background: var(--panel);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   box-shadow: var(--shadow);
}

.summary-card {
   padding: 20px;
}

.balance-card {
   border-color: #18534f;
}

.income-card {
   border-color: #1b5145;
}

.expense-card {
   border-color: #58303f;
}

.summary-top {
   display: flex;
   align-items: center;
   gap: 13px;
}

.summary-icon {
   display: grid;
   flex: 0 0 42px;
   place-items: center;
   width: 42px;
   height: 42px;
   border-radius: 13px;
   background: #153f3b;
   color: var(--green);
   font-size: 1.35rem;
   font-weight: 750;
}

.income-card .summary-icon {
   background: #183d32;
}

.expense-card .summary-icon {
   background: #482333;
   color: var(--red);
}

.summary-card h2 {
   margin-top: 3px;
   font-size: clamp(1.05rem, 1.6vw, 1.4rem);
   font-variant-numeric: tabular-nums;
}

.summary-foot {
   margin-top: 17px;
   font-size: 0.78rem;
}

.separator {
   margin: 0 7px;
   color: var(--muted);
}

/* ---------- Panels and forms ---------- */
.panel {
   padding: 20px;
   margin-bottom: 20px;
}

.panel-heading {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   margin-bottom: 22px;
}

.heading-title {
   display: flex;
   align-items: center;
   gap: 12px;
   min-width: 0;
}

.heading-icon {
   display: grid;
   flex: 0 0 34px;
   place-items: center;
   width: 34px;
   height: 34px;
   border-radius: 11px;
   background: #173d39;
   color: var(--green);
   font-size: 1.3rem;
}

.heading-title h2 {
   margin-bottom: 3px;
}

.type-switch {
   display: flex;
   gap: 4px;
   padding: 4px;
   border-radius: 11px;
   background: #1a2940;
}

.type-button {
   padding: 8px 15px;
   border: 0;
   border-radius: 8px;
   color: #b7c5da;
   background: transparent;
}

.type-button.selected {
   background: var(--green);
   color: #06231d;
   font-weight: 750;
}

.form-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 15px;
}

.field {
   display: grid;
   gap: 8px;
   color: #d9e3f3;
   font-size: 0.8rem;
}

.field input,
.field select,
.search-box,
.category-filter select {
   width: 100%;
   min-height: 43px;
   padding: 10px 12px;
   border: 1px solid #344762;
   border-radius: 9px;
   background: #0c1729;
   color: var(--text);
}

.field input::placeholder,
.search-box input::placeholder {
   color: #7e91ac;
}

.field input[type="date"] {
   color-scheme: dark;
}

.form-actions {
   display: flex;
   justify-content: flex-end;
   margin-top: 18px;
}

.primary-button {
   padding: 11px 17px;
   border: 0;
   border-radius: 10px;
   background: var(--green);
   color: #06231d;
   font-weight: 800;
   transition:
      filter 0.2s,
      transform 0.2s;
}

.primary-button:hover {
   filter: brightness(1.08);
   transform: translateY(-1px);
}

/* ---------- Transaction table ---------- */
.transactions-heading {
   margin-bottom: 17px;
}

.toolbar {
   display: flex;
   align-items: end;
   gap: 12px;
   margin-bottom: 16px;
}

.search-box {
   display: flex;
   align-items: center;
   gap: 9px;
   flex: 1;
}

.search-box span {
   font-size: 1.25rem;
   color: var(--muted);
}

.search-box input {
   width: 100%;
   outline: 0;
}

.category-filter {
   display: grid;
   gap: 5px;
   width: 190px;
}

.category-filter select {
   min-height: 42px;
}

.table-wrap {
   width: 100%;
   overflow-x: auto;
}

table {
   width: 100%;
   border-collapse: collapse;
   text-align: left;
   white-space: nowrap;
}

thead {
   background: #0d182a;
   color: #9fb0c9;
   font-size: 0.75rem;
}

th,
td {
   padding: 14px 12px;
   border-bottom: 1px solid #223149;
}

th {
   font-weight: 650;
}

td {
   font-size: 0.8rem;
}

tbody tr {
   transition: background 0.15s;
}

tbody tr:hover {
   background: var(--panel-hover);
}

.amount-income {
   color: var(--green);
   font-weight: 750;
}

.amount-expense {
   color: var(--red);
   font-weight: 750;
}

.row-action {
   padding: 5px 7px;
   margin-right: 5px;
   border: 1px solid var(--border);
   border-radius: 7px;
   background: transparent;
   color: var(--muted);
}

.row-action:hover {
   color: var(--green);
   border-color: var(--green);
}

.row-action.delete:hover {
   color: var(--red);
   border-color: var(--red);
}

.empty-row td {
   padding: 34px 12px;
   text-align: center;
   color: var(--muted);
}

.table-footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 12px;
   padding-top: 15px;
}

.pagination {
   display: flex;
   align-items: center;
   gap: 12px;
}

.pagination button {
   width: 30px;
   height: 30px;
   border: 1px solid var(--border);
   border-radius: 8px;
   background: transparent;
   color: var(--text);
}

.pagination button:disabled {
   opacity: 0.35;
   cursor: not-allowed;
}

.action-buttons {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
}

.action-buttons button {
   border: none;
   background: transparent;
   padding: 6px;
   border-radius: 6px;
   cursor: pointer;
   font-size: 16px;
   transition: background 0.2s ease;
}

.edit-btn:hover {
   background: #e0f2fe;
}

.delete-btn:hover {
   background: #fee2e2;
}

.text-green {
   color: #22c55e;
   /* Tailwind-er green-500 type ba nijer choice-er green */
}

.text-red {
   color: #ef4444;
   /* Tailwind-er red-500 type ba nijer choice-er red */
}

/* ---------- Charts / monthly summary ---------- */
.lower-grid {
   display: grid;
   grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.8fr);
   gap: 20px;
   align-items: start;
}

.chart-panel,
.side-summary {
   margin-bottom: 20px;
}

.chart-legend {
   display: flex;
   gap: 14px;
   color: var(--muted);
   font-size: 0.75rem;
}

.chart-legend span,
.legend-list span {
   display: inline-flex;
   align-items: center;
   gap: 7px;
}

.legend-dot {
   display: inline-block;
   width: 9px;
   height: 9px;
   border-radius: 3px;
}

.income-dot {
   background: var(--green);
}

.expense-dot {
   background: var(--red);
}

.chart-placeholder {
   display: flex;
   gap: 12px;
   height: 230px;
   padding-top: 12px;
}

.chart-y-labels {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding-bottom: 24px;
   color: var(--muted);
   font-size: 0.68rem;
}

.chart-area {
   position: relative;
   display: flex;
   flex: 1;
   min-width: 0;
}

.chart-grid-lines {
   position: absolute;
   inset: 0 0 24px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.chart-grid-lines i {
   border-top: 1px solid #26364d;
}

.bar-groups {
   position: relative;
   z-index: 1;
   display: flex;
   justify-content: space-around;
   align-items: stretch;
   width: 100%;
   height: 100%;
}

.bar-group {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-end;
   gap: 7px;
   min-width: 30px;
   color: var(--muted);
   font-size: 0.7rem;
}

.bar-pair {
   display: flex;
   align-items: flex-end;
   justify-content: center;
   gap: 5px;
   width: 100%;
   height: calc(100% - 24px);
}

#bar1,
#bar2 {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-end;
   gap: 5px;
   width: 100%;
   height: 100%;
}

.bar-group .bar {
   display: block;
   width: clamp(10px, 1.5vw, 20px);
   min-height: 3px;
   border-radius: 4px 4px 0 0;
}

.income-bar {
   background: var(--green);
}

.expense-bar {
   background: var(--red);
}

.chart-note {
   margin-top: 12px;
}

.side-summary > .muted {
   margin-top: -12px;
}

.donut-wrap {
   display: grid;
   place-items: center;
   padding: 22px 0;
}

.donut-chart {
   display: grid;
   place-items: center;
   width: 155px;
   aspect-ratio: 1;
   border-radius: 50%;
   background: conic-gradient(var(--green) 0 100%, var(--red) 66% 100%);
}

.donut-center {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 112px;
   aspect-ratio: 1;
   border-radius: 50%;
   background: var(--panel);
}

.donut-center strong {
   font-size: 1rem;
}

.donut-center span {
   margin-top: 4px;
   color: var(--muted);
   font-size: 0.7rem;
}

.legend-list {
   display: grid;
   gap: 12px;
}

.legend-list > div {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 10px;
   font-size: 0.78rem;
}

.legend-list strong {
   font-size: 0.75rem;
}

.tip-box {
   display: flex;
   gap: 12px;
   margin-top: 22px;
   padding: 14px;
   border: 1px solid #4b4526;
   border-radius: 12px;
   background: #24241c;
}

.tip-icon {
   color: #f3d25b;
   font-size: 1.35rem;
}

.tip-box h3 {
   color: #f3d25b;
}

.page-footer {
   padding: 8px 0 4px;
   text-align: center;
}

/* ---------- Responsive layouts ---------- */
@media (min-width: 1500px) {
   .summary-card {
      padding: 24px;
   }

   .panel {
      padding: 24px;
   }
}

@media (max-width: 1150px) {
   .sidebar {
      width: 200px;
   }

   .main-content {
      margin-left: 200px;
      padding-inline: 22px;
   }

   .summary-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .expense-card {
      grid-column: span 2;
   }

   .form-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .lower-grid {
      grid-template-columns: minmax(0, 1fr);
   }
}

@media (max-width: 760px) {
   .sidebar {
      position: static;
      width: auto;
      padding: 15px 16px 10px;
      border-right: 0;
      border-bottom: 1px solid var(--border);
   }

   .brand {
      padding: 0;
   }

   .main-nav {
      display: flex;
      gap: 6px;
      overflow-x: auto;
      margin-top: 14px;
      padding-bottom: 4px;
   }

   .nav-link {
      flex: 0 0 auto;
      padding: 9px 12px;
      font-size: 0.8rem;
   }

   .nav-link span {
      width: auto;
   }

   .sidebar-note {
      display: none;
   }

   .main-content {
      margin-left: 0;
      padding: 22px 14px;
   }

   .page-header {
      align-items: flex-start;
      flex-direction: column;
      gap: 14px;
   }

   .month-picker {
      align-self: stretch;
      justify-content: space-between;
   }

   .summary-grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
   }

   .expense-card {
      grid-column: auto;
   }

   .summary-card {
      padding: 17px;
   }

   .panel {
      padding: 15px;
      border-radius: 13px;
   }

   .panel-heading {
      align-items: flex-start;
      flex-direction: column;
      gap: 13px;
   }

   .transactions-heading {
      flex-direction: column;
   }

   .type-switch {
      align-self: stretch;
   }

   .type-button {
      flex: 1;
   }

   .form-grid {
      grid-template-columns: minmax(0, 1fr);
   }

   .form-actions .primary-button {
      width: 100%;
   }

   .toolbar {
      align-items: stretch;
      flex-direction: column;
   }

   .category-filter {
      width: 100%;
   }

   .table-wrap table {
      min-width: 650px;
   }

   .chart-legend {
      flex-wrap: wrap;
   }

   .chart-placeholder {
      height: 190px;
   }

   .chart-panel .panel-heading {
      gap: 10px;
   }

   .chart-panel .heading-title {
      flex-wrap: wrap;
   }

   .table-footer {
      align-items: flex-start;
   }
}

@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
   }
}

/* Modal Overlay Background */
.modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.4);
   backdrop-filter: blur(5px);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1000;
}

/* Hidden Class to toggle visibility */
.modal-overlay.hidden {
   display: none;
}

/* Modal Box */
.modal-content {
   background: #212121;
   width: 100%;
   max-width: 400px;
   border-radius: 12px;
   padding: 20px 24px;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
   animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
   from {
      opacity: 0;
      transform: translateY(-20px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* Modal Header */
.modal-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
   border-bottom: 1px solid #eee;
   padding-bottom: 10px;
}

.modal-header h3 {
   margin: 0;
   font-size: 1.25rem;
   color: #f1f1f1;
}

.close-btn {
   background: none;
   border: none;
   font-size: 1.5rem;
   cursor: pointer;
   color: #888;
}

.close-btn:hover {
   color: #ccc;
}

/* Form Groups inside Modal */
.form-group {
   margin-bottom: 15px;
}

.form-group label {
   display: block;
   font-size: 0.85rem;
   font-weight: 600;
   color: #555;
   margin-bottom: 5px;
}

.form-group input,
.form-group select {
   width: 100%;
   padding: 10px 12px;
   border: 1px solid #ddd;
   border-radius: 8px;
   font-size: 0.95rem;
   outline: none;
   transition: border-color 0.2s;
   box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus {
   border-color: #4f46e5;
}

/* Action Buttons */
.modal-actions {
   display: flex;
   gap: 10px;
   margin-top: 20px;
}

.btn {
   flex: 1;
   padding: 10px;
   border: none;
   border-radius: 8px;
   font-weight: 600;
   cursor: pointer;
   font-size: 0.95rem;
}

.btn-secondary {
   background: #f3f4f6;
   color: #4b5563;
}

.btn-secondary:hover {
   background: #e5e7eb;
}

.btn-primary {
   background: #4f46e5;
   color: #ffffff;
}

.btn-primary:hover {
   background: #4338ca;
}