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

:root {
  --navy: #172554;
  --navy-soft: #1e3a5f;
  --primary: #0f766e;
  --primary-hover: #0b5f59;
  --primary-light: #e7f7f5;
  --surface: #ffffff;
  --canvas: #f4f7fa;
  --line: #e5eaf0;
  --text: #182230;
  --muted: #667085;
  --danger: #c4320a;
  --danger-soft: #fff1ed;
  --success: #087443;
  --success-soft: #ecfdf3;
  --shadow: 0 1px 3px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .05);
  font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
  color: var(--text);
  background: var(--canvas);
  line-height: 1.65;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; background: var(--canvas); }
a { color: var(--primary); text-decoration: none; transition: .18s ease; }
a:hover { color: var(--primary-hover); }

header {
  min-height: 72px;
  padding: 0 max(28px, calc((100vw - 1440px) / 2));
  background: linear-gradient(115deg, #102a43, #173f5f);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  box-shadow: 0 3px 16px rgba(15, 35, 55, .18);
  position: sticky;
  top: 0;
  z-index: 20;
}

header > strong { font-size: 1.12rem; font-weight: 800; white-space: nowrap; }
header > strong::before {
  content: "+";
  width: 34px;
  height: 34px;
  margin-left: 10px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  background: #2dd4bf;
  color: #102a43;
  font-size: 1.45rem;
  vertical-align: middle;
}
header nav { display: flex; align-items: center; gap: 8px; }
header nav > a, header nav > .link {
  color: #d9e8f1;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 500;
}
header nav > a:hover, header nav > .link:hover { color: #fff; background: rgba(255,255,255,.1); }
header nav span {
  color: #fff;
  border-right: 1px solid rgba(255,255,255,.22);
  margin-right: 8px;
  padding: 4px 16px 4px 8px;
  font-size: .88rem;
}
header form { margin: 0; }

main { width: min(1440px, 100%); margin: 0 auto; padding: 34px 28px 50px; }
.title { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.title h1 { margin: 0; font-size: clamp(1.35rem, 2vw, 1.8rem); font-weight: 800; letter-spacing: -.02em; }
.title p { color: var(--muted); margin: 4px 0 0; font-size: .9rem; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  box-shadow: var(--shadow);
}

button, .button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--primary);
  color: #fff;
  padding: 8px 18px;
  cursor: pointer;
  font: 600 .92rem "Vazirmatn", Tahoma, sans-serif;
  box-shadow: 0 1px 2px rgba(16,24,40,.08);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
button:hover, .button:hover { background: var(--primary-hover); color: #fff; box-shadow: 0 4px 10px rgba(15,118,110,.18); }
button:active, .button:active { transform: translateY(1px); }
.secondary { background: #fff; color: #344054; border-color: #d0d5dd; }
.secondary:hover { background: #f8fafc; color: #182230; box-shadow: none; }
.link { min-height: auto; padding: 0; border: 0; background: none; box-shadow: none; }
.link:hover { background: none; box-shadow: none; }
.danger { color: var(--danger) !important; }

label { color: #344054; font-size: .88rem; font-weight: 600; }
input, select {
  width: 100%;
  min-width: 0;
  height: 44px;
  margin-top: 6px;
  border: 1px solid #d0d5dd;
  border-radius: 9px;
  background: #fff;
  color: var(--text);
  padding: 8px 12px;
  outline: none;
  font: 400 .92rem "Vazirmatn", Tahoma, sans-serif;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder { color: #98a2b3; }
input:focus, select:focus { border-color: #2aa198; box-shadow: 0 0 0 3px rgba(42,161,152,.12); }
input[readonly] { background: #f2f4f7; color: #667085; cursor: not-allowed; }
.date-input{position:relative}.date-input input{padding-left:48px}.date-trigger{position:absolute;left:4px;bottom:4px;width:36px;height:36px;min-height:0;padding:0;border-radius:7px;background:var(--primary-light);color:var(--primary);box-shadow:none;font-size:1.2rem}.date-trigger:hover{background:#d4f0ed;color:var(--primary-hover);box-shadow:none}.date-picker[hidden]{display:none}.date-picker{position:fixed;z-index:120;width:300px;padding:18px;border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:0 18px 50px rgba(16,24,40,.2)}.date-picker-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.date-picker-head strong{font-size:.95rem}.date-picker-close{width:30px;height:30px;min-height:0;padding:0;background:#f2f4f7;color:#667085;box-shadow:none;font-size:1.25rem}.date-selects{display:grid;grid-template-columns:1.2fr 1.4fr .8fr;gap:7px}.date-selects label{font-size:.72rem}.date-selects select{height:40px;padding:5px;margin-top:4px}.date-picker-actions{display:flex;gap:8px;margin-top:17px}.date-picker-actions button{flex:1;min-height:38px;padding:6px}

.filters {
  margin-bottom: 20px;
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(210px, 1.5fr) repeat(4, minmax(145px, 1fr)) auto auto;
  align-items: end;
  gap: 10px;
}
.filters input, .filters select { margin: 0; }
.filters .button { height: 44px; }
.senior-filters{grid-template-columns:repeat(5,minmax(150px,1fr))}.filter-actions{display:flex;gap:8px;grid-column:span 2}.filter-actions>*{flex:1;white-space:nowrap}

.table-wrap { padding: 0; overflow: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; white-space: nowrap; }
th, td { padding: 14px 16px; text-align: right; border-bottom: 1px solid #edf0f3; }
th { background: #f8fafb; color: #475467; font-size: .78rem; font-weight: 700; }
td { color: #344054; font-size: .88rem; }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: #f8fcfb; }
tbody tr:last-child td { border-bottom: 0; }
.actions { display: flex; align-items: center; gap: 16px; }
.actions a, .actions button { font-size: .84rem; font-weight: 600; }
.actions form { margin: 0; }
.patient-name { color:#1d2939; font-weight:700; }.patient-name:hover{color:var(--primary)}
.title-actions { display:flex; gap:9px; }
.patient-profile { padding:0; overflow:hidden; }
.profile-head { padding:24px 28px; display:flex; align-items:center; gap:15px; color:#fff; background:linear-gradient(115deg,#173f5f,#205777); }
.profile-avatar { width:58px;height:58px;flex:0 0 58px;display:grid;place-items:center;border-radius:16px;background:#2dd4bf;color:#14334c;font-size:1.55rem;font-weight:800; }
.profile-head>div:nth-child(2){display:flex;flex-direction:column}.profile-head>div:nth-child(2) strong{font-size:1.12rem}.profile-head>div:nth-child(2) span{font-size:.82rem;color:#d9e8f1}.profile-badge{margin-right:auto;padding:7px 12px;border:1px solid rgba(255,255,255,.25);border-radius:20px;background:rgba(255,255,255,.1);font-size:.78rem;}
.detail-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); }
.detail-item { min-height:93px;padding:19px 22px;border-left:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:5px; }
.detail-item:nth-child(4n){border-left:0}.detail-item span{color:var(--muted);font-size:.76rem;font-weight:600}.detail-item strong{color:#1d2939;font-size:.9rem;font-weight:600;overflow-wrap:anywhere}.detail-item em{color:#b0b7c3;font-style:normal;font-weight:400}
.modal-open{overflow:hidden}.modal-backdrop[hidden]{display:none}.modal-backdrop{position:fixed;inset:0;z-index:100;background:rgba(12,25,43,.66);backdrop-filter:blur(3px);display:grid;place-items:center;padding:22px}.patient-modal{position:relative;width:min(1050px,100%);max-height:92vh;background:#fff;border-radius:17px;overflow:hidden;box-shadow:0 28px 80px rgba(0,0,0,.28);animation:modal-rise .2s ease}.modal-close{position:absolute;z-index:2;left:17px;top:15px;width:36px;height:36px;min-height:0;padding:0;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(255,255,255,.12);font:400 1.55rem Arial;color:#fff;box-shadow:none}.modal-close:hover{background:rgba(255,255,255,.22);box-shadow:none}.modal-loading{padding:90px 30px;text-align:center;color:var(--muted)}.modal-scroll{max-height:calc(92vh - 183px);overflow:auto}.patient-modal footer{padding:15px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:9px}.patient-modal .profile-head{padding-left:70px}.patient-modal .detail-grid{grid-template-columns:repeat(4,minmax(0,1fr))}@keyframes modal-rise{from{opacity:0;transform:translateY(12px) scale(.985)}}
.pagination { display:flex; align-items:center; justify-content:center; gap:6px; margin:22px 0 0; direction:rtl; }
.pagination a,.pagination span { min-width:38px; height:38px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #d0d5dd; border-radius:8px; background:#fff; color:#475467; font-size:.82rem; font-weight:600; }
.pagination a:hover { border-color:#80cbc4; background:var(--primary-light); color:var(--primary); }
.pagination .active { border-color:var(--primary); background:var(--primary); color:#fff; }
.pagination .active:hover { background:var(--primary-hover); color:#fff; }
.pagination .disabled { color:#b0b7c3; background:#f8fafb; cursor:not-allowed; }
.pagination .ellipsis { min-width:25px; padding:0; border:0; background:transparent; }
.pagination .page-arrow { min-width:85px; }

.grid-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.grid-form label, .user-form label { display: flex; flex-direction: column; }
.grid-form .full { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 20px; }
.grid-form .full button { min-width: 150px; }

.user-form { display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)) auto auto; align-items: end; gap: 14px; margin-bottom: 20px; }
.check { height: 44px; flex-direction: row !important; align-items: center; gap: 8px; white-space: nowrap; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }

.login {
  width: 100%;
  min-height: 100vh;
  padding: 28px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 15% 20%, rgba(45,212,191,.15), transparent 27%),
    radial-gradient(circle at 85% 80%, rgba(23,63,95,.12), transparent 30%),
    #f3f7f9;
}
.login > .card, .login > form {
  width: min(440px, 100%);
  padding: 36px;
  border: 0;
  box-shadow: 0 20px 55px rgba(23, 43, 77, .12);
}
.login h1 { margin: 0 0 8px; color: var(--navy); font-size: 1.55rem; text-align: center; }
.login h1::before {
  content: "+";
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(145deg, #0f766e, #15998e);
  font-size: 2rem;
  box-shadow: 0 8px 18px rgba(15,118,110,.23);
}
.login form { display: flex; flex-direction: column; gap: 16px; }
.login form button { width: 100%; margin-top: 4px; }

.alert { margin: 14px 0; padding: 12px 14px; border-radius: 9px; font-size: .88rem; }
.alert.error, .error { background: var(--danger-soft); color: var(--danger); border: 1px solid #ffd6cc; }
.toast {
  position: fixed;
  top: 88px;
  left: 24px;
  z-index: 50;
  max-width: 360px;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid #abefc6;
  box-shadow: 0 10px 28px rgba(16,24,40,.12);
  font-size: .9rem;
  animation: slide-in .25s ease-out;
}
.toast.error { background: var(--danger-soft); color: var(--danger); border-color: #ffd6cc; }
@keyframes slide-in { from { opacity: 0; transform: translateX(-12px); } }

/* Dashboard */
.dashboard-title { margin-bottom: 24px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-bottom: 18px; }
.stat-card { display: flex; align-items: center; gap: 16px; padding: 20px; }
.stat-card > div:last-child { display: flex; min-width: 0; flex-direction: column; }
.stat-card span { color: var(--muted); font-size: .83rem; font-weight: 600; }
.stat-card strong { color: var(--navy); font-size: 1.7rem; line-height: 1.35; font-weight: 800; }
.stat-card small { color: #98a2b3; font-size: .75rem; }
.stat-icon { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 13px; font-size: 1.35rem; font-weight: 800; }
.stat-icon.patients { color:#0f766e; background:#e7f7f5; }.stat-icon.heart { color:#c4320a; background:#fff1ed; }.stat-icon.shield { color:#175cd3; background:#eff8ff; }.stat-icon.home { color:#7f56d9; background:#f4f3ff; }
.chart-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.chart-card,.progress-card,.region-chart { min-height: 340px; }
.card-heading { display:flex; justify-content:space-between; align-items:start; margin-bottom:24px; }
.card-heading h2 { margin:0; font-size:1rem; color:#1d2939; }.card-heading p { margin:3px 0 0; color:var(--muted); font-size:.78rem; }
.donut-layout { min-height:235px; display:flex; align-items:center; justify-content:space-evenly; gap:30px; }
.donut { --value:50; width:190px; height:190px; flex:0 0 190px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--primary) calc(var(--value)*1%), var(--navy-soft) 0 98%, #dbe2e8 0); position:relative; }
.donut::after { content:""; position:absolute; inset:27px; background:#fff; border-radius:50%; box-shadow:inset 0 0 0 1px #edf0f3; }
.donut > div { z-index:1; display:flex; flex-direction:column; text-align:center; }.donut strong { font-size:1.65rem;color:var(--navy); }.donut span { color:var(--muted);font-size:.8rem; }
.legend { min-width:150px; display:flex; flex-direction:column; gap:14px; }.legend > div { display:grid; grid-template-columns:12px 1fr auto; align-items:center; gap:8px;font-size:.82rem; }.legend i { width:9px;height:9px;border-radius:50%; }.legend .teal{background:var(--primary)}.legend .navy{background:var(--navy-soft)}.legend .gray{background:#dbe2e8}.legend strong{color:#344054}
.vertical-bars { height:245px; display:flex; align-items:stretch; justify-content:space-around; gap:9px; padding-top:8px; }
.v-item { min-width:0; flex:1; display:grid; grid-template-rows:22px 1fr 34px; text-align:center; }.v-item>strong { font-size:.68rem;color:#667085; }.v-item>div { height:100%; display:flex;align-items:end;justify-content:center;border-bottom:1px solid #dfe4ea;background:repeating-linear-gradient(to top,#f1f3f5 0,#f1f3f5 1px,transparent 1px,transparent 25%); }.v-item i { width:min(32px,65%);display:block;background:linear-gradient(#2aa198,#0f766e);border-radius:6px 6px 0 0;min-height:4px; }.v-item span { overflow:hidden;text-overflow:ellipsis;font-size:.67rem;color:#667085;padding-top:7px; }
.progress-card { display:flex; flex-direction:column; }.progress-row { margin:13px 0; }.progress-row>div:first-child{display:flex;justify-content:space-between;font-size:.84rem;margin-bottom:8px}.progress-row strong{color:#344054}.track{height:9px;border-radius:20px;background:#edf1f4;overflow:hidden}.track i{display:block;height:100%;border-radius:20px;background:var(--primary)}.track i.warn{background:#f79009}.track i.blue{background:#2e90fa}
.region-chart { grid-column:1/-1; min-height:0; }.h-bars { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 35px}.h-row{display:grid;grid-template-columns:70px 1fr 50px;align-items:center;gap:10px;font-size:.76rem}.h-row>span{overflow:hidden;text-overflow:ellipsis}.h-row>div{height:10px;background:#edf1f4;border-radius:10px;overflow:hidden}.h-row i{height:100%;display:block;background:linear-gradient(90deg,#0f766e,#2dd4bf);border-radius:10px}.h-row strong{text-align:left;color:#475467}

@media (max-width: 1150px) {
  .filters { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .senior-filters{grid-template-columns:repeat(3,minmax(150px,1fr))}
  .grid-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .user-form { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .detail-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.detail-item:nth-child(4n){border-left:1px solid var(--line)}.detail-item:nth-child(3n){border-left:0}
}

@media (max-width: 760px) {
  header { position: static; min-height: auto; padding: 14px 18px; align-items: flex-start; }
  header > strong { font-size: 1rem; }
  header > strong::before { display: none; }
  header nav { justify-content: flex-end; flex-wrap: wrap; gap: 2px; }
  header nav span { width: 100%; order: -1; border: 0; padding: 0 8px; text-align: left; font-size: .8rem; }
  main { padding: 24px 14px 40px; }
  .title { align-items: flex-start; }
  .title .button { white-space: nowrap; }
  .filters, .grid-form, .user-form { grid-template-columns: 1fr; }
  .senior-filters{grid-template-columns:1fr}.filter-actions{grid-column:auto}
  .grid-form { gap: 14px; }
  .card { border-radius: 11px; padding: 16px; }
  .table-wrap { padding: 0; border-radius: 11px; }
  th, td { padding: 12px; }
  .login { padding: 14px; }
  .login > .card, .login > form { padding: 26px 20px; }
  .stat-grid,.chart-grid { grid-template-columns:1fr; }.stat-card{padding:16px}.donut-layout{flex-direction:column;gap:20px}.legend{width:100%}.h-bars{grid-template-columns:1fr}.dashboard-title{align-items:center}
  .patient-title{flex-direction:column}.title-actions{width:100%}.title-actions .button{flex:1}.profile-head{padding:19px 16px;flex-wrap:wrap}.profile-badge{width:100%;margin:0;text-align:center}.detail-grid{grid-template-columns:1fr 1fr}.detail-item:nth-child(3n){border-left:1px solid var(--line)}.detail-item:nth-child(2n){border-left:0}
  .modal-backdrop{padding:8px}.patient-modal{max-height:96vh;border-radius:13px}.patient-modal .profile-head{padding:17px 15px 17px 58px}.patient-modal .profile-badge{display:none}.patient-modal .detail-grid{grid-template-columns:1fr 1fr}.modal-scroll{max-height:calc(96vh - 174px)}.patient-modal footer .button{flex:1}.modal-close{left:12px;top:13px}
}