:root{
  --navy:#12345b;
  --navy-deep:#0b2745;
  --blue:#159ed0;
  --blue-dark:#087eae;
  --sky:#eaf7fc;
  --page:#f6f9fc;
  --white:#ffffff;
  --text:#304b63;
  --muted:#7b8fa2;
  --line:#e5edf3;
  --green:#16946b;
  --orange:#d98b20;
  --red:#c64a58;
  --shadow:0 10px 30px rgba(18,52,91,.07);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Arial,Helvetica,sans-serif;background:var(--page);color:var(--text);font-size:14px}
a{text-decoration:none;color:inherit}
button{font-family:inherit}

.admin-layout{min-height:100vh}
.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:258px;
  background:var(--navy-deep);color:#fff;padding:24px 15px;
  z-index:100;display:flex;flex-direction:column
}
.brand{
  display:flex;align-items:center;gap:12px;padding:4px 11px 25px;
  border-bottom:1px solid rgba(255,255,255,.1)
}
.brand-mark{
  width:45px;height:45px;border-radius:12px;background:var(--blue);
  display:grid;place-items:center;font-size:15px;font-weight:800
}
.brand-name{font-size:20px;font-weight:800;line-height:1}
.brand-caption{font-size:9px;letter-spacing:1.6px;color:#a9c1d5;margin-top:6px}
.nav-section{margin:25px 10px 9px;font-size:9px;letter-spacing:1.6px;color:#7894ad;font-weight:700}
.nav a{
  display:flex;align-items:center;gap:12px;padding:12px 13px;margin:3px 0;
  border-radius:8px;color:#c8d7e5;font-size:13px;font-weight:600
}
.nav a:hover,.nav a.active{background:rgba(21,158,208,.18);color:#fff}
.nav-icon{width:21px;text-align:center;font-size:16px}
.sidebar-footer{margin-top:auto}
.secure-box{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  border-radius:9px;padding:12px;margin:12px 4px
}
.secure-dot{display:inline-block;width:7px;height:7px;background:#3ed59f;border-radius:50%;margin-right:7px}
.secure-box span{font-size:10px;color:#abc0d1}

.main{margin-left:258px;min-height:100vh}
.topbar{
  height:78px;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:0 34px;
  position:sticky;top:0;z-index:50
}
.title{font-size:20px;font-weight:800;color:var(--navy)}
.crumb{font-size:11px;color:var(--muted);margin-top:4px}
.doctor{display:flex;align-items:center;gap:11px}
.doctor-avatar{
  width:40px;height:40px;border-radius:50%;background:var(--sky);
  color:var(--blue-dark);display:grid;place-items:center;font-weight:800
}
.doctor-name{font-size:12px;font-weight:800;color:var(--navy)}
.doctor-role{font-size:10px;color:var(--muted);margin-top:3px}
.signout{font-size:11px;color:var(--red);font-weight:800;margin-left:14px}

.content{padding:30px 34px;max-width:1500px;margin:auto}
.welcome{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:27px 29px;background:#fff;border:1px solid var(--line);
  border-radius:15px;box-shadow:var(--shadow);margin-bottom:22px
}
.welcome h1{margin:0;color:var(--navy);font-size:27px;letter-spacing:-.4px}
.welcome p{margin:7px 0 0;color:var(--muted);font-size:13px}
.today{background:var(--sky);color:var(--blue-dark);padding:10px 14px;border-radius:8px;font-size:11px;font-weight:800;white-space:nowrap}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.stat{
  background:#fff;border:1px solid var(--line);border-radius:13px;padding:19px;
  box-shadow:0 7px 24px rgba(18,52,91,.045)
}
.stat-head{display:flex;justify-content:space-between;align-items:center}
.stat-label{font-size:11px;font-weight:700;color:var(--muted)}
.stat-icon{
  width:34px;height:34px;border-radius:9px;background:var(--sky);
  color:var(--blue-dark);display:grid;place-items:center;font-weight:800
}
.stat-value{font-size:28px;font-weight:800;color:var(--navy);margin-top:12px}
.stat-foot{font-size:10px;color:var(--green);margin-top:3px}

.columns{display:grid;grid-template-columns:1.25fr .75fr;gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 7px 24px rgba(18,52,91,.045);overflow:hidden}
.card-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 21px;border-bottom:1px solid var(--line)
}
.card-head h2{font-size:16px;color:var(--navy);margin:0}
.card-link{font-size:11px;color:var(--blue-dark);font-weight:800}
.appointment{
  display:grid;grid-template-columns:62px 1fr auto;gap:14px;align-items:center;
  padding:16px 21px;border-bottom:1px solid #eef3f6
}
.appointment:last-child{border-bottom:0}
.appt-time{font-size:12px;color:var(--blue-dark);font-weight:800}
.appt-name{font-size:13px;font-weight:800;color:var(--navy)}
.appt-desc{font-size:10px;color:var(--muted);margin-top:4px}
.badge{font-size:9px;font-weight:800;padding:6px 9px;border-radius:20px}
.badge-confirmed{background:#e9f8f2;color:var(--green)}
.badge-pending{background:#fff5e2;color:var(--orange)}
.badge-completed{background:#edf2f7;color:#62788d}

.quick-grid{padding:17px;display:grid;grid-template-columns:1fr 1fr;gap:11px}
.quick{
  border:1px solid var(--line);border-radius:10px;padding:16px;background:#fbfdff
}
.quick:hover{border-color:#b9ddea;background:#f4fbfe}
.quick-icon{font-size:19px;color:var(--blue)}
.quick h3{margin:8px 0 4px;font-size:12px;color:var(--navy)}
.quick p{margin:0;font-size:10px;color:var(--muted);line-height:1.45}

.recent{margin-top:20px}
.notice{
  margin-top:20px;background:#edf8fc;border-left:3px solid var(--blue);
  border-radius:8px;padding:13px 16px;color:#5d7487;font-size:11px
}
.notice strong{color:var(--navy)}

.mobile-menu{display:none;border:0;background:none;font-size:23px;color:var(--navy);cursor:pointer;margin-right:10px}

.login-page{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;background:linear-gradient(135deg,#edf4fb,#f8fcff)
}
.login-card{
  width:100%;max-width:430px;background:#fff;border:1px solid var(--line);
  border-radius:17px;padding:40px;box-shadow:0 22px 60px rgba(18,52,91,.12)
}
.login-logo{
  width:64px;height:64px;margin:0 auto 15px;border-radius:15px;background:var(--blue);
  color:#fff;display:grid;place-items:center;font-weight:800;font-size:19px
}
.login-brand{text-align:center}.login-brand h1{margin:0;color:var(--navy);font-size:27px}
.login-brand p{margin:6px 0 29px;color:var(--muted);font-size:12px}
.login-card h2{margin:0;color:var(--navy);font-size:21px}
.login-intro{color:var(--muted);font-size:12px;margin:7px 0 21px}
.login-card label{display:block;color:var(--navy);font-size:12px;font-weight:800;margin:15px 0 7px}
.login-card input{width:100%;padding:13px;border:1px solid #d6e2ea;border-radius:8px;outline:0;font-size:14px}
.login-card input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(21,158,208,.1)}
.signin{
  width:100%;border:0;background:var(--blue);color:#fff;border-radius:8px;
  padding:14px;margin-top:21px;font-weight:800;cursor:pointer
}
.signin:hover{background:var(--blue-dark)}
.error{background:#fff0f2;border:1px solid #efc8ce;color:var(--red);padding:11px;border-radius:7px;font-size:11px;margin-bottom:12px}
.back{display:block;text-align:center;color:var(--blue-dark);font-size:11px;font-weight:800;margin-top:20px}

@media(max-width:1050px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .columns{grid-template-columns:1fr}
}
@media(max-width:750px){
  .sidebar{transform:translateX(-100%);transition:transform .22s ease}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .mobile-menu{display:inline-block}
  .topbar{padding:0 18px}
  .doctor-info{display:none}
  .content{padding:20px}
  .welcome{align-items:flex-start;flex-direction:column}
}
@media(max-width:500px){
  .stats{grid-template-columns:1fr}
  .welcome h1{font-size:23px}
  .login-card{padding:30px 22px}
  .signout{margin-left:7px}
}