/* ============================================================
   SRKR Design System — Core Tokens & Utilities
   Font: Inter + Poppins via Google Fonts
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

:root {

  /* ==================================================
     BRAND
  ================================================== */

  --bs-primary:         #8c1532;
  --bs-primary-hover:   #a81c3c;
  --bs-primary-active:  #6e0f27;
  --bs-primary-soft:    #f9eef1;

  --bs-secondary:       #344054;
  --bs-secondary-soft:  #f2f4f7;

  /* ==================================================
     BACKGROUNDS
  ================================================== */

  --bs-body-bg:         #f8f9fb;
  --bs-surface:         #ffffff;
  --bs-surface-alt:     #f5f7fa;
  --bs-surface-hover:   #eef2f6;

  /* ==================================================
     TEXT
  ================================================== */

  --bs-text:            #101828;
  --bs-text-secondary:  #475467;
  --bs-text-muted:      #667085;
  --bs-text-disabled:   #98a2b3;
  --bs-text-white:      #ffffff;

  /* ==================================================
     STATUS
  ================================================== */

  --bs-success:         #16a34a;
  --bs-success-bg:      #ecfdf3;

  --bs-warning:         #d97706;
  --bs-warning-bg:      #fff7ed;

  --bs-danger:          #dc2626;
  --bs-danger-bg:       #fef2f2;

  --bs-info:            #0284c7;
  --bs-info-bg:         #f0f9ff;

  /* ==================================================
     BORDERS
  ================================================== */

  --bs-border-color:    #e4e7ec;
  --bs-border-light:    #f2f4f7;

  /* ==================================================
     BORDER RADIUS — Sharp (0)
  ================================================== */

  --bs-radius:          0;
  --bs-radius-sm:       0;
  --bs-radius-lg:       0;
  --bs-radius-xl:       0;

  /* ==================================================
     SHADOWS
  ================================================== */

  --bs-shadow-xs:       0 1px 2px rgba(16,24,40,.03);
  --bs-shadow-sm:       0 2px 8px rgba(16,24,40,.05);
  --bs-shadow:          0 6px 18px rgba(16,24,40,.06);
  --bs-shadow-lg:       0 12px 30px rgba(16,24,40,.08);

  /* ==================================================
     TYPOGRAPHY
  ================================================== */

  --bs-font-family:
    "Inter",
    "Poppins",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --bs-font-size-xs:    .75rem;
  --bs-font-size-sm:    .875rem;
  --bs-font-size:       1rem;
  --bs-font-size-lg:    1.125rem;
  --bs-font-size-xl:    1.25rem;
  --bs-font-size-2xl:   1.5rem;

  --bs-font-weight-normal:    400;
  --bs-font-weight-medium:    500;
  --bs-font-weight-semibold:  600;
  --bs-font-weight-bold:      700;

  --bs-line-height:     1.5;

  /* ==================================================
     SPACING
  ================================================== */

  --bs-spacing-xs:      .5rem;
  --bs-spacing-sm:      1rem;
  --bs-spacing-md:      1.5rem;
  --bs-spacing-lg:      2rem;
  --bs-spacing-xl:      3rem;

  /* ==================================================
     TRANSITIONS
  ================================================== */

  --bs-transition-fast: .12s ease;
  --bs-transition-base: .2s ease;
  --bs-transition-slow: .32s ease;

  /* ==================================================
     LEGACY INTERNAL BINDINGS (backward compat)
  ================================================== */

  --primary:            var(--bs-primary);
  --primary-dk:         var(--bs-primary-active);
  --primary-lt:         var(--bs-primary-hover);
  --primary-color:      var(--bs-primary);
  --bg-main:            var(--bs-body-bg);
  --bg-card:            var(--bs-surface);
  --border-color:       var(--bs-border-color);
  --text-primary:       var(--bs-text);
  --text-secondary:     var(--bs-text-secondary);
  --font-primary:       var(--bs-font-family);
  --transition-smooth:  var(--bs-transition-base);
  --accent-success:     var(--bs-success);
  --accent-warning:     var(--bs-warning);
  --accent-danger:      var(--bs-danger);
}

/* ============================================================
   BASE
   ============================================================ */

