/* ============================================================
   BOOTSTRAP 5.1 – DYNAMIC DESIGN SYSTEM (COLOR & SHAPE)
   ============================================================ */

/* ============================================================
   1. ROOT TOKENS (HANYA WARNA UTAMA)
   ============================================================ */
:root {

  /* ===== BASE COLORS (ONLY THESE CHANGE) ===== */
  /* --bs-primary: #1a3a5f;
  --bs-secondary: #4a4a4a;
  --bs-success: #1e4d2b;
  --bs-info: #007a8a;
  --bs-warning: #c5a021;
  --bs-danger: #8b0000;
  --bs-light: #f8f7f2;
  --bs-dark: #121212;
  --bs-white: #ffffff; */

  /* ===== RGB REQUIRED BY BOOTSTRAP ===== */
  --bs-primary-rgb: 26, 58, 95;
  --bs-secondary-rgb: 74, 74, 74;
  --bs-success-rgb: 30, 77, 43;
  --bs-info-rgb: 0, 122, 138;
  --bs-warning-rgb: 197, 160, 33;
  --bs-danger-rgb: 139, 0, 0;
  --bs-dark-rgb: 18, 18, 18;

  /* ===== SHAPE SYSTEM ===== */
  --bs-border-radius: 2px;
  --bs-border-radius-sm: 2px;
  --bs-border-radius-lg: 2px;
  --bs-border-radius-xl: 2px;
  --bs-border-radius-pill: 2px;

  /* ============================================================
     2. AUTO-GENERATED COLOR STATES (DERIVED)
     ============================================================ */

  /* PRIMARY */
  --bs-primary-soft: rgba(var(--bs-primary-rgb), 0.08) !important;
  --bs-primary-hover: rgba(var(--bs-primary-rgb), 0.85) !important;
  --bs-primary-active: rgba(var(--bs-primary-rgb), 0.7) !important;
  --bs-primary-border: rgba(var(--bs-primary-rgb), 0.25) !important;

  /* SECONDARY */
  --bs-secondary-soft: rgba(var(--bs-secondary-rgb), 0.08) !important;
  --bs-secondary-hover: rgba(var(--bs-secondary-rgb), 0.85) !important;
  --bs-secondary-active: rgba(var(--bs-secondary-rgb), 0.7) !important;
  --bs-secondary-border: rgba(var(--bs-secondary-rgb), 0.25) !important;

  /* SUCCESS */
  --bs-success-soft: rgba(var(--bs-success-rgb), 0.08) !important;
  --bs-success-hover: rgba(var(--bs-success-rgb), 0.85) !important;
  --bs-success-active: rgba(var(--bs-success-rgb), 0.7) !important;
  --bs-success-border: rgba(var(--bs-success-rgb), 0.25) !important;

  /* INFO */
  --bs-info-soft: rgba(var(--bs-info-rgb), 0.08) !important;
  --bs-info-hover: rgba(var(--bs-info-rgb), 0.85) !important;
  --bs-info-active: rgba(var(--bs-info-rgb), 0.7) !important;
  --bs-info-border: rgba(var(--bs-info-rgb), 0.25) !important;

  /* WARNING */
  --bs-warning-soft: rgba(var(--bs-warning-rgb), 0.18) !important;
  --bs-warning-hover: rgba(var(--bs-warning-rgb), 0.85) !important;
  --bs-warning-active: rgba(var(--bs-warning-rgb), 0.7) !important;
  --bs-warning-border: rgba(var(--bs-warning-rgb), 0.35) !important;

  /* DANGER */
  --bs-danger-soft: rgba(var(--bs-danger-rgb), 0.08) !important;
  --bs-danger-hover: rgba(var(--bs-danger-rgb), 0.85) !important;
  --bs-danger-active: rgba(var(--bs-danger-rgb), 0.7) !important;
  --bs-danger-border: rgba(var(--bs-danger-rgb), 0.25) !important;

  /* ===== LINKS & FOCUS ===== */
  --bs-link-color: var(--bs-primary) !important;
  --bs-link-hover-color: var(--bs-primary-hover) !important;
  --bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.25) !important;

  /* ===== BORDER ===== */
  --bs-border-color: rgba(0, 0, 0, 0.1) !important;

  /* ===== TABLE ===== */
  --table-accent-primary: var(--bs-primary-soft) !important;
  --table-accent-secondary: var(--bs-secondary-soft) !important;
  --table-accent-success: var(--bs-success-soft) !important;
  --table-accent-info: var(--bs-info-soft) !important;
  --table-accent-warning: var(--bs-warning-soft) !important;
  --table-accent-danger: var(--bs-danger-soft) !important;

  /* ===== CUSTOM TRANSITION ===== */
  --fid-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* ============================================================
   3. GLOBAL SHAPE CONSISTENCY
   ============================================================ */
