/* ============================================
   DR. MUHAMMED – PREMIUM ADMIN PANEL CSS
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@600;700;800&display=swap');

/* ─── TOKENS ─────────────────────────────── */
:root {
  --primary:        #0A5C36;
  --primary-light:  #16A05D;
  --primary-glow:   rgba(10,92,54,.12);
  --accent:         #FACC15;

  --sidebar-bg:     #0B1F14;
  --sidebar-hover:  rgba(255,255,255,.06);
  --sidebar-active: rgba(22,160,93,.18);
  --sidebar-border: rgba(255,255,255,.07);

  --bg:             #F0F4F2;
  --bg-card:        #FFFFFF;
  --border:         #E4EBE7;

  --text:           #0F172A;
  --text-muted:     #64748B;
  --text-light:     #94A3B8;

  --shadow-xs:  0 1px 4px rgba(0,0,0,.06);
  --shadow-sm:  0 4px 14px rgba(0,0,0,.07);
  --shadow-md:  0 10px 40px rgba(0,0,0,.10);

  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;

  --ease: cubic-bezier(0.16,1,0.3,1);
}

/* ─── RESET ──────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
h1,h2,h3,h4,h5{font-family:'Outfit',sans-serif;font-weight:700;color:var(--text);line-height:1.25}
a{text-decoration:none;color:inherit;transition:.2s ease}
ul{list-style:none}
button{cursor:pointer;font-family:inherit}

/* ─── LAYOUT ─────────────────────────────── */
.admin-layout{display:flex;min-height:100vh}

/* ─── SIDEBAR ────────────────────────────── */
.admin-sidebar{
  width: 260px;
  min-width: 260px;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--sidebar-border);
  transition: width .3s var(--ease);
}

.sidebar-logo{
  padding: 1.75rem 1.5rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  border-bottom: 1px solid var(--sidebar-border);
}
.sidebar-logo-icon{
  width: 44px; height: 44px; min-width: 44px;
  background: linear-gradient(135deg,var(--primary-light),var(--primary));
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: #fff;
  box-shadow: 0 4px 14px rgba(10,92,54,.4);
}
.sidebar-logo-text h2{
  font-size: 1rem; color: #fff; font-weight: 700; line-height: 1.1;
}
.sidebar-logo-text span{
  font-size: .7rem; color: rgba(255,255,255,.4);
  text-transform: uppercase; letter-spacing: .08em;
}

.sidebar-section-label{
  padding: 1.5rem 1.5rem .5rem;
  font-size: .65rem;
  color: rgba(255,255,255,.25);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
}

.sidebar-nav{flex: 1; padding: .5rem 0}
.sidebar-nav a{
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .78rem 1.5rem;
  color: rgba(255,255,255,.5);
  font-size: .875rem;
  font-weight: 500;
  margin: .1rem .75rem;
  border-radius: 10px;
  transition: all .2s ease;
  position: relative;
}
.sidebar-nav a:hover{
  color: rgba(255,255,255,.9);
  background: var(--sidebar-hover);
}
.sidebar-nav a.active{
  color: #fff;
  background: var(--sidebar-active);
  font-weight: 600;
}
.sidebar-nav a.active::before{
  content: '';
  position: absolute;
  left: -0px;
  top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%;
  background: var(--primary-light);
  border-radius: 0 3px 3px 0;
}
.sidebar-nav a .nav-icon{
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  font-size: .85rem;
  transition: .2s ease;
}
.sidebar-nav a.active .nav-icon,
.sidebar-nav a:hover .nav-icon{
  background: rgba(22,160,93,.2);
  color: var(--primary-light);
}

