/* Invoice center — premium dashboard shell (loaded after base rules in index.html) */

:root {
  --dash-bg: #f4f6fb;
  --dash-surface: #ffffff;
  --dash-sidebar: #0f172a;
  --dash-sidebar-hover: rgba(255, 255, 255, 0.06);
  --dash-sidebar-active: rgba(99, 102, 241, 0.35);
  --dash-text: #0f172a;
  --dash-muted: #64748b;
  --dash-primary: #6366f1;
  --dash-primary-dark: #4f46e5;
  --dash-radius: 16px;
  --dash-radius-sm: 12px;
  --dash-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
  --dash-shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.08);
  --dash-gradient-1: linear-gradient(135deg, #f97316 0%, #ec4899 100%);
  --dash-gradient-2: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
  --font-ui: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-ar: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", sans-serif;
}

html[dir="rtl"] body {
  font-family: var(--font-ar);
}

body {
  font-family: var(--font-ui);
  background: var(--dash-bg);
  color: var(--text);
}

/* Login — glass / premium */
#loginPage {
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(99, 102, 241, 0.12), transparent),
    radial-gradient(800px 400px at 90% 100%, rgba(236, 72, 153, 0.1), transparent),
    var(--dash-bg);
}

#loginPage .login-card {
  width: min(400px, 92vw);
  padding: 44px 40px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--dash-shadow-lg);
}

#loginPage .login-card h2 {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #4f46e5, #db2777);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#loginPage .subtitle {
  font-size: 0.9rem;
  color: var(--dash-muted);
  margin-bottom: 28px;
}

/* App shell */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Hide old sidebar — replaced by LumaBar */
.app-sidebar {
  display: none !important;
}
.app-topnav {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   LumaBar — floating pill navigation (top center)
   ═══════════════════════════════════════════════════════════ */
.luma-bar-wrap {
  display: flex;
  align-items: center;
  padding: 10px 24px 0;
  position: sticky;
  top: 0;
  z-index: 50;
  pointer-events: none;
  direction: ltr;
}

.luma-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 9999px;
  pointer-events: auto;
  margin: 0 auto;
  /* Dark mode (default) */
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

/* Active glow blob */
.luma-glow {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(230, 126, 34, 0.6), rgba(241, 196, 15, 0.45));
  filter: blur(22px);
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: left 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s;
  pointer-events: none;
  z-index: 0;
}

/* Nav item */
.luma-item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 46px;
  height: 46px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s;
  text-decoration: none;
  font-family: inherit;
}

.luma-item svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

/* Label below icon */
.luma-label {
  font-size: 8px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.3px;
  white-space: nowrap;
  opacity: 0.7;
  pointer-events: none;
  color: inherit;
}
.luma-item.active .luma-label { opacity: 1; }
.luma-item:hover .luma-label { opacity: 1; }

.luma-item:hover {
  transform: scale(1.18);
  color: rgba(255, 255, 255, 0.9);
}

.luma-item.active {
  transform: scale(1.35);
  color: #fff;
}

/* Tooltip */
.luma-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  /* Dark mode tooltip */
  background: rgba(100, 116, 139, 0.9);
  color: #fff;
}

.luma-item:hover .luma-tooltip {
  opacity: 1;
}

/* Alert badge on LumaBar items */
.luma-item .alert-badge {
  position: absolute;
  top: 4px;
  right: 2px;
  font-size: 9px;
  padding: 1px 5px;
  min-width: 16px;
  text-align: center;
}

/* ── Utility bar (user info, lang, theme) ── */
.luma-util-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 32px;
  z-index: 40;
  overflow: visible;
  direction: ltr;
}
.luma-util-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ds-logo {
  height: 90px;
  width: 90px;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 12px;
  pointer-events: auto;
  flex-shrink: 0;
}

.luma-util-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.luma-util-bar .tb-name {
  color: #fff;
  font-weight: 600;
  font-size: 0.82rem;
}

.luma-util-bar .role-badge {
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
}

.luma-util-bar #logoutBtn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.75);
  padding: 3px 12px;
  border-radius: 6px;
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
}

.luma-util-bar #logoutBtn:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ═══ LumaBar Light-mode overrides ═══ */
.theme-light .luma-bar {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.theme-light .luma-item {
  color: rgba(71, 85, 105, 0.6);
}

.theme-light .luma-item:hover {
  color: rgba(30, 41, 59, 0.85);
}

.theme-light .luma-item.active {
  color: #1e293b;
}

.theme-light .luma-glow {
  background: linear-gradient(135deg, rgba(230, 126, 34, 0.4), rgba(241, 196, 15, 0.3));
}

.theme-light .luma-tooltip {
  background: rgba(203, 213, 225, 0.95);
  color: #0f172a;
}

.theme-light .luma-util-bar .tb-name {
  color: #1e293b;
}

.theme-light .luma-util-bar .role-badge {
  background: rgba(0, 0, 0, 0.08);
  color: #334155;
}

.theme-light .luma-util-bar #logoutBtn {
  border-color: rgba(0, 0, 0, 0.12);
  color: #475569;
}

/* ═══ Animated Sun/Moon Theme Toggle (Uiverse.io / Galahhad) ═══ */
.theme-switch {
  --toggle-size: 10px;
  --container-width: 5.625em;
  --container-height: 2.5em;
  --container-radius: 6.25em;
  --container-light-bg: #3D7EAE;
  --container-night-bg: #1D1F2C;
  --circle-container-diameter: 3.375em;
  --sun-moon-diameter: 2.125em;
  --sun-bg: #ECCA2F;
  --moon-bg: #C4C9D1;
  --spot-color: #959DB1;
  --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --stars-color: #fff;
  --clouds-color: #F3FDFF;
  --back-clouds-color: #AACADF;
  --transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
  --circle-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17);
}

.theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: var(--toggle-size);
}

.theme-switch__checkbox {
  display: none;
}

.theme-switch__container {
  width: var(--container-width);
  height: var(--container-height);
  background-color: var(--container-light-bg);
  border-radius: var(--container-radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
  transition: var(--transition);
  position: relative;
}

.theme-switch__container::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
  border-radius: var(--container-radius);
}

.theme-switch__circle-container {
  width: var(--circle-container-diameter);
  height: var(--circle-container-diameter);
  background-color: rgba(255, 255, 255, 0.1);
  position: absolute;
  left: var(--circle-container-offset);
  top: var(--circle-container-offset);
  border-radius: var(--container-radius);
  box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
  display: flex;
  transition: var(--circle-transition);
  pointer-events: none;
}

.theme-switch__sun-moon-container {
  pointer-events: auto;
  position: relative;
  z-index: 2;
  width: var(--sun-moon-diameter);
  height: var(--sun-moon-diameter);
  margin: auto;
  border-radius: var(--container-radius);
  background-color: var(--sun-bg);
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
  filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
  overflow: hidden;
  transition: var(--transition);
}

.theme-switch__moon {
  transform: translateX(100%);
  width: 100%;
  height: 100%;
  background-color: var(--moon-bg);
  border-radius: inherit;
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
  transition: var(--transition);
  position: relative;
}

.theme-switch__spot {
  position: absolute;
  top: 0.75em;
  left: 0.312em;
  width: 0.75em;
  height: 0.75em;
  border-radius: var(--container-radius);
  background-color: var(--spot-color);
  box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
}

.theme-switch__spot:nth-of-type(2) {
  width: 0.375em;
  height: 0.375em;
  top: 0.937em;
  left: 1.375em;
}

.theme-switch__spot:nth-last-of-type(3) {
  width: 0.25em;
  height: 0.25em;
  top: 0.312em;
  left: 0.812em;
}

.theme-switch__clouds {
  width: 1.25em;
  height: 1.25em;
  background-color: var(--clouds-color);
  border-radius: var(--container-radius);
  position: absolute;
  bottom: -0.625em;
  left: 0.312em;
  box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
  transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
}

.theme-switch__stars-container {
  position: absolute;
  color: var(--stars-color);
  top: -100%;
  left: 0.312em;
  width: 2.75em;
  height: auto;
  transition: var(--transition);
}

/* Checked = night/dark */
.theme-switch__checkbox:checked + .theme-switch__container {
  background-color: var(--container-night-bg);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em);
}

.theme-switch__circle-container:hover {
  left: calc(var(--circle-container-offset) + 0.187em);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon {
  transform: translate(0);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds {
  bottom: -4.062em;
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container {
  top: 50%;
  transform: translateY(-50%);
}

.sb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.15rem;
  padding: 8px 12px 24px;
  letter-spacing: -0.02em;
  color: #fff;
}

.sb-brand .sb-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--dash-gradient-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.35);
}

#sidebarNav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

#sidebarNav .nav-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: start;
  width: 100%;
  border: none;
  background: transparent;
  color: #cbd5e1;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
  font-family: inherit;
}

#sidebarNav .nav-tab:hover,
.app-sidebar .sb-merged:hover {
  background: var(--dash-sidebar-hover);
  color: #fff;
}

#sidebarNav .nav-tab.active {
  background: var(--dash-sidebar-active);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.app-sidebar .sb-merged {
  display: block;
  margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 14px;
  padding-top: 16px;
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0.95;
  text-align: start;
  color: #cbd5e1;
  text-decoration: none;
  border-radius: 10px;
  transition: background 0.15s, color 0.15s;
}

.sb-side-footer {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ═══ Pulse Gradient Button (Show Original Invoice) ═══ */
.pulse-btn {
  border: none;
  color: #fff;
  background-image: linear-gradient(30deg, #c45e00, #f0a040);
  border-radius: 20px;
  background-size: 100% auto;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 0.6em 1.5em;
  cursor: pointer;
  transition: background-size 0.4s, background-position 0.4s;
  margin-bottom: 12px;
}

.pulse-btn:hover {
  background-position: right center;
  background-size: 200% auto;
  animation: pulse-glow 1.5s infinite;
}

@keyframes pulse-glow {
  0% { box-shadow: 0 0 0 0 rgba(220, 130, 40, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(220, 130, 40, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 130, 40, 0); }
}

/* Light mode: green pulse button */
.theme-light .pulse-btn {
  background-image: linear-gradient(30deg, #2e7d32, #66bb6a);
  color: #fff;
}

.theme-light .pulse-btn:hover {
  animation-name: pulse-glow-light;
}

@keyframes pulse-glow-light {
  0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); }
  100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}

/* ═══ Animated Glow Button (Extract Invoice) ═══ */
.xbtn-wrapper {
  position: relative;
  display: block;
  width: 100%;
}

.xbtn {
  --border-radius: 24px;
  --padding: 4px;
  --transition: 0.4s;
  --button-color: #101010;
  --highlight-color-hue: 28deg;

  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.7em 0.8em 0.7em 1.2em;
  font-family: "Poppins", "Inter", "Segoe UI", sans-serif;
  font-size: 1em;
  font-weight: 400;
  background-color: var(--button-color);
  box-shadow:
    inset 0px 1px 1px rgba(255,255,255,0.2),
    inset 0px 2px 2px rgba(255,255,255,0.15),
    inset 0px 4px 4px rgba(255,255,255,0.1),
    inset 0px 8px 8px rgba(255,255,255,0.05),
    inset 0px 16px 16px rgba(255,255,255,0.05),
    0px -1px 1px rgba(0,0,0,0.02),
    0px -2px 2px rgba(0,0,0,0.03),
    0px -4px 4px rgba(0,0,0,0.05),
    0px -8px 8px rgba(0,0,0,0.06),
    0px -16px 16px rgba(0,0,0,0.08);
  border: solid 1px #fff2;
  border-radius: var(--border-radius);
  cursor: pointer;
  position: relative;
  outline: none;
  transition: box-shadow var(--transition), border var(--transition), background-color var(--transition);
}

.xbtn::before {
  content: "";
  position: absolute;
  top: calc(0px - var(--padding));
  left: calc(0px - var(--padding));
  width: calc(100% + var(--padding) * 2);
  height: calc(100% + var(--padding) * 2);
  border-radius: calc(var(--border-radius) + var(--padding));
  pointer-events: none;
  background-image: linear-gradient(0deg, #0004, #000a);
  z-index: -1;
  transition: box-shadow var(--transition), filter var(--transition);
  box-shadow:
    0 -8px 8px -6px #0000 inset,
    0 -16px 16px -8px #00000000 inset,
    1px 1px 1px #fff2, 2px 2px 2px #fff1,
    -1px -1px 1px #0002, -2px -2px 2px #0001;
}

.xbtn::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(
    0deg, #fff, hsl(var(--highlight-color-hue),100%,70%),
    hsla(var(--highlight-color-hue),100%,70%,50%), 8%, transparent
  );
  background-position: 0 0;
  opacity: 0;
  transition: opacity var(--transition), filter var(--transition);
}

.xbtn-svg {
  flex-shrink: 0;
  height: 24px;
  width: 24px;
  margin-right: 0.5rem;
  fill: #e8e8e8;
  animation: xbtn-flicker 2s linear infinite;
  animation-delay: 0.5s;
  filter: drop-shadow(0 0 2px #fff9);
  transition: fill var(--transition), filter var(--transition), opacity var(--transition);
}

@keyframes xbtn-flicker {
  50% { opacity: 0.3; }
}

.xbtn-letter {
  position: relative;
  display: inline-block;
  color: #fff5;
  animation: xbtn-letter-anim 2s ease-in-out infinite;
  transition: color var(--transition), text-shadow var(--transition), opacity var(--transition);
}

@keyframes xbtn-letter-anim {
  50% { text-shadow: 0 0 3px #fff8; color: #fff; }
}

.xbtn-txt-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 7em;
}

.xbtn-txt-1, .xbtn-txt-2 {
  position: absolute;
  word-spacing: -1em;
  white-space: nowrap;
}

.xbtn-txt-1 {
  animation: xbtn-appear 1s ease-in-out forwards;
}

.xbtn-txt-2 { opacity: 0; }

@keyframes xbtn-appear {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.xbtn:focus .xbtn-txt-1 {
  animation: xbtn-opacity 0.3s ease-in-out forwards;
  animation-delay: 1s;
}

.xbtn:focus .xbtn-txt-2 {
  animation: xbtn-opacity 0.3s ease-in-out reverse forwards;
  animation-delay: 1s;
}

@keyframes xbtn-opacity {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.xbtn:focus .xbtn-letter {
  animation: xbtn-focused-letter 1s ease-in-out forwards, xbtn-letter-anim 1.2s ease-in-out infinite;
  animation-delay: 0s, 1s;
}

@keyframes xbtn-focused-letter {
  0%, 100% { filter: blur(0px); }
  50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue),100%,70%)); }
}

.xbtn:focus .xbtn-svg {
  animation-duration: 1.2s;
  animation-delay: 0.2s;
}

.xbtn:focus::before {
  box-shadow:
    0 -8px 12px -6px #fff3 inset,
    0 -16px 16px -8px hsla(var(--highlight-color-hue),100%,70%,20%) inset,
    1px 1px 1px #fff3, 2px 2px 2px #fff1,
    -1px -1px 1px #0002, -2px -2px 2px #0001;
}

.xbtn:focus::after {
  opacity: 0.6;
  mask-image: linear-gradient(0deg, #fff, transparent);
  filter: brightness(100%);
}

/* Letter animation delays */
.xbtn-letter:nth-child(1)  { animation-delay: 0s; }
.xbtn-letter:nth-child(2)  { animation-delay: 0.08s; }
.xbtn-letter:nth-child(3)  { animation-delay: 0.16s; }
.xbtn-letter:nth-child(4)  { animation-delay: 0.24s; }
.xbtn-letter:nth-child(5)  { animation-delay: 0.32s; }
.xbtn-letter:nth-child(6)  { animation-delay: 0.40s; }
.xbtn-letter:nth-child(7)  { animation-delay: 0.48s; }
.xbtn-letter:nth-child(8)  { animation-delay: 0.56s; }
.xbtn-letter:nth-child(9)  { animation-delay: 0.64s; }
.xbtn-letter:nth-child(10) { animation-delay: 0.72s; }
.xbtn-letter:nth-child(11) { animation-delay: 0.80s; }
.xbtn-letter:nth-child(12) { animation-delay: 0.88s; }
.xbtn-letter:nth-child(13) { animation-delay: 0.96s; }

/* Hover — dark mode (orange hue 28deg) */
.xbtn:hover {
  border: solid 1px hsla(var(--highlight-color-hue),100%,80%,40%);
}

.xbtn:hover::before {
  box-shadow:
    0 -8px 8px -6px #fffa inset,
    0 -16px 16px -8px hsla(var(--highlight-color-hue),100%,70%,30%) inset,
    1px 1px 1px #fff2, 2px 2px 2px #fff1,
    -1px -1px 1px #0002, -2px -2px 2px #0001;
}

.xbtn:hover::after {
  opacity: 1;
  mask-image: linear-gradient(0deg, #fff, transparent);
}

.xbtn:hover .xbtn-svg {
  fill: #fff;
  filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue),100%,70%))
    drop-shadow(0 -4px 6px #0009);
  animation: none;
}

/* Active press */
.xbtn:active {
  border: solid 1px hsla(var(--highlight-color-hue),100%,80%,70%);
  background-color: hsla(var(--highlight-color-hue),50%,20%,0.5);
}

.xbtn:active::before {
  box-shadow:
    0 -8px 12px -6px #fffa inset,
    0 -16px 16px -8px hsla(var(--highlight-color-hue),100%,70%,80%) inset,
    1px 1px 1px #fff4, 2px 2px 2px #fff2,
    -1px -1px 1px #0002, -2px -2px 2px #0001;
}

.xbtn:active::after {
  opacity: 1;
  mask-image: linear-gradient(0deg, #fff, transparent);
  filter: brightness(200%);
}

.xbtn:active .xbtn-letter {
  text-shadow: 0 0 1px hsla(var(--highlight-color-hue),100%,90%,90%);
  animation: none;
}

/* Disabled state */
.xbtn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.xbtn:disabled .xbtn-svg { animation: none; opacity: 0.4; }
.xbtn:disabled .xbtn-letter { animation: none; color: #fff3; }

.xbtn .spinner {
  position: relative;
  z-index: 2;
}

/* Light mode — green hue */
.theme-light .xbtn {
  --button-color: #f8faf8;
  --highlight-color-hue: 130deg;
  border-color: rgba(76,175,80,0.3);
  box-shadow:
    inset 0px 1px 1px rgba(0,0,0,0.04),
    inset 0px 2px 2px rgba(0,0,0,0.03),
    inset 0px 4px 4px rgba(0,0,0,0.02),
    0px 1px 2px rgba(0,0,0,0.06),
    0px 2px 4px rgba(0,0,0,0.04),
    0px 4px 8px rgba(0,0,0,0.03);
}

.theme-light .xbtn::before {
  background-image: linear-gradient(0deg, #fff4, #fffa);
}

.theme-light .xbtn-svg {
  fill: #388e3c;
  filter: drop-shadow(0 0 2px rgba(76,175,80,0.5));
}

.theme-light .xbtn-letter {
  color: #2e7d32aa;
}

@keyframes xbtn-letter-anim-light {
  50% { text-shadow: 0 0 3px rgba(76,175,80,0.6); color: #2e7d32; }
}

.theme-light .xbtn-letter {
  animation-name: xbtn-letter-anim-light;
}

.theme-light .xbtn:hover .xbtn-svg {
  fill: #2e7d32;
  filter: drop-shadow(0 0 3px hsl(130deg,100%,40%)) drop-shadow(0 -4px 6px #0003);
}

/* ═══ Upload Mode Checkbox Toggle ═══ */
.upload-mode-toggle {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.upload-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  user-select: none;
  flex: 1;
  padding: 10px 14px;
  gap: 10px;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 0.25s, background 0.25s;
}

.upload-check:hover {
  border-color: rgba(220, 140, 40, 0.4);
}

.upload-check input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.upload-checkmark {
  position: relative;
  height: 1.4em;
  width: 1.4em;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
  border: 0.13em solid rgba(255, 255, 255, 0.25);
  border-radius: 0.3em;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease, transform 0.2s ease;
}

.upload-checkmark::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.7em;
  height: 0.18em;
  background: transparent;
  border-radius: 2em;
  transform: translate(-50%, -50%) scale(0);
  transition:
    transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55),
    background 0.2s ease;
}

.upload-checkmark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.18em;
  height: 0.7em;
  background: transparent;
  border-radius: 2em;
  transform: translate(-50%, -50%) scale(0);
  transition:
    transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55),
    background 0.2s ease;
}

/* Dark mode: ORANGE checked state */
.upload-check input:checked ~ .upload-checkmark {
  background: linear-gradient(135deg, #e67e22, #f39c12);
  border-color: #d35400;
  box-shadow:
    0 0 8px rgba(230, 126, 34, 0.5),
    inset 0 2px 4px rgba(255, 255, 255, 0.2);
  animation: uploadBounce 0.4s ease-out;
}

.upload-check input:checked ~ .upload-checkmark::before {
  background: #fff;
  transform: translate(-50%, -50%) scale(1) rotate(-45deg);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

.upload-check input:checked ~ .upload-checkmark::after {
  background: #fff;
  transform: translate(-50%, -50%) scale(1) rotate(45deg);
  transition-delay: 0.1s;
}

.upload-check input:checked ~ .upload-check-label {
  color: #fff;
  font-weight: 600;
}

.upload-check-label {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  font-size: 14px;
  transition: color 0.2s;
}

.upload-check-hint {
  font-size: 11px;
  opacity: 0.6;
}

.upload-check:hover .upload-checkmark {
  border-color: #e67e22;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.2),
    0 4px 12px rgba(230, 126, 34, 0.2);
}

.upload-check input:focus + .upload-checkmark {
  border-color: #e67e22;
  box-shadow:
    0 0 12px rgba(230, 126, 34, 0.5),
    inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.upload-check:active .upload-checkmark {
  transform: scale(0.9);
}

@keyframes uploadBounce {
  0% { transform: scale(0.7); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Light mode: GREEN checked state */
.theme-light .upload-check {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.5);
}

.theme-light .upload-check:hover {
  border-color: rgba(76, 175, 80, 0.4);
}

.theme-light .upload-checkmark {
  background: linear-gradient(135deg, #ffffff, #f0f0f5);
  border-color: #b0b0c0;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.8),
    0 2px 6px rgba(0, 0, 0, 0.1);
}

.theme-light .upload-check input:checked ~ .upload-checkmark {
  background: linear-gradient(135deg, #4caf50, #66bb6a);
  border-color: #388e3c;
  box-shadow:
    0 0 8px rgba(76, 175, 80, 0.5),
    inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

.theme-light .upload-check input:checked ~ .upload-check-label {
  color: #1e293b;
}

.theme-light .upload-check-label {
  color: #475569;
}

.theme-light .upload-check:hover .upload-checkmark {
  border-color: #66bb6a;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.8),
    0 4px 12px rgba(0, 0, 0, 0.15);
}

.theme-light .upload-check input:focus + .upload-checkmark {
  border-color: #66bb6a;
  box-shadow:
    0 0 12px rgba(76, 175, 80, 0.6),
    inset 0 2px 4px rgba(255, 255, 255, 0.8);
}

.lang-toggle {
  display: flex;
  gap: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.lang-btn {
  flex: 1;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}

.lang-btn:hover {
  color: #fff;
  background: var(--dash-sidebar-hover);
}

.lang-btn.active {
  background: rgba(99, 102, 241, 0.5);
  color: #fff;
}

/* Main column */
.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

#appHeader.app-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px 16px 32px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

#appHeader .logo {
  display: none;
}

.tb-welcome {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tb-welcome .tb-line {
  font-size: 0.8rem;
  color: var(--dash-muted);
  font-weight: 500;
}

#headerName.tb-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--dash-text);
  letter-spacing: -0.02em;
}

#appHeader .user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

#appHeader .user-info .role-badge {
  background: #e0e7ff;
  color: #4338ca;
  border: none;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}

#appHeader #logoutBtn {
  background: #fff;
  color: var(--dash-text);
  border: 1px solid #e2e8f0;
  padding: 8px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.85rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

#appHeader #logoutBtn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

#dashPage .container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 28px 28px 48px;
}

/* Hide old horizontal nav (replaced by sidebar) */
#dashPage > .container > .nav-tabs {
  display: none;
}

/* Hero KPI strip (optional) */
.dash-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 720px) {
  .dash-hero {
    grid-template-columns: 1fr;
  }
}

.dash-kpi {
  border-radius: var(--dash-radius);
  padding: 20px 22px;
  color: #fff;
  position: relative;
  overflow: hidden;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--dash-shadow);
}

.dash-kpi.kpi-pink {
  background: var(--dash-gradient-1);
}

.dash-kpi.kpi-blue {
  background: var(--dash-gradient-2);
}

.dash-kpi .kpi-label {
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0.92;
}

.dash-kpi .kpi-value {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-top: 4px;
}

.dash-kpi .kpi-hint {
  font-size: 0.75rem;
  margin-top: 4px;
  opacity: 0.85;
}

/* Cards — softer */
#dashPage .card {
  border-radius: var(--dash-radius);
  border: 1px solid #e8ecf4;
  box-shadow: var(--dash-shadow);
  background: var(--dash-surface);
  padding: 28px;
}

#dashPage .page-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--dash-text);
}

#dashPage .page-sub {
  color: var(--dash-muted);
  font-size: 0.95rem;
  margin-bottom: 24px;
  line-height: 1.5;
}

#dashPage .card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #334155;
}

