/* ===== Design Tokens ===== */
:root{
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --topbar-h: 56px;
  --transition: .25s cubic-bezier(.4,0,.2,1);
  --font: "Vazirmatn", "IRANSans", system-ui, sans-serif;
}

/* ===== Dark (Blue) ===== */
[data-theme="dark"]{
  --bg: #0b1221;
  --surface: #141f33;
  --surface-hover: #1e2f4f;
  --text: #e2e8f4;
  --text-muted: #8ba3c9;
  --primary: #3b82f6;
  --primary-hover: #60a5fa;
  --primary-soft: rgba(59,130,246,.12);
  --border: rgba(255,255,255,.06);
  --neu-dk: 5px 5px 12px #060b14;
  --neu-lt: -5px -5px 12px #1c2d4a;
  --neu-in-dk: inset 3px 3px 8px #060b14;
  --neu-in-lt: inset -3px -3px 8px #1c2d4a;
  --danger: #f87171;
  --danger-soft: rgba(248,113,113,.12);
  --success: #34d399;
  --success-soft: rgba(52,211,153,.12);
  --warning: #fbbf24;
  --warning-soft: rgba(251,191,36,.12);
  --info: #60a5fa;
  --info-soft: rgba(96,165,250,.12);
}

/* ===== Light ===== */
[data-theme="light"]{
  --bg: #d4dde8;
  --surface: #e3ecf5;
  --surface-hover: #d9e4f0;
  --text: #1e293b;
  --text-muted: #64748b;
  --primary: #2563eb;
  --primary-hover: #3b82f6;
  --primary-soft: rgba(37,99,235,.12);
  --border: rgba(0,0,0,.08);
  --neu-dk: 5px 5px 12px #b8c4d4;
  --neu-lt: -5px -5px 12px #eef4fb;
  --neu-in-dk: inset 3px 3px 8px #b8c4d4;
  --neu-in-lt: inset -3px -3px 8px #eef4fb;
  --danger: #dc2626;
  --danger-soft: rgba(220,38,38,.10);
  --success: #059669;
  --success-soft: rgba(5,150,105,.10);
  --warning: #d97706;
  --warning-soft: rgba(217,119,6,.10);
  --info: #2563eb;
  --info-soft: rgba(37,99,235,.10);
}

/* ===== Reset ===== */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  transition: background var(--transition), color var(--transition);
  min-height: 100vh;
}
a{ color: var(--primary); text-decoration: none; }
a:hover{ color: var(--primary-hover); }
ul, ol{ padding: 0; margin: 0; }

::-webkit-scrollbar{ width: 6px; height: 6px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: var(--text-muted); border-radius: 10px; }

/* Override Bootstrap text-muted to use theme variable */
.text-muted{ color: var(--text-muted) !important; }

/* ===== Container ===== */
.app-container{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ===== Topbar ===== */
.app-topbar{
  position: sticky;
  top: 0;
  z-index: 1030;
  padding: 8px 16px 8px;
  background: var(--bg);
}
.app-topbar__inner{
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--topbar-h);
  padding: 0 14px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--neu-dk), var(--neu-lt);
}

/* Brand */
.app-brand{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.app-brand > .bi{ font-size: 22px; }
.app-brand__logo{
  width: 22px; height: 22px;
  object-fit: contain; border-radius: 4px; flex-shrink: 0;
}
.app-brand__text{
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--text);
}

/* Toolbar */
.app-toolbar{
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  overflow: visible;
  scrollbar-width: none;
}
.app-toolbar::-webkit-scrollbar{ display: none; }

.app-toolbar__item{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: all var(--transition);
  box-shadow: 3px 3px 8px var(--shadow-dk, transparent), -3px -3px 8px var(--shadow-lt, transparent);
}
.app-toolbar__item:hover{
  color: var(--primary);
  background: var(--primary-soft);
}
.app-toolbar__item.active{
  color: var(--primary);
  background: var(--primary-soft);
  box-shadow: var(--neu-in-dk), var(--neu-in-lt);
}
.app-toolbar__item > .bi{ font-size: 14px; }

.app-toolbar__more{
  position: relative;
  flex-shrink: 0;
}
.app-toolbar__more > .app-toolbar__item{
  cursor: pointer;
  border: none;
  background: transparent;
}
.app-toolbar__more .app-dropdown{
  min-width: 170px;
  left: 0;
  right: auto;
}
.app-toolbar__more .app-dropdown__item{
  font-size: 12px;
  gap: 8px;
}
.app-toolbar__more .app-dropdown__item.is-active{
  background: var(--primary-soft);
  color: var(--primary);
}

/* Actions */
.app-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
  flex-shrink: 0;
}
.app-divider{
  width: 1px;
  height: 24px;
  background: var(--border);
}

/* ===== Neumorphic Button ===== */
.nbtn{
  position: relative;
  display: inline-grid;
  place-items: center;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition);
  box-shadow: var(--neu-dk), var(--neu-lt);
}
.nbtn:hover{
  color: var(--primary);
  background: var(--primary-soft);
  box-shadow: none;
}
.nbtn:active{
  box-shadow: var(--neu-in-dk), var(--neu-in-lt);
}
.nbtn--icon{ width: 38px; font-size: 16px; }
.nbtn__badge{
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 14px; height: 14px;
  padding: 0 3px;
  border-radius: 99px;
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: grid;
  place-items: center;
  line-height: 1;
}

/* ===== User ===== */
.app-user{ position: relative; }
.app-user__trigger{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 6px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: var(--neu-in-dk), var(--neu-in-lt);
}
.app-user__trigger:hover{
  background: var(--primary-soft);
  box-shadow: none;
}
.app-user__avatar{
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
}
.app-user__name{
  font-size: 12px;
  font-weight: 500;
}
.app-user__trigger > .bi-chevron-down{
  font-size: 9px;
  color: var(--text-muted);
  transition: transform var(--transition);
}

/* Dropdown */
.app-dropdown{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  padding: 8px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--neu-dk), var(--neu-lt);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--transition);
  z-index: 1040;
}
.app-dropdown.open{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.app-dropdown__item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: all var(--transition);
}
.app-dropdown__item:hover{
  background: var(--primary-soft);
  color: var(--primary);
}
.app-dropdown__item.text-danger:hover{
  background: var(--danger-soft);
  color: var(--danger);
}
.app-dropdown__divider{
  height: 1px;
  margin: 6px 8px;
  background: var(--border);
}

/* ===== Main ===== */
.app-main{
  padding: 20px 0;
  min-height: calc(100vh - var(--topbar-h) - 40px);
}

/* ===== Page Head ===== */
.page-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.page-title{ margin: 0; font-size: 20px; font-weight: 700; }
.page-breadcrumb{
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-muted); margin-top: 4px;
}

