@import "tailwindcss";
@import "flatpickr/dist/flatpickr.min.css";

@theme {
  --color-white: #FFFFFF;
  --color-black: #111111;

  --color-neutral-5: #F9F9F9;
  --color-neutral-10: #F3F3F3;
  --color-neutral-20: #DEE0E7;
  --color-neutral-30: #C6C8CF;
  --color-neutral-40: #B1B3BA;
  --color-neutral-50: #9C9EA5;
  --color-neutral-60: #85878E;
  --color-neutral-70: #707279;
  --color-neutral-80: #505259;
  --color-neutral-90: #3A3C43;
  --color-neutral-100: #25272E;

  --color-blue-5: #F9F9FF;
  --color-blue-10: #F2F2FF;
  --color-blue-20: #DEE4FF;
  --color-blue-30: #C0CBFF;
  --color-blue-40: #9AA9FF;
  --color-blue-50: #7186FF;
  --color-blue-60: #605BFF;
  --color-blue-70: #4C43F2;
  --color-blue-80: #3F2FCD;
  --color-blue-90: #121B7A;
  --color-blue-100: #030229;

  --color-red-5: #FFF4F4;
  --color-red-10: #FFEAEA;
  --color-red-20: #FFCDCD;
  --color-red-30: #FFB7B7;
  --color-red-40: #FF9B9B;
  --color-red-50: #FF8080;
  --color-red-60: #FF5E5E;
  --color-red-70: #F94242;
  --color-red-80: #DA1E28;
  --color-red-90: #AD0F0F;
  --color-red-100: #800000;

  --color-green-5: #EBF5ED;
  --color-green-10: #D8EADB;
  --color-green-20: #BADBC0;
  --color-green-30: #9CCBA5;
  --color-green-40: #7FBB8B;
  --color-green-50: #61AC70;
  --color-green-60: #3A974C;
  --color-green-70: #348343;
  --color-green-80: #2E6F3A;
  --color-green-90: #2A6134;
  --color-green-100: #214729;

  --color-primary-50: var(--color-blue-5);
  --color-primary-100: var(--color-blue-10);
  --color-primary-200: var(--color-blue-20);
  --color-primary-300: var(--color-blue-30);
  --color-primary-400: var(--color-blue-40);
  --color-primary-500: var(--color-blue-50);
  --color-primary-600: var(--color-blue-60);
  --color-primary-700: var(--color-blue-70);
  --color-primary-800: var(--color-blue-80);
  --color-primary-900: var(--color-blue-90);

  --color-secondary-50: var(--color-neutral-5);
  --color-secondary-100: var(--color-neutral-10);
  --color-secondary-200: var(--color-neutral-20);
  --color-secondary-300: var(--color-neutral-30);
  --color-secondary-400: var(--color-neutral-40);
  --color-secondary-500: var(--color-neutral-50);
  --color-secondary-600: var(--color-neutral-60);
  --color-secondary-700: var(--color-neutral-70);
  --color-secondary-800: var(--color-neutral-80);
  --color-secondary-900: var(--color-neutral-90);

  --color-surface-0: var(--color-white);
  --color-surface-50: var(--color-neutral-5);
  --color-surface-100: var(--color-neutral-10);
  --color-surface-200: var(--color-neutral-20);
  --color-surface-300: var(--color-neutral-30);
  --color-surface-400: var(--color-neutral-40);

  --color-error-50: var(--color-red-5);
  --color-error-100: var(--color-red-10);
  --color-error-200: var(--color-red-20);
  --color-error-300: var(--color-red-30);
  --color-error-400: var(--color-red-40);
  --color-error-500: var(--color-red-60);
  --color-error-600: var(--color-red-70);
  --color-error-700: var(--color-red-80);

  --color-success-50: var(--color-green-5);
  --color-success-100: var(--color-green-10);
  --color-success-500: var(--color-green-50);
  --color-success-600: var(--color-green-60);

  --color-warning-50: var(--color-red-5);
  --color-warning-100: var(--color-red-10);
  --color-warning-500: var(--color-red-50);
  --color-warning-600: var(--color-red-60);

  --color-on-primary: var(--color-white);
  --color-on-secondary: var(--color-white);
  --color-on-surface: var(--color-black);
  --color-on-surface-muted: var(--color-neutral-60);
  --color-on-error: var(--color-white);

  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --text-headline-lg: 2rem;      /* 32px */
  --text-headline-md: 1.75rem;   /* 28px */
  --text-headline-sm: 1.5rem;    /* 24px */

  --text-title-lg: 1.375rem;     /* 22px */
  --text-title-md: 1.125rem;     /* 18px */
  --text-title-sm: 1rem;         /* 16px */

  --text-body-lg: 1rem;          /* 16px */
  --text-body-md: 0.875rem;      /* 14px */
  --text-body-sm: 0.75rem;       /* 12px */

  --text-label-lg: 0.875rem;     /* 14px */
  --text-label-md: 0.75rem;      /* 12px */
  --text-label-sm: 0.6875rem;    /* 11px */

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-level-0: none;
  --shadow-level-1: 0 1px 3px 0 color-mix(in srgb, var(--color-black) 8%, transparent), 0 1px 2px -1px color-mix(in srgb, var(--color-black) 6%, transparent);
  --shadow-level-2: 0 4px 6px -1px color-mix(in srgb, var(--color-black) 10%, transparent), 0 2px 4px -2px color-mix(in srgb, var(--color-black) 6%, transparent);
  --shadow-level-3: 0 10px 15px -3px color-mix(in srgb, var(--color-black) 12%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--color-black) 6%, transparent);
}

