/* Modern HR Management System - Professional Design System */
:root {
  /* Primary Colors - Professional blue palette */
  --primary-50: #e3f2fd;
  --primary-100: #bbdefb;
  --primary-200: #90caf9;
  --primary-300: #64b5f6;
  --primary-400: #42a5f5;
  --primary-500: #2196f3;
  --primary-600: #1e88e5;
  --primary-700: #1976d2;
  --primary-800: #1565c0;
  --primary-900: #0d47a1;

  /* Secondary Colors - Complementary teal palette */
  --secondary-50: #e0f2f1;
  --secondary-100: #b2dfdb;
  --secondary-200: #80cbc4;
  --secondary-300: #4db6ac;
  --secondary-400: #26a69a;
  --secondary-500: #009688;
  --secondary-600: #00897b;
  --secondary-700: #00796b;
  --secondary-800: #00695c;
  --secondary-900: #004d40;
  
  /* Success Colors - Professional green */
  --success-50: #e8f5e9;
  --success-100: #c8e6c9;
  --success-200: #a5d6a7;
  --success-300: #81c784;
  --success-400: #66bb6a;
  --success-500: #4caf50;
  --success-600: #43a047;
  --success-700: #388e3c;
  --success-800: #2e7d32;
  --success-900: #1b5e20;
  
  /* Warning Colors - Amber palette */
  --warning-50: #fff8e1;
  --warning-100: #ffecb3;
  --warning-200: #ffe082;
  --warning-300: #ffd54f;
  --warning-400: #ffca28;
  --warning-500: #ffc107;
  --warning-600: #ffb300;
  --warning-700: #ffa000;
  --warning-800: #ff8f00;
  --warning-900: #ff6f00;
  
  /* Danger Colors - Professional red */
  --danger-50: #ffebee;
  --danger-100: #ffcdd2;
  --danger-200: #ef9a9a;
  --danger-300: #e57373;
  --danger-400: #ef5350;
  --danger-500: #f44336;
  --danger-600: #e53935;
  --danger-700: #d32f2f;
  --danger-800: #c62828;
  --danger-900: #b71c1c;
  
  /* Info Colors - Professional cyan */
  --info-50: #e1f5fe;
  --info-100: #b3e5fc;
  --info-200: #81d4fa;
  --info-300: #4fc3f7;
  --info-400: #29b6f6;
  --info-500: #03a9f4;
  --info-600: #039be5;
  --info-700: #0288d1;
  --info-800: #0277bd;
  --info-900: #01579b;
  
  /* Neutral Colors - Professional grayscale */
  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #eeeeee;
  --neutral-300: #e0e0e0;
  --neutral-400: #bdbdbd;
  --neutral-500: #9e9e9e;
  --neutral-600: #757575;
  --neutral-700: #616161;
  --neutral-800: #424242;
  --neutral-900: #212121;
  
  /* Enhanced Professional Colors */
  --professional-dark: #2c3e50;
  --professional-darker: #1a2530;
  --professional-light: #ecf0f1;
  --professional-accent: #3498db;
  
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  
  --font-family-sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;
  
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15), 0 5px 10px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 30px rgba(0, 0, 0, 0.15), 0 10px 15px rgba(0, 0, 0, 0.1);
  
  /* Z-index levels */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  
  /* Transition speeds */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;
}

/* Single-line Pagination Bar */
.pagination-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
}

.pagination-left {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.pagination-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-md);
}

.page-jump-form {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.page-jump-label {
  white-space: nowrap;
}

.page-jump-input {
  width: 70px;
}

.pagination-links {
  display: inline-flex;
  align-items: center;
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-sans);
  background: linear-gradient(135deg, var(--neutral-50) 0%, var(--primary-50) 100%);
  color: var(--neutral-800);
  margin: 0;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  overflow-x: hidden;
}

/* Sidebar Navigation */
.sidebar {
  width: 250px;
  background: white;
  box-shadow: var(--shadow-lg);
  border-right: 1px solid var(--neutral-200);
  position: fixed;
  height: 100vh;
  z-index: var(--z-fixed);
  display: flex;
  flex-direction: column;
  transition: all var(--transition-normal);
}

.sidebar-header {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--neutral-200);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: var(--font-size-lg);
  background: linear-gradient(135deg, var(--professional-dark), var(--primary-700));
  color: white;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  box-shadow: var(--shadow-md);
  min-height: 60px;
}

.sidebar-logo {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--professional-accent), var(--primary-600));
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.sidebar-title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.5px;
}

.sidebar-menu {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-md) 0;
}

.sidebar-menu-item {
  margin-bottom: var(--spacing-xs);
}

.sidebar-menu-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-lg);
  text-decoration: none;
  color: var(--neutral-700);
  font-weight: var(--font-weight-semibold);
  transition: all var(--transition-fast);
  font-size: var(--font-size-base);
  position: relative;
  border-radius: var(--radius-sm);
  margin: 0 var(--spacing-xs);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  letter-spacing: 0.03em;
  border-left: 3px solid transparent;
}

.sidebar-menu-link:hover {
  background-color: var(--primary-50);
  color: var(--primary-700);
  border-left: 3px solid var(--primary-500);
  transform: translateX(3px);
}

.sidebar-menu-link.active {
  background-color: var(--primary-100);
  color: var(--primary-700);
  border-left: 3px solid var(--primary-600);
  font-weight: var(--font-weight-bold);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sidebar-menu-link-icon {
  font-size: var(--font-size-lg);
  width: 24px;
  text-align: center;
}

/* Dropdown Menu */
.dropdown-toggle {
  position: relative;
  cursor: pointer;
}

.dropdown-toggle::after {
  content: "▼";
  font-size: var(--font-size-xs);
  margin-left: auto;
  transition: transform var(--transition-fast);
  color: var(--neutral-500);
}

.dropdown-toggle.active::after {
  transform: rotate(180deg);
  color: var(--primary-500);
}

.dropdown-menu {
  background-color: var(--neutral-50);
  padding: var(--spacing-sm) 0;
  display: none;
  border-radius: var(--radius-sm);
  margin: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--neutral-200);
  animation: fadeIn 0.2s ease-in-out;
}

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

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

