/* ================================================================
   BRAND TOKENS & BOOTSTRAP OVERRIDES
================================================================ */
:root {
  --brand-rgb: 173, 46, 53;
  --brand: #AD2E35;
  --brand-dark: #8B2229;
  --brand-darker: #6E1B20;
  --brand-light: #C94049;
  --brand-xlight: #FDECED;
  --brand-bg: #AD2E35;
  --brand-contrast: #fff;

  --bs-primary-rgb: var(--brand-rgb);
  --bs-primary: rgb(var(--brand-rgb));
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: color-mix(in oklab, var(--bs-primary), #000 12%);
  --bs-focus-ring-color: rgba(var(--brand-rgb), .25);
  --bs-btn-focus-shadow-rgb: var(--brand-rgb);
  --bs-form-switch-color: var(--bs-primary);
}

[data-bs-theme="dark"] {
  --brand-xlight: rgba(var(--brand-rgb), .18);
  --bs-primary-rgb: var(--brand-rgb);
  --bs-primary: rgb(var(--brand-rgb));
  --bs-link-color: color-mix(in oklab, var(--bs-primary), #fff 20%);
  --bs-link-hover-color: color-mix(in oklab, var(--bs-primary), #fff 32%);
  --bs-focus-ring-color: rgba(var(--brand-rgb), .35);
}


/* ================================================================
   BRAND UTILITY CLASSES — use these instead of hardcoded inline colors
================================================================ */
.bg-brand            { background-color: var(--brand) !important; color: var(--brand-contrast) !important; }
.bg-brand-light      { background-color: var(--brand-xlight) !important; }
.bg-brand-gradient   { background: linear-gradient(135deg, var(--brand-darker), var(--brand)) !important; color: var(--brand-contrast) !important; }
.bg-brand-gradient-v { background: linear-gradient(145deg, color-mix(in oklab,var(--brand-darker),#000 20%) 0%, var(--brand-darker) 25%, var(--brand) 65%, var(--brand-light) 100%) !important; color: var(--brand-contrast) !important; }
.text-brand          { color: var(--brand) !important; }
.border-brand        { border-color: var(--brand) !important; }
.shadow-brand        { box-shadow: 0 3px 10px rgba(var(--brand-rgb), .28) !important; }
.focus-brand:focus   { border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .15) !important; }
.btn-brand {
  background: linear-gradient(120deg, var(--brand-dark) 0%, var(--brand) 60%, var(--brand-light) 100%);
  border: none; color: #fff; font-weight: 700;
  box-shadow: 0 4px 16px rgba(var(--brand-rgb), .32);
  transition: box-shadow .2s, transform .15s, opacity .15s;
}
.btn-brand:hover  { opacity: .92; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(var(--brand-rgb), .42); color: #fff; }
.btn-brand:active { transform: translateY(0); }

/* ================================================================
   NAVBAR — brand gradient, white controls
================================================================ */
.navbar {
  background: linear-gradient(120deg, var(--brand-darker) 0%, var(--brand-dark) 45%, var(--brand) 100%) !important;
  box-shadow: 0 2px 20px rgba(var(--brand-rgb), .38);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  min-height: 58px;
  backdrop-filter: none;
}

.navbar .navbar-brand,
.navbar .navbar-brand span,
.navbar .fw-semibold {
  color: rgba(255, 255, 255, .96) !important;
}

/* Override all navbar buttons to look good on dark bg */
.navbar .btn-outline-secondary,
.navbar .btn-outline-primary,
.navbar .btn-primary,
.navbar .btn {
  --bs-btn-color: rgba(255, 255, 255, .88);
  --bs-btn-border-color: rgba(255, 255, 255, .28);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: rgba(255, 255, 255, .14);
  --bs-btn-hover-border-color: rgba(255, 255, 255, .55);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: rgba(255, 255, 255, .2);
  --bs-btn-active-color: #fff;
  --bs-btn-active-border-color: rgba(255, 255, 255, .5);
  box-shadow: none;
}

.navbar .dropdown-menu {
  border: none;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .15);
  border-radius: 10px;
  overflow: hidden;
}

.navbar .dropdown-item:hover {
  background: var(--brand-xlight);
}

.navbar .dropdown-item.text-danger:hover {
  background: #fff0f0;
}

[data-bs-theme="dark"] .navbar .dropdown-item:hover {
  background: rgba(var(--brand-rgb), .18);
}

/* Brand chip — semi-transparent on coloured navbar */
.brand-chip {
  background: rgba(255, 255, 255, .14);
  padding: .35rem .5rem;
  border-radius: .5rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid rgba(255, 255, 255, .2);
  transition: background .2s;
}

.brand-chip:hover {
  background: rgba(255, 255, 255, .22);
}

.brand-chip img {
  height: auto;
  width: 30px;
  display: block;
}

.brand-chip .brand-text {
  color: #fff;
  font-weight: 600;
  letter-spacing: .2px;
}


/* ================================================================
   OFFCANVAS / DRAWER
================================================================ */
.offcanvas-header {
  background: linear-gradient(120deg, var(--brand-darker) 0%, var(--brand) 100%);
  color: #fff;
  padding: 1.1rem 1.25rem;
}

.offcanvas-header .offcanvas-title {
  color: #fff;
  font-weight: 600;
}

.offcanvas-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: .8;
}

.offcanvas-header .btn-close:hover {
  opacity: 1;
}

.offcanvas-header .btn-outline-secondary {
  --bs-btn-color: rgba(255, 255, 255, .9);
  --bs-btn-border-color: rgba(255, 255, 255, .38);
  --bs-btn-hover-bg: rgba(255, 255, 255, .16);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: rgba(255, 255, 255, .65);
}

/* Drawer nav links — pill shape */
.offcanvas-body .nav-link {
  border-radius: 8px;
  padding: .5rem .75rem;
  font-size: .9rem;
  transition: background .15s, color .15s, padding-left .12s;
}

.offcanvas-body .nav-link:hover:not(.active) {
  background: rgba(var(--brand-rgb), .09);
  color: var(--brand);
  padding-left: 1rem;
}

.offcanvas-body .nav-link.active {
  background: var(--brand);
  color: #fff !important;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(var(--brand-rgb), .32);
}

.offcanvas-body .nav-link.active .nav-icon {
  opacity: 1;
  color: #fff;
}

[data-bs-theme="dark"] .offcanvas-body .nav-link:hover:not(.active) {
  background: rgba(var(--brand-rgb), .16);
}

/* Drawer action buttons */
.offcanvas-body .btn-primary {
  box-shadow: 0 2px 8px rgba(var(--brand-rgb), .28);
}


/* ================================================================
   MODAL HEADERS — branded
================================================================ */
.modal-header {
  background: linear-gradient(120deg, var(--brand-darker) 0%, var(--brand) 100%);
  color: #fff;
  border-radius: calc(var(--bs-modal-inner-border-radius) - 1px) calc(var(--bs-modal-inner-border-radius) - 1px) 0 0;
}

.modal-header .modal-title {
  color: #fff;
  font-weight: 600;
}

.modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: .8;
}

.modal-header .btn-close:hover {
  opacity: 1;
}

.modal-content {
  border: none;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
  overflow: hidden;
}

[data-bs-theme="dark"] .modal-content {
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}


/* ================================================================
   CARDS — elevated, polished
================================================================ */
.card {
  border: 1px solid rgba(var(--brand-rgb), .08);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06), 0 4px 16px rgba(0, 0, 0, .04);
  border-radius: 12px;
  transition: box-shadow .2s, transform .2s;
}

[data-bs-theme="dark"] .card {
  border-color: rgba(255, 255, 255, .07);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .28), 0 4px 16px rgba(0, 0, 0, .18);
}

.card-header {
  background: transparent;
  border-bottom: 1px solid rgba(var(--brand-rgb), .1);
  border-radius: 12px 12px 0 0 !important;
  font-weight: 600;
}

[data-bs-theme="dark"] .card-header {
  border-bottom-color: rgba(255, 255, 255, .08);
}


/* ================================================================
   BUTTONS — brand primary with depth
================================================================ */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-darker);
  --bs-btn-focus-shadow-rgb: var(--brand-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-darker);
  --bs-btn-active-border-color: var(--brand-darker);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  box-shadow: 0 2px 6px rgba(var(--brand-rgb), .28);
  transition: box-shadow .15s, transform .1s;
}

