@import url('/fonts/DroidSerif.ttf');
@import url('/fonts/DroidSerif-Bold.ttf');
@import url('/fonts/DroidSerif-BoldItalic.ttf');
@import url('/fonts/DroidSerif-Italic.ttf');
@import url('/fonts/GreatVibes-Regular.ttf');
@import url('/fonts/Montserrat-Italic-VariableFont_wght.ttf');
@import url('/fonts/Montserrat-VariableFont_wght.ttf');

@font-face {
    font-family: 'Droid Serif';
    src: url('/fonts/DroidSerif.ttf');
}
@font-face {
    font-family: 'Great Vibes';
    src: url('/fonts/GreatVibes-Regular.ttf');
}

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-VariableFont_wght.ttf');
}

body {
    font-family: 'Inter', sans-serif !important;
}

#download-files-wrapper .details > div {
    font-family: 'Droid Serif', serif;
}

#download-files-wrapper .details > .certificate-presented-row,
#download-files-wrapper .details > .description-row,
#download-files-wrapper .details pre,
#download-files-wrapper .details > .signatory-row {
    font-family: 'Montserrat', serif;
}
#download-files-wrapper .details > .certificate-presented-row,
#download-files-wrapper .details > .description-row {
    font-weight: 400 !important;
}

#download-files-wrapper .details > .awardee-row {
    left: 50%;
    font-family: 'Great Vibes', serif;
    font-size: 100px;
    top: 44%;
    color: #000000;
    position: absolute;
    width: 100%;
    transform: translateX(-50%);
}
#cert-front .details .awardee-row::after {
    content: '';
    display: block;
    border-bottom: 3px solid #000;
    width: 60%;
    margin: 0 auto; /* spacing above line */
    position: relative;
    z-index: 5;
}
#download-files-wrapper .details > .length-of-service-row {
    top: 320px;
    font-size: 43px;
    color: #000000;
    position: absolute;
    font-weight: 600;
    letter-spacing: 2px;
    left: 50%;
    transform: translateX(-50%);
}
#download-files-wrapper .details > .length-of-service-count {
    top: 268px;
    font-size: 43px;
    color: #000000;
    position: absolute;
    font-weight: 600;
    letter-spacing: 2px;
    left: 50%;
    transform: translateX(-50%);   
}
#download-files-wrapper .details > .smc-row {
    font-size: 43px;
    color: #d80200;
    position: absolute;
    top: 145px;
    font-weight: 600;
    letter-spacing: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}
#download-files-wrapper .details > .smc-row.yl-cert {
    font-size: 36px;
}
#download-files-wrapper .details > .the-management {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 94px;
    font-size: 30px;
}
#download-files-wrapper .details > .is-pleased {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 210px;
    font-size: 30px;
}
/* #download-files-wrapper .details > .coa-row {
    font-size: 61px;
    color: #000000;
    position: absolute;
    top: 189px;
    left: 172px;
    font-weight: 600;
    letter-spacing: 2px;
} */
#download-files-wrapper .details > .certificate-presented-row {
    font-size: 30px;
    color: #000000;
    position: absolute;
    top: 400px;
    left: 50%;
    transform: translateX(-50%);
}
#download-files-wrapper .details > .description-row {
    font-size: 24px;
    color: #000000;
    position: absolute;
    top: 659px;
    left: 196px;
    max-width: 1000px;
    font-style: italic;
    line-height: 1.5;
}
#download-files-wrapper .details > .signatory-row {
    font-size: 27px;
    color: #000000;
    position: absolute;
    bottom: 95px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    max-width: 1000px;
    left: 187px;
}
#download-files-wrapper .details > .signatory-row > div > div:first-child {
    font-weight: 600;
}
#download-files-wrapper .details > .signatory-row > div > div:last-child {
    font-size: 20px;
}

/* #download-files-wrapper .details > .certificate-presented-row,
#download-files-wrapper .details > .description-row,
#download-files-wrapper .details pre,
#download-files-wrapper .details > .signatory-row {
    font-family: 'Montserrat', serif;
}
#download-files-wrapper .details > .certificate-presented-row,
#download-files-wrapper .details > .description-row {
    font-weight: 400 !important;
}

#download-files-wrapper .details > .awardee-row {
    font-family: 'Great Vibes', serif;
    font-size: 112px;
    top: 45%;
    color: #000000;
    position: absolute;
    width: 100%;
}
#download-files-wrapper .details > .length-of-service-row {
    font-size: 44px;
    color: #1f1f1f;
    position: absolute;
    top: 320px;
    left: 437px;
    font-style: italic;
}
#download-files-wrapper .details > .smc-row {
    font-size: 45px;
    color: #d80200;
    position: absolute;
    top: 65px;
    left: 295px;
    font-weight: 600;
    letter-spacing: 2px;
}
#download-files-wrapper .details > .coa-row {
    font-size: 61px;
    color: #000000;
    position: absolute;
    top: 189px;
    left: 172px;
    font-weight: 600;
    letter-spacing: 2px;
}
#download-files-wrapper .details > .certificate-presented-row {
    font-size: 27px;
    color: #000000;
    position: absolute;
    top: 400px;
    left: 547px;
}
#download-files-wrapper .details > .description-row {
    font-size: 24px;
    color: #000000;
    position: absolute;
    top: 659px;
    left: 196px;
    max-width: 1000px;
    font-style: italic;
    line-height: 1.5;
}
#download-files-wrapper .details > .signatory-row {
    font-size: 27px;
    color: #000000;
    position: absolute;
    bottom: 95px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    max-width: 1000px;
    left: 187px;
}
#download-files-wrapper .details > .signatory-row > div > div:first-child {
    font-weight: 600;
}
#download-files-wrapper .details > .signatory-row > div > div:last-child {
    font-size: 20px;
} */
.cert-wrap {
    position: relative;
}

/* .awardee-row:before {
    border-bottom: 1px solid #000;
    content: '';
    top: 98.5%;
    bottom: 0;
    right: 0;
    left: 0;
    position: absolute;
    background-color: #000;
    margin: 0 auto;
    width: 50%;
} */
.awardee-row.no-underline:before {
    content: unset !important;
}
/* .cert-wrap:before {
    content: '';
    width: 2px;
    background-color: red;
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
} */

/* .cert-wrap:after {
    content: '';
    height: 2px;
    background-color: #dc3545;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
} */

.container-sys {
    display: flex;
    min-height: 100vh;
    background-color: var(--content-bg);
}
/* ==========================================================================
   Modals — were solid red (#cf0000) everywhere, left over from the old
   pre-redesign theme and clashing with the blue/slate palette used by the
   sidebar, header, buttons and tables. Retinted to the same dark navy as
   the sidebar itself (not the brighter accent blue used for buttons),
   plus a cleaner content/footer treatment so they read as part of the same
   design system instead of a bolted-on banner.
   Close buttons across the modal partials are plain "x" text forced white
   via .text-white (no Bootstrap .btn-close in use), so they stay visible
   without any markup changes.
   ========================================================================== */
.modal-content {
    border: none;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.2);
}
.modal-header {
    background-color: var(--sidebar-bg);
    border-bottom: none;
    padding: 1rem 1.5rem;
}
.modal-title {
    color: #fff;
    font-weight: 600;
    font-size: 1.05rem;
}
.modal-body {
    padding: 1.5rem;
}
.modal-footer {
    border-top: 1px solid var(--table-border);
}
/* .container-sys .sidebar ul li {
    list-style-type: none;
}
.container-sys .sidebar ul li a {
    color: #fff;
    text-decoration: none;
    padding: 0.5rem 1rem;
    display: block;
    font-size: 14px;
}
.container-sys .sidebar ul {
    margin: 0;
    padding: 0;
} */
.container-sys main {
    flex: 1;
    padding: 1rem;
}
.id-back-details > div {
    display: flex;
    margin-bottom: 20px;
}
.id-back-details > div:nth-child(2){
    gap: 10rem;
}
.id-back-details > div > div > div {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}
.id-back-details > div:first-child,.id-back-details > div:last-child {
    flex-direction: column;
}
.id-back-details > div label {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 15px;
}
.id-back-details > div span {

    font-size: 20px;
}



  
.marker {
    background-color: #0074D9;
    color: #FFFFFF;
    font-size: 16px;
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
  }

