/* /Layout/NavMenu.razor.rz.scp.css */
/* =====================================================================
   🧭 NAV MENU COMPONENT - CENTRALIZED IN nav-menu.css
   ===================================================================== 
   
   All NavMenu styles are now managed centrally in:
   wwwroot/css/5-components/layout/nav-menu.css
   
   This file is kept minimal to maintain Blazor component scoping.
   All actual styles are in the global CSS file for better
   maintainability and to avoid conflicts.
   
   ===================================================================== */
/* /Pages/GroupClaimAssignment.razor.rz.scp.css */
/* GroupClaimAssignment.razor.css
 * Merkezi token sistemine uyumlu responsive tasarım
 * ============================================= */


.assignment-content[b-kqxwijo34j]
{
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* === ASSIGNMENT ROW (3 Columns Layout) === */

.assignment-row[b-kqxwijo34j]
{
  flex: 1;
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2);
  min-height: 0;
  overflow: hidden;
}

/* === CLAIM COLUMNS === */

.claim-column[b-kqxwijo34j]
{
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  max-width: calc(50% - 30px);
  background: var(--surface-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  border: 1px solid var(--color-gray-300);
  box-shadow: var(--shadow-sm);
}

/* === CONTROL COLUMN (Center Buttons) === */

.control-column[b-kqxwijo34j]
{
  display: flex;
  align-items: center;
  justify-content: center;
}

.control-buttons[b-kqxwijo34j]
{
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.move-button[b-kqxwijo34j]
{
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: var(--radius-md) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%) !important;
  border: none !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast) !important;
  color: var(--color-white) !important;
}

.move-button:hover:not(:disabled)[b-kqxwijo34j]
{
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-md) !important;
}

.move-button:disabled[b-kqxwijo34j]
{
  background: var(--color-gray-200) !important;
  color: var(--color-gray-400) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

.move-button[b-kqxwijo34j]  .rzi
{
  font-size: var(--font-size-base);
}

/* === SECTION HEADER === */

.section-header[b-kqxwijo34j]
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-gray-200);
  flex-shrink: 0;
}

.section-title-wrapper[b-kqxwijo34j]
{
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 1;
}

.section-icon[b-kqxwijo34j]
{
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  flex-shrink: 0;
}

.section-icon--available[b-kqxwijo34j]
{
  background: rgba(var(--color-primary-500-rgb), 0.1);
  color: var(--color-primary-600);
}

.section-icon--assigned[b-kqxwijo34j]
{
  background: rgba(var(--color-success-500-rgb), 0.1);
  color: var(--color-success-600);
}

.section-title[b-kqxwijo34j]
{
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--theme-text);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.count-badge[b-kqxwijo34j]
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 var(--space-1-5);
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
  color: var(--color-white);
  border-radius: var(--radius-full);
  font-size: 0.65rem;
  font-weight: var(--font-weight-semibold);
  flex-shrink: 0;
}

.count-badge--success[b-kqxwijo34j]
{
  background: linear-gradient(135deg, var(--color-success-500) 0%, var(--color-success-600) 100%);
}

/* === FILTER ROW (Bulk Actions + Search side by side) === */

.filter-row[b-kqxwijo34j]
{
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  flex-shrink: 0;
}

/* === SEARCH CONTAINER === */

.search-container[b-kqxwijo34j]
{
  flex: 1;
  min-width: 0;
}

.search-wrapper[b-kqxwijo34j]
{
  position: relative;
  display: flex;
  align-items: center;
  height: 32px;
  background: var(--surface-primary);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  overflow: hidden;
}

.search-wrapper:hover[b-kqxwijo34j]
{
  border-color: var(--color-gray-400);
}

.search-wrapper:focus-within[b-kqxwijo34j]
{
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-500-rgb), 0.1);
}

.search-icon[b-kqxwijo34j]
{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 100%;
  color: var(--color-gray-400);
  background: var(--color-gray-50);
  border-right: 1px solid var(--color-gray-200);
  flex-shrink: 0;
}

.search-icon[b-kqxwijo34j]  .rzi
{
  font-size: 0.875rem;
}

.search-wrapper:focus-within .search-icon[b-kqxwijo34j]
{
  color: var(--color-primary-500);
  background: rgba(var(--color-primary-500-rgb), 0.05);
  border-color: rgba(var(--color-primary-500-rgb), 0.2);
}

.search-input[b-kqxwijo34j]
{
  flex: 1 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 var(--space-3) !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: var(--font-size-sm) !important;
  background: transparent !important;
  color: var(--theme-text) !important;
}

.search-input:focus[b-kqxwijo34j]
{
  outline: none !important;
  box-shadow: none !important;
}

.search-input[b-kqxwijo34j]::placeholder
{
  color: var(--color-gray-400);
  font-size: var(--font-size-sm);
}

/* === BULK ACTIONS === */

.bulk-actions[b-kqxwijo34j]
{
  display: flex;
  flex-shrink: 0;
}

.bulk-action-btn[b-kqxwijo34j]
{
  height: 32px !important;
  padding: 0 var(--space-3) !important;
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--font-size-xs) !important;
  font-weight: var(--font-weight-semibold) !important;
  color: var(--color-white) !important;
  transition: all var(--transition-fast) !important;
  white-space: nowrap !important;
  box-shadow: var(--shadow-xs) !important;
}

.bulk-action-btn:hover:not(:disabled)[b-kqxwijo34j]
{
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-sm) !important;
  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%) !important;
}

/* === CLAIM GRID === */

.claim-grid-container[b-kqxwijo34j]
{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
}

.claim-list[b-kqxwijo34j]
{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-1);
}

.claim-item[b-kqxwijo34j]
{
  display: flex;
  align-items: center;
  padding: var(--space-1-5) var(--space-2);
  background: var(--surface-secondary);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.claim-item:hover[b-kqxwijo34j]
{
  background: rgba(var(--color-primary-500-rgb), 0.05);
  border-color: rgba(var(--color-primary-500-rgb), 0.15);
}

.claim-item.selected[b-kqxwijo34j]
{
  background: rgba(var(--color-primary-500-rgb), 0.1);
  border-color: var(--color-primary-300);
}

.claim-checkbox[b-kqxwijo34j]
{
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
}

.claim-checkbox[b-kqxwijo34j]  .rz-chkbox
{
  flex-shrink: 0;
}

.claim-name[b-kqxwijo34j]
{
  flex: 1;
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium);
  color: var(--theme-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* === SAVE SECTION === */

.save-section[b-kqxwijo34j]
{
  display: flex;
  justify-content: flex-end;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-secondary);
  border-top: 1px solid var(--theme-border);
  flex-shrink: 0;
}

.save-button[b-kqxwijo34j]
{
  min-width: 140px !important;
  height: 36px !important;
  font-weight: var(--font-weight-semibold) !important;
}

/* === EMPTY STATE === */

.empty-state[b-kqxwijo34j]
{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  text-align: center;
  flex: 1;
}

.empty-state--large[b-kqxwijo34j]
{
  padding: var(--space-8);
}

.empty-state__icon[b-kqxwijo34j]
{
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-secondary);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
  color: var(--color-gray-400);
}

.empty-state__icon[b-kqxwijo34j]  .rzi
{
  font-size: 1.25rem;
}

.empty-state__title[b-kqxwijo34j]
{
  margin: 0 0 var(--space-1) 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--theme-text);
}

.empty-state__text[b-kqxwijo34j]
{
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--theme-text-secondary);
  max-width: 200px;
}

/* === LOADING STATE === */