.sidebar-footer{
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--sidebar-border);
}
.sidebar-user{
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  margin-bottom: .75rem;
}
.sidebar-avatar{
  width: 36px; height: 36px;
  background: linear-gradient(135deg,var(--primary-light),var(--primary));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: .85rem;
}
.sidebar-user-info h4{font-size: .82rem; color: #fff; font-weight: 600}
.sidebar-user-info span{font-size: .7rem; color: rgba(255,255,255,.35)}
.sidebar-actions{display: flex; gap: .5rem}
.sidebar-action-btn{
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem;
  border-radius: 8px;
  font-size: .75rem;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.5);
  background: transparent;
  transition: .2s ease;
}
.sidebar-action-btn:hover{background:rgba(255,255,255,.07);color:#fff}
.sidebar-action-btn.logout:hover{background:rgba(239,68,68,.15);color:#F87171;border-color:rgba(239,68,68,.25)}

/* ─── TOPBAR ─────────────────────────────── */
.admin-topbar{
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 0 2rem;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-xs);
}
.topbar-left{display:flex;align-items:center;gap:1rem}
.topbar-left h1{font-size:1.25rem;color:var(--text);font-weight:700}
.topbar-breadcrumb{
  display: flex; align-items: center; gap: .4rem;
  font-size: .78rem; color: var(--text-muted);
}
.topbar-breadcrumb a{color:var(--text-muted)}
.topbar-breadcrumb a:hover{color:var(--primary)}
.topbar-breadcrumb span{color:var(--text-light)}
.topbar-right{display:flex;align-items:center;gap:1rem}
.topbar-badge{
  display:flex;align-items:center;gap:.5rem;
  padding:.45rem 1rem;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:999px;
  font-size:.78rem;
  color:var(--text-muted);
  font-weight:500;
}
.status-dot{width:8px;height:8px;border-radius:50%;background:#10B981;display:inline-block;box-shadow:0 0 0 2px rgba(16,185,129,.2)}
.btn-logout{
  display:flex;align-items:center;gap:.4rem;
  padding:.5rem 1rem;
  background:#FEF2F2;
  color:#DC2626;
  border:1px solid #FECACA;
  border-radius:var(--radius-sm);
  font-size:.8rem;
  font-weight:600;
  transition:.2s ease;
}
.btn-logout:hover{background:#FEE2E2;color:#B91C1C}
.btn-view-site{
  display:flex;align-items:center;gap:.4rem;
  padding:.5rem 1rem;
  background:var(--primary-glow);
  color:var(--primary);
  border:1px solid rgba(10,92,54,.2);
  border-radius:var(--radius-sm);
  font-size:.8rem;
  font-weight:600;
  transition:.2s ease;
}
.btn-view-site:hover{background:var(--primary);color:#fff}

/* ─── MAIN CONTENT ───────────────────────── */
.admin-main{flex:1;display:flex;flex-direction:column;overflow-x:hidden;min-width:0}
.admin-content{padding:2rem;flex:1}

/* ─── PAGE HEADER ────────────────────────── */
.admin-page-header{margin-bottom:2rem}
.admin-page-header h2{font-size:1.5rem;color:var(--text);margin-bottom:.25rem}
.admin-page-header p{font-size:.875rem;color:var(--text-muted)}

/* ─── STAT CARDS ─────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-bottom:2rem}
.stat-card{
  background:var(--bg-card);
  border-radius:var(--radius-md);
  padding:1.5rem;
  border:1px solid var(--border);
  box-shadow:var(--shadow-xs);
  transition:.3s var(--ease);
  position:relative;
  overflow:hidden;
}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.stat-card::after{
  content:'';
  position:absolute;
  top:0;right:0;
  width:80px;height:80px;
  border-radius:50%;
  transform:translate(30%,-30%);
  opacity:.08;
}
.stat-card.green::after{background:#10B981}
.stat-card.blue::after{background:#3B82F6}
.stat-card.orange::after{background:#F59E0B}
.stat-card.red::after{background:#EF4444}
.stat-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}
.stat-card-icon{
  width:46px;height:46px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;
}
.stat-card.green .stat-card-icon{background:#DCFCE7;color:#16A34A}
.stat-card.blue  .stat-card-icon{background:#DBEAFE;color:#2563EB}
.stat-card.orange .stat-card-icon{background:#FEF3C7;color:#D97706}
.stat-card.red   .stat-card-icon{background:#FEE2E2;color:#DC2626}
.stat-card-trend{
  font-size:.7rem;font-weight:600;
  padding:.2rem .55rem;border-radius:999px;
}
.stat-card-trend.up{background:#DCFCE7;color:#16A34A}
.stat-card-trend.neutral{background:#F1F5F9;color:#64748B}
.stat-num{font-family:'Outfit',sans-serif;font-size:2rem;font-weight:800;color:var(--text);line-height:1}
.stat-label{font-size:.8rem;color:var(--text-muted);margin-top:.3rem;font-weight:500}

/* ─── TABLE CARD ─────────────────────────── */
.table-card{
  background:var(--bg-card);
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  box-shadow:var(--shadow-xs);
  overflow:hidden;
  margin-bottom:1.5rem;
}
.table-card-header{
  padding:1.25rem 1.5rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--border);
  background:linear-gradient(135deg,#fafbfa,#f4f8f5);
}
.table-card-header h3{
  font-size:1rem;font-weight:700;
  display:flex;align-items:center;gap:.6rem;
}
.table-card-header h3 .icon{
  width:32px;height:32px;
  background:var(--primary-glow);
  color:var(--primary);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;
}
.table-card-actions{display:flex;gap:.75rem;align-items:center}

/* ─── FILTER BAR ─────────────────────────── */
.filter-bar{
  padding:1rem 1.5rem;
  border-bottom:1px solid var(--border);
  display:flex;
  gap:.75rem;
  align-items:center;
  flex-wrap:wrap;
  background:#FAFBFA;
}
.filter-bar input,.filter-bar select{
  padding:.55rem .9rem;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:.85rem;
  color:var(--text);
  background:#fff;
  transition:.2s ease;
  min-width:180px;
}
.filter-bar input:focus,.filter-bar select:focus{
  outline:none;
  border-color:var(--primary-light);
  box-shadow:0 0 0 3px var(--primary-glow);
}
.btn-filter{
  display:flex;align-items:center;gap:.4rem;
  padding:.52rem 1rem;
  background:var(--primary);
  color:#fff;
  border:none;
  border-radius:var(--radius-sm);
  font-size:.82rem;font-weight:600;
  cursor:pointer;
  transition:.2s ease;
}
.btn-filter:hover{background:var(--primary-light)}
.btn-clear{
  display:flex;align-items:center;gap:.4rem;
  padding:.52rem 1rem;
  background:#fff;
  color:var(--text-muted);
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:.82rem;font-weight:600;
  cursor:pointer;
  transition:.2s ease;
  text-decoration:none;
}
.btn-clear:hover{background:#F1F5F9;color:var(--text)}
.result-count{
  margin-left:auto;
  font-size:.78rem;
  color:var(--text-muted);
  background:var(--bg);
  padding:.35rem .75rem;
  border-radius:999px;
  border:1px solid var(--border);
  white-space:nowrap;
}

/* ─── TABLE ──────────────────────────────── */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead th{
  padding:.85rem 1.25rem;
  text-align:left;
  font-size:.72rem;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.07em;
  background:#F8FAF9;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
tbody td{
  padding:.95rem 1.25rem;
  border-bottom:1px solid var(--border);
  font-size:.875rem;
  color:var(--text);
  vertical-align:middle;
}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:.15s ease}
tbody tr:hover{background:#F8FAF9}

/* ─── BADGES ─────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.28rem .8rem;
  border-radius:999px;
  font-size:.72rem;font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
}
.badge::before{content:'';width:6px;height:6px;border-radius:50%}
.badge-pending  {background:#FEF3C7;color:#B45309}.badge-pending::before{background:#F59E0B}
.badge-confirmed{background:#D1FAE5;color:#065F46}.badge-confirmed::before{background:#10B981}
.badge-cancelled{background:#FEE2E2;color:#991B1B}.badge-cancelled::before{background:#EF4444}
.badge-completed{background:#EDE9FE;color:#4C1D95}.badge-completed::before{background:#8B5CF6}

/* ─── ACTION BUTTONS ─────────────────────── */
.action-group{display:flex;gap:.4rem;flex-wrap:wrap}
.action-btn{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.3rem .65rem;
  border-radius:6px;
  font-size:.72rem;font-weight:700;
  border:none;cursor:pointer;
  text-decoration:none;
  transition:.15s ease;
  white-space:nowrap;
}
.action-confirm {background:#D1FAE5;color:#065F46}.action-confirm:hover{background:#A7F3D0}
.action-complete{background:#EDE9FE;color:#4C1D95}.action-complete:hover{background:#DDD6FE}
.action-cancel  {background:#FEE2E2;color:#991B1B}.action-cancel:hover{background:#FECACA}

/* ─── AVATAR / PATIENT ───────────────────── */
.patient-cell{display:flex;align-items:center;gap:.75rem}
.patient-avatar{
  width:36px;height:36px;min-width:36px;
  border-radius:50%;
  background:linear-gradient(135deg,#d1fae5,#a7f3d0);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.85rem;color:var(--primary);
}
.patient-name{font-weight:600;font-size:.875rem}
.patient-email{font-size:.75rem;color:var(--text-muted)}

/* ─── EMPTY STATE ────────────────────────── */
.empty-state{text-align:center;padding:4rem 2rem}
.empty-icon{
  width:80px;height:80px;
  background:var(--bg);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;color:var(--text-light);
  margin:0 auto 1.25rem;
  border:2px dashed var(--border);
}
.empty-state h3{font-size:1.1rem;color:var(--text-muted);margin-bottom:.4rem;font-weight:600}
.empty-state p{font-size:.875rem;color:var(--text-light)}

/* ─── LOGIN PAGE ─────────────────────────── */
.admin-login-page{
  min-height:100vh;
  display:flex;
  background:#0B1F14;
  position:relative;
  overflow:hidden;
}
.login-bg-shape{
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle,rgba(22,160,93,.15),transparent 70%);
}
.login-bg-1{width:600px;height:600px;top:-200px;right:-150px}
.login-bg-2{width:400px;height:400px;bottom:-100px;left:-100px}
.login-left{
  flex:1;
  display:flex;flex-direction:column;
  justify-content:center;
  padding:4rem;
  max-width:500px;
}
.login-left-logo{
  display:flex;align-items:center;gap:.75rem;
  margin-bottom:4rem;
}
.login-left-logo .icon{
  width:48px;height:48px;
  background:linear-gradient(135deg,var(--primary-light),var(--primary));
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;color:#fff;
  box-shadow:0 6px 20px rgba(10,92,54,.5);
}
.login-left-logo h1{font-size:1.3rem;color:#fff;font-weight:700}
.login-left h2{font-size:2.5rem;color:#fff;font-weight:800;margin-bottom:.75rem;line-height:1.15}
.login-left p{color:rgba(255,255,255,.5);font-size:1rem;line-height:1.7}
.login-features{margin-top:3rem;display:flex;flex-direction:column;gap:1rem}
.login-feature{display:flex;align-items:center;gap:.75rem}
.login-feature .dot{width:8px;height:8px;border-radius:50%;background:var(--primary-light)}
.login-feature span{color:rgba(255,255,255,.6);font-size:.9rem}
.login-right{
  display:flex;align-items:center;justify-content:center;
  padding:2rem;
  flex:1;
  background:rgba(255,255,255,.02);
  border-left:1px solid rgba(255,255,255,.06);
}
.login-box{
  background:#fff;
  border-radius:var(--radius-lg);
  padding:2.75rem;
  width:100%;
  max-width:420px;
  box-shadow:0 25px 60px rgba(0,0,0,.4);
}
.login-box-header{margin-bottom:2rem}
.login-box-header h3{font-size:1.5rem;margin-bottom:.35rem}
.login-box-header p{font-size:.875rem;color:var(--text-muted)}
.form-group{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.25rem}
.form-group label{font-size:.82rem;font-weight:600;color:var(--text)}
.form-group .input-wrap{position:relative}
.form-group .input-icon{
  position:absolute;left:.9rem;top:50%;transform:translateY(-50%);
  color:var(--text-light);font-size:.85rem;
}
.form-group input{
  width:100%;padding:.78rem .9rem .78rem 2.5rem;
  border:1.5px solid var(--border);border-radius:var(--radius-sm);
  font-size:.9rem;color:var(--text);background:#fff;
  transition:.2s ease;
}
.form-group input:focus{outline:none;border-color:var(--primary-light);box-shadow:0 0 0 3px var(--primary-glow)}
.login-error{
  display:flex;align-items:flex-start;gap:.75rem;
  background:#FEF2F2;border:1px solid #FECACA;
  border-radius:var(--radius-sm);
  padding:.9rem 1rem;margin-bottom:1.5rem;
}
.login-error .err-icon{color:#DC2626;font-size:.9rem;margin-top:.05rem}
.login-error p{font-size:.82rem;color:#991B1B;font-weight:500}
.btn-login{
  width:100%;
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.9rem;
  background:linear-gradient(135deg,var(--primary-light),var(--primary));
  color:#fff;
  border:none;
  border-radius:var(--radius-sm);
  font-size:.95rem;font-weight:700;
  cursor:pointer;
  transition:.3s var(--ease);
  box-shadow:0 6px 20px rgba(10,92,54,.3);
  margin-top:.25rem;
}
.btn-login:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(10,92,54,.4)}
.login-back{
  text-align:center;margin-top:1.5rem;
  font-size:.8rem;color:var(--text-muted);
}
.login-back a{color:var(--primary);font-weight:600}

/* ─── QUICK ACTIONS ──────────────────────── */
.quick-link{
  display:flex;align-items:center;gap:.75rem;
  padding:.9rem 1.25rem;
  border:1.5px solid var(--border);
  border-radius:var(--radius-md);
  color:var(--text);font-size:.88rem;font-weight:500;
  background:var(--bg-card);
  transition:.2s ease;
}
.quick-link:hover{border-color:var(--primary-light);color:var(--primary);background:var(--primary-glow)}
.quick-link .ql-icon{
  width:36px;height:36px;border-radius:8px;
  background:var(--bg);color:var(--text-muted);
  display:flex;align-items:center;justify-content:center;font-size:.9rem;
}
.quick-link:hover .ql-icon{background:var(--primary-glow);color:var(--primary)}

/* ─── SCROLLBAR ──────────────────────────── */
.admin-sidebar::-webkit-scrollbar{width:4px}
.admin-sidebar::-webkit-scrollbar-track{background:transparent}
.admin-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}

/* ─── RESPONSIVE ─────────────────────────── */
@media(max-width:1100px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){
  .admin-layout{flex-direction:column}
  .admin-sidebar{display:none}
  .login-left{display:none}
  .login-right{padding:1.5rem}
}
@media(max-width:600px){
  .stats-grid{grid-template-columns:1fr 1fr}
  .admin-content{padding:1.25rem}
  .topbar-breadcrumb{display:none}
}


/* RTL Support */
[dir="rtl"] .admin-sidebar { border-right: none; border-left: 1px solid var(--sidebar-border); }
[dir="rtl"] .sidebar-nav a .nav-icon { margin-left: .85rem; margin-right: 0; }
[dir="rtl"] .topbar-left { margin-right: 0; margin-left: auto; }
[dir="rtl"] .stat-card::after { right: auto; left: 0; transform: translate(-30%, -30%); }
[dir="rtl"] .table-card-header h3 .icon { margin-left: .6rem; margin-right: 0; }
[dir="rtl"] .fa-arrow-right { transform: rotate(180deg); }
[dir="rtl"] .fa-arrow-left { transform: rotate(180deg); }
[dir="rtl"] .form-group .input-icon { left: auto; right: .9rem; }
[dir="rtl"] .form-group input { padding: .78rem 2.5rem .78rem .9rem; }



/* Custom Language Dropdown */
.lang-dropdown-container { position: relative; display: inline-block; }
.lang-dropdown-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.8rem; border-radius: 4px; border: 1px solid var(--border); background: #fff; color: var(--text); font-size: 0.9rem; cursor: pointer; font-family: inherit; }
.lang-dropdown-menu { display: none; position: absolute; top: 100%; right: 0; margin-top: 0.25rem; background: #fff; border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); z-index: 1000; min-width: 120px; overflow: hidden; }
.lang-dropdown-container:hover .lang-dropdown-menu { display: block; }
[dir="rtl"] .lang-dropdown-menu { right: auto; left: 0; }
.lang-dropdown-menu a { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; color: var(--text) !important; text-decoration: none; font-size: 0.85rem; transition: background 0.2s; }
.lang-dropdown-menu a:hover { background: #f8fafc; }
.lang-flag { width: 20px; height: auto; border-radius: 2px; }