/* main.css - Dark Theme with CSS Variables */

@font-face {
	font-family: 'Inter';
	src: url('/fonts/Inter-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('/fonts/Inter-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Background colors */
	--bg-body: #1a1a1a;
	--bg-main: #2d2d2d;
	--bg-darker: #1f1f1f;
	--bg-input: #252525;
	--bg-hover: #353535;

	/* Border colors */
	--border: #3a3a3a;
	--border-hover: #4a4a4a;
	--border-focus: #5a5a5a;

	/* Text colors */
	--text-primary: #e0e0e0;
	--text-muted: #b0b0b0;
	--text-dark: #888;

	/* Accent colors */
	--accent-blue: #4a90e2;
	--accent-blue-hover: #357abd;
	--accent-purple: #a78bfa;

	/* Status colors */
	--success: #2d8659;
	--success-hover: #3a9e6a;
	--success-text: #a8e6cf;
	--success-bg: #1a4d3a;

	--danger: #862d2d;
	--danger-hover: #9a3a3a;
	--danger-text: #ff6b6b;
	--danger-bg: #4d1a1a;

	--warning: #8a6d3b;
	--warning-hover: #9a7d4b;
	--warning-text: #f5e6c8;
	--warning-bg: #4d3a1a;

	--info-bg: #1f3a4a;
	--info-text: #b8d4e8;

	/* Selection */
	--selected-bg: #1f3a4a;

	/* Shadows */
	--shadow: rgba(0, 0, 0, 0.5);
	--focus-shadow: rgba(74, 144, 226, 0.15);
}


  html, body {
      height: 100%;
      margin: 0;
      overflow: hidden;
  }


  body {
      background-color: var(--bg-body);
      font-family: 'Inter', Verdana, Arial, Helvetica, sans-serif;
      color: var(--text-primary);
      /* remove min-height: 90vh and overflow-x: hidden */
  }

.filter-buttons {
	padding-left: 20px;
}

 .material-symbols-outlined {
      vertical-align: middle;
  }

.bootstrap-select.btn-group .no-results {
	background: none !important;
}

.progress {
	background-color: #3b3b3b !important;
}

/* Tag form-group row — clickable to open tag picker */
.tag-group {
	cursor: pointer;
}

.tag-group:hover {
	background: var(--bg-hover);
}

/* Pills inline with the label */
.tag-pills {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	vertical-align: middle;
}

/* Tag pill — used in tag manager, picker, and expense/income forms */
.tag-pill {
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.82em;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.3px;
}

/* Smaller pill variant for row lists */
.tag-pill-sm {
	padding: 2px 7px;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 500;
	color: #fff;
	vertical-align: middle;
	white-space: nowrap;
}

.tag-pill-sm[data-tagid] {
	cursor: pointer;
}

/* Paid/credit/reminder summary rows — clickable toggles, never hidden by the toggle system */
.paid-summary-row,
.reminder-summary-row,
.credit-summary-row {
	cursor: pointer;
	font-style: italic;
	opacity: 0.75;
}
.paid-summary-row:hover,
.reminder-summary-row:hover,
.credit-summary-row:hover {
	opacity: 1;
}

/* Income privacy blur — toggled by Income filter button */
#IncomeContainer.income-blurred .CostColumn,
#IncomeContainer.income-blurred tfoot td,
#IncomeContainer.income-blurred .expense-amount,
#IncomeContainer.income-blurred .section-footer {
	filter: blur(6px);
	user-select: none;
}
  .category-pickers {
        display: flex;
        gap: 0;
  }

  /* Toggle button - pill style */
  .btn-toggle {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 12px;
        font-size: 9px;
        font-weight: normal;
        border: 1px solid var(--border-color);
        border-radius: 20px;
        background-color: var(--bg-darker);
        cursor: pointer;
  }

  .btn-toggle:hover {
        background-color: var(--bg-hover);
  }

  .DateColumn {
        white-space: nowrap;
  }

  /* ========== REMINDER ROWS ========== */


  .reminder-row .reminder-note {
      color: var(--text-muted);
      font-weight: normal;
      margin-left: 10px;
      font-style: normal;
  }


  .budget-grid {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
  }

  .budget-item {
      display: flex !important;
      justify-content: space-between;
      padding: 8px;
  }

/* Import rule items in recurring slideouts */
.importrule-item {
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 4px;
	margin-bottom: 6px;
	font-size: 14px;
	color: var(--text-primary);
	cursor: pointer;
	transition: border-color 0.2s;
}

.importrule-item:hover {
	border-color: var(--accent-blue);
}

.emoji {
	font-style: normal;
	font-size: 1.1em;
	line-height: 1;
	vertical-align: middle;
	display: inline-block;
	font-display: swap;
}

@font-face {
	font-family: 'Material Symbols Outlined';
	font-style: normal;
	font-weight: 400;
	src: url('/fonts/MaterialSymbolsOutlined.woff2') format('woff2');
	font-display: block;
}

  .verified-row {
      opacity: 0.6;
  }

  
.material-symbols-outlined {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ========== JARS SIDEBAR ========== */
/* Panels wrapper — holds view-budget and view-jars as siblings */
.panels-wrapper {
	display: contents;
}

#sumOfSelected {
	padding-right: 10px;
}

.HideTab {
	display: none !important;
}


.SideBarTitle {
	font-size: 16px;
	margin-left: 10px;
	font-weight: 800;
	margin-top: 10px;
	color: var(--text-primary);
}

.BackCover {
	position: fixed;
	z-index: 3;
	left: 0;
	top: 0;
	opacity: 0;
	visibility: hidden;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.75);
	transition: opacity 600ms, visibility 600ms;
}

.MenuItemHolder {
	overflow: hidden;
}

.ProcessBudgetLink {
	font-size: 10px;
}

.TopButtonRow .fa {
	padding-left: 10px;
}

form {
	margin: 0;
}

#ModifyItemForm .Notes {
	height: 250px;
}

div.MoneyJarParent {
	width: 100%;
	position: relative;
	clear: left;
}

div.MoneyJarTotal {
	width: 90%;
	text-align: right;
	font-weight: bold;
	margin: 0 auto 14px auto;
	color: var(--text-primary);
}

.MoneyJarParent .MoneyJar {
	width: 28%;
	display: inline-block;
	margin: 0 auto;
}

.progress-bar {
	overflow-x: visible;
	white-space: nowrap;
	text-align: left;
	color: var(--text-primary);
}

div.MoneyJarTitle {
	float: left;
	font-size: 11px;
	color: var(--text-muted);
}

div.MoneyJarAmount {
	font-size: 12px;
	float: right;
	color: var(--text-primary);
}

div.MoneyJarProgressBar {
	width: 100%;
	height: 5px;
}

.MoneyJarTableContent {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 20px;
}

.TopButtonRow-Right.BudgetDropDown .bs-caret {
	display: none;
}

.TopButtonRow-Right.BudgetDropDown .dropdown-toggle {
	padding-right: 10px !important;
}

.sticky {
	position: fixed !important;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	background: var(--bg-main);
	padding: 10px 25px;
	width: 100%;
	min-width: 900px;
	max-width: 1200px;
}

.col-Date {
	padding-left: 5px;
}

#SaveAndPayButton {
	display: none;
}

.spinner {
	margin: 100px auto;
	width: 50px;
	height: 40px;
	text-align: center;
	font-size: 10px;
}

.col-Amount, .MergeTableValue {
	text-align: right;
}

.spinner > div {
	background-color: var(--accent-blue);
	height: 100%;
	width: 6px;
	display: inline-block;
	animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 { animation-delay: -1.1s; }
.spinner .rect3 { animation-delay: -1.0s; }
.spinner .rect4 { animation-delay: -0.9s; }
.spinner .rect5 { animation-delay: -0.8s; }

@keyframes sk-stretchdelay {
	0%, 40%, 100% { transform: scaleY(0.4); }
	20% { transform: scaleY(1.0); }
}

.chart {
	position: relative;
	display: inline-block;
	width: 200px;
	height: 200px;
	margin-top: 50px;
	margin-bottom: 50px;
	text-align: center;
	margin-left: 40px;
	margin-right: 40px;
	cursor: pointer;
}

.chart canvas {
	position: absolute;
	top: 0;
	left: 0;
}

.chart .percent:after {
	content: '%';
	margin-left: 0.1em;
	font-size: .8em;
}

.chart .ChartTitle {
	font-weight: bold;
	position: absolute;
	z-index: 1;
	top: 78px;
	margin: 0 auto;
	width: 95%;
	left: 0;
	right: 0;
	color: var(--text-primary);
}

input.CarryOver {
	width: 85px;
	text-align: left;
	border: none;
	background: transparent;
	color: var(--text-primary);
}

table.ModifyItem {
	width: 100%;
	white-space: nowrap;
}

div.ModalSaveCancel {
	text-align: right;
	margin-top: 5px;
	position: absolute;
	bottom: -41px;
	right: 0;
}

.MergeTable {
	width: 100%;
	text-align: left;
	background-color: var(--bg-main);
	display: table;
	border-collapse: collapse;
	border: 1px solid var(--border);
	border-radius: 5px;
}

.MergeTable tbody tr:nth-child(even) {
	background-color: var(--bg-main);
}

.MergeTable tbody {
	background-color: var(--bg-input);
}

.MergeTable tbody td,
.MergeTable thead td {
	color: var(--text-primary);
}

.MergeTable tfoot {
	background-color: var(--bg-darker);
}

.MergeTable tfoot td[class^="col-"] {
	background-color: var(--success);
	color: var(--success-text);
}

.MergeTable tbody td[class^="col-"] {
	cursor: context-menu;
}

.MergeTable td.ItemSelected {
	background-color: var(--accent-blue);
	color: white;
}

.HideScrollBar {
	overflow: hidden;
}


.modal {
	position: fixed;
	z-index: 3;
	left: 0;
	top: 0;
	display: none;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.75);
}