.loading-container[b-kqxwijo34j]
{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.loading-content[b-kqxwijo34j]
{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.loading-text[b-kqxwijo34j]
{
  font-size: var(--font-size-sm);
  color: var(--theme-text-secondary);
  margin: 0;
}

/* === RESPONSIVE - MOBILE (Stack Layout) === */

@media
(max-width: 900px)
{
  .assignment-row[b-kqxwijo34j]
  {
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
    overflow-y: auto;
  }

  .claim-column[b-kqxwijo34j]
  {
    flex: 0 0 auto;
    max-width: 100%;
    min-height: 250px;
    padding: var(--space-3);
  }

  .section-icon[b-kqxwijo34j]
  {
    width: 28px;
    height: 28px;
  }

  .section-title[b-kqxwijo34j]
  {
    font-size: var(--font-size-sm);
  }

  .count-badge[b-kqxwijo34j]
  {
    min-width: 26px;
    height: 22px;
    font-size: var(--font-size-xs);
  }

  .control-buttons[b-kqxwijo34j]
  {
    flex-direction: row;
    gap: var(--space-3);
  }

  .move-button[b-kqxwijo34j]
  {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }

  .move-button[b-kqxwijo34j]  .rzi
  {
    transform: rotate(90deg);
  }

  .filter-row[b-kqxwijo34j]
  {
    gap: var(--space-2);
  }

  .bulk-action-btn[b-kqxwijo34j]
  {
    height: 36px !important;
    padding: 0 var(--space-3) !important;
    font-size: var(--font-size-xs) !important;
  }

  .search-wrapper[b-kqxwijo34j]
  {
    height: 36px;
  }

  .search-icon[b-kqxwijo34j]
  {
    width: 36px;
  }

  .search-input[b-kqxwijo34j]
  {
    font-size: var(--font-size-sm) !important;
  }

  .claim-name[b-kqxwijo34j]
  {
    font-size: var(--font-size-sm);
  }

  .save-section[b-kqxwijo34j]
  {
    justify-content: center;
    padding: var(--space-3);
  }

  .save-button[b-kqxwijo34j]
  {
    width: 100% !important;
    max-width: 320px !important;
  }
}

/* === RESPONSIVE - SMALL MOBILE === */

@media
(max-width: 576px)
{
  .assignment-row[b-kqxwijo34j]
  {
    padding: var(--space-2);
  }

  .claim-column[b-kqxwijo34j]
  {
    padding: var(--space-2);
    min-height: 220px;
  }

  .filter-row[b-kqxwijo34j]
  {
    gap: var(--space-1-5);
  }

  /* .bulk-actions
  {
    width: 100%;
  }

  .bulk-action-btn
  {
    width: 100% !important;
  } */

  .empty-state[b-kqxwijo34j]
  {
    padding: var(--space-3);
  }

  .empty-state__icon[b-kqxwijo34j]
  {
    width: 40px;
    height: 40px;
  }
}

/* === DARK MODE === */

[data-theme='dark'] .claim-column[b-kqxwijo34j]
{
  background: rgba(var(--color-gray-800-rgb), 0.5);
  border-color: var(--theme-border);
}

[data-theme='dark'] .claim-grid-container[b-kqxwijo34j]
{
  background: var(--surface-tertiary);
}

[data-theme='dark'] .claim-item[b-kqxwijo34j]
{
  background: rgba(var(--color-gray-700-rgb), 0.3);
}

[data-theme='dark'] .claim-item:hover[b-kqxwijo34j]
{
  background: rgba(var(--color-primary-500-rgb), 0.15);
}

[data-theme='dark'] .claim-item.selected[b-kqxwijo34j]
{
  background: rgba(var(--color-primary-500-rgb), 0.2);
  border-color: var(--color-primary-500);
}

[data-theme='dark'] .section-icon--available[b-kqxwijo34j]
{
  background: rgba(var(--color-primary-400-rgb), 0.15);
  color: var(--color-primary-400);
}

[data-theme='dark'] .section-icon--assigned[b-kqxwijo34j]
{
  background: rgba(var(--color-success-400-rgb), 0.15);
  color: var(--color-success-400);
}

[data-theme='dark'] .search-wrapper[b-kqxwijo34j]
{
  background: var(--surface-tertiary);
  border-color: var(--color-gray-600);
}

[data-theme='dark'] .search-wrapper:hover[b-kqxwijo34j]
{
  border-color: var(--color-gray-500);
}

[data-theme='dark'] .search-wrapper:focus-within[b-kqxwijo34j]
{
  border-color: var(--color-primary-400);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-400-rgb), 0.15);
}

[data-theme='dark'] .search-icon[b-kqxwijo34j]
{
  background: rgba(var(--color-gray-600-rgb), 0.5);
  border-color: var(--color-gray-600);
  color: var(--color-gray-400);
}

[data-theme='dark'] .search-wrapper:focus-within .search-icon[b-kqxwijo34j]
{
  background: rgba(var(--color-primary-500-rgb), 0.1);
  border-color: rgba(var(--color-primary-400-rgb), 0.3);
  color: var(--color-primary-400);
}

[data-theme='dark'] .empty-state__icon[b-kqxwijo34j]
{
  background: rgba(var(--color-gray-600-rgb), 0.3);
}

[data-theme='dark'] .move-button:disabled[b-kqxwijo34j]
{
  background: var(--color-gray-700) !important;
  color: var(--color-gray-500) !important;
}

/* === ACCESSIBILITY === */

@media
(prefers-reduced-motion: reduce)
{
  .claim-item[b-kqxwijo34j],
  .move-button[b-kqxwijo34j],
  .search-wrapper[b-kqxwijo34j],
  .bulk-action-btn[b-kqxwijo34j]
  {
    transition: none !important;
  }
}

/* Touch device optimization */

@media
(pointer: coarse)
{
  .claim-item[b-kqxwijo34j]
  {
    min-height: 40px;
    padding: var(--space-2);
  }

  .move-button[b-kqxwijo34j]
  {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .bulk-action-btn[b-kqxwijo34j]
  {
    min-height: 36px !important;
  }
}
/* /Pages/Login.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   🔐 LOGIN PAGE - Token-Based Modern Design
   ═══════════════════════════════════════════════════════════════════ */

/* ═════════════════════════════════════════════════════════════════
   📦 PAGE CONTAINER
   ═════════════════════════════════════════════════════════════════ */

.login-page[b-rxpik2x16v]
{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary-100) 0%, var(--color-purple-100) 30%, var(--color-gray-100) 70%, var(--color-primary-50) 100%);
  position: relative;
  overflow: hidden;
  padding: var(--space-4);
}

.login-page[b-rxpik2x16v]::before
{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 10% 40%, rgba(var(--color-primary-300-rgb), 0.4) 0%, transparent 70%), radial-gradient(ellipse 60% 50% at 90% 20%, rgba(var(--color-purple-300-rgb), 0.3) 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 50% 90%, rgba(var(--color-primary-200-rgb), 0.35) 0%, transparent 60%);
  pointer-events: none;
}

.login-container[b-rxpik2x16v]
{
  width: 100%;
  max-width: 420px;
  position: relative;
  z-index: 1;
}

/* ═════════════════════════════════════════════════════════════════
   🃏 LOGIN CARD
   ═════════════════════════════════════════════════════════════════ */

.login-card[b-rxpik2x16v]
{
  background: rgba(var(--color-white-rgb), 0.95);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(var(--color-white-rgb), 0.2);
  border-radius: var(--radius-3xl);
  box-shadow: 0 20px 40px rgba(var(--color-black-rgb), 0.1), 0 8px 16px rgba(var(--color-black-rgb), 0.06), inset 0 1px 0 rgba(var(--color-white-rgb), 0.6);
  padding: var(--space-8) var(--space-6);
  animation: slideInUp-b-rxpik2x16v 0.6s var(--ease-out-quad);
}

@keyframes slideInUp-b-rxpik2x16v
{
  from
  {
    opacity: 0;
    transform: translateY(30px);
  }

  to
  {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═════════════════════════════════════════════════════════════════
   📝 HEADER SECTION
   ═════════════════════════════════════════════════════════════════ */

.login-header[b-rxpik2x16v]
{
  text-align: center;
  margin-bottom: var(--space-5);
}

.logo-container[b-rxpik2x16v]
{
  margin-bottom: var(--space-3);
  display: flex;
  justify-content: center;
}

/* Radzen Image için ::deep selector gerekli */

[b-rxpik2x16v] .company-logo,
[b-rxpik2x16v] .company-logo img,
.logo-container[b-rxpik2x16v]  img
{
  max-height: 120px;
  max-width: 240px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(var(--color-black-rgb), 0.1));
}

.login-title[b-rxpik2x16v]
{
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  margin: 0 0 var(--space-2) 0;
  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-purple-600) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.login-subtitle[b-rxpik2x16v]
{
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin: 0;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

/* ═════════════════════════════════════════════════════════════════
   🚨 ERROR ALERT
   ═════════════════════════════════════════════════════════════════ */

.error-alert[b-rxpik2x16v]
{
  background: linear-gradient(135deg, var(--color-error-50) 0%, var(--color-error-100) 100%);
  border: 1px solid var(--color-error-300);
  border-radius: var(--radius-xl);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  animation: shakeError-b-rxpik2x16v 0.4s var(--ease-out-quad);
}

@keyframes shakeError-b-rxpik2x16v
{
  0%,
  100%
  {
    transform: translateX(0);
  }

  25%
  {
    transform: translateX(-4px);
  }

  75%
  {
    transform: translateX(4px);
  }
}

.error-icon[b-rxpik2x16v]
{
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

.error-text[b-rxpik2x16v]
{
  color: var(--color-error-700);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
}

/* ═════════════════════════════════════════════════════════════════
   📋 FORM STYLING
   ═════════════════════════════════════════════════════════════════ */

.login-form[b-rxpik2x16v]
{
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.form-group[b-rxpik2x16v]
{
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label[b-rxpik2x16v]
{
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
  margin-left: var(--space-1);
}

.input-wrapper[b-rxpik2x16v]
{
  position: relative;
}

/* Radzen input overrides */

[b-rxpik2x16v] .form-input.rz-textbox,
[b-rxpik2x16v] .form-input.rz-password
{
  width: 100% !important;
  height: 48px !important;
  padding: var(--space-3) var(--space-4) !important;
  border: 2px solid var(--color-gray-200) !important;
  border-radius: var(--radius-xl) !important;
  font-size: var(--font-size-base) !important;
  font-weight: var(--font-weight-medium) !important;
  color: var(--color-gray-900) !important;
  background: var(--color-white) !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
  box-shadow: 0 1px 3px rgba(var(--color-black-rgb), 0.05) !important;
}

[b-rxpik2x16v] .form-input.rz-textbox:hover,
[b-rxpik2x16v] .form-input.rz-password:hover
{
  border-color: var(--color-gray-300) !important;
}

[b-rxpik2x16v] .form-input.rz-textbox:focus,
[b-rxpik2x16v] .form-input.rz-password:focus
{
  border-color: var(--color-primary-500) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-500-rgb), 0.15) !important;
  outline: none !important;
}

[b-rxpik2x16v] .form-input.rz-textbox:disabled,
[b-rxpik2x16v] .form-input.rz-password:disabled
{
  background-color: var(--color-gray-50) !important;
  color: var(--color-gray-400) !important;
  cursor: not-allowed !important;
}

[b-rxpik2x16v] .form-input::placeholder
{
  color: var(--color-gray-400) !important;
  font-weight: var(--font-weight-normal) !important;
}

/* ═════════════════════════════════════════════════════════════════
   🔘 LOGIN BUTTON
   ═════════════════════════════════════════════════════════════════ */

.login-button[b-rxpik2x16v]
{
  height: 52px;
  width: 100%;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  border: none;
  border-radius: var(--radius-xl);
  color: #ffffff;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: all var(--transition-base) var(--ease-out-quad);
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.5), 0 2px 6px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
  margin-top: var(--space-2);
}

.login-button[b-rxpik2x16v]::before
{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(var(--color-white-rgb), 0.2), transparent);
  transition: left 0.5s ease;
}

.login-button:hover:not(:disabled)[b-rxpik2x16v]::before
{
  left: 100%;
}

.login-button:hover:not(:disabled)[b-rxpik2x16v]
{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.6), 0 4px 10px rgba(0, 0, 0, 0.2);
  background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
}

