/* ============================================================
   Titmer — Bootstrap Design System
   Load order: bootstrap.min.css → bootstrap-overrides.css → styles.css → [component].css
   ============================================================ */

/* ── 1. Design Tokens → Bootstrap CSS Variables ────────────── */
:root {
  --bs-primary:          #c20018;
  --bs-primary-rgb:      194, 0, 24;
  --bs-body-color:       #030c19;
  --bs-body-color-rgb:   3, 12, 25;
  --bs-body-bg:          #fbfbfb;
  --bs-body-font-family: YekanBakh, Urbanist, Arial, sans-serif;
  --bs-body-font-size:   15px;
  --bs-body-line-height: 1.5;
  --bs-border-color:     #e2e2e2;
  --bs-border-radius:    14px;
  --bs-border-radius-sm: 10px;
  --bs-border-radius-lg: 20px;
  --bs-border-radius-xl: 20px;
  --bs-box-shadow:       0 4px 64.7px rgba(0,0,0,.05);
  --bs-link-color:       #030c19;
  --bs-link-color-rgb:   3, 12, 25;
  --bs-link-decoration:  none;
  --bs-link-hover-color: #030c19;
  --bs-secondary-color:  rgba(3,12,25,.6);
}

/* ── 2. Typography ──────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-top: 0;
  margin-bottom: 0;
}

/* Default sizes for new pages built with Bootstrap conventions.
   Existing component-scoped rules (higher specificity) override these. */
h1, .h1 { font-size: 45px; font-weight: 600; line-height: 58px; letter-spacing: -1.8px; }
h2, .h2 { font-size: 30px; font-weight: 700; line-height: 1.3; }
h3, .h3 { font-size: 20px; font-weight: 700; line-height: 30px; }
h4, .h4 { font-size: 18px; font-weight: 600; line-height: 1.4; }
h5, .h5 { font-size: 15px; font-weight: 600; line-height: 1.4; }
h6, .h6 { font-size: 13.5px; font-weight: 500; line-height: 1.4; }

small, .small { font-size: 12px; }

/* ── 3. Links ───────────────────────────────────────────────── */
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }

/* ── 4. Buttons ─────────────────────────────────────────────── */
.btn {
  --bs-btn-padding-x:     18px;
  --bs-btn-padding-y:     0;
  --bs-btn-font-family:   Urbanist, Arial, sans-serif;
  --bs-btn-font-size:     13.5px;
  --bs-btn-font-weight:   500;
  --bs-btn-line-height:   20px;
  --bs-btn-border-radius: 14px;
  display:     inline-flex;
  align-items: center;
  justify-content: center;
  gap:        11px;
  height:     48px;
  min-height: 48px;
}

.btn-sm {
  --bs-btn-padding-x:     14px;
  --bs-btn-font-size:     12px;
  --bs-btn-border-radius: 10px;
  height:     36px;
  min-height: 36px;
}

.btn-lg {
  --bs-btn-padding-x:     24px;
  --bs-btn-font-size:     15px;
  --bs-btn-border-radius: 16px;
  height:     56px;
  min-height: 56px;
}

.btn-primary {
  --bs-btn-color:                #fff;
  --bs-btn-bg:                   #c20018;
  --bs-btn-border-color:         #c20018;
  --bs-btn-hover-color:          #fff;
  --bs-btn-hover-bg:             #a90015;
  --bs-btn-hover-border-color:   #a90015;
  --bs-btn-active-color:         #fff;
  --bs-btn-active-bg:            #9a0013;
  --bs-btn-active-border-color:  #9a0013;
  --bs-btn-focus-shadow-rgb:     194, 0, 24;
  --bs-btn-disabled-color:       #fff;
  --bs-btn-disabled-bg:          #c20018;
  --bs-btn-disabled-border-color:#c20018;
}