.modal-content {
	position: relative;
	background-color: var(--bg-main);
	margin: 150px auto 0 auto;
	border: 1px solid var(--border);
	border-radius: 10px;
	min-width: 450px;
	max-width: 90%;
	padding: 0 0 10px 0;
	color: var(--text-primary);
}

.LedgerParentContainer thead {
	position: sticky;
	top: 0;
	background-color: var(--bg-darker);
	z-index: 10;
	box-shadow: 0 1px 0 0 var(--accent-blue);
}

.modal-content.CarryOver {
	width: 60%;
	max-width: 200px;
	padding: 25px;
}

.close {
	position: absolute;
	top: -30px;
	right: -30px;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	background-color: var(--danger);
	border-radius: 50%;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	padding-bottom: 4px;
	padding-left: 2px;
}

.close:hover,
.close:focus {
	background-color: var(--danger-hover);
	text-decoration: none;
	cursor: pointer;
}

.IncomeBillRow {
	text-align: right;
	vertical-align: text-top;
}

.SaveCancelModify {
	text-align: right;
}

.JarsTable,
.IncomeTable,
.CategoryTable,
.UnPaidTable,
.PaidTable,
.BudgetTable,
.CarryOverTable {
	display: table;
	overflow: hidden;
	width: 100%;
}

.ChildRow {
	transition: all 500ms;
}

.BudgetTable-Name {
	text-align: left;
	padding-left: 5px;
	white-space: nowrap;
}

.BudgetTable-Amount {
	text-align: right;
	padding-right: 5px;
}

.ClickableTableBody .ItemSelected {
	background: var(--accent-blue) !important;
	color: white;
}

/* Empty jar card — constrained to same size as real jar cards */
.jar-card-empty {
	max-width: 150px;
	color: var(--text-muted);
	opacity: 0.4;
	cursor: default !important;
}

/* No jars found message in jars panel */
.no-jars-message {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 30px 0;
	color: var(--text-muted);
	font-size: 13px;
}

.no-jars-message .material-symbols-outlined {
	font-size: 36px;
	opacity: 0.3;
}

.no-jars-message p {
	margin: 0;
	opacity: 0.5;
}

.CategoryMessage {
	width: 100%;
	margin: auto;
	text-align: center;
	font-weight: bold;
	font-size: 20px;
	padding-top: 50px;
	padding-bottom: 50px;
	color: var(--text-primary);
}

.TopButtonRow-Left-Top {
	float: left;
}

.TopButtonRow-Left-Bottom {
	margin-top: 10px;
	clear: both;
	float: left;
}

.TopButtonRow-Right {
	float: right;
}

.TopButtonRow {
  width: 100%;
  height: 50px;
  margin: 0 auto;
  padding: 10px 30px 10px 30px;
  background-color: var(--bg-main);
  flex-shrink: 0;  /* don't shrink */
}

.main-content-scroll {
	flex: 1;
	overflow-y: auto;
	padding: 20px 20px 0 20px;
}

input.Notes {
	width: 100%;
}

.DefaultCostDot {
	color: var(--danger-text);
}

.EntirePageContainerDIV {
      width: 100%;
      min-width: 900px;
      max-width: 1200px;
      height: 100%;
      margin: 0 auto;
      padding: 15px 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-sizing: border-box;
}

.DateDisplayModify {
	padding-top: 5px;
	padding-left: 5px;
	white-space: nowrap;
}

.CategoryColumn {
	width: 400px;
}

.CategoryTable .CategoryColumn {
	padding-left: 25px;
	padding-right: 50px;
	width: inherit;
}

.NotesColumn,
.childRow .NotesColumn {
	width: 100%;
	max-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.TypeColumn {
	width: 20px;
}

.OptionsDisplayModify {
	padding: 7px 0px 5px 5px;
	white-space: nowrap;
	width: 100%;
}

.CostColumn {
	padding-right: 5px;
	text-align: right;
	white-space: nowrap;
	padding-left: 25px;
}

.CostDisplayModify {
	padding-top: 5px;
	padding-right: 5px;
	text-align: right;
	white-space: nowrap;
}

.NoteDisplay {
	padding-left: 5px;
	padding-right: 5px;
	width: 100%;
	white-space: nowrap;
}

.NotesDisplay {
	width: 100%;
	white-space: nowrap;
}

.SaveCancelDisplay {
	padding-right: 5px;
	padding-bottom: 5px;
	text-align: right;
	white-space: nowrap;
}

.MainDIV {
      width: 100%;
      background-color: var(--bg-main);
      border-radius: 6px;
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
	padding-bottom: 20px;
}

.TabStrip {
	cursor: default;
	width: 100%;
}

.TabStripFont {
	font-weight: bold;
	font-family: Tahoma;
	font-size: 10px;
}

.ContainerTable {
	width: 100%;
	margin: auto 0;
	cursor: default;
	border-collapse: collapse;
	box-sizing: border-box;
	background-color: var(--bg-main);
}

tr.selected,
div.expense-row.selected {
	background-color: var(--selected-bg) !important;
}

tr.selected td {
	border-bottom: 1px solid var(--selected-bg) !important;
}

.ContainerTable.AddBorders tbody td {
	border-bottom: 1px solid var(--border);
}

.ContainerTable tbody td {
	padding: 3px 8px;
	cursor: default;
	font-size: 13px;
	line-height: 19.5px;
}

.Import .ContainerTable {
	margin: auto 0 0 0;
}

div.Ledger .ContainerTable thead td {
	font-size: 14px;
}

.ContainerTable thead td {
	color: var(--text-primary);
	font-size: 20px;
	padding-bottom: 5px;
	border-bottom: 2px solid var(--accent-blue);
}

.ContainerTable tfoot td {
	text-align: right;
	color: var(--text-primary);
	font-weight: bold;
	font-size: 12px;
	padding-right: 9px;
	padding-top: 5px;
}

#IncomeTable,
#CategoryTable,
#UnpaidTable,
#BudgetTable,
#PaidTable {
	margin-top: 20px;
}

.ImportNewTableFooter td {
	padding-right: 0 !important;
}

.BudgetRowsTable {
	width: 100%;
	border: 1px solid var(--border);
	border-radius: 5px;
	background-color: var(--bg-input);
}

.TableTextModify {
	background-color: var(--accent-blue) !important;
	color: white;
	font-size: 12px;
}

.BudgetTotalTable {
	margin-top: 30px;
}

.BudgetTally {
	border-top: 3px solid var(--border);
}

.BudgetTallyTitles {
	width: 100%;
	text-align: right;
	color: var(--text-primary);
}

.BudgetTallyValues {
	text-align: right;
	color: var(--text-primary);
}

.BudgetTallyDivider {
	padding-left: 15px;
	padding-right: 6px;
	text-align: center;
}

.AccountAmountValue {
	text-align: right;
	color: var(--text-primary);
}

.AccountAmountTitle {
	text-align: right;
	width: 100%;
	color: var(--text-primary);
}


tr.selected td:first-child,
div.expense-row.selected {
	border-left: 2px solid var(--accent-blue);
}

.TopButtonRow-Left-Bottom .btn-default {
	background-color: var(--border);
	color: var(--text-primary);
	border-color: var(--border-hover);
}

.TopButtonRow-Left-Bottom .btn-default:hover {
	background-color: var(--bg-hover);
	border-color: var(--border-focus);
}

.ContainerTable.HoverableRows tbody tr:hover {
	background-color: var(--bg-hover);
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
	40% { transform: translateY(-30px); }
	60% { transform: translateY(-15px); }
}

/* ========== EXPENSE / INCOME ROW LAYOUT ========== */
.section-header {
	font-size: 18px;
	font-weight: 500;
	color: var(--text-primary);
	padding: 0 8px 12px;
	border-bottom: 1.5px solid var(--accent-blue);
	margin-bottom: 4px;
}

.section-footer {
	text-align: right;
	font-weight: bold;
	font-size: 12px;
	padding-right: 9px;
	padding-top: 5px;
	color: var(--text-primary);
}

/* 4-column grid: date | merchant+category | tags | amount */
.expense-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 8px;
	padding: 9px 8px;
	border-bottom: 0.5px solid var(--border);
	cursor: default;
	font-size: 13px;
	box-sizing: border-box;
}

.expense-row:hover {
	background: var(--bg-hover);
}

.budget-date-column {
	color: var(--text-primary);
	white-space: nowrap;
	font-size: 12px;
	padding-right: 10px;
}

.expense-merchant-name {
	color: var(--text-primary);
}

.expense-category-label {
	font-size: 11px;
	color: var(--text-muted);
	margin-top: 2px;
}

.expense-category-text {
	padding-right: 8px;
}
.expense-merchant-cell {
	padding-right: 10px;
}

/* Used by reminder/summary rows — spans to fill the middle column */
.expense-merchant-cell-wide {
	grid-column: 2 / 3;
}

.expense-note {
	font-size: 11px;
	color: var(--text-muted);
	font-style: italic;
	margin-left: 8px;
}