.btn-primary:hover:not(:disabled) {
  box-shadow: 0 4px 14px rgba(var(--brand-rgb), .4);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-outline-primary {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--brand-dark);
  --bs-btn-active-border-color: var(--brand-dark);
  --bs-btn-focus-shadow-rgb: var(--brand-rgb);
  transition: box-shadow .15s, transform .1s;
}

.btn-outline-primary:hover:not(:disabled) {
  box-shadow: 0 3px 10px rgba(var(--brand-rgb), .25);
  transform: translateY(-1px);
}


/* ================================================================
   FORM CONTROLS — brand focus ring
================================================================ */
.form-control:focus,
.form-select:focus {
  border-color: color-mix(in oklab, var(--brand), #000 15%);
  box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .2);
}

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

.form-range::-webkit-slider-thumb {
  background-color: var(--brand);
}

.form-range::-moz-range-thumb {
  background-color: var(--brand);
}


/* ================================================================
   TABLES — brand-accented headers
================================================================ */
.table thead th {
  font-size: .77rem;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--brand);
  border-bottom: 2px solid rgba(var(--brand-rgb), .18);
  white-space: nowrap;
}

[data-bs-theme="dark"] .table thead th {
  color: color-mix(in oklab, var(--brand), #fff 35%);
}

.table tbody tr {
  transition: background .1s;
}

.table-hover>tbody>tr:hover>* {
  background-color: rgba(var(--brand-rgb), .04);
}

[data-bs-theme="dark"] .table-hover>tbody>tr:hover>* {
  background-color: rgba(var(--brand-rgb), .1);
}

/* Employee list table */
#empTable thead th {
  white-space: nowrap;
}

