/**
 * Premium background — ekstraksi dari PM FuelLog Premium BG (animasi garis + kilau kubus).
 * Dipakai oleh auth (login) dan dash-body.
 */

@keyframes vms-shine-lines {
    0% {
        background-position: 300% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

/* Denyut kilau pada pola kubus — dipakai di light mode (dashboard + login) */

@keyframes vms-cube-bling-light {
    0%,
    100% {
        filter: brightness(1) saturate(1);
    }
    20% {
        filter: brightness(1.12) saturate(1.2);
    }
    40% {
        filter: brightness(1.04) saturate(1.05);
    }
    55% {
        filter: brightness(1.2) saturate(1.35);
    }
    72% {
        filter: brightness(1.08) saturate(1.15);
    }
    88% {
        filter: brightness(1.16) saturate(1.28);
    }
}

@keyframes vms-pulse-glow {
    0%,
    100% {
        filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.6));
        opacity: 0.6;
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(96, 165, 250, 0.9));
        opacity: 1;
    }
}

@keyframes vms-flow-dashed {
    to {
        stroke-dashoffset: -36;
    }
}

@keyframes vms-wave-motion-1 {
    0%,
    100% {
        transform: translateY(0) scaleY(1) rotate(0deg);
    }
    33% {
        transform: translateY(-12px) scaleY(1.05) rotate(0.5deg);
    }
    66% {
        transform: translateY(8px) scaleY(0.95) rotate(-0.5deg);
    }
}

@keyframes vms-wave-motion-2 {
    0%,
    100% {
        transform: translateY(0) scaleY(1) rotate(0deg);
    }
    33% {
        transform: translateY(12px) scaleY(0.95) rotate(-0.5deg);
    }
    66% {
        transform: translateY(-8px) scaleY(1.05) rotate(0.5deg);
    }
}

.vms-wave-line-solid {
    animation:
        vms-pulse-glow 4s infinite ease-in-out,
        vms-wave-motion-1 8s infinite ease-in-out;
    transform-origin: center;
    transform-box: fill-box;
}

.vms-wave-line-dashed {
    animation:
        vms-pulse-glow 3.5s infinite ease-in-out,
        vms-flow-dashed 1.5s linear infinite,
        vms-wave-motion-2 7s infinite ease-in-out;
    transform-origin: center;
    transform-box: fill-box;
}

*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}

/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
 */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Figtree, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

input:where([type='text']),input:where(:not([type])),input:where([type='email']),input:where([type='url']),input:where([type='password']),input:where([type='number']),input:where([type='date']),input:where([type='datetime-local']),input:where([type='month']),input:where([type='search']),input:where([type='tel']),input:where([type='time']),input:where([type='week']),select:where([multiple]),textarea,select {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background-color: #fff;
    border-color: #6b7280;
    border-width: 1px;
    border-radius: 0px;
    padding-top: 0.5rem;
    padding-right: 0.75rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-shadow: 0 0 #0000;
}

input:where([type='text']):focus, input:where(:not([type])):focus, input:where([type='email']):focus, input:where([type='url']):focus, input:where([type='password']):focus, input:where([type='number']):focus, input:where([type='date']):focus, input:where([type='datetime-local']):focus, input:where([type='month']):focus, input:where([type='search']):focus, input:where([type='tel']):focus, input:where([type='time']):focus, input:where([type='week']):focus, select:where([multiple]):focus, textarea:focus, select:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #2563eb;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-color: #2563eb;
}

input::-moz-placeholder, textarea::-moz-placeholder {
    color: #6b7280;
    opacity: 1;
}

input::placeholder,textarea::placeholder {
    color: #6b7280;
    opacity: 1;
}

::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}

::-webkit-date-and-time-value {
    min-height: 1.5em;
    text-align: inherit;
}

::-webkit-datetime-edit {
    display: inline-flex;
}

::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
    padding-top: 0;
    padding-bottom: 0;
}

select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
}

select:where([multiple]),select:where([size]:not([size="1"])) {
    background-image: initial;
    background-position: initial;
    background-repeat: unset;
    background-size: initial;
    padding-right: 0.75rem;
    -webkit-print-color-adjust: unset;
            print-color-adjust: unset;
}

input:where([type='checkbox']),input:where([type='radio']) {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    padding: 0;
    -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    flex-shrink: 0;
    height: 1rem;
    width: 1rem;
    color: #2563eb;
    background-color: #fff;
    border-color: #6b7280;
    border-width: 1px;
    --tw-shadow: 0 0 #0000;
}

input:where([type='checkbox']) {
    border-radius: 0px;
}

input:where([type='radio']) {
    border-radius: 100%;
}

input:where([type='checkbox']):focus,input:where([type='radio']):focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #2563eb;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