.tag-dot-item {
	font-size: 11px;
	color: var(--text-muted);
	margin-right: 8px;
	white-space: nowrap;
	cursor: pointer;
}

.expense-amount {
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
}

.no-data-row {
	padding: 12px 8px;
	font-size: 13px;
	color: var(--text-muted);
	text-align: center;
}

/* ========== FORMS & INPUTS ========== */
input,
select,
textarea {
	background-color: var(--bg-input);
	color: var(--text-primary);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 6px 10px;
    color-scheme: dark;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--accent-blue);
	outline: none;
	box-shadow: 0 0 0 3px var(--focus-shadow);
}

/* ========== BUTTONS ========== */
.btn-default {
	background-color: var(--border);
	color: var(--text-primary);
	border-color: var(--border-hover);
}

.btn-default:hover {
	background-color: var(--bg-hover);
	border-color: var(--border-focus);
	color: var(--text-primary);
}

.btn-primary {
	flex: 1;
	background: var(--accent-blue);
	color: white;
	border: none;
	padding: 12px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	width: 100%;
	font-weight: 600;
	transition: background 0.2s;
}

.btn-primary:hover {
	background-color: var(--accent-blue-hover);
	border-color: var(--accent-blue-hover);
}

.btn-success {
	background-color: var(--success);
	border-color: var(--success);
	color: var(--success-text);
}

.btn-success:hover {
	background-color: var(--success-hover);
	border-color: var(--success-hover);
}

.btn-danger {
	background-color: var(--danger);
	border-color: var(--danger);
	color: var(--danger-text);
}

.btn-danger:hover {
	background-color: var(--danger-hover);
	border-color: var(--danger-hover);
}

.btn-warning {
	background-color: var(--warning);
	border-color: var(--warning);
	color: var(--warning-text);
}

.btn-warning:hover {
	background-color: var(--warning-hover);
	border-color: var(--warning-hover);
}

/* ========== DROPDOWNS ========== */
.dropdown-menu {
	background-color: var(--bg-input);
	border: 1px solid var(--border);
}

.dropdown-menu > li > a {
	color: var(--text-primary);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
	background-color: var(--border);
	color: var(--text-primary);
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
	background-color: var(--accent-blue);
	color: white;
}

/* ========== BOOTSTRAP SELECT ========== */
.bootstrap-select > .dropdown-toggle {
	background-color: var(--bg-input);
	color: var(--text-primary);
	border: 1px solid var(--border);
}

.bootstrap-select > .dropdown-toggle:hover,
.bootstrap-select > .dropdown-toggle:focus {
	background-color: var(--bg-main);
	color: var(--text-primary);
}

.bootstrap-select .dropdown-menu {
	background-color: var(--bg-input);
}

.bootstrap-select .dropdown-menu li a {
	color: var(--text-primary);
}

.bootstrap-select .dropdown-menu li a:hover {
	background-color: var(--border);
}

.bootstrap-select .dropdown-menu li.selected a {
	background-color: var(--accent-blue);
	color: white;
}

/* ========== NAV TABS ========== */
.nav-tabs {
	border-bottom: 2px solid var(--border);
	background: var(--bg-darker);
}

.nav-tabs > li > a {
	background: transparent;
	color: var(--text-muted);
	border: none;
	border-radius: 0;
}

.nav-tabs > li > a:hover {
	background: transparent;
	color: var(--text-primary);
	border: none;
	border-bottom: 2px solid var(--border-hover);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
	background: transparent;
	color: var(--accent-blue);
	border: none;
	border-bottom: 2px solid var(--accent-blue);
}

.tab-content {
	background: var(--bg-input);
	border: 1px solid var(--border);
	border-top: none;
	padding: 20px;
}

/* ========== BOOTSTRAP TABLES ========== */
.table {
	background-color: var(--bg-main);
	color: var(--text-primary);
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
	border-color: var(--border);
	color: var(--text-primary);
}

.table > thead > tr > th {
	border-bottom: 2px solid var(--accent-blue);
}

.table-striped > tbody > tr:nth-of-type(odd) {
	background-color: var(--bg-input);
}

.table-striped > tbody > tr:nth-of-type(even) {
	background-color: var(--bg-main);
}

.table-hover > tbody > tr:hover {
	background-color: var(--bg-hover);
}

/* ========== TEXT COLORS ========== */
.text-danger {
	color: var(--danger-text);
}

.text-success {
	color: var(--success-text);
}

.text-warning {
	color: var(--warning-text);
}

.text-info {
	color: var(--info-text);
}

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

/* ========== ALERTS ========== */
.alert-success {
	background-color: var(--success-bg);
	border-color: var(--success);
	color: var(--success-text);
}

.alert-danger {
	background-color: var(--danger-bg);
	border-color: var(--danger);
	color: var(--danger-text);
}

.alert-warning {
	background-color: var(--warning-bg);
	border-color: var(--warning);
	color: var(--warning-text);
}

.alert-info {
	background-color: var(--info-bg);
	border-color: var(--accent-blue);
	color: var(--info-text);
}

/* ========== PANELS ========== */
.panel {
	background-color: var(--bg-main);
	border-color: var(--border);
}

.panel-default > .panel-heading {
	background-color: var(--bg-darker);
	border-color: var(--border);
	color: var(--text-primary);
}

.panel-body {
	color: var(--text-primary);
}

.ledger-header {
	white-space: nowrap;
	overflow-x: auto;
	padding-bottom: 10px;
	position: sticky;
	top: 0;
	background-color: var(--bg-main);
	z-index: 11;
	padding-top: 10px;
}



/* ========== WELLS ========== */
.well {
	background-color: var(--bg-input);
	border-color: var(--border);
	color: var(--text-primary);
}

/* ========== LABELS & BADGES ========== */
.label-default {
	background-color: var(--border);
	color: var(--text-primary);
}

.badge {
	background-color: var(--accent-blue);
	color: white;
}

.ExpensesToggle {
	font-size:12px;
	font-weight:normal;
	cursor:pointer;
}

  .btn-toggle.active {
        background-color: var(--accent-blue);
        color: white;
  }


  /* ===== Header Bar ===== */

  .header-tabs {
      display: flex;
      gap: 4px;
      background: var(--bg-darker);
      padding: 4px;
      border-radius: 8px;
      position: relative;
  }

  /* Sliding active indicator */
  .tab-slider {
      position: absolute;
      top: 4px;
      bottom: 4px;
      left: 4px;
      width: 0;
      background: var(--accent-blue);
      border-radius: 6px;
      transition: left 0.25s ease, width 0.25s ease;
      pointer-events: none;
      z-index: 0;
  }

  .header-tab {
      padding: 10px 24px;
      border: none;
      background: transparent;
      color: var(--text-muted);
      position: relative;
      z-index: 1;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      border-radius: 6px;
      transition: all 0.2s;
  }

  .header-tab:hover {
      color: var(--text-primary);
      background: var(--bg-hover);
  }

  .header-tab.active {
      background: transparent;
      color: white;
  }

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

  .date-picker {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--bg-darker);
      padding: 8px 16px;
      border-radius: 8px;
  }

  .date-arrow {
      background: transparent;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      padding: 4px;
      transition: color 0.2s;
      display: flex;
      align-items: center;
  }

  .date-arrow:hover {
      color: var(--accent-blue);
  }

  .date-display {
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
      min-width: 180px;
      text-align: center;
  }

  .actions-menu {
      position: relative;
  }

  .action-button {
      padding: 10px 20px;
      background: var(--accent-blue);
      border: none;
      border-radius: 8px;
      color: white;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: background 0.2s;
  }

  .action-button:hover {
      background: var(--accent-blue-hover);
  }

  .actions-dropdown {
      display: none;
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: 4px;
      background: var(--bg-darker);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 4px;
      min-width: 180px;
      z-index: 100;
  }

  .actions-dropdown.active {
      display: block;
  }

  .actions-dropdown-item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 10px 16px;
      border: none;
      background: transparent;
      color: var(--text-primary);
      font-size: 14px;
      cursor: pointer;
      border-radius: 6px;
      transition: background 0.2s;
  }

  .actions-dropdown-item:hover {
      background: var(--bg-hover);
  }

  /* ===== Header Bar ===== */
  .header-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 20px 0 20px;
      background: var(--bg-main);
      border-radius: 8px;
      margin-bottom: 15px;
  }