#dashPage .entry-card {
  border-radius: var(--dash-radius);
  background: linear-gradient(135deg, #eef2ff 0%, #fff 100%);
  border: 1px solid #c7d2fe;
  box-shadow: var(--dash-shadow);
}

#dashPage .btn-primary {
  background: var(--dash-primary);
  border-radius: 10px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}

#dashPage .btn-primary:hover {
  background: var(--dash-primary-dark);
}

#dashPage .btn-outline {
  border-radius: 10px;
  font-weight: 600;
  border-color: #c7d2fe;
}

#dashPage .btn-success {
  border-radius: 10px;
  font-weight: 600;
}

/* Send to Odoo — orange animated pill style */
#dashPage .send-odoo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: #f97316 !important;
  border: 6px solid #fdba74 !important;
  color: #fff !important;
  border-radius: 50px !important;
  transition: all 0.3s ease;
}

/* Force override for primary approve CTA (beats generic .btn-success) */
#dashPage #approveBtn.send-odoo-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 14px 30px !important;
  background: #f97316 !important;
  border: 6px solid #fdba74 !important;
  border-radius: 50px !important;
  color: #ffffff !important;
}

#dashPage #approveBtn.send-odoo-btn:hover {
  background: #ea580c !important;
  border-color: #fb923c !important;
}

#dashPage #approveBtn.send-odoo-btn:active {
  border-width: 4px !important;
}

#dashPage .send-odoo-btn .send-odoo-btn__text {
  font-size: 1.05em;
  font-weight: 800;
  letter-spacing: 0.4px;
}

#dashPage .send-odoo-btn .send-odoo-btn__svg {
  padding-top: 2px;
  width: fit-content;
}

#dashPage .send-odoo-btn .send-odoo-btn__svg svg {
  width: 40px;
  height: 18px;
}

#dashPage .send-odoo-btn:hover {
  border-color: #fb923c !important;
  background: #ea580c !important;
}

#dashPage .send-odoo-btn:active {
  border-width: 4px !important;
}

#dashPage .send-odoo-btn:hover .send-odoo-btn__svg svg {
  animation: sendOdooJelloVertical 0.9s both;
  transform-origin: left;
}

#dashPage .send-odoo-btn:disabled {
  opacity: 0.8;
}

@keyframes sendOdooJelloVertical {
  0% { transform: scale3d(1, 1, 1); }
  30% { transform: scale3d(0.75, 1.25, 1); }
  40% { transform: scale3d(1.25, 0.75, 1); }
  50% { transform: scale3d(0.85, 1.15, 1); }
  65% { transform: scale3d(1.05, 0.95, 1); }
  75% { transform: scale3d(0.95, 1.05, 1); }
  100% { transform: scale3d(1, 1, 1); }
}

/* Table polish */
#dashPage .table-wrap {
  border-radius: var(--dash-radius-sm);
  border: 1px solid #e8ecf4;
  overflow: hidden;
}

#dashPage table thead {
  background: #f8fafc;
}

/* Status badges */
#dashPage .status-badge {
  border-radius: 999px;
  font-weight: 700;
  padding: 6px 14px;
}

/* Extract loading animation (Newton's cradle) */
#extractLoading .newtons-cradle {
  --uib-size: 58px;
  --uib-speed: 1.2s;
  --uib-color: #f8fafc;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--uib-size);
  height: var(--uib-size);
  margin-right: 2px;
  filter: drop-shadow(0 1px 4px rgba(15, 23, 42, 0.35));
}

#extractLoading .newtons-cradle__dot {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  width: 25%;
  transform-origin: center top;
}

#extractLoading .newtons-cradle__dot::after {
  content: "";
  display: block;
  width: 100%;
  height: 30%;
  border-radius: 50%;
  background-color: var(--uib-color);
}

#extractLoading .newtons-cradle__dot:first-child {
  animation: cradle-swing var(--uib-speed) linear infinite;
}

#extractLoading .newtons-cradle__dot:last-child {
  animation: cradle-swing2 var(--uib-speed) linear infinite;
}

@keyframes cradle-swing {
  0% { transform: rotate(0deg); animation-timing-function: ease-out; }
  25% { transform: rotate(70deg); animation-timing-function: ease-in; }
  50% { transform: rotate(0deg); animation-timing-function: linear; }
}

@keyframes cradle-swing2 {
  0% { transform: rotate(0deg); animation-timing-function: linear; }
  50% { transform: rotate(0deg); animation-timing-function: ease-out; }
  75% { transform: rotate(-70deg); animation-timing-function: ease-in; }
}

#extractLoading .extract-loading-text {
  color: rgba(241, 245, 249, 0.95);
  font-weight: 700;
}

#dashPage.dash-premium.liquid-glass.theme-light #extractLoading .newtons-cradle {
  --uib-color: #0f172a;
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.15));
}

#dashPage.dash-premium.liquid-glass.theme-light #extractLoading .extract-loading-text {
  color: #0a0a0a;
}

/* RTL tweaks */
.is-rtl .history-row,
.is-rtl .bulk-row,
.is-rtl .action-bar {
  flex-direction: row-reverse;
}

.is-rtl .entry-card,
.is-rtl .result-header,
.is-rtl .upload-controls {
  flex-direction: row-reverse;
}

/* Mobile sidebar: collapse to top bar — stack */
@media (max-width: 900px) {
  .app-shell {
    flex-direction: column;
  }
  .app-sidebar {
    width: 100%;
    height: auto;
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 12px;
  }
  .sb-brand {
    width: 100%;
    padding-bottom: 8px;
  }
  #sidebarNav {
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1;
    gap: 6px;
  }
  #sidebarNav .nav-tab {
    flex: 1 1 auto;
    min-width: 100px;
    text-align: center;
    font-size: 0.8rem;
    padding: 8px 10px;
  }
  .app-sidebar .sb-merged {
    width: 100%;
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
  }
  .sb-side-footer {
    width: 100%;
    margin-top: 8px;
  }
  .lang-toggle {
    max-width: 200px;
    margin: 0 auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Invoice center — dark “premium” shell (scoped: #dashPage.dash-premium +
   #loginPage.login-premium). Inherits Outfit / DM Sans from index.html.
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes prm-float1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -40px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.95); }
}
@keyframes prm-float2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-40px, 30px) scale(0.9); }
  66% { transform: translate(25px, -35px) scale(1.08); }
}
@keyframes prm-float3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, 30px) scale(1.05); }
}

#loginPage.login-premium {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: "DM Sans", "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(900px 500px at 12% -10%, rgba(230, 126, 34, 0.14), transparent 55%),
    radial-gradient(700px 400px at 88% 110%, rgba(255, 107, 53, 0.1), transparent 50%),
    #0a0806;
  position: relative;
}

#loginPage.login-premium::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,8,6,0.55) 0%, rgba(10,8,6,0.3) 50%, rgba(10,8,6,0.65) 100%),
    url('/static/assets/add_only_desert_and_sword_202604292329.jpeg') center/cover no-repeat;
  z-index: 0;
}

#loginPage.login-premium .login-card {
  position: relative;
  z-index: 1;
}

#loginPage.login-premium .login-card {
  width: min(420px, 94vw);
  padding: 44px 40px;
  border-radius: 24px;
  background: rgba(20, 14, 8, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(230, 126, 34, 0.22);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#loginPage.login-premium .login-card h2 {
  font-family: Outfit, "Plus Jakarta Sans", sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #f0e8df 0%, #e67e22 55%, #f5a623 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#loginPage.login-premium .subtitle {
  color: #9b8a7a;
}

#loginPage.login-premium .form-group label {
  color: #cbd5d1;
}

#loginPage.login-premium .form-group input {
  background: rgba(10, 8, 6, 0.6);
  border: 1px solid rgba(230, 126, 34, 0.18);
  color: #f0e8df;
  border-radius: 12px;
}

#loginPage.login-premium .form-group input:focus {
  outline: none;
  border-color: rgba(230, 126, 34, 0.5);
  box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.15);
}

#loginPage.login-premium .btn-primary {
  background: linear-gradient(135deg, #e67e22, #d35400);
  border: none;
  border-radius: 12px;
  font-weight: 700;
  box-shadow: 0 8px 28px rgba(230, 126, 34, 0.3);
}

#loginPage.login-premium .btn-primary:hover {
  filter: brightness(1.06);
}

#loginPage.login-premium .error-msg {
  color: #fca5a5;
}

/* Dashboard canvas + layered orbs */
#dashPage.dash-premium {
  position: relative;
  min-height: 100vh;
  font-family: "DM Sans", "IBM Plex Sans Arabic", "Segoe UI", sans-serif;
  isolation: isolate;
  /* Downstream vars for inline utilities (var(--muted), etc.) */
  --muted: #8a9b91;
  --text: #e8f0eb;
  --border: rgba(0, 212, 170, 0.14);
  --bg: #060a08;
  --card: rgba(14, 22, 18, 0.88);
  --primary: #00d4aa;
  --primary-dark: #008c70;
}

#dashPage.dash-premium > .bg-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

#dashPage.dash-premium > .bg-orbs .bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.45;
}

#dashPage.dash-premium > .bg-orbs .bg-orb-1 {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(0, 212, 170, 0.14), transparent 68%);
  top: -12%;
  left: -8%;
  animation: prm-float1 22s ease-in-out infinite;
}

#dashPage.dash-premium > .bg-orbs .bg-orb-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 107, 53, 0.1), transparent 68%);
  bottom: -14%;
  right: -10%;
  animation: prm-float2 26s ease-in-out infinite;
}

#dashPage.dash-premium > .bg-orbs .bg-orb-3 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(0, 240, 192, 0.08), transparent 70%);
  top: 42%;
  left: 45%;
  animation: prm-float3 19s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  #dashPage.dash-premium > .bg-orbs .bg-orb {
    animation: none !important;
  }
}

#dashPage.dash-premium .app-shell {
  position: relative;
  z-index: 1;
}

#dashPage.dash-premium .app-sidebar {
  background: #0c1410;
  border-right: 1px solid rgba(0, 212, 170, 0.1);
  box-shadow: 4px 0 40px rgba(0, 0, 0, 0.35);
}

#dashPage.dash-premium .sb-brand {
  font-family: Outfit, "Plus Jakarta Sans", sans-serif;
  border-bottom: 1px solid rgba(0, 212, 170, 0.08);
  padding-bottom: 20px;
  margin-bottom: 8px;
}

#dashPage.dash-premium .sb-brand .sb-mark {
  background: linear-gradient(135deg, #00d4aa, #008c70);
  box-shadow: 0 4px 20px rgba(0, 212, 170, 0.35);
  color: #060a08;
  font-weight: 800;
  font-size: 0.95rem;
}

#dashPage.dash-premium #sidebarNav .nav-tab {
  color: #8a9b91;
}

#dashPage.dash-premium #sidebarNav .nav-tab:hover,
#dashPage.dash-premium .app-sidebar .sb-merged:hover {
  background: rgba(0, 212, 170, 0.08);
  color: #e8f0eb;
}

#dashPage.dash-premium #sidebarNav .nav-tab.active {
  background: rgba(0, 212, 170, 0.14);
  color: #00f0c0;
  box-shadow: inset 3px 0 0 #00d4aa;
}

#dashPage.dash-premium .lang-btn.active {
  background: rgba(0, 212, 170, 0.35);
  color: #fff;
}

#dashPage.dash-premium #appHeader.app-topbar {
  flex-wrap: wrap;
  row-gap: 10px;
  align-items: center;
  padding: 12px 24px 12px 28px;
  background: rgba(6, 10, 8, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 212, 170, 0.1);
  box-shadow: none;
}

#dashPage.dash-premium .tb-welcome {
  min-width: 140px;
}

#dashPage.dash-premium .tb-welcome .tb-line {
  color: #8a9b91;
}

#dashPage.dash-premium #headerName.tb-name {
  font-family: Outfit, "Plus Jakarta Sans", sans-serif;
  color: #e8f0eb;
}

#dashPage.dash-premium #headerDateDash.tb-date {
  font-size: 0.78rem;
  color: #6b7a72;
  margin-top: 2px;
}

#dashPage.dash-premium .tb-search-wrap {
  flex: 1;
  max-width: 380px;
  margin: 0 auto;
  position: relative;
}

#dashPage.dash-premium .tb-search {
  width: 100%;
  padding: 9px 14px 9px 38px;
  border-radius: 999px;
  border: 1px solid rgba(0, 212, 170, 0.12);
  background: rgba(12, 20, 16, 0.75);
  color: #e8f0eb;
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#dashPage.dash-premium .tb-search::placeholder {
  color: #4d5e54;
}

#dashPage.dash-premium .tb-search:focus {
  border-color: rgba(0, 212, 170, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 212, 170, 0.12);
}

#dashPage.dash-premium .tb-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  opacity: 0.55;
  pointer-events: none;
}

html[dir="rtl"] #dashPage.dash-premium .tb-search-icon {
  left: auto;
  right: 12px;
}

html[dir="rtl"] #dashPage.dash-premium .tb-search {
  padding: 9px 38px 9px 14px;
}

#dashPage.dash-premium .tb-icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #8a9b91;
  cursor: pointer;
  font-size: 1.05rem;
  transition: background 0.15s, color 0.15s;
}

#dashPage.dash-premium .tb-icon-btn:hover {
  background: rgba(0, 212, 170, 0.1);
  color: #e8f0eb;
}

