:root {
  --mc-navy: #102634;
  --mc-navy-soft: #24404d;
  --mc-green: #128657;
  --mc-green-dark: #0d6944;
  --mc-lime: #76bd32;
  --mc-mint: #e9f6ef;
  --mc-surface: #ffffff;
  --mc-canvas: #f4f7f2;
  --mc-border: #dce8e1;
  --mc-muted: #64776e;
  --mc-shadow: 0 12px 35px rgba(16, 38, 52, .08);
  --bs-primary: #128657;
  --bs-primary-rgb: 18, 134, 87;
  --bs-link-color: #0f7950;
  --bs-link-hover-color: #0a5b3c;
  --bs-body-color: #102634;
  --bs-border-color: #dce8e1;
}

html { font-size: 14px; min-height: 100%; }
@media (min-width: 768px) { html { font-size: 16px; } }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  color: var(--mc-navy);
  background:
    radial-gradient(circle at 4% 5%, rgba(118, 189, 50, .09), transparent 25rem),
    radial-gradient(circle at 95% 20%, rgba(18, 134, 87, .08), transparent 30rem),
    var(--mc-canvas);
  font-family: "Segoe UI Variable", "Aptos", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.app-shell { width: min(calc(100% - 2rem), 1440px); margin-inline: auto; }
.app-main { min-height: calc(100vh - 11rem); padding-block: 2rem 3rem; }