/* ===== Neumorphic Card ===== */
.n-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--neu-dk), var(--neu-lt);
  transition: all var(--transition);
}
.n-card--inset{ box-shadow: var(--neu-in-dk), var(--neu-in-lt); }
.n-card__title{
  margin: 0 0 12px;
  font-size: 13px; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.n-card__value{ margin: 0; font-size: 28px; font-weight: 800; line-height: 1.2; }
.n-card__footer{ font-size: 12px; color: var(--text-muted); margin-top: 10px; }

/* ===== Stat Card ===== */
.stat-card{
  display: flex; align-items: center; gap: 14px;
}
.stat-card__icon{
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: var(--neu-in-dk), var(--neu-in-lt);
}
.stat-card__icon--primary{ background: var(--primary-soft); color: var(--primary); }
.stat-card__icon--success{ background: var(--success-soft); color: var(--success); }
.stat-card__icon--warning{ background: var(--warning-soft); color: var(--warning); }
.stat-card__icon--danger{ background: var(--danger-soft); color: var(--danger); }

.stat-change{
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 6px; border-radius: 99px;
  font-size: 11px; font-weight: 600;
}
.stat-change--up{ background: var(--success-soft); color: var(--success); }
.stat-change--down{ background: var(--danger-soft); color: var(--danger); }

/* ===== Chart ===== */
.chart-box{
  height: 180px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: 16px 12px 20px;
  gap: 8px;
  box-shadow: var(--neu-in-dk), var(--neu-in-lt);
}
.chart-bar{
  flex: 1; max-width: 36px;
  border-radius: 6px 6px 0 0;
  background: var(--primary-soft);
  transition: all var(--transition);
  position: relative;
}
.chart-bar:hover{ background: var(--primary); }
.chart-bar::after{
  content: attr(data-label);
  position: absolute;
  bottom: -18px; left: 50%; transform: translateX(-50%);
  font-size: 10px; color: var(--text-muted);
}

/* ===== Activity ===== */
.activity-list{ list-style: none; }
.activity-list li{
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.activity-list li:last-child{ border-bottom: none; }
.activity-dot{ width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.activity-time{ font-size: 11px; color: var(--text-muted); }

/* ===== Quick Actions ===== */
.quick-actions{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}
.quick-action{
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 16px 10px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--neu-dk), var(--neu-lt);
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
  font-size: 12px; font-weight: 500; color: var(--text);
}
.quick-action:hover{ color: var(--primary); box-shadow: none; }
.quick-action > .bi{ font-size: 22px; color: var(--primary); }

/* ===== Table ===== */
.n-table{
  width: 100%; border-collapse: separate; border-spacing: 0;
}
.n-table th{
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-muted);
  padding: 10px 14px; border-bottom: 1px solid var(--border); text-align: right;
}
.n-table td{
  padding: 12px 14px; font-size: 13px;
  border-bottom: 1px solid var(--border); vertical-align: middle;
}
.n-table tbody tr{ transition: background var(--transition); }
.n-table tbody tr:hover{ background: var(--primary-soft); }
.n-table tbody tr:last-child td{ border-bottom: none; }

/* ===== Table: Bordered cells + Readability ===== */
.n-table--bordered th,
.n-table--bordered td {
  border-right: 1px solid var(--border);
}
.n-table--bordered th:last-child,
.n-table--bordered td:last-child {
  border-right: none;
}
.n-table--bordered td {
  border-bottom: 1px solid var(--border);
}
.n-table--bordered tbody tr:last-child td {
  border-bottom: none;
}
/* Zebra */
.n-table--striped tbody tr:nth-child(even) {
  background: var(--bg);
}
.n-table--striped tbody tr:nth-child(even):hover {
  background: var(--primary-soft);
}

/* ===== Status Badge ===== */
.status{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 99px;
  font-size: 11px; font-weight: 600;
}
.status::before{ content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status--success{ background: var(--success-soft); color: var(--success); }
.status--warning{ background: var(--warning-soft); color: var(--warning); }
.status--danger{ background: var(--danger-soft); color: var(--danger); }
.status--info{ background: var(--info-soft); color: var(--info); }
.status--secondary{ background: var(--bg); color: var(--text-muted); }

/* ===== Avatar Initials ===== */
.avatar{
  width: 34px; height: 34px; border-radius: 10px;
  display: inline-grid; place-items: center;
  font-weight: 700; font-size: 12px;
  background: var(--primary-soft); color: var(--primary);
}

/* ===== Button ===== */
.btn-neu{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 8px 20px;
  border: none; border-radius: var(--radius-sm);
  background: var(--primary); color: #fff;
  font-weight: 600; font-size: 13px;
  cursor: pointer; transition: all var(--transition);
  box-shadow: none;
}
.btn-neu:hover{ background: var(--primary-hover); box-shadow: none; color: #fff; }
.btn-neu:active{ box-shadow: none; }

/* ===== Input ===== */
.n-input{
  width: 100%; padding: 10px 14px;
  border: none; border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font-family: var(--font); font-size: 13px;
  transition: all var(--transition);
  box-shadow: var(--neu-in-dk), var(--neu-in-lt);
}
.n-input::placeholder{ color: var(--text-muted); }
.n-input:focus{ outline: none; box-shadow: var(--neu-in-dk), var(--neu-in-lt), 0 0 0 2px var(--primary-soft); }
.n-label{ display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
select.n-input{ color-scheme: dark; }
select.n-input option{ background: var(--surface); color: var(--text); }

/* ===== Login ===== */
.login-page{
  min-height: 100vh; display: grid; place-items: center;
  padding: 20px; background: var(--bg);
  position: relative;
}
.login-page::before{
  content: ''; position: fixed; inset: 0;
  background: radial-gradient(circle at 30% 20%, var(--primary-soft) 0%, transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(99,102,241,.06) 0%, transparent 50%);
  pointer-events: none;
}
.login-card{
  width: 100%; max-width: 400px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  padding: 36px 28px;
  box-shadow: var(--neu-dk), var(--neu-lt);
}
.login-card__logo{
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), #6366f1);
  color: #fff; display: grid; place-items: center;
  font-size: 26px; margin: 0 auto 18px;
  box-shadow: 0 6px 20px var(--primary-soft);
  overflow: hidden;
}
.login-card__logo img{
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.login-card__title{ text-align: center; font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.login-card__subtitle{ text-align: center; font-size: 13px; color: var(--text-muted); margin: 0 0 28px; }
.login-card .form-group{ margin-bottom: 16px; }
.login-card .btn-neu{ width: 100%; padding: 12px; font-size: 14px; margin-top: 8px; }
.login-card__footer{ text-align: center; margin-top: 20px; font-size: 12px; color: var(--text-muted); }
.login-card__footer a{ color: var(--primary); font-weight: 600; }
.login-card__theme-toggle{ position: fixed; top: 16px; left: 16px; z-index: 1050; }

/* ===== Tenant switch (super admin) ===== */
.app-tenant-switch{
  position: relative;
  flex-shrink: 0;
}
.app-tenant-switch__trigger{
  display: flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px; font-size: 12px; color: var(--text);
  cursor: pointer; white-space: nowrap;
  transition: border-color var(--transition);
}
.app-tenant-switch__trigger:hover{ border-color: var(--primary); }
.app-tenant-switch__trigger i:first-child{ color: var(--primary); }
.app-dropdown__item.is-active{
  background: var(--primary-soft); color: var(--primary); font-weight: 600;
}
.app-dropdown__item--static{ cursor: pointer; font-size: 12px; }

/* ===== Admin nav items ===== */
.app-toolbar__item--admin{
  border-left: 2px solid transparent;
}
.app-toolbar__item--admin.active{
  border-left-color: var(--primary);
}

/* ===== Animations ===== */
@keyframes fadeIn{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}
.fade-in{ animation: fadeIn .3s ease-out; }

/* ===== Responsive ===== */
@media (max-width: 992px){
  .app-brand__text{ display: none; }
}
@media (max-width: 768px){
  .app-topbar{ padding: 6px 10px; }
  .app-topbar__inner{ padding: 0 8px; gap: 8px; }
  .app-toolbar__item span{ display: none; }
  .app-toolbar__item{ padding: 6px 8px; }
  .app-user__name{ display: none !important; }
}

/* ===== Appointment Timeline ===== */
.appt-timeline{
  max-height: 400px;
  overflow-y: auto;
  padding-left: 4px;
}
.appt-timeline::-webkit-scrollbar{ width: 5px; }
.appt-timeline::-webkit-scrollbar-thumb{ background: var(--text-muted); border-radius: 10px; }

.appt-row{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--neu-dk), var(--neu-lt);
  margin-bottom: 10px;
  transition: all var(--transition);
}
.appt-row:hover{ box-shadow: none; }
.appt-time{
  min-width: 52px;
  font-weight: 700;
  font-size: 14px;
  color: var(--primary);
}
.appt-info{ flex: 1; }
.appt-name{ font-weight: 600; font-size: 13px; }
.appt-type{ font-size: 11px; color: var(--text-muted); }

/* ===== Reminder Cards ===== */
.reminder-card{
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--neu-dk), var(--neu-lt);
  font-size: 12px;
  transition: all var(--transition);
}
.reminder-card:hover{ box-shadow: none; }
.reminder-card > .d-flex{ align-items: center; gap: 10px; }
.reminder-card .fa-solid{ color: var(--primary); }

/* ===== Badges ===== */
.badge-danger{
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  background: var(--danger-soft);
  color: var(--danger);
}
.badge-warning{
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  background: var(--warning-soft);
  color: var(--warning);
}

/* ===== Empty State ===== */
.empty-state{ text-align: center; padding: 50px 20px; color: var(--text-muted); }
.empty-state .fa-solid{ font-size: 48px; margin-bottom: 14px; opacity: .4; display: block; }
.empty-state p{ font-size: 14px; margin: 0 0 16px; }

/* ===== Neumorphic Modal ===== */
.neumorphic-modal {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--neu-dk), var(--neu-lt), 0 20px 60px rgba(0,0,0,.18);
  border: 1px solid var(--border);
  overflow: hidden;
}

.neumorphic-modal .modal-header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.neumorphic-modal .modal-header .modal-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.neumorphic-modal .modal-header .modal-title i {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 13px;
  background: var(--primary-soft);
  color: var(--primary);
  flex-shrink: 0;
}

.neumorphic-modal .modal-body {
  padding: 20px;
  background: var(--surface);
}

.neumorphic-modal .modal-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

[data-theme="dark"] .neumorphic-modal .btn-close {
  filter: invert(1) grayscale(100%) brightness(0.8);
}
[data-theme="dark"] .modal .btn-close {
  filter: invert(1) grayscale(100%) brightness(0.8);
}

/* ---- Modal accent header variants ---- */
.neumorphic-modal.modal--medical .modal-header .modal-title i {
  background: var(--info-soft);
  color: var(--info);
}

.neumorphic-modal.modal--prescription .modal-header .modal-title i {
  background: var(--success-soft);
  color: var(--success);
}

.neumorphic-modal.modal--note .modal-header .modal-title i {
  background: var(--warning-soft);
  color: var(--warning);
}

.neumorphic-modal.modal--image .modal-header .modal-title i {
  background: var(--primary-soft);
  color: var(--primary);
}

/* ---- Section divider inside modal body ---- */
.modal-section {
  margin-bottom: 18px;
}

.modal-section:last-child {
  margin-bottom: 0;
}

/* ===== Consent Form Editor ===== */
.consent-editor {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
}

.consent-editor__toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.consent-editor__btn {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 12px;
  transition: all var(--transition);
}

.consent-editor__btn:hover {
  background: var(--primary-soft);
  color: var(--primary);
}

.consent-editor__btn:active {
  background: var(--primary);
  color: #fff;
}

.consent-editor__sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 4px;
}

.consent-editor__field {
  min-height: 280px;
  max-height: 50vh;
  overflow-y: auto;
  padding: 16px 18px;
  font-family: var(--font);
  font-size: 14px;
  line-height: 2;
  color: var(--text);
  outline: none;
  text-align: right;
}

.consent-editor__field:focus {
  box-shadow: inset 0 0 0 2px var(--primary-soft);
}

.consent-editor__field:empty::before {
  content: "متن رضایت‌نامه را اینجا بنویسید...";
  color: var(--text-muted);
  pointer-events: none;
}

.consent-editor__field ul,
.consent-editor__field ol {
  padding-right: 24px;
  padding-left: 0;
}

/* ===== Finance Account Grid (compact) ===== */
.fin-account-grid-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.fin-account-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  transition: all .15s;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.fin-account-card:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.fin-account-card.selected {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.fin-account-card__name {
  font-weight: 700;
  color: var(--text);
}

.fin-account-card__info {
  color: var(--text-muted);
  font-size: 10px;
}

.fin-account-card__badge {
  font-size: 8px;
  background: var(--primary-soft);
  color: var(--primary);
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
}

/* ===== Modal Section (consent/check) ===== */

.modal-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 5px;
}

.chart-toolbar{
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.chart-toolbar__btn{
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  transition: all var(--transition);
}

.chart-toolbar__btn:hover{
  background: var(--surface-hover);
}

.chart-toolbar__btn--active{
  font-weight: 700;
  border-color: var(--primary);
  background: var(--primary-soft);
}

.chart-toolbar__label{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  margin-inline-start: auto;
  cursor: pointer;
}

/* ===== Filter Chips ===== */
.n-chip{
  display: inline-flex; align-items: center;
  padding: 5px 14px; border: none; border-radius: 99px;
  background: var(--surface); color: var(--text-muted);
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all var(--transition);
  box-shadow: var(--neu-dk), var(--neu-lt);
}
.n-chip:hover{ color: var(--primary); box-shadow: none; }
.n-chip.active{ background: var(--primary); color: #fff; box-shadow: none; }

/* ===== Wizard Form ===== */
.patient-wizard{ min-height: 380px; }

.wizard-nav{
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
}

.wizard-tab{
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px; border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-muted);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: all var(--transition); text-align: right;
  font-family: var(--font);
}
.wizard-tab:hover{ background: var(--primary-soft); color: var(--primary); }
.wizard-tab.active{ background: var(--primary); color: #fff; }
.wizard-tab i{ width: 20px; text-align: center; }

.wizard-body{ min-height: 320px; }

.wizard-pane{ display: none; }
.wizard-pane.active{ display: block; animation: fadeIn .3s ease-out; }

@media(max-width: 768px){
  .wizard-nav{ border-left: none; border-bottom: 1px solid var(--border); }
  .wizard-tab{ justify-content: center; padding: 8px 10px; font-size: 12px; }
  .wizard-tab span{ display: none; }
}

/* ===== Accordion ===== */
.n-accordion{ display: flex; flex-direction: column; gap: 8px; }

.n-accordion-item{
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--neu-dk), var(--neu-lt);
  overflow: hidden;
  transition: all var(--transition);
}

.n-accordion-head{
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;   padding: 8px 12px; border: none;
  background: transparent; color: var(--text);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all var(--transition); text-align: right;
  font-family: var(--font);
}
.n-accordion-head:hover{ background: var(--primary-soft); }
.n-accordion-head .chev{ transition: transform var(--transition); }
.n-accordion-head.collapsed .chev{ transform: rotate(180deg); }

.n-accordion-body{
  max-height: 0; overflow: hidden;
  transition: max-height .3s ease-out;
  background: var(--surface);
}
.n-accordion-body.show{ max-height: 800px; }

/* ===== Switch / Toggle ===== */
.n-switch-label{
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; cursor: pointer; color: var(--text);
}

.n-switch{
  appearance: none; width: 36px; height: 20px;
  border-radius: 99px; background: var(--text-muted);
  position: relative; transition: background var(--transition);
  cursor: pointer;
}
.n-switch::after{
  content: ''; position: absolute;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; top: 2px; right: 2px;
  transition: transform var(--transition);
}
.n-switch:checked{ background: var(--primary); }
.n-switch:checked::after{ transform: translateX(-16px); }

/* ===== Avatar ===== */
.n-avatar{
  width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px;
  background: var(--primary-soft); color: var(--primary);
  flex-shrink: 0;
}

/* ===== List ===== */
.n-list{ display: flex; flex-direction: column; gap: 6px; }

.n-list-item{
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--neu-dk), var(--neu-lt);
  font-size: 12px; transition: all var(--transition);
}
.n-list-item:hover{ box-shadow: none; }

/* ===== Treatment Chart ===== */
.treatment-card{
  padding: 20px;
}

.treatment-chart-wrapper{
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.treatment-sidebar{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 56px;
  padding: 8px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--neu-in-dk), var(--neu-in-lt);
}

.treatment-toggle-vertical{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.treatment-toggle-vertical .treatment-toggle__btn{
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.treatment-toggle-vertical .treatment-toggle__btn i{
  font-size: 10px;
}

.treatment-toggle-vertical .treatment-toggle__btn.active{
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(59,130,246,.35);
}

.treatment-guide{
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--text-muted);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.treatment-guide .fa-circle-info{
  color: var(--primary);
  font-size: 14px;
}

.treatment-guide kbd{
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: monospace;
}

.treatment-toolbar{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.treatment-toggle{
  display: flex;
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--neu-in-dk), var(--neu-in-lt);
  overflow: hidden;
}

.treatment-toggle__btn{
  padding: 6px 18px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--transition);
}

.treatment-toggle__btn.active{
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(59,130,246,.35);
}

.treatment-stage{
  position: relative;
  display: inline-block;
}

.treatment-img{
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.treatment-overlay{
  position: absolute;
  inset: 0;
}

.tooth-box{
  position: absolute;
  cursor: pointer;
  border-radius: 4px;
  transition: background .15s;
}

.tooth-box:hover{
  background: rgba(59,130,246,.12);
}

.treatment-hover{
  position: absolute;
  pointer-events: none;
  display: none;
  border: 2px solid var(--primary);
  background: rgba(59,130,246,.08);
  border-radius: 3px;
  z-index: 10;
}

.debug-hint{
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}
.debug-hint kbd{
  display: inline-block;
  padding: 1px 6px;
  font-size: 11px;
  font-family: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin: 0 2px;
}

/* ===== Tooth Modal ===== */
.tooth-modal .modal-header{
  border-bottom: 1px solid var(--border);
}

.tooth-modal .treatment-item{
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  margin-bottom: 8px;
  border-right: 3px solid var(--primary);
  box-shadow: var(--neu-in-dk), var(--neu-in-lt);
  transition: all var(--transition);
}

.tooth-modal .treatment-item:last-child {
  margin-bottom: 0;
}

.tooth-modal .treatment-item:hover {
  border-right-color: var(--primary-hover);
}

/* ===== Tooth Badge ===== */
.n-badge-tooth{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 28px; padding: 0 8px;
  border-radius: 8px; font-size: 12px; font-weight: 700;
  background: var(--primary-soft); color: var(--primary);
  font-family: monospace;
  box-shadow: var(--neu-in-dk), var(--neu-in-lt);
}

/* ===== Chart Page Treatment Table ===== */
#patientTreatmentsCard .n-table th{
  position: sticky; top: 0; z-index: 1;
  background: var(--surface);
}

#patientTreatmentsCard .table-responsive::-webkit-scrollbar{
  width: 5px; height: 5px;
}
#patientTreatmentsCard .table-responsive::-webkit-scrollbar-thumb{
  background: var(--text-muted); border-radius: 10px;
}

