/* iClinicOS — Dashboard Styles */

/* ─── TOPBAR ─── */
.topbar {
  padding:14px 24px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  background:var(--sidebar); flex-shrink:0;
}
.topbar-info h2 { font-size:15px; font-weight:700; color:#fff; }
.topbar-info p { font-size:11px; color:var(--gray2); margin-top:2px; }
.topbar-right { display:flex; align-items:center; gap:10px; }
.theme-btn {
  width:32px; height:32px; border-radius:8px; background:var(--card2);
  border:1px solid var(--border); color:var(--gray2); font-size:15px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all 0.2s;
}
.theme-btn:hover { background:var(--green2); color:var(--green); }
.date-pill {
  display:flex; align-items:center; gap:6px; background:var(--card2);
  border:1px solid var(--border); padding:6px 12px; border-radius:8px;
  font-size:11px; color:var(--gray2);
}

/* ─── PAGES ─── */
.page { display:none; animation:fadeIn 0.3s ease; }
.page.active { display:block; }

/* ─── STATS GRID ─── */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.stat-card {
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:18px; position:relative; overflow:hidden; transition:all 0.3s;
}
.stat-card:hover { transform:translateY(-2px); border-color:rgba(255,255,255,0.12); }
.stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; }
.stat-card.c-green::before { background:linear-gradient(90deg,var(--green),transparent); }
.stat-card.c-blue::before { background:linear-gradient(90deg,var(--blue),transparent); }
.stat-card.c-orange::before { background:linear-gradient(90deg,var(--orange),transparent); }
.stat-card.c-purple::before { background:linear-gradient(90deg,var(--purple),transparent); }
.stat-ic {
  width:38px; height:38px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; margin-bottom:12px;
}
.stat-val { font-size:26px; font-weight:900; color:var(--white); line-height:1; margin-bottom:3px; }
.stat-lbl { font-size:11px; color:var(--gray2); font-weight:600; }
.stat-ch {
  position:absolute; top:14px; left:14px; font-size:9px; font-weight:700;
  padding:2px 7px; border-radius:8px;
}
.ch-up{background:var(--green2);color:var(--green);}
.ch-neutral{background:var(--blue2);color:var(--blue);}
.ch-warn{background:var(--orange2);color:var(--orange);}

/* ─── MINI CHART ─── */
.mini-chart { display:flex; align-items:flex-end; gap:5px; height:70px; padding:0 2px; }
.bar { flex:1; border-radius:5px 5px 0 0; cursor:pointer; }
.bar:hover { opacity:0.7; }
.chart-labels { display:flex; gap:5px; margin-top:4px; }
.chart-label { flex:1; text-align:center; font-size:9px; color:var(--gray); }

/* ─── PROGRESS BAR ─── */
.prog-bar {
  height:4px; background:rgba(255,255,255,0.06);
  border-radius:2px; overflow:hidden; margin-top:6px;
}
.prog-fill { height:100%; border-radius:2px; transition:width 1.2s ease; }

/* ─── QUICK STAT ROWS ─── */
.qs-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0; border-bottom:1px solid var(--border);
}
.qs-row:last-child { border-bottom:none; }
.qs-lbl { font-size:12px; color:var(--gray2); display:flex; align-items:center; gap:6px; }
.qs-val { font-size:13px; font-weight:700; color:var(--white); }

/* ─── REVENUE ─── */
.rev-big { font-size:32px; font-weight:900; color:var(--white); line-height:1; }
.rev-sub { font-size:11px; color:var(--gray2); margin-top:3px; }
.rev-change {
  display:inline-flex; align-items:center; gap:4px; margin-top:8px;
  font-size:11px; font-weight:700; color:var(--green);
  background:var(--green2); padding:3px 10px; border-radius:20px;
}

