*,
::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: Inter, sans-serif;
  /* 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;
}

.\!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;
  }
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.bottom-2 {
  bottom: 0.5rem;
}

.left-3 {
  left: 0.75rem;
}

.right-0 {
  right: 0px;
}

.right-2 {
  right: 0.5rem;
}

.top-0 {
  top: 0px;
}

.top-1\/2 {
  top: 50%;
}

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

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

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

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

.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.-mt-10 {
  margin-top: -2.5rem;
}

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

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

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

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

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

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

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

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

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

.mr-1 {
  margin-right: 0.25rem;
}

.mr-1\.5 {
  margin-right: 0.375rem;
}

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

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

.mt-1\.5 {
  margin-top: 0.375rem;
}

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

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

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

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

.block {
  display: block;
}

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

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.h-10 {
  height: 2.5rem;
}

.h-12 {
  height: 3rem;
}

.h-20 {
  height: 5rem;
}

.h-24 {
  height: 6rem;
}

.h-48 {
  height: 12rem;
}

.h-8 {
  height: 2rem;
}

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

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

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

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

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

.w-10 {
  width: 2.5rem;
}

.w-12 {
  width: 3rem;
}

.w-20 {
  width: 5rem;
}

.w-48 {
  width: 12rem;
}

.w-56 {
  width: 14rem;
}

.w-8 {
  width: 2rem;
}

.w-80 {
  width: 20rem;
}

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

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

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

.w-full {
  width: 100%;
}

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

.max-w-xs {
  max-width: 20rem;
}

.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;
}

.-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-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-2 {
  --tw-translate-y: 0.5rem;
  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-pointer {
  cursor: pointer;
}

.resize {
  resize: both;
}

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

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

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

.grid-cols-3 {
  grid-template-columns: repeat(3, 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;
}

.gap-2 {
  gap: 0.5rem;
}

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

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.space-y-3> :not([hidden])~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-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-gray-100> :not([hidden])~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1));
}

.overflow-hidden {
  overflow: hidden;
}

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

.whitespace-nowrap {
  white-space: nowrap;
}

.rounded {
  border-radius: 0.25rem;
}

.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-xl {
  border-bottom-right-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}

.rounded-t-lg {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.rounded-t-xl {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

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

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

.border {
  border-width: 1px;
}

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

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

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

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

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

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

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

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

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

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

.border-amber-500 {
  --tw-border-opacity: 1;
  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}

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

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

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

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

.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-transparent {
  border-color: transparent;
}

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

.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}

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

.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

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

.bg-cyan-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 254 255 / var(--tw-bg-opacity, 1));
}

.bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}

.bg-emerald-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}

.bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / 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-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}

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

.bg-gray-50\/50 {
  background-color: rgb(249 250 251 / 0.5);
}

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

.bg-orange-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}

.bg-orange-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}

.bg-pink-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(253 242 248 / var(--tw-bg-opacity, 1));
}

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

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

.bg-teal-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 250 / 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-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-amber-500 {
  --tw-gradient-from: #f59e0b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-500 {
  --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-emerald-500 {
  --tw-gradient-from: #10b981 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-indigo-500 {
  --tw-gradient-from: #6366f1 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-pink-500 {
  --tw-gradient-from: #ec4899 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(236 72 153 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-rose-500 {
  --tw-gradient-from: #f43f5e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(244 63 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-violet-500 {
  --tw-gradient-from: #8b5cf6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(139 92 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-blue-600 {
  --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
}

.to-cyan-600 {
  --tw-gradient-to: #0891b2 var(--tw-gradient-to-position);
}

.to-indigo-600 {
  --tw-gradient-to: #4f46e5 var(--tw-gradient-to-position);
}

.to-orange-600 {
  --tw-gradient-to: #ea580c var(--tw-gradient-to-position);
}

.to-pink-600 {
  --tw-gradient-to: #db2777 var(--tw-gradient-to-position);
}

.to-purple-600 {
  --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
}

.to-rose-600 {
  --tw-gradient-to: #e11d48 var(--tw-gradient-to-position);
}

.to-teal-600 {
  --tw-gradient-to: #0d9488 var(--tw-gradient-to-position);
}

.object-cover {
  -o-object-fit: cover;
  object-fit: cover;
}

.p-0 {
  padding: 0px;
}

.p-1 {
  padding: 0.25rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

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

.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;
}

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

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

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

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

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

.pt-0 {
  padding-top: 0px;
}

.pt-5 {
  padding-top: 1.25rem;
}

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

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

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

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

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

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

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

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

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

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

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

.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;
}

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

.font-extrabold {
  font-weight: 800;
}

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

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

.uppercase {
  text-transform: uppercase;
}

.italic {
  font-style: italic;
}

.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-relaxed {
  line-height: 1.625;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

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

.text-amber-500 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}

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

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

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

.text-cyan-500 {
  --tw-text-opacity: 1;
  color: rgb(6 182 212 / var(--tw-text-opacity, 1));
}

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

.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / 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-indigo-500 {
  --tw-text-opacity: 1;
  color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}

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

.text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}

.text-pink-500 {
  --tw-text-opacity: 1;
  color: rgb(236 72 153 / var(--tw-text-opacity, 1));
}

.text-purple-500 {
  --tw-text-opacity: 1;
  color: rgb(168 85 247 / var(--tw-text-opacity, 1));
}

.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.text-teal-500 {
  --tw-text-opacity: 1;
  color: rgb(20 184 166 / 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;
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.opacity-40 {
  opacity: 0.4;
}

.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);
}

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

.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);
}

.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;
}

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

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

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

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

@font-face {
  font-family: 'Inter';

  font-style: normal;

  font-weight: 400;

  font-display: swap;

  src: url('../fonts/inter-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';

  font-style: normal;

  font-weight: 500;

  font-display: swap;

  src: url('../fonts/inter-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';

  font-style: normal;

  font-weight: 600;

  font-display: swap;

  src: url('../fonts/inter-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';

  font-style: normal;

  font-weight: 700;

  font-display: swap;

  src: url('../fonts/inter-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Outfit';

  font-style: normal;

  font-weight: 400;

  font-display: swap;

  src: url('../fonts/outfit-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Outfit';

  font-style: normal;

  font-weight: 500;

  font-display: swap;

  src: url('../fonts/outfit-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Outfit';

  font-style: normal;

  font-weight: 600;

  font-display: swap;

  src: url('../fonts/outfit-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Outfit';

  font-style: normal;

  font-weight: 700;

  font-display: swap;

  src: url('../fonts/outfit-700.woff2') format('woff2');
}

/* ══════════════════════════════════════════════════════
   LOG UI — Custom Styles (extends TailwindCSS)
   ══════════════════════════════════════════════════════ */

/* ══════ Global: prevent double scrollbar ══════ */

html,
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════
   Utility Classes — Spacing, Page Header
   ══════════════════════════════════════════════════════ */

/* ── Page Header (consistent across all pages) ── */

.page-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

@media (min-width: 640px) {
  .page-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
  }
}

.page-title {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.025em;
}

.dark .page-title {
  color: #fff;
}

@media (min-width: 1024px) {
  .page-title {
    font-size: 24px;
  }
}

.page-subtitle {
  font-size: 14px;
  color: #6b7280;
  margin-top: 4px;
}

.dark .page-subtitle {
  color: #9ca3af;
}

/* ── Card Buttons (reusable for card.php etc.) ── */

.btn-card {
  padding: 8px 16px;
  background: #3b82f6;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-card:hover {
  background: #2563eb;
}

.btn-card-outline {
  padding: 8px 16px;
  background: #fff;
  border: 1px solid #d1d5db;
  color: #374151;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dark .btn-card-outline {
  background: #1a1d24;
  border-color: #4b5563;
  color: #d1d5db;
}

.btn-card-outline:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.dark .btn-card-outline:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #6b7280;
}

/* ══════ Preloader ══════ */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f0f2f5;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.dark .preloader {
  background: #0b0d10;
}

.preloader.preloader-hidden {
  opacity: 0;
  visibility: hidden;
}

.preloader-spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #000000;
  border-right-color: #333333;
  animation: preloaderSpin 0.8s linear infinite;
  margin-bottom: 20px;
}

@keyframes preloaderSpin {
  to {
    transform: rotate(360deg);
  }
}

.preloader-logo {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #333333, #333333, #666666);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: preloaderPulse 1.5s ease-in-out infinite;
}

@keyframes preloaderPulse {

  0%,
  100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }
}

/* ══════ Custom Scrollbar (global) ══════ */

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.08);
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.15);
}

.custom-scrollbar {
  scrollbar-width: thin;
}

.dark .custom-scrollbar {
  scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}

.custom-scrollbar {
  scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
}

/* Thin scrollbar for sidebar nav */

.scrollbar-thin::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.06);
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.12);
}

.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.06) transparent;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ══════ Sidebar Tooltip (JS-positioned, fixed) ══════ */

.sidebar-tooltip {
  position: fixed;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 600;
  background: #1e293b;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  transform: translateX(-6px);
  display: none;
}

.sidebar-tooltip.show {
  display: block;
  opacity: 1;
  transform: translateX(0);
}

.sidebar-tooltip::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: #1e293b;
}

/* Hide tooltips when sidebar is expanded */

.sidebar-expanded .sidebar-tooltip {
  display: none !important;
}

/* ══════ Portal Submenu Panels (floating, theme-aware) ══════ */

.submenu-portal {
  position: fixed;
  z-index: 500;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.submenu-panel {
  border-radius: 14px;
  padding: 8px;
  min-width: 220px;
}

@keyframes submenuFadeIn {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }

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

.submenu-header {
  padding: 8px 14px 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.submenu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}

.submenu-item i {
  min-width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.submenu-item.active-child {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
}

/* Level 3 child panel */

.submenu-child-panel {
  position: fixed;
  z-index: 510;
  border-radius: 14px;
  padding: 8px;
  min-width: 200px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.submenu-child-panel i {
  min-width: 18px;
  text-align: center;
  flex-shrink: 0;
}

/* ══════ Sidebar expand state ══════ */

.sidebar-expanded {
  width: 260px !important;
}

.sidebar-expanded .sidebar-text {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.sidebar-expanded .sidebar-arrow {
  opacity: 0.5 !important;
}

.sidebar-expanded .menu-label-text {
  opacity: 1 !important;
  font-size: 10px !important;
  text-align: left !important;
}

.sidebar-expanded .toggle-icon {
  transform: rotate(180deg);
}

/* Sidebar text hidden by default (collapsed) */

.sidebar-text {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}

.sidebar-arrow {
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.3s ease;
  margin-left: auto;
}

.menu-label-text {
  opacity: 1;
  transition: opacity 0.2s ease, font-size 0.2s ease;
  font-size: 8px;
  text-align: center;
  display: block;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

/* ══════ Mobile Sidebar (Portrait Only) ══════ */

@media (max-width: 767px) and (orientation: portrait) {
  .sidebar {
    will-change: transform;
  }

  .sidebar-mobile-open {
    transform: translate3d(0, 0, 0) !important;
    width: 260px !important;
  }

  .sidebar-mobile-open .sidebar-text {
    opacity: 1 !important;
    transform: translateX(0) !important;
  }

  .sidebar-mobile-open .sidebar-arrow {
    opacity: 0.5 !important;
  }

  .sidebar-mobile-open .menu-label-text {
    opacity: 1 !important;
    font-size: 10px !important;
    text-align: left !important;
  }

  /* Hide sidebar toggle button on mobile portrait (bottom nav replaces it) */
  .sidebar-toggle-wrap {
    display: none;
  }
}

/* Tablet portrait: same sidebar-mobile-open behavior */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .sidebar {
    transform: translate3d(-100%, 0, 0) !important;
    pointer-events: none;
    border-radius: 0 !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    will-change: transform;
  }

  .sidebar.sidebar-mobile-open {
    transform: translate3d(0, 0, 0) !important;
    width: 260px !important;
    pointer-events: auto;
  }

  .sidebar.sidebar-mobile-open .sidebar-text {
    opacity: 1 !important;
    transform: translateX(0) !important;
  }

  .sidebar.sidebar-mobile-open .sidebar-arrow {
    opacity: 0.5 !important;
  }

  .sidebar.sidebar-mobile-open .menu-label-text {
    opacity: 1 !important;
    font-size: 10px !important;
    text-align: left !important;
  }

  .sidebar-toggle-wrap {
    display: none;
  }

  /* Reset main content wrapper for portrait tablet */
  .main-content-wrapper {
    margin-left: 0 !important;
    padding-left: 16px !important;
  }
}

/* ══════ Floating Bottom Navigation Bar (Portrait Only) ══════ */

/* Agar variabel --notch-x bisa di-animasikan (geser halus) */
@property --notch-x {
  syntax: '<length-percentage>';
  inherits: true;
  initial-value: 50%;
}

.mobile-bottom-nav {
  display: none;
}

@media (max-width: 1024px) and (orientation: portrait) {
  .mobile-bottom-nav {
    position: fixed;
    bottom: 16px;
    left: 24px;
    right: 24px;
    z-index: 45;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    height: 60px;
    border-radius: 30px;
    background: transparent;
    box-shadow: none;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
      --notch-x 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: visible;
    padding: 0;
    --notch-x: 50%;
    will-change: transform, opacity;
  }

  .dark .mobile-bottom-nav {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: none;
  }


  .mobile-bottom-nav {
    isolation: isolate;
    --notch-size: 60px;
    --notch-top: -20px;
    --notch-stroke: rgba(17, 24, 39, 0);
  }

  .mobile-bottom-nav::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 30px;
    background: #fcfcfc;
    z-index: -1;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow:
      0 8px 40px rgba(0, 0, 0, 0.1),
      0 2px 10px rgba(0, 0, 0, 0.05);

    -webkit-mask-image: radial-gradient(circle at var(--notch-x) 10px, transparent 28px, black 29px);
    mask-image: radial-gradient(circle at var(--notch-x) 10px, transparent 28px, black 29px);
  }

  .dark .mobile-bottom-nav::before {
    display: block;
    background: rgba(26, 29, 36, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
      0 8px 40px rgba(0, 0, 0, 0.4),
      0 2px 10px rgba(0, 0, 0, 0.2);

    -webkit-mask-image: radial-gradient(circle at var(--notch-x) 10px, transparent 28px, black 29px);
    mask-image: radial-gradient(circle at var(--notch-x) 10px, transparent 28px, black 29px);
  }

  /* DEKLARASI POSISI LUBANG NOTCH (Presisi 5 Kolom: 10%, 30%, 50%, 70%, 90%) */
  @supports selector(.mobile-bottom-nav:has(#bottomNavHome.active)) {
    .mobile-bottom-nav:has(#bottomNavMenu.active),
    .mobile-bottom-nav.nav-active-menu {
      --notch-x: 10%;
    }

    .mobile-bottom-nav:has(#bottomNavNotif.active),
    .mobile-bottom-nav.nav-active-notif {
      --notch-x: 30%;
    }

    .mobile-bottom-nav:has(#bottomNavHome.active),
    .mobile-bottom-nav.nav-active-home {
      --notch-x: 50%;
    }

    .mobile-bottom-nav:has(#bottomNavMessages.active),
    .mobile-bottom-nav.nav-active-messages {
      --notch-x: 70%;
    }

    .mobile-bottom-nav:has(#bottomNavProfile.active),
    .mobile-bottom-nav.nav-active-profile {
      --notch-x: 90%;
    }
  }

  /* Fallback class untuk browser yang belum support :has() */
  .mobile-bottom-nav.nav-active-menu { --notch-x: 10%; }
  .mobile-bottom-nav.nav-active-notif { --notch-x: 30%; }
  .mobile-bottom-nav.nav-active-home { --notch-x: 50%; }
  .mobile-bottom-nav.nav-active-messages { --notch-x: 70%; }
  .mobile-bottom-nav.nav-active-profile { --notch-x: 90%; }

  /* Footer tetap ada sebagai spacer tapi tulisan hilang (Portrait Only) */
  .app-footer {
    display: flex !important;
    min-height: 80px;
    border-top: none !important;
    background: transparent !important;
  }

  .app-footer * {
    display: none !important;
  }

  /* Ruang ekstra di bawah konten agar tidak tertutup navbar */
  .main-content {
    padding-bottom: 80px !important;
  }

  .mobile-bottom-nav.bottom-nav-hidden {
    transform: translateY(calc(100% + 30px));
    opacity: 0;
  }

  /* ── Nav items ── */
  .bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    min-width: 0;
    height: 60px;
    padding: 0 0 8px 0;
    margin: 0;
    box-sizing: border-box;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    color: #9ca3af;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.3s ease;
  }

  .dark .bottom-nav-item {
    color: #6b7280;
  }

  /* ── Dynamic Raised Blue Circle for Active Item (Presisi di Tengah) ── */
  .bottom-nav-item::before {
    content: '';
    position: absolute;
    top: -14px;
    left: calc(50% - 24px);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow:
      0 6px 16px rgba(59, 130, 246, 0.3),
      0 2px 6px rgba(59, 130, 246, 0.15);
    opacity: 0;
    transform: scale(0);
    transform-origin: center center;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
    z-index: 0;
    pointer-events: none;
  }

  .dark .bottom-nav-item::before {
    box-shadow:
      0 6px 16px rgba(59, 130, 246, 0.25),
      0 2px 6px rgba(59, 130, 246, 0.1);
  }

  .bottom-nav-item.active::before {
    transform: scale(1);
    opacity: 1;
  }

  .bottom-nav-item.active:active::before {
    transform: scale(0.92);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  }

  /* ── Icons ── */
  .bottom-nav-icon {
    font-size: 20px;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
  }

  /* When active, icon moves UP into the blue circle and turns white */
  .bottom-nav-item.active .bottom-nav-icon {
    transform: translateY(-13px);
    color: #fff !important;
  }

  .bottom-nav-item.active .relative {
    transform: translateY(-13px);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .bottom-nav-item.active .relative .bottom-nav-icon {
    transform: none;
  }

  /* ── Labels (Always Visible) ── */
  .bottom-nav-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    color: inherit;
    transition: color 0.3s ease, font-weight 0.3s ease;
  }

  /* Active label styling */
  .bottom-nav-item.active .bottom-nav-label {
    color: #3b82f6;
    font-weight: 700;
  }

  .dark .bottom-nav-item.active .bottom-nav-label {
    color: #60a5fa;
  }

  /* ── Notification badge ── */
  .bottom-nav-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 8px;
    background: #ef4444;
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
    z-index: 3;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .bottom-nav-item.active .bottom-nav-badge {
    transform: translateY(-13px);
  }

  /* ── Layout adjustments ── */
  .main-content-wrapper {
    /* padding-bottom removed so there is no empty grey space at the bottom */
  }

  .topbar-mobile-btn {
    display: none !important;
  }

  .sidebar-overlay {
    z-index: 46;
  }

  .sidebar {
    z-index: 47;
  }
}

/* ── Menu button active state ── */
@media (max-width: 1024px) and (orientation: portrait) {
  .bottom-nav-item#bottomNavMenu.menu-active {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
  }

  .dark .bottom-nav-item#bottomNavMenu.menu-active {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.08);
  }

  .bottom-nav-item#bottomNavMenu.menu-active .bottom-nav-icon {
    transform: rotate(90deg);
  }
}



/* ══════ Inline submenus (for expanded / mobile sidebar) ══════ */

.inline-submenu {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
  padding-left: 12px;
}

.inline-submenu .inline-submenu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 22px;
  margin: 1px 4px;
  border-radius: 8px;
  color: #6b7280;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}

.inline-submenu .inline-submenu-item:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #1f2937;
}

.dark .inline-submenu .inline-submenu-item {
  color: #9ca3af;
}

.dark .inline-submenu .inline-submenu-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #e5e7eb;
}

.inline-submenu .inline-submenu-item.active {
  color: #2563eb;
  font-weight: 600;
}

.dark .inline-submenu .inline-submenu-item.active {
  color: #60a5fa;
}

.inline-submenu .inline-submenu {
  padding-left: 14px;
}

/* ══════ DataTables Custom Theme ══════ */

.dataTables_wrapper {
  padding: 0 !important;
  font-family: 'Inter', sans-serif;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  padding: 16px 24px;
}

.dataTables_wrapper .dataTables_length {
  float: left;
}

.dataTables_wrapper .dataTables_filter {
  float: right;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dark .dataTables_wrapper .dataTables_length label,
.dark .dataTables_wrapper .dataTables_filter label {
  color: #94a3b8;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.dark .dataTables_wrapper .dataTables_length select,
.dark .dataTables_wrapper .dataTables_filter input {
  background: #0c0e14;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  color: #1e293b;
}

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.dataTables_wrapper table.dataTable {
  width: 100% !important;
  border-collapse: collapse;
}

.dataTables_wrapper table.dataTable thead th {
  padding: 12px 24px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
  border-top: none;
}

.dark .dataTables_wrapper table.dataTable thead th {
  background: rgba(0, 0, 0, 0.2);
  color: #64748b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dataTables_wrapper table.dataTable thead th {
  background: #f8fafc;
  color: #94a3b8;
  border-bottom: 1px solid #e5e7eb;
}

.dataTables_wrapper table.dataTable thead .sorting::after,
.dataTables_wrapper table.dataTable thead .sorting_asc::after,
.dataTables_wrapper table.dataTable thead .sorting_desc::after {
  opacity: 0.3;
}

.dataTables_wrapper table.dataTable thead .sorting_asc::after,
.dataTables_wrapper table.dataTable thead .sorting_desc::after {
  opacity: 0.8;
  color: #3b82f6;
}

.dataTables_wrapper table.dataTable tbody td {
  padding: 14px 24px;
  font-size: 13.5px;
  vertical-align: middle;
  transition: background 0.15s;
}

.dark .dataTables_wrapper table.dataTable tbody td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.dataTables_wrapper table.dataTable tbody td {
  border-bottom: 1px solid #f1f5f9;
}

.dark .dataTables_wrapper table.dataTable tbody tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.dataTables_wrapper table.dataTable tbody tr:hover td {
  background: #f8fafc;
}

.dataTables_wrapper table.dataTable tbody tr:last-child td,
.dataTables_wrapper table.dataTable tbody tr:last-child th,
table.dataTable tbody tr:last-child td,
table.dataTable tbody tr:last-child th {
  border-bottom: none !important;
}

/* Hilangkan Border Hitam / Garis Pemisah di Bawah Data Terakhir & di Atas Pagination */
table.dataTable,
table.dataTable.no-footer,
table.dataTable.display,
table.dataTable.row-border,
.dataTables_wrapper table.dataTable,
.dataTables_wrapper table.dataTable.no-footer,
.dataTables_wrapper.no-footer table.dataTable {
  border-bottom: none !important;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody,
.dataTables_wrapper div.dataTables_scrollBody,
.dataTables_scrollBody {
  border-bottom: none !important;
}

table.dataTable tfoot,
table.dataTable tfoot th,
table.dataTable tfoot td,
.dark table.dataTable tfoot,
.dark table.dataTable tfoot th,
.dark table.dataTable tfoot td {
  border-top: none !important;
  border-bottom: none !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  border-top: none !important;
}

/* Pagination */

.dataTables_wrapper .dataTables_info {
  padding: 16px 24px;
  font-size: 12px;
  float: left;
}

.dark .dataTables_wrapper .dataTables_info {
  color: #4b5563;
}

.dataTables_wrapper .dataTables_info {
  color: #94a3b8;
}

.dataTables_wrapper .dataTables_paginate {
  padding: 12px 24px;
  float: right;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 6px 12px;
  margin: 0 2px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent !important;
  background: none !important;
  cursor: pointer;
  transition: all 0.2s !important;
}

.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: #94a3b8 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: #64748b !important;
}

.dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #f1f5f9 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border-color: #e5e7eb !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #3b82f6 !important;
  color: #fff !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: 0.4;
  cursor: default;
}

.dataTables_bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dark .dataTables_bottom {
  border-top: none !important;
  background: rgba(0, 0, 0, 0.2);
}

.dataTables_bottom {
  border-top: none !important;
  background: #f8fafc;
}

.dataTables_bottom::after {
  display: none;
}

/* ══════════════════════════════════════════════════════
   Component Classes (Vanilla CSS — Sidebar, Topbar, Dropdowns)
   ══════════════════════════════════════════════════════ */

/* ── Sidebar ── */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 50;
  width: 72px;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.1);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), width 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  will-change: transform, width;
  transform: translate3d(0, 0, 0);
  background: #ffffff;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width, 0px) var(--tw-ring-offset-color, #fff);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width, 0px)) #e5e7eb;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 20px 60px -15px rgba(0, 0, 0, 0.1);
}

.dark .sidebar {
  background: #12141a;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width, 0px)) rgba(255, 255, 255, 0.05);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 20px 60px -15px rgba(0, 0, 0, 0.5);
}

@media (max-width: 767px) {
  .sidebar {
    transform: translate3d(-100%, 0, 0);
    pointer-events: none;
  }

  .sidebar.sidebar-mobile-open {
    transform: translate3d(0, 0, 0);
    width: 260px;
    pointer-events: auto;
  }

  .sidebar.sidebar-mobile-open .sidebar-text {
    opacity: 1;
    transform: translateX(0);
  }

  .sidebar.sidebar-mobile-open .sidebar-arrow {
    opacity: 0.5;
  }

  .sidebar.sidebar-mobile-open .menu-label-text {
    opacity: 1;
    font-size: 10px;
    text-align: left;
  }
}

@media (min-width: 768px) {
  .sidebar {
    border-radius: 15px;
    top: 16px;
    left: 16px;
    height: calc(100vh - 32px);
    transform: translateX(0);
  }
}

/* Portrait tablet: override the min-width:768px rule to hide sidebar */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .sidebar {
    transform: translateX(-100%) !important;
    pointer-events: none;
    border-radius: 0 !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
  }
}

.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 40;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, visibility;
}

.sidebar-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sidebar-logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 16px 5px;
  flex-shrink: 0;
}

.sidebar-logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 12px;
  background: linear-gradient(to bottom right, #2563eb, #4338ca);
  color: #fff;
  box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3);
  cursor: pointer;
  transition: transform 0.2s;
}

.sidebar-logo:hover {
  transform: scale(1.05);
}

.sidebar-logo i {
  font-size: 20px;
}

.sidebar-logo-title {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.025em;
}

.dark .sidebar-logo-title {
  color: #fff;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 0;
}

/* ── Menu sections ── */

.menu-section {
  padding: 6px 12px 2px;
  transition: padding 0.2s ease, margin 0.2s ease;
}

.menu-section:not(:first-child) {
  margin-top: 10px;
}

.sidebar-expanded .menu-section {
  padding: 10px 20px 8px;
}

.sidebar-expanded .menu-section:not(:first-child) {
  margin-top: 24px;
}

.menu-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #9ca3af;
}

.dark .menu-section-label {
  color: #4b5563;
}

/* ── Menu links ── */

.menu-item {
  padding: 0 8px;
}

.menu-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 5px;
  border-radius: 12px;
  transition: all 0.2s;
  color: #6b7280;
  text-decoration: none;
}

.dark .menu-link {
  color: #9ca3af;
}

.menu-link:hover {
  background: #f3f4f6;
  color: #111827;
}

.dark .menu-link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.menu-link.active {
  background: #eff6ff;
  color: #2563eb;
}

.dark .menu-link.active {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.menu-icon {
  font-size: 20px;
  min-width: 22px;
  text-align: center;
}

.menu-text {
  font-size: 13.5px;
  font-weight: 500;
  color: #374151;
}

.dark .menu-text {
  color: #d1d5db;
}

.menu-link.active .menu-text {
  color: #2563eb;
}

.dark .menu-link.active .menu-text {
  color: #60a5fa;
}

.menu-arrow {
  font-size: 12px;
  color: #9ca3af;
}

.dark .menu-arrow {
  color: #4b5563;
}

/* ── Sidebar toggle ── */

.sidebar-toggle-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 12px;
  flex-shrink: 0;
  border-top: 1px solid #f3f4f6;
}

.dark .sidebar-toggle-wrap {
  border-top-color: rgba(255, 255, 255, 0.05);
}

.sidebar-toggle-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all 0.2s;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  background: #111827;
  color: #fff;
  border: none;
  cursor: pointer;
}

.dark .sidebar-toggle-btn {
  background: #fff;
  color: #111827;
}

.sidebar-toggle-btn:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
  transform: scale(1.1);
}