.dropdown-menu.show {
  display: block;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) calc(var(--spacing-lg) + 32px);
  text-decoration: none;
  color: var(--neutral-700);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-fast);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
  margin: 0 var(--spacing-xs);
  position: relative;
}

.dropdown-item:hover {
  background-color: var(--neutral-200);
  color: var(--primary-600);
  transform: translateX(2px);
}

.dropdown-item.active {
  background-color: var(--primary-100);
  color: var(--primary-600);
  border-left: 2px solid var(--primary-500);
}

/* User Section */
.sidebar-user {
  padding: var(--spacing-lg);
  border-top: 1px solid var(--neutral-200);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.user-avatar {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--primary-400), var(--primary-600));
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

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

.user-name {
  font-weight: var(--font-weight-semibold);
  color: var(--neutral-800);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  font-size: var(--font-size-xs);
  color: var(--neutral-600);
}

/* Sidebar Toggle Button */
.sidebar-toggle {
  display: none;
  background: var(--primary-600);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--spacing-sm);
  font-size: var(--font-size-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.sidebar-toggle:hover {
  background: var(--primary-700);
}

/* Sidebar Hide Toggle Button */
.sidebar-hide-toggle {
  position: absolute;
  top: 50%;
  right: -16px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  color: white;
  border: 2px solid white;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index: var(--z-dropdown);
  transition: all var(--transition-fast);
}

.sidebar-hide-toggle:hover {
  background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
  transform: translateY(-50%) scale(1.1);
}

.sidebar.collapsed {
  width: 70px;
  box-shadow: var(--shadow-md);
}

.sidebar.collapsed .sidebar-title,
.sidebar.collapsed .sidebar-menu-link span:not(.sidebar-menu-link-icon),
.sidebar.collapsed .user-info {
  display: none;
}

.sidebar.collapsed .sidebar-logo {
  font-size: var(--font-size-lg);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar.collapsed .dropdown-menu {
  position: absolute;
  left: 70px;
  top: 0;
  background: white;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
  min-width: 200px;
  z-index: var(--z-dropdown);
  padding: var(--spacing-sm) 0;
  border: 1px solid var(--neutral-200);
  animation: slideIn 0.2s ease-in-out;
}

/* Ensure dropdowns are positioned relative to their parent when sidebar is collapsed */
.sidebar.collapsed .sidebar-menu-item {
  position: relative;
  z-index: calc(var(--z-dropdown) - 1);
}

.main-content.sidebar-collapsed {
  margin-left: 90px;
}

/* Main Content */
.main-content {
  flex: 1;
  margin-left: 250px;
  transition: margin var(--transition-normal);
  padding: 0 var(--spacing-md);
  overflow-x: hidden;
}

.top-header {
  background: linear-gradient(to right, var(--professional-light), white);
  box-shadow: var(--shadow-md);
  border-bottom: 1px solid var(--neutral-200);
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  min-height: 60px;
}

.top-header-title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--professional-dark);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.top-header-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.datetime-display {
  font-size: var(--font-size-sm);
  color: var(--neutral-700);
  font-weight: var(--font-weight-medium);
  background: var(--neutral-100);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.main-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--spacing-sm);
  background: transparent;
  margin-bottom: var(--spacing-md);
  margin-right: var(--spacing-md);
  overflow-x: hidden;
}

/* Breadcrumb */
.breadcrumb {
  background: linear-gradient(135deg, var(--primary-50), var(--neutral-100));
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-sm);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--primary-200);
  font-weight: var(--font-weight-medium);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.breadcrumb a {
  color: var(--primary-700);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  transition: color var(--transition-fast);
}

.breadcrumb a:hover {
  color: var(--primary-800);
  text-decoration: none;
}

.breadcrumb strong {
  color: var(--neutral-700);
  font-weight: var(--font-weight-medium);
}

.breadcrumb::before {
  content: "📍";
  font-size: var(--font-size-sm);
  color: var(--primary-600);
  margin-right: var(--spacing-xs);
}

/* Cards */
.card {
  background: white;
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  margin-bottom: var(--spacing-md);
  border: 1px solid var(--neutral-200);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.card-header {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--primary-200);
  background: linear-gradient(to bottom, var(--primary-50), white);
}

.card-header h3.card-title {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--professional-dark);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.02em;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  color: white;
  border: 1px solid var(--primary-700);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-outline-primary {
  background-color: transparent;
  color: var(--primary-600);
  border-color: var(--primary-600);
  border-width: 2px;
}

.btn-outline-primary:hover {
  background-color: var(--primary-100);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-success {
  background-color: var(--success-600);
  color: white;
}

.btn-success:hover {
  background-color: var(--success-700);
}

.btn-danger {
  background-color: var(--danger-600);
  color: white;
}

.btn-danger:hover {
  background-color: var(--danger-700);
}

.btn-sm {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
}

/* Forms */
.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: var(--font-weight-medium);
  color: var(--neutral-800);
}

.form-control {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-md);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  transition: border-color var(--transition-fast);
}

.form-control:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.form-control-sm {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
}

.form-text {
  display: block;
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--neutral-600);
}

.form-check {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
}

.form-check-input {
  margin: 0;
}

.form-check-label {
  font-weight: var(--font-weight-medium);
}

/* Tables */
.table-responsive {
  overflow-x: auto;
  overflow-y: visible;
  /* Allow dropdowns to overflow the table container */
}

/* Special class for tables with action dropdowns */
.table-with-actions {
  overflow: visible;
}

.table-with-actions td {
  overflow: visible;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  table-layout: auto;
  /* Ensure table allows dropdowns to overflow */
  overflow: visible;
}

th, td {
  padding: var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--neutral-200);
  /* Allow cell content to overflow when needed */
  overflow: visible;
}