.map-tagging-canvas {
    height: calc(100vh - var(--header-height) - 140px);
    min-height: 480px;
}
.map-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 4px;
}
.map-style-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.store-popup {
    min-width: 220px;
    max-width: 260px;
}
.store-popup-name {
    margin: 0 0 6px;
    font-weight: 700;
}
.store-popup-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}
.store-popup-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8rem;
    color: #4b5563;
    margin-bottom: 10px;
}
.store-popup-details i {
    width: 14px;
    color: #9ca3af;
    margin-right: 4px;
}
.store-popup .view-route-btn,
.store-popup .google-navigate-link {
    display: block;
    width: 100%;
    text-align: center;
}
.store-popup .google-navigate-link {
    margin-top: 6px;
}
.store-route-status {
    margin-top: 6px;
    font-size: 0.75rem;
    color: #6b7280;
    text-align: center;
}

.store-search-wrapper {
    position: relative;
}
.store-search-results {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.store-search-result {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    background: none;
    border: none;
    border-bottom: 1px solid #f1f3f5;
    cursor: pointer;
}
.store-search-result:last-child {
    border-bottom: none;
}
.store-search-result:hover,
.store-search-result:focus {
    background-color: #f1f5f9;
}
.store-search-result .result-name {
    font-weight: 600;
    font-size: 0.85rem;
    display: block;
}
.store-search-result .result-meta {
    font-size: 0.75rem;
    color: #6b7280;
    display: block;
}
.store-search-empty {
    padding: 8px 12px;
    font-size: 0.8rem;
    color: #6b7280;
}

.store-highlight-marker {
    width: 20px;
    height: 20px;
    position: relative;
}
.store-highlight-marker .pulse-ring {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: rgba(245, 158, 11, 0.65);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: store-highlight-pulse 1.6s ease-out infinite;
}
.store-highlight-marker .pulse-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #f59e0b;
    box-shadow: 0 0 0 2px #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
@keyframes store-highlight-pulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(4.5); opacity: 0; }
}

.ac-smc-logo .logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}
.ac-smc-logo .logo-wrapper div:last-child span:first-child {
    font-size: 2.5rem;
    font-weight: bold;
}
.condition-wrapper h4 {
    text-align: center;
}
.condition-wrapper tr td:first-child {
    font-weight: bold;
}
.condition-wrapper tr td:nth-child(2){
    text-align: center;
}
.condition-wrapper tr {
    display: flex;
}
.condition-wrapper tr > * {
    flex: 1;
}
.ac-total-population {
    display: flex;
}
.ac-total-population > * {
    flex: 1;
}
.ac-total-population > span {
    text-align: center;
}

.ac-settings-wrapper {
    display: none;
  }

  .table td {
    font-size: 14px !important;
    vertical-align: middle;
  }
.header-buttons-filters .top-left ul {
    margin-bottom: 0;
    padding-left: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.header-buttons-filters .top-left li {
    list-style-type: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    border: none !important;
}
.header-buttons-filters .top-left li a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 13px;
    font-weight: 600 !important;
    color: var(--sidebar-accent);
    background-color: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 6px;
    padding: 0.4rem 0.75rem !important;
    margin: 0 !important;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.header-buttons-filters .top-left li a:hover {
    background-color: var(--sidebar-accent);
    border-color: var(--sidebar-accent);
    color: #fff;
}
.header-buttons-filters .top-left li select {
    min-width: 150px;
}
.header-buttons-filters .top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 15px 0 0;
    justify-content: space-between;
}
.header-buttons-filters .bottom {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    padding: 15px 0 0;
    margin-top: 10px;
    border-top: 1px solid var(--table-border);
}
.header-buttons-filters .bottom > .left {
    flex: 1;
}
.header-buttons-filters .top > .left {
    padding: 10px 0;
}
.header-buttons-filters .top > div,.header-buttons-filters .bottom > div {
    display: flex;

}
.header-buttons-filters .bottom > div > div:not(:last-child) {
    margin-right: 10px;
}

/* ==========================================================================
   Card-header toolbars — the other "Add X / Download Y" action-link pattern
   used across modules (a Bootstrap navbar-light nav inside .card-header,
   e.g. Employee Information, Yakult Ladies, Inventory, MAP Tagging). Same
   problem as .header-buttons-filters above: Bootstrap's default nav-link
   color (rgba(0,0,0,.55)) reads as a disabled label, not a clickable
   action, so it gets the same accent-pill treatment for consistency.
   Also gives card-header filter <select>s a floor width so they don't get
   squeezed unreadably narrow next to a flex-grown search box.
   ========================================================================== */
.card-header .navbar-nav {
    gap: 0.5rem;
    row-gap: 0.35rem;
}
.card-header .navbar-nav .nav-item {
    border: none !important;
}
.card-header .navbar-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 13px;
    font-weight: 600 !important;
    color: var(--sidebar-accent) !important;
    background-color: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
    border-radius: 6px;
    padding: 0.4rem 0.75rem !important;
    margin: 0 !important;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.card-header .navbar-nav .nav-link:hover {
    background-color: var(--sidebar-accent);
    border-color: var(--sidebar-accent);
    color: #fff !important;
}
.card-header select.form-select {
    min-width: 150px;
}

/* A third "Add X" pattern: plain Bootstrap <button class="btn btn-sm btn-*">
   toolbar buttons (Chillers, Materials, Stock Ordered/Returned Bottles, MAP
   Tagging, etc). Button color already carries no semantic meaning in this
   app (see the button-retint block above), so these get the same accent
   pill treatment as the .nav-link/.header-buttons-filters actions above —
   regardless of which .btn-* class they originally used — so every
   toolbar action looks identical no matter which markup pattern a given
   module happens to use.
   Excludes .btn-close and .dropdown-toggle in case either ever appears
   here, and modal buttons (scoped to .card-header, which modals don't use). */
.card-header .btn:not(.btn-close):not(.dropdown-toggle) {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 13px;
    font-weight: 600;
    color: var(--sidebar-accent);
    background-color: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 6px;
    padding: 0.4rem 0.75rem;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.card-header .btn:not(.btn-close):not(.dropdown-toggle):hover {
    background-color: var(--sidebar-accent);
    border-color: var(--sidebar-accent);
    color: #fff;
}
.card-header .btn:not(.btn-close):not(.dropdown-toggle):disabled {
    opacity: 0.5;
}

h6 > span {
    font-weight: 600;
}

.outlet-table-sales thead > tr > th:first-child{
    width: 250px;
}

.table-freeze-wrapper {
    max-height: 500px; /* adjust height */
    overflow-y: auto;
    overflow-x: auto; /* keep horizontal scroll */
}

.outlet-table-sales thead th {
    position: sticky;
    top: 0;
    background: #fff; /* IMPORTANT: avoid overlapping */
    z-index: 20; /* higher so it stays on top */
    box-shadow: 0 2px 2px rgba(0,0,0,0.1); /* optional */
}

.spinner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.6);
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.outlet-table-sales th.day-column,
.outlet-table-sales td.day-column {
    width: 50px;       /* Fixed width */
    max-width: 50px;   /* Prevent stretching */
    text-align: right; /* Align numbers */
    white-space: nowrap;
}
.outlet-table-sales td.day-column.sunday-column {
    background-color: #dcfce7;
}

body, html {
  height: 100%;
}