.sidebar-toggle-btn:active {
  transform: scale(0.95);
}

@media (min-width: 768px) {
  .sidebar-toggle-btn {
    display: flex;
  }
}

.sidebar-toggle-icon {
  font-size: 16px;
  transition: transform 0.3s;
}

/* ── Submenu portal theme ── */

.submenu-panel-themed {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.dark .submenu-panel-themed {
  background: #12141a;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
}

.submenu-header-themed {
  color: #9ca3af;
}

.dark .submenu-header-themed {
  color: #4b5563;
}

.submenu-item-themed {
  color: #4b5563;
}

.dark .submenu-item-themed {
  color: #9ca3af;
}

.submenu-item-themed:hover {
  background: #f9fafb;
  color: #111827;
}

.dark .submenu-item-themed:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.submenu-item-icon {
  font-size: 16px;
}

.submenu-item-arrow {
  font-size: 12px;
  margin-left: auto;
  opacity: 0.5;
}

/* ══════ Topbar ══════ */

.topbar {
  flex-shrink: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 58px;
  transition: color 0.3s, background-color 0.3s, box-shadow 0.3s;
  background: #ffffff;
  border-radius: 16px;
  margin: 12px 16px 12px 16px;
  position: relative;
  overflow: visible;
  --tw-ring-shadow: 0 0 0 1px rgba(229, 231, 235, 0.65);
  box-shadow: var(--tw-ring-shadow, 0 0 #0000), 0 4px 20px -2px rgba(0, 0, 0, 0.05);
}

.dark .topbar {
  background: #16181d;
  --tw-ring-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
  box-shadow: var(--tw-ring-shadow, 0 0 #0000), 0 4px 20px -2px rgba(0, 0, 0, 0.25);
}

/* Portrait mobile/tablet footer adjustment */
@media (max-width: 1024px) and (orientation: portrait) {
  .app-footer {
    display: none !important;
  }
}

@media (min-width: 640px) {
  .topbar {
    padding: 0 20px;
  }
}

@media (min-width: 768px) {
  .topbar {
    height: 64px;
    padding: 0 24px;
    margin: 0 0 16px 0;
    border-radius: 15px;
    --tw-ring-shadow: 0 0 0 1px rgba(229, 231, 235, 0.5);
    box-shadow: var(--tw-ring-shadow, 0 0 #0000), 0 4px 30px -4px rgba(0, 0, 0, 0.05);
  }

  .dark .topbar {
    --tw-ring-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
    box-shadow: var(--tw-ring-shadow, 0 0 #0000), 0 4px 30px -4px rgba(0, 0, 0, 0.05);
  }
}

@media (min-width: 1024px) {
  .topbar {
    position: sticky;
    top: 16px;
    padding: 0 32px;
  }
}

.topbar-heading {
  color: #111827;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.dark .topbar-heading {
  color: #fff;
}

@media (min-width: 640px) {
  .topbar-heading {
    font-size: 20px;
  }
}

.topbar-subtitle {
  color: #6b7280;
  font-size: 11px;
  display: block;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.dark .topbar-subtitle {
  color: #9ca3af;
}

@media (min-width: 480px) {
  .topbar-subtitle {
    font-size: 12px;
    max-width: 240px;
  }
}

@media (min-width: 640px) {
  .topbar-subtitle {
    max-width: none;
  }
}

/* ── Topbar buttons ── */

.topbar-btn {
  padding: 8px;
  border-radius: 12px;
  transition: all 0.2s;
  color: #6b7280;
  background: none;
  border: none;
  cursor: pointer;
}

.dark .topbar-btn {
  color: #9ca3af;
}

.topbar-btn:hover {
  color: #111827;
  background: #f3f4f6;
}

.dark .topbar-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.topbar-mobile-btn {
  display: none;
  padding: 8px;
  margin-left: -8px;
  border-radius: 12px;
  color: #6b7280;
  transition: all 0.2s;
  background: none;
  border: none;
  cursor: pointer;
}

.dark .topbar-mobile-btn {
  color: #9ca3af;
}

.topbar-mobile-btn:hover {
  color: #111827;
  background: #f3f4f6;
}

.dark .topbar-mobile-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

@media (max-width: 767px) {
  .topbar-mobile-btn {
    display: block;
  }
}

/* ── Topbar search ── */

.topbar-search {
  display: none;
  align-items: center;
  border-radius: 8px;
  padding: 0 10px;
  height: 32px;
  border: 1px solid rgba(229, 231, 235, 0.6);
  transition: all 0.2s;
  width: 140px;
  background: #f9fafb;
}

.dark .topbar-search {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.05);
}

.topbar-search:focus-within {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

@media (min-width: 768px) {
  .topbar-search {
    display: flex;
  }
}

@media (min-width: 900px) {
  .topbar-search {
    width: 192px;
  }
}

@media (min-width: 1024px) {
  .topbar-search {
    width: 256px;
  }
}

.topbar-search-icon {
  font-size: 14px;
  color: #9ca3af;
}

.topbar-search-input {
  background: transparent !important;
  border: none;
  font-size: 13px;
  width: 100%;
  margin-left: 8px;
  padding: 0;
  color: #111827;
  outline: none;
  box-shadow: none !important;
}

.topbar-search-input::-moz-placeholder {
  color: #9ca3af;
}

.topbar-search-input::placeholder {
  color: #9ca3af;
}

.dark .topbar-search-input {
  color: #fff;
  background: transparent !important;
}

.topbar-search-input:focus {
  box-shadow: none !important;
  border: none;
  outline: none;
}

.topbar-search-kbd {
  font-size: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 2px 6px;
  font-family: monospace;
  color: #9ca3af;
  display: none;
}

.dark .topbar-search-kbd {
  border-color: rgba(255, 255, 255, 0.1);
}

@media (min-width: 1024px) {
  .topbar-search-kbd {
    display: inline;
  }
}

.topbar-divider {
  height: 24px;
  width: 1px;
  background: #e5e7eb;
  display: none;
}

.dark .topbar-divider {
  background: rgba(255, 255, 255, 0.1);
}

@media (min-width: 640px) {
  .topbar-divider {
    display: block;
  }
}

/* ── Topbar dropdowns ── */

.topbar-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 20px;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.2s;
  background: #fff;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.topbar-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (max-width: 480px) {
  .topbar-dropdown {
    position: fixed;
    left: 12px;
    right: 12px;
    top: 76px;
    width: auto;
    max-width: none;
  }
}

.dark .topbar-dropdown {
  background: #1a1d24;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid #f3f4f6;
}

.dark .dropdown-header {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.dropdown-header h4 {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.dark .dropdown-header h4 {
  color: #fff;
}

.dropdown-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 9999px;
}

.dropdown-badge-red {
  background: #fee2e2;
  color: #dc2626;
}

.dark .dropdown-badge-red {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.dropdown-badge-blue {
  background: #dbeafe;
  color: #2563eb;
}

.dark .dropdown-badge-blue {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.dropdown-body {
  max-height: 288px;
  overflow-y: auto;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  font-size: 14px;
  color: #4b5563;
  transition: all 0.15s;
  text-decoration: none;
}

.dark .dropdown-item {
  color: #d1d5db;
}

.dropdown-item:hover {
  background: #f9fafb;
  color: #111827;
}

.dark .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.dropdown-item-danger {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  font-size: 14px;
  color: #ef4444;
  transition: all 0.15s;
  text-decoration: none;
}

.dropdown-item-danger:hover {
  background: #fef2f2;
}

.dark .dropdown-item-danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

.dropdown-item-icon {
  font-size: 16px;
}

.dropdown-footer {
  padding: 12px 20px;
  border-top: 1px solid #f3f4f6;
}

.dark .dropdown-footer {
  border-top-color: rgba(255, 255, 255, 0.05);
}

.dropdown-footer a {
  font-size: 12px;
  font-weight: 600;
  color: #3b82f6;
  text-decoration: none;
  transition: color 0.15s;
}

.dropdown-footer a:hover {
  color: #2563eb;
}

/* ── Notification items ── */

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  transition: all 0.15s;
  text-decoration: none;
}

.notif-item:hover {
  background: #f9fafb;
}

.dark .notif-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.notif-icon {
  padding: 8px;
  border-radius: 12px;
  flex-shrink: 0;
  margin-top: 2px;
}

.notif-title {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dark .notif-title {
  color: #fff;
}

.notif-desc {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

.dark .notif-desc {
  color: #9ca3af;
}

.notif-time {
  font-size: 10px;
  color: #9ca3af;
  margin-top: 4px;
}

.dark .notif-time {
  color: #4b5563;
}

.notif-badge-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff;
}

.dark .notif-badge-dot {
  box-shadow: 0 0 0 2px #16181d;
}

/* ── Message items ── */

.msg-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  transition: all 0.15s;
  text-decoration: none;
}

.msg-item:hover {
  background: #f9fafb;
}

.dark .msg-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.msg-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.msg-status-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px;
}

.msg-name {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.dark .msg-name {
  color: #fff;
}

.msg-time {
  font-size: 10px;
  color: #9ca3af;
}

.msg-preview {
  font-size: 12px;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}

.dark .msg-preview {
  color: #9ca3af;
}

/* ── Profile button ── */

.profile-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 4px 4px;
  border-radius: 12px;
  transition: all 0.2s;
  cursor: pointer;
  background: none;
  border: none;
}

.profile-btn:hover {
  background: #f3f4f6;
}

.dark .profile-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

.profile-avatar {
  height: 36px;
  width: 36px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px #e5e7eb;
}

.dark .profile-avatar {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.profile-status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff;
}

.dark .profile-status-dot {
  box-shadow: 0 0 0 2px #16181d;
}

.profile-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: #111827;
  display: none;
}

.dark .profile-name {
  color: #fff;
}

@media (min-width: 1024px) {
  .profile-name {
    display: block;
  }
}

.profile-role {
  font-size: 11px;
  line-height: 1.25;
  color: #9ca3af;
  display: none;
}

@media (min-width: 1024px) {
  .profile-role {
    display: block;
  }
}

.profile-chevron {
  font-size: 14px;
  color: #9ca3af;
  transition: transform 0.2s;
  display: none;
}

@media (min-width: 1024px) {
  .profile-chevron {
    display: block;
  }
}

/* ══════════════════════════════════════════════════════
   Dashboard Page Components
   ══════════════════════════════════════════════════════ */

/* ── Main scrollable content ── */

.main-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 16px;
  padding-right: 16px;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .main-content {
    padding-left: 0;
    padding-right: 16px;
  }
}

/* ── Inner page content (pushes footer down) ── */
.main-content>*:not(.app-footer) {
  flex-shrink: 0;
}

/* ── Stat card grid: uses .row + .col-6 .col-lg-3 ── */

/* ── Stat card ── */

.stat-card {
  background: #fff;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 2px 10px -4px rgba(0, 0, 0, 0.05);
  border: 1px solid #f3f4f6;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.dark .stat-card {
  background: #111316;
  border-color: rgba(255, 255, 255, 0.05);
}

.stat-card:hover {
  transform: translateY(-2px);
}

@media (min-width: 1024px) {
  .stat-card {
    padding: 24px;
  }
}

.stat-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 20px;
  transition: color 0.2s, background 0.2s;
  flex-shrink: 0;
}

.stat-icon-blue {
  background: #eff6ff;
  color: #3b82f6;
}

.dark .stat-icon-blue {
  background: rgba(59, 130, 246, 0.1);
  color: #60a5fa;
}

.stat-card:hover .stat-icon-blue {
  background: #3b82f6;
  color: #fff;
}

.stat-icon-indigo {
  background: #eef2ff;
  color: #6366f1;
}

.dark .stat-icon-indigo {
  background: rgba(99, 102, 241, 0.1);
  color: #818cf8;
}

.stat-card:hover .stat-icon-indigo {
  background: #6366f1;
  color: #fff;
}

.stat-icon-purple {
  background: #faf5ff;
  color: #a855f7;
}

.dark .stat-icon-purple {
  background: rgba(168, 85, 247, 0.1);
  color: #c084fc;
}

.stat-card:hover .stat-icon-purple {
  background: #a855f7;
  color: #fff;
}

.stat-icon-orange {
  background: #fff7ed;
  color: #f97316;
}

.dark .stat-icon-orange {
  background: rgba(249, 115, 22, 0.1);
  color: #fb923c;
}

.stat-card:hover .stat-icon-orange {
  background: #f97316;
  color: #fff;
}

/* ── Trend badge ── */

.trend-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}

.trend-up {
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #d1fae5;
}

.dark .trend-up {
  color: #34d399;
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.2);
}

.trend-down {
  color: #ef4444;
  background: #fef2f2;
  border: 1px solid #fecaca;
}

.dark .trend-down {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
}

.stat-label {
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}

.dark .stat-label {
  color: #9ca3af;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.025em;
}

.dark .stat-value {
  color: #fff;
}

@media (min-width: 1024px) {
  .stat-value {
    font-size: 30px;
  }
}

/* ── Chart row grid ── */

.charts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

@media (min-width: 1024px) {
  .charts-grid {
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
  }
}

/* ── Content panel (shared by chart cards, table, etc.) ── */

.content-panel {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 10px -4px rgba(0, 0, 0, 0.05);
  border: 1px solid #f3f4f6;
  padding: 20px;
}

.dark .content-panel {
  background: #111316;
  border-color: rgba(255, 255, 255, 0.05);
}

@media (min-width: 1024px) {
  .content-panel {
    padding: 32px;
  }
}

.content-panel-flush {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 10px -4px rgba(0, 0, 0, 0.05);
  border: 1px solid #f3f4f6;
  overflow: hidden;
  margin-bottom: 16px;
}

.dark .content-panel-flush {
  background: #111316;
  border-color: rgba(255, 255, 255, 0.05);
}

/* ── Panel header ── */

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 8px;
  flex-wrap: wrap;
}

@media (min-width: 1024px) {
  .panel-header {
    margin-bottom: 32px;
  }
}

.panel-title {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  font-family: 'Outfit', sans-serif;
}

.dark .panel-title {
  color: #fff;
}

@media (min-width: 1024px) {
  .panel-title {
    font-size: 20px;
  }
}

.panel-subtitle-val {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.025em;
  font-family: 'Outfit', sans-serif;
}

.dark .panel-subtitle-val {
  color: #fff;
}

@media (min-width: 1024px) {
  .panel-subtitle-val {
    font-size: 30px;
  }
}

/* ── Chart toggle buttons ── */

.chart-toggle-group {
  display: flex;
  background: #f9fafb;
  border-radius: 12px;
  padding: 4px;
  border: 1px solid #e5e7eb;
  align-self: flex-start;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .chart-toggle-group {
    border-radius: 8px;
    padding: 2px;
  }

  .chart-toggle-btn {
    padding: 5px 10px;
    font-size: 11px;
  }
}

.dark .chart-toggle-group {
  background: #16181d;
  border-color: rgba(255, 255, 255, 0.05);
}

.chart-toggle-btn {
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  color: #6b7280;
  transition: color 0.2s;
  background: none;
  border: none;
  cursor: pointer;
}

.dark .chart-toggle-btn {
  color: #9ca3af;
}

.chart-toggle-btn:hover {
  color: #111827;
}

.dark .chart-toggle-btn:hover {
  color: #fff;
}

.chart-toggle-btn.active {
  background: #fff;
  color: #111827;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  --tw-ring-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
  box-shadow: var(--tw-ring-shadow, 0 0 #0000), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dark .chart-toggle-btn.active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  --tw-ring-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
  box-shadow: var(--tw-ring-shadow, 0 0 #0000), 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* ── Kdr Dashboard: Responsive Chart Header ── */
.kdr-chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.kdr-chart-title-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

.kdr-chart-title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  font-family: 'Outfit', sans-serif;
  margin-bottom: 6px;
  line-height: 1.3;
}

@media (min-width: 640px) {
  .kdr-chart-title {
    font-size: 18px;
  }
}

.kdr-chart-stats-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.kdr-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.3;
}

.kdr-stat-pill-blue {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.dark .kdr-stat-pill-blue {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.3);
}

.kdr-stat-pill-purple {
  background: #faf5ff;
  color: #7e22ce;
  border: 1px solid #e9d5ff;
}

.dark .kdr-stat-pill-purple {
  background: rgba(168, 85, 247, 0.15);
  color: #d8b4fe;
  border-color: rgba(168, 85, 247, 0.3);
}

.kdr-stat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.kdr-stat-date {
  white-space: nowrap;
  font-size: 11px;
}

@media (max-width: 640px) {
  .kdr-chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
  }

  .kdr-chart-title-wrap {
    flex: none;
    width: 100%;
  }

  .kdr-chart-header .chart-toggle-group {
    align-self: flex-start;
    margin-top: 0;
  }
}

/* ── Traffic source legend ── */

.legend-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-label {
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
}

.dark .legend-label {
  color: #d1d5db;
}

.legend-value {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  font-family: 'Outfit', sans-serif;
}

.dark .legend-value {
  color: #fff;
}

.view-report-btn {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  color: #4b5563;
  font-size: 14px;
  font-weight: 600;
  background: none;
  cursor: pointer;
  transition: all 0.15s;
  margin-top: 24px;
}

.dark .view-report-btn {
  border-color: rgba(255, 255, 255, 0.1);
  color: #d1d5db;
}

.view-report-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.dark .view-report-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
}

/* ── Table panel header ── */

.table-panel-header {
  padding: 20px;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dark .table-panel-header {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

@media (min-width: 1024px) {
  .table-panel-header {
    padding: 24px 32px;
  }
}

.table-action-btn {
  padding: 8px;
  border-radius: 12px;
  color: #6b7280;
  transition: all 0.15s;
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 18px;
}

.dark .table-action-btn {
  color: #9ca3af;
}

.table-action-btn:hover {
  background: #f3f4f6;
  color: #111827;
  border-color: #e5e7eb;
}

.dark .table-action-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.1);
}

/* ── Table user avatar ── */

.table-avatar {
  height: 36px;
  width: 36px;
  border-radius: 50%;
  background: #e5e7eb;
  background-size: cover;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
  --tw-ring-shadow: 0 0 0 1px #fff;
  box-shadow: var(--tw-ring-shadow, 0 0 #0000), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dark .table-avatar {
  background-color: #374151;
  --tw-ring-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: var(--tw-ring-shadow, 0 0 #0000), 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* ── Status badges ── */

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}

.status-completed {
  background: #d1fae5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.dark .status-completed {
  background: rgba(16, 185, 129, 0.1);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.2);
}

.status-active {
  background: #dbeafe;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.dark .status-active {
  background: rgba(59, 130, 246, 0.1);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.2);
}

.status-failed {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.dark .status-failed {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.2);
}

.status-pending {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

.dark .status-pending {
  background: rgba(245, 158, 11, 0.1);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.2);
}

/* ══════════════════════════════════════════════════════
   Profile Page Components
   ══════════════════════════════════════════════════════ */

/* ── Profile Hero ── */

.profile-hero {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #1e3a5f 0%, #3b82f6 50%, #6366f1 100%);
  min-height: 200px;
}

@media (min-width: 1024px) {
  .profile-hero {
    min-height: 240px;
    margin-bottom: 32px;
  }
}

.profile-hero-cover {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.3;
}

.profile-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 60%);
}

.profile-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 20px 24px;
  gap: 16px;
}

@media (min-width: 640px) {
  .profile-hero-content {
    flex-direction: row;
    text-align: left;
    padding: 0 32px;
    align-items: flex-end;
    height: 100%;
    min-height: 200px;
    padding-bottom: 24px;
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .profile-hero-content {
    padding: 0 40px 32px;
    min-height: 240px;
    gap: 24px;
  }
}

/* ── Profile Avatar (large) ── */

.profile-large-avatar {
  width: 96px;
  height: 96px;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  border: 4px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .profile-large-avatar {
    width: 110px;
    height: 110px;
    border-radius: 24px;
  }
}

.profile-hero-name {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.025em;
}

@media (min-width: 1024px) {
  .profile-hero-name {
    font-size: 28px;
  }
}

.profile-hero-role {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  margin-top: 2px;
}

.profile-hero-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

@media (min-width: 640px) {
  .profile-hero-actions {
    margin-left: auto;
    margin-top: 0;
    align-self: flex-end;
  }
}

/* ── Profile Action Buttons ── */

.profile-action-btn {
  padding: 8px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.profile-action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

.profile-action-btn-primary {
  padding: 8px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  background: #fff;
  color: #1e3a5f;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.profile-action-btn-primary:hover {
  background: #f0f4ff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* ── Profile Info Grid: uses .row + .col-12 .col-lg-6 ── */

/* ── Profile Detail Item ── */

.profile-detail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #f3f4f6;
}

.dark .profile-detail-item {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.profile-detail-item:last-child {
  border-bottom: none;
}

.profile-detail-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  background: #f3f4f6;
  color: #6b7280;
}

.dark .profile-detail-icon {
  background: rgba(255, 255, 255, 0.05);
  color: #9ca3af;
}

.profile-detail-label {
  font-size: 12px;
  font-weight: 500;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.dark .profile-detail-label {
  color: #6b7280;
}

.profile-detail-value {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.dark .profile-detail-value {
  color: #f3f4f6;
}

/* ── Profile Mini Stats: uses .row + .col-6 .col-sm-3 ── */

.mini-stat-card {
  background: #fff;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  text-align: center;
  transition: all 0.3s;
  box-shadow: 0 2px 10px -4px rgba(0, 0, 0, 0.05);
}

.dark .mini-stat-card {
  background: #111316;
  border-color: rgba(255, 255, 255, 0.05);
}

.mini-stat-card:hover {
  transform: translateY(-2px);
}

.mini-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #111827;
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.025em;
}

.dark .mini-stat-value {
  color: #fff;
}

@media (min-width: 1024px) {
  .mini-stat-value {
    font-size: 32px;
  }
}

.mini-stat-label {
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  margin-top: 4px;
}

.dark .mini-stat-label {
  color: #9ca3af;
}

/* ── Activity Timeline ── */

.activity-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.timeline-item {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  position: relative;
}

.timeline-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 17px;
  top: 48px;
  bottom: 0;
  width: 2px;
  background: #e5e7eb;
}

.dark .timeline-item:not(:last-child)::after {
  background: rgba(255, 255, 255, 0.08);
}

.timeline-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  z-index: 1;
}

.timeline-dot-blue {
  background: #eff6ff;
  color: #3b82f6;
}

.dark .timeline-dot-blue {
  background: rgba(59, 130, 246, 0.1);
  color: #60a5fa;
}

.timeline-dot-green {
  background: #ecfdf5;
  color: #10b981;
}

.dark .timeline-dot-green {
  background: rgba(16, 185, 129, 0.1);
  color: #34d399;
}

.timeline-dot-purple {
  background: #faf5ff;
  color: #a855f7;
}

.dark .timeline-dot-purple {
  background: rgba(168, 85, 247, 0.1);
  color: #c084fc;
}

.timeline-dot-orange {
  background: #fff7ed;
  color: #f97316;
}

.dark .timeline-dot-orange {
  background: rgba(249, 115, 22, 0.1);
  color: #fb923c;
}

.timeline-dot-red {
  background: #fef2f2;
  color: #ef4444;
}

.dark .timeline-dot-red {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
}

.timeline-title {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.dark .timeline-title {
  color: #f3f4f6;
}

.timeline-desc {
  font-size: 13px;
  color: #6b7280;
  margin-top: 2px;
}

.dark .timeline-desc {
  color: #9ca3af;
}

.timeline-time {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 4px;
}

.dark .timeline-time {
  color: #6b7280;
}

/* ── Profile About Text ── */

.profile-about-text {
  font-size: 14px;
  line-height: 1.7;
  color: #4b5563;
}

.dark .profile-about-text {
  color: #d1d5db;
}

/* ── Profile Tags / Skills ── */

.profile-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  background: #eff6ff;
  color: #3b82f6;
  border: 1px solid #dbeafe;
  transition: all 0.15s;
}

.dark .profile-tag {
  background: rgba(59, 130, 246, 0.1);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.2);
}

.profile-tag:hover {
  transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════
   Form Components (Edit Profile, Settings)
   ══════════════════════════════════════════════════════ */

/* ── Full-width form field ── */

.form-group-full {
  grid-column: 1 / -1;
}

/* ── Form group ── */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  letter-spacing: 0.01em;
}

.dark .form-label {
  color: #d1d5db;
}

/* ── Text inputs ── */

.form-input {
  padding: 10px 14px !important;
  border-radius: 10px !important;
  border: 1px solid #e5e7eb !important;
  background: #f9fafb !important;
  font-size: 14px !important;
  color: #111827 !important;
  transition: all 0.15s;
  width: 100%;
  outline: none !important;
  font-family: 'Inter', sans-serif;
  box-shadow: none !important;
}

.dark .form-input {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f3f4f6 !important;
}

.form-input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
  background: #fff !important;
  outline: none !important;
}

.dark .form-input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.form-input::-moz-placeholder {
  color: #9ca3af;
}

.form-input::placeholder {
  color: #9ca3af;
}

.dark .form-input::-moz-placeholder {
  color: #6b7280;
}

.dark .form-input::placeholder {
  color: #6b7280;
}

/* ── Textarea ── */

.form-textarea {
  padding: 10px 14px !important;
  border-radius: 10px !important;
  border: 1px solid #e5e7eb !important;
  background: #f9fafb !important;
  font-size: 14px !important;
  color: #111827 !important;
  transition: all 0.15s;
  width: 100%;
  outline: none !important;
  resize: vertical;
  min-height: 100px;
  font-family: 'Inter', sans-serif;
  box-shadow: none !important;
}

.dark .form-textarea {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f3f4f6 !important;
}

.form-textarea:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
  background: #fff !important;
  outline: none !important;
}

.dark .form-textarea:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* ── Select ── */

.form-select {
  padding: 10px 14px !important;
  border-radius: 10px !important;
  border: 1px solid #e5e7eb !important;
  background-color: #f9fafb !important;
  font-size: 14px !important;
  color: #111827 !important;
  transition: all 0.15s;
  width: 100%;
  outline: none !important;
  font-family: 'Inter', sans-serif;
  box-shadow: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 36px !important;
  background-size: 12px !important;
}

.dark .form-select {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f3f4f6 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
}

.form-select:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
  background-color: #fff !important;
  outline: none !important;
}

.dark .form-select:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* ── Avatar upload area ── */

.avatar-upload-area {
  display: flex;
  align-items: center;
  gap: 20px;
}

.avatar-upload-preview {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  border: 3px solid #e5e7eb;
  flex-shrink: 0;
}

.dark .avatar-upload-preview {
  border-color: rgba(255, 255, 255, 0.1);
}

.avatar-upload-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.avatar-upload-hint {
  font-size: 12px;
  color: #9ca3af;
}

.dark .avatar-upload-hint {
  color: #6b7280;
}

/* ── Form action buttons — see consolidated definition below ── */

/* ── Body layout (applied to <body>) ── */

.body-layout {
  background-color: #f0f2f5;
  color: #111827;
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  transition: background-color 0.3s, color 0.3s;
  --app-bg: #f0f2f5;
}

.dark .body-layout {
  background-color: #0b0d10;
  color: #f3f4f6;
  --app-bg: #0b0d10;
}

/* ── App footer ── */

.app-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  font-size: 12px;
  color: #9ca3af;
  border-top: 1px solid #f3f4f6;
  gap: 8px;
  min-height: 56px;
  flex-shrink: 0;
}

.dark .app-footer {
  color: #4b5563;
  border-top-color: rgba(255, 255, 255, 0.05);
}

@media (min-width: 640px) {
  .app-footer {
    flex-direction: row;
    padding: 16px 24px;
  }
}

.app-footer a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s;
}

.app-footer a:hover {
  color: #374151;
}

.dark .app-footer a:hover {
  color: #d1d5db;
}

.footer-links {
  display: flex;
  gap: 24px;
}

/* ── Save section (edit-profile) ── */

.save-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

@media (min-width: 640px) {
  .save-section {
    flex-direction: row;
    align-items: center;
  }
}