/* Treatment status badges — uses soft colours so they work in both dark & light mode */
.status--planned{
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--warning-soft); color: var(--warning);
  padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 600;
}
.status--planned::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }

.status--done{
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--success-soft); color: var(--success);
  padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 600;
}
.status--done::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }

.status--cancelled{
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--danger-soft); color: var(--danger);
  padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 600;
}
.status--cancelled::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }

/* ===== Financial Stat ===== */
.n-stat{
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px; border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--neu-dk), var(--neu-lt);
}

/* ===== Neumorphic Auth Shell ===== */
.login-card--wide {
  max-width: 800px;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.auth-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.auth-shell__main {
  padding: 28px 24px 20px;
  display: flex; flex-direction: column;
}
.auth-shell__side {
  padding: 18px 16px 16px;
  box-shadow: var(--neu-in-dk), var(--neu-in-lt);
  border-right: 1px solid var(--border);
}

/* Header inside left column */
.auth-shell__main .login-card__logo {
  margin: 0 auto 12px;
}
.auth-shell__main .login-card__title {
  margin-bottom: 4px; font-size: 16px; text-align: center;
}
.auth-shell__main .login-card__subtitle {
  font-size: 11px; margin-bottom: 16px; text-align: center;
}

/* Tabs */
.auth-tabs {
  display: flex; gap: 5px; margin-bottom: 14px; flex-wrap: wrap; justify-content: center;
}
.auth-tab {
  padding: 4px 9px; font-size: 11px; font-weight: 600;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: var(--surface); color: var(--text-muted);
  cursor: pointer; transition: all var(--transition);
  display: inline-flex; align-items: center; gap: 4px;
  box-shadow: var(--neu-dk), var(--neu-lt);
}
.auth-tab:hover { color: var(--text); }
.auth-tab.is-active {
  box-shadow: var(--neu-in-dk), var(--neu-in-lt);
  color: var(--primary); background: var(--bg); border-color: transparent;
}

/* Panels */
.auth-panel { animation: tabFade .2s ease; }
.auth-panel[hidden] { display: none !important; }
@keyframes tabFade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Notice Side */
.notice-side__head {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; margin-bottom: 10px;
}
.notice-side__item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; border-radius: var(--radius-xs);
  margin-bottom: 7px;
  box-shadow: var(--neu-in-dk), var(--neu-in-lt);
  background: var(--bg); font-size: 11px;
  transition: all var(--transition);
}
.notice-side__item:hover {
  box-shadow: var(--neu-dk), var(--neu-lt);
  background: var(--surface);
}
.notice-side__item i { color: var(--primary); font-size: 13px; flex-shrink: 0; margin-top: 2px; }
.notice-side__item h4 { font-size: 11px; font-weight: 700; margin: 0 0 2px; }
.notice-side__item p { font-size: 10px; margin: 0; color: var(--text-muted); line-height: 1.7; }
.notice-side__meta {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 10px; color: var(--text-muted);
  display: flex; gap: 10px; justify-content: space-between;
}
.notice-side__meta strong { display: block; color: var(--text); font-size: 11px; margin-top: 1px; }