/* Reserve the vertical scrollbar's gutter on every page, whether or not
   the page is tall enough to need it. Without this, the content area's
   available width silently shifts by the scrollbar's width (~15-17px)
   depending on which module you're on — a short page like Dashboard gets
   the full width back, a long page loses it to the scrollbar — which
   reads as the layout "dancing" while navigating between modules. */
html {
  scrollbar-gutter: stable;
}

/* parent flex */
.card-wrapper > .card {
  display: flex;
  flex-direction: column;
  height: 100vh; /* full screen */
}

/* header stays fixed height */
.card-wrapper .card-header {
  flex-shrink: 0;
}

/* the scrollable content */
.card-wrapper .card-body {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 20px;
}

/* optional just to ensure table doesn't overflow weird */
.card-wrapper .table-wrapper {
  overflow-x: auto;
}




.scroll-area .table-wrapper {
    max-height: 600px;
    overflow-y: auto;
    position: relative;
}

.outlet-table-sales thead th {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff !important;
    border-bottom: 2px solid #000000;
}

.outlet-table-sales tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 15;
    background: #ddd; /* match your footer color */
    border-top: 2px solid #000000;
}

.outlet-table-sales tfoot tr {
    position: sticky;
    background: #ddd;
    z-index: 15;
}
.outlet-table-sales tfoot tr:nth-child(3) { bottom: 0; }
.outlet-table-sales tfoot tr:nth-child(2) { bottom: 30px; }
.outlet-table-sales tfoot tr:nth-child(1) { bottom: 60px; }


.municipality-row {
    scroll-margin-top: 100px; /* adjust to your sticky header height */
}
.with-hover-gray:hover {
    background-color: #ddd;
}

/* ==========================================================================
   Layout shell: sidebar, header, content wrapper
   All colors are CSS variables here so the theme can be swapped by editing
   only this :root block.
   ========================================================================== */
:root {
    --sidebar-width: 250px;
    --sidebar-width-collapsed: 76px;
    --sidebar-bg: #1e293b;
    --sidebar-bg-hover: #263548;
    --sidebar-bg-active: #2c3e57;
    --sidebar-submenu-bg: #17212f;
    --sidebar-text: #b7c3d3;
    --sidebar-text-active: #ffffff;
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --sidebar-accent: #3b82f6;

    --header-bg: #ffffff;
    --header-border: #e2e8f0;
    --header-height: 64px;
    --header-text: #1e293b;

    --content-bg: #f1f5f9;
}

/* ---- Sidebar ---- */
.container-sys .sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    transition: width 0.2s ease;
    z-index: 30;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
}
.sidebar-brand-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}
.sidebar-brand-text {
    color: var(--sidebar-text-active);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem 0;
}
.sidebar-nav::-webkit-scrollbar {
    width: 6px;
}
.sidebar-nav::-webkit-scrollbar-thumb {
    background-color: var(--sidebar-bg-hover);
    border-radius: 3px;
}

.container-sys .main-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.container-sys .main-menu > li {
    position: relative;
}
.container-sys .main-menu a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1.25rem;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.container-sys .main-menu a i:first-child {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.container-sys .main-menu a:hover,
.container-sys .main-menu a.active {
    background-color: var(--sidebar-bg-hover);
    color: var(--sidebar-text-active);
}
.container-sys .main-menu > li.active > a {
    background-color: var(--sidebar-bg-active);
    color: var(--sidebar-text-active);
}
.container-sys .main-menu .nav-label {
    flex: 1;
}
.container-sys .main-menu .arrow {
    margin-left: auto;
    font-size: 12px;
    transition: transform 0.2s ease;
    flex: 0 0 auto;
}
.container-sys .main-menu > li.active > a .arrow {
    transform: rotate(180deg);
}

.container-sys .main-menu .submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    background-color: var(--sidebar-submenu-bg);
    transition: max-height 0.25s ease;
}
.container-sys .main-menu > li.active > .submenu {
    max-height: 600px;
}
.container-sys .main-menu .submenu a {
    padding: 0.55rem 1.25rem 0.55rem 2.75rem;
    font-size: 13px;
}
/* The page you're on (set by the wire:navigate script in layouts/partials/scripts) */
.container-sys .main-menu .submenu a.current {
    background-color: var(--sidebar-bg-hover);
    color: var(--sidebar-text-active);
    font-weight: 600;
}

/* ---- Sidebar user block (bottom-anchored) ---- */
.sidebar-user {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-top: 1px solid var(--sidebar-border);
    padding: 0.75rem;
}
.sidebar-user-dropdown {
    flex: 1;
    min-width: 0;
}
.sidebar-user-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    background: none;
    border: none;
    padding: 0.4rem;
    border-radius: 8px;
    color: var(--sidebar-text-active);
    text-align: left;
}
.sidebar-user-btn:hover,
.sidebar-user-btn[aria-expanded="true"] {
    background-color: var(--sidebar-bg-hover);
}
.sidebar-notif-bell {
    flex-shrink: 0;
}
.sidebar-notif-bell-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--sidebar-text-active);
}
.sidebar-notif-bell-btn:hover,
.sidebar-notif-bell-btn[aria-expanded="true"] {
    background-color: var(--sidebar-bg-hover);
}
.sidebar-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.sidebar-user-name {
    flex: 1;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-user .dropdown-menu {
    position: absolute;
    top: auto;
    bottom: calc(100% + 0.25rem);
    left: 0;
    right: auto;
}
.sidebar-notif-bell .dropdown-menu {
    /* position:fixed (not Bootstrap's default absolute), placed via JS in
       bell.blade.php -- .sidebar has overflow:hidden, which clips an
       absolutely-positioned dropdown to the sidebar's own 250px-wide box
       the moment it's wider than that. Fixed positioning is clipped only
       by transform/filter/perspective ancestors, which .sidebar has none
       of, so it escapes cleanly. */
    position: fixed;
    width: 360px;
    max-width: calc(100vw - 16px);
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 12px 24px -6px rgba(15, 23, 42, 0.12),
        0 28px 56px -12px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}
.sidebar-notif-bell .dropdown-menu.show {
    display: flex;
    flex-direction: column;
    animation: notif-panel-in 0.16s ease-out;
}
@keyframes notif-panel-in {
    from { opacity: 0; transform: translateY(6px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

/* ---- Bell panel: header ---- */
.notif-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.1rem 0.85rem;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border-bottom: 1px solid #eef1f5;
}
.notif-panel-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}
.notif-panel-sub {
    font-size: 0.72rem;
    color: #64748b;
    margin-top: 0.1rem;
}
.notif-panel-sub strong {
    color: var(--bs-primary, #0d6efd);
    font-weight: 700;
}
.notif-panel-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    padding: 0.35rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--bs-primary, #0d6efd);
    background: rgba(13, 110, 253, 0.08);
    border: none;
    border-radius: 999px;
    transition: background-color 0.15s ease;
}
.notif-panel-action:hover {
    background: rgba(13, 110, 253, 0.15);
}

/* ---- Bell panel: list ---- */
.notif-panel-list {
    max-height: 420px;
    overflow-y: auto;
    padding: 0.35rem 0.45rem 0.45rem;
}
.notif-group-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    padding: 0.6rem 0.7rem 0.3rem;
}
.notif-panel .notif-row {
    position: relative;
    padding: 0.7rem 0.7rem;
    border-radius: 10px;
    box-shadow: none;
    transition: background-color 0.15s ease;
}
.notif-panel .notif-row + .notif-row {
    margin-top: 2px;
}
.notif-panel .notif-row-unread {
    background-color: rgba(13, 110, 253, 0.05);
}
.notif-panel .notif-row:hover,
.notif-panel .notif-row:focus {
    background-color: #f1f5f9;
}
.notif-panel .notif-row-unread .notif-text {
    color: #1e293b;
}
.notif-panel .notif-meta i {
    font-size: 0.62rem;
    margin-right: 0.2rem;
}
.notif-unread-dot {
    flex-shrink: 0;
    align-self: center;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

/* ---- Bell panel: empty state ---- */
.notif-empty {
    text-align: center;
    padding: 2.25rem 1rem;
}
.notif-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 14px;
    background: #f1f5f9;
    color: #94a3b8;
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
}
.notif-empty-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
}
.notif-empty-sub {
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 0.15rem;
}

