/* ==UserStyle==
@name Wallet Dark
@namespace github.com/aruncveli/userstyles
@version 26.10.24
@description Dark theme for Wallet.
@author Arun Chandanaveli <aruncveli@gmail.com> (https://github.com/aruncveli)
@homepageURL https://github.com/aruncveli/userstyles
@supportURL https://github.com/aruncveli/userstyles/issues
@updateURL https://raw.githubusercontent.com/aruncveli/userstyles/refs/heads/main/sites/wallet/wallet.user.css
@license MIT
@preprocessor default
@var color fg "Foreground" #fff
@var color bg "Background" #000
@var color bg1 "Background lightened 1" #111
@var color bg2 "Background lightened 2" #222
@var color bg3 "Background lightened 3" #333
@var color link-color "Link" #0b84ff
@var color red-color "Red" #ff443a
==/UserStyle== */

@-moz-document domain("web.budgetbakers.com") {
  :root {
    color-scheme: dark;
  }
  :host([data-mantine-color-scheme="light"]),
  :root[data-mantine-color-scheme="light"] {
    --mantine-color-scheme: dark;
    --mantine-primary-color-contrast: var(--mantine-color-white);
    --mantine-color-bright: var(--mantine-color-white);
    --mantine-color-text: var(--mantine-color-dark-0);
    --mantine-color-body: var(--mantine-color-dark-7);
    --mantine-color-error: var(--mantine-color-red-8);
    --mantine-color-placeholder: var(--mantine-color-dark-3);
    --mantine-color-anchor: var(--mantine-color-blue-4);
    --mantine-color-default: var(--mantine-color-dark-6);
    --mantine-color-default-hover: var(--mantine-color-dark-5);
    --mantine-color-default-color: var(--mantine-color-white);
    --mantine-color-default-border: var(--mantine-color-dark-4);
    --mantine-color-dimmed: var(--mantine-color-dark-2);
    --mantine-color-disabled: var(--mantine-color-dark-6);
    --mantine-color-disabled-color: var(--mantine-color-dark-3);
    --mantine-color-disabled-border: var(--mantine-color-dark-4);
    --mantine-color-dark-text: var(--mantine-color-dark-4);
    --mantine-color-dark-filled: var(--mantine-color-dark-8);
    --mantine-color-dark-filled-hover: var(--mantine-color-dark-9);
    --mantine-color-dark-light: rgba(10, 10, 10, 1);
    --mantine-color-dark-light-hover: rgba(14, 14, 14, 1);
    --mantine-color-dark-light-color: var(--mantine-color-dark-0);
    --mantine-color-dark-outline: var(--mantine-color-dark-4);
    --mantine-color-dark-outline-hover: rgba(66, 66, 66, 0.05);
    --mantine-color-gray-text: var(--mantine-color-gray-4);
    --mantine-color-gray-filled: var(--mantine-color-gray-8);
    --mantine-color-gray-filled-hover: var(--mantine-color-gray-9);
    --mantine-color-gray-light: rgba(17, 19, 21, 1);
    --mantine-color-gray-light-hover: rgba(23, 26, 29, 1);
    --mantine-color-gray-light-color: var(--mantine-color-gray-0);
    --mantine-color-gray-outline: var(--mantine-color-gray-4);
    --mantine-color-gray-outline-hover: rgba(206, 212, 218, 0.05);
    --mantine-color-red-text: var(--mantine-color-red-4);
    --mantine-color-red-filled: var(--mantine-color-red-8);
    --mantine-color-red-filled-hover: var(--mantine-color-red-9);
    --mantine-color-red-light: rgba(101, 21, 21, 1);
    --mantine-color-red-light-hover: rgba(141, 29, 29, 1);
    --mantine-color-red-light-color: var(--mantine-color-red-0);
    --mantine-color-red-outline: var(--mantine-color-red-4);
    --mantine-color-red-outline-hover: rgba(255, 135, 135, 0.05);
    --mantine-color-pink-text: var(--mantine-color-pink-4);
    --mantine-color-pink-filled: var(--mantine-color-pink-8);
    --mantine-color-pink-filled-hover: var(--mantine-color-pink-9);
    --mantine-color-pink-light: rgba(83, 15, 39, 1);
    --mantine-color-pink-light-hover: rgba(116, 21, 54, 1);
    --mantine-color-pink-light-color: var(--mantine-color-pink-0);
    --mantine-color-pink-outline: var(--mantine-color-pink-4);
    --mantine-color-pink-outline-hover: rgba(247, 131, 172, 0.05);
    --mantine-color-grape-text: var(--mantine-color-grape-4);
    --mantine-color-grape-filled: var(--mantine-color-grape-8);
    --mantine-color-grape-filled-hover: var(--mantine-color-grape-9);
    --mantine-color-grape-light: rgba(67, 23, 78, 1);
    --mantine-color-grape-light-hover: rgba(94, 32, 109, 1);
    --mantine-color-grape-light-color: var(--mantine-color-grape-0);
    --mantine-color-grape-outline: var(--mantine-color-grape-4);
    --mantine-color-grape-outline-hover: rgba(218, 119, 242, 0.05);
    --mantine-color-violet-text: var(--mantine-color-violet-4);
    --mantine-color-violet-filled: var(--mantine-color-violet-8);
    --mantine-color-violet-filled-hover: var(--mantine-color-violet-9);
    --mantine-color-violet-light: rgba(48, 31, 98, 1);
    --mantine-color-violet-light-hover: rgba(67, 43, 137, 1);
    --mantine-color-violet-light-color: var(--mantine-color-violet-0);
    --mantine-color-violet-outline: var(--mantine-color-violet-4);
    --mantine-color-violet-outline-hover: rgba(151, 117, 250, 0.05);
    --mantine-color-indigo-text: var(--mantine-color-indigo-4);
    --mantine-color-indigo-filled: var(--mantine-color-indigo-8);
    --mantine-color-indigo-filled-hover: var(--mantine-color-indigo-9);
    --mantine-color-indigo-light: rgba(27, 40, 100, 1);
    --mantine-color-indigo-light-hover: rgba(38, 55, 139, 1);
    --mantine-color-indigo-light-color: var(--mantine-color-indigo-0);
    --mantine-color-indigo-outline: var(--mantine-color-indigo-4);
    --mantine-color-indigo-outline-hover: rgba(116, 143, 252, 0.05);
    --mantine-color-blue-text: var(--mantine-color-blue-4);
    --mantine-color-blue-filled: var(--mantine-color-blue-8);
    --mantine-color-blue-filled-hover: var(--mantine-color-blue-9);
    --mantine-color-blue-light: rgba(12, 50, 86, 1);
    --mantine-color-blue-light-hover: rgba(17, 70, 120, 1);
    --mantine-color-blue-light-color: var(--mantine-color-blue-0);
    --mantine-color-blue-outline: var(--mantine-color-blue-4);
    --mantine-color-blue-outline-hover: rgba(77, 171, 247, 0.05);
    --mantine-color-cyan-text: var(--mantine-color-cyan-4);
    --mantine-color-cyan-filled: var(--mantine-color-cyan-8);
    --mantine-color-cyan-filled-hover: var(--mantine-color-cyan-9);
    --mantine-color-cyan-light: rgba(6, 57, 67, 1);
    --mantine-color-cyan-light-hover: rgba(8, 80, 93, 1);
    --mantine-color-cyan-light-color: var(--mantine-color-cyan-0);
    --mantine-color-cyan-outline: var(--mantine-color-cyan-4);
    --mantine-color-cyan-outline-hover: rgba(59, 201, 219, 0.05);
    --mantine-color-teal-text: var(--mantine-color-teal-4);
    --mantine-color-teal-filled: var(--mantine-color-teal-8);
    --mantine-color-teal-filled-hover: var(--mantine-color-teal-9);
    --mantine-color-teal-light: rgba(4, 64, 46, 1);
    --mantine-color-teal-light-hover: rgba(6, 89, 64, 1);
    --mantine-color-teal-light-color: var(--mantine-color-teal-0);
    --mantine-color-teal-outline: var(--mantine-color-teal-4);
    --mantine-color-teal-outline-hover: rgba(56, 217, 169, 0.05);
    --mantine-color-green-text: var(--mantine-color-green-4);
    --mantine-color-green-filled: var(--mantine-color-green-8);
    --mantine-color-green-filled-hover: var(--mantine-color-green-9);
    --mantine-color-green-light: rgba(22, 69, 31, 1);
    --mantine-color-green-light-hover: rgba(30, 97, 43, 1);
    --mantine-color-green-light-color: var(--mantine-color-green-0);
    --mantine-color-green-outline: var(--mantine-color-green-4);
    --mantine-color-green-outline-hover: rgba(105, 219, 124, 0.05);
    --mantine-color-lime-text: var(--mantine-color-lime-4);
    --mantine-color-lime-filled: var(--mantine-color-lime-8);
    --mantine-color-lime-filled-hover: var(--mantine-color-lime-9);
    --mantine-color-lime-light: rgba(46, 74, 7, 1);
    --mantine-color-lime-light-hover: rgba(64, 104, 9, 1);
    --mantine-color-lime-light-color: var(--mantine-color-lime-0);
    --mantine-color-lime-outline: var(--mantine-color-lime-4);
    --mantine-color-lime-outline-hover: rgba(169, 227, 75, 0.05);
    --mantine-color-yellow-text: var(--mantine-color-yellow-4);
    --mantine-color-yellow-filled: var(--mantine-color-yellow-8);
    --mantine-color-yellow-filled-hover: var(--mantine-color-yellow-9);
    --mantine-color-yellow-light: rgba(115, 60, 0, 1);
    --mantine-color-yellow-light-hover: rgba(161, 83, 0, 1);
    --mantine-color-yellow-light-color: var(--mantine-color-yellow-0);
    --mantine-color-yellow-outline: var(--mantine-color-yellow-4);
    --mantine-color-yellow-outline-hover: rgba(255, 212, 59, 0.05);
    --mantine-color-orange-text: var(--mantine-color-orange-4);
    --mantine-color-orange-filled: var(--mantine-color-orange-8);
    --mantine-color-orange-filled-hover: var(--mantine-color-orange-9);
    --mantine-color-orange-light: rgba(109, 36, 8, 1);
    --mantine-color-orange-light-hover: rgba(152, 50, 11, 1);
    --mantine-color-orange-light-color: var(--mantine-color-orange-0);
    --mantine-color-orange-outline: var(--mantine-color-orange-4);
    --mantine-color-orange-outline-hover: rgba(255, 169, 77, 0.05);

    /* Wallet's own palettes; the low indices are light surfaces */
    --mantine-color-wallet-grey-0: var(--bg2);
    --mantine-color-wallet-grey-1: var(--bg1);
    --mantine-color-wallet-grey-2: var(--bg);
    --mantine-color-wallet-grey-3: var(--bg3);
    --mantine-color-wallet-grey-4: var(--mantine-color-dark-3);
    --mantine-color-wallet-modal-0: var(--bg1);
    --mantine-color-wallet-modal-1: var(--bg1);
    --mantine-color-wallet-modal-2: var(--bg2);
    --mantine-color-wallet-modal-4: var(--bg1);
    --mantine-color-wallet-modal-5: var(--bg1);
    --mantine-color-wallet-modal-6: var(--bg3);
    /* Used as a text color on light modal surfaces */
    --mantine-color-wallet-modal-8: var(--fg);
    --mantine-color-app-colors-8: var(--bg1);
  }

  html,
  body,
  .mantine-AppShell-main {
    background-color: var(--bg) !important;
    color: var(--fg);
  }

  .mantine-AppShell-header,
  .mantine-AppShell-navbar,
  [class~="bg-white"] {
    background-color: var(--bg1) !important;
  }

  .mantine-AppShell-header {
    border-bottom-color: var(--bg1) !important;
  }

  [class~="bg-white"],
  [class~="!bg-white"] {
    color: var(--fg);
  }

  .mantine-Popover-dropdown,
  .mantine-Menu-dropdown,
  .mantine-Menu-arrow {
    --popover-border-color: var(--bg3);
    background-color: var(--bg2);
    border-color: var(--bg3);
    color: var(--fg);
  }

  /* Bulk action bar above record/import lists */
  [class~="bg-wallet-grey-1"] {
    background-color: var(--bg1);
  }

  /* Date group headers of record/import lists */
  [class~="bg-wallet-grey-2"] {
    background-color: var(--bg);
  }

  /* Cards and other raised surfaces */
  .mantine-Card-root {
    background-color: var(--bg1);
  }

  .mantine-Accordion-item {
    --item-filled-color: var(--bg1);
    --item-border-color: var(--bg2);
  }

  .mantine-Accordion-control:not(:disabled, [data-disabled]):hover {
    background-color: var(--bg2);
  }

  .mantine-Dropzone-root {
    background-color: var(--bg1);
    border-color: var(--bg3);
  }

  /* Segmented control (e.g. the preset switcher in the date range picker) */
  .mantine-SegmentedControl-root {
    /* The pill marking the active segment, otherwise white */
    --sc-color: var(--bg1);
    --sc-label-color: var(--fg);
    background-color: var(--bg3);
  }

  /* The record modal's type switcher sets its background inline */
  .mantine-SegmentedControl-root[style*="background-color: white"] {
    background-color: var(--bg2) !important;
  }

  /* Mantine declares --separator-color on the control itself, so setting it on the root
     would be shadowed */
  .mantine-SegmentedControl-control {
    --separator-color: var(--mantine-color-dark-4);
  }

  .mantine-SegmentedControl-label {
    color: var(--fg);
  }

  /* Mantine's hover darkens the label text instead; raise the segment's background */
  .mantine-SegmentedControl-label:not(
      [data-disabled],
      [data-active],
      [data-read-only]
    ):hover {
    color: var(--fg);
    background-color: var(--bg3);
  }

  /* Day/month/year cells in the date pickers */
  [class*="mantine-"][class*="pickerControl"]:hover:not(
      [data-disabled],
      :disabled
    ),
  .mantine-Day-day:hover:not([data-disabled], :disabled) {
    background-color: var(--bg3);
  }

  .mantine-Menu-item:where(:hover, :focus, [data-menu-active]):not(
      :disabled,
      [data-disabled]
    ) {
    --menu-item-hover: var(--bg3);
  }

  /* Progress bar tracks (e.g. the currency breakdown on Analytics) */
  .mantine-Progress-root {
    background-color: var(--bg1);
  }

  /* Close buttons (modals, inputs) are dark grey text that hover to a near-white background */
  .mantine-CloseButton-root {
    color: var(--mantine-color-dark-1);
  }

  .mantine-CloseButton-root:where(:not([data-disabled], :disabled)):is(
      :hover,
      :active
    ) {
    background-color: var(--bg3);
    color: var(--fg);
  }

  /* Mantine's light-scheme rule has two classes/attributes worth of specificity */
  [data-mantine-color-scheme] .mantine-Switch-track {
    --switch-bg: var(--bg3);
  }

  /* Dashboard widget buttons and the percentage badge are styled inline */
  .mantine-ActionIcon-root[style*="background-color: rgb(239, 240, 242)"] {
    background-color: var(--bg3) !important;
    color: var(--fg);
  }

  .mantine-Badge-root[style*="--badge-bg: #f1f3f5"] {
    --badge-bg: var(--bg3) !important;
  }

  .mantine-ChartTooltip-tooltip {
    border-color: var(--bg3);
  }

  /* Chips for selected multi-select values */
  .mantine-Pill-root {
    background-color: var(--bg3);
    color: var(--fg);
  }

  .mantine-InputClearButton-root {
    color: var(--fg);
  }

  /* Mantine renders dropdown options with a per-component class (Combobox / Select /
     MultiSelect), so target the shared data attribute instead */
  [data-combobox-option]:hover:not(
      [data-combobox-selected],
      [data-combobox-disabled]
    ) {
    background-color: var(--bg3);
  }

  .mantine-Input-input,
  .mantine-InputBase-input {
    --input-bd: var(--bg1);
    background-color: var(--bg1);
    color: var(--fg);
  }

  /* The clear button paints itself with --input-bg via an inline style, so recolor the
     variable on its container rather than fighting the inline value */
  .mantine-Input-section {
    --input-bg: var(--bg1);
  }

  .mantine-Checkbox-input:not(:checked) {
    background-color: var(--bg3);
    border-color: var(--bg3);
  }

  /* Chevron icon of the profile menu in the header */
  .mantine-AppShell-header .mantine-ThemeIcon-root {
    background-color: var(--bg3);
    color: var(--fg);
  }

  .mantine-Tabs-tab {
    --tab-hover-color: var(--bg2);
  }

  /* Sticky table header cells paint their own opaque background */
  .mantine-Table-th {
    background-color: var(--bg);
  }

  .mantine-Table-table {
    --table-hover-color: var(--bg2);
    --table-striped-color: var(--bg1);
    --table-border-color: var(--bg);
    /* Set as an inline style on the table, so it needs !important */
    --table-highlight-on-hover-color: var(--bg2) !important;
  }

  /* Tailwind's preflight paints a light default border color on every element */
  *,
  ::before,
  ::after {
    border-color: var(--bg);
  }

  .mantine-Divider-root {
    --divider-color: var(--bg);
  }

  /* Cards and their section separators sit on --bg1, so --bg is the darker neighbour.
     Mantine's light-scheme rule has two classes/attributes worth of specificity */
  [data-mantine-color-scheme] .mantine-Paper-root {
    --paper-border-color: var(--bg);
  }

  .mantine-Card-section {
    --border-color: var(--bg);
  }

  /* Elements inside the lightened side panel sit on --bg1 instead */
  .mantine-AppShell-navbar,
  .mantine-AppShell-navbar *,
  [class~="bg-white"],
  [class~="bg-white"] * {
    --divider-color: var(--bg1);
    --input-bd: var(--bg1);
    border-color: var(--bg1);
  }

  /* Lift the filter inputs off the panel so they don't read as disabled */
  [class~="bg-white"] .mantine-Input-section {
    --input-bg: var(--bg2);
  }

  [class~="bg-white"] .mantine-Input-input,
  [class~="bg-white"] .mantine-InputBase-input {
    --input-bd: var(--bg3);
    --input-placeholder-color: var(--mantine-color-dark-1);
    background-color: var(--bg2);
    border-color: var(--bg3);
  }

  /* Sticky tab bar */
  div[style*="background: rgb(241, 243, 245)"] {
    background-color: var(--bg1) !important;
  }

  /* Table header rows */
  tr[style*="background: rgb(241, 243, 245)"] {
    background-color: var(--bg) !important;
  }

  [style*="color: rgb(53, 64, 82)"],
  [style*="color: var(--mantine-color-black)"] {
    color: var(--fg) !important;
  }

  [style*="border-color: rgb(229, 231, 235)"] {
    border-color: var(--bg3) !important;
  }

  .mantine-Title-root,
  .mantine-Text-root,
  .mantine-NavLink-label,
  .mantine-NavLink-description {
    color: inherit;
  }

  [style*="color: var(--mantine-color-dimmed)"] {
    color: var(--fg) !important;
  }

  .mantine-NavLink-root[data-active="true"] {
    background-color: var(--mantine-color-wallet-green-8) !important;
    color: var(--fg) !important;
  }

  /* The label is tinted green via an inline style, which is unreadable on the green
     background of the active item */
  .mantine-NavLink-root[data-active="true"] .mantine-NavLink-label {
    color: var(--fg) !important;
  }

  .mantine-NavLink-root:not([data-active="true"]):hover {
    --nl-hover: var(--bg2) !important;
    background-color: var(--bg2) !important;
    color: var(--fg) !important;
  }

  @layer utilities {
    .hover\:\!bg-wallet-grey-2:hover {
      background-color: var(--bg2) !important;
    }

    .hover\:bg-wallet-grey-3:hover,
    .focus-visible\:bg-wallet-grey-3:focus-visible {
      background-color: var(--bg3);
    }

    .\!bg-white {
      background-color: var(--bg1) !important;
    }

    .\!bg-app-colors-8,
    .\!bg-wallet-grey-2 {
      background-color: var(--bg2) !important;
    }

    .bg-app-colors-8,
    .bg-wallet-grey-0,
    .bg-wallet-modal-0,
    .bg-wallet-modal-1 {
      background-color: var(--bg1);
    }

    .border-wallet-modal-2 {
      border-color: var(--bg2);
    }

    /* Mantine's gray-9 is a near-black text colour */
    .text-gray-9,
    .hover\:text-gray-9:hover {
      color: var(--fg);
    }

    /* Inactive tab hover underline */
    .hover\:border-gray-5:hover {
      border-color: var(--bg3);
    }
  }
}

@-moz-document url-prefix("https://web.budgetbakers.com/records")
{
  /* Bulk action bar while records are selected */
  [class~="bg-yellow-0"] {
    background-color: var(--bg1) !important;
  }
}