th {
  background-color: var(--neutral-100);
  font-weight: var(--font-weight-semibold);
  color: var(--neutral-800);
  position: relative;
}

tr:last-child td {
  border-bottom: none;
}

tr:hover {
  background-color: var(--neutral-50);
}

/* Compact table variant */
.table-compact {
  font-size: var(--font-size-sm);
  margin: 0;
}

.table-compact th,
.table-compact td {
  padding: var(--spacing-md);
  vertical-align: middle;
}

.table-compact th {
  background-color: var(--neutral-100);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  border-bottom: 2px solid var(--neutral-200);
}

.table-compact tbody tr:hover {
  background-color: var(--neutral-50);
}

/* Alerts */
.alert {
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
}

.alert-info {
  background-color: var(--info-50);
  color: var(--info-800);
  border: 1px solid var(--info-200);
}

.alert-success {
  background-color: var(--success-50);
  color: var(--success-800);
  border: 1px solid var(--success-200);
}

.alert-warning {
  background-color: var(--warning-50);
  color: var(--warning-800);
  border: 1px solid var(--warning-200);
}

.alert-danger {
  background-color: var(--danger-50);
  color: var(--danger-800);
  border: 1px solid var(--danger-200);
}

/* Stats */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}



.stat-card {
  background: white;
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  text-align: center;
  border: 1px solid var(--neutral-200);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.stat-number {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--professional-dark);
  margin: 0 0 var(--spacing-xs);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--neutral-700);
  margin: 0;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
}

/* Variant stat cards - align with simplified design.
   These classes add a coloured top border to stat cards to
   communicate different semantic contexts (primary, success,
   warning, secondary, danger, info). */
.stat-card--primary {
  border-top: 4px solid var(--primary-500);
  background: linear-gradient(to bottom, var(--primary-50), white);
}

.stat-card--success {
  border-top: 4px solid var(--success-500);
  background: linear-gradient(to bottom, var(--success-50), white);
}

.stat-card--warning {
  border-top: 4px solid var(--warning-500);
  background: linear-gradient(to bottom, var(--warning-50), white);
}

.stat-card--secondary {
  border-top: 4px solid var(--neutral-500);
  background: linear-gradient(to bottom, var(--neutral-50), white);
}

.stat-card--danger {
  border-top: 4px solid var(--danger-500);
  background: linear-gradient(to bottom, var(--danger-50), white);
}

.stat-card--info {
  border-top: 4px solid var(--primary-300);
  background: linear-gradient(to bottom, var(--info-50), white);
}

/* Action dropdown styles
   These classes mirror the simplified design's action dropdown,
   allowing table rows or other components to display a contextual menu
   without interfering with other dropdowns. */
.action-dropdown {
  position: static;
  display: inline-block;
}

.action-dropdown-toggle {
  cursor: pointer;
  background-color: var(--primary-500);
  color: white;
  border: none;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-width: 70px;
  justify-content: center;
  font-weight: var(--font-weight-medium);
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 10;
}

.action-dropdown-toggle:hover {
  background-color: var(--primary-600);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.action-dropdown-toggle:focus {
  outline: none;
  background-color: var(--primary-600);
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.2);
}

.action-dropdown-toggle::after {
  content: "▼";
  font-size: 10px;
  margin-left: 4px;
  transition: transform 0.2s ease;
}

.action-dropdown-toggle.active::after {
  transform: rotate(180deg);
}

.action-dropdown-menu {
  position: fixed;
  z-index: 9999;
  display: none;
  min-width: 120px;
  max-width: 160px;
  padding: 4px 0;
  margin: 0;
  font-size: 13px;
  color: var(--neutral-800);
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.action-dropdown-menu.show {
  display: block;
}

.action-dropdown-menu .dropdown-item {
  display: block;
  width: 100%;
  padding: 6px 12px;
  text-decoration: none;
  color: #333;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
}

.action-dropdown-menu .dropdown-item:hover {
  background-color: #f8f9fa;
  color: #007bff;
}

/* Fix positioning when dropdowns are embedded in table cells */
.action-cell {
  position: relative;
  overflow: visible !important;
  padding: 2px 0;
  vertical-align: middle;
  height: 100%;
}

.action-dropdown {
  position: static;
  display: inline-block;
}

/* Ensure table cells allow overflow for dropdowns */
table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  table-layout: auto;
  /* Critical: Allow dropdowns to overflow table boundaries */
  overflow: visible;
}

/* Enhanced table support for action dropdowns */
.table-with-actions {
  overflow: visible !important;
  position: relative;
}

.table-with-actions td {
  overflow: visible !important;
  position: relative;
  vertical-align: middle;
}

.table-with-actions .action-cell {
  overflow: visible !important;
  position: relative;
  z-index: 1;
  vertical-align: middle;
  height: 100%;
}

.table-with-actions .action-cell:hover {
  z-index: calc(var(--z-dropdown) + 5);
}

.table-responsive {
  overflow-x: auto;
  overflow-y: visible;
  /* Critical: Prevent clipping of floating dropdowns */
  position: relative;
}

/* Progress Bars
   These classes provide visual indicators for report data, mirroring the
   simplified design's progress bars. They allow dynamic widths via
   inline styles or width classes and use the colour palette to
   communicate context (primary, success, warning). */