.login-button:active:not(:disabled)[b-rxpik2x16v]
{
  transform: translateY(0);
}

.login-button:disabled[b-rxpik2x16v]
{
  cursor: not-allowed;
  transform: none;
  opacity: 0.7;
  background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.login-button.loading[b-rxpik2x16v]
{
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.button-content[b-rxpik2x16v]
{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

/* ═════════════════════════════════════════════════════════════════
   ⏳ LOADING STATES
   ═════════════════════════════════════════════════════════════════ */

.loading-spinner[b-rxpik2x16v]
{
  width: 20px;
  height: 20px;
  border: 2px solid rgba(var(--color-white-rgb), 0.3);
  border-top-color: var(--color-white);
  border-radius: var(--radius-full);
  animation: spin-b-rxpik2x16v 1s linear infinite;
}

@keyframes spin-b-rxpik2x16v
{
  to
  {
    transform: rotate(360deg);
  }
}

.loading-info[b-rxpik2x16v]
{
  margin-top: var(--space-4);
  text-align: center;
}

.progress-bar[b-rxpik2x16v]
{
  width: 100%;
  height: 4px;
  background-color: rgba(var(--color-primary-500-rgb), 0.2);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-3);
}

.progress-fill[b-rxpik2x16v]
{
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary-500), var(--color-purple-500));
  border-radius: var(--radius-full);
  animation: progressIndeterminate-b-rxpik2x16v 2s ease-in-out infinite;
}

@keyframes progressIndeterminate-b-rxpik2x16v
{
  0%
  {
    transform: translateX(-100%);
    width: 30%;
  }

  50%
  {
    width: 60%;
  }

  100%
  {
    transform: translateX(400%);
    width: 30%;
  }
}

.loading-text[b-rxpik2x16v]
{
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  font-weight: var(--font-weight-medium);
}

/* ═════════════════════════════════════════════════════════════════
   📱 RESPONSIVE DESIGN
   ═════════════════════════════════════════════════════════════════ */

@media
(max-width: 575px)
{
  .login-page[b-rxpik2x16v]
  {
    padding: var(--space-3);
  }

  .login-card[b-rxpik2x16v]
  {
    padding: var(--space-6) var(--space-4);
    border-radius: var(--radius-2xl);
  }

  .company-logo[b-rxpik2x16v]
  {
    max-height: 80px;
  }

  .login-title[b-rxpik2x16v]
  {
    font-size: var(--font-size-xl);
  }

  [b-rxpik2x16v] .form-input.rz-textbox,
  [b-rxpik2x16v] .form-input.rz-password
  {
    height: 44px !important;
    font-size: var(--font-size-sm) !important;
  }

  .login-button[b-rxpik2x16v]
  {
    height: 48px;
    font-size: var(--font-size-sm);
  }
}

/* ═════════════════════════════════════════════════════════════════
   ♿ ACCESSIBILITY
   ═════════════════════════════════════════════════════════════════ */

@media
(prefers-reduced-motion: reduce)
{
  .login-card[b-rxpik2x16v],
  .error-alert[b-rxpik2x16v],
  .loading-spinner[b-rxpik2x16v],
  .progress-fill[b-rxpik2x16v],
  .login-button[b-rxpik2x16v]::before
  {
    animation: none;
  }

  .login-button[b-rxpik2x16v],
  [b-rxpik2x16v] .form-input
  {
    transition: none !important;
  }
}

@media
(prefers-contrast: high)
{
  .login-card[b-rxpik2x16v]
  {
    background: var(--color-white);
    border: 2px solid var(--color-black);
  }

  [b-rxpik2x16v] .form-input.rz-textbox,
  [b-rxpik2x16v] .form-input.rz-password
  {
    border-color: var(--color-black) !important;
  }

  .login-button[b-rxpik2x16v]
  {
    background: var(--color-black);
  }
}

.login-button:focus-visible[b-rxpik2x16v]
{
  outline: 3px solid var(--color-warning-400);
  outline-offset: 2px;
}

/* ═════════════════════════════════════════════════════════════════
   🌙 DARK MODE
   ═════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .login-page[b-rxpik2x16v]
{
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

[data-theme="dark"] .login-page[b-rxpik2x16v]::before
{
  background: radial-gradient(circle at 20% 50%, rgba(var(--color-primary-800-rgb), 0.4) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(var(--color-purple-900-rgb), 0.3) 0%, transparent 50%), radial-gradient(circle at 40% 80%, rgba(var(--color-primary-900-rgb), 0.3) 0%, transparent 50%);
}

[data-theme="dark"] .login-card[b-rxpik2x16v]
{
  background: rgba(var(--color-gray-800-rgb), 0.85);
  border-color: rgba(var(--color-gray-700-rgb), 0.5);
  box-shadow: 0 20px 40px rgba(var(--color-black-rgb), 0.4), 0 8px 16px rgba(var(--color-black-rgb), 0.3);
}

[data-theme="dark"] .login-title[b-rxpik2x16v]
{
  background: linear-gradient(135deg, var(--color-primary-400) 0%, var(--color-purple-400) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="dark"] .login-subtitle[b-rxpik2x16v]
{
  color: var(--color-gray-400);
}

[data-theme="dark"] .form-label[b-rxpik2x16v]
{
  color: var(--color-gray-200);
}

[data-theme="dark"][b-rxpik2x16v]  .form-input.rz-textbox,
[data-theme="dark"][b-rxpik2x16v]  .form-input.rz-password
{
  background: rgba(var(--color-gray-900-rgb), 0.6) !important;
  border-color: rgba(var(--color-gray-600-rgb), 0.5) !important;
  color: var(--color-gray-100) !important;
}

[data-theme="dark"][b-rxpik2x16v]  .form-input::placeholder
{
  color: var(--color-gray-500) !important;
}

[data-theme="dark"][b-rxpik2x16v]  .form-input.rz-textbox:focus,
[data-theme="dark"][b-rxpik2x16v]  .form-input.rz-password:focus
{
  background: rgba(var(--color-gray-900-rgb), 0.8) !important;
  border-color: var(--color-primary-400) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-400-rgb), 0.2) !important;
}

[data-theme="dark"] .error-alert[b-rxpik2x16v]
{
  background: rgba(var(--color-error-900-rgb), 0.3);
  border-color: rgba(var(--color-error-500-rgb), 0.4);
}

[data-theme="dark"] .error-text[b-rxpik2x16v]
{
  color: var(--color-error-300);
}

[data-theme="dark"] .login-button[b-rxpik2x16v]
{
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-purple-500) 100%);
  border: 1px solid rgba(var(--color-primary-400-rgb), 0.5);
  box-shadow: 0 4px 14px rgba(var(--color-primary-500-rgb), 0.35), 0 2px 6px rgba(var(--color-black-rgb), 0.2), inset 0 1px 0 rgba(var(--color-white-rgb), 0.1);
}

[data-theme="dark"] .login-button:hover:not(:disabled)[b-rxpik2x16v]
{
  background: linear-gradient(135deg, var(--color-primary-400) 0%, var(--color-purple-400) 100%);
  border-color: rgba(var(--color-primary-300-rgb), 0.6);
  box-shadow: 0 8px 24px rgba(var(--color-primary-500-rgb), 0.45), 0 4px 10px rgba(var(--color-black-rgb), 0.25), inset 0 1px 0 rgba(var(--color-white-rgb), 0.15);
}

[data-theme="dark"] .loading-text[b-rxpik2x16v]
{
  color: var(--color-gray-400);
}

[data-theme="dark"] .progress-bar[b-rxpik2x16v]
{
  background-color: rgba(var(--color-primary-500-rgb), 0.15);
}
/* /Pages/Register.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   👤 REGISTER PAGE - Token-Based Modern Design
   Consistent with Login page styling
   ═══════════════════════════════════════════════════════════════════ */