#dashPage.dash-premium .tb-notify-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff6b35;
  border: 2px solid #060a08;
}

html[dir="rtl"] #dashPage.dash-premium .tb-notify-dot {
  right: auto;
  left: 8px;
}

#dashPage.dash-premium #appHeader .user-info .role-badge {
  background: rgba(0, 212, 170, 0.12);
  color: #5eead4;
  border: 1px solid rgba(0, 212, 170, 0.2);
}

#dashPage.dash-premium #appHeader #logoutBtn {
  background: rgba(255, 255, 255, 0.04);
  color: #e8f0eb;
  border: 1px solid rgba(0, 212, 170, 0.18);
  border-radius: 10px;
  box-shadow: none;
}

#dashPage.dash-premium #appHeader #logoutBtn:hover {
  background: rgba(0, 212, 170, 0.08);
  border-color: rgba(0, 212, 170, 0.35);
}

#dashPage.dash-premium .container {
  max-width: 1180px;
}

#dashPage.dash-premium .page-title {
  font-family: Outfit, "Plus Jakarta Sans", sans-serif;
  color: #e8f0eb;
}

#dashPage.dash-premium .page-sub {
  color: #8a9b91;
}

#dashPage.dash-premium .dash-kpi.kpi-pink {
  background: linear-gradient(135deg, #ff6b35 0%, #c2410c 100%);
}

#dashPage.dash-premium .dash-kpi.kpi-blue {
  background: linear-gradient(135deg, #059669 0%, #065f46 100%);
}

#dashPage.dash-premium .entry-card {
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.08), rgba(12, 20, 16, 0.4));
  border: 1px solid rgba(0, 212, 170, 0.22);
}

#dashPage.dash-premium .entry-card .entry-text h3 {
  color: #e8f0eb;
}

#dashPage.dash-premium .entry-card .entry-text p {
  color: #8a9b91;
}

#dashPage.dash-premium .card {
  background: rgba(12, 20, 16, 0.82);
  border: 1px solid rgba(0, 212, 170, 0.12);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#dashPage.dash-premium .card-title {
  color: #cbd5d1;
}

#dashPage.dash-premium .btn-primary {
  background: linear-gradient(135deg, #00d4aa, #008c70);
  box-shadow: 0 6px 24px rgba(0, 212, 170, 0.25);
}

#dashPage.dash-premium .btn-primary:hover {
  filter: brightness(1.05);
}

#dashPage.dash-premium .btn-outline {
  border-color: rgba(0, 212, 170, 0.25);
  color: #a7f3d0;
  background: rgba(0, 212, 170, 0.04);
}

#dashPage.dash-premium .btn-outline:hover {
  border-color: #00d4aa;
  background: rgba(0, 212, 170, 0.1);
}

#dashPage.dash-premium .table-wrap {
  border-color: rgba(0, 212, 170, 0.12);
  background: rgba(6, 10, 8, 0.35);
}

#dashPage.dash-premium table thead {
  background: rgba(0, 212, 170, 0.06);
}

#dashPage.dash-premium .history-row {
  border-color: rgba(0, 212, 170, 0.08);
}

#dashPage.dash-premium .stage-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(0, 212, 170, 0.12);
}

#dashPage.dash-premium .stage-card .stage-label {
  color: #8a9b91;
}

#dashPage.dash-premium .price-change-item {
  background: rgba(12, 20, 16, 0.6);
  border-color: rgba(0, 212, 170, 0.1);
}

#dashPage.dash-premium .alert-item {
  background: rgba(255, 107, 53, 0.08);
  border-color: rgba(255, 107, 53, 0.2);
}

@media (max-width: 900px) {
  #dashPage.dash-premium .tb-search-wrap {
    order: 3;
    width: 100%;
    max-width: none;
    margin: 4px 0 0;
  }
}

@media (max-width: 640px) {
  #dashPage.dash-premium .tb-search-wrap {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Liquid glass — full-bleed photo + SVG distortion + layered glass cards
   (vanilla port of liquid-glass reference; class .liquid-glass on #loginPage / #dashPage)
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes liquid-bg-drift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 45%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.liquid-glass-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.liquid-glass-bg::before {
  content: "";
  position: absolute;
  inset: -4%;
  background-image: url("/static/assets/i_want_it_202604261355.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  animation: none;
  will-change: auto;
}

.liquid-glass-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1000px 500px at 30% 20%, rgba(210, 130, 40, 0.12), transparent 60%),
    radial-gradient(800px 600px at 80% 80%, rgba(180, 100, 20, 0.10), transparent 55%);
  pointer-events: none;
}

/* Light mode: swap dark desert bg → light marble bg */
body.theme-light .liquid-glass-bg::before {
  background-image: url("/static/assets/desert-sword-dashboard-bg.png");
}

#loginPage.login-premium.liquid-glass,
#dashPage.dash-premium.liquid-glass {
  background: transparent;
}

#loginPage.login-premium.liquid-glass .login-card {
  position: relative;
  z-index: 1;
}

#dashPage.dash-premium.liquid-glass > .bg-orbs {
  z-index: 1;
  opacity: 0.28;
}

#dashPage.dash-premium.liquid-glass .app-shell {
  position: relative;
  z-index: 2;
}

/* Glass surface: blur + frosted layer + inset highlights + optional distortion */
#dashPage.dash-premium.liquid-glass .card,
#dashPage.dash-premium.liquid-glass .entry-card,
#loginPage.login-premium.liquid-glass .login-card {
  transition: box-shadow 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.4), transform 0.35s ease;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

/* Liquid-notification–style rectangles (heavy blur + ember halo) — 21st.dev-inspired */
#dashPage.dash-premium.liquid-glass .card,
#dashPage.dash-premium.liquid-glass .entry-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--dash-radius);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(248, 250, 252, 0.96);
  box-shadow: var(--glass-liquid-shadow);
  backdrop-filter: var(--glass-blur-surface);
  -webkit-backdrop-filter: var(--glass-blur-surface);
  background:
    linear-gradient(175deg, rgba(255, 255, 255, 0.2) 0%, transparent 44%),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.07) 0%,
      rgba(255, 255, 255, 0.025) 100%
    );
}

#dashPage.dash-premium.liquid-glass .card:hover,
#dashPage.dash-premium.liquid-glass .entry-card:hover {
  border-color: rgba(251, 191, 36, 0.45);
  box-shadow: var(--glass-liquid-shadow-hover);
}

#dashPage.dash-premium.liquid-glass .card::before,
#dashPage.dash-premium.liquid-glass .entry-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  opacity: 0.92;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(3px) saturate(120%);
  -webkit-backdrop-filter: blur(3px) saturate(120%);
  filter: url(#glass-distortion);
  -webkit-filter: url(#glass-distortion);
}

#dashPage.dash-premium.liquid-glass .entry-card {
  background:
    linear-gradient(156deg, rgba(16, 185, 129, 0.05) 0%, transparent 48%),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.035) 0%,
      rgba(255, 255, 255, 0.012) 100%
    );
}

/* Gloss lip + shallow inner pool */
#dashPage.dash-premium.liquid-glass .card::after,
#dashPage.dash-premium.liquid-glass .entry-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--dash-radius, 18px) - 1px);
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: normal;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.07) 58%, transparent 100%),
    repeating-linear-gradient(
      104deg,
      rgba(255, 255, 255, 0.06) 0px,
      rgba(255, 255, 255, 0.06) 2px,
      rgba(255, 255, 255, 0) 10px,
      rgba(255, 255, 255, 0) 16px
    );
  box-shadow:
    inset 2px 2px 1px 0 rgba(255, 255, 255, 0.48),
    inset -1px -1px 1px 1px rgba(255, 255, 255, 0.42);
}

#dashPage.dash-premium.liquid-glass .card > *,
#dashPage.dash-premium.liquid-glass .entry-card > * {
  position: relative;
  z-index: 2;
}

#loginPage.login-premium.liquid-glass .login-card {
  position: relative;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  overflow: hidden;
}

#loginPage.login-premium.liquid-glass .login-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  opacity: 0.2;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1) 0%, transparent 52%);
}

#loginPage.login-premium.liquid-glass .login-card > * {
  position: relative;
  z-index: 1;
}

#loginPage.login-premium.liquid-glass .subtitle {
  color: rgba(203, 213, 225, 0.92);
}

#loginPage.login-premium.liquid-glass .form-group label {
  color: rgba(248, 250, 252, 0.88);
}

#loginPage.login-premium.liquid-glass .form-group input {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}

#loginPage.login-premium.liquid-glass .btn-primary:hover {
  filter: brightness(1.08);
}

/* KPI — glassy caps over photo (subtle blur + ember ring) */
#dashPage.dash-premium.liquid-glass .dash-kpi {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--dash-radius);
  border: 1px solid rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.2) inset,
    0 12px 40px rgba(0, 0, 0, 0.35),
    0 0 48px -8px rgba(251, 146, 60, 0.25);
}

#dashPage.dash-premium.liquid-glass .dash-kpi::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  opacity: 0.12;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.22) 0%, transparent 48%);
}

#dashPage.dash-premium.liquid-glass .dash-kpi > * {
  position: relative;
  z-index: 1;
}

#dashPage.dash-premium.liquid-glass .dash-kpi.kpi-pink {
  background: linear-gradient(135deg, #fb923c 0%, #ea580c 48%, #c2410c 100%);
}

#dashPage.dash-premium.liquid-glass .dash-kpi.kpi-blue {
  background: linear-gradient(135deg, #34d399 0%, #059669 45%, #047857 100%);
}

#dashPage.dash-premium.liquid-glass .dash-kpi .kpi-label,
#dashPage.dash-premium.liquid-glass .dash-kpi .kpi-hint {
  color: rgba(255, 255, 255, 0.97);
  opacity: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

#dashPage.dash-premium.liquid-glass .dash-kpi .kpi-value {
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .liquid-glass-bg::before {
    animation: none !important;
  }

  #dashPage.dash-premium.liquid-glass .liquid-glass-bg::before {
    animation: none !important;
  }

  #loginPage.login-premium.liquid-glass .login-card::before,
  #dashPage.dash-premium.liquid-glass .dash-kpi::before,
  #dashPage.dash-premium.liquid-glass #appHeader.app-topbar::before,
  #dashPage.dash-premium.liquid-glass .app-sidebar::before,
  #dashPage.dash-premium.liquid-glass .table-wrap::before,
  #dashPage.dash-premium.liquid-glass .stage-card::before,
  #dashPage.dash-premium.liquid-glass .price-change-item::before,
  #dashPage.dash-premium.liquid-glass .alert-item::before,
  #dashPage.dash-premium.liquid-glass .upload-zone::before,
  #dashPage.dash-premium.liquid-glass .zone-merged-panel .merged-pdf-cta::before {
    filter: none !important;
    -webkit-filter: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Upload format — orange animated radios (JPG / PDF / Merged PDF)
   ═══════════════════════════════════════════════════════════════════════════ */

.upload-format-hint {
  font-size: 0.92rem;
  color: var(--dash-muted);
  margin: 0 0 14px;
  line-height: 1.45;
}

#dashPage.dash-premium .upload-format-hint {
  color: #8a9b91;
}

/* Extract tab: KPI strip first, then upload column */
#tab-extract .dash-hero {
  margin-top: clamp(8px, 1.4vw, 14px);
}

/* Upload mode + card: main column holds hint + card (same width as KPI / history rails) */
#tab-extract .extract-upload-region {
  margin-top: clamp(18px, 3.2vw, 28px);
  margin-bottom: 4px;
  width: 100%;
}

#tab-extract .extract-upload-main-column {
  min-width: 0;
  width: 100%;
}

#tab-extract .extract-upload-main-column > .upload-format-hint {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0 0 14px;
  padding-inline: 0;
  box-sizing: border-box;
}

#tab-extract .extract-upload-main-column .upload-main-card.upload-format-card {
  width: 100%;
  flex: unset;
}

/* ── Upload format: orange radio + animated checkmark (JPG / PDF / Merged PDF) ─ */
.upload-format-orange-group {
  --ufo-accent: #ea580c;
  --ufo-accent-mid: #f97316;
  --ufo-accent-ring: #c2410c;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin: 0 0 16px;
  overflow: visible;
}

.upload-format-radio-container {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  cursor: pointer;
  font-size: 1rem;
  user-select: none;
  -webkit-user-select: none;
}

.upload-format-radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.upload-format-radio-container input:focus-visible + .upload-format-checkmark {
  outline: 2px solid var(--ufo-accent-mid);
  outline-offset: 3px;
}

.upload-format-checkmark {
  position: relative;
  flex-shrink: 0;
  top: 0;
  left: 0;
  height: 2em;
  width: 2em;
  border: 4px solid var(--ufo-accent);
  border-radius: 999px;
  box-sizing: border-box;
}

.upload-format-radio-container input:checked ~ .upload-format-checkmark {
  animation:
    uploadFormatBounce 2s ease,
    uploadFormatCheckBorder 1s ease;
}

.upload-format-mark {
  position: absolute;
  width: 0;
  height: 0;
  background-color: #ffffff;
  border-radius: 999px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  pointer-events: none;
  box-sizing: border-box;
}

.upload-format-radio-container input:checked ~ .upload-format-checkmark .upload-format-mark {
  animation: uploadFormatBounce2 1s cubic-bezier(0.34, 1.45, 0.55, 1) forwards;
}

.upload-format-radio-container input:not(:checked) ~ .upload-format-checkmark .upload-format-mark {
  width: 0;
  height: 0;
  transition: all 0.1s linear;
}

.upload-format-radio-caption {
  font-family: "Plus Jakarta Sans", Outfit, "DM Sans", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #334155;
}

#dashPage.dash-premium .upload-format-radio-caption {
  color: #475569;
}

#dashPage.dash-premium.liquid-glass .upload-format-radio-caption {
  color: rgba(226, 232, 240, 0.96);
}

@keyframes uploadFormatBounce {
  0%,
  25%,
  60%,
  80%,
  100% {
    transform: translateY(0);
  }

  20% {
    transform: translateY(-10px);
  }

  35% {
    transform: translateY(-5px);
  }
}

/* White glowing sphere bounces → cross-fades / settles as solid orange */
@keyframes uploadFormatBounce2 {
  0% {
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    box-shadow:
      0 0 0 0 rgba(255, 255, 255, 0),
      0 0 0 0 rgba(255, 255, 255, 0);
  }

  12% {
    width: 1.15rem;
    height: 1.15rem;
    transform: translate(-50%, -62%);
    background-color: #ffffff;
    box-shadow:
      0 0 10px 5px rgba(255, 255, 255, 1),
      0 0 26px 12px rgba(255, 255, 255, 0.85),
      0 0 44px 18px rgba(255, 248, 240, 0.65);
  }

  28% {
    width: 1.75rem;
    height: 1.75rem;
    transform: translate(-50%, -48%);
    background-color: #ffffff;
    box-shadow:
      0 0 14px 7px rgba(255, 255, 255, 0.98),
      0 0 32px 16px rgba(255, 240, 230, 0.8),
      0 0 52px 22px rgba(255, 220, 200, 0.45);
  }

  42% {
    width: 1.5rem;
    height: 1.5rem;
    transform: translate(-50%, -56%);
    background-color: #fff8f0;
    box-shadow:
      0 0 12px 6px rgba(255, 255, 255, 0.95),
      0 0 28px 14px rgba(255, 230, 210, 0.7);
  }

  /* Cross-fade into orange while bounce eases */
  58% {
    width: 1.85rem;
    height: 1.85rem;
    transform: translate(-50%, -51%);
    background-color: #fed7aa;
    box-shadow:
      0 0 16px 6px rgba(253, 186, 116, 0.9),
      0 0 28px 12px rgba(249, 115, 22, 0.45);
  }

  78% {
    width: 2.05rem;
    height: 2.05rem;
    transform: translate(-50%, -50%);
    background-color: var(--ufo-accent-mid);
    box-shadow:
      0 0 14px 5px rgba(249, 115, 22, 0.55),
      0 4px 14px rgba(194, 65, 12, 0.28);
  }

  100% {
    width: 2.1rem;
    height: 2.1rem;
    transform: translate(-50%, -50%);
    background-color: var(--ufo-accent-mid);
    box-shadow:
      0 3px 10px rgba(194, 65, 12, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.35);
  }
}

@keyframes uploadFormatCheckBorder {
  0%,
  100% {
    border: 4px solid var(--ufo-accent);
  }

  1% {
    border: 2px solid var(--ufo-accent-mid);
  }

  90% {
    border: 2px solid var(--ufo-accent-mid);
  }
}

@media (prefers-reduced-motion: reduce) {
  .upload-format-radio-container input:checked ~ .upload-format-checkmark,
  .upload-format-radio-container input:checked ~ .upload-format-checkmark .upload-format-mark {
    animation: none !important;
  }
}

/* Legacy alias — some docs/tests refer to .upload-format-layout */
.upload-format-layout {
  display: grid;
  grid-template-columns: 0 minmax(0, 1fr);
  width: 100%;
  align-items: flex-start;
  margin-bottom: 20px;
  overflow: visible;
}

.upload-format-aside {
  min-width: 0;
}

.upload-main-card.upload-format-card {
  min-width: 0;
  margin-bottom: 0;
}

.upload-format-body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 14px 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.upload-zones-stack {
  flex: 1 1 220px;
  min-width: 0;
}

#dashPage.dash-premium .zone-merged-panel .merged-pdf-cta,
.zone-merged-panel .merged-pdf-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  padding: 20px 22px;
  border-radius: var(--dash-radius-sm, 12px);
  border: 1px solid rgba(0, 212, 170, 0.2);
  background: rgba(0, 212, 170, 0.06);
  margin-bottom: 8px;
}

.zone-merged-panel .merged-pdf-cta-text {
  flex: 1;
  min-width: 220px;
}

.zone-merged-panel .merged-pdf-cta-text strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 6px;
  color: var(--text);
}

.zone-merged-panel .merged-pdf-cta-text p {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.45;
}

/* Merged PDF CTA — slide-in fill (orange, same family as upload format accents) */
.zone-merged-panel a.merged-pdf-slide-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 25px;
  border: none;
  border-radius: 15px;
  color: #9a3412;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background-color: #fde8d9;
  box-shadow: 4px 8px 19px -3px rgba(194, 65, 12, 0.24);
  transition: color 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

.zone-merged-panel a.merged-pdf-slide-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  border-radius: 15px;
  background: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
  box-shadow: 4px 8px 19px -3px rgba(194, 65, 12, 0.28);
  transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}

.zone-merged-panel a.merged-pdf-slide-btn .merged-pdf-slide-btn__label {
  position: relative;
  z-index: 1;
}

.zone-merged-panel a.merged-pdf-slide-btn:hover,
.zone-merged-panel a.merged-pdf-slide-btn:focus-visible {
  color: #fffbeb;
}

.zone-merged-panel a.merged-pdf-slide-btn:hover::before,
.zone-merged-panel a.merged-pdf-slide-btn:focus-visible::before {
  width: 100%;
}

.zone-merged-panel a.merged-pdf-slide-btn:focus-visible {
  outline: 2px solid #ea580c;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .zone-merged-panel a.merged-pdf-slide-btn::before {
    transition-duration: 120ms;
    transition-timing-function: linear;
  }
}

