@import url('../../vendor/fonts/source-sans-pro.css');

/* ---- Figtree: primary UI font across the whole portal ---- */
@font-face{ font-family:'VBB Figtree'; font-style:normal; font-weight:400; font-display:swap; src:url('../../vendor/fonts/files/figtree-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'VBB Figtree'; font-style:normal; font-weight:500; font-display:swap; src:url('../../vendor/fonts/files/figtree-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'VBB Figtree'; font-style:normal; font-weight:600; font-display:swap; src:url('../../vendor/fonts/files/figtree-latin-600-normal.woff2') format('woff2'); }
/* Figtree ships up to 600 here; map 700+ to 600 so bold text stays crisp (no faux-bold) */
@font-face{ font-family:'VBB Figtree'; font-style:normal; font-weight:700; font-display:swap; src:url('../../vendor/fonts/files/figtree-latin-600-normal.woff2') format('woff2'); }

body {
  font-family: 'VBB Figtree', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
/* nav shells sometimes carry their own font — keep them on Figtree too (icons use their own font-family, so they're unaffected) */
.dlabnav, .header, .metismenu, .content-body, .footer {
  font-family: 'VBB Figtree', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

:root {
  /* navbar: plum fading down into indigo (a solid red strip sits on top via border) */
  --theme-color: linear-gradient(180deg, #93264d 0%, #565b9f 55%, #3f4694 100%);
  --theme-color-webkit: -webkit-linear-gradient(top, #93264d 0%, #565b9f 55%, #3f4694 100%);
  --theme-color-solid: #565b9f;
  /* sidebar: brand red at the top fading through plum into indigo */
  --sidebar-color: linear-gradient(180deg, #c1272d 0%, #8c2a55 30%, #4a4f9e 70%, #3f4694 100%);
  --sidebar-color-webkit: -webkit-linear-gradient(top, #c1272d 0%, #8c2a55 30%, #4a4f9e 70%, #3f4694 100%);
  --sidebar-color-solid: #8c2a55;
  --sidebar-ink: #8f1626;
  /* dark red used for text/icons on the active white pill */
}


.header {
  background: var(--theme-color-solid);
  /* Solid color fallback */
  background: var(--theme-color-webkit);
  /* Webkit gradient */
  background: var(--theme-color);
  border-bottom: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 4px 16px rgba(20,22,60,0.3);
}

.cherry {
  background: #DC2424;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #4A569D, #DC2424);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to top, #4A569D, #DC2424);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.mirage {
  background: #16222A;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to top, #3A6073, #16222A);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to top, #3A6073, #16222A);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.bg-lemon {
  background: #3CA55C;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #B5AC49, #3CA55C);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #B5AC49, #3CA55C);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.bg-law {
  background: #0f0c29;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #24243e, #302b63, #0f0c29);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.bg-noir {
  background: #4b6cb7;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to top, #182848, #4b6cb7);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to top, #182848, #4b6cb7);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.bg-kashmir {
  background: #614385;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to top, #516395, #614385);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to top, #516395, #614385);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.bg-sel {
  background: #00467F;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #A5CC82, #00467F);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #A5CC82, #00467F);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(to left, #4b4b4a, #00467F);

}

.bg-moss {
  background: #22c1c3;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #fdbb2d, #22c1c3);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #fdbb2d, #22c1c3);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.bg-haze {
  background: #5C258D;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #4389A2, #5C258D);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #4389A2, #5C258D);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.brand-logo {
  color: #D2042D !important;
  font-size: 25px !important;
  text-align: center !important;
}

.hamburger .line {
  background: white;
}


.header_content {
  display: flex !important;
  justify-content: space-between !important;

}


.header_title {
  color: white;
  font-size: 24px;
  min-width: 0;
  flex-shrink: 1;
}

.header_title h2,
#header-title {
  color: white !important;
  font-size: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- navbar: keep every group, button and text block on one vertically-centered line ---- */
.header .navbar,
.header .navbar-collapse { align-items: center; }
.header .header-left { display: flex; align-items: center; }
.header .header_title { display: flex; align-items: center; }
.header ul.navbar-nav.header-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.header ul.navbar-nav.header-right > li,
.header ul.navbar-nav.header-right > .nav-item { display: flex; align-items: center; margin: 0; }
.header ul.navbar-nav.header-right .header-right.dropdown { display: flex; align-items: center; }

.header-left .dashboard_bar {
  padding-left: 20px;
}

.request_btn {
  background-color: white;
  color: #D2042D;
  padding: 20px;
}

.btn-request {
  background-color: white;
  color: #D2042D !important;
  border: none;
  outline: none;
}

.btn-request:hover {
  border: none;
  outline: none;
  background-color: white;
  color: #D2042D !important;
}

/* sidebar */

.dlabnav {
  background: var(--sidebar-color-solid);
  /* Solid color fallback */
  background: var(--sidebar-color-webkit);
  /* Webkit gradient */
  background: var(--sidebar-color);

}

.font-w600,
.font-w400 {
  color: white !important;
}

.nav-text {
  color: WHITE;
}

.active {
  background-color: rgba(255, 255, 255, 0.249);
}




/* main section 2 */

.card-info {
  padding: 0 !important;
  gap: 35px !important;

}

.left-section {
  display: flex;
  flex-direction: column;
  gap: 20px;

}

.heading-section {
  display: flex;
  flex-direction: column;
}

.card-balance {
  font-size: 36px;
  margin-bottom: 0px !important;

}

.critical-cases {
  color: #D2042D;
  font-size: 20px;
}

.info-section {
  display: flex;
  flex-direction: column;
}




.right-section {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.number-count {
  margin-top: 5px;
  font-size: 25px;
}

.moderate-cases {
  color: #DEB615;
  font-size: 20px;
}



.card-bx {
  height: 100%;
}

/* main section 2 */





/* blood donation request form page */


.text-area-height {
  height: auto;
}

.row.page-titles {
  /* background: none; */
}




.btn-custom {
  border: none;
  background: #D2042D;

}

.btn-custom:hover {
  border: none;
  outline: none;
  color: #f2ecec !important;
  background: #D2042Daa;


}

input:focus,
select:focus {
  border-color: #D2042D !important;
  /* Set your desired color */
  outline: none !important;
  /* Remove default focus outline */
}

.form-control:focus {
  border-color: #16222a !important;
  /* Set your desired color */
}




/* Header brand marks. Both logos share one height so the header stays
   balanced; width is left to each logo's own aspect ratio (psca-logo is
   4:3, the blood drop is square), so neither mark is distorted. Keep the
   two selectors together - sizing them separately is what made them
   drift apart before. */
#psca-logo,
#blood-logo {
  width: auto;
  height: 62px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.25));
}

/* blood donation request form page */







/* login form css */
.text-md-end {
  text-align: left !important;
}

/* login form css */

#table1_previous {
  color: rgb(151, 9, 33) !important;
  cursor: pointer;
  font-size: 13px;
}

#table1_previous:hover {
  background-color: transparent !important;
}

.paginate_button {
  color: rgb(151, 9, 33) !important;
}

.dataTables_wrapper .dataTables_paginate span .paginate_button.current,
.dataTables_wrapper .dataTables_paginate span .paginate_button {
  color: rgb(151, 9, 33) !important;
}

.dataTables_wrapper:hover .dataTables_paginate:hover span .paginate_button.current:hover,
.dataTables_wrapper:hover .dataTables_paginate span .paginate_button:hover {
  background-color: white !important;
  color: rgb(151, 9, 33) !important;
}

#table1_next {
  color: rgb(151, 9, 33) !important;
  font-size: 13px;
  cursor: pointer;
}

.dataTables_wrapper .dataTables_paginate span .paginate_button {
  height: auto;
  width: auto;
  padding: 0;
  margin-left: 0px;
  margin-left: 6px;
  line-height: 25px;
  text-align: center;
  font-size: 18px;
  border-radius: 1rem;
  border: 0 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {

  height: auto;
  width: auto;
  line-height: 0px;

}

#table1_next:hover {
  background-color: transparent !important;
}

#table1_paginate {
  margin-top: 8px;
  margin-right: 8px;
}

#table1 td>.d-flex {
  gap: 10px;
}

