@import "tailwindcss" source(none);
@source "../src";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

/*
 * Design system definition.
 *
 * The @theme inline block maps CSS custom properties to Tailwind utility
 * classes (e.g. --color-primary -> bg-primary, text-primary).
 *
 * The :root and .dark blocks define the actual color values using oklch.
 * All colors MUST use oklch format.
 *
 * To add a new semantic color:
 * 1. Add the variable to :root (light value) and .dark (dark value)
 * 2. Register it in @theme inline as --color-<name>: var(--<name>)
 */

@theme inline {
  --font-sans: "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-finance-expected: var(--finance-expected);
  --color-finance-collected: var(--finance-collected);
  --color-finance-outstanding: var(--finance-outstanding);
  --color-finance-overdue: var(--finance-overdue);
  --color-finance-expenses: var(--finance-expenses);
  --color-finance-income: var(--finance-income);
  --color-finance-deposits: var(--finance-deposits);
  --color-finance-maintenance: var(--finance-maintenance);

  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-ring-offset-background: var(--background);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-icon-dashboard: var(--icon-dashboard);
  --color-icon-property: var(--icon-property);
  --color-icon-tenant: var(--icon-tenant);
  --color-icon-finance: var(--icon-finance);
  --color-icon-accounting: var(--icon-accounting);
  --color-icon-operations: var(--icon-operations);
  --color-icon-hr: var(--icon-hr);
  --color-icon-reports: var(--icon-reports);
  --color-icon-system: var(--icon-system);
  --color-icon-admin: var(--icon-admin);

  /* property sub-menu icons */
  --color-icon-owners: var(--icon-owners);
  --color-icon-buildings: var(--icon-buildings);
  --color-icon-floors: var(--icon-floors);
  --color-icon-units: var(--icon-units);

  /* tenant sub-menu icons */
  --color-icon-tenants: var(--icon-tenants);
  --color-icon-leases: var(--icon-leases);
  --color-icon-archived: var(--icon-archived);
  --color-icon-bookings: var(--icon-bookings);
  --color-icon-booking-reasons: var(--icon-booking-reasons);
  --color-icon-announcements: var(--icon-announcements);

  /* finance sub-menu icons */
  --color-icon-rent-collection: var(--icon-rent-collection);
  --color-icon-invoices: var(--icon-invoices);
  --color-icon-payments: var(--icon-payments);
  --color-icon-receipts: var(--icon-receipts);
  --color-icon-expenses: var(--icon-expenses);
  --color-icon-expense-categories: var(--icon-expense-categories);
  --color-icon-bank-accounts: var(--icon-bank-accounts);
  --color-icon-bank-deposits: var(--icon-bank-deposits);

  /* accounting sub-menu icons */
  --color-icon-accounts: var(--icon-accounts);
  --color-icon-journal: var(--icon-journal);

  /* operations sub-menu icons */
  --color-icon-maintenance: var(--icon-maintenance);
  --color-icon-work-orders: var(--icon-work-orders);
  --color-icon-suppliers: var(--icon-suppliers);
  --color-icon-assets: var(--icon-assets);
  --color-icon-meters: var(--icon-meters);
  --color-icon-meter-readings: var(--icon-meter-readings);
  --color-icon-utility-bills: var(--icon-utility-bills);
  --color-icon-parking: var(--icon-parking);
  --color-icon-vehicles: var(--icon-vehicles);
  --color-icon-visitors: var(--icon-visitors);

  /* hr sub-menu icons */
  --color-icon-employees: var(--icon-employees);
  --color-icon-departments: var(--icon-departments);
  --color-icon-payroll: var(--icon-payroll);
  --color-icon-leave: var(--icon-leave);
  --color-icon-tasks: var(--icon-tasks);

  /* reports sub-menu icons */
  --color-icon-reports-overview: var(--icon-reports-overview);
  --color-icon-rent-roll: var(--icon-rent-roll);
  --color-icon-arrears: var(--icon-arrears);
  --color-icon-reports-payments: var(--icon-reports-payments);
  --color-icon-reports-invoices: var(--icon-reports-invoices);
  --color-icon-reports-expenses: var(--icon-reports-expenses);
  --color-icon-occupancy: var(--icon-occupancy);
  --color-icon-reports-maintenance: var(--icon-reports-maintenance);
  --color-icon-reports-payroll: var(--icon-reports-payroll);
  --color-icon-trial-balance: var(--icon-trial-balance);
  --color-icon-profit-loss: var(--icon-profit-loss);

  /* system sub-menu icons */
  --color-icon-documents: var(--icon-documents);
  --color-icon-notifications: var(--icon-notifications);
  --color-icon-settings: var(--icon-settings);

  /* admin sub-menu icons */
  --color-icon-staff: var(--icon-staff);
  --color-icon-roles: var(--icon-roles);
  --color-icon-audit: var(--icon-audit);
  --color-icon-currencies: var(--icon-currencies);
  --color-icon-backup: var(--icon-backup);
  --color-icon-system-update: var(--icon-system-update);
}

