/* App custom styles */
:root {
  --brand: #0d6efd;
  --brand-600: #0b5ed7;
  --indigo: #4f46e5;
  --teal: #14b8a6;
  --amber: #f59e0b;
  /* Navbar/Sidebar theme */
  --navbar-bg: #0b1b2b;        /* change this to recolor both navbar and sidebar */
  --navbar-text: #eaf2ff;
  --sidebar-bg: var(--navbar-bg);
  --navbar-h: 56px;            /* keep sidebar aligned with navbar height */
}

body { background-color: #f5f7fb; }
.navbar-brand { font-weight: 700; letter-spacing: .2px; }
.card { border: 0; border-radius: .75rem; }
.card .card-title { font-weight: 600; }
.shadow-soft { box-shadow: 0 0.5rem 1rem rgba(0,0,0,.08)!important; }

/* Dashboard cards */
.card .btn { border-radius: .5rem; }
.card:hover { transform: translateY(-2px); transition: transform .15s ease; }

/* Tables */
.table thead th { color: #6c757d; font-weight: 600; border-bottom-width: 1px; }
.table td, .table th { vertical-align: middle; }
.table-actions .btn { margin-right: .25rem; }

/* Footer spacing */
main > .container { min-height: calc(100vh - 64px - 40px); }

/* Toast container */
#toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 1080; }
.toast { border-radius: .5rem; }
#toast-container .toast { opacity: 1; margin-bottom: .5rem; }

/* Subtle animations & helpers */
.fade-in { animation: fadeIn .3s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.hover-lift { transition: transform .15s ease, box-shadow .15s ease; }
.hover-lift:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.05); }
.xsmall { font-size: .78rem; }
.text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Standard line clamp utility for compatibility */
.line-clamp-2 { 
  display: -webkit-box; 
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical; 
  overflow: hidden; 
  display: -moz-box;
  -moz-line-clamp: 2;
  -moz-box-orient: vertical;
  display: box;
  line-clamp: 2;
  box-orient: vertical;
}

/* Kanban - Basic fallback styles (detailed styles in tasks.css) */
/* These are minimal fallbacks - tasks.css has the full implementation */
.kanban-column { min-height: 200px; }
.kanban-card { cursor: grab; }
.kanban-card:active { cursor: grabbing; }
.board-responsive .card { height: 100%; }

/* Sidebar layout - dark theme with enhanced visual effects */
.sidebar-left {
  background: linear-gradient(180deg, var(--sidebar-bg) 0%, #0f1922 100%);
  min-height: calc(100vh - var(--navbar-h));
  position: sticky;
  top: var(--navbar-h);
  border-right: 1px solid rgba(255,255,255,0.08);
  box-shadow: 4px 0 20px rgba(0,0,0,0.15);
}
.sidebar-inner { 
  padding: .6rem .8rem;
  position: relative;
}
.sidebar-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
}
.brand-chip { 
  width: 32px; 
  height: 32px; 
  border-radius: .5rem; 
  background: linear-gradient(135deg, #0d6efd 0%, #4f46e5 100%); 
  color: #fff; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
  transition: all 0.3s ease;
}
.brand-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(13, 110, 253, 0.4);
}
.sidebar-nav .nav-link { 
  color: #cdd7e5;
  position: relative;
  overflow: hidden;
}
.sidebar-link {
  color: #cdd7e5;
  border-radius: .75rem;
  padding: 8px 12px;
  margin: 1px 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  font-size: 0.9rem;
}
.sidebar-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
  transition: left 0.6s ease;
}
.sidebar-link:hover::before {
  left: 100%;
}
.sidebar-link:hover { 
  background: linear-gradient(135deg, #11263b 0%, #1a2f4a 100%); 
  color: #ffffff;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.sidebar-link.active { 
  background: linear-gradient(135deg, #12304b 0%, #1e3a5f 100%); 
  color: #ffffff; 
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(18, 48, 75, 0.4);
  border: 1px solid rgba(255,255,255,0.1);
  transform: translateX(2px);
}
.sidebar-link.active::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 8px;
  width: 4px;
  height: 4px;
  background: #22c55e;
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}
.sidebar-link i { 
  opacity: .95;
  transition: all 0.3s ease;
  font-size: 1rem;
}
.sidebar-link:hover i {
  opacity: 1;
  transform: scale(1.1);
}

/* Enhanced Sidebar group toggles and submenus */
.sidebar-submenu { 
  display: none;
  animation: submenuSlideIn 0.3s ease;
}
@keyframes submenuSlideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

#user-toggle,
#leave-toggle,
#project-toggle,
#settings-toggle,
#reports-toggle,
#daily-activity-toggle,
#recruitment-toggle,
#expense-toggle,
#performance-toggle,
#training-assessment-toggle,
#payroll-toggle,
#communication-toggle{
  color:#e5e7eb !important;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 4px 6px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(5px);
}
#user-toggle:hover,
#leave-toggle:hover,
#project-toggle:hover,
#settings-toggle:hover,
#reports-toggle:hover,
#daily-activity-toggle:hover,
#recruitment-toggle:hover,
#expense-toggle:hover,
#performance-toggle:hover,
#training-assessment-toggle:hover,
#payroll-toggle:hover,
#communication-toggle:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.2);
  color: #ffffff !important;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