@media (max-width: 620px) {
  .upload-format-orange-group {
    gap: 12px 14px;
  }

  .upload-format-layout {
    grid-template-columns: 1fr;
  }

  .upload-format-body {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Read invoice — Uiverse-style “magic” CTA (#extractBtn.extract-magic-btn)
   White base + bottom→top warm “smoke” (peach / rose / cream); keyframes emg-*
   ═══════════════════════════════════════════════════════════════════════════ */

button.extract-magic-btn {
  --emg-primary: #ff5569;
  --emg-smoke-base: #ffffff;
  --emg-smoke-mid: #fff9f4;
  --emg-smoke-low: #fff0e6;
  --emg-smoke-warm: rgba(255, 200, 175, 0.55);
  --emg-smoke-ember: rgba(255, 170, 140, 0.35);
  --emg-smoke-honey: rgba(255, 230, 160, 0.3);
  --emg-radius: 14px;

  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  border-radius: var(--emg-radius);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
  border: none;
  box-shadow:
    0 0.5px 0.5px 1px rgba(255, 255, 255, 0.2),
    0 10px 20px rgba(0, 0, 0, 0.2),
    0 4px 5px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    opacity 0.2s ease,
    filter 0.2s ease;
  min-width: 200px;
  padding: 20px;
  height: 68px;
  font-family:
    Outfit,
    Poppins,
    "Plus Jakarta Sans",
    system-ui,
    sans-serif;
  font-style: normal;
  font-size: 18px;
  font-weight: 600;
  background: transparent;
  color: #1a202c;
  flex-shrink: 0;
}

button.extract-magic-btn:not(:disabled):hover {
  transform: scale(1.02);
  box-shadow:
    0 0 1px 2px rgba(255, 255, 255, 0.3),
    0 15px 30px rgba(0, 0, 0, 0.3),
    0 10px 3px -3px rgba(0, 0, 0, 0.04);
}

button.extract-magic-btn:not(:disabled):active {
  transform: scale(1);
  box-shadow:
    0 0 1px 2px rgba(255, 255, 255, 0.3),
    0 10px 3px -3px rgba(0, 0, 0, 0.2);
}

button.extract-magic-btn:disabled {
  cursor: not-allowed;
  opacity: 0.52;
  filter: saturate(0.85);
}

button.extract-magic-btn:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--emg-radius);
  border: 2.5px solid transparent;
  background:
    linear-gradient(
        to top,
        var(--emg-smoke-low) 0%,
        var(--emg-smoke-mid) 38%,
        var(--emg-smoke-base) 72%,
        #ffffff 100%
      )
      padding-box,
    linear-gradient(
        to top,
        rgba(255, 140, 110, 0.22) 0%,
        rgba(255, 190, 150, 0.14) 45%,
        rgba(255, 235, 210, 0.08) 100%
      )
      border-box;
  z-index: 0;
  pointer-events: none;
  transition: all 0.4s ease;
}

button.extract-magic-btn:not(:disabled):hover::after {
  transform: scale(1.05, 1.1);
  box-shadow: inset 0 -1px 4px 0 rgba(255, 255, 255, 0.95);
}

button.extract-magic-btn::before {
  content: "";
  inset: 7px 6px 6px;
  position: absolute;
  border-radius: 30px;
  filter: blur(0.6px);
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 130% 90% at 50% 108%, var(--emg-smoke-warm) 0%, transparent 52%),
    radial-gradient(ellipse 70% 55% at 22% 102%, var(--emg-smoke-ember) 0%, transparent 48%),
    radial-gradient(ellipse 75% 50% at 78% 104%, var(--emg-smoke-honey) 0%, transparent 46%),
    linear-gradient(
      to top,
      #ffefe4 0%,
      #fff5ec 22%,
      #fffaf6 52%,
      #ffffff 100%
    );
}

.extract-magic-spinner-wrap {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 16;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.82) 0%, rgba(255, 252, 248, 0.65) 100%);
}

button.extract-magic-btn .extract-magic-spinner-el {
  width: 22px;
  height: 22px;
  border: 3px solid rgba(255, 85, 105, 0.25);
  border-top-color: var(--emg-primary);
}

.extract-magic-outline {
  position: absolute;
  border-radius: inherit;
  overflow: hidden;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.4s ease;
  inset: -2px -3.5px;
  pointer-events: none;
}

.extract-magic-outline::before {
  content: "";
  position: absolute;
  inset: -100%;
  background: conic-gradient(from 180deg, transparent 60%, white 80%, transparent 100%);
  animation: emgOutlineSpin 2s linear infinite;
  animation-play-state: paused;
}

@keyframes emgOutlineSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

button.extract-magic-btn:not(:disabled):hover .extract-magic-outline {
  opacity: 1;
}
button.extract-magic-btn.extract-magic--processing .extract-magic-outline {
  opacity: 1;
}
button.extract-magic-btn:not(:disabled):hover .extract-magic-outline::before,
button.extract-magic-btn.extract-magic--processing .extract-magic-outline::before {
  animation-play-state: running;
}

.extract-magic-btn .state {
  padding-inline-start: 29px;
  z-index: 5;
  display: flex;
  position: relative;
  pointer-events: none;
}

.extract-magic-btn .state > p {
  display: flex;
  align-items: center;
  justify-content: center;
}

.extract-magic-btn .extract-magic-icon {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  transform: scale(1.25);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

html[dir="rtl"] .extract-magic-btn .extract-magic-icon {
  left: auto;
  right: 0;
}

.extract-magic-btn .extract-magic-icon svg {
  overflow: visible;
}

.extract-magic-ch {
  display: inline-block;
  opacity: 0;
  animation: emgSlideDown 0.8s ease forwards calc(var(--i) * 0.03s);
}

button.extract-magic-btn:not(:disabled):hover .extract-magic-ch {
  opacity: 1;
  animation: emgWave 0.5s ease forwards calc(var(--i) * 0.02s);
}

@keyframes emgWave {
  30% {
    opacity: 1;
    transform: translateY(4px);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px);
    color: var(--emg-primary);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes emgSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-20px) translateX(5px) rotate(-90deg);
    color: var(--emg-primary);
    filter: blur(5px);
  }
  30% {
    opacity: 1;
    transform: translateY(4px);
    filter: blur(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.extract-state-default .extract-magic-icon svg {
  animation: emgLand 0.6s ease forwards;
}

button.extract-magic-btn:not(:disabled):hover .extract-state-default .extract-magic-icon {
  transform: rotate(45deg) scale(1.25);
}

button.extract-magic-btn.extract-magic--processing .extract-state-default .extract-magic-icon {
  transform: rotate(45deg) scale(1.25);
}

button.extract-magic-btn.extract-magic--processing .extract-state-default svg {
  animation: emgTakeOff 0.8s linear forwards;
}

button.extract-magic-btn.extract-magic--processing .extract-state-default .extract-magic-icon {
  transform: rotate(0) scale(1.25);
}

@keyframes emgTakeOff {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 1;
    transform: translateX(70px) rotate(45deg) scale(2);
  }
  100% {
    opacity: 0;
    transform: translateX(160px) rotate(45deg) scale(0);
  }
}

@keyframes emgLand {
  0% {
    transform: translateX(-60px) translateY(30px) rotate(-50deg) scale(2);
    opacity: 0;
    filter: blur(3px);
  }
  100% {
    transform: translateX(0) translateY(0) rotate(0);
    opacity: 1;
    filter: blur(0);
  }
}

.extract-state-default .extract-magic-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  height: 2px;
  width: 0;
  left: -5px;
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.5));
}

html[dir="rtl"] .extract-state-default .extract-magic-icon::before {
  left: auto;
  right: -5px;
  background: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.5));
}

button.extract-magic-btn.extract-magic--processing .extract-state-default .extract-magic-icon::before {
  animation: emgContrail 0.8s linear forwards;
}

@keyframes emgContrail {
  0% {
    width: 0;
    opacity: 1;
  }
  8% {
    width: 15px;
  }
  60% {
    opacity: 0.7;
    width: 80px;
  }
  100% {
    opacity: 0;
    width: 160px;
  }
}

.extract-state-sent {
  display: none;
}
.extract-state-sent .extract-magic-icon--check svg {
  transform: scale(1.25);
  margin-inline-end: 8px;
}

button.extract-magic-btn.extract-magic--success .extract-state-default {
  display: none;
}

button.extract-magic-btn.extract-magic--success .extract-state-sent {
  display: flex;
}

button.extract-magic-btn.extract-magic--success .extract-state-sent .extract-magic-ch {
  opacity: 0;
  animation: emgSlideDown 0.8s ease forwards calc(var(--i) * 0.2s);
}

button.extract-magic-btn.extract-magic--success .extract-state-sent .extract-magic-icon--check svg {
  opacity: 0;
  animation: emgAppear 1.2s ease forwards 0.8s;
}

@keyframes emgAppear {
  0% {
    opacity: 0;
    transform: scale(4) rotate(-40deg);
    color: var(--emg-primary);
    filter: blur(4px);
  }
  30% {
    opacity: 1;
    transform: scale(0.6);
    filter: blur(1px);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

#dashPage.dash-premium button.extract-magic-btn .extract-default-chars,
#dashPage.dash-premium button.extract-magic-btn .extract-sent-chars {
  font-weight: inherit;
}

@media (prefers-reduced-motion: reduce) {
  button.extract-magic-btn *,
  button.extract-magic-btn ::before {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  button.extract-magic-btn:after,
  button.extract-magic-btn::before {
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dashboard canvas — full-bleed photo (desert-rock + ember accent) under subtle aurora.
   Rectangles use liquid-notification–style frost (heavy blur / ember rim).
   ═══════════════════════════════════════════════════════════════════════════ */

#dashPage.dash-premium.liquid-glass {
  --glass-chrome: rgba(15, 23, 42, 0.93);
  --glass-chrome-border: rgba(255, 255, 255, 0.14);
  --glass-chrome-raised: rgba(30, 41, 59, 0.98);
  --glass-surface: rgba(255, 255, 255, 0.04);
  --glass-surface-border: rgba(255, 255, 255, 0.16);
  --glass-surface-rim: rgba(255, 255, 255, 0.92);
  --glass-border: var(--glass-chrome-border);
  --glass-blur: blur(22px) saturate(125%);
  --glass-blur-surface: blur(30px) saturate(145%);
  --glass-liquid-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14) inset,
    0 1px 0 0 rgba(255, 255, 255, 0.28) inset,
    0 0 64px -14px rgba(251, 146, 60, 0.32),
    0 20px 50px -18px rgba(2, 6, 23, 0.52);
  --glass-liquid-shadow-hover:
    0 0 0 1px rgba(255, 255, 255, 0.2) inset,
    0 1px 0 0 rgba(255, 255, 255, 0.4) inset,
    0 0 88px -10px rgba(251, 146, 60, 0.4),
    0 26px 62px -16px rgba(2, 6, 23, 0.58);
  --glass-shadow: var(--glass-liquid-shadow);
  --glass-shadow-hover: var(--glass-liquid-shadow-hover);
  --glass-shadow-soft: 0 12px 40px -14px rgba(0, 0, 0, 0.4);
  --muted: #94a3b8;
  --ink: #e2e8f0;
  --border: rgba(203, 213, 225, 0.35);
  --bg: #0a0908;
  --card: var(--glass-surface);
  --dash-radius: 18px;
  --dash-radius-sm: 14px;
}

#dashPage.dash-premium.liquid-glass .app-main {
  color: #e2e8f0;
}

/* Aurora background — repeating teal/emerald gradients (vanilla port of AuroraBackground / tailwind reference) */
#dashPage.dash-premium.liquid-glass .dash-aurora-root {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-color: #070605;
  background-image: url("/static/assets/i_want_it_202604261355.jpeg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#dashPage.dash-premium.liquid-glass .dash-aurora-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  --dash-aurora-speed: 15s;
  --color-1: #d4840a;
  --color-2: #e6a030;
  --color-3: #f0c060;
  --color-4: #c87020;
  --color-5: #b85c10;
  --black: #000;
  --white: #fff;
  --transparent: transparent;
  --aurora: repeating-linear-gradient(
    100deg,
    var(--color-1) 10%,
    var(--color-2) 15%,
    var(--color-3) 20%,
    var(--color-4) 25%,
    var(--color-5) 30%
  );
  --dark-gradient: repeating-linear-gradient(
    100deg,
    var(--black) 0%,
    var(--black) 7%,
    var(--transparent) 10%,
    var(--transparent) 12%,
    var(--black) 16%
  );
  --white-gradient: repeating-linear-gradient(
    100deg,
    var(--white) 0%,
    var(--white) 7%,
    var(--transparent) 10%,
    var(--transparent) 12%,
    var(--white) 16%
  );
}

#dashPage.dash-premium.liquid-glass .dash-aurora-bands {
  pointer-events: none;
  position: absolute;
  inset: -10px;
  opacity: 0.50;
  filter: blur(10px) invert(1);
  will-change: transform;
  background-image: var(--dark-gradient), var(--aurora);
  background-size: 300% 200%, 200% 100%;
  background-position: 50% 50%, 50% 50%;
  mask-image: radial-gradient(ellipse 80% 65% at 100% 0%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 65% at 100% 0%, #000 10%, transparent 70%);
}

#dashPage.dash-premium.liquid-glass .dash-aurora-bands::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--dark-gradient), var(--aurora);
  background-size: 200% 100%, 200% 100%;
  background-position: 50% 50%, 50% 50%;
  background-attachment: fixed, fixed;
  mix-blend-mode: difference;
  animation: dash-aurora-shift var(--dash-aurora-speed) linear infinite;
}

@keyframes dash-aurora-shift {
  from {
    background-position: 50% 50%, 50% 50%;
  }
  to {
    background-position: 350% 50%, 350% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #dashPage.dash-premium.liquid-glass .dash-aurora-bands::after {
    animation: none;
  }
}

/* Atmospheric scrim over photo — readability + subtle ember echo */
#dashPage.dash-premium.liquid-glass .liquid-glass-bg::before {
  z-index: 1;
  opacity: 1;
  background-image: url("/static/assets/i_want_it_202604261355.jpeg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  animation: none;
  will-change: auto;
  inset: 0;
}

#dashPage.dash-premium.liquid-glass .liquid-glass-bg::after {
  z-index: 2;
  inset: 0;
  background:
    radial-gradient(900px 450px at 25% 15%, rgba(210, 130, 40, 0.14), transparent 60%),
    radial-gradient(700px 500px at 85% 85%, rgba(180, 100, 20, 0.10), transparent 55%);
  pointer-events: none;
}

#dashPage.dash-premium.liquid-glass > .bg-orbs {
  display: none;
}

/* ── Shell: glass-calendar dark rectangles (calendar ref: bg-black/20 border-white/10 blur-xl shadow-2xl) ── */

#dashPage.dash-premium.liquid-glass .app-sidebar {
  position: sticky;
  isolation: isolate;
  border-right: 1px solid var(--glass-chrome-border);
  background: var(--glass-chrome);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), inset -1px 0 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

#dashPage.dash-premium.liquid-glass .app-sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.08) 0%, transparent 48%);
}

#dashPage.dash-premium.liquid-glass .app-sidebar > * {
  position: relative;
  z-index: 1;
}

#dashPage.dash-premium.liquid-glass .sb-brand {
  color: #f8fafc;
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

#dashPage.dash-premium.liquid-glass .sb-brand .sb-mark {
  color: #ecfdf5;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.35);
}

#dashPage.dash-premium.liquid-glass #sidebarNav .nav-tab {
  color: rgba(248, 250, 252, 0.78);
}

#dashPage.dash-premium.liquid-glass #sidebarNav .nav-tab:hover,
#dashPage.dash-premium.liquid-glass .app-sidebar .sb-merged:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

#dashPage.dash-premium.liquid-glass #sidebarNav .nav-tab.active {
  background: rgba(16, 185, 129, 0.22);
  color: #ecfdf5;
}

#dashPage.dash-premium.liquid-glass .app-sidebar .sb-merged {
  border-top-color: rgba(255, 255, 255, 0.1);
  color: rgba(248, 250, 252, 0.75);
}

#dashPage.dash-premium.liquid-glass .sb-side-footer {
  border-top-color: rgba(255, 255, 255, 0.1);
}

#dashPage.dash-premium.liquid-glass .lang-toggle {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.15);
}

#dashPage.dash-premium.liquid-glass .lang-btn {
  color: rgba(248, 250, 252, 0.75);
}

#dashPage.dash-premium.liquid-glass .lang-btn.active {
  background: rgba(16, 185, 129, 0.28);
  color: #ecfdf5;
}

#dashPage.dash-premium.liquid-glass #appHeader.app-topbar {
  isolation: isolate;
  border-bottom: 1px solid var(--glass-chrome-border);
  background: var(--glass-chrome);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

#dashPage.dash-premium.liquid-glass #appHeader.app-topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.3;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, transparent 55%);
}

#dashPage.dash-premium.liquid-glass #appHeader.app-topbar > * {
  position: relative;
  z-index: 1;
}

#dashPage.dash-premium.liquid-glass .tb-welcome .tb-line {
  color: rgba(255, 255, 255, 0.92);
}

#dashPage.dash-premium.liquid-glass #headerName.tb-name {
  color: #ffffff;
}

#dashPage.dash-premium.liquid-glass #headerDateDash.tb-date {
  color: rgba(226, 232, 240, 0.98);
}

#dashPage.dash-premium.liquid-glass .tb-search {
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--glass-border);
  color: #f8fafc;
  backdrop-filter: blur(16px) saturate(115%);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  box-shadow: var(--glass-shadow-soft);
}

#dashPage.dash-premium.liquid-glass .tb-search::placeholder {
  color: rgba(226, 232, 240, 0.9);
}

#dashPage.dash-premium.liquid-glass .tb-search:focus {
  border-color: rgba(16, 185, 129, 0.45);
}

#dashPage.dash-premium.liquid-glass .tb-search-icon {
  opacity: 0.55;
}

#dashPage.dash-premium.liquid-glass .tb-icon-btn {
  color: rgba(248, 250, 252, 0.75);
}

#dashPage.dash-premium.liquid-glass .tb-icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

#dashPage.dash-premium.liquid-glass .tb-notify-dot {
  border-color: rgba(15, 23, 42, 0.9);
}

#dashPage.dash-premium.liquid-glass #appHeader .user-info .role-badge {
  background: rgba(16, 185, 129, 0.2);
  color: #a7f3d0;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

#dashPage.dash-premium.liquid-glass #appHeader #logoutBtn {
  background: var(--glass-chrome-raised);
  color: #f8fafc;
  border: 1px solid var(--glass-chrome-border);
  backdrop-filter: blur(16px) saturate(110%);
  -webkit-backdrop-filter: blur(16px) saturate(110%);
  box-shadow: var(--glass-shadow-soft);
}

#dashPage.dash-premium.liquid-glass #appHeader #logoutBtn:hover {
  background: rgba(0, 0, 0, 0.38);
  border-color: rgba(16, 185, 129, 0.4);
}

/* ── Main content typography (read on dark glass) ─────────────────────── */

/* Tab hero copy on dark photo */
#dashPage.dash-premium.liquid-glass #tab-extract > .page-title,
#dashPage.dash-premium.liquid-glass #tab-bulk > .page-title,
#dashPage.dash-premium.liquid-glass #tab-alerts > .page-title,
#dashPage.dash-premium.liquid-glass #tab-prices > .page-title,
#dashPage.dash-premium.liquid-glass #tab-settings > .page-title {
  color: rgba(248, 250, 252, 0.98);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