.header-tab-icon {
	padding: 10px 12px ;
}

  .text-right {
        text-align: right;
  }

  /* Action Bar */
  .action-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--bg-darker);
        border-top: 1px solid var(--border-color);
        padding: 12px 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transform: translateY(100%);
        transition: transform 0.25s ease;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
        z-index: 2000;
  }

  .action-bar.visible {
        transform: translateY(0);
  }

  .action-bar-info {
        display: flex;
        align-items: center;
        gap: 16px;
  }

  .action-bar-count {
        font-size: 14px;
        color: var(--text-muted);
  }

  .action-bar-sum {
        font-size: 14px;
        color: var(--accent-purple);
        font-weight: 600;
  }

  .action-bar-buttons {
        display: flex;
        gap: 8px;
  }

  .action-btn {
        padding: 8px 16px;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        font-size: 13px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all 0.15s;
  }

  .action-btn .material-symbols-outlined {
        font-size: 18px;
  }

  .action-btn.edit {
        background: var(--accent-blue);
        color: white;
  }

  .action-btn.edit:hover {
        background: var(--accent-blue-hover);
  }

  .action-btn.merge {
        background: var(--accent-blue);
        color: white;
  }

  .action-btn.merge:hover {
        background: var(--accent-blue-hover);
  }

  .action-btn.delete {
        background: var(--danger);
        color: white;
  }

  .action-btn.delete:hover {
        background: var(--danger-hover);
  }

  .action-btn.hidden {
        display: none;
  }

  .action-btn.ledger,
  .action-btn.transfer {
        background: var(--bg-main);
        color: var(--text-primary);
        border: 1px solid var(--border);
  }

  .action-btn.ledger:hover,
  .action-btn.transfer:hover {
        background: var(--bg-hover);
  }
  
    /* Jar Cards - Option 1 */
  .jar {
        background: var(--bg-main);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 14px 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        cursor: pointer;
  }

  .jar:hover {
        background: var(--bg-hover);
  }

  .jar.selected {
        background: var(--selected-bg);
        border-color: var(--accent-blue);
  }

  .jar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
  }

  .jar-name {
        font-size: 13px;
        color: var(--text-muted);
  }

  .jar-amount {
        font-size: 14px;
        font-weight: 600;
  }

  .jar-amount.positive { color: var(--success-text); }
  .jar-amount.negative { color: var(--danger-text); }
  .jar-amount.zero { color: var(--text-dark); }

  .jar-progress {
        height: 4px;
        background: var(--bg-darker);
        border-radius: 2px;
        overflow: hidden;
  }

  .jar-progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #4ade80, #22c55e);
        border-radius: 2px;
  }

  .jar.warning .jar-progress-fill {
        background: linear-gradient(90deg, #fbbf24, #f59e0b);
  }

  .jar.danger .jar-progress-fill {
        background: linear-gradient(90deg, #f87171, #ef4444);
  }

  .MoneyJarTableContent .jar {
        width: 31%;
        margin-bottom: 12px;
  }
  
  .SideBarTitle {
        display: flex;
        justify-content: space-between;
        align-items: center;
  }

  .jar-search {
        width: 350px;
        padding: 4px 8px;
        font-size: 14px;
        background: var(--bg-input);
        border: 1px solid var(--border);
        border-radius: 4px;
        color: var(--text-primary);
		margin-right: 20px;
  }

  .jar-search:focus {
        outline: none;
        border-color: var(--accent-blue);
  }

.panel-header-actions .material-symbols-outlined {
	font-size: 14px;	  
}

/* Danger/Delete button */
.btn-delete {
	background-color: var(--danger) !important;
	color: white !important;
}

.btn-delete:hover {
	background-color: var(--danger-hover);
}

  .icon-xs { font-size: 14px; }
  .icon-sm { font-size: 16px; }
  .icon-md { font-size: 20px; }
  .icon-lg { font-size: 28px; }
  .icon-gold {color: #DBC54F;}
  .icon-redish {color: #f985b1;}


/* ========================================================================== */
/* SLIDEOUT STYLES (consolidated from slideout.css)                           */
/* ========================================================================== */

/* Overlay */
.overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.75);
	z-index: 999;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.overlay.active {
	display: block;
	opacity: 1;
}

/* Section headers for Income/Expenses when showing all categories */
.categorypicker-section {
	position: sticky;
	top: 0;
	z-index: 3;
	padding: 12px 15px;
	background: var(--bg-darker);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--text-muted);
	cursor: pointer;
}

.categorypicker-section:hover {
	background: var(--bg-hover);
}

.info-icon {
	font-size: 16px;
	color: var(--text-dark);
	cursor: help;
	vertical-align: middle;
	margin-left: 4px;
}

.info-icon:hover {
	color: #fff;
}

/* Merge Chips */
.merge-chip {
	padding: 8px 16px;
	border-radius: 20px;
	background: var(--bg-darker);
	border: 2px solid var(--border);
	cursor: pointer;
	transition: all 0.2s;
	color: var(--text-primary);
}

.merge-chip:hover {
	border-color: var(--border-hover);
	background: var(--bg-hover);
}

.merge-chip-selected {
	background: var(--accent-blue);
	border-color: var(--accent-blue);
	color: white;
	font-weight: bold;
	box-shadow: 0 0 0 3px var(--focus-shadow);
}

.merge-chip-empty {
	background: transparent;
	border-style: dashed;
	cursor: default;
	opacity: 0.5;
	color: var(--text-muted);
}

.category-pickers .picker-selector {
	white-space: nowrap;
}

/* Slide-out Panel */
.slideout-panel {
	position: fixed;
	top: 0;
	right: -400px;
	width: 400px;
	height: 100vh;
	background: var(--bg-main);
	box-shadow: -4px 0 20px rgba(0,0,0,0.5);
	z-index: 1000;
	transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
}

.slideout-panel.active {
	right: 0;
}


/* Panel Header */
.panel-header {
	padding: 10px 20px;
	border-bottom: 1px solid var(--border);
	background: var(--bg-darker);
	display: flex;
	align-items: center;
}

.panel-header-title {
	font-size: 18px;
	color: var(--text-primary);
	font-weight: 600;
	margin: 0;
}

.panel-header-actions {
	margin-left: 10px;
	flex-grow: 1;
	display: flex;
}


/* Panel Header Action Button */
.panel-header-btn {
	background: var(--accent-blue);
	border: none;
	font-size: 20px;
	cursor: pointer;
	color: #fff;
	width: 25px;
	height: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background 0.2s;
	margin-left: 10px;
}

.panel-header-btn:hover {
	background: var(--accent-blue-hover, #3a80d2);
}


.panel-header .close-btn {
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: var(--text-muted);
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        transition: background 0.2s;
  }

.close-btn:hover {
	background: var(--border);
	color: var(--text-primary);
}

/* Panel Body */
.panel-body {
	flex: 1;
	overflow-y: auto;
	padding: 24px;
}

/* Form Groups */
.form-group {
	margin-bottom: 20px;
}

.form-group label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-muted);
	margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 4px;
	font-size: 14px;
	font-family: inherit;
	transition: border-color 0.2s;
	background: var(--bg-input);
	color: var(--text-primary);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
	outline: none;
	border-color: var(--accent-blue);
	box-shadow: 0 0 0 3px var(--focus-shadow);
}

.form-group textarea {
	resize: vertical;
	min-height: 80px;
}

.form-row {
	display: flex;
	gap: 12px;
}

.form-row .form-group {
	flex: 1;
}

/* Info Boxes (consolidated) */
.info-box,
.info-box-success,
.info-box-error {
	padding: 12px;
	border-radius: 4px;
	margin-bottom: 20px;
	font-size: 13px;
	border-left: 3px solid;
}

.info-box {
	background: var(--info-bg);
	border-left-color: var(--accent-blue);
	color: var(--info-text);
}

.info-box strong {
	color: #d0e8f7;
}

.info-box-success {
	background: var(--success-bg);
	border-left-color: var(--success);
	color: var(--success-text);
	text-align: center;
}

.info-box-success strong {
	color: #d0f7e6;
}

.info-box-error {
	background: var(--danger-bg);
	border-left-color: var(--danger);
	color: var(--danger-text);
	text-align: center;
}

.info-box-error strong {
	color: #ffd0d0;
}

/* Panel Footer */
.panel-footer {
	padding: 20px;
	border-top: 1px solid var(--border);
	display: flex;
	gap: 12px;
	background: var(--bg-darker);
}

.btn-secondary {
	flex: 1;
	background: var(--border);
	color: var(--text-primary) !important;
	border: 1px solid var(--border-hover);
	padding: 12px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	transition: all 0.2s;
}

.btn-secondary:hover {
	background: var(--bg-hover);
	border-color: var(--border-focus);
}

/* Current Value Badge */
.current-value {
	display: inline-block;
	background: var(--border);
	padding: 4px 8px;
	border-radius: 3px;
	font-size: 12px;
	color: var(--text-muted);
	margin-left: 8px;
}

/* Split Items Section */
.split-items-section {
	margin-top: 24px;
}

.split-items-container {
	background: var(--bg-darker);
	padding: 12px;
	border-radius: 4px;
	margin-top: 8px;
	border: 1px solid var(--border);
}

.split-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid var(--border);
}

.split-item:last-child {
	border-bottom: none;
}

.split-item-content {
	flex: 1;
}

.split-item-category {
	font-size: 13px;
	color: var(--text-primary);
	font-weight: 500;
}

.split-item-note {
	font-size: 12px;
	color: var(--text-dark);
	margin-top: 2px;
}

.split-item-amount {
	font-weight: 600;
	color: var(--accent-blue);
}

/* Loading Overlay */
.loading-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(45, 45, 45, 0.95);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1001;
}

.loading-overlay.active {
	display: flex;
}

/* Loading Spinner Container */
.loading-spinner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

/* Loading Text */
.loading-text {
	color: var(--text-muted);
	font-size: 14px;
	font-weight: 500;
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.slideout-panel {
		width: 100%;
		right: -100%;
	}
}

/* Input Group Container */
.input-group {
	display: flex;
	align-items: stretch;
	width: fit-content;
}

/* Vendor Picker Button (right-side addon on Match Name input) */
.btn-vendor-picker {
	border-right: 1px solid var(--border);
	border-left: none;
	border-radius: 0 4px 4px 0;
	cursor: pointer;
}

.btn-vendor-picker:hover {
	background: var(--border-hover);
	color: var(--text-primary);
}


/* Dollar Sign Addon (Left Side) */
.input-group-addon {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	background: var(--border);
	border: 1px solid var(--border);
	border-right: none;
	border-radius: 4px 0 0 4px;
	color: var(--text-muted);
	font-size: 14px;
	font-weight: normal;
	cursor: default;
	width: auto;
}