:root {
  /* QuickBooks Online–inspired palette */
  --radius: 0.5rem;
  --background: oklch(0.967 0.003 264); /* #f4f5f8-ish page gray */
  --foreground: oklch(0.28 0.015 264); /* #393a3d charcoal text */
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.28 0.015 264);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.28 0.015 264);
  --primary: oklch(0.56 0.14 147); /* QuickBooks green #2CA01C */
  --primary-foreground: oklch(0.99 0.003 120);
  --secondary: oklch(0.94 0.006 264);
  --secondary-foreground: oklch(0.33 0.015 264);
  --muted: oklch(0.955 0.005 264);
  --muted-foreground: oklch(0.51 0.012 264); /* #6b6c72 */
  --accent: oklch(0.94 0.02 230); /* pale blue chip bg */
  --accent-foreground: oklch(0.49 0.1 250); /* QBO blue #0077C5 */
  --destructive: oklch(0.55 0.21 27);
  --destructive-foreground: oklch(0.99 0.003 248);
  --border: oklch(0.9 0.005 264); /* #d4d7dc-ish */
  --input: oklch(0.85 0.006 264);
  --ring: oklch(0.56 0.14 147);
  --success: oklch(0.56 0.14 147);
  --success-foreground: oklch(0.99 0.003 120);
  --warning: oklch(0.72 0.15 82);
  --warning-foreground: oklch(0.25 0.05 80);
  --finance-expected: oklch(0.57 0.13 248);
  --finance-collected: oklch(0.56 0.14 147);
  --finance-outstanding: oklch(0.72 0.15 82);
  --finance-overdue: oklch(0.58 0.2 27);
  --finance-expenses: oklch(0.62 0.16 345);
  --finance-income: oklch(0.55 0.14 185);
  --finance-deposits: oklch(0.58 0.14 290);
  --finance-maintenance: oklch(0.64 0.15 55);
  --chart-1: oklch(0.56 0.14 147); /* green */
  --chart-2: oklch(0.55 0.1 250); /* blue */
  --chart-3: oklch(0.72 0.15 82); /* amber */
  --chart-4: oklch(0.6 0.12 300);
  --chart-5: oklch(0.6 0.18 25);
  --stat-1: linear-gradient(135deg, oklch(0.58 0.145 147), oklch(0.5 0.13 150));
  --stat-2: linear-gradient(135deg, oklch(0.57 0.11 250), oklch(0.49 0.11 255));
  --stat-3: linear-gradient(135deg, oklch(0.74 0.15 82), oklch(0.67 0.15 74));
  --stat-4: linear-gradient(135deg, oklch(0.5 0.1 264), oklch(0.42 0.08 266));
  --sidebar: oklch(0.27 0.012 264); /* QBO dark charcoal nav #393a3d */
  --sidebar-foreground: oklch(0.92 0.005 264);
  --sidebar-primary: oklch(0.56 0.14 147);
  --sidebar-primary-foreground: oklch(0.99 0.003 120);
  --sidebar-accent: oklch(0.33 0.014 264);
  --sidebar-accent-foreground: oklch(0.99 0.003 120);
  --sidebar-border: oklch(0.35 0.014 264);
  --sidebar-ring: oklch(0.56 0.14 147);
  --icon-dashboard: oklch(0.78 0.15 82);
  --icon-property: oklch(0.7 0.14 245);
  --icon-tenant: oklch(0.72 0.14 165);
  --icon-finance: oklch(0.76 0.16 135);
  --icon-accounting: oklch(0.74 0.14 290);
  --icon-operations: oklch(0.78 0.15 65);
  --icon-hr: oklch(0.73 0.15 345);
  --icon-reports: oklch(0.72 0.15 225);
  --icon-system: oklch(0.73 0.03 260);
  --icon-admin: oklch(0.75 0.14 35);

  /* property sub-menu icons */
  --icon-owners: oklch(0.68 0.12 285);
  --icon-buildings: oklch(0.72 0.13 250);
  --icon-floors: oklch(0.66 0.12 270);
  --icon-units: oklch(0.74 0.14 220);

  /* tenant sub-menu icons */
  --icon-tenants: oklch(0.7 0.13 140);
  --icon-leases: oklch(0.65 0.1 160);
  --icon-archived: oklch(0.6 0.09 150);
  --icon-bookings: oklch(0.75 0.14 185);
  --icon-booking-reasons: oklch(0.68 0.11 190);
  --icon-announcements: oklch(0.78 0.15 75);

  /* finance sub-menu icons */
  --icon-rent-collection: oklch(0.78 0.16 125);
  --icon-invoices: oklch(0.7 0.14 110);
  --icon-payments: oklch(0.78 0.15 95);
  --icon-receipts: oklch(0.72 0.13 120);
  --icon-expenses: oklch(0.74 0.14 30);
  --icon-expense-categories: oklch(0.7 0.12 50);
  --icon-bank-accounts: oklch(0.68 0.11 260);
  --icon-bank-deposits: oklch(0.76 0.14 80);

  /* accounting sub-menu icons */
  --icon-accounts: oklch(0.7 0.13 310);
  --icon-journal: oklch(0.66 0.12 325);

  /* operations sub-menu icons */
  --icon-maintenance: oklch(0.8 0.16 55);
  --icon-work-orders: oklch(0.72 0.14 45);
  --icon-suppliers: oklch(0.74 0.13 25);
  --icon-assets: oklch(0.7 0.12 85);
  --icon-meters: oklch(0.76 0.14 200);
  --icon-meter-readings: oklch(0.68 0.11 210);
  --icon-utility-bills: oklch(0.75 0.15 140);
  --icon-parking: oklch(0.72 0.13 250);
  --icon-vehicles: oklch(0.7 0.14 265);
  --icon-visitors: oklch(0.78 0.15 160);

  /* hr sub-menu icons */
  --icon-employees: oklch(0.7 0.14 320);
  --icon-departments: oklch(0.74 0.13 300);
  --icon-payroll: oklch(0.75 0.15 15);
  --icon-leave: oklch(0.72 0.13 170);
  --icon-tasks: oklch(0.68 0.12 40);

  /* reports sub-menu icons */
  --icon-reports-overview: oklch(0.74 0.15 215);
  --icon-rent-roll: oklch(0.7 0.14 245);
  --icon-arrears: oklch(0.74 0.15 25);
  --icon-reports-payments: oklch(0.76 0.15 135);
  --icon-reports-invoices: oklch(0.72 0.14 110);
  --icon-reports-expenses: oklch(0.7 0.13 30);
  --icon-occupancy: oklch(0.75 0.14 260);
  --icon-reports-maintenance: oklch(0.78 0.15 65);
  --icon-reports-payroll: oklch(0.73 0.15 345);
  --icon-trial-balance: oklch(0.7 0.13 290);
  --icon-profit-loss: oklch(0.74 0.14 200);

  /* system sub-menu icons */
  --icon-documents: oklch(0.73 0.03 260);
  --icon-notifications: oklch(0.78 0.15 55);
  --icon-settings: oklch(0.72 0.05 260);

  /* admin sub-menu icons */
  --icon-staff: oklch(0.75 0.14 35);
  --icon-roles: oklch(0.72 0.13 55);
  --icon-audit: oklch(0.7 0.11 75);
  --icon-currencies: oklch(0.74 0.15 110);
  --icon-backup: oklch(0.68 0.12 200);
  --icon-system-update: oklch(0.76 0.14 160);

  --shadow-card: 0 1px 2px color-mix(in oklab, oklch(0.28 0.015 264) 6%, transparent),
    0 4px 12px -8px color-mix(in oklab, oklch(0.28 0.015 264) 8%, transparent);
}