#user-toggle .bi,
#leave-toggle .bi,
#project-toggle .bi,
#settings-toggle .bi,
#reports-toggle .bi,
#daily-activity-toggle .bi,
#recruitment-toggle .bi,
#expense-toggle .bi,
#performance-toggle .bi,
#training-assessment-toggle .bi,
#payroll-toggle .bi,
#communication-toggle .bi{
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity:1;
  font-size:.85rem;
  display: block;
}

#user-toggle.rot .bi,
#daily-activity-toggle.rot .bi,
#recruitment-toggle.rot .bi,
#expense-toggle.rot .bi,
#leave-toggle.rot .bi,
#project-toggle.rot .bi,
#settings-toggle.rot .bi,
#reports-toggle.rot .bi,
#performance-toggle.rot .bi,
#training-assessment-toggle.rot .bi,
#payroll-toggle.rot .bi,
#communication-toggle.rot .bi{ transform: rotate(90deg) scale(1.1); }

#daily-activity-group.open > .d-flex > #daily-activity-parent{
  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
  color:#fff;
  border-radius:10px;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
  transform: translateX(2px);
}

#recruitment-group.open > .d-flex > #recruitment-parent{
  background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
  color:#fff;
  border-radius:10px;
  box-shadow: 0 4px 16px rgba(234, 88, 12, 0.3);
  transform: translateX(2px);
}

#expense-group.open > .d-flex > #expense-parent{
  background: linear-gradient(135deg, #f472b6 0%, #db2777 100%);
  color:#fff;
  border-radius:10px;
  box-shadow: 0 4px 16px rgba(219, 39, 119, 0.3);
  transform: translateX(2px);
}

#performance-group.open > .d-flex > #performance-parent{
  background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
  color:#fff;
  border-radius:10px;
  box-shadow: 0 4px 16px rgba(126, 34, 206, 0.35);
  transform: translateX(2px);
}

#training-assessment-group.open > .d-flex > #training-assessment-parent{
  background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
  color:#fff;
  border-radius:10px;
  box-shadow: 0 4px 16px rgba(3, 105, 161, 0.35);
  transform: translateX(2px);
}

#payroll-group.open > .d-flex > #payroll-parent{
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color:#0b1220;
  border-radius:10px;
  box-shadow: 0 4px 16px rgba(217, 119, 6, 0.35);
  transform: translateX(2px);
}

#communication-group.open > .d-flex > #communication-parent{
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
  color:#fff;
  border-radius:10px;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.35);
  transform: translateX(2px);
}