/* ---- Bell panel: footer ---- */
.notif-panel-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--bs-primary, #0d6efd);
    background: #f8fafc;
    border: none;
    border-top: 1px solid #eef1f5;
    transition: background-color 0.15s ease;
}
.notif-panel-foot i {
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}
.notif-panel-foot:hover {
    background: #f1f5f9;
}
.notif-panel-foot:hover i {
    transform: translateX(3px);
}
/* View-all list: fixed height on desktop so the modal doesn't grow/shrink
   (and jump, since it's vertically centered) when switching filters. */
.notif-all-list {
    max-height: 55vh;
    overflow-y: auto;
}
@media (min-width: 768px) {
    .notif-all-list {
        height: 55vh;
    }
}
.notif-panel-list,
.notif-scroll {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.notif-panel-list::-webkit-scrollbar,
.notif-scroll::-webkit-scrollbar {
    width: 6px;
}
.notif-panel-list::-webkit-scrollbar-track,
.notif-scroll::-webkit-scrollbar-track {
    background: transparent;
    margin: 0.5rem 0;
}
.notif-panel-list::-webkit-scrollbar-thumb,
.notif-scroll::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 3px;
}
.sidebar-notif-bell .dropdown-item {
    white-space: normal;
}
#notifAllModal .notif-unread-badge {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.3em 0.55em;
}

/* Shared "premium" notification row -- used by both the bell dropdown and
   the #notifAllModal view-all list, so both stay visually consistent. */
.notif-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.7rem 1.25rem;
}
.notif-row:hover {
    background-color: #f8fafc;
}
.notif-row-unread {
    background-color: rgba(13, 110, 253, 0.045);
    box-shadow: inset 3px 0 0 var(--bs-primary, #0d6efd);
}
.notif-icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.14), rgba(13, 110, 253, 0.06));
    box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.1);
    color: var(--bs-primary, #0d6efd);
    font-size: 0.85rem;
}
.notif-row-unread .notif-icon {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.2), rgba(13, 110, 253, 0.08));
}
.notif-body {
    flex: 1;
    min-width: 0;
}
.notif-text {
    font-size: 0.8rem;
    line-height: 1.4;
    color: #334155;
}
.notif-name {
    font-weight: 600;
    color: #1e293b;
}
.notif-username {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-left: 0.15rem;
}
.notif-meta {
    display: block;
    font-size: 0.68rem;
    color: #94a3b8;
    margin-top: 0.15rem;
}

/* ---- Collapsed sidebar (icon-only) ---- */
body.sidebar-collapsed .container-sys .sidebar {
    width: var(--sidebar-width-collapsed);
}
body.sidebar-collapsed .sidebar-brand {
    justify-content: center;
    padding: 1.25rem 0;
}
body.sidebar-collapsed .sidebar-brand-text,
body.sidebar-collapsed .container-sys .main-menu .nav-label,
body.sidebar-collapsed .container-sys .main-menu .arrow,
body.sidebar-collapsed .container-sys .main-menu .submenu,
body.sidebar-collapsed .sidebar-user-name,
body.sidebar-collapsed .sidebar-user-btn i.fa-ellipsis-vertical {
    display: none;
}
body.sidebar-collapsed .container-sys .main-menu a {
    justify-content: center;
    padding: 0.75rem 0;
}
body.sidebar-collapsed .sidebar-user-btn {
    justify-content: center;
}
body.sidebar-collapsed .sidebar-user {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.6rem 0.5rem;
}
body.sidebar-collapsed .sidebar-user-dropdown,
body.sidebar-collapsed .sidebar-notif-bell {
    flex: none;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Flyout submenu on hover while collapsed */
body.sidebar-collapsed .container-sys .main-menu > li:hover > .submenu {
    display: block;
    max-height: none;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 210px;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    z-index: 40;
}
body.sidebar-collapsed .container-sys .main-menu > li:hover > .submenu a {
    padding: 0.55rem 1rem;
}

/* ---- Header ----
   Margin (not padding) insets the bar itself by the same 1.25rem gutter
   used by .main-content's padding, so the header's visible box is the
   same width as the cards/tables below instead of spanning edge-to-edge.
   The toggle button then sits flush against the bar's own edge, which
   lines up with the content's left edge too. */
.container-sys .top-navbar {
    height: var(--header-height);
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    margin: 0 1.25rem;
    padding-left: 1rem;
    position: sticky;
    top: 0;
    z-index: 20;
    flex-shrink: 0;
}
.sidebar-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 16px;
    color: var(--header-text);
    padding: 0;
    border-radius: 6px;
}
.sidebar-toggle-btn:hover {
    background-color: var(--content-bg);
}
.container-sys .page-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--header-text);
}

/* ---- Content wrapper ---- */
.container-sys .main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.container-sys .main-content {
    padding: 1.25rem;
    flex: 1;
}

@media (max-width: 767.98px) {
    .container-sys .main-content {
        padding: 0.75rem 0.5rem;
    }
    .container-sys .top-navbar {
        margin: 0 0.5rem;
    }
}

/* ---- Mobile drawer ---- */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.5);
    z-index: 25;
}
.sidebar-backdrop.show {
    display: block;
}

@media (max-width: 991.98px) {
    .container-sys .sidebar {
        position: fixed;
        left: calc(-1 * var(--sidebar-width));
        top: 0;
        width: var(--sidebar-width);
        transition: left 0.25s ease;
    }
    .container-sys .sidebar.sidebar-mobile-open {
        left: 0;
    }
    /* On mobile, ignore the desktop collapsed (icon-only) state entirely */
    body.sidebar-collapsed .container-sys .sidebar {
        width: var(--sidebar-width);
        left: calc(-1 * var(--sidebar-width));
    }
    body.sidebar-collapsed .container-sys .sidebar.sidebar-mobile-open {
        left: 0;
    }
    body.sidebar-collapsed .sidebar-brand-text,
    body.sidebar-collapsed .container-sys .main-menu .nav-label,
    body.sidebar-collapsed .container-sys .main-menu .arrow,
    body.sidebar-collapsed .sidebar-user-name,
    body.sidebar-collapsed .sidebar-user-btn i.fa-ellipsis-vertical {
        display: revert;
    }
    body.sidebar-collapsed .container-sys .main-menu a {
        justify-content: flex-start;
        padding: 0.65rem 1.25rem;
    }
    body.sidebar-collapsed .sidebar-user-btn {
        justify-content: flex-start;
    }
    body.sidebar-collapsed .container-sys .main-menu .submenu {
        display: block;
    }
}

/* ==========================================================================
   Data tables — consistent header/border/hover look across the app, applied
   globally so individual pages don't need markup changes. Colors come from
   the same :root palette as the sidebar/header above.
   Deliberately excludes .table-dark / .table-light (a few modal summary
   tables use those on purpose) and doesn't touch the sticky sales-board
   tables (.outlet-table-sales has its own dedicated rules elsewhere).
   ========================================================================== */
:root {
    --table-header-bg: #f1f5f9;
    --table-header-text: #334155;
    --table-border: #e2e8f0;
    --table-stripe-bg: #f8fafc;
    --table-hover-bg: #eef2f7;
}