.swal2-confirm {
  background-color: rgb(16, 117, 16) !important;
}

.swal2-cancel {
  background-color: #7E2020 !important;

}

.toast-error {
  background-color: #000000 !important;
  opacity: 1 !important;
}

.toast-success {
  background-color: #05c425cf !important;
  opacity: 1 !important;
}

.toast-info.toast-info {
  background-color: #2F96B4 !important;
  opacity: 1 !important;
}

.toast-warning {
  background-color: #F89406 !important;
  opacity: 1 !important;
}


.invoice-card-row .invoice-card .invoice-num {
  font-size: 22px;
  /* margin-bottom: 5px; */
}

.card-bx .card-info h2,
.card-bx .card-info .h2 {
  font-size: 30px;
}

.dlabnav .metismenu>li.mm-active>a i {
  font-weight: 900 !important;
}

.dlabnav .metismenu>li.mm-active>a:after {
  border-top: 5px solid white !important;
  border-left: 5px solid white !important;
}

[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .nav-header .nav-control .hamburger .line {
  background-color: white !important;
}

.btn-primary {
  background-color: #16222a;

}

.btn-primary:hover {
  background-color: #245d83;

}

/* ////////////////////tabel design ////////// */

table.dataTable tbody td {
  font-weight: 500;
  color: black !important;
}

table.dataTable thead th,
table.dataTable thead td {
  padding: 10px 15px;
  border-bottom: 1px solid #111;
}



/* /////////////////////////////// */


.table td,
.table th {
  white-space: nowrap;
  /* Prevent text wrapping */
  text-overflow: ellipsis;
  /* Add ellipsis for overflow text */
  overflow: hidden;
  /* Hide overflowing text */
}

.table-responsive {
  overflow-x: hidden;
  /* Disable horizontal scroll */
}

#requestListing {
  table-layout: fixed;
  /* Force the table to fit its container */
  width: 100%;
  /* Ensure the table spans the container */
}

