/* ==========================================================================
   PDKS Pro - Modern Design System & Stylesheet
   ========================================================================== */

:root {
  /* Dark Theme Tokens (Default) */
  --bg-app: #0B0F19;
  --bg-surface: #111827;
  --bg-surface-elevated: #1F2937;
  --bg-glass: rgba(17, 24, 39, 0.75);
  --bg-input: #1F2937;
  
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-active: rgba(99, 102, 241, 0.4);
  
  --text-main: #F9FAFB;
  --text-muted: #9CA3AF;
  --text-dim: #6B7280;
  
  --primary: #4F46E5;
  --primary-hover: #4338CA;
  --primary-glow: rgba(79, 70, 229, 0.35);
  
  --success: #10B981;
  --success-glow: rgba(16, 185, 129, 0.3);
  --warning: #F59E0B;
  --warning-glow: rgba(245, 158, 11, 0.3);
  --danger: #EF4444;
  --danger-glow: rgba(239, 68, 68, 0.3);
  --accent: #06B6D4;
  
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
  --transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

body.light-theme {
  --bg-app: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #F1F5F9;
  --bg-glass: rgba(255, 255, 255, 0.85);
  --bg-input: #F8FAFC;
  
  --border-subtle: #E2E8F0;
  --border-active: #818CF8;
  
  --text-main: #0F172A;
  --text-muted: #64748B;
  --text-dim: #94A3B8;
  
  --primary: #4F46E5;
  --primary-hover: #4338CA;
  --primary-glow: rgba(79, 70, 229, 0.2);
  
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Base Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background-color: var(--bg-app);
  color: var(--text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

/* App Container */
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header */
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.75rem;
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
  transition: var(--transition);
}

.header-left {
  display: flex;
  align-items: center;
}

.logo-box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logo-icon {
  width: 32px;
  height: 32px;
  color: var(--primary);
  filter: drop-shadow(0 0 8px var(--primary-glow));
}

.logo-text {
  display: flex;
  flex-direction: column;
}

.logo-title {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #A5B4FC, #6366F1, #38BDF8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo-subtitle {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
}

/* Device Pill */
.device-pill {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.9rem;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.pulse-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--danger);
  position: relative;
}

.pulse-dot.active {
  background-color: var(--success);
  box-shadow: 0 0 10px var(--success);
}

.pulse-dot.active::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  border: 1.5px solid var(--success);
  animation: pulse-ring 2s infinite ease-out;
}

@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}

.device-ip {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: var(--text-main);
}

.device-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  letter-spacing: 0.04em;
}

.badge-online {
  background: rgba(16, 185, 129, 0.15);
  color: var(--success);
}

.badge-offline {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
}

.time-diff-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--text-dim);
  border-left: 1px solid var(--border-subtle);
  padding-left: 0.6rem;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.theme-toggle-btn {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.theme-toggle-btn:hover {
  color: var(--text-main);
  border-color: var(--border-active);
}

.theme-toggle-btn svg {
  width: 18px;
  height: 18px;
}

/* Navigation Bar */
.app-nav {
  display: flex;
  gap: 0.4rem;
  padding: 0.5rem 1.75rem;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.nav-item:hover {
  color: var(--text-main);
  background: var(--bg-surface-elevated);
}

.nav-item.active {
  color: var(--text-main);
  background: rgba(79, 70, 229, 0.15);
  border-color: rgba(99, 102, 241, 0.35);
  box-shadow: 0 0 12px rgba(79, 70, 229, 0.2);
}

.nav-item.active .nav-icon {
  color: #818CF8;
}

.nav-icon {
  width: 17px;
  height: 17px;
}

/* Main Content */
.app-main {
  flex: 1;
  padding: 1.75rem;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

.tab-pane {
  display: none;
  animation: fadeIn 0.25s ease-out;
}

.tab-pane.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: var(--transition);
  font-family: inherit;
  outline: none;
}

.btn-sm {
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
}

.btn-xs {
  padding: 0.25rem 0.6rem;
  font-size: 0.74rem;
}

.btn-primary {
  background: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 2px 8px var(--primary-glow);
}

.btn-primary:hover {
  background: var(--primary-hover);
  box-shadow: 0 4px 14px var(--primary-glow);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--bg-surface-elevated);
  border-color: var(--border-subtle);
  color: var(--text-main);
}

.btn-secondary:hover {
  border-color: var(--border-active);
  background: rgba(255, 255, 255, 0.05);
}

.btn-outline {
  background: transparent;
  border-color: var(--border-subtle);
  color: var(--text-muted);
}

.btn-outline:hover {
  border-color: var(--border-active);
  color: var(--text-main);
}

.btn-success {
  background: #059669;
  color: #FFFFFF;
}

.btn-success:hover {
  background: #047857;
  transform: translateY(-1px);
}

.btn-danger {
  background: #DC2626;
  color: #FFFFFF;
}

.btn-danger:hover {
  background: #B91C1C;
}

.btn-icon {
  width: 15px;
  height: 15px;
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  padding: 1.25rem 1.4rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-active);
}

.stat-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon-wrapper svg {
  width: 24px;
  height: 24px;
}

.card-primary .stat-icon-wrapper { background: rgba(79, 70, 229, 0.15); color: #818CF8; }
.card-success .stat-icon-wrapper { background: rgba(16, 185, 129, 0.15); color: #34D399; }
.card-warning .stat-icon-wrapper { background: rgba(245, 158, 11, 0.15); color: #FBBF24; }
.card-danger .stat-icon-wrapper { background: rgba(239, 68, 68, 0.15); color: #F87171; }

.stat-content {
  display: flex;
  flex-direction: column;
}

.stat-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
  line-height: 1.2;
  margin: 0.15rem 0;
}

.stat-desc {
  font-size: 0.72rem;
  color: var(--text-dim);
}

/* Dashboard Columns */
.dashboard-columns {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 1024px) {
  .dashboard-columns {
    grid-template-columns: 1fr;
  }
}

/* Card */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 1.4rem;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.01);
}

.card-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

.badge-pulse {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  background: rgba(16, 185, 129, 0.15);
  color: var(--success);
  border-radius: var(--radius-full);
}

.card-body {
  padding: 1.25rem 1.4rem;
}

/* Live Feed */
.feed-body {
  max-height: 520px;
  overflow-y: auto;
  padding: 0.5rem;
}

.feed-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border-bottom: 1px solid var(--border-subtle);
  transition: var(--transition);
}

.feed-item:last-child {
  border-bottom: none;
}

.feed-item:hover {
  background: var(--bg-surface-elevated);
}

.avatar-wrapper {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border-subtle);
  background: var(--bg-surface-elevated);
  flex-shrink: 0;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #A5B4FC;
  background: #1E1B4B;
}

.feed-details {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.feed-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
}

.feed-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.feed-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.feed-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main);
}

.verify-badge {
  font-size: 0.68rem;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: rgba(99, 102, 241, 0.12);
  color: #A5B4FC;
  font-weight: 600;
}

/* Metric Rows */
.info-metric-box {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
}

.metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.84rem;
}

.metric-title {
  color: var(--text-muted);
}

.metric-val {
  font-weight: 600;
  color: var(--text-main);
}

.text-mono {
  font-family: 'JetBrains Mono', monospace;
}

.text-accent {
  color: #38BDF8;
}

/* Quick Actions */
.quick-actions-box {
  padding-top: 1.25rem;
}

.quick-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.action-buttons-grid {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.btn-action {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-main);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
}

.btn-action:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: var(--border-active);
  transform: translateX(3px);
}

.btn-action svg {
  width: 17px;
  height: 17px;
  color: #818CF8;
}

/* Filter Bar */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.filter-left, .filter-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

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

.search-icon {
  position: absolute;
  left: 0.75rem;
  width: 15px;
  height: 15px;
  color: var(--text-dim);
}

.input-search {
  padding: 0.5rem 0.85rem 0.5rem 2.25rem;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-main);
  font-size: 0.84rem;
  outline: none;
  min-width: 260px;
  transition: var(--transition);
}

.input-search:focus {
  border-color: var(--border-active);
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.2);
}

.select-filter, .input-date, .input-text {
  padding: 0.5rem 0.85rem;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-main);
  font-size: 0.84rem;
  outline: none;
  font-family: inherit;
  transition: var(--transition);
}

.select-filter:focus, .input-date:focus, .input-text:focus {
  border-color: var(--border-active);
}

/* Employee Cards Grid */
.employees-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  padding: 1.4rem;
}

.employee-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.employee-card:hover {
  border-color: var(--border-active);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.emp-avatar-wrapper {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid var(--border-subtle);
  flex-shrink: 0;
  background: #1E293B;
}

.emp-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.emp-info {
  flex: 1;
  min-width: 0;
}

.emp-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.emp-role {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.emp-badges {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.emp-tag {
  font-size: 0.68rem;
  font-family: 'JetBrains Mono', monospace;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.emp-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.btn-icon-only {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
}

.btn-icon-only:hover {
  background: var(--bg-surface);
  color: var(--text-main);
  border-color: var(--border-active);
}

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

/* Data Tables */
.table-responsive {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  text-align: left;
}

.data-table th {
  padding: 0.85rem 1rem;
  font-weight: 700;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.02);
  white-space: nowrap;
}

.data-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-main);
  vertical-align: middle;
}

.data-table tbody tr {
  transition: var(--transition);
}

.data-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* Table Badges */
.badge-status {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}

.badge-success { background: rgba(16, 185, 129, 0.15); color: #34D399; }
.badge-warning { background: rgba(245, 158, 11, 0.15); color: #FBBF24; }
.badge-danger  { background: rgba(239, 68, 68, 0.15); color: #F87171; }
.badge-info    { background: rgba(56, 189, 248, 0.15); color: #38BDF8; }

/* Settings Grid */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 1.5rem;
}

.setting-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.15rem;
}

.setting-item label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}

.help-text {
  font-size: 0.72rem;
  color: var(--text-dim);
}

.setting-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.status-indicator-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
}

.status-indicator-badge.online {
  background: rgba(16, 185, 129, 0.15);
  color: var(--success);
}

/* Modals */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1.5rem;
  box-sizing: border-box;
}

.modal-overlay.open {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: modalFadeIn 0.2s ease-out forwards;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.modal-content {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 540px;
  max-height: min(92vh, 880px);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

.modal-content form,
.modal-content > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  margin: 0;
}

.modal-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  z-index: 2;
}

.modal-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}

.modal-close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  font-size: 1.3rem;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.modal-close:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
}

.modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  padding: 1.25rem 1.5rem;
  overscroll-behavior: contain;
}

.modal-body::-webkit-scrollbar {
  width: 6px;
}

.modal-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

.modal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.form-row .form-group {
  margin-bottom: 0;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}

.form-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.modal-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid var(--border-subtle);
  z-index: 2;
}

/* Toast Container */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.2rem;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-main);
  box-shadow: var(--shadow-lg);
  font-size: 0.85rem;
  animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast-success { border-left: 4px solid var(--success); }
.toast-error   { border-left: 4px solid var(--danger); }
.toast-info    { border-left: 4px solid var(--accent); }

@keyframes toastSlideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Spinner */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 0.75rem auto;
}

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

.empty-state {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--text-muted);
  font-size: 0.86rem;
}

/* Settings Grid */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 1.5rem;
}

/* Large Modal */
.modal-content.modal-lg {
  max-width: 760px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.modal-content.modal-lg .modal-body {
  overflow-y: auto;
  max-height: calc(90vh - 140px);
}

/* Biometric Profile Header */
.bio-profile-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem;
  background: var(--bg-surface-elevated);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  margin-bottom: 1.5rem;
}

.bio-photo-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.bio-photo-display img {
  width: 90px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border-subtle);
  background: #1e293b;
  box-shadow: var(--shadow-sm);
}

.btn-change-photo {
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  padding: 0.3rem 0.6rem;
}

.bio-profile-info {
  flex: 1;
}

.bio-profile-info h4 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
}