/* Compact inputs */
.auth-shell__main .n-input {
  min-height: 38px !important; border-radius: var(--radius-xs) !important;
  font-size: 12px !important; padding: 6px 10px !important;
}
.auth-shell__main .btn-neu {
  min-height: 38px !important; border-radius: var(--radius-xs) !important; font-size: 13px !important;
}
.auth-shell__main .form-label { font-size: 11px; margin-bottom: 3px; }
.auth-shell__main .form-group { margin-bottom: 8px; }
.otp-row {
  display: grid; grid-template-columns: 1fr auto; gap: 5px; align-items: stretch;
}
.otp-row .btn-neu { white-space: nowrap; font-size: 10px !important; }

/* Footer inside left column */
.auth-shell__main .login-card__footer {
  border-top: 1px solid var(--border);
  margin-top: auto; padding-top: 10px;
  text-align: center; font-size: 10px; color: var(--text-muted);
}

/* Error */
#loginError { font-size: 11px; border-radius: var(--radius-xs); }

/* Theme toggle */
.login-card--wide .login-card__theme-toggle {
  position: absolute; top: 10px; left: 10px; z-index: 3;
}

/* ===== Responsive ===== */
@media (max-width: 767px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-shell__side {
    border-right: none; border-bottom: 1px solid var(--border);
    order: -1; box-shadow: none; padding: 14px 16px;
  }
}

/* ========================================
   APPOINTMENTS CALENDAR
   ======================================== */
.calendar-card { padding: 16px; margin-bottom: 16px; }

.cal-legend {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-right: 12px;
}

.cal-legend-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 500;
  color: var(--text);
  white-space: nowrap; cursor: pointer;
  user-select: none;
  padding: 3px 8px; border-radius: 8px;
  transition: all .2s ease;
}

.cal-legend-item:hover {
  background: var(--surface-hover);
}

.cal-legend-item--active {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
}

.cal-legend-item--active .cal-dot {
  transform: scale(1.35);
  box-shadow: 0 0 6px currentColor;
}

.cal-legend-item--dimmed {
  opacity: .4;
}

.cal-dot {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 3px; border: 2px solid;
  flex-shrink: 0; transition: transform .2s, box-shadow .2s;
}