.table:not(.table-dark):not(.table-light):not(.outlet-table-sales) {
    border-color: var(--table-border);
}
.table:not(.table-dark):not(.table-light):not(.outlet-table-sales) > thead > tr > th {
    background-color: var(--table-header-bg);
    color: var(--table-header-text);
    font-weight: 600;
    border-bottom: 2px solid var(--table-border);
    vertical-align: middle;
}
.table.table-striped:not(.table-dark):not(.table-light):not(.outlet-table-sales) > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--table-stripe-bg);
}
.table.table-hover:not(.table-dark):not(.table-light):not(.outlet-table-sales) > tbody > tr:hover > * {
    background-color: var(--table-hover-bg);
}

/* ==========================================================================
   Buttons & pagination — retint every button color (not just primary) to
   shades from the same Tailwind-slate/blue family as the sidebar, instead
   of raw Bootstrap defaults, so the whole palette reads as one system.
   The user confirmed button colors carry no semantic meaning in this app
   (success/danger/warning aren't reserved for save/delete/caution here),
   so all of them were fair game to retint — this just keeps them visually
   distinct from each other while making every one theme-consistent.
   Pagination is also sized down: Livewire's bootstrap pagination view
   (vendor/livewire/livewire/src/views/pagination/bootstrap.blade.php) emits
   plain .pagination with no .pagination-sm, so it renders at Bootstrap's
   default (large) size everywhere unless overridden here.
   custom.css loads after bootstrap.min.css (see head.blade.php), so plain
   overrides here beat Bootstrap's same-specificity rules without needing
   !important.
   ========================================================================== */
:root {
    --accent-hover: #2563eb;
    --secondary-color: #475569;
    --secondary-hover: #334155;
    --success-color: #16a34a;
    --success-hover: #15803d;
    --danger-color: #dc2626;
    --danger-hover: #b91c1c;
    --warning-color: #d97706;
    --warning-hover: #b45309;
}

.btn-primary {
    background-color: var(--sidebar-accent);
    border-color: var(--sidebar-accent);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}
.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.35);
}
.btn-outline-primary {
    color: var(--sidebar-accent);
    border-color: var(--sidebar-accent);
}
.btn-outline-primary:hover {
    background-color: var(--sidebar-accent);
    border-color: var(--sidebar-accent);
}

.btn-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary:not(:disabled):not(.disabled):active {
    background-color: var(--secondary-hover);
    border-color: var(--secondary-hover);
}

.btn-success {
    background-color: var(--success-color);
    border-color: var(--success-color);
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success:not(:disabled):not(.disabled):active {
    background-color: var(--success-hover);
    border-color: var(--success-hover);
}

.btn-danger {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger:not(:disabled):not(.disabled):active {
    background-color: var(--danger-hover);
    border-color: var(--danger-hover);
}

.btn-warning {
    background-color: var(--warning-color);
    border-color: var(--warning-color);
    color: #fff;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning:not(:disabled):not(.disabled):active {
    background-color: var(--warning-hover);
    border-color: var(--warning-hover);
    color: #fff;
}

.pagination {
    gap: 0.3rem;
    flex-wrap: wrap;
}
.pagination .page-link {
    margin-left: 0;
    color: var(--sidebar-accent);
    border-color: var(--table-border);
    padding: 0.3rem 0.65rem;
    font-size: 13px;
    line-height: 1.2;
    border-radius: 6px;
    min-width: 32px;
    text-align: center;
}
.pagination .page-item.disabled .page-link {
    color: #94a3b8;
    background-color: var(--table-header-bg);
}
.pagination .page-item:not(.disabled):not(.active) .page-link:hover {
    background-color: var(--table-header-bg);
    color: var(--accent-hover);
    border-color: var(--table-border);
}
.pagination .page-item.active .page-link {
    background-color: var(--sidebar-accent);
    border-color: var(--sidebar-accent);
    color: #fff;
}

/* ==========================================================================
   Nav tabs — page-level tab groups (Vehicles, Vehicle Details, Territories).
   Bootstrap's default "file folder" tab look is replaced with a flat
   underline style retinted to the app accent, matching buttons/pagination
   above. Global so every nav-tabs usage in the app picks it up automatically.
   ========================================================================== */
.nav-tabs {
    border-bottom-color: var(--table-border);
}
.nav-tabs .nav-link {
    color: var(--secondary-color);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.65rem 1rem;
    font-weight: 500;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color: var(--sidebar-accent);
    background: none;
    border-color: transparent;
    isolation: isolate;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--sidebar-accent);
    background: none;
    border-color: transparent;
    border-bottom-color: var(--sidebar-accent);
    font-weight: 600;
}

/* ==========================================================================
   Stat summary cards — the row of headline numbers shown above a module's
   table (dashboard counts, per-center/per-status breakdowns, Medical/Non-
   Medical KOL counts, etc). Previously each module hand-rolled its own
   `p-3 bg-white shadow-sm rounded` block and one still referenced the old
   pre-redesign green theme (.primary-text/.secondary-bg from app.css) —
   this gives them one look drawn from the same palette as the rest of the
   shell instead.
   ========================================================================== */
.stat-card {
    background-color: #ffffff;
    border: 1px solid var(--table-border);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    padding: 1rem 1.25rem;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.stat-card.stat-card-plain {
    justify-content: center;
    text-align: center;
}
.stat-card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(59, 130, 246, 0.12);
    color: var(--sidebar-accent);
    font-size: 1.1rem;
}
.stat-card-body {
    min-width: 0;
}
.stat-card-value {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--header-text);
    line-height: 1.15;
    margin: 0;
}
.stat-card-label {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
}
.stat-card-footnote {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 0.35rem;
}
.stat-card-clickable {
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.stat-card-clickable:hover {
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
}
.stat-card-clickable.active {
    border-color: var(--sidebar-accent);
    box-shadow: 0 0 0 2px var(--sidebar-accent) inset;
}

/* Variant: a titled card holding a breakdown of two or more sub-stats
   (e.g. Active/Inactive per category) instead of one headline number. */
.stat-card-group {
    background-color: #ffffff;
    border: 1px solid var(--table-border);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    padding: 1.25rem;
    height: 100%;
    text-align: center;
}
.stat-card-group-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--header-text);
    margin-bottom: 0.75rem;
}
.stat-card-group-row {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: #334155;
}
.stat-card-group-row b {
    color: var(--sidebar-accent);
    font-weight: 600;
}

/* Two-bar YL vs DS section comparison panel, paired with the dashboard
   sales graph card. */
.section-split {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 2.5rem;
    height: 220px;
    padding-top: 1.5rem;
}
.section-split-bar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 70px;
}
.section-split-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--header-text);
    margin-bottom: 0.35rem;
}
.section-split-track {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    background-color: #f1f5f9;
    border-radius: 6px;
    overflow: hidden;
}
.section-split-bar {
    width: 100%;
    border-radius: 6px 6px 0 0;
    transition: height 0.3s ease;
}
.section-split-bar-yl {
    background-color: #f59e0b;
}
.section-split-bar-ds {
    background-color: var(--sidebar-accent);
}
.section-split-pct {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--header-text);
    margin-top: 0.5rem;
}
.section-split-label {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.15rem;
}

/* Narrow cards: a fixed-size icon plus 1.25rem padding leaves almost no
   room for the label inside a narrow column (col-6 on phones, but also
   col-lg-2 next to the sidebar on laptops), so labels like "Pending Job
   Orders" overflow their box instead of wrapping. Each card's column is a
   size container, so the card reacts to its own width, not the screen's:
   stack icon above text, center it, and shrink the icon/padding/fonts. */
:has(> .stat-card),
:has(> .stat-card-group) {
    container-type: inline-size;
}
.stat-card-label {
    overflow-wrap: break-word;
}
@container (max-width: 210px) {
    .stat-card {
        flex-direction: column;
        text-align: center;
        padding: 0.85rem 0.6rem;
        gap: 0.5rem;
    }
    .stat-card-icon {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
    }
    .stat-card-body {
        width: 100%;
        text-align: center !important;
    }
    .stat-card-value {
        font-size: 1.3rem;
    }
    .stat-card-label {
        font-size: 0.75rem;
    }
    .stat-card-footnote {
        font-size: 0.7rem;
    }
    .stat-card-group {
        padding: 0.85rem 0.6rem;
    }
    .stat-card-group-title {
        font-size: 0.95rem;
        margin-bottom: 0.5rem;
    }
    .stat-card-group-row {
        gap: 0.75rem;
        font-size: 0.8rem;
    }
}

