/* 
 * app-layout.css
 * --------------------------------------------------------------------
 * Shared layout and component styling for the 2ofan ExpenseTracker
 * main MVC app, adapted from the new React \"tofan main layout\" design.
 *
 * Mirrors admin-layout.css so both apps share the same visual shell:
 * - Design tokens (CSS variables) for colors, spacing, and radii
 * - Global layout shell (sidebar + top bar + main content)
 * - Reusable utility classes (page headers, KPI cards, data tables)
 * - Scrollbar, badges, and helper styles
 *
 * View-specific styles should go into separate per-view CSS files
 * and be referenced via a Razor @section Styles block.
 */

/* --------------------------------------------------------------------
   Design Tokens (adapted from React Tailwind config)
---------------------------------------------------------------------*/
:root {
  /* Core surface + text colors */
  --background: 0 0% 97%;
  --foreground: 0 1% 25%;

  --card: 0 0% 100%;
  --card-foreground: 0 1% 25%;

  --popover: 0 0% 100%;
  --popover-foreground: 0 1% 25%;

  --primary: 37 38% 58%;
  --primary-foreground: 0 0% 100%;

  --secondary: 37 15% 92%;
  --secondary-foreground: 0 1% 25%;

  --muted: 30 10% 93%;
  --muted-foreground: 0 1% 45%;

  --accent: 37 30% 92%;
  --accent-foreground: 37 38% 42%;

  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;

  --success: 142 60% 40%;
  --success-foreground: 0 0% 100%;

  --warning: 38 82% 50%;
  --warning-foreground: 0 0% 100%;

  --info: 207 70% 50%;
  --info-foreground: 0 0% 100%;

  --border: 30 8% 88%;
  --input: 30 8% 88%;
  --ring: 37 38% 58%;

  --radius: 0.5rem;
  --radius-md: calc(var(--radius) - 2px); /* 6px - Tailwind rounded-md */
  --radius-sm: calc(var(--radius) - 4px); /* 4px */

  /* Layout dimensions (must match React AppShell / Sidebar / TopBar exactly) */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 64px;
  --topbar-height: 56px; /* h-14 = 3.5rem */

  /* Sidebar specific */
  --sidebar-background: 0 1% 25%;
  --sidebar-foreground: 37 15% 75%;
  --sidebar-primary: 37 38% 58%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 0 1% 30%;
  --sidebar-accent-foreground: 0 0% 92%;
  --sidebar-border: 0 1% 32%;
  --sidebar-ring: 37 38% 58%;
  --sidebar-muted: 0 1% 38%;
}

/* Optional dark mode hook if the app adds it later */
body.dark-mode {
  --background: 0 0% 10%;
  --foreground: 0 0% 92%;

  --card: 0 1% 14%;
  --card-foreground: 0 0% 92%;

  --popover: 0 1% 14%;
  --popover-foreground: 0 0% 92%;

  --primary: 37 38% 58%;
  --primary-foreground: 0 0% 100%;

  --secondary: 0 1% 20%;
  --secondary-foreground: 0 0% 92%;

  --muted: 0 1% 18%;
  --muted-foreground: 0 0% 55%;

  --accent: 0 1% 20%;
  --accent-foreground: 37 38% 68%;

  --destructive: 0 62% 50%;
  --destructive-foreground: 0 0% 100%;

  --success: 142 60% 40%;
  --success-foreground: 0 0% 100%;

  --warning: 38 82% 50%;
  --warning-foreground: 0 0% 100%;

  --info: 207 70% 55%;
  --info-foreground: 0 0% 100%;

  --border: 0 1% 22%;
  --input: 0 1% 22%;
  --ring: 37 38% 58%;

  --sidebar-background: 0 1% 12%;
  --sidebar-foreground: 37 15% 65%;
  --sidebar-primary: 37 38% 58%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 0 1% 18%;
  --sidebar-accent-foreground: 0 0% 92%;
  --sidebar-border: 0 1% 20%;
  --sidebar-ring: 37 38% 58%;
  --sidebar-muted: 0 1% 28%;
}

/* --------------------------------------------------------------------
   Global base styles
---------------------------------------------------------------------*/
html,
body {
  height: 100%;
}