.save-section-title {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.dark .save-section-title {
  color: #fff;
}

.save-section-desc {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

.dark .save-section-desc {
  color: #9ca3af;
}

.save-section-buttons {
  display: flex;
  gap: 12px;
}

/* ── Brand copyright (login/register) ── */

.brand-copyright {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

/* ── Button full width ── */

.btn-full {
  width: 100%;
}

/* ── Main content wrapper (sidebar offset) ── */

.main-content-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100vh;
  margin-left: 0;
  transition: all 0.3s;
}

@media (min-width: 768px) {
  .main-content-wrapper {
    margin-left: calc(72px + 32px);
    padding: 16px;
    padding-left: 0;
  }
}

/* ── btn-primary, btn-secondary, btn-sm — see consolidated definitions below ── */

.btn-danger {
  padding: 10px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #dc2626;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dark .btn-danger {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.btn-danger:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

.dark .btn-danger:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
}

/* ── Panel title small ── */

.panel-title-sm {
  font-size: 16px;
}

/* ── Form helper text — see consolidated definition in Form Documentation below ── */

/* ══════════════════════════════════════════════════════
   SweetAlert2 Custom Theme — LOG UI
   ══════════════════════════════════════════════════════ */

/* ── Popup container ── */

div.swal2-popup.swal2-modal {
  border-radius: 16px !important;
  font-family: 'Inter', sans-serif !important;
  padding: 28px 24px 20px !important;
  box-shadow: 0 20px 60px -12px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
  border: none !important;
  background: #fff !important;
  max-width: 360px !important;
  width: calc(100% - 40px) !important;
}

.dark div.swal2-popup.swal2-modal {
  background: #1a1d24 !important;
  box-shadow: 0 20px 60px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

/* ── Backdrop ── */

div.swal2-container {
  z-index: 100050 !important;
}

/* Modal backdrop with blur (only for modal popups, NEVER on toasts) */
body.swal2-shown:not(.swal2-toast-shown) div.swal2-container.swal2-backdrop-show {
  background: rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Toast container must NEVER have background overlay or blur */
body.swal2-toast-shown div.swal2-container,
div.swal2-container:has(.swal2-toast),
div.swal2-container.swal2-top-end,
div.swal2-container.swal2-top-start,
div.swal2-container.swal2-top-right,
div.swal2-container.swal2-top-left,
div.swal2-container.swal2-bottom-end,
div.swal2-container.swal2-bottom-start,
div.swal2-container.swal2-bottom-right,
div.swal2-container.swal2-bottom-left {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
}

body.swal2-toast-shown div.swal2-container .swal2-popup,
div.swal2-container .swal2-toast {
  pointer-events: auto !important;
}

/* ── Title ── */

div.swal2-popup .swal2-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  letter-spacing: -0.02em !important;
  padding: 0 !important;
  margin: 0 0 4px !important;
}

.dark div.swal2-popup .swal2-title {
  color: #f3f4f6 !important;
}

/* ── HTML content / text ── */

div.swal2-popup .swal2-html-container {
  font-size: 13px !important;
  color: #6b7280 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dark div.swal2-popup .swal2-html-container {
  color: #9ca3af !important;
}

/* ── Confirm button ── */

div.swal2-popup .swal2-actions .swal2-confirm {
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 9px 22px !important;
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25) !important;
  transition: all 0.2s !important;
  font-family: 'Inter', sans-serif !important;
  letter-spacing: 0 !important;
}

div.swal2-popup .swal2-actions .swal2-confirm:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35) !important;
}

div.swal2-popup .swal2-actions .swal2-confirm:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

/* ── Cancel button ── */

div.swal2-popup .swal2-actions .swal2-cancel {
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 9px 22px !important;
  background: #f3f4f6 !important;
  color: #374151 !important;
  border: none !important;
  box-shadow: none !important;
  transition: all 0.2s !important;
  font-family: 'Inter', sans-serif !important;
}

.dark div.swal2-popup .swal2-actions .swal2-cancel {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #d1d5db !important;
}

div.swal2-popup .swal2-actions .swal2-cancel:hover {
  background: #e5e7eb !important;
}

.dark div.swal2-popup .swal2-actions .swal2-cancel:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* ── Deny / danger button ── */

div.swal2-popup .swal2-actions .swal2-deny {
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 9px 22px !important;
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25) !important;
  transition: all 0.2s !important;
  font-family: 'Inter', sans-serif !important;
}

div.swal2-popup .swal2-actions .swal2-deny:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35) !important;
}

/* ── Danger confirm (for logout) ── */

div.swal2-popup .swal2-actions .swal2-confirm.swal2-danger-btn {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25) !important;
}

div.swal2-popup .swal2-actions .swal2-confirm.swal2-danger-btn:hover {
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35) !important;
}

div.swal2-popup .swal2-actions .swal2-confirm.swal2-danger-btn:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

/* ── Button spacing ── */

div.swal2-popup .swal2-actions {
  margin-top: 16px !important;
  gap: 8px !important;
  padding: 0 !important;
}

/* ── Icon styling ── */

div.swal2-popup .swal2-icon {
  margin: 0 auto 12px !important;
}

div.swal2-popup .swal2-icon.swal2-warning {
  border-color: #f59e0b !important;
  color: #f59e0b !important;
}

div.swal2-popup .swal2-icon.swal2-success {
  border-color: #10b981 !important;
  color: #10b981 !important;
}

div.swal2-popup .swal2-icon.swal2-success [class^='swal2-success-line'] {
  background-color: #10b981 !important;
}

div.swal2-popup .swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(16, 185, 129, 0.25) !important;
}

div.swal2-popup .swal2-icon.swal2-error {
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}

div.swal2-popup .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
  background-color: #ef4444 !important;
}

div.swal2-popup .swal2-icon.swal2-info {
  border-color: #3b82f6 !important;
  color: #3b82f6 !important;
}

div.swal2-popup .swal2-icon.swal2-question {
  border-color: #8b5cf6 !important;
  color: #8b5cf6 !important;
}

/* ── Close button ── */

div.swal2-popup .swal2-close {
  color: #9ca3af !important;
  font-size: 22px !important;
  transition: all 0.15s !important;
  top: 12px !important;
  right: 12px !important;
  width: 28px !important;
  height: 28px !important;
}

div.swal2-popup .swal2-close:hover {
  color: #374151 !important;
}

.dark div.swal2-popup .swal2-close {
  color: #6b7280 !important;
}

.dark div.swal2-popup .swal2-close:hover {
  color: #d1d5db !important;
}

/* ── Input fields (if used) ── */

div.swal2-popup .swal2-input {
  border-radius: 10px !important;
  border: 1px solid #e5e7eb !important;
  background: #f9fafb !important;
  font-size: 14px !important;
  font-family: 'Inter', sans-serif !important;
  padding: 10px 14px !important;
  box-shadow: none !important;
  height: auto !important;
  margin: 12px 0 0 !important;
}

.dark div.swal2-popup .swal2-input {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f3f4f6 !important;
}

div.swal2-popup .swal2-input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* ── Timer progress bar ── */

div.swal2-popup .swal2-timer-progress-bar-container {
  border-radius: 0 0 16px 16px !important;
  overflow: hidden !important;
}

div.swal2-popup .swal2-timer-progress-bar {
  background: linear-gradient(90deg, #3b82f6, #6366f1) !important;
  height: 3px !important;
}

/* ── Popup enter animation ── */

div.swal2-popup.swal2-show {
  animation: swalPopIn 0.25s ease-out !important;
}

@keyframes swalPopIn {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(8px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ══════════════════════════════════════════════════════
   Help & FAQ Page Components
   ══════════════════════════════════════════════════════ */

/* ── FAQ Hero ── */

.faq-hero {
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
  border-radius: 16px;
  padding: 40px 24px;
  text-align: center;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .faq-hero {
    padding: 48px 40px;
    margin-bottom: 32px;
  }
}

.faq-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.faq-hero-title {
  font-family: 'Outfit', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
  position: relative;
}

@media (min-width: 1024px) {
  .faq-hero-title {
    font-size: 32px;
  }
}

.faq-hero-subtitle {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.75);
  position: relative;
  margin-bottom: 24px;
}

/* ── FAQ Search ── */

.faq-search-wrap {
  max-width: 480px;
  margin: 0 auto;
  position: relative;
}

.faq-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  z-index: 1;
}

.faq-search-input {
  width: 100%;
  padding: 12px 16px 12px 44px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(8px);
  font-size: 14px !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: none !important;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
}

.faq-search-input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

.faq-search-input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

.faq-search-input:focus {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1) !important;
}

/* ── FAQ Category Cards: uses .row + .col-6 .col-sm-4 .col-lg-3 ── */

.faq-category-card {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 14px;
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s;
}

.dark .faq-category-card {
  background: #111316;
  border-color: rgba(255, 255, 255, 0.05);
}

.faq-category-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px -8px rgba(0, 0, 0, 0.1);
}

.dark .faq-category-card:hover {
  box-shadow: 0 8px 25px -8px rgba(0, 0, 0, 0.3);
}

.faq-category-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin: 0 auto 10px;
}

.faq-category-name {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.dark .faq-category-name {
  color: #f3f4f6;
}

.faq-category-count {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 2px;
}

/* ── FAQ Accordion ── */

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-item {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s;
}

.dark .faq-item {
  background: #111316;
  border-color: rgba(255, 255, 255, 0.05);
}

.faq-item.active {
  border-color: #dbeafe;
  box-shadow: 0 4px 16px -6px rgba(59, 130, 246, 0.12);
}

.dark .faq-item.active {
  border-color: rgba(59, 130, 246, 0.2);
  box-shadow: 0 4px 16px -6px rgba(59, 130, 246, 0.1);
}

/* ══════ UI Cards ══════ */

.ui-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dark .ui-card {
  background: #1a1d24;
  border-color: rgba(255, 255, 255, 0.05);
}

.ui-card-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
}

.dark .ui-card-header {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.ui-card-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.ui-card-body {
  padding: 20px;
  flex: 1;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: 'Inter', sans-serif;
  transition: all 0.15s;
  gap: 12px;
}

.dark .faq-question {
  color: #f3f4f6;
}

.faq-question:hover {
  background: #f9fafb;
}

.dark .faq-question:hover {
  background: rgba(255, 255, 255, 0.03);
}

.faq-question-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background: #f3f4f6;
  color: #6b7280;
  flex-shrink: 0;
  transition: all 0.3s;
}

.dark .faq-question-icon {
  background: rgba(255, 255, 255, 0.05);
  color: #9ca3af;
}

.faq-item.active .faq-question-icon {
  background: #3b82f6;
  color: #fff;
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-answer-inner {
  padding: 0 20px 16px;
  font-size: 14px;
  line-height: 1.7;
  color: #6b7280;
}

.dark .faq-answer-inner {
  color: #9ca3af;
}

.faq-item.active .faq-answer {
  max-height: 300px;
}

/* ── Contact Cards: uses .row + .col-12 .col-sm-4 ── */

.contact-card {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 14px;
  padding: 24px 20px;
  text-align: center;
  transition: all 0.25s;
}

.dark .contact-card {
  background: #111316;
  border-color: rgba(255, 255, 255, 0.05);
}

.contact-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.1);
}

.contact-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin: 0 auto 12px;
}

.contact-card-title {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 4px;
}

.dark .contact-card-title {
  color: #f3f4f6;
}

.contact-card-desc {
  font-size: 13px;
  color: #6b7280;
}

.dark .contact-card-desc {
  color: #9ca3af;
}

.contact-card-note {
  font-size: 11px;
  color: #6b7280;
  margin-top: 4px;
}

.dark .contact-card-note {
  color: #9ca3af;
}

/* ══════════════════════════════════════════════════════
   Notifications Page
   ══════════════════════════════════════════════════════ */

/* ── Filter tabs ── */

.notif-filter-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: #f3f4f6;
  border-radius: 10px;
  width: -moz-fit-content;
  width: fit-content;
}

.dark .notif-filter-tabs {
  background: rgba(255, 255, 255, 0.05);
}

.notif-filter-tab {
  padding: 6px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: none;
  color: #6b7280;
  transition: all 0.15s;
  font-family: 'Inter', sans-serif;
}

.dark .notif-filter-tab {
  color: #9ca3af;
}

.notif-filter-tab:hover {
  color: #374151;
}

.dark .notif-filter-tab:hover {
  color: #e5e7eb;
}

.notif-filter-tab.active {
  background: #fff;
  color: #111827;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.dark .notif-filter-tab.active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* ── Full notification card ── */

.notif-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
  transition: all 0.15s;
  cursor: pointer;
}

.dark .notif-card {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.notif-card:hover {
  background: #f9fafb;
}

.dark .notif-card:hover {
  background: rgba(255, 255, 255, 0.02);
}

.notif-card:last-child {
  border-bottom: none;
}

.notif-card.unread {
  background: #eff6ff;
  border-left: 3px solid #3b82f6;
}

.dark .notif-card.unread {
  background: rgba(59, 130, 246, 0.05);
  border-left-color: #3b82f6;
}

.notif-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.notif-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.dark .notif-card-title {
  color: #f3f4f6;
}

.notif-card-desc {
  font-size: 13px;
  color: #6b7280;
  margin-top: 2px;
  line-height: 1.5;
}

.dark .notif-card-desc {
  color: #9ca3af;
}

.notif-card-time {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 4px;
}

.dark .notif-card-time {
  color: #6b7280;
}

.notif-card-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
}

.notif-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 13px;
}

.notif-action-btn:hover {
  background: #f3f4f6;
  color: #6b7280;
}

.dark .notif-action-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #d1d5db;
}

/* ── Section date label (notification date groups) ── */

.section-date-label {
  padding: 12px 20px;
  border-bottom: 1px solid #f3f4f6;
}

.dark .section-date-label {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.section-date-label:not(:first-child) {
  border-top: 1px solid #f3f4f6;
}

.dark .section-date-label:not(:first-child) {
  border-top-color: rgba(255, 255, 255, 0.05);
}

.section-date-text {
  font-size: 12px;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dark .section-date-text {
  color: #6b7280;
}

/* ── Mark all read button ── */

.mark-all-read-btn {
  font-size: 12px;
  font-weight: 600;
  color: #3b82f6;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}

.mark-all-read-btn:hover {
  color: #2563eb;
}

/* ── Page header actions ── */

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Notification content panel (no padding) ── */

.notif-content-body {
  padding: 0;
  overflow: hidden;
  margin-bottom: 16px;
}

/* ── Notification card content wrapper ── */

.notif-card-content {
  flex: 1;
  min-width: 0;
}

/* ── Profile dropdown info ── */

.profile-dropdown-info {
  padding: 12px 20px 14px;
  border-bottom: 1px solid #f3f4f6;
}

.dark .profile-dropdown-info {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.profile-dropdown-name {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.dark .profile-dropdown-name {
  color: #fff;
}

.profile-dropdown-email {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

.dark .profile-dropdown-email {
  color: #9ca3af;
}

/* ── Profile skills section ── */

.profile-skills-section {
  margin-top: 20px;
}

.profile-skills-label {
  margin-bottom: 10px;
}

/* ── Panel header flush (no bottom margin) ── */

.panel-header-flush {
  margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════
   Messages / Chat Page
   ══════════════════════════════════════════════════════ */

/* ── Chat layout ── */

.chat-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  height: calc(100vh - 200px);
  min-height: 500px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #f3f4f6;
  background: #fff;
  margin-bottom: 16px;
}

.dark .chat-layout {
  background: #111316;
  border-color: rgba(255, 255, 255, 0.05);
}

@media (min-width: 768px) {
  .chat-layout {
    grid-template-columns: 320px 1fr;
  }
}

@media (min-width: 1024px) {
  .chat-layout {
    grid-template-columns: 360px 1fr;
  }
}

/* ── Conversation sidebar ── */

.chat-sidebar {
  border-right: 1px solid #f3f4f6;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dark .chat-sidebar {
  border-right-color: rgba(255, 255, 255, 0.05);
}

.chat-sidebar-header {
  padding: 16px;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.dark .chat-sidebar-header {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.chat-sidebar-title {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

.dark .chat-sidebar-title {
  color: #f3f4f6;
}

.chat-search {
  padding: 0 16px 12px;
  flex-shrink: 0;
}

.chat-search-input {
  width: 100%;
  padding: 8px 12px 8px 36px !important;
  border-radius: 10px !important;
  border: 1px solid #e5e7eb !important;
  background: #f9fafb !important;
  font-size: 13px !important;
  color: #111827 !important;
  outline: none !important;
  box-shadow: none !important;
  font-family: 'Inter', sans-serif;
}

.dark .chat-search-input {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f3f4f6 !important;
}

.chat-conversations {
  flex: 1;
  overflow-y: auto;
}

/* ── Conversation item ── */

.conv-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.12s;
  border-bottom: 1px solid #fafafa;
}

.dark .conv-item {
  border-bottom-color: rgba(255, 255, 255, 0.02);
}

.conv-item:hover {
  background: #f9fafb;
}

.dark .conv-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.conv-item.active {
  background: #eff6ff;
  border-left: 3px solid #3b82f6;
}

.dark .conv-item.active {
  background: rgba(59, 130, 246, 0.08);
  border-left-color: #3b82f6;
}

.conv-avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  position: relative;
  background-size: cover;
  background-position: center;
}

.conv-online-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2.5px solid #fff;
  z-index: 10;
  box-sizing: border-box;
}

.dark .conv-online-dot {
  border-color: #111316;
}

.conv-name {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.dark .conv-name {
  color: #f3f4f6;
}

.conv-preview {
  font-size: 12px;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  margin-top: 1px;
}

.conv-time {
  font-size: 11px;
  color: #9ca3af;
  margin-left: auto;
  flex-shrink: 0;
}

.conv-unread-badge {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #3b82f6;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Chat area ── */

.chat-area {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-header {
  padding: 14px 20px;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.dark .chat-header {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.chat-header-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.chat-header-name {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}

.dark .chat-header-name {
  color: #f3f4f6;
}

.chat-header-status {
  font-size: 12px;
  color: #10b981;
  display: flex;
  align-items: center;
  gap: 4px;
}

.chat-header-status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
}

/* ── Chat body (messages) ── */

.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Message bubbles ── */

.msg-row {
  display: flex;
  gap: 10px;
  max-width: 75%;
}

.msg-row.sent {
  margin-left: auto;
  flex-direction: row-reverse;
}

.msg-bubble {
  padding: 10px 16px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.6;
  position: relative;
}

.msg-row.received .msg-bubble {
  background: #f3f4f6;
  color: #111827;
  border-bottom-left-radius: 4px;
}

.dark .msg-row.received .msg-bubble {
  background: rgba(255, 255, 255, 0.06);
  color: #f3f4f6;
}

.msg-row.sent .msg-bubble {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.msg-bubble-time {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 4px;
}

.msg-row.sent .msg-bubble-time {
  text-align: right;
  color: rgba(255, 255, 255, 0.6);
}

/* ── Message Action / Delete Button ── */
.msg-delete-btn {
  opacity: 0;
  visibility: hidden;
  align-self: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #ef4444;
  padding: 6px 8px;
  border-radius: 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.msg-row.sent:hover .msg-delete-btn {
  opacity: 0.85;
  visibility: visible;
}

.msg-delete-btn:hover {
  opacity: 1 !important;
  background: rgba(239, 68, 68, 0.15);
  transform: scale(1.1);
  color: #dc2626;
}

@media (max-width: 768px) {
  .msg-delete-btn {
    opacity: 0.7;
    visibility: visible;
  }
}

/* ── Referral Card Styles ── */
.rujukan-card {
  border-radius: 16px;
  padding: 16px 18px;
  margin: 6px 0;
  width: 100%;
  min-width: 270px;
  max-width: 400px;
  text-align: left;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08);
}

.msg-row.sent .rujukan-card {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.msg-row.received .rujukan-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #1e293b;
}

.dark .msg-row.received .rujukan-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: #f1f5f9;
}

.rujukan-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(156, 163, 175, 0.25);
}

.rujukan-header-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.msg-row.sent .rujukan-header-icon {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.rujukan-header-title {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
}

.rujukan-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 9999px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}

.rujukan-badge-pending {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}
.dark .rujukan-badge-pending,
.msg-row.sent .rujukan-badge-pending {
  background: rgba(217, 119, 6, 0.35);
  color: #fef08a;
  border-color: rgba(217, 119, 6, 0.5);
}

.rujukan-badge-accepted {
  background: #d1fae5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.dark .rujukan-badge-accepted,
.msg-row.sent .rujukan-badge-accepted {
  background: rgba(5, 150, 105, 0.35);
  color: #6ee7b7;
  border-color: rgba(5, 150, 105, 0.5);
}

.rujukan-badge-rejected {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.dark .rujukan-badge-rejected,
.msg-row.sent .rujukan-badge-rejected {
  background: rgba(220, 38, 38, 0.35);
  color: #fca5a5;
  border-color: rgba(220, 38, 38, 0.5);
}

/* Rujukan Details Spacing & Typography */
.rujukan-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.rujukan-detail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  line-height: 1.45;
}

.rujukan-detail-label {
  color: #64748b;
  font-weight: 500;
  flex-shrink: 0;
}
.msg-row.sent .rujukan-detail-label {
  color: rgba(255, 255, 255, 0.85);
}
.dark .msg-row.received .rujukan-detail-label {
  color: #94a3b8;
}

.rujukan-detail-value {
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}

/* Rujukan Notes / Keluhan Box */
.rujukan-catatan-box {
  margin: 10px 0 4px 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
}
.msg-row.received .rujukan-catatan-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155;
}
.dark .msg-row.received .rujukan-catatan-box {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #f1f5f9;
}
.msg-row.sent .rujukan-catatan-box {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.rujukan-catatan-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  opacity: 0.85;
}

/* Rujukan Action Box & Clearly Visible Buttons */
.rujukan-action-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(156, 163, 175, 0.25);
}

.rujukan-btn-accept {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 9px;
  background: #10b981 !important;
  color: #ffffff !important;
  font-size: 12px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(16, 185, 129, 0.35);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}
.rujukan-btn-accept:hover {
  background: #059669 !important;
  box-shadow: 0 5px 12px rgba(16, 185, 129, 0.45);
  transform: translateY(-1px);
}
.rujukan-btn-accept:active {
  transform: translateY(0);
}

.rujukan-btn-reject {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 9px;
  background: #ef4444 !important;
  color: #ffffff !important;
  font-size: 12px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(239, 68, 68, 0.35);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}
.rujukan-btn-reject:hover {
  background: #dc2626 !important;
  box-shadow: 0 5px 12px rgba(239, 68, 68, 0.45);
  transform: translateY(-1px);
}
.rujukan-btn-reject:active {
  transform: translateY(0);
}

/* Rujukan Status Boxes (Pending, Accepted, Rejected) */
.rujukan-status-pending-info {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
}
.msg-row.sent .rujukan-status-pending-info {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
}
.msg-row.received .rujukan-status-pending-info {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #64748b;
}
.dark .msg-row.received .rujukan-status-pending-info {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: #cbd5e1;
}
.rujukan-status-pending-info i {
  font-size: 13px;
  flex-shrink: 0;
}

.rujukan-status-accepted-info {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.dark .rujukan-status-accepted-info {
  background: rgba(5, 150, 105, 0.25);
  color: #6ee7b7;
  border-color: rgba(5, 150, 105, 0.4);
}
.msg-row.sent .rujukan-status-accepted-info {
  background: rgba(16, 185, 129, 0.28);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

.rujukan-btn-open-chat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 9px;
  background: #2563eb !important;
  color: #ffffff !important;
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
  transition: all 0.2s ease;
}
.rujukan-btn-open-chat:hover {
  background: #1d4ed8 !important;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.45);
  transform: translateY(-1px);
}

.rujukan-status-rejected-info {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.dark .rujukan-status-rejected-info {
  background: rgba(220, 38, 38, 0.25);
  color: #fca5a5;
  border-color: rgba(220, 38, 38, 0.4);
}
.msg-row.sent .rujukan-status-rejected-info {
  background: rgba(239, 68, 68, 0.28);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

/* ── Plus Attachment Button & Flyout Menu ── */
.chat-plus-btn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  color: #64748b;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-plus-btn:hover {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
  transform: scale(1.05);
}

.chat-plus-btn.active {
  background: #ef4444 !important;
  color: #ffffff !important;
  transform: rotate(45deg);
}

.attach-flyout-menu {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 0;
  width: 275px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.14), 0 6px 12px -2px rgba(0, 0, 0, 0.08);
  padding: 8px;
  z-index: 100;
  transform-origin: bottom left;
  animation: flyoutSlideUp 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.dark .attach-flyout-menu {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 40px -4px rgba(0, 0, 0, 0.55);
}

@keyframes flyoutSlideUp {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.attach-flyout-header {
  padding: 6px 10px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 4px;
}

.dark .attach-flyout-header {
  color: #64748b;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.attach-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.attach-menu-item:hover {
  background: #f8fafc;
}

.dark .attach-menu-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.attach-menu-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.attach-menu-item:hover .attach-menu-icon {
  transform: scale(1.1);
}

.attach-menu-icon.icon-link {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
}

.attach-menu-icon.icon-doc {
  background: rgba(99, 102, 241, 0.12);
  color: #4f46e5;
}

.attach-menu-icon.icon-img {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

.attach-menu-icon.icon-rujukan {
  background: rgba(244, 63, 94, 0.12);
  color: #e11d48;
}

.attach-menu-text {
  min-width: 0;
  flex: 1;
}

.attach-menu-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.3;
}

.dark .attach-menu-title {
  color: #f1f5f9;
}

.attach-menu-desc {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.2;
  margin-top: 1px;
}

.attach-menu-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 4px 6px;
}

.dark .attach-menu-divider {
  background: rgba(255, 255, 255, 0.06);
}

.badge-kader-pill {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 9999px;
  background: #ffe4e6;
  color: #e11d48;
}

.dark .badge-kader-pill {
  background: rgba(225, 29, 72, 0.25);
  color: #fda4af;
}

.attach-menu-item.item-rujukan:hover {
  background: rgba(244, 63, 94, 0.08);
}

/* ── Referral Directory Card Selection State ── */
.directory-card.bidan-card-selected {
  border: 2px solid #10b981 !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2) !important;
  transform: translateY(-2px);
}

/* ── Referral Notes Card / Box ── */
.referral-notes-box {
  margin-top: 24px;
  margin-bottom: 8px;
  padding: 18px 20px 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  transition: all 0.2s ease;
}

.dark .referral-notes-box {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

.referral-notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.dark .referral-notes-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.referral-notes-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.referral-notes-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #ffe4e6;
  color: #e11d48;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.dark .referral-notes-icon-wrap {
  background: rgba(225, 29, 72, 0.2);
  color: #fda4af;
}

.referral-notes-title {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block;
}

.dark .referral-notes-title {
  color: #f1f5f9;
}

.referral-notes-subtitle {
  font-size: 11px;
  color: #94a3b8;
  display: block;
  margin-top: 1px;
}

.dark .referral-notes-subtitle {
  color: #64748b;
}

/* Badge Bidan Terpilih */
.referral-selected-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.referral-selected-badge.badge-unselected {
  background: #e2e8f0;
  color: #64748b;
}

.dark .referral-selected-badge.badge-unselected {
  background: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}

.referral-selected-badge.badge-selected {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #6ee7b7;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.15);
}

.dark .referral-selected-badge.badge-selected {
  background: rgba(6, 78, 59, 0.4);
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.4);
}

.referral-selected-badge .badge-icon {
  font-size: 13px;
  margin-right: 2px;
}

.referral-selected-badge .badge-label {
  font-weight: 600;
}

.referral-selected-badge .badge-name {
  font-weight: 700;
  margin-left: 5px;
}

/* Textarea Rujukan */
.referral-notes-textarea {
  width: 100%;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.6;
  border-radius: 12px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  color: #1e293b;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
  box-sizing: border-box;
  resize: vertical;
  min-height: 85px;
}

.referral-notes-textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.dark .referral-notes-textarea {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.15);
  color: #f1f5f9;
}

.dark .referral-notes-textarea:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25);
}

/* ── Emoji Picker Popup ── */
.emoji-picker-popup {
  position: absolute;
  bottom: calc(100% + 14px);
  right: 0;
  width: 270px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.16), 0 6px 12px -2px rgba(0, 0, 0, 0.08);
  padding: 10px 12px 12px;
  z-index: 100;
  transform-origin: bottom right;
  animation: flyoutSlideUp 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.dark .emoji-picker-popup {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 40px -4px rgba(0, 0, 0, 0.55);
}

.emoji-picker-header {
  padding: 2px 4px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 8px;
}

.dark .emoji-picker-header {
  color: #64748b;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.emoji-picker-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 6px !important;
}

.emoji-picker-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  font-size: 20px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  user-select: none !important;
}

.emoji-picker-item:hover {
  background: #f1f5f9 !important;
  transform: scale(1.2) !important;
}

.dark .emoji-picker-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

.emoji-picker-item:active {
  transform: scale(0.95) !important;
}



/* ── Date divider ── */

.chat-date-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #9ca3af;
  font-size: 12px;
  font-weight: 500;
}

.chat-date-divider::before,
.chat-date-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

.dark .chat-date-divider::before,
.dark .chat-date-divider::after {
  background: rgba(255, 255, 255, 0.06);
}

/* ── Typing indicator ── */

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  background: #f3f4f6;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  width: -moz-fit-content;
  width: fit-content;
}

.dark .typing-indicator {
  background: rgba(255, 255, 255, 0.06);
}

.typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9ca3af;
  animation: typingBounce 1.4s infinite;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBounce {

  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }

  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* ── Chat input ── */

.chat-input-area {
  padding: 12px 16px;
  border-top: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.dark .chat-input-area {
  border-top-color: rgba(255, 255, 255, 0.05);
}

.chat-input {
  flex: 1;
  padding: 10px 16px !important;
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  background: #f9fafb !important;
  font-size: 14px !important;
  color: #111827 !important;
  outline: none !important;
  box-shadow: none !important;
  font-family: 'Inter', sans-serif;
}

.dark .chat-input {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f3f4f6 !important;
}

.chat-input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.chat-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 16px;
  flex-shrink: 0;
}

.chat-send-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.chat-action-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: none;
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 16px;
  flex-shrink: 0;
}

.chat-action-btn:hover {
  color: #6b7280;
  background: #f3f4f6;
}

.dark .chat-action-btn:hover {
  color: #d1d5db;
  background: rgba(255, 255, 255, 0.05);
}

/* ── Mobile: hide sidebar, show when toggled ── */

@media (max-width: 767px) {
  .chat-sidebar {
    display: none;
  }

  .chat-sidebar.chat-sidebar-show {
    display: flex;
    position: absolute;
    inset: 0;
    z-index: 10;
    background: #fff;
  }

  .dark .chat-sidebar.chat-sidebar-show {
    background: #111316;
  }
}

/* ══════════════════════════════════════════════════════
   Login Page Styles
   ══════════════════════════════════════════════════════ */

/* ── Login Body ── */

.login-body {
  background-color: #f0f2f5;
  color: #111827;
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  height: 100vh;
  /* Fixed height to prevent scroll */
  overflow: hidden;
  /* Hide scrollbars */
  transition: background-color 0.3s, color 0.3s;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dark .login-body {
  background-color: #0b0d10;
  color: #f3f4f6;
}

/* ── Login Container ── */

.login-container {
  display: flex;
  width: 100%;
  height: 100vh;
  background: #ffffff;
  overflow: hidden;
  transition: background-color 0.3s, box-shadow 0.3s;
}

.dark .login-container {
  background: #16181d;
}

/* ── Left side: Branding ── */

.login-brand {
  display: none;
  width: 50%;
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
  position: relative;
  padding: 40px;
  color: white;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

@media (min-width: 800px) {
  .login-brand {
    display: flex;
    padding: 40px 6%;
    /* Better padding for full screen layout */
  }
}

/* Brand decorative floating shapes */

.brand-shape {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: floatShape 10s infinite ease-in-out;
}

.shape-1 {
  width: 300px;
  height: 300px;
  top: -100px;
  right: -100px;
  animation-delay: 0s;
}

.shape-2 {
  width: 200px;
  height: 200px;
  bottom: -50px;
  left: -50px;
  animation-delay: -2s;
}

.shape-3 {
  width: 150px;
  height: 150px;
  top: 40%;
  left: 20%;
  animation-delay: -5s;
}

@keyframes floatShape {
  0% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-20px) rotate(10deg);
  }

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

.brand-content {
  position: relative;
  z-index: 10;
}

.brand-logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo-text {
  font-family: 'Outfit', sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.brand-title {
  font-family: 'Outfit', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 16px;
}

.brand-subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}

/* ── Right side: Form ── */

.login-form-wrapper {
  width: 100%;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Removed center to prevent top alignment clip */
  position: relative;
  /* Context for toggle */
  overflow-y: auto;
  overflow-x: hidden;
  -ms-overflow-style: none;
  /* hide scrollbar IE/Edge */
  scrollbar-width: none;
  /* hide scrollbar Firefox */
}

.login-form-wrapper::-webkit-scrollbar {
  display: none;
  /* hide scrollbar WebKit */
}

@media (min-width: 800px) {
  .login-form-wrapper {
    width: 50%;
    padding: 32px 5%;
    justify-content: center;
  }
}

.dark .login-form-wrapper {
  background-color: #16181d;
}

.form-header {
  margin-bottom: 24px;
  text-align: center;
  flex-shrink: 0;
  /* prevents text from being squished and covered by the form */
}

@media (min-width: 800px) {
  .form-header {
    text-align: left;
  }
}

.form-title {
  font-family: 'Outfit', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 8px;
  letter-spacing: -0.025em;
}

.dark .form-title {
  color: #ffffff;
}

.form-subtitle {
  font-size: 14px;
  color: #6b7280;
}

.dark .form-subtitle {
  color: #9ca3af;
}

/* ── Form Controls (Login Specific) ── */

.login-form-wrapper .form-group {
  margin-bottom: 12px;
}

.login-form-wrapper .form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

.dark .login-form-wrapper .form-label {
  color: #d1d5db;
}

.login-form-wrapper .input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.login-form-wrapper .input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 14px;
  transition: color 0.2s;
  margin-top: -1px;
}

.dark .login-form-wrapper .input-icon {
  color: #6b7280;
}

.login-form-wrapper .form-input {
  width: 100%;
  padding: 12px 16px 12px 48px !important;
  font-size: 14.5px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #111827;
  transition: all 0.2s;
  outline: none;
  font-family: inherit;
}

.dark .login-form-wrapper .form-input {
  background: #111316;
  border-color: rgba(255, 255, 255, 0.08);
  color: #f3f4f6;
}

.login-form-wrapper .form-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}

.dark .login-form-wrapper .form-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25);
}

