/* ===================================
   NowExpress.ph Design System
   Premium Black + Warm Beige
   Matches https://nowexpress.ph/ branding
   =================================== */

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

:root {
  /* Primary palette — black-based, matching nowexpress.ph */
  --nx-primary: #1a1a1a;
  --nx-primary-dark: #000000;
  --nx-primary-light: #f5f5f5;
  --nx-primary-hover: #333333;

  /* Secondary / accent */
  --nx-secondary: #444444;
  --nx-accent: #119555;
  --nx-accent-light: #dbf6e8;

  /* Semantic colors */
  --nx-success: #119555;
  --nx-warning: #e6940a;
  --nx-danger: #dc3545;
  --nx-info: #0369a1;

  /* Backgrounds */
  --nx-bg-light: #f7f4f1;
  --nx-bg-warm: #f7f4f1;
  --nx-bg-white: #ffffff;

  /* Borders */
  --nx-border: #e0ddd9;
  --nx-border-focus: #1a1a1a;

  /* Text */
  --nx-text: #1a1a1a;
  --nx-text-muted: #666666;
  --nx-text-light: #999999;

  /* Radius — pill-style like nowexpress.ph */
  --nx-radius: 20px;
  --nx-radius-sm: 8px;
  --nx-radius-lg: 20px;
  --nx-radius-pill: 100px;

  /* Shadows — minimal, flat aesthetic */
  --nx-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  --nx-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08);
  --nx-shadow-xl: 0 10px 40px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --nx-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Material Symbols Rounded base class */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* No focus ring on the page heading.
   Routes.razor ends with <FocusOnNavigate Selector="h1" />, so on every page load and every
   route change Blazor moves focus to the first <h1> — which is how a screen reader learns the
   page changed in an app that never reloads. The browser then draws its own focus ring around
   that heading, which on this portal reads as a blue box around the patient's name on every
   refresh, with nothing clicked. An <h1> is not tabbable, so the only way it can hold focus is
   that programmatic move; hiding the ring costs no keyboard user anything and the heading is
   still announced. This rule ships in the stock Blazor Web App template for exactly this
   reason and was lost when app.css was replaced with the NowExpress design system. */
h1:focus, h1:focus-visible {
  outline: none;
}

html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  font-size: 14px;
  background-color: var(--nx-bg-warm);
  color: var(--nx-text);
  line-height: 1.6;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Override Bootstrap primary colors — nowexpress.ph black aesthetic */
.text-primary {
  color: var(--nx-primary) !important;
}

.bg-primary {
  background-color: var(--nx-primary) !important;
}

.bg-purple {
  background-color: #7c3aed !important;
  color: #ffffff !important;
}

.btn-primary {
  color: #fff;
  background-color: var(--nx-primary);
  border-color: var(--nx-primary);
  border-radius: var(--nx-radius);
  font-weight: 600;
  font-size: 13px;
  padding: 0.75rem 1.5rem;
  transition: background-color var(--nx-transition), box-shadow var(--nx-transition);
  letter-spacing: 0.01em;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--nx-primary-hover);
  border-color: var(--nx-primary-hover);
  box-shadow: none;
}

.btn-outline-primary {
  color: var(--nx-primary);
  border-color: var(--nx-primary);
  border-radius: var(--nx-radius);
  font-weight: 600;
  font-size: 13px;
  padding: 0.75rem 1.5rem;
}

.btn-outline-primary:hover {
  background-color: var(--nx-primary);
  border-color: var(--nx-primary);
  color: #fff;
}

.btn {
  border-radius: var(--nx-radius);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  transition: all var(--nx-transition);
}

/* Compact / Small button overrides */
.btn-sm,
.btn-group-sm > .btn {
  padding: 0.25rem 0.6rem !important;
  font-size: 12px !important;
  border-radius: var(--nx-radius-sm, 8px) !important;
  font-weight: 500;
  line-height: 1.35;
}

.btn-xs {
  padding: 0.15rem 0.45rem !important;
  font-size: 11px !important;
  border-radius: 4px !important;
  font-weight: 500;
  line-height: 1.2;
}

.btn-outline-secondary {
  border-color: var(--nx-border);
  color: var(--nx-secondary);
}

.btn-outline-secondary:hover {
  background-color: var(--nx-primary-light);
  border-color: var(--nx-secondary);
  color: var(--nx-text);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.15rem rgba(26, 26, 26, 0.15);
}

/* Text success override */
.text-success {
  color: var(--nx-success) !important;
}