.cal-dot--warning { background: var(--warning-soft); border-color: var(--warning); }
.cal-dot--success { background: var(--success-soft); border-color: var(--success); }
.cal-dot--info    { background: var(--info-soft);    border-color: var(--info); }
.cal-dot--primary { background: var(--primary-soft); border-color: var(--primary); }
.cal-dot--danger  { background: var(--danger-soft);  border-color: var(--danger); }

.cal-icon {
  font-size: 10px; opacity: .7;
}

.cal-legend-item--active .cal-icon {
  opacity: 1;
}

/* FullCalendar Overrides */
.persian-month-fix .fc-toolbar-title,
.fc-toolbar-title.persian-month-title { text-transform: none !important; }

.fc {
  font-family: var(--font) !important;
  background: transparent !important;
  border: none !important;
}

.fc-header-toolbar {
  margin-bottom: 12px !important;
  flex-wrap: wrap; gap: 8px;
}

.fc-header-toolbar .fc-toolbar-chunk {
  display: flex; gap: 4px;
}

.fc-toolbar-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

/* Neumorphic buttons */
.fc .fc-button {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: none !important;
  box-shadow: var(--neumorph-btn-shadow, 2px 2px 6px rgba(0,0,0,0.1), -2px -2px 6px rgba(255,255,255,0.07)) !important;
  border-radius: var(--radius-xs) !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  transition: all var(--transition) !important;
}

.fc .fc-button:hover {
  box-shadow: inset 2px 2px 6px rgba(0,0,0,0.15), inset -2px -2px 6px rgba(255,255,255,0.03) !important;
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.fc .fc-button-primary:disabled { opacity: 0.5; }

/* Calendar grid */
.fc .fc-scrollgrid { border-color: var(--border) !important; border-radius: var(--radius-xs) !important; overflow: hidden; }

.fc th {
  padding: 8px !important;
  background: var(--surface) !important;
  border-color: var(--border) !important;
  font-size: 12px; font-weight: 600;
  color: var(--text-muted);
}

.fc .fc-daygrid-day { background: var(--bg, #1a1d25); }

.fc .fc-day-today {
  background: rgba(var(--primary-rgb, 59 130 246), 0.08) !important;
}

.fc .fc-daygrid-day-number {
  padding: 6px 8px !important;
  font-size: 13px; font-weight: 500;
  color: var(--text); text-decoration: none !important;
}

.fc .fc-day-other .fc-daygrid-day-number { color: var(--text-muted); opacity: 0.5; }

.fc .fc-daygrid-day-frame { padding: 2px !important; }

/* روزهای تعطیل — تم‌آگاه (متن باید خوانا باشد) */
.fc .fc-daygrid-day-frame.fc-holiday-day {
  background-color: var(--warning-soft) !important;
  border: 1px solid var(--warning) !important;
  border-radius: var(--radius-xs);
}
.fc .fc-daygrid-day-frame.fc-holiday-day .fc-daygrid-day-number {
  color: var(--text) !important;
  background: transparent !important;
}

/* Events */
.fc-event {
  border-radius: var(--radius-xs) !important;
  padding: 3px 6px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  cursor: pointer;
  border: 1.5px solid !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: transform 0.15s ease;
}

.fc-event:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.12); }

.fc .fc-more-popover {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  border-radius: var(--radius-sm) !important;
}

.fc .fc-popover-body { background: var(--surface) !important; }

.fc .fc-more-link {
  background: rgba(var(--primary-rgb, 59 130 246), 0.1);
  color: var(--primary) !important;
  border-radius: 4px; padding: 1px 6px;
  font-size: 11px; font-weight: 500;
}

/* TimeGrid week view */
.fc .fc-timegrid-slot { height: 28px !important; border-color: var(--border) !important; }

.fc .fc-timegrid-slot-label-cushion {
  font-size: 11px; color: var(--text-muted);
}

/* Detail modal */
.appt-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  font-size: 13px;
}

.appt-detail-field {
  display: flex; gap: 4px; align-items: baseline;
}

.appt-detail-label {
  color: var(--text-muted); font-size: 11px;
  flex-shrink: 0; width: 45px;
}

.appt-detail-value { color: var(--text); }

.btn-xs {
  padding: 2px 8px !important; font-size: 11px !important;
  border-radius: var(--radius-xs) !important;
}

/* ===== Dashboard Mini Calendar (FullCalendar) ===== */
#dashboardCalendar {
  font-family: var(--font) !important;
  background: transparent !important;
}

#dashboardCalendar .fc-header-toolbar {
  margin-bottom: 6px !important;
  flex-wrap: wrap; gap: 4px;
}

#dashboardCalendar .fc-header-toolbar .fc-toolbar-chunk {
  display: flex; gap: 3px;
}

#dashboardCalendar .fc-toolbar-title {
  font-size: 13px !important; font-weight: 700 !important;
  color: var(--text) !important;
}

#dashboardCalendar .fc .fc-button {
  padding: 3px 8px !important; font-size: 11px !important;
  background: var(--surface) !important; color: var(--text) !important;
  border: none !important;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.08), -2px -2px 5px rgba(255,255,255,0.04) !important;
  border-radius: var(--radius-xs) !important;
}

#dashboardCalendar .fc .fc-button:hover {
  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.1) !important;
}

#dashboardCalendar .fc .fc-button-primary:not(:disabled).fc-button-active {
  background: var(--primary) !important; color: #fff !important; box-shadow: none !important;
}

#dashboardCalendar .fc .fc-button-primary:disabled { opacity: 0.4; }

#dashboardCalendar .fc-scrollgrid { border-color: var(--border) !important; }

#dashboardCalendar .fc th {
  padding: 5px 2px !important; font-size: 10px; font-weight: 600;
  background: var(--surface) !important; border-color: var(--border) !important;
  color: var(--text-muted);
}

#dashboardCalendar .fc .fc-daygrid-day { border-color: var(--border) !important; }

#dashboardCalendar .fc .fc-day-today { background: rgba(59,130,246,0.06) !important; }

#dashboardCalendar .fc .fc-daygrid-day-number {
  padding: 3px 5px !important; font-size: 11px; text-decoration: none !important;
  color: var(--text);
}

#dashboardCalendar .fc .fc-day-other .fc-daygrid-day-number { opacity: 0.35; }

#dashboardCalendar .fc-day-highlight {
  background: var(--primary-soft) !important;
  border-radius: 6px;
}

#dashboardCalendar .fc-event {
  font-size: 10px !important; padding: 1px 4px !important;
  border-radius: 3px !important; border: 1.5px solid !important;
  cursor: default;
}

#dashboardCalendar .fc .fc-more-link {
  font-size: 10px; color: var(--primary) !important;
}

/* Dashboard calendar header */
.dash-cal-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--border);
}

.dash-cal-legend {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}

.legend-item {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 500; color: var(--text);
  white-space: nowrap; cursor: pointer; user-select: none;
  padding: 2px 6px; border-radius: 6px;
  transition: all .2s ease;
}

.legend-item:hover { background: var(--surface-hover); }

.legend-item--active {
  background: var(--primary-soft); color: var(--primary);
  font-weight: 700;
}

.legend-item--active .legend-dot {
  transform: scale(1.3); box-shadow: 0 0 5px currentColor;
}

.legend-item--dimmed { opacity: .4; }

.legend-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 2px; border: 1.5px solid; flex-shrink: 0;
  transition: transform .2s, box-shadow .2s;
}

.legend-dot--warning { background: var(--warning-soft); border-color: var(--warning); }
.legend-dot--success { background: var(--success-soft); border-color: var(--success); }
.legend-dot--info    { background: var(--info-soft);    border-color: var(--info); }
.legend-dot--danger  { background: var(--danger-soft);  border-color: var(--danger); }
.legend-dot--primary { background: var(--primary-soft); border-color: var(--primary); }
.legend-dot--secondary { background: var(--bg); border-color: var(--text-muted); }