.dark {
  --background: oklch(0.129 0.042 264.695);
  --foreground: oklch(0.984 0.003 247.858);
  --card: oklch(0.208 0.042 265.755);
  --card-foreground: oklch(0.984 0.003 247.858);
  --popover: oklch(0.208 0.042 265.755);
  --popover-foreground: oklch(0.984 0.003 247.858);
  --primary: oklch(0.929 0.013 255.508);
  --primary-foreground: oklch(0.208 0.042 265.755);
  --secondary: oklch(0.279 0.041 260.031);
  --secondary-foreground: oklch(0.984 0.003 247.858);
  --muted: oklch(0.279 0.041 260.031);
  --muted-foreground: oklch(0.704 0.04 256.788);
  --accent: oklch(0.279 0.041 260.031);
  --accent-foreground: oklch(0.984 0.003 247.858);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.984 0.003 247.858);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.551 0.027 264.364);
  --finance-expected: oklch(0.72 0.13 248);
  --finance-collected: oklch(0.72 0.14 147);
  --finance-outstanding: oklch(0.78 0.15 82);
  --finance-overdue: oklch(0.7 0.18 27);
  --finance-expenses: oklch(0.74 0.15 345);
  --finance-income: oklch(0.74 0.14 185);
  --finance-deposits: oklch(0.72 0.14 290);
  --finance-maintenance: oklch(0.76 0.15 55);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.208 0.042 265.755);
  --sidebar-foreground: oklch(0.984 0.003 247.858);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
  --sidebar-accent: oklch(0.279 0.041 260.031);
  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.551 0.027 264.364);
  --icon-dashboard: oklch(0.82 0.14 82);
  --icon-property: oklch(0.76 0.13 245);
  --icon-tenant: oklch(0.78 0.13 165);
  --icon-finance: oklch(0.8 0.15 135);
  --icon-accounting: oklch(0.78 0.13 290);
  --icon-operations: oklch(0.82 0.14 65);
  --icon-hr: oklch(0.78 0.14 345);
  --icon-reports: oklch(0.78 0.14 225);
  --icon-system: oklch(0.78 0.03 260);
  --icon-admin: oklch(0.8 0.13 35);

  /* property sub-menu icons */
  --icon-owners: oklch(0.74 0.14 285);
  --icon-buildings: oklch(0.78 0.14 250);
  --icon-floors: oklch(0.72 0.13 270);
  --icon-units: oklch(0.8 0.15 220);

  /* tenant sub-menu icons */
  --icon-tenants: oklch(0.76 0.14 140);
  --icon-leases: oklch(0.72 0.12 160);
  --icon-archived: oklch(0.68 0.11 150);
  --icon-bookings: oklch(0.8 0.15 185);
  --icon-booking-reasons: oklch(0.74 0.13 190);
  --icon-announcements: oklch(0.82 0.16 75);

  /* finance sub-menu icons */
  --icon-rent-collection: oklch(0.82 0.16 125);
  --icon-invoices: oklch(0.76 0.14 110);
  --icon-payments: oklch(0.82 0.15 95);
  --icon-receipts: oklch(0.78 0.14 120);
  --icon-expenses: oklch(0.78 0.14 30);
  --icon-expense-categories: oklch(0.74 0.13 50);
  --icon-bank-accounts: oklch(0.74 0.13 260);
  --icon-bank-deposits: oklch(0.8 0.15 80);

  /* accounting sub-menu icons */
  --icon-accounts: oklch(0.76 0.14 310);
  --icon-journal: oklch(0.72 0.13 325);

  /* operations sub-menu icons */
  --icon-maintenance: oklch(0.84 0.16 55);
  --icon-work-orders: oklch(0.78 0.15 45);
  --icon-suppliers: oklch(0.78 0.14 25);
  --icon-assets: oklch(0.74 0.13 85);
  --icon-meters: oklch(0.8 0.15 200);
  --icon-meter-readings: oklch(0.74 0.12 210);
  --icon-utility-bills: oklch(0.79 0.16 140);
  --icon-parking: oklch(0.76 0.14 250);
  --icon-vehicles: oklch(0.74 0.15 265);
  --icon-visitors: oklch(0.82 0.16 160);

  /* hr sub-menu icons */
  --icon-employees: oklch(0.76 0.15 320);
  --icon-departments: oklch(0.78 0.14 300);
  --icon-payroll: oklch(0.79 0.16 15);
  --icon-leave: oklch(0.76 0.14 170);
  --icon-tasks: oklch(0.74 0.13 40);

  /* reports sub-menu icons */
  --icon-reports-overview: oklch(0.8 0.15 215);
  --icon-rent-roll: oklch(0.76 0.14 245);
  --icon-arrears: oklch(0.78 0.15 25);
  --icon-reports-payments: oklch(0.8 0.15 135);
  --icon-reports-invoices: oklch(0.78 0.14 110);
  --icon-reports-expenses: oklch(0.74 0.13 30);
  --icon-occupancy: oklch(0.79 0.15 260);
  --icon-reports-maintenance: oklch(0.82 0.16 65);
  --icon-reports-payroll: oklch(0.78 0.15 345);
  --icon-trial-balance: oklch(0.76 0.14 290);
  --icon-profit-loss: oklch(0.78 0.15 200);

  /* system sub-menu icons */
  --icon-documents: oklch(0.78 0.04 260);
  --icon-notifications: oklch(0.82 0.16 55);
  --icon-settings: oklch(0.76 0.06 260);

  /* admin sub-menu icons */
  --icon-staff: oklch(0.8 0.15 35);
  --icon-roles: oklch(0.78 0.14 55);
  --icon-audit: oklch(0.76 0.13 75);
  --icon-currencies: oklch(0.78 0.15 110);
  --icon-backup: oklch(0.74 0.14 200);
  --icon-system-update: oklch(0.8 0.15 160);
}