.btn-light {
  --bs-btn-color:                #030c19;
  --bs-btn-bg:                   #fff;
  --bs-btn-border-color:         #fff;
  --bs-btn-hover-color:          #030c19;
  --bs-btn-hover-bg:             #f0f0f0;
  --bs-btn-hover-border-color:   #f0f0f0;
  --bs-btn-active-color:         #030c19;
  --bs-btn-active-bg:            #e8e8e8;
  --bs-btn-active-border-color:  #e8e8e8;
}

.btn-outline-light {
  --bs-btn-color:                #fff;
  --bs-btn-border-color:         rgba(255,255,255,.8);
  --bs-btn-hover-color:          #030c19;
  --bs-btn-hover-bg:             #fff;
  --bs-btn-hover-border-color:   #fff;
  --bs-btn-active-color:         #030c19;
  --bs-btn-active-bg:            #f0f0f0;
  --bs-btn-active-border-color:  #e8e8e8;
}

.btn:focus-visible {
  outline:      2px solid #c20018;
  outline-offset: 3px;
  box-shadow:   none;
}

/* ── 5. Forms ───────────────────────────────────────────────── */
.form-control {
  --bs-border-radius: 11px;
  color:       #030c19;
  font-family: Urbanist, Arial, sans-serif;
  font-size:   13.5px;
}
.form-control::placeholder { color: rgba(3,12,25,.4); }
.form-control:focus {
  border-color: #c20018;
  box-shadow:   0 0 0 .2rem rgba(194,0,24,.15);
  color:        #030c19;
}

.form-select {
  color:       #030c19;
  font-family: Urbanist, Arial, sans-serif;
  font-size:   13.5px;
}
.form-select:focus {
  border-color: #c20018;
  box-shadow:   0 0 0 .2rem rgba(194,0,24,.15);
}

.form-label {
  font-size:     13.5px;
  font-weight:   500;
  color:         #030c19;
  margin-bottom: 6px;
}

.form-check-input:checked {
  background-color: #c20018;
  border-color:     #c20018;
}
.form-check-input:focus {
  border-color: #c20018;
  box-shadow:   0 0 0 .2rem rgba(194,0,24,.15);
}
.form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(194,0,24,0.5)'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.invalid-feedback { font-size: 11px; }
.valid-feedback   { font-size: 11px; }

/* ── 6. Cards ───────────────────────────────────────────────── */
.card {
  --bs-card-border-radius: 20px;
  --bs-card-border-color:  transparent;
  --bs-card-bg:            #fff;
  border:     0;
  box-shadow: 0 4px 64.7px rgba(0,0,0,.05);
}

/* ── 7. Dropdowns ───────────────────────────────────────────── */
.dropdown-menu {
  --bs-dropdown-border-radius: 14px;
  --bs-dropdown-border-color:  #ededed;
  --bs-dropdown-padding-y:     6px;
  --bs-dropdown-item-padding-x: 16px;
  --bs-dropdown-item-padding-y: 8px;
  --bs-dropdown-font-size:     13.5px;
  --bs-dropdown-link-color:    #030c19;
  --bs-dropdown-link-hover-bg: rgba(194,0,24,.08);
  --bs-dropdown-link-hover-color: #030c19;
  --bs-dropdown-link-active-bg:   #c20018;
  --bs-dropdown-link-active-color: #fff;
  box-shadow: 0 12px 40px rgba(3,12,25,.16);
  font-family: Urbanist, Arial, sans-serif;
}

/* ── 8. Badges ──────────────────────────────────────────────── */
.badge {
  --bs-badge-border-radius: 8px;
  --bs-badge-padding-x:     8px;
  --bs-badge-padding-y:     4px;
  --bs-badge-font-size:     11px;
  --bs-badge-font-weight:   600;
}

/* ── 9. Alerts ──────────────────────────────────────────────── */
.alert {
  --bs-alert-border-radius: 14px;
  --bs-alert-padding-x:     18px;
  --bs-alert-padding-y:     14px;
  font-size: 13.5px;
}