.legend-icon { font-size: 8px; opacity: .7; }
.legend-item--active .legend-icon { opacity: 1; }

/* Mobile adjustments */
@media (max-width: 767px) {
  .fc-toolbar-title { font-size: 0.9rem !important; }
  .fc .fc-button { padding: 4px 8px !important; font-size: 11px !important; }
  .cal-legend { display: none; }

  #dashboardCalendar .fc-toolbar-title { font-size: 12px !important; }
  .dash-cal-legend { display: none; }
}

/* ==============================================
   TREATMENT INFO PANEL — Frosted Glass Cards
   ============================================== */
.treatment-info-panel {
  width: 280px;
  min-width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- Glass Card Base ---- */
.info-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    0 8px 32px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.10);
  transition: box-shadow var(--transition), transform var(--transition);
}

/* Glow accent strip on top */
.info-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--primary) 35%, var(--primary) 65%, transparent 100%);
  opacity: .55;
  z-index: 2;
}

/* Subtle inner radial highlight */
.info-card--gallery::after {
  content: '';
  position: absolute;
  top: -40%; right: -30%;
  width: 70%; height: 80%;
  background: radial-gradient(circle, var(--primary-soft) 0%, transparent 70%);
  opacity: .6;
  pointer-events: none;
  z-index: 0;
}

.info-card--actions::after {
  content: '';
  position: absolute;
  bottom: -40%; left: -30%;
  width: 70%; height: 80%;
  background: radial-gradient(circle, var(--primary-soft) 0%, transparent 70%);
  opacity: .45;
  pointer-events: none;
  z-index: 0;
}

/* ---- Glass Card Head ---- */
.info-card__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 15px 11px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.info-card__head-left {
  display: flex;
  align-items: center;
  gap: 9px;
}

.info-card__icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 0 12px rgba(59,130,246,.25), inset 0 1px 0 rgba(255,255,255,.15);
  flex-shrink: 0;
}

.info-card__label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .2px;
}

.info-card__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 800;
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.info-card__add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 9px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  transition: all var(--transition);
  letter-spacing: .2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

.info-card__add-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(59,130,246,.40);
  transform: translateY(-1px);
}

.info-card__add-btn:active {
  transform: scale(.97) translateY(0);
}

.info-card__body {
  position: relative;
  z-index: 1;
  padding: 13px;
}

/* ---- Gallery (frosted grid) ---- */
.teeth-images-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 2px;
}

.teeth-images-gallery::-webkit-scrollbar { width: 4px; }
.teeth-images-gallery::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  border-radius: 8px;
}

.gallery-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 10px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
}

.gallery-empty__icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 22px;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 0 18px rgba(59,130,246,.20), inset 0 1px 0 rgba(255,255,255,.12);
}

.gallery-thumb {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 1;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 2px 10px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.10);
  transition: all var(--transition);
  animation: galleryFadeIn .35s ease-out both;
}

@keyframes galleryFadeIn {
  from { opacity: 0; transform: scale(.88); }
  to   { opacity: 1; transform: scale(1); }
}

.gallery-thumb:hover {
  border-color: rgba(59,130,246,.50);
  box-shadow: 0 6px 20px rgba(59,130,246,.30), inset 0 1px 0 rgba(255,255,255,.15);
  transform: translateY(-2px);
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-thumb__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 55%);
  opacity: 0;
  transition: opacity var(--transition);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 6px;
  gap: 4px;
}

.gallery-thumb:hover .gallery-thumb__overlay {
  opacity: 1;
}

.gallery-thumb__badge {
  font-size: 9px;
  color: #fff;
  font-weight: 700;
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 2px 7px;
  border-radius: 5px;
  align-self: flex-start;
  border: 1px solid rgba(255,255,255,.15);
}

.gallery-thumb__del {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 7px;
  background: rgba(220,38,38,.80);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 10px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all var(--transition);
  opacity: 0;
}

.gallery-thumb:hover .gallery-thumb__del {
  opacity: 1;
}

.gallery-thumb__del:hover {
  background: #dc2626;
  transform: scale(1.12);
  box-shadow: 0 3px 10px rgba(220,38,38,.50);
}

/* AI analysis badge + button */
.gallery-thumb__ai {
  position: absolute;
  bottom: 30px;
  left: 5px;
  font-size: 9px;
  color: #fff;
  font-weight: 700;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,.15);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.gallery-thumb__ai--running { background: rgba(59,130,246,.85); }
.gallery-thumb__ai--done    { background: rgba(22,163,74,.85); }
.gallery-thumb__ai--failed  { background: rgba(220,38,38,.85); }
.gallery-thumb__ai--skipped { background: rgba(234,179,8,.85); }

.gallery-thumb__aibtn {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 7px;
  background: rgba(59,130,246,.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all var(--transition);
  opacity: 0;
}
.gallery-thumb:hover .gallery-thumb__aibtn { opacity: 1; }
.gallery-thumb__aibtn:hover {
  background: #3b82f6;
  transform: scale(1.12);
  box-shadow: 0 3px 10px rgba(59,130,246,.50);
}
.gallery-thumb__aibtn:disabled { opacity: .6; cursor: wait; }

.gallery-thumb__caption {
  font-size: 9px;
  color: var(--text-muted);
  padding: 4px 6px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Actions Grid ---- */
.info-actions-grid {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.info-action-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 13px;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  cursor: pointer;
  font-family: var(--font);
  text-align: right;
  transition: all var(--transition);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  width: 100%;
  overflow: hidden;
}

.info-action-card::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 3px;
  background: var(--accent, var(--primary));
  opacity: .65;
  transition: opacity var(--transition), width var(--transition);
}

.info-action-card:hover {
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.10);
}

.info-action-card:hover::before {
  opacity: 1;
  width: 4px;
}

.info-action-card:active {
  transform: translateY(0) scale(.99);
}

.info-action-card__ring {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 16px;
  flex-shrink: 0;
  transition: transform var(--transition), box-shadow var(--transition);
  border: 1px solid rgba(255,255,255,.12);
}

.info-action-card:hover .info-action-card__ring {
  transform: scale(1.10) rotate(-5deg);
}

.info-action-card__ring--blue {
  background: var(--primary-soft);
  color: var(--primary);
  box-shadow: 0 0 14px rgba(59,130,246,.30), inset 0 1px 0 rgba(255,255,255,.15);
}

.info-action-card__ring--green {
  background: var(--success-soft);
  color: var(--success);
  box-shadow: 0 0 14px rgba(52,211,153,.30), inset 0 1px 0 rgba(255,255,255,.15);
}

.info-action-card__ring--amber {
  background: var(--warning-soft);
  color: var(--warning);
  box-shadow: 0 0 14px rgba(251,191,36,.30), inset 0 1px 0 rgba(255,255,255,.15);
}

.info-action-card__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.info-action-card__title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  transition: color var(--transition);
}

.info-action-card__sub {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.2;
}

.info-action-card:hover .info-action-card__title {
  color: var(--primary);
}

.info-action-card__arrow {
  font-size: 11px;
  color: var(--text-muted);
  transition: transform var(--transition), color var(--transition);
  flex-shrink: 0;
}

.info-action-card:hover .info-action-card__arrow {
  color: var(--primary);
  transform: translateX(-4px);
}

/* ---- Accent color binding (right edge bar) ---- */
#btnMedicalSummary { --accent: var(--primary); }
#btnPrescription    { --accent: var(--success); }
#btnTeethNote       { --accent: var(--warning); }

/* ==============================================
   THEME-SPECIFIC FROST TUNING
   ============================================== */

/* Dark theme — deep blue frost */
[data-theme="dark"] .info-card {
  background: linear-gradient(135deg, rgba(30,47,79,.55) 0%, rgba(20,31,51,.45) 100%);
  border-color: rgba(255,255,255,.08);
  box-shadow:
    0 8px 32px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.08);
}