/* ////////////////////tabel design ////////// */

.newline {
  display: block;
  width: 100%;
}

.moreinfo-span {
  background-color: #6B4178;
  color: white;
  padding: 3px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
  top: -100px !important;
}

.small-span {

  background-color: #6B4178;
  color: white;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
}

.invoice-card-row .invoice-card .card-body {
  padding: 20px 15px 20px 15px;
}

.more-details-btn {
  font-size: 16px;
  padding-block: 4px;
  display: inline-block;
  background-color: #0000003d;
}

.more-details-btn:hover {

  background-color: #0000000f;
}
.more-details-btn_1 {
  font-size: 12px;
  padding-block: 4px;
  display: inline-block;
  background-color: #00000014;
}

.more-details-btn_1:hover {

  background-color: #0000000f;
}
.sectoin-1-span-container span {
    display: inline-block;
    padding: 2px 9px;
    border: 1px solid #ffffff;
    border-radius: 5px;
    font-size: 14px;
    margin-bottom: 2px;
}
/* ---- Dashboard: "Public Safety App Requests" card ----
   The card is a fixed-height box (150px) whose .card-bx clips overflow, and the
   title shares one flex row with the KPI number. At the shared 30px
   .card-balance size this card's 26-character title wrapped to a second line,
   which pushed the Approved / Not Approved badges below the clip edge and behind
   the More Details bar — the badges rendered half-cut.

   The label gets its own smaller size so it fits on one line. Note this does NOT
   make the card shorter — the .card-info row height is set by the 30px KPI number
   beside it, not by the label — it only stops the wrap, which is what was pushing
   the badges out. The card therefore keeps its exact 150px footprint and the row
   stays even. */
/* needs 3 classes to outweigh the theme's .card-bx .card-info h2 { font-size: 30px } */
.card-app-requests .card-info h2.card-balance-label {
  font-size: 20px;
  line-height: 1.25;
}
/* Two badges share this row where the sibling cards have one. The local .d-flex
   override above (line ~742) makes them space-between, so they sit at the card's
   two edges; without wrapping they would instead overflow a narrow column. The
   gap only bites once wrapped (row-gap between the stacked badges) — note the
   markup's .gap-1 class does nothing, as the theme ships gap-2/3/4 but no gap-1. */
.card-app-requests .section-2-span-container {
  flex-wrap: wrap;
  gap: 0.25rem;
}
/* .more-details-btn:hover drops the overlay from 24% black to 6%, so the bar
   jumps LIGHTER on hover. The two blue cards in this row never show it: their
   inline background:#50659a outranks that class-level :hover rule. This card has
   no inline background (so the overlay can tint the pink), which leaves the
   hover exposed — pin it to the base value so the footer stays put, matching
   how its row siblings behave. */
.card-app-requests .more-details-btn:hover {
  background-color: #0000003d;
}

.section-2-span-container span {
  padding-block: 1px;
  padding-inline: 20px;
  border: 1px solid;
  border-radius: 15px;
  font-size: 15px;
  color: white;
}


#filter-apply-btn, #filter-clear-btn {
  padding: 0.375rem 0.75rem;
}

.form-control.custom-height {
  height: 40px;
}



/* available donor section start */







.card-custom {
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  background-color: #f8f9fa;
  /* style.css's generic `.card{height:calc(100% - 30px)}` (meant to make sibling stat
     cards in the same row match height) also matches this standalone card and stretches
     it to whatever its parent's height happens to be, leaving a big empty gap below the
     blood-group tiles. This card isn't in a same-height row, so size it to its content. */
  height: auto;
}