/* Cards — clean flat design */
.card {
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-sm);
  box-shadow: none;
  background: #fff;
  transition: box-shadow var(--nx-transition);
}

.card:hover {
  box-shadow: var(--nx-shadow);
}

/* Badges — pill-shaped, soft colors */
.badge {
  font-weight: 600;
  padding: 0.35em 0.85em;
  border-radius: var(--nx-radius-pill);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge.bg-warning {
  background-color: #fff3e0 !important;
  color: #b36b00 !important;
}

.badge.bg-success {
  background-color: var(--nx-accent-light) !important;
  color: #065f46 !important;
}

.badge.bg-danger {
  background-color: #fee2e2 !important;
  color: #991b1b !important;
}

.badge.bg-info {
  background-color: #e0f2fe !important;
  color: #075985 !important;
}

.badge.bg-primary {
  background-color: var(--nx-primary) !important;
  color: #fff !important;
}

/* List groups */
.list-group-item {
  border-color: var(--nx-border);
  transition: background-color var(--nx-transition);
}

.list-group-item-action:hover {
  background-color: var(--nx-bg-warm);
}

/* Form inputs — clean with dark focus ring */
.form-control {
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-sm);
  padding: 0.75rem 1rem;
  transition: border-color var(--nx-transition), box-shadow var(--nx-transition);
  font-size: 14px;
}

.form-control:focus {
  border-color: var(--nx-border-focus);
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08);
}

.form-select {
  border-radius: var(--nx-radius-sm);
  border-color: var(--nx-border);
  padding: 0.75rem 1rem;
}

.form-select:focus {
  border-color: var(--nx-border-focus);
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08);
}

/* Page headers */
.page-header {
  margin-bottom: 1.5rem;
}

.page-header h1 {
  color: var(--nx-text);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.page-header p {
  color: var(--nx-text-muted);
  font-size: 0.9rem;
}

/* Stat cards — flat clean design */
.stat-card {
  background: #fff;
  border-radius: var(--nx-radius-sm);
  padding: 1.25rem;
  border: 1px solid var(--nx-border);
  transition: all var(--nx-transition);
}

.stat-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--nx-shadow);
}

.stat-card .stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--nx-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-card .stat-icon.primary {
  background: var(--nx-primary-light);
  color: var(--nx-primary);
}

.stat-card .stat-icon.warning {
  background: #fff3e0;
  color: #e6940a;
}

.stat-card .stat-icon.success {
  background: var(--nx-accent-light);
  color: var(--nx-success);
}

.stat-card .stat-icon.info {
  background: #e0f2fe;
  color: var(--nx-info);
}

.stat-card .stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--nx-text);
  letter-spacing: -0.02em;
}

.stat-card .stat-label {
  font-size: 0.875rem;
  color: var(--nx-text-muted);
}

/* Content area */
.content {
  padding-top: 1.5rem;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--nx-text);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.text-muted {
  color: var(--nx-text-muted) !important;
}

/* Links */
a {
  color: var(--nx-primary);
  text-decoration: none;
  transition: color 0.15s;
}

a:hover {
  color: var(--nx-primary-dark);
}

.btn-link {
  color: var(--nx-primary);
}

/* Validation */
.valid.modified:not([type=checkbox]) {
  outline: none;
  border-color: var(--nx-success);
}

.invalid {
  outline: none;
  border-color: var(--nx-danger);
}

.validation-message {
  color: var(--nx-danger);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* Error boundary */
.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--nx-danger);
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
  border-radius: var(--nx-radius);
}

.blazor-error-boundary::after {
  content: "An error has occurred."
}

/* Checkbox styling */
.darker-border-checkbox.form-check-input {
  border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--nx-text-muted);
}

.empty-state svg {
  color: var(--nx-border);
  margin-bottom: 1rem;
}

/* Loading spinner override */
.spinner-border {
  color: var(--nx-primary);
}

/* Table styling — clean minimal */
.table {
  border-color: var(--nx-border);
}

.table thead th {
  background-color: var(--nx-bg-warm);
  border-bottom: 2px solid var(--nx-border);
  font-weight: 600;
  color: var(--nx-secondary);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}

.table tbody tr:hover {
  background-color: var(--nx-bg-warm);
}

/* High-density table support */
.table-dense > :not(caption) > * > *,
.table-sm > :not(caption) > * > * {
  padding: 0.35rem 0.55rem;
  vertical-align: middle;
}