@layer base {
  *, *::before, *::after {
    @apply box-border;
  }

  html {
    @apply font-sans text-body-lg text-on-surface bg-surface-100 antialiased;
  }

  body {
    @apply m-0 min-h-screen;
  }
}

@layer components {
  /* ---------- Buttons ---------- */
  .btn {
    @apply inline-flex items-center justify-center gap-sm h-10 px-md text-label-lg font-medium border-none rounded-sm cursor-pointer no-underline whitespace-nowrap leading-none transition-all duration-150 ease-in-out;
  }

  .btn:focus-visible {
    @apply outline-2 outline-primary-400 outline-offset-2;
  }

  .btn:disabled {
    @apply opacity-50 cursor-not-allowed;
  }

  .btn-primary {
    @apply bg-primary-500 text-on-primary;
  }

  .btn-primary:hover:not(:disabled) {
    @apply bg-primary-600;
  }

  .btn-primary:active:not(:disabled) {
    @apply bg-primary-700;
  }

  .btn-secondary {
    @apply bg-surface-200 text-on-surface;
  }

  .btn-secondary:hover:not(:disabled) {
    @apply bg-surface-300;
  }

  .btn-secondary:active:not(:disabled) {
    @apply bg-surface-400;
  }

  .btn-danger {
    @apply bg-error-500 text-on-error;
  }

  .btn-danger:hover:not(:disabled) {
    @apply bg-error-600;
  }

  .btn-text {
    @apply bg-transparent text-primary-500 px-sm;
  }

  .btn-text:hover:not(:disabled) {
    @apply bg-primary-50;
  }

  .btn-sm {
    @apply h-8 px-sm text-label-md;
  }

  .btn-icon {
    @apply w-10 p-0;
  }

  .btn-icon.btn-sm {
    @apply w-8;
  }

  /* ---------- Inputs ---------- */
  .input {
    @apply block w-full h-10 px-md text-body-md font-sans text-on-surface bg-surface-0 border border-solid border-surface-300 rounded-sm transition-all duration-150 ease-in-out;
  }

  .input:focus {
    @apply outline-none border-primary-400;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 12%, transparent);
  }

  .input::placeholder {
    @apply text-on-surface-muted;
  }

  .input-error {
    @apply border-error-500;
  }

  .input-error:focus {
    @apply border-error-500;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error-500) 12%, transparent);
  }

  input[type="date"].input {
    color-scheme: light;
  }

  input[type="date"].input::-webkit-calendar-picker-indicator {
    @apply cursor-pointer opacity-50 rounded-sm p-0.5 transition-opacity duration-150 ease-in-out;
  }

  input[type="date"].input::-webkit-calendar-picker-indicator:hover {
    @apply opacity-100;
  }

  /* ---------- Radio Group (Segmented Control) ---------- */
  .radio-group {
    @apply inline-flex bg-surface-100 rounded-md p-0.75 gap-0.5;
  }

  .radio-option {
    @apply flex items-center py-sm px-md cursor-pointer text-label-lg font-medium text-on-surface-muted select-none transition-all duration-150 ease-in-out;
    border-radius: calc(var(--radius-md) - 3px);
  }

  .radio-option:hover {
    @apply text-on-surface;
  }

  .radio-option:has(input:checked) {
    @apply bg-surface-0 text-on-surface shadow-level-1;
  }

  .radio-option input[type="radio"] {
    @apply absolute opacity-0 w-0 h-0 pointer-events-none;
  }

  /* ---------- Filter Bar ---------- */
  .filter-bar {
    @apply bg-surface-0 rounded-lg shadow-level-1 py-md px-lg mb-md;
  }

  .filter-bar-row {
    @apply flex gap-sm flex-wrap items-end;
  }

  .filter-bar-group {
    @apply flex flex-col gap-xs;
  }

  .filter-bar-group .form-label {
    @apply mb-0 text-label-sm;
  }

  /* ---------- Segmented Control ---------- */
  .segmented-control {
    @apply inline-flex bg-surface-100 rounded-md p-xs;
    gap: 2px;
  }

  .segmented-control-item {
    @apply px-md py-sm text-body-sm font-medium text-on-surface-muted rounded-sm cursor-pointer transition-all duration-150 ease-in-out;
    background: transparent;
    border: none;
    white-space: nowrap;
  }

  .segmented-control-item:hover {
    @apply text-on-surface bg-surface-200/50;
  }

  .segmented-control-item.active {
    @apply text-on-surface bg-surface-0 shadow-level-1;
  }

  /* ---------- Select ---------- */
  .select {
    @apply block h-10 pr-xl pl-md text-body-md font-sans text-on-surface bg-surface-0 border border-solid border-surface-300 rounded-sm cursor-pointer transition-all duration-150 ease-in-out;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 20px;
  }

  .select:focus {
    @apply outline-none border-primary-400;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 12%, transparent);
  }

  /* ---------- Cards ---------- */
  .card {
    @apply bg-surface-0 rounded-lg shadow-level-1 p-lg;
  }

  /* ---------- Badge ---------- */
  .badge {
    @apply inline-flex items-center py-0.5 px-sm text-label-sm font-medium rounded-full capitalize;
  }

  .badge-primary {
    @apply bg-primary-100 text-primary-700;
  }

  .badge-secondary {
    @apply bg-secondary-100 text-secondary-700;
  }

  .badge-success {
    @apply bg-success-100 text-success-600;
  }

  .badge-warning {
    @apply bg-warning-100 text-warning-600;
  }

  .badge-error {
    @apply bg-error-100 text-error-600;
  }

  /* ---------- Avatar ---------- */
  .avatar {
    @apply inline-flex items-center justify-center rounded-full font-semibold shrink-0 overflow-hidden bg-primary-100 text-primary-700;
  }

  .avatar-sm {
    @apply w-8 h-8 text-label-sm;
  }

  .avatar-md {
    @apply w-10 h-10 text-label-lg;
  }

  .avatar-lg {
    @apply w-12 h-12 text-title-sm;
  }

  .avatar img {
    @apply w-full h-full object-cover;
  }

  /* ---------- Table ---------- */
  .table-container {
    @apply overflow-x-auto rounded-lg bg-surface-0 shadow-level-1;
  }

  .data-table {
    @apply w-full;
    border-collapse: collapse;
  }

  .data-table th {
    @apply py-md px-lg text-left text-label-md font-semibold text-on-surface-muted uppercase whitespace-nowrap select-none border-b border-surface-200;
    letter-spacing: 0.05em;
  }

  .data-table th.sortable {
    @apply cursor-pointer transition-colors duration-150 ease-in-out;
  }

  .data-table th.sortable:hover {
    @apply text-on-surface;
  }

  .data-table th.sortable a.sort-link {
    @apply text-on-surface-muted no-underline transition-colors duration-150 ease-in-out;
    display: inline-flex;
    align-items: center;
    gap: 2px;
  }

  .data-table th.sortable a.sort-link:hover {
    @apply text-on-surface;
  }

  .data-table th.sortable a.sort-active {
    @apply text-primary-600;
  }

  .sort-icon {
    display: inline-flex;
    flex-shrink: 0;
    transition: opacity 0.15s ease-in-out;
  }

  .sort-icon svg {
    width: 14px;
    height: 14px;
  }

  .sort-icon.idle {
    flex-direction: column;
    opacity: 0.5;
  }

  .sort-icon.idle svg {
    width: 12px;
    height: 8px;
  }

  .data-table th.sortable:hover .sort-icon.idle {
    opacity: 0.8;
  }

  .sort-icon.active {
    @apply text-primary-600;
    opacity: 1;
  }

  .data-table td {
    @apply py-md px-lg border-b border-surface-100 text-body-md align-middle;
  }

  .data-table tbody tr {
    @apply transition-colors duration-100 ease-in-out;
  }

  .data-table tbody tr:hover {
    @apply bg-surface-50;
  }

  .data-table tbody tr:last-child td {
    @apply border-b-0;
  }

  /* ---------- Pagination ---------- */
  .pagination {
    @apply flex items-center justify-between py-md px-lg flex-wrap gap-md;
  }

  .pagination-info {
    @apply text-body-sm text-on-surface-muted;
  }

  .pagination-controls {
    @apply flex items-center gap-xs;
  }

  .pagination-btn {
    @apply inline-flex items-center justify-center min-w-xl h-xl px-sm text-label-md font-medium text-on-surface-muted bg-transparent border border-solid border-surface-300 rounded-sm cursor-pointer no-underline transition-all duration-150 ease-in-out;
  }

  .pagination-btn:hover:not(:disabled):not(.active) {
    @apply bg-surface-100 text-on-surface;
  }

  .pagination-btn.active {
    @apply bg-primary-500 text-on-primary border-primary-500;
  }

  .pagination-btn:disabled {
    @apply opacity-40 cursor-not-allowed;
  }

  /* ---------- Sidebar ---------- */
  .sidebar {
    @apply fixed top-0 left-0 w-65 h-screen bg-surface-0 border-r border-surface-200 flex flex-col z-40 transition-transform duration-250 ease-in-out;
  }

  .sidebar-logo {
    @apply flex items-center gap-sm px-lg text-title-md font-bold h-20 text-primary-600 no-underline border-b border-surface-200;
  }

  .sidebar-logo svg {
    @apply h-6 w-auto shrink-0;
  }

  .sidebar-nav {
    @apply flex-1 overflow-y-auto p-md flex flex-col gap-xs;
  }

  .sidebar-link {
    @apply flex items-center gap-sm py-sm px-md text-body-md font-medium text-on-surface-muted no-underline rounded-md transition-all duration-150 ease-in-out;
  }

  .sidebar-link:hover {
    @apply bg-surface-100 text-on-surface;
  }

  .sidebar-link.active {
    @apply bg-primary-50 text-primary-600;
  }

  .sidebar-link svg {
    @apply w-5 h-5 shrink-0;
  }

  .sidebar-footer {
    @apply p-md border-t border-surface-200;
  }

  .sidebar-user {
    @apply flex items-center gap-sm p-sm rounded-md no-underline text-on-surface transition-colors duration-150 ease-in-out;
  }

  .sidebar-user:hover {
    @apply bg-surface-100;
  }

  .sidebar-user-info {
    @apply flex-1 min-w-0;
  }

  .sidebar-user-name {
    @apply text-body-md font-medium overflow-hidden text-ellipsis whitespace-nowrap;
  }

  .sidebar-user-email {
    @apply text-label-sm text-on-surface-muted overflow-hidden text-ellipsis whitespace-nowrap;
  }

  .sidebar-logout {
    @apply flex items-center justify-center w-8 h-8 text-on-surface-muted rounded-sm shrink-0 transition-all duration-150 ease-in-out;
  }

  .sidebar-logout:hover {
    @apply bg-error-50 text-error-500;
  }

  .sidebar-logout svg {
    @apply w-4.5 h-4.5;
  }

  /* ---------- Mobile Sidebar Overlay ---------- */
  .sidebar-overlay {
    @apply hidden fixed inset-0 z-35 opacity-0 transition-opacity duration-250 ease-in-out;
    background-color: color-mix(in srgb, var(--color-black) 40%, transparent);
  }

  .sidebar-overlay.active {
    @apply block opacity-100;
  }

  /* ---------- Main Content ---------- */
  .main-content {
    @apply ml-65 min-h-screen flex flex-col;
  }

  /* ---------- Top Bar ---------- */
  .topbar {
    @apply flex items-center h-20 px-lg bg-surface-0 border-b border-surface-200 gap-md sticky top-0 z-30;
  }

  .topbar-burger {
    @apply hidden items-center justify-center w-10 h-10 bg-transparent border-none cursor-pointer text-on-surface rounded-sm transition-colors duration-150 ease-in-out;
  }

  .topbar-burger:hover {
    @apply bg-surface-100;
  }

  .topbar-burger svg {
    @apply w-lg h-lg;
  }

  .topbar-title {
    @apply text-headline-md font-bold text-on-surface flex-1;
  }

  /* ---------- Page Content ---------- */
  .page-content {
    @apply flex-1 p-lg;
  }

  /* ---------- Toolbar ---------- */
  .toolbar {
    @apply flex items-center gap-md flex-wrap mb-lg;
  }

  .toolbar-search {
    @apply flex-1 min-w-50 max-w-80 relative;
  }

  .toolbar-search .input {
    @apply pl-9;
  }

  .toolbar-search-icon {
    @apply absolute left-sm top-1/2 -translate-y-1/2 w-5 h-5 text-on-surface-muted pointer-events-none;
  }

  /* ---------- Flash messages ---------- */
  .flash {
    @apply p-md rounded-md text-body-md mb-lg flex items-center gap-sm;
  }

  .flash-notice {
    @apply bg-success-50 text-success-600 border border-solid border-success-100;
  }

  .flash-alert {
    @apply bg-error-50 text-error-600 border border-solid border-error-100;
  }

  /* ---------- Form ---------- */
  .form-group {
    @apply mb-lg;
  }

  .form-label {
    @apply block text-label-lg font-medium text-on-surface mb-xs;
  }

  .form-hint {
    @apply text-label-md text-on-surface-muted mt-xs;
  }

  .form-error {
    @apply text-label-md text-error-500 mt-xs;
  }

  .form-actions {
    @apply flex items-center gap-md mt-xl;
  }

  /* ---------- Empty State ---------- */
  .empty-state {
    @apply flex flex-col items-center py-3xl px-lg text-center;
  }

  .empty-state-icon {
    @apply w-16 h-16 text-on-surface-muted mb-md opacity-50;
  }

  .empty-state-title {
    @apply text-title-md font-semibold text-on-surface mb-sm;
  }

  .empty-state-description {
    @apply text-body-md text-on-surface-muted max-w-100 mb-lg;
  }

  /* ---------- Dropdown / Actions ---------- */
  .actions-menu {
    @apply relative inline-flex;
  }

  .actions-dropdown {
    @apply absolute right-0 top-full mt-xs min-w-40 bg-surface-0 rounded-md shadow-level-2 border border-solid border-surface-200 z-50 p-xs opacity-0 pointer-events-none transition-all duration-150 ease-in-out;
    transform: translateY(-4px);
  }

  .actions-dropdown.open {
    @apply opacity-100 pointer-events-auto;
    transform: translateY(0);
  }

  .actions-dropdown-item {
    @apply flex items-center gap-sm w-full py-sm px-md text-body-md text-on-surface bg-transparent border-none rounded-sm cursor-pointer no-underline text-left transition-colors duration-100 ease-in-out;
  }

  .actions-dropdown-item:hover {
    @apply bg-surface-100;
  }

  .actions-dropdown-item.danger {
    @apply text-error-500;
  }

  .actions-dropdown-item.danger:hover {
    @apply bg-error-50;
  }

  .actions-dropdown-item svg {
    @apply w-4 h-4 shrink-0;
  }

  /* ---------- Modal / Dialog ---------- */
  .modal-overlay {
    @apply fixed inset-0 flex items-center justify-center z-100 p-md opacity-0 transition-opacity duration-200 ease-in-out;
    background-color: color-mix(in srgb, var(--color-black) 50%, transparent);
  }

  .modal-overlay.active {
    @apply opacity-100;
  }

  .modal {
    @apply bg-surface-0 rounded-lg shadow-level-3 w-full max-w-120 p-lg transition-transform duration-200 ease-in-out;
    transform: scale(0.95);
  }

  .modal-overlay.active .modal {
    transform: scale(1);
  }

  .modal-title {
    @apply text-title-lg font-semibold mb-md;
  }

  .modal-body {
    @apply text-body-md text-on-surface-muted mb-lg leading-relaxed mt-0;
  }

  .modal-actions {
    @apply flex gap-sm justify-end;
  }

  /* ---------- Mobile Card (for responsive table) ---------- */
  .mobile-cards {
    @apply hidden;
  }

  .mobile-card {
    @apply bg-surface-0 rounded-lg shadow-level-1 p-md mb-md;
  }

  .mobile-card-header {
    @apply flex items-center gap-md mb-md;
  }

  .mobile-card-body {
    @apply flex flex-col gap-sm text-body-sm text-on-surface-muted;
  }

  .mobile-card-row {
    @apply flex justify-between items-center;
  }

  .mobile-card-label {
    @apply font-medium text-on-surface;
  }

  .mobile-card-actions {
    @apply flex gap-sm mt-md pt-md border-t border-surface-200;
  }

  /* ---------- Auth layout ---------- */
  .auth-container {
    @apply min-h-screen flex items-center justify-center p-lg bg-surface-100;
  }

  .auth-card {
    @apply w-full max-w-135 bg-surface-0 rounded-lg shadow-level-2 p-xl;
  }

  .auth-title {
    @apply text-headline-sm font-bold text-center mb-lg text-on-surface;
  }

  .auth-logo {
    @apply flex items-center justify-center gap-sm text-title-lg font-bold text-primary-600 mb-xl no-underline;
  }

  .auth-logo svg {
    @apply h-7 w-auto;
  }

  .auth-links {
    @apply flex flex-col items-center gap-sm mt-lg;
  }

  .auth-link {
    @apply text-body-sm text-primary-500 no-underline transition-colors duration-150 ease-in-out;
  }

  .auth-link:hover {
    @apply text-primary-600 underline;
  }
}