#user-group.open > .d-flex > #user-parent{ 
  background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%); 
  color:#0b1220; 
  border-radius:10px;
  box-shadow: 0 4px 16px rgba(34, 211, 238, 0.3);
  transform: translateX(2px);
}

#leave-group.open > .d-flex > #leave-parent{ 
  background: linear-gradient(135deg, #22c55e 0%, #10b981 100%); 
  color:#0b1220; 
  border-radius:10px;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3);
  transform: translateX(2px);
}

#project-group.open > .d-flex > #project-parent{ 
  background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%); 
  color:#0b1220; 
  border-radius:10px;
  box-shadow: 0 4px 16px rgba(34, 211, 238, 0.3);
  transform: translateX(2px);
}

#settings-group.open > .d-flex > #settings-parent{ 
  background: linear-gradient(135deg, #22c55e 0%, #10b981 100%); 
  color:#0b1220; 
  border-radius:10px;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3);
  transform: translateX(2px);
}

.submenu-list{ 
  display:flex; 
  flex-direction:column; 
  gap:4px; 
  padding:6px 0 10px;
  margin-top: 4px;
}
.submenu-link{ 
  display:block; 
  padding:8px 12px; 
  border-radius:6px; 
  text-decoration:none; 
  font-size:.85rem; 
  color:#e2e8f0; 
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  border: 1px solid rgba(255,255,255,0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.submenu-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.03) 50%, transparent 100%);
  transition: left 0.6s ease;
}
.submenu-link:hover::before {
  left: 100%;
}
.submenu-link:hover{ 
  background: linear-gradient(135deg, #2b3647 0%, #1e293b 100%); 
  color:#fff; 
  border-color: rgba(34, 211, 238, 0.3);
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.submenu-link.active{ 
  background: linear-gradient(135deg, #22c55e 0%, #10b981 100%); 
  color:#0b1220; 
  border-color: transparent;
  font-weight:600;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3);
  transform: translateX(2px);
}
.submenu-link.active::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 8px;
  width: 3px;
  height: 3px;
  background: #0b1220;
  border-radius: 50%;
  transform: translateY(-50%);
}
/* Enhanced Parent bar when open */
#reports-group.open > .d-flex > #reports-parent{ 
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); 
  color:#0b1220; 
  border-radius:10px;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
  transform: translateX(2px);
}

@media (max-width: 767.98px) {
  .sidebar-left { position: relative; top: 0; min-height: auto; }
}

/* Enhanced Mobile offcanvas sidebar polish */
.offcanvas.offcanvas-start {
  width: 300px;
  background: linear-gradient(180deg, var(--sidebar-bg) 0%, #0f1922 100%);
  color: var(--navbar-text);
  border-right: 1px solid rgba(255,255,255,0.1);
  box-shadow: 4px 0 20px rgba(0,0,0,0.2);
}
.offcanvas .offcanvas-header {
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,0.02);
  padding: 1rem 1.5rem;
}
.offcanvas .offcanvas-title {
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--navbar-text);
}
.offcanvas .btn-close {
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: all 0.2s ease;
}
.offcanvas .btn-close:hover {
  opacity: 1;
  transform: scale(1.1);
}
.offcanvas .offcanvas-body {
  padding: 0;
  background: rgba(0,0,0,0.1);
}
.offcanvas .nav-link.sidebar-link {
  color: var(--navbar-text);
  opacity: .95;
  padding: .6rem 1.2rem;
  border-radius: .75rem;
  margin: 2px 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  font-size: 0.9rem;
}
.offcanvas .nav-link.sidebar-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
  transition: left 0.6s ease;
}
.offcanvas .nav-link.sidebar-link:hover::before {
  left: 100%;
}
.offcanvas .nav-link.sidebar-link:hover,
.offcanvas .nav-link.sidebar-link.active {
  background: linear-gradient(135deg, #12304b 0%, #1e3a5f 100%);
  color: #ffffff;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.offcanvas .nav-link.sidebar-link.active {
  background: linear-gradient(135deg, #22c55e 0%, #10b981 100%);
  color: #0b1220;
  font-weight: 600;
}
.offcanvas .nav-link.sidebar-link i { 
  opacity: 1;
  font-size: 1rem;
  transition: all 0.3s ease;
}
.offcanvas .nav-link.sidebar-link:hover i {
  transform: scale(1.1);
}
.offcanvas .offcanvas-footer { 
  color: #cdd7e5;
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.1);
  font-size: 0.9rem;
}

/* Hero section for reports */
.hero-report {
  background: radial-gradient(1200px 500px at 10% -10%, rgba(79,70,229,.35), transparent 60%),
              linear-gradient(135deg, #4f46e5 0%, #06b6d4 50%, #10b981 100%);
}
.hero-blob {
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.6), rgba(255,255,255,.1));
  filter: blur(2px); display: inline-block; transform: rotate(15deg);
}

