/* ==========================================================================
   Partner Certification Mission Control — Twilio Brand Overrides
   ==========================================================================
   Overrides Bootstrap 5.2.3 / SB Admin defaults with Twilio Paste design
   tokens. See: https://paste.twilio.design/tokens/list
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties — Twilio Paste Token Mapping
   -------------------------------------------------------------------------- */

:root {
  /* ---- Brand colors ---- */
  --twilio-brand-dark: #121C2D;
  --twilio-red: #EF223A;
  --twilio-saffron: #F2BE5A;
  --twilio-sky: #51A9E3;
  --twilio-mint: #6ADDB2;

  /* ---- Semantic color overrides ---- */
  --bs-primary: #006DFA;
  --bs-primary-rgb: 0, 109, 250;
  --bs-success: #14B053;
  --bs-success-rgb: 20, 176, 83;
  --bs-danger: #C72323;
  --bs-danger-rgb: 199, 35, 35;
  --bs-warning: #F47C22;
  --bs-warning-rgb: 244, 124, 34;
  --bs-info: #3ACEFA;
  --bs-info-rgb: 58, 206, 250;
  --bs-light: #F4F4F6;
  --bs-light-rgb: 244, 244, 246;
  --bs-dark: #121C2D;
  --bs-dark-rgb: 18, 28, 45;

  /* ---- Text colors ---- */
  --bs-body-color: #121C2D;
  --bs-body-color-rgb: 18, 28, 45;
  --twilio-text-weak: #606B85;
  --twilio-text-weaker: #8B93AA;

  /* ---- Link colors ---- */
  --bs-link-color: #0263E0;
  --bs-link-hover-color: #0E3E92;

  /* ---- Backgrounds ---- */
  --bs-body-bg: #FFFFFF;
  --twilio-bg-surface: #F4F4F6;
  --twilio-bg-info-weakest: #F4F9FF;

  /* ---- Borders ---- */
  --bs-border-color: #CACDD8;
  --twilio-border-weak: #CACDD8;
  --twilio-border-weaker: #E1E3EA;

  /* ---- Border radius (RAMP: 8px) ---- */
  --bs-border-radius: 0.5rem;
  --bs-border-radius-sm: 0.375rem;
  --bs-border-radius-lg: 0.75rem;

  /* ---- Typography ---- */
  --bs-body-font-family: "Twilio Sans Text", Inter, Roboto, system-ui,
    -apple-system, "Segoe UI", Arial, sans-serif;
  --bs-font-monospace: "Twilio Sans Mono", Courier, monospace;

  /* ---- Notification (red-500) ---- */
  --twilio-notification: #DB132A;
}

/* --------------------------------------------------------------------------
   2. Typography
   -------------------------------------------------------------------------- */

h1, .h1 {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--bs-body-color);
}

h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-weight: 600;
  color: var(--bs-body-color);
}

.text-muted {
  color: var(--twilio-text-weaker) !important;
}

/* --------------------------------------------------------------------------
   3. Links
   -------------------------------------------------------------------------- */

a {
  color: var(--bs-link-color);
}

a:hover {
  color: var(--bs-link-hover-color);
}

/* --------------------------------------------------------------------------
   4. Buttons — Twilio palette overrides
   -------------------------------------------------------------------------- */

.btn-primary {
  --bs-btn-bg: #006DFA;
  --bs-btn-border-color: #006DFA;
  --bs-btn-hover-bg: #1953B9;
  --bs-btn-hover-border-color: #1953B9;
  --bs-btn-active-bg: #0E3E92;
  --bs-btn-active-border-color: #0E3E92;
  --bs-btn-disabled-bg: #006DFA;
  --bs-btn-disabled-border-color: #006DFA;
  font-weight: 600;
}

.btn-success {
  --bs-btn-bg: #14B053;
  --bs-btn-border-color: #14B053;
  --bs-btn-hover-bg: #0B602D;
  --bs-btn-hover-border-color: #0B602D;
  font-weight: 600;
}

.btn-danger {
  --bs-btn-bg: #C72323;
  --bs-btn-border-color: #C72323;
  --bs-btn-hover-bg: #9B1B1B;
  --bs-btn-hover-border-color: #9B1B1B;
  font-weight: 600;
}

.btn-warning {
  --bs-btn-bg: #F47C22;
  --bs-btn-border-color: #F47C22;
  --bs-btn-hover-bg: #C66118;
  --bs-btn-hover-border-color: #C66118;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  font-weight: 600;
}