#dashPage.dash-premium.liquid-glass #tab-extract > .page-sub,
#dashPage.dash-premium.liquid-glass #tab-bulk > .page-sub,
#dashPage.dash-premium.liquid-glass #tab-alerts > .page-sub,
#dashPage.dash-premium.liquid-glass #tab-prices > .page-sub,
#dashPage.dash-premium.liquid-glass #tab-settings > .page-sub {
  color: rgba(203, 213, 225, 0.95);
}

#dashPage.dash-premium.liquid-glass .upload-format-hint {
  color: rgba(226, 232, 240, 0.9);
}

#dashPage.dash-premium.liquid-glass #resultSection .page-title,
#dashPage.dash-premium.liquid-glass #resultSection .result-header .page-title {
  color: rgba(248, 250, 252, 0.98) !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

#dashPage.dash-premium.liquid-glass #resultSection .page-sub,
#dashPage.dash-premium.liquid-glass #resultSection .result-header .page-sub {
  color: rgba(203, 213, 225, 0.95) !important;
}

#dashPage.dash-premium.liquid-glass .card-title {
  color: #f8fafc;
}

#dashPage.dash-premium.liquid-glass .entry-card .entry-text h3 {
  color: #f8fafc;
}

#dashPage.dash-premium.liquid-glass .entry-card .entry-text p {
  color: rgba(203, 213, 225, 0.95);
}

#dashPage.dash-premium.liquid-glass .btn-outline {
  border-color: rgba(255, 255, 255, 0.24);
  color: rgba(248, 250, 252, 0.96);
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#dashPage.dash-premium.liquid-glass .btn-outline:hover {
  border-color: rgba(16, 185, 129, 0.65);
  background: rgba(16, 185, 129, 0.22);
  color: #ecfdf5;
}

#dashPage.dash-premium.liquid-glass .table-wrap {
  position: relative;
  isolation: isolate;
  border-radius: var(--dash-radius);
  border: 1px solid rgba(255, 255, 255, 0.14);
  overflow: hidden;
  box-shadow: var(--glass-liquid-shadow);
  backdrop-filter: var(--glass-blur-surface);
  -webkit-backdrop-filter: var(--glass-blur-surface);
  background:
    linear-gradient(172deg, rgba(255, 255, 255, 0.1) 0%, transparent 52%),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.035) 0%,
      rgba(255, 255, 255, 0.012) 100%
    );
}

#dashPage.dash-premium.liquid-glass .table-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  opacity: 0.3;
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.045) 0%, transparent 56%);
}

#dashPage.dash-premium.liquid-glass .table-wrap::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--dash-radius, 18px) - 1px);
  z-index: 0;
  pointer-events: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

#dashPage.dash-premium.liquid-glass .table-wrap > * {
  position: relative;
  z-index: 1;
}

#dashPage.dash-premium.liquid-glass table thead {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(248, 250, 252, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#dashPage.dash-premium.liquid-glass table th,
#dashPage.dash-premium.liquid-glass table td {
  color: rgba(226, 232, 240, 0.98);
}

#dashPage.dash-premium.liquid-glass .history-row {
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(226, 232, 240, 0.95);
}

#dashPage.dash-premium.liquid-glass .stage-card .stage-label {
  color: rgba(203, 213, 225, 0.95);
}

#dashPage.dash-premium.liquid-glass .stage-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--dash-radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: var(--glass-shadow-soft);
  backdrop-filter: var(--glass-blur-surface);
  -webkit-backdrop-filter: var(--glass-blur-surface);
  background:
    linear-gradient(160deg, rgba(52, 211, 153, 0.05) 0%, transparent 54%),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.01) 100%
    );
}

#dashPage.dash-premium.liquid-glass .stage-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  opacity: 0.3;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.045) 0%, transparent 54%);
}

#dashPage.dash-premium.liquid-glass .stage-card > * {
  position: relative;
  z-index: 1;
}

#dashPage.dash-premium.liquid-glass .price-change-item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--dash-radius-sm, 14px);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: var(--glass-shadow-soft);
  backdrop-filter: var(--glass-blur-surface);
  -webkit-backdrop-filter: var(--glass-blur-surface);
  background:
    linear-gradient(148deg, rgba(167, 243, 208, 0.08) 0%, transparent 54%),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.01) 100%
    );
  color: rgba(248, 250, 252, 0.96);
}

#dashPage.dash-premium.liquid-glass .price-change-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  opacity: 0.15;
  background: linear-gradient(145deg, rgba(16, 185, 129, 0.2) 0%, transparent 55%);
}

#dashPage.dash-premium.liquid-glass .price-change-item > * {
  position: relative;
  z-index: 1;
}

#dashPage.dash-premium.liquid-glass .alert-item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--dash-radius-sm, 14px);
  border: 1px solid rgba(251, 113, 133, 0.45);
  box-shadow: var(--glass-shadow-soft), 0 0 42px -14px rgba(251, 146, 60, 0.24);
  backdrop-filter: var(--glass-blur-surface);
  -webkit-backdrop-filter: var(--glass-blur-surface);
  background:
    linear-gradient(165deg, rgba(254, 202, 202, 0.18) 0%, transparent 48%),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.11) 0%,
      rgba(255, 255, 255, 0.07) 100%
    );
  color: #fecaca;
}

#dashPage.dash-premium.liquid-glass .alert-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  opacity: 0.12;
  background: linear-gradient(165deg, rgba(248, 113, 113, 0.22) 0%, transparent 50%);
}

#dashPage.dash-premium.liquid-glass .alert-item > * {
  position: relative;
  z-index: 1;
}

#dashPage.dash-premium.liquid-glass .upload-zone {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 18px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: var(--glass-blur-surface);
  -webkit-backdrop-filter: var(--glass-blur-surface);
  color: rgba(226, 232, 240, 0.98);
  background:
    linear-gradient(185deg, rgba(255, 255, 255, 0.06) 0%, transparent 62%),
    rgba(255, 255, 255, 0.04);
}

#dashPage.dash-premium.liquid-glass .upload-zone::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  opacity: 0.24;
  background: linear-gradient(190deg, rgba(255, 255, 255, 0.04) 0%, transparent 56%);
}

#dashPage.dash-premium.liquid-glass .upload-zone > * {
  position: relative;
  z-index: 1;
}

#dashPage.dash-premium.liquid-glass .upload-zone p,
#dashPage.dash-premium.liquid-glass .upload-zone strong {
  color: inherit;
}

/* Upload zone SVG icon styling */
.upload-zone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.upload-zone-icon svg {
  color: rgba(230, 160, 60, 0.7);
  transition: color 0.25s, transform 0.25s;
}

.upload-zone:hover .upload-zone-icon svg {
  color: rgba(240, 180, 60, 0.95);
  transform: translateY(-2px);
}

.theme-light .upload-zone-icon svg {
  color: rgba(56, 142, 60, 0.6);
}

.theme-light .upload-zone:hover .upload-zone-icon svg {
  color: rgba(46, 125, 50, 0.9);
}

#dashPage.dash-premium.liquid-glass .zone-merged-panel .merged-pdf-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--glass-liquid-shadow);
  backdrop-filter: var(--glass-blur-surface);
  -webkit-backdrop-filter: var(--glass-blur-surface);
  background:
    linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, transparent 48%),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.01) 100%
    );
  color: rgba(248, 250, 252, 0.96);
}

#dashPage.dash-premium.liquid-glass .zone-merged-panel .merged-pdf-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  opacity: 0.18;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.05) 0%, transparent 56%);
}

/* Liquid dock-style layering on all dashboard rectangles */
#dashPage.dash-premium.liquid-glass :is(
    .table-wrap,
    .stage-card,
    .price-change-item,
    .upload-zone,
    .zone-merged-panel .merged-pdf-cta
  )::before {
  opacity: 0.88;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(3px) saturate(120%);
  -webkit-backdrop-filter: blur(3px) saturate(120%);
  filter: url(#glass-distortion);
  -webkit-filter: url(#glass-distortion);
}

#dashPage.dash-premium.liquid-glass :is(
    .table-wrap,
    .stage-card,
    .price-change-item,
    .upload-zone,
    .zone-merged-panel .merged-pdf-cta
  )::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 60%, transparent 100%),
    repeating-linear-gradient(
      104deg,
      rgba(255, 255, 255, 0.05) 0px,
      rgba(255, 255, 255, 0.05) 2px,
      rgba(255, 255, 255, 0) 10px,
      rgba(255, 255, 255, 0) 16px
    );
  box-shadow:
    inset 2px 2px 1px 0 rgba(255, 255, 255, 0.46),
    inset -1px -1px 1px 1px rgba(255, 255, 255, 0.38);
}

#dashPage.dash-premium.liquid-glass .zone-merged-panel .merged-pdf-cta > * {
  position: relative;
  z-index: 1;
}

#dashPage.dash-premium.liquid-glass .zone-merged-panel .merged-pdf-cta-text strong {
  color: rgba(248, 250, 252, 0.98);
}

#dashPage.dash-premium.liquid-glass .zone-merged-panel .merged-pdf-cta-text p {
  color: rgba(203, 213, 225, 0.95);
}

#dashPage.dash-premium.liquid-glass .history-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Beat inline `tbody tr:hover { background: #f8fafc }` on dark glass tables */
#dashPage.dash-premium.liquid-glass .table-wrap tbody tr:hover {
  background: rgba(255, 255, 255, 0.045);
}

#dashPage.dash-premium.liquid-glass :is(.card select, .modern-select) {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  min-height: 42px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background-color: rgba(15, 23, 42, 0.52);
  color: #f8fafc;
  padding: 0 40px 0 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(226, 232, 240, 0.9) 50%),
    linear-gradient(135deg, rgba(226, 232, 240, 0.9) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

#dashPage.dash-premium.liquid-glass :is(.card select, .modern-select):hover {
  border-color: rgba(125, 211, 252, 0.44);
}

#dashPage.dash-premium.liquid-glass :is(.card select, .modern-select):focus {
  outline: none;
  border-color: rgba(56, 189, 248, 0.7);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  background-color: rgba(15, 23, 42, 0.62);
}

#dashPage.dash-premium.liquid-glass :is(.card select, .modern-select) option {
  color: #0f172a;
  background: #f8fafc;
}

#dashPage.dash-premium.liquid-glass .modern-select--compact {
  min-height: 34px;
  width: auto;
  min-width: 210px;
  border-radius: 10px;
  padding-right: 34px;
  font-size: 12px;
}

#dashPage.dash-premium.liquid-glass .card .form-group label {
  color: rgba(226, 232, 240, 0.95);
}

/* Match original "start" glass (same as login card) on dashboard main cards */
#dashPage.dash-premium.liquid-glass :is(
    .card,
    .entry-card,
    .table-wrap,
    .stage-card,
    .price-change-item,
    .upload-zone,
    .zone-merged-panel .merged-pdf-cta
  ) {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}

#dashPage.dash-premium.liquid-glass :is(
    .card,
    .entry-card,
    .table-wrap,
    .stage-card,
    .price-change-item,
    .upload-zone,
    .zone-merged-panel .merged-pdf-cta
  ):hover {
  border-color: rgba(255, 255, 255, 0.16);
}

#dashPage.dash-premium.liquid-glass :is(
    .card,
    .entry-card,
    .table-wrap,
    .stage-card,
    .price-change-item,
    .upload-zone,
    .zone-merged-panel .merged-pdf-cta
  )::before {
  opacity: 0.2;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1) 0%, transparent 52%);
  filter: none;
  -webkit-filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#dashPage.dash-premium.liquid-glass :is(
    .card,
    .entry-card,
    .table-wrap,
    .stage-card,
    .price-change-item,
    .upload-zone,
    .zone-merged-panel .merged-pdf-cta
  )::after {
  background: none;
  box-shadow: none;
}

/* Sidebar glass alignment: make nav rail match main glass cards */
#dashPage.dash-premium.liquid-glass .app-sidebar {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}

#dashPage.dash-premium.liquid-glass .app-sidebar::before {
  opacity: 0.2;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1) 0%, transparent 52%);
}

#dashPage.dash-premium.liquid-glass #sidebarNav .nav-tab,
#dashPage.dash-premium.liquid-glass .app-sidebar .sb-merged {
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.02);
  color: rgba(248, 250, 252, 0.86);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
}

#dashPage.dash-premium.liquid-glass #sidebarNav .nav-tab:hover,
#dashPage.dash-premium.liquid-glass .app-sidebar .sb-merged:hover {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
}

#dashPage.dash-premium.liquid-glass #sidebarNav .nav-tab.active {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(16, 185, 129, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

#dashPage.dash-premium.liquid-glass .sb-side-footer {
  border-top-color: rgba(255, 255, 255, 0.12);
}

#dashPage.dash-premium.liquid-glass .lang-toggle {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

#dashPage.dash-premium.liquid-glass .lang-btn.active {
  background: rgba(16, 185, 129, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* Topbar glass alignment: same start/login glass effect */
#dashPage.dash-premium.liquid-glass #appHeader.app-topbar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}

#dashPage.dash-premium.liquid-glass #appHeader.app-topbar::before {
  opacity: 0.2;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1) 0%, transparent 52%);
}

#dashPage.dash-premium.liquid-glass .tb-search {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.55);
}

#dashPage.dash-premium.liquid-glass .tb-search:focus {
  border-color: rgba(255, 255, 255, 0.18);
}

#dashPage.dash-premium.liquid-glass .tb-icon-btn,
#dashPage.dash-premium.liquid-glass #appHeader .user-info .role-badge,
#dashPage.dash-premium.liquid-glass #appHeader #logoutBtn {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}

#dashPage.dash-premium.liquid-glass .tb-icon-btn:hover,
#dashPage.dash-premium.liquid-glass #appHeader #logoutBtn:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
}

/* Extracted invoices + bulk queue rows: apply same glass treatment */
#dashPage.dash-premium.liquid-glass #historyList .history-row,
#dashPage.dash-premium.liquid-glass #bulkQueue .bulk-row {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
  box-shadow: 0 18px 34px -16px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border-radius: 10px;
  margin-bottom: 8px;
  padding: 10px 14px;
}

#dashPage.dash-premium.liquid-glass #historyList .history-row .meta,
#dashPage.dash-premium.liquid-glass #bulkQueue .bulk-row .meta {
  color: rgba(226, 232, 240, 0.88);
}

#dashPage.dash-premium.liquid-glass #historyList .history-row .fname,
#dashPage.dash-premium.liquid-glass #bulkQueue .bulk-row .fname {
  color: rgba(248, 250, 252, 0.96);
}

#dashPage.dash-premium.liquid-glass #historyList .history-row .odoo-link {
  color: rgba(125, 211, 252, 0.95);
}

#dashPage.dash-premium.liquid-glass .bulk-section-title {
  color: rgba(226, 232, 240, 0.9);
}

#dashPage.dash-premium.liquid-glass #historyList .history-row .btn-outline,
#dashPage.dash-premium.liquid-glass #bulkQueue .bulk-row .btn-outline {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.22);
  color: rgba(248, 250, 252, 0.94);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

#dashPage.dash-premium.liquid-glass #historyList .history-row .btn-outline:hover,
#dashPage.dash-premium.liquid-glass #bulkQueue .bulk-row .btn-outline:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
}

/* Light mode (user toggle) — keep glass readable, avoid over-whitening */
#dashPage.dash-premium.liquid-glass.theme-light .dash-aurora-root {
  background-color: #f5f0e6;
  background-image: url("/static/assets/desert-sword-dashboard-bg.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#dashPage.dash-premium.liquid-glass.theme-light .liquid-glass-bg::before {
  background-image: url("/static/assets/desert-sword-dashboard-bg.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(248, 250, 252, 0.08) 48%, transparent 100%),
    url("/static/assets/desert-sword-dashboard-bg.png") center / cover no-repeat;
}

#dashPage.dash-premium.liquid-glass.theme-light .liquid-glass-bg::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(241, 245, 249, 0.1) 100%);
}

#dashPage.dash-premium.liquid-glass.theme-light .app-sidebar,
#dashPage.dash-premium.liquid-glass.theme-light .luma-bar,
#dashPage.dash-premium.liquid-glass.theme-light #appHeader.app-topbar,
#dashPage.dash-premium.liquid-glass.theme-light :is(
    .card,
    .entry-card,
    .table-wrap,
    .stage-card,
    .price-change-item,
    .upload-zone,
    .zone-merged-panel .merged-pdf-cta,
    #historyList .history-row,
    #bulkQueue .bulk-row
  ) {
  border: 1px solid rgba(255, 255, 255, 0.46);
  background: rgba(255, 255, 255, 0.26);
  box-shadow: 0 20px 38px -20px rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
}

#dashPage.dash-premium.liquid-glass.theme-light :is(
    .app-sidebar::before,
    #appHeader.app-topbar::before,
    .card::before,
    .entry-card::before,
    .table-wrap::before,
    .stage-card::before,
    .price-change-item::before,
    .upload-zone::before,
    .zone-merged-panel .merged-pdf-cta::before
  ) {
  opacity: 0.18;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.5) 0%, transparent 56%);
}

#dashPage.dash-premium.liquid-glass.theme-light :is(
    .card-title,
    .entry-card .entry-text h3,
    #headerName.tb-name,
    .tb-welcome .tb-line
  ) {
  color: #0f172a;
}

#dashPage.dash-premium.liquid-glass.theme-light :is(
    .entry-card .entry-text p,
    .history-row,
    .history-row .meta,
    #headerDateDash.tb-date,
    .upload-format-hint,
    #tab-extract > .page-sub,
    #tab-bulk > .page-sub,
    #tab-alerts > .page-sub,
    #tab-prices > .page-sub,
    #tab-settings > .page-sub
  ) {
  color: rgba(51, 65, 85, 0.9);
}

#dashPage.dash-premium.liquid-glass.theme-light :is(
    #tab-extract > .page-title,
    #tab-bulk > .page-title,
    #tab-alerts > .page-title,
    #tab-prices > .page-title,
    #tab-settings > .page-title
  ) {
  color: #0f172a;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.6);
}

#dashPage.dash-premium.liquid-glass.theme-light .tb-search,
#dashPage.dash-premium.liquid-glass.theme-light .tb-icon-btn,
#dashPage.dash-premium.liquid-glass.theme-light #appHeader #logoutBtn,
#dashPage.dash-premium.liquid-glass.theme-light #appHeader .user-info .role-badge,
#dashPage.dash-premium.liquid-glass.theme-light .lang-toggle,
#dashPage.dash-premium.liquid-glass.theme-light #sidebarNav .nav-tab,
#dashPage.dash-premium.liquid-glass.theme-light .app-sidebar .sb-merged,
#dashPage.dash-premium.liquid-glass.theme-light .btn-outline {
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.24);
  color: #1e293b;
}

#dashPage.dash-premium.liquid-glass.theme-light .tb-search::placeholder {
  color: rgba(71, 85, 105, 0.78);
}

#dashPage.dash-premium.liquid-glass.theme-light #sidebarNav .nav-tab.active,
#dashPage.dash-premium.liquid-glass.theme-light .lang-btn.active,
#dashPage.dash-premium.liquid-glass.theme-light .theme-btn.active {
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.22);
  color: #065f46;
}

#dashPage.dash-premium.liquid-glass .theme-toggle {
  margin-top: 10px;
}