.progress-bar {
  width: 100%;
  height: 20px;
  background: var(--neutral-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: var(--spacing-xs);
}

.progress-fill {
  height: 100%;
  background: var(--primary-500);
  transition: width var(--transition-normal);
}

/* Semantic variants for progress bars */
.progress-fill.gender-male {
  background: var(--primary-500);
}

.progress-fill.gender-female {
  background: var(--success-500);
}

.progress-fill.age-young {
  background: var(--success-500);
}

.progress-fill.age-mid {
  background: var(--warning-500);
}

.progress-fill.age-senior {
  background: var(--primary-500);
}

.progress-fill.religion-bar {
  background: var(--primary-300);
}

.progress-fill.category-high {
  background: var(--success-500);
}

.progress-fill.category-mid {
  background: var(--warning-500);
}

.progress-fill.category-low {
  background: var(--primary-500);
}

/* Width utility classes for progress bars - eliminates need for inline styles */
.w-0 { width: 0%; }
.w-5 { width: 5%; }
.w-10 { width: 10%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.w-45 { width: 45%; }
.w-50 { width: 50%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-85 { width: 85%; }
.w-90 { width: 90%; }
.w-95 { width: 95%; }
.w-100 { width: 100%; }

/*
 * Additional report-specific helpers
 *
 * The following styles provide visual cues for the analytics and reports
 * throughout the application. They were originally part of the simplified
 * stylesheet and are needed here to ensure that all reports render
 * correctly now that the app uses a unified CSS file. These helpers
 * include row highlights for peak/low months, trend indicators, reason
 * badges, vacancy rate colouring, duration labels and an absconder status.
 */

/* Row highlight classes used in monthly joinings reports */
.peak-month {
  background: var(--success-50);
  border-left: 4px solid var(--success-500);
}

.low-month {
  background: var(--danger-50);
  border-left: 4px solid var(--danger-500);
}

/* Trend indicators for leaving and joining reports */
.trend-up {
  background-color: var(--danger-100);
  color: var(--danger-800);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-medium);
}

.trend-down {
  background-color: var(--success-100);
  color: var(--success-800);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-medium);
}

.trend-stable {
  background-color: var(--neutral-100);
  color: var(--neutral-800);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-medium);
}

/* Reason badges used in leaving trends */
.reason-badge {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  display: inline-block;
}

.reason-retirement {
  background-color: var(--primary-100);
  color: var(--primary-800);
}

.reason-resignation {
  background-color: var(--warning-100);
  color: var(--warning-800);
}

/* If the info palette is not available fallback to primary */
.reason-transfer {
  background-color: var(--info-100);
  color: var(--info-800);
}

.reason-termination {
  background-color: var(--danger-100);
  color: var(--danger-800);
}

/* Vacancy rate colour coding for sanctioned posts */
.vacancy-rate.high-vacancy {
  color: var(--danger-600);
  font-weight: var(--font-weight-semibold);
}

.vacancy-rate.medium-vacancy {
  color: var(--warning-600);
  font-weight: var(--font-weight-semibold);
}

.vacancy-rate.low-vacancy {
  color: var(--success-600);
  font-weight: var(--font-weight-semibold);
}

/* Duration labels for internship reports */
.duration-short {
  color: var(--success-700);
  font-weight: var(--font-weight-medium);
}

.duration-medium {
  color: var(--warning-700);
  font-weight: var(--font-weight-medium);
}

.duration-long {
  color: var(--danger-700);
  font-weight: var(--font-weight-medium);
}

/* Additional status badge for absconder */
.status-absconder {
  background-color: var(--danger-100);
  color: var(--danger-800);
}

/* Reports */
.reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

.report-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xl);
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-fast);
  text-align: center;
}

.report-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.report-icon {
  width: 60px;
  height: 60px;
  background: var(--primary-100);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-4xl);
  color: var(--primary-600);
}

.report-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--neutral-800);
  margin: 0;
}

.report-description {
  font-size: var(--font-size-sm);
  color: var(--neutral-600);
  margin: 0 0 var(--spacing-md);
}

/* Reports Section */
.reports-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.reports-section .card {
  margin-bottom: 0;
}

.reports-section .card-header {
  border-bottom: 2px solid var(--primary-200);
}

.reports-section .card-title {
  color: var(--primary-700);
  margin: 0;
}

/* Filter Section */
.filter-section {
  background: white;
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--spacing-lg);
}

.filter-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.filter-actions {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
}

/* Status Badges */
.status-badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-align: center;
  min-width: 80px;
}

.status-active {
  background-color: var(--success-100);
  color: var(--success-800);
}

.status-retired {
  background-color: var(--neutral-100);
  color: var(--neutral-800);
}

.status-resigned {
  background-color: var(--warning-100);
  color: var(--warning-800);
}

.status-died {
  background-color: var(--danger-100);
  color: var(--danger-800);
}

.status-terminated {
  background-color: var(--danger-100);
  color: var(--danger-800);
}

.status-on-leave {
  background-color: var(--primary-100);
  color: var(--primary-800);
}

.status-ex-pakistan {
  background-color: var(--secondary-100);
  color: var(--secondary-800);
}

.status-sent-on-deputation {
  background-color: var(--secondary-100);
  color: var(--secondary-800);
}

/* Utility Classes */
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.mb-md {
  margin-bottom: var(--spacing-md);
}

.mb-lg {
  margin-bottom: var(--spacing-lg);
}

.mb-xl {
  margin-bottom: var(--spacing-xl);
}

.mt-md {
  margin-top: var(--spacing-md);
}

.mt-lg {
  margin-top: var(--spacing-lg);
}