/* ═════════════════════════════════════════════════════════════════
   📦 PAGE CONTAINER
   ═════════════════════════════════════════════════════════════════ */

.register-page[b-mqtbpvyzp9]
{
  align-items: center;
  background: linear-gradient(135deg, var(--color-primary-100) 0%, var(--color-purple-100) 30%, var(--color-gray-100) 70%, var(--color-primary-50) 100%);
  display: flex;
  justify-content: center;
  min-height: 100%;
  padding: var(--space-4);
  position: relative;
}

.register-page[b-mqtbpvyzp9]::before
{
  background: radial-gradient(ellipse 80% 60% at 10% 40%, rgba(var(--color-primary-300-rgb), 0.4) 0%, transparent 70%), radial-gradient(ellipse 60% 50% at 90% 20%, rgba(var(--color-purple-300-rgb), 0.3) 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 50% 90%, rgba(var(--color-primary-200-rgb), 0.35) 0%, transparent 60%);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.register-container[b-mqtbpvyzp9]
{
  max-width: 460px;
  position: relative;
  width: 100%;
  z-index: 1;
}

/* ═════════════════════════════════════════════════════════════════
   🃏 REGISTER CARD
   ═════════════════════════════════════════════════════════════════ */

.register-card[b-mqtbpvyzp9]
{
  -webkit-backdrop-filter: blur(20px);
  animation: slideInUp-b-mqtbpvyzp9 0.6s var(--ease-out-quad);
  backdrop-filter: blur(20px);
  background: rgba(var(--color-white-rgb), 0.95);
  border: 1px solid rgba(var(--color-white-rgb), 0.2);
  border-radius: var(--radius-3xl);
  box-shadow: 0 20px 40px rgba(var(--color-black-rgb), 0.1), 0 8px 16px rgba(var(--color-black-rgb), 0.06), inset 0 1px 0 rgba(var(--color-white-rgb), 0.6);
  padding: var(--space-8) var(--space-6);
}

@keyframes slideInUp-b-mqtbpvyzp9
{
  from
  {
    opacity: 0;
    transform: translateY(30px);
  }

  to
  {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═════════════════════════════════════════════════════════════════
   📝 HEADER SECTION
   ═════════════════════════════════════════════════════════════════ */

.register-header[b-mqtbpvyzp9]
{
  margin-bottom: var(--space-6);
  text-align: center;
}

.header-icon[b-mqtbpvyzp9]
{
  align-items: center;
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-purple-500) 100%);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 16px rgba(var(--color-primary-500-rgb), 0.3), 0 4px 8px rgba(var(--color-black-rgb), 0.1);
  display: flex;
  height: 64px;
  justify-content: center;
  margin: 0 auto var(--space-4);
  width: 64px;
}

.header-icon[b-mqtbpvyzp9]  .rzi
{
  color: var(--color-white);
  font-size: 1.75rem;
}

.register-title[b-mqtbpvyzp9]
{
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-purple-600) 100%);
  background-clip: text;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-2) 0;
}

.register-subtitle[b-mqtbpvyzp9]
{
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  margin: 0;
}

/* ═════════════════════════════════════════════════════════════════
   🚨 ERROR ALERT
   ═════════════════════════════════════════════════════════════════ */

.error-alert[b-mqtbpvyzp9]
{
  align-items: center;
  animation: shakeError-b-mqtbpvyzp9 0.4s var(--ease-out-quad);
  background: linear-gradient(135deg, var(--color-error-50) 0%, var(--color-error-100) 100%);
  border: 1px solid var(--color-error-300);
  border-radius: var(--radius-xl);
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
}

@keyframes shakeError-b-mqtbpvyzp9
{
  0%,
  100%
  {
    transform: translateX(0);
  }

  25%
  {
    transform: translateX(-4px);
  }

  75%
  {
    transform: translateX(4px);
  }
}

.error-icon[b-mqtbpvyzp9]
{
  flex-shrink: 0;
  font-size: var(--font-size-lg);
}

.error-text[b-mqtbpvyzp9]
{
  color: var(--color-error-700);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
}

/* ═════════════════════════════════════════════════════════════════
   📋 FORM STYLING
   ═════════════════════════════════════════════════════════════════ */