/* Top-right animated theme switch */
#dashPage.dash-premium.liquid-glass .theme-switch {
  --toggle-size: 7px;
  --container-width: 5.625em;
  --container-height: 2.5em;
  --container-radius: 6.25em;
  --container-light-bg: #5e9fcf;
  --container-night-bg: #1d1f2c;
  --circle-container-diameter: 3.375em;
  --sun-moon-diameter: 2.125em;
  --sun-bg: #ecca2f;
  --moon-bg: #c4c9d1;
  --spot-color: #959db1;
  --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --stars-color: #fff;
  --clouds-color: #f3fdff;
  --back-clouds-color: #aacadf;
  --transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
  --circle-transition: 0.3s cubic-bezier(0, -0.02, 0.35, 1.17);
  display: inline-block;
  line-height: 1;
}

#dashPage.dash-premium.liquid-glass .theme-switch,
#dashPage.dash-premium.liquid-glass .theme-switch *,
#dashPage.dash-premium.liquid-glass .theme-switch *::before,
#dashPage.dash-premium.liquid-glass .theme-switch *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: var(--toggle-size);
}

#dashPage.dash-premium.liquid-glass .theme-switch__checkbox {
  display: none;
}

#dashPage.dash-premium.liquid-glass .theme-switch__container {
  width: var(--container-width);
  height: var(--container-height);
  background-color: var(--container-light-bg);
  border-radius: var(--container-radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 -0.062em 0.062em rgba(0, 0, 0, 0.25), 0 0.062em 0.125em rgba(255, 255, 255, 0.94);
  transition: var(--transition);
  position: relative;
}

#dashPage.dash-premium.liquid-glass .theme-switch__container::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  box-shadow: 0 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
  border-radius: var(--container-radius);
}

#dashPage.dash-premium.liquid-glass .theme-switch__circle-container {
  width: var(--circle-container-diameter);
  height: var(--circle-container-diameter);
  background-color: rgba(255, 255, 255, 0.1);
  position: absolute;
  left: var(--circle-container-offset);
  top: var(--circle-container-offset);
  border-radius: var(--container-radius);
  box-shadow:
    inset 0 0 0 3.375em rgba(255, 255, 255, 0.1),
    inset 0 0 0 3.375em rgba(255, 255, 255, 0.1),
    0 0 0 0.625em rgba(255, 255, 255, 0.1),
    0 0 0 1.25em rgba(255, 255, 255, 0.1);
  display: flex;
  transition: var(--circle-transition);
  pointer-events: none;
}

#dashPage.dash-premium.liquid-glass .theme-switch__sun-moon-container {
  pointer-events: auto;
  position: relative;
  z-index: 2;
  width: var(--sun-moon-diameter);
  height: var(--sun-moon-diameter);
  margin: auto;
  border-radius: var(--container-radius);
  background-color: var(--sun-bg);
  box-shadow: 0.062em 0.062em 0.062em 0 rgba(254, 255, 239, 0.61) inset, 0 -0.062em 0.062em 0 #a1872a inset;
  filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0 0.062em 0.125em rgba(0, 0, 0, 0.25));
  overflow: hidden;
  transition: var(--transition);
}

#dashPage.dash-premium.liquid-glass .theme-switch__moon {
  transform: translateX(100%);
  width: 100%;
  height: 100%;
  background-color: var(--moon-bg);
  border-radius: inherit;
  box-shadow: 0.062em 0.062em 0.062em 0 rgba(254, 255, 239, 0.61) inset, 0 -0.062em 0.062em 0 #969696 inset;
  transition: var(--transition);
  position: relative;
}

#dashPage.dash-premium.liquid-glass .theme-switch__spot {
  position: absolute;
  top: 0.75em;
  left: 0.312em;
  width: 0.75em;
  height: 0.75em;
  border-radius: var(--container-radius);
  background-color: var(--spot-color);
  box-shadow: 0 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
}

#dashPage.dash-premium.liquid-glass .theme-switch__spot:nth-of-type(2) {
  width: 0.375em;
  height: 0.375em;
  top: 0.937em;
  left: 1.375em;
}

#dashPage.dash-premium.liquid-glass .theme-switch__spot:nth-last-of-type(3) {
  width: 0.25em;
  height: 0.25em;
  top: 0.312em;
  left: 0.812em;
}

#dashPage.dash-premium.liquid-glass .theme-switch__clouds {
  width: 1.25em;
  height: 1.25em;
  background-color: var(--clouds-color);
  border-radius: var(--container-radius);
  position: absolute;
  bottom: -0.625em;
  left: 0.312em;
  box-shadow:
    0.937em 0.312em var(--clouds-color),
    -0.312em -0.312em var(--back-clouds-color),
    1.437em 0.375em var(--clouds-color),
    0.5em -0.125em var(--back-clouds-color),
    2.187em 0 var(--clouds-color),
    1.25em -0.062em var(--back-clouds-color),
    2.937em 0.312em var(--clouds-color),
    2em -0.312em var(--back-clouds-color),
    3.625em -0.062em var(--clouds-color),
    2.625em 0 var(--back-clouds-color),
    4.5em -0.312em var(--clouds-color),
    3.375em -0.437em var(--back-clouds-color),
    4.625em -1.75em 0 0.437em var(--clouds-color),
    4em -0.625em var(--back-clouds-color),
    4.125em -2.125em 0 0.437em var(--back-clouds-color);
  transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
}

#dashPage.dash-premium.liquid-glass .theme-switch__stars-container {
  position: absolute;
  color: var(--stars-color);
  top: -100%;
  left: 0.312em;
  width: 2.75em;
  height: auto;
  transition: var(--transition);
}

#dashPage.dash-premium.liquid-glass .theme-switch__checkbox:checked + .theme-switch__container {
  background-color: var(--container-night-bg);
}

#dashPage.dash-premium.liquid-glass .theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
}

#dashPage.dash-premium.liquid-glass .theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em);
}

#dashPage.dash-premium.liquid-glass .theme-switch__circle-container:hover {
  left: calc(var(--circle-container-offset) + 0.187em);
}

#dashPage.dash-premium.liquid-glass .theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon {
  transform: translate(0);
}

#dashPage.dash-premium.liquid-glass .theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds {
  bottom: -4.062em;
}

#dashPage.dash-premium.liquid-glass .theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container {
  top: 50%;
  transform: translateY(-50%);
}

/* Make switch colors adapt to selected dashboard theme */
#dashPage.dash-premium.liquid-glass.theme-light .theme-switch {
  --container-light-bg: #9cc3df;
  --container-night-bg: #3a4659;
}

/* Light mode text pass: force dark/black text inside glass */
#dashPage.dash-premium.liquid-glass.theme-light,
#dashPage.dash-premium.liquid-glass.theme-light .app-main,
#dashPage.dash-premium.liquid-glass.theme-light .app-sidebar,
#dashPage.dash-premium.liquid-glass.theme-light .luma-bar,
#dashPage.dash-premium.liquid-glass.theme-light :is(
    .card,
    .entry-card,
    .table-wrap,
    .stage-card,
    .price-change-item,
    .upload-zone,
    .zone-merged-panel .merged-pdf-cta,
    #historyList .history-row,
    #bulkQueue .bulk-row
  ) {
  color: #0a0a0a;
}

#dashPage.dash-premium.liquid-glass.theme-light :is(
    .card-title,
    .entry-card .entry-text h3,
    .entry-card .entry-text p,
    .history-row,
    .history-row .meta,
    .history-row .fname,
    .bulk-row,
    .bulk-row .meta,
    .bulk-row .fname,
    .bulk-section-title,
    .upload-format-hint,
    #resultSection .page-title,
    #resultSection .page-sub,
    #headerName.tb-name,
    .tb-welcome .tb-line,
    #headerDateDash.tb-date,
    .luma-item,
    .luma-util-bar .tb-name,
    .luma-util-bar .role-badge,
    .luma-util-bar #logoutBtn,
    .lang-btn,
    .theme-btn,
    .tb-search,
    .tb-search::placeholder,
    .tb-icon-btn,
    #appHeader .user-info .role-badge,
    #appHeader #logoutBtn,
    .btn-outline,
    .upload-zone p,
    .upload-zone strong,
    .stage-card .stage-label,
    table th,
    table td,
    .odoo-link
  ) {
  color: #0a0a0a !important;
}

#dashPage.dash-premium.liquid-glass.theme-light :is(
    #tab-extract > .page-title,
    #tab-bulk > .page-title,
    #tab-alerts > .page-title,
    #tab-prices > .page-title,
    #tab-settings > .page-title
  ) {
  color: #000000 !important;
  text-shadow: none;
}

#dashPage.dash-premium.liquid-glass.theme-light .card select,
#dashPage.dash-premium.liquid-glass.theme-light .card input,
#dashPage.dash-premium.liquid-glass.theme-light .card textarea {
  color: #0a0a0a;
  border-color: rgba(15, 23, 42, 0.18);
}

#dashPage.dash-premium.liquid-glass.theme-light :is(.card select, .modern-select) {
  background-color: rgba(255, 255, 255, 0.82);
  border-color: rgba(15, 23, 42, 0.2);
  color: #0a0a0a;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(15, 23, 42, 0.65) 50%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.65) 50%, transparent 50%);
}

#dashPage.dash-premium.liquid-glass.theme-light .upload-format-radio-caption {
  color: #0f172a !important;
  font-weight: 800;
  text-shadow: none;
}

/* Light mode: Settings tab should use dark bold text */
#dashPage.dash-premium.liquid-glass.theme-light #tab-settings .card-title,
#dashPage.dash-premium.liquid-glass.theme-light #tab-settings .form-group label,
#dashPage.dash-premium.liquid-glass.theme-light #tab-settings table th,
#dashPage.dash-premium.liquid-glass.theme-light #tab-settings table td,
#dashPage.dash-premium.liquid-glass.theme-light #tab-settings small,
#dashPage.dash-premium.liquid-glass.theme-light #tab-settings p,
#dashPage.dash-premium.liquid-glass.theme-light #tab-settings div[style*="color:var(--muted)"] {
  color: #0a0a0a !important;
}

#dashPage.dash-premium.liquid-glass.theme-light #tab-settings .card-title,
#dashPage.dash-premium.liquid-glass.theme-light #tab-settings .form-group label,
#dashPage.dash-premium.liquid-glass.theme-light #tab-settings table th {
  font-weight: 800 !important;
}

#dashPage.dash-premium.liquid-glass.theme-light #tab-settings input,
#dashPage.dash-premium.liquid-glass.theme-light #tab-settings input::placeholder {
  color: #0a0a0a !important;
  opacity: 1;
}

/* Invoice preview: remove whitish backdrop so only image is visible */
#dashPage.dash-premium.liquid-glass #invoiceImageBox {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.18);
}

#dashPage.dash-premium.liquid-glass #invoiceImageBox img,
#dashPage.dash-premium.liquid-glass #invoiceImageBox iframe {
  background: transparent !important;
}

/* Show original invoice button — glossy animated style */
#dashPage.dash-premium.liquid-glass #invoiceImagePanel .invoice-orig-btn-wrapper {
  position: relative;
  display: inline-block;
}

#dashPage.dash-premium.liquid-glass #invoiceImagePanel .invoice-orig-btn {
  --border-radius: 24px;
  --padding: 4px;
  --transition: 0.4s;
  --highlight-color-hue: 210deg;
  --button-color: #101010;
  position: relative;
  z-index: 1;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.5em 1.1em;
  font-family: "Poppins", "Inter", "Segoe UI", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92) !important;
  background-color: var(--button-color) !important;
  border: solid 1px #fff2 !important;
  border-radius: var(--border-radius) !important;
  cursor: pointer;
  transition:
    box-shadow var(--transition),
    border var(--transition),
    background-color var(--transition),
    color var(--transition);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.2),
    inset 0 2px 2px rgba(255, 255, 255, 0.15),
    inset 0 4px 4px rgba(255, 255, 255, 0.1),
    inset 0 8px 8px rgba(255, 255, 255, 0.05),
    inset 0 16px 16px rgba(255, 255, 255, 0.05),
    0 -1px 1px rgba(0, 0, 0, 0.02),
    0 -2px 2px rgba(0, 0, 0, 0.03),
    0 -4px 4px rgba(0, 0, 0, 0.05),
    0 -8px 8px rgba(0, 0, 0, 0.06),
    0 -16px 16px rgba(0, 0, 0, 0.08) !important;
}

#dashPage.dash-premium.liquid-glass #invoiceImagePanel .invoice-orig-btn::before {
  content: "";
  position: absolute;
  top: calc(0px - var(--padding));
  left: calc(0px - var(--padding));
  width: calc(100% + var(--padding) * 2);
  height: calc(100% + var(--padding) * 2);
  border-radius: calc(var(--border-radius) + var(--padding));
  pointer-events: none;
  background-image: linear-gradient(0deg, #0004, #000a);
  z-index: -1;
  transition: box-shadow var(--transition), filter var(--transition);
  box-shadow:
    0 -8px 8px -6px #0000 inset,
    0 -16px 16px -8px #00000000 inset,
    1px 1px 1px #fff2,
    2px 2px 2px #fff1,
    -1px -1px 1px #0002,
    -2px -2px 2px #0001;
}

#dashPage.dash-premium.liquid-glass #invoiceImagePanel .invoice-orig-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(
    0deg,
    #fff,
    hsl(var(--highlight-color-hue), 100%, 70%),
    hsla(var(--highlight-color-hue), 100%, 70%, 50%) 8%,
    transparent
  );
  opacity: 0;
  transition: opacity var(--transition), filter var(--transition);
}

#dashPage.dash-premium.liquid-glass #invoiceImagePanel .invoice-orig-btn:hover {
  border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%) !important;
}

#dashPage.dash-premium.liquid-glass #invoiceImagePanel .invoice-orig-btn:hover::before {
  box-shadow:
    0 -8px 8px -6px #fffa inset,
    0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset,
    1px 1px 1px #fff2,
    2px 2px 2px #fff1,
    -1px -1px 1px #0002,
    -2px -2px 2px #0001;
}

#dashPage.dash-premium.liquid-glass #invoiceImagePanel .invoice-orig-btn:hover::after {
  opacity: 1;
  mask-image: linear-gradient(0deg, #fff, transparent);
}

#dashPage.dash-premium.liquid-glass #invoiceImagePanel .invoice-orig-btn:active {
  border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%) !important;
  background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5) !important;
}

#dashPage.dash-premium.liquid-glass.theme-light #invoiceImagePanel .invoice-orig-btn {
  --button-color: #e2e8f0;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.18) !important;
}

/* Light mode readability: make Vendor & invoice text dark and clear */
#dashPage.dash-premium.liquid-glass.theme-light .info-item .label {
  color: #334155 !important;
  font-weight: 800;
}

#dashPage.dash-premium.liquid-glass.theme-light .info-item .value,
#dashPage.dash-premium.liquid-glass.theme-light .info-item .value-ar,
#dashPage.dash-premium.liquid-glass.theme-light .info-item .proc-time {
  color: #0a0a0a !important;
  font-weight: 800;
  opacity: 1 !important;
}

#dashPage.dash-premium.liquid-glass.theme-light .info-item .value .info-edit-btn,
#dashPage.dash-premium.liquid-glass.theme-light .info-item .info-edit-btn {
  color: #0f172a !important;
  font-weight: 700;
}

/* Dark theme readability pass: dark/bold text on bright info tiles */
#dashPage.dash-premium.liquid-glass.theme-dark .info-item,
#dashPage.dash-premium.liquid-glass:not(.theme-light) .info-item {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.9), rgba(241, 245, 249, 0.84));
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 20px -16px rgba(2, 6, 23, 0.6);
}

#dashPage.dash-premium.liquid-glass.theme-dark .info-item .label,
#dashPage.dash-premium.liquid-glass:not(.theme-light) .info-item .label {
  color: #334155 !important;
  font-weight: 800;
}

#dashPage.dash-premium.liquid-glass.theme-dark .info-item .value,
#dashPage.dash-premium.liquid-glass.theme-dark .info-item .value-ar,
#dashPage.dash-premium.liquid-glass:not(.theme-light) .info-item .value,
#dashPage.dash-premium.liquid-glass:not(.theme-light) .info-item .value-ar {
  color: #0f172a !important;
  font-weight: 800;
}

#dashPage.dash-premium.liquid-glass.theme-dark .info-edit-btn,
#dashPage.dash-premium.liquid-glass:not(.theme-light) .info-edit-btn {
  color: #0f172a;
  font-weight: 700;
}

#dashPage.dash-premium.liquid-glass.theme-dark .flag-list li,
#dashPage.dash-premium.liquid-glass:not(.theme-light) .flag-list li {
  color: #7c2d12;
  font-weight: 700;
}

/* Dark theme readability for extraction-result header + summary chips */
#dashPage.dash-premium.liquid-glass.theme-dark #resultSection .result-header .page-title,
#dashPage.dash-premium.liquid-glass:not(.theme-light) #resultSection .result-header .page-title {
  color: #f8fafc !important;
  font-weight: 800;
}

#dashPage.dash-premium.liquid-glass.theme-dark #resultSection .result-header .page-sub,
#dashPage.dash-premium.liquid-glass:not(.theme-light) #resultSection .result-header .page-sub {
  color: rgba(241, 245, 249, 0.98) !important;
  font-weight: 700;
}

#dashPage.dash-premium.liquid-glass.theme-dark .validation-summary .val-item,
#dashPage.dash-premium.liquid-glass:not(.theme-light) .validation-summary .val-item {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.9));
  border: 1px solid rgba(148, 163, 184, 0.5);
  color: #334155;
  font-weight: 700;
}

#dashPage.dash-premium.liquid-glass.theme-dark .validation-summary .val-item .num,
#dashPage.dash-premium.liquid-glass:not(.theme-light) .validation-summary .val-item .num {
  color: #0f172a;
  font-weight: 900;
}

/* Dark theme: totals box should match line-items dark glass, not white */
#dashPage.dash-premium.liquid-glass.theme-dark .totals-box,
#dashPage.dash-premium.liquid-glass:not(.theme-light) .totals-box {
  background:
    linear-gradient(172deg, rgba(255, 255, 255, 0.08) 0%, transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 24px -18px rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

#dashPage.dash-premium.liquid-glass.theme-dark .totals-box .row,
#dashPage.dash-premium.liquid-glass:not(.theme-light) .totals-box .row {
  color: rgba(248, 250, 252, 0.96);
  border-bottom-color: rgba(255, 255, 255, 0.12);
  font-weight: 700;
}

/* Layout revamp: remove old sidebar/topbar, keep side theme switch + top nav pill */
#dashPage.dash-premium.liquid-glass #appSidebar,
#dashPage.dash-premium.liquid-glass #appHeader {
  display: none !important;
}

#dashPage.dash-premium.liquid-glass .app-main {
  width: 100%;
  min-height: 100vh;
}

#dashPage.dash-premium.liquid-glass .container {
  padding-top: 14px;
}

#dashPage.dash-premium.liquid-glass .side-theme-toggle {
  position: fixed;
  right: 18px;
  top: 18px;
  transform: none;
  z-index: 60;
}

#dashPage.dash-premium.liquid-glass .side-theme-toggle .theme-switch {
  --toggle-size: 10px;
}

#dashPage.dash-premium.liquid-glass .top-switch-nav-wrap,
#dashPage.dash-premium.liquid-glass .top-switch-nav {
  display: none !important;
}

