/* ==================================================
   BOOTSTRAP COLOR SYSTEM OVERRIDE
================================================== */

:root {

  /* ===== Extended Palette ===== */
  --bs-brand: #800000;
  --bs-brand-rgb: 168, 35, 35;

  /* ACCENT */
  --bs-accent: #D27685;
  --bs-accent-rgb: 190, 91, 80;

  /* NEUTRAL */
  --bs-neutral: #E0A75E;
  --bs-neutral-rgb: 224, 167, 94;

  /* SURFACE */
  --bs-surface: #EBE8DB;
  --bs-surface-rgb: 235, 232, 219;
}

/* Background */
.bg-brand { background-color: var(--bs-brand) !important; }
.bg-accent { background-color: var(--bs-accent) !important; }
.bg-neutral { background-color: var(--bs-neutral) !important; }
.bg-surface { background-color: var(--bs-surface) !important; }

/* Text */
.text-brand { color: var(--bs-brand) !important; }
.text-accent { color: var(--bs-accent) !important; }
.text-neutral { color: var(--bs-neutral) !important; }
.text-surface { color: var(--bs-surface) !important; }

/* Border */
.border-brand { border-color: var(--bs-brand) !important; }
.border-accent { border-color: var(--bs-accent) !important; }
.border-neutral { border-color: var(--bs-neutral) !important; }
.border-surface { border-color: var(--bs-surface) !important; }

/* ================================
   BUTTON SYSTEM EXTENSION
================================ */

/* BRAND */
.btn-brand {
  --bs-btn-bg: var(--bs-brand);
  --bs-btn-border-color: var(--bs-brand);

  --bs-btn-color: var(--bs-white);
  --bs-btn-hover-color: var(--bs-white);

  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-brand) 85%, var(--bs-lighten));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-brand) 85%, var(--bs-lighten));

  --bs-btn-active-bg: color-mix(in srgb, var(--bs-brand) 75%, var(--bs-lighten));
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-brand) 75%, var(--bs-lighten));

  --bs-btn-disabled-bg: color-mix(in srgb, var(--bs-brand) 60%, var(--bs-white));
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--bs-brand) 60%, var(--bs-white));
  --bs-btn-disabled-color: var(--bs-white);

  --bs-btn-disabled-opacity: 1;
}


/* ACCENT */
.btn-accent {
  --bs-btn-bg: var(--bs-accent);
  --bs-btn-border-color: var(--bs-accent);

  --bs-btn-color: var(--bs-white);
  --bs-btn-hover-color: var(--bs-white);

  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-accent) 85%, var(--bs-black));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-accent) 85%, var(--bs-darken));

  --bs-btn-active-bg: color-mix(in srgb, var(--bs-accent) 75%, var(--bs-black));
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-accent) 75%, var(--bs-darken));

  --bs-btn-disabled-bg: color-mix(in srgb, var(--bs-accent) 60%, var(--bs-white));
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--bs-accent) 60%, var(--bs-white));
  --bs-btn-disabled-color: var(--bs-white);

  --bs-btn-disabled-opacity: 1;
}


/* NEUTRAL */
.btn-neutral {
  --bs-btn-bg: var(--bs-neutral);
  --bs-btn-border-color: var(--bs-neutral);

  --bs-btn-color: var(--bs-dark);
  --bs-btn-hover-color: var(--bs-black);

  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-neutral) 85%, var(--bs-lighten));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-neutral) 85%, var(--bs-lighten));

  --bs-btn-active-bg: color-mix(in srgb, var(--bs-neutral) 75%, var(--bs-lighten));
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-neutral) 75%, var(--bs-lighten));

  --bs-btn-disabled-bg: color-mix(in srgb, var(--bs-neutral) 60%, var(--bs-white));
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--bs-neutral) 60%, var(--bs-white));
  --bs-btn-disabled-color: var(--bs-secondary);

  --bs-btn-disabled-opacity: 1;
}