.bio-meta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.bio-tag {
  font-size: 0.75rem;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
}

.bio-tag.active {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.3);
  color: var(--success);
  font-weight: 600;
}

.bio-tag.warning {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.3);
  color: var(--warning);
  font-weight: 600;
}

/* Biometric Sections */
.bio-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
}

.bio-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.bio-section-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.35rem;
}

.bio-section-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.85rem;
}

/* Calibration Gallery */
.calibration-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
  gap: 0.6rem;
}

.calibration-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: #0f172a;
  cursor: pointer;
  transition: var(--transition);
}

.calibration-thumb:hover {
  border-color: var(--primary);
  transform: scale(1.05);
  z-index: 2;
  box-shadow: var(--shadow-md);
}

.calibration-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.calibration-thumb-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.65);
  font-size: 0.6rem;
  text-align: center;
  color: #fff;
  padding: 1px 0;
  font-family: 'JetBrains Mono', monospace;
}

/* Biometric Actions Buttons */
.bio-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Range Inputs */
.input-range {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  outline: none;
  margin: 0.6rem 0;
  transition: var(--transition);
}

.input-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  box-shadow: 0 0 10px var(--primary-glow);
  transition: var(--transition);
}

.input-range::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  background: #6366f1;
}

.btn-icon-danger:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  color: var(--danger) !important;
  border-color: var(--danger) !important;
}

.btn-icon-bio:hover {
  background: rgba(6, 182, 212, 0.15) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* ================= MODAL MD & CAMERA SECTION ================= */
.modal-content.modal-md {
  max-width: 740px;
}

#employeeModal .modal-content {
  max-width: 760px;
  max-height: min(90vh, 860px);
}

.emp-camera-section {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  padding: 0.95rem 1.15rem;
  background: rgba(31, 41, 55, 0.45);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.camera-preview-container {
  position: relative;
  width: 120px;
  height: 150px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #0f172a;
  border: 2px solid var(--border-subtle);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.camera-video-wrapper, .camera-photo-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.camera-video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* Mirror view for natural interaction */
}

.camera-photo-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.face-guide-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.face-oval {
  width: 82px;
  height: 110px;
  border: 2px dashed rgba(6, 182, 212, 0.85);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.4);
  animation: pulseOval 2s infinite ease-in-out;
}

@keyframes pulseOval {
  0%, 100% { border-color: rgba(6, 182, 212, 0.7); box-shadow: 0 0 8px rgba(6, 182, 212, 0.3); }
  50% { border-color: #38bdf8; box-shadow: 0 0 16px rgba(56, 189, 248, 0.6); }
}

.face-guide-text {
  position: absolute;
  bottom: 6px;
  font-size: 0.62rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.65);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.camera-live-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  color: #10B981;
  background: rgba(0, 0, 0, 0.75);
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.photo-overlay-status {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(15, 23, 42, 0.85);
  font-size: 0.68rem;
  text-align: center;
  padding: 3px 0;
  color: var(--text-muted);
  font-weight: 500;
}

.photo-overlay-status.ready {
  background: rgba(16, 185, 129, 0.85);
  color: #fff;
  font-weight: 600;
}

.camera-controls-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.camera-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

/* ================= BIOMETRIC TOGGLES ================= */
.biometric-options-box {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  background: rgba(17, 24, 39, 0.6);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: var(--radius-md);
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.biometric-checkbox-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.custom-toggle {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
}

.custom-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #374151;
  transition: .3s;
  border-radius: 34px;
  border: 1px solid var(--border-subtle);
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}

.custom-toggle input:checked + .toggle-slider {
  background-color: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 8px var(--primary-glow);
}

.custom-toggle input:checked + .toggle-slider:before {
  transform: translateX(16px);
}

.toggle-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.toggle-info strong {
  font-size: 0.84rem;
  color: var(--text-main);
}

.toggle-info small {
  font-size: 0.73rem;
  color: var(--text-muted);
  line-height: 1.35;
}

/* ================= DEVICE CONTROL CENTER & LCD MIRROR ================= */
.device-banner-card {
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1px solid rgba(99, 102, 241, 0.25);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.device-banner-inner {
  display: flex;
  gap: 2rem;
  padding: 1.5rem;
  align-items: flex-start;
}

@media (max-width: 900px) {
  .device-banner-inner {
    flex-direction: column;
    align-items: center;
  }
}

.device-screen-col {
  flex-shrink: 0;
}

.device-lcd-case {
  background: #0B0F19;
  border: 2px solid #334155;
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 264px;
}

.lcd-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 4px;
  font-size: 0.72rem;
  color: #94A3B8;
  font-weight: 600;
}

.lcd-live-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  color: #10B981;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.12);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.lcd-screen-container {
  position: relative;
  width: 240px;
  height: 320px;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.8), 0 0 1px rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.device-screen-img {
  width: 240px;
  height: 320px;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s ease;
}

.lcd-screen-overlay {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.lcd-screen-container:hover .lcd-screen-overlay {
  opacity: 1;
}

.lcd-bottom-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 4px 4px 0;
  font-size: 0.7rem;
  color: #64748B;
}

.auto-refresh-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: #94A3B8;
  font-size: 0.72rem;
  user-select: none;
}

.auto-refresh-toggle input {
  cursor: pointer;
}

.device-info-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
  width: 100%;
}

.device-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.device-main-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.02em;
  margin: 0;
}

.device-main-desc {
  font-size: 0.86rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.hardware-telemetry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
}

.telemetry-pill {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.telem-label {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.telem-val {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quick-commands-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.device-subtabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  background: var(--bg-surface-elevated);
  padding: 0.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}

.subnav-btn {
  padding: 0.6rem 1.1rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.subnav-btn:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.04);
}

.subnav-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 2px 8px var(--primary-glow);
}

.subtab-pane {
  display: none;
}

.subtab-pane.active {
  display: block;
  animation: fadeIn 0.2s ease forwards;
}

.bell-schedule-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.2rem;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 0.65rem;
}

.bell-schedule-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.bell-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-main);
  min-width: 140px;
}

/* ================= DUAL CAMERA CALIBRATION GALLERY STYLES ================= */
.bio-section-header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 0.85rem;
}

.bio-add-frame-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.calibration-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.85rem;
  margin-top: 0.75rem;
}

.calibration-card {
  position: relative;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.calibration-card:hover {
  transform: translateY(-2px);
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.calib-card-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #020617;
  overflow: hidden;
  cursor: pointer;
}

.calib-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.calibration-card:hover .calib-card-thumb {
  transform: scale(1.05);
}

.calib-card-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  backdrop-filter: blur(4px);
}

.calib-card-badge.badge-rgb {
  background: rgba(37, 99, 235, 0.85);
  color: #fff;
  border: 1px solid rgba(96, 165, 250, 0.4);
}

.calib-card-badge.badge-ir {
  background: rgba(168, 85, 247, 0.85);
  color: #fff;
  border: 1px solid rgba(192, 132, 252, 0.4);
}

.calib-card-delete-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.85);
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.calibration-card:hover .calib-card-delete-btn {
  opacity: 1;
}

.calib-card-delete-btn:hover {
  transform: scale(1.15);
  background: var(--danger);
}

.calib-card-info {
  padding: 0.5rem 0.6rem;
  background: rgba(15, 23, 42, 0.9);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.calib-card-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calib-card-sub {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.calib-add-placeholder {
  border: 2px dashed rgba(59, 130, 246, 0.35);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 160px;
  cursor: pointer;
  background: rgba(30, 41, 59, 0.25);
  color: var(--text-muted);
  transition: all 0.2s ease;
  padding: 1rem;
  text-align: center;
}

.calib-add-placeholder:hover {
  border-color: var(--primary);
  background: rgba(59, 130, 246, 0.08);
  color: var(--primary);
  transform: translateY(-2px);
}

.calib-add-icon {
  width: 32px;
  height: 32px;
  stroke: currentColor;
}

/* Live Camera Box in Modal */
.calib-camera-container {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid var(--border-focus);
  border-radius: var(--radius-lg);
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  animation: fadeIn 0.25s ease;
}

.calib-camera-card {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
}

.calib-camera-preview-wrapper {
  position: relative;
  width: 240px;
  height: 320px;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid var(--border-subtle);
  flex-shrink: 0;
}

.calib-camera-preview-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.calib-face-guide {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.face-oval {
  width: 150px;
  height: 200px;
  border: 2px dashed rgba(59, 130, 246, 0.7);
  border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.2);
}

.calib-filter-overlay.ir-mode {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.2) 0%, rgba(88, 28, 135, 0.4) 100%);
  mix-blend-mode: hue;
}

.calib-camera-controls {
  flex: 1;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.form-row-compact {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.form-group-compact label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 0.25rem;
}

.input-select-sm {
  width: 100%;
  padding: 0.45rem 0.6rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-size: 0.82rem;
}

.calib-cam-btn-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

/* Lightbox Modal */
.lightbox-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  max-width: 480px;
  width: 90%;
  margin: auto;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
  animation: fadeIn 0.2s ease;
}

.lightbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
}

.lightbox-body {
  padding: 0.5rem;
  background: #020617;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-body img {
  max-width: 100%;
  max-height: 480px;
  border-radius: var(--radius-sm);
  object-fit: contain;
}

.lightbox-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border-subtle);
}

/* ==========================================================================
   Mobile Connect Modal & QR Code Styles
   ========================================================================== */

.mobile-connect-card {
  max-width: 540px;
}

.mobile-qr-wrapper {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.2rem;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  margin-bottom: 1.25rem;
}

.qr-code-box {
  width: 140px;
  height: 140px;
  background: #FFFFFF;
  border-radius: var(--radius-md);
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.qr-code-box svg {
  width: 100%;
  height: 100%;
}

.qr-instructions h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.5rem;
}