.register-form[b-mqtbpvyzp9]
{
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.form-group[b-mqtbpvyzp9]
{
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label[b-mqtbpvyzp9]
{
  align-items: center;
  color: var(--color-gray-700);
  display: flex;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  gap: var(--space-2);
}

.input-wrapper[b-mqtbpvyzp9]
{
  position: relative;
}

/* Input styling via ::deep for Radzen components */

[b-mqtbpvyzp9] .form-input,
[b-mqtbpvyzp9] .form-input.rz-textbox,
[b-mqtbpvyzp9] .form-input.rz-password
{
  background: var(--color-white) !important;
  border: 2px solid var(--color-gray-200) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--color-gray-900) !important;
  font-size: var(--font-size-base) !important;
  height: 48px !important;
  padding: var(--space-3) var(--space-4) !important;
  transition: all var(--transition-fast) !important;
  width: 100% !important;
}

[b-mqtbpvyzp9] .form-input:hover:not(:disabled)
{
  border-color: var(--color-gray-300) !important;
}

[b-mqtbpvyzp9] .form-input:focus,
[b-mqtbpvyzp9] .form-input:focus-within
{
  border-color: var(--color-primary-500) !important;
  box-shadow: 0 0 0 4px rgba(var(--color-primary-500-rgb), 0.1) !important;
  outline: none !important;
}

[b-mqtbpvyzp9] .form-input:disabled
{
  background: var(--color-gray-50) !important;
  color: var(--color-gray-400) !important;
  cursor: not-allowed !important;
}

[b-mqtbpvyzp9] .form-input::placeholder
{
  color: var(--color-gray-400) !important;
}

/* ═════════════════════════════════════════════════════════════════
   🔘 BUTTON GROUP
   ═════════════════════════════════════════════════════════════════ */

.button-group[b-mqtbpvyzp9]
{
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Primary Register Button */

.register-button[b-mqtbpvyzp9]
{
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 12px rgba(var(--color-primary-500-rgb), 0.3), 0 2px 4px rgba(var(--color-black-rgb), 0.1);
  color: var(--color-white);
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  height: 52px;
  overflow: hidden;
  padding: var(--space-3) var(--space-6);
  position: relative;
  transition: all var(--transition-normal);
  width: 100%;
}

.register-button[b-mqtbpvyzp9]::before
{
  background: linear-gradient(135deg, var(--color-primary-400) 0%, var(--color-primary-500) 100%);
  content: '';
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: opacity var(--transition-fast);
}

.register-button:hover:not(:disabled)[b-mqtbpvyzp9]
{
  box-shadow: 0 8px 20px rgba(var(--color-primary-500-rgb), 0.4), 0 4px 8px rgba(var(--color-black-rgb), 0.1);
  transform: translateY(-2px);
}

.register-button:hover:not(:disabled)[b-mqtbpvyzp9]::before
{
  opacity: 1;
}

.register-button:active:not(:disabled)[b-mqtbpvyzp9]
{
  transform: translateY(0);
}

.register-button:disabled[b-mqtbpvyzp9]
{
  cursor: not-allowed;
  opacity: 0.7;
}

.register-button.loading[b-mqtbpvyzp9]
{
  pointer-events: none;
}

.button-content[b-mqtbpvyzp9]
{
  align-items: center;
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  position: relative;
  z-index: 1;
}

.button-content[b-mqtbpvyzp9]  .rzi
{
  font-size: 1.1rem;
}

/* Cancel Button */

.cancel-button[b-mqtbpvyzp9]
{
  background: transparent;
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  color: var(--color-gray-600);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  height: 44px;
  padding: var(--space-2-5) var(--space-6);
  transition: all var(--transition-fast);
  width: 100%;
}

.cancel-button:hover:not(:disabled)[b-mqtbpvyzp9]
{
  background: var(--color-gray-50);
  border-color: var(--color-gray-300);
  color: var(--color-gray-700);
}

.cancel-button:disabled[b-mqtbpvyzp9]
{
  cursor: not-allowed;
  opacity: 0.5;
}

/* ═════════════════════════════════════════════════════════════════
   ⏳ LOADING STATE
   ═════════════════════════════════════════════════════════════════ */

.loading-spinner[b-mqtbpvyzp9]
{
  animation: spin-b-mqtbpvyzp9 0.8s linear infinite;
  border: 2px solid rgba(var(--color-white-rgb), 0.3);
  border-radius: var(--radius-full);
  border-top-color: var(--color-white);
  height: 18px;
  width: 18px;
}

@keyframes spin-b-mqtbpvyzp9
{
  to
  {
    transform: rotate(360deg);
  }
}

.loading-info[b-mqtbpvyzp9]
{
  border-top: 1px solid var(--color-gray-100);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  text-align: center;
}

.progress-bar[b-mqtbpvyzp9]
{
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
  height: 4px;
  margin-bottom: var(--space-3);
  overflow: hidden;
}

.progress-fill[b-mqtbpvyzp9]
{
  animation: progressMove-b-mqtbpvyzp9 1.5s ease-in-out infinite;
  background: linear-gradient(90deg, var(--color-primary-500), var(--color-purple-500));
  border-radius: var(--radius-full);
  height: 100%;
  width: 30%;
}

@keyframes progressMove-b-mqtbpvyzp9
{
  0%
  {
    transform: translateX(-100%);
    width: 30%;
  }

  50%
  {
    width: 60%;
  }

  100%
  {
    transform: translateX(400%);
    width: 30%;
  }
}

.loading-text[b-mqtbpvyzp9]
{
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

/* ═════════════════════════════════════════════════════════════════
   📱 RESPONSIVE DESIGN
   ═════════════════════════════════════════════════════════════════ */

@media
(max-width: 575px)
{
  .register-page[b-mqtbpvyzp9]
  {
    align-items: flex-start;
    padding: var(--space-3);
  }

  .register-container[b-mqtbpvyzp9]
  {
    max-width: 100%;
  }

  .register-card[b-mqtbpvyzp9]
  {
    border-radius: var(--radius-2xl);
    padding: var(--space-6) var(--space-4);
  }

  .header-icon[b-mqtbpvyzp9]
  {
    height: 56px;
    width: 56px;
  }

  .header-icon[b-mqtbpvyzp9]  .rzi
  {
    font-size: 1.5rem;
  }

  .register-title[b-mqtbpvyzp9]
  {
    font-size: var(--font-size-xl);
  }

  .register-subtitle[b-mqtbpvyzp9]
  {
    font-size: var(--font-size-xs);
  }

  [b-mqtbpvyzp9] .form-input
  {
    font-size: var(--font-size-sm) !important;
    height: 44px !important;
  }

  .register-button[b-mqtbpvyzp9]
  {
    height: 48px;
  }

  .cancel-button[b-mqtbpvyzp9]
  {
    height: 40px;
  }
}

/* ═════════════════════════════════════════════════════════════════
   🌙 DARK MODE
   ═════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .register-page[b-mqtbpvyzp9]
{
  background: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-gray-950) 50%, var(--color-gray-900) 100%);
}

[data-theme="dark"] .register-page[b-mqtbpvyzp9]::before
{
  background: radial-gradient(ellipse 80% 60% at 10% 40%, rgba(var(--color-primary-500-rgb), 0.15) 0%, transparent 70%), radial-gradient(ellipse 60% 50% at 90% 20%, rgba(var(--color-purple-500-rgb), 0.1) 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 50% 90%, rgba(var(--color-primary-400-rgb), 0.12) 0%, transparent 60%);
}

[data-theme="dark"] .register-card[b-mqtbpvyzp9]
{
  background: rgba(var(--color-gray-800-rgb), 0.9);
  border-color: rgba(var(--color-gray-600-rgb), 0.3);
  box-shadow: 0 20px 40px rgba(var(--color-black-rgb), 0.4), 0 8px 16px rgba(var(--color-black-rgb), 0.3), inset 0 1px 0 rgba(var(--color-gray-600-rgb), 0.2);
}

[data-theme="dark"] .header-icon[b-mqtbpvyzp9]
{
  background: linear-gradient(135deg, var(--color-primary-400) 0%, var(--color-purple-400) 100%);
  box-shadow: 0 8px 16px rgba(var(--color-primary-400-rgb), 0.25), 0 4px 8px rgba(var(--color-black-rgb), 0.2);
}

[data-theme="dark"] .register-title[b-mqtbpvyzp9]
{
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(135deg, var(--color-primary-400) 0%, var(--color-purple-400) 100%);
  background-clip: text;
}

[data-theme="dark"] .register-subtitle[b-mqtbpvyzp9]
{
  color: var(--color-gray-400);
}

[data-theme="dark"] .form-label[b-mqtbpvyzp9]
{
  color: var(--color-gray-300);
}

[data-theme="dark"][b-mqtbpvyzp9]  .form-input
{
  background: var(--color-gray-900) !important;
  border-color: var(--color-gray-600) !important;
  color: var(--color-gray-100) !important;
}

[data-theme="dark"][b-mqtbpvyzp9]  .form-input:hover:not(:disabled)
{
  border-color: var(--color-gray-500) !important;
}

[data-theme="dark"][b-mqtbpvyzp9]  .form-input:focus
{
  border-color: var(--color-primary-400) !important;
  box-shadow: 0 0 0 4px rgba(var(--color-primary-400-rgb), 0.15) !important;
}

[data-theme="dark"][b-mqtbpvyzp9]  .form-input:disabled
{
  background: var(--color-gray-800) !important;
  color: var(--color-gray-500) !important;
}

[data-theme="dark"][b-mqtbpvyzp9]  .form-input::placeholder
{
  color: var(--color-gray-500) !important;
}

[data-theme="dark"] .error-alert[b-mqtbpvyzp9]
{
  background: linear-gradient(135deg, rgba(var(--color-error-500-rgb), 0.15) 0%, rgba(var(--color-error-600-rgb), 0.1) 100%);
  border-color: rgba(var(--color-error-500-rgb), 0.3);
}

[data-theme="dark"] .error-text[b-mqtbpvyzp9]
{
  color: var(--color-error-400);
}

[data-theme="dark"] .cancel-button[b-mqtbpvyzp9]
{
  border-color: var(--color-gray-600);
  color: var(--color-gray-400);
}

[data-theme="dark"] .cancel-button:hover:not(:disabled)[b-mqtbpvyzp9]
{
  background: var(--color-gray-700);
  border-color: var(--color-gray-500);
  color: var(--color-gray-300);
}

[data-theme="dark"] .loading-info[b-mqtbpvyzp9]
{
  border-top-color: var(--color-gray-700);
}

[data-theme="dark"] .progress-bar[b-mqtbpvyzp9]
{
  background: var(--color-gray-700);
}

[data-theme="dark"] .loading-text[b-mqtbpvyzp9]
{
  color: var(--color-gray-400);
}

/* ═════════════════════════════════════════════════════════════════
   ♿ ACCESSIBILITY
   ═════════════════════════════════════════════════════════════════ */

@media
(prefers-reduced-motion: reduce)
{
  .register-card[b-mqtbpvyzp9],
  .register-button[b-mqtbpvyzp9],
  .cancel-button[b-mqtbpvyzp9],
  .loading-spinner[b-mqtbpvyzp9],
  .progress-fill[b-mqtbpvyzp9]
  {
    animation: none !important;
    transition: none !important;
  }

  .register-button:hover:not(:disabled)[b-mqtbpvyzp9]
  {
    transform: none;
  }
}

/* Focus visible for keyboard navigation */

.register-button:focus-visible[b-mqtbpvyzp9],
.cancel-button:focus-visible[b-mqtbpvyzp9]
{
  outline: 3px solid var(--color-primary-500);
  outline-offset: 2px;
}

[data-theme="dark"] .register-button:focus-visible[b-mqtbpvyzp9],
[data-theme="dark"] .cancel-button:focus-visible[b-mqtbpvyzp9]
{
  outline-color: var(--color-primary-400);
}

/* ═════════════════════════════════════════════════════════════════
   📊 TOKEN USAGE SUMMARY
   ═════════════════════════════════════════════════════════════════ */

/*
✅ TOKENS USED:
- Spacing: var(--space-*)
- Colors: var(--color-*, --theme-*)
- Typography: var(--font-size-*, --font-weight-*, --line-height-*)
- Radius: var(--radius-*)
- Shadows: Custom with RGB tokens
- Transitions: var(--transition-*)
- Easing: var(--ease-out-quad)

🎯 DESIGN CONSISTENCY:
- Matches Login page styling
- Glassmorphism card effect
- Gradient backgrounds
- Animated entry
- Dark mode support
- Mobile responsive
- Accessible focus states

📊 MIGRATION STATUS: 100% TOKEN-BASED ✅
*/
/* /Pages/Sweeping/SweepingMap.razor.rz.scp.css */
/* ── Harita alanı ────────────────────────────────────────────── */

.sweeping-map-canvas[b-5s7ihbqjh4] {
  width: 100%;
  height: 100%;
  min-height: 520px;
}

/* ── Bağlantı durumu ────────────────────────────────────────── */

.sweeping-map-connection-bar[b-5s7ihbqjh4] {
  display: flex;
  justify-content: flex-end;
  padding-bottom: var(--space-1, 0.25rem);
}

.sweeping-map-connection[b-5s7ihbqjh4] {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full, 999px);
  padding: 0.2rem 0.6rem;
  font-size: var(--font-size-xs, 0.72rem);
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.2;
  border: 1px solid transparent;
  white-space: nowrap;
}

.sweeping-map-connection.is-online[b-5s7ihbqjh4] {
  color: var(--color-success-700, #1f7a3f);
  background: rgba(40, 167, 69, 0.12);
  border-color: rgba(40, 167, 69, 0.25);
}

.sweeping-map-connection.is-offline[b-5s7ihbqjh4] {
  color: var(--color-warning-700, #9a6500);
  background: rgba(255, 193, 7, 0.16);
  border-color: rgba(255, 193, 7, 0.3);
}

/* ── Lejant ─────────────────────────────────────────────────── */

.sweeping-map-legend[b-5s7ihbqjh4] {
  display: grid;
  gap: var(--space-2, 0.42rem);
  font-size: var(--font-size-sm, 0.83rem);
}

.sweeping-map-legend__item[b-5s7ihbqjh4] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
}

.sweeping-map-legend__chip[b-5s7ihbqjh4] {
  width: 0.82rem;
  height: 0.82rem;
  border-radius: var(--radius-sm, 0.26rem);
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.sweeping-map-legend__chip.is-complete[b-5s7ihbqjh4]      { background: #28a745; }
.sweeping-map-legend__chip.is-progress-high[b-5s7ihbqjh4] { background: #ffc107; }
.sweeping-map-legend__chip.is-progress-mid[b-5s7ihbqjh4]  { background: #fd7e14; }
.sweeping-map-legend__chip.is-progress-low[b-5s7ihbqjh4]  { background: #dc3545; }
.sweeping-map-legend__chip.is-none[b-5s7ihbqjh4]          { background: #adb5bd; }

/* ── Hata mesajı ────────────────────────────────────────────── */

.sweeping-map-error[b-5s7ihbqjh4] {
  border: 1px solid rgba(220, 53, 69, 0.35);
  background: rgba(220, 53, 69, 0.1);
  color: var(--color-danger-700, #842029);
  border-radius: var(--radius-md, 0.6rem);
  padding: var(--space-2, 0.6rem) var(--space-3, 0.7rem);
  font-size: var(--font-size-sm, 0.84rem);
}

/* ── Sokak kartı ────────────────────────────────────────────── */

.sweeping-map-street-card[b-5s7ihbqjh4] {
  display: grid;
  gap: var(--space-2, 0.45rem);
}

.sweeping-map-street-card__title[b-5s7ihbqjh4] {
  font-size: var(--font-size-base, 0.98rem);
}

.sweeping-map-street-card__detail[b-5s7ihbqjh4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
  font-size: var(--font-size-sm, 0.82rem);
}

/* ── İlerleme çubuğu ────────────────────────────────────────── */

.sweeping-map-progress[b-5s7ihbqjh4] {
  width: 100%;
  height: 0.45rem;
  border-radius: var(--radius-full, 999px);
  background: rgba(127, 127, 127, 0.2);
  overflow: hidden;
}

.sweeping-map-progress__bar[b-5s7ihbqjh4] {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
  transition: width 220ms ease-in-out;
}

/* ── Boş durum ──────────────────────────────────────────────── */

.sweeping-map-empty-state[b-5s7ihbqjh4] {
  position: absolute;
  bottom: var(--space-4, 1rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-primary, #fff);
  border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.1));
  border-radius: var(--radius-lg, 0.6rem);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15));
  font-size: var(--font-size-base, 0.9rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--theme-text-secondary, var(--rz-text-secondary-color));
  text-align: center;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  max-width: 90%;
  pointer-events: none;
}
/* /Pages/TrackChiefPage.razor.rz.scp.css */

.trackchief-summary[b-9dix3c6l6a]
{
    padding: var(--space-6);
    background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-primary-100) 100%);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--color-primary-600);
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.summary-text[b-9dix3c6l6a]
{
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-800);
    font-size: var(--font-size-2xl);
    line-height: 1.2;
}

@media (max-width: 768px)
{
    .trackchief-summary[b-9dix3c6l6a]
    {
        padding: var(--space-4);
    }

    .summary-text[b-9dix3c6l6a]
    {
        font-size: var(--font-size-xl);
    }
}

[data-theme="dark"] .trackchief-summary[b-9dix3c6l6a]
{
    background: linear-gradient(135deg, var(--color-primary-900) 0%, var(--color-primary-800) 100%);
    border-left-color: var(--color-primary-400);
}

[data-theme="dark"] .summary-text[b-9dix3c6l6a]
{
    color: var(--color-primary-100);
}
/* /Pages/UserModuleAssignment.razor.rz.scp.css */
/* UserModuleAssignment.razor.css
 * Merkezi token sistemine uyumlu responsive tasarım
 * GroupClaimAssignment ile aynı yapı
 * ============================================= */

.assignment-content[b-w2rimodcbn] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* === ASSIGNMENT ROW (3 Columns Layout) === */
.assignment-row[b-w2rimodcbn] {
    flex: 1;
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2);
    min-height: 0;
    overflow: hidden;
}

/* === CLAIM COLUMNS === */
.claim-column[b-w2rimodcbn] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    max-width: calc(50% - 30px);
    background: var(--surface-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    border: 1px solid var(--color-gray-300);
    box-shadow: var(--shadow-sm);
}

/* === CONTROL COLUMN (Center Buttons) === */
.control-column[b-w2rimodcbn] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.control-buttons[b-w2rimodcbn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.move-button[b-w2rimodcbn] {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: var(--radius-md) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%) !important;
    border: none !important;
    box-shadow: var(--shadow-sm) !important;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast) !important;
    color: var(--color-white) !important;
}

.move-button:hover:not(:disabled)[b-w2rimodcbn] {
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
}

.move-button:disabled[b-w2rimodcbn] {
    background: var(--color-gray-200) !important;
    color: var(--color-gray-400) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

.move-button[b-w2rimodcbn]  .rzi {
    font-size: var(--font-size-base);
}

/* === SECTION HEADER === */
.section-header[b-w2rimodcbn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-gray-200);
    flex-shrink: 0;
}

.section-title-wrapper[b-w2rimodcbn] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    flex: 1;
}

.section-icon[b-w2rimodcbn] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    flex-shrink: 0;
}