#empTable td,
#empTable th {
  padding-top: .55rem;
  padding-bottom: .55rem;
}

#empTable tbody tr {
  border-color: rgba(0, 0, 0, .05);
}

[data-bs-theme="dark"] #empTable tbody tr {
  border-color: rgba(255, 255, 255, .07);
}


/* ================================================================
   BADGES, PILLS, PAGINATION, MISC COMPONENTS
================================================================ */
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  background-color: var(--brand);
}

.list-group-item.active {
  background-color: var(--brand);
  border-color: var(--brand);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--brand);
  color: #fff;
}

.page-link {
  color: var(--brand);
}

.page-link:hover {
  color: var(--brand-dark);
}

.page-item.active .page-link {
  background-color: var(--brand);
  border-color: var(--brand);
}

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

.alert-primary {
  --bs-alert-bg: color-mix(in oklab, var(--brand), #fff 88%);
  --bs-alert-border-color: color-mix(in oklab, var(--brand), #000 10%);
  color: color-mix(in oklab, var(--brand), #000 38%);
}

.progress-bar {
  background-color: var(--brand);
}

.spinner-border,
.spinner-grow {
  color: var(--brand);
}

.accordion-button:not(.collapsed) {
  background-color: color-mix(in oklab, var(--brand), var(--bs-body-bg) 88%);
  color: inherit;
}

.toast .btn-close:focus {
  box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .25);
}


/* ================================================================
   HERO / SECTION GRADIENT CARD
================================================================ */
.hero-gradient {
  background:
    radial-gradient(circle at top left, rgba(173, 46, 53, .14) 0%, rgba(173, 46, 53, .04) 35%, transparent 80%),
    linear-gradient(135deg, rgba(173, 46, 53, .03) 0%, var(--bs-body-bg) 60%);
  border: 1px solid rgba(173, 46, 53, .13);
  box-shadow: 0 0 1.5rem rgba(173, 46, 53, .08);
  border-radius: 12px;
  transition: background-color .3s ease, box-shadow .3s ease;
}

[data-bs-theme="dark"] .hero-gradient {
  background:
    radial-gradient(circle at top left, rgba(173, 46, 53, .28) 0%, rgba(173, 46, 53, .12) 35%, transparent 80%),
    linear-gradient(135deg, rgba(173, 46, 53, .1) 0%, var(--bs-body-bg) 60%);
  border-color: rgba(173, 46, 53, .25);
  box-shadow: 0 0 1.5rem rgba(173, 46, 53, .16);
}


/* ================================================================
   HOVER LIFT
================================================================ */
.hover-lift {
  transition: transform .15s ease, box-shadow .15s ease;
}

.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .1);
}

[data-bs-theme="dark"] .hover-lift:hover {
  box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .35);
}


/* ================================================================
   SEARCH FIELD
================================================================ */
.searchfield {
  max-width: 360px;
  border-radius: .5rem;
}

.searchfield:focus {
  box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .18);
}

/* Shortcut pill */
.shortcut-pill {
  border: 1px solid rgba(var(--brand-rgb), .2);
  padding: .35rem .55rem;
  border-radius: 999px;
}


/* ================================================================
   NOTIFICATION BELL SHAKE
================================================================ */
.notif-bell-shake {
  animation: notifShake 1.2s ease-in-out infinite;
  transform-origin: 50% 0;
}

@keyframes notifShake {
  0% {
    transform: rotate(0deg);
  }

  10% {
    transform: rotate(-10deg);
  }

  20% {
    transform: rotate(8deg);
  }

  30% {
    transform: rotate(-6deg);
  }

  40% {
    transform: rotate(4deg);
  }

  50% {
    transform: rotate(-2deg);
  }

  60% {
    transform: rotate(1deg);
  }

  100% {
    transform: rotate(0deg);
  }
}


/* ================================================================
   ENV BADGE (navbar)
================================================================ */
.env-badge {
  font-weight: 600;
}

.env-badge.bg-warning {
  animation: envBlink 1s linear infinite;
}

@keyframes envBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}