html {
  font-family: var(--bs-font-family);
}

body {
  font-family: var(--bs-font-family);
  background-color: var(--bs-body-bg);
  color: var(--bs-text);
  transition: background-color var(--bs-transition-base);
  min-height: 100vh;
}

/* ============================================================
   NAVBAR
   ============================================================ */

.navbar-custom {
  background-color: var(--bs-surface) !important;
  border-bottom: 1px solid var(--bs-border-color) !important;
  box-shadow: var(--bs-shadow-xs);
}

.navbar-custom .navbar-brand,
.navbar-custom .nav-link {
  color: var(--bs-text) !important;
}

.navbar-custom .nav-link:hover {
  color: var(--bs-primary) !important;
}

/* ============================================================
   CARDS
   ============================================================ */

.card-premium {
  background-color: var(--bs-surface);
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--bs-shadow-sm);
  color: var(--bs-text);
  transition: box-shadow var(--bs-transition-base), transform var(--bs-transition-base);
}

.card-premium:hover {
  transform: translateY(-3px);
  box-shadow: var(--bs-shadow-lg);
  border-color: var(--bs-primary);
}

.card {
  background-color: var(--bs-surface);
  border: 1px solid var(--bs-border-color);
  color: var(--bs-text);
}

/* ============================================================
   FORMS
   ============================================================ */

.form-control-custom {
  background-color: var(--bs-surface-alt) !important;
  border: 1px solid var(--bs-border-color) !important;
  color: var(--bs-text) !important;
  padding: 0.65rem 0.9rem;
  font-family: var(--bs-font-family);
  transition: border-color var(--bs-transition-base), box-shadow var(--bs-transition-base);
}

.form-control-custom:focus {
  background-color: var(--bs-surface) !important;
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 3px rgba(140, 21, 50, 0.12) !important;
  color: var(--bs-text) !important;
  outline: none;
}

.form-control-custom::placeholder {
  color: var(--bs-text-disabled);
}

.form-label {
  color: var(--bs-text-secondary);
  font-weight: var(--bs-font-weight-medium);
  font-size: var(--bs-font-size-sm);
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn-premium {
  background-color: var(--bs-primary);
  border: none;
  color: var(--bs-text-white);
  font-weight: var(--bs-font-weight-semibold);
  font-family: var(--bs-font-family);
  padding: 0.65rem 1.5rem;
  letter-spacing: 0.01em;
  box-shadow: var(--bs-shadow-sm);
  transition: background-color var(--bs-transition-base), transform var(--bs-transition-fast), box-shadow var(--bs-transition-base);
}

.btn-premium:hover {
  background-color: var(--bs-primary-hover) !important;
  color: var(--bs-text-white) !important;
  transform: translateY(-1px);
  box-shadow: var(--bs-shadow);
}

.btn-premium:active {
  background-color: var(--bs-primary-active) !important;
  transform: translateY(0);
}

/* ============================================================
   BOOTSTRAP OVERRIDES — Primary
   ============================================================ */

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

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

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

.btn-outline-primary:hover {
  background-color: var(--bs-primary) !important;
  color: #ffffff !important;
}

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

.bg-primary {
  background-color: var(--bs-primary) !important;
}

/* ============================================================
   UPLOAD DROPZONE
   ============================================================ */

.upload-dropzone {
  border: 2px dashed var(--bs-border-color);
  background-color: var(--bs-surface-alt);
  padding: 2.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--bs-transition-base), background-color var(--bs-transition-base);
}

.upload-dropzone:hover,
.upload-dropzone.dragover {
  border-color: var(--bs-primary);
  background-color: var(--bs-primary-soft);
}

/* ============================================================
   TIMELINE
   ============================================================ */

.timeline-item {
  position: relative;
  padding-left: 2.5rem;
  padding-bottom: 2rem;
  border-left: 2px solid var(--bs-border-color);
}

.timeline-item:last-child {
  border-left: none;
  padding-bottom: 0;
}

.timeline-marker {
  position: absolute;
  left: -9px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--bs-primary);
  border: 3px solid var(--bs-body-bg);
  transition: all 0.2s ease-in-out;
}