input:where([type='checkbox']):checked,input:where([type='radio']):checked {
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

input:where([type='checkbox']):checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

@media (forced-colors: active)  {

    input:where([type='checkbox']):checked {
        -webkit-appearance: auto;
           -moz-appearance: auto;
                appearance: auto;
    }
}

input:where([type='radio']):checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

@media (forced-colors: active)  {

    input:where([type='radio']):checked {
        -webkit-appearance: auto;
           -moz-appearance: auto;
                appearance: auto;
    }
}

input:where([type='checkbox']):checked:hover,input:where([type='checkbox']):checked:focus,input:where([type='radio']):checked:hover,input:where([type='radio']):checked:focus {
    border-color: transparent;
    background-color: currentColor;
}

input:where([type='checkbox']):indeterminate {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

@media (forced-colors: active)  {

    input:where([type='checkbox']):indeterminate {
        -webkit-appearance: auto;
           -moz-appearance: auto;
                appearance: auto;
    }
}

input:where([type='checkbox']):indeterminate:hover,input:where([type='checkbox']):indeterminate:focus {
    border-color: transparent;
    background-color: currentColor;
}

input:where([type='file']) {
    background: unset;
    border-color: inherit;
    border-width: 0;
    border-radius: 0;
    padding: 0;
    font-size: unset;
    line-height: inherit;
}

input:where([type='file']):focus {
    outline: 1px solid ButtonText;
    outline: 1px auto -webkit-focus-ring-color;
}

.\!container {
    width: 100% !important;
}

.container {
    width: 100%;
}

@media (min-width: 640px) {

    .\!container {
        max-width: 640px !important;
    }

    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {

    .\!container {
        max-width: 768px !important;
    }

    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {

    .\!container {
        max-width: 1024px !important;
    }

    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {

    .\!container {
        max-width: 1280px !important;
    }

    .container {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {

    .\!container {
        max-width: 1536px !important;
    }

    .container {
        max-width: 1536px;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.visible {
    visibility: visible;
}

.collapse {
    visibility: collapse;
}

.fixed {
    position: fixed;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.sticky {
    position: sticky;
}

.inset-0 {
    inset: 0px;
}

.bottom-0 {
    bottom: 0px;
}

.end-0 {
    inset-inline-end: 0px;
}

.left-0 {
    left: 0px;
}

.right-0 {
    right: 0px;
}

.start-0 {
    inset-inline-start: 0px;
}

.top-0 {
    top: 0px;
}

.top-\[-1px\] {
    top: -1px;
}

.-z-10 {
    z-index: -10;
}

.z-50 {
    z-index: 50;
}

.col-span-2 {
    grid-column: span 2 / span 2;
}

.col-span-3 {
    grid-column: span 3 / span 3;
}

.m-0 {
    margin: 0px;
}

.mx-0 {
    margin-left: 0px;
    margin-right: 0px;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.-me-2 {
    margin-inline-end: -0.5rem;
}

.-ml-px {
    margin-left: -1px;
}

.-mt-3 {
    margin-top: -0.75rem;
}

.-mt-5 {
    margin-top: -1.25rem;
}

.-mt-px {
    margin-top: -1px;
}

.mb-0 {
    margin-bottom: 0px;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-5 {
    margin-bottom: 1.25rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

.ml-1 {
    margin-left: 0.25rem;
}

.ml-12 {
    margin-left: 3rem;
}

.ml-2 {
    margin-left: 0.5rem;
}

.ml-4 {
    margin-left: 1rem;
}

.ml-auto {
    margin-left: auto;
}

.mr-2 {
    margin-right: 0.5rem;
}

.ms-1 {
    margin-inline-start: 0.25rem;
}

.ms-3 {
    margin-inline-start: 0.75rem;
}

.mt-1 {
    margin-top: 0.25rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-3 {
    margin-top: 0.75rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-6 {
    margin-top: 1.5rem;
}

.mt-8 {
    margin-top: 2rem;
}

.block {
    display: block;
}

.inline {
    display: inline;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.table {
    display: table;
}

.grid {
    display: grid;
}

.hidden {
    display: none;
}

.h-0 {
    height: 0px;
}

.h-10 {
    height: 2.5rem;
}

.h-11 {
    height: 2.75rem;
}

.h-16 {
    height: 4rem;
}

.h-2\.5 {
    height: 0.625rem;
}

.h-24 {
    height: 6rem;
}

.h-3 {
    height: 0.75rem;
}

.h-4 {
    height: 1rem;
}

.h-5 {
    height: 1.25rem;
}

.h-6 {
    height: 1.5rem;
}

.h-8 {
    height: 2rem;
}

.h-9 {
    height: 2.25rem;
}

.h-\[18px\] {
    height: 18px;
}

.h-\[56px\] {
    height: 56px;
}

.min-h-dvh {
    min-height: 100dvh;
}

.min-h-screen {
    min-height: 100vh;
}

.w-10 {
    width: 2.5rem;
}

.w-2\.5 {
    width: 0.625rem;
}

.w-24 {
    width: 6rem;
}

.w-3 {
    width: 0.75rem;
}

.w-3\/4 {
    width: 75%;
}

.w-4 {
    width: 1rem;
}

.w-48 {
    width: 12rem;
}

.w-5 {
    width: 1.25rem;
}

.w-6 {
    width: 1.5rem;
}

.w-8 {
    width: 2rem;
}

.w-\[18px\] {
    width: 18px;
}

.w-auto {
    width: auto;
}

.w-fit {
    width: -moz-fit-content;
    width: fit-content;
}

.w-full {
    width: 100%;
}

.min-w-0 {
    min-width: 0px;
}

.min-w-5 {
    min-width: 1.25rem;
}

.min-w-6 {
    min-width: 1.5rem;
}

.max-w-6xl {
    max-width: 72rem;
}

.max-w-7xl {
    max-width: 80rem;
}

.max-w-full {
    max-width: 100%;
}

.max-w-xl {
    max-width: 36rem;
}

.flex-1 {
    flex: 1 1 0%;
}

.flex-shrink {
    flex-shrink: 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.shrink-0 {
    flex-shrink: 0;
}

.grow {
    flex-grow: 1;
}

.border-collapse {
    border-collapse: collapse;
}

.origin-top {
    transform-origin: top;
}

.-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-1\/2 {
    --tw-translate-x: 50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-0 {
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-4 {
    --tw-translate-y: 1rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-100 {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-95 {
    --tw-scale-x: .95;
    --tw-scale-y: .95;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-default {
    cursor: default;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

.cursor-pointer {
    cursor: pointer;
}

.resize {
    resize: both;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-start {
    align-items: flex-start;
}

.items-center {
    align-items: center;
}

.items-baseline {
    align-items: baseline;
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-items-center {
    justify-items: center;
}

.gap-0\.5 {
    gap: 0.125rem;
}

.gap-1 {
    gap: 0.25rem;
}

.gap-1\.5 {
    gap: 0.375rem;
}

.gap-12 {
    gap: 3rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-2\.5 {
    gap: 0.625rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-5 {
    gap: 1.25rem;
}

.gap-8 {
    gap: 2rem;
}

.space-x-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(2rem * var(--tw-space-x-reverse));
    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.divide-x > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-x-reverse: 0;
    border-right-width: calc(1px * var(--tw-divide-x-reverse));
    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-neutral-200 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(229 229 229 / var(--tw-divide-opacity, 1));
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-visible {
    overflow: visible;
}

.overflow-x-auto {
    overflow-x: auto;
}

.overflow-y-auto {
    overflow-y: auto;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.overflow-y-hidden {
    overflow-y: hidden;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.break-all {
    word-break: break-all;
}

.rounded {
    border-radius: 0.25rem;
}

.rounded-2xl {
    border-radius: 1rem;
}

.rounded-full {
    border-radius: 9999px;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-md {
    border-radius: 0.375rem;
}

.rounded-xl {
    border-radius: 0.75rem;
}

.rounded-b-lg {
    border-bottom-right-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

.rounded-l-md {
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}

.rounded-r-md {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

.border {
    border-width: 1px;
}

.border-0 {
    border-width: 0px;
}

.border-x {
    border-left-width: 1px;
    border-right-width: 1px;
}

.border-b {
    border-bottom-width: 1px;
}

.border-b-2 {
    border-bottom-width: 2px;
}

.border-l-4 {
    border-left-width: 4px;
}

.border-r {
    border-right-width: 1px;
}

.border-t {
    border-top-width: 1px;
}

.border-dashed {
    border-style: dashed;
}

.border-dotted {
    border-style: dotted;
}

.border-none {
    border-style: none;
}

.border-gray-100 {
    --tw-border-opacity: 1;
    border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}

.border-gray-200 {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.border-gray-300 {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.border-gray-400 {
    --tw-border-opacity: 1;
    border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}

.border-indigo-400 {
    --tw-border-opacity: 1;
    border-color: rgb(129 140 248 / var(--tw-border-opacity, 1));
}

.border-neutral-200 {
    --tw-border-opacity: 1;
    border-color: rgb(229 229 229 / var(--tw-border-opacity, 1));
}

.border-neutral-300 {
    --tw-border-opacity: 1;
    border-color: rgb(212 212 212 / var(--tw-border-opacity, 1));
}

.border-slate-700\/30 {
    border-color: rgb(51 65 85 / 0.3);
}

.border-slate-700\/50 {
    border-color: rgb(51 65 85 / 0.5);
}

.border-transparent {
    border-color: transparent;
}

.bg-amber-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(253 230 138 / var(--tw-bg-opacity, 1));
}

.bg-amber-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}

.bg-black\/10 {
    background-color: rgb(0 0 0 / 0.1);
}

.bg-blue-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.bg-blue-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.bg-blue-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.bg-emerald-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));
}

.bg-emerald-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}

.bg-gray-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.bg-gray-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.bg-gray-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}

.bg-gray-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.bg-green-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}

.bg-indigo-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}

.bg-neutral-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}

.bg-neutral-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(82 82 82 / var(--tw-bg-opacity, 1));
}

.bg-red-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

.bg-red-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.bg-rose-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 205 211 / var(--tw-bg-opacity, 1));
}

.bg-rose-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1));
}

.bg-rose-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(225 29 72 / var(--tw-bg-opacity, 1));
}

.bg-slate-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.bg-transparent {
    background-color: transparent;
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/5 {
    background-color: rgb(255 255 255 / 0.05);
}

.bg-white\/\[2\%\] {
    background-color: rgb(255 255 255 / 2%);
}

.fill-current {
    fill: currentColor;
}

.p-1 {
    padding: 0.25rem;
}

.p-2 {
    padding: 0.5rem;
}

.p-2\.5 {
    padding: 0.625rem;
}

.p-4 {
    padding: 1rem;
}

.p-5 {
    padding: 1.25rem;
}

.p-6 {
    padding: 1.5rem;
}

.px-0 {
    padding-left: 0px;
    padding-right: 0px;
}

.px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.px-1\.5 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}

.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.px-\[6px\] {
    padding-left: 6px;
    padding-right: 6px;
}

.py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
}

.py-0\.5 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}

.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.pb-0 {
    padding-bottom: 0px;
}

.pb-1 {
    padding-bottom: 0.25rem;
}

.pb-3 {
    padding-bottom: 0.75rem;
}

.pe-4 {
    padding-inline-end: 1rem;
}

.pl-4 {
    padding-left: 1rem;
}

.pr-2\.5 {
    padding-right: 0.625rem;
}

.ps-3 {
    padding-inline-start: 0.75rem;
}

.pt-1 {
    padding-top: 0.25rem;
}

.pt-14 {
    padding-top: 3.5rem;
}

.pt-2 {
    padding-top: 0.5rem;
}

.pt-4 {
    padding-top: 1rem;
}

.pt-8 {
    padding-top: 2rem;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-start {
    text-align: start;
}

.font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.font-sans {
    font-family: Figtree, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.text-\[10px\] {
    font-size: 10px;
}

.text-\[13px\] {
    font-size: 13px;
}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.text-xs\/none {
    font-size: 0.75rem;
    line-height: 1;
}

.font-bold {
    font-weight: 700;
}

.font-light {
    font-weight: 300;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.uppercase {
    text-transform: uppercase;
}

.italic {
    font-style: italic;
}

.leading-3 {
    line-height: .75rem;
}

.leading-4 {
    line-height: 1rem;
}

.leading-5 {
    line-height: 1.25rem;
}

.leading-7 {
    line-height: 1.75rem;
}

.leading-tight {
    line-height: 1.25;
}

.tracking-wider {
    letter-spacing: 0.05em;
}

.tracking-widest {
    letter-spacing: 0.1em;
}

.text-amber-900 {
    --tw-text-opacity: 1;
    color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}

.text-black {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.text-blue-500 {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.text-blue-900 {
    --tw-text-opacity: 1;
    color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}

.text-emerald-500 {
    --tw-text-opacity: 1;
    color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}

.text-emerald-900 {
    --tw-text-opacity: 1;
    color: rgb(6 78 59 / var(--tw-text-opacity, 1));
}

.text-gray-200 {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}

.text-gray-300 {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.text-gray-400 {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-gray-600 {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-700 {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.text-gray-800 {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.text-gray-900 {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.text-green-600 {
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.text-green-700 {
    --tw-text-opacity: 1;
    color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}

.text-indigo-700 {
    --tw-text-opacity: 1;
    color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}

.text-neutral-100 {
    --tw-text-opacity: 1;
    color: rgb(245 245 245 / var(--tw-text-opacity, 1));
}

.text-neutral-400 {
    --tw-text-opacity: 1;
    color: rgb(163 163 163 / var(--tw-text-opacity, 1));
}

.text-neutral-500 {
    --tw-text-opacity: 1;
    color: rgb(115 115 115 / var(--tw-text-opacity, 1));
}

.text-neutral-600 {
    --tw-text-opacity: 1;
    color: rgb(82 82 82 / var(--tw-text-opacity, 1));
}

.text-neutral-800 {
    --tw-text-opacity: 1;
    color: rgb(38 38 38 / var(--tw-text-opacity, 1));
}

.text-neutral-900 {
    --tw-text-opacity: 1;
    color: rgb(23 23 23 / var(--tw-text-opacity, 1));
}

.text-neutral-950 {
    --tw-text-opacity: 1;
    color: rgb(10 10 10 / var(--tw-text-opacity, 1));
}

.text-red-600 {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.text-red-700 {
    --tw-text-opacity: 1;
    color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.text-rose-900 {
    --tw-text-opacity: 1;
    color: rgb(136 19 55 / var(--tw-text-opacity, 1));
}

.text-slate-400 {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.text-slate-500 {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.text-slate-700 {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.text-slate-800 {
    --tw-text-opacity: 1;
    color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.underline {
    text-decoration-line: underline;
}

.decoration-neutral-400 {
    text-decoration-color: #a3a3a3;
}

.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.opacity-0 {
    opacity: 0;
}

.opacity-100 {
    opacity: 1;
}

.opacity-75 {
    opacity: 0.75;
}

.opacity-90 {
    opacity: 0.9;
}

.shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-none {
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline {
    outline-style: solid;
}

.ring {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-1 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-black {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity, 1));
}

.ring-gray-300 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1));
}

.ring-opacity-5 {
    --tw-ring-opacity: 0.05;
}

.blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow {
    --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-filter {
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.duration-150 {
    transition-duration: 150ms;
}

.duration-200 {
    transition-duration: 200ms;
}

.duration-300 {
    transition-duration: 300ms;
}

.duration-75 {
    transition-duration: 75ms;
}

.ease-in {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* ── FOUC prevention: html.dark is set by inline head script before first paint ── */

html.dark {
    background: linear-gradient(135deg, #0A2342 0%, #0f172a 52%, #050B14 100%);
    color-scheme: dark;
}

html.dark .dash-body {
    background: linear-gradient(135deg, #0A2342 0%, #0f172a 52%, #050B14 100%);
    color: #f1f5f9;
    color-scheme: dark;
}

:root {
    --dash-blue: #0A2342;
    --dash-yellow: #D4AF37;
    --dash-gold: #D4AF37;
    --dash-navy-mid: #0e1f3a;
    --dash-navy-dark: #050B14;
    --dash-bg: #f3f4f6;
    /* Chrome (sidebar + topbar) tokens */
    --dash-chrome-sidebar-light: linear-gradient(180deg, #1a3a72 0%, #0e2a52 50%, #0a1f3d 100%);
    --dash-chrome-sidebar-dark:  #060c18;
    --dash-chrome-topbar-light:  #0e2a52;
    --dash-chrome-topbar-dark:   rgba(11, 31, 66, 0.97);
    /* Role chip — glass style (dash-chip-manager pattern) */
    --role-chip-admin-bg: rgba(146, 110, 0, 0.55);
    --role-chip-admin-border: rgba(252, 211, 77, 0.85);
    --role-chip-admin-text: #fef3c7;
    --profile-drawer-role-chip-admin-bg: rgba(30, 58, 138, 0.65);
    --profile-drawer-role-chip-admin-border: #d4af37;
    --profile-drawer-role-chip-admin-text: #fcd34d;
    --role-chip-driver-bg: rgba(21, 128, 61, 0.55);
    --role-chip-driver-border: rgba(74, 222, 128, 0.85);
    --role-chip-driver-text: #bbf7d0;
    --role-chip-manager-bg: rgba(30, 64, 175, 0.55);
    --role-chip-manager-border: rgba(147, 197, 253, 0.85);
    --role-chip-manager-text: #dbeafe;
    --role-chip-default-bg: rgba(255, 255, 255, 0.12);
    --role-chip-default-border: rgba(255, 255, 255, 0.35);
    --role-chip-default-text: rgba(255, 255, 255, 0.88);
    /* Role avatar — solid gradient matching role chips */
    --role-avatar-admin-bg: linear-gradient(135deg, #92400e 0%, #ca8a04 100%);
    --role-avatar-admin-border: rgba(252, 211, 77, 0.85);
    --role-avatar-admin-text: #fffbeb;
    --role-avatar-driver-bg: linear-gradient(135deg, #14532d 0%, #16a34a 100%);
    --role-avatar-driver-border: rgba(74, 222, 128, 0.85);
    --role-avatar-driver-text: #ecfdf5;
    --role-avatar-manager-bg: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    --role-avatar-manager-border: rgba(147, 197, 253, 0.85);
    --role-avatar-manager-text: #eff6ff;
    --role-avatar-default-bg: linear-gradient(135deg, #334155 0%, #64748b 100%);
    --role-avatar-default-border: rgba(255, 255, 255, 0.35);
    --role-avatar-default-text: #f8fafc;
}

/* ===================================================================
   DASHBOARD
   =================================================================== */

.dash-body {
    min-height: 100vh;
}

html:not(.dark) .dash-body {
    background: linear-gradient(135deg, #f1f5f9 0%, #f8fafc 50%, #e2e8f0 100%);
    color: #0f172a;
    transition: background 0.4s ease, color 0.4s ease;
}

/* Light-mode hero — align with navbar colour scheme */

html:not(.dark) .dash-body .dash-hero-section {
    background: linear-gradient(135deg, #1e4080 0%, #0e2a52 22%, #0e1f3a 60%, #071828 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

html:not(.dark) .dash-body .dash-hero-section::before {
    background:
        radial-gradient(ellipse 55% 90% at 95% 50%, rgba(212, 175, 55, 0.12) 0%, transparent 70%),
        radial-gradient(ellipse 35% 60% at 0% 100%, rgba(29, 78, 216, 0.22) 0%, transparent 65%);
}

html:not(.dark) .dash-body .dash-hero-kicker        { color: rgba(212, 175, 55, 0.9); }

html:not(.dark) .dash-body .dash-hero-kicker-dot    { background: #ffd300; box-shadow: 0 0 8px rgba(255, 211, 0, 0.6); }

html:not(.dark) .dash-body .dash-hero-name          { color: #fff; }

html:not(.dark) .dash-body .dash-tag-outline        { color: #bfdbfe; border-color: rgba(191, 219, 254, 0.5); }

html:not(.dark) .dash-body .dash-tag-yellow         { color: #1e3a8a; background: #ffd300; }

html:not(.dark) .dash-body .dash-clock-date  { color: rgba(191, 219, 254, 0.88); }

html:not(.dark) .dash-body .dash-clock-time  { color: #ffffff; }

html.dark .dash-body input[type="date"]::-webkit-calendar-picker-indicator { filter: brightness(0) invert(1) !important; }

/* ── Light-mode — background decoration layers ── */

html:not(.dark) .dash-body .dash-bg-cubes   { mix-blend-mode: normal; opacity: 0.7; filter: contrast(1); }

html:not(.dark) .dash-body .dash-bg-sparkle {
    opacity: 0.75;
    mix-blend-mode: multiply;

    background: repeating-linear-gradient(
        135deg,
        transparent 0%,
        transparent 35%,

        rgba(212, 175, 55, 0.6) 45%,
        rgba(96, 165, 250, 0.9) 50%,
        rgba(212, 175, 55, 0.6) 55%,

        transparent 65%,
        transparent 100%
    );

    background-size: 200% 100%;

    -webkit-mask-image: url('https://www.transparenttextures.com/patterns/cubes.png');
    mask-image: url('https://www.transparenttextures.com/patterns/cubes.png');

    animation: vms-shine-lines 12s linear infinite;

    filter: brightness(0.95) contrast(1.1);
}

html:not(.dark) .dash-body .dash-bg-royal-tint { opacity: 1; }

html:not(.dark) .dash-body .dash-bg-stardust { opacity: 0; }

html:not(.dark) .dash-body .dash-bg-orb-gold { opacity: 0.35; background: rgba(212, 175, 55, 0.1); }

html:not(.dark) .dash-body .dash-bg-orb-blue { opacity: 0.4; background: rgba(37, 99, 235, 0.12); }

html:not(.dark) .dash-body .dash-bg-wave     { opacity: 0.5; }

/* BBM — badge shift (form laporan + portal operasional) */

.bbm-shift-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.bbm-shift-badge--form {
    padding: 8px 14px;
    font-size: 0.84rem;
}

.bbm-shift-pagi {
    background: #d1fae5;
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.bbm-shift-siang {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.bbm-shift-luar {
    background: #e0e7ff;
    color: #4338ca;
    border: 1px solid rgba(99, 102, 241, 0.35);
}

html.dark .dash-body .bbm-shift-pagi {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.35);
}

html.dark .dash-body .bbm-shift-siang {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.35);
}

html.dark .dash-body .bbm-shift-luar {
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
    border-color: rgba(129, 140, 248, 0.35);
}

.bbm-shift-login-hint {
    margin: 8px 0 0;
    font-size: 0.72rem;
    color: #64748b;
    line-height: 1.35;
}

html.dark .dash-body .bbm-shift-login-hint {
    color: rgba(148, 163, 184, 0.85);
}

/* ── Light-mode — cards: light blue instead of white ── */

html:not(.dark) .dash-body .dash-main-card {
    background: linear-gradient(135deg, rgba(209, 229, 255, 0.75) 0%, rgba(239, 246, 255, 0.75) 100%);
    box-shadow: 0 4px 18px rgba(37, 99, 235, 0.09);
}

html:not(.dark) .dash-body .dash-main-card:hover {
    background: linear-gradient(135deg, rgba(191, 219, 254, 0.75) 0%, rgba(219, 234, 254, 0.75) 100%);
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.18);
    border-color: rgba(37, 99, 235, 0.35);
}

html:not(.dark) .dash-body .dash-main-title { color: #1e3a8a; }

html:not(.dark) .dash-body .dash-main-sub   { color: #3b5ba0; }

html:not(.dark) .dash-body .dash-main-icon  {
    transition: 0.2s ease;
    color: #2563eb;
}

html:not(.dark) .dash-body .dash-main-card:hover .dash-main-icon {
    color: #a17a00;
}

html:not(.dark) .dash-body .dash-admin-card {
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    border-color: rgba(59, 130, 246, 0.22);
    color: #1e3a8a;
}

html:not(.dark) .dash-body .dash-admin-card:hover {
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.16);
    border-color: rgba(37, 99, 235, 0.35);
}

html:not(.dark) .dash-body .dash-admin-icon {
    background: rgba(37, 99, 235, 0.12) !important;
    color: #2563eb !important;
}

html:not(.dark) .dash-body .dash-section-title { color: rgba(30, 58, 138, 0.5); }

/* ── Light-mode — desktop panel columns ── */

/* @media (min-width: 992px) {
    html:not(.dark) .dash-body .dash-main-column,
    html:not(.dark) .dash-body .dash-side-column {
        background: rgba(219, 234, 254, 0.55);
        border-color: rgba(59, 130, 246, 0.15);
        box-shadow: 0 8px 24px rgba(37, 99, 235, 0.08);
    }
} */

.dash-shell {
    max-width: 1240px;
    margin: 0 auto;
    background: transparent;
    position: relative;
    z-index: 1;
}

/* ── Dashboard Navbar (landing-page style, full-width sticky) ──
   DEPRECATED: kept only for landing.blade.php which still uses .dash-nav.
   All authenticated pages now use layouts/dash-app with sidebar + topbar.
   Safe to remove once landing.blade.php is migrated. ── */

.dash-nav {
    background: linear-gradient(135deg, #1e4080 0%, #0e2a52 22%, #0e1f3a 60%, #071828 100%);
    color: #fff;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(212, 175, 55, 0.14);
}

.dash-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    max-width: 1240px;
    margin: 0 auto;
    gap: 16px;
}

.dash-nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #fff;
    flex-shrink: 0;
}

.dash-nav-logo {
    height: 56px;
    width: auto;
    -o-object-fit: contain;
       object-fit: contain;
}

.dash-nav-title {
    font-size: 0.98rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
}

.dash-nav-sub {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.62);
    letter-spacing: 1.5px;
    display: block;
    margin-top: 1px;
    text-transform: uppercase;
}

.dash-nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dash-nav-btn-glass {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.88);
    font-weight: 600;
    font-size: 0.82rem;
    border-radius: 10px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    cursor: pointer;
    transition: all 0.2s ease;
}

.dash-nav-btn-glass:hover {
    background: rgba(255, 255, 255, 0.17);
    color: #fff;
    transform: translateY(-1px);
}

.dash-nav-btn-gold {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--dash-gold);
    color: #0A2342;
    font-weight: 700;
    font-size: 0.82rem;
    border-radius: 10px;
    padding: 8px 16px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.28);
}

.dash-nav-btn-gold:hover {
    background: #e8c140;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(212, 175, 55, 0.38);
}

/* ── Theme mode label (hidden on desktop, visible inside mobile dropdown) ── */

.dash-theme-mode-label {
    display: none;
    font-size: 0.88rem;
    font-weight: 600;
}

@media (max-width: 640px) {
    .dash-nav-actions .dash-theme-mode-label { display: inline; }
}

/* ── Mobile hamburger button ── */

.dash-mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.dash-mobile-menu-btn:hover {
    background: rgba(255, 255, 255, 0.17);
    border-color: rgba(212, 175, 55, 0.4);
}

/* ─── Navbar responsive — dropdown on mobile ─── */

@media (max-width: 640px) {
    .dash-nav {
        padding: 0 16px;
        position: relative;
    }

    .dash-nav-inner { height: 56px; gap: 10px; }
    .dash-nav-sub   { display: none; }
    .dash-nav-title { font-size: 0.86rem; }
    .dash-nav-logo  { height: 30px; }

    /* Hide inline actions; they become a dropdown */
    .dash-nav-actions {
        display: none;
        position: absolute;
        top: 56px;
        left: 0;
        right: 0;
        flex-direction: column;
        background: linear-gradient(180deg, #0e2a52 0%, #071828 100%);
        border-bottom: 1px solid rgba(212, 175, 55, 0.18);
        padding: 10px 16px 14px;
        gap: 8px;
        z-index: 101;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
    }

    .dash-nav-actions.mobile-open {
        display: flex;
    }

    /* Full-width items inside dropdown */
    .dash-nav-actions .dash-nav-btn-glass,
    .dash-nav-actions .dash-nav-btn-gold,
    .dash-nav-actions .lp-nav-dashboard-btn,
    .dash-nav-actions .dash-theme-btn {
        width: 100%;
        justify-content: flex-start;
        border-radius: 10px;
        padding: 11px 16px;
        font-size: 0.88rem;
    }

    .dash-nav-actions form { width: 100%; }

    .dash-nav-actions .dash-chip {
        width: 100%;
        justify-content: flex-start;
        border-radius: 10px;
        padding: 11px 16px;
        font-size: 0.82rem;
    }

    .dash-nav-actions .dash-notif-wrap {
        width: 100%;
    }
    .dash-nav-actions .dash-notif-btn {
        width: 100%;
        justify-content: flex-start;
        border-radius: 10px;
        padding: 11px 16px;
    }
    .dash-nav-actions .dash-notif-panel {
        left: 0;
        right: 0;
        width: auto;
    }

    /* Show labels inside dropdown */
    .dash-nav-actions .dash-nav-btn-label  { display: inline; }
    .dash-nav-actions .dash-nav-chip-label { display: inline; }

    /* Show hamburger */
    .dash-mobile-menu-btn { display: flex; }
}

@media (max-width: 360px) {
    .dash-nav-inner { gap: 6px; }
    .dash-nav-brand { gap: 8px; }
    .dash-nav-title { font-size: 0.8rem; }
}

/* ── Hero Section (now standalone, separate from navbar) ── */

.dash-hero-section {
    padding: 32px 28px 36px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(212, 175, 55, 0.12);
    z-index: 0;
}

.dash-hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 90% at 95% 50%, rgba(212, 175, 55, 0.07) 0%, transparent 70%),
        radial-gradient(ellipse 35% 60% at 0% 100%, rgba(10, 35, 66, 0.6) 0%, transparent 65%);
    pointer-events: none;
    z-index: -1;
}

.dash-hero-section::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 220px;
    height: 100%;
    background: radial-gradient(ellipse 80% 80% at 100% 50%, rgba(96, 165, 250, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

.dash-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    z-index: 1;
    max-width: 1240px;
    margin: 0 auto;
}

.dash-hero-left { flex: 1; }

.dash-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(184, 206, 255, 0.9);
    letter-spacing: 2.5px;
    font-size: 0.72rem;
    font-weight: 700;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.dash-hero-kicker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dash-gold);
    box-shadow: 0 0 6px rgba(212, 175, 55, 0.6);
    flex-shrink: 0;
}

.dash-hero-name {
    margin: 0 0 16px;
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    line-height: 1.12;
    font-weight: 800;
    color: #fff;
}

.dash-hero-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Clock widget (driver) — flex-positioned in hero-inner ── */

.dash-clock-widget {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
    text-align: right;
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Shift pill di hero (sebelah Status Aktif) */

.dash-hero-shift.dash-clock-shift {
    align-self: center;
}

.dash-top {
    background: linear-gradient(135deg, #0A2342 0%, #0e1f3a 60%, #0a1e38 100%);
    border-bottom-left-radius: 34px;
    border-bottom-right-radius: 34px;
    color: #fff;
    padding: 20px 20px 24px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
    position: relative;
    z-index: 2;
}

.dash-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dash-brand-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

.dash-brand-sub {
    margin: 2px 0 0;
    font-size: 0.72rem;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.78);
}

.dash-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 10px;
    padding: 12px 12px;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
}

.dash-chip svg,
.dash-chip i {
    flex-shrink: 0;
}

.dash-chip-admin {
    background: var(--role-chip-admin-bg);
    color: var(--role-chip-admin-text);
    border-color: var(--role-chip-admin-bg);
}

.dash-chip-driver {
    background: var(--role-chip-driver-bg);
    color: var(--role-chip-driver-text);
    border-color: var(--role-chip-driver-bg);
}

.dash-chip-manager {
    background: var(--role-chip-manager-bg);
    color: var(--role-chip-manager-text);
    border-color: var(--role-chip-manager-bg);
}

/* Fallback for old dash-chip without modifier (dashboard) */

.dash-chip:not(.dash-chip-admin):not(.dash-chip-driver):not(.dash-chip-manager) {
    background: var(--role-chip-default-bg);
    color: var(--role-chip-default-text);
    border-color: var(--role-chip-default-border);
}

/* Role-based profile avatars */

.dash-avatar--admin {
    background: var(--role-avatar-admin-bg);
    color: var(--role-avatar-admin-text);
    border-color: var(--role-avatar-admin-border);
}

.dash-avatar--driver {
    background: var(--role-avatar-driver-bg);
    color: var(--role-avatar-driver-text);
    border-color: var(--role-avatar-driver-border);
}

.dash-avatar--manager {
    background: var(--role-avatar-manager-bg);
    color: var(--role-avatar-manager-text);
    border-color: var(--role-avatar-manager-border);
}

.dash-avatar--default {
    background: var(--role-avatar-default-bg);
    color: var(--role-avatar-default-text);
    border-color: var(--role-avatar-default-border);
}

.dash-logout-btn {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background 0.2s ease;
}

.dash-logout-btn:hover {
    background-color: rgba(255, 255, 255, 0.18);
}

.dash-hero {
    margin-top: 18px;
    border-radius: 28px;
    background: linear-gradient(150deg, #0A2342 0%, #050f22 100%);
    padding: 20px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.1);
}

.dash-hero::after {
    content: "";
    position: absolute;
    right: -12px;
    top: -18px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
}

.dash-hero-kicker {
    color: #b8ceff;
    letter-spacing: 2px;
    font-size: 0.86rem;
    font-weight: 700;
    margin: 0;
}

.dash-hero-name {
    margin: 6px 0 0;
    font-size: clamp(1.7rem, 3.5vw, 2.2rem);
    line-height: 1.15;
    font-weight: 800;
    color: #fff;
}

.dash-hero-tags {
    margin-top: 14px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.dash-tag {
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
}

.dash-tag-outline {
    color: #b9d4ff;
    border: 1px solid #62a1ff;
}

.dash-tag-yellow {
    color: #20231d;
    background-color: var(--dash-yellow);
}

.dash-hero-tags .mgmt-presence {
    font-size: 0.74rem;
}

.dash-hero-tags .mgmt-presence--online {
    color: #4ade80;
}

.dash-hero-tags .mgmt-presence--offline {
    color: #64748b;
}

/* ── Clock widget (driver only) ── */

.dash-clock-date-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(200, 220, 255, 0.85);
    margin-bottom: 0;
}

.dash-clock-date-row svg,
.dash-clock-time-row svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.dash-clock-date {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1.2;
    white-space: nowrap;
}

.dash-clock-time-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    color: #ffffff;
}

.dash-clock-time {
    font-size: 1.45rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
    line-height: 1.2;
    white-space: nowrap;
}

.dash-clock-divider {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 300;
}

.dash-clock-shift {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    border-radius: 999px;
    padding: 3px 10px;
}

.dash-clock-shift.shift-pagi {
    /* background: rgba(16, 185, 129, 0.2); */
    color: #34d399;
    /* border: 1px solid rgba(52, 211, 153, 0.35); */
}

.dash-clock-shift.shift-siang {
    /* background: rgba(245, 158, 11, 0.2); */
    color: #fbbf24;
    /* border: 1px solid rgba(251, 191, 36, 0.35); */
}

.dash-clock-shift.shift-none {
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
    border: 1px solid rgba(129, 140, 248, 0.35);
}

/* ─── Hero section responsive ─── */

@media (max-width: 690px) {
    /* Dashboard: tags kiri, date/clock kanan — satu baris di bawah nama */
    .dash-body .dash-hero-inner {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto;
        align-items: center;
        gap: 10px 12px;
    }

    .dash-body .dash-hero-left {
        display: contents;
    }

    .dash-body .dash-hero-kicker {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }

    .dash-body .dash-hero-name {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }

    .dash-body .dash-hero-tags {
        grid-column: 1;
        grid-row: 3;
        align-self: center;
    }

    .dash-body .dash-clock-widget {
        grid-column: 2;
        grid-row: 3;
        align-self: center;
        justify-self: end;
        gap: clamp(6px, 2vw, 12px);
    }

    .dash-body .dash-clock-date,
    .dash-body .dash-clock-time {
        font-size: clamp(0.65rem, 2.6vw, 0.9rem);
    }

    .dash-body .dash-clock-date-row svg,
    .dash-body .dash-clock-time-row svg {
        width: 14px;
        height: 14px;
    }

    .dash-body .dash-clock-date-row,
    .dash-body .dash-clock-time-row {
        gap: 5px;
    }
}

@media (max-width: 640px) {
    .dash-hero-section { padding: 26px 20px 30px; }
    .dash-hero-name { font-size: clamp(1.55rem, 5vw, 2rem); }
}

@media (max-width: 480px) {
    .dash-hero-section { padding: 20px 16px 24px; }
    .dash-hero-name { font-size: 1.5rem; }
    .dash-hero-kicker { font-size: 0.66rem; letter-spacing: 2px; }
    .dash-hero-tags { gap: 6px; }
    .dash-body .dash-clock-widget { gap: 5px; }
    .dash-body .dash-clock-date-row svg { width: 12px; height: 12px; }
    .dash-body .dash-clock-time-row svg { width: 13px; height: 13px; }
    .dash-body .dash-clock-date { font-size: 0.68rem; }
    .dash-body .dash-clock-time { font-size: 0.68rem; }
    .dash-hero-shift.dash-clock-shift { font-size: 0.65rem; padding: 2px 7px; }
}

@media (max-width: 400px) {
    .dash-body .dash-clock-widget {
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
    }
}

@media (max-width: 360px) {
    .dash-hero-name { font-size: 1.3rem; }
    .dash-hero-section { padding: 16px 12px 20px; }
}

.dash-content {
    padding: 20px;
}

.dash-desktop-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}

.dash-section-title {
    color: #9ca3af;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.dash-main-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: #fff;
    border-radius: 22px;
    padding: 22px 24px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 18px rgba(10, 35, 66, 0.09);
    transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    border: 1px solid rgba(10, 35, 66, 0.08);
    margin-bottom: 0;
}

.dash-main-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(10, 35, 66, 0.14);
    border-color: rgba(212, 175, 55, 0.4);
}

.dash-main-card + .dash-main-card { margin-top: 12px; }

.dash-main-grid-admin {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.dash-main-grid-admin .dash-main-card + .dash-main-card {
    margin-top: 0;
}

.dash-main-title {
    margin: 0;
    font-size: clamp(1.15rem, 2.5vw, 1.45rem);
    color: #0A2342;
    font-weight: 800;
    line-height: 1.2;
}

.dash-main-sub {
    margin: 5px 0 0;
    font-size: 0.88rem;
    color: #4b6080;
    line-height: 1.45;
}

.dash-main-icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #0A2342;
    box-shadow: none;
    transition: background 0.2s ease;
}

.dash-main-icon i {
    font-size: 2.25rem;
    line-height: 1;
}

.dash-main-card:hover .dash-main-icon {
    color: #a17a00;
}

.dash-admin-grid {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.dash-admin-card {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    min-height: 138px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    color: #0A2342;
    font-weight: 700;
    text-align: center;
    padding: 14px;
    font-size: 0.78rem;
    letter-spacing: 0.4px;
    transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.dash-admin-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(10, 35, 66, 0.12);
    border-color: rgba(212, 175, 55, 0.4);
}

.dash-admin-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: grid;
    place-items: center;
}

.dash-admin-db {
    background-color: #e0e7ff;
    color: #2563eb;
}

.dash-admin-log {
    background-color: #dcfce7;
    color: #15803d;
}

.dash-admin-arsip {
    background-color: #fee2e2;
    color: #b91c1c;
}

.dash-admin-armada {
    background-color: #fef9c3;
    color: #a16207;
}

.dash-pressable:active {
    transform: scale(0.99);
}

@media (max-width: 420px) {
    .dash-tag {
        font-size: 0.67rem;
        padding: 5px 10px;
    }

    .dash-content {
        padding: 14px;
    }

    .dash-main-card {
        border-radius: 16px;
        padding: 14px 16px;
    }

    .dash-main-title { font-size: 1rem; }
    .dash-main-sub   { font-size: 0.8rem; }
    .dash-main-icon  { width: 46px; height: 46px; border-radius: 12px; }
    .dash-main-icon i { font-size: 1.85rem; }

    .dash-admin-grid { gap: 10px; }

    .dash-admin-card {
        border-radius: 17px;
        min-height: 112px;
        font-size: 0.73rem;
        gap: 8px;
        padding: 10px;
    }

    .dash-admin-icon {
        width: 45px;
        height: 45px;
    }
}

@media (min-width: 768px) {
    .dash-shell { padding: 18px; }
    .dash-hero-section { padding: 40px 36px 44px; }
    .dash-hero-name { font-size: clamp(2rem, 2.8vw, 2.6rem); }
    .dash-content { padding: 26px 12px 6px; }
    .dash-main-card { border-radius: 24px; padding: 26px 28px; }
    .dash-main-title { font-size: clamp(1.25rem, 2.2vw, 1.55rem); }
}

@media (min-width: 992px) {
    .dash-desktop-grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
        align-items: start;
        gap: 20px;
    }

    /* .dash-main-column,
    .dash-side-column {
        background: #fff;
        border: 1px solid rgba(10, 35, 66, 0.08);
        border-radius: 28px;
        padding: 22px;
        box-shadow: 0 8px 24px rgba(10, 35, 66, 0.07);
        transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    } */

    .dash-desktop-grid--single {
        grid-template-columns: minmax(0, 1fr);
    }

    .dash-main-grid-admin {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .dash-main-grid-admin--three-col {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ===================================================================
   CHECKLIST WIZARD
   =================================================================== */

.checklist-shell {
    max-width: 620px;
    margin: 0 auto;
    min-height: calc(100vh - 64px);
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 14px;
    padding: 14px;
    position: relative;
    z-index: 1;
}

.checklist-topbar {
    background: linear-gradient(180deg, #06318a 0%, var(--dash-blue) 100%);
    color: #fff;
    border-radius: 24px;
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 24px rgba(0, 32, 96, 0.22);
}

.checklist-icon-btn {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.1);
}

.checklist-content {
    min-height: 0;
}

.checklist-card {
    background-color: #fff;
    border-radius: 22px;
    border: 1px solid #e5e7eb;
    padding: 16px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    height: 100%;
}

/* Progress bar — golden/yellow gradient */

.checklist-progress-head {
    margin-bottom: 14px;
}

.checklist-progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.5px;
}

.checklist-progress-track {
    margin-top: 6px;
    width: 100%;
    height: 7px;
    border-radius: 999px;
    background-color: #e5e7eb;
    overflow: hidden;
}

#checklist-progress-fill,
#sppd-progress-fill,
#vul-progress-fill,
#bbm-progress-fill {
    display: block;
    height: 100%;
    width: 14%;
    background: linear-gradient(90deg, #ffd300, #f59e0b);
    border-radius: 999px;
    transition: width 0.35s cubic-bezier(.4, 0, .2, 1);
}

/* Wizard steps */

.wizard-step {
    display: none;
    animation: fadeStep 0.35s ease;
}

.wizard-step.active {
    display: block;
}

@keyframes fadeStep {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Section banner — yellow left bar fading to blue */

.section-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(90deg, #0b2c6b 0%, #123f8f 40%, rgba(59,95,168,0.6) 70%, rgba(223,230,243,0.2) 100%);
    color: #fff;
    padding: 12px 16px;
    border-radius: 14px;
    margin-bottom: 16px;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
}

.section-banner-icon {
    color: #ffd300;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

/* Form fields */

.checklist-grid-two {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.checklist-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.checklist-field>span {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.checklist-field input,
.checklist-field select,
.checklist-field textarea {
    border: 1px solid #d1d5db;
    border-radius: 12px;
    padding: 10px 12px;
    background-color: #fff;
    width: 100%;
    font-size: 0.92rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.checklist-field input:focus,
.checklist-field select:focus,
.checklist-field textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.checklist-field input[readonly] {
    background-color: #f1f5f9;
    color: #64748b;
    cursor: not-allowed;
}

.driver-icon-input {
    font-weight: 700;
    letter-spacing: 0.2px;
}

.driver-icon-active {
    color: #15803d !important;
}

.driver-static-display {
    border: 1px solid #d1d5db;
    border-radius: 12px;
    padding: 10px 12px;
    background: #f8fafc;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.checklist-driver-select-wrap::after {
    display: none;
}

.ts-wrapper.single .ts-control {
    border: 1px solid #d1d5db;
    border-radius: 12px;
    min-height: 42px;
    padding: 8px 12px;
    box-shadow: none;
    background-color: #ffffff !important;
    opacity: 1 !important;
}

.ts-wrapper.single.focus .ts-control {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.ts-dropdown {
    border-radius: 12px;
    border: 1px solid #d1d5db;
    overflow: hidden;
    background-color: #ffffff !important;
    opacity: 1 !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.ts-dropdown .ts-dropdown-content {
    display: block;
    max-height: 240px;
}

.ts-dropdown .option {
    display: block;
    padding: 10px 12px;
}

.ts-dropdown .option.active {
    background-color: #f3f4f6;
    color: #111827;
}

.ts-dropdown .driver-option-row,
.ts-control .driver-option-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.ts-dropdown .driver-option-row i,
.ts-control .driver-option-row i {
    font-size: 1rem;
    color: #64748b;
}

.ts-dropdown .driver-option-row.is-active i,
.ts-control .driver-option-row.is-active i {
    color: #16a34a;
}

.ts-wrapper.single.has-items .ts-control input {
    opacity: 0;
    width: 0 !important;
    min-width: 0 !important;
}

.checklist-field textarea {
    resize: vertical;
}

.checklist-control-wrap {
    position: relative;
}

.checklist-control-wrap select {
    padding-right: 40px;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

.checklist-control-select::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.8;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7l4 4 4-4'/%3E%3C/svg%3E") no-repeat center;
}

/* Condition rows */

.checklist-item-list {
    display: grid;
    gap: 9px;
    margin-bottom: 12px;
}

.checklist-condition-row {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 12px;
    display: grid;
    gap: 10px;
    transition: transform 0.15s ease;
}

.checklist-condition-row:hover {
    transform: translateY(-1px);
}

.checklist-condition-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.checklist-condition-row span {
    font-weight: 700;
    color: #334155;
}

.checklist-radio-group {
    display: inline-flex;
    align-items: center;
    background-color: #e2e8f0;
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
    flex-shrink: 0;
}

.checklist-radio-group input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checklist-radio-group label {
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.checklist-radio-group input[type="radio"][id$="_ok"]:checked+label {
    background-color: #16a34a;
    color: #fff;
    box-shadow: 0 4px 10px rgba(22, 163, 74, 0.28);
}

.checklist-radio-group input[type="radio"][id$="_no"]:checked+label,
.checklist-radio-group input[type="radio"][value="no"]:checked+label,
.checklist-radio-group input[type="radio"]:nth-of-type(2):checked+label {
    background-color: #ef4444 !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3) !important;
}

.checklist-item-note {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 11px;
    padding: 9px 11px;
    background-color: #fff;
    font-size: 0.88rem;
}

@media (max-width: 460px) {
    .checklist-condition-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Photo slots */

.checklist-photo-grid {
    display: grid;
    gap: 10px;
}

.checklist-photo-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.checklist-photo-slot {
    border: 2px dashed #cbd5e1;
    border-radius: 14px;
    background-color: #fff;
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.checklist-photo-slot:hover {
    border-color: #60a5fa;
    background-color: #f8fbff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.12);
}

.checklist-photo-slot input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
    font-size: 0;
}

.photo-slot-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.checklist-photo-icon {
    color: #94a3b8;
}

.checklist-photo-slot strong {
    color: #475569;
    font-size: 0.72rem;
    letter-spacing: 0.5px;
}

.photo-slot-preview {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 12px;
    position: absolute;
    top: 0;
    left: 0;
}

.photo-slot-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.9);
    color: #fff;
    border: none;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.15s ease;
}

.photo-slot-remove:hover {
    transform: scale(1.15);
}

.checklist-photo-slot.has-file {
    border-color: #22c55e;
    border-style: solid;
}

.checklist-photo-slot-wide {
    min-height: 120px;
}

/* Dynamic photo slots */

.dynamic-photo-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.dynamic-photo-grid .checklist-photo-slot {
    width: calc(33.333% - 8px);
    min-width: 100px;
    flex-shrink: 0;
}

.dynamic-photo-add-btn {
    width: calc(33.333% - 8px);
    min-width: 100px;
    min-height: 110px;
    border: 2px dashed #93c5fd;
    border-radius: 14px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.dynamic-photo-add-btn:hover {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.15);
}

@keyframes slotAppear {
    from {
        opacity: 0;
        transform: scale(0.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.slot-animate-in {
    animation: slotAppear 0.3s ease forwards;
}

@media (max-width: 420px) {

    .dynamic-photo-grid .checklist-photo-slot,
    .dynamic-photo-add-btn {
        width: calc(50% - 6px);
        min-width: 80px;
    }
}

/* BBM Card */

.bbm-card {
    border: 1px solid #dbe3f1;
    border-radius: 18px;
    background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
    padding: 18px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.bbm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.bbm-label {
    color: var(--dash-blue);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
}

.bbm-value {
    color: var(--dash-blue);
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
}

.bbm-value small {
    font-size: 1rem;
    font-weight: 700;
}

.bbm-slider-wrap {
    margin-bottom: 8px;
}

.bbm-slider {
    width: 100%;
    height: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    border-radius: 999px;
    background: linear-gradient(90deg, #dc2626 0%, #ef4444 15%, #f59e0b 40%, #fbbf24 60%, #22c55e 85%, #16a34a 100%);
    outline: none;
}

.bbm-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    border: 2.5px solid var(--dash-blue);
    cursor: pointer;
    -webkit-transition: transform 0.15s ease;
    transition: transform 0.15s ease;
}

.bbm-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.bbm-scale {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: #94a3b8;
    font-weight: 700;
}

.bbm-terakhir-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.bbm-terakhir-row input {
    border: 1px solid #d1d5db;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 0.92rem;
    width: 100%;
}

/* KM Cards */

.km-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.km-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px;
    text-align: center;
}

.km-card-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.km-card-value {
    width: 100%;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 800;
    color: #0f172a;
    padding: 4px;
}

.km-card-editable {
    border: 2px solid #d1d5db;
    border-radius: 10px;
    background: #fff;
    transition: border-color 0.2s ease;
}

.km-card-editable:focus {
    outline: none;
    border-color: var(--dash-blue);
    box-shadow: 0 0 0 3px rgba(0, 42, 122, 0.1);
}

.km-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 600;
    animation: fadeStep 0.3s ease;
}

.km-error-primary {
    background: #eff6ff;
    border: 1px solid #93c5fd;
    color: #2563eb;
}

.km-error-danger {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #dc2626;
}

/* Perlengkapan */

.checklist-check-grid {
    display: grid;
    gap: 10px;
}

.checklist-checkbox {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 11px 12px;
    background-color: #f8fafc;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.checklist-checkbox:hover {
    border-color: #93c5fd;
    background: #f0f7ff;
}

.checklist-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

.checklist-checkmark {
    width: 19px;
    height: 19px;
    border: 2px solid #94a3b8;
    border-radius: 6px;
    display: inline-block;
    flex: 0 0 auto;
    position: relative;
    transition: all 0.2s ease;
}

.checklist-checkbox input[type="checkbox"]:checked+.checklist-checkmark {
    border-color: #2563eb;
    background-color: #2563eb;
}

.checklist-checkbox input[type="checkbox"]:checked+.checklist-checkmark::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Statement & Confirm */

.checklist-statement-box {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    padding: 16px;
    margin: 12px 0;
}

.checklist-statement-box p {
    margin: 0;
    color: #1e40af;
    font-size: 0.88rem;
    line-height: 1.5;
}

.checklist-confirm-box {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    gap: 9px;
    margin: 12px 0;
    align-items: flex-start;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.checklist-confirm-box:hover {
    background: #dbeafe;
}

/* Signature pads */

.signature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 14px 0;
}

.signature-block {
    text-align: center;
}

.signature-label {
    display: block;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.signature-pad-wrap {
    position: relative;
    border: 2px dashed #d1d5db;
    border-radius: 14px;
    background: #fafbfc;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.signature-pad-wrap:hover {
    border-color: #93c5fd;
}

.signature-canvas {
    width: 100%;
    height: 140px;
    display: block;
    cursor: crosshair;
}

.signature-pad-hint {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 700;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.signature-pad-hint.hidden {
    opacity: 0;
}

.signature-clear-btn {
    margin-top: 6px;
    border: none;
    background: transparent;
    color: #ef4444;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.signature-clear-btn:hover {
    background-color: #fef2f2;
}

@media (max-width: 560px) {
    .signature-row {
        grid-template-columns: 1fr;
    }

    .signature-canvas {
        height: 140px;
    }
}

/* Green complete alert */

.form-complete-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border: 1px solid #86efac;
    border-radius: 14px;
    padding: 14px 16px;
    margin-top: 12px;
    animation: fadeStep 0.4s ease;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.12);
}

.form-complete-icon {
    width: 36px;
    height: 36px;
    background: #22c55e;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    flex-shrink: 0;
}

.form-complete-alert strong {
    color: #166534;
    font-size: 0.92rem;
}

.form-complete-alert p {
    margin: 2px 0 0;
    color: #15803d;
    font-size: 0.78rem;
    line-height: 1.4;
}

/* Footer nav */

.checklist-footer {
    background-color: #fff;
    border-top: 1px solid #e5e7eb;
    padding: 12px;
    border-radius: 14px;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 10px;
}

.checklist-card .checklist-footer {
    background-color: transparent !important;
    border-top: 1px solid #e5e7eb;
    padding: 16px 0 0 0 !important;
    border-radius: 0 !important;
    margin-top: 20px;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.checklist-nav-btn {
    border: none;
    border-radius: 13px;
    min-height: 46px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.checklist-nav-back {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #64748b;
}

.checklist-nav-back:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.checklist-nav-next {
    background-color: #052d7f;
    color: #fff;
}

.checklist-nav-next:hover {
    background-color: #041e5a;
}

.checklist-nav-next.final {
    background-color: var(--dash-yellow);
    color: #0f172a;
    box-shadow: 0 4px 14px rgba(255, 211, 0, 0.35);
}

.checklist-nav-next.final:hover {
    background-color: #e6be00;
}

/* Desktop form responsive */

@media (min-width: 768px) {
    .checklist-shell {
        gap: 18px;
        padding: 22px;
    }

    .checklist-topbar {
        padding: 16px 20px;
        border-radius: 26px;
    }

    .checklist-card {
        padding: 22px;
        border-radius: 26px;
    }

    .checklist-grid-two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .checklist-check-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .checklist-item-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .checklist-photo-grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .checklist-footer {
        padding: 14px;
        border-radius: 18px;
    }

    .checklist-condition-row {
        padding: 14px 18px;
    }
}

/* ===================================================================
   MODAL (PDF result popup)
   =================================================================== */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-box {
    background: #fff;
    border-radius: 24px;
    padding: 32px 28px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    animation: modalSlideUp 0.35s ease;
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
}

.modal-icon.success {
    background: #dcfce7;
    color: #16a34a;
}

.modal-icon.error {
    background: #fee2e2;
    color: #dc2626;
}

.modal-box h3 {
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0 0 8px;
    color: #0f172a;
}

.modal-box p {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0 0 20px;
    line-height: 1.5;
}

.modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-btn {
    border: none;
    border-radius: 12px;
    padding: 12px 20px;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.modal-btn-primary {
    background: var(--dash-blue);
    color: #fff;
}

.modal-btn-primary:hover {
    background: #041e5a;
}

.modal-btn-secondary {
    background: #f1f5f9;
    color: #334155;
}

.modal-btn-secondary:hover {
    background: #e2e8f0;
}

.modal-btn-success {
    background: #16a34a;
    color: #fff;
}

.modal-btn-success:hover {
    background: #15803d;
}

/* ===================================================================
   ADMIN PAGES — shared
   =================================================================== */

.admin-shell {
    max-width: 2560px;
    margin: 0 auto;
    padding: 14px;
    min-height: 100vh;
}

.admin-card {
    background: #fff;
    border-radius: 22px;
    border: 1px solid #e5e7eb;
    padding: 20px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    margin-top: 16px;
}

/* Tabs */

.admin-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.admin-tab {
    padding: 8px 16px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-weight: 700;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin-tab.active,
.admin-tab:hover {
    background: var(--dash-blue);
    color: #fff;
    border-color: var(--dash-blue);
}

/* Tables */

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.admin-table th {
    background: var(--dash-blue);
    padding: 10px 12px;
    text-align: left;
    font-weight: 700;
    color: #f1f5f9;
    font-size: 0.72rem;
    text-transform: uppercase;
    border-bottom: 2px solid #e2e8f0;
}

.admin-table th[data-sort],
.mgmt-table th[data-sort] {
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.th-sortable__inner {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
}

.th-sortable__icon {
    font-size: 0.9em;
    line-height: 1;
    opacity: 0.45;
    flex-shrink: 0;
}

th[data-sort][data-sort-state="asc"] .th-sortable__icon,
th[data-sort][data-sort-state="desc"] .th-sortable__icon {
    opacity: 1;
}

.admin-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
}

.admin-table tbody tr {
    border-bottom: 1px solid #cbd5e1;
}

.admin-table tbody tr:last-child {
    border-bottom: 0;
}

.admin-table tr:hover td {
    background: rgba(236, 242, 252, 0.6);
}

.admin-table-wrap {
    overflow-x: auto;
}

.status-ok {
    color: #16a34a;
}

.status-nok {
    color: #dc2626;
}

/* Stats (legacy — aligned with PM FuelLog premium stat cards) */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.stat-card {
    position: relative;
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: box-shadow 0.2s ease;
}

.stat-card:hover {
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
}

.stat-card .stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0a2342;
    line-height: 1.15;
}

@media (min-width: 768px) {
    .stat-card .stat-value {
        font-size: 1.5rem;
    }
}

.stat-card .stat-label {
    order: -1;
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
    letter-spacing: 0;
    margin-top: 0;
    margin-bottom: 4px;
    line-height: 1.3;
    text-transform: none;
}

html.dark .dash-body .stat-card {
    background: rgba(16, 38, 80, 0.44);
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html.dark .dash-body .stat-card:hover {
    background: rgba(16, 38, 80, 0.56);
    border-color: rgba(255, 255, 255, 0.14);
}

html.dark .dash-body .stat-card .stat-value {
    color: #60a5fa;
}

html.dark .dash-body .stat-card .stat-label {
    color: rgba(148, 163, 184, 0.95);
}

/* Armada */

.armada-shell {
    max-width: 100%;
    margin: 0 auto;
    padding: 14px;
    min-height: 100vh;
}

/* Buttons shared */

.btn-export {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #16a34a;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-export:hover {
    background: #15803d;
}

.btn-view-pdf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    color: #0e2a52;
    border: 1.5px solid #0e2a52;
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 3px rgba(14, 42, 82, 0.14);
}

.btn-view-pdf:hover {
    background: #0e2a52;
    color: #ffffff;
    border-color: #0e2a52;
    box-shadow: 0 2px 6px rgba(14, 42, 82, 0.22);
}

html.dark .dash-body .btn-view-pdf {
    background: rgba(15, 23, 42, 0.55);
    color: #bfdbfe;
    border: 1.5px solid rgba(147, 197, 253, 0.45);
    box-shadow: none;
}

html.dark .dash-body .btn-view-pdf:hover {
    background: rgba(59, 130, 246, 0.28);
    color: #eff6ff;
    border-color: rgba(147, 197, 253, 0.65);
}

/* ===================================================================
   ADMIN TOOLBAR — Search & Filter
   =================================================================== */

.admin-toolbar {
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Search input */

.admin-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.admin-search-icon {
    position: absolute;
    left: 14px;
    color: #94a3b8;
    pointer-events: none;
    z-index: 1;
}

.admin-search-input {
    width: 100%;
    padding: 11px 40px 11px 40px;
    border: 1.5px solid #d1d5db;
    border-radius: 12px;
    font-size: 0.88rem;
    background: #fff;
    color: #0f172a;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-search-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.admin-search-input::-moz-placeholder {
    color: #94a3b8;
}

.admin-search-input::placeholder {
    color: #94a3b8;
}

.admin-search-clear {
    position: absolute;
    right: 12px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s ease;
    line-height: 1;
}

.admin-search-clear:hover {
    background: #e2e8f0;
    color: #334155;
}

/* Filter row */

.admin-filter-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-filter-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.admin-filter-item label {
    font-size: 0.68rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.admin-filter-input {
    padding: 8px 12px;
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    font-size: 0.82rem;
    background: #fff;
    color: #0f172a;
    min-width: 120px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-filter-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

select.admin-filter-input {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.admin-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: none;
    border-radius: 10px;
    background: var(--dash-blue);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.admin-filter-btn:hover {
    background: #041e5a;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 42, 122, 0.2);
}

.admin-filter-reset {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #fff;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.admin-filter-reset:hover {
    background: #f1f5f9;
    color: #334155;
    border-color: #94a3b8;
}

@media (max-width: 600px) {
    .admin-filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-filter-input {
        min-width: 100%;
    }

    .admin-filter-btn,
    .admin-filter-reset {
        width: 100%;
        justify-content: center;
    }
}

/* ===================================================================
   TABLE PAGINATION (tbl-* namespace)
   =================================================================== */

.tbl-pagination {
    margin-top: 18px;
    display: flex;
    justify-content: center;
}

.tbl-pagination nav {
    display: flex;
    align-items: center;
    gap: 2px;
}

.tbl-pagination.tbl-pagination--unified nav > div:first-child {
    display: none !important;
}

.tbl-pagination.tbl-pagination--unified nav > div:nth-child(2) {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .tbl-pagination.tbl-pagination--unified nav > div:nth-child(2) {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.tbl-pagination-scroll {
    display: flex;
    justify-content: center;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    margin-top: 16px;
}

.tbl-pagination-scroll .tbl-pagination {
    margin-top: 0;
    justify-content: center;
    width: -moz-max-content;
    width: max-content;
    max-width: none;
    min-width: min(100%, -moz-max-content);
    min-width: min(100%, max-content);
    margin-left: auto;
    margin-right: auto;
}

.tbl-pagination-scroll .tbl-pagination nav {
    flex-wrap: nowrap;
}

.tbl-pagination-scroll .tbl-pagination.tbl-pagination--unified nav > div:nth-child(2) {
    justify-content: center;
    align-items: center;
}

@media (min-width: 640px) {
    .tbl-pagination-scroll .tbl-pagination.tbl-pagination--unified nav > div:nth-child(2) {
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
    }
}

@media (max-width: 639px) {
    .tbl-pagination.tbl-pagination--unified nav > div:nth-child(2) > div:last-child {
        justify-content: center;
        row-gap: 8px;
        -moz-column-gap: 3px;
             column-gap: 3px;
    }

    .tbl-pagination.tbl-pagination--unified span[aria-current='page'] > span,
    .tbl-pagination.tbl-pagination--unified a {
        min-width: 30px;
        height: 32px;
        padding: 0 6px;
        font-size: 0.76rem;
        border-radius: 8px;
    }

    .tbl-pagination.tbl-pagination--unified span:not([aria-current]) > span {
        min-width: 30px;
        height: 32px;
        padding: 0 6px;
        font-size: 0.76rem;
        border-radius: 8px;
    }
}

.tbl-pagination nav>div:last-child {
    width: 100%;
}

.tbl-pagination nav>div:last-child>span,
.tbl-pagination nav>div:last-child>div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}

.tbl-pagination span[aria-current="page"]>span,
.tbl-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.tbl-pagination span[aria-current="page"]>span {
    background: var(--dash-blue);
    color: #fff;
    box-shadow: 0 3px 10px rgba(0, 42, 122, 0.2);
}

.tbl-pagination a {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.tbl-pagination a:hover {
    background: #e0e7ff;
    color: var(--dash-blue);
    border-color: #c7d2fe;
    transform: translateY(-1px);
}

.tbl-pagination span:not([aria-current])>span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    background: #f1f5f9;
    color: #94a3b8;
    border: 1px solid #e2e8f0;
    cursor: not-allowed;
}

.tbl-pagination span.relative>span {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: default;
}

.tbl-pagination p {
    font-size: 0.78rem;
    color: #64748b;
    text-align: center;
    margin: 8px 0 0;
}

@media (max-width: 500px) {
    .tbl-pagination span[aria-current="page"]>span,
    .tbl-pagination a,
    .tbl-pagination span:not([aria-current])>span {
        min-width: 32px;
        height: 32px;
        font-size: 0.76rem;
        padding: 0 6px;
        border-radius: 8px;
    }
}

/* Per-page selector (filter bar) */

.tbl-per-page {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.tbl-per-page__label {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 600;
    white-space: nowrap;
}

.tbl-per-page__select {
    min-width: 4.25rem;
    width: auto !important;
    max-width: 6.5rem;
}

.sppd-live-filter-bar .tbl-per-page,
.bbm-portal-live-filter-bar .tbl-per-page {
    margin-left: auto;
}

@media (max-width: 640px) {
    .sppd-live-filter-bar.portal-local-filters,
    .bbm-portal-live-filter-bar.portal-local-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .sppd-live-filter-bar .admin-search-wrap.portal-search-full,
    .bbm-portal-live-filter-bar .admin-search-wrap.portal-search-full {
        flex: 0 0 auto;
        width: 100%;
    }
    .sppd-live-filter-bar .ppm-status-wrap,
    .bbm-portal-live-filter-bar .ppm-status-wrap,
    .bbm-portal-live-filter-bar .bbm-portal-date-range {
        width: 100%;
    }
    .sppd-live-filter-bar .ppm-status-wrap .admin-filter-input,
    .bbm-portal-live-filter-bar .ppm-status-wrap .admin-filter-input,
    .bbm-portal-live-filter-bar .bbm-portal-date-range .admin-filter-input {
        width: 100%;
        max-width: none;
    }
    .sppd-live-filter-bar .tbl-per-page,
    .bbm-portal-live-filter-bar .tbl-per-page {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
        padding-top: 2px;
        border-top: 1px solid rgba(148, 163, 184, 0.18);
    }
    html.dark .dash-body .sppd-live-filter-bar .tbl-per-page,
    html.dark .dash-body .bbm-portal-live-filter-bar .tbl-per-page {
        border-top-color: rgba(255, 255, 255, 0.08);
    }
    .bbm-portal-live-filter-bar .bbm-portal-filter-actions {
        width: 100%;
    }
    .bbm-portal-live-filter-bar .bbm-portal-filter-actions .btn {
        width: 100%;
    }
}

html.dark .dash-body .tbl-per-page__label {
    color: rgba(200, 218, 255, 0.5);
}

html.dark .dash-body .tbl-pagination a,
html.dark .dash-body .tbl-pagination span {
    color: rgba(200, 218, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(8, 20, 50, 0.5);
}

html.dark .dash-body .tbl-pagination .page-item.active .page-link,
html.dark .dash-body .tbl-pagination [aria-current="page"] span {
    background: #1e4080;
    border-color: #D4AF37;
    color: #D4AF37;
}

.tbl-pagination-mount {
    margin-top: 14px;
}

/* ===================================================================
   MANAGER BADGE
   =================================================================== */

.dash-pending-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 12px;
    height: 12px;
    background: #ef4444;
    border-radius: 50%;
    border: 2px solid #022777;
}

.dash-admin-peminjaman {
    background-color: #fce7f3;
    color: #9d174d;
}

.dash-admin-pending-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

/* ===================================================================
   STATUS BADGES
   =================================================================== */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.status-pending {
    background: rgba(254, 249, 195, 0.45);
    color: #ffbf00;
    backdrop-filter: blur(5px) saturate(180%);
    -webkit-backdrop-filter: blur(5px) saturate(180%);
}

.status-approved {
    background: rgba(220, 252, 231, 0.45);
    color: #166534;
    backdrop-filter: blur(5px) saturate(180%);
    -webkit-backdrop-filter: blur(5px) saturate(180%);
}

.status-rejected {
    background: rgba(254, 226, 226, 0.45);
    color: #b91c1c;
    backdrop-filter: blur(5px) saturate(180%);
    -webkit-backdrop-filter: blur(5px) saturate(180%);
}

.status-expired {
    background: rgba(242, 246, 250, 0.45);
    color: #475569;
    backdrop-filter: blur(5px) saturate(180%);
    -webkit-backdrop-filter: blur(5px) saturate(180%);
}

/* ===================================================================
   LANDING PAGE (publik — selaras dash-body / dashboard)
   =================================================================== */

.landing-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

/* — Navbar landing: tautan desktop + drawer mobile — */

.lp-nav-inner.dash-nav-inner {
    flex-wrap: nowrap;
    gap: 12px;
}

/* Landing: di mobile navbar menempel di atas layar (tetap terlihat saat scroll) */

@media (max-width: 640px) {
    body#landing .lp-top-nav.dash-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 200;
    }

    body#landing .lp-top-nav + .lp-landing-hero--viewport.dash-hero-section {
        margin-top: 56px;
    }

    body#landing #armada,
    body#landing #form-peminjaman,
    body#landing #form-laporan-kejadian {
        scroll-margin-top: 72px;
    }
}

.lp-landing-brand.dash-nav-brand {
    flex-shrink: 1;
    min-width: 0;
}

.lp-landing-logo.dash-nav-logo {
    filter: brightness(0) invert(1);
    border-radius: 8px;
    flex-shrink: 0;
}

.logo-mobile {
    display: none;
}

.sub-mobile-only {
    display: none;
}

.logo-desktop {
    display: block;
}

@media (max-width: 991px) {
    .dash-nav-logo {
        max-height: clamp(30px, 6vw, 48px);
    }
}

@media (max-width: 480px) {
    .logo-desktop {
        display: none;
    }

    .logo-mobile {
        display: block;
    }

    .sub-mobile-only {
        display: block;
    }
}

.lp-nav-links-desktop {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

@media (min-width: 641px) {
    .lp-nav-links-desktop {
        display: flex;
    }
}

.lp-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--dash-gold);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 10px;
    transition: background 0.18s ease, color 0.18s ease;
    white-space: nowrap;
}

.lp-nav-link:hover {
    filter: brightness(1.3);
    background: rgba(59, 130, 246, 0.08);
}

.lp-nav-links-mobile {
    display: none;
}

@media (max-width: 640px) {
    .lp-nav-links-mobile {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 4px;
        padding-bottom: 10px;
        margin-bottom: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .lp-nav-link--drawer {
        width: 100%;
        justify-content: flex-start;
        border-radius: 10px;
        padding: 11px 14px;
        font-size: 0.88rem;
    }
}

@media (min-width: 641px) {
    .lp-nav-links-mobile {
        display: none !important;
    }
}

.lp-nav-actions a.dash-nav-btn-glass,
.lp-nav-actions a.dash-nav-btn-gold,
.lp-nav-actions a.lp-nav-dashboard-btn {
    text-decoration: none;
}

/* Tombol Dashboard landing — pill kuning seperti versi sebelumnya */

.lp-nav-dashboard-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #facc15;
    color: #111827;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 10px 24px;
    border-radius: 9999px;
    text-decoration: none;
    border: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.lp-nav-dashboard-btn:hover {
    background: #eab308;
    color: #0f172a;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.lp-nav-dashboard-btn .bi-arrow-right {
    font-size: 1rem;
    font-weight: 800;
}

/* Hero — minimal tinggi */

.lp-landing-hero--viewport.dash-hero-section {
    min-height: min(calc(100dvh - 64px), 290px);
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.lp-landing-hero--viewport .lp-hero-inner-landing.dash-hero-inner {
    flex: 1;
    display: flex;
    align-items: center;
    width: 100%;
}

.lp-landing-hero--viewport .lp-hero-dash-grid {
    align-items: center;
}

@media (max-width: 640px) {
    .lp-landing-hero--viewport.dash-hero-section {
        min-height: calc(100dvh - 56px);
    }
}

@media (max-height: 700px) {
    .lp-landing-hero--viewport.dash-hero-section {
        min-height: 0;
        padding-top: 24px;
        padding-bottom: 28px;
    }
}

.lp-hero-dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 1;
}

.lp-hero-left {
    display: flex;
    justify-content: center;
}

.lp-hero-image {
    width: 80%;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
}

.lp-hero-title-large {
    font-size: clamp(1.85rem, 3.5vw, 2.85rem);
    line-height: 1.12;
    margin-bottom: 16px;
}

.lp-hero-accent {
    color: var(--dash-yellow);
}

.lp-hero-desc {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.65;
    margin: 0 0 28px;
    max-width: 440px;
}

.lp-hero-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.lp-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--dash-yellow);
    color: var(--dash-blue);
    font-weight: 700;
    font-size: 0.88rem;
    padding: 12px 22px;
    border-radius: 12px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 6px 18px rgba(212, 175, 55, 0.28);
}

.lp-btn-primary:hover {
    background: #e8c140;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(212, 175, 55, 0.35);
}

.lp-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 12px 22px;
    border-radius: 12px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    cursor: pointer;
    transition: all 0.2s ease;
}

.lp-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-2px);
}

.lp-hero-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lp-feat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 18px 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.2s ease, transform 0.2s ease;
}

.lp-feat-card:hover {
    background: rgba(255, 255, 255, 0.09);
    transform: translateX(4px);
}

.lp-feat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.lp-feat-icon-yellow {
    background: rgba(212, 175, 55, 0.18);
    color: #fde047;
}

.lp-feat-icon-blue {
    background: rgba(96, 165, 250, 0.15);
    color: #93c5fd;
}

.lp-feat-icon-red {
    background: rgba(245, 49, 49, 0.25);
    color: #fd0c0c;
}

.lp-feat-title {
    font-weight: 700;
    color: #fff;
    font-size: 0.92rem;
    margin: 0 0 4px;
}

.lp-feat-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .lp-hero-dash-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .lp-hero-btns {
        flex-direction: column;
    }

    .lp-btn-primary,
    .lp-btn-secondary {
        justify-content: center;
    }
}

.landing-section {
    padding: 32px 0;
}

.landing-section-header {
    margin-bottom: 20px;
}

.landing-section-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--dash-blue);
    margin: 0 0 4px;
}

.landing-section-sub {
    color: #64748b;
    font-size: 0.85rem;
    margin-top: 12px;
    margin-bottom: 12px;
}

.landing-search-form {
    margin-bottom: 12px;
}

/* Kartu konten — struktur sama light/dark; variasi hanya pewarnaan */

.landing-card {
    border-radius: 22px;
    padding: 20px;
}

html:not(.dark) .dash-body .landing-card {
    background: linear-gradient(
        135deg,
        rgba(219, 234, 254, 0.7) 0%,
        rgba(239, 246, 255, 0.7) 100%
    );
    border: 1px solid rgba(59, 130, 246, 0.22);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.09);
}

html.dark .dash-body .landing-card {
    background: linear-gradient(
        135deg,
        rgba(30, 58, 95, 0.75) 0%,
        rgba(15, 23, 42, 0.75) 100%
    );
    border: 1px solid rgba(59, 130, 246, 0.22);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
}

.landing-nopol-badge {
    display: inline-block;
    border-radius: 8px;
    padding: 3px 10px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.landing-form-card {
    padding: 24px;
}

.landing-form-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(
        90deg,
        #0b2c6b 0%,
        #123f8f 50%,
        #3b5fa8 75%,
        #dfe6f3 100%
    );
    color: #fff;
    padding: 12px 16px;
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    box-shadow:
        0 1px 4px rgba(0,0,0,0.2),
        0 6px 16px rgba(11,44,107,0.2);
}

.landing-form-banner::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: #facc15;

    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
}

.landing-form-banner svg {
    color: var(--dash-gold);
}

.landing-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
}

.landing-form-full {
    grid-column: 1 / -1;
}

.landing-form-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 12px 14px;
    margin: 16px 0;
    font-size: 0.83rem;
    color: #1e40af;
    font-weight: 500;
    line-height: 1.5;
}

.landing-submit-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--dash-blue);
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 14px 24px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 6px 18px rgba(0, 42, 122, 0.25);
}

.landing-submit-btn:hover:not(:disabled) {
    background: #041e5a;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0, 42, 122, 0.32);
}

.landing-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Tombol kirim formulir landing — kontras jelas di kartu dark */

html.dark .dash-body .landing-submit-btn {
    background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
    color: #fff;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
}

html.dark .dash-body .landing-submit-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
    box-shadow: 0 10px 26px rgba(37, 99, 235, 0.5);
}

.landing-footer {
    background:
        radial-gradient(
            ellipse 650px 120px at center,
            #244e9b 0%,
            #102f5b 35%,
            #0f223f 65%,
            #071828 100%
        );
    color: rgba(255, 255, 255, 0.7);
    padding: 10px 20px;
    margin-top: 16px;
    position: relative;
    z-index: 1;
}

.landing-footer-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.landing-footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
}

.landing-footer-copy {
    font-size: 0.78rem;
    margin: 0;
}

.landing-footer-logo {
    width: 80px;
    height: auto;
    display: block;
}

@media (max-width: 480px){
    .landing-footer-logo {
        width: 65px;
    }
}

/* Landing — dark: judul/subtitle mengikuti hierarki light (biru gelap / abu) */

html.dark .dash-body .landing-section-title {
    color: #bfdbfe;
}

html.dark .dash-body .landing-section-sub {
    color: #94a3b8;
}

html.dark .dash-body .landing-form-banner {
    background: linear-gradient(
        90deg,
        #0b2c6b 0%,
        #123f8f 50%,
        #1e4976 75%,
        #273a52 100%
    );
    color: #fff;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.05),
        0 6px 16px rgba(11,44,107,0.12);
}

html.dark .dash-body .landing-form-note {
    background: rgba(30, 58, 138, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: #93c5fd;
}

html.dark .dash-body .landing-footer {
    background: var(--dash-blue);
    color: rgba(255, 255, 255, 0.7);
    border-top: none;
}

/* Pencarian & pagination landing — dark mengikuti pola light (isi gelap, border halus) */

html.dark .dash-body .lp-search-input {
    background: #1e293b;
    border: 1.5px solid rgba(148, 163, 184, 0.35);
    color: #f1f5f9;
}

html.dark .dash-body .lp-search-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

html.dark .dash-body .lp-search-input::-moz-placeholder {
    color: #94a3b8;
}

html.dark .dash-body .lp-search-input::placeholder {
    color: #94a3b8;
}

html.dark .dash-body .lp-search-icon {
    color: #94a3b8;
}

html.dark .dash-body .lp-search-clear {
    background: #334155;
    color: #e2e8f0;
}

html.dark .dash-body .lp-search-clear:hover {
    background: #475569;
}

html.dark .dash-body .lp-lk-photo-preview {
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: #1e293b;
}

/* Tombol unggah foto laporan — teks/border mengikuti tema */

.lp-landing-file-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 10px 18px;
    border-radius: 12px;
    cursor: pointer;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #0f172a;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.lp-landing-file-btn:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
    color: #0f172a;
}

html.dark .dash-body .lp-landing-file-btn {
    background: #334155;
    border-color: rgba(148, 163, 184, 0.45);
    color: #f1f5f9;
}

html.dark .dash-body .lp-landing-file-btn:hover {
    background: #475569;
    border-color: rgba(96, 165, 250, 0.5);
    color: #fff;
}

/* SweetAlert2 — landing (kelas dipasang dari JS) */

.lp-swal-popup .swal2-icon {
    box-sizing: content-box !important;
}

.lp-swal-popup .swal2-icon * {
    box-sizing: content-box !important;
}

.swal2-popup.lp-swal-popup .swal2-success-circular-line-left,
.swal2-popup.lp-swal-popup .swal2-success-circular-line-right,
.swal2-popup.lp-swal-popup .swal2-success-fix {
    background: transparent !important;
}

.lp-swal-popup {
    border-radius: 16px !important;
    padding: 1.35rem 1.25rem 1.5rem !important;
    border: 1px solid rgba(11, 44, 107, 0.12) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    width: 420px !important;
    max-width: calc(100% - 32px) !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18) !important;
}

html.dark .dash-body .lp-swal-popup {
    color: #f3f4f6 !important;
    background: rgba(16, 38, 80, 0.78) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.lp-swal-title {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

html.dark .dash-body .lp-swal-title {
    color: #f1f5f9 !important;
}

.lp-swal-popup .swal2-html-container {
    color: inherit !important;
}

.lp-swal-popup .swal2-actions {
    margin: 1.25rem auto 0 !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

.lp-swal-popup button.swal2-confirm,
.lp-swal-popup .swal2-styled.swal2-confirm {
    margin: 0 !important;
    background: linear-gradient(135deg, #0b2c6b, #123f8f) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    padding: 0.7rem 1.5rem !important;
    min-width: 8.5rem !important;
    box-shadow: 0 4px 14px rgba(11, 44, 107, 0.3) !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.lp-swal-popup button.swal2-confirm:hover,
.lp-swal-popup .swal2-styled.swal2-confirm:hover {
    box-shadow: 0 6px 18px rgba(11, 44, 107, 0.38) !important;
    transform: translateY(-1px);
}

.lp-swal-popup button.swal2-cancel,
.lp-swal-popup .swal2-styled.swal2-cancel {
    margin: 0 !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    padding: 0.7rem 1.35rem !important;
    min-width: 7rem !important;
    border: 2px solid #cbd5e1 !important;
    background: #f8fafc !important;
    color: #475569 !important;
    cursor: pointer !important;
}

.lp-swal-popup button.swal2-cancel:hover,
.lp-swal-popup .swal2-styled.swal2-cancel:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
}

html.dark .dash-body .lp-swal-popup button.swal2-cancel,
html.dark .dash-body .lp-swal-popup .swal2-styled.swal2-cancel {
    background: rgba(30, 41, 59, 0.8) !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
    color: #e2e8f0 !important;
}

.lp-swal-note {
    padding: 12px 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    font-size: 0.8rem;
    color: #92400e;
    text-align: left;
    line-height: 1.55;
    margin-top: 4px;
}

html.dark .dash-body .lp-swal-note {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(212, 175, 55, 0.35);
    color: #fde68a;
}

html.dark .dash-body .lp-swal-note strong {
    color: #fef08a;
}

/* Landing — tabel & tanda tangan: struktur mengikuti light, hanya warna gelap */

html.dark body#landing.dash-body .admin-table th {
    background: #1e293b;
    color: #cbd5e1;
    border-bottom: 2px solid rgba(148, 163, 184, 0.35);
}

html.dark body#landing.dash-body .admin-table td {
    border-bottom: 1px solid rgba(51, 65, 85, 0.55);
    color: #e2e8f0;
}

html.dark body#landing.dash-body .admin-table tbody tr {
    border-bottom: 1px solid rgba(51, 65, 85, 0.45);
}

html.dark body#landing.dash-body .admin-table tr:hover td {
    background: rgba(59, 130, 246, 0.08);
}

html.dark body#landing.dash-body .signature-pad-wrap {
    border: 2px dashed rgba(148, 163, 184, 0.45);
    background: #f8fafc;
}

html.dark body#landing.dash-body .signature-pad-wrap:hover {
    border-color: #60a5fa;
}

html.dark body#landing.dash-body .signature-canvas {
    background: #f8fafc;
}

.lp-info-callout {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 0.84rem;
    color: #1e3a5f;
    line-height: 1.65;
}

.lp-info-callout > p:first-child {
    font-weight: 700;
    margin-bottom: 8px;
}

.lp-info-callout ol {
    padding-left: 18px;
    margin: 0;
    list-style-type: decimal;
}

html.dark .dash-body .lp-info-callout {
    background: rgba(30, 58, 138, 0.22);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: #e2e8f0;
}

.lp-armada-empty {
    text-align: center;
    padding: 32px;
    font-size: 0.88rem;
    color: #9ca3af;
}

html.dark .dash-body .lp-armada-empty {
    color: #94a3b8;
}

@media (min-width: 640px) {
    .landing-form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .landing-section-title {
        font-size: 1rem;
    }

    .landing-card {
        padding: 14px;
    }

    .landing-form-card {
        padding: 16px;
    }
}

/* ===================================================================
   MANAGER REQUEST CARDS
   =================================================================== */

.manager-request-list {
    display: grid;
    gap: 14px;
    margin-top: 4px;
}

.manager-request-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    transition: box-shadow 0.2s ease;
}

.manager-request-card:hover {
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.1);
}

.manager-request-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.manager-request-name {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.manager-request-meta {
    font-size: 0.76rem;
    color: #64748b;
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.meta-sep {
    color: #d1d5db;
}

.manager-vehicle-block {
    background: #f8faff;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
}

.manager-vehicle-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.manager-vehicle-nopol {
    font-size: 1rem;
    font-weight: 800;
    color: #1d4ed8;
    line-height: 1.2;
}

.manager-vehicle-jenis {
    font-size: 0.8rem;
    color: #3b82f6;
    margin-top: 2px;
}

.manager-alasan-block {
    margin-bottom: 16px;
}

.manager-alasan-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
}

.manager-alasan-text {
    font-size: 0.88rem;
    color: #374151;
    margin: 0;
    line-height: 1.5;
}

.manager-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.manager-btn-approve,
.manager-btn-reject {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    border-radius: 12px;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.18s ease;
    flex: 1;
    justify-content: center;
    min-width: 120px;
}

.manager-btn-approve {
    background: #dcfce7;
    color: #15803d;
}

.manager-btn-approve:hover {
    background: #bbf7d0;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.2);
}

.manager-btn-reject {
    background: #fee2e2;
    color: #b91c1c;
}

.manager-btn-reject:hover {
    background: #fecaca;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

.manager-badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    padding: 0 4px;
    margin-left: 6px;
    vertical-align: middle;
}

.manager-tab-content {
    margin-top: 8px;
}

@media (min-width: 640px) {
    .manager-request-list {
        grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
    }
}

@media (max-width: 480px) {
    .manager-request-card {
        padding: 14px;
        border-radius: 16px;
    }

    .manager-request-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .manager-btn-approve,
    .manager-btn-reject {
        padding: 9px 14px;
        font-size: 0.8rem;
    }
}

/* ===================================================================
   CHECKLIST PREVIEW (Step 8)
   =================================================================== */

.pvw-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.85rem;
    color: #1e40af;
    margin-bottom: 18px;
    line-height: 1.5;
}

.pvw-section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 14px;
    overflow: hidden;
}

.pvw-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    background: linear-gradient(90deg, #0b2c6b 0%, #123f8f 50%, #3b5fa8 75%, #dfe6f3 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    position: relative;
}

.pvw-section-head::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 5px;
    background: #facc15;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.pvw-section-body { padding: 12px 16px; }

.pvw-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 7px 0;
    border-bottom: 1px solid #f1f5f9;
    gap: 12px;
    font-size: 0.84rem;
}

.pvw-row:last-child { border-bottom: none; }

.pvw-label  { color: #64748b; font-weight: 600; flex-shrink: 0; min-width: 150px; }

.pvw-value  { color: #1e293b; font-weight: 500; text-align: right; }

.pvw-none   { color: #94a3b8; font-style: italic; }

.pvw-catatan {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.84rem;
    color: #334155;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Status badges */

.pvw-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 99px;
    font-size: 0.73rem;
    font-weight: 700;
    text-transform: uppercase;
    background: #f1f5f9;
    color: #64748b;
}

.pvw-ok { background: #dcfce7; color: #15803d; }

.pvw-no { background: #fee2e2; color: #dc2626; }

/* Checklist table */

.pvw-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    margin-bottom: 14px;
}

.pvw-table th {
    background: #f8fafc;
    padding: 7px 10px;
    text-align: left;
    font-weight: 700;
    color: #475569;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid #e2e8f0;
}

.pvw-table td {
    padding: 7px 10px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
}

.pvw-table tr:last-child td { border-bottom: none; }

.pvw-note-cell { color: #64748b; font-size: 0.78rem; }

/* Photo grid */

.pvw-photo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.pvw-photo-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.pvw-photo-slot img {
    width: 88px;
    height: 66px;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.pvw-photo-slot span {
    font-size: 0.66rem;
    color: #64748b;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Perlengkapan */

.pvw-perlengkapan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 8px;
}

.pvw-perlengkapan-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
}

.pvw-perlengkapan-item.ada   { background: #dcfce7; color: #15803d; }

.pvw-perlengkapan-item.tidak { background: #fee2e2; color: #dc2626; }

.pvw-pl-icon { font-size: 1rem; font-weight: 800; }

/* Signatures */

.pvw-sig-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 12px;
}

.pvw-sig-block { text-align: center; }

.pvw-sig-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}

.pvw-sig-img {
    width: 100%;
    max-width: 220px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.pvw-sig-empty {
    height: 56px;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 0.78rem;
}

@media (max-width: 520px) {
    .pvw-label { min-width: 110px; }
    .pvw-sig-grid { grid-template-columns: 1fr; }
    .pvw-photo-slot img { width: 70px; height: 52px; }
    .pvw-perlengkapan-grid { grid-template-columns: 1fr 1fr; }
    .pvw-table th, .pvw-table td { padding: 5px 6px; }
}

/* ===================================================================
   PORTAL PEMERIKSAAN KENDARAAN
   =================================================================== */

.portal-wrapper {
    padding: 20px 16px 48px;
    max-width: 2560px;
    margin: 0 auto;
}

/* ---- Stats row — PM FuelLog–style cards (watermark icon, royal value) ---- */

.portal-stats-row {
    display: grid;
    gap: 16px;
    margin-bottom: 24px;
    width: 100%;
}

/* Equal-width grid by card count (desktop, max 4 columns) */

@media (min-width: 768px) {
    .portal-stats-row[data-stat-count="1"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portal-stats-row[data-stat-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portal-stats-row[data-stat-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .portal-stats-row[data-stat-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .portal-stats-row[data-stat-count="1"] .portal-stat-card { grid-column: 1; }
    /* Rows with more than 4 cards wrap at 4 columns */
    .portal-stats-row:not([data-stat-count]) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.portal-stat-card {
    --premium-royal: #0a2342;
    --premium-gold: #d4af37;
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    padding: 16px 18px;
    min-width: 0;
    box-sizing: border-box;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, box-shadow, border-color, background-color;
}

@media (min-width: 768px) {
    .portal-stat-card {
        padding: 18px 20px;
    }
}

.portal-stat-card:hover {
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}

.portal-stat-body {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding-right: 44px;
}

/* PM FuelLog–style watermark icon (ph-fill / bi-fill, faint → gold on hover) */

.portal-stat-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent !important;
    color: #e2e8f0 !important;
    font-size: 1.65rem;
    line-height: 1;
    pointer-events: none;
    transition: color 0.2s ease;
}

.portal-stat-icon i {
    line-height: 1;
}

.portal-stat-icon svg {
    width: 28px;
    height: 28px;
}

@media (min-width: 768px) {
    .portal-stat-icon {
        font-size: 1.85rem;
    }
    .portal-stat-icon svg {
        width: 32px;
        height: 32px;
    }
}

.portal-stat-card:hover .portal-stat-icon {
    color: var(--premium-gold) !important;
}

.portal-stat-label {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 600;
    margin: 0;
    line-height: 1.35;
    max-width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.portal-stat-value-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3em;
    max-width: 100%;
}

.portal-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #002a7a;
    line-height: 1.15;
}

@media (min-width: 768px) {
    .portal-stat-value {
        font-size: 1.45rem;
    }
}

.portal-stat-unit {
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.2;
}

.portal-stat-desc {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 400;
    line-height: 1.4;
    margin: 2px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.portal-stat-value .portal-stat-sublabel {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    margin-top: 2px;
    line-height: 1.35;
}

.portal-stat-body .bbm-portal-stat-mom {
    margin: 2px 0;
}

/* Equal-width grid — mgmt alias (max 4 columns) */

@media (min-width: 768px) {
    .mgmt-stats-strip[data-stat-count="1"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mgmt-stats-strip[data-stat-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mgmt-stats-strip[data-stat-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mgmt-stats-strip[data-stat-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .mgmt-stats-strip[data-stat-count="1"] .portal-stat-card { grid-column: 1; }
}

/* Legacy alias: mgmt strip shares portal stats grid */

.mgmt-stats-strip {
    display: grid;
    gap: 16px;
    margin: 16px 0 20px;
    width: 100%;
}

/* BBM portal: 4 cards top row + 2 wide cards bottom row */

@media (min-width: 641px) and (max-width: 991px) {
    .portal-stats-row--bbm {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .portal-stats-row--bbm .portal-stat-card:nth-child(5),
    .portal-stats-row--bbm .portal-stat-card:nth-child(6) {
        grid-column: 1 / -1;
    }
}

@media (min-width: 992px) {
    .portal-stats-row--bbm {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }
    .portal-stats-row--bbm .portal-stat-card:nth-child(5),
    .portal-stats-row--bbm .portal-stat-card:nth-child(6) {
        grid-column: span 2;
    }
}

/* ---- Charts grid ---- */

.portal-charts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.portal-chart-card {
    background: #fff;
    border-radius: 14px;
    padding: 16px 16px 12px;
    box-shadow: 0 1px 6px rgba(0,0,0,.07);
}

.portal-chart-card--wide {
    grid-column: 1 / -1;
}

/* Portal pemeriksaan: BBM + Shift atas, Ceklist duo bawah */

.portal-charts-grid--pemeriksaan {
    grid-template-columns: repeat(6, 1fr);
}

.portal-charts-grid--pemeriksaan .portal-chart-card--bbm-slot {
    grid-column: span 4;
    min-width: 0;
}

.portal-charts-grid--pemeriksaan .portal-chart-card--shift-slot {
    grid-column: span 2;
    min-width: 0;
}

.portal-charts-grid--pemeriksaan .portal-chart-card--ceklist-duo {
    grid-column: span 3;
    min-width: 0;
}

/* BBM portal: Top driver (1) + Log (2) pada grid 3 kolom */

.portal-charts-grid--bbm .portal-chart-card--bbm-driver-col {
    grid-column: span 1;
    min-width: 0;
}

.portal-charts-grid--bbm .portal-chart-card--bbm-log-col {
    grid-column: span 2;
    min-width: 0;
}

.portal-chart-container--bbm-driver-pie {
    box-sizing: border-box;
    padding-left: 4px;
    padding-right: 4px;
    height: 260px;
    position: relative;
    width: 100%;
}

.portal-chart-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.portal-chart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.portal-chart-head .portal-chart-title {
    margin-bottom: 0;
    flex: 1 1 140px;
    min-width: 0;
}

.portal-chart-year-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.portal-chart-year-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    white-space: nowrap;
}

.portal-chart-year-select {
    min-width: 72px;
    padding: 4px 8px !important;
    font-size: 0.78rem !important;
    height: auto !important;
}

.portal-chart-card > .portal-chart-title {
    margin-bottom: 12px;
}

/* Chart canvas containers — fixed height so charts stay responsive */

.portal-chart-container {
    position: relative;
    height: 200px;
    width: 100%;
}

.portal-chart-container--doughnut {
    height: 220px;
}

.portal-chart-container--bbm {
    height: 220px;
}

/* ── Chart loading overlay ── */

.portal-chart-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: inherit;
    border-radius: 8px;
    z-index: 2;
    transition: opacity 0.25s ease;
}

.portal-chart-container.is-ready .portal-chart-loading {
    opacity: 0;
    pointer-events: none;
}

.portal-chart-loading-spinner {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 3px solid rgba(100, 116, 139, 0.25);
    border-top-color: rgba(100, 116, 139, 0.7);
    border-radius: 50%;
    animation: chartSpinner 0.7s linear infinite;
}

@keyframes chartSpinner {
    to { transform: rotate(360deg); }
}

/* dark mode overlay background */

html.dark .portal-chart-loading {
    background: transparent;
}

/* ---- Global search bar ---- */

.portal-global-search-wrap {
    background: linear-gradient(135deg, #002a7a 0%, #06318a 100%);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0,42,122,.22);
}

.portal-global-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.portal-global-hint {
    font-weight: 400;
    font-size: 0.76rem;
    color: rgba(255,255,255,.6);
}

.portal-global-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.portal-global-search-field {
    flex: 1 1 200px;
}

.portal-global-input {
    width: 100%;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1.5px solid rgba(255,255,255,.3);
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 0.87rem;
    outline: none;
    transition: border-color .2s, background .2s;
}

.portal-global-input::-moz-placeholder { color: rgba(255,255,255,.5); }

.portal-global-input::placeholder { color: rgba(255,255,255,.5); }

.portal-global-input:focus { border-color: #ffd700; background: rgba(255,255,255,.18); }

.portal-global-date,
.portal-global-select {
    padding: 9px 12px;
    border-radius: 10px;
    border: 1.5px solid rgba(255,255,255,.3);
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 0.82rem;
    outline: none;
    transition: border-color .2s;
    cursor: pointer;
}

.portal-global-date:focus,
.portal-global-select:focus { border-color: #ffd700; }

.portal-global-select option { background: #002a7a; color: #fff; }

.portal-global-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 10px;
    background: rgba(255,215,0,.18);
    border: 1.5px solid rgba(255,215,0,.45);
    color: #ffd700;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background .2s;
    white-space: nowrap;
}

.portal-global-reset:hover { background: rgba(255,215,0,.32); }

/* ---- Section tabs ---- */

.portal-section-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.portal-section-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s, box-shadow .2s;
}

.portal-section-tab:hover { border-color: #002a7a; color: #002a7a; box-shadow: 0 2px 8px rgba(0,42,122,.1); }

.portal-section-tab.active { border-color: #002a7a; background: #002a7a; color: #ffd700; box-shadow: 0 3px 12px rgba(0,42,122,.25); }

/* ---- Portal sections ---- */

.portal-section {
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
    margin-bottom: 20px;
}

#section-db.portal-section,
#section-bbm-table.portal-section {
    scroll-margin-top: 5.75rem;
}

.portal-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.portal-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 0.95rem;
    color: #002a7a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.portal-section-title svg, .portal-section-title i {
    color: var(--dash-gold);
    margin-bottom: 1.5px;
}

/* ---- Local filters ---- */

.portal-local-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.portal-search-full { flex: 1 1 180px; }

.portal-local-reset {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1.5px solid #cbd5e1;
    background: #fff;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s, color .2s;
    white-space: nowrap;
}

.portal-local-reset:hover { border-color: #002a7a; color: #002a7a; }

/* ---- Database sheet: detail & modal ---- */

.portal-db-aksi {
    width: 56px;
    text-align: center;
    white-space: nowrap;
}

.portal-db-detail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(0, 42, 122, 0.25);
    background: linear-gradient(135deg, #1248a4 0%, #0a2f75 100%);
    color: #fff !important;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.portal-db-detail-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(10, 47, 117, 0.28);
}

html.dark .dash-body .portal-db-detail-btn {
    border-color: rgba(212, 175, 55, 0.35);
}

/* Detail ceklist: scroll di body (profile-card di bawah ini memakai overflow:visible — perlu #id agar menang) */

.portal-checklist-modal-box {
    background: rgba(255, 255, 255, 0.38); 
    backdrop-filter: blur(10px);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
    height: auto;
    min-height: -moz-min-content;
    min-height: min-content;
    width: 100%;
    overflow: visible;
}

html.dark .dash-body .portal-checklist-modal-box {
    background: rgba(10, 35, 66, 0.35) !important;
    border: 1px solid rgba(212, 175, 55, 0.1) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

#portal-checklist-modal .portal-checklist-modal-box.modal-box {
    max-width: min(720px, 100%);
    width: 100%;
    max-height: min(88vh, calc(100dvh - 32px));
    background: #fff;
    text-align: left;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#portal-checklist-modal .portal-checklist-modal-box > h3 {
    flex-shrink: 0;
    margin: 0;
    padding: 18px 20px 12px;
    font-size: 1.05rem;
    color: #002a7a;
}

html.dark .dash-body #portal-checklist-modal .portal-checklist-modal-box > h3 {
    color: rgba(200, 218, 255, 0.94);
}

#portal-checklist-modal #portal-checklist-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 20px;
    -webkit-overflow-scrolling: touch;
}

.portal-detail-dl {
    display: grid;
    grid-template-columns: minmax(100px, 130px) 1fr;
    gap: 6px 12px;
    font-size: 0.82rem;
    margin-bottom: 16px;
}

.portal-detail-dl dt {
    font-weight: 700;
    color: #64748b;
}

html.dark .dash-body .portal-detail-dl dt {
    color: rgba(200, 218, 255, 0.55);
}

.portal-detail-section-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: #002a7a;
    margin: 16px 0 8px;
    padding-left: 8px;
    border-left: 3px solid #ffd300;
}

html.dark .dash-body .portal-detail-section-title {
    color: rgba(200, 218, 255, 0.92);
}

.portal-detail-table {
    font-size: 0.78rem;
    margin-bottom: 8px;
}

.portal-detail-table th {
    background: #f1f5f9;
    font-size: 0.72rem;
}

html.dark .dash-body .portal-detail-table th {
    background: rgba(30, 58, 95, 0.6);
    color: rgba(200, 218, 255, 0.85);
}

/* Modal detail: kolom Bagian | Status | Keterangan sejajar */

#portal-checklist-modal .admin-table-wrap {
    overflow-x: visible;
    margin-bottom: 4px;
}

#portal-checklist-modal .portal-detail-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

#portal-checklist-modal .portal-detail-table th,
#portal-checklist-modal .portal-detail-table td {
    padding: 8px 10px;
    vertical-align: top;
    box-sizing: border-box;
}

#portal-checklist-modal .portal-detail-table th:nth-child(1),
#portal-checklist-modal .portal-detail-table td:nth-child(1) {
    width: 36%;
    text-align: left;
}

#portal-checklist-modal .portal-detail-table th:nth-child(2),
#portal-checklist-modal .portal-detail-table td:nth-child(2) {
    width: 14%;
    text-align: center;
}

#portal-checklist-modal .portal-detail-table td:nth-child(2) {
    white-space: nowrap;
}

#portal-checklist-modal .portal-detail-table th:nth-child(3),
#portal-checklist-modal .portal-detail-table td:nth-child(3) {
    width: 50%;
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

html.dark .dash-body #portal-checklist-modal .portal-detail-table td {
    border-bottom-color: rgba(148, 163, 184, 0.2);
}

#portal-checklist-modal .portal-checklist-modal-actions {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 0;
    padding: 12px 20px 16px;
    border-top: 1px solid #e2e8f0;
}

html.dark .dash-body #portal-checklist-modal .portal-checklist-modal-actions {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.portal-detail-catatan {
    margin-top: 14px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    font-size: 0.82rem;
}

html.dark .dash-body .portal-detail-catatan {
    background: rgba(15, 30, 58, 0.65);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ---- Loading dots ---- */

.portal-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 24px;
}

.portal-loading-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #002a7a;
    animation: portal-dot-blink 1.2s infinite ease-in-out;
}

.portal-loading-dot:nth-child(2) { animation-delay: .2s; }

.portal-loading-dot:nth-child(3) { animation-delay: .4s; }

@keyframes portal-dot-blink {
    0%, 80%, 100% { opacity: .15; transform: scale(.8); }
    40%            { opacity: 1;   transform: scale(1); }
}

/* ---- Misc ---- */

.portal-empty {
    text-align: center;
    color: #94a3b8;
    padding: 28px;
    font-size: 0.88rem;
}

.portal-thumb-row { display: flex; gap: 8px; flex-wrap: wrap; }

.portal-thumb {
    width: 100px;
    height: 75px;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 6px;
    display: block;
    transition: transform .2s, box-shadow .2s;
}

.portal-thumb:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,.18); }

/* ====================================================================
   RESPONSIVE
==================================================================== */

/* Tablet (≤ 1024px): charts 2-col */

@media (max-width: 1024px) {
    .portal-charts-grid { grid-template-columns: repeat(2, 1fr); }
    .portal-charts-grid--pemeriksaan {
        grid-template-columns: repeat(2, 1fr);
    }
    .portal-charts-grid--pemeriksaan .portal-chart-card--bbm-slot,
    .portal-charts-grid--pemeriksaan .portal-chart-card--shift-slot,
    .portal-charts-grid--pemeriksaan .portal-chart-card--ceklist-duo {
        grid-column: span 1;
    }
    /* BBM: pada grid 2 kolom, driver + log sama lebar agar tidak overflow */
    .portal-charts-grid--bbm .portal-chart-card--bbm-driver-col,
    .portal-charts-grid--bbm .portal-chart-card--bbm-log-col {
        grid-column: span 1;
    }
}

/* Mobile (≤ 640px) */

@media (max-width: 640px) {
    /* Ruang horizontal konsisten (hindari konten mepet kanan / grid overflow) */
    .admin-shell {
        padding: 12px 16px 24px;
        max-width: 100%;
        box-sizing: border-box;
    }
    .portal-wrapper {
        padding: 12px 0 40px;
        margin: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Stats: 2 columns on mobile */
    .portal-stats-row,
    .mgmt-stats-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
        width: 100%;
        max-width: 100%;
    }
    .portal-stats-row[data-stat-count="1"],
    .mgmt-stats-strip[data-stat-count="1"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .portal-stats-row[data-stat-count="1"] .portal-stat-card,
    .mgmt-stats-strip[data-stat-count="1"] .portal-stat-card {
        grid-column: 1;
    }
    .portal-stat-value {
        font-size: 1.15rem;
    }
    .portal-stat-card {
        padding: 14px 12px;
    }
    .portal-stat-body {
        padding-right: 38px;
    }
    .portal-stat-icon {
        right: 12px;
        font-size: 1.45rem;
    }
    .portal-stat-icon svg {
        width: 26px;
        height: 26px;
    }
    .portal-stat-desc {
        -webkit-line-clamp: 3;
    }

    .portal-stats-row--bbm .portal-stat-card:nth-child(5),
    .portal-stats-row--bbm .portal-stat-card:nth-child(6) {
        grid-column: 1 / -1;
    }

    .portal-charts-grid {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .bbm-year-toggles {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
        box-sizing: border-box;
    }

    /* Charts: 1 column */
    .portal-charts-grid { grid-template-columns: 1fr; gap: 12px; }
    .portal-charts-grid--pemeriksaan .portal-chart-card--bbm-slot,
    .portal-charts-grid--pemeriksaan .portal-chart-card--shift-slot,
    .portal-charts-grid--pemeriksaan .portal-chart-card--ceklist-duo {
        grid-column: 1 / -1;
    }
    .portal-charts-grid--bbm .portal-chart-card--bbm-driver-col,
    .portal-charts-grid--bbm .portal-chart-card--bbm-log-col {
        grid-column: 1 / -1;
    }
    .portal-chart-container--bbm-driver-pie {
        padding-left: 8px;
        padding-right: 8px;
        max-width: 100%;
        height: 300px;
    }
    .portal-chart-container        { height: 170px; }
    .portal-chart-container--doughnut { height: 200px; }
    .portal-chart-container--bbm   { height: 200px; }

    /* Global search: stack vertically */
    .portal-global-inputs { flex-direction: column; align-items: stretch; }
    .portal-global-search-field { flex: unset; }
    .portal-global-date,
    .portal-global-select,
    .portal-global-reset { width: 100%; }

    /* Section tabs: stretch */
    .portal-section-tabs { flex-direction: column; }
    .portal-section-tab  { width: 100%; justify-content: center; }

    /* Local filters: wrap nicely */
    .portal-local-filters { gap: 8px; }
    .portal-search-full   { flex: 0 0 100%; }
    .admin-filter-input   { flex: 1 1 120px; }

    /* Tables: smaller font */
    .admin-table th,
    .admin-table td { font-size: 0.72rem; padding: 6px 8px; }

    /* Thumbs: smaller */
    .portal-thumb { width: 80px; height: 60px; }

    /* Section card padding */
    .portal-section { padding: 14px 12px; }
}

/* ─────────────────────────────────────────────────────────────────────
   PORTAL MANAJEMEN ADMINISTRASI  – redesigned
   ───────────────────────────────────────────────────────────────────── */

/* ── Stats strip (Portal Manajemen) — uses portal-stat-card component ── */

/* .mgmt-stats-strip grid rules defined above with data-stat-count */

.mgmt-stat-accent {
    display: none;
}

/* ── Tab bar ─────────────────────────────────────────────────────────── */

.mgmt-tab-bar {
    display: flex;
    background: #f1f5f9;
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    margin-bottom: 16px;
}

.mgmt-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 14px;
    border-radius: 9px;
    border: none;
    background: transparent;
    font-size: 0.83rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all .2s;
}

.mgmt-tab.active {
    background: #fff;
    color: #0f172a;
    box-shadow: 0 1px 6px rgba(0,0,0,0.1);
}

.mgmt-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    background: #e2e8f0;
    color: #475569;
    transition: all .2s;
}

.mgmt-tab.active .mgmt-tab-count { background: #002a7a; color: #fff; }

@media (max-width: 480px) {
    .mgmt-tab { font-size: 0.78rem; padding: 8px 8px; gap: 4px; }
    .mgmt-tab svg { display: none; }
}

/* ── Panel card ──────────────────────────────────────────────────────── */

.mgmt-panel {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 14px rgba(0,0,0,0.07);
    overflow: hidden;
    margin-bottom: 16px;
    padding: 20px;  
}

/* Panel header */

.mgmt-panel-header {
    display: flex;
    align-items: center;  
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.mgmt-ph-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mgmt-ph-text { flex: 1; min-width: 0; }

.mgmt-ph-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mgmt-ph-sub { font-size: 0.73rem; color: #94a3b8; margin: 0; }

.mgmt-ph-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--ph, #002a7a);
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s, transform .15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.mgmt-ph-add-btn:hover { opacity: .88; transform: translateY(-1px); }

.mgmt-ph-add-btn.active { background: #64748b; }

/* Collapsible add panel */

.mgmt-add-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    border-bottom: 0 solid #f1f5f9;
}

.mgmt-add-panel.open {
    max-height: 500px;
    border-bottom-width: 1px;
}

.mgmt-add-inner {
    padding: 18px 20px 20px;
    background: #f8fafc;
}

.mgmt-add-heading {
    font-size: 0.72rem;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    margin: 0 0 14px;
}

/* Form grid */

.mgmt-form-grid5 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    gap: 12px;
    align-items: end;
}

.mgmt-field { display: flex; flex-direction: column; gap: 5px; }

.mgmt-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mgmt-input {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.84rem;
    color: #0f172a;
    width: 100%;
    transition: border-color .18s, box-shadow .18s;
    outline: none;
}

.mgmt-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}

.mgmt-input.has-icon { padding-left: 36px; }

.mgmt-hint { font-size: 0.68rem; color: #94a3b8; margin: 2px 0 0; }

.mgmt-hint code { background:#f1f5f9; padding:1px 4px; border-radius:4px; font-size:.7rem; color:#2563eb; }

/* Password wrapper */

.mgmt-pw-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.mgmt-pw-wrap .mgmt-input { padding-right: 38px; }

.mgmt-pw-eye {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #94a3b8;
    display: flex;
    align-items: center;
    transition: color .15s;
}

.mgmt-pw-eye:hover { color: #475569; }

/* Action buttons in form */

.mgmt-field-action { display: flex; flex-direction: column; gap: 6px; align-self: flex-end; }

.mgmt-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    background: #002a7a;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s;
    white-space: nowrap;
}

.mgmt-submit-btn:hover { background: #1d4ed8; }

.mgmt-submit-btn:disabled { opacity: .65; cursor: not-allowed; }

.mgmt-cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    background: #f1f5f9;
    color: #475569;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}

.mgmt-cancel-btn:hover { background: #e2e8f0; }

@media (max-width: 900px) {
    .mgmt-form-grid5 { grid-template-columns: 1fr 1fr; }
    .mgmt-field-action { flex-direction: row; }
}

@media (max-width: 540px) {
    .mgmt-form-grid5 { grid-template-columns: 1fr; }
    .mgmt-field-action { flex-direction: row; }
}

/* Filter bar */

.mgmt-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid #f8fafc;
}

.mgmt-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 200px;
}

.mgmt-search-icon {
    position: absolute;
    left: 11px;
    color: #94a3b8;
    pointer-events: none;
}

.mgmt-search-input {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.83rem;
    color: #0f172a;
    background: #fff;
    outline: none;
    transition: border-color .18s, box-shadow .18s;
}

.mgmt-search-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.1); }

.mgmt-select-wrap {
    position: relative;
    min-width: 148px;
}

.mgmt-filter-select-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.mgmt-filter-select {
    width: 100%;
    padding: 8px 12px 8px 32px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #475569;
    background: #fff;
    outline: none;
    cursor: pointer;
    transition: border-color .18s;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

.mgmt-filter-select:focus { border-color: #3b82f6; }

.mgmt-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}

.mgmt-reset-btn:hover { background: #e2e8f0; }

/* Loading dots */

.mgmt-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px;
}

.mgmt-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #002a7a;
    animation: mgmtBounce .9s infinite;
}

.mgmt-dot:nth-child(2) { animation-delay: .15s; }

.mgmt-dot:nth-child(3) { animation-delay: .3s; }

@keyframes mgmtBounce { 0%,80%,100%{transform:scale(.5);opacity:.4} 40%{transform:scale(1);opacity:1} }

/* Table */

.mgmt-table-wrap { overflow-x: auto; padding: 0 0 4px; }

.mgmt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.mgmt-table thead th {
    padding: 10px 16px;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
    white-space: nowrap;
}

.mgmt-table tbody tr {
    border-bottom: 1px solid #f8fafc;
    transition: background .12s;
}

.mgmt-table tbody tr:last-child { border-bottom: none; }

.mgmt-table tbody tr:hover { background: #f8fafc; }

.mgmt-table td { padding: 11px 16px; vertical-align: middle; color: #1e293b; }

.mgmt-table .w-10 { width: 44px; }

.mgmt-table .text-center { text-align: center; }

.mgmt-table .text-muted { color: #94a3b8; font-size: 0.78rem; }

.mgmt-empty { text-align: center; padding: 36px 16px !important; color: #94a3b8; font-size: 0.85rem; }

/* Nopol badge */

.mgmt-nopol {
    display: inline-block;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.mgmt-expiry-cell { vertical-align: top; min-width: 118px; }

.mgmt-expiry-date { font-size: 0.78rem; font-weight: 600; color: #0f172a; line-height: 1.35; margin-bottom: 4px; }

.mgmt-expiry-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.mgmt-expiry-aktif { background: #15803d; color: #fff; }

.mgmt-expiry-expired { background: #991b1b; color: #fff; }

.mgmt-status-pill {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.mgmt-status-on { background: rgba(22, 101, 52, 0.15); color: #15803d; border: 1px solid rgba(22, 101, 52, 0.25); }

.mgmt-status-maint { background: rgba(180, 83, 9, 0.12); color: #b45309; border: 1px solid rgba(180, 83, 9, 0.22); }

.mgmt-status-off { background: rgba(153, 27, 27, 0.1); color: #b91c1c; border: 1px solid rgba(153, 27, 27, 0.22); }

/* User cell */

.mgmt-user-cell { display: flex; align-items: center; gap: 10px; }

.mgmt-user-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.mgmt-user-name { font-size: 0.85rem; font-weight: 600; color: #0f172a; margin: 0; }

.mgmt-username {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #2563eb;
}

.mgmt-username::before { content: "@"; opacity: .5; }

/* Role badges */

.mgmt-role-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.mgmt-role-driver  { background: #dbeafe; color: #1d4ed8; }

.mgmt-role-pic     { background: #ede9fe; color: #6d28d9; }

.mgmt-role-manager { background: #ffedd5; color: #c2410c; }

.mgmt-role-admin   { background: #ccfbf1; color: #0f766e; }

.mgmt-presence {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.mgmt-presence-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mgmt-presence--online { color: #15803d; }

.mgmt-presence--online .mgmt-presence-dot {
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.18);
}

.mgmt-presence--offline { color: #64748b; }

.mgmt-presence--offline .mgmt-presence-dot { background: #94a3b8; }

/* Action buttons in table */

.mgmt-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.mgmt-act-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 7px;
    border: none;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

.mgmt-act-edit   { background: #eff6ff; color: #2563eb; }

.mgmt-act-edit:hover { background: #dbeafe; }

.mgmt-act-del    { background: #fff1f2; color: #e11d48; }

.mgmt-act-del:hover { background: #ffe4e6; }

.mgmt-act-save   { background: #f0fdf4; color: #16a34a; }

.mgmt-act-save:hover { background: #dcfce7; }

.mgmt-act-cancel { background: #f1f5f9; color: #64748b; }

.mgmt-act-cancel:hover { background: #e2e8f0; }

/* Input with icon (modal) */

.mgmt-input-icon-wrap { position: relative; }

.mgmt-input-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

/* Edit user modal */

.mgmt-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(3px);
}

/* Pastikan overlay tertutup tidak menangkap klik (display:flex di atas bisa mengalahkan atribut hidden) */

.mgmt-modal-overlay[hidden] {
    display: none !important;
    pointer-events: none !important;
}

.mgmt-modal-box {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.18);
    width: 100%;
    max-width: 540px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Batasi tinggi ke layar (dvh = tinggi efektif di HP, di luar address bar) supaya body bisa di-scroll */
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    animation: mgmtModalIn .2s ease;
}

/* Form membungkus body + footer: harus ikut flex agar body bisa menyusut & scroll, footer tetap terlihat */

.mgmt-modal-box > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

@keyframes mgmtModalIn {
    from { transform: scale(.95) translateY(16px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.mgmt-modal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}

.mgmt-modal-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.mgmt-modal-title { font-size: 1rem; font-weight: 700; color: #0f172a; margin: 0 0 2px; }

.mgmt-modal-sub   { font-size: 0.73rem; color: #94a3b8; margin: 0; }

.mgmt-modal-close {
    margin-left: auto;
    background: #f1f5f9;
    border: none;
    border-radius: 9px;
    padding: 8px;
    cursor: pointer;
    color: #64748b;
    display: flex;
    align-items: center;
    transition: background .15s;
    flex-shrink: 0;
}

.mgmt-modal-close:hover { background: #e2e8f0; }

.mgmt-modal-body {
    padding: 20px 22px 10px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.mgmt-modal-section-label {
    font-size: 0.66rem;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin: 0 0 12px;
}

.mgmt-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }

@media (max-width: 480px) { .mgmt-modal-grid { grid-template-columns: 1fr; } }

.mgmt-modal-divider { height: 1px; background: #f1f5f9; margin: 16px 0; }

.mgmt-hint-box {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 9px;
    padding: 10px 14px;
    font-size: 0.78rem;
    color: #1d4ed8;
    margin-bottom: 14px;
}

.mgmt-hint-box code { background: #dbeafe; padding: 1px 5px; border-radius: 4px; font-weight: 700; }

.mgmt-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px 20px;
    border-top: 1px solid #f1f5f9;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   PROFILE DRAWER – redesigned
   ───────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   PROFILE DRAWER
═══════════════════════════════════════════════════════════════ */

/* Overlay */

.profile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 800;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Drawer panel */

.profile-drawer {
    position: fixed;
    top: 0; right: 0;
    height: 100%;
    width: min(400px, 100vw);
    max-width: 100vw;
    background: rgba(241, 245, 249, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: -12px 0 60px rgba(0,0,0,0.18);
    z-index: 810;
    display: block;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    overflow-x: hidden;
}

.profile-drawer.open { transform: translateX(0); }

/* ── Header: centered hero */

.profile-drawer-header {
    background: linear-gradient(
        150deg,
        #001e5e 0%,
        #1d4ed8 55%,
        #3b82f6 100%
    );

    padding: 28px 20px 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    position: relative;
    overflow: hidden;

    -webkit-mask:
        radial-gradient(
            58% 35px at 50% calc(100% - 0px),
            transparent 98.5%,
            #000 100%
        );
}

@media (max-width: 768px) {
    .profile-drawer-header {
        padding: 24px 18px 55px !important;
    }
}

@media (max-width: 480px) {
    .profile-drawer-header {
        padding: 20px 16px 58px !important;
    }
}

@media (max-width: 360px) {
    .profile-drawer-header {
        padding: 18px 14px 60px;
    }
}

/* Decorative circles */

.profile-drawer-header::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    pointer-events: none;
}

/* Wave at bottom */

/* .profile-drawer-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 36px;
    background: rgba(241, 245, 249, 0.85);
    clip-path: ellipse(58% 100% at 50% 100%);
} */

/* Close button (top-right corner) */

.profile-drawer-close {
    position: absolute;
    top: 14px; right: 14px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 9px;
    padding: 7px;
    cursor: pointer;
    color: rgba(255,255,255,0.85);
    display: flex;
    align-items: center;
    transition: background .15s, color .15s;
    z-index: 1;
}

.profile-drawer-close:hover { background: rgba(255,255,255,0.28); color: #fff; }

/* .profile-drawer-header-wave {
    width: 100%;
    height: 28px;
    margin-top: 8px;
    line-height: 0;
    color: #f1f5f9;
    flex-shrink: 0;
} */

/* .profile-drawer-header-wave svg {
    width: 100%;
    height: 28px;
    display: block;
} */

/* Avatar */

.profile-drawer-avatar-outer {
    position: relative;
    margin-bottom: 14px;
}

.profile-drawer-avatar-ring {
    padding: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    border: 2.5px solid rgba(255,255,255,0.38);
    box-shadow: 0 0 0 6px rgba(255,255,255,0.08);
}

.profile-drawer-avatar-ring.dash-avatar--admin {
    background: rgba(252, 211, 77, 0.18);
    border-color: rgba(252, 211, 77, 0.55);
    box-shadow: 0 0 0 6px rgba(252, 211, 77, 0.1);
}

.profile-drawer-avatar-ring.dash-avatar--driver {
    background: rgba(74, 222, 128, 0.16);
    border-color: rgba(74, 222, 128, 0.5);
    box-shadow: 0 0 0 6px rgba(74, 222, 128, 0.08);
}

.profile-drawer-avatar-ring.dash-avatar--manager {
    background: rgba(147, 197, 253, 0.18);
    border-color: rgba(147, 197, 253, 0.55);
    box-shadow: 0 0 0 6px rgba(147, 197, 253, 0.1);
}

.profile-drawer-avatar-ring.dash-avatar--default {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.35);
    box-shadow: 0 0 0 6px rgba(255,255,255,0.06);
}

.profile-drawer-avatar {
    width: 76px; height: 76px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: -1px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.2);
    border: 2px solid transparent;
}

.profile-drawer-avatar.dash-avatar--admin {
    background: var(--role-avatar-admin-bg);
    color: var(--role-avatar-admin-text);
    border-color: var(--role-avatar-admin-border);
}

.profile-drawer-avatar.dash-avatar--driver {
    background: var(--role-avatar-driver-bg);
    color: var(--role-avatar-driver-text);
    border-color: var(--role-avatar-driver-border);
}

.profile-drawer-avatar.dash-avatar--manager {
    background: var(--role-avatar-manager-bg);
    color: var(--role-avatar-manager-text);
    border-color: var(--role-avatar-manager-border);
}

.profile-drawer-avatar.dash-avatar--default {
    background: var(--role-avatar-default-bg);
    color: var(--role-avatar-default-text);
    border-color: var(--role-avatar-default-border);
}

.profile-drawer-avatar-badge {
    position: absolute;
    bottom: 3px; right: 3px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #22c55e;
    border: 2.5px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

/* Name / username / role */

.profile-drawer-name {
    font-size: 1.08rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px;
    letter-spacing: -0.2px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.profile-drawer-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 6px;
}

.profile-drawer-role-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
}

.profile-drawer-role-chip svg,
.profile-drawer-role-chip i {
    flex-shrink: 0;
}

.profile-drawer-role-chip--driver {
    background: var(--role-chip-driver-bg);
    border-color: var(--role-chip-driver-border);
    color: var(--role-chip-driver-text);
}

.profile-drawer-role-chip--admin {
    background: var(--profile-drawer-role-chip-admin-bg);
    border-color: var(--profile-drawer-role-chip-admin-border);
    color: var(--profile-drawer-role-chip-admin-text);
}

.profile-drawer-role-chip--manager {
    background: var(--role-chip-manager-bg);
    border-color: var(--role-chip-manager-border);
    color: var(--role-chip-manager-text);
}

.profile-drawer-role-chip--default {
    background: var(--role-chip-default-bg);
    border-color: var(--role-chip-default-border);
    color: var(--role-chip-default-text);
}

.profile-drawer-username-handle {
    font-size: 0.76rem;
    color: rgba(255,255,255,0.6);
    font-family: monospace;
    letter-spacing: 0.3px;
}

/* ── Body ── */

.profile-drawer-body {
    padding: 0 20px 20px;
    margin-top: -2px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: visible;
}

/* Section blocks — single drawer surface, no nested glass card */

.profile-card {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    height: auto;
    min-height: -moz-min-content;
    min-height: min-content;
    width: 100%;
    overflow: visible;
}

.profile-card + .profile-card {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    padding-top: 16px;
}

.profile-card-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 0 10px;
    font-size: 0.69rem;
    font-weight: 800;
    color: #475569;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.profile-card-header svg { color: #3b82f6; flex-shrink: 0; }

.profile-card-body { padding: 14px 0 0; }

/* Fields */

.profile-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }

.profile-field:last-child { margin-bottom: 0; }

.profile-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.profile-input-wrap { position: relative; display: flex; align-items: center; }

.profile-input-icon {
    position: absolute;
    left: 12px;
    color: #94a3b8;
    pointer-events: none;
    flex-shrink: 0;
}

.profile-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.875rem;
    color: #0f172a;
    background: rgba(255, 255, 255, 0.5);
    outline: none;
    transition: border-color .18s, box-shadow .18s;
}

.profile-input.has-icon { padding-left: 38px; padding-right: 40px; }

.profile-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.12); }

.profile-input:disabled { background: rgba(248, 250, 252, 0.7); color: #94a3b8; cursor: not-allowed; border-color: #e2e8f0; }

.profile-hint { font-size: 0.68rem; color: #94a3b8; filter: brightness(0.7) }

/* Eye toggle */

.profile-eye-btn {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #94a3b8;
    display: flex;
    align-items: center;
    transition: color .15s;
}

.profile-eye-btn:hover { color: #475569; }

/* Password strength (shown only after typing) */

.profile-pw-strength-wrap {
    margin-top: 6px;
}

.profile-pw-strength {
    height: 5px;
    border-radius: 99px;
    background: #e2e8f0;
    margin-top: 6px;
    overflow: hidden;
}

.profile-pw-strength-bar {
    height: 100%;
    border-radius: 99px;
    width: 0%;
    transition: width .35s ease, background-color .35s ease;
}

/* Password accordion */

.profile-pw-accordion {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.69rem;
    font-weight: 800;
    color: #475569;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    transition: background .15s;
}

.profile-pw-accordion:hover { background: #f8fafc; border-radius: 10px; }

.profile-pw-body {
    padding: 14px 16px 16px;
}

/* Alert */

.profile-alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.4;
}

.profile-alert svg { flex-shrink: 0; margin-top: 1px; }

.profile-alert-success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }

.profile-alert-error   { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

/* Footer */

.profile-drawer-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 16px;
    background: transparent;
    flex-shrink: 0;
    position: relative;
}

.profile-btn-cancel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.84rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.profile-btn-cancel:hover { background: #f1f5f9; border-color: #cbd5e1; color: #475569; }

.profile-btn-save {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(29,78,216,.3);
    transition: all .18s;
}

.profile-btn-save:hover { background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%); box-shadow: 0 4px 14px rgba(29,78,216,.4); transform: translateY(-1px); }

.profile-btn-save:disabled { opacity: .65; cursor: not-allowed; transform: none !important; box-shadow: none; }

@media (max-width: 640px) {
    .profile-drawer { width: 100%; }
    .profile-drawer-header { padding: 22px 14px 6px; }
}

/* ===================================================================
   DASHBOARD — BBM PRO DARK MODE SYSTEM
   =================================================================== */

/* ── Background decoration layers ── */

.dash-bg-cubes,
.dash-bg-sparkle,
.dash-bg-royal-tint,
.dash-bg-stardust,
.dash-bg-orb-gold,
.dash-bg-orb-blue,
.dash-bg-wave {
    position: fixed;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
}

.dash-bg-wave, .dash-bg-sparkle, .dash-bg-royal-tint, .dash-bg-stardust {
    z-index: 0;
}

.dash-bg-cubes {
    inset: 0;
    background-image: url('https://www.transparenttextures.com/patterns/cubes.png');
    mix-blend-mode: overlay;
    filter: contrast(1.25);
}

.dash-bg-sparkle {
    inset: 0;
    background: linear-gradient(
        135deg,
        transparent 30%,
        rgba(212, 175, 55, 0.4) 45%,
        rgba(96, 165, 250, 0.7) 50%,
        rgba(212, 175, 55, 0.4) 55%,
        transparent 70%
    );
    background-size: 300% 100%;
    -webkit-mask-image: url('https://www.transparenttextures.com/patterns/cubes.png');
    mask-image: url('https://www.transparenttextures.com/patterns/cubes.png');
    animation: vms-shine-lines 15s infinite linear;
    mix-blend-mode: color-dodge;
}

.dash-bg-royal-tint {
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 35, 66, 0.06) 0%, transparent 42%);
}

.dash-bg-stardust {
    inset: 0;
    background-image: url('https://www.transparenttextures.com/patterns/stardust.png');
    mix-blend-mode: overlay;
}

.dash-bg-orb-gold {
    top: -15%;
    right: -10%;
    width: 50vw;
    height: 50vw;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.15);
    filter: blur(140px);
}

.dash-bg-orb-blue {
    bottom: -15%;
    left: -10%;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.15);
    filter: blur(160px);
}

.dash-bg-wave {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55%;
}

/* ── Theme toggle button ── */

.dash-theme-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.dash-theme-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(212, 175, 55, 0.4);
}

/* ── Superadmin notification bell ── */

.dash-notif-wrap {
    position: relative;
}

.dash-notif-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.dash-notif-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(212, 175, 55, 0.4);
}

.dash-notif-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
}

.dash-notif-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(340px, calc(100vw - 24px));
    max-height: min(380px, 70vh);
    overflow: auto;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
    z-index: 200;
}

.dash-notif-panel-head {
    position: sticky;
    top: 0;
    padding: 12px 14px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    background: linear-gradient(180deg, #f8fafc 90%, transparent);
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.dash-notif-readall {
    border: 0;
    background: none;
    padding: 2px 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: #1d4ed8;
    cursor: pointer;
    border-radius: 6px;
}

.dash-notif-readall:hover { background: rgba(29, 78, 216, 0.08); }

.dash-notif-readall[hidden] { display: none; }

html.dark .dash-body .dash-notif-readall { color: #93c5fd; }

.dash-notif-list {
    list-style: none;
    margin: 0;
    padding: 6px;
}

.dash-notif-item {
    border-radius: 10px;
    margin-bottom: 4px;
}

.dash-notif-item.is-unread {
    background: rgba(59, 130, 246, 0.08);
}

.dash-notif-link {
    display: block;
    padding: 10px 12px;
    text-decoration: none;
    color: #0f172a;
    border-radius: 10px;
    transition: background 0.15s ease;
}

.dash-notif-link:hover {
    background: rgba(15, 23, 42, 0.06);
}

.dash-notif-title {
    display: block;
    font-size: 0.82rem;
    margin-bottom: 4px;
}

.dash-notif-body {
    display: block;
    font-size: 0.76rem;
    font-weight: 500;
    color: #475569;
    line-height: 1.35;
}

.dash-notif-time {
    display: block;
    margin-top: 6px;
    font-size: 0.68rem;
    color: #94a3b8;
}

.dash-notif-empty {
    padding: 20px 14px;
    text-align: center;
    font-size: 0.8rem;
    color: #64748b;
}

html.dark .dash-body .dash-notif-panel {
    background: rgba(15, 30, 58, 0.96);
    border-color: rgba(212, 175, 55, 0.2);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

html.dark .dash-body .dash-notif-panel-head {
    color: rgba(200, 218, 255, 0.55);
    background: linear-gradient(180deg, rgba(15, 30, 58, 0.98) 85%, transparent);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html.dark .dash-body .dash-notif-link {
    color: rgba(241, 245, 249, 0.95);
}

html.dark .dash-body .dash-notif-link:hover {
    background: rgba(255, 255, 255, 0.06);
}

html.dark .dash-body .dash-notif-item.is-unread {
    background: rgba(59, 130, 246, 0.15);
}

html.dark .dash-body .dash-notif-body {
    color: rgba(200, 218, 255, 0.72);
}

html.dark .dash-body .dash-notif-time {
    color: rgba(148, 163, 184, 0.75);
}

html.dark .dash-body .dash-notif-empty {
    color: rgba(148, 163, 184, 0.65);
}

/* ── DARK MODE — body (html.dark set by inline head script) ── */

html.dark .dash-body {
    transition: background 0.4s ease, color 0.4s ease;
}

html.dark .dash-body .dash-bg-cubes       { opacity: 0.8; filter: contrast(1.1) brightness(0.9); }

html.dark .dash-body .dash-bg-sparkle    { opacity: 0.92; mix-blend-mode: color-dodge; }

html.dark .dash-body .dash-bg-royal-tint { opacity: 0; }

html.dark .dash-body .dash-bg-stardust   { opacity: 0.2; }

html.dark .dash-body .dash-bg-orb-gold   { opacity: 1; }

html.dark .dash-body .dash-bg-orb-blue   { opacity: 1; }

html.dark .dash-body .dash-bg-wave       { opacity: 0.68; }

/* ── DARK — Shell (transparent so bg layers show) ── */

html.dark .dash-body .dash-shell { background: transparent; }

@media (min-width: 768px) {
    html.dark .dash-body .dash-shell { background: transparent; }
}

/* ── DARK — Navbar ── */

html.dark .dash-body .dash-nav {
    background: rgba(7, 16, 36, 0.82);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(212, 175, 55, 0.16);
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.5);
}

html.dark .dash-body .dash-nav-btn-glass {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
}

html.dark .dash-body .dash-nav-btn-glass:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* ── DARK — Hero section ── */

html.dark .dash-body .dash-hero-section {
    background: rgba(8, 20, 48, 0.62);
    border-bottom: 1px solid rgba(212, 175, 55, 0.14);
}

html.dark .dash-body .dash-hero-kicker { color: rgba(212, 175, 55, 0.9); }

html.dark .dash-body .dash-hero-name   { color: #ffffff; }

html.dark .dash-body .dash-clock-widget {
    background: transparent;
    border: none;
}

html.dark .dash-body .dash-tag-outline {
    color: rgba(200, 218, 255, 0.85);
    border-color: rgba(120, 170, 255, 0.4);
}

html.dark .dash-body .dash-hero-tags .mgmt-presence--online {
    color: #4ade80;
}

html.dark .dash-body .dash-hero-tags .mgmt-presence--offline {
    color: #94a3b8;
}

/* ── DARK — Section title ── */

html.dark .dash-body .dash-section-title { color: rgba(200, 218, 255, 0.45); }

/* ── DARK — Content area ── */

html.dark .dash-body .dash-content { background: transparent; }

/* ── DARK — Desktop panel columns ── */

/* @media (min-width: 992px) {
    html.dark .dash-body .dash-main-column,
    html.dark .dash-body .dash-side-column {
        background: rgba(16, 42, 82, 0.68) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(212, 175, 55, 0.14) !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    }
} */

/* ── DARK — Mobile dropdown override ── */

@media (max-width: 640px) {
    html.dark .dash-body .dash-nav-actions {
        background: linear-gradient(180deg, rgba(7, 16, 36, 0.97) 0%, rgba(5, 11, 20, 0.99) 100%);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border-bottom-color: rgba(212, 175, 55, 0.2);
    }
}

/* ── DARK — Main action card (admin-panel style, glassy) ── */

html.dark .dash-body .dash-main-card {
    background: rgba(22, 48, 90, 0.5);
    border: 1px solid rgba(212, 175, 55, 0.16);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
}

html.dark .dash-body .dash-main-card:hover {
    background: rgba(10, 35, 66, 0.5);
    border-color: rgba(212, 175, 55, 0.32);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

html.dark .dash-body .dash-main-title { color: #e8f0fe; }

html.dark .dash-body .dash-main-sub   { color: rgba(180, 200, 240, 0.65); }

html.dark .dash-body .dash-main-icon {
    color: #D4AF37;
    transition: 0.2s ease;
}

html.dark .dash-body .dash-main-card:hover .dash-main-icon {
    color: #E6C75A;
}

/* ── DARK — Admin grid cards ── */

html.dark .dash-body .dash-admin-card {
    background: rgba(22, 36, 70, 0.82);
    border: 1px solid rgba(212, 175, 55, 0.14);
    color: #c8d9f5;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

html.dark .dash-body .dash-admin-card:hover {
    background: rgba(10, 35, 66, 0.85);
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

html.dark .dash-body .dash-admin-icon {
    background: rgba(212, 175, 55, 0.12) !important;
    color: #D4AF37 !important;
}

/* ── DARK — Buttons ── */

html.dark .dash-body .dash-logout-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.85);
}

html.dark .dash-body .dash-logout-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}

html.dark .dash-body .checklist-icon-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.85);
}

html.dark .dash-body .checklist-icon-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* ── DARK — Pending dot badge ── */

html.dark .dash-body .dash-pending-dot {
    border-color: #0A2342;
}

/* ── DARK — Profile Drawer ── */

html.dark .dash-body .profile-overlay {
    background: rgba(0, 0, 0, 0.65);
}

html.dark .dash-body .profile-drawer {
    background: rgba(14, 31, 58, 0.4);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: -12px 0 60px rgba(0, 0, 0, 0.4);
}

html.dark .dash-body .profile-drawer-header {
    background: linear-gradient(
        150deg,
        rgba(5, 11, 20, 0.4) 0%,
        rgba(10, 35, 66, 0.4) 55%,
        rgba(14, 31, 58, 0.4) 100%
    );
}

/* html.dark .dash-body .profile-drawer-header::after {
    background: #0e1f3a;
} */

html.dark .dash-body .profile-card {
    background: transparent;
    border: none;
    box-shadow: none;
}

html.dark .dash-body .profile-card + .profile-card {
    border-top-color: rgba(255, 255, 255, 0.08);
}

html.dark .dash-body .profile-card-header {
    color: rgba(200, 218, 255, 0.65);
}

html.dark .dash-body .profile-card-header svg { color: #D4AF37; }

html.dark .dash-body .profile-label       { color: rgba(200, 218, 255, 0.65); }

html.dark .dash-body .profile-hint        { color: rgba(200, 218, 255, 0.35); }

html.dark .dash-body .profile-input {
    background: rgba(5, 11, 20, 0.35);
    border-color: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

html.dark .dash-body .profile-input:focus {
    border-color: #D4AF37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
}

html.dark .dash-body .profile-input:disabled {
    background: rgba(5, 11, 20, 0.3);
    color: rgba(200, 218, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.05);
}

html.dark .dash-body .profile-input::-moz-placeholder { color: rgba(200, 218, 255, 0.35); }

html.dark .dash-body .profile-input::placeholder { color: rgba(200, 218, 255, 0.35); }

html.dark .dash-body .profile-input-icon  { color: rgba(200, 218, 255, 0.4); }

html.dark .dash-body .profile-eye-btn     { color: rgba(200, 218, 255, 0.45); }

html.dark .dash-body .profile-eye-btn:hover { color: #D4AF37; }

html.dark .dash-body .profile-pw-strength { background: rgba(255, 255, 255, 0.08); }

html.dark .dash-body .profile-pw-accordion {
    color: rgba(200, 218, 255, 0.65);
}

html.dark .dash-body .profile-pw-accordion:hover { background: rgba(255, 255, 255, 0.04); }

html.dark .dash-body .profile-alert-success {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.25);
    color: #86efac;
}

html.dark .dash-body .profile-alert-error {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.25);
    color: #fca5a5;
}

html.dark .dash-body .profile-drawer-footer {
    background: transparent;
    border-top-color: rgba(255, 255, 255, 0.07);
}

html.dark .dash-body .profile-btn-cancel {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(200, 218, 255, 0.7);
}

html.dark .dash-body .profile-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #f1f5f9;
}

html.dark .dash-body .profile-btn-save {
    background: linear-gradient(135deg, #0A2342 0%, #1d4ed8 100%);
    border: 1px solid rgba(212, 175, 55, 0.25);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

html.dark .dash-body .profile-btn-save:hover {
    background: linear-gradient(135deg, #0e1f3a 0%, #1a44c0 100%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    border-color: rgba(212, 175, 55, 0.4);
}

/* ===================================================================
   CHECKLIST — DARK MODE OVERRIDES (comprehensive)
   =================================================================== */

/* ── Card ── */

html.dark .dash-body .checklist-card {
    background: rgba(16, 38, 80, 0.82);
    border-color: rgba(212, 175, 55, 0.14);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ── Progress ── */

html.dark .dash-body .checklist-progress-info { color: rgba(200, 218, 255, 0.55); }

html.dark .dash-body .checklist-progress-track { background: rgba(255, 255, 255, 0.1); }

/* ── Form field labels ── */

html.dark .dash-body .checklist-field > span,
html.dark .dash-body .checklist-field > label > span {
    color: rgba(200, 218, 255, 0.6);
}

/* ── Text inputs / selects / textareas ── */

html.dark .dash-body .checklist-field input,
html.dark .dash-body .checklist-field select,
html.dark .dash-body .checklist-field textarea {
    background: rgba(8, 20, 50, 0.7);
    border-color: rgba(255, 255, 255, 0.14);
    color: #e8f0fe;
}

html.dark .dash-body .checklist-field input:focus,
html.dark .dash-body .checklist-field select:focus,
html.dark .dash-body .checklist-field textarea:focus {
    border-color: #D4AF37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.14);
}

html.dark .dash-body .checklist-field input[readonly] {
    background: rgba(15, 23, 42, 0.75);
    color: rgba(200, 218, 255, 0.72);
    border-color: rgba(148, 163, 184, 0.28);
    cursor: not-allowed;
}

html.dark .dash-body .checklist-field input::-moz-placeholder, html.dark .dash-body .checklist-field select::-moz-placeholder, html.dark .dash-body .checklist-field textarea::-moz-placeholder {
    color: rgba(200, 218, 255, 0.28);
}

html.dark .dash-body .checklist-field input::placeholder,
html.dark .dash-body .checklist-field select::placeholder,
html.dark .dash-body .checklist-field textarea::placeholder {
    color: rgba(200, 218, 255, 0.28);
}

/* ── Select dropdown arrow (change to lighter colour) ── */

html.dark .dash-body .checklist-control-select::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2393aed8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7l4 4 4-4'/%3E%3C/svg%3E");
}

/* ── TomSelect custom driver dropdown ── */

html.dark .dash-body .ts-wrapper.single .ts-control {
    background: rgba(8, 20, 50, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #e8f0fe !important;
}

html.dark .dash-body .ts-wrapper.single.focus .ts-control {
    border-color: #D4AF37 !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.14) !important;
}

html.dark .dash-body .ts-dropdown {
    background: #0d1f40 !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5) !important;
}

html.dark .dash-body .ts-dropdown .option {
    color: rgba(200, 218, 255, 0.85);
}

html.dark .dash-body .ts-dropdown .option.active,
html.dark .dash-body .ts-dropdown .option:hover {
    background: rgba(212, 175, 55, 0.14);
    color: #f1f5f9;
}

html.dark .dash-body .ts-dropdown .driver-option-row i { color: rgba(200, 218, 255, 0.45); }

html.dark .dash-body .ts-dropdown .driver-option-row.is-active i { color: #4ade80; }

html.dark .dash-body .ts-control .driver-option-row i { color: rgba(200, 218, 255, 0.55); }

html.dark .dash-body .ts-control .driver-option-row.is-active i { color: #4ade80; }

/* ── Driver static display ── */

html.dark .dash-body .driver-static-display {
    background: rgba(8, 20, 50, 0.6);
    border-color: rgba(255, 255, 255, 0.12);
    color: #4ade80;
}

/* ── Condition rows (exterior / interior / mesin) ── */

html.dark .dash-body .checklist-condition-row {
    background: rgba(10, 28, 65, 0.65);
    border-color: rgba(255, 255, 255, 0.08);
}

html.dark .dash-body .checklist-condition-row span { color: rgba(200, 218, 255, 0.88); }

/* ── Radio group (OK / NO pill) ── */

html.dark .dash-body .checklist-radio-group {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

html.dark .dash-body .checklist-radio-group label {
    color: rgba(200, 218, 255, 0.6);
}

html.dark .dash-body .checklist-radio-group input[type="radio"][id$="_ok"]:checked + label {
    background-color: #16a34a;
    color: #fff;
    box-shadow: 0 3px 10px rgba(22, 163, 74, 0.4);
}

html.dark .dash-body .checklist-radio-group input[type="radio"][id$="_no"]:checked + label,
html.dark .dash-body .checklist-radio-group input[type="radio"][value="no"]:checked + label {
    background-color: #ef4444 !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.4) !important;
}

/* ── Note input inside condition rows ── */

html.dark .dash-body .checklist-item-note {
    background: rgba(5, 11, 20, 0.55);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

html.dark .dash-body .checklist-item-note::-moz-placeholder { color: rgba(200, 218, 255, 0.28); }

html.dark .dash-body .checklist-item-note::placeholder { color: rgba(200, 218, 255, 0.28); }

/* ── Photo slots ── */

html.dark .dash-body .checklist-photo-slot {
    background: rgba(10, 28, 65, 0.6);
    border-color: rgba(255, 255, 255, 0.14);
}

html.dark .dash-body .checklist-photo-slot:hover {
    border-color: rgba(212, 175, 55, 0.45);
    background: rgba(10, 35, 80, 0.8);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

html.dark .dash-body .checklist-photo-icon { color: rgba(200, 218, 255, 0.38); }

html.dark .dash-body .photo-slot-placeholder strong { color: rgba(200, 218, 255, 0.55); }

html.dark .dash-body .dynamic-photo-add-btn {
    background: rgba(10, 28, 65, 0.6);
    border-color: rgba(212, 175, 55, 0.28);
    color: #D4AF37;
}

html.dark .dash-body .dynamic-photo-add-btn:hover {
    background: rgba(10, 35, 80, 0.8);
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

/* ── BBM card & slider ── */

html.dark .dash-body .bbm-card {
    background: rgba(10, 28, 65, 0.68);
    border-color: rgba(212, 175, 55, 0.16);
}

html.dark .dash-body .bbm-label { color: rgba(200, 218, 255, 0.65); }

html.dark .dash-body .bbm-value { color: #e8f0fe; }

html.dark .dash-body .bbm-scale { color: rgba(200, 218, 255, 0.42); }

html.dark .dash-body .bbm-slider::-webkit-slider-thumb {
    background: #1e3a8a;
    border-color: #D4AF37;
}

html.dark .dash-body .bbm-terakhir-row input {
    background: rgba(8, 20, 50, 0.7);
    border-color: rgba(255, 255, 255, 0.14);
    color: #e8f0fe;
}

/* ── KM cards ── */

html.dark .dash-body .km-card {
    background: rgba(10, 28, 65, 0.68);
    border-color: rgba(255, 255, 255, 0.09);
}

html.dark .dash-body .km-card-label { color: rgba(200, 218, 255, 0.5); }

html.dark .dash-body .km-card-editable {
    background: rgba(5, 11, 20, 0.55);
    border-color: rgba(255, 255, 255, 0.14);
    color: #f1f5f9;
}

html.dark .dash-body .km-card-editable:focus {
    border-color: #D4AF37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.14);
}

/* ── Perlengkapan checkboxes ── */

html.dark .dash-body .checklist-checkbox {
    background: rgba(10, 28, 65, 0.55);
    border-color: rgba(255, 255, 255, 0.1);
}

html.dark .dash-body .checklist-checkbox:hover {
    background: rgba(10, 35, 80, 0.78);
    border-color: rgba(212, 175, 55, 0.35);
}

html.dark .dash-body .checklist-checkbox span:not(.checklist-checkmark) {
    color: rgba(200, 218, 255, 0.88);
}

html.dark .dash-body .checklist-checkmark {
    border-color: rgba(200, 218, 255, 0.3);
    background: rgba(5, 11, 20, 0.45);
}

html.dark .dash-body .checklist-checkbox input[type="checkbox"]:checked + .checklist-checkmark {
    background-color: #D4AF37;
    border-color: #D4AF37;
}

/* ── Statement box & confirm checkbox ── */

html.dark .dash-body .checklist-statement-box {
    background: rgba(10, 28, 65, 0.6);
    border-color: rgba(212, 175, 55, 0.2);
    color: rgba(200, 218, 255, 0.75);
}

html.dark .dash-body .checklist-confirm-box {
    background: rgba(10, 28, 65, 0.55);
    border-color: rgba(212, 175, 55, 0.22);
    color: rgba(200, 218, 255, 0.88);
}

html.dark .dash-body .checklist-confirm-box:hover {
    background: rgba(10, 35, 80, 0.75);
    border-color: rgba(212, 175, 55, 0.38);
}

/* ── Signature pads — keep canvas white so drawing is visible ── */

html.dark .dash-body .signature-label { color: rgba(200, 218, 255, 0.55); }

html.dark .dash-body .signature-pad-wrap {
    border-color: rgba(212, 175, 55, 0.28);
    background: #f8fafc;
}

html.dark .dash-body .signature-pad-wrap:hover { border-color: rgba(212, 175, 55, 0.5); }

html.dark .dash-body .signature-canvas { background: #f8fafc; }

html.dark .dash-body .signature-pad-hint {
    color: #94a3b8;
    background: rgba(248, 250, 252, 0.75);
    border-radius: 8px;
    padding: 8px 12px;
}

html.dark .dash-body .signature-clear-btn {
    color: #f87171;
    background: transparent;
    border: none;
}

/* ── Form complete alert ── */

html.dark .dash-body .form-complete-alert {
    background: rgba(22, 163, 74, 0.1);
    border-color: rgba(34, 197, 94, 0.28);
}

html.dark .dash-body .form-complete-alert strong { color: #86efac; }

html.dark .dash-body .form-complete-alert p { color: #4ade80; }

/* ── Footer & nav buttons ── */

html.dark .dash-body .checklist-footer {
    background: rgba(7, 16, 36, 0.9);
    border-top-color: rgba(212, 175, 55, 0.14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

html.dark .dash-body .checklist-card .checklist-footer {
    background: transparent !important;
    border-top-color: rgba(212, 175, 55, 0.14) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.dark .dash-body .checklist-nav-back {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(200, 218, 255, 0.7);
}

html.dark .dash-body .checklist-nav-back:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #f1f5f9;
}

html.dark .dash-body .checklist-nav-next {
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
    color: #f8fafc;
    border: 1px solid rgba(96, 165, 250, 0.45);
    box-shadow: 0 6px 18px rgba(30, 64, 175, 0.35);
}

html.dark .dash-body .checklist-nav-next:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.42);
}

html.dark .dash-body .checklist-nav-next.final {
    background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
    color: #0f172a;
    border: 1px solid rgba(250, 204, 21, 0.65);
    box-shadow: 0 8px 22px rgba(250, 204, 21, 0.35);
}

html.dark .dash-body .checklist-nav-next.final:hover {
    background: linear-gradient(135deg, #fde047 0%, #facc15 100%);
    color: #020617;
    box-shadow: 0 10px 24px rgba(250, 204, 21, 0.45);
}

html.dark .dash-body .checklist-icon-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(200, 218, 255, 0.8);
}

/* ── Light mode — checklist card: light blue ── */

html:not(.dark) .dash-body .checklist-card {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f3ff 100%);
    border-color: rgba(59, 130, 246, 0.15);
}

/* ===================================================================
   ADMIN / PORTAL / ARMADA / MANAGER — DARK MODE OVERRIDES
   =================================================================== */

/* ── Shared: admin-card ── */

html.dark .dash-body .admin-card {
    background: rgba(16, 38, 80, 0.80);
    border-color: rgba(212, 175, 55, 0.13);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    color: #e8f0fe;
}

/* ── Admin tabs ── */

html.dark .dash-body .admin-tab {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(200, 218, 255, 0.65);
}

html.dark .dash-body .admin-tab.active,
html.dark .dash-body .admin-tab:hover {
    background: #1e4080;
    border-color: #1e4080;
    color: #fff;
}

/* ── Admin table ── */

html.dark .dash-body .admin-table th {
    background: rgba(5, 11, 20, 0.55);
    color: rgba(200, 218, 255, 0.65);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html.dark .dash-body th[data-sort] .th-sortable__icon {
    opacity: 0.5;
}

html.dark .dash-body th[data-sort][data-sort-state="asc"] .th-sortable__icon,
html.dark .dash-body th[data-sort][data-sort-state="desc"] .th-sortable__icon {
    opacity: 1;
}

html.dark .dash-body .admin-table td {
    border-bottom-color: rgba(255, 255, 255, 0.06);
    color: rgba(200, 218, 255, 0.88);
}

html.dark .dash-body .admin-table tbody tr {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

html.dark .dash-body .admin-table tbody tr:hover td {
    background: rgba(212, 175, 55, 0.07);
}

/* ── Portal Pemeriksaan — stat cards (dark: glass, navy tint = tema dashboard) ── */

html.dark .dash-body .portal-stat-card {
    background: rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(3px) saturate(150%);
    -webkit-backdrop-filter: blur(3px) saturate(150%);

    border: 1px solid rgba(255, 255, 255, 0.15);

    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);

    border-radius: 12px;
}

html.dark .dash-body .portal-stat-card:hover {
    background: rgba(16, 38, 80, 0.48);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 2px rgba(255, 255, 255, 0.02);
}

html.dark .dash-body .portal-stat-value {
    color: #60a5fa;
}

html.dark .dash-body .portal-stat-label {
    color: rgba(148, 163, 184, 0.95);
}

html.dark .dash-body .portal-stat-unit {
    color: rgba(200, 218, 255, 0.72);
}

html.dark .dash-body .portal-stat-desc {
    color: rgba(148, 163, 184, 0.75);
}

html.dark .dash-body .portal-stat-value .portal-stat-sublabel {
    color: rgba(200, 218, 255, 0.55);
}

html.dark .dash-body .portal-stat-icon {
    color: rgba(148, 163, 184, 0.22) !important;
}

html.dark .dash-body .portal-stat-card:hover .portal-stat-icon {
    color: #d4af37 !important;
}

html.dark .dash-body .bbm-portal-month-kicker {
    color: rgba(200, 218, 255, 0.72);
}

html.dark .dash-body .bbm-portal-month-kicker__highlight {
    color: #93c5fd;
}

/* ── Portal Pemeriksaan — chart cards ── */

html.dark .dash-body .portal-chart-card {
    background: rgba(16, 38, 80, 0.78);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

html.dark .dash-body .portal-chart-card h3,
html.dark .dash-body .portal-chart-card .chart-title {
    color: rgba(200, 218, 255, 0.75);
}

/* ── Portal — filter bar / search ── */

html.dark .dash-body .portal-filter-bar,
html.dark .dash-body .portal-filter-group {
    background: rgba(8, 20, 50, 0.65);
    border-color: rgba(255, 255, 255, 0.1);
}

html.dark .dash-body .portal-filter-bar input,
html.dark .dash-body .portal-filter-bar select {
    background: rgba(5, 11, 20, 0.6);
    border-color: rgba(255, 255, 255, 0.12);
    color: #e8f0fe;
}

html.dark .dash-body .portal-filter-bar label { color: rgba(200, 218, 255, 0.6); }

/* Mgmt stat cards use .portal-stat-card — dark rules above apply */

/* ── Mgmt tab bar (class is .mgmt-tab, not .admin-tab) ── */

html.dark .dash-body .mgmt-tab-bar {
    background: rgba(5, 11, 20, 0.55);
}

html.dark .dash-body .mgmt-tab {
    color: rgba(200, 218, 255, 0.65);
}

html.dark .dash-body .mgmt-tab:hover {
    color: #e8f0fe;
    background: rgba(255, 255, 255, 0.06);
}

html.dark .dash-body .mgmt-tab.active {
    background: #1e4080;
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

html.dark .dash-body .mgmt-tab-count {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(200, 218, 255, 0.8);
}

html.dark .dash-body .mgmt-tab.active .mgmt-tab-count {
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
}

/* ── Portal Manajemen — panel, table, filters, pagination ── */

html.dark .dash-body .mgmt-panel {
    background: rgba(8, 20, 50, 0.72);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

html.dark .dash-body .mgmt-panel-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html.dark .dash-body .mgmt-ph-title { color: #e8f0fe; }

html.dark .dash-body .mgmt-ph-sub  { color: rgba(200, 218, 255, 0.5); }

html.dark .dash-body .mgmt-add-panel { background: rgba(5, 11, 20, 0.45); border-bottom-color: rgba(255, 255, 255, 0.08); }

html.dark .dash-body .mgmt-add-inner { background: rgba(5, 11, 20, 0.35); }

html.dark .dash-body .mgmt-add-heading { color: rgba(200, 218, 255, 0.75); }

html.dark .dash-body .mgmt-label { color: rgba(200, 218, 255, 0.55); }

html.dark .dash-body .mgmt-input {
    background-color: rgba(5, 11, 20, 0.55);
    border-color: rgba(255, 255, 255, 0.12);
    color: #e8f0fe;
}

html.dark .dash-body .mgmt-input::-moz-placeholder { color: rgba(200, 218, 255, 0.35); }

html.dark .dash-body .mgmt-input::placeholder { color: rgba(200, 218, 255, 0.35); }

/* Modal manajemen (tambah/edit kendaraan, user, dll.) — dark */

html.dark .dash-body .mgmt-modal-overlay {
    background: rgba(2, 6, 14, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

html.dark .dash-body .mgmt-modal-box {
    background: linear-gradient(165deg, rgba(18, 26, 40, 0.98) 0%, rgba(8, 12, 22, 0.99) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    color-scheme: dark;
}

html.dark .dash-body .mgmt-modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html.dark .dash-body .mgmt-modal-title { color: #e8f0fe; }

html.dark .dash-body .mgmt-modal-sub { color: rgba(200, 218, 255, 0.52); }

html.dark .dash-body .mgmt-modal-body { background: transparent; }

html.dark .dash-body .mgmt-modal-section-label {
    color: rgba(200, 218, 255, 0.42);
}

html.dark .dash-body .mgmt-modal-divider { background: rgba(255, 255, 255, 0.08); }

html.dark .dash-body .mgmt-modal-footer {
    border-top-color: rgba(255, 255, 255, 0.08);
    background: rgba(5, 11, 20, 0.35);
}

html.dark .dash-body .mgmt-modal-close {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(200, 218, 255, 0.78);
}

html.dark .dash-body .mgmt-modal-close:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

html.dark .dash-body .mgmt-modal-body .mgmt-input,
html.dark .dash-body .mgmt-modal-body select.mgmt-input {
    background-color: rgba(5, 11, 20, 0.65);
    border-color: rgba(255, 255, 255, 0.14);
    color: #e8f0fe;
    color-scheme: dark;
}

html.dark .dash-body .mgmt-modal-body .mgmt-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22);
}

html.dark .dash-body .mgmt-modal-footer .mgmt-cancel-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(200, 218, 255, 0.88);
}

html.dark .dash-body .mgmt-modal-footer .mgmt-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.11);
    color: #e8f0fe;
}

html.dark .dash-body .mgmt-modal-footer .mgmt-submit-btn {
    background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%);
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.35);
}

html.dark .dash-body .mgmt-modal-footer .mgmt-submit-btn:hover {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
}

html.dark .dash-body .mgmt-hint-box {
    background: rgba(30, 64, 128, 0.35);
    border-color: rgba(96, 165, 250, 0.28);
    color: #93c5fd;
}

html.dark .dash-body .mgmt-hint-box code {
    background: rgba(15, 23, 42, 0.5);
    color: #bfdbfe;
}

html.dark .dash-body #armada-form-modal .mgmt-modal-avatar {
    background: rgba(45, 212, 191, 0.14) !important;
    color: #5eead4 !important;
    border: 1px solid rgba(45, 212, 191, 0.28);
}

html.dark .dash-body .mgmt-filter-bar {
    background: rgba(5, 11, 20, 0.35);
    border-color: rgba(255, 255, 255, 0.06);
}

html.dark .dash-body .mgmt-search-icon { color: rgba(200, 218, 255, 0.4); }

html.dark .dash-body .mgmt-search-input {
    background-color: rgba(8, 20, 50, 0.7);
    border-color: rgba(255, 255, 255, 0.12);
    color: #e8f0fe;
}

html.dark .dash-body .mgmt-filter-select-icon {
    color: rgba(200, 218, 255, 0.45);
}

html.dark .dash-body .mgmt-filter-select {
    background-color: rgba(8, 20, 50, 0.7);
    border-color: rgba(255, 255, 255, 0.12);
    color: #e8f0fe;
    color-scheme: dark;
}

html.dark .dash-body .mgmt-filter-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

html.dark .dash-body .mgmt-reset-btn {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(200, 218, 255, 0.65);
}

html.dark .dash-body .mgmt-reset-btn:hover {
    background-color: rgba(212, 175, 55, 0.12);
    color: #D4AF37;
}

html.dark .dash-body .mgmt-table thead th {
    background: rgba(5, 11, 20, 0.55);
    color: rgba(200, 218, 255, 0.65);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html.dark .dash-body .mgmt-table td {
    color: rgba(200, 218, 255, 0.9);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

html.dark .dash-body .mgmt-table tbody tr {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

html.dark .dash-body .mgmt-table tbody tr:hover {
    background: rgba(212, 175, 55, 0.07);
}

html.dark .dash-body .mgmt-table .text-muted { color: rgba(200, 218, 255, 0.5); }

html.dark .dash-body .mgmt-empty { color: rgba(200, 218, 255, 0.45); }

html.dark .dash-body .mgmt-expiry-date { color: rgba(232, 240, 254, 0.92); }

html.dark .dash-body .mgmt-expiry-aktif { background: #166534; color: #f0fdf4; }

html.dark .dash-body .mgmt-expiry-expired { background: #7f1d1d; color: #fef2f2; }

html.dark .dash-body .mgmt-status-on { background: rgba(34, 197, 94, 0.18); color: #86efac; border-color: rgba(34, 197, 94, 0.35); }

html.dark .dash-body .mgmt-status-maint { background: rgba(251, 191, 36, 0.12); color: #fbbf24; border-color: rgba(251, 191, 36, 0.3); }

html.dark .dash-body .mgmt-status-off { background: rgba(248, 113, 113, 0.12); color: #fca5a5; border-color: rgba(248, 113, 113, 0.28); }

html.dark .dash-body .mgmt-user-name { color: #e8f0fe; }

html.dark .dash-body .mgmt-username { color: #93c5fd; }

html.dark .dash-body .mgmt-role-driver  { background: rgba(30, 64, 128, 0.45); color: #93c5fd; }

html.dark .dash-body .mgmt-role-pic     { background: rgba(88, 28, 135, 0.35); color: #c4b5fd; }

html.dark .dash-body .mgmt-role-manager { background: rgba(194, 65, 12, 0.25); color: #fdba74; }

html.dark .dash-body .mgmt-role-admin   { background: rgba(15, 118, 110, 0.3); color: #5eead4; }

html.dark .dash-body .mgmt-act-edit   { background: rgba(30, 64, 128, 0.4); color: #93c5fd; }

html.dark .dash-body .mgmt-act-edit:hover { background: rgba(30, 64, 128, 0.55); }

html.dark .dash-body .mgmt-act-del    { background: rgba(127, 29, 29, 0.35); color: #fca5a5; }

html.dark .dash-body .mgmt-act-del:hover  { background: rgba(127, 29, 29, 0.5); }

html.dark .dash-body .mgmt-act-save   { background: rgba(22, 101, 52, 0.25); color: #86efac; }

html.dark .dash-body .mgmt-act-cancel { background: rgba(255, 255, 255, 0.06); color: rgba(200, 218, 255, 0.65); }

/* ── Manager request cards ── */

html.dark .dash-body .manager-request-card {
    background: rgba(16, 38, 80, 0.78);
    border-color: rgba(212, 175, 55, 0.13);
}

html.dark .dash-body .manager-request-name { color: #e8f0fe; }

html.dark .dash-body .manager-request-meta,
html.dark .dash-body .manager-request-meta span {
    color: rgba(200, 218, 255, 0.55);
}

html.dark .dash-body .manager-request-card .admin-card { background: rgba(5, 11, 20, 0.45); }

/* ── Status badges keep original colours ── */

html.dark .dash-body .status-badge { opacity: 0.9; }

/* ── Light mode — admin cards ── */

html:not(.dark) .dash-body .admin-card {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f3ff 100%);
    border-color: rgba(59, 130, 246, 0.14);
}

html:not(.dark) .dash-body .portal-chart-card {
    background: linear-gradient(
        135deg,
        rgba(240, 247, 255, 0.45) 0%,
        rgba(232, 243, 255, 0.35) 100%
    );

    backdrop-filter: blur(1.5px) saturate(150%);
}

/* Stat cards */

html:not(.dark) .dash-body .portal-stat-card {
    background: linear-gradient(
        135deg,
        rgba(240, 247, 255, 0.25) 0%,
        rgba(232, 243, 255, 0.15) 100%
    );

    backdrop-filter: blur(3px) saturate(180%);
    -webkit-backdrop-filter: blur(3px) saturate(180%);

    border: 1px solid rgba(255, 255, 255, 0.6);

    box-shadow:
        0 8px 32px rgba(31, 38, 135, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);

    position: relative;
    overflow: hidden;
}

html:not(.dark) .dash-body .portal-stat-card:hover {
    background: linear-gradient(
        135deg,
        rgba(240, 247, 255, 0.55) 0%,
        rgba(232, 243, 255, 0.45) 100%
    );

    border-color: rgba(255, 255, 255, 0.75);

    box-shadow:
        0 12px 40px rgba(31, 38, 135, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* ══════════════════════════════════════════════════════════════════
   DARK MODE — Portal Pemeriksaan — sections, filters, tabs, inputs
══════════════════════════════════════════════════════════════════ */

/* Chart card title (fix selector — HTML uses .portal-chart-title) */

html.dark .dash-body .portal-chart-title { color: rgba(200, 218, 255, 0.72); }

html.dark .dash-body .portal-chart-year-label { color: rgba(200, 218, 255, 0.55); }

/* Section wrapper */

html.dark .dash-body .portal-section {
    background: rgba(8, 20, 50, 0.72);
    border-color: rgba(255, 255, 255, 0.07);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.38);
}

html:not(.dark) .dash-body .portal-section {
    background: rgba(255, 255, 255, 0.65);
}

/* Section header title */

html.dark .dash-body .portal-section-title { color: #60a5fa; }

/* Section export / action button */

html.dark .dash-body .btn-export {
    background: rgba(30, 64, 128, 0.7);
    border-color: rgba(212, 175, 55, 0.25);
    color: #e8f0fe;
}

/* Section tabs (Database Sheet / Log Foto / Arsip PDF) */

html.dark .dash-body .portal-section-tab {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(200, 218, 255, 0.65);
}

html.dark .dash-body .portal-section-tab:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(212, 175, 55, 0.35);
    color: #f1f5f9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

html.dark .dash-body .portal-section-tab.active {
    background: rgba(30, 64, 128, 0.95);
    border-color: #D4AF37;
    color: #D4AF37;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
}

/* Local filters row inside each section */

html.dark .dash-body .portal-local-reset {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(200, 218, 255, 0.6);
}

html.dark .dash-body .portal-local-reset:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.3);
    color: #D4AF37;
}

/* Admin search input */

html.dark .dash-body .admin-search-input {
    background: rgba(8, 20, 50, 0.7);
    border-color: rgba(255, 255, 255, 0.12);
    color: #e8f0fe;
}

html.dark .dash-body .admin-search-input::-moz-placeholder { color: rgba(200, 218, 255, 0.35); }

html.dark .dash-body .admin-search-input::placeholder { color: rgba(200, 218, 255, 0.35); }

/* Admin filter inputs (date, select, text) — use background-color, NOT
   `background` shorthand, so select chevron background-image does not tile */

html.dark .dash-body .admin-filter-input {
    background-color: rgba(8, 20, 50, 0.7);
    border-color: rgba(255, 255, 255, 0.12);
    color: #e8f0fe;
}

html.dark .dash-body select.admin-filter-input {
    background-color: rgba(8, 20, 50, 0.7);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2393aed8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
}

html.dark .dash-body .admin-filter-input option { background: #0e1f3a; }

html.dark .dash-body .admin-filter-input::-moz-placeholder { color: rgba(200, 218, 255, 0.35); }

html.dark .dash-body .admin-filter-input::placeholder { color: rgba(200, 218, 255, 0.35); }

html.dark .dash-body .admin-filter-input[type="date"],
html.dark .dash-body input[type="date"].admin-filter-input {
    background-color: rgba(8, 20, 50, 0.85);
    color: #e8f0fe;
    border-color: rgba(255, 255, 255, 0.12);
}

/* Fix TomSelect Dropdown di Dark Mode */

html.dark .dash-body .ts-control,
html.dark .dash-body .ts-control input {
    background-color: rgba(13, 25, 48, 0.7) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Bagian list pilihan yang muncul ke bawah */

html.dark .dash-body .ts-dropdown {
    background-color: #0f172a !important; /* Biru sangat gelap */
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Warna saat opsi di-hover atau dipilih */

html.dark .dash-body .ts-dropdown .active {
    background-color: #1e293b !important;
    color: #D4AF37 !important; /* Warna emas agar senada */
}

/* Warna teks di dalam opsi */

html.dark .dash-body .ts-dropdown .option {
    color: #cbd5e1 !important;
}

/* Memutihkan icon kalender pada input date di Dark Mode */

html.dark .dash-body input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(244deg) brightness(100%) contrast(100%);
    cursor: pointer;
}

/* Date inputs — `color-scheme` must be a keyword, not a colour */

html.dark .dash-body input[type="date"] {
    color-scheme: dark;
}

/* Portal empty state text */

html.dark .dash-body .portal-empty { color: rgba(200, 218, 255, 0.45); }

/* ══════════════════════════════════════════════════════════════════
   DARK MODE — Manager history table — override hardcoded inline colours
══════════════════════════════════════════════════════════════════ */

html.dark .dash-body .admin-table td > div,
html.dark .dash-body .admin-table td > p {
    color: rgba(200, 218, 255, 0.85) !important;
}

/* Badge status odometer dikecualikan: teksnya harus tetap berwarna sesuai status */

html.dark .dash-body .admin-table td > span:not(.status-badge):not(.landing-nopol-badge):not(.lk-kat):not(.lk-pending):not(.odo-badge-sesuai):not(.odo-badge-selisih):not(.odo-badge-incomplete) {
    color: rgba(200, 218, 255, 0.65) !important;
}

/* Manager alasan / vehicle sub-text */

html.dark .dash-body .manager-alasan-label { color: rgba(200, 218, 255, 0.5); }

html.dark .dash-body .manager-alasan-text  { color: rgba(200, 218, 255, 0.8); }

html.dark .dash-body .manager-vehicle-jenis { color: rgba(200, 218, 255, 0.6); }

/* Manager vehicle block */

html.dark .dash-body .manager-vehicle-block {
    background: rgba(5, 11, 20, 0.4);
    border-color: rgba(255, 255, 255, 0.07);
}

/* ── Override hardcoded inline colours on <td> elements (not status colours) ── */

/* Targets dark/grey text values that are hard to read on dark backgrounds */

html.dark .dash-body .admin-table td[style*="#64748b"],
html.dark .dash-body .admin-table td[style*="#94a3b8"],
html.dark .dash-body .admin-table td[style*="#374151"],
html.dark .dash-body .admin-table td[style*="#0f172a"] {
    color: rgba(200, 218, 255, 0.80) !important;
}

/* "Unknown" status colour from statusStyle helper (#334155) — turn to muted blue-white */

html.dark .dash-body .admin-table td[style*="#334155"] {
    color: rgba(200, 218, 255, 0.6) !important;
}

/* ===================================================================
   REKAP SPPD
   =================================================================== */

.portal-section-header .sppd-btn-create-rekap {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff !important;
    border: 1px solid rgba(37, 99, 235, 0.35);
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.22);
}

.portal-section-header .sppd-btn-create-rekap:hover {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
}

html.dark .dash-body .portal-section-header .sppd-btn-create-rekap {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.92) 0%, rgba(29, 78, 216, 0.95) 100%);
    border-color: rgba(212, 175, 55, 0.28);
    color: #f8fafc !important;
}

html.dark .dash-body .portal-section-header .sppd-btn-create-rekap:hover {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.35) 0%, rgba(37, 99, 235, 0.98) 45%, rgba(30, 58, 138, 1) 100%);
    border-color: rgba(212, 175, 55, 0.55);
    color: #ffffff !important;
    box-shadow: 0 6px 22px rgba(37, 99, 235, 0.42), 0 0 0 1px rgba(212, 175, 55, 0.22);
    transform: translateY(-2px);
    filter: none;
}

.checklist-field-span2 { grid-column: 1 / -1; }

.checklist-input-readonly {
    width: 100%;
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    opacity: 0.95;
}

.sppd-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.sppd-badge--pending { background: rgba(234, 179, 8, 0.2); color: #a16207; border: 1px solid rgba(234, 179, 8, 0.45); }

.sppd-badge--revision { background: rgba(249, 115, 22, 0.18); color: #c2410c; border: 1px solid rgba(249, 115, 22, 0.4); }

.sppd-badge--pending-manager { background: rgba(59, 130, 246, 0.18); color: #1d4ed8; border: 1px solid rgba(59, 130, 246, 0.35); }

.sppd-badge--approved { background: rgba(34, 197, 94, 0.18); color: #15803d; border: 1px solid rgba(34, 197, 94, 0.35); }

.sppd-badge--rejected { background: rgba(239, 68, 68, 0.16); color: #b91c1c; border: 1px solid rgba(239, 68, 68, 0.35); }

.sppd-badge--completed { background: rgba(100, 116, 139, 0.2); color: #334155; border: 1px solid rgba(100, 116, 139, 0.35); }

.sppd-badge--muted { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }

html.dark .dash-body .sppd-badge--muted {
    background: rgba(8, 20, 50, 0.55);
    color: rgba(200, 218, 255, 0.75);
    border-color: rgba(255, 255, 255, 0.1);
}

.sppd-intro { font-size: 0.82rem; margin: 0; color: #64748b; }

html.dark .dash-body .sppd-intro { color: rgba(200, 218, 255, 0.55); }

.sppd-cell-muted { font-size: 0.76rem; color: #64748b; }

html.dark .dash-body .sppd-cell-muted { color: rgba(200, 218, 255, 0.5); }

.sppd-cell-title { font-weight: 600; }

.sppd-aksi-btns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.sppd-inline-form { display: inline; margin: 0; }

.sppd-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    border: 1px solid transparent;
}

.sppd-icon-btn i { font-size: 0.86rem; }

.sppd-btn-primary {
    background: linear-gradient(135deg, #1248a4 0%, #0a2f75 100%);
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-color: transparent !important;
    box-shadow: 0 6px 14px rgba(10, 47, 117, 0.28);
    font-weight: 700;
    padding-inline: 14px;
}

.sppd-btn-primary:hover {
    background: linear-gradient(135deg, #0f3f92 0%, #08285f 100%);
    transform: translateY(-1px);
    box-shadow: 0 9px 18px rgba(8, 40, 95, 0.35);
}

.sppd-btn-primary:active { transform: translateY(0); }

.sppd-btn-success {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 14px rgba(21, 128, 61, 0.25);
}

.sppd-btn-success:hover {
    background: linear-gradient(135deg, #15803d 0%, #166534 100%);
    transform: translateY(-1px);
}

.sppd-btn-danger {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 14px rgba(185, 28, 28, 0.25);
}

.sppd-btn-danger:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    transform: translateY(-1px);
}

.sppd-btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 14px rgba(217, 119, 6, 0.28);
}

.sppd-btn-warning:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    transform: translateY(-1px);
}

.sppd-btn-secondary-lite {
    background: rgba(71, 85, 105, 0.12);
    color: #475569 !important;
    border-color: rgba(71, 85, 105, 0.28) !important;
}

.sppd-btn-secondary-lite:hover {
    background: rgba(71, 85, 105, 0.2);
    color: #334155 !important;
}

html.dark .dash-body .sppd-btn-secondary-lite {
    background: rgba(148, 163, 184, 0.12);
    color: rgba(200, 218, 255, 0.92) !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
}

html.dark .dash-body .sppd-modal-box {
    background: rgba(10, 35, 66, 0.35);
    border: 1px solid rgba(212, 175, 55, 0.1);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.sppd-modal-box {
    background: rgba(255, 255, 255, 0.38); 
    backdrop-filter: blur(10px);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
    height: auto;
    min-height: -moz-min-content;
    min-height: min-content;
    width: 100%;
    overflow: visible;
}

.sppd-modal-box h3 {
    margin: 0 0 12px;
    font-size: 1.02rem;
    color: #002a7a;
}

html.dark .dash-body .sppd-modal-box h3 { color: rgba(200, 218, 255, 0.94); }

.sppd-modal-box {
    display: flex;
    flex-direction: column;
    background: #fff;
}

.sppd-detail-html {
    flex: 1 1 auto;
    max-height: min(58vh, 560px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    margin-right: -2px;
}

.sppd-modal-box .ppm-modal-actions {
    flex: 0 0 auto;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

html.dark .dash-body .sppd-modal-box .ppm-modal-actions {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.sppd-detail-pdf-wrap {
    flex: 1 1 auto;
    margin-right: auto;
    min-width: 0;
}

.sppd-detail-pdf-wrap .sppd-btn-modal-pdf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    border-radius: 10px;
    padding: 8px 12px;
    border: 1px solid rgba(37, 99, 235, 0.35);
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #1e40af !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.sppd-detail-pdf-wrap .sppd-btn-modal-pdf:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.22);
}

html.dark .dash-body .sppd-detail-pdf-wrap .sppd-btn-modal-pdf {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.65) 0%, rgba(29, 78, 216, 0.55) 100%);
    border-color: rgba(96, 165, 250, 0.35);
    color: #e2e8f0 !important;
}

.sppd-toll-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.45);
}

.sppd-toll-line .sppd-row {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.sppd-fuel-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.45);
}

.sppd-fuel-line .sppd-fuel-block {
    flex: 1;
    min-width: 0;
}

.sppd-fuel-line .sppd-fuel-block .sppd-row {
    border-bottom: none;
    margin-bottom: 8px;
    padding-bottom: 0;
}

.sppd-line-remove {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.sppd-line-remove:hover { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }

.sppd-line-remove--fuel { align-self: center; }

html.dark .dash-body .sppd-line-remove { background: rgba(15, 23, 42, 0.5); border-color: rgba(148, 163, 184, 0.35); color: #94a3b8; }

html.dark .dash-body .sppd-line-remove:hover { background: rgba(127, 29, 29, 0.35); color: #fecaca; }

#sppd-result-msg.sppd-result-msg:empty { display: none; }

.sppd-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.45);
}

.sppd-footer-actions {
    display: flex;
    gap: 10px;
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.sppd-footer-actions .checklist-nav-btn {
    min-width: 118px;
}

.sppd-footer-actions .checklist-nav-next.final {
    min-width: 168px;
}

@media (min-width: 640px) {
    .sppd-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.sppd-toll-leg-block {
    margin-bottom: 20px;
}

.sppd-toll-leg-block:last-of-type {
    margin-bottom: 8px;
}

.sppd-toll-leg-title {
    margin: 0 0 10px;
    font-size: 0.88rem;
    font-weight: 800;
    color: #002a7a;
    letter-spacing: 0.02em;
}

html.dark .dash-body .sppd-toll-leg-title {
    color: rgba(248, 250, 252, 0.92);
}

.sppd-add-row {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px dashed #94a3b8;
    background: transparent;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    color: #002a7a;
}

html.dark .dash-body .sppd-add-row { color: #93c5fd; border-color: rgba(148, 163, 184, 0.35); }

.sppd-summary-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 520px) {
    .sppd-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.sppd-sum-label { display: block; font-size: 0.72rem; color: #94a3b8; margin-bottom: 2px; }

.sppd-sum-grand { padding: 10px; border-radius: 10px; background: rgba(0, 42, 122, 0.06); border: 1px solid rgba(0, 42, 122, 0.12); }

html.dark .dash-body .sppd-sum-grand { background: rgba(8, 20, 50, 0.5); border-color: rgba(255, 255, 255, 0.08); }

.sppd-step4-lead {
    font-size: 0.84rem;
    color: #475569;
    margin: 0 0 14px;
    line-height: 1.5;
}

html.dark .dash-body .sppd-step4-lead { color: rgba(200, 218, 255, 0.75); }

.sppd-step4-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.sppd-summary-grid--step4 {
    margin-top: 4px;
}

.sppd-summary-card {
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

html.dark .dash-body .sppd-summary-card {
    background: rgba(8, 20, 50, 0.55);
    border-color: rgba(255, 255, 255, 0.1);
}

.sppd-summary-card-title {
    margin: 0 0 12px;
    font-size: 0.8rem;
    font-weight: 800;
    color: #002a7a;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

html.dark .dash-body .sppd-summary-card-title { color: #93c5fd; }

.sppd-summary-subhead {
    margin: 0 0 8px;
    font-size: 0.78rem;
    font-weight: 800;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sppd-summary-subhead--spaced {
    margin-top: 14px;
}

html.dark .dash-body .sppd-summary-subhead {
    color: rgba(200, 218, 255, 0.7);
}

.sppd-summary-dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    margin: 0;
    font-size: 0.84rem;
}

.sppd-summary-dl > div {
    margin: 0;
}

.sppd-summary-dl dt {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    margin: 0 0 4px;
}

html.dark .dash-body .sppd-summary-dl dt { color: rgba(200, 218, 255, 0.55); }

.sppd-summary-dl dd {
    margin: 0;
    color: #0f172a;
    line-height: 1.45;
    word-break: break-word;
}

html.dark .dash-body .sppd-summary-dl dd { color: rgba(248, 250, 252, 0.92); }

.sppd-summary-dl-span2 {
    grid-column: 1 / -1;
}

.sppd-summary-multiline {
    white-space: pre-wrap;
}

.sppd-summary-table-wrap {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

html.dark .dash-body .sppd-summary-table-wrap {
    border-color: rgba(255, 255, 255, 0.1);
}

.sppd-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.sppd-summary-table th,
.sppd-summary-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

html.dark .dash-body .sppd-summary-table th,
html.dark .dash-body .sppd-summary-table td {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.sppd-summary-table th {
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
    background: #f8fafc;
}

html.dark .dash-body .sppd-summary-table th {
    background: rgba(5, 11, 20, 0.5);
    color: rgba(200, 218, 255, 0.65);
}

.sppd-summary-table tbody tr:last-child td {
    border-bottom: none;
}

.sppd-summary-table-empty {
    text-align: center;
    color: #94a3b8;
    font-style: italic;
}

.sppd-summary-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .sppd-summary-dl {
        grid-template-columns: 1fr;
    }
    .sppd-summary-dl-span2 {
        grid-column: 1;
    }
}

.sppd-detail-html .info-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; font-size: 0.82rem; }

html:not(.dark) .dash-body .sppd-detail-html .info-table { background: #fff; }

.sppd-detail-html .info-table td { border: 1px solid #e2e8f0; padding: 6px 8px; vertical-align: top; }

.sppd-detail-html .info-table .label { font-weight: 700; background: #f1f5f9; width: 32%; }

html.dark .dash-body .sppd-detail-html .info-table td { border-color: rgba(255, 255, 255, 0.1); }

html.dark .dash-body .sppd-detail-html .info-table .label { background: rgba(8, 20, 50, 0.55); }

.sppd-detail-sub { font-weight: 700; font-size: 0.78rem; margin: 10px 0 4px; color: #002a7a; }

html.dark .dash-body .sppd-detail-sub { color: #93c5fd; }

.sppd-detail-sub--spaced { margin-top: 18px; }

.sppd-sig-preview {
    max-height: 100px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 4px 6px;
}

html.dark .dash-body .sppd-sig-preview {
    background: #fff;
    border-color: rgba(148, 163, 184, 0.45);
}

.sppd-photo-grid { display: flex; flex-wrap: wrap; gap: 8px; }

.sppd-photo-thumb {
    width: 110px;
    height: 78px;
    -o-object-fit: cover;
       object-fit: cover;
    border: 1px solid #d1d5db;
    border-radius: 8px;
}

html.dark .dash-body .sppd-photo-thumb { border-color: rgba(255, 255, 255, 0.15); }

.sppd-revisi-inline, .sppd-revisi-note {
    white-space: pre-wrap;
    padding: 10px;
    border-radius: 10px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    font-size: 0.85rem;
    margin-top: 6px;
}

html.dark .dash-body .sppd-revisi-inline, html.dark .dash-body .sppd-revisi-note {
    background: rgba(30, 20, 10, 0.55);
    border-color: rgba(251, 146, 60, 0.35);
    color: rgba(255, 237, 213, 0.92);
}

.sppd-revisi-date { font-size: 0.78rem; color: #64748b; margin-bottom: 6px; }

.sppd-flash-ok {
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.35);
    font-size: 0.85rem;
    font-weight: 600;
    color: #166534;
}

@media (max-width: 720px) {
    .sppd-table-wrap .admin-table thead { display: none; }
    .sppd-table-wrap .admin-table tr { display: block; border-bottom: 1px solid #e2e8f0; padding: 10px 0; }
    .sppd-table-wrap .admin-table td {
        display: grid;
        grid-template-columns: minmax(100px, 34%) 1fr;
        gap: 6px 10px;
        padding: 6px 4px !important;
        border: none !important;
    }
    .sppd-table-wrap .admin-table td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.72rem;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    html.dark .dash-body .sppd-table-wrap .admin-table td::before { color: rgba(200, 218, 255, 0.5); }
}

/* ---- Form laporan BBM (driver) ---- */

.bbm-nojs-errors {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: 0.86rem;
}

.bbm-nojs-errors ul {
    margin: 8px 0 0;
    padding-left: 1.2rem;
}

html.dark .dash-body .bbm-nojs-errors {
    background: rgba(127, 29, 29, 0.25);
    border-color: rgba(248, 113, 113, 0.35);
    color: #fecaca;
}

.bbm-form-section {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 14px 16px 18px;
    margin-bottom: 14px;
}

html.dark .dash-body .bbm-form-section {
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(148, 163, 184, 0.22);
}

.bbm-form-section .section-banner {
    margin-bottom: 12px;
}

.bbm-field-icon {
    margin-right: 4px;
    color: #64748b;
    vertical-align: -0.1em;
}

html.dark .dash-body .bbm-field-icon { color: #94a3b8; }

.bbm-total-field .bbm-total-readonly {
    background: #fef9c3 !important;
    border: 2px solid #eab308 !important;
    color: #713f12 !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    margin-top: -12px;
}

html.dark .dash-body .bbm-total-field .bbm-total-readonly {
    background: rgba(234, 179, 8, 0.18) !important;
    border-color: #ca8a04 !important;
    color: #fde047 !important;
}

.bbm-photo-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 8px;
}

.bbm-submit-row {
    margin-top: 6px;
    padding-top: 4px;
}

.bbm-submit-btn {
    width: 100%;
    min-height: 52px;
    font-size: 0.95rem;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(5, 45, 127, 0.35);
}

.bbm-submit-icon {
    font-size: 1.1rem;
}

/* ===================================================================
   SIDEBAR LAYOUT SYSTEM  (dash-app layout)
   ================================================================== */

/* ── Dash app shell — full-width column (sidebar rail removed from layout) ── */

body.dash-body {
    display: flex;
    flex-direction: column;
}

/* ── Sidebar panel — legacy selectors; nav-links reused inside dash-nav-drawer ── */

.dash-sidebar {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--dash-navy-mid);
    border-right: 1px solid rgba(255,255,255,0.07);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 150;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.22s ease,
        border-color 0.2s ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.dash-sidebar::-webkit-scrollbar { width: 4px; }

.dash-sidebar::-webkit-scrollbar-track { background: transparent; }

.dash-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

/* ── Sidebar backdrop (mobile only) ── */

.dash-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 249;
    opacity: 0;
    transition: opacity 0.25s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.sidebar-open .dash-sidebar-backdrop {
    display: block;
    opacity: 1;
}

/* ── Mobile-only row: tutup drawer sidebar ── */

.dash-sidebar-mobile-head {
    display: none;
    flex-shrink: 0;
    justify-content: flex-end;
    padding: 12px 12px 4px;
    position: sticky;
    top: 0;
    z-index: 2;
    background: inherit;
}

@media (max-width: 991px) {
    .dash-sidebar-mobile-head {
        display: flex;
    }
}

.dash-sidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.7);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}

.dash-sidebar-close:hover {
    background: rgba(255,255,255,0.14);
    color: #fff;
}

/* ── Sidebar navigation ── */

.dash-sidebar-nav {
    flex: 1;
    padding: 12px 0 8px;
}

.dash-sidebar-group {
    margin-bottom: 4px;
}

.dash-sidebar-group-label {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    color: rgba(255,255,255,0.3);
    text-transform: uppercase;
    padding: 12px 20px 6px;
}

.dash-sidebar-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 20px 9px 16px;
    margin: 1px 10px;
    border-radius: 10px;
    color: rgba(255,255,255,0.62);
    text-decoration: none;
    font-size: 0.855rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    position: relative;
}

.dash-sidebar-link:hover {
    color: rgba(255,255,255,0.92);
}

.dash-sidebar-link.is-active {
    background: rgba(37,99,235,0.75);
    color: #fff;
    font-weight: 600;
    border: none;
    box-shadow: 0 2px 10px rgba(37,99,235,0.35);
}

.dash-sidebar-link.is-active .dash-sidebar-icon {
    color: #bfdbfe;
}

.dash-sidebar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    color: rgba(255,255,255,0.45);
    transition: color 0.15s;
}

.dash-sidebar-link:hover .dash-sidebar-icon {
    color: rgba(255,255,255,0.85);
}

.dash-sidebar-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-sidebar-badge {
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 7px;
    line-height: 1.4;
    flex-shrink: 0;
}

/* ── Main content area ── */

.dash-layout-main {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* ── Scoped premium background ── */

.dash-main-bg-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.dash-main-bg-layer .dash-bg-cubes,
.dash-main-bg-layer .dash-bg-sparkle,
.dash-main-bg-layer .dash-bg-royal-tint,
.dash-main-bg-layer .dash-bg-stardust,
.dash-main-bg-layer .dash-bg-orb-gold,
.dash-main-bg-layer .dash-bg-orb-blue,
.dash-main-bg-layer .dash-bg-wave {
    position: absolute !important;
    pointer-events: none;
    z-index: 0;
}

.dash-main-bg-layer .dash-bg-wave {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55%;
}

/* ── Topbar ── */

.dash-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 0 20px;
    height: 60px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 148;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: linear-gradient(135deg, #1e4080 0%, #0e2a52 22%, #0e1f3a 60%, #071828 100%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

html.dark .dash-body .dash-topbar {
    background: rgba(7, 16, 36, 0.82);
    border-bottom: 1px solid rgba(212, 175, 55, 0.16);
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.dash-topbar-left {
    display: flex;
    align-items: center;
    gap: clamp(10px, 2vw, 16px);
    min-width: 0;
    flex: 1;
}

/* Logo block + title sits on the leading edge of the bar */

.dash-topbar-brand-block {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    max-width: min(320px, 42vw);
    min-width: 0;
}

.dash-topbar-brand-block .dash-topbar-brand-logo {
    height: 38px;
    width: auto;
    -o-object-fit: contain;
       object-fit: contain;
}

/* Legacy centred brand anchor (unused in dash-app chrome; retained for compatibility) */

.dash-topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: min(380px, 46vw);
    text-decoration: none;
    color: inherit;
}

.dash-topbar-brand-logo {
    height: 38px;
    width: auto;
    -o-object-fit: contain;
       object-fit: contain;
    flex-shrink: 0;
}

.dash-topbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ── Responsive: notifikasi / profil di topbar hanya desktop (≥992px) ── */

@media (max-width: 991px) {
    .dash-topbar-desktop-only {
        display: none !important;
    }

    .dash-topbar-logout-desktop-only.dash-topbar-logout-form {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .dash-topbar-drawer-mobile-only.dash-topbar-dash-drawer-btn {
        display: none !important;
    }
}

/* Topbar «Dashboard» — opens right nav drawer (non-dashboard routes) */

.dash-topbar-dash-drawer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 9px;
    border: 1px solid rgba(191, 219, 254, 0.35);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    color: #f8fafc !important;
}

.dash-topbar-dash-drawer-btn svg {
    flex-shrink: 0;
}

html.dark .dash-body .dash-topbar-dash-drawer-btn {
    background: rgba(30, 64, 175, 0.35);
    border-color: rgba(147, 197, 253, 0.35);
}

.dash-topbar-dash-drawer-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.45);
}

html.dark .dash-body .dash-topbar-dash-drawer-btn:hover {
    background: rgba(37, 99, 235, 0.45);
}

.dash-topbar-dash-drawer-btn-label {
    line-height: 1;
}

@media (max-width: 991px) {
    .dash-topbar-dash-drawer-btn-label {
        display: none;
    }
    .dash-topbar-dash-drawer-btn {
        padding: 0 10px;
        min-width: 38px;
    }
    .dash-topbar-logout-label {
        display: none;
    }
    .dash-topbar-logout {
        padding: 0 10px;
        min-width: 36px;
    }
}

.dash-topbar-logout-form {
    display: inline-flex;
    margin: 0;
}

.dash-topbar-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: var(--dash-gold);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    color: #000 !important;
}

html:not(.dark) .dash-body .dash-topbar-logout {
    color: rgba(255, 255, 255, 0.88);
    border-color: rgba(255, 255, 255, 0.18);
}

html.dark .dash-body .dash-topbar-logout {
    color: rgba(255, 255, 255, 0.78);
    border-color: rgba(255, 255, 255, 0.12);
}

.dash-topbar-logout:hover {
    background: #f0c94b;
    border-color: rgba(255, 255, 255, 0.28);

    transform: translateY(-1px);

    box-shadow:
        0 10px 22px rgba(212, 175, 55, 0.22),
        0 2px 6px rgba(0, 0, 0, 0.18);

    color: #000 !important;
}

.dash-topbar-logout:active {
    transform: translateY(0);

    box-shadow:
        0 4px 10px rgba(212, 175, 55, 0.18);
}

.dash-topbar-logout-label {
    line-height: 1;
}

.dash-topbar-title-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.dash-topbar-title {
    font-size: 1.0rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html:not(.dark) .dash-body .dash-topbar-title { color: #ffffff; }

html.dark .dash-body .dash-topbar-title       { color: #e8f0fe; }

.dash-topbar-subtitle {
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html:not(.dark) .dash-body .dash-topbar-subtitle { color: rgba(191,219,254,0.75); }

html.dark .dash-body .dash-topbar-subtitle       { color: rgba(200,218,255,0.55); }

/* ── Sidebar toggle (hamburger) ── */

.dash-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border: none;
    background: transparent;
    font-size: 1.3rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

html:not(.dark) .dash-body .dash-sidebar-toggle { color: rgba(255,255,255,0.85); }

html.dark .dash-body .dash-sidebar-toggle       { color: rgba(255,255,255,0.8); }

.dash-sidebar-toggle:hover {
    background: rgba(255,255,255,0.1);
}

html.dark .dash-body .dash-sidebar-toggle:hover {
    background: rgba(255,255,255,0.09);
}

/* ── Topbar icon buttons (theme, notifications) ── */

.dash-topbar-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    position: relative;
}

html:not(.dark) .dash-body .dash-topbar-icon-btn { color: rgba(255,255,255,0.82); }

html.dark .dash-body .dash-topbar-icon-btn       { color: rgba(255,255,255,0.7); }

.dash-topbar-icon-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.18);
}

html.dark .dash-body .dash-topbar-icon-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.1);
}

/* ── Topbar profile button (merged with role chip) ── */

.dash-topbar-profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5.5px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: filter 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    font: inherit;
    text-align: left;
    max-width: 200px;
}

.dash-topbar-profile-btn:hover {
    filter: brightness(1.3);
}

.dash-topbar-profile-btn:active {
    transform: scale(0.98);
}

.dash-topbar-profile-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    line-height: 1;
}

.dash-topbar-profile-name {
    font-size: 0.82rem;
    font-weight: 700;
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-topbar-profile-role {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.88;
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-logout-swal-popup {
    background: rgba(255, 255, 255, 0.93);
    border-radius: 20px;
}

html.dark .dash-body .dash-logout-swal-popup {
    color: var(--dash-bg);
    background: rgba(16, 38, 80, 0.78);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.dash-logout-swal-text {
    color: var(--dash-gold);
}

.dash-logout-swal-confirm {
    background: #DC3545;
    transition:
        filter .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.dash-logout-swal-confirm:hover {
    background: #DC3545;
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow:
        0 4px 10px rgba(220, 53, 69, 0.25),
        0 0 20px rgba(220, 53, 69, 0.15);
}

.dash-logout-swal-confirm:active {
    background: #DC3545;
    transform: translateY(0) scale(0.98);
    filter: brightness(0.96);
}

.dash-logout-swal-close {
    color: #94a3b8 !important;
    transition: color 0.15s ease !important;
    outline: none !important;
    box-shadow: none !important;
}

.dash-logout-swal-close:hover {
    color: #ef4444 !important;
}

html.dark .dash-body .dash-logout-swal-close {
    color: rgba(255, 255, 255, 0.5) !important;
}

html.dark .dash-body .dash-logout-swal-close:hover {
    color: #fca5a5 !important;
}

.dash-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
    z-index: 780;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.dash-nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    height: 100dvh;
    width: min(400px, 100vw);
    max-width: 100vw;
    z-index: 790;
    display: flex;
    flex-direction: column;
    background: rgba(241, 245, 249, 0.72);
    backdrop-filter: blur(18px);
    box-shadow: -12px 0 52px rgba(0, 0, 0, 0.2);
    transform: translateX(100%);
    transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}

.dash-nav-drawer.open {
    transform: translateX(0);
}

html.dark .dash-body .dash-nav-drawer {
    background: linear-gradient(
        180deg,
        rgba(11, 18, 36, 0.72) 0%,
        rgba(15, 27, 50, 0.72) 52%,
        rgba(10, 20, 38, 0.72) 100%
    );
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: -12px 0 52px rgba(0, 0, 0, 0.55);
}

.dash-nav-drawer-top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-shrink: 0;
    padding: 6px 8px 2px;
    margin-bottom: -32px;
}

.dash-nav-drawer-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 9px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.37);
    color: #475569;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.dash-nav-drawer-close:hover {
    background: rgba(255, 255, 255, 0.75);
}

html.dark .dash-body .dash-nav-drawer-close {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(248, 250, 252, 0.88);
}

html.dark .dash-body .dash-nav-drawer-close:hover {
    background: rgba(255, 255, 255, 0.15);
}

.dash-nav-drawer-body {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 10px 14px 16px;
    -webkit-overflow-scrolling: touch;
}

/* Legacy wrapper — flattened (menu sits directly on drawer surface) */

.dash-nav-glass-card {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
}

html.dark .dash-body .dash-nav-glass-card {
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.dash-nav-drawer-inner-nav {
    padding-top: 2px !important;
    padding-bottom: 4px !important;
    padding-right: 10px;
}

/* ── Drawer: akun / notifikasi (≤991px) ── */

.dash-nav-drawer-account {
    display: none;
}

@media (max-width: 991px) {
    .dash-nav-drawer-account {
        display: block;
        padding: 4px 10px 12px 8px;
        margin-bottom: 8px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.28);
    }
}

html.dark .dash-body .dash-nav-drawer-account {
    border-bottom-color: rgba(148, 163, 184, 0.14);
}

.dash-nav-drawer-account-label.dash-sidebar-group-label {
    padding-left: 8px !important;
    padding-bottom: 8px !important;
}

.dash-nav-drawer-profile-btn {
    display: inline-flex;
    flex: 1;
    min-width: 0;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 0;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: filter 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.dash-nav-drawer-profile-btn:hover {
    filter: brightness(1.08);
}

.dash-nav-drawer-profile-btn:active {
    transform: scale(0.99);
}

.dash-nav-drawer-account-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    position: relative;
}

.dash-nav-drawer-profile-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    line-height: 1.2;
}

.dash-nav-drawer-profile-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-nav-drawer-profile-role {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.88;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-nav-notif-in-drawer {
    flex-shrink: 0;
    position: static;
    align-self: stretch;
    display: flex;
    align-items: stretch;
}

.dash-nav-notif-in-drawer .dash-notif-btn {
    width: 45px;
    min-height: 100%;
    height: auto;
    background: rgba(241, 245, 249, 0.92);
    color: var(--dash-blue);
}

html.dark .dash-body .dash-nav-notif-in-drawer .dash-notif-btn {
    background: var(--dash-blue);
    color: rgba(241, 245, 249, 0.92);
}

.dash-notif-panel--drawer,
#dash-nav-notif-panel.dash-notif-panel--drawer {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    margin-top: 8px;
    width: 320px;
    max-width: min(92vw, 365px);
    max-height: min(280px, 42vh);
    z-index: 999;
}

/* Light drawer: slate text on frosted panel */

.dash-nav-drawer-body .dash-sidebar-group-label,
.dash-nav-drawer-body .dash-nav-drawer-group-label,
.dash-nav-glass-card .dash-sidebar-group-label,
.dash-nav-glass-card .dash-nav-drawer-group-label {
    color: rgba(30, 64, 175, 0.55) !important;
}

.dash-nav-drawer-body .dash-sidebar-link:not(.is-active),
.dash-nav-drawer-body .dash-nav-drawer-link:not(.is-active),
.dash-nav-glass-card .dash-sidebar-link:not(.is-active),
.dash-nav-glass-card .dash-nav-drawer-link:not(.is-active) {
    color: rgba(15, 39, 71, 0.85) !important;
}

.dash-nav-drawer-body .dash-sidebar-link:not(.is-active) .dash-sidebar-icon,
.dash-nav-glass-card .dash-sidebar-link:not(.is-active) .dash-sidebar-icon {
    color: rgba(30, 64, 175, 0.5) !important;
}

.dash-nav-drawer-body .dash-sidebar-link:hover:not(.is-active),
.dash-nav-drawer-body .dash-nav-drawer-link:hover:not(.is-active),
.dash-nav-glass-card .dash-sidebar-link:hover:not(.is-active),
.dash-nav-glass-card .dash-nav-drawer-link:hover:not(.is-active) {
    color: var(--dash-gold) !important;
}

.dash-nav-drawer-body .dash-sidebar-link:hover:not(.is-active) .dash-sidebar-icon,
.dash-nav-glass-card .dash-sidebar-link:hover:not(.is-active) .dash-sidebar-icon {
    color: var(--dash-gold) !important;
}

.dash-nav-drawer-body .dash-sidebar-link.is-active,
.dash-nav-drawer-body .dash-nav-drawer-link.is-active,
.dash-nav-glass-card .dash-sidebar-link.is-active,
.dash-nav-glass-card .dash-nav-drawer-link.is-active {
    background: rgba(37, 99, 235, 0.75) !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.25);
}

.dash-nav-drawer-body .dash-sidebar-link.is-active .dash-sidebar-icon,
.dash-nav-drawer-body .dash-nav-drawer-link.is-active .dash-sidebar-icon,
.dash-nav-glass-card .dash-sidebar-link.is-active .dash-sidebar-icon,
.dash-nav-glass-card .dash-nav-drawer-link.is-active .dash-sidebar-icon {
    color: currentColor !important;
}

/* Dark drawer panel */

html.dark .dash-body .dash-nav-drawer-body .dash-sidebar-group-label,
html.dark .dash-body .dash-nav-drawer-body .dash-nav-drawer-group-label,
html.dark .dash-body .dash-nav-glass-card .dash-sidebar-group-label,
html.dark .dash-body .dash-nav-glass-card .dash-nav-drawer-group-label {
    color: rgba(186, 210, 255, 0.42) !important;
}

html.dark .dash-body .dash-nav-drawer-body .dash-sidebar-link:not(.is-active),
html.dark .dash-body .dash-nav-drawer-body .dash-nav-drawer-link:not(.is-active),
html.dark .dash-body .dash-nav-glass-card .dash-sidebar-link:not(.is-active),
html.dark .dash-body .dash-nav-glass-card .dash-nav-drawer-link:not(.is-active) {
    color: rgba(226, 232, 240, 0.88) !important;
}

html.dark .dash-body .dash-nav-drawer-body .dash-sidebar-link:not(.is-active) .dash-sidebar-icon,
html.dark .dash-body .dash-nav-glass-card .dash-sidebar-link:not(.is-active) .dash-sidebar-icon {
    color: rgba(191, 219, 254, 0.5) !important;
}

html.dark .dash-body .dash-nav-drawer-body .dash-sidebar-link:hover:not(.is-active),
html.dark .dash-body .dash-nav-drawer-body .dash-nav-drawer-link:hover:not(.is-active),
html.dark .dash-body .dash-nav-glass-card .dash-sidebar-link:hover:not(.is-active),
html.dark .dash-body .dash-nav-glass-card .dash-nav-drawer-link:hover:not(.is-active) {
    color: var(--dash-gold) !important;
    filter: brightness(1.3);
}

html.dark .dash-nav-drawer-body .dash-sidebar-link:hover:not(.is-active) .dash-sidebar-icon,
html.dark .dash-nav-glass-card .dash-sidebar-link:hover:not(.is-active) .dash-sidebar-icon {
    color: var(--dash-gold) !important;
    filter: brightness(1.3);
}

html.dark .dash-body .dash-nav-drawer-body .dash-sidebar-link.is-active,
html.dark .dash-body .dash-nav-drawer-body .dash-nav-drawer-link.is-active,
html.dark .dash-body .dash-nav-glass-card .dash-sidebar-link.is-active,
html.dark .dash-body .dash-nav-glass-card .dash-nav-drawer-link.is-active {
    background: rgba(59, 130, 246, 0.45) !important;
    color: #f8fafc !important;
}

html.dark .dash-body .dash-nav-drawer-body .dash-sidebar-link.is-active .dash-sidebar-icon,
html.dark .dash-body .dash-nav-drawer-body .dash-nav-drawer-link.is-active .dash-sidebar-icon,
html.dark .dash-body .dash-nav-glass-card .dash-sidebar-link.is-active .dash-sidebar-icon,
html.dark .dash-body .dash-nav-glass-card .dash-nav-drawer-link.is-active .dash-sidebar-icon {
    color: currentColor !important;
}

.dash-nav-drawer-footer {
    flex-shrink: 0;
    padding: 12px 16px 18px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: inherit;
}

html.dark .dash-body .dash-nav-drawer-footer {
    border-top-color: rgba(255, 255, 255, 0.07);
}

.dash-nav-drawer-logout-form {
    margin: 0;
}

.dash-nav-drawer-logout-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.35);
    background: rgba(254, 242, 242, 0.85);
    color: #b91c1c !important;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease, border-color 0.15s ease;
}

.dash-nav-drawer-logout-btn:hover {
    background: #fee2e2;
}

html.dark .dash-body .dash-nav-drawer-logout-btn {
    background: rgba(127, 29, 29, 0.35);
    border-color: rgba(248, 113, 113, 0.45);
    color: #fecaca !important;
}

html.dark .dash-body .dash-nav-drawer-logout-btn:hover {
    background: rgba(127, 29, 29, 0.5);
}

/* ── Content area inside main ── */

.dash-layout-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

@media (max-width: 640px) {
    .dash-topbar { padding: 0 12px; gap: 8px; }
    .dash-topbar-profile-meta { display: none; }
    .dash-topbar-title { font-size: 0.9rem; }
    .dash-topbar-left { gap: 8px; }
    .dash-topbar-brand-block {
        max-width: min(260px, 56vw);
        gap: 6px;
    }
    .dash-topbar-brand-block .dash-topbar-brand-logo {
        height: 28px;
    }
}

/* Spin animation used by checklist form submit button loading state */

@keyframes spinIcon {
    to { transform: rotate(360deg); }
}

.spin-icon {
    animation: spinIcon 1s linear infinite;
}

/* =============================================================
   MOBILE PERFORMANCE OVERRIDES
   Target: Android low-RAM / mid-CPU devices (≤768px)
   Menghilangkan operasi GPU mahal tanpa mengubah logika apapun.
   ============================================================= */

@media (max-width: 768px) {
    /* --- Disable infinite shine animation + external texture mask --- */
    .dash-bg-sparkle {
        animation: none !important;
        opacity: 0 !important;
    }

    /* --- Disable external texture + costly mix-blend-mode --- */
    .dash-bg-cubes {
        mix-blend-mode: normal !important;
        filter: none !important;
        opacity: 0.18 !important;
    }

    .dash-bg-stardust {
        mix-blend-mode: normal !important;
        opacity: 0 !important;
    }

    html:not(.dark) .dash-body .dash-bg-cubes {
        opacity: 0.8 !important;
    }

    /* Dark mode on mobile: restore visible opacity for cube pattern */
    html.dark .dash-body .dash-bg-cubes {
        opacity: 0.55 !important;
        mix-blend-mode: screen !important;
        filter: contrast(1.05) brightness(0.85) !important;
    }

    /* --- Stop SVG wave animations (GPU composite + paint) --- */
    .vms-wave-line-solid,
    .vms-wave-line-dashed {
        animation: none !important;
    }

    /* --- Replace backdrop-filter with solid backgrounds (composite layer cost) --- */
    .dash-nav-drawer,
    .profile-drawer {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .dash-theme-btn {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(15, 23, 42, 0.88) !important;
    }

    /* --- Reduce box-shadow complexity on cards for faster paint --- */
    .dash-main-card,
    .portal-stat-card,
    .dash-glass-card,
    .dash-nav-glass-card {
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18) !important;
    }

    /* --- Simplify hero section gradient on mobile --- */
    .dash-hero-section {
        background: var(--dash-blue, #0A2342) !important;
    }
}

/* --- Respect user OS reduced-motion preference --- */

@media (prefers-reduced-motion: reduce) {
    .dash-bg-sparkle,
    .dash-bg-cubes,
    .vms-wave-line-solid,
    .vms-wave-line-dashed,
    .dash-hero-kicker-dot {
        animation: none !important;
        transition: none !important;
    }

    /* Slow transitions to instant for reduced-motion users */
    .dash-nav-drawer,
    .profile-drawer,
    .dash-nav-overlay,
    .profile-overlay {
        transition: none !important;
    }
}

.admin-filter-reset {
    background-color: #002a7a !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.admin-filter-reset i {
    color: #ffffff !important;
}

.admin-filter-reset:hover {
    background-color: #001f5c !important;
    opacity: 0.95;
}

html.dark .admin-filter-reset {
    background-color: #60a5fa !important;
}

html.dark .admin-filter-reset:hover {
    background-color: #3b82f6 !important;
}

/* ╔════════════════════════════════════════════════════════════════════╗
   ║  ODOMETER REPORT — Index (driver & admin)                        ║
   ║  Dipindahkan dari Blade partials ke app.css agar browser cache.  ║
   ╚════════════════════════════════════════════════════════════════════╝ */

/* ══ Stat cards ══════════════════════════════════════════════════════ */

.odo-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

@media (max-width: 1024px) { .odo-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.odo-stat-card {
    border-radius: 18px;
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.18s ease, background 0.18s ease;
}

.odo-stat-card:hover { transform: translateY(-2px); }

.odo-stat-glow {
    position: absolute; right: -24px; top: -24px;
    width: 96px; height: 96px; border-radius: 50%;
    filter: blur(28px); pointer-events: none; transition: opacity 0.2s;
}

.odo-stat-card:hover .odo-stat-glow { opacity: 0.6; }

.odo-stat-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }

.odo-stat-label {
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; margin: 0 0 6px;
}

.odo-stat-value { font-size: 1.9rem; font-weight: 800; line-height: 1.05; }

.odo-stat-unit  { font-size: 0.78rem; font-weight: 500; opacity: 0.7; margin-left: 4px; }

.odo-stat-icon  {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; flex-shrink: 0;
}

/* Nilai tiap kartu memakai warna kartunya (mockup) — dark mode */

.odo-stat-blue    { border-color: rgba(96,165,250,0.3); }

.odo-stat-blue    .odo-stat-glow  { background: rgba(59,130,246,0.35); }

.odo-stat-blue    .odo-stat-label { color: #93c5fd; }

.odo-stat-blue    .odo-stat-value { color: #60a5fa; }

.odo-stat-blue    .odo-stat-icon  { background: rgba(59,130,246,0.18); border: 1px solid rgba(96,165,250,0.45); color: #60a5fa; }

.odo-stat-emerald { border-color: rgba(52,211,153,0.3); }

.odo-stat-emerald .odo-stat-glow  { background: rgba(16,185,129,0.35); }

.odo-stat-emerald .odo-stat-label { color: #6ee7b7; }

.odo-stat-emerald .odo-stat-value { color: #34d399; }

.odo-stat-emerald .odo-stat-icon  { background: rgba(16,185,129,0.18); border: 1px solid rgba(52,211,153,0.45); color: #34d399; }

.odo-stat-rose    { border-color: rgba(244,63,94,0.4); box-shadow: 0 0 15px rgba(244,63,94,0.1); }

.odo-stat-rose    .odo-stat-glow  { background: rgba(244,63,94,0.35); }

.odo-stat-rose    .odo-stat-label { color: #fb7185; }

.odo-stat-rose    .odo-stat-value { color: #fb7185; }

.odo-stat-rose    .odo-stat-icon  { background: rgba(244,63,94,0.18); border: 1px solid rgba(244,63,94,0.45); color: #fb7185; }

.odo-stat-amber   { border-color: rgba(245,158,11,0.4); box-shadow: 0 0 15px rgba(245,158,11,0.1); }

.odo-stat-amber   .odo-stat-glow  { background: rgba(245,158,11,0.35); }

.odo-stat-amber   .odo-stat-label { color: #fbbf24; }

.odo-stat-amber   .odo-stat-value { color: #fbbf24; }

.odo-stat-amber   .odo-stat-icon  { background: rgba(245,158,11,0.18); border: 1px solid rgba(245,158,11,0.45); color: #fbbf24; }

/* Ikon: seperempat lingkaran di pojok kanan atas (sama dengan kartu form driver / mockup) */

.odo-stat-header { padding-right: 44px; }

.odo-stat-card .odo-stat-icon {
    position: absolute; right: 0; top: 0; z-index: 1;
    width: 64px; height: 64px; border: none !important; border-radius: 0 0 0 9999px;
    display: flex; align-items: flex-start; justify-content: flex-end;
    padding: 9px; font-size: 1.25rem; transition: background 0.2s ease;
}

.odo-stat-blue    .odo-stat-icon { background: rgba(59,130,246,0.1); }

.odo-stat-emerald .odo-stat-icon { background: rgba(16,185,129,0.1); }

.odo-stat-rose    .odo-stat-icon { background: rgba(244,63,94,0.1); }

.odo-stat-amber   .odo-stat-icon { background: rgba(245,158,11,0.1); }

.odo-stat-blue:hover    .odo-stat-icon { background: rgba(59,130,246,0.2); }

.odo-stat-emerald:hover .odo-stat-icon { background: rgba(16,185,129,0.2); }

.odo-stat-rose:hover    .odo-stat-icon { background: rgba(244,63,94,0.2); }

.odo-stat-amber:hover   .odo-stat-icon { background: rgba(245,158,11,0.2); }

.odo-stat-card--clickable.odo-stat-rose:hover  { background: rgba(244,63,94,0.1); }

.odo-stat-card--clickable.odo-stat-amber:hover { background: rgba(245,158,11,0.1); }

/* Light mode */

html:not(.dark) .odo-stat-card {
    background: rgba(255,255,255,0.85);
    border-color: rgba(15,23,42,0.07);
    box-shadow: 0 2px 12px rgba(15,23,42,0.06);
}

html:not(.dark) .odo-stat-blue    .odo-stat-label { color: #2563eb; }

html:not(.dark) .odo-stat-blue    .odo-stat-value { color: #1d4ed8; }

html:not(.dark) .odo-stat-emerald .odo-stat-label,
html:not(.dark) .odo-stat-emerald .odo-stat-value { color: #059669; }

html:not(.dark) .odo-stat-rose    .odo-stat-label,
html:not(.dark) .odo-stat-rose    .odo-stat-value { color: #e11d48; }

html:not(.dark) .odo-stat-amber   .odo-stat-label,
html:not(.dark) .odo-stat-amber   .odo-stat-value { color: #d97706; }

html:not(.dark) .odo-stat-blue    .odo-stat-icon { color: #2563eb; }

html:not(.dark) .odo-stat-emerald .odo-stat-icon { color: #059669; }

html:not(.dark) .odo-stat-rose    .odo-stat-icon { color: #e11d48; }

html:not(.dark) .odo-stat-amber   .odo-stat-icon { color: #d97706; }

/* ══ Section header (Daily Odometer Report) ══════════════════════════ */

.odo-rsection { padding: 0 !important; overflow: visible; border-radius: 22px !important; }

/* overflow section dibiarkan visible supaya dropdown filter tidak terpotong; sudut membulat dipindah ke header & tabel */

.odo-rsection > .odo-rhead { border-radius: 22px 22px 0 0; position: relative; z-index: 5; }

.odo-rsection > .odo-rtable-wrap { border-radius: 0 0 22px 22px; }

.odo-rhead {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px;
    padding: 20px 22px;
    border-bottom: 1px solid rgba(148,163,184,0.25);
    background: rgba(241,245,249,0.6);
}

html.dark .dash-body .odo-rhead {
    background: rgba(15,23,42,0.3);
    border-bottom-color: rgba(51,65,85,0.5);
}

.odo-rhead-title { display: flex; align-items: center; gap: 12px; min-width: 0; }

.odo-rhead-icon { font-size: 2rem; color: #D4AF37; flex-shrink: 0; }

.odo-rhead-title h3 { margin: 0; font-size: 1.1rem; font-weight: 800; line-height: 1.2; color: #0f172a; }

.odo-rhead-title p  { margin: 2px 0 0; font-size: 0.7rem; color: #64748b; }

html.dark .dash-body .odo-rhead-title h3 { color: #fff; }

html.dark .dash-body .odo-rhead-title p  { color: #94a3b8; }

.odo-back-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    white-space: nowrap; min-height: 34px; padding: 0 12px; border-radius: 10px;
    font-size: 0.78rem; font-weight: 700; text-decoration: none;
    background: linear-gradient(135deg, #0b2c6b 0%, #123f8f 100%);
    border: 1px solid rgba(96,165,250,0.25); color: #f8fafc;
    box-shadow: 0 6px 18px rgba(11,44,107,0.2);
    transition: transform 0.15s ease, filter 0.15s ease;
}

.odo-back-btn:hover { transform: translateY(-1px); filter: brightness(1.08); color: #fff; }

.odo-rhead-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.odo-filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }

.odo-date {
    position: relative; display: inline-flex; align-items: center;
}

.odo-date > i {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    color: #D4AF37; font-size: 0.9rem; pointer-events: none;
}

.odo-date .admin-filter-input { width: 140px; padding-left: 32px; min-width: 0; cursor: pointer; }

/* ikon kalender bawaan browser disembunyikan — diganti ikon emas di kiri (klik input membuka picker) */

.odo-date input[type="date"]::-webkit-calendar-picker-indicator { display: none; }

html.dark .dash-body .odo-date input[type="date"] { color-scheme: dark; }

.odo-date-to { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; color: #D4AF37; }

.odo-filter-bar select.admin-filter-input { width: 175px; min-width: 0; }

.odo-reset-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 38px; min-width: 38px; padding: 0 10px; border-radius: 10px;
    border: 1.5px solid #d1d5db; background: #fff; color: #475569;
    font-size: 0.8rem; font-weight: 700; text-decoration: none;
}

.odo-reset-btn span { display: none; }

html.dark .dash-body .odo-reset-btn { background: rgba(8,20,50,0.7); border-color: rgba(255,255,255,0.12); color: #e8f0fe; }

.odo-export-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 38px; padding: 0 18px; border-radius: 10px;
    background: #059669; color: #fff !important; border: 1px solid rgba(16,185,129,0.5);
    font-size: 0.8rem; font-weight: 700; text-decoration: none; white-space: nowrap;
    box-shadow: 0 0 15px rgba(16,185,129,0.3);
    transition: background 0.15s ease;
}

.odo-export-btn:hover { background: #10b981; }

.odo-export-btn i { font-size: 1rem; }

/* ══ Tabel ═══════════════════════════════════════════════════════════ */

.odo-rtable-wrap { overflow-x: auto; }

.odo-rtable { width: 100%; min-width: 900px; border-collapse: collapse; text-align: left; }

.odo-rtable thead tr { background: #f1f5f9; }

html.dark .dash-body .odo-rtable thead tr { background: rgba(15,23,42,0.6); }

.odo-rtable th {
    padding: 14px 20px; font-size: 0.64rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em; color: #64748b;
    border-bottom: 1px solid #e2e8f0; white-space: nowrap;
}

html.dark .dash-body .odo-rtable th { color: #94a3b8; border-bottom-color: rgba(51,65,85,0.5); }

.odo-rtable th.text-center { text-align: center; }

.odo-rtable td {
    padding: 16px 20px; vertical-align: top;
    border-bottom: 1px solid #e2e8f0; color: #0f172a;
}

html.dark .dash-body .odo-rtable td { border-bottom-color: rgba(51,65,85,0.5); color: #e2e8f0; }

.odo-rtable tbody tr:last-child td { border-bottom: none; }

.odo-rtable tbody tr { transition: background 0.15s ease; }

.odo-rtable tbody tr:hover { background: rgba(241,245,249,0.7); }

html.dark .dash-body .odo-rtable tbody tr:hover { background: rgba(30,41,59,0.4); }

.odo-rtable td.odo-td-jarak,
.odo-rtable td.odo-td-bbm,
.odo-rtable td.odo-td-aksi { vertical-align: middle; text-align: center; }

/* Penanda status di sisi kiri baris */

.odo-rtable tbody tr > td:first-child { border-left: 3px solid transparent; }

.odo-rtable tbody tr.odo-row-selisih > td:first-child    { border-left-color: #f43f5e; }

.odo-rtable tbody tr.odo-row-incomplete > td:first-child { border-left-color: #f59e0b; }

/* Tanggal & identitas */

.odo-id-date { font-size: 0.88rem; font-weight: 700; color: #0f172a; }

.odo-id-user { font-size: 0.76rem; font-weight: 700; color: #b8860b; margin-top: 4px; letter-spacing: 0.02em; }

.odo-id-veh  { font-size: 0.76rem; color: #475569; margin-top: 4px; }

.odo-id-nopol { font-weight: 700; color: #2563eb; }

html.dark .dash-body .odo-id-date  { color: #fff; }

html.dark .dash-body .odo-id-user  { color: #D4AF37; }

html.dark .dash-body .odo-id-veh   { color: #cbd5e1; }

html.dark .dash-body .odo-id-nopol { color: #60a5fa; }

/* ── Foto + angka KM (warna indikator sama untuk foto & angka) ── */

.odo-km { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.odo-km-photo {
    position: relative; width: 80px; height: 80px; padding: 0;
    border-radius: 14px; overflow: hidden; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #0f172a; border: 2px solid transparent;
}

button.odo-km-photo { cursor: zoom-in; }

.odo-km-photo img {
    width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block;
    transition: transform 0.3s ease;
}

button.odo-km-photo:hover img { transform: scale(1.1); }

.odo-km-zoom {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.4); color: #fff; font-size: 1.25rem;
    opacity: 0; transition: opacity 0.2s ease;
}

button.odo-km-photo:hover .odo-km-zoom,
button.odo-km-photo:focus-visible .odo-km-zoom { opacity: 1; }

/* hijau: KM valid */

.odo-km-photo--ok { border-color: #10b981; box-shadow: 0 0 15px rgba(16,185,129,0.2); }

/* merah: KM melompat dari KM Akhir sebelumnya */

.odo-km-photo--selisih { border-color: #f43f5e; box-shadow: 0 0 20px rgba(244,63,94,0.3); }

.odo-km-photo--selisih img { filter: grayscale(1); }

.odo-km-photo--selisih .odo-km-zoom { background: rgba(136,19,55,0.4); }

/* amber: tidak ada data */

.odo-km-photo--nodata {
    border: 2px dashed #f59e0b; background: rgba(245,158,11,0.1);
    color: #f59e0b; font-size: 2.2rem; box-shadow: 0 0 15px rgba(245,158,11,0.2);
}

/* abu: hari berjalan, KM Akhir belum waktunya */

.odo-km-photo--pending {
    border: 2px dashed #94a3b8; background: rgba(148,163,184,0.08);
    color: #94a3b8; font-size: 1.8rem;
}

/* foto tidak tersedia tapi angka ada */

.odo-km-photo--empty { background: rgba(148,163,184,0.1); color: inherit; font-size: 1.8rem; }

.odo-km-photo--ok.odo-km-photo--empty      { color: #10b981; }

.odo-km-photo--selisih.odo-km-photo--empty { color: #f43f5e; }

.odo-km-info { text-align: center; }

.odo-km-num { font-size: 1rem; font-weight: 700; line-height: 1.2; }

.odo-km-num--ok      { color: #059669; }

.odo-km-num--selisih { color: #e11d48; }

.odo-km-num--pending { color: #94a3b8; }

html.dark .dash-body .odo-km-num--ok      { color: #34d399; }

html.dark .dash-body .odo-km-num--selisih { color: #fb7185; }

.odo-km-time { font-size: 0.66rem; font-weight: 500; color: #64748b; margin-top: 2px; white-space: nowrap; }

.odo-km-time i { font-size: 0.62rem; vertical-align: -1px; }

html.dark .dash-body .odo-km-time { color: #94a3b8; }

/* ── Pill & badge status ── */

.odo-pill {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    padding: 6px 14px; border-radius: 999px; white-space: nowrap;
    font-size: 0.66rem; font-weight: 700; font-style: italic;
}

.odo-pill--amber { color: #b45309; background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.3); }

html.dark .dash-body .odo-pill--amber { color: #fbbf24; background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.2); }

.odo-pill i { font-size: 0.85rem; font-style: normal; }

.odo-jarak-num { font-size: 1.2rem; font-weight: 700; color: #0f172a; line-height: 1.2; }

html.dark .dash-body .odo-jarak-num { color: #fff; }

.odo-jarak-num--pending { color: #94a3b8 !important; }

.odo-jarak-note { font-size: 0.64rem; font-weight: 600; color: #94a3b8; margin-top: 2px; }

.odo-badge-selisih {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    margin-top: 8px; padding: 5px 10px; border-radius: 6px; white-space: nowrap;
    font-size: 0.64rem; font-weight: 700;
    color: #e11d48; background: rgba(244,63,94,0.1); border: 1px solid rgba(244,63,94,0.25);
    animation: odo-pulse 2s ease-in-out infinite;
}

html.dark .dash-body .odo-badge-selisih { color: #fb7185; border-color: rgba(244,63,94,0.3); }

.odo-badge-sesuai {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    margin-top: 4px; font-size: 0.68rem; font-weight: 600; color: #059669;
}

html.dark .dash-body .odo-badge-sesuai { color: #34d399; }

@keyframes odo-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

@media (prefers-reduced-motion: reduce) { .odo-badge-selisih { animation: none; } }

/* ── BBM awal / akhir (warna mengikuti gradien slider BBM) ── */

.odo-bbm { display: inline-flex; align-items: stretch; justify-content: center; gap: 14px; }

.odo-bbm-item { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 52px; }

.odo-bbm-lbl {
    font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: #64748b;
}

html.dark .dash-body .odo-bbm-lbl { color: #94a3b8; }

.odo-bbm-sep { width: 1px; background: rgba(148,163,184,0.3); }

.odo-bbm-val {
    font-size: 1.35rem; font-weight: 900; line-height: 1.1;
    color: var(--bbm);
    /* sedikit digelapkan di light mode supaya kuning tetap terbaca di latar putih */
    color: color-mix(in srgb, var(--bbm) 82%, #000);
}

html.dark .dash-body .odo-bbm-val { color: var(--bbm); text-shadow: 0 2px 6px rgba(0,0,0,0.35); }

.odo-bbm-val--pending { color: #94a3b8 !important; font-weight: 700; }

/* data BBM kosong: tanda seru merah outline */

.odo-bbm-missing { font-size: 1.6rem; line-height: 1; color: #ef4444; }

html.dark .dash-body .odo-bbm-missing { color: #f87171; }

/* ── Aksi (superadmin) ── */

.odo-del-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px; cursor: pointer;
    font-size: 1.05rem; color: #e11d48;
    background: rgba(244,63,94,0.08); border: 1px solid rgba(244,63,94,0.25);
    transition: background 0.15s ease, transform 0.15s ease;
}

.odo-del-btn:hover { background: rgba(244,63,94,0.18); transform: translateY(-1px); }

.odo-del-btn:disabled { opacity: 0.5; cursor: wait; }

html.dark .dash-body .odo-del-btn { color: #fb7185; background: rgba(244,63,94,0.12); border-color: rgba(244,63,94,0.35); }

.odo-empty { text-align: center; padding: 36px 16px !important; color: #94a3b8 !important; font-size: 0.85rem; }

.odo-empty i { display: block; font-size: 2rem; opacity: 0.4; margin-bottom: 6px; }

.odo-pagination { padding: 12px 20px 16px; }

/* Konfirmasi hapus */

.swal2-popup.odo-del-popup { border-radius: 18px; padding: 1.4rem 1.25rem 1.3rem; width: 400px; max-width: calc(100% - 28px); --swal2-icon-zoom: 0.72; }

.swal2-popup.odo-del-popup .swal2-title { padding: 0; font-size: 1.12rem; font-weight: 800; }

.swal2-popup.odo-del-popup .swal2-html-container { margin: 0; padding: 0.4rem 0.25rem 0; font-size: 0.88rem; }

.swal2-popup.odo-del-popup .swal2-actions { gap: 10px; margin: 1.1rem auto 0; }

.odo-del-confirm, .odo-del-cancel {
    border: none; border-radius: 12px; font-weight: 700; font-size: 0.86rem;
    padding: 0.68rem 1.4rem; min-width: 8rem; cursor: pointer;
}

.odo-del-confirm { background: #e11d48; color: #fff; box-shadow: 0 4px 14px rgba(225,29,72,0.3); }

.odo-del-cancel  { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }

.swal2-popup.odo-del-popup button:focus,
.swal2-popup.odo-del-popup button:focus-visible { outline: none; }

html.dark .dash-body .swal2-popup.odo-del-popup { background: #1e293b; color: #f1f5f9; }

html.dark .dash-body .swal2-popup.odo-del-popup .swal2-title,
html.dark .dash-body .swal2-popup.odo-del-popup .swal2-html-container { color: #f1f5f9; }

html.dark .dash-body .odo-del-cancel { background: #334155; color: #e2e8f0; border-color: #475569; }

/* ── Odometer Report: Mobile / Responsive ── */

@media (max-width: 768px) {
    /* ── Stat cards: 2 kolom ringkas ── */
    .odo-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
    .odo-stat-card { padding: 12px 14px; border-radius: 14px; }
    .odo-stat-label { font-size: 0.58rem; letter-spacing: 0.05em; margin-bottom: 4px; }
    .odo-stat-value { font-size: 1.35rem; }
    .odo-stat-unit  { font-size: 0.66rem; }
    .odo-stat-card .odo-stat-icon { width: 44px; height: 44px; padding: 6px; font-size: 1rem; }
    .odo-stat-header { padding-right: 30px; }

    /* ── Header & filter ── */
    .odo-rsection { border-radius: 18px !important; }
    .odo-rhead { flex-direction: column; align-items: stretch; padding: 14px; gap: 12px; }
    .odo-rhead-title { flex-wrap: wrap; }
    .odo-rhead-icon { font-size: 1.6rem; }
    .odo-rhead-title h3 { font-size: 1rem; }
    .odo-rhead-tools { flex-direction: column; align-items: stretch; }
    #odo-filter-form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }
    #odo-filter-form .odo-date-to { display: none; }
    #odo-filter-form .odo-date { width: 100%; }
    #odo-filter-form .admin-filter-input {
        width: 100% !important; min-width: 0;
        font-size: 16px;                          /* cegah auto-zoom iOS */
        min-height: 40px;
    }
    #odo-filter-form .odo-reset-btn { grid-column: 1 / -1; width: 100%; height: 40px; }
    #odo-filter-form .odo-reset-btn span { display: inline; }
    .odo-export-btn { width: 100%; height: 40px; }

    /* ── Tabel → kartu ── */
    .odo-rtable-wrap { overflow-x: visible; padding: 12px; }
    .odo-rtable { min-width: 0; }
    .odo-rtable, .odo-rtable tbody { display: block; width: 100%; }
    .odo-rtable thead { display: none; }
    .odo-rtable tbody tr {
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 12px;
        margin-bottom: 12px;
        border-radius: 14px;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-left: 4px solid transparent;
        box-shadow: 0 2px 10px rgba(15,23,42,0.05);
    }
    html.dark .dash-body .odo-rtable tbody tr {
        background: rgba(15,23,42,0.55);
        border-color: rgba(255,255,255,0.08);
        box-shadow: none;
    }
    .odo-rtable tbody tr:last-child { margin-bottom: 0; }
    .odo-rtable tbody tr.odo-row-selisih,
    html.dark .dash-body .odo-rtable tbody tr.odo-row-selisih    { border-left-color: #f43f5e; }
    .odo-rtable tbody tr.odo-row-incomplete,
    html.dark .dash-body .odo-rtable tbody tr.odo-row-incomplete { border-left-color: #f59e0b; }
    .odo-rtable tbody tr:hover { background: #fff; }
    html.dark .dash-body .odo-rtable tbody tr:hover { background: rgba(15,23,42,0.55); }

    .odo-rtable td {
        display: block;
        padding: 0 !important;
        border: none !important;
        min-width: 0;
    }

    /* Identitas full width; tombol hapus di pojok kanan atas kartu */
    .odo-rtable td.odo-td-id {
        grid-column: 1 / -1;
        padding: 0 44px 10px 0 !important;
        border-bottom: 1px dashed #e2e8f0 !important;
    }
    html.dark .dash-body .odo-rtable td.odo-td-id { border-bottom-color: rgba(255,255,255,0.1) !important; }
    .odo-rtable td.odo-td-aksi { position: absolute; top: 12px; right: 12px; }

    /* KM Awal / KM Akhir / Jarak / BBM jadi tile 2x2 */
    .odo-rtable td.odo-td-awal,
    .odo-rtable td.odo-td-akhir,
    .odo-rtable td.odo-td-jarak,
    .odo-rtable td.odo-td-bbm {
        text-align: center;
        padding: 10px 6px !important;
        border-radius: 10px;
        background: #f8fafc;
    }
    html.dark .dash-body .odo-rtable td.odo-td-awal,
    html.dark .dash-body .odo-rtable td.odo-td-akhir,
    html.dark .dash-body .odo-rtable td.odo-td-jarak,
    html.dark .dash-body .odo-rtable td.odo-td-bbm { background: rgba(30,41,59,0.55); }

    .odo-rtable td[data-label]:not(.odo-td-aksi)::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 8px;
        font-size: 0.58rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #64748b;
    }
    html.dark .dash-body .odo-rtable td[data-label]::before { color: rgba(200,218,255,0.55); }

    .odo-km-photo { width: 64px; height: 64px; border-radius: 12px; }
    .odo-km-photo--nodata { font-size: 1.8rem; }
    .odo-jarak-num { font-size: 1.05rem; }
    .odo-badge-selisih { white-space: normal; line-height: 1.3; text-align: center; }
    .odo-bbm { gap: 10px; }
    .odo-bbm-item { min-width: 40px; }
    .odo-bbm-val { font-size: 1.15rem; }

    .odo-rtable tbody tr:has(> td.odo-empty) { display: block; }
    .odo-pagination { padding: 0 12px 14px; }
}

@media (max-width: 480px) {
    #odo-filter-form .odo-date,
    #odo-filter-form select.admin-filter-input { grid-column: 1 / -1; }
}

@media (max-width: 360px) {
    .odo-stat-value { font-size: 1.15rem; }
    .odo-km-photo { width: 56px; height: 56px; }
}

/* ── Odometer Report: Stat card periode & clickable ── */

.odo-periode {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
    margin: 8px 0 10px;
    font-size: 0.78rem; font-weight: 600; color: #475569;
}

.odo-periode > i { color: #D4AF37; }

.odo-periode strong { color: #0f172a; font-weight: 800; }

.odo-periode-hint {
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 999px;
    color: #64748b; background: rgba(100,116,139,0.1); border: 1px solid rgba(100,116,139,0.2);
}

.odo-periode-hint--active {
    color: #b45309; background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.3);
}

html.dark .dash-body .odo-periode { color: rgba(200,218,255,0.7); }

html.dark .dash-body .odo-periode strong { color: #f1f5f9; }

html.dark .dash-body .odo-periode-hint {
    color: rgba(200,218,255,0.7); background: rgba(148,163,184,0.12); border-color: rgba(148,163,184,0.25);
}

html.dark .dash-body .odo-periode-hint--active {
    color: #fbbf24; background: rgba(245,158,11,0.14); border-color: rgba(245,158,11,0.35);
}

.odo-stat-card--clickable { cursor: pointer; }

.odo-stat-card--clickable:focus-visible { outline: 2px solid #D4AF37; outline-offset: 2px; }

/* ── Odometer Report: Filter periode (Tahun / Bulan / Tanggal) — dropdown grid ── */

.odo-period { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.odo-pick { position: relative; }

.odo-pick-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 38px; padding: 0 12px; border-radius: 10px; cursor: pointer;
    border: 1.5px solid #d1d5db; background: #fff; color: #0f172a;
    font-size: 0.82rem; white-space: nowrap; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.odo-pick-btn:hover { border-color: #94a3b8; }

.odo-pick.is-open .odo-pick-btn { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }

.odo-pick-ico { color: #D4AF37; font-size: 0.9rem; }

.odo-pick-lbl { color: #64748b; font-weight: 500; }

.odo-pick-val { font-weight: 700; }

.odo-pick-caret { font-size: 0.75rem; color: #64748b; margin-left: 2px; transition: transform 0.15s ease; }

.odo-pick.is-open .odo-pick-caret { transform: rotate(180deg); }

.odo-pick.is-disabled .odo-pick-btn { opacity: 0.5; cursor: not-allowed; }

.odo-pick-pop {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
    width: 220px; padding: 8px; border-radius: 12px;
    background: #fff; border: 1px solid #e2e8f0;
    box-shadow: 0 12px 32px rgba(15,23,42,0.16);
}

.odo-pick-pop--days { width: 300px; }

.odo-pick-pop[hidden] { display: none; }

.odo-pick-all {
    display: block; width: 100%; margin-bottom: 8px; padding: 8px; border-radius: 8px; cursor: pointer;
    font-size: 0.85rem; font-weight: 700; text-align: center;
    border: 1px solid rgba(37,99,235,0.35); background: rgba(37,99,235,0.06); color: #1d4ed8;
}

.odo-pick-all.is-active { background: #2563eb; border-color: #2563eb; color: #fff; }

.odo-pick-grid { display: grid; gap: 4px; }

.odo-pick-grid--3 { grid-template-columns: repeat(3, 1fr); }

.odo-pick-grid--7 { grid-template-columns: repeat(7, 1fr); }

.odo-pick-opt {
    padding: 8px 0; border-radius: 8px; cursor: pointer; text-align: center;
    font-size: 0.85rem; color: #0f172a; background: transparent; border: 1px solid transparent;
    transition: background 0.12s ease;
}

.odo-pick-opt:hover { background: #f1f5f9; }

.odo-pick-opt.is-today { border-color: #64748b; }

.odo-pick-opt.is-active { background: #2563eb; border-color: #2563eb; color: #fff; font-weight: 700; }

html.dark .dash-body .odo-pick-btn { background: rgba(8,20,50,0.7); border-color: rgba(255,255,255,0.14); color: #e8f0fe; }

html.dark .dash-body .odo-pick-lbl,
html.dark .dash-body .odo-pick-caret { color: #94a3b8; }

html.dark .dash-body .odo-pick-pop { background: #0f1b33; border-color: rgba(255,255,255,0.12); box-shadow: 0 12px 32px rgba(0,0,0,0.5); }

html.dark .dash-body .odo-pick-opt { color: #e2e8f0; }

html.dark .dash-body .odo-pick-opt:hover { background: rgba(255,255,255,0.08); }

html.dark .dash-body .odo-pick-opt.is-today { border-color: #94a3b8; }

html.dark .dash-body .odo-pick-opt.is-active { background: #2563eb; border-color: #2563eb; color: #fff; }

html.dark .dash-body .odo-pick-all { color: #93c5fd; background: rgba(37,99,235,0.12); border-color: rgba(96,165,250,0.35); }

html.dark .dash-body .odo-pick-all.is-active { background: #2563eb; border-color: #2563eb; color: #fff; }

/* Swal (modal export) di luar .dash-body tema gelap tetap memakai kelas html.dark */

html.dark .swal2-popup .odo-pick-btn { background: rgba(8,20,50,0.7); border-color: rgba(255,255,255,0.14); color: #e8f0fe; }

html.dark .swal2-popup .odo-pick-pop { background: #0f1b33; border-color: rgba(255,255,255,0.12); }

html.dark .swal2-popup .odo-pick-opt { color: #e2e8f0; }

/* Driver: 3 kartu */

.odo-stat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Badge KM tidak tercatat tanpa angka jarak: langsung di tengah */

.odo-badge-selisih--solo { margin-top: 0; }

/* Modal export */

.swal2-popup.odo-export-popup { width: 440px; }

.odo-export-form { display: flex; flex-direction: column; gap: 14px; text-align: left; margin-top: 6px; }

.odo-export-group { display: flex; flex-direction: column; gap: 6px; }

.odo-export-label {
    font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b;
}

html.dark .dash-body .odo-export-label { color: #94a3b8; }

.odo-export-form .odo-period { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.odo-export-form .odo-pick-btn { width: 100%; padding: 0 10px; }

.odo-export-form .odo-pick-caret { margin-left: auto; }

.odo-export-form .odo-pick:nth-child(3) .odo-pick-pop { left: auto; right: 0; }

.odo-export-form .admin-filter-input { width: 100%; min-width: 0; }

.swal2-popup.odo-export-popup,
.swal2-popup.odo-export-popup .swal2-html-container { overflow: visible; }

.odo-export-formats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.odo-export-formats label { margin: 0; cursor: pointer; }

.odo-export-formats input { position: absolute; opacity: 0; pointer-events: none; }

.odo-export-formats span {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px; border-radius: 10px; font-size: 0.82rem; font-weight: 700;
    border: 1.5px solid #cbd5e1; color: #475569; background: #fff; transition: all 0.15s ease;
}

.odo-export-formats input:checked + span { border-color: #D4AF37; color: #92710a; background: rgba(212,175,55,0.1); }

html.dark .dash-body .odo-export-formats span { background: rgba(15,23,42,0.5); border-color: #475569; color: #cbd5e1; }

html.dark .dash-body .odo-export-formats input:checked + span { border-color: #D4AF37; color: #D4AF37; background: rgba(212,175,55,0.12); }

.odo-export-confirm {
    border: none; border-radius: 12px; font-weight: 700; font-size: 0.86rem;
    padding: 0.68rem 1.4rem; min-width: 8rem; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: #059669; color: #fff; box-shadow: 0 4px 14px rgba(16,185,129,0.3);
}

.odo-export-confirm:hover { background: #10b981; }

@media (max-width: 768px) {
    #odo-filter-form .odo-period { display: contents; }
    #odo-filter-form .odo-pick,
    #odo-filter-form .odo-pick-btn { width: 100%; }
    #odo-filter-form .odo-pick:first-child { grid-column: 1 / -1; }
    .odo-pick-caret { margin-left: auto; }
    .odo-pick-pop, .odo-pick-pop--days { width: min(300px, calc(100vw - 48px)); }
    #odo-filter-form .odo-pick:nth-child(3) .odo-pick-pop { left: auto; right: 0; }
    .odo-stat-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .odo-stat-grid--3 > :last-child { grid-column: 1 / -1; }
}

/* ── Odometer Report: Shift tag ── */

.odo-shift-tag {
    display: inline-flex; align-items: center; gap: 3px; vertical-align: middle;
    margin-left: 6px; padding: 1px 7px 1px 5px; border-radius: 999px;
    font-size: 0.6rem; font-weight: 700; font-style: normal; letter-spacing: 0.02em; line-height: 1.5;
    white-space: nowrap; border: 1px solid transparent;
}

.odo-shift-tag i { font-size: 0.7rem; }

.odo-shift-tag--pagi  { color: #b45309; background: rgba(251,191,36,0.14); border-color: rgba(245,158,11,0.3); }

.odo-shift-tag--siang { color: #c2410c; background: rgba(249,115,22,0.12); border-color: rgba(249,115,22,0.3); }

.odo-shift-tag--luar  { color: #475569; background: rgba(148,163,184,0.14); border-color: rgba(148,163,184,0.3); }

html.dark .dash-body .odo-shift-tag--pagi  { color: #fcd34d; background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.3); }

html.dark .dash-body .odo-shift-tag--siang { color: #fdba74; background: rgba(249,115,22,0.14); border-color: rgba(249,115,22,0.35); }

html.dark .dash-body .odo-shift-tag--luar  { color: #cbd5e1; background: rgba(148,163,184,0.12); border-color: rgba(148,163,184,0.3); }

/* ================================================================
   TRANSDINAS (SPPD): Struk tol & parkir, TTD pengemudi, pernyataan
   ================================================================ */

.sppd-toll-line { align-items: flex-start; }

.sppd-line-body { flex: 1; min-width: 0; }

.sppd-line-remove--fuel { align-self: flex-start; }

.sppd-struk { margin-top: 8px; }

.sppd-struk-choice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.sppd-struk-q {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    margin-right: 2px;
}

.sppd-struk-opt { position: relative; cursor: pointer; margin: 0; }

.sppd-struk-opt input { position: absolute; opacity: 0; pointer-events: none; }

.sppd-struk-opt span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1.5px solid #cbd5e1;
    background: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.sppd-struk-opt input:focus-visible + span { outline: 2px solid #2563eb; outline-offset: 2px; }

.sppd-struk-opt input[value="1"]:checked + span { background: #ecfdf5; border-color: #10b981; color: #047857; }

.sppd-struk-opt input[value="0"]:checked + span { background: #fffbeb; border-color: #f59e0b; color: #b45309; }

html.dark .dash-body .sppd-struk-q { color: #94a3b8; }

html.dark .dash-body .sppd-struk-opt span { background: rgba(15, 23, 42, 0.5); border-color: rgba(148, 163, 184, 0.35); color: #cbd5e1; }

html.dark .dash-body .sppd-struk-opt input[value="1"]:checked + span { background: rgba(16, 185, 129, 0.15); border-color: #34d399; color: #6ee7b7; }

html.dark .dash-body .sppd-struk-opt input[value="0"]:checked + span { background: rgba(245, 158, 11, 0.15); border-color: #fbbf24; color: #fcd34d; }

.sppd-struk-upload { margin-top: 10px; }

.sppd-struk-upload[hidden],
.sppd-struk-preview[hidden],
.sppd-struk-actions[hidden],
.sppd-struk-note[hidden],
.sppd-ttd-block[hidden] { display: none !important; }

.sppd-struk-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.sppd-struk-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1.5px dashed #93c5fd;
    background: #eff6ff;
    color: #1e40af;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.sppd-struk-btn:hover { background: #dbeafe; }

html.dark .dash-body .sppd-struk-btn { background: rgba(30, 58, 138, 0.35); border-color: rgba(96, 165, 250, 0.45); color: #bfdbfe; }

.sppd-struk-preview {
    position: relative;
    display: inline-block;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.sppd-struk-preview img { display: block; max-width: 180px; max-height: 140px; -o-object-fit: contain; object-fit: contain; }

.sppd-struk-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(15, 23, 42, 0.7);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    cursor: pointer;
}

.sppd-struk-note {
    margin: 8px 0 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 0.76rem;
    line-height: 1.45;
}

.sppd-struk-note i { margin-right: 4px; }

html.dark .dash-body .sppd-struk-note { background: rgba(245, 158, 11, 0.12); border-color: rgba(251, 191, 36, 0.35); color: #fcd34d; }

.sppd-ttd-block { margin-top: 14px; }

.sppd-ttd-desc { font-size: 0.8rem; color: #475569; margin: 0 0 10px; line-height: 1.5; }

html.dark .dash-body .sppd-ttd-desc { color: #cbd5e1; }

/* Badge kolom "Struk" (preview & modal detail) */

.sppd-struk-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    color: #64748b;
    background: rgba(148, 163, 184, 0.14);
}

.sppd-struk-badge--ada { color: #047857; background: rgba(16, 185, 129, 0.14); }

.sppd-struk-badge--tidak { color: #b45309; background: rgba(245, 158, 11, 0.16); }

html.dark .dash-body .sppd-struk-badge--ada { color: #6ee7b7; }

html.dark .dash-body .sppd-struk-badge--tidak { color: #fcd34d; }

/* Section foto struk & pernyataan (preview & modal detail) */

.sppd-struk-section {
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
}

.sppd-struk-group-title { font-size: 0.8rem; font-weight: 800; color: #002a7a; margin-bottom: 6px; }

.sppd-struk-leg {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin: 8px 0 6px;
}

html.dark .dash-body .sppd-struk-group-title { color: #D4AF37; }

html.dark .dash-body .sppd-struk-leg { color: #94a3b8; }

.sppd-struk-sep { border: none; border-top: 1px dashed rgba(148, 163, 184, 0.5); margin: 12px 0; }

.sppd-struk-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

@media (min-width: 520px) {
    .sppd-struk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.sppd-struk-thumb {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none !important;
    color: inherit;
}

.sppd-struk-thumb img {
    width: 100%;
    aspect-ratio: 3 / 4;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.sppd-struk-thumb span { font-size: 0.68rem; line-height: 1.3; color: #475569; word-break: break-word; }

html.dark .dash-body .sppd-struk-thumb span { color: #cbd5e1; }

html.dark .dash-body .sppd-struk-thumb img { border-color: rgba(148, 163, 184, 0.3); }

.sppd-pernyataan-list { margin: 0; padding-left: 18px; }

.sppd-pernyataan-list li { font-size: 0.78rem; line-height: 1.55; margin-bottom: 6px; color: #334155; }

html.dark .dash-body .sppd-pernyataan-list li { color: #e2e8f0; }

.sppd-pernyataan-leg {
    display: inline-block;
    padding: 0 6px;
    margin-right: 4px;
    border-radius: 4px;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #1e40af;
    background: rgba(37, 99, 235, 0.1);
}

html.dark .dash-body .sppd-pernyataan-leg { color: #bfdbfe; background: rgba(96, 165, 250, 0.16); }

.sppd-pernyataan-ttd {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    margin-top: 10px;
    font-size: 0.72rem;
    color: #64748b;
}

.sppd-pernyataan-ttd img { max-width: 160px; max-height: 70px; background: #fff; border-radius: 6px; }

.sppd-pernyataan-ttd strong { color: #0f172a; font-size: 0.78rem; }

html.dark .dash-body .sppd-pernyataan-ttd strong { color: #f1f5f9; }

/* ================================================================
   SPPD — preview sebelum submit (bersih, minim border, mobile-first)
   ================================================================ */

.sppd-pv { display: flex; flex-direction: column; gap: 18px; font-size: 0.86rem; color: #0f172a; }

html.dark .dash-body .sppd-pv { color: #e2e8f0; }

.sppd-pv-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 0; padding: 14px; border-radius: 14px; background: #f8fafc; }

html.dark .dash-body .sppd-pv-meta { background: rgba(255, 255, 255, 0.04); }

.sppd-pv-meta > div { min-width: 0; }

.sppd-pv-meta .sppd-pv-full { grid-column: 1 / -1; }

.sppd-pv-meta dt { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #64748b; margin: 0 0 2px; }

.sppd-pv-meta dd { margin: 0; font-weight: 600; line-height: 1.4; word-break: break-word; }

.sppd-pv-title { margin: 0 0 6px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #002a7a; }

html.dark .dash-body .sppd-pv-title { color: #93c5fd; }

.sppd-pv-sub { margin: 10px 0 6px; font-size: 0.72rem; font-weight: 600; color: #64748b; }

.sppd-pv-list { list-style: none; margin: 0; padding: 0; }

.sppd-pv-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; }

.sppd-pv-list li + li { box-shadow: 0 -1px 0 rgba(148, 163, 184, 0.18); }

.sppd-pv-main { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }

.sppd-pv-route { font-weight: 600; line-height: 1.35; word-break: break-word; }

.sppd-pv-route .bi { font-size: 0.7rem; opacity: 0.55; margin: 0 2px; }

.sppd-pv-amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.sppd-pv-totals { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; background: #f8fafc; }

html.dark .dash-body .sppd-pv-totals { background: rgba(255, 255, 255, 0.04); }

.sppd-pv-totals > div { display: flex; justify-content: space-between; gap: 12px; color: #475569; }

html.dark .dash-body .sppd-pv-totals > div { color: #cbd5e1; }

.sppd-pv-totals strong { color: #0f172a; font-variant-numeric: tabular-nums; }

html.dark .dash-body .sppd-pv-totals strong { color: #f8fafc; }

.sppd-pv-totals .sppd-pv-grand { margin-top: 4px; padding-top: 8px; box-shadow: 0 -1px 0 rgba(148, 163, 184, 0.25); font-weight: 800; }

.sppd-pv-totals .sppd-pv-grand strong { font-size: 1rem; color: #002a7a; }

html.dark .dash-body .sppd-pv-totals .sppd-pv-grand strong { color: #facc15; }

.sppd-pv-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

@media (min-width: 560px) { .sppd-pv-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.sppd-pv-photos figure { margin: 0; display: flex; flex-direction: column; gap: 4px; }

.sppd-pv-photos img { width: 100%; aspect-ratio: 3 / 4; -o-object-fit: cover; object-fit: cover; border-radius: 10px; background: #f1f5f9; }

.sppd-pv-photos figcaption { font-size: 0.68rem; line-height: 1.3; color: #64748b; word-break: break-word; }

.sppd-pv-note { padding: 12px 14px; border-radius: 14px; background: #fffbeb; }

html.dark .dash-body .sppd-pv-note { background: rgba(245, 158, 11, 0.08); }

.sppd-pv-note .sppd-pernyataan-list { padding-left: 16px; }

.sppd-pv .sppd-struk-badge { padding: 1px 8px; font-size: 0.68rem; }

/* Badge status struk & kotak lain di modal detail: lebih ringan */

.sppd-struk-section { border: 0; background: rgba(148, 163, 184, 0.1); }

.sppd-struk-thumb img { border: 0; }

.sppd-pernyataan-ttd img { max-width: 140px; }

/* Form: judul parkir opsional */

.sppd-opt { font-weight: 500; font-size: 0.72rem; color: #94a3b8; margin-left: 4px; }

.sppd-ttd-sign { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }

.sppd-ttd-sign strong { text-transform: uppercase; }

/* Titik merah di tombol menu (mobile) bila ada badge / notifikasi belum dibaca */

#dash-nav-drawer-open { position: relative; }

.dash-drawer-btn-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 2px #022777;
    pointer-events: none;
}

/* Tombol aktifkan Web Push di drawer */

.dash-push-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: rgba(37, 99, 235, 0.1);
    color: #1d4ed8;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.dash-push-toggle[hidden] { display: none !important; }

.dash-push-toggle.is-on { background: rgba(16, 185, 129, 0.12); color: #047857; }

.dash-push-toggle.is-blocked { background: rgba(239, 68, 68, 0.1); color: #b91c1c; cursor: default; }

html.dark .dash-body .dash-push-toggle { background: rgba(96, 165, 250, 0.14); color: #bfdbfe; }

html.dark .dash-body .dash-push-toggle.is-on { background: rgba(16, 185, 129, 0.16); color: #6ee7b7; }

html.dark .dash-body .dash-push-toggle.is-blocked { background: rgba(239, 68, 68, 0.16); color: #fca5a5; }

/* Ajakan aktifkan notifikasi (dibuat oleh app.js bila perangkat belum terdaftar) */

.vms-push-prompt {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 2000;
    width: min(420px, calc(100vw - 32px));
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #ffffff;
    color: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.3);
    box-shadow: 0 12px 32px rgba(10, 35, 66, 0.22);
    opacity: 0;
    transform: translate(-50%, 16px);
    transition: opacity .22s ease, transform .22s ease;
}

.vms-push-prompt.is-show { opacity: 1; transform: translate(-50%, 0); }

.vms-push-prompt-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.12); color: #1d4ed8; font-size: 1.15rem;
}

.vms-push-prompt.is-blocked .vms-push-prompt-icon { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }

.vms-push-prompt-body { flex: 1; min-width: 0; }

.vms-push-prompt-body strong { display: block; font-size: 0.9rem; margin-bottom: 2px; }

.vms-push-prompt-body p { margin: 0 0 10px; font-size: 0.78rem; line-height: 1.45; color: #475569; }

.vms-push-prompt-actions { display: flex; gap: 8px; justify-content: flex-end; }

.vms-push-prompt-actions button {
    border: 0; border-radius: 10px; padding: 8px 14px;
    font-size: 0.8rem; font-weight: 700; cursor: pointer;
}

.vms-push-prompt-ok { background: #0A2342; color: #fff; }

.vms-push-prompt-ok:disabled { opacity: .6; cursor: default; }

.vms-push-prompt-later { background: rgba(148, 163, 184, 0.16); color: #334155; }

html.dark .vms-push-prompt { background: #0f1b2e; color: #e2e8f0; border-color: rgba(148, 163, 184, 0.2); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); }

html.dark .vms-push-prompt-body p { color: #94a3b8; }

html.dark .vms-push-prompt-icon { background: rgba(96, 165, 250, 0.16); color: #93c5fd; }

html.dark .vms-push-prompt.is-blocked .vms-push-prompt-icon { background: rgba(239, 68, 68, 0.16); color: #fca5a5; }

html.dark .vms-push-prompt-ok { background: #D4AF37; color: #0A2342; }

html.dark .vms-push-prompt-later { background: rgba(148, 163, 184, 0.14); color: #cbd5e1; }

.dash-notif-panel-foot { padding: 8px 10px 10px; border-top: 1px solid rgba(148, 163, 184, 0.2); }

html.dark .dash-body .dash-notif-panel-foot { border-top-color: rgba(148, 163, 184, 0.14); }

/* ═════════════════════════════════════════════════════════════════════
   MOBILE: toolbar di atas tabel dibuat rapat (tanpa whitespace)
   Berlaku untuk semua bar filter tabel:
   .portal-local-filters, .lk-header-filters, .vul-header-filters
   Urutan baris di HP:
     1. Pencarian (penuh)
     2. Filter (select / tanggal) 2 kolom
     3. [Pilih/All]  ……………  [Per halaman ▾] [reset]
     4. Tombol aksi (Export / Tambah) penuh
   ═════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
    /* ── Tab section (Database Sheet, Log Foto, …) → grid 2 kolom penuh ── */
    html .dash-body .portal-section-header > div:has(> .portal-section-tabs) {
        width: 100%;
    }
    html .dash-body .portal-section-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        margin-bottom: 0;
    }
    html .dash-body .portal-section-tab {
        width: auto;
        min-width: 0;
        justify-content: center;
        padding: 9px 8px;
        font-size: 0.78rem;
        gap: 6px;
        white-space: nowrap;
    }
    html .dash-body .portal-section-header {
        gap: 10px;
        margin-bottom: 12px;
    }
    html .dash-body .portal-pemeriksaan-superadmin-actions {
        width: 100%;
    }
    html .dash-body .portal-pemeriksaan-superadmin-actions .btn-export {
        width: 100%;
        justify-content: center;
    }

    /* ── Bar filter di dalam header panel ikut lebar penuh ── */
    html .dash-body .portal-section-header > :is(.portal-local-filters, .lk-header-filters, .vul-header-filters),
    html .dash-body .mgmt-panel-header > .portal-local-filters {
        width: 100%;
        flex: 1 1 100%;
    }
    html .dash-body .mgmt-panel-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* ── Bar filter: flex-wrap rapat, bukan kolom ── */
    html .dash-body :is(.portal-local-filters, .lk-header-filters, .vul-header-filters) {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 0;
    }
    /* Pemisah baris: Pilih + Per halaman selalu di baris sendiri setelah filter */
    html .dash-body :is(.portal-local-filters, .lk-header-filters, .vul-header-filters)::after {
        content: '';
        order: 2;
        flex: 0 0 100%;
        height: 0;
        margin-bottom: -8px;
    }
    /* Tanpa tombol Pilih (non-superadmin) → Per halaman sebaris dengan filter terakhir */
    html .dash-body :is(.portal-local-filters, .lk-header-filters, .vul-header-filters):not(:has(> [class*="bulk-actions-wrap"]))::after {
        display: none;
    }
    html .dash-body :is(.portal-local-filters, .lk-header-filters, .vul-header-filters) > .admin-search-wrap {
        order: -1;
        flex: 1 1 100%;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
    }
    html .dash-body :is(.portal-local-filters, .lk-header-filters, .vul-header-filters) > :is(.admin-filter-input, .ppm-status-wrap, .bbm-portal-date-range) {
        order: 1;
        flex: 1 1 calc(50% - 4px);
        width: auto;
        min-width: 0;
        max-width: none;
    }
    html .dash-body :is(.portal-local-filters, .lk-header-filters, .vul-header-filters) > .ppm-status-wrap > select {
        width: 100%;
        max-width: none;
        min-width: 0;
    }
    html .dash-body :is(.portal-local-filters, .lk-header-filters, .vul-header-filters) > [class*="bulk-actions-wrap"] {
        order: 3;
        flex: 0 0 auto;
        width: auto;
    }
    html .dash-body :is(.portal-local-filters, .lk-header-filters, .vul-header-filters) > .tbl-per-page {
        order: 4;
        flex: 0 0 auto;
        width: auto;
        margin-left: auto;
        padding-top: 0;
        border-top: 0;
        justify-content: flex-end;
    }
    html .dash-body :is(.portal-local-filters, .lk-header-filters, .vul-header-filters) > .admin-filter-reset {
        order: 5;
        flex: 0 0 auto;
    }
    html .dash-body :is(.portal-local-filters, .lk-header-filters, .vul-header-filters) > :is(a, .btn, .bbm-portal-filter-actions):not(.admin-filter-reset, .mgmt-ph-add-btn) {
        order: 6;
        flex: 1 1 100%;
        justify-content: center;
    }
    /* Tombol Tambah (manajemen) sebaris dengan Per halaman */
    html .dash-body :is(.portal-local-filters, .lk-header-filters, .vul-header-filters) > .mgmt-ph-add-btn {
        order: 3;
        flex: 1 1 auto;
        width: auto;
        margin: 0;
    }

    /* ── Grup tombol aksi di header (mis. Export Excel + Buat Log) → sebaris, lebar sama ── */
    html .dash-body .portal-section-header > div:not(.portal-section-title, .portal-local-filters, .lk-header-filters, .vul-header-filters):has(> :is(a, button)) {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100%;
        gap: 8px;
    }
    html .dash-body .portal-section-header > div:not(.portal-section-title, .portal-local-filters, .lk-header-filters, .vul-header-filters):has(> :is(a, button)) > :is(a, button) {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        white-space: nowrap;
        padding-left: 10px;
        padding-right: 10px;
    }

    /* ── Baris "belum ada data" di tabel mode kartu: teks utuh di tengah ── */
    html .dash-body .admin-table td.portal-empty {
        display: block;
        text-align: center;
        padding: 20px 8px !important;
    }

    /* ── Sub-tab tabel (Semua Data / Exterior / …) satu baris ── */
    html .dash-body .admin-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        gap: 4px;
        margin-bottom: 0;
    }
    html .dash-body .admin-tabs::-webkit-scrollbar { display: none; }
    html .dash-body .admin-tab {
        flex: 1 0 auto;
        padding: 8px 10px;
        font-size: 0.74rem;
        white-space: nowrap;
        text-align: center;
    }
}

.hover\:border-gray-300:hover {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.hover\:bg-gray-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.hover\:bg-neutral-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}

.hover\:bg-neutral-200:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(229 229 229 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white\/50:hover {
    background-color: rgb(255 255 255 / 0.5);
}

.hover\:text-blue-500:hover {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-400:hover {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-500:hover {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-700:hover {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-800:hover {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-900:hover {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover {
    text-decoration-line: underline;
}

.focus\:border-blue-300:focus {
    --tw-border-opacity: 1;
    border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}

.focus\:border-gray-300:focus {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.focus\:border-indigo-500:focus {
    --tw-border-opacity: 1;
    border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
}

.focus\:border-indigo-700:focus {
    --tw-border-opacity: 1;
    border-color: rgb(67 56 202 / var(--tw-border-opacity, 1));
}

.focus\:bg-gray-100:focus {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.focus\:bg-gray-50:focus {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.focus\:bg-gray-700:focus {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.focus\:bg-indigo-100:focus {
    --tw-bg-opacity: 1;
    background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}

.focus\:text-gray-500:focus {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.focus\:text-gray-700:focus {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.focus\:text-gray-800:focus {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.focus\:text-indigo-800:focus {
    --tw-text-opacity: 1;
    color: rgb(55 48 163 / var(--tw-text-opacity, 1));
}

.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.focus\:ring:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-2:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-indigo-500:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1));
}

.focus\:ring-red-500:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
}

.focus\:ring-offset-2:focus {
    --tw-ring-offset-width: 2px;
}

.active\:bg-gray-100:active {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.active\:bg-gray-900:active {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}

.active\:bg-red-700:active {
    --tw-bg-opacity: 1;
    background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}

.active\:text-gray-500:active {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.active\:text-gray-700:active {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.active\:text-gray-800:active {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.disabled\:opacity-25:disabled {
    opacity: 0.25;
}

.group:hover .group-hover\:text-blue-500 {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {

    .sm\:-my-px {
        margin-top: -1px;
        margin-bottom: -1px;
    }

    .sm\:mx-auto {
        margin-left: auto;
        margin-right: auto;
    }

    .sm\:mb-16 {
        margin-bottom: 4rem;
    }

    .sm\:ms-10 {
        margin-inline-start: 2.5rem;
    }

    .sm\:ms-6 {
        margin-inline-start: 1.5rem;
    }

    .sm\:flex {
        display: flex;
    }

    .sm\:hidden {
        display: none;
    }

    .sm\:w-full {
        width: 100%;
    }

    .sm\:max-w-2xl {
        max-width: 42rem;
    }

    .sm\:max-w-lg {
        max-width: 32rem;
    }

    .sm\:max-w-md {
        max-width: 28rem;
    }

    .sm\:max-w-sm {
        max-width: 24rem;
    }

    .sm\:max-w-xl {
        max-width: 36rem;
    }

    .sm\:flex-1 {
        flex: 1 1 0%;
    }

    .sm\:translate-y-0 {
        --tw-translate-y: 0px;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

    .sm\:scale-100 {
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

    .sm\:scale-95 {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

    .sm\:items-center {
        align-items: center;
    }

    .sm\:justify-start {
        justify-content: flex-start;
    }

    .sm\:justify-between {
        justify-content: space-between;
    }

    .sm\:gap-2 {
        gap: 0.5rem;
    }

    .sm\:rounded-lg {
        border-radius: 0.5rem;
    }

    .sm\:p-14 {
        padding: 3.5rem;
    }

    .sm\:p-8 {
        padding: 2rem;
    }

    .sm\:px-0 {
        padding-left: 0px;
        padding-right: 0px;
    }

    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .sm\:py-0 {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .sm\:pb-0 {
        padding-bottom: 0px;
    }

    .sm\:pt-0 {
        padding-top: 0px;
    }

    .sm\:pt-16 {
        padding-top: 4rem;
    }
}

@media (min-width: 768px) {

    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .md\:text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }
}

@media (min-width: 1024px) {

    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.ltr\:origin-top-left:where([dir="ltr"], [dir="ltr"] *) {
    transform-origin: top left;
}

.ltr\:origin-top-right:where([dir="ltr"], [dir="ltr"] *) {
    transform-origin: top right;
}

.rtl\:origin-top-left:where([dir="rtl"], [dir="rtl"] *) {
    transform-origin: top left;
}

.rtl\:origin-top-right:where([dir="rtl"], [dir="rtl"] *) {
    transform-origin: top right;
}

.rtl\:flex-row-reverse:where([dir="rtl"], [dir="rtl"] *) {
    flex-direction: row-reverse;
}

@media (prefers-color-scheme: dark) {

    .dark\:divide-white\/10 > :not([hidden]) ~ :not([hidden]) {
        border-color: rgb(255 255 255 / 0.1);
    }

    .dark\:divide-white\/5 > :not([hidden]) ~ :not([hidden]) {
        border-color: rgb(255 255 255 / 0.05);
    }

    .dark\:border {
        border-width: 1px;
    }

    .dark\:border-none {
        border-style: none;
    }

    .dark\:border-amber-500 {
        --tw-border-opacity: 1;
        border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
    }

    .dark\:border-amber-800 {
        --tw-border-opacity: 1;
        border-color: rgb(146 64 14 / var(--tw-border-opacity, 1));
    }

    .dark\:border-blue-600 {
        --tw-border-opacity: 1;
        border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
    }

    .dark\:border-blue-800 {
        --tw-border-opacity: 1;
        border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
    }

    .dark\:border-emerald-500 {
        --tw-border-opacity: 1;
        border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
    }

    .dark\:border-emerald-600 {
        --tw-border-opacity: 1;
        border-color: rgb(5 150 105 / var(--tw-border-opacity, 1));
    }

    .dark\:border-gray-600 {
        --tw-border-opacity: 1;
        border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    }

    .dark\:border-neutral-500 {
        --tw-border-opacity: 1;
        border-color: rgb(115 115 115 / var(--tw-border-opacity, 1));
    }

    .dark\:border-neutral-700 {
        --tw-border-opacity: 1;
        border-color: rgb(64 64 64 / var(--tw-border-opacity, 1));
    }

    .dark\:border-neutral-800 {
        --tw-border-opacity: 1;
        border-color: rgb(38 38 38 / var(--tw-border-opacity, 1));
    }

    .dark\:border-rose-500 {
        --tw-border-opacity: 1;
        border-color: rgb(244 63 94 / var(--tw-border-opacity, 1));
    }

    .dark\:border-rose-900 {
        --tw-border-opacity: 1;
        border-color: rgb(136 19 55 / var(--tw-border-opacity, 1));
    }

    .dark\:border-white\/10 {
        border-color: rgb(255 255 255 / 0.1);
    }

    .dark\:border-white\/20 {
        border-color: rgb(255 255 255 / 0.2);
    }

    .dark\:border-white\/5 {
        border-color: rgb(255 255 255 / 0.05);
    }

    .dark\:border-white\/\[9\%\] {
        border-color: rgb(255 255 255 / 9%);
    }

    .dark\:bg-\[\#1a1a1a\] {
        --tw-bg-opacity: 1;
        background-color: rgb(26 26 26 / var(--tw-bg-opacity, 1));
    }

    .dark\:bg-amber-600 {
        --tw-bg-opacity: 1;
        background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
    }

    .dark\:bg-amber-950 {
        --tw-bg-opacity: 1;
        background-color: rgb(69 26 3 / var(--tw-bg-opacity, 1));
    }

    .dark\:bg-blue-700 {
        --tw-bg-opacity: 1;
        background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
    }

    .dark\:bg-blue-950 {
        --tw-bg-opacity: 1;
        background-color: rgb(23 37 84 / var(--tw-bg-opacity, 1));
    }

    .dark\:bg-emerald-600 {
        --tw-bg-opacity: 1;
        background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
    }

    .dark\:bg-emerald-900\/70 {
        background-color: rgb(6 78 59 / 0.7);
    }

    .dark\:bg-gray-700 {
        --tw-bg-opacity: 1;
        background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    }

    .dark\:bg-gray-800 {
        --tw-bg-opacity: 1;
        background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
    }

    .dark\:bg-neutral-600 {
        --tw-bg-opacity: 1;
        background-color: rgb(82 82 82 / var(--tw-bg-opacity, 1));
    }

    .dark\:bg-neutral-800 {
        --tw-bg-opacity: 1;
        background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
    }

    .dark\:bg-neutral-900 {
        --tw-bg-opacity: 1;
        background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
    }

    .dark\:bg-rose-600 {
        --tw-bg-opacity: 1;
        background-color: rgb(225 29 72 / var(--tw-bg-opacity, 1));
    }

    .dark\:bg-rose-950 {
        --tw-bg-opacity: 1;
        background-color: rgb(76 5 25 / var(--tw-bg-opacity, 1));
    }

    .dark\:bg-transparent {
        background-color: transparent;
    }

    .dark\:bg-white {
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    }

    .dark\:bg-white\/10 {
        background-color: rgb(255 255 255 / 0.1);
    }

    .dark\:bg-white\/5 {
        background-color: rgb(255 255 255 / 0.05);
    }

    .dark\:bg-white\/\[2\%\] {
        background-color: rgb(255 255 255 / 2%);
    }

    .dark\:bg-white\/\[3\%\] {
        background-color: rgb(255 255 255 / 3%);
    }

    .dark\:text-amber-300 {
        --tw-text-opacity: 1;
        color: rgb(252 211 77 / var(--tw-text-opacity, 1));
    }

    .dark\:text-blue-300 {
        --tw-text-opacity: 1;
        color: rgb(147 197 253 / var(--tw-text-opacity, 1));
    }

    .dark\:text-emerald-400 {
        --tw-text-opacity: 1;
        color: rgb(52 211 153 / var(--tw-text-opacity, 1));
    }

    .dark\:text-emerald-500 {
        --tw-text-opacity: 1;
        color: rgb(16 185 129 / var(--tw-text-opacity, 1));
    }

    .dark\:text-gray-200 {
        --tw-text-opacity: 1;
        color: rgb(229 231 235 / var(--tw-text-opacity, 1));
    }

    .dark\:text-gray-300 {
        --tw-text-opacity: 1;
        color: rgb(209 213 219 / var(--tw-text-opacity, 1));
    }

    .dark\:text-gray-400 {
        --tw-text-opacity: 1;
        color: rgb(156 163 175 / var(--tw-text-opacity, 1));
    }

    .dark\:text-gray-600 {
        --tw-text-opacity: 1;
        color: rgb(75 85 99 / var(--tw-text-opacity, 1));
    }

    .dark\:text-neutral-100 {
        --tw-text-opacity: 1;
        color: rgb(245 245 245 / var(--tw-text-opacity, 1));
    }

    .dark\:text-neutral-200 {
        --tw-text-opacity: 1;
        color: rgb(229 229 229 / var(--tw-text-opacity, 1));
    }

    .dark\:text-neutral-300 {
        --tw-text-opacity: 1;
        color: rgb(212 212 212 / var(--tw-text-opacity, 1));
    }

    .dark\:text-neutral-400 {
        --tw-text-opacity: 1;
        color: rgb(163 163 163 / var(--tw-text-opacity, 1));
    }

    .dark\:text-neutral-500 {
        --tw-text-opacity: 1;
        color: rgb(115 115 115 / var(--tw-text-opacity, 1));
    }

    .dark\:text-neutral-600 {
        --tw-text-opacity: 1;
        color: rgb(82 82 82 / var(--tw-text-opacity, 1));
    }

    .dark\:text-neutral-900 {
        --tw-text-opacity: 1;
        color: rgb(23 23 23 / var(--tw-text-opacity, 1));
    }

    .dark\:text-rose-100 {
        --tw-text-opacity: 1;
        color: rgb(255 228 230 / var(--tw-text-opacity, 1));
    }

    .dark\:text-slate-100 {
        --tw-text-opacity: 1;
        color: rgb(241 245 249 / var(--tw-text-opacity, 1));
    }

    .dark\:text-slate-400 {
        --tw-text-opacity: 1;
        color: rgb(148 163 184 / var(--tw-text-opacity, 1));
    }

    .dark\:text-slate-500 {
        --tw-text-opacity: 1;
        color: rgb(100 116 139 / var(--tw-text-opacity, 1));
    }

    .dark\:text-white {
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    }

    .dark\:hover\:bg-gray-900:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
    }

    .dark\:hover\:bg-white\/10:hover {
        background-color: rgb(255 255 255 / 0.1);
    }

    .hover\:dark\:bg-white\/5:hover {
        background-color: rgb(255 255 255 / 0.05);
    }

    .dark\:hover\:text-emerald-500:hover {
        --tw-text-opacity: 1;
        color: rgb(16 185 129 / var(--tw-text-opacity, 1));
    }

    .dark\:hover\:text-gray-200:hover {
        --tw-text-opacity: 1;
        color: rgb(229 231 235 / var(--tw-text-opacity, 1));
    }

    .dark\:hover\:text-gray-300:hover {
        --tw-text-opacity: 1;
        color: rgb(209 213 219 / var(--tw-text-opacity, 1));
    }

    .hover\:dark\:text-white:hover {
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    }

    .dark\:focus\:border-blue-700:focus {
        --tw-border-opacity: 1;
        border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
    }

    .dark\:focus\:border-blue-800:focus {
        --tw-border-opacity: 1;
        border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
    }

    .dark\:active\:bg-gray-700:active {
        --tw-bg-opacity: 1;
        background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    }

    .dark\:active\:text-gray-300:active {
        --tw-text-opacity: 1;
        color: rgb(209 213 219 / var(--tw-text-opacity, 1));
    }

    .group:hover .group-hover\:dark\:text-emerald-500 {
        --tw-text-opacity: 1;
        color: rgb(16 185 129 / var(--tw-text-opacity, 1));
    }
}

.\[\&_svg\]\:size-2\.5 svg {
    width: 0.625rem;
    height: 0.625rem;
}

.\[\&_svg\]\:\!text-white svg {
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

@media (prefers-color-scheme: dark) {

    .dark\:\[\&_svg\]\:\!text-white svg {
        --tw-text-opacity: 1 !important;
        color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
    }
}