[data-theme="dark"] .info-card__head {
  border-bottom-color: rgba(255,255,255,.05);
}

[data-theme="dark"] .info-action-card {
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.07);
}

[data-theme="dark"] .info-action-card:hover {
  background: rgba(255,255,255,.07);
}

/* Light theme — bright white frost */
[data-theme="light"] .info-card {
  background: linear-gradient(135deg, rgba(255,255,255,.70) 0%, rgba(255,255,255,.45) 100%);
  border-color: rgba(255,255,255,.75);
  box-shadow:
    0 8px 32px rgba(30,41,59,.12),
    inset 0 1px 0 rgba(255,255,255,.90);
}

[data-theme="light"] .info-card::before {
  opacity: .7;
}

[data-theme="light"] .info-card__head {
  border-bottom-color: rgba(0,0,0,.06);
}

[data-theme="light"] .info-card__icon {
  box-shadow: 0 0 12px rgba(37,99,235,.18), inset 0 1px 0 rgba(255,255,255,.70);
}

[data-theme="light"] .info-card__add-btn {
  background: rgba(255,255,255,.50);
  border-color: rgba(37,99,235,.30);
}

[data-theme="light"] .info-card__count {
  border-color: rgba(0,0,0,.06);
}

[data-theme="light"] .info-action-card {
  background: rgba(255,255,255,.55);
  border-color: rgba(0,0,0,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.80);
}

[data-theme="light"] .info-action-card:hover {
  background: rgba(255,255,255,.80);
  box-shadow: 0 8px 24px rgba(30,41,59,.10), inset 0 1px 0 rgba(255,255,255,.90);
}

[data-theme="light"] .gallery-thumb {
  border-color: rgba(0,0,0,.08);
}

[data-theme="light"] .gallery-thumb:hover {
  border-color: rgba(37,99,235,.40);
}

[data-theme="light"] .gallery-empty__icon,
[data-theme="light"] .info-card__icon {
  border-color: rgba(0,0,0,.06);
}

/* Fallback when backdrop-filter unsupported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-theme="dark"] .info-card {
    background: var(--surface);
  }
  [data-theme="dark"] .info-action-card {
    background: var(--bg);
  }
  [data-theme="light"] .info-card {
    background: var(--surface);
  }
  [data-theme="light"] .info-action-card {
    background: var(--bg);
  }
}

/* ===== Patient Tags ===== */
.patient-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  margin-inline: 2px;
  vertical-align: middle;
  box-shadow: var(--neu-in-dk), var(--neu-in-lt);
  transition: all var(--transition);
}

.patient-tag--danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.patient-tag--success {
  background: var(--success-soft);
  color: var(--success);
}

.patient-tag--warning {
  background: var(--warning-soft);
  color: var(--warning);
}

.patient-tag--info {
  background: var(--info-soft);
  color: var(--info);
}

.patient-tag--muted {
  background: var(--border);
  color: var(--text-muted);
}

.patient-tag i {
  font-size: 9px;
}

/* ===== Medical Summary Modal ===== */
.summary-section {
  margin-bottom: 20px;
}

.summary-section-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 16px;
  font-size: 12px;
}

.summary-grid div {
  padding: 4px 0;
}

.summary-label {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11px;
}

.summary-medical-item {
  padding: 4px 0;
  font-size: 12px;
  border-bottom: 1px dotted var(--border);
}

.summary-bool {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}

.summary-bool--true {
  background: var(--danger-soft);
  color: var(--danger);
}

.summary-bool--false {
  background: var(--success-soft);
  color: var(--success);
}

.summary-signed {
  margin-top: 6px;
  font-size: 10px;
  color: var(--success);
  font-weight: 600;
}

.summary-total {
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* ===== Prescription ===== */
.prescription-item {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  border: 1px solid var(--border);
  box-shadow: var(--neu-in-dk), var(--neu-in-lt);
  position: relative;
}

.prescription-item + .prescription-item {
  margin-top: 8px;
}

.prescription-item .d-flex {
  align-items: center;
}

.prescription-item-remove {
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity var(--transition), color var(--transition);
}

.prescription-item:hover .prescription-item-remove {
  opacity: 1;
  color: var(--danger) !important;
}

.prescription-item-remove:hover {
  opacity: 1;
  color: var(--danger) !important;
}

/* ===== Image Upload Zone ===== */
.image-upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 32px 16px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  background: var(--bg);
  box-shadow: var(--neu-in-dk), var(--neu-in-lt);
  position: relative;
  overflow: hidden;
}

.image-upload-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, var(--primary-soft) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}

.image-upload-zone:hover::before, .image-upload-zone.dragover::before {
  opacity: 1;
}

.image-upload-zone:hover, .image-upload-zone.dragover {
  border-color: var(--primary);
  border-style: solid;
}

.image-upload-zone.dragover {
  box-shadow: var(--neu-in-dk), var(--neu-in-lt), 0 0 0 3px var(--primary-soft);
}

.image-upload-zone i {
  font-size: 38px;
  color: var(--primary);
  margin-bottom: 10px;
  display: block;
  position: relative;
  transition: transform var(--transition);
}

.image-upload-zone:hover i {
  transform: translateY(-4px);
}

.image-upload-zone p {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  position: relative;
}

.image-upload-zone small {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
  opacity: 0.7;
}

/* ===== btn-neu small variant ===== */
.btn-neu-sm {
  padding: 4px 12px !important;
  font-size: 11px !important;
  height: 30px !important;
}

/* ===== Settings: clinic logo row ===== */
.settings-logo-row{
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.settings-logo-preview{
  width: 96px; height: 96px;
  border-radius: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: var(--neu-in-dk), var(--neu-in-lt);
  display: grid; place-items: center;
  color: var(--text-muted);
  font-size: 28px;
  overflow: hidden;
  flex-shrink: 0;
}
.settings-logo-preview img{
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.settings-logo-actions{
  flex: 1; min-width: 0;
}
.settings-logo-actions .image-upload-zone{
  padding: 18px 12px;
}
.settings-logo-actions .image-upload-zone i{ font-size: 26px; margin-bottom: 6px; }
@media (max-width: 576px){
  .settings-logo-row{ flex-direction: column; align-items: stretch; }
  .settings-logo-preview{ width: 80px; height: 80px; margin: 0 auto; }
}

/* ===== Responsive: treatment chart ===== */
@media (max-width: 1100px) {
  .treatment-info-panel {
    width: 240px;
    min-width: 240px;
  }

  .teeth-images-gallery {
    grid-template-columns: repeat(2, 1fr);
    max-height: 160px;
  }
}

@media (max-width: 768px) {
  .treatment-chart-wrapper {
    flex-wrap: wrap;
  }

  .treatment-info-panel {
    width: 100%;
    min-width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }

  .info-card {
    flex: 1 1 100%;
  }

  .info-card--gallery {
    flex: 1 1 280px;
  }

  .info-card--actions {
    flex: 1 1 280px;
  }

  .teeth-images-gallery {
    grid-template-columns: repeat(4, 1fr);
    max-height: 120px;
  }

  .summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== Admin management tabs ===== */
.admin-tabs{
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 16px;
  padding-bottom: 0;
}
.admin-tab{
  display: flex; align-items: center; gap: 6px;
  padding: 10px 18px;
  font-size: 13px; font-weight: 600;
  color: var(--text-muted);
  background: none; border: none; cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition);
  white-space: nowrap;
}
.admin-tab:hover:not(:disabled){
  color: var(--primary);
}
.admin-tab.is-active{
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.admin-tab:disabled{
  opacity: 0.5; cursor: not-allowed;
}
@media (max-width: 576px){
  .admin-tab{ padding: 8px 12px; font-size: 12px; }
  .admin-tab span{ display: none; }
}

/* ===== Appointments View Toggle ===== */
.select2-container--default .select2-selection--single {
  height: 38px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 36px;
  color: var(--text);
  padding-right: 12px;
  padding-left: 32px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px;
  left: 6px;
  right: auto;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--text-muted);
}
.select2-dropdown {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-lg);
}
.select2-container--default .select2-results__option {
  padding: 8px 12px;
  color: var(--text);
  font-size: 13px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--primary);
  color: #fff;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text);
  padding: 6px 10px;
  font-size: 13px;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  outline: none;
  border-color: var(--primary);
}
.select2-container--default .select2-results__option[aria-disabled=true] {
  color: var(--text-muted);
}