/* ================================================================
   THEME CUSTOMIZER — Color Preset Grid
================================================================ */
.color-preset-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .5rem;
}
.color-preset-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: .5rem .25rem;
  border: 2px solid transparent;
  border-radius: 12px;
  background: none;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.color-preset-swatch span {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: block;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  transition: transform .15s, box-shadow .15s;
}
.color-preset-swatch small {
  font-size: .65rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.color-preset-swatch:hover {
  background: rgba(var(--brand-rgb), .06);
  transform: translateY(-2px);
}
.color-preset-swatch:hover span {
  transform: scale(1.12);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.color-preset-swatch.active {
  border-color: var(--brand);
  background: rgba(var(--brand-rgb), .08);
}
.color-preset-swatch.active span {
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .3), 0 2px 8px rgba(0,0,0,.15);
}

/* ================================================================
   ANNOUNCEMENT CLAMP
================================================================ */
.ann-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}


/* ================================================================
   NAVBAR — user avatar + controls
================================================================ */
.nav-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  border: 1.5px solid rgba(255, 255, 255, .35);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: .03em;
}

.nav-user-btn {
  padding: .28rem .5rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
  transition: background .15s;
  color: rgba(255, 255, 255, .92) !important;
}

.nav-user-btn:hover {
  background: rgba(255, 255, 255, .18) !important;
}

.nav-user-name {
  font-size: .83rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .92);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-hamburger {
  padding: .35rem .5rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .92) !important;
  transition: background .15s;
}

.nav-hamburger:hover {
  background: rgba(255, 255, 255, .18) !important;
}


/* ================================================================
   DRAWER — user profile + grouped sections
================================================================ */
.drawer-user {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--bs-border-color);
  position: relative;
}

.drawer-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(var(--brand-rgb), .35);
}

.drawer-user-name {
  font-weight: 600;
  font-size: .88rem;
  line-height: 1.25;
  color: var(--bs-body-color);
}

.drawer-user-meta {
  font-size: .73rem;
  color: var(--bs-secondary-color);
  margin-top: .2rem;
}

.nav-section-label {
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  padding: .75rem .75rem .2rem;
  margin: 0;
}

.drawer-signout {
  padding: .8rem 1rem;
  border-top: 1px solid var(--bs-border-color);
}


/* ================================================================
   DESKTOP SIDEBAR
================================================================ */
@media (min-width: 992px) {
  :root {
    --desktop-sidebar-width: 300px;
    --desktop-nav-height: 72px;
  }

  .nav-drawer-toggle {
    display: none !important;
  }

  #mainDrawer.offcanvas {
    visibility: visible;
    transform: none;
    position: fixed;
    top: var(--desktop-nav-height);
    left: 0;
    right: auto;
    bottom: 0;
    width: var(--desktop-sidebar-width) !important;
    height: calc(100vh - var(--desktop-nav-height));
    border-right: 1px solid var(--bs-border-color);
    border-left: 0;
    box-shadow: 8px 0 30px rgba(0,0,0,.08);
    z-index: 1020;
    overflow: visible;
  }

  #mainDrawer .offcanvas-header {
    display: none;
  }

  .sidebar-session-toggle {
    position: absolute;
    top: 50%;
    right: -16px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    z-index: 3;
  }

  .sidebar-session-toggle:hover {
    background: var(--bs-tertiary-bg) !important;
  }

  #mainDrawer.offcanvas,
  .app-main,
  .app-footer {
    transition: transform .2s ease, margin-left .2s ease;
  }

  .app-main,
  .app-footer {
    margin-left: var(--desktop-sidebar-width);
  }

  .app-content-container {
    max-width: 100%;
  }

  body.sidebar-collapsed #mainDrawer.offcanvas {
    transform: translateX(calc(-100% + 26px));
  }

  body.sidebar-collapsed .sidebar-session-toggle {
    right: -17px;
  }

  body.sidebar-collapsed .app-main,
  body.sidebar-collapsed .app-footer {
    margin-left: 0;
  }
}


/* ================================================================
   MISC UTILITIES
================================================================ */
.blur {
  filter: blur(6px);
}

.nav-icon {
  font-size: 1.05rem;
  opacity: .9;
}

.nav-link.active .nav-icon {
  opacity: 1;
}


/* ================================================================
   RESPONSIVE VISIBILITY
================================================================ */
@media (min-width: 601px) {
  .pc-view-only {
    display: block;
  }

  .mob-view-only {
    display: none;
  }
}

@media (max-width: 600px) {
  .mob-view-only {
    display: block;
  }

  .pc-view-only {
    display: none;
  }
}


/* ================================================================
   CONTAINER MAX WIDTH
================================================================ */
@media (min-width: 1400px) {

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1600px;
  }
}