.login-form-wrapper .form-input:focus+.input-icon {
  color: #3b82f6;
}

.password-toggle {
  position: absolute;
  right: 16px;
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.password-toggle:hover {
  color: #4b5563;
}

.dark .password-toggle:hover {
  color: #d1d5db;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  font-size: 13.5px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4b5563;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.dark .checkbox-label {
  color: #9ca3af;
}

.form-checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1px solid #d1d5db;
  background-color: #fff;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}

.dark .form-checkbox {
  background-color: #1a1d24;
  border-color: rgba(255, 255, 255, 0.2);
}

.form-checkbox:checked {
  background-color: #3b82f6;
  border-color: #3b82f6;
}

.form-checkbox:checked::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  color: white;
  font-size: 11px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.forgot-link {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}

.forgot-link:hover {
  color: #2563eb;
  text-decoration: underline;
}

.btn-primary {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
  font-family: inherit;
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg);
  transition: all 0.6s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.35);
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
}

.btn-primary:hover::after {
  left: 200%;
}

.btn-primary:active {
  transform: translateY(1px);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
}

.form-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 16px 0;
  color: #9ca3af;
  font-size: 13.5px;
}

.form-divider::before,
.form-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #e5e7eb;
}

.dark .form-divider::before,
.dark .form-divider::after {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.form-divider span {
  padding: 0 16px;
}

.social-login {
  display: flex;
  gap: 16px;
}

.btn-social {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #374151;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.dark .btn-social {
  background: #111316;
  border-color: rgba(255, 255, 255, 0.08);
  color: #d1d5db;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-social:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #111827;
  transform: translateY(-1px);
}

.dark .btn-social:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.social-icon-google {
  color: #ea4335;
  font-size: 18px;
}

.social-icon-github {
  color: #333;
  font-size: 18px;
}

.dark .social-icon-github {
  color: #fff;
}

.signup-prompt {
  text-align: center;
  margin-top: 24px;
  font-size: 14.5px;
  color: #6b7280;
}

.dark .signup-prompt {
  color: #9ca3af;
}

/* Mobile Logo (Visible only on small screens) */

.mobile-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 32px;
}

@media (min-width: 800px) {
  .mobile-logo {
    display: none;
  }
}

.mobile-logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
  color: #fff;
  box-shadow: 0 6px 15px rgba(59, 130, 246, 0.3);
  font-size: 24px;
}

.mobile-logo-text {
  font-family: 'Outfit', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.025em;
}

.dark .mobile-logo-text {
  color: #ffffff;
}

/* Theme Toggle button on Login */

.login-form-wrapper {
  position: relative;
  /* Context for toggle */
}

.login-theme-toggle {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  color: #4b5563;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 50;
  font-size: 16px;
}

@media (min-width: 800px) {
  .login-theme-toggle {
    top: 32px;
    right: 32px;
  }
}

.login-theme-toggle:hover {
  background: #e5e7eb;
  color: #111827;
  transform: rotate(15deg);
}

.dark .login-theme-toggle {
  background: #1f2937;
  /* Darker circle background for contrast */
  color: #9ca3af;
}

.dark .login-theme-toggle:hover {
  background: #374151;
  /* Lighter on hover */
  color: #f3f4f6;
}

.login-theme-toggle .fa-sun {
  display: none;
}

.login-theme-toggle .fa-moon {
  display: block;
}

.dark .login-theme-toggle .fa-sun {
  display: block;
  color: #fbbf24;
}

.dark .login-theme-toggle .fa-moon {
  display: none;
}

/* ══════════════════════════════════════════════════════
   Form Documentation Page
   ══════════════════════════════════════════════════════ */

/* ── Page Header ── */

.form-page-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
  margin-left: 7px;
}

@media (min-width: 640px) {
  .form-page-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.form-page-title {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.025em;
}

.dark .form-page-title {
  color: #fff;
}

@media (min-width: 1024px) {
  .form-page-title {
    font-size: 28px;
  }
}

.form-page-subtitle {
  font-size: 14px;
  color: #6b7280;
  margin-top: 4px;
}

.dark .form-page-subtitle {
  color: #9ca3af;
}

/* Breadcrumb */

.form-page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #9ca3af;
  flex-shrink: 0;
}

.dark .form-page-breadcrumb {
  color: #6b7280;
}

.form-page-breadcrumb a {
  color: #6b7280;
  text-decoration: none;
  transition: color 0.15s;
}

.dark .form-page-breadcrumb a {
  color: #9ca3af;
}

.form-page-breadcrumb a:hover {
  color: #3b82f6;
}

.form-page-breadcrumb .fa-chevron-right {
  font-size: 9px;
  opacity: 0.5;
}

.form-page-breadcrumb span.active {
  color: #3b82f6;
  font-weight: 600;
}

/* ── Doc Panel ── */

.form-doc-panel {
  margin-bottom: 16px;
}

@media (min-width: 1024px) {
  .form-doc-panel {}
}

.form-doc-panel-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f3f4f6;
}

.dark .form-doc-panel-header {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.form-doc-icon-wrap {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.form-doc-icon-blue {
  background: #eff6ff;
  color: #3b82f6;
}

.dark .form-doc-icon-blue {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
}

.form-doc-icon-red {
  background: #fef2f2;
  color: #ef4444;
}

.dark .form-doc-icon-red {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}

.form-doc-icon-green {
  background: #ecfdf5;
  color: #10b981;
}

.dark .form-doc-icon-green {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
}

.form-doc-icon-purple {
  background: #faf5ff;
  color: #a855f7;
}

.dark .form-doc-icon-purple {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
}

.form-doc-desc {
  font-size: 14px;
  color: #6b7280;
  margin-top: 4px;
  line-height: 1.5;
}

.dark .form-doc-desc {
  color: #9ca3af;
}

/* ── Input with icon ── */

.form-input-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.form-input-icon {
  position: absolute;
  left: 14px;
  font-size: 14px;
  color: #9ca3af;
  z-index: 1;
  pointer-events: none;
}

.dark .form-input-icon {
  color: #6b7280;
}

.form-input-with-icon {
  padding-left: 40px !important;
}

/* ── Hints ── */

.form-hint {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 2px;
}

.dark .form-hint {
  color: #6b7280;
}

/* ── Required asterisk ── */

.form-required {
  color: #ef4444;
  font-weight: 700;
}

/* ── Validation states ── */

.form-input-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.dark .form-input-error {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

.form-input-success {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
}

.dark .form-input-success {
  border-color: #34d399 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}

.form-validation-msg {
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
  min-height: 18px;
  transition: color 0.15s;
  display: block;
}

.form-validation-msg:empty {
  display: none;
}

.form-error-msg {
  color: #ef4444;
}

.dark .form-error-msg {
  color: #f87171;
}

.form-success-msg {
  color: #10b981;
}

.dark .form-success-msg {
  color: #34d399;
}

/* ── Password strength bar (inside input) ── */

.password-input-wrap {
  position: relative;
}

.password-strength-bar {
  position: absolute;
  right: 12px;
  bottom: 10px;
  width: 60px;
  height: 4px;
  background: transparent;
  border-radius: 2px;
  overflow: hidden;
}

.password-strength-bar.active {
  background: #e5e7eb;
}

.dark .password-strength-bar.active {
  background: rgba(255, 255, 255, 0.08);
}

.password-strength-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  transition: width 0.3s ease, background 0.3s ease;
}

/* ── Form link ── */

.form-link {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s;
}

.form-link:hover {
  color: #2563eb;
  text-decoration: underline;
}

/* ── File upload dropzone ── */

.form-file-upload {
  position: relative;
  border: 2px dashed #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
  transition: all 0.2s;
  cursor: pointer;
}

.dark .form-file-upload {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.form-file-upload:hover {
  border-color: #3b82f6;
  background: #eff6ff;
}

.dark .form-file-upload:hover {
  border-color: rgba(59, 130, 246, 0.4);
  background: rgba(59, 130, 246, 0.05);
}

.form-file-upload-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  gap: 8px;
}

.form-file-upload-icon {
  font-size: 32px;
  color: #9ca3af;
  margin-bottom: 4px;
}

.dark .form-file-upload-icon {
  color: #6b7280;
}

.form-file-upload:hover .form-file-upload-icon {
  color: #3b82f6;
}

.form-file-upload-text {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.dark .form-file-upload-text {
  color: #d1d5db;
}

.form-file-upload-hint {
  font-size: 12px;
  color: #9ca3af;
}

.dark .form-file-upload-hint {
  color: #6b7280;
}

.form-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* ── Checkbox & Radio ── */

.form-check-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.form-check-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: color 0.15s;
}

.dark .form-check-label {
  color: #d1d5db;
}

.form-check-label:hover {
  color: #111827;
}

.dark .form-check-label:hover {
  color: #fff;
}

.form-checkbox,
.form-radio {
  width: 18px;
  height: 18px;
  accent-color: #3b82f6;
  cursor: pointer;
  flex-shrink: 0;
}

/* ══════ Select2 Theme Override ══════ */

.select2-container--default .select2-selection--single {
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  height: 42px !important;
  background: #f9fafb !important;
  padding: 6px 14px !important;
  transition: all 0.15s;
}

.dark .select2-container--default .select2-selection--single {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #111827 !important;
  font-size: 14px !important;
  font-family: 'Inter', sans-serif !important;
  line-height: 28px !important;
  padding-left: 0 !important;
}

.dark .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #f3f4f6 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px !important;
  right: 8px !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #9ca3af !important;
}

.dark .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #6b7280 !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
  background: #fff !important;
}

.dark .select2-container--default.select2-container--focus .select2-selection--single,
.dark .select2-container--default.select2-container--open .select2-selection--single {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Multiple select */

.select2-container--default .select2-selection--multiple {
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  background: #f9fafb !important;
  min-height: 42px !important;
  padding: 4px 8px !important;
  transition: all 0.15s;
  display: flex !important;
  /* FLEX on the outer container, not the UL */
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
}

.dark .select2-container--default .select2-selection--multiple {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
  background: #fff !important;
}

.dark .select2-container--default.select2-container--focus .select2-selection--multiple,
.dark .select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: contents !important;
  /* Let children flow into parent flex container */
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: #eff6ff !important;
  border: 1px solid #dbeafe !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #2563eb !important;
  padding: 3px 8px !important;
  margin: 0 !important;
  /* Managed by gap */
  display: inline-flex !important;
  align-items: center !important;
}

.dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
  color: #60a5fa !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #3b82f6 !important;
  margin-right: 6px !important;
  font-weight: 700 !important;
  position: static !important;
  transform: none !important;
}

.dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #60a5fa !important;
}

.select2-container--default .select2-selection--multiple .select2-search--inline {
  flex: 1 1 30px !important;
  /* Grow to fill remaining space in parent flex */
  min-width: 30px !important;
  margin: 0 !important;
  float: none !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}

.select2-container--default .select2-selection--multiple .select2-search__field {
  font-size: 14px !important;
  font-family: 'Inter', sans-serif !important;
  color: #111827 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: normal !important;
  width: 100% !important;
  /* Fill the flex wrapper */
  box-sizing: border-box !important;
}

.dark .select2-container--default .select2-selection--multiple .select2-search__field {
  color: #f3f4f6 !important;
}

/* Dropdown */

.select2-container--open {
  z-index: 100000 !important;
}

.select2-dropdown {
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
  overflow: hidden;
  margin-top: 4px;
  z-index: 100001 !important;
}

.dark .select2-dropdown {
  background: #16181d !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  font-family: 'Inter', sans-serif !important;
  background: #f9fafb !important;
  color: #111827 !important;
  outline: none !important;
}

.dark .select2-container--default .select2-search--dropdown .select2-search__field {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f3f4f6 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
}

.select2-container--default .select2-results__option {
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-family: 'Inter', sans-serif !important;
  color: #374151 !important;
  transition: all 0.1s;
}

.dark .select2-container--default .select2-results__option {
  color: #d1d5db !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: #eff6ff !important;
  color: #2563eb !important;
}

.dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background: #f3f4f6 !important;
  color: #111827 !important;
}

.dark .select2-container--default .select2-results__option[aria-selected=true] {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

.select2-search--dropdown {
  padding: 8px !important;
}

.select2-results__options {
  max-height: 240px !important;
}

/* Clear button */

.select2-container--default .select2-selection__clear {
  font-size: 18px !important;
  color: #9ca3af !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  z-index: 10;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
  right: 36px !important;
  /* give space for dropdown arrow */
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
  right: 12px !important;
}

.select2-container--default .select2-selection--single {
  padding-right: 36px !important;
}

.select2-container--default .select2-selection--multiple {
  padding-right: 32px !important;
}

.dark .select2-container--default .select2-selection__clear {
  color: #6b7280 !important;
}

.select2-container--default .select2-selection__clear:hover {
  color: #ef4444 !important;
}

/* Disabled */

.select2-container--default.select2-container--disabled .select2-selection--single {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  background: #f3f4f6 !important;
}

.dark .select2-container--default.select2-container--disabled .select2-selection--single {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* ══════ Form Action Buttons ══════ */

.form-actions {
  display: flex;
  flex-direction: row !important;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  flex-wrap: wrap;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 28px;
  width: auto !important;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  color: #fff;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
  white-space: nowrap;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
  transform: translateY(-1px);
}

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

.btn-sm {
  padding: 7px 16px;
  font-size: 13px;
  border-radius: 8px;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  color: #374151;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.dark .btn-secondary {
  color: #d1d5db;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}

.btn-secondary:hover {
  background: #e5e7eb;
  border-color: #d1d5db;
}

.dark .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
}

/* ══════ Select2 Tag Overflow Fix ══════ */

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  max-width: none !important;
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: nowrap !important;
}

/* ══════ CKEditor Theme Override ══════ */

.ck.ck-editor {
  border-radius: 10px !important;
  overflow: hidden;
}

.ck.ck-editor__top .ck-sticky-panel .ck-toolbar {
  border: 1px solid #e5e7eb !important;
  border-bottom: none !important;
  border-radius: 10px 10px 0 0 !important;
  background: #f9fafb !important;
}

.dark .ck.ck-editor__top .ck-sticky-panel .ck-toolbar {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.ck.ck-editor__main>.ck-editor__editable {
  border: 1px solid #e5e7eb !important;
  border-radius: 0 0 10px 10px !important;
  background: #fff !important;
  min-height: 200px;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: #111827 !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.dark .ck.ck-editor__main>.ck-editor__editable {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f3f4f6 !important;
}

.ck.ck-editor__main>.ck-editor__editable.ck-focused {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.dark .ck.ck-editor__main>.ck-editor__editable.ck-focused {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

.dark .ck.ck-toolbar .ck-toolbar__items .ck-button {
  color: #d1d5db !important;
}

.dark .ck.ck-toolbar .ck-toolbar__items .ck-button:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

.dark .ck.ck-toolbar .ck-toolbar__items .ck-button.ck-on {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
}

.dark .ck .ck-toolbar__separator {
  background: rgba(255, 255, 255, 0.08) !important;
}

.dark .ck.ck-dropdown__panel {
  background: #16181d !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark .ck.ck-list__item .ck-button:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* ══════ Small Form Variants ══════ */

.form-input-sm {
  padding: 7px 12px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
}

.form-input-icon-wrap-sm .form-input-icon {
  font-size: 12px !important;
  left: 12px !important;
}

.form-input-icon-wrap-sm .form-input-with-icon {
  padding-left: 32px !important;
}

/* Select2 Small */

.select2-sm .select2-selection--single {
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 8px !important;
  padding: 0 14px !important;
  /* Adjusted padding to remove top/bottom and rely on line-height */
}

.select2-sm .select2-selection--single .select2-selection__rendered {
  line-height: 32px !important;
  /* Reduced line-height slightly to allow centering */
  padding-left: 0 !important;
  font-size: 13px !important;
}

.select2-sm .select2-selection--single .select2-selection__arrow {
  height: 32px !important;
}

.select2-sm .select2-selection--multiple {
  min-height: 34px !important;
  border-radius: 8px !important;
  padding: 3px 6px !important;
  gap: 3px !important;
}

.select2-sm .select2-selection--multiple .select2-selection__rendered {
  padding: 0 !important;
}

.select2-sm .select2-selection--multiple .select2-selection__choice {
  font-size: 11px !important;
  padding: 2px 6px 2px 20px !important;
  margin: 0 !important;
  border-radius: 4px !important;
  position: relative !important;
  line-height: 1.2 !important;
}

.select2-sm .select2-selection--multiple .select2-selection__choice__remove {
  left: 5px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  position: absolute !important;
  font-size: 11px !important;
  margin-right: 0 !important;
}

.select2-sm .select2-selection--multiple .select2-search--inline .select2-search__field {
  margin-top: 0 !important;
  line-height: normal !important;
  font-size: 13px !important;
}

/* ══════════════════════════════════════════════════
   BUTTON DOCUMENTATION — Component Styles
   ══════════════════════════════════════════════════ */

/* ── Base Button ── */

.doc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.4;
}

.doc-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

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

.doc-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Solid Variants ── */

.doc-btn-primary {
  background: #3b82f6;
  color: #fff;
  border-color: #3b82f6;
}

.doc-btn-primary:hover {
  background: #2563eb;
  border-color: #2563eb;
}

.doc-btn-success {
  background: #10b981;
  color: #fff;
  border-color: #10b981;
}

.doc-btn-success:hover {
  background: #059669;
  border-color: #059669;
}

.doc-btn-danger {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
}

.doc-btn-danger:hover {
  background: #dc2626;
  border-color: #dc2626;
}

.doc-btn-warning {
  background: #f59e0b;
  color: #fff;
  border-color: #f59e0b;
}

.doc-btn-warning:hover {
  background: #d97706;
  border-color: #d97706;
}

.doc-btn-info {
  background: #06b6d4;
  color: #fff;
  border-color: #06b6d4;
}

.doc-btn-info:hover {
  background: #0891b2;
  border-color: #0891b2;
}

.doc-btn-secondary {
  background: #6b7280;
  color: #fff;
  border-color: #6b7280;
}

.doc-btn-secondary:hover {
  background: #4b5563;
  border-color: #4b5563;
}

.doc-btn-dark {
  background: #1f2937;
  color: #fff;
  border-color: #1f2937;
}

.doc-btn-dark:hover {
  background: #111827;
  border-color: #111827;
}

.dark .doc-btn-dark {
  background: #d1d5db;
  color: #111827;
  border-color: #d1d5db;
}

.dark .doc-btn-dark:hover {
  background: #e5e7eb;
  border-color: #e5e7eb;
}

/* ── Outline Variants ── */

.doc-btn-outline-primary {
  background: transparent;
  color: #3b82f6;
  border-color: #3b82f6;
}

.doc-btn-outline-primary:hover {
  background: #3b82f6;
  color: #fff;
}

.doc-btn-outline-success {
  background: transparent;
  color: #10b981;
  border-color: #10b981;
}

.doc-btn-outline-success:hover {
  background: #10b981;
  color: #fff;
}

.doc-btn-outline-danger {
  background: transparent;
  color: #ef4444;
  border-color: #ef4444;
}

.doc-btn-outline-danger:hover {
  background: #ef4444;
  color: #fff;
}

.doc-btn-outline-warning {
  background: transparent;
  color: #f59e0b;
  border-color: #f59e0b;
}

.doc-btn-outline-warning:hover {
  background: #f59e0b;
  color: #fff;
}

.doc-btn-outline-info {
  background: transparent;
  color: #06b6d4;
  border-color: #06b6d4;
}

.doc-btn-outline-info:hover {
  background: #06b6d4;
  color: #fff;
}

.doc-btn-outline-secondary {
  background: transparent;
  color: #6b7280;
  border-color: #6b7280;
}

.doc-btn-outline-secondary:hover {
  background: #6b7280;
  color: #fff;
}

.doc-btn-outline-dark {
  background: transparent;
  color: #1f2937;
  border-color: #1f2937;
}

.doc-btn-outline-dark:hover {
  background: #1f2937;
  color: #fff;
}

.dark .doc-btn-outline-dark {
  color: #d1d5db;
  border-color: #d1d5db;
}

.dark .doc-btn-outline-dark:hover {
  background: #d1d5db;
  color: #111827;
}

/* ── Pill ── */

.doc-btn-pill {
  border-radius: 50px;
}

/* ── Sizes ── */

.doc-btn-xs {
  padding: 4px 10px;
  font-size: 11px;
  gap: 5px;
  border-radius: 6px;
}

.doc-btn-sm {
  padding: 6px 14px;
  font-size: 12px;
  gap: 6px;
}

.doc-btn-lg {
  padding: 12px 24px;
  font-size: 15px;
  gap: 8px;
  border-radius: 10px;
}

.doc-btn-xs.doc-btn-pill {
  border-radius: 50px;
}

.doc-btn-sm.doc-btn-pill {
  border-radius: 50px;
}

.doc-btn-lg.doc-btn-pill {
  border-radius: 50px;
}

/* ── Icon-Only ── */

.doc-btn-icon {
  padding: 9px;
  width: 38px;
  height: 38px;
  gap: 0;
}

.doc-btn-icon.doc-btn-xs {
  width: 28px;
  height: 28px;
  padding: 4px;
  font-size: 11px;
}

.doc-btn-icon.doc-btn-sm {
  width: 32px;
  height: 32px;
  padding: 6px;
  font-size: 12px;
}

.doc-btn-icon.doc-btn-lg {
  width: 46px;
  height: 46px;
  padding: 12px;
  font-size: 16px;
}

/* ── Social (needs color via inline style) ── */

.doc-btn-social {
  color: #fff !important;
  border-color: transparent !important;
}

.doc-btn-social:hover {
  filter: brightness(1.1);
}

/* ── Button Group ── */

.doc-btn-group {
  display: inline-flex;
}

.doc-btn-group .doc-btn {
  border-radius: 0;
  margin-left: -2px;
}

.doc-btn-group .doc-btn:first-child {
  border-radius: 8px 0 0 8px;
  margin-left: 0;
}

.doc-btn-group .doc-btn:last-child {
  border-radius: 0 8px 8px 0;
}

.doc-btn-group .doc-btn:hover {
  z-index: 1;
}

/* ══════ Dropdown Button ══════ */

.doc-split-btn {
  position: relative;
  display: inline-flex;
}

.doc-split-btn .doc-btn:first-child {
  border-radius: 8px 0 0 8px;
}

.doc-split-btn .doc-split-toggle {
  border-radius: 0 8px 8px 0;
  padding: 9px 10px;
  margin-left: -2px;
  border-left: 2px solid rgba(255, 255, 255, 0.2);
}

.doc-split-btn .doc-btn-outline-primary+.doc-split-toggle.doc-btn-outline-primary {
  border-left-color: #3b82f6;
}

.doc-split-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  padding: 6px;
  z-index: 100;
  animation: splitMenuIn 0.15s ease;
}

.dark .doc-split-menu {
  background: #1a1d24;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.doc-split-menu.show {
  display: block;
}

@keyframes splitMenuIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

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

/* ══════ Split Button (two-segment) ══════ */

.doc-split-button {
  display: inline-flex;
  align-items: stretch;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: none;
  padding: 0;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s ease;
  background: none;
  text-decoration: none;
}

.doc-split-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  text-decoration: none;
}

.doc-split-button:active {
  transform: translateY(0);
  box-shadow: none;
}

.doc-split-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  font-size: 14px;
}

.doc-split-label {
  display: flex;
  align-items: center;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
}

/* -- Full width split variant -- */
.doc-split-button.w-full,
.doc-split-button.doc-split-full {
  display: flex;
  width: 100%;
}

.doc-split-button.w-full .doc-split-icon,
.doc-split-button.doc-split-full .doc-split-icon {
  flex-shrink: 0;
}

.doc-split-button.w-full .doc-split-label,
.doc-split-button.doc-split-full .doc-split-label {
  flex: 1;
  justify-content: center;
  text-align: center;
  min-width: 0;
}

/* -- Small split size variant -- */
.doc-split-sm .doc-split-icon,
.doc-split-button-sm .doc-split-icon {
  padding: 6px 10px;
  font-size: 12px;
}

.doc-split-sm .doc-split-label,
.doc-split-button-sm .doc-split-label {
  padding: 6px 12px;
  font-size: 12px;
}

/* -- Solid split variants -- */

.doc-split-primary .doc-split-icon {
  background: #2563eb;
  color: #fff;
}

.doc-split-primary .doc-split-label {
  background: #3b82f6;
  color: #fff;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.doc-split-success .doc-split-icon {
  background: #059669;
  color: #fff;
}

.doc-split-success .doc-split-label {
  background: #10b981;
  color: #fff;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.doc-split-danger .doc-split-icon {
  background: #dc2626;
  color: #fff;
}

.doc-split-danger .doc-split-label {
  background: #ef4444;
  color: #fff;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.doc-split-warning .doc-split-icon {
  background: #d97706;
  color: #fff;
}

.doc-split-warning .doc-split-label {
  background: #f59e0b;
  color: #fff;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.doc-split-info .doc-split-icon {
  background: #0891b2;
  color: #fff;
}

.doc-split-info .doc-split-label {
  background: #06b6d4;
  color: #fff;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.doc-split-secondary .doc-split-icon {
  background: #4b5563;
  color: #fff;
}

.doc-split-secondary .doc-split-label {
  background: #6b7280;
  color: #fff;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

/* -- Outline split variants -- */

.doc-split-outline-primary .doc-split-icon {
  background: #3b82f6;
  color: #fff;
}

.doc-split-outline-primary .doc-split-label {
  background: transparent;
  color: #3b82f6;
  border: 2px solid #3b82f6;
  border-left: none;
  border-radius: 0 8px 8px 0;
}

.doc-split-outline-primary .doc-split-icon {
  border-radius: 8px 0 0 8px;
}

.doc-split-outline-primary:hover .doc-split-label {
  background: rgba(59, 130, 246, 0.05);
}

.doc-split-outline-success .doc-split-icon {
  background: #10b981;
  color: #fff;
}

.doc-split-outline-success .doc-split-label {
  background: transparent;
  color: #10b981;
  border: 2px solid #10b981;
  border-left: none;
  border-radius: 0 8px 8px 0;
}

.doc-split-outline-success .doc-split-icon {
  border-radius: 8px 0 0 8px;
}

.doc-split-outline-success:hover .doc-split-label {
  background: rgba(16, 185, 129, 0.05);
}

.doc-split-outline-danger .doc-split-icon {
  background: #ef4444;
  color: #fff;
}

.doc-split-outline-danger .doc-split-label {
  background: transparent;
  color: #ef4444;
  border: 2px solid #ef4444;
  border-left: none;
  border-radius: 0 8px 8px 0;
}

.doc-split-outline-danger .doc-split-icon {
  border-radius: 8px 0 0 8px;
}

.doc-split-outline-danger:hover .doc-split-label {
  background: rgba(239, 68, 68, 0.05);
}

.doc-split-outline-warning .doc-split-icon {
  background: #f59e0b;
  color: #fff;
}

.doc-split-outline-warning .doc-split-label {
  background: transparent;
  color: #f59e0b;
  border: 2px solid #f59e0b;
  border-left: none;
  border-radius: 0 8px 8px 0;
}

.doc-split-outline-warning .doc-split-icon {
  border-radius: 8px 0 0 8px;
}

.doc-split-outline-warning:hover .doc-split-label {
  background: rgba(245, 158, 11, 0.05);
}

.doc-split-outline-info .doc-split-icon {
  background: #06b6d4;
  color: #fff;
}

.doc-split-outline-info .doc-split-label {
  background: transparent;
  color: #06b6d4;
  border: 2px solid #06b6d4;
  border-left: none;
  border-radius: 0 8px 8px 0;
}

.doc-split-outline-info .doc-split-icon {
  border-radius: 8px 0 0 8px;
}

.doc-split-outline-info:hover .doc-split-label {
  background: rgba(6, 182, 212, 0.05);
}

.doc-split-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 13px;
  color: #374151;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.15s;
}

.doc-split-item:hover {
  background: #f3f4f6;
  color: #111827;
}

.dark .doc-split-item {
  color: #d1d5db;
}

.dark .doc-split-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.doc-split-item-danger {
  color: #ef4444 !important;
}

.doc-split-item-danger:hover {
  background: #fef2f2 !important;
}

.dark .doc-split-item-danger:hover {
  background: rgba(239, 68, 68, 0.1) !important;
}

/* ── Counter Widget ── */

.counter-widget {
  display: flex;
  align-items: center;
  gap: 12px;
}

.counter-display {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: all 0.2s ease;
}

.counter-value {
  font-size: 28px;
  font-weight: 800;
  color: #6366f1;
  font-family: 'Outfit', sans-serif;
  line-height: 1;
  transition: color 0.2s ease;
}

.counter-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  transition: all 0.2s ease;
}

