/**
 * IMS Phase 1 — global primitives (Bootstrap 4 / AdminLTE visual layer).
 * Scoped where needed; relies on ims-tokens.css.
 */

body.ims-app,
body.login-page {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ——— Buttons ——— */
.btn {
  border-radius: var(--radius-md);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.btn-sm {
  min-height: var(--control-height-sm);
  padding: 0.25rem 0.65rem;
  font-size: var(--text-xs);
}

.btn:not(.btn-sm):not(.btn-lg) {
  min-height: var(--control-height-md);
}

.btn-lg {
  min-height: var(--control-height-lg);
  border-radius: var(--radius-lg);
}

.btn-primary {
  color: var(--text-on-accent) !important;
  background: linear-gradient(180deg, var(--accent-bright) 0%, var(--accent) 45%, var(--accent-deep) 100%) !important;
  border-color: var(--accent-deep) !important;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover,
.btn-primary:focus {
  color: var(--text-on-accent) !important;
  box-shadow: 0 4px 12px var(--accent-glow-soft);
  border-color: var(--accent-bright) !important;
}

.btn-primary:focus {
  box-shadow: var(--focus-ring) !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
  opacity: 0.55;
  filter: none;
  cursor: not-allowed;
}

.btn-secondary {
  color: var(--text) !important;
  background: var(--bg-panel) !important;
  border-color: var(--line-strong) !important;
}

.btn-secondary:hover {
  background: var(--bg-hover) !important;
  border-color: var(--line-strong) !important;
  color: var(--text) !important;
}

.btn-outline-secondary {
  color: var(--text-secondary) !important;
  border-color: var(--line-strong) !important;
  background: transparent !important;
}

.btn-outline-secondary:hover {
  color: var(--text) !important;
  background: var(--bg-hover) !important;
  border-color: var(--line) !important;
}

.btn-outline-primary {
  color: var(--accent-bright) !important;
  border-color: rgba(232, 148, 46, 0.45) !important;
  background: transparent !important;
}

.btn-outline-primary:hover {
  color: var(--text-on-accent) !important;
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
}

.btn-outline-info {
  color: var(--text-secondary) !important;
  border-color: var(--line-strong) !important;
  background: transparent !important;
}

.btn-outline-info:hover {
  color: var(--text) !important;
  background: var(--bg-hover) !important;
}

.btn-outline-warning {
  color: var(--warning) !important;
  border-color: rgba(251, 191, 36, 0.45) !important;
  background: transparent !important;
}

.btn-outline-warning:hover {
  color: var(--text) !important;
  background: rgba(251, 191, 36, 0.12) !important;
}

.btn-outline-dark {
  color: var(--text) !important;
  border-color: var(--line-strong) !important;
  background: transparent !important;
}

html[data-theme="light"] .btn-outline-dark:hover {
  background: var(--bg-hover) !important;
}

.btn-danger,
.btn-outline-danger {
  border-radius: var(--radius-md);
}

.btn-danger {
  background: var(--danger) !important;
  border-color: color-mix(in srgb, var(--danger) 85%, #000) !important;
  color: #fff !important;
}

.btn-outline-danger {
  color: var(--danger) !important;
  border-color: color-mix(in srgb, var(--danger) 55%, transparent) !important;
}

.btn-outline-danger:hover {
  background: color-mix(in srgb, var(--danger) 15%, transparent) !important;
  color: var(--danger) !important;
}

.btn-link {
  color: var(--accent-bright) !important;
}

.btn-link:hover {
  color: var(--accent) !important;
}

/* ——— Form controls ——— */
.form-control,
.custom-select {
  color: var(--text);
  background-color: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  min-height: var(--control-height-md);
  font-size: var(--text-sm);
}

.form-control:focus,
.custom-select:focus {
  color: var(--text);
  background-color: var(--bg-input);
  border-color: var(--border-input-focus);
  box-shadow: var(--focus-ring);
}

.form-control::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.form-control:disabled,
.custom-select:disabled {
  background-color: var(--bg-disabled);
  color: var(--text-disabled);
  cursor: not-allowed;
  opacity: 1;
}

/* Bootstrap sets readonly controls to light gray; keep theme-safe surfaces. */
.form-control[readonly] {
  background-color: var(--bg-input) !important;
  color: var(--text) !important;
  border-color: var(--border-input) !important;
  opacity: 1;
  -webkit-text-fill-color: var(--text);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: var(--danger);
}

.invalid-feedback {
  color: var(--danger);
  font-size: var(--text-xs);
}

.input-group-text {
  color: var(--text-secondary);
  background: var(--bg-panel-2);
  border-color: var(--border-input);
}

/* ——— Checks / radios ——— */
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--accent);
  border-color: var(--accent-deep);
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: var(--focus-ring);
}

.custom-control-label {
  color: var(--text-secondary);
}

/* ——— Cards ——— */
.card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card-header {
  background: var(--bg-panel-2);
  border-bottom-color: var(--line);
  color: var(--text);
  font-weight: 600;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

.card-title {
  font-size: var(--text-base);
  letter-spacing: var(--tracking-tight);
}

.card-outline.card-primary {
  border-color: rgba(232, 148, 46, 0.35);
}

.card-outline.card-primary .card-header {
  border-bottom-color: var(--line);
  color: var(--text);
}

.card-outline.card-secondary {
  border-color: var(--line);
}

/* ——— Tables ——— */
.table {
  color: var(--text);
}

.table thead th {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 600;
  border-bottom: 1px solid var(--line-strong);
  border-top: none;
  vertical-align: middle;
}

/* Bootstrap's .thead-light is too bright for dark mode; keep it token-based. */
.table thead.thead-light th {
  background-color: var(--bg-soft) !important;
  color: var(--text-secondary) !important;
  border-color: var(--line-strong) !important;
}

.table td {
  border-color: var(--line);
  vertical-align: middle;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--bg-hover);
}

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

.table-hover tbody tr:hover > th,
.table-hover tbody tr:hover > td {
  color: inherit;
}

.table-bordered,
.table-bordered td,
.table-bordered th {
  border-color: var(--line);
}

/* ——— Badges ——— */
.badge {
  font-weight: 600;
  font-size: var(--text-xs);
  padding: 0.35em 0.55em;
  border-radius: var(--radius-sm);
}

.badge-primary {
  background: var(--accent-deep) !important;
  color: var(--text-on-accent) !important;
}

.badge-secondary {
  background: var(--bg-panel-2) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--line);
}

.badge-success {
  background: color-mix(in srgb, var(--success) 22%, var(--bg-elevated)) !important;
  color: var(--success) !important;
}

.badge-danger {
  background: color-mix(in srgb, var(--danger) 22%, var(--bg-elevated)) !important;
  color: var(--danger) !important;
}

.badge-warning {
  background: color-mix(in srgb, var(--warning) 25%, var(--bg-elevated)) !important;
  color: var(--warning) !important;
}

.badge-info {
  background: var(--bg-panel-2) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--line);
}