.form-group .input-group {
	display: flex;
	align-items: stretch;
	width: 100%;
}

.input-group .form-control {
	flex: 1;
	border-radius: 0 4px 4px 0;
	border: 1px solid var(--border);
	padding: 10px 12px;
	font-size: 14px;
	background: var(--bg-input);
	color: var(--text-primary);
	font-family: inherit;
}

.input-group .form-control:focus {
	outline: none;
	border-color: var(--accent-blue);
	box-shadow: 0 0 0 3px var(--focus-shadow);
}

.input-group .form-control:disabled {
	background-color: var(--bg-body);
	cursor: not-allowed;
	opacity: 1;
}

/* Small size variant */
.input-group .input-sm {
	padding: 5px 10px;
	font-size: 12px;
}

/* Toggle Container */
.toggle-container {
	display: flex;
	align-items: center;
	gap: 10px;
}

.toggle-label {
	font-size: 14px;
	color: var(--text-dark);
}

.toggle-switch {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 24px;
	margin: 0;
	cursor: pointer;
}

.toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.toggle-slider {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: 0.3s;
	border-radius: 24px;
}

.toggle-slider:before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	left: 3px;
	bottom: 3px;
	background-color: white;
	transition: 0.3s;
	border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
	background-color: var(--success);
}

.toggle-switch input:checked + .toggle-slider:before {
	transform: translateX(26px);
}

.toggle-switch input:disabled + .toggle-slider {
	background-color: #e9ecef;
	cursor: not-allowed;
}

  /* Toggle Switch with Labels Inside */
  .toggle-switch-labeled {
        position: relative;
        display: inline-block;
        width: auto;
        height: 26px;
		margin-left: 10px;
		margin-bottom: 0;
  }

  .toggle-switch-labeled input {
        opacity: 0;
        width: 0;
        height: 0;
  }

  .toggle-slider-labeled {
		position: absolute;
		cursor: pointer;
		top: 3px;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: var(--bg-darker);
		border: 1px solid #3a3a3a;
		border-radius: 13px;
		transition: 0.3s;
		padding: 0 28px;
  }

  .toggle-slider-labeled:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 2px;
        top: 50%;
        transform: translateY(-50%);
        background-color: #fff;
        border-radius: 50%;
        transition: 0.3s;
  }

  .toggle-slider-labeled:after {
        content: attr(data-off);
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 8px;
        font-weight: 600;
        color: var(--text-muted);
  }

  .toggle-switch-labeled input:checked + .toggle-slider-labeled {
        background-color: var(--success-bg);
        border-color: var(--success-text);
  }

  .toggle-switch-labeled input:checked + .toggle-slider-labeled:before {
        left: auto;
        right: 2px;
        transform: translateY(-50%);
  }

  .toggle-switch-labeled input:checked + .toggle-slider-labeled:after {
        content: attr(data-on);
        right: auto;
        left: 6px;
        color: var(--success-text);
  }



  /* Slideout Tabs */
  .slideout-tabs {
        display: flex;
        border-bottom: 1px solid var(--border-light);
        padding: 0 20px;
        margin-top: 4px;
  }

  .slideout-tab {
        padding: 8px 16px;
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        color: var(--text-muted);
        cursor: pointer;
        font-size: 13px;
        font-weight: 600;
        margin-bottom: -1px;
        transition: all 0.15s;
        font-family: inherit;
  }

  .slideout-tab.active {
        border-bottom-color: var(--primary);
        color: var(--text-light);
  }

  /* Slideout Tab Panes */
  .slideout-tab-pane {
        display: none;
  }

  .slideout-tab-pane.active {
        display: block;
  }

  /* Budget banner - toggleable */
  .budget-banner {
        border-radius: 6px;
        padding: 8px 12px;
        margin-bottom: 16px;
        font-size: 12px;
        cursor: pointer;
  }

  .budget-banner-on {
        background: rgba(34, 197, 94, 0.07);
        border: 1px solid rgba(34, 197, 94, 0.2);
        color: var(--success-text);
  }

  .budget-banner-off {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid #444;
        color: var(--text-muted);
  }




/* Split Transaction Button */
.btn-split {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	background: var(--border);
	color: var(--text-primary);
	border: 1px solid var(--border-hover);
	padding: 12px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	transition: all 0.2s;
}

.btn-split:hover {
	background: var(--bg-hover);
	border-color: var(--border-focus);
}

.btn-split:active {
	background: #505050;
}

.btn-split .material-symbols-outlined {
	font-size: 20px;
}

/* Split Child Card */
.split-child-card {
	background: var(--bg-darker);
	border: 1px solid var(--border);
	border-radius: 6px;
	margin-bottom: 16px;
	overflow: hidden;
}

/* Card Header */
.split-child-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	background: var(--bg-input);
	border-bottom: 1px solid var(--border);
}

.split-child-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-primary);
}

/* Remove Button */
.btn-remove-split {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--text-muted);
	padding: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: all 0.2s;
}

.btn-remove-split:hover {
	background: var(--border);
	color: var(--danger-text);
}

.btn-remove-split .material-symbols-outlined {
	font-size: 20px;
}

/* Card Body */
.split-child-body {
	padding: 16px;
}

/* Override form-group margin for cards */
.split-child-body .form-group:last-child {
	margin-bottom: 0;
}

button[disabled],
button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.bootstrap-select {
	width: 100% !important;
}

.bootstrap-select > .dropdown-toggle {
	width: 100% !important;
	padding: 10px 12px !important;
	border: 1px solid var(--border) !important;
	background: var(--bg-input) !important;
	color: var(--text-primary) !important;
	font-size: 14px !important;
}

/* Spinner Container */
.spinner-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 100%;
}

/* Make the Material icon spin */
.spinning {
	font-size: 48px;
	animation: spin 1s linear infinite;
	color: #555;
}

button .spinning {
	font-size: 16px;
	vertical-align: middle;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Add Tax Button */
.btn-add-tax {
	background: var(--success);
	color: var(--success-text);
	border-left: 1px solid var(--border);
	border-radius: 0 4px 4px 0;
}

.btn-add-tax:hover {
	background: var(--success-hover);
}

#addAnotherRow {
	width: 100%;
	margin-bottom: 20px;
}

#suboverlay {
	z-index: 1001;
	background: transparent;
}

/* Sub Slide-out Panel - higher z-index only */
#subslideoutPanel {
	z-index: 1002;
}

#linked-items-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	display: none;
	z-index: 2000;
}

#linked-items-modal .modal-content {
	background: white;
	margin: 10% auto;
	padding: 20px;
	max-width: 600px;
	border-radius: 8px;
	position: relative;
}

#linked-items-modal .close-modal {
	position: absolute;
	top: 10px;
	right: 15px;
	font-size: 24px;
	cursor: pointer;
}

/* Add Item Cards */
.additem-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 15px;
	padding: 10px;
}

.additem-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 30px 20px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--bg-darker);
	color: var(--text-primary);
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s;
}

.additem-card:hover {
	background: var(--bg-hover);
	border-color: var(--border-hover);
}

.additem-card .material-symbols-outlined {
	font-size: 36px;
	color: var(--accent-blue);
}

/* Readonly form fields (e.g. carry over date) */
.form-control-readonly {
	background: var(--bg-darker);
	color: var(--text-muted);
	cursor: not-allowed;
}

/* Date Picker */
.datepicker-current {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 20px;
	background: var(--bg-darker);
	border-bottom: 1px solid var(--border);
	font-size: 16px;
	font-weight: 600;
	color: var(--accent-blue);
	position: sticky;
	top: 0;
	z-index: 1;
	cursor: pointer;
}

.datepicker-list {
	padding: 8px;
}

.datepicker-row {
	display: block;
	width: 100%;
	padding: 14px 20px;
	border: none;
	background: transparent;
	color: var(--text-primary);
	font-size: 14px;
	text-align: center;
	cursor: pointer;
	border-radius: 6px;
	transition: background 0.2s;
}

.datepicker-row:hover {
	background: var(--bg-hover);
}

.datepicker-row.datepicker-active {
	color: var(--accent-blue);
	font-weight: 600;
	background: var(--bg-darker);
}

/* Category & Jar Picker - Search (consolidated) */
.categorypicker-search,
.jarpicker-search {
	position: sticky;
	top: 0;
	z-index: 3;
	padding: 12px 16px;
	background: var(--bg-darker);
	border-bottom: 1px solid var(--border);
}

.categorypicker-search input,
.jarpicker-search input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--bg-input);
	color: var(--text-primary);
	font-size: 14px;
}

.categorypicker-search input:focus,
.jarpicker-search input:focus {
	outline: none;
	border-color: var(--accent-blue);
}

/* Category Picker - List container */
.categorypicker-list,
.jarpicker-list {
	overflow-y: auto;
	max-height: calc(100vh - 140px);
}

/* Category Picker - Parent group headers (sticky) */
.categorypicker-group {
	position: sticky;
	top: 0;
	z-index: 2;
	padding: 10px 16px;
	background: var(--bg-darker);
	color: var(--text-muted);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-bottom: 1px solid var(--border);
	cursor: pointer;
}

  .categorypicker-group:hover {
	background: var(--bg-hover);
  }

/* Locked parent headers — not selectable in this picker context */
.categorypicker-group.cat-group-locked {
	cursor: default;
}

  .categorypicker-group.cat-group-locked:hover {
	background: var(--bg-darker);
  }

