/* ============================================================================
   MXDoc — Legacy → mx Design Bridge
   ----------------------------------------------------------------------------
   Purpose: restyle Bootstrap-4-era markup (.btn-primary / .card / .badge / .table)
           onto the --mx-* token system WITHOUT rewriting 410 blade files.

   Authority: docs/DESIGN_SPEC.md  (Dribbble 21203824 adaptation)
   Non-negotiable: keep our colour base. --mx-primary stays; NO new hues.

   WHY THIS FILE IS SAFE
   --------------------
   1. Purely additive CSS. Zero PHP, zero blade edits, zero route changes.
   2. Scoped to a single class prefix we OWN (.btn-* / .card-* / .badge-* /
      .table-*). Bootstrap 4 loads at head_admin L25, tokens.css at L15,
      so tokens lose the cascade — this file loads LAST and wins.
   3. .label / .label-* are DELIBERATELY NOT TOUCHED. Bootstrap 4 REMOVED
      .label; the 1,183 `class="label"` hits in the codebase are <label for>
      form labels. Bridging them would destroy every form.

   Loaded by: resources/views/layout/partials/head_admin.blade.php (LAST)
               resources/views/layout/partials/head.blade.php      (LAST)
   ========================================================================== */

/* ── 0. Bridge header ────────────────────────────────────────────────────── */
:root {
  /* Aliases resolved from tokens.css. NOTE: --mx-radius-btn is 44px in
     tokens.css and ui_mx.css DOES use it as the button corner radius, so the
     bridge must mirror that literal usage rather than "fix" it to a small
     radius — the spec §3 intent is fully-rounded (pill) buttons.
     .mx-btn is the reference implementation; keep values in lockstep. */
  --mxb-radius-btn:   var(--mx-radius-btn, 44px);
  --mxb-radius-card:  var(--mx-radius-card, 12px);
  --mxb-radius-badge: var(--mx-radius-badge, 9999px);
  --mxb-radius-pill:  var(--mx-radius-pill, 9999px);

  --mxb-shadow-card:   var(--mx-shadow-soft, 0 8px 24px rgba(16, 24, 40, 0.06));
  --mxb-shadow-btn:    var(--mx-shadow-cta, 0 6px 16px rgba(39, 130, 255, 0.28));

  --mxb-border-soft:   var(--mx-gray-200, #eef1f5);
  --mxb-border:        var(--mx-border, #e3e8ef);

  --mxb-ink:           var(--mx-ink, #1a2230);
  --mxb-ink-muted:     var(--mx-ink-muted, #5b6472);
  --mxb-ink-soft:      var(--mx-ink-soft, #98a2b3);

  --mxb-surface:       var(--mx-surface, #ffffff);
  --mxb-surface-alt:   var(--mx-surface-alt, #f7f9fc);
  --mxb-page-bg:       var(--mx-page-bg, #f5f7fa);

  --mxb-white-a08: var(--mx-white-a08, rgba(255, 255, 255, 0.08));
  --mxb-white-a15: var(--mx-white-a15, rgba(255, 255, 255, 0.15));
  --mxb-white:    var(--mx-white, #fff);
}

/* ── 1. BUTTONS ──────────────────────────────────────────────────────────────
   Spec §3: fully rounded (pill), primary filled, secondary soft tint
   (primary 8–10% surface), 44–48px height, subtle shadow on primary only.
   Bootstrap ships .btn at 38px / 4px radius — this is the visible delta.
   ------------------------------------------------------------------------- */
.btn {
  border-radius: var(--mxb-radius-btn);
  font-family: var(--mx-font);
  font-size: var(--mx-btn-font-size, var(--mx-text-base));
  font-weight: var(--mx-btn-font-weight, var(--mx-font-weight-semibold));
  line-height: 1.4;
  padding: 10px 20px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  transition: background-color var(--mx-duration-base, 200ms) var(--mx-ease-standard, ease),
              border-color     var(--mx-duration-base, 200ms) var(--mx-ease-standard, ease),
              color            var(--mx-duration-base, 200ms) var(--mx-ease-standard, ease),
              box-shadow       var(--mx-duration-base, 200ms) var(--mx-ease-standard, ease),
              transform        var(--mx-duration-fast, 160ms)   var(--mx-ease-standard, ease);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--mx-shadow-focus, 0 0 0 4px rgba(39, 130, 255, 0.22));
}

.btn:active { transform: translateY(1px); }

/* Primary — filled + subtle shadow (shadow ONLY on primary, per spec). */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--mx-primary);
  border-color: var(--mx-primary);
  color: var(--mx-white, #fff);
  box-shadow: var(--mxb-shadow-btn);
}
.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):hover {
  background-color: var(--mx-primary-dark);
  border-color: var(--mx-primary-dark);
  color: var(--mx-white, #fff);
}

/* Secondary variants — soft tint of the status colour on its surface. */
.btn-secondary {
  background-color: var(--mx-primary-surface);
  border-color: transparent;
  color: var(--mx-primary-darker, #157c9f);
}
.btn-secondary:hover {
  background-color: var(--mx-primary-light);
  border-color: transparent;
  color: var(--mx-primary-darker, #157c9f);
}

.btn-success {
  background-color: var(--mx-success, #12b76a);
  border-color: var(--mx-success, #12b76a);
  color: var(--mx-white, #fff);
}
.btn-success:hover {
  background-color: var(--mx-success-dark, #0e9f5b);
  border-color: var(--mx-success, #12b76a);
}

.btn-danger {
  background-color: var(--mx-danger, #f04438);
  border-color: var(--mx-danger, #f04438);
  color: var(--mx-white, #fff);
}
.btn-danger:hover {
  background-color: var(--mx-danger-dark, #d92d20);
  border-color: var(--mx-danger, #f04438);
}

.btn-warning {
  background-color: var(--mx-warning, #f79009);
  border-color: var(--mx-warning, #f79009);
  color: var(--mx-ink, #1a2230);
}
.btn-warning:hover {
  background-color: var(--mx-warning-dark, #dc6803);
  border-color: var(--mx-warning, #f79009);
}

.btn-info {
  background-color: var(--mx-info);
  border-color: var(--mx-info);
  color: var(--mx-white, #fff);
}
.btn-info:hover { background-color: color-mix(in srgb, var(--mx-info) 84%, #000); }

/* Ghost / outline — quiet, no fill. */
.btn-ghost,
.btn-outline-primary {
  background-color: transparent;
  border-color: var(--mxb-border);
  color: var(--mx-primary-darker, #157c9f);
}
.btn-ghost:hover,
.btn-outline-primary:hover {
  background-color: var(--mx-primary-surface);
  border-color: var(--mx-primary-light);
  color: var(--mx-primary-darker, #157c9f);
}

.btn-link {
  color: var(--mx-primary-darker, #157c9f);
  text-decoration: none;
  font-weight: var(--mx-font-weight-medium, 500);
  box-shadow: none;
  background: transparent;
  border-color: transparent;
}
.btn-link:hover { color: var(--mx-primary-dark); }

/* Buttons inside dark surfaces (sidebar / topbar / bottom nav) must not
   carry a white fill from Bootstrap's `.btn-light`. */
.btn-light {
  background-color: var(--mxb-white-a08);
  border-color: transparent;
  color: var(--mx-white, #fff);
}
.btn-light:hover {
  background-color: var(--mxb-white-a15);
  border-color: transparent;
  color: var(--mx-white, #fff);
}

.btn-light:not(.btn-light-text),
.main-sidebar .btn-light,
[data-theme="dark"] .btn-light {
  color: var(--mx-white, #fff);
}

/* Size modifiers — keep Bootstrap's scale, adopt mx height. */
.btn-sm,
.btn-xs {
  min-height: 34px;
  padding: 6px 14px;
  border-radius: calc(var(--mxb-radius-btn) - 2px);
  font-size: var(--mx-text-sm, 14px);
}
.btn-lg {
  min-height: 48px;
  padding: 14px 28px;
  border-radius: var(--mxb-radius-btn);
}
.btn-block { width: 100%; }

.btn-icon {
  min-height: var(--mx-input-height, 44px);
  width: var(--mx-input-height, 44px);
  padding: 0;
}

/* Loading state must keep its text width — the classic shimmer trap. */
.btn.is-loading,
.btn.loading {
  pointer-events: none;
  opacity: 0.75;
}
.btn.is-loading::after,
.btn.loading::after {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: mx-bridge-spin 0.7s linear infinite;
}
@keyframes mx-bridge-spin { to { transform: rotate(360deg); } }

/* ── 2. CARDS ───────────────────────────────────────────────────────────────
   Spec §2: soft-white surfaces, 16–20px radius, very soft diffuse shadows,
   1px #EEF1F5 borders, NO heavy borders.
   Bootstrap ships .card with a 1px rgba(0,0,0,.125) border, 4px radius and a
   hard drop shadow — this block is what makes the platform look consistent.
   ------------------------------------------------------------------------- */
.card {
  border: 1px solid var(--mxb-border-soft);
  border-radius: var(--mxb-radius-card);
  background-color: var(--mxb-surface);
  box-shadow: var(--mxb-shadow-card);
  overflow: hidden;
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--mxb-border-soft);
  padding: var(--mx-space-4, 16px) var(--mx-space-5, 20px);
  font-weight: var(--mx-font-weight-semibold, 600);
  color: var(--mxb-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-header + .card-body,
.card-header:first-child {
  border-top: 0;
}

/* Bootstrap 4 adds a .5em top margin to a header following a body — remove
   the phantom gap inside a card. */
.card-body > .card-header:first-child { margin-top: -4px; }

.card-body {
  padding: var(--mx-space-5, 20px);
  background-color: transparent;
}

.card-footer {
  border-top: 1px solid var(--mxb-border-soft);
  background-color: var(--mxb-surface-alt);
  padding: var(--mx-space-4, 16px) var(--mx-space-5, 20px);
}

/* Flat variant — for dense dashboards that want a border, no lift. */
.card-flat {
  border: 1px solid var(--mxb-border-soft);
  border-radius: var(--mxb-radius-card);
  box-shadow: none;
  background-color: var(--mxb-surface);
}

/* ── 3. BADGES ──────────────────────────────────────────────────────────────
   Spec §10: soft tinted pills, dot + label.
   Bootstrap 4 REMOVED .label, so .badge-* here is Bootstrap's .badge
   (Bootstrap 3 name, Bootstrap 4 markup). Bridge it to a soft mx pill.
   ------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--mxb-radius-badge);
  padding: 4px 12px;
  font-size: var(--mx-text-sm, 14px);
  font-weight: var(--mx-font-weight-medium, 500);
  line-height: 1.5;
  white-space: nowrap;
}

.badge-success {
  background-color: var(--mx-status-success-bg);
  color: var(--mx-status-success);
}
.badge-danger  { background-color: var(--mx-status-danger-bg);  color: var(--mx-status-danger); }
.badge-warning { background-color: var(--mx-status-pending-bg);  color: var(--mx-status-pending); }
.badge-info    { background-color: var(--mx-status-info-bg);     color: var(--mx-status-info); }
.badge-primary { background-color: var(--mx-status-brand-bg);     color: var(--mx-status-brand); }
.badge-secondary,
.badge-neutral {
  background-color: var(--mx-surface-alt, #f7f9fc);
  color: var(--mx-ink-muted, #5b6472);
}

.badge-pill { border-radius: var(--mxb-radius-pill); }

/* ── 4. TABLES ──────────────────────────────────────────────────────────────
   Spec §7: borderless rows, hover tint, rounded container card wrapper,
   sticky clean header. Bootstrap tables ship heavy grid borders.
   ------------------------------------------------------------------------- */
.table {
  width: 100%;
  color: var(--mxb-ink);
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin-bottom: 0;
}

.table th,
.table td {
  padding: 14px 16px;
  border-top: 1px solid var(--mxb-border-soft);
  vertical-align: middle;
}
.table th:first-child,
.table td:first-child { padding-left: 20px; }
.table th:last-child,
.table td:last-child  { padding-right: 20px; }

.table thead th {
  background-color: var(--mxb-surface-alt);
  color: var(--mxb-ink-muted);
  font-weight: var(--mx-font-weight-semibold, 600);
  text-transform: none;
  white-space: nowrap;
  border-top: 0;
  border-bottom: 1px solid var(--mxb-border-soft);
}

/* thead tint only spans the first row — clip it to the header. */
.table thead th:first-child { border-top-left-radius: calc(var(--mxb-radius-card) - 2px); }
.table thead th:last-child  { border-top-right-radius: calc(var(--mxb-radius-card) - 16px); }

/* Spec §7: borderless rows. Only the first row's top rule is meaningful. */
.table tbody tr:first-child td { border-top: 0; }

.table tbody tr:hover {
  background-color: var(--mx-primary-surface);
}
.table tbody tr:hover td { color: var(--mxb-ink); }

/* Striped tables would fight the hover tint — drop the zebra. */
.table-striped tbody tr:nth-of-type(odd) { background-color: transparent; }
.table-striped tbody tr:nth-of-type(odd):hover { background-color: var(--mx-primary-surface); }

.table-bordered,
.table-bordered th,
.table-bordered td { border: 1px solid var(--mxb-border-soft); }

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-active,
.table-striped > tbody > tr.active > td { background-color: var(--mx-primary-surface); }

/* ── 5. FORMS ───────────────────────────────────────────────────────────────
   Spec §8: pill/rounded inputs, soft borders, focus ring = --mx-shadow-focus.
   Bootstrap 4's .form-control is 38px with a hard #ced4da border.
   ------------------------------------------------------------------------- */
.form-control,
.custom-select,
.form-control:focus,
.custom-select:focus {
  font-family: var(--mx-font);
  padding: var(--mx-input-pad-y, 10px) var(--mx-input-pad-x, 14px);
  min-height: var(--mx-input-height, 44px);
  font-size: var(--mx-text-base, 16px);
  color: var(--mxb-ink);
  background-color: var(--mxb-surface);
  border: 1px solid var(--mxb-border);
  border-radius: var(--mx-radius-input, var(--mx-radius-sm, 6px));
  line-height: 1.5;
  transition: border-color var(--mx-duration-fast, 160ms) var(--mx-ease-standard, ease),
              box-shadow   var(--mx-duration-fast, 160ms) var(--mx-ease-standard, ease);
}

.form-control:focus,
.custom-select:focus {
  border-color: var(--mx-primary-light);
  box-shadow: var(--mx-shadow-focus, 0 0 0 4px rgba(39, 130, 255, 0.22));
}

.form-control.is-invalid,
.form-control.is-invalid:focus { border-color: var(--mx-danger, #f04438); }
.form-control.is-valid,
.form-control.is-valid:focus   { border-color: var(--mx-success, #12b76a); }

.form-control:disabled,
.form-control[readonly],
.custom-select:disabled {
  background-color: var(--mxb-surface-alt);
  color: var(--mxb-ink-soft);
  cursor: not-allowed;
}

.form-control::placeholder { color: var(--mxb-ink-soft); opacity: 1; }

textarea.form-control { height: auto; min-height: 104px; line-height: 1.6; }

.custom-select {
  background-image: none;
  padding-right: 38px;
}
.custom-select::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--mxb-ink-soft);
  border-bottom: 2px solid var(--mxb-ink-soft);
  transform: rotate(45deg);
  pointer-events: none;
}
.custom-select { position: relative; }

/* `.invalid-feedback` in BS4 renders as a block under the input. */
.invalid-feedback {
  display: none;
  margin-top: 6px;
  font-size: var(--mx-text-sm, 14px);
  color: var(--mx-danger, #f04438);
}
.is-invalid ~ .invalid-feedback,
.was-validated .form-control:invalid ~ .invalid-feedback { display: block; }

/* Bootstrap 4 has no `.form-label`; the 1,183 `<label class="label">` form
   labels stay exactly as they are — this block only styles NEW mx forms. */
.form-label,
label.mx-label {
  display: block;
  margin-bottom: 6px;
  font-weight: var(--mx-font-weight-medium, 500);
  color: var(--mxb-ink);
  font-size: var(--mx-text-sm, 14px);
}

.input-group-text {
  background-color: var(--mxb-surface-alt);
  border: 1px solid var(--mxb-border);
  border-radius: var(--mx-radius-input, var(--mx-radius-sm, 6px));
  color: var(--mxb-ink-muted);
  font-weight: var(--mx-font-weight-medium, 500);
  min-height: var(--mx-input-height, 44px);
  display: flex;
  align-items: center;
}

/* ── 6. ALERTS ──────────────────────────────────────────────────────────────
   156 alerts. Soft tint + soft radius, matching the badge treatment.
   Bootstrap ships them with a 1px solid border and 4px radius. */
.alert {
  border: 1px solid transparent;
  border-radius: var(--mxb-radius-btn);
  padding: 14px 18px;
  font-size: var(--mx-text-base, 16px);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.alert-success {
  background-color: var(--mx-status-success-bg);
  border-color: var(--mx-status-success-bg);
  color: var(--mx-status-success);
}
.alert-danger {
  background-color: var(--mx-status-danger-bg);
  border-color: var(--mx-status-danger-bg);
  color: var(--mx-status-danger);
}
.alert-warning {
  background-color: var(--mx-status-pending-bg);
  border-color: var(--mx-status-pending-bg);
  color: var(--mx-status-pending);
}
.alert-info {
  background-color: var(--mx-status-info-bg);
  border-color: var(--mx-status-info-bg);
  color: var(--mx-status-info);
}

/* Alerts inside a card body should not double the border radius. */
.card .alert { border-radius: calc(var(--mxb-radius-btn) - 2px); }

/* ── 7. MODALS ──────────────────────────────────────────────────────────────
   56 modal-* usages. Spec §2 big rounded corners.
   ------------------------------------------------------------------------- */
.modal-content {
  border: 1px solid var(--mxb-border-soft);
  border-radius: var(--mxb-radius-card);
  box-shadow: var(--mx-shadow-2xl, 0 24px 48px -12px rgba(16, 24, 40, 0.18));
  overflow: hidden;
}

.modal-header,
.modal-footer {
  border-color: var(--mxb-border-soft);
  padding: var(--mx-space-5, 20px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal-header { background-color: transparent; }
.modal-footer { background-color: var(--mxb-surface-alt); }

.modal-title { font-weight: var(--mx-font-weight-semibold, 600); color: var(--mxb-ink); }

.modal-backdrop.show { opacity: 0.45; }
.modal-backdrop { background-color: var(--mx-ink-deep, #0b1220); }

/* ── 8. INPUT GROUPS ────────────────────────────────────────────────────────
   A rounded input in a Bootstrap 4 input-group loses its radius on the
   inner edges — re-cut them. */
.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child),
.input-group > .input-group-text:not(:first-child) { border-top-left-radius: 0; }
.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child),
.input-group > .input-group-text:not(:last-child) { border-top-right-radius: 0; }

/* ── 9. PRINT ───────────────────────────────────────────────────────────────
   Prescription / invoice / lab-report PDF templates must stay ink-efficient.
   Bridging .btn/.card in a print view would dump tinted blocks into the PDF.
   ------------------------------------------------------------------------- */
@media print {
  .btn,
  .card,
  .alert,
  .badge,
  .table thead th { box-shadow: none !important; }
  .card { border: 1px solid #d0d5dd !important; }
  .alert { border-color: #d0d5dd !important; }
}