.qr-instructions ol {
  font-size: 0.82rem;
  color: var(--text-muted);
  padding-left: 1.15rem;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.qr-instructions strong {
  color: #A5B4FC;
}

.mobile-url-box {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.mobile-url-box label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.url-copy-group {
  display: flex;
  gap: 0.5rem;
}

.url-copy-group input {
  flex: 1;
}

.mobile-firewall-tip {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.75rem 0.9rem;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--radius-md);
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.mobile-firewall-tip strong {
  color: #FBBF24;
}

/* ==========================================================================
   MOBILE & RESPONSIVE DESIGN ENHANCEMENTS
   ========================================================================== */

/* Tablet & Mobile Screens (<= 1024px) */
@media (max-width: 1024px) {
  .dashboard-columns {
    grid-template-columns: 1fr;
  }
  
  .settings-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile Screens (<= 768px) */
@media (max-width: 768px) {
  /* Prevent iOS zoom on inputs */
  input, select, textarea, button {
    font-size: 16px !important;
  }

  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  .app-container {
    min-height: 100vh;
  }

  /* Compact Mobile Header */
  .app-header {
    padding: 0.65rem 0.85rem;
    gap: 0.5rem;
    flex-wrap: nowrap;
  }

  .logo-box {
    gap: 0.5rem;
  }

  .logo-icon {
    width: 26px;
    height: 26px;
  }

  .logo-title {
    font-size: 1.05rem;
  }

  .logo-subtitle {
    display: none;
  }

  .header-center {
    display: flex;
    justify-content: center;
  }

  .device-pill {
    padding: 0.25rem 0.55rem;
    font-size: 0.74rem;
    gap: 0.4rem;
  }

  .time-diff-badge {
    display: none;
  }

  .header-right {
    gap: 0.35rem;
  }

  /* Icon-only header buttons on mobile */
  .header-right .btn-label {
    display: none;
  }

  .header-right .btn {
    padding: 0.45rem;
    min-width: 36px;
    min-height: 36px;
    border-radius: var(--radius-md);
  }

  .theme-toggle-btn {
    width: 36px;
    height: 36px;
  }

  /* Fixed Bottom App Navigation Bar */
  .app-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--border-subtle);
    border-bottom: none;
    padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom, 0px)) 0.25rem;
    display: flex;
    justify-content: space-around;
    gap: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
  }

  .app-nav::-webkit-scrollbar {
    display: none;
  }

  .nav-item {
    flex-direction: column;
    gap: 2px;
    padding: 0.3rem 0.25rem;
    font-size: 0.65rem;
    font-weight: 600;
    flex: 1;
    min-width: 52px;
    max-width: 80px;
    text-align: center;
    border-radius: var(--radius-sm);
    white-space: normal;
    line-height: 1.1;
  }

  .nav-item .nav-icon {
    width: 19px;
    height: 19px;
    margin: 0 auto;
  }

  .nav-item span {
    font-size: 0.62rem;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
  }

  .nav-item.active {
    background: rgba(79, 70, 229, 0.25);
    color: #A5B4FC;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.3);
  }

  /* Main Content Area */
  .app-main {
    padding: 0.85rem 0.75rem;
  }

  /* Stats Grid: 2 columns on mobile */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
    margin-bottom: 1rem;
  }

  .stat-card {
    padding: 0.85rem 0.75rem;
    gap: 0.65rem;
    border-radius: var(--radius-md);
  }

  .stat-icon-wrapper {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
  }

  .stat-icon-wrapper svg {
    width: 18px;
    height: 18px;
  }

  .stat-value {
    font-size: 1.35rem;
  }

  .stat-label {
    font-size: 0.72rem;
  }

  .stat-desc {
    font-size: 0.68rem;
  }

  /* Feed items */
  .feed-body {
    max-height: 380px;
    padding: 0.25rem;
  }

  .feed-item {
    padding: 0.65rem 0.5rem;
    gap: 0.65rem;
  }

  .avatar-wrapper {
    width: 38px;
    height: 38px;
  }

  .feed-name {
    font-size: 0.84rem;
  }

  .feed-time {
    font-size: 0.8rem;
  }

  /* Filter Bars */
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    padding: 0.85rem;
  }

  .filter-left, .filter-right {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .search-input-wrapper {
    width: 100%;
  }

  .input-search {
    width: 100%;
    min-width: 100%;
  }

  .select-filter, .input-date {
    width: 100%;
  }

  .filter-right button {
    width: 100%;
    justify-content: center;
  }

  .date-picker-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  /* Employee Grid */
  .employees-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 0.75rem;
  }

  .employee-card {
    padding: 0.85rem;
    gap: 0.75rem;
  }

  .emp-avatar-wrapper {
    width: 50px;
    height: 50px;
  }

  .emp-name {
    font-size: 0.9rem;
  }

  /* Responsive Tables */
  .table-responsive {
    margin: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }

  .data-table th, .data-table td {
    padding: 0.65rem 0.65rem;
    font-size: 0.76rem;
    white-space: nowrap;
  }

  /* Modals as Native Bottom Sheets on Mobile */
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .modal-content {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 92vh !important;
    display: flex !important;
    flex-direction: column !important;
    border-bottom: none;
    animation: modalSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .modal-content form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  @keyframes modalSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  .modal-header {
    flex-shrink: 0;
    padding: 1rem 1.15rem;
  }

  .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 1rem 1.15rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .emp-camera-section {
    flex-direction: column;
    text-align: center;
    gap: 0.85rem;
  }

  .emp-type-toggle-group {
    grid-template-columns: 1fr;
  }

  .school-days-pills-selector {
    grid-template-columns: repeat(3, 1fr);
  }

  .modal-footer {
    flex-shrink: 0;
    padding: 0.85rem 1.15rem;
    flex-direction: column-reverse;
    gap: 0.5rem;
  }

  .modal-footer .btn {
    width: 100%;
    min-height: 42px;
  }

  /* Mobile QR wrapper */
  .mobile-qr-wrapper {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .qr-code-box {
    margin: 0 auto;
  }

  .qr-instructions ol {
    text-align: left;
  }

  /* Device Control Tab on Mobile */
  .device-banner-inner {
    padding: 1rem;
    gap: 1.25rem;
  }

  .device-lcd-case {
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
  }

  .hardware-telemetry-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .quick-commands-bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .quick-commands-bar .btn-action {
    width: 100%;
  }

  .device-subtabs-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding: 0.4rem;
    border-radius: var(--radius-md);
    scrollbar-width: none;
  }

  .device-subtabs-nav::-webkit-scrollbar {
    display: none;
  }

  .subnav-btn {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.45rem 0.75rem;
    font-size: 0.78rem;
  }

  /* Dual Camera Box on Mobile */
  .calib-camera-controls {
    min-width: 100%;
  }

  .calib-cam-btn-group {
    flex-direction: column;
    width: 100%;
  }

  .calib-cam-btn-group .btn {
    width: 100%;
  }

  .bio-profile-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .bio-meta-tags {
    justify-content: center;
  }

  .bio-section-header-flex {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .bio-add-frame-actions {
    flex-direction: column;
    width: 100%;
  }

  .bio-add-frame-actions .btn {
    width: 100%;
  }

  .bio-action-buttons {
    flex-direction: column;
  }

  .bio-action-buttons .btn {
    width: 100%;
  }

  /* Toasts on mobile */
  .toast-container {
    left: 1rem;
    right: 1rem;
    bottom: calc(75px + env(safe-area-inset-bottom, 0px));
  }

  .toast {
    width: 100%;
  }
}

/* Small Smartphone Screens (<= 480px) */
@media (max-width: 480px) {
  .device-ip {
    display: none;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stat-card {
    padding: 0.8rem;
  }

  .card-header {
    padding: 0.85rem 1rem;
  }

  .card-body {
    padding: 0.85rem 1rem;
  }
}

/* ================= TERMINAL DUAL CAMERA TEST PANEL ================= */
.device-camera-test-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 768px) {
  .device-camera-test-grid {
    grid-template-columns: 1fr;
  }
}

.camera-preview-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.camera-lens-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
}

.cam-preview-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  background: #000;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.08);
}

.terminal-cam-feed {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cam-face-detect-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.target-reticle {
  width: 120px;
  height: 150px;
  border: 2px dashed rgba(59, 130, 246, 0.7);
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
  animation: pulseTarget 2s infinite ease-in-out;
}

@keyframes pulseTarget {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.05); opacity: 1; }
}

.target-label {
  position: absolute;
  bottom: 8px;
  font-size: 0.7rem;
  background: rgba(0, 0, 0, 0.75);
  color: #60a5fa;
  padding: 2px 8px;
  border-radius: 10px;
  backdrop-filter: blur(4px);
}

.cam-preview-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.cam-hardware-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: var(--accent-color);
}

.camera-action-controls {
  display: flex;
  flex-direction: column;
}

.cam-test-buttons-stack {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.cam-telemetry-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cam-telem-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* ==========================================================================
   Daily Puantaj & Device Punch Badges
   ========================================================================== */
.punch-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.punch-badge.in {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.1);
}

.punch-badge.out {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.1);
}

.punch-badge:hover {
  transform: translateY(-1px);
}

.punch-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.punch-badge-dot.green {
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}

.punch-badge-dot.red {
  background: #ef4444;
  box-shadow: 0 0 6px #ef4444;
}

.badge-inside-pulse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.35);
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.2);
}

.badge-inside-pulse .pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 8px #3b82f6;
  animation: pulseGlow 1.8s infinite ease-in-out;
}

.badge-inside-sub {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  font-size: 0.68rem;
  font-weight: 700;
}

@keyframes pulseGlow {
  0% { transform: scale(0.9) translateZ(0); opacity: 0.6; }
  50% { transform: scale(1.1) translateZ(0); opacity: 1; }
  100% { transform: scale(0.9) translateZ(0); opacity: 0.6; }
}

/* Punches timeline pills container */
.punches-pills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.punch-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform 0.1s ease, filter 0.1s ease;
  cursor: default;
}

.punch-pill:hover {
  transform: scale(1.05);
  filter: brightness(1.2);
}

.punch-pill.pill-in {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.25);
}

.punch-pill.pill-out {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.25);
}

.punch-pill.pill-blocked {
  background: rgba(220, 38, 38, 0.2);
  color: #f87171;
  border-color: rgba(220, 38, 38, 0.4);
}

.punch-pill .pill-icon {
  font-size: 0.7rem;
}

.punch-pill .pill-type {
  font-size: 0.68rem;
  opacity: 0.8;
  font-weight: 500;
}

/* KPI Card animations & hover */
.kpi-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   Executive Modern Dashboard Styles
   ========================================================================== */

/* ==========================================================================
   EXECUTIVE DASHBOARD - ADVANCED MODERN UI & TELEMETRY DESIGN SYSTEM
   ========================================================================== */

/* 1. Hero Welcome & Telemetry Banner */
.dash-hero-banner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem 1.85rem;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.75) 0%, rgba(15, 23, 42, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px);
  margin-bottom: 1.25rem;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
}

.dash-hero-banner::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.22) 0%, transparent 70%);
  pointer-events: none;
}

.dash-hero-banner::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: 30%;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.dash-hero-main-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  position: relative;
  z-index: 2;
}

.dash-hero-left {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.dash-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: rgba(99, 102, 241, 0.16);
  border: 1px solid rgba(99, 102, 241, 0.32);
  color: #a5b4fc;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  font-weight: 600;
  width: fit-content;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
}

.dash-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulseGlow 1.6s infinite ease-in-out;
}

.dash-hero-title {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #f8fafc;
  margin: 0;
  background: linear-gradient(180deg, #ffffff 0%, #cbd5e1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dash-hero-desc {
  font-size: 0.86rem;
  color: var(--text-muted);
  margin: 0;
}

.dash-hero-desc strong {
  color: #818cf8;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}

.dash-hero-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

.dash-telemetry-chip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1.1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.telemetry-icon-box {
  font-size: 1.35rem;
  line-height: 1;
}

.telemetry-info {
  display: flex;
  flex-direction: column;
}

.telemetry-label {
  font-size: 0.68rem;
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.telemetry-val {
  font-size: 0.84rem;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}

.dash-quick-actions-bar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

/* ==========================================================================
   1.1 Revamped Executive Shift / Vardiya Live Timeline & Telemetry Box
   ========================================================================== */
.dash-shift-timeline-box {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.78) 0%, rgba(30, 41, 59, 0.65) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.45rem;
  position: relative;
  z-index: 2;
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 36px -8px rgba(0, 0, 0, 0.45), 0 0 24px rgba(6, 182, 212, 0.06);
  margin-top: 0.95rem;
  transition: all 0.3s ease;
}

body.light-theme .dash-shift-timeline-box {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(241, 245, 249, 0.85) 100%);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-top: 2px solid var(--accent);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
}

/* Header Area */
.shift-timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.15rem;
  padding-bottom: 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body.light-theme .shift-timeline-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

.shift-header-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.shift-icon-orb {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(79, 70, 229, 0.25) 100%);
  border: 1px solid rgba(6, 182, 212, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.2);
}

.shift-orb-glow {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.4);
  animation: pulseGlow 2.5s infinite ease-in-out;
  pointer-events: none;
}

.shift-title-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.shift-overline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  text-transform: uppercase;
}

.shift-live-pulse-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.shift-live-pulse-badge .pulse-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
  animation: pulseGlow 1.4s infinite ease-in-out;
}

.shift-main-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--text-main);
  margin: 0;
}

.shift-badges-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.shift-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: all 0.3s ease;
}

.pill-glow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Status Pill Variants */
.shift-status-pill.status-active {
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
}
.shift-status-pill.status-active .pill-glow-dot {
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulseGlow 1.6s infinite ease-in-out;
}

.shift-status-pill.status-break {
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fbbf24;
}
.shift-status-pill.status-break .pill-glow-dot {
  background: #f59e0b;
  box-shadow: 0 0 8px #f59e0b;
  animation: pulseGlow 1.6s infinite ease-in-out;
}