@layer base {
  * {
    border-color: var(--color-border);
  }

  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-sans);
    font-feature-settings: "ss01", "cv11";
    letter-spacing: -0.005em;
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
  }
}

@utility stat-card-1 {
  background-image: var(--stat-1);
  color: oklch(0.99 0.003 248);
}
@utility stat-card-2 {
  background-image: var(--stat-2);
  color: oklch(0.99 0.003 248);
}
@utility stat-card-3 {
  background-image: var(--stat-3);
  color: oklch(0.99 0.003 248);
}
@utility stat-card-4 {
  background-image: var(--stat-4);
  color: oklch(0.99 0.003 248);
}

@utility shadow-card {
  box-shadow: var(--shadow-card);
}

@utility finance-card {
  --finance-tone: var(--finance-expected);
  border-left: 4px solid var(--finance-tone);
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--finance-tone) 8%, var(--color-card)),
    var(--color-card) 58%
  );
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease,
    background-color 180ms ease;

  &:hover {
    border-color: color-mix(in oklab, var(--finance-tone) 80%, var(--color-border));
    box-shadow: 0 12px 28px -18px color-mix(in oklab, var(--finance-tone) 55%, transparent),
      0 5px 12px -8px color-mix(in oklab, var(--color-foreground) 18%, transparent);
    transform: translateY(-3px);
  }

  &:active {
    transform: translateY(-1px) scale(0.995);
  }
}