.section-icon--available[b-w2rimodcbn] {
    background: rgba(var(--color-primary-500-rgb), 0.1);
    color: var(--color-primary-600);
}

.section-icon--assigned[b-w2rimodcbn] {
    background: rgba(var(--color-success-500-rgb), 0.1);
    color: var(--color-success-600);
}

.section-title[b-w2rimodcbn] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--theme-text);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.count-badge[b-w2rimodcbn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 var(--space-1-5);
    background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
    color: var(--color-white);
    border-radius: var(--radius-full);
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
}

.count-badge--success[b-w2rimodcbn] {
    background: linear-gradient(135deg, var(--color-success-500) 0%, var(--color-success-600) 100%);
}

/* === FILTER ROW (Bulk Actions + Search side by side) === */
.filter-row[b-w2rimodcbn] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    flex-shrink: 0;
}

/* === SEARCH CONTAINER === */
.search-container[b-w2rimodcbn] {
    flex: 1;
    min-width: 0;
}

.search-wrapper[b-w2rimodcbn] {
    position: relative;
    display: flex;
    align-items: center;
    height: 32px;
    background: var(--surface-primary);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    overflow: hidden;
}

.search-wrapper:hover[b-w2rimodcbn] {
    border-color: var(--color-gray-400);
}

.search-wrapper:focus-within[b-w2rimodcbn] {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-500-rgb), 0.1);
}

.search-icon[b-w2rimodcbn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 100%;
    color: var(--color-gray-400);
    background: var(--color-gray-50);
    border-right: 1px solid var(--color-gray-200);
    flex-shrink: 0;
}

.search-icon[b-w2rimodcbn]  .rzi {
    font-size: 0.875rem;
}

.search-wrapper:focus-within .search-icon[b-w2rimodcbn] {
    color: var(--color-primary-500);
    background: rgba(var(--color-primary-500-rgb), 0.05);
    border-color: rgba(var(--color-primary-500-rgb), 0.2);
}

.search-input[b-w2rimodcbn] {
    flex: 1 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 var(--space-3) !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: var(--font-size-sm) !important;
    background: transparent !important;
    color: var(--theme-text) !important;
}

.search-input:focus[b-w2rimodcbn] {
    outline: none !important;
    box-shadow: none !important;
}

.search-input[b-w2rimodcbn]::placeholder {
    color: var(--color-gray-400);
    font-size: var(--font-size-sm);
}

/* === BULK ACTIONS === */
.bulk-actions[b-w2rimodcbn] {
    display: flex;
    flex-shrink: 0;
}

.bulk-action-btn[b-w2rimodcbn] {
    height: 32px !important;
    padding: 0 var(--space-3) !important;
    background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--font-size-xs) !important;
    font-weight: var(--font-weight-semibold) !important;
    color: var(--color-white) !important;
    transition: all var(--transition-fast) !important;
    white-space: nowrap !important;
    box-shadow: var(--shadow-xs) !important;
}