.shift-status-pill.status-grace {
  background: rgba(234, 179, 8, 0.16);
  border: 1px solid rgba(234, 179, 8, 0.45);
  color: #fde047;
}
.shift-status-pill.status-grace .pill-glow-dot {
  background: #eab308;
  box-shadow: 0 0 8px #eab308;
  animation: pulseGlow 1.6s infinite ease-in-out;
}

.shift-status-pill.status-done {
  background: rgba(99, 102, 241, 0.16);
  border: 1px solid rgba(99, 102, 241, 0.4);
  color: #a5b4fc;
}
.shift-status-pill.status-done .pill-glow-dot {
  background: #818cf8;
  box-shadow: 0 0 8px #818cf8;
}

.shift-status-pill.status-overtime {
  background: rgba(244, 63, 94, 0.16);
  border: 1px solid rgba(244, 63, 94, 0.45);
  color: #fb7185;
}
.shift-status-pill.status-overtime .pill-glow-dot {
  background: #f43f5e;
  box-shadow: 0 0 8px #f43f5e;
  animation: pulseGlow 1.2s infinite ease-in-out;
}

.shift-status-pill.status-waiting {
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: #cbd5e1;
}
.shift-status-pill.status-waiting .pill-glow-dot {
  background: #94a3b8;
  box-shadow: 0 0 6px #94a3b8;
}

.shift-hours-chip,
.shift-break-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.73rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}

body.light-theme .shift-hours-chip,
body.light-theme .shift-break-chip {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text-muted);
}

.shift-hours-chip svg,
.shift-break-chip svg {
  color: var(--accent);
}

.shift-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.shift-live-clock-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
}

body.light-theme .shift-live-clock-chip {
  background: rgba(241, 245, 249, 0.85);
  border-color: rgba(0, 0, 0, 0.08);
}

.shift-live-clock-chip .clock-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--text-dim);
}

.shift-live-clock-chip .clock-val {
  font-size: 0.92rem;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.04em;
}

.btn-shift-settings-quick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-main);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-shift-settings-quick:hover {
  background: rgba(6, 182, 212, 0.15);
  border-color: rgba(6, 182, 212, 0.4);
  color: #38bdf8;
  transform: translateY(-1px);
}

/* 4 Executive Metric Cards Grid */
.shift-telemetry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
  margin-bottom: 1.15rem;
}

@media (max-width: 960px) {
  .shift-telemetry-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .shift-telemetry-grid {
    grid-template-columns: 1fr;
  }
}

.shift-telem-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

body.light-theme .shift-telem-card {
  background: #ffffff;
  border-color: rgba(226, 232, 240, 0.9);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.shift-telem-card:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(56, 189, 248, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.35);
}

.shift-telem-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  opacity: 0.6;
}

.shift-telem-card.telem-progress::before {
  background: linear-gradient(90deg, #6366f1, #06b6d4);
}

.shift-telem-card.telem-remaining::before {
  background: linear-gradient(90deg, #06b6d4, #10b981);
}

.shift-telem-card.telem-milestone::before {
  background: linear-gradient(90deg, #f59e0b, #ec4899);
}

.shift-telem-card.telem-presence::before {
  background: linear-gradient(90deg, #10b981, #6366f1);
}

.telem-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
}

.telem-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  text-transform: uppercase;
}

.telem-icon {
  font-size: 0.95rem;
  opacity: 0.85;
}

.telem-value-row {
  margin-bottom: 0.35rem;
}

.telem-main-val {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

.telem-sub-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.telem-mini-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: 2px;
}

.telem-mini-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, #6366f1, #06b6d4);
  transition: width 0.6s ease;
}

/* Interactive Timeline Track */
.shift-timeline-interactive-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.shift-progress-track-wrapper {
  position: relative;
  width: 100%;
  padding-top: 28px; /* Space for live pointer badge */
  padding-bottom: 34px; /* Space for marker labels */
}

/* Lunch Break Zone Shaded Overlay */
.shift-break-zone-overlay {
  position: absolute;
  top: 28px;
  height: 32px;
  border-radius: 8px;
  background: repeating-linear-gradient(
    -45deg,
    rgba(245, 158, 11, 0.09),
    rgba(245, 158, 11, 0.09) 6px,
    rgba(245, 158, 11, 0.22) 6px,
    rgba(245, 158, 11, 0.22) 12px
  );
  border-left: 1px dashed rgba(245, 158, 11, 0.6);
  border-right: 1px dashed rgba(245, 158, 11, 0.6);
  pointer-events: none;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.break-zone-label {
  font-size: 0.64rem;
  font-weight: 700;
  color: #fbbf24;
  background: rgba(15, 23, 42, 0.75);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid rgba(245, 158, 11, 0.3);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Progress Track Main */
.shift-progress-track {
  width: 100%;
  height: 32px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  position: relative;
  overflow: visible;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
}

body.light-theme .shift-progress-track {
  background: rgba(241, 245, 249, 0.95);
  border-color: rgba(203, 213, 225, 0.9);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

.shift-progress-fill {
  height: 100%;
  border-radius: 16px;
  background: linear-gradient(90deg, #6366f1 0%, #06b6d4 50%, #10b981 100%);
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.45);
  transition: width 0.35s ease-out;
  position: relative;
  overflow: hidden;
  min-width: 0;
  will-change: width;
  transform: translateZ(0);
}

.shift-fill-shimmer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shimmerSweep 3s infinite linear;
  will-change: transform;
  transform: translateZ(0);
}

@keyframes shimmerSweep {
  0% { transform: translate3d(-100%, 0, 0); }
  100% { transform: translate3d(200%, 0, 0); }
}

/* Real-Time Live Needle Pointer */
.shift-live-needle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  pointer-events: none;
  z-index: 5;
  transition: left 0.35s ease-out;
  transform: translateX(-50%) translateZ(0);
  will-change: left;
}

.shift-needle-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ffffff;
  box-shadow: 0 0 8px #38bdf8, 0 0 16px #38bdf8;
}

.shift-needle-head {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #06b6d4;
  box-shadow: 0 0 12px #06b6d4, 0 0 20px #06b6d4;
  transform: translate(-50%, -50%);
  animation: pulseGlow 1.5s infinite ease-in-out;
  will-change: transform, opacity;
}

.shift-needle-badge {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 7px;
  padding: 3px 8px;
  background: #0f172a;
  border: 1px solid #38bdf8;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 10px rgba(56, 189, 248, 0.4);
  font-size: 0.65rem;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  color: #38bdf8;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
}

.shift-needle-badge::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 4px;
  border-style: solid;
  border-color: #38bdf8 transparent transparent transparent;
}

.needle-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 6px #38bdf8;
  animation: pulseGlow 1.2s infinite ease-in-out;
}

/* Markers Container */
.shift-markers-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.shift-marker-node {
  position: absolute;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  pointer-events: auto;
  cursor: pointer;
  z-index: 3;
}

.marker-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.35);
  left: 50%;
  transform: translateX(-50%);
}

.marker-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1e293b;
  border: 2px solid rgba(255, 255, 255, 0.4);
  transform: translate(-50%, -50%);
  transition: all 0.2s ease;
}

.shift-marker-node:hover .marker-pin {
  transform: translate(-50%, -50%) scale(1.4);
  border-color: #38bdf8;
  box-shadow: 0 0 10px #38bdf8;
}

.shift-marker-node.marker-passed .marker-pin {
  background: #10b981;
  border-color: #ffffff;
}

.shift-marker-node.marker-current .marker-pin {
  background: #06b6d4;
  border-color: #ffffff;
  box-shadow: 0 0 10px #06b6d4;
  animation: pulseGlow 1.4s infinite ease-in-out;
}

.marker-label-tag {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
}

.marker-time {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-main);
}

.marker-name {
  font-size: 0.6rem;
  color: var(--text-dim);
  font-family: var(--font-main, sans-serif);
}

/* Tooltip on Marker hover */
.shift-marker-node[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  padding: 5px 9px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 6px;
  color: #f8fafc;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.shift-marker-node:hover[data-tooltip]::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-10px);
}

/* 5-Phase Stepper Guide */
.shift-phases-stepper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.65rem;
  margin-top: 0.85rem;
}

@media (max-width: 960px) {
  .shift-phases-stepper {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .shift-phases-stepper {
    grid-template-columns: 1fr;
  }
}

.shift-phase-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.25s ease;
}

body.light-theme .shift-phase-pill {
  background: #ffffff;
  border-color: rgba(226, 232, 240, 0.85);
}

.phase-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.phase-step-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}

.phase-step-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.phase-step-time {
  font-size: 0.62rem;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
}

/* Phase Stepper State: Completed */
.shift-phase-pill.phase-completed {
  border-color: rgba(16, 185, 129, 0.25);
  background: rgba(16, 185, 129, 0.04);
}
.shift-phase-pill.phase-completed .phase-step-num {
  background: #10b981;
  color: #ffffff;
}
.shift-phase-pill.phase-completed .phase-step-title {
  color: var(--text-main);
}

/* Phase Stepper State: Active */
.shift-phase-pill.phase-active {
  border-color: rgba(6, 182, 212, 0.5);
  background: rgba(6, 182, 212, 0.08);
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.15);
  transform: translateY(-1px);
}
.shift-phase-pill.phase-active .phase-step-num {
  background: #06b6d4;
  color: #ffffff;
  box-shadow: 0 0 8px #06b6d4;
  animation: pulseGlow 1.6s infinite ease-in-out;
}
.shift-phase-pill.phase-active .phase-step-title {
  color: #38bdf8;
  font-weight: 800;
}

/* Phase Stepper State: Pending */
.shift-phase-pill.phase-pending {
  opacity: 0.65;
}

/* 1.2 Executive Alerts Strip */
.dash-alerts-strip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.dash-alert-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-muted);
  backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}

