:root{
  --brand:#4f46e5; /* indigo-600 */
  --accent:#06b6d4; /* cyan-500 */
  --slate:#0f172a;
  --muted:#64748b;
  --bg:#ffffff;
  --surface:#ffffff;
  --border:#e5e7eb;
  --text:#111827;
}

/* Dark theme tokens */
.theme-dark{
  --bg:#0b1220;           /* deep navy */
  --surface:#0f172a;      /* slate-900 */
  --border:#1f2937;       /* slate-800 */
  --text:#e5e7eb;         /* gray-200 */
  --muted:#94a3b8;        /* slate-400 */
}

body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--text); background:var(--bg)}

/* Landing */
.bg-hero{
  background:
    radial-gradient(1100px 420px at -10% -10%, rgba(79,70,229,.14) 0, rgba(79,70,229,0) 60%),
    radial-gradient(1100px 420px at 110% 110%, rgba(6,182,212,.14) 0, rgba(6,182,212,0) 60%),
    linear-gradient(#ffffff,#f8fafc);
}
.theme-dark .bg-hero{
  background:
    radial-gradient(1000px 380px at -10% -10%, rgba(79,70,229,.35) 0, rgba(79,70,229,0) 60%),
    radial-gradient(1000px 380px at 110% 110%, rgba(6,182,212,.28) 0, rgba(6,182,212,0) 60%),
    linear-gradient(#0b1220,#0f172a);
}
.feature-card{transition:transform .2s ease, box-shadow .2s ease}
.feature-card:hover{transform:translateY(-2px); box-shadow:0 .75rem 1.5rem rgba(15,23,42,.08)}
.brand-square{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:.75rem;background:var(--brand);color:#fff;font-weight:800}

/* Auth */
.auth-shell{
  background:
    radial-gradient(800px 320px at 10% 10%, #e0e7ff 0, rgba(224,231,255,0) 55%),
    radial-gradient(900px 360px at 90% 90%, #cffafe 0, rgba(207,250,254,0) 55%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
.theme-dark .auth-shell{background:linear-gradient(#0b1220,#0f172a)}
.auth-card{border-radius:1.25rem}
.auth-aside{position:relative;background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff}
.auth-aside .blob{position:absolute;border-radius:50%;filter:blur(40px);opacity:.35}
.auth-aside .blob-1{width:200px;height:200px;right:-40px;top:-40px;background:#fff}
.auth-aside .blob-2{width:240px;height:240px;left:-60px;bottom:-60px;background:#fff}
.brand-square-lg{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:.75rem;background:#fff;color:var(--brand);font-weight:800}

/* Admin Shell */
.sidebar{width:18rem;background:var(--surface);min-height:100vh;flex-shrink:0;}
.sidebar .brand{height:64px}
.sidebar .nav-section{padding:.25rem 1rem;color:#94a3b8;text-transform:uppercase;font-size:.75rem}
.sidebar .nav-link{display:flex;align-items:center;gap:.5rem;border-radius:.5rem;padding:.55rem .75rem;color:#334155;text-decoration:none;}
.theme-dark .sidebar .nav-link{color:#cbd5e1}
.sidebar .nav-link .bi{font-size:1.1rem;color:var(--muted)}
.sidebar .nav-link:hover{background:rgba(79,70,229,.12);color:var(--brand)}
.sidebar .nav-link:hover .bi{color:var(--brand)}
.sidebar .nav-link.active{background:rgba(79,70,229,.12);color:var(--brand);font-weight:600}
.sidebar .nav-link.active .bi{color:var(--brand)}
.brand-circle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(79,70,229,.12);color:var(--brand);font-weight:700}

/* Fix layout issues */
.min-vh-100{min-height:100vh!important;}
main{flex-grow:1;overflow-y:auto;max-width:100%;}
@media (max-width: 767.98px) {
  main{padding:1rem!important;}
}

/* Navbar and cards in dark */
.theme-dark .navbar{background:var(--surface)!important;border-color:var(--border)!important}
.theme-dark .navbar .nav-link{color:#cbd5e1}
.theme-dark .navbar .nav-link:hover{color:#ffffff}
.theme-dark .card{background:var(--surface);color:var(--text);border-color:var(--border)}
.theme-dark .card-header{background:var(--surface);border-color:var(--border)}
.theme-dark .table{color:var(--text)}
.theme-dark .table thead{color:#cbd5e1}
.theme-dark .list-group-item{background:var(--surface);color:var(--text);border-color:var(--border)}
.theme-dark .offcanvas{background:var(--surface)}
.theme-dark .modal-content{background:var(--surface);color:var(--text)}
.theme-dark .border-top,.theme-dark .border-bottom{border-color:var(--border)!important}

/* KPI Cards */
.kpi-card{position:relative;overflow:hidden;border:0}
.kpi-card .icon{position:absolute;right:16px;top:12px;opacity:.15;font-size:64px}
.kpi-primary{background:linear-gradient(135deg,#eef2ff,#e0e7ff)}
.kpi-success{background:linear-gradient(135deg,#ecfdf5,#d1fae5)}
.kpi-warning{background:linear-gradient(135deg,#fffbeb,#fef3c7)}

/* Screenshot-like styling additions */
.sidebar-dark{background:linear-gradient(180deg,#0f172a 0%, #111827 100%)!important;color:#cbd5e1}
.sidebar-dark .nav-section{color:#93a4ba}
.sidebar-dark .nav-link{color:#cbd5e1}
.sidebar-dark .nav-link:hover{background:rgba(148,163,184,.15);color:#fff}
.sidebar-dark .nav-link .bi{color:#93a4ba}
.sidebar-dark .nav-link:hover .bi{color:#fff}
.sidebar-dark .nav-link.active{background:rgba(79,70,229,.25);color:#fff}

.card-elevated{border:0;box-shadow:0 .5rem 1.25rem rgba(15,23,42,.08);border-radius:1rem}
.card-gradient-top{position:relative;overflow:hidden}
.card-gradient-top:before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,#7c3aed,#06b6d4);}

/* KPI accents */
.card-accent-top{position:relative;overflow:hidden;border-radius:1rem}
.card-accent-top:before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:var(--card-accent, linear-gradient(90deg,#7c3aed,#06b6d4));}
.accent-indigo{--card-accent: linear-gradient(90deg,#6366f1,#06b6d4);}
.accent-green{--card-accent: linear-gradient(90deg,#10b981,#34d399);} 
.accent-orange{--card-accent: linear-gradient(90deg,#f59e0b,#f97316);} 
.accent-rose{--card-accent: linear-gradient(90deg,#f43f5e,#fb7185);} 
.accent-blue{--card-accent: linear-gradient(90deg,#3b82f6,#22d3ee);} 

.metric-value{font-size:2.25rem;font-weight:700;line-height:1}
.metric-label{color:#6b7280;font-size:.825rem}

/* Enhanced Buttons & CTAs */
.btn-brand{
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  border:0;color:#fff;font-weight:600;
  box-shadow:0 .125rem .25rem rgba(102,126,234,.4);
  transition:all .2s ease;position:relative;overflow:hidden;
}
.btn-brand:hover{
  background:linear-gradient(135deg,#5a6fd8 0%,#6a4190 100%);
  color:#fff;transform:translateY(-1px);
  box-shadow:0 .25rem .75rem rgba(102,126,234,.5);
}
.btn-brand:active{transform:translateY(0);box-shadow:0 .125rem .25rem rgba(102,126,234,.4);}

.btn-cta{
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  border:0;color:#fff;font-weight:600;
  padding:.75rem 1.5rem;border-radius:.5rem;
  box-shadow:0 .25rem .5rem rgba(102,126,234,.3);
  transition:all .2s ease;text-decoration:none;
  display:inline-flex;align-items:center;gap:.5rem;
}
.btn-cta:hover{
  background:linear-gradient(135deg,#5a6fd8 0%,#6a4190 100%);
  color:#fff;transform:translateY(-2px);
  box-shadow:0 .5rem 1rem rgba(102,126,234,.4);
}

.btn-action{
  background:#f8fafc;border:1px solid #e2e8f0;color:#475569;
  font-weight:500;padding:.5rem 1rem;border-radius:.375rem;
  transition:all .15s ease;text-decoration:none;
  display:inline-flex;align-items:center;gap:.375rem;
}
.btn-action:hover{
  background:#f1f5f9;border-color:#cbd5e1;color:#334155;
  transform:translateY(-1px);
  box-shadow:0 .125rem .25rem rgba(15,23,42,.1);
}

/* Quick action buttons with icons */
.quick-action-btn{
  background:#fff;border:1px solid #e5e7eb;
  padding:1rem;border-radius:.75rem;
  text-decoration:none;color:#374151;
  transition:all .2s ease;
  display:flex;flex-direction:column;
  align-items:center;gap:.5rem;
  box-shadow:0 .0625rem .125rem rgba(0,0,0,.05);
}
.quick-action-btn:hover{
  background:#f9fafb;border-color:#d1d5db;
  color:#111827;transform:translateY(-2px);
  box-shadow:0 .25rem .5rem rgba(0,0,0,.1);
}
.quick-action-btn i{font-size:1.5rem;color:#6366f1;}
.quick-action-btn:hover i{color:#4f46e5;}

/* Table action buttons */
.table-actions{display:flex;gap:.5rem;align-items:center;}
.table-actions .btn{padding:.25rem .5rem;font-size:.875rem;}

/* Enhanced table styling */
.table-enhanced{border-collapse:separate;border-spacing:0;}
.table-enhanced th{background:#f8fafc;color:#475569;font-weight:600;font-size:.875rem;padding:1rem .75rem;border-bottom:1px solid #e2e8f0;}
.table-enhanced td{padding:.75rem;border-bottom:1px solid #f1f5f9;}
.table-enhanced tbody tr:hover{background:#f8fafc;}

/* Badge colors */
.bg-pink-subtle{background-color:#fdf2f8;}
.text-pink{color:#ec4899;}

.banner-info{background:#fff7ed;border:1px solid #ffedd5;color:#92400e;border-radius:.75rem;padding:.75rem 1rem}
.badge-pill-soft{background:rgba(79,70,229,.12);color:#4f46e5;border:1px solid rgba(79,70,229,.2);border-radius:999px;padding:.25rem .5rem;font-size:.75rem}

/* Modern Login Page */
.login-modern{
  margin:0;
  padding:0;
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  height:100vh;
  overflow:hidden;
}

.login-container{
  display:flex;
  height:100vh;
  width:100%;
  position:relative;
}

.login-left{
  flex:1;
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  padding:2rem;
}

.login-left::before{
  content:'';
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  animation:float 20s ease-in-out infinite;
}

@keyframes float{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  50%{transform:translate(-20px,-20px) rotate(1deg);}
}

.login-content{
  max-width:450px;
  width:100%;
  z-index:1;
  position:relative;
}

.brand-logo{
  display:flex;
  align-items:center;
  margin-bottom:2rem;
}

.brand-square-modern{
  width:60px;
  height:60px;
  background:rgba(255,255,255,0.2);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.3);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  font-weight:800;
  color:#fff;
  flex-shrink:0;
}

.brand-title{
  font-size:28px;
  font-weight:700;
  margin:0;
  color:#fff;
  line-height:1.2;
}

.brand-subtitle{
  font-size:16px;
  color:rgba(255,255,255,0.8);
  margin:0;
  line-height:1.4;
}

.login-features{
  margin-top:3rem;
}

.feature-item{
  display:flex;
  align-items:flex-start;
  margin-bottom:2rem;
}

.feature-icon{
  width:48px;
  height:48px;
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(10px);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-right:1rem;
  color:#fff;
  font-size:20px;
  flex-shrink:0;
}

.feature-content h6{
  color:#fff;
  font-weight:600;
  margin-bottom:0.5rem;
  font-size:16px;
}

.feature-content p{
  color:rgba(255,255,255,0.8);
  font-size:14px;
  margin:0;
  line-height:1.5;
}

.login-right{
  flex:1;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
}

.login-form{
  width:100%;
  max-width:400px;
}

.form-header{
  text-align:center;
  margin-bottom:2rem;
}

.form-header h2{
  font-size:32px;
  font-weight:700;
  color:#1f2937;
  margin-bottom:0.5rem;
}

.form-header p{
  color:#6b7280;
  font-size:16px;
  margin:0;
}

.form-group{
  margin-bottom:1.5rem;
}

.form-label{
  display:block;
  font-weight:600;
  color:#374151;
  margin-bottom:0.5rem;
  font-size:14px;
}

.input-with-icon{
  position:relative;
}

.input-with-icon i{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  color:#9ca3af;
  font-size:18px;
  z-index:2;
}

.input-with-icon .form-control{
  padding-left:48px;
  height:56px;
  border:2px solid #e5e7eb;
  border-radius:12px;
  font-size:16px;
  transition:all 0.3s ease;
  width:100%;
}

.input-with-icon .form-control:focus{
  border-color:#667eea;
  box-shadow:0 0 0 3px rgba(102,126,234,0.1);
  outline:none;
}

.form-options{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:2rem;
  flex-wrap:wrap;
  gap:1rem;
}

.form-check{
  display:flex;
  align-items:center;
  gap:0.5rem;
}

.form-check-label{
  color:#6b7280;
  font-size:14px;
  margin:0;
}

.forgot-link{
  color:#667eea;
  text-decoration:none;
  font-size:14px;
  font-weight:500;
}

.forgot-link:hover{
  color:#5a6fd8;
}

.btn-login{
  width:100%;
  height:56px;
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  border:none;
  border-radius:12px;
  color:#fff;
  font-size:16px;
  font-weight:600;
  transition:all 0.3s ease;
  margin-bottom:2rem;
  cursor:pointer;
}

.btn-login:hover{
  background:linear-gradient(135deg,#5a6fd8 0%,#6a4190 100%);
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(102,126,234,0.3);
}

.form-footer{
  text-align:center;
}

.form-footer p{
  color:#6b7280;
  font-size:14px;
  margin-bottom:1rem;
}

.form-footer a{
  color:#667eea;
  text-decoration:none;
}

.back-link{
  color:#9ca3af;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  text-decoration:none;
}

.back-link:hover{
  color:#667eea;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .login-left{
    padding:1.5rem;
  }
  .login-right{
    padding:1.5rem;
  }
  .brand-title{
    font-size:24px;
  }
}

@media (max-width: 768px) {
  .login-modern{
    height:auto;
    min-height:100vh;
    overflow-x:hidden;
    overflow-y:auto;
  }
  .login-container{
    flex-direction:column;
    height:auto;
    min-height:100vh;
  }
  .login-left{
    flex:none;
    height:50vh;
    min-height:400px;
    padding:2rem 1rem;
  }
  .login-content{
    max-width:none;
    text-align:center;
  }
  .brand-logo{
    justify-content:center;
    text-align:center;
  }
  .brand-title{
    font-size:22px;
  }
  .login-features{
    margin-top:2rem;
  }
  .feature-item{
    margin-bottom:1.5rem;
    justify-content:center;
    text-align:center;
  }
  .login-right{
    flex:none;
    height:auto;
    min-height:50vh;
    padding:2rem 1rem;
  }
  .form-header h2{
    font-size:28px;
  }
}

@media (max-width: 480px) {
  .login-left{
    height:45vh;
    min-height:350px;
    padding:1.5rem 1rem;
  }
  .brand-square-modern{
    width:50px;
    height:50px;
    font-size:20px;
  }
  .brand-title{
    font-size:20px;
  }
  .feature-icon{
    width:40px;
    height:40px;
    font-size:18px;
  }
  .login-right{
    min-height:55vh;
    padding:1.5rem 1rem;
  }
  .form-header h2{
    font-size:24px;
  }
  .input-with-icon .form-control{
    height:48px;
    font-size:14px;
  }
  .btn-login{
    height:48px;
    font-size:14px;
  }
  .form-options{
    flex-direction:column;
    align-items:flex-start;
    gap:0.5rem;
  }
}

/* Modern Landing Page */
.landing-modern{margin:0;padding:0;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;}

/* Navigation */
.navbar-modern{background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,0.2);transition:all 0.3s ease;}

.brand-logo-nav{display:flex;align-items:center;}
.brand-square-nav{width:40px;height:40px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:#fff;margin-right:12px;}
.brand-name{font-size:18px;font-weight:700;color:#1f2937;line-height:1.2;}
.brand-tagline{font-size:12px;color:#6b7280;line-height:1;}

.navbar-modern .nav-link{color:#374151;font-weight:500;transition:color 0.3s ease;}
.navbar-modern .nav-link:hover{color:#667eea;}

.btn-admin{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;color:#fff;padding:8px 20px;border-radius:8px;font-weight:600;transition:all 0.3s ease;}
.btn-admin:hover{background:linear-gradient(135deg,#5a6fd8 0%,#6a4190 100%);transform:translateY(-1px);box-shadow:0 4px 12px rgba(102,126,234,0.3);}

/* Hero Section */
.hero-section{min-height:100vh;position:relative;display:flex;align-items:center;background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);}

.hero-background{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;z-index:1;}

.hero-shapes{position:relative;width:100%;height:100%;}
.shape{position:absolute;border-radius:50%;filter:blur(40px);opacity:0.1;}
.shape-1{width:300px;height:300px;background:linear-gradient(135deg,#667eea,#764ba2);top:10%;left:10%;animation:float1 20s ease-in-out infinite;}
.shape-2{width:200px;height:200px;background:linear-gradient(135deg,#06b6d4,#3b82f6);top:60%;right:20%;animation:float2 25s ease-in-out infinite;}
.shape-3{width:150px;height:150px;background:linear-gradient(135deg,#10b981,#34d399);bottom:20%;left:30%;animation:float3 30s ease-in-out infinite;}

@keyframes float1{0%,100%{transform:translate(0,0) rotate(0deg);}50%{transform:translate(20px,-30px) rotate(180deg);}}
@keyframes float2{0%,100%{transform:translate(0,0) rotate(0deg);}50%{transform:translate(-25px,20px) rotate(-180deg);}}
@keyframes float3{0%,100%{transform:translate(0,0) rotate(0deg);}50%{transform:translate(30px,-20px) rotate(90deg);}}

.hero-content{position:relative;z-index:2;}

.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(102,126,234,0.1);color:#667eea;padding:8px 16px;border-radius:50px;font-size:14px;font-weight:600;margin-bottom:24px;}

.hero-title{font-size:3.5rem;font-weight:800;color:#1f2937;line-height:1.1;margin-bottom:24px;}

.hero-subtitle{font-size:1.25rem;color:#6b7280;line-height:1.6;margin-bottom:32px;}

.hero-features{margin-bottom:40px;}
.hero-features .feature-item{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.hero-features .feature-item i{color:#10b981;font-size:20px;}
.hero-features .feature-item span{color:#374151;font-weight:500;}

.hero-actions{display:flex;gap:16px;flex-wrap:wrap;}

.btn-hero-primary{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:16px 32px;border-radius:12px;font-weight:600;text-decoration:none;transition:all 0.3s ease;}
.btn-hero-primary:hover{background:linear-gradient(135deg,#5a6fd8 0%,#6a4190 100%);transform:translateY(-2px);box-shadow:0 8px 25px rgba(102,126,234,0.3);color:#fff;}

.btn-hero-secondary{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#374151;padding:16px 32px;border-radius:12px;font-weight:600;text-decoration:none;border:2px solid #e5e7eb;transition:all 0.3s ease;}
.btn-hero-secondary:hover{background:#f9fafb;border-color:#d1d5db;transform:translateY(-2px);color:#374151;}

/* Hero Visual */
.hero-visual{position:relative;z-index:2;}

.dashboard-preview{background:#fff;border-radius:20px;box-shadow:0 25px 50px rgba(0,0,0,0.1);overflow:hidden;transform:perspective(1000px) rotateY(-5deg) rotateX(5deg);transition:transform 0.3s ease;}
.dashboard-preview:hover{transform:perspective(1000px) rotateY(0deg) rotateX(0deg);}

.preview-header{background:#f8fafc;padding:16px 20px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;gap:12px;}
.preview-dots{display:flex;gap:6px;}
.preview-dots span{width:12px;height:12px;border-radius:50%;background:#e5e7eb;}
.preview-dots span:first-child{background:#ef4444;}
.preview-dots span:nth-child(2){background:#f59e0b;}
.preview-dots span:last-child{background:#10b981;}
.preview-title{font-size:14px;font-weight:600;color:#374151;}

.preview-content{padding:20px;}

.preview-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;}
.stat-card{background:#f8fafc;border-radius:12px;padding:16px;position:relative;overflow:hidden;}
.stat-card.accent-blue{background:linear-gradient(135deg,#dbeafe,#bfdbfe);}
.stat-card.accent-green{background:linear-gradient(135deg,#dcfce7,#bbf7d0);}
.stat-value{font-size:24px;font-weight:800;color:#1f2937;}
.stat-label{font-size:12px;color:#6b7280;margin-top:4px;}
.stat-card i{position:absolute;right:12px;top:12px;font-size:24px;opacity:0.3;}

.preview-appointments{space-y:12px;}
.appointment-item{display:flex;justify-content:space-between;align-items:center;padding:12px;background:#f9fafb;border-radius:8px;margin-bottom:8px;}
.patient-name{font-weight:600;color:#1f2937;font-size:14px;}
.appointment-details{font-size:12px;color:#6b7280;}
.status-badge{padding:4px 8px;border-radius:4px;font-size:11px;font-weight:600;}
.status-badge.completed{background:#dcfce7;color:#166534;}
.status-badge.pending{background:#fef3c7;color:#92400e;}

/* Features Section */
.features-section{padding:100px 0;background:#fff;}

.section-header{text-align:center;margin-bottom:80px;}
.section-title{font-size:2.5rem;font-weight:800;color:#1f2937;margin-bottom:16px;}
.section-subtitle{font-size:1.25rem;color:#6b7280;}

.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;}

.feature-card{background:#fff;border-radius:20px;padding:40px 32px;text-align:center;border:1px solid #f3f4f6;transition:all 0.3s ease;}
.feature-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,0.1);border-color:#e5e7eb;}

.feature-icon{width:80px;height:80px;border-radius:20px;display:flex;align-items:center;justify-content:center;margin:0 20px 24px;font-size:32px;color:#fff;}

.feature-title{font-size:1.5rem;font-weight:700;color:#1f2937;margin-bottom:16px;}
.feature-description{color:#6b7280;line-height:1.6;}

/* Footer */
.footer-modern{background:#1f2937;color:#d1d5db;padding:60px 0 30px;}

.footer-content{display:grid;grid-template-columns:2fr 1fr 1fr;gap:60px;margin-bottom:40px;}

.brand-logo-footer{display:flex;align-items:center;margin-bottom:20px;}
.brand-square-footer{width:48px;height:48px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#fff;margin-right:16px;}

.footer-description{color:#9ca3af;line-height:1.6;}

.footer-section h6{color:#f9fafb;font-weight:700;margin-bottom:16px;}
.footer-section ul{list-style:none;padding:0;}
.footer-section ul li{margin-bottom:8px;}
.footer-section ul li a{color:#d1d5db;text-decoration:none;transition:color 0.3s ease;}
.footer-section ul li a:hover{color:#667eea;}
.footer-section ul li i{margin-right:8px;color:#9ca3af;}

.footer-bottom{border-top:1px solid #374151;padding-top:30px;text-align:center;color:#9ca3af;}

@media (max-width: 768px) {
  .hero-title{font-size:2.5rem;}
  .hero-actions{justify-content:center;}
  .dashboard-preview{transform:none;}
  .features-grid{grid-template-columns:1fr;}
  .footer-content{grid-template-columns:1fr;gap:40px;}
}

/* Enhanced Appointments & Dashboard UI */
.stat-card-mini{
  background:#fff;
  border-radius:12px;
  padding:20px;
  border:1px solid #f3f4f6;
  transition:all 0.2s ease;
  display:flex;
  align-items:center;
  gap:16px;
}
.stat-card-mini:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(0,0,0,0.08);
}
.stat-icon{
  width:48px;
  height:48px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
}
.stat-content .stat-number{
  font-size:24px;
  font-weight:800;
  color:#1f2937;
  line-height:1;
}
.stat-content .stat-label{
  font-size:14px;
  color:#6b7280;
  font-weight:500;
}

/* Patient Avatars */
.patient-avatar{
  width:40px;
  height:40px;
  border-radius:8px;
  background:linear-gradient(135deg,#667eea,#764ba2);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:14px;
}
.patient-avatar-lg{
  width:60px;
  height:60px;
  border-radius:12px;
  background:linear-gradient(135deg,#667eea,#764ba2);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:20px;
}

/* Status Badges */
.status-badge{
  padding:6px 12px;
  border-radius:6px;
  font-size:12px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.status-completed{background:#dcfce7;color:#166534;}
.status-pending{background:#fef3c7;color:#92400e;}
.status-cancelled{background:#fee2e2;color:#dc2626;}
.status-no-show{background:#f3f4f6;color:#6b7280;}

/* Appointment Detail Cards */
.appointment-detail-card{
  background:#f8fafc;
  border-radius:12px;
  padding:20px;
  border:1px solid #e5e7eb;
}
.detail-header{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  color:#374151;
  margin-bottom:16px;
}
.detail-content{
  space-y:12px;
}
.detail-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}
.detail-item .label{
  color:#6b7280;
  font-weight:500;
  font-size:14px;
}
.detail-item .value{
  color:#1f2937;
  font-weight:600;
  font-size:14px;
}

/* Enhanced Dashboard Cards */
.dashboard-card{
  background:#fff;
  border-radius:16px;
  border:1px solid #f3f4f6;
  transition:all 0.3s ease;
  overflow:hidden;
}
.dashboard-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px rgba(0,0,0,0.1);
  border-color:#e5e7eb;
}

.dashboard-card-header{
  background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%);
  padding:20px 24px;
  border-bottom:1px solid #e5e7eb;
}

.kpi-card-enhanced{
  background:#fff;
  border-radius:16px;
  padding:24px;
  border:1px solid #f3f4f6;
  position:relative;
  overflow:hidden;
  transition:all 0.3s ease;
}
.kpi-card-enhanced:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px rgba(0,0,0,0.1);
}
.kpi-card-enhanced:before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:var(--kpi-accent, linear-gradient(90deg,#667eea,#764ba2));
}
.kpi-primary{--kpi-accent: linear-gradient(90deg,#3b82f6,#06b6d4);}
.kpi-success{--kpi-accent: linear-gradient(90deg,#10b981,#34d399);}
.kpi-warning{--kpi-accent: linear-gradient(90deg,#f59e0b,#f97316);}
.kpi-danger{--kpi-accent: linear-gradient(90deg,#ef4444,#f87171);}

.kpi-content{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.kpi-text .kpi-number{
  font-size:2.5rem;
  font-weight:800;
  color:#1f2937;
  line-height:1;
}
.kpi-text .kpi-label{
  color:#6b7280;
  font-weight:500;
  margin-top:4px;
}
.kpi-icon{
  width:60px;
  height:60px;
  border-radius:12px;
  background:rgba(0,0,0,0.05);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  opacity:0.7;
}

/* Quick Action Cards Enhanced */
.quick-action-enhanced{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:20px;
  text-decoration:none;
  color:#374151;
  transition:all 0.3s ease;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
}
.quick-action-enhanced:hover{
  background:#f9fafb;
  border-color:#d1d5db;
  color:#1f2937;
  transform:translateY(-4px);
  box-shadow:0 12px 24px rgba(0,0,0,0.1);
}
.quick-action-enhanced i{
  font-size:28px;
  color:#667eea;
  transition:color 0.3s ease;
}
.quick-action-enhanced:hover i{
  color:#5a6fd8;
}
.quick-action-enhanced span{
  font-weight:600;
  font-size:14px;
}

/* Timeline for appointments */
.appointment-timeline{
  position:relative;
  padding-left:24px;
}
.appointment-timeline:before{
  content:'';
  position:absolute;
  left:8px;
  top:0;
  bottom:0;
  width:2px;
  background:#e5e7eb;
}
.timeline-item{
  position:relative;
  padding:16px 0;
  border-radius:12px;
  padding:16px 20px;
  margin-bottom:12px;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  transition:all 0.2s ease;
}
.timeline-item:hover{
  background:#f1f5f9;
  border-color:#d1d5db;
  transform:translateX(4px);
}
.timeline-item:before{
  content:'';
  position:absolute;
  left:-28px;
  top:20px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#667eea;
  border:3px solid #fff;
  box-shadow:0 0 0 2px #e5e7eb;
}

/* Status badges for check-in/check-out */
.status-badge.status-checked-in{
  background-color:#fef3c7;
  color:#92400e;
  border:1px solid #fbbf24;
}
.status-badge.status-in-progress{
  background-color:#dbeafe;
  color:#1d4ed8;
  border:1px solid #3b82f6;
}

@media (max-width: 768px) {
  .stat-card-mini{padding:16px;gap:12px;}
  .stat-icon{width:40px;height:40px;font-size:18px;}
  .stat-content .stat-number{font-size:20px;}
  .kpi-card-enhanced{padding:20px;}
  .kpi-text .kpi-number{font-size:2rem;}
}