/* ——— Alerts ——— */
.alert {
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}

.alert-success {
  background: color-mix(in srgb, var(--success) 12%, var(--bg-elevated));
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
}

.alert-danger {
  background: color-mix(in srgb, var(--danger) 12%, var(--bg-elevated));
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}

.alert-warning {
  background: color-mix(in srgb, var(--warning) 12%, var(--bg-elevated));
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
}

.alert-info {
  background: var(--bg-panel);
  color: var(--text-secondary);
  border-color: var(--line-strong);
}

.alert .close {
  color: inherit;
  text-shadow: none;
  opacity: 0.7;
}

/* ——— Modals ——— */
.modal-content {
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.modal-header {
  border-bottom-color: var(--line);
  color: var(--text);
}

.modal-footer {
  border-top-color: var(--line);
}

.modal-title {
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}

.close {
  color: var(--text-muted);
  text-shadow: none;
  opacity: 1;
}

.close:hover {
  color: var(--text);
}

/* ——— Pagination ——— */
.page-link {
  background: var(--bg-panel);
  border-color: var(--line);
  color: var(--text-secondary);
}

.page-item.active .page-link {
  background: var(--accent);
  border-color: var(--accent-deep);
  color: var(--text-on-accent);
}

.page-link:hover {
  background: var(--bg-hover);
  color: var(--text);
}

/* ——— List groups ——— */
.list-group-item {
  background: var(--bg-panel);
  border-color: var(--line);
  color: var(--text);
}

.list-group-item.active {
  background: var(--accent-soft);
  border-color: rgba(232, 148, 46, 0.35);
  color: var(--accent-bright);
}

.list-group-item:hover {
  background: var(--bg-hover);
}

/* ——— Small box (dashboard widgets) ——— */
.small-box {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
}

.small-box.bg-info {
  background: var(--bg-panel-2) !important;
  color: var(--text) !important;
}

.small-box.bg-info .inner h3,
.small-box.bg-info .inner p {
  color: var(--text) !important;
}

.small-box.bg-info .icon {
  color: var(--info) !important;
}

.small-box.bg-success {
  background: color-mix(in srgb, var(--success) 18%, var(--bg-elevated)) !important;
}

.small-box.bg-success .inner h3,
.small-box.bg-success .inner p {
  color: var(--text) !important;
}

.small-box.bg-warning {
  background: color-mix(in srgb, var(--warning) 22%, var(--bg-elevated)) !important;
}

.small-box.bg-warning .inner h3,
.small-box.bg-warning .inner p {
  color: var(--text) !important;
}

.small-box.bg-danger {
  background: color-mix(in srgb, var(--danger) 20%, var(--bg-elevated)) !important;
}

.small-box.bg-secondary {
  background: var(--bg-panel) !important;
}

.small-box .small-box-footer {
  background: rgba(0, 0, 0, 0.15);
  color: var(--text-secondary) !important;
}

html[data-theme="light"] .small-box .small-box-footer {
  background: rgba(0, 0, 0, 0.06);
}

/* ——— Bootstrap utility remaps (legacy markup) ——— */
.bg-white {
  background-color: var(--bg-elevated) !important;
}

.bg-light {
  background-color: var(--bg-panel-2) !important;
}

html[data-theme="light"] .card {
  border-color: var(--line-strong);
  box-shadow: 0 1px 3px rgba(34, 27, 18, 0.08);
}

html[data-theme="light"] .card-header {
  background: #f2eadf;
  border-bottom-color: var(--line-strong);
}

html[data-theme="light"] .form-control,
html[data-theme="light"] .custom-select {
  border-color: var(--border-input);
  background: #fffdfa;
}

html[data-theme="light"] .table thead th {
  color: #332d24;
  border-bottom-color: var(--line-strong);
}

html[data-theme="light"] .table td {
  border-color: var(--line);
}

html[data-theme="light"] .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(36, 29, 20, 0.03);
}

/* ——— Text utilities remap ——— */
.text-muted {
  color: var(--text-muted) !important;
}

.text-primary {
  color: var(--accent-bright) !important;
}

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

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

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

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

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

/* ——— Dropdowns ——— */
.dropdown-menu {
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.dropdown-item {
  color: var(--text-secondary);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--bg-hover);
  color: var(--text);
}

.dropdown-divider {
  border-top-color: var(--line);
}

/* ——— Empty state helper (Phase 2 pages can use) ——— */
.ims-empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--text-muted);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
}

.ims-empty strong {
  color: var(--text-secondary);
  display: block;
  margin-bottom: var(--space-2);
}