.app-header {
  position: sticky;
  z-index: 1030;
  top: 0;
  border-bottom: 1px solid rgba(220, 232, 225, .9);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 4px 24px rgba(16, 38, 52, .05);
  backdrop-filter: blur(16px);
}
.app-header .navbar { min-height: 4.6rem; padding: .55rem 0; }
.app-header .app-shell { position: relative; }
.app-brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--mc-navy); text-decoration: none; }
.app-brand:hover { color: var(--mc-navy); }
.app-brand-mark {
  display: block;
  width: 2.85rem;
  height: 2.45rem;
  flex: 0 0 2.85rem;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(16, 38, 52, .12));
}
.app-nav-link {
  display: block;
  padding: .65rem .9rem;
  border: 0;
  border-radius: .8rem;
  color: #41554b;
  background: transparent;
  font-weight: 650;
  text-decoration: none;
  transition: color .16s ease, background .16s ease, transform .16s ease;
}
.app-nav-link:hover { color: var(--mc-green-dark); background: var(--mc-mint); transform: translateY(-1px); }
.app-nav-link.active { color: #fff; background: linear-gradient(135deg, var(--mc-green), #38a54f); box-shadow: 0 7px 18px rgba(18, 134, 87, .2); }
.app-logout { width: 100%; }
.navbar-toggler { border: 1px solid var(--mc-border); border-radius: .8rem; background: #fff; }
@media (max-width: 991.98px) {
  .navbar-toggler { margin-left: auto; }
  .navbar-collapse { position: absolute; z-index: 1040; top: calc(100% + .55rem); right: 0; width: min(20rem, calc(100vw - 1.1rem)); padding: .65rem; border: 1px solid var(--mc-border); border-radius: 1rem; background: rgba(255, 255, 255, .98); box-shadow: 0 18px 45px rgba(16, 38, 52, .18); }
  .navbar-collapse .navbar-nav { align-items: stretch !important; }
  .navbar-collapse .app-nav-link { width: 100%; }
}

.app-footer { margin-top: auto; padding: 1.35rem 0; border-top: 1px solid var(--mc-border); color: var(--mc-muted); background: rgba(255, 255, 255, .68); font-size: .88rem; }

h1, h2, h3, h4, h5, h6, .navbar-brand { color: var(--mc-navy); letter-spacing: -.035em; }
h1 { font-weight: 780; }
p.text-secondary, .text-secondary { color: var(--mc-muted) !important; }
a { color: var(--mc-green-dark); text-underline-offset: .16em; }
a:hover { color: #084f34; }

.card {
  border: 1px solid rgba(220, 232, 225, .95);
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--mc-shadow);
}
.card-header { border-color: var(--mc-border); border-radius: 1.1rem 1.1rem 0 0 !important; background: #f8fbf9; }
.list-group-item { border-color: var(--mc-border); background: transparent; }

.btn {
  border-radius: .75rem;
  font-weight: 680;
  letter-spacing: -.01em;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--mc-green);
  --bs-btn-border-color: var(--mc-green);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--mc-green-dark);
  --bs-btn-hover-border-color: var(--mc-green-dark);
  --bs-btn-active-bg: #095b3a;
  background-image: linear-gradient(135deg, var(--mc-green), #43a946);
  box-shadow: 0 7px 16px rgba(18, 134, 87, .18);
}
.btn-outline-primary {
  --bs-btn-color: var(--mc-green-dark);
  --bs-btn-border-color: #9ccdb7;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--mc-green);
  --bs-btn-hover-border-color: var(--mc-green);
}
.btn-outline-secondary { --bs-btn-color: #41584d; --bs-btn-border-color: #bdcec5; --bs-btn-hover-bg: var(--mc-navy); --bs-btn-hover-border-color: var(--mc-navy); }
.btn-link { color: var(--mc-green-dark); }
.nav-pills .nav-link { border-radius: .75rem; color: var(--mc-green-dark); font-weight: 650; }
.nav-pills .nav-link.active { background: linear-gradient(135deg, var(--mc-green), #43a946); box-shadow: 0 6px 15px rgba(18, 134, 87, .18); }

.form-control, .form-select, .input-group-text {
  min-height: 2.8rem;
  border-color: #cddbd3;
  border-radius: .72rem;
  background-color: rgba(255, 255, 255, .96);
}
.input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: #54ac7e;
  box-shadow: 0 0 0 .22rem rgba(18, 134, 87, .13);
}
.form-check-input:checked { border-color: var(--mc-green); background-color: var(--mc-green); }
.form-label, legend { color: #31483d; font-weight: 650; }
.form-text { color: var(--mc-muted); }

.table { --bs-table-color: var(--mc-navy); --bs-table-hover-bg: rgba(233, 246, 239, .7); margin-bottom: 0; background: #fff; }
.table > :not(caption) > * > * { padding: .85rem .8rem; border-bottom-color: #e3ece6; }
.table thead th { color: #667b70; background: #f5f9f6; font-size: .72rem; letter-spacing: .055em; text-transform: uppercase; white-space: nowrap; }
.table-responsive { border-radius: 1rem; box-shadow: 0 8px 28px rgba(16, 38, 52, .06); }
.card .table-responsive { border-radius: 1.1rem; box-shadow: none; }
.datatable-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; padding: 1rem; border: 1px solid var(--mc-border); border-radius: 1rem; background: rgba(255, 255, 255, .86); box-shadow: 0 8px 24px rgba(16, 38, 52, .05); }
.datatable-search { flex: 1 1 24rem; }
.datatable-filter { flex: 0 1 10rem; min-width: 9rem; }
.datatable-account-filter { min-width: 11rem; }
.datatable-account-filter .dropdown-menu { min-width: 15rem; max-height: 20rem; overflow-y: auto; }
.datatable-mobile-sort { display: none; }
.datatable-status { display: flex; align-items: center; gap: .45rem; margin-left: auto; padding-bottom: .45rem; color: var(--mc-muted); font-size: .86rem; white-space: nowrap; }
.datatable-actions { display: flex; gap: .5rem; }
.datatable .transaction-selector, .datatable #select-all { width: 1.35rem; height: 1.35rem; cursor: pointer; }
.dt-container { color: inherit; }
.dt-container table.dataTable > thead > tr > th { border-bottom-color: var(--mc-border); }

.alert { border: 0; border-radius: .9rem; box-shadow: 0 8px 20px rgba(16, 38, 52, .05); }
.alert-success { color: #0b5e3b; background: #dff4e8; }
.alert-info { color: #174d5a; background: #e3f3f4; }
.alert-danger { color: #842b36; background: #fbe7e9; }
.badge { padding: .42em .65em; border-radius: .55rem; font-weight: 650; }
.text-bg-light { color: #365044 !important; background: #edf5f0 !important; }
.modal-content { overflow: hidden; border: 1px solid var(--mc-border); border-radius: 1.1rem; box-shadow: 0 28px 75px rgba(16, 38, 52, .24); }
.modal-header, .modal-footer { border-color: var(--mc-border); background: #f8fbf9; }

.dashboard-period-picker { flex: 0 1 13rem; min-width: 0; }
.dashboard-settings-button { width: 2.8rem; height: 2.8rem; padding: 0; font-size: 1.25rem; line-height: 1; }
.dashboard-history-controls { padding-top: 1.25rem; border-top: 2px solid #c8ddd2; }
.dashboard-history-kicker { color: var(--mc-green-dark); font-weight: 800; letter-spacing: .09em; }
.dashboard-summary-card { overflow: hidden; border-top: 0; }
.dashboard-summary-card::before { display: block; height: .28rem; content: ''; background: linear-gradient(90deg, var(--mc-green), var(--mc-lime)); }
.dashboard-summary-value { font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 780; letter-spacing: -.04em; }
.dashboard-chart { position: relative; min-height: 22rem; }
.dashboard-chart--compact { min-height: 16rem; }
.dashboard-savings-card { position: relative; overflow: hidden; border: 1px solid #b9d8ca; background: linear-gradient(135deg, #fff 25%, #e8f7ed); }
.dashboard-savings-card::after { position: absolute; width: 18rem; height: 18rem; right: -7rem; top: -9rem; border-radius: 50%; content: ''; background: rgba(118, 189, 50, .13); pointer-events: none; }
.dashboard-savings-kicker { color: var(--mc-green); font-weight: 750; letter-spacing: .09em; }
.dashboard-savings-chart { position: relative; z-index: 1; min-height: 18rem; }
.dashboard-budget-card { border-color: #c9dfd4; }
.dashboard-budget-item { height: 100%; padding: 1rem; border: 1px solid var(--mc-border); border-radius: .85rem; background: #f9fcfa; }
.dashboard-budget-item--warning { border-color: #efb2b9; background: #fff7f8; }
.dashboard-budget-item .progress { height: .65rem; background: #e2ece6; }
.dashboard-budget-item .progress-bar { background: linear-gradient(90deg, var(--mc-green), var(--mc-lime)); }
.dashboard-empty { min-height: 12rem; display: grid; place-items: center; text-align: center; }
.dashboard-widget-choice { padding: .8rem .8rem .8rem 2.35rem; border: 1px solid var(--mc-border); border-radius: .8rem; background: #f9fcfa; }

.dashboard-detail-hero { padding: 1.7rem; border-radius: 1.15rem; color: #fff; background: linear-gradient(120deg, var(--mc-navy), #13766f); box-shadow: 0 16px 40px rgba(16, 38, 52, .2); }
.dashboard-detail-hero h1 { color: #fff; }
.dashboard-detail-back { color: #d9f4ee; }
.dashboard-detail-back:hover { color: #fff; }
.dashboard-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.dashboard-detail-card { border-color: color-mix(in srgb, var(--detail-color) 28%, var(--mc-border)); }
.dashboard-detail-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(4.5rem, 1fr); gap: .55rem; min-height: 11.8rem; overflow-x: auto; padding-bottom: .35rem; }
.dashboard-detail-year { display: flex; flex-direction: column; min-width: 0; }
.dashboard-detail-bar-space { height: 5.75rem; display: flex; align-items: end; margin-bottom: .35rem; border-radius: .5rem; background: #f3f7f4; overflow: hidden; }
.dashboard-detail-bar { width: 100%; min-height: .2rem; border-radius: .4rem .4rem 0 0; background: var(--detail-color); opacity: .88; }
.dashboard-detail-amount { display: block; overflow: hidden; color: #43534d; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-detail-count { color: var(--mc-green); font-size: .78rem; font-weight: 700; text-decoration: none; }
.dashboard-detail-count:hover { text-decoration: underline; }
.dashboard-pace-tree { border-top: 1px solid var(--mc-border); }
.dashboard-pace-row { display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(12rem, 1fr) minmax(9rem, auto); gap: .85rem; align-items: center; min-height: 4.2rem; padding: .35rem .35rem .35rem .65rem; border-bottom: 1px solid var(--mc-border); }
.dashboard-pace-row--parent { background: rgba(23, 107, 77, .035); font-weight: 700; }
.dashboard-pace-row--parent[data-category-toggle] { cursor: pointer; transition: background-color .15s ease; }
.dashboard-pace-row--parent[data-category-toggle]:hover { background: rgba(23, 107, 77, .08); }
.dashboard-pace-row--parent[data-category-toggle]:focus-visible { position: relative; z-index: 1; outline: 3px solid rgba(34, 160, 96, .28); outline-offset: -3px; }
.dashboard-pace-title { display: flex; align-items: center; min-width: 0; gap: .45rem; }
.dashboard-pace-toggle, .dashboard-pace-toggle-placeholder { width: 1.55rem; height: 1.55rem; flex: 0 0 1.55rem; }
.dashboard-pace-toggle { display: grid; place-items: center; padding: 0; border: 1px solid #b8d6c7; border-radius: .45rem; color: var(--mc-green-dark); background: #fff; line-height: 1; }
.dashboard-pace-chevron { width: .45rem; height: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.1rem) rotate(45deg); transition: transform .16s ease; }
.dashboard-pace-row[aria-expanded="true"] .dashboard-pace-chevron { transform: translateY(.1rem) rotate(225deg); }
.dashboard-pace-name { overflow: hidden; color: var(--mc-navy); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-pace-row--child .dashboard-pace-title { padding-left: 1.25rem; }
.dashboard-pace-row--child .dashboard-pace-name { font-weight: 500; }
.dashboard-pace-visual { min-width: 0; }
.dashboard-pace-track { position: relative; height: .9rem; overflow: visible; border: 1px solid #c7dacf; border-radius: 999px; background: #e9f1ed; }
.dashboard-pace-current-bar { height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg, #8ed0ae, #48a879); transition: width .25s ease; }
.dashboard-pace-row--over-target .dashboard-pace-current-bar { background: linear-gradient(90deg, #ef9b86, #d6533f); }
.dashboard-pace-status { min-height: 1.1rem; margin-top: .28rem; color: var(--mc-muted); font-size: .72rem; line-height: 1.2; }
.dashboard-pace-row--over-target .dashboard-pace-status { color: #b33b2d; font-weight: 700; }
.dashboard-pace-values { display: flex; flex-direction: column; align-items: end; font-size: .82rem; white-space: nowrap; }
.dashboard-pace-values strong { color: var(--mc-navy); font-size: .96rem; }
.dashboard-pace-budget-value { color: var(--mc-green-dark); font-size: .75rem; }
.assistant-status { width: 3rem; height: 3rem; flex: 0 0 3rem; display: grid; place-items: center; border-radius: .9rem; font-weight: 750; }
.assistant-status--done { color: #146c43; background: #d9f3e5; }
.assistant-status--pending { color: #8a4b08; background: #fff0cc; }
.automatic-assignment-icon { width: 2.15rem; padding-inline: 0; font-size: 1.05rem; }

.marketing-shell { min-height: calc(100vh - 12rem); margin-inline: 0; padding-block: clamp(2rem, 7vw, 6rem); }
.marketing-eyebrow { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: 1rem; padding: .45rem .75rem; border-radius: 999px; color: var(--mc-green-dark); background: var(--mc-mint); font-weight: 750; }
.marketing-title { max-width: 13ch; font-size: clamp(2.6rem, 6vw, 5.3rem); line-height: .98; letter-spacing: -.065em; }
.marketing-title span { color: var(--mc-green); }
.marketing-copy { max-width: 40rem; font-size: 1.2rem; }
.marketing-logo { width: min(12rem, 34vw); height: auto; filter: drop-shadow(0 18px 34px rgba(16, 38, 52, .12)); }
.login-logo { width: 8rem; height: auto; }
.signup-card, .auth-card { position: relative; overflow: hidden; }
.signup-card::before, .auth-card::before { display: block; height: .38rem; content: ''; background: linear-gradient(90deg, var(--mc-green), var(--mc-lime)); }
.auth-shell { min-height: calc(100vh - 13rem); display: grid; place-items: center; }
.landing-login-shell { min-height: calc(100vh - 8rem); }
.landing-login-card { width: min(100%, 29rem); }
.pwa-login-logo { width: 5rem; animation: pwa-login-pulse 1.4s ease-in-out infinite; }
@keyframes pwa-login-pulse { 0%, 100% { opacity: .65; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.05); } }
.auth-card { width: min(100%, 31rem); }

@media (prefers-reduced-motion: no-preference) {
  .card { animation: surface-in .35s ease both; }
  @keyframes surface-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .datatable-toolbar { flex-wrap: wrap; }
  .datatable-search { flex: 1 1 28rem; }
  .datatable-status { margin-left: 0; }
  .datatable-actions { margin-left: auto; }
  #transactions-table { min-width: 70rem; }
}

@media (max-width: 767.98px) {
  .app-shell { width: min(calc(100% - 1.1rem), 1440px); }
  .app-main { padding-top: 1.25rem; }
  h1 { font-size: clamp(1.8rem, 8vw, 2.35rem); }
  .transactions-heading { align-items: stretch !important; flex-direction: column; }
  .transactions-heading .btn { align-self: flex-start; }
  .datatable-toolbar { align-items: stretch; flex-direction: column; }
  .datatable-search { width: 100%; }
  .datatable-filter { width: 100%; max-width: none; }
  .datatable-mobile-sort { display: block; }
  .datatable-status { align-self: flex-start; margin-left: 0; padding-bottom: 0; }
  .datatable-actions { display: grid; grid-template-columns: 1fr; }
  .datatable-actions .btn { width: 100%; }
  .card { border-radius: .9rem; }
  .table > :not(caption) > * > * { padding: .7rem .55rem; }
  .dashboard-period-picker { flex: 1 1 auto; }
  .dashboard-history-controls, .dashboard-history-controls .dashboard-controls { align-items: stretch !important; flex-direction: column; }
  .dashboard-history-controls .dashboard-settings-button { align-self: end; }
  .dashboard-savings-card .card-body, .dashboard-chart + .card-body { padding: 1rem; }
  .dashboard-savings-card .align-items-baseline { align-items: flex-start !important; gap: .5rem; }
  .dashboard-savings-chart { min-height: 20rem; }
  .dashboard-chart { min-height: 19rem; }
  .dashboard-chart--compact { min-height: 15rem; }

  .table-responsive:has(#transactions-table) { overflow: visible; box-shadow: none; }
  #transactions-table, #transactions-table tbody { display: block; background: transparent; }
  #transactions-table thead { display: none; }
  #transactions-table tbody { display: grid; gap: .75rem; }
  #transactions-table tbody tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1rem; padding: 1rem; border: 1px solid var(--mc-border); border-radius: .9rem; background: #fff; box-shadow: 0 7px 20px rgba(16, 38, 52, .05); }
  #transactions-table tbody tr:has(.dt-empty) { display: block; }
  #transactions-table .dt-empty { padding: 1rem; text-align: center; }
  #transactions-table tbody td { display: block; min-width: 0; padding: .1rem 0; border: 0; }
  #transactions-table .transaction-select-cell { position: absolute; top: 1rem; right: 1rem; z-index: 1; }
  #transactions-table .transaction-date { grid-column: 1; grid-row: 1; padding-right: 2.5rem; color: var(--mc-muted); font-size: .84rem; }
  #transactions-table .transaction-amount { grid-column: 2; grid-row: 1; padding-right: 2.25rem; font-weight: 750; }
  #transactions-table .transaction-text { grid-column: 1 / -1; grid-row: 2; padding-right: 2rem; }
  #transactions-table .transaction-account { grid-column: 1 / -1; color: var(--mc-muted); font-size: .84rem; }
  #transactions-table .transaction-account::before { content: 'Konto: '; }
  #transactions-table .transaction-meta { grid-column: 1 / -1; margin-top: .25rem; padding-top: .5rem; border-top: 1px solid var(--mc-border); }
  #transactions-table .transaction-actions { grid-column: 1 / -1; margin-top: .5rem; }
  #transactions-table .transaction-actions .d-flex { display: grid !important; grid-template-columns: 1fr 1fr; }
  .dashboard-category-pace .card-body { padding: 1rem .85rem; }
  .dashboard-pace-row { grid-template-columns: minmax(0, 1fr) auto; gap: .55rem .8rem; min-height: 5.4rem; padding: .8rem .6rem; }
  .dashboard-pace-row--child .dashboard-pace-title { padding-left: 1.4rem; }
  .dashboard-pace-title { font-size: 1rem; }
  .dashboard-pace-toggle, .dashboard-pace-toggle-placeholder { width: 1.8rem; height: 1.8rem; flex-basis: 1.8rem; }
  .dashboard-pace-chevron { width: .52rem; height: .52rem; }
  .dashboard-pace-visual { grid-column: 1 / -1; grid-row: 2; }
  .dashboard-pace-track { height: 1rem; }
  .dashboard-pace-status { margin-top: .4rem; font-size: .82rem; }
  .dashboard-pace-values { grid-column: 2; grid-row: 1; font-size: .9rem; line-height: 1.3; }
  .dashboard-pace-values strong { font-size: 1.12rem; }
  .dashboard-pace-budget-value { font-size: .84rem; }
}
.project-badge {
  color: #0f684a;
  background: #e3f5ec;
  border: 1px solid #b9e2cf;
}

.category-tree-parent td {
  background: rgba(23, 107, 77, 0.035);
}

.category-tree-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-left: 1.25rem;
}

.category-tree-branch {
  color: var(--mc-green-600, #176b4d);
  font-size: 1.2rem;
  line-height: 1.25;
}