/* ===================================
   HMP Electric - Custom Styles
   Global utility classes & overrides
   =================================== */

/* Force LTR direction on form inputs (defensive — some browser languages/extensions can flip textareas) */
input.form-control,
textarea.form-control,
select.form-select {
    direction: ltr;
    text-align: left;
    unicode-bidi: plaintext;
}

/* ---- Navbar logo (admin + user layouts) ---- */
.navbar-brand .navbar-logo {
    height: 32px;
    width: 32px;
    object-fit: contain;
    display: inline-block;
    background: #ffffff;
    border-radius: 50%;
    padding: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
@media (max-width: 432px) {
    .navbar-brand .navbar-logo { height: 26px; width: 26px; padding: 2px; }
}
@media (max-width: 360px) {
    .navbar-brand .navbar-logo { display: none; }
}

/* ---- Spacing Utilities ---- */
.mg-0 { margin: 0 !important; }
.mg-5 { margin: 5px !important; }
.mg-10 { margin: 10px !important; }
.mg-15 { margin: 15px !important; }
.mg-20 { margin: 20px !important; }
.mg-25 { margin: 25px !important; }
.mg-30 { margin: 30px !important; }

.mg-t-5 { margin-top: 5px !important; }
.mg-t-10 { margin-top: 10px !important; }
.mg-t-15 { margin-top: 15px !important; }
.mg-t-20 { margin-top: 20px !important; }
.mg-t-25 { margin-top: 25px !important; }
.mg-t-30 { margin-top: 30px !important; }
.mg-t-40 { margin-top: 40px !important; }
.mg-t-50 { margin-top: 50px !important; }

.mg-b-5 { margin-bottom: 5px !important; }
.mg-b-10 { margin-bottom: 10px !important; }
.mg-b-15 { margin-bottom: 15px !important; }
.mg-b-20 { margin-bottom: 20px !important; }
.mg-b-25 { margin-bottom: 25px !important; }
.mg-b-30 { margin-bottom: 30px !important; }

.mg-l-5 { margin-left: 5px !important; }
.mg-l-10 { margin-left: 10px !important; }
.mg-l-15 { margin-left: 15px !important; }
.mg-l-20 { margin-left: 20px !important; }

.mg-r-5 { margin-right: 5px !important; }
.mg-r-10 { margin-right: 10px !important; }
.mg-r-15 { margin-right: 15px !important; }
.mg-r-20 { margin-right: 20px !important; }

.pd-0 { padding: 0 !important; }
.pd-5 { padding: 5px !important; }
.pd-10 { padding: 10px !important; }
.pd-15 { padding: 15px !important; }
.pd-20 { padding: 20px !important; }
.pd-25 { padding: 25px !important; }
.pd-30 { padding: 30px !important; }

.pd-t-5 { padding-top: 5px !important; }
.pd-t-10 { padding-top: 10px !important; }
.pd-t-15 { padding-top: 15px !important; }
.pd-t-20 { padding-top: 20px !important; }
.pd-t-30 { padding-top: 30px !important; }

.pd-b-5 { padding-bottom: 5px !important; }
.pd-b-10 { padding-bottom: 10px !important; }
.pd-b-15 { padding-bottom: 15px !important; }
.pd-b-20 { padding-bottom: 20px !important; }
.pd-b-30 { padding-bottom: 30px !important; }

.pd-l-10 { padding-left: 10px !important; }
.pd-l-15 { padding-left: 15px !important; }
.pd-l-20 { padding-left: 20px !important; }

.pd-r-10 { padding-right: 10px !important; }
.pd-r-15 { padding-right: 15px !important; }
.pd-r-20 { padding-right: 20px !important; }

/* ---- Font Size Utilities ---- */
.fs-10 { font-size: 10px !important; }
.fs-11 { font-size: 11px !important; }
.fs-12 { font-size: 12px !important; }
.fs-13 { font-size: 13px !important; }
.fs-14 { font-size: 14px !important; }
.fs-15 { font-size: 15px !important; }
.fs-16 { font-size: 16px !important; }
.fs-18 { font-size: 18px !important; }
.fs-20 { font-size: 20px !important; }
.fs-22 { font-size: 22px !important; }
.fs-24 { font-size: 24px !important; }
.fs-26 { font-size: 26px !important; }
.fs-28 { font-size: 28px !important; }
.fs-30 { font-size: 30px !important; }
.fs-32 { font-size: 32px !important; }
.fs-35 { font-size: 35px !important; }
.fs-40 { font-size: 40px !important; }

/* ---- Font Weight Utilities ---- */
.fw-100 { font-weight: 100 !important; }
.fw-300 { font-weight: 300 !important; }
.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-bold { font-weight: 700 !important; }

/* ---- Text Color Utilities ---- */
.text-primary-hmp { color: #086da8 !important; }
.text-secondary-hmp { color: #6c757d !important; }
.text-success-hmp { color: #198754 !important; }
.text-danger-hmp { color: #dc3545 !important; }
.text-warning-hmp { color: #ffc107 !important; }
.text-info-hmp { color: #0dcaf0 !important; }
.text-dark-hmp { color: #212529 !important; }
.text-light-hmp { color: #f8f9fa !important; }
.text-muted-hmp { color: #6c757d !important; }
.text-white-hmp { color: #ffffff !important; }

/* ---- Background Color Utilities ---- */
.bg-primary-hmp { background-color: #086da8 !important; }
.bg-secondary-hmp { background-color: #6c757d !important; }
.bg-success-hmp { background-color: #198754 !important; }
.bg-danger-hmp { background-color: #dc3545 !important; }
.bg-warning-hmp { background-color: #ffc107 !important; }
.bg-info-hmp { background-color: #0dcaf0 !important; }
.bg-dark-hmp { background-color: #212529 !important; }
.bg-light-hmp { background-color: #f8f9fa !important; }

/* ---- Border Utilities ---- */
.border-0 { border: none !important; }
.border-1 { border-width: 1px !important; }
.border-2 { border-width: 2px !important; }
.border-primary { border-color: #086da8 !important; }
.border-secondary { border-color: #6c757d !important; }
.border-success { border-color: #198754 !important; }
.border-danger { border-color: #dc3545 !important; }

.radius-0 { border-radius: 0 !important; }
.radius-5 { border-radius: 5px !important; }
.radius-8 { border-radius: 8px !important; }
.radius-10 { border-radius: 10px !important; }
.radius-12 { border-radius: 12px !important; }
.radius-15 { border-radius: 15px !important; }
.radius-20 { border-radius: 20px !important; }
.radius-round { border-radius: 50% !important; }

/* ---- Width/Height Utilities ---- */
.w-auto { width: auto !important; }
.w-10 { width: 10% !important; }
.w-20 { width: 20% !important; }
.w-30 { width: 30% !important; }
.w-40 { width: 40% !important; }
.w-50 { width: 50% !important; }
.w-60 { width: 60% !important; }
.w-70 { width: 70% !important; }
.w-80 { width: 80% !important; }
.w-90 { width: 90% !important; }
.w-100 { width: 100% !important; }

.h-auto { height: auto !important; }
.h-10 { height: 10px !important; }
.h-20 { height: 20px !important; }
.h-30 { height: 30px !important; }
.h-40 { height: 40px !important; }
.h-50 { height: 50px !important; }
.h-60 { height: 60px !important; }
.h-70 { height: 70px !important; }
.h-80 { height: 80px !important; }
.h-90 { height: 90px !important; }
.h-100 { height: 100px !important; }

/* ---- Display Utilities ---- */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }

/* ---- Flex Utilities ---- */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }

.justify-start { justify-content: flex-start !important; }
.justify-end { justify-content: flex-end !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }

.align-start { align-items: flex-start !important; }
.align-end { align-items: flex-end !important; }
.align-center { align-items: center !important; }
.align-stretch { align-items: stretch !important; }

.flex-1 { flex: 1 !important; }
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }

.gap-0 { gap: 0 !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 2rem !important; }

/* ---- Position Utilities ---- */
.pos-rel { position: relative !important; }
.pos-abs { position: absolute !important; }
.pos-fix { position: fixed !important; }
.pos-sticky { position: sticky !important; }

.top-0 { top: 0 !important; }
.bottom-0 { bottom: 0 !important; }
.left-0 { left: 0 !important; }
.right-0 { right: 0 !important; }

/* ---- Text Alignment ---- */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

/* ---- Text Transform ---- */
.text-upper { text-transform: uppercase !important; }
.text-lower { text-transform: lowercase !important; }
.text-capital { text-transform: capitalize !important; }

/* ---- Overflow Utilities ---- */
.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }
.overflow-scroll { overflow: scroll !important; }
.overflow-x-auto { overflow-x: auto !important; }
.overflow-y-auto { overflow-y: auto !important; }

/* ---- Cursor Utilities ---- */
.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

/* ---- Shadow Utilities ---- */
.shadow-0 { box-shadow: none !important; }
.shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075) !important; }
.shadow { box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important; }
.shadow-lg { box-shadow: 0 1rem 3rem rgba(0,0,0,0.175) !important; }

/* ---- Line Height ---- */
.lh-1 { line-height: 1 !important; }
.lh-15 { line-height: 1.5 !important; }
.lh-2 { line-height: 2 !important; }

/* ---- Letter Spacing ---- */
.ls-1 { letter-spacing: 1px !important; }
.ls-2 { letter-spacing: 2px !important; }

/* ---- White Space ---- */
.white-space-nowrap { white-space: nowrap !important; }
.white-space-wrap { white-space: normal !important; }

/* ---- Opacity Utilities ---- */
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

/* ---- Z-Index Utilities ---- */
.z-index-1 { z-index: 1 !important; }
.z-index-10 { z-index: 10 !important; }
.z-index-100 { z-index: 100 !important; }
.z-index-1000 { z-index: 1000 !important; }

/* ---- Transition Utilities ---- */
.transition-02 { transition: all 0.2s ease !important; }
.transition-03 { transition: all 0.3s ease !important; }
.transition-05 { transition: all 0.5s ease !important; }

/* ---- Overflow Ellipsis ---- */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Text Decoration ---- */
.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }

/* ---- Vertical Align ---- */
.va-middle { vertical-align: middle !important; }
.va-top { vertical-align: top !important; }
.va-bottom { vertical-align: bottom !important; }

/* ---- List Style ---- */
.list-style-none { list-style: none !important; padding: 0 !important; margin: 0 !important; }

/* ---- Image Utilities ---- */
.img-cover { object-fit: cover !important; }
.img-contain { object-fit: contain !important; }

/* ---- Border Radius for Images ---- */
.img-radius { border-radius: 8px !important; }

/* ---- Pointer Events ---- */
.pointer-events-none { pointer-events: none !important; }
.pointer-events-auto { pointer-events: auto !important; }

/* ---- User Select ---- */
.user-select-none { user-select: none !important; }
.user-select-all { user-select: all !important; }

/* ---- Border Style ---- */
.border-solid { border-style: solid !important; }
.border-dashed { border-style: dashed !important; }
.border-dotted { border-style: dotted !important; }

/* ---- Min Width/Height ---- */
.min-w-100 { min-width: 100px !important; }
.min-w-150 { min-width: 150px !important; }
.min-w-200 { min-width: 200px !important; }
.min-h-50 { min-height: 50px !important; }
.min-h-100 { min-height: 100px !important; }

/* ---- Max Width/Height ---- */
.max-w-100 { max-width: 100% !important; }
.max-h-100 { max-height: 100% !important; }

/* Responsive visibility rules moved to the consolidated
   "RESPONSIVE BREAKPOINTS" section at the bottom of this file. */

/* ---- Badge Styles ---- */
.badge-primary-hmp {
    background-color: #086da8;
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
}
.badge-success-hmp {
    background-color: #198754;
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
}
.badge-danger-hmp {
    background-color: #dc3545;
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
}
.badge-warning-hmp {
    background-color: #ffc107;
    color: #212529;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
}

/* ---- Card Utilities ---- */
.card-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

/* ---- Divider ---- */
.divider {
    border: none;
    border-top: 1px solid #dee2e6;
    margin: 15px 0;
}

/* ---- Icon Size ---- */
.icon-sm { font-size: 14px !important; }
.icon-md { font-size: 20px !important; }
.icon-lg { font-size: 28px !important; }
.icon-xl { font-size: 36px !important; }

/* ---- Button Sizes ---- */
.btn-xs { padding: 2px 8px !important; font-size: 11px !important; }
.btn-sm-custom { padding: 4px 12px !important; font-size: 13px !important; }
.btn-lg-custom { padding: 10px 24px !important; font-size: 16px !important; }

/* ---- Input Heights ---- */
.input-h-30 { height: 30px !important; }
.input-h-35 { height: 35px !important; }
.input-h-40 { height: 40px !important; }
.input-h-45 { height: 45px !important; }

/* ---- Table Utilities ---- */
.table-sm td, .table-sm th { padding: 5px 8px !important; font-size: 13px !important; }
.table-lg td, .table-lg th { padding: 12px 15px !important; font-size: 16px !important; }

/* ---- Overlay ---- */
.overlay-dark {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    border-radius: inherit;
}
.overlay-light {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.5);
    border-radius: inherit;
}

/* ---- Truncate Multiple Lines ---- */
.truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Status Indicators ---- */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.status-active { background-color: #198754; }
.status-inactive { background-color: #dc3545; }
.status-pending { background-color: #ffc107; }

/* ---- Scrollbar Styling ---- */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ---- Loading Spinner ---- */
.spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.spinner-md { width: 24px; height: 24px; border-width: 3px; }
.spinner-lg { width: 40px; height: 40px; border-width: 4px; }

/* ---- Pulse Animation ---- */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}
.animate-pulse { animation: pulse 2s infinite; }

/* ---- Fade In Animation ---- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 0.3s ease-out; }

#reports-table  table{
white-space:nowrap;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS — HMP Electric Standard
   ============================================================
   Mobile:  max-width: 768px
   Tablet:  769px - 991px
   Desktop: min-width: 992px

   Use these 3 breakpoints across the entire project.
   Do not introduce new pixel ranges unless documented why.

   Note: original code used min-device-width / max-device-width
   which are deprecated and only fire based on physical device
   pixels (not viewport) — replaced with min-width / max-width
   so rules trigger correctly on browser resize.
   ============================================================ */

/* ---- TABLET & MOBILE (max 991px) ---- */
@media (max-width: 991px) {
    table { white-space: nowrap; }
    .nav.nav-tabs .nav-link { font-size: 12px; flex: 0 0 auto; }
    .nav.nav-tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .nav.nav-tabs::-webkit-scrollbar { height: 3px; }
    .nav.nav-tabs::-webkit-scrollbar-thumb { background: rgba(8,109,168,0.4); border-radius: 3px; }
}

/* ---- MOBILE ONLY (max 768px) ---- */
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
    .text-center-mobile { text-align: center !important; }
    .w-100-mobile { width: 100% !important; }
    .mg-b-15-mobile { margin-bottom: 15px !important; }
}

/* ---- DESKTOP & TABLET (min 769px) ---- */
@media (min-width: 769px) {
    .hide-desktop { display: none !important; }
}

/* ---- LEGACY: cstm-dash-main-12 navbar offset
   TODO Phase 3 — replace these magic margin-top values with a
   proper fix tied to actual navbar height. Kept as-is in Phase 1
   to avoid visual regression. */
@media (max-width: 432px) {
    .cstm-dash-main-12 { margin-top: 0; }
    body.sidebar-mobile-open .sidebar { top: 37px; }
}
@media (min-width: 433px) and (max-width: 576px) {
    .cstm-dash-main-12 { margin-top: 0; }
}
@media (min-width: 577px) and (max-width: 991px) {
    .cstm-dash-main-12 { margin-top: 0; }
}

.mobile-bottom-nav a {
    padding: 10px 5px !important;
    gap: 4px;
    justify-content: center;
}
.mobile-bottom-nav {
    height: 62px;
    padding: 0px !important;
}
.mobile-bottom-nav a i {
    font-size: 1.05rem !important;
    margin-bottom: 2px !important;
}
.mobile-bottom-nav a {
    font-size: 0.7rem !important;
    line-height: 1.1;
}
.mobile-bottom-nav a.active {
  background: transparent !important;
  color: #ffffff !important;
  font-weight: 700;
  position: relative;
}
.mobile-bottom-nav a.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 3px;
  background: #ffffff;
  border-radius: 999px 999px 0 0;
}

/* ---- Stock Module: Clickable site/material names (light + dark mode) ---- */
.btn-site-drill,
.btn-material-drill,
.btn-site-material-history,
.btn-material-site-history {
  text-decoration: none !important;
  color: inherit;
  display: block;
}
.btn-site-drill:hover,
.btn-material-drill:hover,
.btn-site-material-history:hover,
.btn-material-site-history:hover {
  text-decoration: none !important;
  color: inherit;
}

/* ===========================================================
   Mobile-App Style Dashboard Tiles
   =========================================================== */
.mobile-tile {
    border: none;
    border-radius: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    height: 100%;
    background: #ffffff;
}
.mobile-tile:hover,
.mobile-tile:active {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.10) !important;
}
.mobile-tile .card-body {
    padding: 12px 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.mobile-tile .tile-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}
.mobile-tile .tile-icon-wrap i {
    font-size: 1.2rem;
}
.mobile-tile .tile-count {
    font-size: 1.6rem;
    font-weight: 700;
    color: #212529;
    margin: 0;
    line-height: 1.1;
}
.mobile-tile .tile-label {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 2px;
    font-weight: 500;
    line-height: 1.2;
}

/* Soft color backgrounds for tile icons */
.bg-primary-soft  { background: rgba(8, 109, 168, 0.12); }
.bg-success-soft  { background: rgba(25, 135, 84, 0.12); }
.bg-info-soft     { background: rgba(13, 202, 240, 0.15); }
.bg-warning-soft  { background: rgba(255, 193, 7, 0.18); }
.bg-danger-soft   { background: rgba(220, 53, 69, 0.12); }
.bg-purple-soft   { background: rgba(111, 66, 193, 0.14); }
.text-purple      { color: #6f42c1; }

/* Bigger numbers on tablets/desktops */
@media (min-width: 768px) {
    .mobile-tile .tile-count { font-size: 2rem; }
    .mobile-tile .card-body { padding: 16px 14px; }
    .mobile-tile .tile-icon-wrap { width: 48px; height: 48px; }
    .mobile-tile .tile-icon-wrap i { font-size: 1.4rem; }
}

/* ===========================================================
   Mobile-App Style List Cards (Reports, Sites, etc.)
   =========================================================== */
.list-card {
    border: none;
    border-radius: 14px;
    background: #ffffff;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    margin-bottom: 12px;
}

/* Pagination — responsive: wrap to next line + compact on phones, never overflow viewport */
.pagination {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 4px;
    max-width: 100%;
}
@media (max-width: 575px) {
    .pagination .page-link { padding: 0.25rem 0.55rem; font-size: 0.8rem; }
    .pagination .page-item { margin-bottom: 2px; }
}
.list-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.08) !important;
}
.list-card .card-body {
    padding: 16px 20px;
}
.list-card-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-wrap: nowrap !important;
    gap: 6px;
}
.list-card-header > .d-flex,
.list-card-header > .list-card-date-badge {
    flex-shrink: 0 !important;
}
.list-card-header > .list-card-title {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}
.list-card-date-badge {
    background: rgba(8, 109, 168, 0.12);
    color: #086da8;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
}
.list-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #212529;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.list-card-meta {
    font-size: 0.82rem;
    color: #6c757d;
    margin-bottom: 4px;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.list-card-meta strong {
    color: #495057;
    font-weight: 600;
}
.list-card-note {
    font-size: 0.85rem;
    color: #495057;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e0e0e0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* ===========================================================
   Notification Message — simple text style
   =========================================================== */
.notif-message-simple {
    font-size: 0.95rem;
    color: #212529;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    text-align: left;
}

/* Filter icon button (top-right) */
.btn-filter-toggle {
    background: #ffffff;
    border: 1px solid #dee2e6;
    color: #086da8;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 0.9rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-filter-toggle:hover { background: #f1f7fb; }

/* Match any .btn sitting next to .btn-filter-toggle to Filter's exact size (radius untouched) */
.d-flex:has(> .btn-filter-toggle) > .btn,
.d-flex:has(> .btn-filter-toggle) > a.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}
.d-flex:has(> .btn-filter-toggle) > .btn > i,
.d-flex:has(> .btn-filter-toggle) > a.btn > i {
    margin: 0 !important;
}

/* Tablet (576px–991px) — slightly smaller buttons; Filter scales with them so all stay aligned */
@media (max-width: 991.98px) and (min-width: 576px) {
    .btn-filter-toggle,
    .d-flex:has(> .btn-filter-toggle) > .btn,
    .d-flex:has(> .btn-filter-toggle) > a.btn {
        padding: 6px 11px !important;
        font-size: 0.83rem !important;
        gap: 5px !important;
    }
}

/* Mobile (<576px) — smallest size for cramped widths */
@media (max-width: 575.98px) {
    .btn-filter-toggle,
    .d-flex:has(> .btn-filter-toggle) > .btn,
    .d-flex:has(> .btn-filter-toggle) > a.btn {
        padding: 5px 9px !important;
        font-size: 0.78rem !important;
        gap: 4px !important;
    }
}

/* List-card row action buttons (Edit / Delete / Status toggle) — responsive sizing
   Scope: only buttons sitting inside .list-card-header so copy buttons in card-meta,
   modal buttons, pagination etc. are NOT affected. Desktop keeps Bootstrap btn-sm default. */
@media (max-width: 991.98px) and (min-width: 576px) {
    .list-card-header .btn.btn-sm {
        padding: 0.22rem 0.45rem !important;
        font-size: 0.82rem !important;
    }
}
@media (max-width: 575.98px) {
    .list-card-header .btn.btn-sm {
        padding: 0.2rem 0.4rem !important;
        font-size: 0.78rem !important;
    }
}
.btn-filter-toggle .filter-badge {
    background: #086da8;
    color: #fff;
    font-size: 0.7rem;
    border-radius: 10px;
    padding: 1px 7px;
    font-weight: 600;
}

/* Unread notification card highlight */
.list-card-unread {
    border-left: 4px solid #086da8 !important;
    background: #f1f7fb;
}

/* Flatpickr alt input — show dd-mm-yyyy placeholder + calendar icon (Windows + mobile + tablet) */
input.flatpickr-alt {
    background-color: #fff !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM2 2a1 1 0 0 0-1 1v1h14V3a1 1 0 0 0-1-1H2zm13 3H1v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 16px !important;
    padding-right: 2.25rem !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
input.flatpickr-alt::placeholder { color: #adb5bd; opacity: 1; }
input.flatpickr-alt:focus {
    background-color: #fff !important;
}