.counter-btn:hover {
  transform: scale(1.1);
}

.counter-btn:active {
  transform: scale(0.95);
}

.counter-btn-minus {
  background: #fef2f2;
  color: #ef4444;
  border-color: #fecaca;
}

.counter-btn-minus:hover {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.dark .counter-btn-minus {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
}

.dark .counter-btn-minus:hover {
  background: #ef4444;
  color: #fff;
}

.counter-btn-plus {
  background: #ecfdf5;
  color: #10b981;
  border-color: #a7f3d0;
}

.counter-btn-plus:hover {
  background: #10b981;
  color: #fff;
  border-color: #10b981;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.dark .counter-btn-plus {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.2);
}

.dark .counter-btn-plus:hover {
  background: #10b981;
  color: #fff;
}

/* ── Toggle active state ── */

.doc-btn-toggled {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #fff !important;
}

/* Extracted from modal-alerts.php */

/* ── SweetAlert Demo Button Styles ── */

.swal-demo-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 16px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s ease;
  text-align: center;
}

.swal-demo-btn i {
  font-size: 22px;
}

.swal-demo-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.swal-demo-btn:active {
  transform: translateY(0);
}

.swal-demo-success {
  background: #ecfdf5;
  color: #059669;
}

.dark .swal-demo-success {
  background: rgba(16, 185, 129, 0.1);
  color: #34d399;
}

.swal-demo-error {
  background: #fef2f2;
  color: #dc2626;
}

.dark .swal-demo-error {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
}

.swal-demo-warning {
  background: #fffbeb;
  color: #d97706;
}

.dark .swal-demo-warning {
  background: rgba(245, 158, 11, 0.1);
  color: #fbbf24;
}

.swal-demo-info {
  background: #eff6ff;
  color: #2563eb;
}

.dark .swal-demo-info {
  background: rgba(59, 130, 246, 0.1);
  color: #60a5fa;
}

.swal-demo-question {
  background: #f5f3ff;
  color: #7c3aed;
}

.dark .swal-demo-question {
  background: rgba(139, 92, 246, 0.1);
  color: #a78bfa;
}

.swal-demo-outline {
  background: #fff;
  color: #374151;
  border: 1px solid #e5e7eb;
}

.dark .swal-demo-outline {
  background: rgba(255, 255, 255, 0.03);
  color: #d1d5db;
  border-color: rgba(255, 255, 255, 0.08);
}

.swal-demo-outline:hover {
  border-color: #3b82f6;
  color: #3b82f6;
}

.dark .swal-demo-outline:hover {
  border-color: #3b82f6;
  color: #60a5fa;
}

/* SweetAlert2 Theme Override */

div.swal2-container {
  z-index: 100050 !important;
}

.swal2-popup {
  font-family: 'Inter', sans-serif !important;
  border-radius: 16px !important;
}

.dark .swal2-popup {
  background: #1a1d24 !important;
  color: #e2e8f0 !important;
}

.dark .swal2-title {
  color: #f1f5f9 !important;
}

.dark .swal2-html-container {
  color: #94a3b8 !important;
}

.dark .swal2-input,
.dark .swal2-textarea,
.dark .swal2-select {
  background: #0c0e14 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f1f5f9 !important;
}

/* ══════ Custom Modal ══════ */

.custom-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
}

.custom-modal-overlay.show {
  display: flex;
  animation: modalOverlayIn 0.2s ease;
}

@keyframes modalOverlayIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.custom-modal-dialog {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  width: 100%;
  margin: auto;
  animation: modalSlideIn 0.25s ease;
  overflow: hidden;
}

.dark .custom-modal-dialog {
  background: #1a1d24;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.97);
  }

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

/* sizes */

.custom-modal-sm {
  max-width: 360px;
}

.custom-modal-md {
  max-width: 540px;
}

.custom-modal-xl {
  max-width: 800px;
}

.custom-modal-xxl {
  max-width: 1240px;
  width: 96%;
}

.custom-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
}

.dark .custom-modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.custom-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  font-family: 'Outfit', sans-serif;
  margin: 0;
}

.dark .custom-modal-title {
  color: #f1f5f9;
}

.custom-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.15s;
}

.custom-modal-close:hover {
  color: #111827;
  background: #f3f4f6;
}

.dark .custom-modal-close {
  color: #9ca3af;
}

.dark .custom-modal-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.custom-modal-body {
  padding: 20px;
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
}

.dark .custom-modal-body {
  color: #9ca3af;
}

.custom-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid #e5e7eb;
}

.dark .custom-modal-footer {
  border-top-color: rgba(255, 255, 255, 0.06);
}

@media (max-width: 639.98px) {
  .custom-modal-overlay {
    padding: 12px 10px;
  }

  .custom-modal-dialog {
    border-radius: 14px;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
  }

  .custom-modal-header {
    padding: 12px 16px;
  }

  .custom-modal-body {
    padding: 14px 14px;
  }

  .custom-modal-body-scroll {
    max-height: calc(94vh - 110px);
    overflow-y: auto;
  }

  .custom-modal-footer {
    padding: 10px 14px;
  }
}

/* ══════ HTML Toast ══════ */

.html-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100060 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.html-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 300px;
  max-width: 420px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  border-left: 4px solid #3b82f6;
  font-family: 'Inter', sans-serif;
  pointer-events: auto;
  animation: toastSlideIn 0.35s ease;
  transition: all 0.3s ease;
}

.dark .html-toast {
  background: #1a1d24;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.html-toast.toast-out {
  opacity: 0;
  transform: translateX(100px);
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(100px);
  }

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

.html-toast-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.html-toast-content {
  flex: 1;
}

.html-toast-title {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.dark .html-toast-title {
  color: #f1f5f9;
}

.html-toast-close {
  background: none;
  border: none;
  font-size: 16px;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.15s;
  flex-shrink: 0;
}

.html-toast-close:hover {
  color: #111827;
  background: #f3f4f6;
}

.dark .html-toast-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.html-toast-progress {
  position: absolute;
  bottom: 0;
  left: 4px;
  height: 3px;
  border-radius: 0 0 12px 12px;
  animation: toastProgress 4s linear forwards;
}

@keyframes toastProgress {
  from {
    width: 100%;
  }

  to {
    width: 0%;
  }
}

/* toast colors */

.html-toast.toast-success {
  border-left-color: #10b981;
}

.html-toast.toast-success .html-toast-icon {
  color: #10b981;
}

.html-toast.toast-error {
  border-left-color: #ef4444;
}

.html-toast.toast-error .html-toast-icon {
  color: #ef4444;
}

.html-toast.toast-warning {
  border-left-color: #f59e0b;
}

.html-toast.toast-warning .html-toast-icon {
  color: #f59e0b;
}

.html-toast.toast-info {
  border-left-color: #3b82f6;
}

.html-toast.toast-info .html-toast-icon {
  color: #3b82f6;
}

.html-toast.toast-default {
  border-left-color: #6b7280;
}

.html-toast.toast-default .html-toast-icon {
  color: #6b7280;
}

/* ══════ Modal Shake Animation ══════ */

@keyframes modalShake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-6px);
  }

  50% {
    transform: translateX(6px);
  }

  75% {
    transform: translateX(-4px);
  }
}

/* ══════════════════════════════════════════════════
   Entrance Animation — Demo Card Styles
   ══════════════════════════════════════════════════ */

.anim-demo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 12px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  transition: border-color 0.2s, box-shadow 0.2s;
  text-align: center;
  animation-fill-mode: both;
}

.dark .anim-demo-card {
  background: #1a1d24;
  border-color: rgba(255, 255, 255, 0.08);
}

.anim-demo-card:hover {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.anim-demo-icon {
  font-size: 24px;
  color: #3b82f6;
}

.anim-demo-label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.dark .anim-demo-label {
  color: #e5e7eb;
}

.anim-demo-code {
  font-size: 10px;
  font-family: 'Courier New', monospace;
  background: #f3f4f6;
  color: #6366f1;
  padding: 3px 8px;
  border-radius: 6px;
}

.dark .anim-demo-code {
  background: rgba(255, 255, 255, 0.06);
  color: #a5b4fc;
}

/* ── Stagger cards ── */

.anim-stagger-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 8px;
  border-radius: 14px;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: #fff;
  animation-fill-mode: both;
}

.anim-stagger-number {
  font-size: 22px;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.03em;
}

.anim-stagger-text {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.7;
}

/* ══════════════════════════════════════════════════
   @keyframes — Entrance Animations
   ══════════════════════════════════════════════════ */

/* ── Fade ── */

@keyframes anim-fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes anim-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

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

@keyframes anim-fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-24px);
  }

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

@keyframes anim-fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }

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

@keyframes anim-fadeInRight {
  from {
    opacity: 0;
    transform: translateX(24px);
  }

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

/* ── Slide ── */

@keyframes anim-slideInUp {
  from {
    opacity: 0;
    transform: translateY(80px);
  }

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

@keyframes anim-slideInDown {
  from {
    opacity: 0;
    transform: translateY(-80px);
  }

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

@keyframes anim-slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-80px);
  }

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

@keyframes anim-slideInRight {
  from {
    opacity: 0;
    transform: translateX(80px);
  }

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

/* ── Zoom ── */

@keyframes anim-zoomIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }

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

@keyframes anim-zoomInUp {
  from {
    opacity: 0;
    transform: scale(0.5) translateY(40px);
  }

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

@keyframes anim-zoomInDown {
  from {
    opacity: 0;
    transform: scale(0.5) translateY(-40px);
  }

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

/* ── Bounce ── */

@keyframes anim-bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }

  70% {
    transform: scale(0.95);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes anim-bounceInUp {
  0% {
    opacity: 0;
    transform: translateY(60px);
  }

  60% {
    opacity: 1;
    transform: translateY(-10px);
  }

  80% {
    transform: translateY(4px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes anim-bounceInDown {
  0% {
    opacity: 0;
    transform: translateY(-60px);
  }

  60% {
    opacity: 1;
    transform: translateY(10px);
  }

  80% {
    transform: translateY(-4px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Flip ── */

@keyframes anim-flipInX {
  from {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
  }

  40% {
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    transform: perspective(400px) rotateX(10deg);
  }

  to {
    opacity: 1;
    transform: perspective(400px) rotateX(0);
  }
}

@keyframes anim-flipInY {
  from {
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
  }

  40% {
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    transform: perspective(400px) rotateY(10deg);
  }

  to {
    opacity: 1;
    transform: perspective(400px) rotateY(0);
  }
}

@keyframes anim-flipInDiagonal {
  from {
    opacity: 0;
    transform: perspective(400px) rotate3d(1, 1, 0, 70deg);
  }

  40% {
    transform: perspective(400px) rotate3d(1, 1, 0, -10deg);
  }

  to {
    opacity: 1;
    transform: perspective(400px) rotate3d(1, 1, 0, 0deg);
  }
}

/* ── Rotate ── */

@keyframes anim-rotateIn {
  from {
    opacity: 0;
    transform: rotate(-200deg);
  }

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

@keyframes anim-rotateInUpLeft {
  from {
    opacity: 0;
    transform: rotate(45deg);
    transform-origin: left bottom;
  }

  to {
    opacity: 1;
    transform: rotate(0);
    transform-origin: left bottom;
  }
}

@keyframes anim-rotateInUpRight {
  from {
    opacity: 0;
    transform: rotate(-45deg);
    transform-origin: right bottom;
  }

  to {
    opacity: 1;
    transform: rotate(0);
    transform-origin: right bottom;
  }
}

/* ── Special: Jelly ── */

@keyframes anim-jelly {
  0% {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }

  30% {
    transform: scale(1.2, 0.8);
  }

  40% {
    transform: scale(0.85, 1.15);
  }

  50% {
    transform: scale(1.08, 0.92);
  }

  65% {
    transform: scale(0.98, 1.02);
  }

  75% {
    transform: scale(1.02, 0.98);
  }

  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

/* ── Special: Rubber Band ── */

@keyframes anim-rubberBand {
  0% {
    opacity: 0;
    transform: scale(1);
  }

  30% {
    opacity: 1;
    transform: scaleX(1.25) scaleY(0.75);
  }

  40% {
    transform: scaleX(0.75) scaleY(1.25);
  }

  50% {
    transform: scaleX(1.15) scaleY(0.85);
  }

  65% {
    transform: scaleX(0.95) scaleY(1.05);
  }

  75% {
    transform: scaleX(1.05) scaleY(0.95);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Special: Swing In ── */

@keyframes anim-swingIn {
  0% {
    opacity: 0;
    transform: rotateZ(-30deg);
    transform-origin: top center;
  }

  30% {
    transform: rotateZ(15deg);
  }

  60% {
    transform: rotateZ(-7deg);
  }

  80% {
    transform: rotateZ(4deg);
  }

  100% {
    opacity: 1;
    transform: rotateZ(0);
  }
}

/* ── Special: Blur In ── */

@keyframes anim-blurIn {
  from {
    opacity: 0;
    filter: blur(12px);
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

/* ══════ Entrance Animation Classes ══════ */

.anim-fade-in {
  animation: anim-fadeIn .6s cubic-bezier(.22, 1, .36, 1) both;
}

.anim-fade-in-up {
  animation: anim-fadeInUp .6s cubic-bezier(.22, 1, .36, 1) both;
}

.anim-fade-in-down {
  animation: anim-fadeInDown .6s cubic-bezier(.22, 1, .36, 1) both;
}

.anim-fade-in-left {
  animation: anim-fadeInLeft .6s cubic-bezier(.22, 1, .36, 1) both;
}

.anim-fade-in-right {
  animation: anim-fadeInRight .6s cubic-bezier(.22, 1, .36, 1) both;
}

.anim-slide-in-up {
  animation: anim-slideInUp .6s cubic-bezier(.22, 1, .36, 1) both;
}

.anim-slide-in-down {
  animation: anim-slideInDown .6s cubic-bezier(.22, 1, .36, 1) both;
}

.anim-slide-in-left {
  animation: anim-slideInLeft .6s cubic-bezier(.22, 1, .36, 1) both;
}

.anim-slide-in-right {
  animation: anim-slideInRight .6s cubic-bezier(.22, 1, .36, 1) both;
}

.anim-zoom-in {
  animation: anim-zoomIn .6s cubic-bezier(.22, 1, .36, 1) both;
}

.anim-zoom-in-up {
  animation: anim-zoomInUp .6s cubic-bezier(.22, 1, .36, 1) both;
}

.anim-zoom-in-down {
  animation: anim-zoomInDown .6s cubic-bezier(.22, 1, .36, 1) both;
}

.anim-bounce-in {
  animation: anim-bounceIn .7s cubic-bezier(.22, 1, .36, 1) both;
}

.anim-bounce-in-up {
  animation: anim-bounceInUp .7s cubic-bezier(.22, 1, .36, 1) both;
}

.anim-bounce-in-down {
  animation: anim-bounceInDown .7s cubic-bezier(.22, 1, .36, 1) both;
}

.anim-flip-in-x {
  animation: anim-flipInX .8s ease both;
}

.anim-flip-in-y {
  animation: anim-flipInY .8s ease both;
}

.anim-flip-in-diagonal {
  animation: anim-flipInDiagonal .8s ease both;
}

.anim-rotate-in {
  animation: anim-rotateIn .6s cubic-bezier(.22, 1, .36, 1) both;
}

.anim-rotate-in-up-left {
  animation: anim-rotateInUpLeft .6s cubic-bezier(.22, 1, .36, 1) both;
}

.anim-rotate-in-up-right {
  animation: anim-rotateInUpRight .6s cubic-bezier(.22, 1, .36, 1) both;
}

.anim-jelly {
  animation: anim-jelly .9s ease both;
}

.anim-rubber-band {
  animation: anim-rubberBand .9s ease both;
}

.anim-swing-in {
  animation: anim-swingIn .8s ease both;
}

.anim-blur-in {
  animation: anim-blurIn .6s cubic-bezier(.22, 1, .36, 1) both;
}

/* ── Duration Modifiers ── */

.anim-fast {
  animation-duration: .3s !important;
}

.anim-slow {
  animation-duration: 1s !important;
}

.anim-slower {
  animation-duration: 1.5s !important;
}

/* ── Modal overlay animation ── */

.custom-modal-overlay.anim-modal-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ══════════════════════════════════════════════════
   Animation Gate — pause until page is ready
   ══════════════════════════════════════════════════ */

body:not(.anim-ready) [class*="anim-"]:not(.custom-modal-overlay):not(.anim-modal-active) {
  animation-play-state: paused !important;
}

.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\:text-blue-500:hover {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-800:hover {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

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

.dark\:block:is(.dark *) {
  display: block;
}

.dark\:hidden:is(.dark *) {
  display: none;
}

.dark\:divide-gray-800:is(.dark *)> :not([hidden])~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(31 41 55 / var(--tw-divide-opacity, 1));
}

.dark\:border-\[\#1a1d24\]:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(26 29 36 / var(--tw-border-opacity, 1));
}

.dark\:border-blue-500\/20:is(.dark *) {
  border-color: rgb(59 130 246 / 0.2);
}

.dark\:border-gray-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}

.dark\:border-white\/10:is(.dark *) {
  border-color: rgb(255 255 255 / 0.1);
}

.dark\:border-white\/5:is(.dark *) {
  border-color: rgb(255 255 255 / 0.05);
}

.dark\:bg-\[\#1a1d24\]:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(26 29 36 / var(--tw-bg-opacity, 1));
}

.dark\:bg-amber-500\/10:is(.dark *) {
  background-color: rgb(245 158 11 / 0.1);
}

.dark\:bg-blue-500\/10:is(.dark *) {
  background-color: rgb(59 130 246 / 0.1);
}

.dark\:bg-blue-900\/30:is(.dark *) {
  background-color: rgb(30 58 138 / 0.3);
}

.dark\:bg-cyan-500\/10:is(.dark *) {
  background-color: rgb(6 182 212 / 0.1);
}

.dark\:bg-emerald-500\/10:is(.dark *) {
  background-color: rgb(16 185 129 / 0.1);
}

.dark\:bg-emerald-900\/30:is(.dark *) {
  background-color: rgb(6 78 59 / 0.3);
}

.dark\:bg-indigo-500\/10:is(.dark *) {
  background-color: rgb(99 102 241 / 0.1);
}

.dark\:bg-orange-500\/10:is(.dark *) {
  background-color: rgb(249 115 22 / 0.1);
}

.dark\:bg-orange-900\/30:is(.dark *) {
  background-color: rgb(124 45 18 / 0.3);
}

.dark\:bg-pink-500\/10:is(.dark *) {
  background-color: rgb(236 72 153 / 0.1);
}

.dark\:bg-purple-500\/10:is(.dark *) {
  background-color: rgb(168 85 247 / 0.1);
}

.dark\:bg-red-500\/10:is(.dark *) {
  background-color: rgb(239 68 68 / 0.1);
}

.dark\:bg-teal-500\/10:is(.dark *) {
  background-color: rgb(20 184 166 / 0.1);
}

.dark\:bg-white\/10:is(.dark *) {
  background-color: rgb(255 255 255 / 0.1);
}

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

.dark\:text-blue-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}

.dark\:text-blue-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}

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

.dark\:text-emerald-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}

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

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

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

.dark\:text-orange-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}

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

.dark\:ring-\[\#1a1d24\]:is(.dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(26 29 36 / var(--tw-ring-opacity, 1));
}

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

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

.dark\:hover\:text-blue-300:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}

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

@media (min-width: 640px) {
  .sm\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .sm\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .sm\:block {
    display: block;
  }

  .sm\:h-auto {
    height: auto;
  }

  .sm\:w-48 {
    width: 12rem;
  }

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

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

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

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:gap-3 {
    gap: 0.75rem;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }
}

@media (min-width: 768px) {
  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

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

  .md\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .md\:hidden {
    display: none;
  }

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

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

@media (min-width: 1024px) {
  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .lg\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .lg\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .lg\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .lg\:col-span-7 {
    grid-column: span 7 / span 7;
  }

  .lg\:col-span-8 {
    grid-column: span 8 / span 8;
  }

  .lg\:block {
    display: block;
  }

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

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

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

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

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

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

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

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

  .lg\:gap-6 {
    gap: 1.5rem;
  }
}

/* === POS Custom Styles (Moved from pos.php) === */
/* ── POS 1-Screen Layout (Desktop lg+ 1024px) ── */
@media (min-width: 1024px) {
  main.main-content.pos-page {
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    height: calc(100vh - 84px) !important;
    /* Force exact fit against viewport */
    padding-bottom: 0 !important;
  }

  main.main-content.pos-page .app-footer {
    flex-shrink: 0;
  }

  main.main-content.pos-page .form-page-header {
    flex-shrink: 0;
    margin-bottom: 16px !important;
  }

  main.main-content.pos-page .pos-main-wrapper {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    margin-bottom: 0 !important;
  }

  main.main-content.pos-page .pos-layout-col {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  main.main-content.pos-page .pos-layout-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 0 !important;
    overflow-y: auto;
    /* Fallback scroll if inner form elements are overwhelmingly tall */
  }

  main.main-content.pos-page .pos-product-scroll {
    flex: 1 !important;
    min-height: 160px !important;
    /* Minimum visibility threshold */
    overflow-y: auto;
  }

  main.main-content.pos-page .pos-cart-items {
    flex: 1 !important;
    min-height: 120px !important;
    /* Prevent items list shrinking to 0 */
    max-height: none !important;
    overflow-y: auto;
  }

  main.main-content.pos-page .pos-layout-panel>*:not(.pos-product-scroll):not(.pos-cart-items) {
    flex-shrink: 0;
  }
}

/* ── POS Category Tabs ── */
.pos-cat-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid transparent;
  background: rgba(0, 0, 0, 0.03);
  color: #6b7280;
  transition: all 0.2s ease;
  font-family: 'Inter', sans-serif;
}

.pos-cat-tab:hover {
  background: rgba(59, 130, 246, 0.06);
  color: #3b82f6;
  border-color: rgba(59, 130, 246, 0.15);
}

.pos-cat-tab.active {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 15px -3px rgba(59, 130, 246, 0.35);
}

.dark .pos-cat-tab {
  background: rgba(255, 255, 255, 0.05);
  color: #9ca3af;
}

.dark .pos-cat-tab:hover {
  background: rgba(59, 130, 246, 0.1);
  color: #60a5fa;
}

.dark .pos-cat-tab.active {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: #fff;
}

/* ── POS Product Card ── */
.pos-product-card {
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  align-items: center;
  height: 76px;
}

.pos-product-card:hover {
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.12);
  transform: translateY(-1px);
}

.pos-product-card.out-of-stock {
  opacity: 0.5;
  pointer-events: none;
}

.dark .pos-product-card {
  background: #1a1d24;
  border-color: rgba(255, 255, 255, 0.06);
}

.dark .pos-product-card:hover {
  border-color: rgba(59, 130, 246, 0.35);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
}

.pos-product-img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  background: linear-gradient(135deg, #f0f4ff, #e8edf5);
  flex-shrink: 0;
  position: relative;
}

.pos-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pos-product-badge {
  display: none;
  /* Hide standard badge in compact view */
}

.pos-stock-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 8px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  backdrop-filter: blur(4px);
  line-height: 1;
}

.pos-product-info {
  padding: 6px 36px 6px 10px;
  /* Right padding to make room for absolute button */
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pos-product-name {
  font-size: 11px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 2px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dark .pos-product-name {
  color: #f3f4f6;
}

.pos-product-cat {
  display: none;
  /* Hide category to save vertical space */
}

.pos-product-price {
  font-size: 12px;
  font-weight: 700;
  color: #3b82f6;
  font-family: 'Outfit', sans-serif;
  margin-top: 2px;
}

.pos-product-actions {
  display: block;
}

.pos-add-btn {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 26px;
  height: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pos-add-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.35);
}

/* ── Cart Panel ── */
.pos-cart-panel {
  display: flex;
  flex-direction: column;
}

.pos-cart-items {
  min-height: 180px;
  max-height: 340px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.pos-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: #9ca3af;
}

.pos-cart-empty i {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: 0.3;
}

.pos-cart-empty p {
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 4px;
}

.dark .pos-cart-empty p {
  color: #9ca3af;
}

.pos-cart-empty span {
  font-size: 12px;
  color: #9ca3af;
}

/* ── Cart Item ── */
.pos-cart-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  margin-bottom: 8px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
  animation: posCartSlideIn 0.3s ease;
}

.pos-cart-item:hover {
  background: rgba(59, 130, 246, 0.03);
  border-color: rgba(59, 130, 246, 0.1);
}

.dark .pos-cart-item {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.05);
}

.dark .pos-cart-item:hover {
  background: rgba(59, 130, 246, 0.06);
  border-color: rgba(59, 130, 246, 0.15);
}

@keyframes posCartSlideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

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

.pos-cart-item-img {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: #f0f4ff;
}

.pos-cart-item-info {
  flex: 1;
  min-width: 0;
}

.pos-cart-item-name {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .pos-cart-item-name {
  color: #f3f4f6;
}

.pos-cart-item-price {
  font-size: 12px;
  color: #3b82f6;
  font-weight: 600;
}

.pos-cart-item-qty {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 6px;
}

.pos-qty-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 12px;
}

.pos-qty-btn:hover {
  border-color: #3b82f6;
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.05);
}

.dark .pos-qty-btn {
  background: #1a1d24;
  border-color: rgba(255, 255, 255, 0.1);
  color: #9ca3af;
}

.dark .pos-qty-btn:hover {
  border-color: #3b82f6;
  color: #60a5fa;
}

.pos-qty-value {
  width: 36px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
  font-family: 'Outfit', sans-serif;
}

.dark .pos-qty-value {
  color: #f3f4f6;
}

.pos-cart-item-total {
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
  font-family: 'Outfit', sans-serif;
  white-space: nowrap;
  text-align: right;
}

.dark .pos-cart-item-total {
  color: #f3f4f6;
}

.pos-cart-item-remove {
  color: #ef4444;
  cursor: pointer;
  font-size: 13px;
  opacity: 0.5;
  transition: all 0.15s;
  padding: 4px;
  display: block;
  text-align: right;
  margin-top: auto;
  background: transparent;
  border: none;
}

.pos-cart-item-remove:hover {
  opacity: 1;
}

/* ── Cart Summary ── */
.pos-cart-summary {
  border-top: 1.5px solid rgba(0, 0, 0, 0.06);
  padding-top: 16px;
}

.dark .pos-cart-summary {
  border-top-color: rgba(255, 255, 255, 0.06);
}

.pos-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
  color: #6b7280;
}

.dark .pos-summary-row {
  color: #9ca3af;
}

.pos-summary-divider {
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.2), transparent);
  margin: 10px 0;
}

.pos-total-row {
  font-size: 18px;
  font-weight: 800;
  color: #1f2937;
  font-family: 'Outfit', sans-serif;
  padding: 8px 0 16px;
}

.dark .pos-total-row {
  color: #f3f4f6;
}

.pos-total-row span:last-child {
  color: #3b82f6;
  font-size: 22px;
}

/* ── Discount ── */
.pos-discount-toggle {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #9ca3af;
  transition: all 0.15s;
}

.pos-discount-toggle:hover {
  border-color: #3b82f6;
  color: #3b82f6;
}

.dark .pos-discount-toggle {
  border-color: rgba(255, 255, 255, 0.1);
}

.pos-discount-panel {
  background: rgba(59, 130, 246, 0.04);
  border: 1px solid rgba(59, 130, 246, 0.1);
  border-radius: 10px;
  padding: 10px;
  margin: 6px 0;
}

.dark .pos-discount-panel {
  background: rgba(59, 130, 246, 0.06);
  border-color: rgba(59, 130, 246, 0.15);
}

.pos-disc-type-btn {
  padding: 5px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s;
}

.pos-disc-type-btn.active {
  background: #3b82f6;
  color: #fff;
  border-color: #3b82f6;
}

.dark .pos-disc-type-btn {
  border-color: rgba(255, 255, 255, 0.1);
  color: #9ca3af;
}

/* ── Payment Method Buttons ── */
.pos-payment-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border-radius: 12px;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #6b7280;
  font-size: 11px;
  font-weight: 600;
}

.pos-payment-btn i {
  font-size: 18px;
}

.pos-payment-btn:hover {
  border-color: rgba(59, 130, 246, 0.3);
  color: #3b82f6;
}

.pos-payment-btn.active {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.06);
  color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);
}