/* ---------- Dashboard Pending Transactions ---------- */
.pending-transaction-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-surface-100);
}

.pending-transaction-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex: 1;
  min-width: 0;
}

.pending-transaction-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

/* ========================================
   Responsive — Mobile
   ======================================== */
@media (max-width: 768px) {
  .sidebar {
    @apply -translate-x-full;
  }

  .sidebar.open {
    @apply translate-x-0;
  }

  .main-content {
    @apply ml-0;
  }

  .topbar-burger {
    @apply flex;
  }

  .page-content {
    @apply p-md;
  }

  .pending-transaction-row {
    flex-wrap: wrap;
    gap: var(--spacing-xs);
  }

  .pending-transaction-info {
    flex-basis: 100%;
  }

  .pending-transaction-actions {
    flex-basis: 100%;
    justify-content: space-between;
  }

  .table-container {
    @apply hidden;
  }

  .mobile-cards {
    @apply block;
  }

  .toolbar {
    @apply flex-col items-stretch;
  }

  .toolbar-search {
    @apply max-w-none;
  }

  .pagination {
    @apply flex-col items-center text-center;
  }

  .filter-bar {
    @apply p-md;
  }

  .filter-bar-row {
    @apply flex-col items-stretch;
  }

  .filter-bar-group {
    @apply w-full;
  }

  .filter-bar-group .select,
  .filter-bar-group .input {
    @apply w-full;
  }

  .radio-group {
    @apply w-full;
  }

  .radio-option {
    @apply flex-1 justify-center;
  }
}