/* When sections exist (all filter), groups stick below section header */
.categorypicker-section ~ .categorypicker-group {
	top: 44px;
}

/* Category Picker - Child rows (clickable) */
.categorypicker-row {
	display: block;
	width: 100%;
	padding: 14px 20px 14px 28px;
	border: none;
	background: transparent;
	color: var(--text-primary);
	font-size: 14px;
	text-align: left;
	cursor: pointer;
	transition: background 0.2s;
}

.categorypicker-row:hover {
	background: var(--bg-hover);
}

/* Category List - New button container */
.category-newbutton {
	padding: 12px 16px;
	border-bottom: 1px solid var(--border);
}

.category-newbutton .btn-primary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* Category List - Clickable rows for editing */
.categorylist-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 14px 20px 14px 28px;
	border: none;
	background: transparent;
	color: var(--text-primary);
	font-size: 14px;
	text-align: left;
	cursor: pointer;
	transition: background 0.2s;
}

.categorylist-row:hover {
	background: var(--bg-hover);
}

.categorylist-row-amount {
	color: var(--text-muted);
	font-size: 13px;
}

/* Category List - Subgroup header (parent name within type) */
.categorylist-subgroup {
	position: sticky;
	top: 0;
	z-index: 2;
	padding: 8px 20px;
	color: var(--text-muted);
	font-size: 12px;
	font-weight: 600;
	font-style: italic;
	background: var(--bg-darker);
	border-bottom: 1px solid var(--border);
}

/* Category Picker */
.cat-picker {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--border);
	border-radius: 4px;
	background: var(--bg-input);
	color: var(--text-primary);
	font-size: 14px;
	cursor: pointer;
	transition: border-color 0.2s;
}

.cat-picker:hover {
	border-color: var(--border-hover);
}

.cat-picker-display {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cat-picker-display.placeholder {
	color: var(--text-muted);
}

.cat-picker .material-symbols-outlined {
	font-size: 20px;
	color: var(--text-muted);
}

.cat-picker-disabled {
	pointer-events: none;
	opacity: 0.5;
}

.category-pickers .cat-picker {
	white-space: nowrap;
}

/* Jar Picker */
.jar-picker {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--border);
	border-radius: 4px;
	background: var(--bg-input);
	color: var(--text-primary);
	font-size: 14px;
	cursor: pointer;
	transition: border-color 0.2s;
}

.jar-picker:hover {
	border-color: var(--border-hover);
}

.jar-picker-display {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jar-picker-display.placeholder {
	color: var(--text-muted);
}

.jar-picker .material-symbols-outlined {
	font-size: 20px;
	color: var(--text-muted);
}

.jar-picker-disabled {
	pointer-events: none;
	opacity: 0.5;
}

/* Year Picker */
.year-picker {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--border);
	border-radius: 4px;
	background: var(--bg-input);
	color: var(--text-primary);
	font-size: 14px;
	cursor: pointer;
	transition: border-color 0.2s;
}

.year-picker:hover {
	border-color: var(--border-hover);
}

.year-picker-display {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.year-picker-display.placeholder {
	color: var(--text-muted);
}

.year-picker .material-symbols-outlined {
	font-size: 20px;
	color: var(--text-muted);
}

.year-picker-disabled {
	pointer-events: none;
	opacity: 0.5;
}

/* Picker Selector - Display field (looks like dropdown) */
.picker-disabled {
	pointer-events: none;
	opacity: 0.5;
}

.picker-selector {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--border);
	border-radius: 4px;
	background: var(--bg-input);
	color: var(--text-primary);
	font-size: 14px;
	cursor: pointer;
	transition: border-color 0.2s;
}

.picker-selector:hover {
	border-color: var(--border-hover);
}

.picker-selector-text {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.picker-selector-text.placeholder {
	color: var(--text-muted);
}

.picker-selector .material-symbols-outlined {
	font-size: 20px;
	color: var(--text-muted);
}

/* Jar Picker Row */
.jarpicker-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 14px 20px;
	border: none;
	background: transparent;
	color: var(--text-primary);
	font-size: 14px;
	text-align: left;
	cursor: pointer;
	transition: background 0.2s;
}

.jarpicker-row:hover {
	background: var(--bg-hover);
}

.jarpicker-row-amount {
	color: var(--text-muted);
	font-size: 13px;
}

/* Jar Selector - display field */
.jar-selector {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--border);
	border-radius: 4px;
	background: var(--bg-input);
	color: var(--text-primary);
	font-size: 14px;
	cursor: pointer;
	transition: border-color 0.2s;
}

.jar-selector:hover {
	border-color: var(--border-hover);
}

.jar-selector-text {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jar-selector-text.placeholder {
	color: var(--text-muted);
}

.jar-selector .material-symbols-outlined {
	font-size: 20px;
	color: var(--text-muted);
}

.btn-add-split {
	background: var(--accent-blue);
	color: white;
	border: none;
	width: 28px;
	height: 28px;
	border-radius: 4px;
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-add-split:hover {
	background: var(--accent-blue-hover);
}

/* Slideout Size Variants */
#subslideoutPanel.subslideout-xsm,
#slideoutPanel.slideout-xsm {
	width: 260px;
}

#subslideoutPanel.subslideout-sm,
#slideoutPanel.slideout-sm {
	width: 360px;
}

#subslideoutPanel.subslideout-med,
#slideoutPanel.slideout-med {
	width: 500px;
}

#subslideoutPanel.subslideout-lrg,
#slideoutPanel.slideout-lrg {
	width: 650px;
}

#subslideoutPanel.subslideout-xlrg,
#slideoutPanel.slideout-xlrg {
	width: 800px;
}

#slideoutPanel.slideout-full {
	width: 100%;
}


/* ========================================================================== */
/* IMPORTS STYLES (consolidated from imports.css)                             */
/* ========================================================================== */

/* Imports Slideout */
.imports-actions {
	padding: 16px 24px;
	display: flex;
	gap: 12px;
	border-bottom: 1px solid var(--border);
	background: var(--bg-input);
}

.import-account-name {
	flex: 1;
	font-weight: bold;
}

.import-account-tag-col {
	display: flex;
	align-items: center;
	gap: 4px;
}

.select-tag-link {
	cursor: pointer;
	color: var(--color-blue);
	font-size: 0.85em;
}

/* X inside a tag pill to remove it */
.tag-pill-remove {
	cursor: pointer;
	margin-left: 4px;
	opacity: 0.7;
}

.tag-pill-remove:hover {
	opacity: 1;
}

/* Edit/delete action icons on account rows — hidden until hover */
.import-account-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	padding-left: 0 !important;
}

.import-account-actions .account-action-btn {
	opacity: 0;
	transition: opacity 0.15s;
}

.import-account-row:hover .import-account-actions .account-action-btn,
.import-account-actions.always-visible .account-action-btn {
	opacity: 1;
}

.account-action-btn {
	cursor: pointer;
	color: var(--text-muted);
}

.account-action-btn:hover {
	color: var(--text-primary);
}

.account-action-delete:hover {
	color: var(--danger);
}

.account-action-confirm:hover {
	color: var(--success);
}

.account-name-input {
	background: var(--bg-input);
	border: 1px solid var(--border);
	border-radius: 4px;
	color: var(--text-primary);
	padding: 2px 6px;
	font-size: 0.9em;
	width: 160px;
}

/* Smaller toggle for account setup rows */
.import-account-row .switch {
	width: 34px;
	height: 18px;
	margin-right: 0;
}

.import-account-row .slider:before {
	height: 12px;
	width: 12px;
	left: 3px;
	bottom: 3px;
}

.import-account-row input:checked + .slider:before {
	transform: translateX(16px);
}

.imports-section-title {
	padding: 12px 0;
	font-size: 13px;
	color: var(--text-dark);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.imports-transactions-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Transaction Row */
.imports-transaction-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	background: var(--bg-main);
	border-radius: 6px;
	cursor: pointer;
	border: 2px solid transparent;
	transition: all 0.2s ease;
}

.imports-transaction-row.selected {
	border-color: var(--accent-blue);
}

.imports-transaction-row.deselected {
	opacity: 0.5;
	border-color: rgba(59, 130, 246, 0.2);
}

.imports-transaction-row.selected.ignored {
	border-color: var(--danger-text);
}

.imports-transaction-row.deselected.ignored {
	border-color: rgba(239, 68, 68, 0.2);
}

.imports-transaction-row:hover {
	background: var(--border);
}

/* Row Columns */
.imports-col-date {
	font-size: 13px;
	color: var(--text-dark);
	white-space: nowrap;
}