#dashPage.dash-premium.liquid-glass .top-gradient-nav-wrap {
  position: sticky;
  top: 10px;
  z-index: 55;
  display: flex;
  justify-content: center;
  margin: 12px 0 14px;
  padding: 0 8px;
  transition: transform 0.28s ease, top 0.28s ease;
}

#dashPage.dash-premium.liquid-glass .top-gradient-nav-wrap.is-scrolled {
  top: 6px;
  transform: translateY(-1px);
}

#dashPage.dash-premium.liquid-glass .top-gradient-nav {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(145deg, rgba(17, 24, 39, 0.58), rgba(17, 24, 39, 0.34));
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 12px 28px -18px rgba(2, 6, 23, 0.85);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  transition: padding 0.28s ease, gap 0.28s ease, box-shadow 0.28s ease, background-position 0.28s ease;
  background-size: 180% 180%;
  animation: topGradientScroll 12s linear infinite;
}

#dashPage.dash-premium.liquid-glass .top-gradient-nav-wrap.is-scrolled .top-gradient-nav {
  padding-inline: 24px;
  gap: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 16px 38px -20px rgba(2, 6, 23, 0.95);
}

#dashPage.dash-premium.liquid-glass .top-gradient-nav::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

#dashPage.dash-premium.liquid-glass .top-gradient-item {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.92), rgba(241, 245, 249, 0.86));
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: width 0.32s ease, transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 8px 18px -12px rgba(0, 0, 0, 0.52);
  gap: 8px;
  padding-inline: 0;
}

#dashPage.dash-premium.liquid-glass .top-gradient-item:hover,
#dashPage.dash-premium.liquid-glass .top-gradient-item.active {
  width: 140px;
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(10, 15, 28, 0.92), rgba(30, 41, 59, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 14px 30px -16px rgba(17, 24, 39, 0.75);
}

#dashPage.dash-premium.liquid-glass .top-gradient-glow {
  position: absolute;
  inset: auto 12px 6px;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.55), rgba(168, 85, 247, 0.55));
  filter: blur(8px);
  opacity: 0;
  transition: opacity 0.25s ease;
}

#dashPage.dash-premium.liquid-glass .top-gradient-icon {
  width: 22px;
  height: 22px;
  color: #6b7280;
  transition: color 0.22s ease, transform 0.22s ease;
  flex: 0 0 auto;
}

#dashPage.dash-premium.liquid-glass .top-gradient-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

#dashPage.dash-premium.liquid-glass .top-gradient-icon svg * {
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#dashPage.dash-premium.liquid-glass .top-gradient-label {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transform: translateX(4px);
  transition: max-width 0.26s ease, opacity 0.2s ease, transform 0.2s ease;
}

#dashPage.dash-premium.liquid-glass .top-gradient-item:hover .top-gradient-icon,
#dashPage.dash-premium.liquid-glass .top-gradient-item.active .top-gradient-icon {
  color: #ffffff;
  transform: scale(1.02);
}

#dashPage.dash-premium.liquid-glass .top-gradient-item:hover .top-gradient-label,
#dashPage.dash-premium.liquid-glass .top-gradient-item.active .top-gradient-label {
  max-width: 72px;
  opacity: 1;
  transform: translateX(0);
}

#dashPage.dash-premium.liquid-glass .top-gradient-item:hover .top-gradient-glow,
#dashPage.dash-premium.liquid-glass .top-gradient-item.active .top-gradient-glow {
  opacity: 0.85;
}

#dashPage.dash-premium.liquid-glass.theme-light .top-gradient-nav {
  border-color: rgba(148, 163, 184, 0.3);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(248, 250, 252, 0.46));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 10px 24px -16px rgba(15, 23, 42, 0.35);
}

#dashPage.dash-premium.liquid-glass.theme-light .top-gradient-icon {
  color: #334155;
}

#dashPage.dash-premium.liquid-glass.theme-light .top-gradient-item {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.88));
}

#dashPage.dash-premium.liquid-glass.theme-light .top-gradient-item:hover,
#dashPage.dash-premium.liquid-glass.theme-light .top-gradient-item.active {
  background: linear-gradient(150deg, rgba(241, 245, 249, 0.98), rgba(226, 232, 240, 0.88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 12px 26px -14px rgba(15, 23, 42, 0.35);
}

#dashPage.dash-premium.liquid-glass.theme-light .top-gradient-item:hover .top-gradient-icon,
#dashPage.dash-premium.liquid-glass.theme-light .top-gradient-item.active .top-gradient-icon {
  color: #000000;
}

#dashPage.dash-premium.liquid-glass.theme-light .top-gradient-item:hover .top-gradient-label,
#dashPage.dash-premium.liquid-glass.theme-light .top-gradient-item.active .top-gradient-label {
  color: #0f172a;
}

@keyframes topGradientScroll {
  0% { background-position: 0% 50%; }
  100% { background-position: 240% 50%; }
}

/* Scroll edge gradual blur overlays (native/static equivalent) */
#dashPage.dash-premium.liquid-glass .gradual-blur-edge {
  position: fixed;
  left: 0;
  right: 0;
  height: 4.5rem;
  z-index: 40;
  pointer-events: none;
  transition: opacity 0.28s ease-out;
  isolation: isolate;
  opacity: 0.72;
}

#dashPage.dash-premium.liquid-glass .gradual-blur-edge.is-hidden {
  opacity: 0;
}

#dashPage.dash-premium.liquid-glass .gradual-blur-top {
  top: 0;
  display: none !important;
}

#dashPage.dash-premium.liquid-glass .gradual-blur-bottom {
  bottom: 0;
}

#dashPage.dash-premium.liquid-glass .gradual-blur-edge .gradual-blur-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

#dashPage.dash-premium.liquid-glass .gradual-blur-edge .gradual-blur-layer {
  position: absolute;
  inset: 0;
  opacity: 1;
}

#dashPage.dash-premium.liquid-glass .gradual-blur-top .gradual-blur-layer {
  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}

#dashPage.dash-premium.liquid-glass .gradual-blur-bottom .gradual-blur-layer {
  mask-image: linear-gradient(to top, black 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, black 0%, transparent 100%);
}

#dashPage.dash-premium.liquid-glass .gradual-blur-edge .gradual-blur-layer:nth-child(1) {
  backdrop-filter: blur(0.06rem);
  -webkit-backdrop-filter: blur(0.06rem);
}
#dashPage.dash-premium.liquid-glass .gradual-blur-edge .gradual-blur-layer:nth-child(2) {
  backdrop-filter: blur(0.15rem);
  -webkit-backdrop-filter: blur(0.15rem);
}
#dashPage.dash-premium.liquid-glass .gradual-blur-edge .gradual-blur-layer:nth-child(3) {
  backdrop-filter: blur(0.3rem);
  -webkit-backdrop-filter: blur(0.3rem);
}
#dashPage.dash-premium.liquid-glass .gradual-blur-edge .gradual-blur-layer:nth-child(4) {
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
}
#dashPage.dash-premium.liquid-glass .gradual-blur-edge .gradual-blur-layer:nth-child(5) {
  backdrop-filter: blur(0.75rem);
  -webkit-backdrop-filter: blur(0.75rem);
}

@supports not (backdrop-filter: blur(1px)) {
  #dashPage.dash-premium.liquid-glass .gradual-blur-edge .gradual-blur-layer {
    background: rgba(2, 6, 23, 0.18);
  }
}

#dashPage.dash-premium.liquid-glass.theme-light .gradual-blur-edge .gradual-blur-layer {
  opacity: 0.72;
}

/* ═══════════════════════════════════════════════════════════
   AI Chat Bubble — sleeping / awake / panel
   ═══════════════════════════════════════════════════════════ */

/* ── Bubble container ── */
.ai-bubble {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  cursor: grab;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s ease;
  /* glassmorphism bubble — dark glow */
  background: linear-gradient(135deg, rgba(35, 22, 12, 0.9), rgba(55, 35, 18, 0.8));
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1.5px solid rgba(230, 160, 60, 0.35);
  box-shadow:
    0 0 18px rgba(230, 126, 34, 0.4),
    0 0 40px rgba(230, 126, 34, 0.15),
    0 4px 20px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 200, 100, 0.12);
  animation: bubble-ambient-glow 3s ease-in-out infinite;
}

@keyframes bubble-ambient-glow {
  0%, 100% {
    box-shadow:
      0 0 18px rgba(230, 126, 34, 0.4),
      0 0 40px rgba(230, 126, 34, 0.15),
      0 4px 20px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 200, 100, 0.12);
  }
  50% {
    box-shadow:
      0 0 28px rgba(230, 126, 34, 0.55),
      0 0 60px rgba(230, 126, 34, 0.22),
      0 4px 20px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 200, 100, 0.18);
  }
}

.ai-bubble:hover {
  transform: scale(1.12);
  box-shadow:
    0 0 30px rgba(230, 126, 34, 0.6),
    0 0 60px rgba(230, 126, 34, 0.25),
    0 6px 24px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 200, 100, 0.2);
  animation: none;
}

.ai-bubble.panel-open {
  transform: scale(0.9) rotate(360deg);
  opacity: 0.7;
}

/* ── Face ── */
.bubble-face {
  position: relative;
  width: 36px;
  height: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.bubble-eye {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: height 0.3s ease, top 0.3s ease;
  box-shadow: 0 0 6px rgba(255, 200, 100, 0.5);
}

.bubble-eye.left { left: 6px; }
.bubble-eye.right { right: 6px; }

.bubble-eye .pupil {
  width: 4px;
  height: 4px;
  background: #1a1a2e;
  border-radius: 50%;
  transition: transform 0.15s ease;
}

.bubble-mouth {
  position: absolute;
  bottom: 2px;
  width: 12px;
  height: 6px;
  border-radius: 0 0 12px 12px;
  background: rgba(255, 255, 255, 0.85);
  transition: all 0.3s ease;
}

/* ── Sleeping state ── */
.ai-bubble.sleeping {
  animation: bubble-breathe 3s ease-in-out infinite, bubble-ambient-glow 3s ease-in-out infinite;
}

.ai-bubble.sleeping .bubble-eye {
  height: 2px;
  border-radius: 2px;
  top: 8px;
}

.ai-bubble.sleeping .bubble-mouth {
  width: 8px;
  height: 4px;
  border-radius: 50%;
  opacity: 0.5;
}

@keyframes bubble-breathe {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.04) translateY(-3px); }
}

/* ── Zzz particles ── */
.zzz-particles {
  position: absolute;
  top: -8px;
  right: -4px;
  pointer-events: none;
  z-index: 3;
}

.zzz {
  position: absolute;
  font-family: 'Georgia', serif;
  font-weight: 700;
  font-style: italic;
  color: rgba(230, 180, 80, 0.8);
  opacity: 0;
  font-size: 14px;
  text-shadow: 0 0 8px rgba(230, 126, 34, 0.4);
}

.ai-bubble.sleeping .zzz {
  animation: zzz-float 2.4s ease-in-out infinite;
}

.zzz.z1 { animation-delay: 0s; font-size: 11px; }
.zzz.z2 { animation-delay: 0.8s; font-size: 14px; }
.zzz.z3 { animation-delay: 1.6s; font-size: 10px; }

@keyframes zzz-float {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(0deg) scale(0.5);
  }
  20% { opacity: 0.9; }
  100% {
    opacity: 0;
    transform: translate(14px, -28px) rotate(-20deg) scale(1.1);
  }
}

/* ── Awake state ── */
.ai-bubble.awake {
  animation: bubble-bounce-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.ai-bubble.awake .bubble-eye {
  height: 10px;
  animation: eye-blink 4s ease-in-out infinite;
}

.ai-bubble.awake .bubble-mouth {
  width: 14px;
  height: 7px;
  background: rgba(255, 255, 255, 0.9);
}

.ai-bubble.awake .zzz { animation: none; opacity: 0; }

@keyframes bubble-bounce-in {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  70% { transform: scale(0.95); }
  100% { transform: scale(1.08); }
}

@keyframes eye-blink {
  0%, 42%, 44%, 100% { height: 10px; }
  43% { height: 2px; }
}

/* ── Glow ring (pulse on awake) ── */
.bubble-glow-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(230, 126, 34, 0.3);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.ai-bubble.awake .bubble-glow-ring {
  animation: glow-ring-pulse 2s ease-out infinite;
}

@keyframes glow-ring-pulse {
  0% { transform: scale(1); opacity: 0.6; border-color: rgba(230, 126, 34, 0.5); }
  100% { transform: scale(1.5); opacity: 0; border-color: rgba(230, 126, 34, 0); }
}


/* ═════════════════════════════════════════
   AI Chat Panel — glassmorphism
   ═════════════════════════════════════════ */
.ai-chat-panel {
  position: fixed;
  bottom: 108px;
  right: 28px;
  width: 380px;
  height: 520px;
  z-index: 9998;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* glassmorphism */
  background: linear-gradient(165deg,
    rgba(20, 20, 35, 0.75) 0%,
    rgba(30, 25, 40, 0.65) 50%,
    rgba(40, 30, 20, 0.6) 100%
  );
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  border: 1px solid rgba(255, 180, 60, 0.15);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.45),
    0 0 40px rgba(230, 126, 34, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  /* entry animation */
  opacity: 0;
  transform: translateY(20px) scale(0.92);
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-chat-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Expanded / fullscreen mode */
.ai-chat-panel.expanded {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  border-radius: 0 !important;
  z-index: 99999 !important;
}

/* ── Header ── */
.ai-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
}

.ai-chat-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-avatar-mini {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(230, 126, 34, 0.5), rgba(241, 196, 15, 0.3));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1.5px solid rgba(255, 180, 60, 0.3);
  position: relative;
}

.mini-eye {
  width: 5px;
  height: 5px;
  background: #fff;
  border-radius: 50%;
  animation: eye-blink 4s ease-in-out infinite;
}
.mini-eye.left { animation-delay: 0.1s; }

.ai-chat-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}

.ai-chat-status {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  gap: 5px;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  animation: status-pulse 2s ease-in-out infinite;
}

@keyframes status-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); }
}

.ai-chat-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: all 0.2s;
  display: flex;
}

.ai-chat-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  transform: rotate(90deg);
}

/* ── Chat body ── */
.ai-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(230, 126, 34, 0.2) transparent;
}

.ai-chat-body::-webkit-scrollbar { width: 4px; }
.ai-chat-body::-webkit-scrollbar-thumb {
  background: rgba(230, 126, 34, 0.25);
  border-radius: 4px;
}

/* ── Messages ── */
.ai-chat-msg {
  display: flex;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.ai-chat-msg.visible {
  opacity: 1;
  transform: translateY(0);
}

.ai-chat-msg.ai { justify-content: flex-start; }
.ai-chat-msg.user { justify-content: flex-end; }

.msg-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 0.82rem;
  line-height: 1.5;
  position: relative;
}

.ai-chat-msg.ai .msg-bubble {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.88);
  border-bottom-left-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.ai-chat-msg.user .msg-bubble {
  background: linear-gradient(135deg, rgba(230, 126, 34, 0.35), rgba(241, 196, 15, 0.2));
  color: #fff;
  border-bottom-right-radius: 6px;
  border: 1px solid rgba(230, 126, 34, 0.15);
}

.msg-time {
  display: block;
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 4px;
  text-align: right;
}

/* ── Typing dots ── */
.typing-dots {
  display: flex;
  gap: 4px;
  padding: 4px 0;
}

.typing-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  animation: typing-bounce 1.4s ease-in-out infinite;
}

.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-8px); opacity: 1; }
}

/* ── Footer / input ── */
.ai-chat-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ai-chat-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 10px 16px;
  font-size: 0.82rem;
  color: #fff;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
}

.ai-chat-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.ai-chat-input:focus {
  border-color: rgba(230, 126, 34, 0.4);
  box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.08);
}

.ai-chat-send {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, rgba(230, 126, 34, 0.6), rgba(241, 196, 15, 0.4));
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}

.ai-chat-send:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(230, 126, 34, 0.35);
}

.ai-chat-send:active {
  transform: scale(0.95);
}

/* ── Light theme overrides ── */
body.theme-light .ai-bubble {
  background: linear-gradient(135deg, rgba(30, 60, 35, 0.75), rgba(40, 80, 45, 0.6));
  border-color: rgba(56, 142, 60, 0.25);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
body.theme-light .ai-bubble:hover {
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.3);
}
body.theme-light .zzz { color: rgba(56, 142, 60, 0.7); text-shadow: 0 0 8px rgba(56, 142, 60, 0.3); }
body.theme-light .bubble-glow-ring { border-color: rgba(56, 142, 60, 0.3); }
body.theme-light .ai-bubble.awake .bubble-glow-ring {
  animation: glow-ring-pulse-light 2s ease-out infinite;
}
@keyframes glow-ring-pulse-light {
  0% { transform: scale(1); opacity: 0.6; border-color: rgba(56, 142, 60, 0.5); }
  100% { transform: scale(1.5); opacity: 0; border-color: rgba(56, 142, 60, 0); }
}

body.theme-light .ai-chat-panel {
  background: linear-gradient(165deg,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(245, 245, 240, 0.78) 50%,
    rgba(240, 248, 240, 0.72) 100%
  );
  border-color: rgba(56, 142, 60, 0.15);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.12),
    0 0 40px rgba(56, 142, 60, 0.06);
}
body.theme-light .ai-chat-header { border-bottom-color: rgba(0, 0, 0, 0.06); }
body.theme-light .ai-chat-title { color: #1a1a2e; }
body.theme-light .ai-chat-status { color: rgba(0, 0, 0, 0.45); }
body.theme-light .ai-avatar-mini {
  background: linear-gradient(135deg, rgba(56, 142, 60, 0.4), rgba(76, 175, 80, 0.25));
  border-color: rgba(56, 142, 60, 0.25);
}
body.theme-light .ai-chat-msg.ai .msg-bubble {
  background: rgba(0, 0, 0, 0.04);
  color: #2c2c2c;
  border-color: rgba(0, 0, 0, 0.06);
}
body.theme-light .ai-chat-msg.user .msg-bubble {
  background: linear-gradient(135deg, rgba(56, 142, 60, 0.25), rgba(76, 175, 80, 0.15));
  color: #1a1a2e;
  border-color: rgba(56, 142, 60, 0.12);
}
body.theme-light .msg-time { color: rgba(0, 0, 0, 0.3); }
body.theme-light .ai-chat-input {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: #1a1a2e;
}
body.theme-light .ai-chat-input::placeholder { color: rgba(0, 0, 0, 0.35); }
body.theme-light .ai-chat-input:focus {
  border-color: rgba(56, 142, 60, 0.4);
  box-shadow: 0 0 0 3px rgba(56, 142, 60, 0.08);
}
body.theme-light .ai-chat-send {
  background: linear-gradient(135deg, rgba(56, 142, 60, 0.5), rgba(76, 175, 80, 0.35));
}
body.theme-light .ai-chat-close { color: rgba(0, 0, 0, 0.35); }
body.theme-light .ai-chat-close:hover { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.7); }
body.theme-light .ai-chat-footer { border-top-color: rgba(0, 0, 0, 0.06); }
body.theme-light .typing-dots span { background: rgba(0, 0, 0, 0.3); }
body.theme-light .bubble-eye .pupil { background: #1a1a2e; }
body.theme-light .mini-eye { background: #1a1a2e; }

/* ═══ Typewriter OCR Loading Overlay ═══ */
.tw-overlay {
  display: none; position: fixed; inset: 0; z-index: 99990;
  background: rgba(10, 10, 18, 0.82);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  flex-direction: column; justify-content: center; align-items: center; gap: 36px;
}
.tw-overlay.active { display: flex; }
.theme-light .tw-overlay { background: rgba(255,255,255,0.82); }

.tw-glow {
  position: absolute; width: 260px; height: 120px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,140,0,0.08) 0%, rgba(255,140,0,0.03) 40%, transparent 70%);
  top: 50%; left: 50%; transform: translate(-50%, -40%);
  pointer-events: none; animation: tw-glow-pulse 3s ease-in-out infinite;
}
@keyframes tw-glow-pulse {
  0%,100% { opacity: 0.7; transform: translate(-50%,-40%) scale(1); }
  50% { opacity: 1; transform: translate(-50%,-40%) scale(1.05); }
}