.d-flex {
  display: flex;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-center {
  justify-content: center;
}

.align-items-center {
  align-items: center;
}

.gap-md {
  gap: var(--spacing-md);
}

/* Sidebar Toggle Button */
.sidebar-toggle {
  display: none;
  background: var(--primary-600);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--spacing-sm);
  font-size: var(--font-size-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.sidebar-toggle:hover {
  background: var(--primary-700);
}

/* Sidebar Hide Toggle Button */
.sidebar-hide-toggle {
  position: absolute;
  top: 50%;
  right: -12px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  z-index: 100;
  transition: all var(--transition-fast);
}

.sidebar-hide-toggle:hover {
  background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
}

.sidebar.collapsed {
  width: 70px;
}

.sidebar.collapsed .sidebar-title,
.sidebar.collapsed .sidebar-menu-link span:not(.sidebar-menu-link-icon),
.sidebar.collapsed .user-info {
  display: none;
}

.sidebar.collapsed .sidebar-logo {
  font-size: var(--font-size-lg);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar.collapsed .dropdown-menu {
  position: absolute;
  left: 70px;
  top: 0;
  background: white;
  border-radius: 0 4px 4px 0;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
  min-width: 200px;
  z-index: var(--z-dropdown);
  padding: var(--spacing-sm) 0;
}

/* Ensure dropdowns are positioned relative to their parent when sidebar is collapsed */
.sidebar.collapsed .sidebar-menu-item {
  position: relative;
  z-index: calc(var(--z-dropdown) - 1);
}

.main-content.sidebar-collapsed {
  margin-left: 70px;
}

/* Print Styles */
@media print {
  .sidebar,
  .top-header,
  .filter-section,
  .btn {
    display: none;
  }
  
  body {
    background: white;
    display: block;
  }
  
  .main-content {
    margin-left: 0;
  }
  
  .card {
    box-shadow: none;
    border: 1px solid var(--neutral-300);
  }
  
  .stat-card {
    box-shadow: none;
    border: 1px solid var(--neutral-300);
  }
}

/* Responsive Design */
@media (max-width: 992px) {
  .sidebar {
    transform: translateX(-100%);
  }
  
  .sidebar.show {
    transform: translateX(0);
  }
  
  .main-content {
    margin-left: 0;
  }
  
  .sidebar-toggle {
    display: block;
  }
  

  
  .card {
    padding: var(--spacing-lg);
  }
  
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-md);
  }
  
  .reports-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
  }
  
  /* Hide sidebar toggle on mobile */
  .sidebar-hide-toggle {
    display: none;
  }
  
  .sidebar.collapsed {
    width: 250px;
  }
  
  .sidebar.collapsed .sidebar-title,
  .sidebar.collapsed .sidebar-menu-link span:not(.sidebar-menu-link-icon),
  .sidebar.collapsed .user-info {
    display: flex;
  }
  
  .sidebar.collapsed .sidebar-logo {
    font-size: var(--font-size-lg);
  }
  
  .main-content.sidebar-collapsed {
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .main-content {
    margin-left: 0;
    padding: var(--spacing-xs);
  }
  
  .main-container {
    padding: var(--spacing-xs);
    margin: 0 var(--spacing-xs);
  }
  
  .top-header {
    padding: var(--spacing-sm) var(--spacing-md);
  }
  
  .top-header-title {
    font-size: var(--font-size-lg);
  }
  
  .filter-row {
    grid-template-columns: 1fr;
  }
  
  .table-responsive {
    font-size: var(--font-size-sm);
  }
  
  th, td {
    padding: var(--spacing-sm);
  }
  
  .reports-grid {
    grid-template-columns: 1fr;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
  }
  
  .form-steps {
    flex-direction: column;
  }
  
  .form-steps::before {
    display: none;
  }
  
  .step-item {
    flex-direction: row;
    margin-bottom: var(--spacing-md);
    max-width: none;
  }
  
  .step-item:not(:last-child) {
    margin-right: 0;
  }
  
  .step-number {
    margin-bottom: 0;
    margin-right: var(--spacing-md);
  }
  
  .step-label {
    text-align: left;
  }
}

@media (max-width: 480px) {
  .sidebar-title {
    font-size: var(--font-size-base);
  }
  
  .stat-number {
    font-size: var(--font-size-2xl);
  }
  
  .report-item {
    padding: var(--spacing-md);
  }
  
  .report-icon {
    font-size: var(--font-size-3xl);
  }
  
  .top-header-info {
    gap: var(--spacing-md);
  }
}

/* Status badges for employee working status */
.status-badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-align: center;
  white-space: nowrap;
  background-color: var(--neutral-100);
  color: var(--neutral-700);
}

.status-active {
  background-color: var(--success-100);
  color: var(--success-700);
}

.status-on-leave {
  background-color: var(--warning-100);
  color: var(--warning-700);
}

.status-ex-pakistan {
  background-color: var(--info-100);
  color: var(--info-700);
}

.status-sent-on-deputation {
  background-color: var(--primary-100);
  color: var(--primary-700);
}

/* Utility classes */
.text-center {
  text-align: center;
}

.d-flex {
  display: flex;
}

.justify-content-between {
  justify-content: space-between;
}

.align-items-center {
  align-items: center;
}

/* Filter styling */
.filter-section {
  padding: var(--spacing-lg);
  background-color: var(--neutral-50);
  border-radius: var(--radius-md);
  margin-top: var(--spacing-md);
}

.filter-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.filter-actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

/* Compact Employee List Layout */
.stats-compact {
  background: linear-gradient(135deg, var(--primary-50), var(--neutral-100));
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--spacing-lg);
  border: 1px solid var(--primary-200);
  display: flex;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

.stat-inline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  text-align: center;
  min-width: 80px;
}

.stat-inline .stat-number {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--primary-700);
  margin: 0;
  line-height: 1;
}

.stat-inline .stat-label {
  font-size: var(--font-size-xs);
  color: var(--neutral-700);
  margin: 0;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.page-header {
  background: white;
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--spacing-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  border: 1px solid var(--neutral-200);
}

.page-header-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.page-header-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.page-title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--neutral-800);
}

.btn-filter-toggle {
  background: var(--neutral-100);
  color: var(--neutral-700);
  border: 1px solid var(--neutral-300);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-filter-toggle:hover,
.btn-filter-toggle.active {
  background: var(--primary-500);
  color: white;
  border-color: var(--primary-500);
}

.filter-panel {
  background: white;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-md);
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.filter-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.filter-item label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--neutral-700);
  margin: 0;
}

.form-control-sm {
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  transition: border-color var(--transition-fast);
}

.form-control-sm:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}

.employees-container {
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: visible;
  margin: 0 var(--spacing-xs);
}

.employees-container .table-responsive {
  margin: 0;
  overflow-x: auto;
  overflow-y: visible;
  padding: var(--spacing-xs);
}

.pagination-wrapper {
  padding: var(--spacing-md);
  border-top: 1px solid var(--neutral-200);
  background: var(--neutral-50);
}