body {
  margin: 0;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* React AppShell: single wrapper min-h-screen bg-background */
.app-shell {
  min-height: 100vh;
  background-color: hsl(var(--background));
}

/* --------------------------------------------------------------------
   Sidebar (pixel-perfect from React Sidebar.tsx)
   aside: fixed left-0 top-0 bottom-0 z-40 w-[260px] or w-16
---------------------------------------------------------------------*/
.sidebar {
  width: var(--sidebar-width);
  background-color: hsl(var(--sidebar-background));
  color: hsl(var(--sidebar-foreground));
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 40;
  border-right: 1px solid hsl(var(--sidebar-border));
  transition: width 0.2s ease, transform 0.2s ease;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-brand {
  height: var(--topbar-height); /* 56px - h-14 */
  padding: 0 1rem; /* px-4 */
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-bottom: 1px solid hsl(var(--sidebar-border));
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 0.625rem; /* gap-2.5 = 10px */
}

.sidebar-logo-icon {
  height: 2rem;   /* h-8 = 32px */
  width: 2rem;
  min-width: 2rem;
  border-radius: var(--radius); /* rounded-lg = 8px */
  background-color: hsl(var(--sidebar-primary));
  color: hsl(var(--sidebar-primary-foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem; /* text-sm */
}

.sidebar-logo-text-main {
  font-size: 0.875rem; /* text-sm */
  font-weight: 700;
  line-height: 1;
  color: hsl(var(--sidebar-accent-foreground));
}

.sidebar-logo-text-sub {
  font-size: 10px; /* text-[10px] */
  line-height: 1;
  margin-top: 2px; /* mt-0.5 */
  color: hsl(var(--sidebar-foreground));
}

.sidebar-menu {
  flex: 1;
  padding: 0.75rem 0.5rem; /* py-3 px-2 = 12px 8px */
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* React: .sidebar-item = flex items-center gap-3 px-3 py-2 rounded-md text-sm */
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* gap-3 = 12px */
  padding: 0.5rem 0.75rem; /* py-2 px-3 = 8px 12px */
  margin: 2px 0; /* space-y-0.5 */
  border-radius: var(--radius-md); /* rounded-md = 6px */
  font-size: 0.875rem; /* text-sm = 14px */
  color: hsl(var(--sidebar-foreground));
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
  border: none;
  width: 100%;
  text-align: left;
  background: transparent;
}

.sidebar-item i {
  width: 1rem;   /* h-4 w-4 = 16px */
  height: 1rem;
  flex-shrink: 0;
  text-align: center;
  font-size: 1rem;
}

.sidebar-item:hover {
  background-color: hsl(var(--sidebar-accent));
  color: hsl(var(--sidebar-accent-foreground));
}

/* React: .sidebar-item-active */
.sidebar-item.active,
.sidebar-item-active {
  background-color: hsl(var(--sidebar-primary) / 0.15);
  color: hsl(var(--sidebar-primary));
  font-weight: 500;
}

.sidebar-group-label {
  font-size: 0.75rem; /* text-xs */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.5rem 0.75rem; /* px-3 py-2 */
  color: hsl(var(--sidebar-muted));
}

/* React-style expandable group: button + collapsible children (ml-4 border-l pl-3) */
.sidebar-group {
  margin: 2px 0;
}

.sidebar-group-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  margin: 0;
  width: 100%;
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  color: hsl(var(--sidebar-foreground));
  background: transparent;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
  text-align: left;
}

.sidebar-group-btn:hover {
  background-color: hsl(var(--sidebar-accent));
  color: hsl(var(--sidebar-accent-foreground));
}

.sidebar-group-btn.active,
.sidebar-group.has-active .sidebar-group-btn {
  background-color: hsl(var(--sidebar-primary) / 0.15);
  color: hsl(var(--sidebar-primary));
  font-weight: 500;
}

.sidebar-group-btn i:first-child {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  font-size: 1rem;
}

.sidebar-group-btn .sidebar-group-btn-chevron {
  margin-left: auto;
  transition: transform 0.2s ease;
  font-size: 0.875rem;
}

.sidebar-group.open .sidebar-group-btn-chevron {
  transform: rotate(180deg);
}

.sidebar-group-children {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}

.sidebar-group.open .sidebar-group-children {
  max-height: 1200px; /* allow for many items */
}

.sidebar-group-children-inner {
  margin-left: 1rem;
  margin-top: 0.125rem;
  padding-left: 0.75rem;
  border-left: 1px solid hsl(var(--sidebar-border));
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-group-children .sidebar-item {
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
}

/* When collapsed: flyout panel to the right of sidebar (React tooltip with nested links) */
.sidebar-flyout {
  display: none;
  position: fixed;
  left: var(--sidebar-collapsed-width);
  top: 0;
  min-width: 12rem;
  max-width: 280px;
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  box-shadow: 0 10px 38px -10px rgba(0, 0, 0, 0.2);
  z-index: 50;
  padding: 0.5rem 0;
  font-size: 0.875rem;
}

.sidebar-flyout.show {
  display: block;
}

.sidebar-flyout-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--muted-foreground));
  padding: 0.25rem 0.75rem 0.5rem;
  border-bottom: 1px solid hsl(var(--border));
  margin-bottom: 0.25rem;
}

.sidebar-flyout a {
  display: block;
  padding: 0.375rem 0.75rem;
  color: hsl(var(--foreground));
  text-decoration: none;
  border-radius: 2px;
  margin: 0 2px;
}

.sidebar-flyout a:hover {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.sidebar-flyout a.active {
  color: hsl(var(--primary));
  font-weight: 500;
}

/* Hidden template for flyout content (when sidebar expanded this is not used) */
.sidebar-flyout-content {
  display: none;
}

.sidebar-collapse-wrap {
  padding: 0.5rem; /* p-2 */
  border-top: 1px solid hsl(var(--sidebar-border));
  flex-shrink: 0;
}

.sidebar-footer {
  padding: 0.5rem 0.75rem 1rem;
  border-top: 1px solid hsl(var(--sidebar-border));
}

.sidebar-user {
  display: flex;
  align-items: center;
}

.sidebar-user-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    hsl(var(--sidebar-primary)),
    hsl(var(--sidebar-accent))
  );
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin-right: 0.6rem;
}