.btn-outline-primary {
  --bs-btn-color: #006DFA;
  --bs-btn-border-color: #006DFA;
  --bs-btn-hover-bg: #006DFA;
  --bs-btn-hover-border-color: #006DFA;
  --bs-btn-active-bg: #1953B9;
  --bs-btn-active-border-color: #1953B9;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   5. Cards — RAMP flat style
   -------------------------------------------------------------------------- */

.card {
  --bs-card-border-color: var(--twilio-border-weaker);
  --bs-card-cap-bg: transparent;
  box-shadow: none;
}

.card-header {
  font-weight: 600;
  border-bottom-color: var(--twilio-border-weaker);
}

/* --------------------------------------------------------------------------
   6. Tables
   -------------------------------------------------------------------------- */

.table {
  --bs-table-border-color: var(--twilio-border-weaker);
}

/* --------------------------------------------------------------------------
   7. Alerts — Twilio semantic colors
   -------------------------------------------------------------------------- */

.alert-success {
  --bs-alert-bg: #E8F8EE;
  --bs-alert-border-color: #14B053;
  --bs-alert-color: #0B602D;
}

.alert-danger {
  --bs-alert-bg: #FFF1F3;
  --bs-alert-border-color: #C72323;
  --bs-alert-color: #C72323;
}

.alert-warning {
  --bs-alert-bg: #FFF5EB;
  --bs-alert-border-color: #F47C22;
  --bs-alert-color: #8A4106;
}

.alert-info {
  --bs-alert-bg: var(--twilio-bg-info-weakest);
  --bs-alert-border-color: #3ACEFA;
  --bs-alert-color: #0B2A60;
}

/* --------------------------------------------------------------------------
   8. Badges — Twilio palette
   -------------------------------------------------------------------------- */

.badge.bg-success {
  background-color: #14B053 !important;
}

.badge.bg-danger {
  background-color: #C72323 !important;
}

.badge.bg-warning {
  background-color: #F47C22 !important;
  color: #fff !important;
}

.badge.bg-secondary {
  background-color: var(--twilio-text-weaker) !important;
}

/* --------------------------------------------------------------------------
   9. Forms — Twilio borders and focus
   -------------------------------------------------------------------------- */

.form-control,
.form-select {
  border-color: var(--twilio-border-weak);
}

.form-control:focus,
.form-select:focus {
  border-color: #006DFA;
  box-shadow: 0 0 0 0.2rem rgba(0, 109, 250, 0.25);
}

/* --------------------------------------------------------------------------
   10. Top Navigation — Twilio Brand Dark
   -------------------------------------------------------------------------- */

.sb-topnav.navbar-dark {
  background-color: var(--twilio-brand-dark) !important;
}

.sb-topnav .navbar-brand {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   11. Sidebar — Twilio Paste inverse surfaces
   -------------------------------------------------------------------------- */

.sb-sidenav-dark {
  background-color: var(--twilio-brand-dark);
}

.sb-sidenav-dark .sb-sidenav-menu .sb-sidenav-menu-heading {
  color: var(--twilio-text-weaker);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sb-sidenav-dark .sb-sidenav-menu .nav-link {
  color: #CACDD8;
}

.sb-sidenav-dark .sb-sidenav-menu .nav-link .sb-nav-link-icon {
  color: #8891AA;
}

.sb-sidenav-dark .sb-sidenav-menu .nav-link:hover {
  color: #FFFFFF;
  background-color: #1F304C;
}

.sb-sidenav-dark .sb-sidenav-menu .nav-link.active {
  color: #FFFFFF;
  background-color: #394762;
}

.sb-sidenav-dark .sb-sidenav-menu .nav-link.active .sb-nav-link-icon {
  color: #FFFFFF;
}

.sb-sidenav-dark .sb-sidenav-footer {
  background-color: #1F304C;
  color: #CACDD8;
  font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   12. Auth Layout — Brand Dark background
   -------------------------------------------------------------------------- */

#layoutAuthentication {
  background-color: var(--twilio-brand-dark);
  min-height: 100vh;
}

/* Auth card — flat RAMP style */
#layoutAuthentication .card {
  border: 1px solid var(--twilio-border-weaker);
  box-shadow: none;
}

#layoutAuthentication .card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--twilio-border-weaker);
}

#layoutAuthentication .card-header h3 {
  font-weight: 600;
}

#layoutAuthentication .card-footer {
  background-color: transparent;
  border-top: 1px solid var(--twilio-border-weaker);
}

/* Auth footer */
#layoutAuthentication_footer .bg-light {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

#layoutAuthentication_footer .text-muted {
  color: #8891AA !important;
}

#layoutAuthentication_footer a {
  color: #CACDD8;
}

#layoutAuthentication_footer a:hover {
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   13. Breadcrumbs
   -------------------------------------------------------------------------- */

.breadcrumb {
  --bs-breadcrumb-divider-color: var(--twilio-text-weaker);
  --bs-breadcrumb-item-active-color: var(--twilio-text-weak);
}

/* --------------------------------------------------------------------------
   14. Utility overrides
   -------------------------------------------------------------------------- */

.bg-light {
  background-color: var(--twilio-bg-surface) !important;
}

/* Scrollbar styling for sidebar */
.sb-sidenav-menu::-webkit-scrollbar {
  width: 6px;
}

.sb-sidenav-menu::-webkit-scrollbar-thumb {
  background-color: #394762;
  border-radius: 3px;
}

.sb-sidenav-menu::-webkit-scrollbar-track {
  background-color: transparent;
}

/* --------------------------------------------------------------------------
   15. Dashboard stat icons
   -------------------------------------------------------------------------- */

.stat-icon {
  width: 48px;
  height: 48px;
}

/* --------------------------------------------------------------------------
   16. Images
   -------------------------------------------------------------------------- */

img {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   17. htmx request indicators
   --------------------------------------------------------------------------
   htmx hides indicators with opacity/visibility, so they still reserve layout
   space at rest. Toggle display instead, and let .htmx-request-hide swap out
   for the indicator while the request is in flight. */

.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator {
  display: inline-block;
}

.htmx-request .htmx-request-hide {
  display: none;
}