/* ─── SETTINGS ─── */
.setting-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; border-bottom:1px solid var(--border);
}
.setting-row:last-child { border-bottom:none; }
.setting-lbl { font-size:13px; font-weight:600; color:var(--text); }
.setting-sub { font-size:11px; color:var(--gray2); margin-top:2px; }
.setting-inp {
  background:var(--card2); border:1.5px solid var(--border); border-radius:8px;
  padding:7px 12px; color:var(--white); font-family:'Cairo',sans-serif;
  font-size:13px; outline:none; transition:border 0.2s; text-align:right;
}
.setting-inp:focus { border-color:var(--green); }
.setting-inp-md { width:160px; }

/* ─── TOGGLE ─── */
.toggle { position:relative; width:44px; height:24px; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider {
  position:absolute; inset:0; background:var(--card2); border-radius:12px;
  cursor:pointer; transition:background 0.3s; border:1px solid var(--border);
}
.toggle-slider::before {
  content:''; position:absolute; width:18px; height:18px; border-radius:9px;
  background:var(--gray); bottom:2px; right:2px; transition:all 0.3s;
}
.toggle input:checked + .toggle-slider { background:var(--green2); border-color:var(--green); }
.toggle input:checked + .toggle-slider::before { background:var(--green); transform:translateX(-20px); }

/* ─── WORKING HOURS ─── */
.hours-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.hours-item {
  background:var(--card2); border:1px solid var(--border);
  border-radius:10px; padding:12px;
}
.hours-day {
  font-size:12px; font-weight:700; color:var(--white); margin-bottom:8px;
  display:flex; justify-content:space-between; align-items:center;
}
.hours-times {
  display:flex; gap:6px; align-items:center; font-size:11px; color:var(--gray2);
}
.hours-times input {
  background:var(--card); border:1px solid var(--border); border-radius:6px;
  padding:4px 8px; color:var(--white); font-family:'Cairo',sans-serif;
  font-size:11px; outline:none; width:70px;
}

/* ─── PRICES ─── */
.price-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.price-item {
  background:var(--card2); border:1px solid var(--border);
  border-radius:10px; padding:14px;
}
.price-type { font-size:12px; font-weight:700; color:var(--white); margin-bottom:8px; }
.price-inp-wrap { display:flex; align-items:center; gap:6px; }
.price-inp {
  background:var(--card); border:1.5px solid var(--border); border-radius:8px;
  padding:8px 12px; color:var(--white); font-family:'Cairo',sans-serif;
  font-size:16px; font-weight:700; outline:none; width:100%; transition:border 0.2s;
}
.price-inp:focus { border-color:var(--green); }
.price-currency { font-size:11px; color:var(--gray2); }

/* ─── SAVE SETTINGS BUTTON ─── */
.save-settings-btn {
  background:var(--green); color:#060D18; border:none; padding:10px 24px;
  border-radius:10px; font-family:'Cairo',sans-serif; font-size:14px;
  font-weight:700; cursor:pointer; margin-top:16px; transition:all 0.2s;
}
.save-settings-btn:hover { opacity:0.9; transform:translateY(-1px); }

/* ─── DOC CARD (sidebar bottom) ─── */
.doc-card {
  display:flex; align-items:center; gap:10px; padding:10px;
  border-radius:10px; background:var(--card2); cursor:pointer; transition:all 0.2s;
}
.doc-card:hover { background:rgba(255,255,255,0.05); }
.doc-av {
  width:34px; height:34px; border-radius:9px;
  background:linear-gradient(135deg,var(--blue),var(--green));
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:900; color:#fff; flex-shrink:0;
}
.doc-name { font-size:12px; font-weight:700; color:#fff; }
.doc-role { font-size:10px; color:var(--gray2); }
.logout-btn {
  width:26px; height:26px; border-radius:8px; background:var(--red2);
  border:none; color:var(--red); font-size:13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  margin-right:auto; transition:all 0.2s;
}
.logout-btn:hover { background:var(--red); color:#fff; }

/* ─── APPOINTMENT PANEL ─── */
.apt-panel {
  position:fixed; left:0; top:0; width:320px; height:100vh;
  background:var(--card); border-left:1px solid var(--border);
  z-index:150; transform:translateX(-100%);
  transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);
  display:flex; flex-direction:column;
  box-shadow:4px 0 24px rgba(0,0,0,0.4);
}
.apt-panel.open { transform:translateX(0); }
.apt-panel-hd {
  padding:14px 16px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
}
.apt-panel-title { font-size:13px; font-weight:700; color:var(--white); }
.apt-panel-close {
  width:26px; height:26px; border-radius:8px;
  background:var(--card2); border:1px solid var(--border);
  color:var(--gray2); font-size:13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all 0.2s;
}
.apt-panel-close:hover { background:var(--red2); color:var(--red); border-color:var(--red2); }
.apt-panel-body { flex:1; overflow-y:auto; padding:14px; }
.apt-panel-actions {
  padding:12px; border-top:1px solid var(--border);
  display:flex; gap:8px; flex-shrink:0;
}
.apt-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.45); z-index:149; backdrop-filter:blur(2px);
}
.apt-overlay.show { display:block; }