@utility finance-card-label {
  color: color-mix(in oklab, var(--finance-tone) 82%, var(--color-foreground));
}

@utility finance-card-icon {
  background-color: color-mix(in oklab, var(--finance-tone) 14%, transparent);
  color: var(--finance-tone);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--finance-tone) 18%, transparent);
}

@utility finance-card-bar {
  background-color: var(--finance-tone);
}

@utility finance-tone-expected { --finance-tone: var(--finance-expected); }
@utility finance-tone-collected { --finance-tone: var(--finance-collected); }
@utility finance-tone-outstanding { --finance-tone: var(--finance-outstanding); }
@utility finance-tone-overdue { --finance-tone: var(--finance-overdue); }
@utility finance-tone-expenses { --finance-tone: var(--finance-expenses); }
@utility finance-tone-income { --finance-tone: var(--finance-income); }
@utility finance-tone-deposits { --finance-tone: var(--finance-deposits); }
@utility finance-tone-maintenance { --finance-tone: var(--finance-maintenance); }

@utility report-card {
  --report-tone: var(--icon-reports-overview);
  border-top: 3px solid var(--report-tone);
  background: linear-gradient(
    145deg,
    color-mix(in oklab, var(--report-tone) 10%, var(--color-card)),
    var(--color-card) 62%
  );
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;

  &:hover {
    border-color: var(--report-tone);
    box-shadow: 0 14px 28px -20px color-mix(in oklab, var(--report-tone) 65%, transparent),
      0 5px 14px -10px color-mix(in oklab, var(--color-foreground) 16%, transparent);
    transform: translateY(-3px);
  }

  &:active {
    transform: translateY(-1px) scale(0.995);
  }
}