/* ── 10. Tables ─────────────────────────────────────────────── */
.table {
  --bs-table-color:          #030c19;
  --bs-table-striped-bg:     rgba(3,12,25,.03);
  --bs-table-hover-bg:       rgba(3,12,25,.05);
  --bs-table-border-color:   #e2e2e2;
  font-size: 13.5px;
}
.table th { font-weight: 600; }

/* ── 11. Pagination ─────────────────────────────────────────── */
.page-link {
  color:         #030c19;
  border-color:  #e2e2e2;
  border-radius: 10px;
  font-family:   Urbanist, Arial, sans-serif;
  font-size:     13.5px;
  font-weight:   500;
}
.page-link:hover { color: #c20018; border-color: #c20018; }
.page-item.active .page-link {
  background-color: #c20018;
  border-color:     #c20018;
}

/* ── 12. Nav / Tabs / Pills ─────────────────────────────────── */
.nav-link {
  color:       #030c19;
  font-family: Urbanist, Arial, sans-serif;
  font-size:   13.5px;
  font-weight: 500;
}
.nav-link:hover, .nav-link:focus { color: #c20018; }
.nav-link.active                 { color: #c20018; }
.nav-tabs  .nav-link.active      { border-color: #e2e2e2 #e2e2e2 #fff; }
.nav-pills .nav-link.active      { background-color: #c20018; }

/* ── 13. Modals ─────────────────────────────────────────────── */
.modal-content {
  --bs-modal-border-radius: 20px;
  --bs-modal-header-padding: 24px;
  --bs-modal-padding:        24px;
  border: 0;
  box-shadow: 0 24px 80px rgba(3,12,25,.18);
}
.modal-title { font-size: 20px; font-weight: 700; }
.btn-close:focus { box-shadow: 0 0 0 .2rem rgba(194,0,24,.15); }

/* ── 14. Accordions ─────────────────────────────────────────── */
.accordion-button {
  font-family: Urbanist, Arial, sans-serif;
  font-size:   15px;
  font-weight: 600;
  color:       #030c19;
}
.accordion-button:not(.collapsed) { color: #c20018; box-shadow: inset 0 -1px 0 #e2e2e2; }
.accordion-button:focus           { box-shadow: 0 0 0 .2rem rgba(194,0,24,.15); }
.accordion-button::after {
  filter: none;
}
.accordion-button:not(.collapsed)::after {
  filter: invert(8%) sepia(95%) saturate(6200%) hue-rotate(343deg) brightness(85%) contrast(110%);
}
.accordion-item { border-color: #e2e2e2; border-radius: 14px; overflow: hidden; }

/* ── 15. List Groups ────────────────────────────────────────── */
.list-group-item {
  color:      #030c19;
  border-color: #e2e2e2;
  font-size:  13.5px;
}
.list-group-item.active {
  background-color: #c20018;
  border-color:     #c20018;
}
.list-group-item-action:hover { color: #c20018; }

/* ── 16. Breadcrumb ─────────────────────────────────────────── */
.breadcrumb {
  font-family: Urbanist, Arial, sans-serif;
  font-size:   13px;
}
.breadcrumb-item.active     { color: rgba(3,12,25,.5); }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(3,12,25,.35); }

/* ── 17. Utility alignment ──────────────────────────────────── */
/* .text-primary and similar use Bootstrap's --bs-primary, already set above */

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  h1, .h1 { font-size: 35px; line-height: 39px; letter-spacing: -1.4px; }
  h2, .h2 { font-size: 20px; }
  h3, .h3 { font-size: 15px; line-height: 22px; }
  h4, .h4 { font-size: 15px; }

  .btn {
    --bs-btn-border-radius: 10px;
    --bs-btn-font-size:     12px;
    height:     44px;
    min-height: 44px;
  }
}