/* custom-overrides.css */

/* =========================================
   COLOR VARIABLES
   ========================================= */
:root {
  --brand-red: #dc3545;
  /* Red accent color */
  --light-cream: #fdf2f2;
  /* Neutral warm gray/cream background */
  --light-bg: #ffffff;
  /* Light background for content areas */
  --text-dark: #212529;
  /* Dark text */
  --text-light: #ffffff;
  --border-gray: #dee2e6;
  /* Light gray for borders */
  --highlight-gray: #e9ecef;
  /* Slightly darker highlight */
}

/* =========================================
     BASE ELEMENTS
     ========================================= */
body {
  background-color: var(--light-bg);
  color: var(--text-dark);
  font-family: "Open Sans", sans-serif;
}

/* Headings, titles */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--brand-red);
  font-weight: 700;
}

/* Links */
a {
  color: var(--brand-red);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* =========================================
     HEADER / NAVBAR / FOOTER
     ========================================= */
header,
.navbar,
.top-navbar,
footer,
.footer {
  background-color: var(--light-cream) !important;
  color: var(--text-dark) !important;
}

/* Add subtle brand borders to header and footer */
header,
.navbar,
.top-navbar {
  border-bottom: 1px solid var(--brand-red);
}

footer,
.footer {
  border-top: 1px solid var(--brand-red);
}

.navbar-brand img {
  height: 40px;
  /* Adjust as needed */
}

.navbar-nav .nav-link {
  color: var(--text-dark) !important;
}

.navbar-nav .nav-link.active {
  color: var(--brand-red) !important;

}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  text-decoration: none;
  color: var(--brand-red) !important;

}

/* Dropdown menu (if used in navbar) */
.dropdown-menu-dark {
  background-color: #ffffff;
  /* Light background for dropdown */
  border: 1px solid var(--border-gray);
}

.dropdown-item {
  color: var(--text-dark) !important;
}

.dropdown-item:hover {
  background-color: var(--brand-red) !important;
  color: var(--text-light) !important;
}

/* Footer text & links */
.footer p {
  margin-bottom: 0;
}

.footer a:hover {
  color: var(--brand-red) !important;
}

/* =========================================
     SIDEBAR
     ========================================= */
.sidebar {
  background-color: #f8f9fa !important;
  border-right: 1px solid var(--border-gray);
  color: var(--text-dark);
}

.sidebar .nav-item h6 {
  color: var(--brand-red) !important;
  font-weight: 700;
}

.sidebar .nav-link {
  color: var(--text-dark) !important;
}

.sidebar .nav-link:hover {
  background-color: #ffffff !important;
  color: var(--brand-red) !important;
}

.sidebar .nav-link.active {
  border-left: 4px solid var(--brand-red) !important;
  background-color: #ffffff !important;
  font-weight: 600 !important;
  color: var(--brand-red) !important;
}

/* =========================================
     CONTENT AREA
     ========================================= */
.main-content,
.content {
  background-color: var(--light-bg);
  padding: 20px;
  color: var(--text-dark);
}

.crudTitle {
  font-weight: 700;
  color: var(--text-light) !important;
}

/* Card headers that are red */
.cardHeaderBackground {
  background-color: var(--brand-red) !important;
  color: var(--text-light) !important;
}

.card {
  border: 1px solid var(--border-gray);
  border-radius: 0 !important;
  background-color: #ffffff;
}

.card .card-header {
  border-bottom: 1px solid var(--border-gray);
}

/* Buttons inside forms */
.btn-danger {
  background-color: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
}

.btn-danger:hover {
  background-color: #c7313f !important;
  border-color: #c7313f !important;
}

.btn-secondary {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
}

.btn-secondary:hover {
  background-color: #5a6268 !important;
}

/* Inputs & errors */
.form-control {
  border-radius: 0 !important;
  border: 1px solid var(--border-gray);
}

.form-control:focus {
  border-color: var(--brand-red);
  box-shadow: none;
}

.error-message {
  font-size: 0.875em;
}

/* Checkboxes */
.form-check-input {
  background-color: #ffffff !important;
  border: 1px solid var(--border-gray) !important;
}

.form-check-input:checked {
  background-color: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
}

/* =========================================
     TABLES & DATAGRID
     ========================================= */
.table {
  color: var(--text-dark);
  background-color: #ffffff;
}

.table th {
  font-weight: 700;
  border-bottom: 2px solid var(--brand-red) !important;
  color: var(--brand-red) !important;
}

.table td {
  border-bottom: 1px solid var(--border-gray);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: #f5f5f5;
}

/* DataGrid header & cells */
.tableHeaderClassName {
  font-weight: 700 !important;
  color: var(--brand-red) !important;
  border-bottom: 2px solid var(--brand-red) !important;
}

.tableCellClassName {
  color: var(--text-dark) !important;
}

/* Status "Yes" highlight */
.status-yes {
  color: var(--brand-red) !important;
  font-weight: bold;
}

/* Action icons */
/* i.bi-pencil-fill.text-success {
    color: var(--brand-red) !important;
  } */
i.bi-trash-fill.text-danger {
  color: var(--brand-red) !important;
}

i.bi-list.text-primary,
i.bi-lock-fill,
i.bi-building,
i.bi-journal-text {
  color: var(--brand-red) !important;
}

/* =========================================
     LANG ITEMS & HOVER STATES
     ========================================= */
.langItem:hover {
  background-color: var(--brand-red) !important;
  color: var(--text-light) !important;
}

.langActive {
  background-color: var(--brand-red) !important;
  color: var(--text-light) !important;
}

/* Replace any default green confirmations with red */
.text-success {
  color: var(--brand-red) !important;
}

/* Other button variations */
.btn-primary,
.btn-outline-primary,
.btn-success,
.btn-outline-success {
  background-color: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
  color: var(--text-light) !important;
}

.btn-primary:hover,
.btn-outline-primary:hover,
.btn-success:hover,
.btn-outline-success:hover {
  background-color: #c7313f !important;
  border-color: #c7313f !important;
}

/* =========================================
     SCROLLBAR (OPTIONAL)
     ========================================= */
body::-webkit-scrollbar {
  width: 8px;
}

body::-webkit-scrollbar-track {
  background: #f0f0f0;
}

body::-webkit-scrollbar-thumb {
  background: var(--brand-red);
  border-radius: 4px;
}

/* =========================================
     END OF CUSTOM OVERRIDES
     ========================================= */


.cell-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}


#googleSignInDiv > div {
  width: 100% !important;
  margin: 0 auto;
}