:root {
  --dash-bg-1: #f0f5ff;
  --dash-bg-2: #ebf7f7;
  --dash-ink: #10243e;
  --dash-muted: #5f7088;
  --dash-card: rgba(255, 255, 255, 0.92);
  --dash-border: rgba(15, 23, 42, 0.12);
  --dash-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
  --dash-brand: #0a7b77;
  --dash-brand-dark: #085e5d;
  --dash-accent: #0f4ba1;
  --dash-danger: #b33a52;
  --dash-warning: #cb8a15;
}

body {
  font-family: "Manrope", sans-serif;
  color: var(--dash-ink);
  background:
    radial-gradient(circle at 15% -10%, #d8ecff 0%, transparent 35%),
    radial-gradient(circle at 95% 0%, #d6f6ec 0%, transparent 30%),
    linear-gradient(180deg, var(--dash-bg-1), var(--dash-bg-2));
}

.container {
  max-width: 1240px;
}

header {
  border: 1px solid var(--dash-border);
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.98), rgba(239, 251, 255, 0.96));
  border-radius: 1rem;
  box-shadow: var(--dash-shadow);
}

h1 {
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: -0.02em;
  color: #0c376f;
}

.header-title-block h1 {
  font-size: clamp(2.05rem, 3.6vw, 3.1rem);
  line-height: 1.06;
  margin: 0 0 0.45rem 0;
}

p.current-date {
  color: var(--dash-muted);
  margin: 0;
}