/* Panel info row */
.pnl-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px; background:var(--card2);
  border:1px solid var(--border); border-radius:9px; margin-bottom:7px;
}
.pnl-lbl { font-size:11px; color:var(--gray2); }
.pnl-val { font-size:12px; font-weight:700; color:var(--white); }

/* Panel buttons */
.pnl-btn {
  flex:1; padding:10px 8px; border-radius:9px;
  font-family:'Cairo',sans-serif; font-size:12px; font-weight:700;
  cursor:pointer; border:none; transition:all 0.2s;
  text-align:center; text-decoration:none; display:flex;
  align-items:center; justify-content:center; gap:5px;
}
.pnl-btn-patient { background:var(--blue2); color:#60A5FA; }
.pnl-btn-patient:hover { background:var(--blue); color:#fff; }
.pnl-btn-done { background:var(--green); color:#060D18; }
.pnl-btn-done:hover { opacity:0.85; }
.pnl-btn-cancel {
  background:var(--red2); color:var(--red); padding:10px 12px; border-radius:9px;
  font-family:'Cairo',sans-serif; font-size:12px; font-weight:700;
  cursor:pointer; border:none; transition:all 0.2s;
}
.pnl-btn-cancel:hover { background:var(--red); color:#fff; }

/* ─── DASHBOARD-SPECIFIC LIGHT MODE OVERRIDES ─── */
[data-theme="light"] .topbar { background:#fff; }
[data-theme="light"] .topbar-info h2 { color:#1A2B3C; }
[data-theme="light"] .topbar-info p { color:#6B7E8F; }
[data-theme="light"] .date-pill { background:#F0F4F8; border-color:#E0E8F0; color:#6B7E8F; }
[data-theme="light"] .qs-val,
[data-theme="light"] .stat-val,
[data-theme="light"] .rev-big { color:#1A2B3C; }
[data-theme="light"] .price-item { background:#F8FAFC; border-color:#E0E8F0; }
[data-theme="light"] .price-type { color:#1A2B3C; }
[data-theme="light"] .price-inp { background:#fff; border-color:#E0E8F0; color:#1A2B3C; }
[data-theme="light"] .hours-item { background:#F8FAFC; border-color:#E0E8F0; }
[data-theme="light"] .hours-day { color:#1A2B3C; }
[data-theme="light"] .hours-times input { background:#fff; border-color:#E0E8F0; color:#1A2B3C; }
[data-theme="light"] .setting-inp { background:#fff; border-color:#E0E8F0; color:#1A2B3C; }
[data-theme="light"] .doc-card { background:#1A3A5C; }
[data-theme="light"] .apt-panel { background:#fff; }
[data-theme="light"] .apt-panel-title { color:#1A2B3C; }
[data-theme="light"] .pnl-row { background:#F8FAFC; border-color:#E0E8F0; }
[data-theme="light"] .pnl-val { color:#1A2B3C; }