/* Page Title Styling */
.nx-page-title {
  margin-bottom: 1.5rem;
}

.nx-page-title h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  letter-spacing: -0.02em;
}

.nx-page-title p {
  color: var(--nx-text-muted);
  margin: 0;
  font-size: 0.875rem;
}

/* Modern Card Styles — flat, clean */
.nx-card {
  background: #fff;
  border-radius: var(--nx-radius-sm);
  border: 1px solid var(--nx-border);
  box-shadow: none;
  overflow: hidden;
}

.nx-card-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--nx-border);
  background: #fff;
}

.nx-card-header h2,
.nx-card-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

.nx-card-body {
  padding: 1.5rem;
}

/* Action Buttons — pill-style */
.nx-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--nx-radius);
  border: none;
  cursor: pointer;
  transition: all var(--nx-transition);
  letter-spacing: 0.01em;
}

.nx-action-btn svg {
  width: 16px;
  height: 16px;
}

.nx-action-btn-primary {
  background: var(--nx-primary);
  color: #fff;
}

.nx-action-btn-primary:hover {
  background: var(--nx-primary-hover);
}

.nx-action-btn-secondary {
  background: #fff;
  color: var(--nx-secondary);
  border: 1px solid var(--nx-border);
}

.nx-action-btn-secondary:hover {
  background: var(--nx-bg-warm);
  border-color: var(--nx-primary);
  color: var(--nx-primary);
}

/* Status Pills — pill-shaped */
.nx-status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3rem 0.875rem;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: var(--nx-radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nx-status-pending {
  background: #fff3e0;
  color: #b36b00;
}

.nx-status-approved {
  background: var(--nx-accent-light);
  color: #065f46;
}

.nx-status-rejected {
  background: #fee2e2;
  color: #991b1b;
}

.nx-status-info {
  background: #e0f2fe;
  color: #075985;
}

/* Empty State */
.nx-empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--nx-text-muted);
}

.nx-empty-state svg {
  width: 64px;
  height: 64px;
  color: var(--nx-border);
  margin-bottom: 1rem;
}

.nx-empty-state h3 {
  font-size: 1.125rem;
  color: var(--nx-text);
  margin-bottom: 0.5rem;
}

.nx-empty-state p {
  font-size: 0.95rem;
  max-width: 400px;
  margin: 0 auto;
}

/* Loading Spinner */
.nx-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: var(--nx-primary);
}

.nx-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--nx-border);
  border-top-color: var(--nx-primary);
  border-radius: 50%;
  animation: nx-spin 0.8s linear infinite;
}

@keyframes nx-spin {
  to { transform: rotate(360deg); }
}

/* Utility Classes */
.nx-mt-1 { margin-top: 0.5rem; }
.nx-mt-2 { margin-top: 1rem; }
.nx-mt-3 { margin-top: 1.5rem; }
.nx-mt-4 { margin-top: 2rem; }

.nx-mb-1 { margin-bottom: 0.5rem; }
.nx-mb-2 { margin-bottom: 1rem; }
.nx-mb-3 { margin-bottom: 1.5rem; }
.nx-mb-4 { margin-bottom: 2rem; }

.nx-text-center { text-align: center; }
.nx-text-muted { color: var(--nx-text-muted); }
.nx-text-primary { color: var(--nx-primary); }
.nx-text-success { color: var(--nx-success); }
.nx-text-danger { color: var(--nx-danger); }
.nx-text-warning { color: var(--nx-warning); }

/* Skeleton loader */
.nx-skeleton {
  animation: nx-skeleton-pulse 1.4s ease-in-out infinite;
}

@keyframes nx-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* Assign/Reassign button column goes to next line on mobile */
.nx-assign-btn-col {
  flex-shrink: 0;
  width: 100%;
}

/* For bigger or desktop screens, the column stays */
@media (min-width: 576px) {
  .border-sm-top-0 { border-top: 0 !important; }
  .border-sm-start  { border-left: 1px solid var(--nx-border) !important; }
  .w-sm-auto        { width: auto !important; }

  .nx-assign-btn-col {
    width: 120px;
  }
}
/* Visibility Utilities � Global */
.nx-hide-desktop {
  display: none !important;
}

.nx-hide-mobile {
  display: flex !important;
}

@media (max-width: 768px) {
  .nx-hide-desktop {
    display: flex !important;
  }

  .nx-hide-mobile {
    display: none !important;
  }
}

/* ===================================
   Consultation Calendar Styles
   =================================== */