.tw-machine { position: relative; animation: tw-bounce 3s linear infinite; }
.tw-machine .tw-slide {
  width: 92px; height: 20px; border-radius: 3px; margin-left: 14px;
  transform: translateX(14px);
  background: linear-gradient(#222, #000); border: 1px solid #333;
  animation: tw-slide 3s ease infinite; position: relative;
}
.tw-machine .tw-slide::before { content:""; position:absolute; background:#FF8C00; width:2px; height:8px; top:6px; left:100%; }
.tw-machine .tw-slide::after { content:""; position:absolute; background:#FF8C00; left:94px; top:3px; height:14px; width:6px; border-radius:3px; }
.tw-machine .tw-slide i { display:block; position:absolute; right:100%; width:6px; height:4px; top:4px; background:#FF8C00; }
.tw-machine .tw-slide i::before { content:""; position:absolute; background:#FF8C00; right:100%; top:-2px; width:4px; border-radius:2px; height:14px; }

.tw-machine .tw-paper {
  position: absolute; left: 24px; top: -26px; width: 40px; height: 46px;
  border-radius: 5px; background: #f4f4f4;
  transform: translateY(46px); animation: tw-paper 3s linear infinite;
}
.tw-machine .tw-paper::before {
  content:""; position:absolute; left:6px; right:6px; top:7px; border-radius:2px;
  height:4px; transform:scaleY(0.8); background:#ccc;
  box-shadow: 0 12px 0 #ccc, 0 24px 0 #ccc, 0 36px 0 #ccc;
}

.tw-machine .tw-keyboard {
  width: 120px; height: 56px; margin-top: -10px; z-index: 1; position: relative;
}
.tw-machine .tw-keyboard::before {
  content:""; position:absolute; inset:0; border-radius:7px;
  background: linear-gradient(135deg, #222, #000);
  transform: perspective(10px) rotateX(2deg); transform-origin: 50% 100%; border: 1px solid #333;
}
.tw-machine .tw-keyboard::after {
  content:""; position:absolute; left:2px; top:25px; width:11px; height:4px; border-radius:2px;
  box-shadow:
    15px 0 0 #444, 30px 0 0 #444, 45px 0 0 #444, 60px 0 0 #444, 75px 0 0 #444, 90px 0 0 #444,
    22px 10px 0 #444, 37px 10px 0 #444, 52px 10px 0 #444, 60px 10px 0 #444, 68px 10px 0 #444, 83px 10px 0 #444;
  animation: tw-keys 3s linear infinite;
}

/* Light theme typewriter */
.theme-light .tw-machine .tw-slide { background: linear-gradient(#ccc, #aaa); border-color: #bbb; }
.theme-light .tw-machine .tw-slide::before,
.theme-light .tw-machine .tw-slide::after,
.theme-light .tw-machine .tw-slide i,
.theme-light .tw-machine .tw-slide i::before { background: #d35400; }
.theme-light .tw-machine .tw-keyboard::before { background: linear-gradient(135deg, #ddd, #bbb); border-color: #ccc; }
.theme-light .tw-machine .tw-keyboard::after {
  box-shadow:
    15px 0 0 #999, 30px 0 0 #999, 45px 0 0 #999, 60px 0 0 #999, 75px 0 0 #999, 90px 0 0 #999,
    22px 10px 0 #999, 37px 10px 0 #999, 52px 10px 0 #999, 60px 10px 0 #999, 68px 10px 0 #999, 83px 10px 0 #999;
}
.theme-light .tw-machine .tw-paper { background: #fff; }
.theme-light .tw-machine .tw-paper::before { background: #ddd; box-shadow: 0 12px 0 #ddd, 0 24px 0 #ddd, 0 36px 0 #ddd; }
.theme-light .tw-glow { background: radial-gradient(ellipse at center, rgba(211,84,0,0.06) 0%, transparent 60%); }

.tw-caption {
  color: rgba(255,255,255,0.25); font-size: 13px; letter-spacing: 4px;
  text-transform: uppercase; font-family: 'DM Sans', sans-serif; font-weight: 600;
  animation: tw-caption-fade 4s ease-in-out infinite alternate;
}
.theme-light .tw-caption { color: rgba(0,0,0,0.25); }
@keyframes tw-caption-fade { 0% { opacity: 0.2; } 100% { opacity: 0.5; } }

.tw-progress {
  color: rgba(255,255,255,0.4); font-size: 12px; font-weight: 500;
  font-family: 'DM Sans', sans-serif; margin-top: -20px;
}
.theme-light .tw-progress { color: rgba(0,0,0,0.35); }

.tw-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tw-particle {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: rgba(255,180,100,0.15); animation: tw-drift linear infinite;
}
.theme-light .tw-particle { background: rgba(180,100,30,0.1); }
@keyframes tw-drift {
  0% { transform: translateY(100vh) translateX(0); opacity: 0; }
  10% { opacity: 1; } 90% { opacity: 1; }
  100% { transform: translateY(-10vh) translateX(30px); opacity: 0; }
}

@keyframes tw-bounce {
  85%,92%,100% { transform: translateY(0); }
  89% { transform: translateY(-4px); }
  95% { transform: translateY(2px); }
}
@keyframes tw-slide {
  5% { transform: translateX(14px); } 15%,30% { transform: translateX(6px); }
  40%,55% { transform: translateX(0); } 65%,70% { transform: translateX(-4px); }
  80%,89% { transform: translateX(-12px); } 100% { transform: translateX(14px); }
}
@keyframes tw-paper {
  5% { transform: translateY(46px); } 20%,30% { transform: translateY(34px); }
  40%,55% { transform: translateY(22px); } 65%,70% { transform: translateY(10px); }
  80%,85% { transform: translateY(0); } 92%,100% { transform: translateY(46px); }
}
@keyframes tw-keys {
  5%,12%,21%,30%,39%,48%,57%,66%,75%,84% {
    box-shadow: 15px 0 0 #444,30px 0 0 #444,45px 0 0 #444,60px 0 0 #444,75px 0 0 #444,90px 0 0 #444,
      22px 10px 0 #444,37px 10px 0 #444,52px 10px 0 #444,60px 10px 0 #444,68px 10px 0 #444,83px 10px 0 #444;
  }
  9% { box-shadow: 15px 2px 0 #FFA500,30px 0 0 #444,45px 0 0 #444,60px 0 0 #444,75px 0 0 #444,90px 0 0 #444,
    22px 10px 0 #444,37px 10px 0 #444,52px 10px 0 #444,60px 10px 0 #444,68px 10px 0 #444,83px 10px 0 #444; }
  18% { box-shadow: 15px 0 0 #444,30px 0 0 #444,45px 0 0 #444,60px 2px 0 #FFA500,75px 0 0 #444,90px 0 0 #444,
    22px 10px 0 #444,37px 10px 0 #444,52px 10px 0 #444,60px 10px 0 #444,68px 10px 0 #444,83px 10px 0 #444; }
  27% { box-shadow: 15px 0 0 #444,30px 0 0 #444,45px 0 0 #444,60px 0 0 #444,75px 0 0 #444,90px 0 0 #444,
    22px 12px 0 #FFA500,37px 10px 0 #444,52px 10px 0 #444,60px 10px 0 #444,68px 10px 0 #444,83px 10px 0 #444; }
  36% { box-shadow: 15px 0 0 #444,30px 0 0 #444,45px 0 0 #444,60px 0 0 #444,75px 0 0 #444,90px 0 0 #444,
    22px 10px 0 #444,37px 10px 0 #444,52px 12px 0 #FFA500,60px 12px 0 #FFA500,68px 12px 0 #FFA500,83px 10px 0 #444; }
  45% { box-shadow: 15px 0 0 #444,30px 0 0 #444,45px 0 0 #444,60px 0 0 #444,75px 0 0 #444,90px 2px 0 #FFA500,
    22px 10px 0 #444,37px 10px 0 #444,52px 10px 0 #444,60px 10px 0 #444,68px 10px 0 #444,83px 10px 0 #444; }
  54% { box-shadow: 15px 0 0 #444,30px 2px 0 #FFA500,45px 0 0 #444,60px 0 0 #444,75px 0 0 #444,90px 0 0 #444,
    22px 10px 0 #444,37px 10px 0 #444,52px 10px 0 #444,60px 10px 0 #444,68px 10px 0 #444,83px 10px 0 #444; }
  63% { box-shadow: 15px 0 0 #444,30px 0 0 #444,45px 0 0 #444,60px 0 0 #444,75px 0 0 #444,90px 0 0 #444,
    22px 10px 0 #444,37px 10px 0 #444,52px 10px 0 #444,60px 10px 0 #444,68px 10px 0 #444,83px 12px 0 #FFA500; }
  72% { box-shadow: 15px 0 0 #444,30px 0 0 #444,45px 2px 0 #FFA500,60px 0 0 #444,75px 0 0 #444,90px 0 0 #444,
    22px 10px 0 #444,37px 10px 0 #444,52px 10px 0 #444,60px 10px 0 #444,68px 10px 0 #444,83px 10px 0 #444; }
  81% { box-shadow: 15px 0 0 #444,30px 0 0 #444,45px 0 0 #444,60px 0 0 #444,75px 0 0 #444,90px 0 0 #444,
    22px 10px 0 #444,37px 12px 0 #FFA500,52px 10px 0 #444,60px 10px 0 #444,68px 10px 0 #444,83px 10px 0 #444; }
}

@media (prefers-reduced-motion: reduce) {
  .tw-machine, .tw-machine .tw-slide, .tw-machine .tw-paper,
  .tw-machine .tw-keyboard::after, .tw-glow, .tw-caption, .tw-particle { animation: none !important; }
  .tw-machine .tw-paper { transform: translateY(22px); }
  .tw-machine .tw-slide { transform: translateX(0); }
}

/* ── Chat history sidebar + new-session button ── */
.ai-chat-hist-btn {
  background: none; border: none; color: rgba(255,255,255,0.4);
  cursor: pointer; padding: 6px; border-radius: 8px; display: flex;
  transition: all 0.2s;
}
.ai-chat-hist-btn:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); }
body.theme-light .ai-chat-hist-btn { color: rgba(0,0,0,0.35); }
body.theme-light .ai-chat-hist-btn:hover { background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.7); }

.ai-chat-hist-panel {
  display: none; position: absolute; top: 56px; left: 0; right: 0; bottom: 56px;
  background: rgba(12,12,20,0.98);
  backdrop-filter: blur(20px);
  z-index: 10; overflow-y: auto;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ai-chat-hist-panel.open { display: flex; flex-direction: column; }
.ai-chat-hist-list { padding: 8px; flex: 1; overflow-y: auto; }
.ai-chat-hist-item {
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  font-size: 12px; color: rgba(255,255,255,0.75);
  transition: background 0.15s; display: flex; align-items: center;
  justify-content: space-between; gap: 8px; margin-bottom: 2px;
}
.ai-chat-hist-item:hover { background: rgba(255,255,255,0.08); }
.ai-chat-hist-item.active { background: rgba(230,126,34,0.2); color: #fff; }
.ai-chat-hist-item .hist-title {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; line-height: 1.4;
}
.ai-chat-hist-item .hist-count {
  font-size: 10px; color: rgba(255,255,255,0.35); flex-shrink: 0; white-space: nowrap;
}
.ai-chat-hist-item .hist-del {
  opacity: 0; background: none; border: none; color: rgba(255,100,100,0.7);
  cursor: pointer; padding: 4px; border-radius: 4px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.15s;
  width: 20px; height: 20px;
}
.ai-chat-hist-item:hover .hist-del { opacity: 1; }
.ai-chat-hist-item .hist-del:hover { color: #ff6b6b; background: rgba(255,100,100,0.1); }

body.theme-light .ai-chat-hist-panel {
  background: rgba(255,255,255,0.98); border-top-color: rgba(0,0,0,0.08);
  border-bottom-color: rgba(0,0,0,0.08);
}
body.theme-light .ai-chat-hist-panel > div:first-child { color: rgba(0,0,0,0.6); border-bottom-color: rgba(0,0,0,0.08); }
body.theme-light .ai-chat-hist-item { color: rgba(0,0,0,0.65); }
body.theme-light .ai-chat-hist-item:hover { background: rgba(0,0,0,0.04); }
body.theme-light .ai-chat-hist-item.active { background: rgba(56,142,60,0.12); color: #1a1a2e; }
body.theme-light .ai-chat-hist-item .hist-count { color: rgba(0,0,0,0.35); }

/* Chat AI markdown table support */
.ai-chat-msg .msg-text table {
  border-collapse: collapse; width: 100%; margin: 6px 0; font-size: 0.75rem;
}
.ai-chat-msg .msg-text th,
.ai-chat-msg .msg-text td {
  border: 1px solid rgba(255,255,255,0.1); padding: 4px 8px; text-align: left;
}
.ai-chat-msg .msg-text th { background: rgba(255,255,255,0.06); font-weight: 600; }
body.theme-light .ai-chat-msg .msg-text th,
body.theme-light .ai-chat-msg .msg-text td { border-color: rgba(0,0,0,0.08); }
body.theme-light .ai-chat-msg .msg-text th { background: rgba(0,0,0,0.03); }
.ai-chat-msg .msg-text p { margin: 4px 0; }
.ai-chat-msg .msg-text strong { font-weight: 700; }
.ai-chat-msg .msg-text code { background: rgba(255,255,255,0.08); padding: 1px 4px; border-radius: 3px; font-size: 0.78rem; }
body.theme-light .ai-chat-msg .msg-text code { background: rgba(0,0,0,0.06); }

/* ════════════════════════════════════════════════════════════════════════════
   Dark-mode surface neutralizers (added 2026-05-06)
   Fixes light-on-light invisibility for surfaces that hard-code light bgs
   (#f8fafc / #eff6ff / white) without dark counterparts. Uses !important
   ONLY where inline style="background:..." baked into the HTML must be beaten.
   Scope: #dashPage:not(.theme-light) — light theme is untouched.
   ════════════════════════════════════════════════════════════════════════════ */

#dashPage:not(.theme-light) .info-item,
#dashPage:not(.theme-light) .val-item,
#dashPage:not(.theme-light) .totals-box,
#dashPage:not(.theme-light) #invoiceImageBox,
#dashPage:not(.theme-light) .stage-card,
#dashPage:not(.theme-light) .bulk-row,
#dashPage:not(.theme-light) .price-change-item,
#dashPage:not(.theme-light) .dup-warning,
#dashPage:not(.theme-light) .alert-item,
#dashPage:not(.theme-light) .flag-list li {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text);
}

/* Inline editable cells — keep yellow accent but darken */
#dashPage:not(.theme-light) td.editable input,
#dashPage:not(.theme-light) td.editable input:focus {
  background: rgba(234, 179, 8, 0.14);
  color: var(--text);
}
#dashPage:not(.theme-light) .row-corrected td {
  background: rgba(234, 179, 8, 0.10) !important;
  color: var(--text) !important;
}

/* Inline-styled light panels in Settings + Dashboard banners.
   These targets carry inline style="background:#f8fafc" / "#eff6ff",
   so we must use !important to beat the inline cascade. */
#dashPage:not(.theme-light) #companyBanner,
#dashPage:not(.theme-light) #batchExtractBanner,
#dashPage:not(.theme-light) #tab-settings .card > div[style*="background:#f8fafc"],
#dashPage:not(.theme-light) #tab-settings .card > div[style*="background:#eff6ff"] {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: var(--text) !important;
}

/* btn-outline base "white pill on hover" — global dark default
   (covers buttons inside modals + outside .liquid-glass scope) */
#dashPage:not(.theme-light) .btn-outline {
  background: rgba(0, 0, 0, 0.22);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.18);
}
#dashPage:not(.theme-light) .btn-outline:hover {
  background: rgba(16, 185, 129, 0.18);
  color: #ecfdf5;
  border-color: rgba(16, 185, 129, 0.55);
}

/* Pencil edit button used inline in invoice header rows */
#dashPage:not(.theme-light) .info-edit-btn {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.18);
}
#dashPage:not(.theme-light) .info-edit-btn:hover {
  background: var(--primary);
  color: #fff;
}

/* Tables outside .table-wrap (Memory Manager vendor/item lists) — kill
   the inline tbody tr:hover { background:#f8fafc } white flash */
#dashPage:not(.theme-light) tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Native date pickers use the OS scheme — tell the browser we're dark */
#dashPage:not(.theme-light) input[type="date"],
#dashPage:not(.theme-light) input[type="time"],
#dashPage:not(.theme-light) input[type="datetime-local"] {
  color-scheme: dark;
}

/* Activity Log detail modal close button + view-icon button readability */
#alDetailModal .btn-outline,
#dashPage:not(.theme-light) #alLogBody .btn-outline {
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.20);
}
#alDetailModal .btn-outline:hover,
#dashPage:not(.theme-light) #alLogBody .btn-outline:hover {
  background: rgba(16, 185, 129, 0.22);
  color: #ecfdf5;
}

/* Vendor name cancel button — washed out var(--border) was invisible */
#dashPage:not(.theme-light) .vendor-name-cancel {
  background: rgba(255, 255, 255, 0.10);
  color: var(--text);
}


/* Activity Log detail modal — strong blur backdrop + opaque inner box
   so the modal does not bleed into the page background image (any theme). */
#alDetailModal {
  background: rgba(8, 12, 16, 0.72) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
#alDetailModal > div {
  background: #0f1a16 !important;
  border: 1px solid rgba(0, 212, 170, 0.25);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
  color: var(--text);
}
body.theme-light #alDetailModal {
  background: rgba(15, 23, 42, 0.55) !important;
}
body.theme-light #alDetailModal > div {
  background: #ffffff !important;
  border: 1px solid #e2e8f0;
  color: #0f172a;
}


/* Approval-status badge variants (separate axis from validation status) */
.status-pending_review { background: rgba(148, 163, 184, 0.18); color: #94a3b8; border: 1px solid rgba(148, 163, 184, 0.35); }
.status-approved       { background: rgba(34, 197, 94, 0.18);  color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.45); }
.status-rejected       { background: rgba(239, 68, 68, 0.18);  color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.45); }
.status-pushed_to_odoo { background: rgba(59, 130, 246, 0.20); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.55); }
body.theme-light .status-pending_review { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
body.theme-light .status-approved       { background: #dcfce7; color: #15803d; border-color: #86efac; }
body.theme-light .status-rejected       { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
body.theme-light .status-pushed_to_odoo { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }