/* ==========================================================================
   Utility Classes & Layout Fallbacks
   ========================================================================== */
.hidden, [hidden] {
  display: none !important;
}

.border-sakai { border-color: var(--sakai-border, #334155) !important; }
.bg-container { background-color: var(--sakai-bg-container, #1e293b) !important; }
.bg-layout { background-color: var(--sakai-bg-layout, #0f172a) !important; }
.bg-spotlight { background-color: var(--sakai-bg-spotlight, #334155) !important; }
.text-main { color: var(--sakai-text-main, #f8fafc) !important; }
.text-secondary { color: var(--sakai-text-secondary, #cbd5e1) !important; }
.text-tertiary { color: var(--sakai-text-tertiary, #94a3b8) !important; }

.space-y-1 > * + * { margin-top: 0.25rem !important; }
.space-y-1\.5 > * + * { margin-top: 0.375rem !important; }
.space-y-2 > * + * { margin-top: 0.5rem !important; }
.space-y-3 > * + * { margin-top: 0.75rem !important; }
.space-y-4 > * + * { margin-top: 1rem !important; }
.space-y-6 > * + * { margin-top: 1.5rem !important; }

.gap-1 { gap: 0.25rem !important; }
.gap-1\.5 { gap: 0.375rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-2\.5 { gap: 0.625rem !important; }
.gap-3 { gap: 0.75rem !important; }
.gap-4 { gap: 1rem !important; }
.gap-6 { gap: 1.5rem !important; }

.font-kanit {
  font-family: 'Kanit', system-ui, -apple-system, sans-serif !important;
}

/* Real-time Status Badge */
.realtime-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  white-space: nowrap;
}
.realtime-status-badge.connected {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  color: #22c55e;
}
.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: currentColor;
}
.realtime-status-badge.connected .pulse-dot {
  animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
  70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Profile Avatar Button & Image Display */
.profile-avatar-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: var(--sakai-bg-spotlight, #334155);
  border: 2px solid var(--sakai-primary, #1677ff);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  position: relative;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.profile-avatar-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(22, 119, 255, 0.35);
}
.profile-avatar-btn img, .avatar-preview-box img, .avatar-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Hide on mobile utility */
@media (max-width: 992px) {
  .hide-mobile {
    display: none !important;
  }
}

/* ==========================================================================
   Topbar, Sidebar, and Component Custom Styles
   ========================================================================== */
.sakai-topbar {
  background-color: var(--sakai-topbar-bg, #1e293b);
  border-bottom: 1px solid var(--sakai-border, #334155);
  position: sticky;
  top: 0;
  z-index: 90;
  height: 64px;
  min-height: 64px;
  max-height: 64px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
}
.topbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0 1rem;
  box-sizing: border-box;
}
.page-title {
  color: var(--sakai-text-main);
  line-height: 1.2;
}

#main-content {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .page-title {
    font-size: 0.82rem;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .quick-search-wrapper {
    max-width: 130px;
  }
}

.hamburger-btn {
  background: var(--sakai-bg-spotlight, #334155);
  border: 1px solid var(--sakai-border, #475569);
  color: var(--sakai-text-main, #ffffff);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.2s ease;
}
.hamburger-btn:hover {
  background: var(--sakai-primary, #1677ff);
  color: #fff;
}
.quick-search-wrapper {
  position: relative;
  flex: 1;
  max-width: 480px;
  margin: 0 1rem;
}
.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  pointer-events: none;
  opacity: 0.7;
}
.search-input {
  width: 100%;
  padding: 0.45rem 2.2rem 0.45rem 2.4rem;
  background: var(--sakai-bg-layout, #0f172a);
  border: 1px solid var(--sakai-border, #334155);
  border-radius: 20px;
  color: var(--sakai-text-main, #f8fafc);
  font-size: 0.85rem;
  outline: none;
  transition: all 0.2s;
}
.search-input:focus {
  border-color: var(--sakai-primary, #1677ff);
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.2);
}
.search-shortcut {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  background: var(--sakai-border, #334155);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--sakai-text-tertiary, #94a3b8);
}
.clear-search {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--sakai-text-tertiary);
  cursor: pointer;
}

/* Sidebar Layout */
.app-layout {
  display: flex;
  min-height: 100vh;
  background: var(--sakai-bg-layout, #f4f6f9);
}
.sakai-sidebar {
  width: 260px;
  min-width: 260px;
  height: 100vh;
  position: sticky;
  top: 0;
  left: 0;
  background: var(--sakai-menu-bg, #0f172a);
  border-right: 1px solid var(--sakai-border, #334155);
  display: flex;
  flex-direction: column;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1050;
  user-select: none;
  overflow-x: hidden;
}
.sakai-sidebar.collapsed {
  width: 68px;
  min-width: 68px;
}
.sakai-sidebar.collapsed .sidebar-header {
  padding: 0 0.5rem;
  justify-content: center;
}
.sakai-sidebar.collapsed .brand-group {
  display: none;
}
.sakai-sidebar.collapsed .collapse-btn {
  margin: 0 auto;
  width: 32px;
  height: 32px;
}
.sakai-sidebar.collapsed #collapse-icon {
  display: inline-block;
  transform: rotate(180deg);
}
#collapse-icon {
  display: inline-block;
  transition: transform 0.25s ease;
}
.sidebar-header {
  height: 64px;
  min-height: 64px;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--sakai-border, #334155);
  background: var(--sakai-topbar-bg, #1e293b);
}
.brand-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}
.brand-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--sakai-text-main, #f8fafc);
  margin: 0;
}
.brand-subtitle {
  font-size: 0.7rem;
  color: var(--sakai-text-secondary, #94a3b8);
}
.collapse-btn {
  background: var(--sakai-bg-spotlight, #334155);
  border: 1px solid var(--sakai-border, #475569);
  color: var(--sakai-text-main, #ffffff);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.75rem;
}
.sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.main-menu {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--sakai-radius, 10px);
  background: transparent;
  border: 1px solid transparent;
  color: var(--sakai-text-secondary, #94a3b8);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  text-align: left;
}
.main-menu:hover {
  background: var(--sakai-bg-spotlight, #334155);
  color: var(--sakai-text-main, #ffffff);
}
.main-menu.active {
  background: var(--sakai-primary-bg, rgba(22, 119, 255, 0.15)) !important;
  color: var(--sakai-primary, #1677ff) !important;
  font-weight: 600;
}
.sakai-sidebar.collapsed .main-menu {
  justify-content: center;
  padding: 0.65rem 0;
}
.sakai-sidebar.collapsed .menu-label,
.sakai-sidebar.collapsed .brand-info,
.sakai-sidebar.collapsed .menu-section-label,
.sakai-sidebar.collapsed .submenu,
.sakai-sidebar.collapsed .chevron-icon,
.sakai-sidebar.collapsed .profile-info,
.sakai-sidebar.collapsed .nav-badge:not(.mini) {
  display: none !important;
}
.sakai-sidebar.collapsed .footer-settings {
  display: none !important;
}
.sakai-sidebar.collapsed .sidebar-footer {
  padding: 0.75rem 0 !important;
  align-items: center !important;
  justify-content: center !important;
}
.sakai-sidebar.collapsed .profile-card {
  justify-content: center !important;
  padding: 0.5rem 0 !important;
  width: 100% !important;
}

/* Sidebar Nav Badges */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  padding: 2.5px 7px;
  border-radius: 9999px;
  min-width: 20px;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
}
.nav-badge.badge-primary {
  background: rgba(22, 119, 255, 0.18);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}
.nav-badge.badge-info {
  background: rgba(14, 165, 233, 0.18);
  color: #38bdf8;
  border: 1px solid rgba(14, 165, 233, 0.35);
}
.nav-badge.badge-purple {
  background: rgba(168, 85, 247, 0.18);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.35);
}
.nav-badge.badge-success {
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.35);
}
.nav-badge.badge-warning {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}
.nav-badge.badge-danger {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
}
.nav-badge.badge-secondary {
  background: rgba(100, 116, 139, 0.22);
  color: #94a3b8;
  border: 1px solid rgba(100, 116, 139, 0.35);
}

.menu-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sakai-text-tertiary, #64748b);
  padding: 0.5rem 0.75rem 0.25rem;
}
.submenu {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.25rem;
  margin-left: 1.25rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--sakai-border, #334155);
}
.sub-menu-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.65rem;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--sakai-text-secondary, #94a3b8);
  font-size: 0.8rem;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.sub-menu-btn:hover {
  background: var(--sakai-bg-spotlight, #334155);
  color: var(--sakai-text-main);
}
.sub-menu-btn.active {
  background: var(--sakai-primary-bg, rgba(22, 119, 255, 0.15));
  color: var(--sakai-primary, #1677ff);
  font-weight: 600;
}
.sidebar-footer {
  padding: 0.75rem 0.5rem;
  border-top: 1px solid var(--sakai-border, #334155);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.footer-settings {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0.25rem;
}
.setting-btn {
  background: transparent;
  border: none;
  color: var(--sakai-text-secondary);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.setting-btn:hover {
  background: var(--sakai-bg-spotlight);
}
.profile-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.profile-card:hover {
  background: var(--sakai-bg-spotlight);
}
.avatar-wrapper {
  position: relative;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  max-width: 36px;
  max-height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sakai-primary-bg, rgba(22, 119, 255, 0.1));
  font-size: 1.1rem;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
}
#sidebar-avatar,
.avatar-container {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}
#sidebar-avatar img,
.avatar-wrapper img,
.avatar-emoji img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
  flex-shrink: 0 !important;
}
.status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #10b981;
  border: 1.5px solid var(--sakai-menu-bg, #1e293b);
  z-index: 2;
}
.profile-info {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.user-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sakai-text-main);
  line-height: 1.2;
}
.user-role {
  font-size: 0.7rem;
  color: var(--sakai-text-tertiary);
}

/* Searchable Select (Requested by user) */
.searchable-select-wrapper {
  position: relative;
  width: 100%;
}
.searchable-select-container {
  position: relative;
  width: 100%;
  user-select: none;
}
.searchable-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--sakai-bg-container, #ffffff);
  border: 1px solid var(--sakai-border-secondary, #d0d5dd);
  border-radius: var(--sakai-radius-sm, 8px);
  padding: 0.5rem 0.85rem;
  font-size: 0.88rem;
  color: var(--sakai-text-main, #1d2939);
  cursor: pointer;
  min-height: 40px;
}
.searchable-select-trigger:hover {
  border-color: var(--sakai-primary-hover, #4096ff);
}
.searchable-select-container.open .searchable-select-trigger {
  border-color: var(--sakai-primary, #1677ff);
  box-shadow: 0 0 0 3px var(--sakai-primary-bg, #e6f4ff);
}
.clear-select-btn {
  background: transparent;
  border: none;
  color: var(--sakai-text-tertiary);
  cursor: pointer;
  font-size: 11px;
}
.searchable-select-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  min-width: 260px;
  z-index: 999999;
  background: var(--sakai-bg-elevated, #ffffff);
  border: 1px solid var(--sakai-border, #eaecf0);
  border-radius: var(--sakai-radius, 10px);
  box-shadow: var(--sakai-shadow-dialog);
  padding: 0.5rem;
}
.searchable-select-container.drop-up .searchable-select-panel {
  top: auto !important;
  bottom: calc(100% + 4px) !important;
  box-shadow: 0 -12px 30px -5px rgba(0, 0, 0, 0.4), 0 -4px 12px rgba(0, 0, 0, 0.25) !important;
}
.search-box-wrapper {
  margin-bottom: 0.5rem;
}
.search-box-wrapper input {
  width: 100%;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--sakai-border);
  border-radius: 6px;
  font-size: 0.82rem;
  outline: none;
  background: var(--sakai-bg-spotlight);
  color: var(--sakai-text-main);
}
.options-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 220px;
  overflow-y: auto;
}
.option-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--sakai-text-main);
  transition: background 0.15s;
}
.option-item:hover,
.option-item.highlighted {
  background: var(--sakai-bg-spotlight, #f1f5f9);
}
.option-item.selected {
  background: var(--sakai-primary-bg, #e6f4ff);
  color: var(--sakai-primary, #1677ff);
  font-weight: 600;
}
.opt-sublabel {
  font-size: 0.72rem;
  color: var(--sakai-text-tertiary, #667085);
}
.no-options {
  padding: 0.75rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--sakai-text-tertiary, #667085);
}
.options-list::-webkit-scrollbar {
  width: 6px;
}
.options-list::-webkit-scrollbar-track {
  background: transparent;
}
.options-list::-webkit-scrollbar-thumb {
  background: var(--sakai-border, #d0d5dd);
  border-radius: 4px;
}

/* Quick Search Location Selector inside Search Bar Pill */
.search-input-group .searchable-select-wrapper {
  width: auto;
  min-width: 120px;
  max-width: 145px;
  flex-shrink: 0;
  border-right: 1px solid var(--sakai-border, #334155);
}
.search-input-group .searchable-select-container {
  width: 100%;
}
.search-input-group .searchable-select-trigger {
  border: none;
  background: transparent;
  min-height: 36px;
  height: 36px;
  padding: 0 0.5rem 0 0.75rem;
  font-size: 11px;
  font-weight: 600;
  border-radius: 9999px 0 0 9999px;
  color: var(--sakai-text-main, #f8fafc);
}
.search-input-group .searchable-select-trigger:hover {
  background: rgba(255, 255, 255, 0.05);
}
.search-input-group .searchable-select-container.open .searchable-select-trigger {
  box-shadow: none;
  background: rgba(255, 255, 255, 0.08);
}
.search-input-group .searchable-select-panel {
  min-width: 190px;
  top: calc(100% + 6px);
  left: 0;
  border-radius: 12px;
}
.search-input-group .searchable-select-panel .option-item {
  font-size: 11px;
  padding: 6px 10px;
}

/* Global Search High-Contrast White Theme (Per User Request) */
.search-input-group {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
.search-input-group:focus-within {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
}
.search-input-group input#global-search-input {
  background: transparent !important;
  color: #0f172a !important;
  font-weight: 600 !important;
}
.search-input-group input#global-search-input::placeholder {
  color: #64748b !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}
.search-input-group .search-icon {
  color: #64748b !important;
}
.search-input-group #global-search-shortcut {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border-color: #cbd5e1 !important;
}
.search-input-group #global-search-location {
  background-color: #f8fafc !important;
  color: #1e293b !important;
  border-right: 1px solid #cbd5e1 !important;
}
.search-input-group #global-search-location option {
  background-color: #ffffff !important;
  color: #1e293b !important;
}
.search-input-group .searchable-select-trigger {
  color: #1e293b !important;
  background-color: #f8fafc !important;
}

/* Global Search Dark Mode Styling */
[data-mode="dark"] .search-input-group {
  background-color: #071A12 !important;
  border: 1px solid #1A3E2F !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}
[data-mode="dark"] .search-input-group:focus-within {
  border-color: #10B981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25) !important;
}
[data-mode="dark"] .search-input-group input#global-search-input {
  background: transparent !important;
  color: #F1F7F4 !important;
  font-weight: 600 !important;
}
[data-mode="dark"] .search-input-group input#global-search-input::placeholder {
  color: #6B8B7D !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}
[data-mode="dark"] .search-input-group .search-icon {
  color: #95B4A5 !important;
}
[data-mode="dark"] .search-input-group #global-search-shortcut {
  background: #0D261C !important;
  color: #95B4A5 !important;
  border-color: #1A3E2F !important;
}
[data-mode="dark"] .search-input-group #global-search-location {
  background-color: #0D261C !important;
  color: #F1F7F4 !important;
  border-right: 1px solid #1A3E2F !important;
}
[data-mode="dark"] .search-input-group #global-search-location option {
  background-color: #0D261C !important;
  color: #F1F7F4 !important;
}
[data-mode="dark"] .search-input-group .searchable-select-trigger {
  color: #F1F7F4 !important;
  background-color: #0D261C !important;
}

/* Quick Logout & Action Button Polish */
#btn-quick-logout {
  transition: all 0.2s ease;
  background-color: #ef4444 !important;
  color: #ffffff !important;
  border: none !important;
}
#btn-quick-logout:hover {
  background-color: #dc2626 !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4) !important;
  transform: translateY(-1px);
}
#sidebar-logout-btn {
  transition: all 0.2s ease;
  border-radius: 8px;
}
#sidebar-logout-btn:hover {
  background-color: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
}

/* Toast System */
#toast-container {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 9999999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
.toast-msg {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  background: var(--sakai-bg-container, #ffffff);
  color: var(--sakai-text-main, #1d2939);
  border-left: 4px solid var(--sakai-primary);
  min-width: 280px;
  max-width: 400px;
  animation: toastSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0.85rem;
}
.toast-msg.success { border-color: #10b981; }
.toast-msg.error { border-color: #ef4444; }
.toast-msg.warning { border-color: #f59e0b; }
@keyframes toastSlideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: none !important;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-overlay.open {
  display: flex !important;
}
.modal-overlay.stacked-modal {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}
.modal-content-card {
  background: var(--sakai-bg-container, #ffffff);
  border: 1px solid var(--sakai-border, #eaecf0);
  border-radius: var(--sakai-radius, 12px);
  box-shadow: var(--sakai-shadow-dialog);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: modalScaleIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-content-card.modal-lg {
  max-width: 900px;
}
@keyframes modalScaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--sakai-border);
}
.modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  color: var(--sakai-text-main);
}
.modal-close-btn {
  background: transparent;
  border: none;
  color: var(--sakai-text-tertiary);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.modal-close-btn:hover {
  background: var(--sakai-error-bg);
  color: var(--sakai-error);
}
.modal-body {
  padding: 1.25rem;
  overflow-y: auto;
  flex: 1;
  scroll-behavior: smooth;
}
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--sakai-border);
  background: var(--sakai-bg-spotlight);
  border-bottom-left-radius: var(--sakai-radius);
  border-bottom-right-radius: var(--sakai-radius);
}

/* Footer layout */
.sakai-footer {
  background: var(--sakai-bg-container, #ffffff);
  border-top: 1px solid var(--sakai-border, #eaecf0);
  padding: 0.85rem 1.5rem;
  font-size: 0.8rem;
  color: var(--sakai-text-tertiary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ==========================================================================
   Comprehensive Multi-Device Responsive System (OOP Design Tokens)
   Tier 1: Large Desktops & Ultra-wide (>= 1440px / 1920px+)
   Tier 2: Small Desktops & Laptops (1025px - 1439px)
   Tier 3: Tablets: Large, Medium, Small (769px - 1024px)
   Tier 4: Smartphones: Android & iPhone (<= 768px, <= 480px, <= 360px)
   ========================================================================== */

/* Safe Area Insets (iPhone Notch, Dynamic Island, Home Indicator) */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}

.sakai-topbar {
  padding-left: max(0.5rem, env(safe-area-inset-left));
  padding-right: max(0.5rem, env(safe-area-inset-right));
}

.app-footer {
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

/* --------------------------------------------------------------------------
   Tier 1: Large Desktops & Ultra-wide Displays (>= 1440px)
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  .main-content {
    max-width: 1720px !important;
    padding: 2rem !important;
  }
  .metric-cards-5-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }
}

@media (min-width: 1920px) {
  .main-content {
    max-width: 1880px !important;
  }
}

/* --------------------------------------------------------------------------
   Tier 2 & 3: Tablets & Laptops (min-width: 769px and max-width: 1024px)
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
  .main-content {
    padding: 1rem !important;
  }
  .metric-cards-5-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }
  .quick-search-wrapper {
    max-width: 340px !important;
  }
}

/* --------------------------------------------------------------------------
   Tier 3 & 4: Mobile & Tablet Off-Canvas Navigation (max-width: 992px)
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  /* Native App Style Off-Canvas Drawer */
  .sakai-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    width: 290px !important;
    max-width: 85vw !important;
    min-width: unset !important;
    z-index: 1060 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
    padding-top: max(0px, env(safe-area-inset-top)) !important;
    padding-bottom: max(0px, env(safe-area-inset-bottom)) !important;
    padding-left: max(0px, env(safe-area-inset-left)) !important;
  }

  .sakai-sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 14px 0 40px -5px rgba(0, 0, 0, 0.75) !important;
  }

  /* When on mobile drawer, always expand menu items even if .collapsed class was saved */
  .sakai-sidebar.collapsed {
    width: 290px !important;
    max-width: 85vw !important;
  }
  .sakai-sidebar.collapsed .brand-group {
    display: flex !important;
  }
  .sakai-sidebar.collapsed .sidebar-header {
    justify-content: space-between !important;
    padding: 0 1rem !important;
  }
  .sakai-sidebar.collapsed .collapse-btn {
    display: none !important;
  }
  .sakai-sidebar.collapsed .menu-label,
  .sakai-sidebar.collapsed .brand-info,
  .sakai-sidebar.collapsed .menu-section-label,
  .sakai-sidebar.collapsed .submenu,
  .sakai-sidebar.collapsed .chevron-icon,
  .sakai-sidebar.collapsed .profile-info {
    display: flex !important;
  }
  .sakai-sidebar.collapsed .main-menu {
    justify-content: flex-start !important;
    padding: 0.75rem 0.9rem !important;
  }
  .sakai-sidebar.collapsed .footer-settings {
    display: flex !important;
  }
  .sakai-sidebar.collapsed .sidebar-footer {
    padding: 0.75rem 0.5rem !important;
    align-items: stretch !important;
  }
  .sakai-sidebar.collapsed .profile-card {
    justify-content: flex-start !important;
    padding: 0.5rem 0.75rem !important;
    width: auto !important;
  }

  /* Mobile Backdrop Overlay */
  .sidebar-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.7) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 1055 !important;
    transition: opacity 0.25s ease !important;
    display: block !important;
  }

  .sidebar-overlay.hidden {
    display: none !important;
  }

  /* Lock body scroll when mobile drawer is open */
  body.sidebar-open-locked {
    overflow: hidden !important;
    touch-action: none !important;
  }

  /* Mobile Drawer Header Buttons */
  .mobile-drawer-close-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--sakai-bg-spotlight, #334155);
    border: 1px solid var(--sakai-border, #475569);
    color: var(--sakai-text-main, #ffffff);
    cursor: pointer;
    transition: all 0.2s;
  }
  .mobile-drawer-close-btn:hover,
  .mobile-drawer-close-btn:active {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
  }

  .collapse-btn {
    display: none !important;
  }

  /* Metric cards on tablet */
  .metric-cards-5-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.65rem !important;
  }
}

/* Desktop Only Rules (> 992px) */
@media (min-width: 993px) {
  .mobile-drawer-close-btn {
    display: none !important;
  }
  .sidebar-overlay {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Tier 4: Smartphones (Android & iPhone <= 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Prevent iOS Safari automatic page zoom on input focus */
  input[type="text"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Topbar Mobile Ergonomics */
  .sakai-topbar {
    height: 58px !important;
    min-height: 58px !important;
  }

  /* Quick search bar hidden by default on mobile, expandable via toggle */
  .quick-search-wrapper {
    display: none;
  }
  .quick-search-wrapper.mobile-active {
    display: block !important;
    position: absolute !important;
    left: 8px !important;
    right: 8px !important;
    top: 56px !important;
    z-index: 120 !important;
    margin: 0 !important;
    max-width: unset !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
  }

  /* Modals on Mobile */
  .modal-overlay {
    padding: 0.5rem !important;
    align-items: flex-end !important;
  }
  .modal-content-card {
    width: 100% !important;
    max-width: 98vw !important;
    max-height: 92vh !important;
    max-height: 92dvh !important;
    margin: 0 auto !important;
    border-radius: 1rem 1rem 0.5rem 0.5rem !important;
  }
  .modal-body {
    padding: 0.85rem !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .modal-footer {
    padding: 0.75rem !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  /* Table Horizontal Scrolling on Touch Screens */
  .table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: var(--sakai-radius-sm, 8px);
    position: relative;
  }
  .table-responsive > table:not(.stock-cards-mode),
  .table-responsive > .p-datatable:not(.stock-cards-mode) {
    min-width: 780px !important;
  }
  .table-responsive.cards-wrapper {
    overflow-x: visible !important;
  }

  /* Buttons & Action Bars on Mobile */
  .action-buttons-spacing {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  /* Footer on Mobile */
  .sakai-footer {
    flex-direction: column !important;
    text-align: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem 0.5rem !important;
  }
}

/* --------------------------------------------------------------------------
   Small Smartphones (iPhone SE, Galaxy A-series <= 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  /* 1-column large cards for readable stats on small phones */
  .metric-cards-5-grid {
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
  }

  .page-title {
    font-size: 0.85rem !important;
    max-width: 160px !important;
  }

  .main-content {
    padding: 0.75rem 0.5rem !important;
  }

  /* Action Buttons in return/stock pages */
  #btn-export-excel-selected,
  #btn-print-selected,
  #btn-revert-selected,
  #btn-return-confirm {
    font-size: 0.7rem !important;
    padding: 0.4rem 0.6rem !important;
  }
}

/* Large Screens (min-width: 1440px) */
@media (min-width: 1440px) {
  .container-fluid {
    max-width: 1680px;
  }
}

/* ==========================================================================
   Refine Auth Modal Design System (Login View)
   ========================================================================== */
.refine-login-page {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background-color: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  user-select: none;
  overflow-y: auto;
  animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-mode="light"] .refine-login-page {
  background-color: rgba(241, 245, 249, 0.85);
}

/* Background Ambient Glow Orbs */
.glow-orb {
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(100px);
}
.orb-top-left {
  top: -140px;
  left: -140px;
  background: rgba(79, 70, 229, 0.15);
}
.orb-bottom-right {
  bottom: -140px;
  right: -140px;
  background: rgba(14, 165, 233, 0.15);
}

/* MAIN REFINE MODAL CARD CONTAINER */
.refine-modal-card {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 440px;
  margin: auto;
  background: var(--sakai-bg-container, #1e293b);
  border: 1px solid var(--sakai-border, #334155);
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05);
  padding: 1.75rem 2rem 1.5rem;
  overflow: hidden;
}

[data-mode="light"] .refine-modal-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.03);
}

/* Top Accent Bar */
.refine-accent-bar {
  height: 4px;
  margin: -1.75rem -2rem 1.5rem -2rem;
  background: linear-gradient(90deg, #1677ff 0%, #7a5af8 50%, #06b6d4 100%);
}

/* Refine Header Section */
.refine-header {
  text-align: center;
  margin-bottom: 1.25rem;
}
.refine-logo-badge {
  display: inline-flex;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(79, 70, 229, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}
.refine-app-title {
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--sakai-text-main, #f8fafc);
  letter-spacing: 0.025em;
  text-transform: uppercase;
  margin: 0 0 0.35rem 0;
  line-height: 1.2;
}
[data-mode="light"] .refine-app-title {
  color: #0f172a;
}
.refine-app-subtitle {
  font-size: 0.8rem;
  color: var(--sakai-text-tertiary, #94a3b8);
  margin: 0;
  line-height: 1.45;
}

/* Form Layout */
.refine-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.field-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--sakai-text-secondary, #cbd5e1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
[data-mode="light"] .field-label {
  color: #334155;
}
.required-star {
  color: #f43f5e;
  margin-left: 2px;
}
.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.input-icon {
  position: absolute;
  left: 12px;
  font-size: 0.95rem;
  opacity: 0.75;
  pointer-events: none;
}
.refine-input {
  width: 100%;
  height: 42px;
  padding: 0.5rem 2.6rem 0.5rem 2.5rem;
  background-color: var(--sakai-bg-spotlight, #0f172a);
  border: 1px solid var(--sakai-border, #334155);
  border-radius: 10px;
  color: var(--sakai-text-main, #f8fafc);
  font-size: 0.88rem;
  outline: none;
  transition: all 0.2s ease;
}
[data-mode="light"] .refine-input {
  background-color: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}
.refine-input:focus {
  border-color: var(--sakai-primary, #1677ff);
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.2);
}
.eye-toggle-btn {
  position: absolute;
  right: 10px;
  background: transparent;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  padding: 4px;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.eye-toggle-btn:hover {
  opacity: 1;
}

.form-row-helpers {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  margin-top: 0.15rem;
}
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  color: var(--sakai-text-tertiary, #94a3b8);
}
.refine-checkbox {
  accent-color: var(--sakai-primary, #1677ff);
  cursor: pointer;
}
.default-pass-badge {
  color: var(--sakai-text-tertiary, #94a3b8);
}
.default-pass-badge code {
  background: rgba(99, 102, 241, 0.12);
  color: var(--sakai-primary, #1677ff);
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 700;
}

.refine-error-alert {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  background: rgba(244, 63, 94, 0.12);
  border: 1px solid rgba(244, 63, 94, 0.3);
  color: #fb7185;
  font-size: 0.78rem;
  font-weight: 500;
}

.form-submit-row {
  margin-top: 0.25rem;
}
.refine-btn-primary {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1677ff 0%, #0958d9 100%);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(22, 119, 255, 0.35);
  transition: all 0.2s ease;
}
.refine-btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(22, 119, 255, 0.45);
}
.btn-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Quick Demo Switcher Section */
.quick-demo-section {
  margin-top: 0.5rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--sakai-border, #334155);
}
[data-mode="light"] .quick-demo-section {
  border-top-color: #e2e8f0;
}
.quick-demo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.quick-demo-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--sakai-text-secondary, #cbd5e1);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
[data-mode="light"] .quick-demo-title {
  color: #475569;
}
.quick-demo-badge {
  font-size: 0.68rem;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.15);
  color: var(--sakai-primary, #1677ff);
  font-weight: 600;
}
.quick-demo-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 180px;
  overflow-y: auto;
  padding-right: 4px;
}
.refine-custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}
.refine-custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 4px;
}
.quick-demo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  background: var(--sakai-bg-spotlight, #0f172a);
  border: 1px solid var(--sakai-border, #334155);
  cursor: pointer;
  transition: all 0.15s ease;
}
[data-mode="light"] .quick-demo-item {
  background: #f8fafc;
  border-color: #e2e8f0;
}
.quick-demo-item:hover {
  border-color: var(--sakai-primary, #1677ff);
  background: rgba(22, 119, 255, 0.08);
  transform: translateX(2px);
}
.demo-user-info {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}
.user-avatar-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(99, 102, 241, 0.15);
  font-size: 0.85rem;
  flex-shrink: 0;
}
.demo-user-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.user-name-text {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--sakai-text-main, #f8fafc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-mode="light"] .user-name-text {
  color: #0f172a;
}
.user-sub-text {
  font-size: 0.68rem;
  color: var(--sakai-text-tertiary, #94a3b8);
}
.role-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.role-owner { background: rgba(234, 179, 8, 0.15); color: #eab308; border: 1px solid rgba(234, 179, 8, 0.3); }
.role-admin { background: rgba(59, 130, 246, 0.15); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.3); }
.role-tech { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }
.role-user { background: rgba(148, 163, 184, 0.15); color: #94a3b8; border: 1px solid rgba(148, 163, 184, 0.3); }

.refine-footer {
  text-align: center;
  font-size: 0.7rem;
  color: var(--sakai-text-tertiary, #94a3b8);
  margin-top: 1rem;
}

/* ==========================================================================
   Dashboard Metric Cards & Layout Styles (1-to-1 Parity with Vue)
   ========================================================================== */
.metric-cards-4-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (max-width: 1200px) {
  .metric-cards-4-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .metric-cards-4-grid {
    grid-template-columns: 1fr;
  }
}

.metric-cards-5-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (max-width: 1200px) {
  .metric-cards-5-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .metric-cards-5-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .metric-cards-5-grid {
    grid-template-columns: 1fr;
  }
}

.metric-card {
  padding: 1.15rem 1.25rem 1rem;
  cursor: pointer;
  background: var(--sakai-bg-container, #1e293b);
  border: 1px solid var(--sakai-border, #334155);
  border-radius: var(--sakai-radius, 12px);
  box-shadow: var(--sakai-shadow-card);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
}
.metric-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.metric-title {
  font-size: 0.75rem;
  color: var(--sakai-text-secondary, #cbd5e1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: block;
  margin-bottom: 0.25rem;
}
.metric-value {
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.15;
}
.metric-icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.metric-sub {
  display: block;
  font-size: 0.72rem;
  color: var(--sakai-text-tertiary, #94a3b8);
}

.bg-success-glow { background: rgba(18, 183, 106, 0.12); }
.bg-warning-glow { background: rgba(247, 144, 9, 0.12); }
.bg-danger-glow { background: rgba(240, 68, 56, 0.12); }
.bg-purple-glow { background: rgba(122, 90, 248, 0.12); }
.bg-info-glow { background: rgba(22, 119, 255, 0.12); }

.border-success { border-top: 4px solid var(--sakai-success, #12b76a) !important; }
.border-warning { border-top: 4px solid var(--sakai-warning, #f79009) !important; }
.border-danger { border-top: 4px solid var(--sakai-error, #f04438) !important; }
.border-purple { border-top: 4px solid var(--sakai-purple, #7a5af8) !important; }
.border-info { border-top: 4px solid var(--sakai-info, #1677ff) !important; }

.text-success { color: var(--sakai-success-text, #34d399); }
.text-warning { color: var(--sakai-warning-text, #fbbf24); }
.text-danger { color: var(--sakai-error, #fb7185); }
.text-purple { color: #c084fc; }
.text-info { color: #38bdf8; }

/* Category 3-Column Grid */
.category-3cols-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 768px) {
  .category-3cols-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .category-3cols-grid {
    grid-template-columns: 1fr;
  }
}

.cat-stat-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background-color: var(--sakai-bg-spotlight, #0f172a);
  border: 1px solid var(--sakai-border, #334155);
  border-radius: var(--sakai-radius-sm, 8px);
  cursor: pointer;
  transition: all 0.2s ease;
}
.cat-stat-card:hover {
  border-color: var(--sakai-primary, #1677ff);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}
.cat-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}
.cat-info {
  flex: 1;
  min-width: 0;
}

/* Technician Avatar & User Details */
.tech-onhand-user {
  display: flex !important;
  align-items: center !important;
  column-gap: 0.65rem !important;
}
.tech-avatar-circle {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  background: var(--sakai-bg-spotlight, #0f172a);
  border: 2px solid var(--sakai-primary, #1677ff);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
.tech-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tech-avatar-emoji {
  font-size: 1.1rem;
}
.tech-nickname-sub {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--sakai-text-main, #f8fafc);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* Movement Timeline */
.movement-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  padding-left: 18px;
}
.movement-timeline::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--sakai-border, #334155);
}
.timeline-item {
  position: relative;
}
.timeline-marker {
  position: absolute;
  left: -18px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sakai-primary, #1677ff);
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.25);
}
.timeline-content {
  background: var(--sakai-bg-spotlight, #0f172a);
  padding: 10px 12px;
  border-radius: var(--sakai-radius-sm, 8px);
  border: 1px solid var(--sakai-border, #334155);
}

/* ==========================================================================
   Header & Navbar Authentic Styles (1-to-1 Parity with Navbar.vue)
   ========================================================================== */
.realtime-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.realtime-status-badge.connected {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.35);
  color: #22c55e;
}

[data-mode="light"] .realtime-status-badge.connected {
  background: #ecfdf3;
  border-color: #a6f4c5;
  color: #027a48;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: currentColor;
}

.realtime-status-badge.connected .pulse-dot {
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

/* Profile Avatar Trigger Button */
.profile-avatar-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sakai-bg-spotlight, #0f172a);
  border: 2px solid var(--sakai-primary, #1677ff);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.profile-avatar-btn:hover {
  transform: scale(1.06);
  border-color: #4096ff;
  box-shadow: 0 0 10px rgba(22, 119, 255, 0.4);
}

.avatar-img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}

.avatar-emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  font-size: 1.15rem;
  line-height: 1;
}

/* Global Search Dropdown Overlay */
.global-search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 440px;
  max-width: 90vw;
  background-color: var(--sakai-topbar-bg, #1e293b);
  border: 1px solid var(--sakai-border, #334155);
  border-radius: 12px;
  z-index: 9999;
  overflow: hidden;
  box-shadow: 0 20px 35px -5px rgba(0, 0, 0, 0.4), 0 8px 12px -6px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(16px);
}

.global-search-dropdown.hidden {
  display: none !important;
}

[data-mode="light"] .global-search-dropdown {
  background-color: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 20px 35px -5px rgba(15, 23, 42, 0.15);
}

.search-dropdown-header {
  background: var(--sakai-bg-spotlight, #0f172a);
  border-color: var(--sakai-border, #334155);
}

[data-mode="light"] .search-dropdown-header {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.close-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: var(--sakai-text-secondary, #94a3b8);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  flex-shrink: 0;
}

.close-search-btn:hover {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.45);
  color: #f87171;
  transform: scale(1.04);
}

.summary-badge-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  background: var(--sakai-bg-container, #1e293b);
  border: 1px solid var(--sakai-border, #334155);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

[data-mode="light"] .summary-badge-btn {
  background: #ffffff;
  border-color: #cbd5e1;
}

.summary-badge-btn:hover {
  background: rgba(22, 119, 255, 0.12);
  border-color: var(--sakai-primary, #1677ff);
  transform: translateY(-1px);
}

.summary-badge-btn.active {
  background: rgba(22, 119, 255, 0.25);
  border-color: var(--sakai-primary, #1677ff);
  box-shadow: 0 0 0 1px rgba(22, 119, 255, 0.3);
}

[data-mode="light"] .summary-badge-btn.active {
  background: #e6f4ff;
  border-color: #1677ff;
}

.badge-icon {
  font-size: 1rem;
}

.badge-label {
  font-size: 0.65rem;
  color: var(--sakai-text-tertiary, #94a3b8);
  margin-top: 2px;
}

.badge-count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--sakai-text-tertiary, #94a3b8);
}

.badge-count.has-count {
  color: var(--sakai-primary, #1677ff);
}

.search-result-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}

[data-mode="light"] .search-result-item {
  border-bottom-color: #f1f5f9;
}

.search-result-item:hover {
  background: rgba(22, 119, 255, 0.08);
}

.job-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 0.68rem;
  font-weight: 600;
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

[data-mode="light"] .job-tag {
  background: #fffaeb;
  color: #b54708;
  border-color: #fedf89;
}

.search-dropdown-footer {
  background: var(--sakai-bg-spotlight, #0f172a);
  border-color: var(--sakai-border, #334155);
}

[data-mode="light"] .search-dropdown-footer {
  background: #f8fafc;
  border-color: #e2e8f0;
}

/* Card Mode-Specific Polish */
[data-mode="light"] .metric-card {
  background: #ffffff;
  border-color: #eaecf0;
  box-shadow: 0 1px 3px 0 rgba(16, 24, 40, 0.05), 0 1px 2px 0 rgba(16, 24, 40, 0.06);
}
[data-mode="light"] .metric-title {
  color: #475467;
}
[data-mode="light"] .text-success { color: #027a48 !important; }
[data-mode="light"] .text-info { color: #1677ff !important; }
[data-mode="light"] .text-purple { color: #7a5af8 !important; }
[data-mode="light"] .text-danger { color: #b42318 !important; }
[data-mode="light"] .text-warning { color: #b54708 !important; }
[data-mode="light"] .bg-success-glow { background: #ecfdf3 !important; }
[data-mode="light"] .bg-info-glow { background: #e6f4ff !important; }
[data-mode="light"] .bg-purple-glow { background: #f4f3ff !important; }
[data-mode="light"] .bg-danger-glow { background: #fef3f2 !important; }
[data-mode="light"] .bg-warning-glow { background: #fffaeb !important; }

[data-mode="dark"] .metric-card {
  background: #1e293b;
  border-color: #334155;
}
[data-mode="dark"] .metric-title {
  color: #cbd5e1;
}
[data-mode="dark"] .text-success { color: #34d399 !important; }
[data-mode="dark"] .text-info { color: #38bdf8 !important; }
[data-mode="dark"] .text-purple { color: #c084fc !important; }
[data-mode="dark"] .text-danger { color: #fb7185 !important; }
[data-mode="dark"] .text-warning { color: #fbbf24 !important; }
[data-mode="dark"] .bg-success-glow { background: rgba(18, 183, 106, 0.16) !important; }
[data-mode="dark"] .bg-info-glow { background: rgba(22, 119, 255, 0.16) !important; }
[data-mode="dark"] .bg-purple-glow { background: rgba(122, 90, 248, 0.16) !important; }
[data-mode="dark"] .bg-danger-glow { background: rgba(240, 68, 56, 0.16) !important; }
[data-mode="dark"] .bg-warning-glow { background: rgba(247, 144, 9, 0.16) !important; }

/* ==========================================================================
   Original Vue Styling: Stock & User & Repair Parity
   ========================================================================== */

/* High-Contrast Vibrant Serial Number Pill Badge */
.sn-vibrant-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 7px;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.18) 0%, rgba(59, 130, 246, 0.18) 100%);
  border: 1.5px solid rgba(6, 182, 212, 0.5);
  color: #06b6d4;
  box-shadow: 0 1px 4px rgba(6, 182, 212, 0.15);
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.sn-vibrant-pill:hover {
  transform: translateY(-1px) scale(1.03);
  border-color: #22d3ee;
  box-shadow: 0 3px 12px rgba(6, 182, 212, 0.35);
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.28) 0%, rgba(59, 130, 246, 0.28) 100%);
}

.sn-vibrant-pill.sn-auto-gen {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.18) 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.5);
  color: #f59e0b;
  box-shadow: 0 1px 4px rgba(245, 158, 11, 0.15);
}

.sn-vibrant-pill.sn-auto-gen:hover {
  border-color: #fbbf24;
  box-shadow: 0 3px 12px rgba(245, 158, 11, 0.35);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(217, 119, 6, 0.28) 100%);
}

.sn-vibrant-pill.sn-auto-gen .sn-prefix {
  background: rgba(245, 158, 11, 0.28);
  color: #fbbf24;
}

.sn-prefix {
  font-size: 0.62rem;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(6, 182, 212, 0.28);
  color: #22d3ee;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sn-text {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Job Tag Subtle */
.job-tag-subtle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #f59e0b;
  cursor: pointer;
  transition: all 0.2s ease;
}

.job-tag-subtle:hover {
  background: rgba(245, 158, 11, 0.22);
  border-color: #f59e0b;
}

/* Job Swap Inline Pair Relation Pill Badge */
.job-swap-relation-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.job-swap-deployed {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18) 0%, rgba(6, 182, 212, 0.18) 100%);
  border-color: rgba(16, 185, 129, 0.5);
  color: #10b981;
}

.job-swap-deployed:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.3) 0%, rgba(6, 182, 212, 0.3) 100%);
  border-color: #10b981;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.35);
  transform: translateY(-1px);
}

.job-swap-returned {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(239, 68, 68, 0.18) 100%);
  border-color: rgba(245, 158, 11, 0.5);
  color: #f59e0b;
}

.job-swap-returned:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(239, 68, 68, 0.3) 100%);
  border-color: #f59e0b;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.35);
  transform: translateY(-1px);
}

.relation-sn {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Stock Fit Table */
.stock-fit-table {
  width: 100%;
  table-layout: fixed;
}

.stock-fit-table th, .stock-fit-table td {
  padding: 0.65rem 0.75rem;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* User Management Table */
.user-mgmt-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.user-mgmt-table th {
  padding: 0.65rem 0.75rem !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  background: var(--sakai-bg-spotlight) !important;
  color: var(--sakai-text-secondary) !important;
  border-bottom: 1px solid var(--sakai-border) !important;
}

.user-mgmt-table td {
  padding: 0.6rem 0.75rem !important;
  font-size: 0.81rem !important;
  vertical-align: middle !important;
  border-bottom: 1px solid var(--sakai-border-secondary, var(--sakai-border)) !important;
}

.table-avatar-img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.perms-badges-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
}

.perms-badges-grid .p-tag-sm {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1.25;
  white-space: nowrap;
}

.symptom-box {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ==========================================================================
   Settings Modal & Theme Studio (Matching original SettingsModal.vue)
   ========================================================================== */
.setting-section {
  background-color: var(--sakai-bg-spotlight, #1e293b);
  border: 1px solid var(--sakai-border, #334155);
  border-radius: var(--sakai-radius, 12px);
  padding: 12px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.setting-section:hover {
  border-color: var(--sakai-primary, #1677ff);
}

.color-swatch-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 4px;
  border-radius: var(--sakai-radius-sm, 8px);
  background: var(--sakai-bg-container, #1e293b);
  border: 1.5px solid var(--sakai-border, #334155);
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}
.color-swatch-btn:hover {
  border-color: var(--swatch-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.color-swatch-btn.active {
  border-color: var(--swatch-color) !important;
  box-shadow: 0 0 0 2px var(--swatch-color) !important;
  background: var(--sakai-primary-bg, rgba(22, 119, 255, 0.14)) !important;
}
.swatch-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  display: inline-block;
  border: 2px solid rgba(255, 255, 255, 0.4);
}
.swatch-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--sakai-text-main, #f8fafc);
  white-space: nowrap;
}

/* Density Compact Mode */
.density-compact .p-datatable th,
.density-compact .p-datatable td {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  font-size: 11px !important;
}

/* ==========================================
   REFINE AUTH MODAL DESIGN SYSTEM
   ========================================== */
.refine-login-page {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background-color: rgba(241, 245, 249, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  user-select: none;
  overflow-y: auto;
  animation: refineFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-mode="dark"] .refine-login-page {
  background-color: rgba(15, 23, 42, 0.92);
}

.glow-orb {
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(100px);
}
.orb-top-left {
  top: -140px;
  left: -140px;
  background: rgba(79, 70, 229, 0.12);
}
.orb-bottom-right {
  bottom: -140px;
  right: -140px;
  background: rgba(14, 165, 233, 0.12);
}

.refine-modal-card {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 430px;
  margin: auto;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
  padding: 1.75rem 2rem 1.5rem;
  overflow: hidden;
}

[data-mode="dark"] .refine-modal-card {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.refine-accent-bar {
  height: 4px;
  margin: -1.75rem -2rem 1.5rem -2rem;
  background: linear-gradient(90deg, #1677ff 0%, #7a5af8 50%, #06b6d4 100%);
}

.refine-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.refine-logo-badge {
  display: inline-flex;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(79, 70, 229, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.25);
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.8);
}

[data-mode="dark"] .refine-logo-badge {
  background: rgba(79, 70, 229, 0.2);
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.refine-app-title {
  font-size: 1.45rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  margin: 0 0 0.4rem 0;
  line-height: 1.2;
}

[data-mode="dark"] .refine-app-title {
  color: #f8fafc;
}

.refine-app-subtitle {
  font-size: 0.8rem;
  color: #64748b;
  margin: 0;
  line-height: 1.45;
}

[data-mode="dark"] .refine-app-subtitle {
  color: #94a3b8;
}

.refine-form {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.field-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

[data-mode="dark"] .field-label {
  color: #cbd5e1;
}

.required-star {
  color: #e11d48;
  font-size: 0.85rem;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 0.85rem;
  font-size: 0.9rem;
  color: #64748b;
  pointer-events: none;
}

.refine-input {
  width: 100%;
  height: 44px;
  padding-left: 2.6rem;
  padding-right: 2.5rem;
  font-size: 0.875rem;
  background-color: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  color: #0f172a;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
}

[data-mode="dark"] .refine-input {
  background-color: #0f172a;
  border-color: #334155;
  color: #f8fafc;
}

.refine-input:focus {
  border-color: #1677ff;
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.15);
  background-color: #ffffff;
}

[data-mode="dark"] .refine-input:focus {
  border-color: #38bdf8;
  background-color: #0f172a;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}

.eye-toggle-btn {
  position: absolute;
  right: 0.75rem;
  background: none;
  border: none;
  color: #64748b;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.25rem;
  transition: color 0.2s;
}

.eye-toggle-btn:hover {
  color: #1677ff;
}

.form-row-helpers {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.4rem;
  font-size: 0.78rem;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #475569;
  cursor: pointer;
}

[data-mode="dark"] .checkbox-label {
  color: #94a3b8;
}

.refine-checkbox {
  width: 16px;
  height: 16px;
  accent-color: #1677ff;
  border-radius: 4px;
}

.default-pass-badge {
  color: #64748b;
  font-size: 0.75rem;
}

.default-pass-badge code {
  padding: 0.15rem 0.4rem;
  background: #f1f5f9;
  color: #1677ff;
  border-radius: 5px;
  font-family: monospace;
  font-size: 0.725rem;
  border: 1px solid #e2e8f0;
}

[data-mode="dark"] .default-pass-badge code {
  background: #0f172a;
  border-color: #334155;
  color: #38bdf8;
}

.refine-error-alert {
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: rgba(244, 63, 94, 0.08);
  border: 1px solid rgba(244, 63, 94, 0.25);
  color: #e11d48;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.form-submit-row {
  margin-top: 0.25rem;
}

.refine-btn-primary {
  width: 100%;
  height: 46px;
  background: linear-gradient(135deg, #1677ff 0%, #3054b9 50%, #4f46e5 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.875rem;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(22, 119, 255, 0.35);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.refine-btn-primary:hover:not(:disabled) {
  box-shadow: 0 6px 22px rgba(22, 119, 255, 0.5);
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.refine-btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

.refine-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Quick Demo Section */
.quick-demo-section {
  margin-top: 0.75rem;
  padding-top: 0.9rem;
  border-top: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

[data-mode="dark"] .quick-demo-section {
  border-top-color: #334155;
}

.quick-demo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.quick-demo-title {
  font-size: 0.725rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}

[data-mode="dark"] .quick-demo-title {
  color: #94a3b8;
}

.quick-demo-badge {
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
  background: #f1f5f9;
  color: #1677ff;
  font-family: monospace;
  border: 1px solid #e2e8f0;
}

[data-mode="dark"] .quick-demo-badge {
  background: #0f172a;
  border-color: #334155;
  color: #38bdf8;
}

.quick-demo-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 170px;
  overflow-y: auto;
  padding-right: 4px;
}

.quick-demo-item {
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  min-height: 46px;
  box-sizing: border-box;
}

[data-mode="dark"] .quick-demo-item {
  background: #0f172a;
  border-color: #334155;
}

.quick-demo-item:hover {
  border-color: rgba(22, 119, 255, 0.4);
  background: rgba(22, 119, 255, 0.06);
}

[data-mode="dark"] .quick-demo-item:hover {
  background: rgba(56, 189, 248, 0.1);
  border-color: #38bdf8;
}

.demo-user-info {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  flex: 1;
}

.user-avatar-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

[data-mode="dark"] .user-avatar-circle {
  background: #1e293b;
  border-color: #475569;
}

.demo-user-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.1rem;
}

.user-name-text {
  font-size: 0.8rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-mode="dark"] .user-name-text {
  color: #f8fafc;
}

.user-sub-text {
  font-size: 0.7rem;
  font-weight: 500;
  color: #64748b;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-mode="dark"] .user-sub-text {
  color: #94a3b8;
}

.role-badge {
  font-size: 0.675rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-family: monospace;
  border: 1px solid transparent;
  flex-shrink: 0;
  white-space: nowrap;
}
.role-owner {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
  border-color: rgba(168, 85, 247, 0.3);
}
.role-admin {
  background: rgba(244, 63, 94, 0.15);
  color: #f43f5e;
  border-color: rgba(244, 63, 94, 0.3);
}
.role-tech {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.3);
}
.role-user {
  background: rgba(14, 165, 233, 0.15);
  color: #0ea5e9;
  border-color: rgba(14, 165, 233, 0.3);
}

.refine-footer {
  font-size: 0.7rem;
  color: #94a3b8;
  font-family: monospace;
  text-align: center;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e2e8f0;
}

[data-mode="dark"] .refine-footer {
  color: #64748b;
  border-top-color: #334155;
}

.refine-custom-scrollbar::-webkit-scrollbar {
  width: 5px;
}
.refine-custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.refine-custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(22, 119, 255, 0.25);
  border-radius: 4px;
}
.refine-custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(22, 119, 255, 0.5);
}

@keyframes refineFadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

/* ==========================================
   PRINT CSS MEDIA QUERY (A4 Document Print)
   ========================================== */
@media print {
  /* Hide all interactive background elements and modal wrappers */
  body * {
    visibility: hidden !important;
  }

  /* Expose only the printable A4 document container */
  #bcr-printable-sheet,
  #bcr-printable-sheet * {
    visibility: visible !important;
  }

  #bcr-printable-sheet {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10mm !important;
    box-shadow: none !important;
    border: none !important;
    background: #ffffff !important;
    color: #000000 !important;
    border-radius: 0 !important;
  }

  #bcr-printable-sheet table,
  #bcr-printable-sheet th,
  #bcr-printable-sheet td {
    border-color: #000000 !important;
    color: #000000 !important;
  }

  .no-print,
  .modal-header,
  .modal-footer,
  .modal-close-btn {
    display: none !important;
  }

  @page {
    size: A4 portrait;
    margin: 10mm;
  }
}

/* ==========================================================================
   Sakai PrimeVue MultiSelect Component (display="chip")
   ========================================================================== */
.p-multiselect {
  display: inline-flex;
  align-items: center;
  position: relative;
  user-select: none;
  width: 100%;
  border: 1px solid var(--sakai-border, #cbd5e1);
  background: var(--sakai-bg-layout, #f8fafc);
  border-radius: var(--sakai-radius-sm, 8px);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  min-height: 38px;
  box-sizing: border-box;
}

[data-mode="dark"] .p-multiselect {
  background: var(--sakai-bg-layout, #0f172a);
  border-color: var(--sakai-border, #334155);
}

.p-multiselect:hover {
  border-color: var(--sakai-primary-hover, #4096ff);
}

.p-multiselect.p-multiselect-open {
  border-color: var(--sakai-primary, #1677ff) !important;
  box-shadow: 0 0 0 3px var(--sakai-primary-bg, rgba(22, 119, 255, 0.18)) !important;
  outline: none;
}

.p-multiselect.p-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.p-multiselect-label-container {
  flex: 1 1 auto;
  overflow: hidden;
  min-width: 0;
  padding: 2px 4px;
}

.p-multiselect-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 2px;
  min-height: 32px;
}

.p-multiselect-placeholder {
  color: var(--sakai-text-tertiary, #94a3b8);
  font-size: 12px;
  padding-left: 6px;
  user-select: none;
  font-weight: normal;
}

/* Chip / Token Styles */
.p-multiselect-token {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--sakai-primary, #1677ff);
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  margin: 1px 0;
  transition: all 0.15s ease;
  user-select: none;
}

.p-multiselect-token.token-purple {
  background: #8b5cf6;
}

.p-multiselect-token.token-rose {
  background: #f43f5e;
}

.p-multiselect-token.token-amber {
  background: #d97706;
}

.p-multiselect-token:hover {
  filter: brightness(1.08);
}

.p-multiselect-token-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  font-size: 9px;
  line-height: 1;
  transition: all 0.15s ease;
}

.p-multiselect-token-icon:hover {
  background: rgba(255, 255, 255, 0.45);
  transform: scale(1.15);
}

.p-multiselect-dropdown {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 100%;
  flex-shrink: 0;
  color: var(--sakai-text-tertiary, #64748b);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.p-multiselect.p-multiselect-open .p-multiselect-dropdown svg {
  transform: rotate(180deg);
  color: var(--sakai-primary, #1677ff);
}

/* MultiSelect Overlay Panel */
.p-multiselect-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  min-width: 260px;
  background: var(--sakai-bg-elevated, #ffffff);
  border: 1px solid var(--sakai-border, #cbd5e1);
  border-radius: var(--sakai-radius, 10px);
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.2), 0 4px 10px -2px rgba(0, 0, 0, 0.1);
  z-index: 999999;
  overflow: hidden;
  animation: p-multiselect-fade 0.15s cubic-bezier(0, 0, 0.2, 1);
}

[data-mode="dark"] .p-multiselect-panel {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 14px 30px -4px rgba(0, 0, 0, 0.5);
}

@keyframes p-multiselect-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.p-multiselect-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--sakai-border, #e2e8f0);
  background: var(--sakai-bg-spotlight, #f8fafc);
}

[data-mode="dark"] .p-multiselect-header {
  background: #0f172a;
  border-color: #334155;
}

.p-multiselect-filter-container {
  position: relative;
  flex: 1;
}

.p-multiselect-filter {
  width: 100%;
  height: 30px;
  padding: 4px 8px 4px 28px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid var(--sakai-border, #cbd5e1);
  background: var(--sakai-bg-layout, #ffffff);
  color: var(--sakai-text-main, #1e293b);
  outline: none;
  transition: border-color 0.2s;
}

[data-mode="dark"] .p-multiselect-filter {
  background: #1e293b;
  border-color: #334155;
  color: #f8fafc;
}

.p-multiselect-filter:focus {
  border-color: var(--sakai-primary, #1677ff);
}

.p-multiselect-filter-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--sakai-text-tertiary, #94a3b8);
  pointer-events: none;
}

.p-multiselect-items-wrapper {
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
}

.p-multiselect-items-wrapper::-webkit-scrollbar {
  width: 5px;
}
.p-multiselect-items-wrapper::-webkit-scrollbar-thumb {
  background: #64748b66;
  border-radius: 4px;
}

.p-multiselect-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--sakai-text-main, #1e293b);
  cursor: pointer;
  transition: background 0.15s ease;
  user-select: none;
}

[data-mode="dark"] .p-multiselect-item {
  color: #f8fafc;
}

.p-multiselect-item:hover {
  background: var(--sakai-bg-spotlight, #f1f5f9);
}

[data-mode="dark"] .p-multiselect-item:hover {
  background: #334155;
}

.p-multiselect-item.p-highlight {
  background: var(--sakai-primary-bg, rgba(22, 119, 255, 0.08));
  color: var(--sakai-primary, #1677ff);
  font-weight: 600;
}

[data-mode="dark"] .p-multiselect-item.p-highlight {
  background: rgba(22, 119, 255, 0.2);
  color: #60a5fa;
}

.p-multiselect-item input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--sakai-primary, #1677ff);
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
}

.p-multiselect-empty {
  padding: 12px;
  text-align: center;
  color: var(--sakai-text-tertiary, #94a3b8);
  font-size: 11px;
  font-style: italic;
}

.p-multiselect-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--sakai-primary, #1677ff);
  background: var(--sakai-primary-bg, rgba(22, 119, 255, 0.08));
  border-top: 1px solid var(--sakai-border, #e2e8f0);
  cursor: pointer;
  transition: all 0.15s ease;
}

[data-mode="dark"] .p-multiselect-add-btn {
  border-color: #334155;
  background: rgba(22, 119, 255, 0.12);
  color: #60a5fa;
}

.p-multiselect-add-btn:hover {
  background: var(--sakai-primary, #1677ff);
  color: #ffffff !important;
}

/* ==========================================================================
   PrimeVue / Sakai AutoComplete Component (multiple="" display="chip" dropdown="")
   ========================================================================== */
.p-autocomplete {
  display: inline-flex;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.p-autocomplete.p-autocomplete-fluid {
  display: flex;
  width: 100%;
}

.p-autocomplete-multiple {
  display: flex;
  align-items: stretch;
  width: 100%;
  position: relative;
}

.p-autocomplete-input-multiple {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 1 1 auto;
  gap: 5px;
  padding: 4px 6px;
  margin: 0;
  list-style: none;
  min-height: 38px;
  border: 1px solid var(--sakai-border, #cbd5e1);
  border-radius: var(--sakai-radius-sm, 8px) 0 0 var(--sakai-radius-sm, 8px);
  background: var(--sakai-bg-layout, #f8fafc);
  cursor: text;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

[data-mode="dark"] .p-autocomplete-input-multiple {
  background: var(--sakai-bg-layout, #0f172a);
  border-color: var(--sakai-border, #334155);
}

.p-autocomplete-multiple:not(.has-dropdown) .p-autocomplete-input-multiple {
  border-radius: var(--sakai-radius-sm, 8px);
}

.p-autocomplete-input-multiple:hover {
  border-color: var(--sakai-primary-hover, #4096ff);
}

.p-autocomplete.p-focus .p-autocomplete-input-multiple,
.p-autocomplete:focus-within .p-autocomplete-input-multiple {
  border-color: var(--sakai-primary, #1677ff) !important;
  box-shadow: 0 0 0 3px var(--sakai-primary-bg, rgba(22, 119, 255, 0.18)) !important;
  outline: none;
  z-index: 2;
}

/* Chip item within input */
.p-autocomplete-chip-item {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-autocomplete-chip.p-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  background: var(--sakai-primary, #1677ff);
  color: #ffffff;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  user-select: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.p-autocomplete-chip.p-chip.token-rose {
  background: rgba(244, 63, 94, 0.12) !important;
  color: #e11d48 !important;
  border-color: rgba(244, 63, 94, 0.35) !important;
}

[data-mode="dark"] .p-autocomplete-chip.p-chip.token-rose {
  background: rgba(244, 63, 94, 0.24) !important;
  color: #fda4af !important;
  border-color: rgba(244, 63, 94, 0.45) !important;
}

.p-autocomplete-chip.p-chip.token-purple {
  background: rgba(147, 51, 234, 0.12) !important;
  color: #7c3aed !important;
  border-color: rgba(147, 51, 234, 0.35) !important;
}

[data-mode="dark"] .p-autocomplete-chip.p-chip.token-purple {
  background: rgba(147, 51, 234, 0.24) !important;
  color: #d8b4fe !important;
  border-color: rgba(147, 51, 234, 0.45) !important;
}

.p-autocomplete-chip.p-chip.token-amber {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #b45309 !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}

[data-mode="dark"] .p-autocomplete-chip.p-chip.token-amber {
  background: rgba(245, 158, 11, 0.24) !important;
  color: #fcd34d !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
}

.p-chip-label {
  display: inline-block;
  white-space: nowrap;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.p-chip-remove-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  opacity: 0.75;
  transition: all 0.15s ease;
  line-height: 1;
}

.p-chip-remove-icon:hover {
  opacity: 1;
  transform: scale(1.15);
  background: rgba(0, 0, 0, 0.1);
}

[data-mode="dark"] .p-chip-remove-icon:hover {
  background: rgba(255, 255, 255, 0.2);
}

.p-autocomplete-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Typing input chip */
.p-autocomplete-input-chip {
  flex: 1 1 80px;
  display: inline-flex;
  align-items: center;
  min-width: 60px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-autocomplete-input {
  width: 100%;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12px;
  color: var(--sakai-text-main, #1e293b);
  padding: 2px 4px;
  font-family: inherit;
  margin: 0;
}

[data-mode="dark"] .p-autocomplete-input {
  color: #f8fafc;
}

.p-autocomplete-input::placeholder {
  color: var(--sakai-text-tertiary, #94a3b8);
  font-size: 12px;
  font-weight: normal;
}

/* Dropdown toggle button */
.p-autocomplete-dropdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  border: 1px solid var(--sakai-border, #cbd5e1);
  border-left: none;
  border-radius: 0 var(--sakai-radius-sm, 8px) var(--sakai-radius-sm, 8px) 0;
  background: var(--sakai-bg-card, #ffffff);
  color: var(--sakai-text-secondary, #64748b);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  outline: none;
}

[data-mode="dark"] .p-autocomplete-dropdown {
  background: var(--sakai-bg-card, #1e293b);
  border-color: var(--sakai-border, #334155);
  color: #94a3b8;
}

.p-autocomplete.p-focus .p-autocomplete-dropdown,
.p-autocomplete:focus-within .p-autocomplete-dropdown {
  border-color: var(--sakai-primary, #1677ff);
  z-index: 2;
}

.p-autocomplete-dropdown:hover {
  background: var(--sakai-bg-spotlight, #f1f5f9);
  color: var(--sakai-primary, #1677ff);
}

[data-mode="dark"] .p-autocomplete-dropdown:hover {
  background: #334155;
  color: #60a5fa;
}

/* Dropdown Suggestion Overlay Panel */
.p-autocomplete-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  z-index: 1050;
  background: var(--sakai-bg-card, #ffffff);
  border: 1px solid var(--sakai-border, #cbd5e1);
  border-radius: var(--sakai-radius-sm, 8px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  animation: p-dropdown-in 0.18s cubic-bezier(0, 0, 0.2, 1);
}

[data-mode="dark"] .p-autocomplete-panel {
  background: var(--sakai-bg-card, #1e293b);
  border-color: var(--sakai-border, #334155);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}

.p-autocomplete-items-wrapper {
  max-height: 220px;
  overflow-y: auto;
}

.p-autocomplete-items {
  list-style: none;
  margin: 0;
  padding: 4px;
}

.p-autocomplete-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--sakai-text-main, #1e293b);
  cursor: pointer;
  transition: background 0.15s ease;
  user-select: none;
}

[data-mode="dark"] .p-autocomplete-item {
  color: #f8fafc;
}

.p-autocomplete-item:hover,
.p-autocomplete-item.p-focus {
  background: var(--sakai-bg-spotlight, #f1f5f9);
}

[data-mode="dark"] .p-autocomplete-item:hover,
[data-mode="dark"] .p-autocomplete-item.p-focus {
  background: #334155;
}

.p-autocomplete-item.p-highlight {
  background: var(--sakai-primary-bg, rgba(22, 119, 255, 0.1));
  color: var(--sakai-primary, #1677ff);
  font-weight: 600;
}

[data-mode="dark"] .p-autocomplete-item.p-highlight {
  background: rgba(22, 119, 255, 0.22);
  color: #60a5fa;
}

.p-autocomplete-empty {
  padding: 12px;
  text-align: center;
  color: var(--sakai-text-tertiary, #94a3b8);
  font-size: 11px;
  font-style: italic;
}

.p-autocomplete-footer-action {
  border-top: 1px solid var(--sakai-border, #e2e8f0);
}

[data-mode="dark"] .p-autocomplete-footer-action {
  border-color: #334155;
}

.p-autocomplete-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--sakai-primary, #1677ff);
  background: var(--sakai-primary-bg, rgba(22, 119, 255, 0.08));
  cursor: pointer;
  transition: all 0.15s ease;
}

[data-mode="dark"] .p-autocomplete-add-btn {
  background: rgba(22, 119, 255, 0.12);
  color: #60a5fa;
}

.p-autocomplete-add-btn:hover {
  background: var(--sakai-primary, #1677ff);
  color: #ffffff !important;
}

/* ==========================================================================
   High-Contrast & Accessibility Color System (WCAG AAA Compliant)
   Fixes yellow/amber text invisibility, button clashing, and tag contrast
   ========================================================================== */

/* 1. Status Tags & Badges - High Contrast in Light Mode */
html:not([data-mode="dark"]) .p-tag-warning,
html:not([data-mode="dark"]) .p-tag-gold {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #f59e0b80 !important;
  font-weight: 700 !important;
}

html:not([data-mode="dark"]) .p-tag-success,
html:not([data-mode="dark"]) .p-tag-green {
  background: #d1fae5 !important;
  color: #065f46 !important;
  border: 1px solid #10b98180 !important;
  font-weight: 700 !important;
}

html:not([data-mode="dark"]) .p-tag-info,
html:not([data-mode="dark"]) .p-tag-blue {
  background: #dbeafe !important;
  color: #1e40af !important;
  border: 1px solid #3b82f680 !important;
  font-weight: 700 !important;
}

html:not([data-mode="dark"]) .p-tag-danger,
html:not([data-mode="dark"]) .p-tag-red {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border: 1px solid #ef444480 !important;
  font-weight: 700 !important;
}

html:not([data-mode="dark"]) .p-tag-purple {
  background: #ede9fe !important;
  color: #5b21b6 !important;
  border: 1px solid #8b5cf680 !important;
  font-weight: 700 !important;
}

/* Dark mode tags: vibrant and clear against dark background */
[data-mode="dark"] .p-tag-warning,
[data-mode="dark"] .p-tag-gold {
  background: rgba(245, 158, 11, 0.18) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
}

[data-mode="dark"] .p-tag-success,
[data-mode="dark"] .p-tag-green {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.45) !important;
}

[data-mode="dark"] .p-tag-info,
[data-mode="dark"] .p-tag-blue {
  background: rgba(59, 130, 246, 0.18) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(59, 130, 246, 0.45) !important;
}

[data-mode="dark"] .p-tag-danger,
[data-mode="dark"] .p-tag-red {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.45) !important;
}

[data-mode="dark"] .p-tag-purple {
  background: rgba(139, 92, 246, 0.18) !important;
  color: #c084fc !important;
  border: 1px solid rgba(139, 92, 246, 0.45) !important;
}

/* 2. Text Color Contrast Safeguards for Light Mode */
/* Prevents light yellow/amber from becoming invisible on white/light backgrounds */
html:not([data-mode="dark"]) .text-amber-300,
html:not([data-mode="dark"]) .text-amber-400,
html:not([data-mode="dark"]) .text-yellow-300,
html:not([data-mode="dark"]) .text-yellow-400,
html:not([data-mode="dark"]) .text-yellow-500 {
  color: #92400e !important; /* Deep warm amber with > 7:1 contrast on white */
}

html:not([data-mode="dark"]) .text-emerald-300,
html:not([data-mode="dark"]) .text-emerald-400,
html:not([data-mode="dark"]) .text-green-400 {
  color: #065f46 !important; /* Deep emerald with > 7:1 contrast on white */
}

html:not([data-mode="dark"]) .text-blue-300,
html:not([data-mode="dark"]) .text-sky-300 {
  color: #1e40af !important; /* Deep blue with > 7:1 contrast on white */
}

/* 3. Button Contrast Fixes */
/* Prevent secondary buttons combined with text-primary from looking murky */
.p-button-secondary.text-primary,
.p-button.p-button-secondary.text-primary {
  background-color: transparent !important;
  border: 1.5px solid var(--sakai-primary, #1677ff) !important;
  color: var(--sakai-primary, #1677ff) !important;
}

.p-button-secondary.text-primary:hover,
.p-button.p-button-secondary.text-primary:hover {
  background-color: var(--sakai-primary, #1677ff) !important;
  color: #ffffff !important;
}

/* Specific quick edit hero button styling */
#hero-quick-edit-btn {
  background-color: transparent !important;
  border: 1.5px solid var(--sakai-primary, #1677ff) !important;
  color: var(--sakai-primary, #1677ff) !important;
}

#hero-quick-edit-btn:hover {
  background-color: var(--sakai-primary, #1677ff) !important;
  color: #ffffff !important;
}

/* Source Radio Card Selection Styling */
.source-radio-card {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.source-radio-card:hover {
  border-color: var(--sakai-primary, #1677ff) !important;
  transform: translateY(-1px);
}

.source-radio-card:has(input[type="radio"]:checked),
.source-radio-card.active-source-card {
  border-color: var(--sakai-primary, #1677ff) !important;
  background-color: rgba(22, 119, 255, 0.08) !important;
  box-shadow: 0 0 0 1px var(--sakai-primary, #1677ff);
}

[data-mode="dark"] .source-radio-card:has(input[type="radio"]:checked),
[data-mode="dark"] .source-radio-card.active-source-card {
  background-color: rgba(22, 119, 255, 0.16) !important;
}

/* On-Hand Action Popover & Trigger Button */
.onhand-action-trigger {
  transition: all 0.15s ease-in-out;
}

#onhand-action-popover {
  background-color: var(--sakai-card-bg, #ffffff) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
  animation: popoverFadeIn 0.12s cubic-bezier(0, 0, 0.2, 1);
}

@keyframes popoverFadeIn {
  from {
    opacity: 0;
    transform: translateY(3px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ==========================================================================
   Mobile-First Adaptive Card View & Responsive Data Table Architecture
   ========================================================================== */

/* Segmented View Mode Switcher */
.view-mode-toggle {
  user-select: none;
}
.view-toggle-btn {
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--sakai-text-secondary, #64748b);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.view-toggle-btn:hover {
  color: var(--sakai-text-main, #0f172a);
}
.view-toggle-btn.active {
  background-color: var(--sakai-primary, #1677ff) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

/* Universal Table Minimum Width for Horizontal Scroll */
.table-responsive > table.stock-fit-table.stock-table-mode {
  min-width: 820px !important;
}

/* ==========================================================================
   Stock Cards Mode (Adaptive Card View)
   ========================================================================== */
.stock-cards-mode,
.stock-cards-mode *,
.stock-cards-mode *:before,
.stock-cards-mode *:after {
  box-sizing: border-box !important;
}

.stock-cards-mode {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.stock-cards-mode thead {
  display: none !important;
}

.stock-cards-mode tbody {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.85rem !important;
  padding: 0.5rem !important;
  background: var(--sakai-bg-layout, #f4f7f5) !important;
  border-radius: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
[data-mode="dark"] .stock-cards-mode tbody {
  background: rgba(15, 23, 42, 0.5) !important;
}

/* Tablet & Wide screen columns in Card Mode */
@media (min-width: 768px) and (max-width: 1240px) {
  .stock-cards-mode tbody {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 0.75rem !important;
  }
}
@media (min-width: 1241px) {
  .stock-cards-mode tbody {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    padding: 0.75rem !important;
  }
}

/* Individual Card Styling */
.stock-cards-mode tbody tr.stock-item-row {
  display: flex !important;
  flex-direction: column !important;
  background: var(--sakai-bg-container, #ffffff) !important;
  border: 1px solid var(--sakai-border, #e2e8f0) !important;
  border-radius: 14px !important;
  padding: 0.85rem 1rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  gap: 0.65rem !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, border-color 0.2s ease !important;
}
[data-mode="dark"] .stock-cards-mode tbody tr.stock-item-row {
  background: var(--sakai-bg-container, #1e293b) !important;
  border-color: var(--sakai-border, #334155) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}
.stock-cards-mode tbody tr.stock-item-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  border-color: var(--sakai-primary, #1677ff) !important;
}

/* Card Cells: Block display with zero table borders */
.stock-cards-mode tbody tr.stock-item-row td {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* Card Mode Visibility Controls */
.stock-cards-mode .stock-card-status-badge {
  display: inline-flex !important;
}
.stock-table-mode .stock-card-status-badge {
  display: none !important;
}
.stock-cards-mode .card-field-label {
  display: block !important;
}
.stock-cards-mode .desktop-only-status {
  display: none !important;
}
.stock-table-mode .desktop-only-status {
  display: block !important;
}

/* Card Header: S/N Section with dashed separator */
.stock-cards-mode .stock-col-sn {
  border-bottom: 1px dashed var(--sakai-border, #e2e8f0) !important;
  padding-bottom: 0.65rem !important;
}
[data-mode="dark"] .stock-cards-mode .stock-col-sn {
  border-bottom-color: var(--sakai-border, #334155) !important;
}

/* Card Body Sections */
.stock-cards-mode .stock-col-category {
  padding-top: 0.2rem !important;
}
.stock-cards-mode .stock-col-location {
  padding: 0.35rem 0 !important;
}
.stock-cards-mode .stock-col-status {
  padding-top: 0.15rem !important;
}

/* Card Footer: Action Buttons Bar with full touch targets */
.stock-cards-mode .stock-col-actions {
  border-top: 1px solid var(--sakai-border, #e2e8f0) !important;
  padding-top: 0.75rem !important;
  margin-top: 0.35rem !important;
  text-align: left !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
[data-mode="dark"] .stock-cards-mode .stock-col-actions {
  border-top-color: var(--sakai-border, #334155) !important;
}
.stock-cards-mode .stock-col-actions > div {
  display: flex !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 0.5rem !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.stock-cards-mode .stock-col-actions .btn-stock-onhand,
.stock-cards-mode .stock-col-actions .btn-stock-manage {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  justify-content: center !important;
  height: 42px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
}
.stock-cards-mode .stock-col-actions .btn-stock-delete {
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(244, 63, 94, 0.25) !important;
  background: rgba(244, 63, 94, 0.08) !important;
  color: #f43f5e !important;
  box-sizing: border-box !important;
}
.stock-cards-mode .stock-col-actions .btn-stock-delete:hover {
  background: rgba(244, 63, 94, 0.18) !important;
  border-color: #f43f5e !important;
}

/* Empty State / Loading Row in Card Mode */
.stock-cards-mode tbody tr.empty-state-row {
  display: block !important;
  width: 100% !important;
  background: var(--sakai-bg-container, #ffffff) !important;
  border-radius: 14px !important;
  border: 1px dashed var(--sakai-border, #cbd5e1) !important;
  padding: 2.5rem 1rem !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
[data-mode="dark"] .stock-cards-mode tbody tr.empty-state-row {
  background: var(--sakai-bg-container, #1e293b) !important;
  border-color: var(--sakai-border, #334155) !important;
}
.stock-cards-mode tbody tr.empty-state-row td {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* Quick Filter Pills & Horizontal Chips Scrolling */
.no-scrollbar::-webkit-scrollbar {
  display: none !important;
}
.no-scrollbar {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}