.dark .pos-payment-btn {
  background: #16181d;
  border-color: rgba(255, 255, 255, 0.08);
  color: #9ca3af;
}

.dark .pos-payment-btn.active {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
  color: #60a5fa;
}

/* ── Quick Cash Buttons ── */
.pos-quick-cash {
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s;
}

.pos-quick-cash:hover {
  border-color: #3b82f6;
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.04);
}

.dark .pos-quick-cash {
  border-color: rgba(255, 255, 255, 0.08);
  color: #9ca3af;
}

/* ── Change Display ── */
.pos-change-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  margin-top: 8px;
  border-radius: 8px;
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.15);
  font-size: 13px;
  color: #6b7280;
}

.dark .pos-change-display {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.2);
}

/* ── Empty State ── */
.pos-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #9ca3af;
}

.pos-empty-state i {
  font-size: 60px;
  opacity: 0.2;
  margin-bottom: 16px;
}

.pos-empty-state h4 {
  font-size: 16px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 6px;
}

.dark .pos-empty-state h4 {
  color: #9ca3af;
}

.pos-empty-state p {
  font-size: 13px;
}

/* ── Product card added animation ── */
.pos-product-card.pos-added {
  animation: posAddedPulse 0.5s ease;
}

@keyframes posAddedPulse {
  0% {
    box-shadow: 0 0 0 0px rgba(59, 130, 246, 0.5);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
  }

  100% {
    box-shadow: 0 0 0 0px rgba(59, 130, 246, 0);
  }
}

/* ── Scrollable Product Grid Container ── */
.pos-product-scroll {
  overflow-x: hidden;
  padding-right: 4px;
  margin-right: -4px;
}

/* ── Pagination ── */
.pos-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  flex-wrap: wrap;
  gap: 12px;
}

.dark .pos-pagination {
  border-top-color: rgba(255, 255, 255, 0.06);
}

.pos-pagination-info {
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
}

.dark .pos-pagination-info {
  color: #9ca3af;
}

.pos-pagination-btns {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pos-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  color: #6b7280;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pos-page-btn:hover {
  border-color: rgba(59, 130, 246, 0.3);
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.04);
}

.pos-page-btn.active {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 10px -2px rgba(59, 130, 246, 0.3);
}

.pos-page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.dark .pos-page-btn {
  background: #1a1d24;
  border-color: rgba(255, 255, 255, 0.08);
  color: #9ca3af;
}

.dark .pos-page-btn:hover {
  border-color: rgba(59, 130, 246, 0.3);
  color: #60a5fa;
}

.dark .pos-page-btn.active {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: #fff;
}

/* ── Responsive ── */
@media (max-width: 1279px) {
  .pos-cart-panel {
    position: static !important;
  }

  .pos-product-scroll {
    max-height: none;
    overflow-y: visible;
  }
}

/* === POS Override Layout (Card Vertical) === */
.pos-product-card {
  flex-direction: column !important;
  align-items: stretch !important;
  height: auto !important;
}

.pos-product-img {
  width: 100% !important;
  height: 110px !important;
}

.pos-product-info {
  padding: 10px 10px 38px 10px !important;
  /* Bottom padding for the absolute add button */
}

.pos-product-name {
  font-size: 13px !important;
  line-height: 1.4 !important;
  margin-bottom: 4px !important;
}

.pos-product-price {
  font-size: 14px !important;
}

/* === POS Scroll Padding Override === */
.pos-product-scroll {
  padding-right: 12px !important;
  margin-right: -12px !important;
}

.pos-cart-items {
  padding-right: 12px !important;
  margin-right: -12px !important;
}

/* ══════ Back to Top Button ══════ */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 20px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #3b82f6;
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    visibility 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.3s ease,
    box-shadow 0.3s ease;
  z-index: 50;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: #2563eb;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.5);
}

.dark .back-to-top {
  background: #2563eb;
}

.dark .back-to-top:hover {
  background: #3b82f6;
}

@media (min-width: 1025px) {
  .back-to-top {
    right: 30px;
    bottom: 58px;
  }
}
/* ------------------------------------------------------
   Bayi List Page — Component Classes
   (dipindahkan dari inline style di bayi_list.php)
   ------------------------------------------------------ */

/* Page Header icon */
.page-title-icon {
  color: #3b82f6;
  margin-right: 8px;
}

/* Table: nomor urut */
.td-no {
  color: #6b7280;
  font-weight: 500;
}

/* Table: avatar gender circle */
.td-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.td-avatar-male {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
}

.td-avatar-female {
  background: rgba(236, 72, 153, 0.12);
  color: #ec4899;
}

/* Table: nama bayi */
.td-name-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.td-name {
  font-weight: 600;
  display: block;
}

.td-sub {
  font-size: 11px;
  color: #9ca3af;
}

/* Table: badge usia */
.td-badge-usia {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
}

/* Table: berat & tinggi */
.td-metric {
  font-weight: 600;
}

.td-metric-unit {
  font-size: 11px;
  font-weight: 400;
  color: #9ca3af;
}

/* Table: info tambahan */
.td-info {
  font-size: 12px;
  color: #6b7280;
}

.td-info-date {
  display: flex;
  align-items: center;
  gap: 4px;
}

.td-info-date i {
  font-size: 11px;
  color: #9ca3af;
}

.td-info-note {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #9ca3af;
  font-style: italic;
  margin-top: 2px;
}

.td-info-empty {
  color: #d1d5db;
}

/* Table: aksi buttons */
.td-action-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

/* Panel header desc */
.panel-desc {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 2px;
}

/* Panel title with icon */
.panel-title-icon {
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-title-icon i {
  color: #3b82f6;
}

/* Modal: grid layout */
.modal-form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.modal-form-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.modal-form-row-last {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Modal: intro text */
.modal-intro {
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 20px;
}

.modal-intro-req {
  color: #ef4444;
}

/* Form label required star */
.form-required {
  color: #ef4444;
}

/* Modal body scrollable */
.custom-modal-body-scroll {
  max-height: 65vh;
  overflow-y: auto;
}

@media (max-width: 640px) {
  .modal-form-row-2,
  .modal-form-row-3 {
    grid-template-columns: 1fr;
  }

  .modal-form-row-last {
    grid-template-columns: 1fr;
  }
}

/* User Management & Role Badges */
.badge-role {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.badge-role-admin {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.badge-role-user {
  background: rgba(168, 85, 247, 0.12);
  color: #9333ea;
  border: 1px solid rgba(168, 85, 247, 0.25);
}

.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 600;
}

.badge-status-active {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.badge-status-inactive {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.td-avatar-admin {
  background: rgba(59, 130, 246, 0.15);
  color: #2563eb;
}

.td-avatar-user {
  background: rgba(168, 85, 247, 0.15);
  color: #9333ea;
}

.password-toggle-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}

.password-toggle-btn:hover {
  color: #4b5563;
}

.dark .password-toggle-btn:hover {
  color: #f3f4f6;
}

/* ══════════════════════════════════════════════════════════════
   SipandaAsi Custom Components & Utilities
   ══════════════════════════════════════════════════════════════ */

/* ── Checkbox label CSS-only toggle (Panel Admin) ── */
.chk-aktif:not(:checked) ~ .chk-label-on {
  display: none !important;
}

.chk-aktif:not(:checked) ~ .chk-label-off {
  display: inline-flex !important;
}

/* ── Theme Text Utilities ── */
.text-theme-primary {
  color: #0f172a;
}

.dark .text-theme-primary {
  color: #f8fafc;
}

.text-theme-muted {
  color: #64748b;
}

.dark .text-theme-muted {
  color: #94a3b8;
}

/* ── Hero Banner: Selected Entity / Focus Hero ── */
.entity-selected-hero,
.faskes-selected-hero {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(59, 130, 246, 0.05) 100%);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 4px 20px -4px rgba(16, 185, 129, 0.15);
}

.dark .entity-selected-hero,
.dark .faskes-selected-hero {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.14) 0%, rgba(15, 23, 42, 0.7) 100%);
  border-color: rgba(16, 185, 129, 0.3);
  box-shadow: 0 4px 20px -4px rgba(16, 185, 129, 0.2);
}

.hero-selected-inner,
.faskes-selected-hero-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-selected-avatar,
.faskes-selected-hero-avatar {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: linear-gradient(135deg, #10b981, #059669);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.hero-selected-info,
.faskes-selected-hero-info {
  flex: 1;
  min-width: 220px;
}

.hero-selected-tag,
.faskes-selected-hero-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #10b981;
  margin-bottom: 2px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.hero-selected-name,
.faskes-selected-hero-name {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.3;
}

.dark .hero-selected-name,
.dark .faskes-selected-hero-name {
  color: #f8fafc;
}

.hero-selected-loc,
.faskes-selected-hero-loc {
  font-size: 13px;
  color: #475569;
  margin: 3px 0 0;
}

.dark .hero-selected-loc,
.dark .faskes-selected-hero-loc {
  color: #94a3b8;
}

.hero-selected-action,
.faskes-selected-hero-action {
  flex-shrink: 0;
}

/* ── Scope Filter Tabs ── */
.scope-tabs-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.scope-tabs-title {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
}

.dark .scope-tabs-title {
  color: #94a3b8;
}

.scope-tabs-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.scope-tab-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 24px;
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.dark .scope-tab-pill {
  color: #cbd5e1;
  background: #1a1d24;
  border-color: rgba(255, 255, 255, 0.08);
}

.scope-tab-pill:hover {
  color: #2563eb;
  background: #e0f2fe;
  border-color: #93c5fd;
}

.dark .scope-tab-pill:hover {
  color: #60a5fa;
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
}

.scope-tab-pill.active {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #ffffff !important;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.scope-tab-count {
  padding: 1px 7px;
  font-size: 11px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.12);
  font-weight: 700;
}

.scope-tab-pill.active .scope-tab-count {
  background: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

/* ── Type Filter Pills ── */
.type-pill-btn {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  background: transparent;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.2s;
}

.dark .type-pill-btn {
  color: #94a3b8;
  border-color: rgba(255, 255, 255, 0.1);
}

.type-pill-btn:hover {
  color: #3b82f6;
  border-color: #3b82f6;
}

.type-pill-btn.active {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
  border-color: #3b82f6;
}

.dark .type-pill-btn.active {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border-color: #60a5fa;
}

/* ── Directory Card Component (Global & Reusable) ── */
.directory-card,
.faskes-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  position: relative;
}

.dark .directory-card,
.dark .faskes-card {
  background: #111316;
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 6px 20px -2px rgba(0, 0, 0, 0.4);
}

.directory-card:hover,
.faskes-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px -4px rgba(59, 130, 246, 0.18);
  border-color: rgba(59, 130, 246, 0.4);
}

.dark .directory-card:hover,
.dark .faskes-card:hover {
  box-shadow: 0 12px 30px -4px rgba(59, 130, 246, 0.28);
  border-color: rgba(59, 130, 246, 0.45);
}

.directory-card-active,
.faskes-card-active {
  border: 2px solid #10b981 !important;
  box-shadow: 0 6px 24px -2px rgba(16, 185, 129, 0.25) !important;
}

.dark .directory-card-active,
.dark .faskes-card-active {
  border-color: #10b981 !important;
  box-shadow: 0 6px 24px -2px rgba(16, 185, 129, 0.3) !important;
}

/* ── Card Cover ── */
.directory-card-cover,
.faskes-card-cover {
  width: 100%;
  height: 140px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.directory-card-cover-overlay,
.faskes-card-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.1) 60%, transparent 100%);
}

.directory-card-badge,
.faskes-card-badge-jenis {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  letter-spacing: 0.3px;
}