/* ==========================================================================
   Icon-only action buttons — round soft-color icon buttons for table Action
   columns (View/Edit/Delete/etc). Pairs with a `title` attribute for a
   native hover tooltip instead of a text label next to the icon.
   ========================================================================== */
.btn-icon {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    font-size: 0.9rem;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-icon + .btn-icon {
    margin-left: 6px;
}
.btn-icon-view {
    background-color: rgba(22, 163, 74, 0.12);
    color: #16a34a;
}
.btn-icon-view:hover {
    background-color: #16a34a;
    color: #fff;
}
.btn-icon-edit {
    background-color: rgba(100, 116, 139, 0.15);
    color: #475569;
}
.btn-icon-edit:hover {
    background-color: #475569;
    color: #fff;
}
.btn-icon-delete {
    background-color: rgba(220, 38, 38, 0.12);
    color: #dc2626;
}
.btn-icon-delete:hover {
    background-color: #dc2626;
    color: #fff;
}
.btn-icon-add {
    background-color: rgba(13, 110, 253, 0.12);
    color: #0d6efd;
}
.btn-icon-add:hover {
    background-color: #0d6efd;
    color: #fff;
}
.btn-icon-storage {
    background-color: rgba(217, 119, 6, 0.12);
    color: #d97706;
}
.btn-icon-storage:hover {
    background-color: #d97706;
    color: #fff;
}
.btn-icon-refresh {
    background-color: rgba(13, 110, 253, 0.12);
    color: #0d6efd;
}
.btn-icon-refresh:hover {
    background-color: #0d6efd;
    color: #fff;
}
.btn-icon-refresh i {
    transition: transform 0.4s ease;
}
.btn-icon-refresh:active i {
    transform: rotate(180deg);
}

/* ==========================================================================
   Mobile stacked tables — turns a data-title-labeled table into label:value
   "cards" per row below the breakpoint instead of horizontal scrolling.
   ========================================================================== */
/* ==========================================================================
   My Records / profile page — banner header + grid of labeled info cards,
   built from the same palette as the sidebar/stat-card system above rather
   than reusing the admin "view employee" modal's single long table.
   ========================================================================== */
.profile-banner {
    background: linear-gradient(135deg, var(--sidebar-bg), var(--sidebar-bg-active));
    border-radius: 10px;
    padding: 1.75rem 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.profile-banner-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}
/* Icon fallback for banners with no photo (e.g. Vehicle detail page) —
   same circle/size/border as the photo avatar above, centered icon instead. */
.profile-banner-avatar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 2.5rem;
}
.profile-banner-info {
    flex: 1;
    min-width: 200px;
}
.profile-banner-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.profile-banner-meta {
    font-size: 0.9rem;
    color: var(--sidebar-text);
    margin-top: 0.25rem;
}
.profile-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    margin-top: 0.75rem;
}
.profile-status-badge.status-regular {
    background-color: rgba(22, 163, 74, 0.2);
    color: #4ade80;
}
.profile-status-badge.status-probationary {
    background-color: rgba(217, 119, 6, 0.2);
    color: #fbbf24;
}
.profile-status-badge.status-trainee {
    background-color: rgba(59, 130, 246, 0.25);
    color: #93c5fd;
}
.profile-status-badge.status-inactive {
    background-color: rgba(220, 38, 38, 0.2);
    color: #fca5a5;
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}
.profile-section-card {
    background-color: #ffffff;
    border: 1px solid var(--table-border);
    border-radius: 10px;
    padding: 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.profile-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sidebar-accent);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.profile-field {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--table-border);
}
.profile-field:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.profile-field:first-child {
    padding-top: 0;
}
.profile-field-label {
    font-size: 0.8rem;
    color: #64748b;
}
.profile-field-value {
    font-size: 0.85rem;
    color: var(--header-text);
    font-weight: 600;
    text-align: right;
}

/* Q&A block — screening-questionnaire style answers (long question text,
   short answer) inside a .profile-section-card, e.g. the admin "View
   Employee" General Information tab. Stacked label-over-value instead of
   .profile-field's side-by-side layout, since the questions run long. */
.profile-qa-block {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--table-border);
}
.profile-qa-block:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.profile-qa-block:first-child {
    padding-top: 0;
}
.profile-qa-question {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--header-text);
    margin-bottom: 0.55rem;
}
.profile-qa-answer {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1d4ed8;
    background-color: rgba(59, 130, 246, 0.08);
    padding: 0.4rem 0.9rem;
    border-radius: 8px;
}
.profile-qa-answer.profile-qa-empty {
    font-weight: 500;
    font-style: italic;
    color: #94a3b8;
    background-color: #f1f5f9;
}

/* ==========================================================================
   Back link — standard "return to the previous list/page" control, used
   above profile banners and other detail/sub-views app-wide. Works on both
   <a href="..."> (route navigation) and <button wire:click="..."> (Livewire
   state toggles, e.g. Download ID) since it's just a class.
   ========================================================================== */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    background-color: #ffffff;
    border: 1px solid var(--table-border);
    color: var(--secondary-color);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.back-link i {
    font-size: 0.75rem;
}
.back-link:hover,
.back-link:focus {
    color: var(--sidebar-accent);
    border-color: var(--sidebar-accent);
    background-color: rgba(59, 130, 246, 0.06);
    text-decoration: none;
}

@media (max-width: 767.98px) {
    table.table-mobile-stack thead {
        display: none;
    }
    table.table-mobile-stack,
    table.table-mobile-stack tbody,
    table.table-mobile-stack tr,
    table.table-mobile-stack td {
        display: block;
        width: 100%;
    }
    table.table-mobile-stack tr {
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        overflow: hidden;
    }
    /* Label above value (not side-by-side) — a label:value flex row looked
       fine for short plain-text cells, but squeezed rich cells (an avatar +
       name, or a badge + multi-line address like Outlet's "Name of Stores")
       into a narrow column and wrapped them illegibly. Stacking the value
       below its label gives it the full card width regardless of what's
       inside. */
    table.table-mobile-stack td {
        display: block;
        text-align: left;
        padding: 0.5rem 0.75rem;
        border: none;
        border-bottom: 1px solid #eee;
    }
    table.table-mobile-stack td:last-child {
        border-bottom: none;
    }
    table.table-mobile-stack td[data-title]::before {
        content: attr(data-title);
        display: block;
        font-weight: 600;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #94a3b8;
        margin-bottom: 0.2rem;
    }
    table.table-mobile-stack td:not([data-title]) {
        display: none;
    }
}

/* ==========================================================================
   Card-header toolbars (action-link menu + search/filter row)
   Most module pages copy-paste the same header pattern: a bootstrap
   navbar-expand-lg wrapping the page's action links (Add X, Settings, ...)
   with no toggler button ever added. Bootstrap's `.collapse:not(.show)`
   rule hides that menu completely below the lg breakpoint (992px) — not
   just on phones — since nothing ever adds `.show`. Force it open and let
   it wrap instead. The same header usually also has a search input plus
   filter <select>s in a plain d-flex row that only fits on wide screens;
   make that wrap and stack full-width on mobile.
   ========================================================================== */