.header-user-line {
  margin-top: 0.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.top-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.header-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.header-title-block {
  min-width: 280px;
}

.header-logout-form {
  margin: 0;
}

.header-right-cluster {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.header-user-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.header-user-actions .action-button {
  white-space: nowrap;
}

.top-actions {
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.app-switch-toggle {
  border: 1px solid #1d2534;
  background: linear-gradient(130deg, #101726, #1b2437);
  min-height: 52px;
}

.app-switch-toggle .switch-knob {
  background: linear-gradient(145deg, #1a8b86, #0c5d69);
  box-shadow: 0 4px 12px rgba(12, 93, 105, 0.45);
}

.action-button {
  border: 1px solid transparent;
  border-radius: 0.65rem;
  padding: 0.56rem 0.9rem;
  background: linear-gradient(140deg, var(--dash-accent), #1f63c6);
  box-shadow: 0 8px 16px rgba(15, 75, 161, 0.24);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.action-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(15, 75, 161, 0.28);
  filter: brightness(1.03);
}

.action-button-report {
  background: linear-gradient(140deg, #0b9f9d, #0d6f8e);
}

.action-button-ward {
  background: linear-gradient(140deg, #7f4f24, #9c6644);
}

.action-button-discharge {
  background: linear-gradient(140deg, #238b57, #157347);
}

.action-button-deceased {
  background: linear-gradient(140deg, #b02a37, #842029);
}

.action-button-cancel {
  background: linear-gradient(140deg, #5f6670, #4b5159);
}

.inpatient-action-btn {
  padding: 0.38rem 0.72rem;
  border-radius: 0.48rem;
  box-shadow: none;
}

.action-button-reset {
  background: linear-gradient(140deg, #5d6b85, #74809a);
}

.btn-add {
  background: linear-gradient(140deg, #138c63, #0f7253);
}

.btn-logout {
  background: linear-gradient(140deg, #9e4f20, #b86629);
}

.btn-logout-small {
  padding: 0.3rem 0.64rem;
  font-size: 0.8rem;
  border-radius: 0.52rem;
  box-shadow: 0 5px 10px rgba(158, 79, 32, 0.2);
}

.card {
  border: 1px solid var(--dash-border);
  border-radius: 1rem;
  background: var(--dash-card);
  box-shadow: var(--dash-shadow);
  backdrop-filter: blur(8px);
}

h2 {
  font-family: "Space Grotesk", sans-serif;
  color: #163b6d;
  border-bottom-color: #dce8f8;
  font-size: clamp(1.2rem, 1.45vw, 1.42rem);
}

.card > h2,
.card > h3,
.card .card-header h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.18rem, 1.4vw, 1.38rem);
}

.capacity-overview-heading {
  font-size: clamp(1.45rem, 2.15vw, 1.9rem);
}

table {
  border: 1px solid #dbe6f3;
  border-radius: 0.75rem;
  overflow: hidden;
  margin-top: 0.9rem;
}

table td,
table td a:not(.action-button),
table td strong {
  font-family: "Vazirmatn", "Manrope", sans-serif;
  text-decoration: none;
}

thead th {
  background: linear-gradient(180deg, #edf3fb, #e3ecf8);
  color: #2f4460;
  font-weight: 700;
}

tbody tr:hover {
  background-color: #eef7ff;
}

.status-card {
  border-radius: 0.95rem;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 12px 22px rgba(15, 23, 42, 0.14);
}

.status-card.occupied {
  background: linear-gradient(160deg, #1f8f7b, #0f6c5d);
}

.status-card.available {
  background: linear-gradient(160deg, #c23d56, #a83048);
}

.status-card.total {
  background: linear-gradient(160deg, #45607f, #324965);
}

.table-scroll-container {
  border-radius: 0.8rem;
  border: 1px solid #dbe6f3;
  max-height: 380px;
  overflow-y: auto;
}

.table-scroll-container thead th {
  background: linear-gradient(180deg, #edf3fb, #e3ecf8);
}

.urgency-bar-container {
  background-color: #dae4f2;
}

.alert-notification {
  border-radius: 0.9rem;
  border-color: #b7e5cf;
  background: linear-gradient(145deg, #e3f7ec, #d4f0e1);
  color: #185f44;
}

.section-refresh-indicator {
  font-size: 0.86rem;
  color: #2b4d71;
  font-weight: 700;
}

.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

.jalali-flip-calendar {
  width: min(100%, 330px);
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background:
    linear-gradient(160deg, rgba(17, 64, 123, 0.95), rgba(12, 51, 90, 0.95)),
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.18), transparent 55%);
  color: #eaf2ff;
  padding: 0.62rem 0.72rem;
  box-shadow: 0 18px 32px rgba(9, 32, 56, 0.35);
}

.jalali-flip-row {
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}

.jalali-flip-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
}

.jalali-flip-digits {
  display: flex;
  gap: 0.2rem;
}

.jalali-flip-digit {
  width: 1.52rem;
  height: 1.92rem;
  border-radius: 0.42rem;
  background: linear-gradient(180deg, #1f2f48, #15243a);
  border: 1px solid rgba(188, 210, 255, 0.24);
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12);
}

.jalali-flip-digit span {
  font-size: 1.04rem;
  font-weight: 800;
  font-family: "Space Grotesk", sans-serif;
  line-height: 1;
  transform-origin: top center;
}

.jalali-flip-digit.flip-animate span {
  animation: jalaliFlip 0.42s ease;
}

.jalali-flip-divider {
  width: 1px;
  height: 2rem;
  background: linear-gradient(180deg, transparent, rgba(176, 202, 247, 0.8), transparent);
}

.jalali-time-row {
  margin-top: 0.42rem;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

.jalali-time-colon {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #c9ddff;
  line-height: 1;
  margin: 0 0.06rem;
}

@keyframes jalaliFlip {
  0% {
    transform: rotateX(0deg);
    opacity: 1;
  }
  50% {
    transform: rotateX(-90deg);
    opacity: 0.4;
  }
  100% {
    transform: rotateX(0deg);
    opacity: 1;
  }
}

@media (max-width: 1024px) {
  .header-top-row {
    align-items: stretch;
  }

  .header-right-cluster {
    width: 100%;
    justify-content: space-between;
  }

  .top-actions-row {
    align-items: flex-start;
  }
}

@media (max-width: 1440px) and (min-width: 1025px) {
  .container {
    max-width: 1240px;
  }

  header {
    padding: 16px 20px;
  }

  .card {
    padding: 18px 20px;
    margin-bottom: 18px;
  }

  .header-title-block h1 {
    font-size: clamp(1.8rem, 2.85vw, 2.45rem);
  }

  .action-button {
    padding: 0.46rem 0.78rem;
    font-size: 0.9rem;
  }

  th,
  td {
    padding: 9px 11px;
  }

  .status-card .count {
    font-size: 2.1em;
  }

  .table-scroll-container {
    max-height: 340px;
  }
}

@media (max-width: 680px) {
  .header-right-cluster {
    flex-direction: column;
  }

  .header-user-actions {
    width: 100%;
  }

  .header-user-actions .action-button {
    width: 100%;
    text-align: center;
  }

  .top-actions {
    width: 100%;
  }

  .top-actions .action-button,
  .top-actions .app-switch-toggle {
    width: 100%;
    justify-content: center;
  }

  .jalali-flip-calendar {
    width: 100%;
  }

  .header-title-block h1 {
    font-size: clamp(1.75rem, 8.2vw, 2.35rem);
  }
}