.dash-alert-pill:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pill-dot.green { background: #10b981; box-shadow: 0 0 8px #10b981; }
.pill-dot.cyan { background: #06b6d4; box-shadow: 0 0 8px #06b6d4; }
.pill-dot.amber { background: #f59e0b; box-shadow: 0 0 8px #f59e0b; }
.pill-dot.purple { background: #a855f7; box-shadow: 0 0 8px #a855f7; }

/* 2. Top 6 KPI Metric Cards Grid */
.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.15rem;
  margin-bottom: 1.4rem;
}

.dash-kpi-card {
  padding: 1.25rem 1.35rem 1.1rem 1.35rem;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.dash-kpi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.16);
}

.dash-kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
}

.card-kpi-indigo::before { background: linear-gradient(90deg, #6366f1, #a5b4fc); }
.card-kpi-emerald::before { background: linear-gradient(90deg, #10b981, #6ee7b7); }
.card-kpi-cyan::before { background: linear-gradient(90deg, #06b6d4, #67e8f9); }
.card-kpi-blue::before { background: linear-gradient(90deg, #3b82f6, #93c5fd); }
.card-kpi-amber::before { background: linear-gradient(90deg, #f59e0b, #fde68a); }
.card-kpi-purple::before { background: linear-gradient(90deg, #a855f7, #e9d5ff); }

.dash-kpi-card::after {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.12;
  transition: opacity 0.3s ease;
}

.card-kpi-indigo::after { background: #6366f1; }
.card-kpi-emerald::after { background: #10b981; }
.card-kpi-cyan::after { background: #06b6d4; }
.card-kpi-blue::after { background: #3b82f6; }
.card-kpi-amber::after { background: #f59e0b; }
.card-kpi-purple::after { background: #a855f7; }

.dash-kpi-card:hover::after {
  opacity: 0.22;
}

.kpi-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.55rem;
}

.kpi-title {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.kpi-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.dash-kpi-card .kpi-value {
  font-size: 1.95rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--text-main);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.kpi-pulse-badge {
  font-size: 0.66rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
  text-transform: uppercase;
}

.dash-kpi-card .kpi-meta {
  font-size: 0.74rem;
  color: var(--text-dim);
  margin-top: 0.35rem;
  margin-bottom: 0.65rem;
  font-weight: 500;
}

.kpi-mini-bar-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: auto;
}

.kpi-mini-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.bar-indigo { background: linear-gradient(90deg, #6366f1, #818cf8); }
.bar-emerald { background: linear-gradient(90deg, #10b981, #34d399); }
.bar-cyan { background: linear-gradient(90deg, #06b6d4, #22d3ee); }
.bar-blue { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.bar-amber { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.bar-purple { background: linear-gradient(90deg, #a855f7, #c084fc); }

.text-cyan { color: #06b6d4 !important; }
.text-purple { color: #a855f7 !important; }

/* 3. Symmetrical Full-Width Sections */
.presence-card-full {
  width: 100%;
  margin-bottom: 1.4rem;
}

.analytics-card-full {
  width: 100%;
  margin-bottom: 1.4rem;
}

/* =====================================================================
   3. KIM NEREDE? (PERSONEL DURUMU) - MODERN SAAS TELEMETRY & PRESENCE
   ===================================================================== */

/* Container Card */
.presence-card-full {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

/* Modern Streamlined Header */
.presence-header-modern {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.008) 100%);
  border-bottom: 1px solid var(--border-subtle);
}

.phm-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.phm-title-group {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.phm-icon-orb {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(168, 85, 247, 0.15) 100%);
  border: 1px solid rgba(99, 102, 241, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.15);
  flex-shrink: 0;
}

.phm-title-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.phm-title {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: -0.2px;
}

.phm-subtitle {
  font-size: 0.74rem;
  color: var(--text-dim);
  margin-top: 1px;
}

.phm-pulse-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.4px;
}

.phm-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: radar-ping-anim 1.8s infinite;
}

/* Header Controls */
.phm-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.phm-search-wrap {
  position: relative;
  min-width: 210px;
}

.phm-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  color: var(--text-dim);
  pointer-events: none;
}

.phm-search-input {
  width: 100%;
  height: 32px;
  padding: 0 26px 0 28px;
  font-size: 0.78rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  color: var(--text-primary);
  outline: none;
  transition: all 0.2s ease;
}

.phm-search-input:focus {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.phm-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}

.phm-search-clear:hover {
  color: var(--text-primary);
}

.phm-select-wrap {
  position: relative;
}

.phm-select {
  height: 32px;
  padding: 0 22px 0 10px;
  font-size: 0.76rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  color: var(--text-secondary);
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.phm-select:focus, .phm-select:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
}

.phm-view-switcher {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.04);
  padding: 2px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.phm-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  height: 28px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-dim);
  background: transparent;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.phm-view-btn:hover {
  color: var(--text-primary);
}

.phm-view-btn.active {
  background: rgba(99, 102, 241, 0.25);
  color: #c7d2fe;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}

.phm-desk-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 11px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.phm-desk-btn:hover {
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(99, 102, 241, 0.5);
  color: #e0e7ff;
  transform: translateY(-1px);
}

/* Unified Telemetry & Filter Strip */
.presence-telemetry-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 1.4rem;
  background: rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid var(--border-subtle);
}

.pts-filters {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.pts-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 0.73rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
}

.pts-pill:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
}

.pts-pill.active {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}

.pts-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pts-count {
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.69rem;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
}

/* Filter Specific Accents */
.dot-all { background: #94a3b8; }
.dot-inside { background: #10b981; box-shadow: 0 0 6px rgba(16,185,129,0.5); }
.dot-outside { background: #ef4444; }
.dot-school { background: #f59e0b; }
.dot-training { background: #a855f7; }
.dot-annual { background: #06b6d4; }
.dot-unpaid { background: #64748b; }
.dot-late { background: #fbbf24; }

.pts-pill.pill-inside.active {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.5);
  color: #a7f3d0;
}
.pts-pill.pill-outside.active {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fecaca;
}
.pts-pill.pill-school.active {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.5);
  color: #fde68a;
}
.pts-pill.pill-training.active {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.5);
  color: #e9d5ff;
}
.pts-pill.pill-annual.active {
  background: rgba(6, 182, 212, 0.15);
  border-color: rgba(6, 182, 212, 0.5);
  color: #cffafe;
}
.pts-pill.pill-unpaid.active {
  background: rgba(100, 116, 139, 0.18);
  border-color: rgba(148, 163, 184, 0.4);
  color: #e2e8f0;
}
.pts-pill.pill-late.active {
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.5);
  color: #fef08a;
}

/* Right Telemetry Meta Insights */
.pts-telemetry-meta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-left: auto;
}

.pts-meta-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
}

.pts-meta-icon {
  font-size: 0.85rem;
}

.pts-meta-lbl {
  color: var(--text-dim);
  font-weight: 500;
}

.pts-meta-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  font-weight: 800;
}

.pts-meta-divider {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.1);
}

/* Presence Content Box */
.presence-content-box {
  padding: 1.15rem 1.4rem;
  min-height: 200px;
}

/* Cards View */
.presence-list-box.view-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 0.85rem;
}

@media (max-width: 640px) {
  .presence-list-box.view-cards {
    grid-template-columns: 1fr;
  }
}

/* Modern Employee Card */
.presence-emp-card {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 0.85rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.presence-emp-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3.5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px 0 0 12px;
  transition: background 0.2s ease;
}

.presence-emp-card.inside-card::before {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.presence-emp-card.outside-card::before {
  background: rgba(239, 68, 68, 0.6);
}

.presence-emp-card.school-card::before {
  background: #f59e0b;
}

.presence-emp-card.training-card::before {
  background: #a855f7;
}

.presence-emp-card.annual-card::before {
  background: #06b6d4;
}

.presence-emp-card.unpaid-card::before {
  background: #64748b;
}

.presence-emp-card.late-card::before {
  background: #fbbf24;
}

.presence-emp-card:hover {
  background: rgba(15, 23, 42, 0.88);
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.5);
}

/* Card Top Row */
.pec-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.pec-identity-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  flex: 1;
}

.pec-avatar-box {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: visible;
}

.pec-avatar-box img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  background: #1e293b;
}

.pec-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid #0f172a;
}

.pec-dot.inside {
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}

.pec-dot.outside {
  background: #64748b;
}

.pec-dot.school {
  background: #f59e0b;
}

.pec-dot.training {
  background: #a855f7;
}

.pec-dot.annual {
  background: #06b6d4;
}

.pec-dot.unpaid {
  background: #94a3b8;
}

.pec-names-col {
  min-width: 0;
  flex: 1;
}

.pec-name-primary {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.3;
}

.pec-full-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.1px;
}

.pec-admin-crown {
  font-size: 0.85rem;
}

.pec-sub-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  color: var(--text-dim);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pec-id-pill {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  padding: 0 4px;
  border-radius: 4px;
  font-size: 0.65rem;
}

.pec-dept {
  color: #cbd5e1;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pec-meta-sep {
  color: rgba(255, 255, 255, 0.2);
}

.pec-title {
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Card Action Col */
.pec-action-col {
  flex-shrink: 0;
}

.pec-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}

.pec-action-btn.btn-entry {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.35);
  color: #34d399;
}

.pec-action-btn.btn-entry:hover {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.5);
  color: #6ee7b7;
  transform: translateY(-1px);
}

.pec-action-btn.btn-exit {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.35);
  color: #f87171;
}

.pec-action-btn.btn-exit:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fca5a5;
  transform: translateY(-1px);
}

.pec-btn-icon {
  font-size: 0.62rem;
  line-height: 1;
}

/* Card Badges Row */
.pec-badges-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.pec-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}

.pec-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 5px #10b981;
  animation: radar-ping-anim 1.5s infinite;
}

.pec-pill-inside {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
  color: #34d399;
}

.pec-pill-outside {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.25);
  color: #f87171;
}

.pec-pill-absent {
  background: rgba(100, 116, 139, 0.15);
  border-color: rgba(100, 116, 139, 0.25);
  color: #94a3b8;
}

.pec-pill-amber {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.3);
  color: #fbbf24;
}

.pec-pill-purple {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.3);
  color: #c084fc;
}

.pec-pill-annual {
  background: rgba(6, 182, 212, 0.12);
  border-color: rgba(6, 182, 212, 0.3);
  color: #38bdf8;
}

.pec-pill-unpaid {
  background: rgba(100, 116, 139, 0.15);
  border-color: rgba(148, 163, 184, 0.3);
  color: #cbd5e1;
}

.pec-pill-late {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.3);
  color: #fde047;
}

.pec-pill-admin {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.35);
  color: #f59e0b;
}

/* Card Metrics Strip - Symmetrical 4-Cell Grid */
.pec-metrics-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.pec-m-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
  min-width: 0;
}

.pec-m-clickable {
  cursor: pointer;
  border-radius: 6px;
  padding: 1px 2px;
  transition: background 0.15s ease;
}

.pec-m-clickable:hover {
  background: rgba(99, 102, 241, 0.15);
}

.pec-m-clickable:hover .pec-punch-count {
  color: #a5b4fc;
}

.pec-m-label {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-dim);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.pec-m-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pec-punch-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 0.74rem;
  color: #94a3b8;
}

/* =====================================================================
   PRESENCE LIST / TABLE VIEW (Kompakt Yüksek Yoğunluklu Liste)
   ===================================================================== */
.presence-list-box.view-list {
  display: block;
}

.presence-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.presence-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  text-align: left;
}

.presence-table thead {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.presence-table th {
  padding: 10px 14px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  white-space: nowrap;
}

.presence-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s ease;
}

.presence-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.035);
}

.presence-table td {
  padding: 9px 14px;
  vertical-align: middle;
}

.pt-user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pt-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #1e293b;
  flex-shrink: 0;
}

.pt-user-name {
  font-weight: 700;
  color: #f8fafc;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.pt-user-sub {
  font-size: 0.68rem;
  color: var(--text-dim);
  display: flex;
  gap: 4px;
  align-items: center;
}

.pt-mono {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}

/* =====================================================================
   EMPLOYEE PUNCHES MODAL TIMELINE
   ===================================================================== */
.epm-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.epm-punch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.025);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.15s ease;
}

.epm-punch-row:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.epm-punch-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.epm-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
}

.epm-type-badge.badge-in {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.epm-type-badge.badge-out {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.epm-type-badge.badge-blocked {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.5);
}

.epm-time-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.88rem;
  font-weight: 800;
  color: #f8fafc;
}

.epm-meta-text {
  font-size: 0.72rem;
  color: var(--text-dim);
}

/* Badges for Stajyer & Eğitim */
.badge-purple {
  background: rgba(168, 85, 247, 0.15);
  color: #d8b4fe;
  border: 1px solid rgba(168, 85, 247, 0.4);
  font-weight: 600;
}

.badge-cyan {
  background: rgba(6, 182, 212, 0.15);
  color: #67e8f9;
  border: 1px solid rgba(6, 182, 212, 0.4);
  font-weight: 600;
}

.text-purple {
  color: #c084fc !important;
}

.text-cyan {
  color: #22d3ee !important;
}

/* Assignments Panel & Cards */
.assignments-container, .assignments-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 1rem;
}

.assignment-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.05rem 1.2rem;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.assignment-card:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.assignment-card.type-egitim {
  border-left: 4px solid #a855f7;
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.assignment-card.type-okul {
  border-left: 4px solid #f59e0b;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.assignment-card.type-yillik {
  border-left: 4px solid #3b82f6;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.assignment-card.type-ucretsiz {
  border-left: 4px solid #f43f5e;
  background: linear-gradient(90deg, rgba(244, 63, 94, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
}

/* ================= STATUS DESK (DURUM İŞARETLEME MASASI) ================= */
.status-hero-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.85) 100%);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: var(--radius-lg);
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.status-hero-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.status-hero-icon-orb {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(168, 85, 247, 0.2));
  border: 1px solid rgba(99, 102, 241, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.25);
  flex-shrink: 0;
}

.status-hero-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.status-hero-desc {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin: 0;
}