/* SURFACE (light button) */
.btn-surface {
  --bs-btn-bg: var(--bs-surface);
  --bs-btn-border-color: #E5E7EB;

  --bs-btn-color: #111827;
  --bs-btn-hover-color: #111827;
  --bs-btn-active-color: #111827;
  --bs-btn-disabled-color: #6B7280;

  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-surface) 85%, var(--bs-lighten));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-surface) 85%, var(--bs-lighten));

  --bs-btn-active-bg: color-mix(in srgb, var(--bs-surface) 75%, var(--bs-lighten));
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-surface) 75%, var(--bs-lighten));

  --bs-btn-disabled-bg: color-mix(in srgb, var(--bs-surface) 60%, var(--bs-white));
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--bs-surface) 60%, var(--bs-white));
  --bs-btn-disabled-color: var(--bs-secondary);

  --bs-btn-disabled-opacity: 1;
}


.badge-brand {
  background-color: var(--bs-brand);
  color: #fff;
}

.badge-accent {
  background-color: var(--bs-accent);
  color: #fff;
}

.badge-neutral {
  background-color: var(--bs-neutral);
  color: #fff;
}

.badge-surface {
  background-color: var(--bs-surface);
  color: #111827;
}

.alert-brand {
  --bs-alert-bg: rgba(var(--bs-brand-rgb), 0.1);
  --bs-alert-border-color: rgba(var(--bs-brand-rgb), 0.3);
  --bs-alert-color: var(--bs-brand);
}

.alert-accent {
  --bs-alert-bg: rgba(var(--bs-accent-rgb), 0.1);
  --bs-alert-border-color: rgba(var(--bs-accent-rgb), 0.3);
  --bs-alert-color: var(--bs-accent);
}

.alert-neutral {
  --bs-alert-bg: rgba(var(--bs-neutral-rgb), 0.1);
  --bs-alert-border-color: rgba(var(--bs-neutral-rgb), 0.3);
  --bs-alert-color: var(--bs-neutral);
}

.link-brand {
  color: var(--bs-brand);
}

.link-brand:hover {
  color: #8f1e1e;
}

.link-accent {
  color: var(--bs-accent);
}

.link-accent:hover {
  color: #8f2102;
}


/* ===========================
   Data Placeholder Skeleton
=========================== */

[data-placeholder]:empty {
  display: inline-block;
  min-width: 80px;
  height: 0.8em;
  vertical-align: middle;
  border-radius: 3px;
  background: linear-gradient(90deg, #ddd 25%, #eee 50%, #ddd 75%);
  background-size: 200% 100%;
  animation: ph-shimmer 1.4s infinite linear;
}

@keyframes ph-shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}


/* ─── Responsive List ──────────────────────────────────── */

.rl-hdr { display: none; }

/* Mobile */
@media (max-width: 767.98px) {
  .rl-row {
    display: block;
    padding: .625rem 0;
    border-bottom: 1px solid var(--bs-border-color);
  }
  .rl-chk { padding: 0 .5rem .375rem; }
  .rl-cell {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .15rem .5rem;
    font-size: .875rem;
  }
  .rl-cell[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--bs-secondary-color);
    flex: 0 0 7rem;
    font-size: .8125rem;
    padding-top: .1rem;
  }
  .rl-act {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    padding: .375rem .5rem 0;
  }
}

/* Desktop */
@media (min-width: 768px) {
  .rl-hdr {
    display: flex;
    align-items: center;
    border-bottom: 2px solid var(--bs-border-color);
    padding: .25rem 0;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
  }
  .rl-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--bs-border-color);
    padding: .5rem 0;
  }
  .rl-chk  { padding: 0 .5rem; }
  .rl-cell { padding: 0 .5rem; }
  .rl-act  { display: flex; gap: .25rem; padding: 0 .5rem; }
  .rl-w-auto { flex: 0 0 auto; }
  .rl-w-fill { flex: 1 1 0; min-width: 0; }
  .rl-w-xs   { flex: 0 0 4.5rem; }
  .rl-w-sm   { flex: 0 0 7rem; }
  .rl-w-md   { flex: 0 0 10rem; }
  .rl-w-lg   { flex: 0 0 14rem; }
}


/* ─── Avatar ───────────────────────────────────────────── */
.ui-avatar {
  --ua-icon-size: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  vertical-align: middle;
  background-color: var(--bs-secondary-bg, #e9ecef);
  color: var(--bs-secondary-color, #6c757d);
}
.ui-avatar > img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ui-avatar > img[src]:not([src=""]) {
  display: block;
}
.ui-avatar > i {
  font-size: var(--ua-icon-size);
}
.ui-avatar > img[src]:not([src=""]) ~ i {
  display: none;
}