.bulk-action-btn:hover:not(:disabled)[b-w2rimodcbn] {
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-sm) !important;
    background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%) !important;
}

/* === CLAIM GRID === */
.claim-grid-container[b-w2rimodcbn] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
}

.claim-list[b-w2rimodcbn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-1);
}

.claim-item[b-w2rimodcbn] {
    display: flex;
    align-items: center;
    padding: var(--space-1-5) var(--space-2);
    background: var(--surface-secondary);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.claim-item:hover[b-w2rimodcbn] {
    background: rgba(var(--color-primary-500-rgb), 0.05);
    border-color: rgba(var(--color-primary-500-rgb), 0.15);
}

.claim-item.selected[b-w2rimodcbn] {
    background: rgba(var(--color-primary-500-rgb), 0.1);
    border-color: var(--color-primary-300);
}

.claim-checkbox[b-w2rimodcbn] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-width: 0;
}

.claim-checkbox[b-w2rimodcbn]  .rz-chkbox {
    flex-shrink: 0;
}

.claim-name[b-w2rimodcbn] {
    flex: 1;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    color: var(--theme-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* === SAVE SECTION === */
.save-section[b-w2rimodcbn] {
    display: flex;
    justify-content: flex-end;
    padding: var(--space-2) var(--space-3);
    background: var(--surface-secondary);
    border-top: 1px solid var(--theme-border);
    flex-shrink: 0;
}

.save-button[b-w2rimodcbn] {
    min-width: 140px !important;
    height: 36px !important;
    font-weight: var(--font-weight-semibold) !important;
}

/* === EMPTY STATE === */
.empty-state[b-w2rimodcbn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    text-align: center;
    flex: 1;
}

.empty-state--large[b-w2rimodcbn] {
    padding: var(--space-8);
}

.empty-state__icon[b-w2rimodcbn] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-secondary);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-3);
    color: var(--color-gray-400);
}

.empty-state__icon[b-w2rimodcbn]  .rzi {
    font-size: 1.25rem;
}

.empty-state__title[b-w2rimodcbn] {
    margin: 0 0 var(--space-1) 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--theme-text);
}

.empty-state__text[b-w2rimodcbn] {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--theme-text-secondary);
    max-width: 200px;
}

/* === LOADING STATE === */
.loading-container[b-w2rimodcbn] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
}

.loading-content[b-w2rimodcbn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.loading-text[b-w2rimodcbn] {
    font-size: var(--font-size-sm);
    color: var(--theme-text-secondary);
    margin: 0;
}

/* === RESPONSIVE - MOBILE (Stack Layout) === */
@media (max-width: 900px) {
    .assignment-row[b-w2rimodcbn] {
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-3);
        overflow-y: auto;
    }

    .claim-column[b-w2rimodcbn] {
        flex: 0 0 auto;
        max-width: 100%;
        min-height: 250px;
        padding: var(--space-3);
    }

    .section-icon[b-w2rimodcbn] {
        width: 28px;
        height: 28px;
    }

    .section-title[b-w2rimodcbn] {
        font-size: var(--font-size-sm);
    }

    .count-badge[b-w2rimodcbn] {
        min-width: 26px;
        height: 22px;
        font-size: var(--font-size-xs);
    }

    .control-buttons[b-w2rimodcbn] {
        flex-direction: row;
        gap: var(--space-3);
    }

    .move-button[b-w2rimodcbn] {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
    }

    .move-button[b-w2rimodcbn]  .rzi {
        transform: rotate(90deg);
    }

    .filter-row[b-w2rimodcbn] {
        gap: var(--space-2);
    }

    .bulk-action-btn[b-w2rimodcbn] {
        height: 36px !important;
        padding: 0 var(--space-3) !important;
        font-size: var(--font-size-xs) !important;
    }

    .search-wrapper[b-w2rimodcbn] {
        height: 36px;
    }

    .search-icon[b-w2rimodcbn] {
        width: 36px;
    }

    .search-input[b-w2rimodcbn] {
        font-size: var(--font-size-sm) !important;
    }

    .claim-name[b-w2rimodcbn] {
        font-size: var(--font-size-sm);
    }

    .save-section[b-w2rimodcbn] {
        justify-content: center;
        padding: var(--space-3);
    }

    .save-button[b-w2rimodcbn] {
        width: 100% !important;
        max-width: 320px !important;
    }
}

/* === RESPONSIVE - SMALL MOBILE === */
@media (max-width: 576px) {
    .assignment-row[b-w2rimodcbn] {
        padding: var(--space-2);
    }

    .claim-column[b-w2rimodcbn] {
        padding: var(--space-2);
        min-height: 220px;
    }

    .filter-row[b-w2rimodcbn] {
        gap: var(--space-1-5);
    }

    .empty-state[b-w2rimodcbn] {
        padding: var(--space-3);
    }

    .empty-state__icon[b-w2rimodcbn] {
        width: 40px;
        height: 40px;
    }
}

/* === DARK MODE === */
[data-theme='dark'] .claim-column[b-w2rimodcbn] {
    background: rgba(var(--color-gray-800-rgb), 0.5);
    border-color: var(--theme-border);
}

[data-theme='dark'] .claim-grid-container[b-w2rimodcbn] {
    background: var(--surface-tertiary);
}

[data-theme='dark'] .claim-item[b-w2rimodcbn] {
    background: rgba(var(--color-gray-700-rgb), 0.3);
}

[data-theme='dark'] .claim-item:hover[b-w2rimodcbn] {
    background: rgba(var(--color-primary-500-rgb), 0.15);
}

[data-theme='dark'] .claim-item.selected[b-w2rimodcbn] {
    background: rgba(var(--color-primary-500-rgb), 0.2);
    border-color: var(--color-primary-500);
}

[data-theme='dark'] .section-icon--available[b-w2rimodcbn] {
    background: rgba(var(--color-primary-400-rgb), 0.15);
    color: var(--color-primary-400);
}

[data-theme='dark'] .section-icon--assigned[b-w2rimodcbn] {
    background: rgba(var(--color-success-400-rgb), 0.15);
    color: var(--color-success-400);
}

[data-theme='dark'] .search-wrapper[b-w2rimodcbn] {
    background: var(--surface-tertiary);
    border-color: var(--color-gray-600);
}

[data-theme='dark'] .search-wrapper:hover[b-w2rimodcbn] {
    border-color: var(--color-gray-500);
}

[data-theme='dark'] .search-wrapper:focus-within[b-w2rimodcbn] {
    border-color: var(--color-primary-400);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-400-rgb), 0.15);
}

[data-theme='dark'] .search-icon[b-w2rimodcbn] {
    background: rgba(var(--color-gray-600-rgb), 0.5);
    border-color: var(--color-gray-600);
    color: var(--color-gray-400);
}

[data-theme='dark'] .search-wrapper:focus-within .search-icon[b-w2rimodcbn] {
    background: rgba(var(--color-primary-500-rgb), 0.1);
    border-color: rgba(var(--color-primary-400-rgb), 0.3);
    color: var(--color-primary-400);
}

[data-theme='dark'] .empty-state__icon[b-w2rimodcbn] {
    background: rgba(var(--color-gray-600-rgb), 0.3);
}

[data-theme='dark'] .move-button:disabled[b-w2rimodcbn] {
    background: var(--color-gray-700) !important;
    color: var(--color-gray-500) !important;
}

/* === ACCESSIBILITY === */
@media (prefers-reduced-motion: reduce) {
    .claim-item[b-w2rimodcbn],
    .move-button[b-w2rimodcbn],
    .search-wrapper[b-w2rimodcbn],
    .bulk-action-btn[b-w2rimodcbn] {
        transition: none !important;
    }
}