/* Step Form Styles */
.form-steps {
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-md);
  position: relative;
}

.form-steps::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--neutral-200);
  z-index: 1;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  flex: 1;
  max-width: 180px;
}

.step-item:not(:last-child) {
  margin-right: var(--spacing-sm);
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--neutral-200);
  color: var(--neutral-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-xs);
  transition: all var(--transition-fast);
  font-size: var(--font-size-base);
}

.step-item.active .step-number {
  background: var(--primary-500);
  color: white;
}

.step-item.completed .step-number {
  background: var(--success-500);
  color: white;
}

.step-label {
  font-size: var(--font-size-sm);
  color: var(--neutral-600);
  text-align: center;
  font-weight: var(--font-weight-medium);
}

.step-item.active .step-label {
  color: var(--primary-600);
  font-weight: var(--font-weight-semibold);
}

.step-content {
  margin-bottom: var(--spacing-md);
}

.step-pane {
  display: none;
}

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

.form-section {
  padding: var(--spacing-sm) 0;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-md);
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group {
  margin-bottom: var(--spacing-md);
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  border-top: 1px solid var(--neutral-200);
  margin-top: var(--spacing-md);
}

.section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--neutral-800);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--neutral-200);
}

.card-header h3.card-title {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--neutral-800);
}

.card-header p {
  margin: 0 0 var(--spacing-md);
  font-size: var(--font-size-base);
  color: var(--neutral-600);
}

/* Compact form styles for add employee page */
.employee-form .form-grid {
  gap: var(--spacing-md);
}

.employee-form .form-group {
  margin-bottom: var(--spacing-md);
}

.employee-form .form-text {
  font-size: var(--font-size-sm);
  color: var(--neutral-600);
  margin-top: var(--spacing-xs);
}

.employee-form .form-control {
  padding: var(--spacing-sm);
  font-size: var(--font-size-base);
}

.employee-form .form-label {
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-xs);
  font-weight: var(--font-weight-medium);
}

.employee-form .section-title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
}

.employee-form .form-section {
  padding: var(--spacing-sm) 0;
}

.employee-form .form-actions {
  padding: var(--spacing-md) 0;
  margin-top: var(--spacing-md);
}

.employee-form textarea.form-control {
  min-height: 100px;
}

.employee-form .card-header h3.card-title {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-size-xl);
}

.employee-form .card-header p {
  margin: 0 0 var(--spacing-md);
  font-size: var(--font-size-base);
}

/* New styles for sanctioned posts report */
.card-footer {
  background-color: var(--neutral-50);
  padding: var(--spacing-md);
  border-top: 1px solid var(--neutral-200);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
}

.insight-item {
  text-align: center;
  padding: var(--spacing-md);
  background: var(--neutral-50);
  border-radius: var(--radius-md);
}

.insight-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--primary-600);
  margin-bottom: var(--spacing-xs);
}

.insight-label {
  font-size: var(--font-size-sm);
  color: var(--neutral-600);
}

/* Mobile responsiveness for new layout */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .page-header-left,
  .page-header-right {
    justify-content: space-between;
  }
  
  .filter-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-compact {
    text-align: center;
  }
  
  .insights-grid {
    grid-template-columns: 1fr;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }
  
  .form-steps {
    flex-direction: column;
  }
  
  .form-steps::before {
    display: none;
  }
  
  .step-item {
    flex-direction: row;
    margin-bottom: var(--spacing-md);
    max-width: none;
  }
  
  .step-item:not(:last-child) {
    margin-right: 0;
  }
  
  .step-number {
    margin-bottom: 0;
    margin-right: var(--spacing-md);
  }
  
  .step-label {
    text-align: left;
  }
  
  .employee-form .form-grid {
    gap: var(--spacing-sm);
  }
  
  .employee-form .form-group {
    margin-bottom: var(--spacing-sm);
  }
  
  .step-item {
    max-width: none;
  }
}

/* Compact Stats */
.stats-compact .stat-card {
  padding: var(--spacing-md);
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 200px;
}

.stats-compact .stat-number {
  font-size: var(--font-size-lg);
  margin: 0 0 var(--spacing-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.stats-compact .stat-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-align: center;
  line-height: 1;
  margin: 0;
}

/* Reports Dashboard */
.reports-dashboard {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.report-section {
  padding: var(--spacing-md) 0;
}

.report-section .section-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--primary-700);
  margin: 0 0 var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--primary-200);
}

.reports-compact-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-md);
}

.report-card {
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: all var(--transition-fast);
  height: 100%;
}

.report-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.report-icon {
  width: 100%;
  height: 70px;
  background: var(--primary-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-3xl);
  color: var(--primary-600);
}

.report-content {
  padding: var(--spacing-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.report-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--neutral-800);
  margin: 0 0 var(--spacing-xs);
}

.report-description {
  font-size: var(--font-size-sm);
  color: var(--neutral-600);
  margin: 0 0 var(--spacing-md);
  flex: 1;
}

.report-actions {
  display: flex;
  gap: var(--spacing-xs);
  justify-content: center;
}

.report-actions .btn {
  min-width: 100px;
}

/* Compact Reports */
.reports-compact {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.report-category {
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--neutral-200);
}

.report-category:last-child {
  border-bottom: none;
}

.category-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--primary-700);
  margin: 0 0 var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--neutral-100);
}

.reports-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.report-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}

.report-row:hover {
  background-color: var(--neutral-50);
}

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

.report-name {
  font-weight: var(--font-weight-medium);
  color: var(--neutral-800);
  margin-bottom: var(--spacing-xs);
}

.report-desc {
  font-size: var(--font-size-sm);
  color: var(--neutral-600);
}

.report-actions {
  display: flex;
  gap: var(--spacing-xs);
  margin-left: var(--spacing-md);
}

.btn-sm {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
}

/* Ultra Compact Stats */
.stats-slim {
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: var(--spacing-xs);
}