.imports-col-desc {
	flex: 1;
	font-size: 14px;
	font-weight: 500;
	color: var(--text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.imports-col-amount {
	font-size: 14px;
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}

.imports-col-ignore {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Ignore Toggle Button */
.imports-toggle-btn {
	background: var(--border-hover);
	border: none;
	width: 44px;
	height: 24px;
	border-radius: 12px;
	cursor: pointer;
	position: relative;
	transition: all 0.2s;
}

.imports-toggle-btn::before {
	content: '';
	position: absolute;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--text-dark);
	top: 3px;
	left: 3px;
	transition: all 0.2s;
}

.imports-toggle-btn.active {
	background: var(--danger-text);
}

.imports-toggle-btn.active::before {
	left: 23px;
	background: #fff;
}

.imports-toggle-btn:hover {
	opacity: 0.8;
}

/* Duplicate Badge */
.imports-duplicate-badge {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	white-space: nowrap;
	padding: 2px 6px;
	border-radius: 3px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	margin-left: 8px;
	background: rgba(239, 68, 68, 0.2);
	color: var(--danger-text);
}

/* Footer */
.imports-footer {
	justify-content: space-between;
	align-items: center;
}

.imports-footer-info {
	font-size: 14px;
	color: var(--text-dark);
}

/* Account Header */
.imports-account-header {
	position: sticky;
	top: -24px;
	padding: 12px 0 12px 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-primary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-bottom: 1px solid var(--border);
	background: var(--bg-main);
	z-index: 10;
	margin: 0 -24px;
	padding-left: 24px;
	padding-right: 24px;
}

/* Empty State */
.imports-empty {
	text-align: center;
	padding: 40px 20px;
	color: var(--text-dark);
}

/* Main imports container */
.imports-container {
	padding: 35px 0px 20px 0px;
	background: var(--bg-main);
	border-radius: 6px;
}

/* Navigation tabs */
.imports-nav {
	border-bottom: 2px solid var(--border);
	margin-bottom: 0;
}

.imports-nav > li > a {
	background: transparent;
	color: var(--text-muted);
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	padding: 10px 20px;
}

.imports-nav > li > a:hover {
	background: transparent;
	color: var(--text-primary);
	border: none;
	border-bottom: 2px solid var(--border-hover);
}

.imports-nav > li.active > a,
.imports-nav > li.active > a:hover,
.imports-nav > li.active > a:focus {
	background: transparent;
	color: var(--accent-blue);
	border: none;
	border-bottom: 2px solid var(--accent-blue);
}

/* Tab content area */
.imports-tab-content {
	padding: 20px;
	background: var(--bg-input);
	border: 1px solid var(--border);
	border-top: none;
}

/* No imports message */
.NoNewImports {
	text-align: center;
	color: var(--danger-text);
	font-weight: bold;
	font-family: Tahoma;
	font-size: 15px;
	padding: 60px 0;
}

/* Import modal */
.modal-content.Import {
	width: 70%;
	max-height: 70%;
	height: 400px;
	padding: 0 0 10px 0;
	background: var(--bg-main);
	border: 1px solid var(--border);
}

.modal-content.Import #ModalHTML {
	overflow: auto;
	max-height: 100%;
	padding: 0 20px;
}

.modal-content.Import tr.header {
	position: sticky;
	top: 50px;
	background: var(--bg-main);
	z-index: 10;
}

.modal-content.Import tr.header td {
	box-shadow: 0 2px 0 0 var(--accent-blue);
	color: var(--text-primary);
}

/* Import tabs */
.import-tabs {
	display: flex;
	border-bottom: 2px solid var(--border);
	margin-bottom: 5px;
	position: sticky;
	top: 0;
	background: var(--bg-darker);
	z-index: 10;
}

.import-tab {
	padding: 10px 20px;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 16px;
	color: var(--text-muted);
}

.import-tab.active {
	color: var(--accent-blue);
	border-bottom: 2px solid var(--accent-blue);
	margin-bottom: -2px;
}

.import-tab:hover {
	color: var(--text-primary);
}

/* Import accounts — container is the grid so all rows share the same column widths */
#import-accounts-list {
	display: grid;
	grid-template-columns: 1fr auto auto auto auto;
}

.import-account-row {
	display: contents;
}

.import-account-row > div,
.import-account-header > div {
	display: flex;
	align-items: center;
	padding: 12px 15px;
	border-bottom: 1px solid var(--border);
	white-space: nowrap;
	background: var(--bg-main);
}

.import-account-header > div {
	font-weight: bold;
	border-bottom: 2px solid var(--border);
}

.import-account-row:hover > div {
	background: var(--bg-hover);
}

.import-account-row .import-account-name {
	font-weight: bold;
}

.import-account-row:hover {
	background: var(--bg-hover);
}

/* Toggle switch (imports) */
.switch {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 26px;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--border);
	transition: .3s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 20px;
	width: 20px;
	left: 3px;
	bottom: 3px;
	background-color: var(--text-muted);
	transition: .3s;
}

input:checked + .slider {
	background-color: var(--success);
}

input:checked + .slider:before {
	transform: translateX(24px);
	background-color: var(--success-text);
}

.slider.round {
	border-radius: 26px;
}

.slider.round:before {
	border-radius: 50%;
}

/* Status indicators */
.status-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-left: 5px;
}

.status-active {
	background-color: var(--success);
}

.status-inactive {
	background-color: var(--danger);
}

/* Account header rows */
.account-header {
	background: var(--bg-darker);
}

.account-header td {
	padding: 10px 8px;
	border-top: 2px solid var(--border);
	color: var(--text-primary);
	font-weight: 600;
}

/* Pending transactions table */
.pending-table {
	width: 100%;
	margin-top: 15px;
	background: var(--bg-main);
}

.pending-table thead {
	background: var(--bg-darker);
}

.pending-table th {
	color: var(--text-primary);
	padding: 10px 8px;
	border-bottom: 2px solid var(--accent-blue);
}

.pending-table td {
	padding: 8px;
	border-bottom: 1px solid var(--border);
}

.pending-table tbody tr:hover {
	background: var(--bg-hover);
}

.pending-table .col-checkbox {
	width: 50px;
	text-align: center;
}

.pending-table .col-date {
	white-space: nowrap;
}

.pending-table .col-merchant {
	width: 100%;
	max-width: 200px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pending-table .col-amount {
	width: 120px;
	text-align: right;
	white-space: nowrap;
}

/* Transaction footer buttons */
.pending-transactions-footer {
	margin-top: 15px;
	padding: 15px;
	background: var(--bg-darker);
	border-top: 1px solid var(--border);
	display: flex;
	gap: 12px;
}

.pending-transactions-footer .btn {
	padding: 10px 20px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
}

.pending-transactions-footer .btn-success {
	background: var(--success);
	color: var(--success-text);
	border: none;
}

.pending-transactions-footer .btn-success:hover {
	background: var(--success-hover);
}

.pending-transactions-footer .btn-warning {
	background: var(--border);
	color: var(--text-primary);
	border: 1px solid var(--border-hover);
}

.pending-transactions-footer .btn-warning:hover {
	background: var(--bg-hover);
	border-color: var(--border-focus);
}

/* Import Container */
.import-container {
	display: flex;
	flex-direction: column;
	height: 500px;
}

.import-header {
	flex-shrink: 0;
	font-weight: bold;
}

.import-body {
	flex: 1;
	overflow-y: auto;
}

.import-footer {
	flex-shrink: 0;
	padding: 10px 0;
	text-align: right;
}

.import-row {
	display: flex;
}

.col-check {
	width: 40px;
}

.col-date {
	width: 120px;
}

.col-desc {
	flex: 1;
}

.col-amount {
	width: 100px;
	text-align: right;
}

/* Pending transactions - div-based layout */
.pending-container {
	display: flex;
	flex-direction: column;
	height: 576px;
	background: var(--bg-main);
}

.pending-header {
	flex-shrink: 0;
	background: var(--bg-darker);
}

.pending-header .pending-row {
	font-weight: 600;
	color: var(--text-primary);
	border-bottom: 2px solid var(--accent-blue);
}

.pending-body {
	flex: 1;
	overflow-y: auto;
}

.pending-body .pending-row:hover {
	background: var(--bg-hover);
}

.pending-footer {
	flex-shrink: 0;
	padding: 15px;
	background: var(--bg-darker);
	border-top: 1px solid var(--border);
	display: flex;
	justify-content: flex-end;
	gap: 12px;
}

.pending-row {
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--border);
	padding: 0 10px;
}

.pending-row .col-checkbox {
	width: 50px;
	text-align: center;
	padding: 10px 8px;
}

.pending-row .col-date {
	width: 120px;
	white-space: nowrap;
	padding: 10px 8px;
}