.card-header nav.navbar {
    position: relative;
}
.card-header .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
}
.card-header .navbar-nav {
    /* Bootstrap's .navbar-nav defaults to flex-direction: column (it expects
       to live inside a collapsed mobile drawer). Since it's forced open at
       all sizes above, override to row + wrap so the pill buttons wrap like
       chips instead of each stretching to the full container width. */
    flex-direction: row;
    flex-wrap: wrap;
}
.card-header .table-header-btn {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

/* Under 768px, wrapping 3-4 pill buttons inline still reads as a cluttered
   stack. Collapse them behind a single "Actions" toggle instead (button is
   injected by JS in scripts.blade.php — same manual-toggle approach as the
   sidebar user menu, since Bootstrap's own JS toggles are unreliable here). */
.navbar-mobile-actions-toggle {
    display: none;
}
@media (max-width: 767.98px) {
    .navbar-mobile-actions-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 13px;
        font-weight: 600;
        color: var(--sidebar-accent);
        background-color: rgba(59, 130, 246, 0.1);
        border: 1px solid rgba(59, 130, 246, 0.2);
        border-radius: 6px;
        padding: 0.4rem 0.75rem;
    }
    /* Bootstrap's .navbar defaults to justify-content: space-between, which
       was leaving the now-empty second flex child (.container-fluid, its
       real content hidden behind the toggle) claiming the row's remaining
       width — pushing the toggle away from the row's right edge instead of
       flush against it, out of line with the search field below. */
    .card-header nav.navbar {
        justify-content: flex-end;
    }
    /* The nav sits wherever it fell in each page's original desktop layout
       — flush right on some pages, flush left on others (e.g. Outlet, where
       it's the first child ahead of the checkbox filters). An auto left
       margin pushes it to the right edge of its own row regardless of the
       parent's own justify-content, so the Actions button lands in the
       same place on every page. */
    .card-header nav.navbar {
        margin-left: auto;
    }
    .card-header .navbar-collapse {
        display: none !important;
    }
    .card-header .navbar-collapse.mobile-actions-open {
        display: flex !important;
        position: absolute;
        top: 100%;
        right: 0;
        margin-top: 0.4rem;
        z-index: 30;
        background: #fff;
        border: 1px solid var(--table-border);
        border-radius: 8px;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
        padding: 0.5rem;
        min-width: 200px;
    }
    .card-header .navbar-collapse.mobile-actions-open .navbar-nav {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0.25rem;
        width: 100%;
        /* Cancel Bootstrap's .ms-auto on this <ul> (it's meant to right-align
           the list in the normal horizontal navbar) — in this vertical
           dropdown it instead pushed the whole column right, leaving a gap
           on the left where the auto margin landed. */
        margin-left: 0 !important;
    }
    .card-header .navbar-collapse.mobile-actions-open .navbar-nav .nav-link {
        width: 100%;
        justify-content: flex-start;
    }
    .card-header .d-flex.mt-2 {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }
    .card-header .d-flex.mt-2 > div {
        width: 100% !important;
        margin-right: 0 !important;
    }
    /* Outlet's "All Stores" status filter has an inline max-width so it
       doesn't hog the desktop toolbar next to the action links — that same
       cap left a dead gap on the right on mobile, where it's the only
       thing on its row. */
    .card-header .ds-checkbox-filter select {
        max-width: none !important;
        width: 100%;
    }
}

/* ==========================================================================
   Login page
   ========================================================================== */
.login-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.06) 0, transparent 40%),
        radial-gradient(circle at 85% 0%, rgba(255, 255, 255, 0.05) 0, transparent 35%),
        linear-gradient(135deg, var(--sidebar-bg) 0%, var(--sidebar-bg-hover) 100%);
}
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.login-card {
    width: 100%;
    max-width: 420px;
    border-radius: 20px;
    box-shadow: 0 20px 50px -12px rgba(15, 23, 42, 0.35), 0 4px 12px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}
.login-card::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--sidebar-accent), #60a5fa);
}
.login-icon-badge {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.12);
    color: var(--sidebar-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}
.login-card .form-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-bottom: 0.4rem;
}
.login-card .input-group-text {
    background-color: #f8fafc;
    border-color: #e2e8f0;
    color: #94a3b8;
    border-radius: 10px 0 0 10px;
}
.login-card .input-group .form-control,
.login-card .input-group .btn-outline-secondary {
    border-color: #e2e8f0;
}
.login-card .input-group .btn-outline-secondary {
    border-radius: 0 10px 10px 0;
    color: #94a3b8;
}
.login-card .form-control {
    padding: 0.6rem 0.9rem;
}
.login-card .form-control:focus {
    border-color: var(--sidebar-accent);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.15);
    z-index: 3;
}
/* ==========================================================================
   Vehicle Maintenance status pills — solid-color badges for the Maintenance
   Dashboard and per-vehicle tables (white table backgrounds, unlike the
   translucent .profile-status-badge variants above which sit on the dark
   profile banner).
   ========================================================================== */
.vh-status-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    color: #ffffff;
    white-space: nowrap;
}
.vh-status-badge.status-overdue {
    background-color: #d97706;
}
.vh-status-badge.status-due-today {
    background-color: #dc2626;
}
.vh-status-badge.status-due-soon {
    background-color: #f59e0b;
}
.vh-status-badge.status-on-time {
    background-color: #16a34a;
}
.vh-status-badge.status-pending-jo {
    background-color: #7c3aed;
}
.vh-status-badge.status-open {
    background-color: #7c3aed;
}
.vh-status-badge.status-closed {
    background-color: #64748b;
}

.outlet-form .form-label {
    font-size: 12px;
}
.badge-verified {
    background-color: #16a34a;
    color: #fff;
}

.login-card .btn-primary {
    border-radius: 10px;
    padding: 0.65rem 1rem;
    font-weight: 600;
}

/* ==========================================================================
   Sign-in page (split layout): brand panel on the left, form on the right.
   The two-factor and change-password pages still use .login-card above.
   ========================================================================== */
.auth-page {
    min-height: 100vh;
    background: #ffffff;
}
.auth-split {
    min-height: 100vh;
    display: flex;
}

/* Brand panel */
.auth-brand {
    position: relative;
    flex: 0 0 46%;
    max-width: 640px;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem 3.5rem;
    color: #ffffff;
    overflow: hidden;
    background:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(150deg, #0f172a 0%, var(--sidebar-bg) 55%, #1e3a8a 130%);
}
.auth-brand-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}
.auth-brand-glow-1 {
    width: 380px;
    height: 380px;
    top: -120px;
    right: -100px;
    background: rgba(59, 130, 246, 0.35);
}
.auth-brand-glow-2 {
    width: 300px;
    height: 300px;
    bottom: -110px;
    left: -80px;
    background: rgba(220, 38, 38, 0.22);
}
.auth-brand > :not(.auth-brand-glow) {
    position: relative;
    z-index: 1;
}
.auth-brand-top {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.auth-logo-ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.08), 0 10px 25px -8px rgba(0, 0, 0, 0.5);
}
.auth-logo-ring img {
    width: 88%;
    height: 88%;
    object-fit: contain;
}
.auth-brand-name {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.auth-brand-title {
    font-size: clamp(2rem, 2.6vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin-bottom: 1rem;
}
.auth-brand-lead {
    color: rgba(226, 232, 240, 0.75);
    font-size: 1.02rem;
    line-height: 1.6;
    max-width: 30rem;
    margin-bottom: 2.25rem;
}
.auth-brand-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.9rem;
}
.auth-brand-features li {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-weight: 500;
    color: rgba(241, 245, 249, 0.92);
}
.auth-brand-features li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #93c5fd;
    font-size: 0.95rem;
}
.auth-brand-foot {
    font-size: 0.8rem;
    color: rgba(203, 213, 225, 0.55);
}

