/* ===========================================================================
   PharmRx theme — modern look over Bootstrap 5. Visual layer only: no view
   markup or business logic depends on these rules.
   =========================================================================== */

:root {
  /* Design tokens */
  --pt-primary:        #0e7490;   /* teal-700 — clinical, calm */
  --pt-primary-dark:   #155e75;
  --pt-primary-soft:   #e0f2f7;
  --pt-accent:         #0891b2;
  --pt-bg:             #f2f5f7;
  --pt-surface:        #ffffff;
  --pt-text:           #1f2933;
  --pt-text-muted:     #5f6b76;
  --pt-border:         #e3e8ee;
  --pt-radius:         0.75rem;
  --pt-radius-sm:      0.5rem;
  --pt-shadow:         0 1px 2px rgba(16, 42, 67, 0.06), 0 4px 16px rgba(16, 42, 67, 0.07);
  --pt-shadow-soft:    0 1px 3px rgba(16, 42, 67, 0.08);

  /* Re-point Bootstrap's primary at the theme color */
  --bs-primary: var(--pt-primary);
  --bs-link-color: var(--pt-primary);
  --bs-link-hover-color: var(--pt-primary-dark);
  --bs-body-bg: var(--pt-bg);
  --bs-body-color: var(--pt-text);
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 15px;
  }
}

body {
  margin-bottom: 76px;
  background-color: var(--pt-bg);
  color: var(--pt-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--pt-text);
}

h1 { font-size: 1.6rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }

hr {
  border-color: var(--pt-border);
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   Page shell — every page's top-level .container becomes a surface card.
   (Views all render <div class="container [container-narrow|wide]"> in main.)
--------------------------------------------------------------------------- */
main > .container {
  background: var(--pt-surface);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius);
  box-shadow: var(--pt-shadow);
  padding: 1.75rem 2rem 2rem;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

/* Page-width utilities: forms stay narrow so labels/fields/buttons are close
   together; data-heavy lists get extra room. */
.container-narrow { max-width: 750px; }
.container-wide   { max-width: 1400px; }

/* ---------------------------------------------------------------------------
   Navbar
--------------------------------------------------------------------------- */
.pt-navbar {
  background: linear-gradient(135deg, var(--pt-primary-dark) 0%, var(--pt-primary) 100%);
  box-shadow: var(--pt-shadow-soft);
}

.pt-navbar .navbar-brand {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pt-navbar .navbar-brand .brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.16);
  font-size: 1.05rem;
}

.pt-navbar .nav-link {
  color: rgba(255, 255, 255, 0.85);
  border-radius: 0.5rem;
  padding: 0.4rem 0.85rem;
  margin: 0 0.1rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pt-navbar .nav-link:hover,
.pt-navbar .nav-link:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.pt-navbar .nav-link.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  font-weight: 600;
}

.pt-navbar .dropdown-menu {
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-sm);
  box-shadow: var(--pt-shadow);
  padding: 0.4rem;
}

.pt-navbar .dropdown-item {
  border-radius: 0.4rem;
  padding: 0.45rem 0.75rem;
}

.pt-navbar .dropdown-item:hover {
  background: var(--pt-primary-soft);
  color: var(--pt-primary-dark);
}

.pt-navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.4);
}

.pt-user-chip {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.12);
  border: none;
  border-radius: 2rem;
  padding: 0.35rem 1rem;
  transition: background-color 0.15s ease;
}

.pt-user-chip:hover {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
}

/* ---------------------------------------------------------------------------
   Tables
--------------------------------------------------------------------------- */
.table {
  --bs-table-hover-bg: #f5f9fa;
  border-color: var(--pt-border);
}

.table thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pt-text-muted);
  border-bottom: 2px solid var(--pt-border);
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  white-space: nowrap;
}

.table > :not(caption) > * > * {
  padding: 0.6rem 0.75rem;
}

.table tfoot td {
  border-top: 2px solid var(--pt-border);
}

/* Keep the striped/hover variants soft */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: #f8fafb;
}

/* ---------------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------------- */
.btn {
  border-radius: var(--pt-radius-sm);
  font-weight: 500;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.btn-primary {
  --bs-btn-bg: var(--pt-primary);
  --bs-btn-border-color: var(--pt-primary);
  --bs-btn-hover-bg: var(--pt-primary-dark);
  --bs-btn-hover-border-color: var(--pt-primary-dark);
  --bs-btn-active-bg: var(--pt-primary-dark);
  --bs-btn-active-border-color: var(--pt-primary-dark);
  --bs-btn-disabled-bg: var(--pt-primary);
  --bs-btn-disabled-border-color: var(--pt-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--pt-primary);
  --bs-btn-border-color: var(--pt-primary);
  --bs-btn-hover-bg: var(--pt-primary);
  --bs-btn-hover-border-color: var(--pt-primary);
  --bs-btn-active-bg: var(--pt-primary-dark);
  --bs-btn-active-border-color: var(--pt-primary-dark);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus, .form-select:focus {
  box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem var(--pt-accent);
}

/* ---------------------------------------------------------------------------
   Forms
--------------------------------------------------------------------------- */
.form-control, .form-select {
  border-radius: var(--pt-radius-sm);
  border-color: var(--pt-border);
}

.form-control:focus, .form-select:focus {
  border-color: var(--pt-accent);
}

.form-label {
  color: var(--pt-text);
  margin-bottom: 0.35rem;
}

.form-text {
  color: var(--pt-text-muted);
}

.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;
}

/* ---------------------------------------------------------------------------
   Cards, alerts, badges
--------------------------------------------------------------------------- */
.card {
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius);
  box-shadow: var(--pt-shadow-soft);
}

.card-header {
  background: #f8fafb;
  border-bottom: 1px solid var(--pt-border);
  border-radius: var(--pt-radius) var(--pt-radius) 0 0 !important;
}

.alert {
  border-radius: var(--pt-radius-sm);
  border-width: 0;
  border-left: 4px solid transparent;
}

.alert-info    { border-left-color: #0891b2; }
.alert-warning { border-left-color: #d97706; }
.alert-danger  { border-left-color: #dc2626; }
.alert-success { border-left-color: #16a34a; }

.badge {
  border-radius: 2rem;
  font-weight: 500;
  padding: 0.4em 0.8em;
}

/* ---------------------------------------------------------------------------
   DataTables controls — space out the search/length/pagination chrome
--------------------------------------------------------------------------- */
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-sm);
  padding: 0.3rem 0.6rem;
}

/* The length dropdown is a Bootstrap form-select with a background-image
   arrow on the right — keep enough right padding that the number and the
   arrow don't overlap. */
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-sm);
  padding: 0.3rem 1.9rem 0.3rem 0.6rem;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  color: var(--pt-text-muted);
  font-size: 0.85rem;
}

.page-item.active .page-link {
  background-color: var(--pt-primary);
  border-color: var(--pt-primary);
}

.page-link {
  color: var(--pt-primary);
}

/* ---------------------------------------------------------------------------
   Footer
--------------------------------------------------------------------------- */
.footer {
  background: transparent;
  border-top: 1px solid var(--pt-border) !important;
  color: var(--pt-text-muted);
  font-size: 0.85rem;
  line-height: 60px;
}

/* ---------------------------------------------------------------------------
   Login page
--------------------------------------------------------------------------- */
.login-shell {
  max-width: 420px;
  margin: 4rem auto 0;
}

.login-shell .brand-mark {
  width: 3rem;
  height: 3rem;
  border-radius: 0.85rem;
  background: var(--pt-primary);
  color: #fff;
  font-size: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}