.status-hero-controls {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.status-date-selector-box {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.6);
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-date-quick {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-date-quick:hover {
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.4);
  color: #fff;
}

.status-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

.status-kpi-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.15rem;
  background: rgba(17, 24, 39, 0.65);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.status-kpi-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.18);
}

.status-kpi-icon {
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}

.status-kpi-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.status-kpi-val {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.2;
}

.status-subtabs-nav {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 1.25rem;
  padding-bottom: 2px;
  overflow-x: auto;
}

.status-subtab-btn {
  padding: 0.65rem 1.15rem;
  font-size: 0.85rem;
  font-weight: 700;
  background: transparent;
  border: none;
  border-bottom: 2.5px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.status-subtab-btn:hover {
  color: var(--text-main);
}

.status-subtab-btn.active {
  color: #818cf8;
  border-bottom-color: #6366f1;
}

.status-subtab-pane {
  display: none;
}

.status-subtab-pane.active {
  display: block;
  animation: fadeIn 0.2s ease-out;
}

/* Quick Marking Hub (Personel Durum İşaretleme Masası) */
.quick-mark-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 0.85rem;
}

.quick-mark-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  transition: all 0.18s ease;
  gap: 0.75rem;
}

.quick-mark-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.quick-mark-card.is-school {
  border-color: rgba(245, 158, 11, 0.5);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(15, 23, 42, 0.7) 100%);
}

.quick-mark-card.is-training {
  border-color: rgba(168, 85, 247, 0.5);
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, rgba(15, 23, 42, 0.7) 100%);
}

.quick-mark-card.is-annual {
  border-color: rgba(59, 130, 246, 0.5);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(15, 23, 42, 0.7) 100%);
}

.quick-mark-card.is-unpaid {
  border-color: rgba(244, 63, 94, 0.5);
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.1) 0%, rgba(15, 23, 42, 0.7) 100%);
}

.quick-mark-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.quick-mark-emp {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.quick-mark-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: #0f172a;
  flex-shrink: 0;
}

.quick-mark-names {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.quick-mark-name {
  font-size: 0.94rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quick-mark-meta {
  font-size: 0.72rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 4px;
}

.quick-mark-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.quick-mark-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.btn-mark {
  flex: 1 1 calc(33.333% - 0.35rem);
  min-width: 68px;
  padding: 6px 4px;
  font-size: 0.71rem;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.16s ease;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}

.btn-mark-school {
  background: rgba(245, 158, 11, 0.12);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.35);
}

.btn-mark-school:hover, .btn-mark-school.active {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  border-color: #f59e0b;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

.btn-mark-training {
  background: rgba(168, 85, 247, 0.12);
  color: #d8b4fe;
  border-color: rgba(168, 85, 247, 0.35);
}

.btn-mark-training:hover, .btn-mark-training.active {
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
  color: #ffffff;
  border-color: #a855f7;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4);
}

.btn-mark-annual {
  background: rgba(14, 165, 233, 0.12);
  color: #7dd3fc;
  border-color: rgba(14, 165, 233, 0.35);
}

.btn-mark-annual:hover, .btn-mark-annual.active {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4);
}

.btn-mark-unpaid {
  background: rgba(244, 63, 94, 0.12);
  color: #fda4af;
  border-color: rgba(244, 63, 94, 0.35);
}

.btn-mark-unpaid:hover, .btn-mark-unpaid.active {
  background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
  color: #ffffff;
  border-color: #e11d48;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.4);
}

.btn-mark-normal {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  border-color: var(--border-subtle);
}

.btn-mark-normal:hover, .btn-mark-normal.active {
  background: rgba(16, 185, 129, 0.16);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.4);
}

.assignment-card-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}

.assignment-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-subtle);
  background: #1e293b;
  flex-shrink: 0;
}

.assignment-meta-name {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.assignment-meta-sub {
  font-size: 0.74rem;
  color: var(--text-dim);
  margin-top: 2px;
}

.assignment-details-box {
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.assignment-topic {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
}

.assignment-institution {
  font-size: 0.76rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}

.assignment-dates-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
  color: var(--text-dim);
  margin-bottom: 0.85rem;
}

.assignment-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border-subtle);
}

/* 3.2 Analytics Subtabs & Containers */
.dash-subtabs-nav {
  display: flex;
  gap: 0.4rem;
  border-bottom: 1px solid var(--border-subtle);
  padding: 0.75rem 1.25rem 0 1.25rem;
  background: rgba(255, 255, 255, 0.01);
}

.dash-subtab-btn {
  padding: 0.55rem 0.95rem;
  font-size: 0.8rem;
  font-weight: 600;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.dash-subtab-btn:hover {
  color: var(--text-main);
}

.dash-subtab-btn.active {
  color: #818cf8;
  border-bottom-color: #6366f1;
}

.dash-analytics-pane {
  padding: 1.25rem 1.4rem;
}

/* Time zone indicator pills above chart */
.hourly-zones-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}

.zone-badge {
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  color: var(--text-dim);
  font-weight: 600;
}

.zone-badge.morning { border-color: rgba(99, 102, 241, 0.3); color: #a5b4fc; }
.zone-badge.lunch { border-color: rgba(6, 182, 212, 0.3); color: #67e8f9; }
.zone-badge.evening { border-color: rgba(16, 185, 129, 0.3); color: #6ee7b7; }

/* Hourly Activity Bar Chart */
.hourly-chart-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
  height: 200px;
  padding: 1rem 0.5rem 0.5rem 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

.hour-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  gap: 6px;
}

.hour-bar-track {
  width: 100%;
  max-width: 28px;
  height: 150px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  position: relative;
}

.hour-bar-fill {
  width: 100%;
  border-radius: 4px;
  background: linear-gradient(180deg, #6366f1, #3b82f6);
  transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.hour-bar-fill.peak {
  background: linear-gradient(180deg, #10b981, #06b6d4);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.45);
}

.hour-count-tag {
  font-size: 0.68rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--text-main);
  opacity: 0.9;
}

.hour-label {
  font-size: 0.68rem;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  text-align: center;
}

/* Department Progress Bars */
.dept-stat-row {
  margin-bottom: 0.9rem;
}

.dept-stat-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.dept-stat-track {
  height: 7px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.dept-stat-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, #6366f1, #06b6d4);
  transition: width 0.6s ease;
}

/* Biometric Verify Mode Pills */
.verify-modes-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.verify-mode-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  flex: 1;
  min-width: 140px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.verify-mode-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.12);
}

.verify-mode-card strong {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-main);
  font-size: 1rem;
}

/* Department & Verify Symmetrical Grid */
.dash-dept-verify-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
}

@media (max-width: 900px) {
  .dash-dept-verify-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* Live Terminal Screen Box */
.terminal-lcd-widget {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 1.75rem;
  align-items: start;
}

@media (max-width: 900px) {
  .terminal-lcd-widget {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

.lcd-preview-frame {
  width: 100%;
  max-width: 320px;
  background: #000;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  position: relative;
}

.lcd-preview-frame img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}

.lcd-live-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  color: #10b981;
}

/* Hardware Health Grid */
.hardware-health-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
  width: 100%;
}

.hw-health-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-subtle);
}

.hw-icon {
  font-size: 1.25rem;
}

.hw-info {
  display: flex;
  flex-direction: column;
}

.hw-lbl {
  font-size: 0.66rem;
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 700;
}

.hw-val {
  font-size: 0.78rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}

/* 4. Real-Time Feed & Radar System */
.badge-radar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #10b981;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

.radar-ping {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: radarWave 1.6s infinite ease-in-out;
}

@keyframes radarWave {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.4); opacity: 0.3; }
  100% { transform: scale(0.9); opacity: 0.8; }
}

.sound-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sound-toggle-btn.active {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.3);
}

.feed-filter-tabs {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.feed-filter-btn {
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-size: 0.74rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.feed-filter-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
}

.feed-filter-btn.active {
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.4);
  color: #a5b4fc;
}

.feed-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid #64748b;
  margin-bottom: 0.5rem;
  transition: transform 0.15s ease, background 0.15s ease;
}

.feed-item.feed-in {
  border-left-color: #10b981;
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
}

.feed-item.feed-out {
  border-left-color: #ef4444;
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
}

.feed-item.feed-blocked {
  border-left-color: #dc2626;
  background: linear-gradient(90deg, rgba(220, 38, 38, 0.06) 0%, rgba(255, 255, 255, 0.015) 100%);
}

.feed-item:hover {
  background: rgba(255, 255, 255, 0.04);
  transform: translateX(2px);
}

/* =====================================================================
   5. Holiday Management Module (Tatil Günleri Yönetimi) Styles
   ===================================================================== */
.holiday-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

.holiday-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.15rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.holiday-kpi-card:hover {
  transform: translateY(-2px);
  border-color: rgba(99, 102, 241, 0.4);
}

.holiday-kpi-icon {
  font-size: 1.9rem;
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.holiday-kpi-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.holiday-kpi-label {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.holiday-kpi-val {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 2px 0;
}

.holiday-kpi-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.weekday-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.weekday-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.weekday-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
}

.weekday-item.active-weekend {
  border-color: rgba(99, 102, 241, 0.45);
  background: rgba(99, 102, 241, 0.09);
}

.weekday-item input[type="checkbox"] {
  accent-color: #6366f1;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.weekday-label {
  font-weight: 600;
  font-size: 0.84rem;
  color: var(--text-main);
  flex: 1;
  margin-left: 0.75rem;
}

.weekday-tag {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-dim);
}

.weekday-tag.tag-weekend {
  background: rgba(239, 68, 68, 0.16);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.badge-purple {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.view-toggle-group .btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.view-toggle-group .btn.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 1px 4px rgba(79, 70, 229, 0.4);
}

.quick-date-pills .btn {
  border-radius: 6px;
  font-size: 0.75rem;
  padding: 4px 8px;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

.quick-date-pills .btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.quick-date-pills .btn.active {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.4);
}

.punch-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-family: var(--font-mono, monospace);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin: 1px;
}

.punch-chip.chip-in {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.25);
}

.punch-chip.chip-out {
  background: rgba(14, 165, 233, 0.12);
  color: #38bdf8;
  border-color: rgba(14, 165, 233, 0.25);
}

/* ================= FULLSCREEN MONTHLY PUANTAJ DETAIL MODAL ================= */
.modal-content.modal-fullscreen {
  max-width: 98vw !important;
  width: 98vw !important;
  height: 96vh !important;
  max-height: 96vh !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 16px !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: var(--bg-surface) !important;
  overflow: hidden !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-content.modal-fullscreen.true-fullscreen {
  max-width: 100vw !important;
  width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  border: none !important;
}

.modal-content.modal-fullscreen .modal-header {
  padding: 0.9rem 1.5rem !important;
  background: var(--bg-surface-elevated) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  flex-shrink: 0 !important;
}

.modal-content.modal-fullscreen .modal-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0.9rem 1.5rem !important;
  max-height: none !important;
  min-height: 0 !important;
  gap: 0.75rem !important;
}

.mdd-emp-switcher {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.04);
  padding: 4px 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.mdd-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.55rem;
  flex-shrink: 0;
}

.mdd-kpi-card {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.mdd-kpi-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.22);
}

.mdd-kpi-card .kpi-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.mdd-kpi-card .kpi-val {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
}

.mdd-kpi-card.highlight-accrued {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(99, 102, 241, 0.22));
  border: 1.5px solid rgba(59, 130, 246, 0.5);
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.15);
}

.mdd-kpi-card.highlight-accrued .kpi-val {
  color: #60a5fa;
  font-size: 1.45rem;
}

