/* ============================================================
   IHMS — Dashboard shell  (depends on theme.css)
   Sidebar + topbar + KPI tiles + panels + tables + charts
   ============================================================ */

/* ---- Filter / toolbar ---- */
.toolbar { display: flex; flex-wrap: wrap; gap: .8rem; align-items: end; }
.toolbar .field { margin: 0; }
.toolbar .field label { font-size: .8rem; }
.toolbar select.input, .toolbar input.input { padding-left: 1rem; min-width: 180px; }
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.2rem; }
.form-row .full { grid-column: 1 / -1; }
@media (max-width: 640px){ .form-row { grid-template-columns: 1fr; } }
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235a708b' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }

/* ---- Doctor cards (listings) ---- */
.docard { background: #fff; border: 1px solid var(--mist); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.docard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.docard__top { display: flex; gap: .85rem; padding: 1.05rem 1.05rem .5rem; align-items: center; }
.docard__top img { width: 54px; height: 54px; border-radius: 13px; object-fit: cover; flex: 0 0 auto; box-shadow: var(--shadow-sm); }
.docard__top h3 { margin: 0 0 .1rem; font-size: 1rem; }
.docard__spec { color: var(--accent); font-family: var(--font-head); font-weight: 600; font-size: .82rem; }
.docard__rate { color: #f5a623; font-size: .78rem; display: flex; align-items: center; gap: .25rem; margin-top: .25rem; }
.docard__rate i, .docard__rate svg { width: 13px; height: 13px; }
.docard .chips { padding: 0 1.05rem .2rem; }
.docard__meta { padding: .35rem 1.05rem .85rem; display: grid; gap: .38rem; flex: 1; }
.docard__meta div { display: flex; gap: .5rem; align-items: center; color: var(--text-muted); font-size: .84rem; }
.docard__meta i, .docard__meta svg { width: 15px; height: 15px; color: var(--accent); flex: 0 0 auto; }
.docard__meta div span, .docard__meta div { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docard__foot { display: flex; gap: .6rem; padding: .85rem 1.05rem; border-top: 1px solid var(--mist-50); }
.docard__foot .btn { flex: 1; }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; padding: 0 1.3rem .5rem; }
.chip { font-family: var(--font-head); font-weight: 700; font-size: .72rem; padding: .25rem .6rem; border-radius: 99px; background: var(--mist); color: var(--brand); display: inline-flex; align-items: center; gap: .3rem; }
.chip i, .chip svg { width: 13px; height: 13px; }

/* ---- Page section heading inside content ---- */
.content-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.content-head h2 { margin: 0; font-size: 1.3rem; }
.content-head p { margin: 0; color: var(--text-muted); font-size: .9rem; }


.dash { background: var(--paper); min-height: 100vh; }

/* ============================== Sidebar ========================= */
.side {
  position: fixed; inset: 0 auto 0 0; width: 268px; z-index: 1000;
  display: flex; flex-direction: column;
  background: var(--grad-deep); color: var(--text-on-dark);
  box-shadow: 4px 0 30px rgba(0,27,72,.18);
}
.side__brand {
  display: flex; align-items: center; gap: .7rem; padding: 1.4rem 1.5rem;
  font-family: var(--font-head); font-weight: 800; font-size: 1.25rem; color: #fff; letter-spacing: -.02em;
}
.side__brand:hover { color: #fff; }
.side__brand .brand__mark { width: 38px; height: 38px; border-radius: 11px; }
.side__brand small { display: block; font-family: var(--font-body); font-weight: 500; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--soft); margin-top: 2px; }

.side__nav { flex: 1; overflow-y: auto; padding: .5rem .85rem 1rem; }
.side__nav::-webkit-scrollbar { width: 6px; }
.side__nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 99px; }
.side__label { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); opacity: .7; padding: 1rem .85rem .4rem; }
.side__link {
  display: flex; align-items: center; gap: .8rem; position: relative;
  padding: .72rem .85rem; margin: .12rem 0; border-radius: 12px;
  color: #cfe0f0; font-family: var(--font-head); font-weight: 600; font-size: .94rem;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.side__link i, .side__link svg { width: 20px; height: 20px; flex: 0 0 auto; opacity: .9; }
.side__link:hover { background: rgba(255,255,255,.08); color: #fff; }
.side__link.is-active { background: rgba(255,255,255,.14); color: #fff; }
.side__link.is-active::before { content:""; position:absolute; left:-.85rem; top:50%; transform:translateY(-50%); width:4px; height:60%; background: var(--soft); border-radius:0 4px 4px 0; }
.side__link .badge-dot { margin-left: auto; background: var(--accent); color: #fff; font-size: .68rem; font-weight: 700; padding: .1rem .45rem; border-radius: 99px; }

.side__user { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.2rem; border-top: 1px solid rgba(255,255,255,.1); }
.side__user img { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; border: 2px solid rgba(255,255,255,.25); }
.side__user b { color: #fff; font-family: var(--font-head); font-size: .92rem; display: block; line-height: 1.2; }
.side__user span { color: var(--soft); font-size: .76rem; text-transform: capitalize; }
.side__user a { margin-left: auto; color: var(--soft); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; }
.side__user a:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ============================== Main ============================ */
.dash__main { margin-left: 268px; min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 900;
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.8rem; background: rgba(246,250,252,.85);
  backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--mist);
}
.topbar__toggle { display: none; background: none; border: 0; color: var(--ink); cursor: pointer; padding: 6px; }
.topbar__toggle i, .topbar__toggle svg { width: 26px; height: 26px; }
.topbar__title h1 { font-size: 1.4rem; margin: 0; }
.topbar__title p { margin: 0; color: var(--text-muted); font-size: .88rem; }
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: .8rem; }
.search { position: relative; display: none; }
.search i, .search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-muted); }
.search input { width: 240px; padding: .6rem 1rem .6rem 42px; border: 1.5px solid var(--mist); border-radius: var(--r-pill); background: #fff; outline: none; font-family: var(--font-body); transition: border-color var(--t-fast); }
.search input:focus { border-color: var(--accent); }
@media (min-width: 1100px){ .search { display: block; } }
.icon-btn { position: relative; width: 42px; height: 42px; border-radius: 12px; border: 1.5px solid var(--mist); background: #fff; color: var(--brand); display: grid; place-items: center; cursor: pointer; transition: all var(--t-fast) var(--ease); }
.icon-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.icon-btn i, .icon-btn svg { width: 20px; height: 20px; }
.icon-btn .dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; background: #ef5350; border: 2px solid #fff; border-radius: 50%; }
.userchip { display: flex; align-items: center; gap: .6rem; padding: .3rem .35rem; }
.userchip img { width: 40px; height: 40px; border-radius: 11px; object-fit: cover; }
.userchip b { font-family: var(--font-head); font-size: .9rem; color: var(--ink); line-height: 1.15; display: block; }
.userchip span { font-size: .76rem; color: var(--text-muted); text-transform: capitalize; }

.dash__content { padding: 1.8rem; flex: 1; }

/* ============================== Welcome banner ================= */
.welcome {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background: var(--grad-brand); color: #fff; padding: 1.8rem 2rem;
  display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.6rem;
  box-shadow: var(--shadow-brand);
}
.welcome::after { content:""; position:absolute; inset:0; background: var(--grad-mesh); opacity:.5; }
.welcome > * { position: relative; z-index: 1; }
.welcome__text { flex: 1; }
.welcome h2 { color: #fff; font-size: clamp(1.3rem, 2.5vw, 1.7rem); margin-bottom: .35rem; }
.welcome p { color: rgba(255,255,255,.9); margin: 0; max-width: 46ch; }
.welcome__art { width: 130px; height: 100px; flex: 0 0 auto; display: none; }
@media (min-width: 760px){ .welcome__art { display: block; } }
.welcome__art img { width: 100%; height: 100%; object-fit: contain; }
.welcome .btn { background: #fff; color: var(--brand); }
.welcome .btn:hover { color: var(--accent); }

/* ============================== KPI tiles ===================== */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-bottom: 1.4rem; }
.kpi {
  background: #fff; border: 1px solid var(--mist); border-radius: var(--r-lg); padding: 1.3rem 1.4rem;
  display: flex; flex-direction: column; gap: .2rem; position: relative; overflow: hidden;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.kpi:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.kpi__top { display: flex; align-items: center; justify-content: space-between; }
.kpi__ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff; }
.kpi__ico i, .kpi__ico svg { width: 23px; height: 23px; }
.kpi__ico.is-brand  { background: var(--grad-brand); }
.kpi__ico.is-accent { background: linear-gradient(135deg,#018ABE,#4fb0d8); }
.kpi__ico.is-green  { background: linear-gradient(135deg,#16a37a,#33c79a); }
.kpi__ico.is-amber  { background: linear-gradient(135deg,#e8920c,#f5b342); }
.kpi__ico.is-violet { background: linear-gradient(135deg,#6d5ae6,#9b8bf4); }
.kpi__ico.is-rose   { background: linear-gradient(135deg,#e1467c,#f47aa3); }
.kpi__delta { font-size: .78rem; font-weight: 700; font-family: var(--font-head); display: inline-flex; align-items: center; gap: .2rem; padding: .2rem .5rem; border-radius: 99px; }
.kpi__delta i, .kpi__delta svg { width: 13px; height: 13px; }
.kpi__delta.up { color: #16a37a; background: #e7f6ee; }
.kpi__delta.down { color: #d3455b; background: #fdecef; }
.kpi__val { font-family: var(--font-head); font-weight: 800; font-size: 2rem; color: var(--ink); line-height: 1.1; margin-top: .6rem; letter-spacing: -.02em; }
.kpi__label { color: var(--text-muted); font-size: .9rem; }
.kpi__spark { margin: .4rem -.4rem -.6rem; height: 42px; }

/* ============================== Panels / grid ================= */
.grid { display: grid; gap: 1.4rem; }
.grid--2-1 { grid-template-columns: 2fr 1fr; }
.grid--1-1 { grid-template-columns: 1fr 1fr; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

.panel { background: #fff; border: 1px solid var(--mist); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--mist); }
.panel__head h3 { margin: 0; font-size: 1.1rem; }
.panel__head .sub { color: var(--text-muted); font-size: .82rem; margin: 0; }
.panel__head a.link { font-family: var(--font-head); font-weight: 700; font-size: .85rem; color: var(--accent); display: inline-flex; align-items: center; gap: .3rem; }
.panel__head a.link i, .panel__head a.link svg { width: 15px; height: 15px; }
.panel__body { padding: 1.4rem; }
.panel__body.flush { padding: 0; }

.seg { display: inline-flex; background: var(--mist-50); border: 1px solid var(--mist); border-radius: 99px; padding: 3px; }
.seg button { border: 0; background: none; cursor: pointer; font-family: var(--font-head); font-weight: 600; font-size: .8rem; color: var(--text-muted); padding: .35rem .85rem; border-radius: 99px; }
.seg button.active { background: #fff; color: var(--brand); box-shadow: var(--shadow-sm); }

/* ============================== Lists ========================= */
.lst { display: flex; flex-direction: column; }
.lst__item { display: flex; align-items: center; gap: .9rem; padding: .9rem 1.4rem; border-bottom: 1px solid var(--mist-50); transition: background var(--t-fast); }
.lst__item:last-child { border-bottom: 0; }
.lst__item:hover { background: var(--mist-50); }
.lst__avatar { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; }
.lst__avatar--ring { border: 2px solid var(--mist); }
.lst__main { flex: 1; min-width: 0; }
.lst__main b { font-family: var(--font-head); color: var(--ink); font-size: .95rem; display: block; line-height: 1.25; }
.lst__main span { color: var(--text-muted); font-size: .83rem; display: flex; align-items: center; gap: .35rem; }
.lst__main span i, .lst__main span svg { width: 14px; height: 14px; }
.lst__meta { text-align: right; flex: 0 0 auto; }
.lst__meta b { font-family: var(--font-head); color: var(--ink); font-size: .9rem; }
.lst__meta span { color: var(--text-muted); font-size: .8rem; display: block; }

/* ============================== Status pills ================= */
.pill { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-head); font-weight: 700; font-size: .74rem; padding: .28rem .7rem; border-radius: 99px; text-transform: capitalize; }
.pill::before { content:""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.is-pending   { color: #b67700; background: #fff5e0; }
.pill.is-confirmed, .pill.is-accepted, .pill.is-active, .pill.is-completed, .pill.is-available { color: #1c7a4b; background: #e7f6ee; }
.pill.is-cancelled, .pill.is-failed, .pill.is-busy { color: #c43b51; background: #fdecef; }

/* ============================== Data table =================== */
.dtable { width: 100%; border-collapse: collapse; }
.dtable th { text-align: left; font-family: var(--font-head); font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); padding: .9rem 1.4rem; border-bottom: 1px solid var(--mist); background: var(--mist-50); }
.dtable td { padding: .85rem 1.4rem; border-bottom: 1px solid var(--mist-50); font-size: .92rem; color: var(--text); vertical-align: middle; }
.dtable tr:last-child td { border-bottom: 0; }
.dtable tbody tr { transition: background var(--t-fast); }
.dtable tbody tr:hover { background: var(--mist-50); }
.dtable .who { display: flex; align-items: center; gap: .7rem; }
.dtable .who img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; }
.dtable .who b { font-family: var(--font-head); color: var(--ink); font-size: .9rem; display:block; }
.dtable .who span { color: var(--text-muted); font-size: .8rem; }

/* ============================== Quick actions ================ */
.qa-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.qa {
  display: flex; align-items: center; gap: .8rem; padding: 1rem; border-radius: var(--r-md);
  border: 1px solid var(--mist); background: var(--mist-50); color: var(--ink);
  font-family: var(--font-head); font-weight: 600; font-size: .92rem;
  transition: all var(--t) var(--ease);
}
.qa:hover { background: #fff; border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--brand); }
.qa__ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--grad-soft); color: var(--brand); flex: 0 0 auto; }
.qa__ico i, .qa__ico svg { width: 20px; height: 20px; }

/* ============================== Empty state ================== */
.empty { text-align: center; padding: 2.5rem 1.4rem; color: var(--text-muted); }
.empty i, .empty svg { width: 42px; height: 42px; color: var(--soft); margin-bottom: .6rem; }
.empty p { margin: 0; }

/* ============================== Misc ========================= */
.mb { margin-bottom: 1.4rem; }
.chart-wrap { width: 100%; }

/* Featured next-appointment card with photo */
.feature-appt { display: flex; gap: 1.2rem; align-items: center; padding: 1.4rem; }
.feature-appt img { width: 84px; height: 84px; border-radius: 16px; object-fit: cover; flex: 0 0 auto; box-shadow: var(--shadow-sm); }
.feature-appt .fa-info { flex: 1; }
.feature-appt h4 { margin: 0 0 .2rem; font-size: 1.15rem; }
.feature-appt .spec { color: var(--accent); font-family: var(--font-head); font-weight: 600; font-size: .85rem; }
.feature-appt .when { display: flex; gap: 1.2rem; margin-top: .7rem; flex-wrap: wrap; }
.feature-appt .when span { display: flex; align-items: center; gap: .4rem; color: var(--text-muted); font-size: .86rem; }
.feature-appt .when i, .feature-appt .when svg { width: 16px; height: 16px; color: var(--accent); }

/* ============================== Responsive ================== */
.side__backdrop { display: none; }
@media (max-width: 1080px){ .kpis { grid-template-columns: repeat(2, 1fr); } .grid--2-1, .grid--1-1, .grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 920px){
  .side { transform: translateX(-100%); transition: transform var(--t) var(--ease); }
  .side.open { transform: none; }
  .dash__main { margin-left: 0; }
  .topbar__toggle { display: inline-flex; }
  .side__backdrop.show { display: block; position: fixed; inset: 0; background: rgba(0,27,72,.4); z-index: 999; }
}
@media (max-width: 560px){ .kpis { grid-template-columns: 1fr; } .dash__content { padding: 1.1rem; } .userchip b, .userchip span { display: none; } }