/* Form side */
.auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    background:
        radial-gradient(circle at 100% 0%, rgba(59, 130, 246, 0.06), transparent 45%),
        #ffffff;
}
.auth-form-panel {
    width: 100%;
    max-width: 400px;
    animation: auth-rise 0.5s ease-out both;
}
@keyframes auth-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .auth-form-panel { animation: none; }
}
.auth-mobile-logo {
    margin-bottom: 1.75rem;
}
.auth-mobile-logo .auth-logo-ring {
    width: 64px;
    height: 64px;
    box-shadow: 0 0 0 6px #f1f5f9, 0 10px 25px -10px rgba(15, 23, 42, 0.35);
}
.auth-title {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #0f172a;
    margin-bottom: 0.35rem;
}
.auth-subtitle {
    color: #64748b;
    margin-bottom: 2rem;
}
.auth-form-panel .form-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.45rem;
}
.auth-form-panel .input-group {
    border-radius: 12px;
    transition: box-shadow 0.15s ease;
}
.auth-form-panel .input-group:focus-within {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
}
.auth-form-panel .input-group-text,
.auth-form-panel .input-group .form-control,
.auth-form-panel .input-group .btn-outline-secondary {
    background-color: #f8fafc;
    border-color: #e2e8f0;
    min-height: 50px;
}
.auth-form-panel .input-group-text {
    color: #94a3b8;
    border-radius: 12px 0 0 12px;
    border-right: 0;
    padding-left: 1rem;
}
.auth-form-panel .input-group .form-control {
    border-left: 0;
    padding-left: 0.35rem;
    font-size: 0.97rem;
}
.auth-form-panel .input-group .form-control:not(:has(+ .btn)) {
    border-radius: 0 12px 12px 0;
}
.auth-form-panel .input-group .btn-outline-secondary {
    border-left: 0;
    color: #94a3b8;
    border-radius: 0 12px 12px 0;
}
.auth-form-panel .input-group .btn-outline-secondary:hover {
    color: #475569;
    background-color: #f1f5f9;
}
.auth-form-panel .input-group:focus-within .input-group-text,
.auth-form-panel .input-group:focus-within .form-control,
.auth-form-panel .input-group:focus-within .btn-outline-secondary {
    background-color: #ffffff;
    border-color: var(--sidebar-accent);
}
.auth-form-panel .input-group:focus-within .input-group-text {
    color: var(--sidebar-accent);
}
.auth-form-panel .form-control:focus {
    box-shadow: none;
}
.auth-form-panel .form-control.is-invalid,
.auth-form-panel .input-group:has(.is-invalid) .input-group-text,
.auth-form-panel .input-group:has(.is-invalid) .btn-outline-secondary {
    border-color: #dc3545;
}
.auth-form-panel a[wire\:click\.prevent="openForgotModal"] {
    font-weight: 500;
    text-decoration: none;
}
.auth-form-panel a[wire\:click\.prevent="openForgotModal"]:hover {
    text-decoration: underline;
}
.auth-form-panel button[type="submit"].btn-primary {
    min-height: 50px;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 0;
    background: linear-gradient(135deg, #2563eb 0%, var(--sidebar-accent) 100%);
    box-shadow: 0 10px 22px -10px rgba(37, 99, 235, 0.7);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.auth-form-panel button[type="submit"].btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px -10px rgba(37, 99, 235, 0.8);
}
.auth-form-panel .alert {
    border-radius: 12px;
    border: 0;
}
.auth-secure-note {
    margin: 2rem 0 0;
    text-align: center;
    font-size: 0.8rem;
    color: #94a3b8;
}
.auth-secure-note i {
    margin-right: 0.3rem;
}

/* Privacy notice (/privacy): same split layout, wider reading column, top-aligned. */
.auth-brand-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
}
.auth-main-doc {
    align-items: flex-start;
}
.auth-doc-panel {
    max-width: 680px;
    color: #334155;
    line-height: 1.65;
    overflow-wrap: break-word;
}
.auth-doc-panel h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin: 1.75rem 0 0.5rem;
}
.auth-doc-panel ul {
    padding-left: 1.2rem;
}
.auth-doc-panel li {
    margin-bottom: 0.45rem;
}
/* ==========================================================================
   Settings > Activity Logs timeline
   ========================================================================== */
.activity-log-day {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--header-text);
    padding: 0.9rem 0 0.4rem;
    border-bottom: 1px solid var(--table-border);
    margin-bottom: 0.25rem;
}
.activity-log-entry {
    display: flex;
    gap: 0.85rem;
    padding: 0.8rem 0.25rem;
    border-bottom: 1px solid #f1f5f9;
}
.activity-log-entry:last-child {
    border-bottom: none;
}
.activity-log-avatar {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #e2e8f0;
    color: #334155;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.activity-log-avatar-badge {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background-color: var(--event-color);
    color: #ffffff;
    font-size: 0.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.activity-log-body {
    min-width: 0;
    flex: 1;
}
.activity-log-headline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.92rem;
    color: var(--header-text);
}
.activity-log-record {
    overflow-wrap: anywhere;
}
.activity-log-event {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    color: var(--event-color);
    background-color: #f8fafc;
    background-color: color-mix(in srgb, var(--event-color) 12%, transparent);
    border: 1px solid currentColor;
    border: 1px solid color-mix(in srgb, var(--event-color) 30%, transparent);
}
.activity-log-summary {
    font-size: 0.87rem;
    color: #475569;
    margin-top: 0.15rem;
    overflow-wrap: anywhere;
}
.activity-log-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.35rem;
}
.activity-log-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    padding: 0.15rem 0.55rem;
    border-radius: 6px;
    background-color: #f8fafc;
    border: 1px solid var(--table-border);
    margin: 0 0.25rem 0.25rem 0;
    overflow-wrap: anywhere;
}
.activity-log-chip del {
    color: #b91c1c;
}
.activity-log-chip ins {
    color: #15803d;
    text-decoration: none;
    font-weight: 600;
}
.activity-log-chip .fa-arrow-right {
    font-size: 0.65rem;
    color: #94a3b8;
}
.activity-log-chip-granted {
    background-color: rgba(22, 163, 74, 0.08);
    border-color: rgba(22, 163, 74, 0.3);
    color: #15803d;
}
.activity-log-chip-revoked {
    background-color: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.3);
    color: #b91c1c;
}
.activity-log-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.9rem;
    font-size: 0.76rem;
    color: #94a3b8;
    margin-top: 0.35rem;
}
.activity-log-meta i {
    margin-right: 0.2rem;
}
.activity-log-toggle {
    color: var(--sidebar-accent);
    text-decoration: none;
    font-weight: 600;
}
.activity-log-toggle .fa-chevron-down {
    font-size: 0.6rem;
    transition: transform 0.15s ease;
}
.activity-log-toggle[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}
.activity-log-details {
    margin-top: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    background-color: #f8fafc;
    border: 1px solid var(--table-border);
}
.activity-log-diff {
    font-size: 0.82rem;
    background-color: transparent;
}
.activity-log-diff th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
    font-weight: 600;
    background-color: transparent;
}
.activity-log-diff td {
    background-color: transparent;
    overflow-wrap: anywhere;
}
.activity-log-diff td.activity-log-old {
    color: #b91c1c;
}
.activity-log-diff td.activity-log-new {
    color: #15803d;
    font-weight: 600;
}
.activity-log-loading {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
}
@media (max-width: 767.98px) {
    .activity-log-entry {
        gap: 0.65rem;
    }
    .activity-log-avatar {
        width: 34px;
        height: 34px;
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   Settings > Security Checks (security:daily-check results)
   ========================================================================== */
.security-check-item {
    padding: 0.9rem 1.25rem;
}
.security-check-icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}
.security-check-findings {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
}
.security-check-findings li {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.2rem 0;
}
.security-check-findings .badge {
    flex-shrink: 0;
    min-width: 4.5rem;
}
.notif-icon.notif-icon-critical {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.18), rgba(220, 38, 38, 0.07));
    box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.12);
    color: #dc2626;
}
.notif-icon.notif-icon-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.08));
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.14);
    color: #d97706;
}