/* ========================================
   Auth Pages (override)
   ======================================== */
.auth-container {
  @apply flex flex-col items-center justify-center min-h-screen p-lg;
  background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-surface-50) 50%, var(--color-secondary-50) 100%);
}

.auth-logo {
  @apply flex items-center justify-center gap-sm text-title-lg font-bold text-primary-600 mb-xl;
}

.auth-logo svg {
  @apply h-7 w-auto;
}

.auth-card {
  @apply bg-surface-0 rounded-lg shadow-level-2 p-2xl w-full max-w-115;
}

.auth-title {
  @apply text-title-lg font-semibold text-center mb-xl text-on-surface;
}

.auth-links {
  @apply flex flex-col items-center gap-sm mt-lg;
}

.auth-link {
  @apply text-body-sm text-primary-600 no-underline transition-colors duration-150 ease-in-out;
}

.auth-link:hover {
  @apply text-primary-700 underline;
}

.locale-toggle {
  @apply flex items-center gap-xs text-body-sm text-on-surface-muted;
}

.locale-toggle strong {
  @apply text-on-surface font-semibold;
}

.locale-toggle-link {
  @apply text-on-surface-muted no-underline transition-colors duration-150 ease-in-out;
}

.locale-toggle-link:hover {
  @apply text-primary-600;
}

.topbar-actions {
  @apply flex items-center gap-md ml-auto;
}