.mdd-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.mdd-filter-pills {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.mdd-filter-pill {
  padding: 4px 11px;
  font-size: 0.76rem;
  font-weight: 600;
  border-radius: 20px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-elevated);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.mdd-filter-pill:hover {
  color: var(--text-main);
  border-color: rgba(255, 255, 255, 0.25);
}

.mdd-filter-pill.active {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.mdd-table-container {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: rgba(11, 17, 32, 0.6);
}

.mdd-table-container table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.mdd-table-container thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #111a2e;
  border-bottom: 2px solid var(--border-subtle);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  padding: 0.75rem 0.65rem;
  font-size: 0.79rem;
  white-space: nowrap;
}

.mdd-table-container tbody td {
  padding: 0.6rem 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.83rem;
}

.mdd-table-container tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

.mdd-table-container tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 9;
  background: #131d31;
  border-top: 2px solid var(--border-subtle);
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.3);
  font-weight: 700;
  padding: 0.7rem 0.65rem;
}

.mdd-day-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.8rem;
  background: rgba(255, 255, 255, 0.06);
}

.mdd-day-pill.is-weekend {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
}

.mdd-day-pill.is-holiday {
  background: rgba(99, 102, 241, 0.22);
  color: #a5b4fc;
}

.mdd-day-pill.is-worked {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.mdd-day-pill.is-absent {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.punch-chip-stream {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
}

/* Screen Only / Print Only Utilities */
@media screen {
  .print-only-report-header,
  .print-only-signatures,
  .print-only {
    display: none !important;
  }
}

/* Professional Print Stylesheet for Official Corporate Puantaj */
@media print {
  @page {
    size: A4 landscape;
    margin: 4mm 6mm;
  }

  *,
  *::before,
  *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  html, body {
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 8.5pt !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Hide screen-only chrome */
  .sidebar,
  .app-header,
  .top-header,
  .nav-tabs,
  .filter-bar,
  .monthly-kpi-grid,
  .logs-kpi-grid,
  .kpi-grid,
  .daily-kpi-grid,
  .holiday-kpi-grid,
  .toast-container,
  button,
  .btn,
  .no-print,
  .col-photo,
  .col-actions {
    display: none !important;
  }

  /* Show print-only corporate header and signature block */
  .print-only-report-header,
  .print-only-signatures,
  .print-only {
    display: block !important;
  }

  /* Layout containers */
  body:not(.printing-mdd-modal) .app-container,
  body:not(.printing-mdd-modal) .main-content,
  body:not(.printing-mdd-modal) .tab-content,
  body:not(.printing-mdd-modal) .tab-pane,
  body:not(.printing-mdd-modal) .card,
  body:not(.printing-mdd-modal) .table-responsive {
    display: block !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  /* When printing individual employee modal: HIDE APP CONTAINER AND GENERAL PUANTAJ */
  body.printing-mdd-modal .app-container,
  body.printing-mdd-modal .tab-pane,
  body.printing-mdd-modal #monthlyPrintHeader,
  body.printing-mdd-modal #monthlyPuantajTable,
  body.printing-mdd-modal #monthlyPrintSignatures {
    display: none !important;
  }

  body:not(.printing-mdd-modal) .tab-pane:not(.active) {
    display: none !important;
  }
  body:not(.printing-mdd-modal) .modal-overlay {
    display: none !important;
  }

  /* Monthly Puantaj Table in Print */
  #monthlyPuantajTable {
    width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    font-size: 8pt !important;
    margin-top: 6px !important;
    margin-bottom: 12px !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
  }

  #monthlyPuantajTable thead {
    display: table-header-group !important;
  }

  #monthlyPuantajTable tfoot {
    display: table-footer-group !important;
  }

  #monthlyPuantajTable tr {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  #monthlyPuantajTable th,
  #monthlyPuantajTable td {
    border: 1px solid #94a3b8 !important;
    padding: 4px 6px !important;
    color: #0f172a !important;
    background: #ffffff !important;
    line-height: 1.3 !important;
  }

  #monthlyPuantajTable th {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    font-weight: 800 !important;
    font-size: 8pt !important;
    text-transform: uppercase !important;
    text-align: center !important;
  }

  #monthlyPuantajTable tbody tr:nth-child(even) td {
    background: #f8fafc !important;
  }

  #monthlyPuantajTable td.text-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  }

  /* Highlight column Hak Ediş */
  #monthlyPuantajTable th:nth-child(10),
  #monthlyPuantajTable td:nth-child(10) {
    background: #eff6ff !important;
    font-weight: 800 !important;
    color: #1d4ed8 !important;
  }

  #monthlyPuantajTable tfoot tr td {
    background: #f1f5f9 !important;
    font-weight: 800 !important;
    border-top: 2px solid #334155 !important;
  }

  /* Single Employee Modal Print styling - Guaranteed Exactly 1 A4 Landscape Page */
  body.printing-mdd-modal {
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 7.5pt !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.printing-mdd-modal .modal-overlay#monthlyDayDetailModal {
    display: block !important;
    position: static !important;
    background: #ffffff !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    inset: auto !important;
    transform: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex: none !important;
  }

  body.printing-mdd-modal .modal-overlay#monthlyDayDetailModal .modal-content {
    display: block !important;
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    background: #ffffff !important;
    color: #0f172a !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
    flex: none !important;
  }

  body.printing-mdd-modal .modal-overlay#monthlyDayDetailModal .modal-header,
  body.printing-mdd-modal .modal-overlay#monthlyDayDetailModal .modal-footer,
  body.printing-mdd-modal .modal-overlay#monthlyDayDetailModal .mdd-toolbar,
  body.printing-mdd-modal .modal-overlay#monthlyDayDetailModal .mdd-nav-controls,
  body.printing-mdd-modal .modal-overlay#monthlyDayDetailModal .btn-mdd-add-punch,
  body.printing-mdd-modal .no-print {
    display: none !important;
  }

  body.printing-mdd-modal .modal-overlay#monthlyDayDetailModal .modal-body {
    display: block !important;
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    max-height: none !important;
    min-height: 0 !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    gap: 0 !important;
    transform: none !important;
  }

  /* Printable corporate header inside modal */
  body.printing-mdd-modal #mddPrintHeader {
    display: block !important;
    margin-bottom: 3px !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  body.printing-mdd-modal #mddPrintHeader h1 {
    font-size: 11pt !important;
    margin: 0 !important;
  }

  body.printing-mdd-modal #mddPrintHeader h2 {
    font-size: 9pt !important;
    margin: 1px 0 0 0 !important;
  }

  body:not(.printing-mdd-modal) #mddPrintHeader,
  body:not(.printing-mdd-modal) #mddPrintSignatures {
    display: none !important;
  }

  /* Accrual KPI ribbon in print */
  body.printing-mdd-modal .mdd-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 3px !important;
    margin-bottom: 3px !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  body.printing-mdd-modal .mdd-kpi-card {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 3px !important;
    padding: 1px 3px !important;
    text-align: center !important;
  }

  body.printing-mdd-modal .mdd-kpi-card .kpi-label {
    font-size: 5.4pt !important;
    color: #475569 !important;
    font-weight: 700 !important;
    display: block !important;
    line-height: 1.05 !important;
  }

  body.printing-mdd-modal .mdd-kpi-card .kpi-val {
    font-size: 7.2pt !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.05 !important;
  }

  body.printing-mdd-modal .mdd-kpi-card.highlight-accrued {
    background: #eff6ff !important;
    border: 1.5px solid #2563eb !important;
  }

  body.printing-mdd-modal .mdd-kpi-card.highlight-accrued .kpi-val {
    color: #1d4ed8 !important;
    font-size: 8pt !important;
  }

  /* Table styling */
  body.printing-mdd-modal .mdd-table-container {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    border: 1px solid #94a3b8 !important;
    margin-top: 0 !important;
    margin-bottom: 3px !important;
  }

  body.printing-mdd-modal #mddTable {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 6pt !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
  }

  body.printing-mdd-modal #mddTable thead {
    display: table-header-group !important;
  }

  /* CRITICAL: Use table-row-group to stop tfoot from duplicating and overlapping middle rows */
  body.printing-mdd-modal #mddTable tfoot {
    display: table-row-group !important;
  }

  body.printing-mdd-modal #mddTable tr {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    height: 14px !important;
  }

  body.printing-mdd-modal #mddTable th,
  body.printing-mdd-modal #mddTable td {
    border: 1px solid #cbd5e1 !important;
    padding: 0.5px 2.5px !important;
    color: #0f172a !important;
    background: #ffffff !important;
    line-height: 1.1 !important;
    vertical-align: middle !important;
  }

  body.printing-mdd-modal #mddTable th {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    font-weight: 800 !important;
    font-size: 6.2pt !important;
    text-transform: uppercase !important;
    text-align: center !important;
    border-bottom: 1.5px solid #64748b !important;
    padding: 1.5px 2.5px !important;
  }

  body.printing-mdd-modal #mddTable tbody tr:nth-child(even) td {
    background: #f8fafc !important;
  }

  body.printing-mdd-modal #mddTable tfoot td {
    background: #f1f5f9 !important;
    font-weight: 800 !important;
    border-top: 1.5px solid #475569 !important;
    padding: 1.5px 2.5px !important;
    font-size: 6.2pt !important;
  }

  body.printing-mdd-modal #mddTable .mdd-day-pill {
    display: inline-block !important;
    font-weight: 800 !important;
    font-size: 5.8pt !important;
    width: 13px !important;
    height: 13px !important;
    line-height: 13px !important;
    text-align: center !important;
    border-radius: 50% !important;
  }

  body.printing-mdd-modal #mddTable .mdd-day-pill.is-worked {
    background: #dcfce7 !important;
    color: #15803d !important;
  }
  body.printing-mdd-modal #mddTable .mdd-day-pill.is-weekend {
    background: #f1f5f9 !important;
    color: #64748b !important;
  }
  body.printing-mdd-modal #mddTable .mdd-day-pill.is-holiday {
    background: #ede9fe !important;
    color: #6d28d9 !important;
  }
  body.printing-mdd-modal #mddTable .mdd-day-pill.is-absent {
    background: #fee2e2 !important;
    color: #b91c1c !important;
  }

  body.printing-mdd-modal #mddTable .punch-badge {
    display: inline-block !important;
    padding: 0 2px !important;
    font-size: 5.8pt !important;
    font-weight: 700 !important;
    border-radius: 2px !important;
  }
  body.printing-mdd-modal #mddTable .punch-badge.in {
    background: #ecfdf5 !important;
    color: #065f46 !important;
    border: 1px solid #a7f3d0 !important;
  }
  body.printing-mdd-modal #mddTable .punch-badge.out {
    background: #f0f9ff !important;
    color: #0369a1 !important;
    border: 1px solid #bae6fd !important;
  }

  body.printing-mdd-modal #mddTable .badge {
    display: inline-block !important;
    padding: 0 2px !important;
    font-size: 5.5pt !important;
    border-radius: 2px !important;
    border: 1px solid #cbd5e1 !important;
  }
  body.printing-mdd-modal #mddTable .badge.badge-danger {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border-color: #fca5a5 !important;
  }
  body.printing-mdd-modal #mddTable .badge.badge-warning {
    background: #fef3c7 !important;
    color: #92400e !important;
    border-color: #fde68a !important;
  }
  body.printing-mdd-modal #mddTable .badge.badge-info {
    background: #e0e7ff !important;
    color: #3730a3 !important;
    border-color: #c7d2fe !important;
  }
  body.printing-mdd-modal #mddTable .badge.badge-secondary {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border-color: #cbd5e1 !important;
  }

  body.printing-mdd-modal #mddTable .punch-chip-stream {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    align-items: center !important;
  }

  body.printing-mdd-modal #mddTable .punch-chip {
    font-size: 5.3pt !important;
    padding: 0 2px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 2px !important;
    color: #0f172a !important;
    background: #ffffff !important;
    white-space: nowrap !important;
    line-height: 1.15 !important;
  }

  body.printing-mdd-modal #mddTable .punch-chip.chip-in {
    background: #ecfdf5 !important;
    border-color: #10b981 !important;
    color: #065f46 !important;
    font-weight: 700 !important;
  }

  body.printing-mdd-modal #mddTable .punch-chip.chip-out {
    background: #f0f9ff !important;
    border-color: #0ea5e9 !important;
    color: #0369a1 !important;
    font-weight: 700 !important;
  }

  /* Signatures & Declaration Block */
  body.printing-mdd-modal #mddPrintSignatures {
    display: block !important;
    margin-top: 3px !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  body.printing-mdd-modal #mddPrintSignatures > div:first-child {
    font-size: 5.8pt !important;
    margin-bottom: 3px !important;
    line-height: 1.15 !important;
  }

  body.printing-mdd-modal #mddPrintSignatures > div:last-child > div {
    padding: 3px 8px !important;
  }

  body.printing-mdd-modal #mddPrintSignatures > div:last-child > div > div:nth-child(2) {
    margin-bottom: 15px !important;
  }
}