.pending-row .col-description {
	flex: 1;
	padding: 10px 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pending-row .col-amount {
	width: 120px;
	text-align: right;
	white-space: nowrap;
	padding: 10px 8px;
}

.potential-duplicate {
	background-color: rgba(255, 0, 0, 0.1);
	border-left: 4px solid var(--danger-text);
}

.potential-duplicate:hover {
	background-color: rgba(255, 0, 0, 0.15);
}

 /* LITS - Line in the Sand */
  .lits-section {
        margin-bottom: 1.25rem;
  }
  .lits-section-header {
        font-size: 1.1rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--accent-blue);
        margin-bottom: 0.5rem;
        padding-bottom: 0.25rem;
        border-bottom: 1px solid var(--border-color);
  }
  .lits-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.35rem 0;
        font-size: 1.25rem;
        font-family: inherit;
        color: var(--text-muted);
  }
  .lits-value {
        font-variant-numeric: tabular-nums;
        color: var(--text-primary);
  }
  .lits-subtotal {
        font-weight: 600;
        color: var(--text-primary);
        border-top: 1px solid var(--border-color);
        margin-top: 0.35rem;
        padding-top: 0.5rem;
  }
  .lits-cc-row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.35rem 0;
  }
  .lits-cc-icon {
        font-size: 1rem;
        color: var(--text-dark);
  }
  .lits-cc-row .input-group {
        flex: 1;
  }
  .lits-cc-input {
        text-align: right;
  }
  .lits-add-cc {
        background: none;
        border: none;
        color: var(--accent-blue);
        font-size: 0.8rem;
        cursor: pointer;
        padding: 0.25rem 0;
        display: flex;
        align-items: center;
        gap: 0.25rem;
  }
  .lits-add-cc:hover {
        color: var(--accent-blue-hover);
  }
  .lits-result-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 1rem;
        border-radius: 6px;
        font-size: 1.1rem;
        font-weight: 700;
  }
  .lits-result-positive {
        background-color: var(--success-bg);
        color: var(--success-text);
  }
  .lits-result-negative {
        background-color: var(--danger-bg);
        color: var(--danger-text);
  }
  
  
   /* ========================================
     Jars Grid - New Card Layout
     ======================================== */

  .jars-container {
        padding: 20px;
  }

  .jars-header {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 16px;
  }

  .jars-title {
        font-size: 20px;
        font-weight: 800;
        color: var(--text-primary);
        letter-spacing: -0.03em;
  }

  .jars-total {
        font-size: 18px;
        font-weight: 800;
        font-family: 'JetBrains Mono', monospace;
        color: var(--text-primary);
        letter-spacing: -0.03em;
  }

  /* Wrapper for search + clear X button */
  .jar-search-wrap {
        position: relative;
        display: flex;
        align-items: center;
  }

  .jar-search-clear {
        position: absolute;
        right: 10px;
        cursor: pointer;
        color: var(--text-muted);
        font-size: 18px;
        line-height: 1;
        user-select: none;
  }

  .jar-search-clear:hover {
        color: var(--text-primary);
  }

  .jars-search {
        width: 100%;
        padding: 10px 30px 10px 16px; /* right padding leaves room for X */
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.06);
        background: rgba(255, 255, 255, 0.03);
        color: var(--text-primary);
        font-size: 13px;
        box-sizing: border-box;
  }

  .jars-search::placeholder {
        color: rgba(255, 255, 255, 0.25);
  }

  .jars-search:focus {
        outline: none;
        border-color: var(--accent-blue);
  }

  .jars-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 6px;
  }

  .jar-card {
        padding: 10px 12px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.025);
        border: 1px solid rgba(255, 255, 255, 0.04);
        cursor: pointer;
        text-align: center;
  }

  .jar-card:hover {
        background: rgba(255, 255, 255, 0.05);
  }

  .jar-card.selected {
        background: var(--selected-bg);
        border-color: var(--accent-blue);
  }

  .jar-card-negative {
        background: rgba(248, 113, 113, 0.06);
        border-color: rgba(248, 113, 113, 0.12);
  }

  .jar-card-negative:hover {
        background: rgba(248, 113, 113, 0.1);
  }

  .jar-card-name {
        font-size: 12px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.6);
        margin-bottom: 4px;
        line-height: 1.25;
        overflow: hidden;
        display: -webkit-box;
        line-clamp: 2;
		-webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
  }

  .jar-card-amount {
        font-size: 15px;
        font-weight: 700;
        font-family: 'JetBrains Mono', monospace;
        color: #fff;
  }

  .jar-card-negative .jar-card-amount {
        color: #f87171;
  }
  
  
    /* ========================================================================== */
  /* TOAST NOTIFICATIONS                                                        */
  /* ========================================================================== */

  /* Toast container - fixed position holds all toasts */
  .toast-container {
        position: fixed;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        gap: 10px;
        pointer-events: none;
        bottom: 20px;
        left: 20px;
        align-items: flex-start;
  }

  /* Individual toast */
  .toast {
        min-width: 300px;
        max-width: 420px;
        padding: 0;
        border-radius: 10px;
        color: #fff;
        font-family: inherit;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
        pointer-events: auto;
        cursor: pointer;
        overflow: hidden;
        position: relative;
        animation: toast-slide-in 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
  }

  /* Toast body layout */
  .toast-body {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 18px;
  }

  /* Toast type colors */
  .toast-success { background: #1e3a28; border-left: 4px solid #4caf50; }
  .toast-error   { background: #3a1e1e; border-left: 4px solid #f44336; }
  .toast-warning { background: #3a3018; border-left: 4px solid #ff9800; }
  .toast-info    { background: #1e2e3a; border-left: 4px solid #2196f3; }

  /* Toast icon */
  .toast-icon-wrap {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        flex-shrink: 0;
  }

  .toast-success .toast-icon-wrap { background: rgba(76, 175, 80, 0.2); color: #4caf50; }
  .toast-error .toast-icon-wrap   { background: rgba(244, 67, 54, 0.2); color: #f44336; }
  .toast-warning .toast-icon-wrap { background: rgba(255, 152, 0, 0.2); color: #ff9800; }
  .toast-info .toast-icon-wrap    { background: rgba(33, 150, 243, 0.2); color: #2196f3; }

  /* Toast text content */
  .toast-content { flex: 1; min-width: 0; }

  .toast-title {
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 2px;
  }

  .toast-message {
        font-size: 12px;
        opacity: 0.7;
        line-height: 1.4;
  }

  /* Toast close button */
  .toast-close {
        position: absolute;
        top: 8px;
        right: 10px;
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.3);
        font-size: 16px;
        cursor: pointer;
        padding: 2px 4px;
        line-height: 1;
        pointer-events: auto;
        transition: color 0.15s;
  }

  .toast-close:hover { color: rgba(255, 255, 255, 0.7); }

  /* Toast progress bar */
  .toast-progress {
        height: 3px;
        width: 100%;
        position: relative;
        overflow: hidden;
  }

  .toast-progress-bar {
        height: 100%;
        width: 100%;
        transform-origin: left;
  }

  .toast-success .toast-progress-bar { background: #4caf50; }
  .toast-error .toast-progress-bar   { background: #f44336; }
  .toast-warning .toast-progress-bar { background: #ff9800; }
  .toast-info .toast-progress-bar    { background: #2196f3; }

  /* Toast slide animations */
  @keyframes toast-slide-in {
        from { opacity: 0; transform: translateY(20px) scale(0.95); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  @keyframes toast-slide-out {
        from { opacity: 1; transform: translateY(0) scale(1); }
        to   { opacity: 0; transform: translateY(20px) scale(0.95); }
  }

  @keyframes toast-progress-shrink {
        from { transform: scaleX(1); }
        to   { transform: scaleX(0); }
  }

  /* Removing state */
  .toast.removing {
        animation: toast-slide-out 0.3s ease forwards;
  }
  
  
  /* Tax calculator rows */
  .tax-rate-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
  }

  .tax-rate-label {
        font-size: 11px;
        font-weight: 600;
        color: var(--text-muted);
        white-space: nowrap;
  }

  .tax-select {
        flex: 1;
        padding: 6px 10px;
        background: var(--bg-darker);
        border: 1px solid var(--border);
        border-radius: 6px;
        color: var(--text-light);
        font-size: 12px;
        font-family: inherit;
        appearance: none;
        cursor: pointer;
  }

  .amount-rows {
        display: flex;
        flex-direction: column;
        gap: 6px;
  }
  
   /* Tax calculator input rows */
  .input-wrap {
        display: flex;
        align-items: center;
        background: var(--bg-darker);
        border: 1px solid var(--border);
        border-radius: 6px;
        overflow: hidden;
        flex: 1;
  }

  .input-prefix {
        padding: 8px 10px;
        color: var(--text-muted);
        font-size: 13px;
        border-right: 1px solid var(--border);
  }

  .input-wrap input {
        background: transparent;
        border: none;
        outline: none;
        color: var(--text-light);
        font-size: 13px;
        padding: 8px;
        flex: 1;
        font-family: inherit;
        min-width: 0;
  }

  .tax-suffix {
        padding: 0 10px;
        border-left: 1px solid var(--border);
        border-top: none;
        border-right: none;
        border-bottom: none;
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
        background: transparent;
        font-family: inherit;
        height: 100%;
        display: flex;
        align-items: center;
        transition: all 0.15s;
  }

  .tax-suffix:hover {
        color: var(--success-text);
        background: rgba(34, 197, 94, 0.06);
  }

  .tax-suffix.on {
        color: var(--success-text);
        background: rgba(34, 197, 94, 0.1);
        border-left-color: rgba(34, 197, 94, 0.3);
  }
  
  
    .add-btn {
        width: 100%;
        margin-top: 10px;
        padding: 9px;
        background: var(--bg-main);
        border: 1px dashed var(--border);
        border-radius: 6px;
        color: var(--text-muted);
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        font-family: inherit;
        transition: all 0.15s;
  }

  .add-btn:hover {
        border-color: var(--text-muted);
        color: var(--text-light);
  }

/* ========== SLINKY / SANKEY ========== */

/* Breadcrumb navigation bar above the chart */
.sankey-breadcrumb {
	padding: 8px 4px 6px 4px;
	font-size: 13px;
	min-height: 30px;
	display: flex;
	align-items: center;
	gap: 2px;
	flex-wrap: wrap;
}

.sankey-crumb-link {
	color: var(--accent-blue);
	cursor: pointer;
}

.sankey-crumb-link:hover {
	text-decoration: underline;
}

.sankey-crumb-active {
	color: var(--text-primary);
}

.sankey-crumb-sep {
	margin: 0 5px;
	color: var(--text-muted);
}

.sankey-clickable {
	cursor: pointer;
}

#sankey-container {
	padding: 4px 0;
	width: 100%;
}

#sankey-svg {
	display: block;
	width: 100%;
}

/* SVG element classes used by sankey.js */
.sankey-node {
	cursor: default;
}

.sankey-link {
	cursor: default;
}

.sankey-label {
	pointer-events: none;
	user-select: none;
}

.sankey-label-amount {
	pointer-events: none;
	user-select: none;
}