/* ===== Treatment Plan Quadrant Grid ===== */
.plan-quad-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 4px;
}
.plan-quad {
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 4px 6px;
  background: var(--bg);
}
.plan-quad__title {
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 3px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border);
}
.plan-quad__teeth {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px 4px;
}
.plan-tooth-label {
  font-size: 9px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 1px 2px;
  border-radius: 3px;
  transition: background .15s;
}
.plan-tooth-label:hover {
  background: var(--primary-soft);
}
.plan-tooth-cb {
  width: 11px;
  height: 11px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}
.plan-row > td {
  vertical-align: middle;
  padding: 6px 8px;
}

/* ===== Appointments View Toggle ===== */
.view-toggle {
  background: var(--bg);
  color: var(--text-muted);
  transition: background .2s, color .2s;
}
.view-toggle.active {
  background: var(--primary);
  color: #fff;
}
.view-toggle:hover:not(.active) {
  background: var(--surface-hover);
  color: var(--text);
}
.select2-container .select2-selection--single .select2-selection__clear {
  float: left;
  margin-left: 4px;
}

/* ===== Dashboard Mini Stats ===== */
.dash-mini-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.dash-mini-stat i {
  font-size: 18px;
  opacity: .8;
  flex-shrink: 0;
}
.dash-mini-stat div {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.dash-mini-stat strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.dash-mini-stat small {
  font-size: 10px;
  color: var(--text-muted);
}
.modal .n-card,
.modal .n-card--inset,
.modal .stat-card__icon,
.modal .btn-neu,
.modal .neumorphic-modal,
.modal-content.n-card {
  box-shadow: none !important;
}

/* ===== Gallery Tabs ===== */
.gallery-tab {
  background: var(--bg);
  color: var(--text-muted);
  transition: background .2s, color .2s;
}
.gallery-tab.active {
  background: var(--primary);
  color: #fff;
}
.gallery-tab:hover:not(.active) {
  background: var(--surface-hover);
  color: var(--text);
}

/* ========================================
   HOLIDAY MANAGEMENT (تعطیلات)
   ======================================== */
.holiday-month-btn {
  font-family: var(--font);
  white-space: nowrap;
}
.holiday-month-btn:hover:not(.active) {
  background: var(--primary-soft, #e0e7ff) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
.holiday-month-btn.active {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
  font-weight: 700;
}

.holiday-cal-table th {
  padding: 6px 4px;
  font-size: 11px;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
}
.holiday-cal-table td {
  padding: 3px;
  border: 1px solid transparent;
}

.holiday-day-cell {
  cursor: pointer;
  border-radius: 8px;
  transition: all .15s ease;
}
.holiday-day-cell:hover > div {
  box-shadow: 0 0 0 2px var(--primary);
  transform: scale(1.1);
}

#holidayModal .modal-body {
  max-height: 70vh;
  overflow-y: auto;
}

/* ========================================
   DASHBOARD PANE CARDS (شیشه‌ای)
   ======================================== */
.dash-panes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.dash-pane-card {
  --pane-accent: var(--primary);
  --pane-bg: var(--primary-soft, #e0e7ff);
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 6px 24px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.06);
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  min-height: 260px;
}

.dash-pane-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--pane-accent) 30%, var(--pane-accent) 70%, transparent 100%);
  opacity: .7;
  z-index: 2;
}

.dash-pane-card::after {
  content: '';
  position: absolute;
  top: -30%; right: -20%;
  width: 60%; height: 70%;
  background: radial-gradient(circle, var(--pane-bg) 0%, transparent 70%);
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}

.dash-pane-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.14);
}

[data-theme="light"] .dash-pane-card {
  background: linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.45) 100%);
  border-color: rgba(0,0,0,.06);
  box-shadow: 0 4px 18px rgba(30,41,59,.08), inset 0 1px 0 rgba(255,255,255,.85);
}

[data-theme="light"] .dash-pane-card:hover {
  box-shadow: 0 8px 28px rgba(30,41,59,.12), inset 0 1px 0 rgba(255,255,255,.90);
}

/* Head */
.dash-pane-card__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px 11px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

[data-theme="light"] .dash-pane-card__head {
  border-bottom-color: rgba(0,0,0,.05);
}

.dash-pane-card__icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 15px;
  color: var(--pane-accent);
  background: var(--pane-bg);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 0 12px color-mix(in srgb, var(--pane-accent) 25%, transparent);
  flex-shrink: 0;
}

.dash-pane-card__title {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  min-width: 0;
}

.dash-pane-card__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 8px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 800;
  background: var(--pane-bg);
  color: var(--pane-accent);
  border: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}

/* Body */
.dash-pane-card__body {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 10px 13px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.dash-pane-card__body::-webkit-scrollbar { width: 3px; }
.dash-pane-card__body::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  border-radius: 6px;
}

.dash-pane-card__loading {
  text-align: center;
  color: var(--text-muted);
  font-size: 11px;
  padding: 20px 0;
}

.dash-pane-card__empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 11px;
  padding: 20px 0;
  font-weight: 500;
}

/* Items */
.dash-pane-item {
  --item-accent: var(--primary);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  margin-bottom: 5px;
  border: 1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.03);
  transition: all .2s ease;
  cursor: default;
  border-right: 3px solid var(--item-accent);
}

[data-theme="light"] .dash-pane-item {
  background: rgba(0,0,0,.02);
  border-color: rgba(0,0,0,.04);
}

.dash-pane-item:hover {
  background: rgba(255,255,255,.08);
  transform: translateX(-2px);
}

[data-theme="light"] .dash-pane-item:hover {
  background: rgba(0,0,0,.04);
}

.dash-pane-item__time {
  font-size: 11px;
  font-weight: 700;
  color: var(--item-accent);
  background: color-mix(in srgb, var(--item-accent) 12%, transparent);
  padding: 3px 7px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  direction: ltr;
  min-width: 44px;
  text-align: center;
}

.dash-pane-item__text {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}

.dash-pane-item__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-pane-item__sub {
  font-size: 10px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 2-column grid variant */
.dash-panes-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

/* Responsive */
@media (max-width: 1200px) {
  .dash-panes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .dash-panes-grid,
  .dash-panes-grid--2 {
    grid-template-columns: 1fr;
  }
  .dash-pane-card {
    min-height: auto;
  }
}

/* ========================================
   DASHBOARD TABS + ANIMATED BADGE
   ======================================== */
.dash-tabs-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.dash-tabs-nav {
  display: flex;
  gap: 4px;
  background: var(--bg);
  border-radius: 10px;
  padding: 3px;
  box-shadow: var(--neu-in-dk), var(--neu-in-lt);
}

.dash-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
}

.dash-tab:hover {
  color: var(--text);
  background: var(--surface-hover, rgba(255,255,255,.04));
}

.dash-tab.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 10px rgba(59,130,246,.35);
}

.dash-tab i { font-size: 11px; }

.dash-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  background: rgba(255,255,255,.18);
  transition: all .3s ease;
}

.dash-tab.active .dash-tab-badge {
  background: rgba(255,255,255,.25);
}

.dash-tab-badge--pulse {
  animation: dashBadgePulse 1.2s ease-in-out infinite;
  background: var(--danger) !important;
  color: #fff !important;
  box-shadow: 0 0 12px rgba(220,38,38,.5);
}

@keyframes dashBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.dash-tab-badge:empty {
  display: none;
}