.sidebar-user-meta {
  font-size: 0.75rem;
}

.sidebar-user-name {
  font-weight: 500;
  color: hsl(var(--sidebar-accent-foreground));
}

.sidebar-user-role {
  color: hsl(var(--sidebar-muted));
}

/* Collapsed sidebar (desktop toggle) — React: w-16 = 64px */
.sidebar-collapsed .sidebar {
  width: var(--sidebar-collapsed-width);
}

.sidebar-collapsed .sidebar-brand {
  justify-content: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.sidebar-collapsed .sidebar-brand-text,
.sidebar-collapsed .sidebar-item span,
.sidebar-collapsed .sidebar-user-meta {
  display: none !important;
}

.sidebar-collapsed .sidebar-group-btn span,
.sidebar-collapsed .sidebar-group-btn .sidebar-group-btn-chevron {
  display: none !important;
}

.sidebar-collapsed .sidebar-group-children {
  display: none !important;
}

.sidebar-collapsed .sidebar-group-btn {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.sidebar-collapsed .sidebar-footer {
  display: none;
}

.sidebar-collapsed .sidebar-item {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.sidebar-collapsed .top-navbar {
  left: var(--sidebar-collapsed-width);
}

.sidebar-collapsed .main-content {
  margin-left: var(--sidebar-collapsed-width);
}

/* Small screens: slide-in sidebar + overlay */
@media (max-width: 991.98px) {
  .sidebar {
    transform: translateX(-100%);
    box-shadow: none;
  }

  .sidebar.sidebar-mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
  }
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 35;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.sidebar-overlay.show {
  display: block;
  opacity: 1;
}

@media (min-width: 992px) {
  .sidebar-overlay {
    display: none !important;
  }
}

/* --------------------------------------------------------------------
   Top bar (pixel-perfect from React TopBar.tsx)
   header: fixed top-0 right-0 z-30 h-14 bg-card border-b left-[260px]|left-16 px-4 gap-4
---------------------------------------------------------------------*/
.top-navbar {
  position: fixed;
  top: 0;
  right: 0;
  left: var(--sidebar-width);
  height: var(--topbar-height); /* 56px */
  background-color: hsl(var(--card));
  border-bottom: 1px solid hsl(var(--border));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem; /* px-4 = 16px */
  gap: 1rem; /* gap-4 */
  z-index: 30;
  transition: left 0.2s ease;
}

.top-navbar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* gap-3 = 12px */
}

.top-navbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* gap-2 */
}

/* Search: hidden sm:block, input pl-8 h-9 w-[280px] bg-background text-sm */
.top-navbar-search {
  position: relative;
  display: none;
}

.top-navbar-search input {
  padding-left: 2rem; /* pl-8 */
  height: 2.25rem;     /* h-9 = 36px */
  width: 280px;
  max-width: 280px;
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--input));
  background-color: hsl(var(--background));
  font-size: 0.875rem;
  color: hsl(var(--foreground));
}

