/* custom-overrides.css */

/* =========================================
   COLOR VARIABLES
   ========================================= */
:root {
  --brand-red: #dc3545;
  --brand-red-hover: #c7313f;
  --brand-red-rgb: 220, 53, 69;
  /* 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;
}

/* =========================================
     TAB/NAV STYLING (React Bootstrap Tabs)
     ========================================= */
.nav-tabs {
  border-bottom: 2px solid var(--border-gray);
}

.nav-tabs .nav-link {
  color: var(--text-dark) !important;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0.5rem 1rem;
}

.nav-tabs .nav-link:hover {
  border-bottom-color: var(--border-gray) !important;
  color: var(--text-dark) !important;
}

.nav-tabs .nav-link.active {
  color: #fff !important;
  background-color: var(--brand-red) !important;
  border-bottom-color: var(--brand-red) !important;
  font-weight: 600;
}

/* =========================================
     MODAL CLOSE BUTTON ON DARK HEADERS
     ========================================= */
.modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* =========================================
     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-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 {
  color: var(--brand-red) !important;
}

/* Scope to data tables / action columns only, not sidebar nav */
td i.bi-building,
td 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: var(--brand-red-hover) !important;
  border-color: var(--brand-red-hover) !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
     ========================================= */

/* =========================================
   BRAND CLASSES - use these instead of "danger" for brand color
   ========================================= */
.text-brand { color: var(--brand-red) !important; }
.bg-brand { background-color: var(--brand-red) !important; }
.border-brand { border-color: var(--brand-red) !important; }

/* btn-brand - all states */
.btn-brand { background-color: var(--brand-red) !important; border-color: var(--brand-red) !important; color: #fff !important; }
.btn-brand:hover { background-color: var(--brand-red-hover) !important; border-color: var(--brand-red-hover) !important; color: #fff !important; }
.btn-brand:focus, .btn-brand.focus { box-shadow: 0 0 0 0.25rem rgba(var(--brand-red-rgb), 0.5) !important; }
.btn-brand:active, .btn-brand.active { background-color: var(--brand-red-hover) !important; border-color: var(--brand-red-hover) !important; }
.btn-brand:disabled, .btn-brand.disabled { background-color: var(--brand-red) !important; border-color: var(--brand-red) !important; opacity: 0.65; }

/* btn-outline-brand - all states */
.btn-outline-brand { color: var(--brand-red) !important; border-color: var(--brand-red) !important; background-color: transparent !important; }
.btn-outline-brand:hover { background-color: var(--brand-red) !important; border-color: var(--brand-red) !important; color: #fff !important; }
.btn-outline-brand:focus, .btn-outline-brand.focus { box-shadow: 0 0 0 0.25rem rgba(var(--brand-red-rgb), 0.5) !important; }
.btn-outline-brand:active, .btn-outline-brand.active { background-color: var(--brand-red) !important; border-color: var(--brand-red) !important; color: #fff !important; }

/* Badge, spinner, alert */
.badge.bg-brand { background-color: var(--brand-red) !important; color: #fff !important; }
.spinner-border.text-brand { color: var(--brand-red) !important; }

/* Form controls */
.form-check-input:checked { background-color: var(--brand-red) !important; border-color: var(--brand-red) !important; }
.form-check-input:focus { box-shadow: 0 0 0 0.25rem rgba(var(--brand-red-rgb), 0.25) !important; }

/* =========================================
   LEGACY: Bootstrap "danger" overrides (kept for backward compatibility)
   Gradually replace danger → brand in components
   ========================================= */
:root {
  --bs-danger: var(--brand-red);
  --bs-danger-rgb: var(--brand-red-rgb);
}
.text-danger { color: var(--brand-red) !important; }
.bg-danger { background-color: var(--brand-red) !important; }
.border-danger { border-color: var(--brand-red) !important; }
.btn-outline-danger { color: var(--brand-red) !important; border-color: var(--brand-red) !important; }
.btn-outline-danger:hover { background-color: var(--brand-red) !important; border-color: var(--brand-red) !important; color: #fff !important; }
.btn-outline-danger:focus { box-shadow: 0 0 0 0.25rem rgba(var(--brand-red-rgb), 0.5) !important; }
.btn-outline-danger:active, .btn-outline-danger.active { background-color: var(--brand-red) !important; color: #fff !important; }

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



/* Home */
.home-container {
  padding: 20px;
}

.home-grid {
  display: grid;
  /* If your original minmax was 150px, 
     let's bump it up to ~170px for ~15% larger boxes */
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

/* Base box styles */
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none; /* for <Link> */
  border: 2px solid var(--brand-red-hover); /* main color border */
  border-radius: 6px;
  padding: 25px; /* slightly larger than 20px */
  color: var(--brand-red-hover); /* main color for text */
  background-color: #fff;
  transition: all 0.2s ease-in-out;
  /* Increase min-height from 120px to ~140px for bigger boxes */
  min-height: 140px;
  cursor: pointer;
}

/* Hover effect: invert the colors */
.box:hover {
  background-color: var(--brand-red-hover);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Icon styling */
.box .icon {
  margin-bottom: 8px;
}

/* Label styling */
.box .label {
  font-size: 1rem;
  font-weight: 500;
}

/* Disabled style */
.box.disabled {
  cursor: not-allowed;
  opacity: 0.5;
  /* remove hover effect if you want to avoid color changes on disabled */
  pointer-events: none; /* so it won't respond to hover/click */
}

/* Maintenance style */
.box.maintenance {
  position: relative;
  cursor: default;
  opacity: 0.8;
  /* optional: also remove pointer-events if you don't want hover states */
  pointer-events: none;
}

/* Maintenance text style */
.box.maintenance .maintenance-text {
  margin-top: 5px;
  font-size: 0.9rem;
  color: var(--brand-red-hover);
}