.card-title-custom {
  font-size: 26px;
  font-weight: bold;
  border-bottom: linear-gradient(to right, #4A569D 50%, #6B4178 75%, #DC2424 100%);
  padding-bottom: 8px;
  text-align: center;
  margin-bottom: 20px;
  color: #333;
  position: relative; /* Required to position the pseudo-element */

}

.card-title-custom::after {
  content: ''; /* Creates an empty content for the pseudo-element */
  position: absolute;
  bottom: 0; /* Position at the bottom of the element */
  left: 0;
  width: 100%; /* Ensure it spans the full width of the element */
  height: 4px; /* Adjust the thickness of the gradient border */
  background: linear-gradient(to right, #4A569D 20%, #6B4178 25%, #DC2424 70%);
  /* margin-bottom: 30px; */

}

.total-donors {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 25px;
  color: #555;
}

.blood-tile {
  color: #fff;
  border-radius: 12px;
  text-align: center;
  padding: 1rem 1rem 0 1rem;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 1rem;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Specific Blood Group Colors */
.Aplus { background-color: #e74c3c; }
.Aminus { background-color: #f39c12; }
.Bplus { background-color: #3498db; }
.Bminus { background-color: #9b59b6; }
.ABplus { background-color: #2ecc71; }
.ABminus { background-color: #1abc9c; }
.Oplus { background-color: #34495e; }
.Ominus { background-color: #e67e22; }

.bg-pink { background-color: #e83e8c; }

/* Severity Level Colors */
.bg-highly-critical { background-color: #e02424; }
.bg-critical { background-color: #f39c12; }
.bg-sensitive { background-color: #f1c40f; }

.blood-tile span {
  display: block;
  font-size: 14px;
  font-weight: normal;
  margin-top: 5px;
  color: #ddd;
}

/* Flexbox adjustments for parallel display */
.d-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blood-tile .d-flex div {
  font-size: 22px;
  font-weight: normal;
  /* color: #ddd; */
  color: white;
}

.blood-tile:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Title of Donors */
.donor-title {
  font-size: 22px;
  font-weight: 600;
  color: #2c3e50;
  text-align: center;
  margin-bottom: 1rem;
}


.blinking {
  animation: blink-animation 1s infinite;
}

@keyframes blink-animation {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

/* available donor section end */

/* Blood Request Data Table Colours */
 #table1 tbody tr.table-success {
      background-color: #d4edda !important; /* light green */
      color: #155724 !important;           /* dark green text */
  }

  #table1 tbody tr.table-danger {
      background-color: #f8d7da !important; /* light red */
      color: #721c24 !important;            /* dark red text */
  }
/* End of Blood Request Data Table Colours */


















/* media query */

@media only screen and (max-width: 767px) {
  .nav-header .brand-logo {
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
    /* color: white !important; */
    font-size: 20px !important;
    background-color: white;
  }

  #table1_info {

    float: left !important;
  }

  .dataTables_paginate {
    float: right !important;
  }

  .hamburger .line {
    background: white !important;
  }

  .jsgrid-grid-body::-webkit-scrollbar-thumb,
  .dataTables_scrollBody::-webkit-scrollbar-thumb,
  .table-responsive::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: rgb(151, 9, 33);

  }

}

.form-container {
  max-width: 1450px;
  width: 100%;
  padding: 20px;
  background-color: #f9f9f9;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.dt-button {
  color: #0c0c0c !important;
  /* Green background */

}

.clo-visiblity-height {
  overflow-y: auto;
}

/* media query for form  */
@media (min-width: 320px) and (max-width: 500px) {


  [data-sidebar-style="full"] .header,
  [data-sidebar-style="overlay"] .header {

    padding-left: 0;
  }

  .header .header-content {
    padding-left: 0;
    padding-right: 0;
  }


  /* Same shared-height rule as the desktop header (the blood drop is
     hidden at this width, but keep it matched in case it comes back). */
  #psca-logo,
  #blood-logo {
    width: auto;
    height: 64px;
  }

  #header-title {
    font-size: 13px;
  }

  /* .mirage{
  background: linear-gradient(to top, #3A6073, #16222A);
  } */

  .mirage {
    background: none;
  }

  #blood-logo {
    display: none;
  }

  #donation-btn {
    display: none;

  }

  #hamburger-position {
    position: absolute;
    left: -75px;
  }
}

/* ///////////////////////////? */

.blood-tile {
    border-radius: 10px;
    padding: 0;
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 20px;
    font-size: 20px;
}

.blood-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Content area that holds blood group and count */
.blood-tile .d-flex {
    flex: 1;
    padding: 20px;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

.blood-tile .d-flex > div:first-child {
    font-size: 20px;
    font-weight: 700;
}

.blood-tile .d-flex > div:last-child {
    font-size: 1.8rem;
    font-weight: 600;
}


.toast-error {
    background-color: #ff0000 !important;   /* Red background */
    color: #fff !important;                /* White text */
}

/* ==========================================================
   Navbar / sidebar redesign
   ========================================================== */

/* ---- sidebar runs full-height from the very top; navbar sits to its right ---- */
@media (min-width: 768px) {
  .dlabnav,
  [data-sidebar-position="fixed"][data-layout="vertical"] .dlabnav {
    top: 0;
    left: 0;
    height: 100%;
    z-index: 5; /* above .header (vendor z-index: 3) */
    border-radius: 0;
  }

  /* slimmer navbar, like the design (vendor default is 7.5rem) */
  .header { height: 6rem; padding-top: 0; padding-left: 320px; }
  .header .header-content { height: 100%; display: flex; align-items: center; position: relative; }
  .header .navbar { width: 100%; }
  [data-header-position="fixed"] .content-body { padding-top: 6rem; }

  /* logos + title locked to the true center of the content area, regardless of
     how wide the left (alert) / right (donation) groups are */
  .header .header_title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    max-width: 80%;
    z-index: 1;
  }

  /* design sidebar is 300px (vendor: 20.5rem sidebar / 21.563rem offsets) */
  .dlabnav { width: 300px; }
  .content-body { margin-left: 320px; }
}
.dlabnav { display: flex; flex-direction: column; }

/* ---- compact menu rows (vendor uses 22px padding + 18px text on large screens) ---- */
.dlabnav .metismenu#menu { padding: 0 8px 15px; }
[data-sidebar-style="full"][data-layout="vertical"] .dlabnav .metismenu > li > a {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 12px;
}
[data-sidebar-style="full"][data-layout="vertical"] .dlabnav .metismenu > li > a i {
  font-size: 18px;
}
/* inline SVG icons (stroke follows currentColor: white by default, dark-red when active) */
.dlabnav .metismenu .dlabnav-icon { width: 22px; height: 22px; flex-shrink: 0; }
.dlabnav .metismenu > li > a .dlabnav-icon { color: rgba(255,255,255,0.95); }
.dlabnav .metismenu > li.mm-active > a .dlabnav-icon { color: var(--sidebar-ink); }
.dlabnav .metismenu .dlabnav-submenu-link .dlabnav-icon { width: 18px; height: 18px; color: rgba(255,255,255,0.85); }
.dlabnav .metismenu .dlabnav-submenu-link.is-active .dlabnav-icon { color: var(--sidebar-ink); }
.dlabnav .metismenu > li > a .nav-text { min-width: 0; white-space: nowrap; }
.dlabnav .metismenu > li { margin-bottom: 2px; }
.dlabnav .metismenu .has-arrow:after { right: 14px; }

/* ---- sidebar brand header (dark teal block, like the design) ---- */
.dlabnav-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 6rem; /* matches the navbar height so the seam lines up */
  flex-shrink: 0;
  padding: 0 20px;
  background: linear-gradient(150deg, #27393c, #182527);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 10px;
}
.dlabnav-brand-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dlabnav-brand-logo {
  width: 48px; height: 48px; object-fit: cover; border-radius: 50%; background: #fff; flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.dlabnav-brand-text { line-height: 1.2; min-width: 0; }
.dlabnav-brand-title { color: #fff; font-weight: 800; font-size: 15px; letter-spacing: 0.02em; white-space: nowrap; }
.dlabnav-brand-sub { color: rgba(255,255,255,0.62); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 2px; }
.dlabnav-toggle-btn {
  border: none; background: rgba(255,255,255,0.1); color: #fff;
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.dlabnav-toggle-btn:hover { background: rgba(255,255,255,0.22); }
/* collapsed sidebar: brand shows only the centered toggle (logo + text hidden) */
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .dlabnav-brand { justify-content: center; padding: 0; }
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .dlabnav-brand-left { display: none; }
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .dlabnav-brand-text,
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .dlabnav-brand-logo { display: none; }

/* collapsed sidebar: menu icons centered, labels + chevrons hidden */
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .dlabnav .metismenu > li > a {
  justify-content: center;
  gap: 0;
  padding: 14px 0;
}
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .dlabnav .metismenu > li > a .nav-text { display: none; }
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .dlabnav .metismenu#menu { padding: 0 12px 15px; }
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .dlabnav-logout > a { justify-content: center; }

/* ---- section labels that group the nav items ---- */
.dlabnav .metismenu .dlabnav-section-label {
  padding: 16px 16px 7px;
  color: #ffd08a;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}
.dlabnav .metismenu .dlabnav-section-label:first-child { padding-top: 6px; }
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .dlabnav-section-label { display: none; }

/* ---- menu items: white text, faint white chevrons, soft hover pill ---- */
.dlabnav .metismenu > li > a { color: rgba(255,255,255,0.95); border-radius: 12px; }
.dlabnav .metismenu > li:hover > a { background: rgba(255,255,255,0.09); color: #fff; }
.dlabnav .metismenu .has-arrow:after {
  border-top-color: rgba(255,255,255,0.55);
  border-left-color: rgba(255,255,255,0.55);
}

/* ---- active menu item as a white pill with dark-red ink ---- */
.dlabnav .metismenu>li.mm-active>a {
  background: #fff !important;
  border-radius: 12px !important;
}
/* active items are plain links (no submenu) — keep the chevron pointing right even
   though metisMenu marks the active <a> aria-expanded=true, which the vendor & my
   old rule rotated downward like an open dropdown */
.dlabnav .metismenu>li.mm-active>a:after,
.dlabnav .metismenu>li.mm-active>a[aria-expanded=true]:after {
  border-top-color: var(--sidebar-ink) !important;
  border-left-color: var(--sidebar-ink) !important;
  -webkit-transform: rotate(-225deg) translateY(-50%) !important;
  transform: rotate(-225deg) translateY(-50%) !important;
}
/* only Manage Users has a real submenu, so its chevron rotates down when expanded */
.dlabnav .metismenu>li:has(ul.dlabnav-submenu)>a[aria-expanded=true]:after {
  -webkit-transform: rotate(-135deg) translateY(-50%) !important;
  transform: rotate(-135deg) translateY(-50%) !important;
}
.dlabnav .metismenu>li.mm-active>a i { color: var(--sidebar-ink) !important; }
.dlabnav .metismenu>li.mm-active>a .nav-text { color: var(--sidebar-ink) !important; font-weight: 600; }

/* dropdown PARENT (Manage Users) must NOT take the white leaf-pill / dark-red ink —
   when open or a child is active it gets a subtle translucent highlight with white text */
.dlabnav .metismenu > li.dlabnav-has-sub > a { background: transparent !important; }
.dlabnav .metismenu > li.dlabnav-has-sub > a i,
.dlabnav .metismenu > li.dlabnav-has-sub > a .nav-text { color: #fff !important; font-weight: 700; }
.dlabnav .metismenu > li.dlabnav-has-sub.mm-active > a,
.dlabnav .metismenu > li.dlabnav-has-sub > a[aria-expanded="true"] {
  background: rgba(255,255,255,0.18) !important;
  border-radius: 14px !important;
}
.dlabnav .metismenu > li.dlabnav-has-sub.mm-active > a:after,
.dlabnav .metismenu > li.dlabnav-has-sub > a[aria-expanded="true"]:after {
  border-top-color: rgba(255,255,255,0.7) !important;
  border-left-color: rgba(255,255,255,0.7) !important;
}

/* ---- expanded submenu (Manage Users) ---- */
.dlabnav .metismenu ul.dlabnav-submenu {
  background: transparent !important;
  list-style: none;
  margin: 4px 0 6px 18px !important;
  padding: 2px 0 2px 10px !important;
  border-left: 1.5px solid rgba(255,255,255,0.16);
}
.dlabnav .metismenu ul.dlabnav-submenu li { margin: 0 0 2px; }
.dlabnav .metismenu .dlabnav-submenu-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  color: rgba(255,255,255,0.8) !important;
  font-weight: 600;
  font-size: 14px;
  transition: background .15s ease, color .15s ease;
}
.dlabnav .metismenu .dlabnav-submenu-link i { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }
.dlabnav .metismenu .dlabnav-submenu-link:hover { background: rgba(255,255,255,0.12); color: #fff !important; }
.dlabnav .metismenu .dlabnav-submenu-link.is-active { background: #fff !important; color: var(--sidebar-ink) !important; font-weight: 700; }
.dlabnav .metismenu .dlabnav-submenu-link.is-active i,
.dlabnav .metismenu .dlabnav-submenu-link.is-active .nav-text { color: var(--sidebar-ink) !important; }

/* ---- notification badge on a menu item (e.g. Blood Requests count) ---- */
.dlabnav .metismenu > li > a .badge {
  margin-left: 2px !important; /* sit right after the label, not pushed to the far edge */
  margin-right: 0 !important;
  background: #d81f2e !important;
  color: #fff !important;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 8px;
  min-width: 20px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(216,31,46,0.4);
  flex-shrink: 0;
}
.dlabnav .metismenu > li.mm-active > a .badge { box-shadow: none; }

/* ---- collapsed-sidebar hover flyout for items with a submenu (Manage Users) ---- */
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .dlabnav .metismenu li > ul.dlabnav-submenu {
  background: #4a1522 !important;
  width: 210px !important;
  margin: 0 0 0 6px !important;
  padding: 8px !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.4) !important;
}
/* re-show the labels inside the flyout (vendor hides all .nav-text when collapsed) */
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .dlabnav .metismenu li:hover > ul.dlabnav-submenu .nav-text { display: inline !important; }
/* flyout links: left-aligned icon + label, proper padding, readable hover/active */
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .dlabnav .metismenu > li:hover > ul.dlabnav-submenu .dlabnav-submenu-link {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 11px !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  white-space: nowrap;
}
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .dlabnav .metismenu li:hover > ul.dlabnav-submenu .dlabnav-submenu-link i { width: 18px; text-align: center; }
/* small title above the flyout links */
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .dlabnav .metismenu li:hover > ul.dlabnav-submenu::before {
  content: "Manage Users";
  display: block;
  padding: 4px 12px 8px;
  color: rgba(255,255,255,0.55);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---- profile + logout block pinned at the bottom of the sidebar ---- */
.dlabnav-scroll { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; height: auto; overflow-y: auto; }
.dlabnav .metismenu#menu { display: flex; flex-direction: column; flex: 1; }
.dlabnav .metismenu#menu .dlabnav-profile {
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.14);
  padding: 12px 4px 4px;
  list-style: none;
  /* pinned to the bottom of the sidebar so it's always reachable */
  position: sticky;
  bottom: 0;
  z-index: 6;
  background: #3f4694; /* matches the base of the sidebar gradient */
}
.dlabnav-profile-head { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 12px; cursor: pointer; transition: background .15s ease; }
.dlabnav-profile-head:hover { background: rgba(255,255,255,0.08); }
.dlabnav-profile-caret { margin-left: auto; color: rgba(255,255,255,0.6); font-size: 12px; transition: transform .2s ease; flex-shrink: 0; }
.dlabnav-profile.open .dlabnav-profile-caret { transform: rotate(180deg); }
/* menu (Change Password / Logout) opens BELOW the head. Because the whole profile
   block is sticky to the bottom, it grows upward as the menu expands, so the menu
   stays fully visible above the bottom edge without any scrolling. */
.dlabnav-profile-menu { max-height: 0; overflow: hidden; transition: max-height .22s ease; }
.dlabnav-profile.open .dlabnav-profile-menu { max-height: 160px; }
.dlabnav-profile-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(150deg, #d81f2e, #8f1626); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}
.dlabnav-profile-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.dlabnav-profile-name { color: #fff; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlabnav-profile-role { color: rgba(255,255,255,0.6); font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlabnav .metismenu#menu .dlabnav-profile-link {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 12px; border-radius: 11px;
  color: rgba(255,255,255,0.85) !important; font-weight: 600; font-size: 14.5px;
  transition: background .15s ease, color .15s ease;
}
.dlabnav-profile-link i { width: 20px; text-align: center; font-size: 17px; flex-shrink: 0; }
.dlabnav-profile-link:hover { background: rgba(255,255,255,0.12); color: #fff !important; }
.dlabnav-profile-link.logout:hover { background: rgba(216,31,46,0.28); color: #fff !important; }

/* collapsed sidebar: profile shows only the centered avatar + icon-only links */
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .dlabnav-profile-meta,
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .dlabnav-profile-caret { display: none; }
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .dlabnav-profile-head { justify-content: center; padding: 8px 0; }
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .dlabnav-profile-link { justify-content: center; gap: 0; }
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .dlabnav-profile-link .nav-text { display: none; }

/* ---- navbar title (two lines) ---- */
/* The block is a flex item sized to its widest line (the title), so centering
   the text centers the shorter subtitle underneath it. Set on the wrapper
   rather than on .header-title-sub alone so the two lines stay centered on
   each other whichever one happens to be wider. */
.header-title-block {
  text-align: center;
}

.header-title-sub {
  color: rgba(255,255,255,0.65);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 3px;
}

/* the sidebar now has its own brand header + collapse toggle, so the old
   mobile-only teal nav-header bar is redundant at desktop widths and was
   rendering as a duplicate header on top of it */
@media (min-width: 768px) {
  .nav-header { display: none !important; }
}

/* ---- Donation Request button (dark-teal gradient pill with a circular + badge) ---- */
.btn-request-pill {
  height: 54px;
  background: linear-gradient(150deg, #2c4145, #16292b) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: #fff !important;
  border-radius: 30px !important;
  font-weight: 600;
  font-size: 15.5px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 26px 0 7px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn-request-pill:hover {
  background: linear-gradient(150deg, #355054, #1d3437) !important;
  border-color: rgba(255,255,255,0.4) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.45);
  transform: translateY(-1px);
}
.btn-request-pill .btn-icon-start { transition: background .18s ease; }
.btn-request-pill:hover .btn-icon-start { background: rgba(255,255,255,0.28) !important; }
.btn-request-pill .btn-icon-start {
  position: static;
  float: none;
  margin: 0 !important;
  padding: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16) !important;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.btn-request-pill .btn-icon-start i { color: #fff !important; }

/* ---- stale-cases alert (white pill that flashes to pink; icon blinks) ---- */
.btn-stale-alert {
  height: 54px;
  border: none;
  background: #fff;
  color: #c0392b;
  border-radius: 30px;
  padding: 0 22px;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  animation: stale-flash 1.1s ease-in-out infinite;
  transition: transform .18s ease;
}
.btn-stale-alert:hover { color: #a51e12; transform: scale(1.03); }
.btn-stale-alert i { color: #c0392b; animation: stale-blink 1.6s ease-in-out infinite; }
@keyframes stale-flash {
  0%, 100% { background: #ffffff; box-shadow: 0 0 0 0 rgba(255,90,104,0), 0 6px 16px rgba(0,0,0,0.25); }
  50% { background: #ffd6db; box-shadow: 0 0 0 8px rgba(255,90,104,0.45), 0 6px 16px rgba(0,0,0,0.25); }
}
@keyframes stale-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ---- navbar user profile dropdown (translucent white chip) ---- */
.profile-trigger {
  text-decoration: none; cursor: pointer;
  height: 54px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 30px;
  padding: 0 18px 0 5px;
  transition: background .18s ease, border-color .18s ease;
}
.profile-trigger:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.3); }
.profile-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(150deg, #d81f2e, #8f1626); color: #fff; font-weight: 800; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(143,22,38,0.35);
}
.profile-meta { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.profile-name { color: #fff; font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.profile-role {
  color: rgba(255,255,255,0.62); font-weight: 600; font-size: 11.5px; white-space: nowrap;
  max-width: 190px; overflow: hidden; text-overflow: ellipsis;
}
.profile-chevron { color: rgba(255,255,255,0.7); font-size: 11px; margin-left: 2px; }
.profile-dropdown-menu { border-radius: 14px; border: 1px solid #eef0f4; box-shadow: 0 18px 50px rgba(20,10,20,0.22); padding: 8px; min-width: 224px; margin-top: 10px; }
.profile-dropdown-menu .dropdown-item { border-radius: 10px; padding: 10px 12px; font-size: 14px; font-weight: 600; color: #3d4374; display: flex; align-items: center; transition: background .15s ease, color .15s ease; }
.profile-dropdown-menu .dropdown-item i { width: 17px; margin-right: 10px; color: #4a4f9e; }
.profile-dropdown-menu .dropdown-item:hover { background: #eef0f8; color: #3a3d86; }
.profile-dropdown-menu .dropdown-item.text-danger { color: #c11a2b !important; }
.profile-dropdown-menu .dropdown-item.text-danger i { color: #c11a2b; }
.profile-dropdown-menu .dropdown-item.text-danger:hover { background: #fdecee; color: #a5182a !important; }

/* ---- Initiate Blood Request modal ---- */
.global-request-modal .modal-content { border-radius: 20px; border: none; overflow: hidden; box-shadow: 0 30px 80px rgba(20,10,20,0.35); }
.global-request-modal .modal-header {
  align-items: center; gap: 14px; padding: 20px 24px;
  border-bottom: 1px solid #f0d9de;
  background: linear-gradient(135deg, #fbe0e4 0%, #e7eafb 100%);
}
.global-request-modal .modal-title { color: #1c2340 !important; font-size: 18px; font-weight: 800; line-height: 1.2; }
.global-request-modal .modal-header .btn-close { align-self: flex-start; }
.global-request-modal .grm-icon {
  width: 44px; height: 44px; border-radius: 13px;
  background: linear-gradient(150deg, #d81f2e, #8f1626); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: 18px; box-shadow: 0 6px 14px rgba(176,18,31,0.35);
}
.global-request-modal .grm-subtitle { color: #6a6fb0; font-size: 13px; font-weight: 500; margin-top: 3px; }
.global-request-modal .modal-body { padding: 24px 26px; }
.global-request-modal .grm-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #4a4f9e; display: block; margin-bottom: 8px; }
.global-request-modal .grm-phone-group .form-control { border-radius: 12px !important; border: 1.5px solid #e2e5ec; background: #fbfbfd; font-weight: 600; color: #1c2340; }
.global-request-modal .grm-phone-group .form-control:focus { border-color: #3a3d86 !important; background: #fff; box-shadow: 0 0 0 3px rgba(58,61,134,0.12); }
.global-request-modal .grm-hint { color: #6a6fb0; font-size: 12.5px; font-weight: 500; margin-top: 12px; display: flex; align-items: center; }
.global-request-modal .grm-hint i { margin-right: 6px; color: #4a4f9e; }
.global-request-modal .modal-footer {
  border-top: 1px solid #eef0f4; background: #fafbfc; padding: 16px 24px; margin-top: 20px;
  display: flex; justify-content: flex-end; align-items: center; gap: 12px;
}
.global-request-modal .modal-footer > * { margin: 0; }
.global-request-modal .grm-cancel { border-radius: 30px; border: 1.5px solid #e2e5ec; color: #3d4374; font-weight: 600; padding: 11px 26px; }
.global-request-modal .grm-cancel:hover { background: #eef0f8; border-color: #c9ccd6; color: #1c2340; }
.global-request-modal .grm-proceed {
  background: linear-gradient(150deg, #d81f2e, #b0121f); color: #fff; border: none;
  border-radius: 30px; font-weight: 700; padding: 11px 32px;
  display: inline-flex; align-items: center; gap: 9px;
  box-shadow: 0 6px 16px rgba(176,18,31,0.35); transition: box-shadow .18s ease, transform .18s ease;
}
.global-request-modal .grm-proceed:hover { background: linear-gradient(150deg, #c01a28, #96101a); color: #fff; box-shadow: 0 9px 22px rgba(176,18,31,0.45); transform: translateY(-1px); }