/*
====================================================
DoseClock polish.css
Phase 7 Package 16

Final visual polish layer for the clinical-modern UI.
No route logic, form behaviour, or JavaScript hooks are changed.
====================================================
*/

/*
====================================================
Global rhythm and page spacing
====================================================
*/

.page-main {
  max-width: min(1180px, calc(100% - 2rem));
  margin-inline: auto;
}

.page-main > * + * {
  margin-top: clamp(1rem, 1.5vw, 1.5rem);
}

.page-title,
.dc-page-title,
h1:first-child {
  letter-spacing: -0.025em;
}

.page-subtitle,
.dc-page-subtitle,
.lead {
  max-width: 70ch;
  color: var(--color-text-muted, #475569);
}

/*
====================================================
Cards and panels: softer, more consistent finish
====================================================
*/

.dc-card,
.card,
.panel,
.dashboard-card,
.schedule-card,
.medication-card,
.stock-card,
.admin-log-card {
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.08);
}

.dc-card:hover,
.dashboard-card:hover,
.schedule-card:hover,
.medication-card:hover,
.stock-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.11);
}

.dc-card,
.dashboard-card,
.schedule-card,
.medication-card,
.stock-card {
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease;
}

/* Avoid hover movement for cards containing active form controls. */
form .dc-card:hover,
form .card:hover,
form .panel:hover {
  transform: none;
}

/*
====================================================
Buttons: unified press and hover feel
====================================================
*/

button,
.btn,
.dc-button,
.site-nav__link,
.site-nav__logout {
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease;
}

button:active,
.btn:active,
.dc-button:active,
.site-nav__link:active,
.site-nav__logout:active {
  transform: translateY(1px);
}

.dc-button,
.btn-primary,
button[type="submit"] {
  box-shadow: 0 10px 22px rgba(10, 45, 111, 0.16);
}

.dc-button:hover,
.btn-primary:hover,
button[type="submit"]:hover {
  box-shadow: 0 14px 30px rgba(10, 45, 111, 0.22);
}

/*
====================================================
Forms: calmer field grouping
====================================================
*/

label,
.form-label,
.dc-label {
  margin-bottom: 0.35rem;
  font-weight: 750;
  color: var(--color-heading, #0f172a);
}

input,
select,
textarea,
.form-control,
.form-select,
.dc-input {
  min-height: 46px;
  background-color: #ffffff;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

textarea,
textarea.form-control,
textarea.dc-input {
  min-height: 7rem;
}

.form-text,
.help-text,
.dc-help-text {
  color: var(--color-text-muted, #64748b);
  font-size: 0.95rem;
}

/*
====================================================
Tables: clearer scanning without heavy borders
====================================================
*/

table,
.dc-table {
  border-radius: var(--radius-lg, 1rem);
  overflow: hidden;
}

thead th,
.dc-table thead th {
  background: rgba(10, 45, 111, 0.055);
  color: var(--color-heading, #0f172a);
  letter-spacing: 0.01em;
}

tbody tr,
.dc-table tbody tr {
  transition: background-color 120ms ease;
}

tbody tr:hover,
.dc-table tbody tr:hover {
  background-color: rgba(96, 165, 250, 0.08);
}

/*
====================================================
Status badges and flash messages
====================================================
*/

.dc-badge,
.badge,
.status-badge,
.flash {
  letter-spacing: 0.005em;
}

.flash-container {
  margin-bottom: clamp(1rem, 1.5vw, 1.5rem);
}

.flash {
  border-width: 1px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

/*
====================================================
Header polish
====================================================
*/

.site-header {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.brand__logo {
  transition: transform 160ms ease, opacity 160ms ease;
}

.brand__link:hover .brand__logo {
  transform: translateY(-1px);
  opacity: 0.96;
}

.site-nav__user {
  color: var(--color-text-muted, #475569);
}

/*
====================================================
Homepage/dashboard rhythm
====================================================
*/

.homepage-grid,
.dashboard-grid,
.dc-grid {
  align-items: stretch;
}

.homepage-grid > *,
.dashboard-grid > *,
.dc-grid > * {
  min-width: 0;
}

.dashboard-card,
.home-card,
.tile {
  min-height: 100%;
}

/*
====================================================
Medication/schedule readability
====================================================
*/

.medication-name,
.schedule-medication-name,
.dc-medication-name {
  color: var(--color-heading, #0f172a);
  font-weight: 800;
}

.dose,
.medication-dose,
.schedule-dose,
.dc-dose {
  color: var(--color-primary, #0a2d6f);
  font-weight: 800;
}

/*
====================================================
Responsive polish
====================================================
*/

@media (max-width: 768px) {
  .page-main {
    max-width: min(100% - 1rem, 100%);
  }

  .dc-card,
  .card,
  .panel,
  .dashboard-card,
  .schedule-card,
  .medication-card,
  .stock-card {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  }

  .dc-card:hover,
  .dashboard-card:hover,
  .schedule-card:hover,
  .medication-card:hover,
  .stock-card:hover {
    transform: none;
  }
}

@media (max-width: 480px) {
  .page-main {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  h1,
  .page-title,
  .dc-page-title {
    font-size: clamp(1.65rem, 8vw, 2rem);
  }
}

/*
====================================================
Reduced motion safety
====================================================
*/

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .dc-card:hover,
  .dashboard-card:hover,
  .schedule-card:hover,
  .medication-card:hover,
  .stock-card:hover,
  button:active,
  .btn:active,
  .dc-button:active,
  .site-nav__link:active {
    transform: none !important;
  }
}