.top-navbar-search input::placeholder {
  color: hsl(var(--muted-foreground));
}

.top-navbar-search-icon {
  position: absolute;
  left: 0.625rem; /* left-2.5 */
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  pointer-events: none;
}

@media (min-width: 576px) {
  .top-navbar-search {
    display: block;
  }
}

/* Avatar h-8 w-8 = 32px, rounded-full, bg-primary text-primary-foreground text-xs font-semibold */
.top-navbar-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
}

.top-navbar-user-meta {
  display: none;
  text-align: left;
}

.top-navbar-user-meta .top-navbar-user-name {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  color: hsl(var(--foreground));
}

.top-navbar-user-meta .top-navbar-user-role {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

@media (min-width: 768px) {
  .top-navbar-user-meta {
    display: block;
  }
}

.top-navbar-user-trigger {
  color: hsl(var(--foreground));
}

.top-navbar-user-trigger:hover {
  background-color: hsl(var(--muted));
  color: hsl(var(--foreground));
}

.top-navbar .toggle-sidebar {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: hsl(var(--foreground));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-navbar .toggle-sidebar:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

@media (min-width: 992px) {
  .top-navbar .toggle-sidebar {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .top-navbar {
    left: 0;
  }
}

/* --------------------------------------------------------------------
   Main content (React AppShell: main pt-14 min-h-screen ml-[260px], inner div p-6)
---------------------------------------------------------------------*/
.main-content {
  padding-top: var(--topbar-height); /* pt-14 = 56px */
  min-height: 100vh;
  margin-left: var(--sidebar-width);
  transition: margin-left 0.2s ease;
}

.main-content-inner {
  padding: 1.5rem; /* p-6 = 24px - exact React */
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem; /* mb-6 = 24px */
  gap: 0.75rem;
  flex-wrap: wrap;
}

.page-title {
  font-size: 1.5rem;   /* text-2xl = 24px */
  font-weight: 700;
  color: hsl(var(--foreground));
  margin-bottom: 0.125rem; /* mt-0.5 = 2px between title and subtitle */
}

.page-subtitle {
  font-size: 0.875rem; /* text-sm = 14px */
  color: hsl(var(--muted-foreground));
}

.page-breadcrumb {
  margin-top: 0.125rem;
}

.page-breadcrumb .breadcrumb-item,
.page-breadcrumb .breadcrumb-item a {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}

.page-breadcrumb .breadcrumb-item a:hover {
  color: hsl(var(--foreground));
}

.page-breadcrumb .breadcrumb-item.active {
  color: hsl(var(--muted-foreground));
}

.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.toolbar-actions {
  display: flex;
  gap: 0.5rem;
}

@media (max-width: 992px) {
  .main-content {
    margin-left: 0;
  }
}

/* --------------------------------------------------------------------
   Card / dashboard (React: rounded-lg border bg-card text-card-foreground shadow-sm)
   CardHeader: flex flex-col space-y-1.5 p-6; CardContent: p-6 pt-0
---------------------------------------------------------------------*/
.dashboard-card {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border-radius: var(--radius); /* rounded-lg = 8px */
  border: 1px solid hsl(var(--border));
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.dashboard-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05);
}

.dashboard-card .card-header {
  background-color: hsl(var(--card));
  border-bottom: 1px solid hsl(var(--border));
  padding: 1.5rem; /* p-6 = 24px */
  border-radius: var(--radius) var(--radius) 0 0;
}

.dashboard-card .card-body {
  padding: 1.5rem;
}

/* React .kpi-card: rounded-lg p-5 border border-border, border-l-4 for variant */
.kpi-card {
  background-color: hsl(var(--card));
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  padding: 1.25rem; /* p-5 = 20px - exact React */
  transition: box-shadow 0.15s ease;
}

.kpi-card:hover {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.08);
}

.kpi-card-positive {
  border-left: 4px solid hsl(var(--success));
}

.kpi-card-negative {
  border-left: 4px solid hsl(var(--destructive));
}

.kpi-card-neutral {
  border-left: 4px solid hsl(var(--primary));
}

.kpi-card-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: hsl(var(--muted-foreground));
}

.kpi-card-value {
  font-size: 1.6rem;
  font-weight: 700;
  margin-top: 0.3rem;
  color: hsl(var(--card-foreground));
}

.kpi-card-change {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  margin-top: 0.25rem;
}

.kpi-card-change-up {
  color: hsl(var(--success));
}

.kpi-card-change-down {
  color: hsl(var(--destructive));
}

