/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ---- Shared components ---- */
.expense-pie {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
  background: #f5f5f5;
  box-shadow: inset 0 0 0 1px #ffffff;
}

.expense-pie-legend {
  list-style: none;
  margin-left: 0;
}

.expense-pie-legend li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.expense-pie-color {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid #e5e5e5;
}

.hierarchical-select option.root-category {
  font-weight: bold;
  color: #3273dc;
  background-color: #f0f0f0;
}

.hierarchical-select option.child-category {
  padding-left: 1.5em;
  color: #363636;
}

.hierarchical-select option:disabled {
  color: #7a7a7a;
  font-style: italic;
}

/* ---- Full-height page background ---- */
html {
  height: 100%;
}

body {
  min-height: 100%;
}

/* ---- Dark theme (Bulma overrides) ---- */
html[data-theme="dark"] {
  color-scheme: dark;
  background-color: #0f1419;
}

html[data-theme="dark"] body {
  background-color: #0f1419 !important;
  color: #e8eaed;
  min-height: 100%;
}

html[data-theme="dark"] .title,
html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .label,
html[data-theme="dark"] .content,
html[data-theme="dark"] strong {
  color: #e8eaed;
}

html[data-theme="dark"] .subtitle {
  color: #b0b8c4;
}

html[data-theme="dark"] a:not(.button):not(.tag) {
  color: #7eb6ff;
}

html[data-theme="dark"] a:not(.button):not(.tag):hover {
  color: #a8d0ff;
}