.jenis-puskesmas {
  background: rgba(37, 99, 235, 0.88);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.jenis-klinik {
  background: rgba(16, 185, 129, 0.88);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.jenis-rs {
  background: rgba(147, 51, 234, 0.88);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(147, 51, 234, 0.3);
}

.jenis-posyandu {
  background: rgba(245, 158, 11, 0.88);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.jenis-default {
  background: rgba(71, 85, 105, 0.88);
  color: #ffffff;
}

.directory-card-badge-selected,
.faskes-card-badge-selected {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #10b981;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.45);
}

/* ── Card Avatar ── */
.directory-card-avatar-wrap,
.faskes-card-avatar-wrap {
  position: relative;
  margin-top: -34px;
  padding: 0 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.directory-card-avatar,
.faskes-card-avatar {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  background-size: cover;
  background-position: center;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dark .directory-card-avatar,
.dark .faskes-card-avatar {
  border-color: #111316;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.directory-card-status-dot,
.faskes-card-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.35);
  margin-bottom: 8px;
}

/* ── Card Body & Typography ── */
.directory-card-body,
.faskes-card-body {
  padding: 10px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.directory-card-title,
.faskes-card-title {
  font-size: 16.5px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 8px;
  line-height: 1.35;
  font-family: 'Outfit', sans-serif;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 44px;
}

.dark .directory-card-title,
.dark .faskes-card-title {
  color: #f8fafc;
}

.directory-card-meta,
.faskes-card-meta {
  font-size: 13px;
  color: #334155;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-bottom: 6px;
  line-height: 1.4;
}

.dark .directory-card-meta,
.dark .faskes-card-meta {
  color: #cbd5e1;
}

.directory-card-address,
.faskes-card-address {
  font-size: 12px;
  color: #64748b;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 14px;
}

.dark .directory-card-address,
.dark .faskes-card-address {
  color: #94a3b8;
}

/* ── Card Actions Grid ── */
.directory-card-actions,
.faskes-card-actions {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
}

.dark .directory-card-actions,
.dark .faskes-card-actions {
  border-top-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 400px) {
  .directory-card-actions,
  .faskes-card-actions {
    grid-template-columns: 1fr;
  }
}

.directory-card-actions .doc-split-button,
.faskes-card-actions .doc-split-button {
  display: flex !important;
  width: 100% !important;
  height: 38px !important;
  border-radius: 9px !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
  overflow: hidden !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.directory-card-actions .doc-split-icon,
.faskes-card-actions .doc-split-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
}

.directory-card-actions .doc-split-label,
.faskes-card-actions .doc-split-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
  padding: 0 10px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.dark .directory-card-actions .doc-split-secondary .doc-split-icon,
.dark .faskes-card-actions .doc-split-secondary .doc-split-icon {
  background: #1e293b;
  color: #94a3b8;
}

.dark .directory-card-actions .doc-split-secondary .doc-split-label,
.dark .faskes-card-actions .doc-split-secondary .doc-split-label {
  background: #334155;
  color: #f1f5f9;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.dark .directory-card-actions .doc-split-secondary:hover .doc-split-icon,
.dark .faskes-card-actions .doc-split-secondary:hover .doc-split-icon {
  background: #2563eb;
  color: #ffffff;
}

.dark .directory-card-actions .doc-split-secondary:hover .doc-split-label,
.dark .faskes-card-actions .doc-split-secondary:hover .doc-split-label {
  background: #3b82f6;
  color: #ffffff;
}

.dark .directory-card-actions .doc-split-secondary:hover,
.dark .faskes-card-actions .doc-split-secondary:hover {
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
  transform: translateY(-1px);
}

.directory-card-actions .doc-split-primary:hover,
.faskes-card-actions .doc-split-primary:hover {
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45) !important;
  transform: translateY(-1px);
}

.directory-card-actions .doc-split-success,
.faskes-card-actions .doc-split-success {
  background: #10b981;
  cursor: default !important;
}

.directory-card-actions .doc-split-success .doc-split-icon,
.faskes-card-actions .doc-split-success .doc-split-icon {
  background: #059669;
  color: #ffffff;
}

.directory-card-actions .doc-split-success .doc-split-label,
.faskes-card-actions .doc-split-success .doc-split-label {
  background: #10b981;
  color: #ffffff;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

/* ── Modal Toolbar & Spacing (Search, Category, Contacts) ── */
.modal-search-section {
  margin-bottom: 22px !important;
}

.modal-category-section {
  margin-top: 22px !important;
  margin-bottom: 24px !important;
  padding-top: 18px !important;
  border-top: 1px solid #e2e8f0 !important;
}

.dark .modal-category-section {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

.modal-category-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.modal-category-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

.dark .modal-category-title {
  color: #94a3b8 !important;
}

.modal-category-pills {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow-x: auto !important;
  padding-bottom: 8px !important;
  margin-bottom: 4px !important;
}

/* ── Contact Cards Directory Grid (Global with Distinct Margins) ── */
.contact-directory-grid {
  display: grid !important;
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  gap: 22px !important;
  margin-top: 24px !important;
  margin-bottom: 16px !important;
}

@media (min-width: 640px) {
  .contact-directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
}

@media (min-width: 1024px) {
  .contact-directory-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 26px !important;
  }
}

/* ── Directory Card: Square Variant (Strict 1:1 Ratio) ── */
.directory-card.directory-card-square,
.directory-card-square {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  min-height: 0 !important;
  cursor: pointer;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
  box-sizing: border-box !important;
  border-radius: 16px !important;
}

.directory-card.directory-card-square .directory-card-cover,
.directory-card-square .directory-card-cover {
  height: 42% !important;
  flex-shrink: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.directory-card.directory-card-square .directory-card-avatar-wrap,
.directory-card-square .directory-card-avatar-wrap {
  margin-top: -28px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  position: relative !important;
  z-index: 2 !important;
}

.directory-card.directory-card-square .directory-card-avatar,
.directory-card-square .directory-card-avatar {
  width: 54px !important;
  height: 54px !important;
  border-radius: 14px !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
}

.dark .directory-card.directory-card-square .directory-card-avatar,
.dark .directory-card-square .directory-card-avatar {
  border-color: #1c1f26 !important;
}

.directory-card.directory-card-square .conv-online-dot {
  width: 12px !important;
  height: 12px !important;
  bottom: 0px !important;
  right: 0px !important;
  border-width: 2px !important;
}

.directory-card.directory-card-square .directory-card-body,
.directory-card-square .directory-card-body {
  padding: 8px 16px 14px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

.directory-card.directory-card-square .directory-card-title,
.directory-card-square .directory-card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  margin: 0 0 3px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.directory-card.directory-card-square .directory-card-meta,
.directory-card-square .directory-card-meta {
  font-size: 12px !important;
  margin-bottom: 0 !important;
  gap: 6px !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: #64748b !important;
}

.dark .directory-card.directory-card-square .directory-card-meta,
.dark .directory-card-square .directory-card-meta {
  color: #94a3b8 !important;
}

.directory-card.directory-card-square .directory-card-actions,
.directory-card-square .directory-card-actions {
  margin-top: auto !important;
  padding-top: 10px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
}

.directory-card.directory-card-square .directory-card-actions .doc-split-button,
.directory-card-square .directory-card-actions .doc-split-button {
  height: 34px !important;
  border-radius: 8px !important;
}

.directory-card.directory-card-square .directory-card-actions .doc-split-icon,
.directory-card-square .directory-card-actions .doc-split-icon {
  width: 34px !important;
  font-size: 12px !important;
  padding: 0 !important;
}

.directory-card.directory-card-square .directory-card-actions .doc-split-label,
.directory-card-square .directory-card-actions .doc-split-label {
  font-size: 12px !important;
  padding: 0 10px !important;
  font-weight: 600 !important;
}

/* ── Directory Card: Online Badge ── */
.directory-card-online-badge {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  margin: 0 !important;
  padding: 3px 9px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  z-index: 2 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important;
}

/* ── Responsive adjustments for Square Directory Card on mobile (Tetap 1:1) ── */
@media (max-width: 639.98px) {
  .directory-card.directory-card-square,
  .directory-card-square {
    aspect-ratio: 1 / 1 !important;
    border-radius: 14px !important;
  }

  .directory-card.directory-card-square .directory-card-cover,
  .directory-card-square .directory-card-cover {
    height: 42% !important;
  }

  .directory-card.directory-card-square .directory-card-badge,
  .directory-card-square .directory-card-badge {
    top: 8px !important;
    left: 8px !important;
    padding: 3px 8px !important;
    font-size: 10.5px !important;
  }

  .directory-card.directory-card-square .directory-card-online-badge,
  .directory-card-square .directory-card-online-badge {
    top: 8px !important;
    right: 8px !important;
    padding: 3px 7px !important;
    font-size: 10px !important;
  }

  .directory-card.directory-card-square .directory-card-avatar-wrap,
  .directory-card-square .directory-card-avatar-wrap {
    margin-top: -24px !important;
    padding: 0 14px !important;
  }

  .directory-card.directory-card-square .directory-card-avatar,
  .directory-card-square .directory-card-avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    border-width: 2.5px !important;
    font-size: 16px !important;
  }

  .directory-card.directory-card-square .directory-card-body,
  .directory-card-square .directory-card-body {
    padding: 6px 14px 12px !important;
  }

  .directory-card.directory-card-square .directory-card-title,
  .directory-card-square .directory-card-title {
    font-size: 14px !important;
    margin-bottom: 2px !important;
  }

  .directory-card.directory-card-square .directory-card-meta,
  .directory-card-square .directory-card-meta {
    font-size: 11.5px !important;
    gap: 5px !important;
  }

  .directory-card.directory-card-square .directory-card-actions,
  .directory-card-square .directory-card-actions {
    margin-top: auto !important;
    padding-top: 8px !important;
  }

  .directory-card.directory-card-square .directory-card-actions .doc-split-button,
  .directory-card-square .directory-card-actions .doc-split-button {
    height: 32px !important;
  }

  .directory-card.directory-card-square .directory-card-actions .doc-split-icon,
  .directory-card-square .directory-card-actions .doc-split-icon {
    width: 32px !important;
    font-size: 11.5px !important;
  }

  .directory-card.directory-card-square .directory-card-actions .doc-split-label,
  .directory-card-square .directory-card-actions .doc-split-label {
    font-size: 11.5px !important;
  }

  .filter-pill {
    padding: 5px 12px;
    font-size: 11.5px;
    gap: 5px;
  }

  .filter-pill .filter-pill-count {
    padding: 1px 5px;
    font-size: 10px;
  }
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.empty-icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.dark .empty-icon-circle {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

/* ── Panoramic Profile Hero ── */
.profile-hero-panoramic.profile-hero,
.faskes-detail-hero.profile-hero {
  min-height: 320px !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  margin-bottom: 28px !important;
  overflow: hidden !important;
  position: relative !important;
  background: #1a2744 !important;
}

@media (min-width: 640px) {
  .profile-hero-panoramic.profile-hero,
  .faskes-detail-hero.profile-hero {
    min-height: 380px !important;
  }
}

@media (min-width: 1024px) {
  .profile-hero-panoramic.profile-hero,
  .faskes-detail-hero.profile-hero {
    min-height: 440px !important;
  }
}

.profile-hero-panoramic .profile-hero-cover,
.faskes-detail-hero .profile-hero-cover {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center center !important;
  opacity: 1 !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.profile-hero-panoramic:hover .profile-hero-cover,
.faskes-detail-hero:hover .profile-hero-cover {
  transform: scale(1.02);
}

.profile-hero-panoramic .profile-hero-overlay,
.faskes-detail-hero .profile-hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: 
    linear-gradient(
      to right,
      rgba(10, 15, 30, 0.60) 0%,
      rgba(10, 15, 30, 0.20) 60%,
      transparent 100%
    ),
    linear-gradient(
      to top,
      rgba(10, 15, 30, 0.96) 0%,
      rgba(10, 15, 30, 0.88) 28%,
      rgba(10, 15, 30, 0.60) 55%,
      rgba(10, 15, 30, 0.20) 78%,
      transparent 100%
    ) !important;
}

.profile-hero-panoramic .profile-hero-content,
.faskes-detail-hero .profile-hero-content {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  min-height: 320px !important;
  padding: 28px 24px 24px !important;
  gap: 16px !important;
}

@media (min-width: 640px) {
  .profile-hero-panoramic .profile-hero-content,
  .faskes-detail-hero .profile-hero-content {
    flex-direction: row !important;
    align-items: flex-end !important;
    min-height: 380px !important;
    padding: 0 32px 28px !important;
    gap: 20px !important;
  }
}

@media (min-width: 1024px) {
  .profile-hero-panoramic .profile-hero-content,
  .faskes-detail-hero .profile-hero-content {
    min-height: 440px !important;
    padding: 0 40px 36px !important;
    gap: 24px !important;
  }
}

.profile-hero-panoramic .profile-large-avatar,
.faskes-detail-hero .profile-large-avatar {
  width: 96px !important;
  height: 96px !important;
  border-radius: 20px !important;
  border: 3px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;
  flex-shrink: 0 !important;
}

@media (min-width: 1024px) {
  .profile-hero-panoramic .profile-large-avatar,
  .faskes-detail-hero .profile-large-avatar {
    width: 112px !important;
    height: 112px !important;
    border-radius: 24px !important;
  }
}

.profile-hero-panoramic .profile-hero-name,
.faskes-detail-hero .profile-hero-name {
  font-size: 1.5rem !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.025em !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

@media (min-width: 640px) {
  .profile-hero-panoramic .profile-hero-name,
  .faskes-detail-hero .profile-hero-name {
    font-size: 1.75rem !important;
  }
}

@media (min-width: 1024px) {
  .profile-hero-panoramic .profile-hero-name,
  .faskes-detail-hero .profile-hero-name {
    font-size: 2.15rem !important;
  }
}

/* ── Info Grid & Stat Card (Global) ── */
.info-stats-grid,
.faskes-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 991px) {
  .info-stats-grid,
  .faskes-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .info-stats-grid,
  .faskes-info-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.info-stat-card,
.faskes-stat-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 18px 16px;
  border: 1px solid #f1f5f9;
  box-shadow: 0 4px 14px -3px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.25s ease;
  position: relative;
  text-align: left;
  min-height: 128px;
}

.dark .info-stat-card,
.dark .faskes-stat-card {
  background: #111316;
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 4px 14px -3px rgba(0, 0, 0, 0.3);
}

.info-stat-card:hover,
.faskes-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -5px rgba(0, 0, 0, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
}

.dark .info-stat-card:hover,
.dark .faskes-stat-card:hover {
  box-shadow: 0 10px 24px -5px rgba(0, 0, 0, 0.45);
  border-color: rgba(59, 130, 246, 0.4);
}

/* ── Generic Filter & Control Panel ── */
.filter-control-panel,
.faskes-control-panel {
  padding: 14px 16px;
  margin-bottom: 24px;
}
@media (min-width: 768px) {
  .filter-control-panel,
  .faskes-control-panel {
    padding: 18px 20px;
  }
}

.filter-scope-bar,
.faskes-scope-bar {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}
.dark .filter-scope-bar,
.dark .faskes-scope-bar {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.filter-scope-title,
.faskes-scope-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dark .filter-scope-title,
.dark .faskes-scope-title {
  color: #94a3b8;
}

.filter-domicile-wrap,
.faskes-domicile-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.filter-domicile-wrap .domicile-text,
.faskes-domicile-wrap .domicile-text {
  color: #64748b;
}
.dark .filter-domicile-wrap .domicile-text,
.dark .faskes-domicile-wrap .domicile-text {
  color: #94a3b8;
}
.filter-domicile-wrap .domicile-text strong,
.faskes-domicile-wrap .domicile-text strong {
  color: #334155;
}
.dark .filter-domicile-wrap .domicile-text strong,
.dark .faskes-domicile-wrap .domicile-text strong {
  color: #e2e8f0;
}

.filter-action-link,
.faskes-change-address-btn {
  color: #2563eb;
  font-weight: 600;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none !important;
  transition: color 0.15s ease;
  white-space: nowrap;
}
.filter-action-link:hover,
.faskes-change-address-btn:hover {
  color: #1d4ed8;
}
.dark .filter-action-link,
.dark .faskes-change-address-btn {
  color: #60a5fa;
}
.dark .filter-action-link:hover,
.dark .faskes-change-address-btn:hover {
  color: #93c5fd;
}

.filter-search-bar,
.faskes-search-filter-bar {
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 861px) {
  .filter-search-bar,
  .faskes-search-filter-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }
}

.filter-search-wrap,
.faskes-search-wrap {
  margin: 0 !important;
  width: 100%;
}
@media (min-width: 861px) {
  .filter-search-wrap,
  .faskes-search-wrap {
    flex: 1;
    max-width: 360px;
  }
}
.filter-search-wrap .form-input,
.faskes-search-wrap .form-input {
  margin: 0 !important;
  height: 38px;
  font-size: 13px;
  border-radius: 10px;
}

/* ── Filter Pills / Tag Chips (Global & Reusable) ── */
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #64748b;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
  line-height: 1;
}

.dark .filter-pill {
  background: #1c1f26;
  border-color: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}

.filter-pill:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #2563eb;
}

.dark .filter-pill:hover {
  background: #242934;
  border-color: rgba(59, 130, 246, 0.4);
  color: #60a5fa;
}

.filter-pill.active {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

.dark .filter-pill.active {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.45);
}

.filter-pill .filter-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.06);
  color: inherit;
}

.filter-pill.active .filter-pill-count {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* ── Card Schedule / Extra Info Box ── */
.card-schedule-box,
.faskes-card-jadwal-box {
  margin-top: 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: rgba(248, 250, 252, 0.75);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 10px;
  transition: all 0.2s ease;
}
.dark .card-schedule-box,
.dark .faskes-card-jadwal-box {
  background: rgba(30, 41, 59, 0.45);
  border-color: rgba(255, 255, 255, 0.08);
}

.card-status-bar,
.faskes-card-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.badge-status-pill,
.faskes-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.badge-status-subtext,
.faskes-status-subtext {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
  text-align: right;
}
.dark .badge-status-subtext,
.dark .faskes-status-subtext {
  color: #94a3b8;
}

/* ── Badge Jadwal Operasional (Global) ── */
.badge-jadwal-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-jadwal-24jam {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
  border: 1px solid rgba(59, 130, 246, 0.25);
}
.dark .badge-jadwal-24jam {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.4);
}
.badge-jadwal-buka {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.dark .badge-jadwal-buka {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.4);
}
.badge-jadwal-tutup {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.dark .badge-jadwal-tutup {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.4);
}

/* ── Clickable Stat Card ── */
a.stat-card {
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer !important;
}

a.stat-card:hover {
  transform: translateY(-3px) !important;
}

/* ══════════════════════════════════════════════════════════════════
   GLOBAL COMPONENT EXTENSIONS (MIGRATED FROM APP VIEWS)
   Standar CSS Global Reusable untuk Template SipandaAsi
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Floating In-App Chat Toast & Notification System ── */
.wa-toast-container {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 9999999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  max-width: 100%;
}
.wa-toast-card {
  pointer-events: auto;
  width: 380px;
  max-width: calc(100vw - 32px);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 14px 34px -4px rgba(15, 23, 42, 0.14), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  animation: waToastSlideInRight 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  position: relative;
  padding: 14px 16px 12px 16px;
  user-select: none;
}
.dark .wa-toast-card {
  background: rgba(26, 32, 44, 0.97);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.wa-toast-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -6px rgba(37, 99, 235, 0.18), 0 6px 16px -2px rgba(0, 0, 0, 0.06);
  border-color: rgba(147, 197, 253, 0.9);
}
.dark .wa-toast-card:hover {
  box-shadow: 0 20px 42px -6px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(59, 130, 246, 0.4);
  border-color: rgba(59, 130, 246, 0.45);
}
@keyframes waToastSlideInRight {
  from { opacity: 0; transform: translateX(50px) scale(0.96); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes waToastSlideOutRight {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to { opacity: 0; transform: translateX(40px) scale(0.96); }
}
.wa-toast-out {
  animation: waToastSlideOutRight 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Header strip */
.wa-toast-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.wa-toast-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 9999px;
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #dbeafe;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.dark .wa-toast-pill {
  background: rgba(30, 58, 138, 0.3);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.25);
}
.wa-toast-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3b82f6;
  animation: waPulse 1.5s infinite;
}
@keyframes waPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}
.wa-toast-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wa-toast-time {
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 4px;
}
.dark .wa-toast-time {
  color: #64748b;
}
.wa-toast-close-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}
.wa-toast-close-btn:hover {
  background: #f1f5f9;
  color: #334155;
}
.dark .wa-toast-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
}

/* Body content */
.wa-toast-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.wa-toast-avatar-wrapper {
  position: relative;
  flex-shrink: 0;
}
.wa-toast-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.04);
}
.dark .wa-toast-avatar {
  border-color: rgba(255, 255, 255, 0.1);
}
.wa-toast-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wa-toast-online-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #3b82f6;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.35);
}
.dark .wa-toast-online-dot {
  border-color: #1a202c;
  background: #60a5fa;
}
.wa-toast-main {
  flex: 1;
  min-width: 0;
}
.wa-toast-sender-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.wa-toast-sender-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.dark .wa-toast-sender-name {
  color: #f8fafc;
}
.wa-toast-role-badge {
  font-size: 9.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  line-height: 1.4;
}
.wa-toast-role-bidan {
  background: #fdf2f8;
  color: #db2777;
  border: 1px solid #fbcfe8;
}
.dark .wa-toast-role-bidan {
  background: rgba(219, 39, 119, 0.15);
  color: #f472b6;
  border-color: rgba(219, 39, 119, 0.3);
}
.wa-toast-role-puskesmas {
  background: #f0f9ff;
  color: #0284c7;
  border: 1px solid #bae6fd;
}
.dark .wa-toast-role-puskesmas {
  background: rgba(2, 132, 199, 0.15);
  color: #38bdf8;
  border-color: rgba(2, 132, 199, 0.3);
}
.wa-toast-role-kader {
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fde68a;
}
.dark .wa-toast-role-kader {
  background: rgba(217, 119, 6, 0.15);
  color: #fbbf24;
  border-color: rgba(217, 119, 6, 0.3);
}
.wa-toast-role-ibu {
  background: #faf5ff;
  color: #9333ea;
  border: 1px solid #f3e8ff;
}
.dark .wa-toast-role-ibu {
  background: rgba(147, 51, 234, 0.15);
  color: #c084fc;
  border-color: rgba(147, 51, 234, 0.3);
}
.wa-toast-role-default {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}
.dark .wa-toast-role-default {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  border-color: rgba(255, 255, 255, 0.1);
}

.wa-toast-bubble {
  font-size: 12px;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 7px 10px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.dark .wa-toast-bubble {
  background: rgba(15, 23, 42, 0.45);
  border-color: rgba(255, 255, 255, 0.07);
  color: #cbd5e1;
}

/* Footer micro action */
.wa-toast-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid #f1f5f9;
  font-size: 11px;
  font-weight: 500;
  color: #2563eb;
}
.dark .wa-toast-footer {
  border-top-color: rgba(255, 255, 255, 0.06);
  color: #60a5fa;
}
.wa-toast-footer-action {
  display: flex;
  align-items: center;
  gap: 5px;
}
.wa-toast-footer-hint {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #94a3b8;
  font-size: 10px;
  transition: color 0.15s ease;
}
.wa-toast-card:hover .wa-toast-footer-hint {
  color: #2563eb;
}
.dark .wa-toast-card:hover .wa-toast-footer-hint {
  color: #60a5fa;
}

/* Progress indicator */
.wa-toast-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2.5px;
  background: linear-gradient(90deg, #1d4ed8, #3b82f6, #60a5fa);
  width: 100%;
  animation: waProgressShrink 7s linear forwards;
  border-radius: 0 0 16px 16px;
}
@keyframes waProgressShrink {
  from { width: 100%; }
  to { width: 0%; }
}
@media (max-width: 640px) {
  .wa-toast-container { top: 16px; right: 16px; left: 16px; }
  .wa-toast-card { width: 100%; max-width: 100%; }
}

/* ── 2. Jam & Jadwal Operasional Grid (7 Hari) ── */
.badge-jadwal-warning {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.dark .badge-jadwal-warning {
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.4);
}

.jadwal-ops-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 2px;
}
.jadwal-ops-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px 2px 4px;
  border-radius: 7px;
  background: rgba(241, 245, 249, 0.85);
  border: 1px solid rgba(226, 232, 240, 0.8);
  font-size: 10px;
  transition: all 0.15s ease;
  text-align: center;
}
.dark .jadwal-ops-day {
  background: rgba(15, 23, 42, 0.5);
  border-color: rgba(255, 255, 255, 0.06);
}
.jadwal-ops-day.day-today {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.25);
}
.dark .jadwal-ops-day.day-today {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.5);
}
.jadwal-ops-day.day-tutup {
  opacity: 0.55;
  background: rgba(241, 245, 249, 0.5);
}
.dark .jadwal-ops-day.day-tutup {
  background: rgba(15, 23, 42, 0.25);
  opacity: 0.45;
}
.jadwal-ops-day-name {
  font-size: 9.5px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-bottom: 2px;
}
.dark .jadwal-ops-day-name {
  color: #94a3b8;
}
.jadwal-ops-day.day-today .jadwal-ops-day-name {
  color: #2563eb;
  font-weight: 800;
}
.dark .jadwal-ops-day.day-today .jadwal-ops-day-name {
  color: #60a5fa;
}
.jadwal-ops-day-status {
  font-size: 8px;
  line-height: 1;
}
.jadwal-ops-day-status .fa-circle-check {
  color: #10b981;
}
.jadwal-ops-day-status .fa-ban {
  color: #94a3b8;
}
.jadwal-ops-day-status.status-24jam .fa-clock {
  color: #3b82f6;
}
.jadwal-ops-day-jam {
  font-size: 8px;
  font-weight: 600;
  color: #64748b;
  margin-top: 1px;
  line-height: 1.2;
  white-space: nowrap;
}
.dark .jadwal-ops-day-jam {
  color: #64748b;
}
.jadwal-ops-day.day-today .jadwal-ops-day-jam {
  color: #3b82f6;
}
.dark .jadwal-ops-day.day-today .jadwal-ops-day-jam {
  color: #93c5fd;
}

@media (max-width: 480px) {
  .entity-selected-hero {
    padding: 14px 14px;
  }
  .hero-selected-action {
    width: 100%;
    margin-top: 6px;
  }
  .hero-selected-action .doc-split-button {
    width: 100% !important;
    justify-content: center;
  }
  .jadwal-ops-grid {
    gap: 3px;
  }
  .jadwal-ops-day {
    padding: 4px 1px 3px;
  }
  .jadwal-ops-day-name {
    font-size: 8.5px;
  }
  .jadwal-ops-day-jam {
    font-size: 8px;
  }
}

/* ── 3. Scope Tabs & Filter Pills Horizontal Scrolling ── */
.scope-tab-pill {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 6px 13px;
  font-size: 12px;
}

.type-pill-btn {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 6px 13px;
  font-size: 12px;
  border-radius: 20px;
}

.scope-tabs-scroll-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}
.scope-tabs-scroll-wrap::-webkit-scrollbar {
  display: none;
}
.scope-tabs-scroll-wrap .scope-tabs-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  width: max-content;
}

.type-filter-scroll-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}
.type-filter-scroll-wrap::-webkit-scrollbar {
  display: none;
}
.type-filter-scroll-wrap .type-filter-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  width: max-content;
}

@media (max-width: 860px) {
  .filter-scope-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 10px;
    align-items: center;
  }
  .filter-scope-title {
    grid-column: 1 / 2;
    grid-row: 1;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .filter-domicile-wrap {
    grid-column: 2 / 3;
    grid-row: 1;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
  }
  .scope-tabs-scroll-wrap {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (min-width: 861px) {
  .filter-scope-bar {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .filter-scope-title {
    flex-shrink: 0;
  }
  .scope-tabs-scroll-wrap {
    flex: 1;
    overflow: visible;
  }
  .scope-tabs-scroll-wrap .scope-tabs-list {
    flex-wrap: wrap;
  }
  .filter-domicile-wrap {
    margin-left: auto;
    flex-shrink: 0;
  }
  .type-filter-scroll-wrap {
    width: auto;
    overflow: visible;
  }
  .type-filter-scroll-wrap .type-filter-pills {
    width: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── 4. Interactive Schedule Builder & Data Table Component ── */
.jadwal-builder-card {
  background: rgba(248, 250, 252, 0.7);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 12px;
  padding: 16px;
  margin-top: 14px;
  margin-bottom: 16px;
}
.dark .jadwal-builder-card {
  background: rgba(30, 41, 59, 0.5);
  border-color: rgba(255, 255, 255, 0.08);
}
.jadwal-builder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}
.dark .jadwal-builder-header {
  border-color: rgba(255, 255, 255, 0.08);
}
.jadwal-builder-title {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dark .jadwal-builder-title {
  color: #f1f5f9;
}
.jadwal-builder-subtitle {
  font-size: 11.5px;
  color: #64748b;
  margin: 3px 0 0 0;
}
.dark .jadwal-builder-subtitle {
  color: #94a3b8;
}
.jadwal-builder-templates {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.btn-template-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s ease;
}
.dark .btn-template-pill {
  background: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
}
.btn-template-pill:hover {
  background: #f1f5f9;
  border-color: #3b82f6;
  color: #2563eb;
  transform: translateY(-1px);
}
.dark .btn-template-pill:hover {
  background: #334155;
  border-color: #60a5fa;
  color: #93c5fd;
}
.jadwal-table-wrap {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  background: #ffffff;
}
.dark .jadwal-table-wrap {
  border-color: rgba(255, 255, 255, 0.08);
  background: #0f172a;
}
.jadwal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.jadwal-table th {
  background: rgba(241, 245, 249, 0.8);
  color: #475569;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}
.dark .jadwal-table th {
  background: rgba(30, 41, 59, 0.8);
  color: #94a3b8;
  border-color: rgba(255, 255, 255, 0.08);
}
.jadwal-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
.dark .jadwal-table td {
  border-color: rgba(255, 255, 255, 0.05);
}
.jadwal-table tr:last-child td {
  border-bottom: none;
}
.jadwal-table tr.row-is-tutup {
  background: rgba(239, 68, 68, 0.03);
}
.jadwal-table tr.row-is-24jam {
  background: rgba(59, 130, 246, 0.03);
}
.jadwal-time-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.time-input {
  width: 105px !important;
  height: 32px !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}
.td-jadwal-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.td-jadwal-text {
  font-size: 11.5px;
  font-weight: 600;
  color: #334155;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}
.dark .td-jadwal-text {
  color: #e2e8f0;
}

/* ── 5. Staff & Entity Plotting Management System ── */
.entity-selected-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(99, 102, 241, 0.04));
  border: 1px solid rgba(59, 130, 246, 0.22);
}
.dark .entity-selected-banner {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.7)) !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
}

.petugas-manage-card {
  background: rgba(248, 250, 252, 0.85);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.dark .petugas-manage-card {
  background: rgba(30, 41, 59, 0.65) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
}

.petugas-action-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.dark .petugas-action-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.petugas-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
}
.petugas-tab-btn:hover {
  color: #1e293b;
  background: rgba(226, 232, 240, 0.6);
}
.dark .petugas-tab-btn:hover {
  color: #f1f5f9;
  background: rgba(51, 65, 85, 0.6);
}
.petugas-tab-btn.active {
  background: #ffffff;
  color: #2563eb;
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.dark .petugas-tab-btn.active {
  background: #1e293b;
  color: #60a5fa;
  border-color: #334155;
}

.role-pill-option {
  cursor: pointer;
  margin: 0;
}
.role-pill-option input[type="radio"] {
  display: none;
}
.role-pill-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
}
.dark .role-pill-card {
  background: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
}
.role-pill-option input[type="radio"]:checked + .role-pill-card.role-card-kader {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}
.dark .role-pill-option input[type="radio"]:checked + .role-pill-card.role-card-kader {
  color: #34d399;
  background: rgba(16, 185, 129, 0.2);
}
.role-pill-option input[type="radio"]:checked + .role-pill-card.role-card-bidan {
  border-color: #a855f7;
  background: rgba(168, 85, 247, 0.12);
  color: #7e22ce;
}
.dark .role-pill-option input[type="radio"]:checked + .role-pill-card.role-card-bidan {
  color: #c084fc;
  background: rgba(168, 85, 247, 0.2);
}
.role-pill-option input[type="radio"]:checked + .role-pill-card.role-card-puskesmas {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}
.dark .role-pill-option input[type="radio"]:checked + .role-pill-card.role-card-puskesmas {
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.2);
}

.modal-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}
.dark .modal-section-title {
  color: #f8fafc !important;
}
.modal-section-subtitle {
  font-size: 11px;
  color: #94a3b8;
}
.dark .modal-section-subtitle {
  color: #cbd5e1 !important;
}

.entity-banner-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: #1e293b;
}
.dark .entity-banner-title {
  color: #f8fafc !important;
}
.entity-banner-desc {
  margin: 2px 0 0 0;
  font-size: 11.5px;
  color: #64748b;
}
.dark .entity-banner-desc {
  color: #cbd5e1 !important;
}

.staff-item-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  transition: all 0.2s ease;
}
.dark .staff-item-card {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
.staff-item-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.dark .staff-item-card:hover {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.staff-item-name {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
}
.dark .staff-item-name {
  color: #f8fafc !important;
}
.staff-item-username {
  font-size: 11.5px;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.dark .staff-item-username {
  color: #94a3b8 !important;
}

.staff-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.staff-avatar.role-badge-admin {
  background: rgba(99, 102, 241, 0.15);
  color: #4f46e5;
}
.dark .staff-avatar.role-badge-admin {
  background: rgba(99, 102, 241, 0.25) !important;
  color: #a5b4fc !important;
}
.staff-avatar.role-badge-puskesmas {
  background: rgba(59, 130, 246, 0.15);
  color: #2563eb;
}
.dark .staff-avatar.role-badge-puskesmas {
  background: rgba(59, 130, 246, 0.25) !important;
  color: #93c5fd !important;
}
.staff-avatar.role-badge-bidan {
  background: rgba(168, 85, 247, 0.15);
  color: #9333ea;
}
.dark .staff-avatar.role-badge-bidan {
  background: rgba(168, 85, 247, 0.25) !important;
  color: #d8b4fe !important;
}
.staff-avatar.role-badge-kader {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}
.dark .staff-avatar.role-badge-kader {
  background: rgba(16, 185, 129, 0.25) !important;
  color: #6ee7b7 !important;
}

.staff-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
}
.staff-role-badge.role-badge-admin {
  background: rgba(99, 102, 241, 0.12);
  color: #4338ca;
}
.dark .staff-role-badge.role-badge-admin {
  background: rgba(99, 102, 241, 0.25) !important;
  color: #c7d2fe !important;
}
.staff-role-badge.role-badge-puskesmas {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}
.dark .staff-role-badge.role-badge-puskesmas {
  background: rgba(59, 130, 246, 0.25) !important;
  color: #93c5fd !important;
}
.staff-role-badge.role-badge-bidan {
  background: rgba(168, 85, 247, 0.12);
  color: #7e22ce;
}
.dark .staff-role-badge.role-badge-bidan {
  background: rgba(168, 85, 247, 0.25) !important;
  color: #d8b4fe !important;
}
.staff-role-badge.role-badge-kader {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}
.dark .staff-role-badge.role-badge-kader {
  background: rgba(16, 185, 129, 0.25) !important;
  color: #6ee7b7 !important;
}

.petugas-empty-state {
  padding: 24px 16px;
  text-align: center;
  background: rgba(248, 250, 252, 0.6);
  border: 1.5px dashed #cbd5e1;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.dark .petugas-empty-state {
  background: rgba(30, 41, 59, 0.3) !important;
  border-color: #334155 !important;
}
.dark .petugas-empty-state p {
  color: #f1f5f9 !important;
}
.dark .petugas-empty-state span {
  color: #94a3b8 !important;
}

/* ── 6. Select2 Modal Enhancements & Dialog Overrides ── */
.select2-modal-enhanced .select2-container,
#modalKelolaPetugasFaskes .select2-container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.select2-modal-enhanced .select2-container--default .select2-selection--single,
#modalKelolaPetugasFaskes .select2-container--default .select2-selection--single {
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  border: 1px solid #cbd5e1;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  box-sizing: border-box !important;
  width: 100% !important;
}
.dark .select2-modal-enhanced .select2-container--default .select2-selection--single,
.dark #modalKelolaPetugasFaskes .select2-container--default .select2-selection--single {
  background-color: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}
.select2-modal-enhanced .select2-container--default .select2-selection--single .select2-selection__rendered,
#modalKelolaPetugasFaskes .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 38px;
  padding-left: 12px;
  padding-right: 28px;
  color: #1e293b;
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dark .select2-modal-enhanced .select2-container--default .select2-selection--single .select2-selection__rendered,
.dark #modalKelolaPetugasFaskes .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #f1f5f9;
}
.select2-modal-enhanced .select2-container--default .select2-selection--single .select2-selection__arrow,
#modalKelolaPetugasFaskes .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px;
  right: 8px;
}
.select2-modal-enhanced .select2-dropdown,
#modalKelolaPetugasFaskes .select2-dropdown {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  border-radius: 10px !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
  background-color: #ffffff !important;
}
.dark .select2-modal-enhanced .select2-dropdown,
.dark #modalKelolaPetugasFaskes .select2-dropdown {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
}
.select2-modal-enhanced .select2-search--dropdown,
#modalKelolaPetugasFaskes .select2-search--dropdown {
  padding: 8px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  background-color: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.dark .select2-modal-enhanced .select2-search--dropdown,
.dark #modalKelolaPetugasFaskes .select2-search--dropdown {
  background-color: #1e293b !important;
  border-bottom-color: #334155 !important;
}
.select2-modal-enhanced .select2-search--dropdown .select2-search__field,
#modalKelolaPetugasFaskes .select2-search--dropdown .select2-search__field {
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  height: 36px !important;
  border-radius: 8px !important;
  border: 1px solid #cbd5e1 !important;
  background-color: #ffffff !important;
  color: #1e293b !important;
  font-size: 12.5px !important;
  padding: 6px 10px !important;
}
.dark .select2-modal-enhanced .select2-search--dropdown .select2-search__field,
.dark #modalKelolaPetugasFaskes .select2-search--dropdown .select2-search__field {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}
.dark .select2-modal-enhanced .select2-results__option,
.dark #modalKelolaPetugasFaskes .select2-results__option {
  color: #cbd5e1 !important;
}
.dark .select2-modal-enhanced .select2-results__option--highlighted[aria-selected],
.dark .select2-modal-enhanced .select2-results__option--highlighted.select2-results__option--selectable,
.dark #modalKelolaPetugasFaskes .select2-results__option--highlighted[aria-selected],
.dark #modalKelolaPetugasFaskes .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #2563eb !important;
  color: #ffffff !important;
}
.staff-option-name {
  color: #1e293b;
}
.dark .staff-option-name {
  color: #f8fafc !important;
}
.staff-option-user {
  color: #64748b;
}
.dark .staff-option-user {
  color: #94a3b8 !important;
}
.select2-results__option--highlighted .staff-option-name,
.select2-results__option--highlighted .staff-option-user {
  color: #ffffff !important;
}
.select2-modal-enhanced .select2-results,
#modalKelolaPetugasFaskes .select2-results {
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}
.select2-modal-enhanced .select2-results__options,
#modalKelolaPetugasFaskes .select2-results__options {
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* ── 7. Top-Level Overlays Z-Index Overrides ── */
div.swal2-container {
  z-index: 100050 !important;
}
.html-toast-container {
  z-index: 100060 !important;
}