/* Icon circle helper */
.icon-circle { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.bg-indigo { background-color: var(--indigo) !important; }
.bg-teal { background-color: var(--teal) !important; }

/* Page header */
.page-header { background: #ffffff; border: 1px solid #e9edf3; border-radius: .75rem; padding: .8rem 1rem; margin-bottom: .75rem; }
.page-header .title { font-weight: 600; }
.page-header .chip { display: inline-flex; align-items: center; gap: .5rem; background: #e7f1ff; color: #0b5ed7; padding: .25rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }

/* Quick action cards */
.quick-card { border: 1px solid #e9edf3; }
.quick-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,23,42,.07); }
.bg-amber { background-color: var(--amber) !important; }

/* Colored Navbar that syncs with sidebar */
.app-navbar {
  background: linear-gradient(135deg, var(--navbar-bg) 0%, #1a2f4a 100%) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.1);
}
.app-navbar { 
  padding-top: .75rem; 
  padding-bottom: .75rem; 
  min-height: var(--navbar-h); 
  position: sticky; 
  top: 0; 
  z-index: 1030; 
  display: flex; 
  align-items: center; 
  margin-bottom: 0; 
  transition: all 0.3s ease;
}
.app-navbar:hover {
  box-shadow: 0 6px 25px rgba(0,0,0,0.2), 0 3px 6px rgba(0,0,0,0.15);
}
.app-navbar .navbar-brand {
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: .5px;
  color: var(--navbar-text) !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}
.app-navbar .navbar-brand:hover {
  transform: translateY(-1px);
  color: #ffffff !important;
}
.app-navbar .nav-link,
.app-navbar .dropdown-item,
.app-navbar .navbar-text { 
  color: var(--navbar-text) !important;
  transition: all 0.2s ease;
}
.app-navbar .nav-link:hover { 
  color: #ffffff !important;
  background: rgba(255,255,255,0.1);
  border-radius: 6px;
  transform: translateY(-1px);
}
.app-navbar .dropdown-menu { 
  border: 0; 
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2), 0 4px 8px rgba(0,0,0,0.15);
  backdrop-filter: blur(10px);
  background: rgba(26, 47, 74, 0.95);
  margin-top: 8px;
  animation: dropdownFadeIn 0.3s ease;
}
@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.app-navbar .dropdown-item { 
  color: var(--navbar-text) !important;
  padding: 12px 20px;
  transition: all 0.2s ease;
  border-radius: 8px;
  margin: 2px 8px;
}
.app-navbar .dropdown-item:hover { 
  background: rgba(255,255,255,0.15); 
  color: #ffffff !important;
  transform: translateX(4px);
}
.app-navbar .dropdown-item:focus {
  background: rgba(255,255,255,0.1);
  color: #ffffff !important;
}
.app-navbar .btn-outline-light {
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--navbar-text) !important;
  transition: all 0.2s ease;
  border-radius: 8px;
  padding: 8px 16px;
}
.app-navbar .btn-outline-light:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.5);
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.bg-amber { background-color: var(--amber) !important; }