.kpi-card-change-neutral {
  color: hsl(var(--muted-foreground));
}

/* --------------------------------------------------------------------
   Tables (React: Table th h-12 px-4 font-medium text-muted-foreground; td p-4; tr border-b hover:bg-muted/50)
---------------------------------------------------------------------*/
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.data-table thead tr {
  border-bottom: 1px solid hsl(var(--border));
}

.data-table thead th {
  height: 3rem; /* h-12 = 48px */
  padding: 0 1rem; /* px-4 = 16px */
  text-align: left;
  vertical-align: middle;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}

.data-table tbody tr {
  border-bottom: 1px solid hsl(var(--border));
  transition: background-color 0.15s;
}

.data-table tbody tr:last-child {
  border-bottom: 0;
}

.data-table tbody tr:hover {
  background-color: hsl(var(--muted) / 0.5);
}

.data-table tbody td {
  padding: 1rem; /* p-4 = 16px */
  vertical-align: middle;
}

/* --------------------------------------------------------------------
   Scrollbar helper (matches React .scrollbar-thin)
---------------------------------------------------------------------*/
.scrollbar-thin {
  scrollbar-width: thin;
}

.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 3px;
}

/* --------------------------------------------------------------------
   Utility helpers
---------------------------------------------------------------------*/
.badge-soft-success {
  background-color: hsla(var(--success), 0.08);
  color: hsl(var(--success));
}

.badge-soft-danger {
  background-color: hsla(var(--destructive), 0.08);
  color: hsl(var(--destructive));
}

.badge-soft-secondary {
  background-color: hsla(var(--muted), 0.3);
  color: hsl(var(--muted-foreground));
}

.footer {
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
  border-top: 1px solid hsl(var(--border));
  margin-top: 2rem;
  padding-top: 1rem;
}

/* --------------------------------------------------------------------
   Bootstrap overrides so global components match React design tokens
---------------------------------------------------------------------*/
.btn-primary {
  background-color: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.btn-primary:hover {
  background-color: hsl(var(--primary) / 0.9);
  border-color: hsl(var(--primary) / 0.9);
  color: hsl(var(--primary-foreground));
}

.btn-outline-primary {
  border-color: hsl(var(--input));
  color: hsl(var(--foreground));
}

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

.form-control,
.form-select {
  border-color: hsl(var(--input));
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  border-radius: var(--radius-md);
}

.form-control:focus,
.form-select:focus {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.dropdown-menu {
  min-width: 8rem;
  padding: 0.25rem;
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.dropdown-item {
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 2px;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.badge.bg-success { background-color: hsl(var(--success)) !important; color: hsl(var(--success-foreground)) !important; }
.badge.bg-danger { background-color: hsl(var(--destructive)) !important; color: hsl(var(--destructive-foreground)) !important; }
.badge.bg-secondary { background-color: hsl(var(--muted)) !important; color: hsl(var(--muted-foreground)) !important; }
.breadcrumb-item.active { color: hsl(var(--muted-foreground)); }
.text-muted { color: hsl(var(--muted-foreground)) !important; }

/* Design-token overrides so Bootstrap utilities match React palette */
.bg-primary { background-color: hsl(var(--primary)) !important; }
.text-primary { color: hsl(var(--primary)) !important; }
.bg-success { background-color: hsl(var(--success)) !important; }
.text-success { color: hsl(var(--success)) !important; }
.bg-danger { background-color: hsl(var(--destructive)) !important; }
.text-danger { color: hsl(var(--destructive)) !important; }
.bg-info { background-color: hsl(var(--info)) !important; }
.text-info { color: hsl(var(--info)) !important; }
.bg-warning { background-color: hsl(var(--warning)) !important; }
.text-warning { color: hsl(var(--warning)) !important; }
.bg-secondary { background-color: hsl(var(--secondary)) !important; }
.text-secondary { color: hsl(var(--muted-foreground)) !important; }

/* Opacity variants with design tokens (React-style tinted backgrounds) */
.bg-primary.bg-opacity-10 { background-color: hsl(var(--primary) / 0.1) !important; }
.bg-success.bg-opacity-10 { background-color: hsl(var(--success) / 0.1) !important; }
.bg-info.bg-opacity-10 { background-color: hsl(var(--info) / 0.1) !important; }
.bg-warning.bg-opacity-10 { background-color: hsl(var(--warning) / 0.1) !important; }
.bg-danger.bg-opacity-10 { background-color: hsl(var(--destructive) / 0.1) !important; }