.btn,
.form-control,
.form-select,
.card,
.modal-content,
.dropdown-menu,
.alert,
.list-group-item,
.accordion-item,
.toast,
.offcanvas,
.badge,
.progress,
.progress-bar {
  border-radius: var(--bs-border-radius) !important;
}

/* ============================================================
   4. BUTTON SYSTEM (FULLY DYNAMIC)
   ============================================================ */

.btn { --bs-btn-border-radius: var(--bs-border-radius); }
.btn:hover { filter: brightness(1.2); }

.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: var(--bs-white) !important; 
}

.btn-secondary {
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary-border) !important;
}

.btn-success {
  background-color: var(--bs-success) !important;
  border-color: var(--bs-success-border) !important;
}

.btn-info {
  background-color: var(--bs-info) !important;
  border-color: var(--bs-info-border) !important;
}

.btn-warning {
  background-color: var(--bs-warning) !important;
  border-color: var(--bs-warning-border) !important;
}

.btn-danger {
  background-color: var(--bs-danger) !important;
  border-color: var(--bs-danger-border) !important;
}

/* ============================================================
   5. BACKGROUND & TEXT UTILITIES
   ============================================================ */
.bg-primary   { background-color: var(--bs-primary) !important; }
.bg-secondary { background-color: var(--bs-secondary) !important; }
.bg-success   { background-color: var(--bs-success) !important; }
.bg-info      { background-color: var(--bs-info) !important; }
.bg-warning   { background-color: var(--bs-warning) !important; }
.bg-danger    { background-color: var(--bs-danger) !important; }

.text-primary   { color: var(--bs-primary) !important; }
.text-secondary { color: var(--bs-secondary) !important; }
.text-success   { color: var(--bs-success) !important; }
.text-info      { color: var(--bs-info) !important; }
.text-warning   { color: var(--bs-warning) !important; }
.text-danger    { color: var(--bs-danger) !important; }

/* ============================================================
   6. SURFACE & INTERACTIVE COMPONENTS
   ============================================================ */
.card,
.modal-content,
.dropdown-menu {
  border-radius: var(--bs-border-radius) !important;
  background-color: var(--bs-white) !important;
  border: 1px solid var(--bs-border-color) !important;
}

/* ============================================================
   7. ALERT SYSTEM (AUTO FOLLOW ROOT COLOR)
   ============================================================ */
.alert-primary   { background-color: var(--bs-primary-soft) !important;   border-color: var(--bs-primary-border) !important;   color: var(--bs-primary) !important; }
.alert-secondary { background-color: var(--bs-secondary-soft) !important; border-color: var(--bs-secondary-border) !important; color: var(--bs-secondary) !important; }
.alert-success   { background-color: var(--bs-success-soft) !important;   border-color: var(--bs-success-border) !important;   color: var(--bs-success) !important; }
.alert-info      { background-color: var(--bs-info-soft) !important;      border-color: var(--bs-info-border) !important;      color: var(--bs-info) !important; }
.alert-warning   { background-color: var(--bs-warning-soft) !important;   border-color: var(--bs-warning-border) !important;   color: var(--bs-dark) !important; }
.alert-danger    { background-color: var(--bs-danger-soft) !important;    border-color: var(--bs-danger-border) !important;    color: var(--bs-danger) !important; }

/* ============================================================
   8. BADGE, PROGRESS, TABLE
   ============================================================ */
.badge {
  border-radius: var(--bs-border-radius) !important;
}

.progress-bar {
  border-radius: var(--bs-border-radius) !important;
}

.table {
  border-color: var(--bs-border-color) !important;
}

.table-primary {
  --bs-table-bg: var(--table-accent-primary) !important;
  --bs-table-striped-bg: var(--table-accent-primary) !important;
}

.table-secondary {
  --bs-table-bg: var(--table-accent-secondary) !important;
  --bs-table-striped-bg: var(--table-accent-secondary) !important;
}

.table-success {
  --bs-table-bg: var(--table-accent-success) !important;
  --bs-table-striped-bg: var(--table-accent-success) !important;
}

.table-info {
  --bs-table-bg: var(--table-accent-info) !important;
  --bs-table-striped-bg: var(--table-accent-info) !important;
}

.table-warning {
  --bs-table-bg: var(--table-accent-warning) !important;
  --bs-table-striped-bg: var(--table-accent-warning) !important;
}

.table-danger {
  --bs-table-bg: var(--table-accent-danger) !important;
  --bs-table-striped-bg: var(--table-accent-danger) !important;
}