/* ── 8. Universal Grid Utilities & Centered Empty State ── */
.col-span-full {
  grid-column: 1 / -1 !important;
}

.grid-empty-state,
.contact-directory-empty {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 20px auto !important;
  padding: 36px 16px !important;
}

.grid-empty-state.hidden,
.contact-directory-empty.hidden {
  display: none !important;
}

.grid-empty-state .empty-icon-circle,
.contact-directory-empty .empty-icon-circle {
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 14px !important;
}

.grid-empty-state h5,
.contact-directory-empty h5 {
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
  text-align: center !important;
}

.grid-empty-state p,
.contact-directory-empty p {
  max-width: 480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

/* ═════════════════════════════════════════════════════════════════════
   Global Component: Compact Icon-Only Action Buttons (.doc-btn-icon)
   Sesuai Dokumentasi docs template page/button.php Section 6 (Outline)
   ═════════════════════════════════════════════════════════════════════ */
.doc-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1.5px solid transparent;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  flex-shrink: 0;
  outline: none;
  background: transparent;
}

.doc-btn-icon.doc-btn-sm {
  width: 32px;
  height: 32px;
  font-size: 12px;
  padding: 0;
}

table td .doc-btn-icon,
.td-action-wrap .doc-btn-icon {
  margin-left: 0;
  margin-right: 0;
}

.doc-btn-icon:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  text-decoration: none;
}

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

/* Outline Icon-Only Buttons (Sesuai docs template page/button.php Section 6) */
.doc-btn[class*="doc-btn-outline-"],
.doc-btn-outline-primary,
.doc-btn-outline-secondary,
.doc-btn-outline-success,
.doc-btn-outline-danger,
.doc-btn-outline-warning,
.doc-btn-outline-info {
  background: transparent !important;
  border-style: solid !important;
  border-width: 1.5px !important;
}

.doc-btn.doc-btn-outline-primary,
.doc-btn-outline-primary {
  border-color: #3b82f6 !important;
  color: #3b82f6 !important;
}
.doc-btn.doc-btn-outline-primary:hover,
.doc-btn-outline-primary:hover {
  background-color: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.doc-btn.doc-btn-outline-secondary,
.doc-btn-outline-secondary {
  border-color: #64748b !important;
  color: #64748b !important;
}
.doc-btn.doc-btn-outline-secondary:hover,
.doc-btn-outline-secondary:hover {
  background-color: #64748b !important;
  border-color: #64748b !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(100, 116, 139, 0.25);
}

.doc-btn.doc-btn-outline-success,
.doc-btn-outline-success {
  border-color: #10b981 !important;
  color: #10b981 !important;
}
.doc-btn.doc-btn-outline-success:hover,
.doc-btn-outline-success:hover {
  background-color: #10b981 !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.doc-btn.doc-btn-outline-warning,
.doc-btn-outline-warning {
  border-color: #f59e0b !important;
  color: #f59e0b !important;
}
.doc-btn.doc-btn-outline-warning:hover,
.doc-btn-outline-warning:hover {
  background-color: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}

.doc-btn.doc-btn-outline-danger,
.doc-btn-outline-danger {
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}
.doc-btn.doc-btn-outline-danger:hover,
.doc-btn-outline-danger:hover {
  background-color: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}

.doc-btn.doc-btn-outline-info,
.doc-btn-outline-info {
  border-color: #06b6d4 !important;
  color: #06b6d4 !important;
}
.doc-btn.doc-btn-outline-info:hover,
.doc-btn-outline-info:hover {
  background-color: #06b6d4 !important;
  border-color: #06b6d4 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.25);
}

/* Dark mode overrides for outline buttons */
.dark .doc-btn.doc-btn-outline-secondary,
.dark .doc-btn-outline-secondary {
  border-color: #94a3b8 !important;
  color: #94a3b8 !important;
}
.dark .doc-btn.doc-btn-outline-secondary:hover,
.dark .doc-btn-outline-secondary:hover {
  background-color: #94a3b8 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* Solid icon-only fallback classes */
.doc-btn-icon-primary {
  background: #3b82f6;
  color: #ffffff !important;
}
.doc-btn-icon-primary:hover {
  background: #2563eb;
}

.doc-btn-icon-warning {
  background: #f59e0b;
  color: #ffffff !important;
}
.doc-btn-icon-warning:hover {
  background: #d97706;
}

.doc-btn-icon-danger {
  background: #ef4444;
  color: #ffffff !important;
}
.doc-btn-icon-danger:hover {
  background: #dc2626;
}

.doc-btn-icon-success {
  background: #10b981;
  color: #ffffff !important;
}
.doc-btn-icon-success:hover {
  background: #059669;
}

.doc-btn-icon-secondary {
  background: #6b7280;
  color: #ffffff !important;
}
.doc-btn-icon-secondary:hover {
  background: #4b5563;
}

/* Dashboard Growth Chart Select & Controls */
.chart-select-bayi {
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background-color: #ffffff;
  color: #374151;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chart-select-bayi:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.dark .chart-select-bayi {
  background-color: #1f2937;
  border-color: #374151;
  color: #e5e7eb;
}

.dark .chart-select-bayi:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
}

#bayiWeightChart, #bayiHeightChart {
  transition: opacity 0.2s ease;
}

/* ═════════════════════════════════════════════════════════════════════
   Modal XXL & DataTables Manajemen Riwayat Penimbangan Bayi
   ═════════════════════════════════════════════════════════════════════ */

/* Modal Body Scroll Container: Bebas Scroll Horizontal */
.custom-modal-body-scroll {
  max-height: calc(88vh - 120px);
  overflow-y: auto;
  overflow-x: hidden !important;
  padding: 18px 22px;
}

/* 2-Column Grid Layout: Kiri Form & Profil, Kanan DataTables */
.timbangan-modal-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 1023.98px) {
  .timbangan-modal-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Card Container Universal */
.timbangan-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.dark .timbangan-card {
  background: #1e2430;
  border-color: rgba(255, 255, 255, 0.08);
}

/* Card Header */
.timbangan-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

.dark .timbangan-box-header {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.timbangan-box-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  font-family: 'Outfit', sans-serif;
}

.dark .timbangan-box-title {
  color: #f1f5f9;
}

/* Profil Singkat Bayi (Panel Kiri) */
.timbangan-profile-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.timbangan-baby-avatar {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
  flex-shrink: 0;
}

.timbangan-profile-text {
  min-width: 0;
  flex: 1;
}

.timbangan-bayi-title {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  font-family: 'Outfit', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .timbangan-bayi-title {
  color: #f8fafc;
}

.timbangan-profile-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
}

/* Mini Stats Grid 2x2 */
.timbangan-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.timbangan-stat-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
}

.dark .timbangan-stat-box {
  background: #19202c;
  border-color: rgba(255, 255, 255, 0.08);
}

.stat-box-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
  margin-bottom: 2px;
}

.dark .stat-box-label {
  color: #94a3b8;
}

.stat-box-value {
  font-size: 13px;
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
}

/* Card Form Input / Edit */
.timbangan-card.timbangan-form-card {
  background: #fcfdfe;
}

.dark .timbangan-card.timbangan-form-card {
  background: #19202c;
}

.timbangan-card.timbangan-form-editing {
  border-color: #f59e0b;
  box-shadow: 0 0 0 1px #f59e0b, 0 4px 12px rgba(245, 158, 11, 0.15);
}

.dark .timbangan-card.timbangan-form-editing {
  border-color: #d97706;
  box-shadow: 0 0 0 1px #d97706, 0 4px 12px rgba(245, 158, 11, 0.2);
}

.form-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.form-input-sm {
  padding: 7px 10px 7px 32px !important;
  font-size: 13px !important;
  height: 36px !important;
}

.form-textarea-sm {
  padding: 6px 10px !important;
  font-size: 13px !important;
  resize: vertical;
}

/* Panel Kanan: DataTables Riwayat */
.timbangan-table-container {
  width: 100%;
  overflow-x: hidden !important;
}

#timbanganDetailTable {
  width: 100% !important;
  table-layout: fixed;
  border-collapse: collapse;
  margin-top: 6px;
  border-bottom: 1px solid #e5e7eb !important;
}

.dark #timbanganDetailTable {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

#timbanganDetailTable th,
#timbanganDetailTable td {
  padding: 9px 8px;
  font-size: 12.5px;
  vertical-align: middle;
  border-bottom: 1px solid #f1f5f9;
}

.dark #timbanganDetailTable th,
.dark #timbanganDetailTable td {
  border-bottom-color: rgba(255, 255, 255, 0.04);
}

#timbanganDetailTable th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
  background: #f8fafc;
}

.dark #timbanganDetailTable th {
  background: #19202c;
  color: #94a3b8;
}

/* Lebar Kolom Tabel Terukur Presisi agar Pas 100% */
#timbanganDetailTable th.col-no,
#timbanganDetailTable td.col-no {
  width: 36px;
  text-align: center;
}

#timbanganDetailTable th.col-bulan,
#timbanganDetailTable td.col-bulan {
  width: 82px;
  text-align: center;
}

#timbanganDetailTable th.col-tgl,
#timbanganDetailTable td.col-tgl {
  width: 96px;
  white-space: nowrap;
}

#timbanganDetailTable th.col-bb,
#timbanganDetailTable td.col-bb {
  width: 68px;
  white-space: nowrap;
}

#timbanganDetailTable th.col-tb,
#timbanganDetailTable td.col-tb {
  width: 68px;
  white-space: nowrap;
}

#timbanganDetailTable th.col-lk,
#timbanganDetailTable td.col-lk {
  width: 66px;
  white-space: nowrap;
}

#timbanganDetailTable th.col-catatan,
#timbanganDetailTable td.col-catatan {
  /* Kolom fleksibel */
}

.timbangan-catatan-text {
  font-size: 12px;
  color: #4b5563;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
}

.dark .timbangan-catatan-text {
  color: #9ca3af;
}

#timbanganDetailTable th.col-aksi,
#timbanganDetailTable td.col-aksi {
  width: 72px;
  text-align: center;
  white-space: nowrap;
}

/* Action Button Mini di Tabel Modal */
.doc-btn-icon.doc-btn-icon-xs {
  width: 28px !important;
  height: 28px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
}

/* DataTables Controls di Dalam Modal */
#timbanganDetailTable_wrapper {
  padding-top: 2px;
}

#timbanganDetailTable_wrapper .dataTables_length,
#timbanganDetailTable_wrapper .dataTables_filter {
  margin-bottom: 10px;
}

#timbanganDetailTable_wrapper .dataTables_length label,
#timbanganDetailTable_wrapper .dataTables_filter label {
  font-size: 12px;
  color: #64748b;
  display: flex;
  align-items: center;
}

.dark #timbanganDetailTable_wrapper .dataTables_length label,
.dark #timbanganDetailTable_wrapper .dataTables_filter label {
  color: #94a3b8;
}

#timbanganDetailTable_wrapper .dataTables_length select {
  padding: 3px 20px 3px 8px;
  font-size: 12px;
  border-radius: 6px;
  margin: 0 4px;
}

#timbanganDetailTable_wrapper .dataTables_filter input {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 6px;
  margin-left: 6px;
}

#timbanganDetailTable_wrapper .dataTables_info,
#timbanganDetailTable_wrapper .dataTables_paginate {
  margin-top: 10px;
  padding-top: 4px;
  border-top: none !important;
  box-shadow: none !important;
}

#timbanganDetailTable_wrapper .dataTables_info {
  font-size: 12px;
  color: #64748b;
}

.dark #timbanganDetailTable_wrapper .dataTables_info {
  color: #94a3b8;
}

#timbanganDetailTable_wrapper .dataTables_paginate .paginate_button {
  padding: 3px 8px;
  font-size: 12px;
  border-radius: 4px;
}

#timbanganDetailTable tbody tr:last-child td {
  border-bottom: none !important;
}

/* Flash highlight saat row di-update */
@keyframes timbanganRowHighlight {
  0% { background-color: rgba(59, 130, 246, 0.25); }
  100% { background-color: transparent; }
}

.row-flash-success {
  animation: timbanganRowHighlight 2s ease;
}

/* ══════════════════════════════════════════════════════════════════════════════ */
/* ── COMPONENT: COMPACT METRIC STAT CARDS ───────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════════ */
.compact-stat-grid,
.cal-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.compact-stat-card,
.cal-stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
}

.dark .compact-stat-card,
.dark .cal-stat-card {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(255, 255, 255, 0.08);
}

.compact-stat-card:hover,
.cal-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.compact-stat-icon,
.cal-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}

.cal-stat-icon-purple,  .stat-icon-soft-purple  { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }
.cal-stat-icon-emerald, .stat-icon-soft-emerald { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.cal-stat-icon-rose,    .stat-icon-soft-rose    { background: rgba(244, 63, 94, 0.12);  color: #f43f5e; }
.cal-stat-icon-amber,   .stat-icon-soft-amber   { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.cal-stat-icon-blue,    .stat-icon-soft-blue    { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
.cal-stat-icon-indigo,  .stat-icon-soft-indigo  { background: rgba(99, 102, 241, 0.12); color: #6366f1; }

.compact-stat-value,
.cal-stat-val {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-title, #1e293b);
  line-height: 1.2;
}

.dark .compact-stat-value,
.dark .cal-stat-val {
  color: #f1f5f9;
}

.compact-stat-label,
.cal-stat-lbl {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted, #64748b);
  margin-top: 2px;
}

.dark .compact-stat-label,
.dark .cal-stat-lbl {
  color: #94a3b8;
}

/* ══════════════════════════════════════════════════════════════════════════════ */
/* ── COMPONENT: ACTION ALERT BANNER ─────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════════ */
.action-alert-box,
.kalender-alert-box {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.16) 100%);
  border: 1px solid rgba(245, 158, 11, 0.3);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.08);
}

.action-alert-icon,
.kalender-alert-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.action-alert-content,
.kalender-alert-content {
  flex: 1;
  min-width: 0;
}

.action-alert-title,
.kalender-alert-title {
  font-size: 15px;
  font-weight: 700;
  color: #b45309;
  margin-bottom: 2px;
}

.dark .action-alert-title,
.dark .kalender-alert-title {
  color: #fbbf24;
}

.action-alert-desc,
.kalender-alert-desc {
  font-size: 13px;
  color: #78350f;
  line-height: 1.5;
}

.dark .action-alert-desc,
.dark .kalender-alert-desc {
  color: #fde68a;
}

.btn-action-alert,
.btn-kalender-alert {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 10px;
  background: #f59e0b;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-action-alert:hover,
.btn-kalender-alert:hover {
  background: #d97706;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.45);
}

/* ══════════════════════════════════════════════════════════════════════════════ */
/* ── COMPONENT: STATUS LEGEND BAR ───────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════════ */
.status-legend-bar,
.kalender-legend-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--bg-card-subtle, rgba(0, 0, 0, 0.02));
  border: 1px dashed var(--border-color, #e2e8f0);
  flex-wrap: wrap;
}

.dark .status-legend-bar,
.dark .kalender-legend-bar {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.1);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.legend-dot-success, .legend-dot-sudah  { background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }
.legend-dot-danger,  .legend-dot-belum  { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); }
.legend-dot-warning, .legend-dot-kosong { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); }
.legend-dot-primary                    { background: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); }
.legend-dot-info                       { background: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); }

.legend-text {
  font-size: 12.5px;
  color: var(--text-muted, #64748b);
}

.dark .legend-text {
  color: #94a3b8;
}

/* ══════════════════════════════════════════════════════════════════════════════ */
/* ── COMPONENT: FULLCALENDAR GLOBAL ENHANCEMENTS & MODERN THEME ────────────── */
/* ══════════════════════════════════════════════════════════════════════════════ */
.kalender-wrapper,
.calendar-full-wrapper {
  width: 100% !important;
  display: block !important;
  min-height: 600px;
}

#calendarView,
.calendar-view-container {
  width: 100% !important;
}

.fc-theme-standard .fc-scrollgrid {
  width: 100% !important;
  table-layout: fixed !important;
  border: 1px solid var(--border-color, #e2e8f0) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

.dark .fc-theme-standard .fc-scrollgrid {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.fc-scrollgrid-sync-table,
.fc-col-header,
.fc-daygrid-body,
.fc-daygrid-body table,
.fc-scrollgrid-section-liquid > td > div,
.fc-scrollgrid-section-liquid > td > div > div {
  width: 100% !important;
  table-layout: fixed !important;
}

/* Table Headers (SEN, SEL, RAB, ...) */
.fc-theme-standard th {
  background: #f8fafc !important;
  padding: 14px 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
  border-color: var(--border-color, #e2e8f0) !important;
  text-align: center !important;
}

.dark .fc-theme-standard th {
  background: #19202c !important;
  color: #94a3b8 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.fc-theme-standard td {
  border-color: var(--border-color, #f1f5f9) !important;
}

.dark .fc-theme-standard td {
  border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Day Cell Height & Hover */
.fc .fc-daygrid-day-frame {
  min-height: 110px !important;
  padding: 6px 8px !important;
  transition: background 0.15s ease;
}

.fc .fc-daygrid-day:hover .fc-daygrid-day-frame {
  background: rgba(99, 102, 241, 0.035) !important;
  cursor: pointer;
}

.dark .fc .fc-daygrid-day:hover .fc-daygrid-day-frame {
  background: rgba(99, 102, 241, 0.08) !important;
}

/* Day Number Top */
.fc .fc-daygrid-day-top {
  flex-direction: row-reverse !important;
  margin-bottom: 4px;
}

.fc .fc-daygrid-day-number {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  padding: 4px 8px !important;
  border-radius: 8px;
  transition: all 0.15s;
}

.dark .fc .fc-daygrid-day-number {
  color: #cbd5e1 !important;
}

.fc .fc-day-other .fc-daygrid-day-number {
  color: #cbd5e1 !important;
  opacity: 0.5;
}

.dark .fc .fc-day-other .fc-daygrid-day-number {
  color: #64748b !important;
}

/* Hari Ini (Today Active Highlight) */
.fc .fc-day-today {
  background: rgba(99, 102, 241, 0.04) !important;
}

.dark .fc .fc-day-today {
  background: rgba(99, 102, 241, 0.12) !important;
}

.fc .fc-day-today .fc-daygrid-day-number {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  color: #ffffff !important;
  width: 26px !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4) !important;
  padding: 0 !important;
}

/* FullCalendar Header Toolbar */
.fc .fc-header-toolbar {
  margin-top: 18px !important;
  margin-bottom: 24px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid var(--border-color, #f1f5f9) !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.dark .fc .fc-header-toolbar {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.fc .fc-toolbar-chunk {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.fc .fc-toolbar-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--text-title, #0f172a) !important;
  letter-spacing: -0.02em !important;
  margin: 4px 0 !important;
  line-height: 1.25 !important;
}

.dark .fc .fc-toolbar-title {
  color: #f1f5f9 !important;
}

.fc .fc-button {
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  border: 1px solid var(--border-color, #e2e8f0) !important;
  background: var(--bg-card, #ffffff) !important;
  color: var(--text-body, #334155) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s ease !important;
  outline: none !important;
}

.dark .fc .fc-button {
  background: rgba(30, 41, 59, 0.8) !important;
  color: #cbd5e1 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.fc .fc-button:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

.dark .fc .fc-button:hover {
  background: rgba(51, 65, 85, 0.8) !important;
  color: #ffffff !important;
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background: #6366f1 !important;
  border-color: #6366f1 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35) !important;
  border-radius: 10px !important;
}

/* Button Groups with Left & Right Margins (Tidak Menempel) */
.fc .fc-button-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  vertical-align: middle !important;
}

.fc .fc-button-group > .fc-button,
.fc-direction-ltr .fc-button-group > .fc-button,
.fc-direction-rtl .fc-button-group > .fc-button {
  margin-left: 3px !important;
  margin-right: 3px !important;
  border-radius: 10px !important;
  flex: 0 0 auto !important;
}

.fc-direction-ltr .fc-button-group > .fc-button:not(:first-child),
.fc-direction-ltr .fc-button-group > .fc-button:not(:last-child),
.fc-direction-rtl .fc-button-group > .fc-button:not(:first-child),
.fc-direction-rtl .fc-button-group > .fc-button:not(:last-child) {
  margin-left: 3px !important;
  margin-right: 3px !important;
  border-radius: 10px !important;
}

.fc .fc-button-group > .fc-button:first-child {
  margin-left: 0 !important;
}

.fc .fc-button-group > .fc-button:last-child {
  margin-right: 0 !important;
}

/* Responsive Mobile Layout for Calendar Toolbar */
@media (max-width: 768px) {
  .status-legend-bar,
  .kalender-legend-bar {
    margin-bottom: 22px !important;
  }

  .fc .fc-header-toolbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-top: 18px !important;
    margin-bottom: 24px !important;
    padding-bottom: 20px !important;
  }

  .fc .fc-header-toolbar .fc-toolbar-chunk {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .fc .fc-header-toolbar .fc-toolbar-chunk:first-child {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }

  .fc .fc-toolbar-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    margin: 8px 0 !important;
    padding: 4px 0 !important;
    line-height: 1.3 !important;
    display: block !important;
  }

  .fc .fc-header-toolbar .fc-toolbar-chunk:last-child {
    margin-top: 4px !important;
    margin-bottom: 6px !important;
  }

  .fc .fc-header-toolbar .fc-button-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .fc-direction-ltr .fc-button-group > .fc-button,
  .fc-direction-rtl .fc-button-group > .fc-button,
  .fc .fc-button-group > .fc-button {
    margin-left: 3px !important;
    margin-right: 3px !important;
    border-radius: 10px !important;
  }

  .fc .fc-button {
    padding: 8px 15px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }
}

/* Event Pills */
.fc-event {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 4px !important;
}

.event-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
  cursor: pointer;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.event-pill-success,
.event-pill-sudah {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid #10b981;
  color: #065f46;
}

.dark .event-pill-success,
.dark .event-pill-sudah {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.5);
}

.event-pill-success i,
.event-pill-sudah i { color: #10b981; font-size: 12px; }

.event-pill-danger,
.event-pill-belum {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border: 1px solid #ef4444;
  color: #991b1b;
}

.dark .event-pill-danger,
.dark .event-pill-belum {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.5);
}

.event-pill-danger i,
.event-pill-belum i { color: #ef4444; font-size: 12px; }

.event-pill-warning,
.event-pill-kosong {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px dashed #f59e0b;
  color: #92400e;
}

.dark .event-pill-warning,
.dark .event-pill-kosong {
  background: rgba(245, 158, 11, 0.16);
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.5);
}

.event-pill-warning i,
.event-pill-kosong i { color: #f59e0b; font-size: 12px; }

.pill-badge-action {
  margin-left: auto;
  font-size: 9px;
  background: rgba(245, 158, 11, 0.25);
  color: #b45309;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 700;
}

.dark .pill-badge-action {
  background: rgba(245, 158, 11, 0.35);
  color: #fef08a;
}

/* ══════════════════════════════════════════════════════════════════════════════ */
/* ── COMPONENT: SELECTION / STATUS CHOICE CARDS ─────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════════ */
.selection-choice-card,
.status-choice-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 2px solid var(--border-color, #e2e8f0);
  background: var(--bg-card, #ffffff);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
  position: relative;
  user-select: none;
}

.dark .selection-choice-card,
.dark .status-choice-card {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
}

.selection-choice-card:hover,
.status-choice-card:hover {
  border-color: #6366f1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.12);
}

.status-choice-card.active-success,
.status-choice-card.active-sudah {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.08);
  box-shadow: 0 0 0 1px #10b981, 0 4px 14px rgba(16, 185, 129, 0.15);
}

.status-choice-card.active-danger,
.status-choice-card.active-belum {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
  box-shadow: 0 0 0 1px #ef4444, 0 4px 14px rgba(239, 68, 68, 0.15);
}

.status-choice-card.active-primary {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.08);
  box-shadow: 0 0 0 1px #6366f1, 0 4px 14px rgba(99, 102, 241, 0.15);
}

.choice-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.choice-icon-success,
.choice-icon-sudah {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.choice-icon-danger,
.choice-icon-belum {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.choice-icon-primary {
  background: rgba(99, 102, 241, 0.15);
  color: #6366f1;
}

.choice-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.choice-label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-title, #1e293b);
  line-height: 1.25;
}

.dark .choice-label {
  color: #f1f5f9;
}

.choice-sub {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
  line-height: 1.2;
}

.dark .choice-sub {
  color: #94a3b8;
}

/* ══════════════════════════════════════════════════════════════════════════════ */
/* ── COMPONENT: MODAL SCROLL & FORM ENHANCEMENTS ────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════════ */
.custom-modal-overlay.modal-scrollable,
.custom-modal-overlay {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.custom-modal-dialog {
  display: flex;
  flex-direction: column;
}

.custom-modal-dialog > form,
.custom-modal-dialog .modal-form-flex {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  margin: 0;
}

.custom-modal-header {
  flex-shrink: 0;
}

.custom-modal-body-scroll,
.custom-modal-body.custom-modal-body-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.custom-modal-footer {
  flex-shrink: 0;
}

@media (max-width: 639.98px) {
  .custom-modal-overlay {
    align-items: flex-start !important;
    padding: 12px 10px !important;
  }

  .custom-modal-dialog {
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    border-radius: 16px !important;
    margin: 0 auto !important;
  }
}

/* Full Width Form Inputs */
.form-input-full,
.form-input[type="time"].form-input-full,
.time-input-full,
#catat_jam {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* Select2 Enhancements inside Custom Modals */
.select2-modal-enhanced .select2-container,
.custom-modal-dialog .select2-container {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

.select2-modal-enhanced .select2-container--default .select2-selection--single,
.custom-modal-dialog .select2-container--default .select2-selection--single {
  height: 44px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 14px !important;
  border: 1px solid var(--border-color, #e2e8f0) !important;
  background: var(--bg-card, #ffffff) !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.select2-modal-enhanced .select2-container--default.select2-container--focus .select2-selection--single,
.select2-modal-enhanced .select2-container--default.select2-container--open .select2-selection--single,
.custom-modal-dialog .select2-container--default.select2-container--focus .select2-selection--single,
.custom-modal-dialog .select2-container--default.select2-container--open .select2-selection--single {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

.select2-modal-enhanced .select2-container--default .select2-selection--single .select2-selection__rendered,
.custom-modal-dialog .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 42px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--text-title, #1e293b) !important;
  padding-left: 0 !important;
}

.select2-modal-enhanced .select2-container--default .select2-selection--single .select2-selection__arrow,
.custom-modal-dialog .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px !important;
  right: 12px !important;
  display: flex !important;
  align-items: center !important;
}

.dark .select2-modal-enhanced .select2-container--default .select2-selection--single,
.dark .custom-modal-dialog .select2-container--default .select2-selection--single {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark .select2-modal-enhanced .select2-container--default .select2-selection--single .select2-selection__rendered,
.dark .custom-modal-dialog .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #f1f5f9 !important;
}

/* High Z-Index Select2 Dropdowns */
.select2-container--open {
  z-index: 100005 !important;
}

.select2-dropdown {
  z-index: 100005 !important;
  border-radius: 12px !important;
  border: 1px solid var(--border-color, #e2e8f0) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18) !important;
  overflow: hidden !important;
}

.dark .select2-dropdown {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.select2-results__option {
  font-size: 13px !important;
  padding: 10px 14px !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #6366f1 !important;
  color: #ffffff !important;
}