.stat-slim {
  padding: var(--spacing-sm);
}

.stat-number-slim {
  font-size: var(--font-size-lg);
  margin: 0 0 var(--spacing-xs);
}

.stat-label-slim {
  font-size: var(--font-size-xs);
}

/* Ultra Compact Card */
.card-slim {
  padding: var(--spacing-md);
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--spacing-lg);
}

.card-header-slim {
  padding-bottom: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--neutral-200);
}

.card-title-slim {
  font-size: var(--font-size-lg);
  margin: 0;
  font-weight: var(--font-weight-semibold);
  color: var(--neutral-800);
}

/* Button-Based Reports */
.reports-grid-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-sm);
}

.report-button {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--neutral-800);
  transition: all var(--transition-fast);
  border: 1px solid var(--neutral-200);
}

.report-button:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-color: var(--primary-300);
  background-color: var(--primary-50);
}

.report-icon-button {
  font-size: var(--font-size-lg);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-100);
  border-radius: var(--radius-sm);
  color: var(--primary-600);
}

.report-name-button {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ultra Compact Actions */
.actions-slim {
  display: flex;
  gap: var(--spacing-xs);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--spacing-md);
}

.actions-slim .btn-xs {
  padding: var(--spacing-xs) var(--spacing-sm);
}

.btn-xs {
  padding: var(--spacing-xs);
  font-size: var(--font-size-xs);
  min-width: auto;
}

/* Ultra Compact Reports */
.reports-slim {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm) 0;
}

.reports-grid-slim {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--spacing-sm);
}

.report-slim {
  display: flex;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.report-slim:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.report-icon-slim {
  width: 40px;
  height: 100%;
  background: var(--primary-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  color: var(--primary-600);
}

.report-content-slim {
  flex: 1;
  padding: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

#employee-management-section .report-content-slim {
  background: linear-gradient(to bottom, var(--primary-50), white);
}

.report-name-slim {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--neutral-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.report-desc-slim {
  font-size: var(--font-size-xs);
  color: var(--neutral-600);
  margin: 0 0 var(--spacing-xs);
  flex: 1;
}

.report-actions-slim {
  display: flex;
  gap: var(--spacing-xs);
}

#employee-management-section .report-actions-slim {
  margin-top: var(--spacing-xs);
  padding-top: var(--spacing-xs);
  border-top: 1px solid var(--primary-100);
}

/* Enhanced Employee Management Section */
#employee-management-section .card-header-slim {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
  border-bottom: none;
  padding: var(--spacing-md);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

#employee-management-section .card-header-slim h3.card-title-slim {
  color: white;
  position: relative;
  padding-left: 30px;
  margin: 0;
}

#employee-management-section .card-header-slim h3.card-title-slim::before {
  content: "👥";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-lg);
}

/* Employee Management Specific Styling */
#employee-management-section .report-icon-slim {
  background: linear-gradient(135deg, var(--primary-100), var(--primary-200));
  color: var(--primary-700);
  width: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
}

#employee-management-section .report-slim {
  border: 1px solid var(--primary-200);
  border-radius: var(--radius-md);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  display: flex;
}

#employee-management-section .report-slim:hover {
  border-left: 3px solid var(--primary-500);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#employee-management-section .report-name-slim {
  font-weight: var(--font-weight-semibold);
  color: var(--primary-800);
}

#employee-management-section .report-desc-slim {
  color: var(--primary-600);
  font-size: var(--font-size-xs);
  line-height: 1.4;
}

/* Reports & Analytics Section */
#reports-analytics-section .card-header-slim {
  background: linear-gradient(135deg, var(--secondary-500), var(--secondary-700));
  border-bottom: none;
  padding: var(--spacing-md);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

#reports-analytics-section .card-header-slim h3.card-title-slim {
  color: white;
  position: relative;
  padding-left: 30px;
  margin: 0;
}

#reports-analytics-section .card-header-slim h3.card-title-slim::before {
  content: "📊";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-lg);
}

#reports-analytics-section .report-icon-slim {
  background: linear-gradient(135deg, var(--secondary-100), var(--secondary-200));
  color: var(--secondary-700);
  width: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
}

#reports-analytics-section .report-slim {
  border: 1px solid var(--secondary-200);
  border-radius: var(--radius-md);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  display: flex;
}

#reports-analytics-section .report-slim:hover {
  border-left: 3px solid var(--secondary-500);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#reports-analytics-section .report-content-slim {
  background: linear-gradient(to bottom, var(--secondary-50), white);
}

#reports-analytics-section .report-name-slim {
  font-weight: var(--font-weight-semibold);
  color: var(--secondary-800);
}

#reports-analytics-section .report-desc-slim {
  color: var(--secondary-600);
  font-size: var(--font-size-xs);
  line-height: 1.4;
}

#reports-analytics-section .report-actions-slim {
  margin-top: var(--spacing-xs);
  padding-top: var(--spacing-xs);
  border-top: 1px solid var(--secondary-100);
}

/* System Management Section */
#system-management-section .card-header-slim {
  background: linear-gradient(135deg, var(--warning-500), var(--warning-700));
  border-bottom: none;
  padding: var(--spacing-md);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

#system-management-section .card-header-slim h3.card-title-slim {
  color: white;
  position: relative;
  padding-left: 30px;
  margin: 0;
}

#system-management-section .card-header-slim h3.card-title-slim::before {
  content: "⚙️";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-lg);
}

#system-management-section .report-icon-slim {
  background: linear-gradient(135deg, var(--warning-100), var(--warning-200));
  color: var(--warning-700);
  width: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
}

#system-management-section .report-slim {
  border: 1px solid var(--warning-200);
  border-radius: var(--radius-md);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  display: flex;
}

#system-management-section .report-slim:hover {
  border-left: 3px solid var(--warning-500);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#system-management-section .report-content-slim {
  background: linear-gradient(to bottom, var(--warning-50), white);
}

#system-management-section .report-name-slim {
  font-weight: var(--font-weight-semibold);
  color: var(--warning-800);
}