/* ==========================================================================
   STAJYER / MESEM ÖĞRENCİLERİ & OKUL GÜNLERİ PROGRAMI STİLLERİ
   ========================================================================== */
.intern-management-card {
  border: 1px solid rgba(14, 165, 233, 0.28) !important;
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.05) 0%, rgba(15, 23, 42, 0.45) 100%) !important;
  box-shadow: 0 4px 20px -2px rgba(14, 165, 233, 0.08);
}

.intern-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.25) 0%, rgba(99, 102, 241, 0.25) 100%);
  border: 1px solid rgba(14, 165, 233, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 0 15px rgba(14, 165, 233, 0.2);
  flex-shrink: 0;
}

.interns-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 1.1rem;
}

.intern-card {
  background: var(--bg-card, #1e293b);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: all 0.2s ease-in-out;
  position: relative;
  overflow: hidden;
}

.intern-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0ea5e9, #6366f1);
  opacity: 0.8;
}

.intern-card:hover {
  transform: translateY(-2px);
  border-color: rgba(14, 165, 233, 0.4);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.4);
}

.intern-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.intern-avatar {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid rgba(14, 165, 233, 0.4);
  background: #0f172a;
  flex-shrink: 0;
}

.intern-info {
  flex: 1;
  min-width: 0;
}

.intern-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main, #f8fafc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}

.intern-meta {
  font-size: 0.75rem;
  color: var(--text-dim, #94a3b8);
  margin-top: 2px;
}

.intern-school-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.03);
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.intern-school-input {
  background: transparent;
  border: none;
  color: var(--text-main, #f8fafc);
  font-size: 0.8rem;
  font-weight: 500;
  width: 100%;
  outline: none;
}

.intern-school-input::placeholder {
  color: var(--text-dim, #64748b);
  font-style: italic;
}

.intern-school-input:focus {
  color: #38bdf8;
}

.intern-days-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(0, 0, 0, 0.18);
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.intern-days-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.73rem;
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
}

.intern-days-pills {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.intern-day-pill {
  flex: 1;
  min-width: 38px;
  padding: 6px 2px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted, #94a3b8);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all 0.18s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.intern-day-pill:hover {
  background: rgba(14, 165, 233, 0.15);
  border-color: rgba(14, 165, 233, 0.4);
  color: #38bdf8;
  transform: translateY(-1px);
}

.intern-day-pill.active {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.45);
  font-weight: 800;
}

.intern-day-pill.active::after {
  content: "OKUL";
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  opacity: 0.9;
  margin-top: 1px;
}

.intern-today-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}

.intern-today-status.school {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.intern-today-status.work {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.intern-today-status.weekend {
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.intern-actions-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Modal Stajyer Toggle & Selector Styles */
.emp-type-toggle-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.3rem;
}

.emp-type-radio-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  user-select: none;
}

.emp-type-radio-btn input[type="radio"] {
  display: none;
}

.emp-type-radio-btn .icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.emp-type-radio-btn .info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.emp-type-radio-btn .info strong {
  font-size: 0.85rem;
  color: var(--text-main, #f8fafc);
}

.emp-type-radio-btn .info small {
  font-size: 0.7rem;
  color: var(--text-dim, #94a3b8);
}

.emp-type-radio-btn:hover {
  border-color: rgba(14, 165, 233, 0.4);
  background: rgba(14, 165, 233, 0.06);
}

.emp-type-radio-btn.active {
  border-color: #0ea5e9 !important;
  background: rgba(14, 165, 233, 0.14) !important;
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.25);
}

.emp-type-radio-btn.active .info strong {
  color: #38bdf8;
}

/* Stajyer Details Box in Modal */
.stajyer-details-box {
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.08) 0%, rgba(15, 23, 42, 0.35) 100%);
  border: 1px solid rgba(14, 165, 233, 0.35);
  border-radius: 11px;
  padding: 1rem 1.15rem;
  margin-top: 0.5rem;
  animation: fadeInDown 0.25s ease-out;
}

.stajyer-box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.85rem;
}

.stajyer-box-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #38bdf8;
  display: flex;
  align-items: center;
  gap: 6px;
}

.stajyer-box-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(14, 165, 233, 0.2);
  color: #7dd3fc;
  border: 1px solid rgba(14, 165, 233, 0.35);
}

.school-days-pills-selector {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-top: 0.3rem;
}

.day-pill-btn {
  padding: 8px 4px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted, #94a3b8);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all 0.18s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  user-select: none;
}

.day-pill-btn small {
  font-size: 0.62rem;
  font-weight: 500;
  opacity: 0.75;
}

.day-pill-btn:hover {
  background: rgba(14, 165, 233, 0.15);
  border-color: rgba(14, 165, 233, 0.4);
  color: #38bdf8;
  transform: translateY(-1px);
}

.day-pill-btn.active {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.45);
}

.selected-days-counter {
  font-size: 0.72rem;
  font-weight: 700;
  color: #38bdf8;
}

/* ==========================================================================
   PDKS Pro - Authentication & User Management Design System
   ========================================================================== */

/* Fullscreen Login Gateway Overlay */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #07090e;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease;
  overflow-y: auto;
  padding: 1.5rem;
}

.login-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Ambient Radial Mesh Background */
.login-mesh-bg {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 50% 15%, rgba(99, 102, 241, 0.22) 0%, transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(6, 182, 212, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 20% 70%, rgba(16, 185, 129, 0.10) 0%, transparent 50%);
  pointer-events: none;
  animation: pulseGlow 12s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
  0% { transform: scale(1) translate(0, 0); opacity: 0.8; }
  100% { transform: scale(1.08) translate(-1%, 2%); opacity: 1; }
}

/* Login Card Container */
.login-card-container {
  position: relative;
  width: 100%;
  max-width: 440px;
  z-index: 2;
  margin: auto;
}

/* Glassmorphism Login Card */
.login-card {
  background: rgba(17, 24, 39, 0.82);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  box-shadow: 
    0 25px 60px -15px rgba(0, 0, 0, 0.75),
    0 0 40px rgba(99, 102, 241, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  padding: 2.25rem 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  animation: loginEntrance 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes loginEntrance {
  0% { opacity: 0; transform: translateY(22px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Brand Header */
.login-brand-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 1.5rem;
}

.login-biometric-icon-wrap {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(6, 182, 212, 0.2) 100%);
  border: 1px solid rgba(99, 102, 241, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #818cf8;
  margin-bottom: 0.85rem;
  box-shadow: 0 8px 24px -4px rgba(79, 70, 229, 0.4);
}

.login-biometric-icon {
  width: 32px;
  height: 32px;
}

.login-glow-ring {
  position: absolute;
  inset: -3px;
  border-radius: 21px;
  border: 1.5px solid rgba(99, 102, 241, 0.5);
  filter: blur(2px);
  opacity: 0.6;
}

.login-app-title {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 0;
  background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.login-app-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 2px;
  margin-bottom: 0.75rem;
}

.login-terminal-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  font-size: 0.72rem;
  font-weight: 600;
  color: #34d399;
}

/* Form Styles */
.login-title-row {
  margin-bottom: 1.25rem;
  text-align: left;
}

.login-form-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #f8fafc;
  margin: 0;
}

.login-form-desc {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: 2px;
}

.login-alert-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 12px;
  color: #fca5a5;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 1.1rem;
  animation: shakeAlert 0.4s ease-in-out;
}

@keyframes shakeAlert {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.login-alert-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #ef4444;
}

.login-group {
  margin-bottom: 1.1rem;
}

.login-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #cbd5e1;
  margin-bottom: 6px;
}

.login-label-split {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

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

.login-input-icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: #64748b;
  pointer-events: none;
  transition: color 0.15s ease;
}

.login-control {
  width: 100%;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 0.72rem 2.8rem 0.72rem 2.6rem;
  color: #f8fafc;
  font-size: 0.92rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
  box-sizing: border-box;
}

.login-control:focus {
  outline: none;
  background: rgba(15, 23, 42, 0.95);
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

.login-control:focus + .login-input-icon,
.login-input-wrap:focus-within .login-input-icon {
  color: #818cf8;
}

.btn-pwd-peek {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}

.btn-pwd-peek:hover {
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.05);
}

.icon-eye-svg {
  width: 18px;
  height: 18px;
}

.login-options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.35rem;
}

.login-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.login-checkbox {
  accent-color: #4f46e5;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.login-remember-text {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Action Button */
.btn-login-action {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.85rem 1.5rem;
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(79, 70, 229, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.btn-login-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(79, 70, 229, 0.55);
  filter: brightness(1.08);
}

.btn-login-action:active {
  transform: translateY(0);
}

.btn-login-action:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.login-btn-arrow {
  width: 18px;
  height: 18px;
  transition: transform 0.18s ease;
}

.btn-login-action:hover .login-btn-arrow {
  transform: translateX(3px);
}

/* Quick Default Hint */
.login-quick-hint {
  margin-top: 1.25rem;
  display: flex;
  justify-content: center;
}

.login-hint-content {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px dashed rgba(99, 102, 241, 0.3);
  font-size: 0.78rem;
  color: #c7d2fe;
}

.hint-key-icon {
  font-size: 0.9rem;
}

.login-card-footer {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-dim);
}

/* Header User Profile Menu Container */
.user-profile-menu-container {
  position: relative;
  display: inline-block;
}

.user-profile-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 10px 4px 5px;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: #f1f5f9;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.user-profile-btn:hover {
  background: rgba(51, 65, 85, 0.9);
  border-color: rgba(99, 102, 241, 0.4);
}

.user-avatar-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.user-profile-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  line-height: 1.1;
}

.user-display-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #f8fafc;
}

.user-role-badge {
  font-size: 0.65rem;
  font-weight: 600;
  color: #a5b4fc;
}

.user-chevron-icon {
  width: 14px;
  height: 14px;
  color: #94a3b8;
  transition: transform 0.2s ease;
}

.user-profile-menu-container.open .user-chevron-icon {
  transform: rotate(180deg);
}

/* User Dropdown Menu */
.user-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 230px;
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.65);
  padding: 6px;
  z-index: 1000;
  display: none;
  flex-direction: column;
  animation: dropdownFadeIn 0.18s ease-out;
}

.user-profile-menu-container.open .user-dropdown-menu {
  display: flex;
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.user-dropdown-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
}

.dropdown-avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  color: #ffffff;
  flex-shrink: 0;
}

.dropdown-user-details {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dropdown-user-details strong {
  font-size: 0.85rem;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-user-details span {
  font-size: 0.72rem;
  color: var(--text-dim);
}

.user-dropdown-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 0;
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  border-radius: 8px;
  color: #e2e8f0;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, color 0.12s ease;
}

.user-dropdown-item svg {
  width: 16px;
  height: 16px;
  color: #94a3b8;
  transition: color 0.12s;
}

.user-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.user-dropdown-item:hover svg {
  color: #818cf8;
}

.user-dropdown-item.text-danger:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}

.user-dropdown-item.text-danger:hover svg {
  color: #ef4444;
}

/* User Management Roles & Badges */
.badge-role-admin {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.35);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-block;
}

.badge-role-operator {
  background: rgba(6, 182, 212, 0.15);
  color: #67e8f9;
  border: 1px solid rgba(6, 182, 212, 0.3);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-block;
}