/* Enhanced Statistics Cards */
.stat-card {
  border: none;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(255,255,255,0.2);
}
.stat-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15), 0 8px 16px rgba(0,0,0,0.1);
}
.stat-card .stat-icon {
  opacity: 0.8;
  transition: all 0.3s ease;
}
.stat-card:hover .stat-icon {
  opacity: 1;
  transform: scale(1.1);
}
.bg-gradient-primary {
  background: linear-gradient(135deg, #0d6efd 0%, #4f46e5 100%) !important;
}
.bg-gradient-success {
  background: linear-gradient(135deg, #22c55e 0%, #10b981 100%) !important;
}
.bg-gradient-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}
.bg-gradient-info {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
}

/* Enhanced Announcement Cards */
.announcement-card {
  border: 1px solid rgba(13, 110, 253, 0.1);
  border-radius: 1rem;
  transition: all 0.3s ease;
}
.announcement-card:hover {
  box-shadow: 0 8px 25px rgba(13, 110, 253, 0.15);
  transform: translateY(-2px);
}

/* Activity List Styles */
.activity-list .d-flex:last-child {
  border-bottom: none;
}
.activity-list .d-flex:hover {
  background: rgba(13, 110, 253, 0.02);
  border-radius: 8px;
  padding-left: 12px !important;
  padding-right: 12px !important;
  transition: all 0.2s ease;
}

/* Enhanced Module Cards */
.card.shadow-sm.h-100 {
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card.shadow-sm.h-100:hover {
  box-shadow: 0 12px 30px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.08);
  transform: translateY(-4px);
}
.card.shadow-sm.h-100 .icon-circle {
  transition: all 0.3s ease;
}
.card.shadow-sm.h-100:hover .icon-circle {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Enhanced Responsive improvements */
@media (max-width: 991.98px) {
  .stat-card h3 {
    font-size: 1.8rem;
  }
  .stat-card .stat-icon i {
    font-size: 1.8rem;
  }
  .sidebar-left {
    border-right: none;
    box-shadow: none;
  }
}

@media (max-width: 767.98px) {
  .sidebar-left { 
    position: relative; 
    top: 0; 
    min-height: auto; 
  }
  .app-navbar {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }
  .app-navbar .navbar-brand {
    font-size: 1.2rem;
  }
  .stat-card {
    margin-bottom: 1rem;
  }
  .stat-card h3 {
    font-size: 1.6rem;
  }
  .stat-card .stat-icon i {
    font-size: 1.6rem;
  }
  .card.shadow-sm.h-100 .icon-circle {
    width: 36px;
    height: 36px;
  }
  .activity-list .d-flex {
    padding: 1rem 0;
  }
  .announcement-card .row > div {
    margin-bottom: 1rem;
  }
}

@media (max-width: 576px) {
  .stat-card h3 {
    font-size: 1.5rem;
  }
  .stat-card .stat-icon i {
    font-size: 1.5rem;
  }
  .card.shadow-sm.h-100 .icon-circle {
    width: 32px;
    height: 32px;
  }
  .app-navbar .navbar-brand {
    font-size: 1.1rem;
  }
  .offcanvas.offcanvas-start {
    width: 280px;
  }
  .offcanvas .nav-link.sidebar-link {
    padding: .6rem 1rem;
    margin: 2px 8px;
  }
  .stat-card .card-body {
    padding: 1rem;
  }
  .stat-card .card-footer {
    padding: 0.75rem 1rem;
  }
}

@media (max-width: 400px) {
  .stat-card h3 {
    font-size: 1.3rem;
  }
  .stat-card .stat-icon i {
    font-size: 1.3rem;
  }
  .offcanvas.offcanvas-start {
    width: 260px;
  }
  .app-navbar .btn-outline-light {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
}

/* ===== Global Professional Enhancements ===== */

/* Page titles */
h1.h4, h4.fw-bold, .page-title {
  font-weight: 700 !important;
  color: #1e293b;
}

/* Better table styling for all screens */
.table { font-size: 0.9rem; }
.table thead th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  color: #6b7280;
  background: #f8fafc;
  white-space: nowrap;
  padding: 0.75rem 1rem;
}
.table tbody td { padding: 0.75rem 1rem; }
.table-hover tbody tr:hover { background: #f0f4ff !important; }

/* Better form controls */
.form-control:focus, .form-select:focus {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.form-label {
  font-weight: 500;
  color: #4b5563;
  font-size: 0.85rem;
}

/* Better alert styling */
.alert {
  border: none;
  border-radius: 10px;
  font-size: 0.9rem;
}
.alert-success { background: #ecfdf5; color: #065f46; border-left: 4px solid #10b981; }
.alert-danger { background: #fef2f2; color: #991b1b; border-left: 4px solid #ef4444; }
.alert-warning { background: #fffbeb; color: #92400e; border-left: 4px solid #f59e0b; }
.alert-info { background: #eff6ff; color: #1e40af; border-left: 4px solid #3b82f6; }

/* Better badges */
.badge { font-weight: 500; letter-spacing: 0.3px; }

/* Better modal styling */
.modal-content { border: none; border-radius: 16px; overflow: hidden; }
.modal-header { border-bottom: 1px solid #f3f4f6; }
.modal-footer { border-top: 1px solid #f3f4f6; }

/* Empty state pattern */
.empty-state {
  padding: 3rem 2rem;
  text-align: center;
}
.empty-state .empty-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.empty-state .empty-icon i { font-size: 2rem; color: #9ca3af; }
.empty-state h5 { font-weight: 600; color: #1f2937; margin-bottom: 0.5rem; }
.empty-state p { color: #6b7280; font-size: 0.9rem; }

/* Disable hover lift on data-heavy cards (tables, forms, lists) */
.card.shadow-sm:hover,
.card.shadow-soft:hover,
.card.border-0:hover { transform: none; }
/* Re-enable hover only for dashboard stat cards */
.stat-card:hover { transform: translateY(-8px); }

/* Better button styles */
.btn { font-weight: 500; border-radius: 8px; transition: all 0.2s; }
.btn-primary { background: #3b82f6; border-color: #3b82f6; }
.btn-primary:hover { background: #2563eb; border-color: #2563eb; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(59,130,246,0.3); }
.btn-sm { border-radius: 6px; font-size: 0.8rem; }

/* User avatar circle */
.avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.8rem;
  color: #fff;
  flex-shrink: 0;
}

/* Better pagination */
.pagination { gap: 2px; }
.page-link { border-radius: 6px !important; font-size: 0.85rem; padding: 0.35rem 0.65rem; }
.page-item.active .page-link { background: #3b82f6; border-color: #3b82f6; }

/* Card header clean style */
.card-header { background: #fff; border-bottom: 1px solid #f3f4f6; font-weight: 600; }

/* Breadcrumb */
.breadcrumb { font-size: 0.85rem; }
.breadcrumb-item a { color: #3b82f6; text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }

/* Mobile spacing fix */
@media (max-width: 767.98px) {
  .container-fluid { padding-left: 1rem; padding-right: 1rem; }
  .table { font-size: 0.82rem; }
  .table thead th { font-size: 0.65rem; padding: 0.5rem 0.75rem; }
  .table tbody td { padding: 0.5rem 0.75rem; }
  .card-body { padding: 1rem; }
  .btn-sm { font-size: 0.75rem; padding: 0.3rem 0.6rem; }
  h1.h4, h4.fw-bold { font-size: 1.15rem !important; }
  .page-link { font-size: 0.75rem; padding: 0.25rem 0.5rem; }
  .modal-dialog { margin: 0.5rem; }
  .modal-dialog.modal-xl,
  .modal-dialog.modal-lg { max-width: calc(100% - 1rem); }
}