#system-management-section .report-desc-slim {
  color: var(--warning-600);
  font-size: var(--font-size-xs);
  line-height: 1.4;
}

#system-management-section .report-actions-slim {
  margin-top: var(--spacing-xs);
  padding-top: var(--spacing-xs);
  border-top: 1px solid var(--warning-100);
}

/* Modern Dashboard Layout */
.dashboard-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.dashboard-section {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.section-header {
  background: var(--primary-50);
  border-bottom: 2px solid var(--primary-200);
  padding: var(--spacing-md) var(--spacing-lg);
}

.section-title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--primary-700);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.section-content {
  padding: var(--spacing-lg);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
}

.dashboard-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-fast);
  border: 1px solid var(--neutral-200);
}

.dashboard-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: var(--primary-300);
}

.card-icon {
  font-size: var(--font-size-3xl);
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-100);
  border-radius: var(--radius-full);
  color: var(--primary-600);
}

.card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--neutral-800);
  margin: 0;
}

.card-description {
  font-size: var(--font-size-sm);
  color: var(--neutral-600);
  margin: 0;
  flex: 1;
}

.card-actions {
  display: flex;
  gap: var(--spacing-xs);
  justify-content: center;
  margin-top: var(--spacing-sm);
}

.btn-sm {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
}

/* Flash Messages */
.flash-message {
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  box-shadow: var(--shadow-sm);
}

.flash-success {
  background-color: var(--success-100);
  color: var(--success-800);
  border: 1px solid var(--success-200);
}

.flash-error {
  background-color: var(--danger-100);
  color: var(--danger-800);
  border: 1px solid var(--danger-200);
}

/* Info and Warning Boxes */
.info-box {
  background: linear-gradient(to right, var(--info-50), var(--info-100));
  border: 1px solid var(--info-200);
  color: var(--info-800);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  box-shadow: var(--shadow-sm);
}

.warning-box {
  background: linear-gradient(to right, var(--warning-50), var(--warning-100));
  border: 1px solid var(--warning-200);
  color: var(--warning-800);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  box-shadow: var(--shadow-sm);
}

.card-content {
  padding: var(--spacing-md) 0;
}

/* Status Indicators */
.status-success {
  background: var(--success-100);
  color: var(--success-800);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.status-error {
  background: var(--danger-100);
  color: var(--danger-800);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.status-warning {
  background: var(--warning-100);
  color: var(--warning-800);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.error-details {
  background: var(--neutral-100);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  margin-top: var(--spacing-sm);
  border-left: 4px solid var(--danger-500);
}

/* Modern Form Styles */
.form-container {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--spacing-md);
}

.form-card {
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border: 1px solid var(--neutral-200);
}

.form-card-header {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  color: white;
  padding: var(--spacing-xl);
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.form-card-icon {
  font-size: 2.5rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
}

.form-card-title h4 {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.form-card-title p {
  margin: 0;
  opacity: 0.9;
  font-size: 0.95rem;
}

.form-modern {
  padding: var(--spacing-xl);
}

.form-section {
  margin-bottom: var(--spacing-2xl);
}

.form-section:last-child {
  margin-bottom: 0;
}

.form-section-header {
  margin-bottom: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.form-section-header h5 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--neutral-800);
}

.form-section-divider {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-200), transparent);
  border-radius: 1px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.form-row:last-child {
  margin-bottom: 0;
}

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

.form-control-modern {
  width: 100%;
  padding: var(--spacing-md);
  border: 2px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  font-size: 1rem;
  transition: all 0.3s ease;
  background: white;
  color: var(--neutral-800);
}

.form-control-modern:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 4px var(--primary-100);
  transform: translateY(-1px);
}

.form-control-modern::placeholder {
  color: var(--neutral-400);
}

.form-control-modern:hover {
  border-color: var(--primary-300);
}

.label-icon {
  margin-right: var(--spacing-xs);
  font-size: 1.1rem;
}

.form-actions-modern {
  margin-top: var(--spacing-2xl);
  padding-top: var(--spacing-xl);
  border-top: 2px solid var(--neutral-100);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
}

.form-actions-left {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
}

.form-actions-right {
  display: flex;
  align-items: center;
}

.form-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--neutral-600);
  font-size: 0.9rem;
}

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

.btn-modern {
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.btn-modern:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-primary.btn-modern {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  color: white;
}

.btn-primary.btn-modern:hover {
  background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
}

.btn-outline-secondary.btn-modern {
  background: transparent;
  color: var(--neutral-600);
  border: 2px solid var(--neutral-300);
}

.btn-outline-secondary.btn-modern:hover {
  background: var(--neutral-50);
  border-color: var(--neutral-400);
  color: var(--neutral-700);
}

.btn-icon {
  font-size: 1.1rem;
}

/* Alert Enhancements */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-lg);
  border: 1px solid;
}

.alert-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.alert-content {
  flex: 1;
  line-height: 1.5;
}

.alert-success {
  background: var(--success-50);
  border-color: var(--success-200);
  color: var(--success-800);
}

.alert-error {
  background: var(--danger-50);
  border-color: var(--danger-200);
  color: var(--danger-800);
}

/* Page Header Enhancements */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-lg);
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--neutral-200);
}

.page-header-left {
  flex: 1;
}

.page-subtitle {
  margin: var(--spacing-xs) 0 0 0;
  color: var(--neutral-600);
  font-size: 0.95rem;
}

.page-header-right {
  flex-shrink: 0;
}

/* Responsive Design for Modern Forms */
@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  
  .form-card-header {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-md);
  }
  
  .form-actions-modern {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-md);
  }
  
  .form-actions-left {
    justify-content: center;
  }
  
  .form-actions-right {
    justify-content: center;
  }
  
  .page-header {
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: stretch;
  }
  
  .page-header-right {
    align-self: stretch;
  }
  
  .page-header-right .btn {
    width: 100%;
    justify-content: center;
  }
}