@utility report-card-icon {
  background-color: color-mix(in oklab, var(--report-tone) 15%, var(--color-card));
  color: var(--report-tone);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--report-tone) 24%, transparent);
}

@utility report-card-bar {
  background-color: var(--report-tone);
}

@utility report-summary {
  --report-tone: var(--icon-reports-overview);
  border-left: 4px solid var(--report-tone);
  background: linear-gradient(
    120deg,
    color-mix(in oklab, var(--report-tone) 8%, var(--color-card)),
    var(--color-card) 55%
  );
}

@utility report-tone-rent { --report-tone: var(--icon-rent-roll); }
@utility report-tone-arrears { --report-tone: var(--icon-arrears); }
@utility report-tone-payments { --report-tone: var(--icon-reports-payments); }
@utility report-tone-invoices { --report-tone: var(--icon-reports-invoices); }
@utility report-tone-expenses { --report-tone: var(--icon-reports-expenses); }
@utility report-tone-occupancy { --report-tone: var(--icon-occupancy); }
@utility report-tone-maintenance { --report-tone: var(--icon-reports-maintenance); }
@utility report-tone-payroll { --report-tone: var(--icon-reports-payroll); }
@utility report-tone-balance { --report-tone: var(--icon-trial-balance); }
@utility report-tone-profit { --report-tone: var(--icon-profit-loss); }

@media (prefers-reduced-motion: reduce) {
  .finance-card,
  .finance-card *,
  .report-card,
  .report-card * {
    transition-duration: 0.01ms;
  }
}

@layer components {
  [data-slot="card"] {
    box-shadow: var(--shadow-card);
    border-color: color-mix(in oklab, var(--color-border) 70%, transparent);
  }

  [data-slot="table"] thead tr {
    background-color: color-mix(in oklab, var(--color-muted) 55%, transparent);
  }

  [data-slot="table"] tbody tr {
    transition: background-color 0.15s ease;
  }

  [data-slot="sidebar-menu-button"] {
    border-radius: calc(var(--radius) - 2px);
  }
}