WYGIWYH/frontend/src/styles/tailwind.css

@import "tailwindcss" source("../../../app/templates/");

@plugin "daisyui" {
  themes: wygiwyh_dark --default, wygiwyh_light;
  logs: true;
}
@plugin "tw-bootstrap-grid";

@plugin "daisyui/theme" {
  name: "wygiwyh_light";
  default: false;
  prefersdark: false;
  color-scheme: "light";
  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(98% 0 0);
  --color-base-300: oklch(96% 0 0);
  --color-base-content: oklch(21% 0.006 285.885);
  --color-primary: #b07526;
  --color-primary-content: #fcf2e7;
  --color-secondary: oklch(44% 0.043 257.281);
  --color-secondary-content: oklch(98% 0.003 247.858);
  --color-accent: oklch(70% 0.01 56.259);
  --color-accent-content: oklch(14% 0.004 49.25);
  --color-neutral: oklch(14% 0.005 285.823);
  --color-neutral-content: oklch(92% 0.004 286.32);
  --color-info: oklch(74% 0.16 232.661);
  --color-info-content: oklch(29% 0.066 243.157);
  --color-success: #4b8f45;
  --color-success-content: #ebf6ea;
  --color-warning: #b07526;
  --color-warning-content: #fcf2e7;
  --color-error: #b44041;
  --color-error-content: #ffeae8;
  --radius-selector: 0.5rem;
  --radius-field: 0.5rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 2px;
  --depth: 0;
  --noise: 0;
  --root-bg: oklch(93% 0 0);
}


@plugin "daisyui/theme" {
  name: "wygiwyh_dark";
  default: true;
  prefersdark: true;
  color-scheme: "dark";
  --color-base-100: oklch(32.33% 0.016 252.42);
  --color-base-200: oklch(30.26% 0.016 252.42);
  --color-base-300: oklch(28.15% 0.016 252.42);
  --color-base-content: oklch(97.807% 0.029 256.847);
  --color-primary: oklch(87% 0.169 91.605);
  --color-primary-content: oklch(41% 0.112 45.904);
  --color-secondary: oklch(44% 0.043 257.281);
  --color-secondary-content: oklch(98% 0.003 247.858);
  --color-accent: oklch(70% 0.01 56.259);
  --color-accent-content: oklch(14% 0.004 49.25);
  --color-neutral: oklch(14% 0.005 285.823);
  --color-neutral-content: oklch(92% 0.004 286.32);
  --color-info: oklch(74% 0.16 232.661);
  --color-info-content: oklch(29% 0.066 243.157);
  --color-success: oklch(76% 0.177 163.223);
  --color-success-content: oklch(37% 0.077 168.94);
  --color-warning: oklch(82% 0.189 84.429);
  --color-warning-content: oklch(41% 0.112 45.904);
  --color-error: oklch(70.4% 0.191 22.216);
  --color-error-content: oklch(25.8% 0.092 26.042);
  --radius-selector: 0.5rem;
  --radius-field: 0.5rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 2px;
  --depth: 0;
  --noise: 0;
  --root-bg: oklch(26.33% 0.016 252.42);
}


@custom-variant dark (&:where([data-bs-theme=dark], [data-bs-theme=dark] *), &:where([data-theme=dark], [data-theme=dark] *));
@custom-variant hover (&:hover);


@theme {
    --font-mono: "JetBrains Mono Variable", monospace;
}


@layer utilities {
    .textarea {
        min-height: unset;
    }

    .transaction:has(input[type="checkbox"]:checked) > div > .transaction-item {
        background-color: oklch(from var(--color-primary) l c h / 15%);
    }


    .bg-root {
        background-color: var(--root-bg) !important;
    }

    .fieldset-legend {
        @apply text-xs;
        @apply justify-start;
    }

    .fieldset-legend .asteriskField {
        @apply text-error;
    }

    .hr {
        @apply text-base-content/60;
    }

    .card.card-border-base-100 {
            border: var(--border) solid var(--color-base-100);
    }

    .card.card-border-base-200 {
            border: var(--border) solid var(--color-base-200);
    }

    .card.card-border {
            border: var(--border) solid var(--color-base-200);
    }

    .card.card-border-base-300 {
            border: var(--border) solid var(--color-base-300);
    }

    .text-income {
        @apply text-success;
    }

    .text-expense {
        @apply text-error;
    }

    .text-exchange-rate {
        @apply text-base-content/60 text-xs;
    }

    .text-subtle {
        @apply text-base-content/80;
    }

    /* Card Data Display Styles */
    .card-data-section {
        @apply space-y-2;
    }

    .card-data-row {
        @apply flex justify-between py-1 px-3 rounded-lg transition-colors duration-150 hover:bg-base-200/50 items-center;
    }

    .card-data-label {
        @apply text-base-content/80; /* .text-subtle */
        @apply text-sm font-medium;
    }

    .card-data-values {
        @apply flex flex-col items-end gap-0.5;
    }

    .card-data-divider {
        @apply text-base-content/60; /* .hr */
        @apply my-3;
    }

    .table-col-auto {
        @apply w-1;
    }

    .btn.btn-free {
        @apply min-h-(--size) py-1;
        height: unset;
    }
}