html[data-theme="dark"] .box {
  background-color: #1a2332;
  color: #e8eaed;
  box-shadow: 0 0.5em 1em -0.125em rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .section {
  background-color: transparent;
}

html[data-theme="dark"] .card {
  background-color: #1a2332;
  color: #e8eaed;
}

html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer {
  background-color: #151c28;
  border-color: #2a3544;
}

html[data-theme="dark"] .card-header-title {
  color: #e8eaed;
}

html[data-theme="dark"] .table {
  background-color: #1a2332;
  color: #e8eaed;
}

html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th {
  border-color: #2a3544;
  color: #e8eaed;
}

html[data-theme="dark"] .table thead td,
html[data-theme="dark"] .table thead th {
  color: #c5cdd8;
  border-color: #2a3544;
}

html[data-theme="dark"] .table.is-striped tbody tr:not(.is-selected):nth-child(even) {
  background-color: #151c28;
}

html[data-theme="dark"] .table.is-hoverable tbody tr:not(.is-selected):hover {
  background-color: #243044;
}

html[data-theme="dark"] .table.is-striped.is-hoverable tbody tr:not(.is-selected):hover {
  background-color: #243044;
}

html[data-theme="dark"] .input,
html[data-theme="dark"] .textarea,
html[data-theme="dark"] .select select {
  background-color: #151c28;
  border-color: #3a4656;
  color: #e8eaed;
}

html[data-theme="dark"] .input::placeholder,
html[data-theme="dark"] .textarea::placeholder {
  color: #7a8494;
}

html[data-theme="dark"] .input:focus,
html[data-theme="dark"] .textarea:focus,
html[data-theme="dark"] .select select:focus,
html[data-theme="dark"] .is-active.input,
html[data-theme="dark"] .is-active.textarea,
html[data-theme="dark"] .is-focused.input,
html[data-theme="dark"] .is-focused.textarea,
html[data-theme="dark"] .input:active,
html[data-theme="dark"] .textarea:active,
html[data-theme="dark"] .select select:active {
  border-color: #3273dc;
  box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
}

html[data-theme="dark"] .input:disabled,
html[data-theme="dark"] .textarea:disabled,
html[data-theme="dark"] .select select:disabled,
html[data-theme="dark"] .input[readonly],
html[data-theme="dark"] .textarea[readonly] {
  background-color: #121820;
  border-color: #2a3544;
  color: #9aa3b0;
}

html[data-theme="dark"] .select:not(.is-multiple):not(.is-loading)::after {
  border-color: #9aa3b0;
}

html[data-theme="dark"] .checkbox,
html[data-theme="dark"] .radio {
  color: #e8eaed;
}

html[data-theme="dark"] .help {
  color: #9aa3b0;
}

html[data-theme="dark"] .button.is-light {
  background-color: #2a3544;
  border-color: transparent;
  color: #e8eaed;
}

html[data-theme="dark"] .button.is-light:hover,
html[data-theme="dark"] .button.is-light.is-hovered {
  background-color: #354457;
  color: #ffffff;
}

html[data-theme="dark"] .button.is-static {
  background-color: #2a3544;
  border-color: #3a4656;
  color: #c5cdd8;
  box-shadow: none;
}

html[data-theme="dark"] .button.is-outlined {
  background-color: transparent;
}

html[data-theme="dark"] .button.is-outlined:hover {
  border-color: currentColor;
}

html[data-theme="dark"] .button.is-ghost {
  color: #e8eaed;
}

html[data-theme="dark"] .notification {
  background-color: #1a2332;
  color: #e8eaed;
}

html[data-theme="dark"] .notification.is-light {
  background-color: #243044;
  color: #e8eaed;
}

html[data-theme="dark"] .notification.is-success.is-light {
  background-color: #163528;
  color: #7ddea0;
}

html[data-theme="dark"] .notification.is-danger.is-light {
  background-color: #3a1a1f;
  color: #ff8a9a;
}

html[data-theme="dark"] .notification.is-info.is-light {
  background-color: #153040;
  color: #7ec8ff;
}

html[data-theme="dark"] .notification.is-warning.is-light {
  background-color: #3a3010;
  color: #ffd666;
}

html[data-theme="dark"] .notification.is-primary.is-light {
  background-color: #1a2840;
  color: #8fb4ff;
}

html[data-theme="dark"] .tag:not(body) {
  background-color: #2a3544;
  color: #e8eaed;
}

html[data-theme="dark"] .tag:not(body).is-light {
  background-color: #2a3544;
  color: #c5cdd8;
}

html[data-theme="dark"] .tag:not(body).is-white {
  background-color: #2a3544;
  color: #e8eaed;
}

html[data-theme="dark"] .menu-list a {
  color: #c5cdd8;
}

html[data-theme="dark"] .menu-list a:hover {
  background-color: #243044;
  color: #ffffff;
}

html[data-theme="dark"] .menu-list a.is-active {
  background-color: #3273dc;
  color: #ffffff;
}

html[data-theme="dark"] .panel {
  background-color: #1a2332;
}

html[data-theme="dark"] .panel-heading,
html[data-theme="dark"] .panel-block,
html[data-theme="dark"] .panel-tabs a {
  border-color: #2a3544;
  color: #e8eaed;
}

html[data-theme="dark"] .panel-block:hover {
  background-color: #243044;
}

html[data-theme="dark"] .dropdown-content {
  background-color: #1a2332;
  box-shadow: 0 0.5em 1em -0.125em rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .dropdown-item {
  color: #e8eaed;
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] a.dropdown-item:hover {
  background-color: #243044;
  color: #ffffff;
}

html[data-theme="dark"] .modal-card-head,
html[data-theme="dark"] .modal-card-foot {
  background-color: #151c28;
  border-color: #2a3544;
}

html[data-theme="dark"] .modal-card-title {
  color: #e8eaed;
}

html[data-theme="dark"] .modal-card-body {
  background-color: #1a2332;
  color: #e8eaed;
}

html[data-theme="dark"] hr {
  background-color: #2a3544;
}

html[data-theme="dark"] code,
html[data-theme="dark"] pre {
  background-color: #121820;
  color: #e8eaed;
}

html[data-theme="dark"] details summary {
  color: #e8eaed;
}

/* Text / background utility overrides used in views */
html[data-theme="dark"] .has-background-light,
html[data-theme="dark"] .has-background-white {
  background-color: #1a2332 !important;
}

html[data-theme="dark"] .has-background-dark {
  background-color: #0f1419 !important;
}

html[data-theme="dark"] .has-background-primary-light {
  background-color: #1a2840 !important;
}

html[data-theme="dark"] .has-background-info-light {
  background-color: #153040 !important;
}

html[data-theme="dark"] .has-background-success-light {
  background-color: #163528 !important;
}

html[data-theme="dark"] .has-background-warning-light {
  background-color: #3a3010 !important;
}

html[data-theme="dark"] .has-background-danger-light {
  background-color: #3a1a1f !important;
}

html[data-theme="dark"] .has-background-link-light {
  background-color: #1a2840 !important;
}

html[data-theme="dark"] .has-text-grey,
html[data-theme="dark"] .has-text-grey-dark,
html[data-theme="dark"] .has-text-grey-light {
  color: #9aa3b0 !important;
}

html[data-theme="dark"] .has-text-black,
html[data-theme="dark"] .has-text-dark {
  color: #e8eaed !important;
}

html[data-theme="dark"] .has-text-success-dark {
  color: #7ddea0 !important;
}

html[data-theme="dark"] .has-text-danger-dark {
  color: #ff8a9a !important;
}

html[data-theme="dark"] .has-text-info-dark {
  color: #7ec8ff !important;
}

html[data-theme="dark"] .has-text-warning-dark {
  color: #ffd666 !important;
}

html[data-theme="dark"] .has-text-primary-dark {
  color: #8fb4ff !important;
}

html[data-theme="dark"] .has-text-link-dark {
  color: #8fb4ff !important;
}

/* Keep accent text colors readable on dark backgrounds */
html[data-theme="dark"] .has-text-primary {
  color: #7eb6ff !important;
}

html[data-theme="dark"] .has-text-info {
  color: #5eb8ff !important;
}

html[data-theme="dark"] .has-text-success {
  color: #48c78e !important;
}

html[data-theme="dark"] .has-text-warning {
  color: #ffe08a !important;
}

html[data-theme="dark"] .has-text-danger {
  color: #f14668 !important;
}

html[data-theme="dark"] .has-text-link {
  color: #7eb6ff !important;
}

/* Custom components */
html[data-theme="dark"] .expense-pie {
  border-color: #3a4656;
  background: #151c28;
  box-shadow: inset 0 0 0 1px #2a3544;
}

html[data-theme="dark"] .expense-pie-color {
  border-color: #3a4656;
}

html[data-theme="dark"] .hierarchical-select option.root-category {
  color: #7eb6ff;
  background-color: #243044;
}

html[data-theme="dark"] .hierarchical-select option.child-category {
  color: #e8eaed;
  background-color: #1a2332;
}

html[data-theme="dark"] .hierarchical-select option:disabled {
  color: #7a8494;
}

html[data-theme="dark"] .category-cascade .select select {
  background-color: #151c28;
  border-color: #3a4656;
  color: #e8eaed;
}