.nx-calendar-card {
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius);
  box-shadow: var(--nx-shadow);
  overflow: hidden;
}

.nx-calendar-nav {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--nx-radius-sm);
  border: 1px solid var(--nx-border);
  background: var(--nx-bg-white);
  color: var(--nx-text);
  transition: all var(--nx-transition);
}

.nx-calendar-nav:hover {
  background: var(--nx-primary);
  color: #fff;
  border-color: var(--nx-primary);
}

/* Calendar Grid */
.nx-calendar-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nx-calendar-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--nx-border);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-sm) var(--nx-radius-sm) 0 0;
}

.nx-calendar-header > div {
  background: var(--nx-bg-warm);
  padding: 8px 4px;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--nx-text-muted);
}

.nx-calendar-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--nx-border);
  border: 1px solid var(--nx-border);
  border-top: none;
  border-radius: 0 0 var(--nx-radius-sm) var(--nx-radius-sm);
}

.nx-calendar-day {
  background: var(--nx-bg-white);
  min-height: 80px;
  padding: 6px 8px;
  cursor: pointer;
  transition: background var(--nx-transition);
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.nx-calendar-day:hover {
  background: var(--nx-bg-light);
}

.nx-calendar-day-number {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--nx-text);
}

/* Today highlight */
.nx-calendar-today .nx-calendar-day-number {
  background: var(--nx-primary);
  color: #fff;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* Selected day highlight */
.nx-calendar-selected {
  background: var(--nx-primary-light) !important;
  outline: 2px solid var(--nx-primary);
  outline-offset: -1px;
}

/* Consultation dots */
.nx-calendar-dots {
  display: flex;
  gap: 3px;
  justify-content: center;
  margin: auto;
}

.nx-calendar-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--nx-accent);
}

/* Detail Panel */
.nx-calendar-detail {
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius);
  box-shadow: var(--nx-shadow);
}

.nx-calendar-detail .card-header {
  background: var(--nx-bg-warm);
  border-bottom: 1px solid var(--nx-border);
  padding: 12px 16px;
}

.nx-calendar-detail .card-body {
  padding: 16px;
}

/* Booking Card */
.nx-calendar-booking {
  background: var(--nx-bg-white);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-sm);
  padding: 12px 16px;
  margin-bottom: 10px;
  transition: box-shadow var(--nx-transition);
}

.nx-calendar-booking:last-child {
  margin-bottom: 0;
}

.nx-calendar-booking:hover {
  box-shadow: var(--nx-shadow-lg);
}

/* Responsive: smaller cells on mobile */
@media (max-width: 768px) {
  .nx-calendar-day {
    min-height: 60px;
    padding: 4px 3px;
  }

  .nx-calendar-day-number {
    font-size: 0.75rem;
  }

  .nx-calendar-dot {
    width: 4px;
    height: 4px;
  }

  .nx-calendar-header > div {
    font-size: 0.6rem;
    padding: 6px 2px;
  }
}

.portal-hyperlink {
  color: var(--nx-info);
}

/* ===================================
   Auth pages — the single centred card
   =================================== */

/* Login used to size this box with `min-height: calc(100vh - 180px)` inline.
   Two things were wrong with that on a phone.

   100vh is the LARGE viewport: the height the page would have if the browser's
   address bar were fully collapsed. On iOS it therefore resolves about 80px
   taller than the area actually on screen, so header + this box + footer add
   up to more than one screenful. The page scrolls when it has no reason to,
   and the dark footer band waiting under the fold reads as a second, empty
   page. dvh is the same measurement taken against the viewport the user can
   actually see, so the three stack back inside one screen.

   The 180px never matched the chrome it was standing in either — the header is
   56px and the footer 74px — so the box was over-tall before vh was even in
   the picture, and a card centred in an over-tall box sits low. */
.nx-auth-viewport {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 162px); /* fallback for browsers without dvh */
    min-height: calc(100dvh - 162px); /* header 56 + footer 74 + .nx-main's 2rem */
}

@media (max-width: 768px) {
    /* On a phone the card is the whole page, and centring it in the remaining
       space still leaves it drifting away from the brandmark it belongs to.
       Top-aligned it lands just under the logo, which is where the eye already
       is, and the footer keeps the slack underneath instead. */
    .nx-auth-viewport {
        align-items: flex-start;
        min-height: calc(100vh - 146px);
        min-height: calc(100dvh - 146px); /* .nx-main's padding drops to 1rem here */
        padding-top: 0.5rem;
    }
}