/* Touch device optimization */
@media (pointer: coarse) {
    .claim-item[b-w2rimodcbn] {
        min-height: 40px;
        padding: var(--space-2);
    }

    .move-button[b-w2rimodcbn] {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .bulk-action-btn[b-w2rimodcbn] {
        min-height: 36px !important;
    }
}
/* /Pages/VehicleContainerTypeAssignment.razor.rz.scp.css */
/* === ASSIGNMENT CONTAINER === */
.assignment-container[b-su4ah9fbh4] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.assignment-card[b-su4ah9fbh4] {
    border: none;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: white;
    overflow: hidden;
    border-radius: 8px;
}

.assignment-content[b-su4ah9fbh4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.assignment-row[b-su4ah9fbh4] {
    flex: 1;
    display: flex;
    gap: 1rem;
    padding: 1rem;
    min-height: 0;
    overflow: hidden;
}

/* === ASSIGNMENT COLUMNS === */
.assignment-column[b-su4ah9fbh4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.control-column[b-su4ah9fbh4] {
    flex: 0 0 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* === SECTION HEADERS === */
.section-header[b-su4ah9fbh4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.section-title-wrapper[b-su4ah9fbh4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-icon[b-su4ah9fbh4] {
    width: 20px;
    height: 20px;
    background: #fef3c7;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d97706;
    font-size: 0.75rem;
}

.section-title[b-su4ah9fbh4] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.count-badge[b-su4ah9fbh4] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(245, 158, 11, 0.2);
}

/* === SEARCH CONTAINER === */
.search-container[b-su4ah9fbh4] {
    margin-bottom: 0.75rem;
    position: relative;
    flex-shrink: 0;
}

.search-wrapper[b-su4ah9fbh4] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-su4ah9fbh4] {
    position: absolute;
    left: 0.75rem;
    color: #9ca3af;
    font-size: 0.875rem;
    z-index: 1;
}

.search-input[b-su4ah9fbh4] {
    width: 100% !important;
    padding-left: 2.25rem !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    height: 32px !important;
    font-size: 0.8125rem !important;
    transition: all 0.2s ease !important;
    background: #f9fafb !important;
}

.search-input:focus[b-su4ah9fbh4] {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.1) !important;
    background: white !important;
}

/* === BULK ACTIONS === */
.bulk-actions[b-su4ah9fbh4] {
    margin-bottom: 0.75rem;
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.bulk-action-btn[b-su4ah9fbh4] {
    background: #f3f4f6 !important;
    border: 1px solid #d1d5db !important;
    color: #374151 !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 4px !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    transition: all 0.15s ease !important;
    min-height: 28px !important;
}

.bulk-action-btn:hover:not(:disabled)[b-su4ah9fbh4] {
    background: #e5e7eb !important;
    border-color: #9ca3af !important;
    color: #111827 !important;
    transform: translateY(-1px) !important;
}

/* === ASSIGNMENT GRID === */
.assignment-grid-container[b-su4ah9fbh4] {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    flex: 1;
    overflow-y: auto;
    background: #f9fafb;
    min-height: 0;
}

.assignment-list[b-su4ah9fbh4] {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.assignment-item[b-su4ah9fbh4] {
    background: white;
    border-radius: 6px;
    padding: 0.5rem;
    border: 1px solid #e5e7eb;
    transition: all 0.15s ease;
    cursor: pointer;
}

.assignment-item:hover[b-su4ah9fbh4] {
    background: #fefbf2;
    border-color: #f59e0b;
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.1);
}

.assignment-item.selected[b-su4ah9fbh4] {
    background: #fef3c7;
    border-color: #f59e0b;
}

.assignment-checkbox[b-su4ah9fbh4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.container-name[b-su4ah9fbh4] {
    font-weight: 500;
    color: #111827;
    flex: 1;
    font-size: 0.8125rem;
}

/* === CONTROL BUTTONS === */
.control-buttons[b-su4ah9fbh4] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}

.move-button[b-su4ah9fbh4] {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3) !important;
    transition: all 0.15s ease !important;
}

.move-button:hover:not(:disabled)[b-su4ah9fbh4] {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.4) !important;
}

.move-button:disabled[b-su4ah9fbh4] {
    background: #e5e7eb !important;
    box-shadow: none !important;
    transform: none !important;
}

.move-button .rz-icon[b-su4ah9fbh4] {
    font-size: 1rem;
}

/* === SAVE SECTION === */
.save-section[b-su4ah9fbh4] {
    background: #f8fafc;
    padding: 0.75rem 1rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}

.save-button[b-su4ah9fbh4] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none !important;
    color: white !important;
    padding: 0.5rem 1.5rem !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3) !important;
    transition: all 0.15s ease !important;
    min-height: 36px !important;
}

.save-button:hover:not(:disabled)[b-su4ah9fbh4] {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4) !important;
}

/* === NO DATA STATE === */
.no-data[b-su4ah9fbh4] {
    text-align: center;
    padding: 2rem 1rem;
    color: #6b7280;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.no-data-icon[b-su4ah9fbh4] {
    width: 48px;
    height: 48px;
    background: #f3f4f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    color: #9ca3af;
    font-size: 1.25rem;
}

.no-data h3[b-su4ah9fbh4] {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #4b5563;
}

.no-data p[b-su4ah9fbh4] {
    margin: 0;
    font-size: 0.8125rem;
    color: #6b7280;
}

/* === LOADING SPINNER === */
.loading-container[b-su4ah9fbh4] {
    text-align: center;
    padding: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.loading-content[b-su4ah9fbh4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.loading-text[b-su4ah9fbh4] {
    color: #6b7280;
    font-size: 0.875rem;
}

/* === MOBILE RESPONSIVE === */
@media (max-width: 768px) {
    .assignment-row[b-su4ah9fbh4] {
        flex-direction: column !important;
        gap: 0.75rem !important;
        padding: 0.75rem !important;
    }

    .control-column[b-su4ah9fbh4] {
        flex-direction: row !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
    }

    .control-buttons[b-su4ah9fbh4] {
        flex-direction: row !important;
        gap: 0.75rem !important;
    }

    .assignment-grid-container[b-su4ah9fbh4] {
        min-height: 200px !important;
    }

    .move-button[b-su4ah9fbh4] {
        width: 32px !important;
        height: 32px !important;
    }

    .save-section[b-su4ah9fbh4] {
        padding: 0.5rem !important;
        text-align: center !important;
    }

    .save-button[b-su4ah9fbh4] {
        width: 100% !important;
    }

    .bulk-actions[b-su4ah9fbh4] {
        flex-direction: column !important;
        gap: 0.25rem !important;
    }

    .bulk-action-btn[b-su4ah9fbh4] {
        width: 100% !important;
    }
}

@media (max-width: 576px) {
    .assignment-grid-container[b-su4ah9fbh4] {
        min-height: 150px !important;
    }

    .assignment-item[b-su4ah9fbh4] {
        padding: 0.375rem !important;
    }

    .container-name[b-su4ah9fbh4] {
        font-size: 0.75rem !important;
    }
}

/* =====================================
     🌙 DARK MODE
     ===================================== */

[data-theme="dark"] .assignment-card[b-su4ah9fbh4] {
    background: rgba(30, 41, 59, 0.7);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .section-header[b-su4ah9fbh4] {
    border-bottom-color: rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .section-icon[b-su4ah9fbh4] {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

[data-theme="dark"] .section-title[b-su4ah9fbh4] {
    color: #f1f5f9;
}

[data-theme="dark"] .count-badge[b-su4ah9fbh4] {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

[data-theme="dark"] .search-input[b-su4ah9fbh4] {
    background: rgba(15, 23, 42, 0.5) !important;
    border-color: rgba(71, 85, 105, 0.5) !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .search-input[b-su4ah9fbh4]::placeholder {
    color: #64748b;
}

[data-theme="dark"] .search-input:focus[b-su4ah9fbh4] {
    background: rgba(15, 23, 42, 0.7) !important;
    border-color: #fbbf24 !important;
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.1) !important;
}

[data-theme="dark"] .search-icon[b-su4ah9fbh4] {
    color: #64748b;
}

[data-theme="dark"] .bulk-action-btn[b-su4ah9fbh4] {
    background: rgba(30, 41, 59, 0.5) !important;
    border-color: rgba(71, 85, 105, 0.5) !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .bulk-action-btn:hover:not(:disabled)[b-su4ah9fbh4] {
    background: rgba(51, 65, 85, 0.7) !important;
    border-color: #64748b !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .assignment-grid-container[b-su4ah9fbh4] {
    border-color: rgba(71, 85, 105, 0.5);
    background: rgba(15, 23, 42, 0.3);
}

[data-theme="dark"] .assignment-item[b-su4ah9fbh4] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .assignment-item:hover[b-su4ah9fbh4] {
    background: rgba(68, 64, 60, 0.4);
    border-color: #fbbf24;
    box-shadow: 0 1px 3px rgba(251, 191, 36, 0.2);
}

[data-theme="dark"] .assignment-item.selected[b-su4ah9fbh4] {
    background: rgba(251, 191, 36, 0.15);
    border-color: #fbbf24;
}

[data-theme="dark"] .container-name[b-su4ah9fbh4] {
    color: #f1f5f9;
}

[data-theme="dark"] .move-button[b-su4ah9fbh4] {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
}

[data-theme="dark"] .move-button:hover:not(:disabled)[b-su4ah9fbh4] {
    box-shadow: 0 4px 8px rgba(251, 191, 36, 0.5) !important;
}

[data-theme="dark"] .move-button:disabled[b-su4ah9fbh4] {
    background: rgba(71, 85, 105, 0.3) !important;
}

[data-theme="dark"] .save-section[b-su4ah9fbh4] {
    background: rgba(15, 23, 42, 0.5);
    border-top-color: rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .no-data[b-su4ah9fbh4] {
    color: #94a3b8;
}

[data-theme="dark"] .no-data-icon[b-su4ah9fbh4] {
    background: rgba(30, 41, 59, 0.5);
    color: #64748b;
}

[data-theme="dark"] .no-data h3[b-su4ah9fbh4] {
    color: #cbd5e1;
}

[data-theme="dark"] .no-data p[b-su4ah9fbh4] {
    color: #94a3b8;
}

[data-theme="dark"] .loading-text[b-su4ah9fbh4] {
    color: #94a3b8;
}