.timeline-marker.bg-success {
  background-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.timeline-marker.bg-danger {
  background-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
}

.timeline-marker.bg-warning {
  background-color: #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
}

.timeline-marker.bg-primary {
  background-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.timeline-marker.bg-info {
  background-color: #06b6d4 !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.25);
}

.timeline-marker.bg-secondary {
  background-color: #475569 !important;
  opacity: 0.6;
}

.timeline-item.timeline-rejected {
  border-left-color: rgba(239, 68, 68, 0.4);
}


/* ============================================================
   BADGES
   ============================================================ */

.badge-status {
  padding: 0.35em 0.75em;
  font-weight: var(--bs-font-weight-semibold);
  font-size: var(--bs-font-size-xs);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ============================================================
   STAT CARDS
   ============================================================ */

.stat-card {
  background-color: var(--bs-surface);
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--bs-shadow-sm);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: box-shadow var(--bs-transition-base), transform var(--bs-transition-base);
}

.stat-card:hover {
  box-shadow: var(--bs-shadow);
  transform: translateY(-2px);
}

.stat-card h3,
.stat-card .stat-value {
  color: var(--bs-text) !important;
  font-weight: var(--bs-font-weight-bold);
}

.stat-card .text-muted,
.stat-card span {
  color: var(--bs-text-muted) !important;
}

.stat-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

/* Stat icon colour palettes using status tokens */
.stat-icon.bg-warning  { background-color: var(--bs-warning-bg) !important; color: var(--bs-warning) !important; }
.stat-icon.bg-success  { background-color: var(--bs-success-bg) !important; color: var(--bs-success) !important; }
.stat-icon.bg-danger   { background-color: var(--bs-danger-bg) !important;  color: var(--bs-danger)  !important; }
.stat-icon.bg-info     { background-color: var(--bs-info-bg) !important;    color: var(--bs-info)    !important; }
.stat-icon.bg-primary  { background-color: var(--bs-primary-soft) !important; color: var(--bs-primary) !important; }

/* ============================================================
   TABLE OVERRIDES
   ============================================================ */

.table {
  color: var(--bs-text);
}

.table thead th {
  background-color: var(--bs-surface-alt);
  color: var(--bs-text-secondary);
  font-weight: var(--bs-font-weight-semibold);
  font-size: var(--bs-font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--bs-border-color);
  padding: 0.85rem 1rem;
}

.table tbody td {
  color: var(--bs-text);
  border-bottom: 1px solid var(--bs-border-light);
  padding: 0.85rem 1rem;
  vertical-align: middle;
}

.table tr.table-active,
.table tr.table-active td {
  background-color: var(--bs-primary-soft) !important;
  color: var(--bs-text) !important;
}

.table-hover tbody tr:hover td {
  background-color: var(--bs-surface-hover);
}

/* ============================================================
   TEXT UTILITIES — Force correct colors on light bg
   ============================================================ */

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

/* Override leftover text-white on light backgrounds */
h1, h2, h3, h4, h5, h6 {
  color: var(--bs-text);
}

/* Allow explicit text-white on dark elements (badges, buttons) */
.badge.text-white,
.btn.text-white,
.bg-success .text-white,
.bg-danger .text-white,
.bg-primary .text-white {
  color: #ffffff !important;
}

/* ============================================================
   ALERTS
   ============================================================ */

.alert-danger {
  background-color: var(--bs-danger-bg);
  border-color: #fca5a5;
  color: var(--bs-danger);
}

.alert-success {
  background-color: var(--bs-success-bg);
  border-color: #86efac;
  color: var(--bs-success);
}

.alert-warning {
  background-color: var(--bs-warning-bg);
  border-color: #fcd34d;
  color: var(--bs-warning);
}

.alert-info {
  background-color: var(--bs-info-bg);
  border-color: #7dd3fc;
  color: var(--bs-info);
}

/* ============================================================
   SHARP BORDERS — Global Reset (0 radius)
   ============================================================ */

*,
*::before,
*::after,
input,
button,
select,
textarea,
.card,
.card-premium,
.navbar,
.alert,
.badge,
.form-control,
.btn,
.modal,
.modal-content,
.modal-header,
.modal-footer,
.dropdown-menu,
.accordion-item,
.accordion-button {
  border-radius: 0 !important;
  --bs-border-radius: 0 !important;
  --bs-border-radius-sm: 0 !important;
  --bs-border-radius-lg: 0 !important;
  --bs-border-radius-xl: 0 !important;
  --bs-border-radius-xxl: 0 !important;
  --bs-border-radius-pill: 0 !important;
}

/* ============================================================
   DROPDOWN
   ============================================================ */

.dropdown-menu {
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--bs-shadow);
  background-color: var(--bs-surface);
}

.dropdown-item {
  color: var(--bs-text-secondary);
  font-size: var(--bs-font-size-sm);
}

.dropdown-item:hover {
  background-color: var(--bs-surface-hover);
  color: var(--bs-text);
}

/* ============================================================
   FORM SELECT / INPUT — Bootstrap native fix
   ============================================================ */

.form-control,
.form-select {
  background-color: var(--bs-surface-alt);
  border: 1px solid var(--bs-border-color);
  color: var(--bs-text);
  font-family: var(--bs-font-family);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(140, 21, 50, 0.12);
  background-color: var(--bs-surface);
  color: var(--bs-text);
}

/* ============================================================
   MISCELLANEOUS
   ============================================================ */

hr {
  border-color: var(--bs-border-color);
  opacity: 1;
}

a {
  color: var(--bs-primary);
  text-decoration: none;
}

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

/* Page section headings */
.section-heading {
  color: var(--bs-primary);
  font-weight: var(--bs-font-weight-bold);
}

/* Small label chips on tables */
.table td strong {
  color: var(--bs-text) !important;
}

/* ============================================================
   GLOBAL TEXT-WHITE REMAP FOR LIGHT BACKGROUND
   Since body/cards are now white/light, text-white
   would be invisible. Remap standalone usage to dark text.
   Preserve white text only inside explicitly dark elements.
   ============================================================ */

h1.text-white, h2.text-white, h3.text-white,
h4.text-white, h5.text-white, h6.text-white {
  color: var(--bs-text) !important;
}

/* Headings that are links and text-white */
a.text-white {
  color: var(--bs-primary) !important;
}

a.text-white:hover {
  color: var(--bs-primary-hover) !important;
}

/* Spans used as data labels on light backgrounds */
span.text-white, td.text-white, .row.text-white,
.row.small.text-white, tr.text-white {
  color: var(--bs-text) !important;
}

/* Table rows with text-white class — fix for detail tables */
.table.text-white, table.table-borderless.text-white {
  color: var(--bs-text) !important;
}

.table.text-white td,
.table.text-white th,
table.table-borderless.text-white td,
table.table-borderless.text-white th {
  color: var(--bs-text) !important;
}

/* Preserve white text where it IS on a dark/colored element */
.bg-primary span.text-white,
.bg-success span.text-white,
.bg-danger span.text-white,
.bg-warning span.text-white,
.bg-info span.text-white,
.badge span.text-white,
.btn span.text-white,
.d-inline-flex.bg-success.text-white,
.d-inline-flex.bg-danger.text-white {
  color: #ffffff !important;
}

/* Icon circles on verify page keep white */
.bg-success.text-white,
.bg-danger.text-white {
  color: #ffffff !important;
}

/* ============================================================
   MASTER DATA — List-group sidebar nav active state
   Override Bootstrap default blue with SRKR maroon
   ============================================================ */
.list-group-item-action.active,
.list-group-item.active {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #ffffff !important;
}

.list-group-item-action:hover:not(.active),
.list-group-item-action:focus:not(.active) {
  background-color: var(--bs-primary-soft) !important;
  color: var(--bs-primary) !important;
}

/* btn-primary → SRKR maroon (catches any Bootstrap default override gaps) */
.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--bs-primary-hover) !important;
  border-color: var(--bs-primary-hover) !important;
}

/* outline-primary → SRKR maroon */
.btn-outline-primary {
  color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}

/* Form focus rings → maroon */
.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(140, 21, 50, 0.15) !important;
}

/* text-primary → maroon */
.text-primary {
  color: var(--bs-primary) !important;
}

/* Links */
a.text-primary,
a:hover.text-primary {
  color: var(--bs-primary) !important;
}