html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #d32f2f; /* brand red focus */
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* === Brand theme (red / white / black) === */
:root {
  --brand-red: #d32f2f;
  --brand-red-600: #c12727;
  --brand-red-700: #b71c1c;
  --brand-white: #ffffff;
  --brand-black: #111111;
  --brand-gray-50: #f7f7f8;
  --brand-gray-200: #e5e7eb;
  --brand-gray-700: #374151;
}

.text-brand { color: var(--brand-red) !important; }
.bg-brand { background-color: var(--brand-red) !important; color: var(--brand-white) !important; }
.border-brand { border-color: var(--brand-red) !important; }

.btn-brand {
  background-color: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
  color: var(--brand-white) !important;
}
.btn-brand:hover, .btn-brand:focus {
  background-color: var(--brand-red-700) !important;
  border-color: var(--brand-red-700) !important;
  color: var(--brand-white) !important;
}

.btn-secondary-brand {
  background-color: var(--brand-black) !important;
  border-color: var(--brand-black) !important;
  color: var(--brand-white) !important;
}
.btn-secondary-brand:hover, .btn-secondary-brand:focus {
  background-color: #000000 !important;
  border-color: #000000 !important;
}

.table-head-brand th {
  background-color: var(--brand-red) !important;
  color: var(--brand-white) !important;
  border-bottom: 0;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--brand-gray-50);
}

/* Modal header brand variant */
.modal-header.brand {
  background-color: var(--brand-red);
  color: var(--brand-white);
  border-bottom: none;
}
.modal-header.brand .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Inputs focus color to brand */
.form-control:focus, .form-select:focus {
  border-color: var(--brand-red);
  box-shadow: 0 0 0 0.2rem rgba(211, 47, 47, 0.25);
}

/* Badges and chips (optional) */
.badge-brand {
  background-color: var(--brand-red);
  color: var(--brand-white);
}

/* Modern UI helpers */
.card-brand {
  background: #ffffff;
  border: 1px solid var(--brand-gray-200);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(17, 17, 17, 0.06);
}

.table-container {
  border: 1px solid var(--brand-gray-200);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.table-sticky-header thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.btn-icon-gap i { margin-right: .35rem; }

.badge-soft-brand {
  color: var(--brand-red);
  background-color: rgba(211, 47, 47, 0.1);
  border: 1px solid rgba(211, 47, 47, 0.25);
}

/* DataTables tweaks */
.dataTables_filter { display: none !important; }
.page-item.active .page-link {
  background-color: var(--brand-red);
  border-color: var(--brand-red);
  color: var(--brand-white);
}
.page-link {
  color: var(--brand-red);
}
.page-link:hover {
  color: var(--brand-red-700);
}