@layer components {
    .card {
        @apply bg-base-100;
    }

    .card .card-header {
        @apply bg-base-200;
        @apply p-2;
    }

    .card .card-footer {
        @apply bg-base-200;
        @apply p-2;
    }

    .fab {
        @layer daisyui.component {
            > :nth-child(n+7) {
                transition-delay: 150ms;
            }
        }
    }

    /* === Sidebar styles === */
    .sidebar-active {
        @apply text-primary-content bg-primary rounded-box;
    }

    .sidebar-item:not(.sidebar-active) {
        @apply text-base-content/80 hover:text-base-content;
    }

    .sidebar {
        @apply z-1020 fixed top-0 start-0 h-full transition-all duration-100;
    }

    .sidebar-floating {
        /* Establishes the hover group and sets the collapsed/hover widths for the container */
        @apply lg:w-16 lg:hover:w-md;
    }

    .sidebar-floating #sidebar {
        /* Sets the collapsed/hover widths for the inner navigation element */
        @apply lg:w-16 lg:group-hover:w-104 transition-all duration-100 overflow-hidden;
    }

    .sidebar-floating + main {
        /* Adjusts the main content margin to account for the collapsed sidebar */
        @apply lg:ml-16;
    }

    .sidebar-floating .sidebar-item span {
        /* Hides the text labels and reveals them only on hover */
        @apply lg:invisible lg:group-hover:visible;
    }

    .htmx-swapping .sidebar-floating,
    .htmx-settling .sidebar-floating {
        pointer-events: none;
        @apply lg:w-16!;
    }

    .sidebar-floating .sidebar-invisible {
        /* Hides the text labels and reveals them only on hover */
        @apply lg:invisible lg:group-hover:visible;
    }

    .sidebar-floating .sidebar-menu-header {
        /* Hides the menu headers and reveals them only on hover */
        @apply lg:hidden lg:group-hover:inline;
    }

    .sidebar-floating #sidebar-toggle-btn .fa-thumbtack-slash {
        /* Hides the 'pin' icon in the floating state */
        @apply hidden!;
    }

    .sidebar-floating #sidebar-toggle-btn .fa-thumbtack {
        /* Shows the 'expand' icon in the floating state */
        @apply inline-block!;
    }

    .sidebar-floating .sidebar-title span {
        @apply lg:invisible lg:group-hover:visible
    }

    .sidebar-submenu-header {
        @apply flex justify-between;
    }

    .sidebar-submenu-title {
        @apply flex items-center;
    }

    .sidebar-floating .sidebar-submenu-header {
        @apply lg:justify-center lg:group-hover:justify-between;
    }

    .sidebar-floating .sidebar-submenu-title {
        @apply lg:h-8;
    }

    .sidebar-floating .sidebar-submenu-title i {
        @apply lg:me-0 lg:group-hover:me-2;
    }

    .sidebar-floating .sidebar-submenu-title h5 {
        @apply lg:invisible lg:w-0 lg:h-0 lg:overflow-hidden lg:group-hover:visible lg:group-hover:w-auto lg:group-hover:h-auto;
    }

    .sidebar-floating .sidebar-submenu-header button {
        @apply lg:hidden! lg:group-hover:flex!;
    }

    .sidebar-floating .list-unstyled {
        @apply group-hover:lg:overflow-y-auto lg:overflow-y-hidden overflow-y-auto overflow-x-hidden;
    }

    .sidebar-floating .sidebar-item {
        @apply text-wrap lg:text-nowrap ;
    }

    .sidebar-floating .sidebar-item-list {
        @apply overflow-y-auto lg:overflow-y-hidden lg:group-hover:overflow-y-auto overflow-x-hidden;
    }

    .sidebar-fixed {
        /* Sets the fixed, expanded width for the container */
        @apply lg:w-[17%] transition-all duration-100;
    }

    .sidebar-fixed #sidebar {
        /* Sets the fixed, expanded width for the inner navigation */
        @apply lg:w-[17%] transition-all duration-100;
    }

    .sidebar-fixed .sidebar-item-list {
        @apply overflow-y-auto overflow-x-hidden;
    }

    .sidebar-fixed + main {
        /* Adjusts the main content margin to account for the expanded sidebar */
        @apply lg:ml-[17%];

        /* Using 16vw to account for padding/margins */
    }

    .sidebar-fixed .sidebar-item {
        @apply text-wrap;
    }

    .sidebar-fixed .sidebar-item span {
        /* Ensures text labels are always visible */
        @apply lg:visible;
    }

    .sidebar-fixed .sidebar-menu-header {
        /* Ensures menu headers are always visible */
        @apply lg:inline;
    }

    .sidebar-fixed #sidebar-toggle-btn .fa-thumbtack-slash {
        /* Shows the 'pin' icon in the fixed state */
        @apply inline-block!;
    }

    .sidebar-fixed #sidebar-toggle-btn .fa-thumbtack {
        /* Hides the 'expand' icon in the fixed state */
        @apply hidden!;
    }

    .sidebar-fixed .sidebar-title span {
        @apply lg:visible;
    }

    .sidebar-fixed .sidebar-submenu-header {
        /* Ensures menu headers are always visible */
        @apply lg:flex lg:justify-between;
    }

    .sidebar-fixed .sidebar-submenu-title i {
        @apply me-2!;
    }

    .sidebar-fixed .sidebar-submenu-title h5 {
        @apply lg:block;
    }

    .sidebar-fixed .sidebar-submenu-header button {
        @apply lg:inline;
    }

    .sidebar-fixed .list-unstyled  {
        @apply overflow-y-auto overflow-x-hidden;
    }
}