/* Global theme bridge
 * Light mode uses DaisyUI light tokens.
 * Dark mode keeps existing Tailwind-driven look.
 */

:root[data-theme="light"] {
  --app-b1: var(--color-base-100, #ffffff);
  --app-b2: var(--color-base-200, #f8fafc);
  --app-b3: var(--color-base-300, #e2e8f0);
  --app-bc: var(--color-base-content, #0f172a);
  --app-p: var(--color-primary, #0f766e);
  --app-pc: var(--color-primary-content, #f0fdfa);
  --app-n: var(--color-neutral, #334155);
  --app-nc: var(--color-neutral-content, #f8fafc);
  --app-er: var(--color-error, #e11d48);
  --app-erc: var(--color-error-content, #fff1f2);
  --app-wa: var(--color-warning, #d97706);
  --app-wac: var(--color-warning-content, #fffbeb);
  --app-border: color-mix(in srgb, var(--app-bc) 20%, transparent);
  --app-panel-light-rgb: 248 250 252;
  --app-floating-panel-light-rgb: 248 250 252;
}

:root[data-theme="dark"] {
  --app-panel-dark-rgb: 15 23 42;
  --app-floating-panel-dark-rgb: 15 23 42;
}

:root[data-theme="light"] body {
  background:
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--app-b1) 96%, #ffffff) 0%, transparent 55%),
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--app-b3) 62%, #ffffff) 0%, transparent 65%),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--app-b2) 85%, #ffffff) 0%, transparent 60%),
    linear-gradient(180deg, var(--app-b1) 0%, var(--app-b2) 46%, var(--app-b3) 100%) !important;
  background-attachment: fixed !important;
  color: var(--app-bc) !important;
}

:root[data-theme="light"][data-theme-variant="corporate"] {
  --app-b1: #f7fbff;
  --app-b2: #eef4fb;
  --app-b3: #dce7f3;
  --app-bc: #1f2937;
  --app-p: #2563eb;
  --app-pc: #eff6ff;
  --app-n: #334155;
  --app-nc: #f8fafc;
  --app-er: #dc2626;
  --app-erc: #fef2f2;
  --app-wa: #d97706;
  --app-wac: #fffbeb;
  --app-panel-light-rgb: 247 251 255;
  --app-floating-panel-light-rgb: 247 251 255;
}

:root[data-theme="light"][data-theme-variant="corporate"] body {
  background:
    radial-gradient(circle at 0% 100%, rgba(255, 255, 255, 0.96) 0%, transparent 55%),
    radial-gradient(circle at 0% 0%, rgba(219, 234, 254, 0.62) 0%, transparent 62%),
    radial-gradient(circle at 100% 0%, rgba(191, 219, 254, 0.34) 0%, transparent 58%),
    linear-gradient(180deg, #f8fbff 0%, #eef4fb 48%, #dce7f3 100%) !important;
  color: var(--app-bc) !important;
}

:root[data-theme="light"][data-theme-variant="corporate"] body {
  --app-surface-background:
    linear-gradient(180deg,
      rgb(var(--app-panel-light-rgb, 247 251 255) / var(--app-panel-light-top, 0.96)) 0%,
      rgb(var(--app-panel-light-rgb, 247 251 255) / var(--app-panel-light-bottom, 0.98)) 100%);
}

:root[data-theme="dark"] body {
  --app-surface-background:
    linear-gradient(180deg,
      rgb(var(--app-panel-dark-rgb, 15 23 42) / var(--app-panel-dark-top, 0.98)) 0%,
      rgb(var(--app-panel-dark-rgb, 15 23 42) / var(--app-panel-dark-mid, 0.98)) 52%,
      rgb(var(--app-panel-dark-rgb, 15 23 42) / var(--app-panel-dark-bottom, 0.96)) 100%);
}

:root[data-theme="light"] body {
  --app-surface-background:
    linear-gradient(180deg,
      rgb(var(--app-panel-light-rgb, 248 250 252) / var(--app-panel-light-top, 0.96)) 0%,
      rgb(var(--app-panel-light-rgb, 248 250 252) / var(--app-panel-light-bottom, 0.98)) 100%);
}

:root[data-theme="light"] button:not([data-no-global-button-shadow]),
:root[data-theme="light"] input[type="button"]:not([data-no-global-button-shadow]),
:root[data-theme="light"] input[type="submit"]:not([data-no-global-button-shadow]),
:root[data-theme="light"] input[type="reset"]:not([data-no-global-button-shadow]) {
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.12),
    0 2px 6px rgba(15, 23, 42, 0.06);
}

:root[data-theme="light"] button.app-button-primary,
:root[data-theme="light"] a.app-button-primary,
:root[data-theme="light"] input.app-button-primary {
  border-width: 1px !important;
  background-color: #2563eb !important;
  color: var(--app-pc) !important;
  border-color: transparent !important;
  box-shadow:
    0 10px 15px -3px rgba(37, 99, 235, 0.3),
    0 4px 6px -4px rgba(37, 99, 235, 0.3) !important;
}

:root[data-theme="light"] button.app-button-secondary,
:root[data-theme="light"] a.app-button-secondary,
:root[data-theme="light"] input.app-button-secondary {
  border-width: 1px !important;
  background-color: #059669 !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow:
    0 16px 34px rgba(5, 150, 105, 0.24),
    0 6px 14px rgba(15, 23, 42, 0.18) !important;
}

:root[data-theme="light"] button.app-button-danger,
:root[data-theme="light"] a.app-button-danger,
:root[data-theme="light"] input.app-button-danger {
  border-width: 1px !important;
  background-color: #dc2626 !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow:
    0 16px 34px rgba(220, 38, 38, 0.24),
    0 6px 14px rgba(15, 23, 42, 0.18) !important;
}

:root[data-theme="light"] button.app-button-ghost,
:root[data-theme="light"] a.app-button-ghost,
:root[data-theme="light"] input.app-button-ghost,
:root[data-theme="light"] button.app-button-subtle,
:root[data-theme="light"] a.app-button-subtle,
:root[data-theme="light"] input.app-button-subtle {
  border-width: 1px !important;
  background-color: rgba(255, 255, 255, 0.72) !important;
  color: #0f172a !important;
  border-color: rgba(148, 163, 184, 0.34) !important;
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

:root[data-theme="light"] button:not([data-no-global-button-shadow]):hover,
:root[data-theme="light"] input[type="button"]:not([data-no-global-button-shadow]):hover,
:root[data-theme="light"] input[type="submit"]:not([data-no-global-button-shadow]):hover,
:root[data-theme="light"] input[type="reset"]:not([data-no-global-button-shadow]):hover {
  box-shadow:
    0 14px 32px rgba(15, 23, 42, 0.16),
    0 3px 8px rgba(15, 23, 42, 0.08);
}

:root[data-theme="light"] button.app-button-primary:hover,
:root[data-theme="light"] a.app-button-primary:hover,
:root[data-theme="light"] input.app-button-primary:hover {
  background-color: color-mix(in srgb, #2563eb 88%, #ffffff) !important;
  color: var(--app-pc) !important;
  border-color: transparent !important;
  box-shadow:
    0 10px 15px -3px rgba(37, 99, 235, 0.38),
    0 4px 6px -4px rgba(37, 99, 235, 0.38) !important;
}

:root[data-theme="light"] button.app-button-secondary:hover,
:root[data-theme="light"] a.app-button-secondary:hover,
:root[data-theme="light"] input.app-button-secondary:hover {
  background-color: #10b981 !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow:
    0 20px 42px rgba(5, 150, 105, 0.3),
    0 8px 18px rgba(15, 23, 42, 0.22) !important;
}

:root[data-theme="light"] button.app-button-danger:hover,
:root[data-theme="light"] a.app-button-danger:hover,
:root[data-theme="light"] input.app-button-danger:hover {
  background-color: #ef4444 !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow:
    0 20px 42px rgba(220, 38, 38, 0.3),
    0 8px 18px rgba(15, 23, 42, 0.22) !important;
}

:root[data-theme="light"] button.app-button-ghost:hover,
:root[data-theme="light"] a.app-button-ghost:hover,
:root[data-theme="light"] input.app-button-ghost:hover,
:root[data-theme="light"] button.app-button-subtle:hover,
:root[data-theme="light"] a.app-button-subtle:hover,
:root[data-theme="light"] input.app-button-subtle:hover {
  background-color: rgba(248, 250, 252, 0.96) !important;
  color: #0f172a !important;
  border-color: rgba(100, 116, 139, 0.38) !important;
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.56) !important;
}

:root[data-theme="dark"] button.app-button-primary,
:root[data-theme="dark"] a.app-button-primary,
:root[data-theme="dark"] input.app-button-primary {
  border-width: 1px !important;
  background-color: rgba(16, 185, 129, 0.10) !important;
  color: #d1fae5 !important;
  border-color: rgba(52, 211, 153, 0.40) !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] button.app-button-secondary,
:root[data-theme="dark"] a.app-button-secondary,
:root[data-theme="dark"] input.app-button-secondary {
  border-width: 1px !important;
  background-color: rgba(59, 130, 246, 0.10) !important;
  color: #dbeafe !important;
  border-color: rgba(96, 165, 250, 0.40) !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] button.app-button-danger,
:root[data-theme="dark"] a.app-button-danger,
:root[data-theme="dark"] input.app-button-danger {
  border-width: 1px !important;
  background-color: rgba(239, 68, 68, 0.10) !important;
  color: #fee2e2 !important;
  border-color: rgba(248, 113, 113, 0.40) !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] button.app-button-ghost,
:root[data-theme="dark"] a.app-button-ghost,
:root[data-theme="dark"] input.app-button-ghost,
:root[data-theme="dark"] button.app-button-subtle,
:root[data-theme="dark"] a.app-button-subtle,
:root[data-theme="dark"] input.app-button-subtle {
  border-width: 1px !important;
  background-color: rgba(15, 23, 42, 0.56) !important;
  color: #e2e8f0 !important;
  border-color: rgba(71, 85, 105, 0.72) !important;
  box-shadow:
    0 12px 24px rgba(2, 6, 23, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

:root[data-theme="dark"] button.app-button-primary:hover,
:root[data-theme="dark"] a.app-button-primary:hover,
:root[data-theme="dark"] input.app-button-primary:hover {
  background-color: rgba(16, 185, 129, 0.20) !important;
  color: #d1fae5 !important;
  border-color: rgba(52, 211, 153, 0.40) !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] button.app-button-secondary:hover,
:root[data-theme="dark"] a.app-button-secondary:hover,
:root[data-theme="dark"] input.app-button-secondary:hover {
  background-color: rgba(59, 130, 246, 0.20) !important;
  color: #dbeafe !important;
  border-color: rgba(96, 165, 250, 0.40) !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] button.app-button-danger:hover,
:root[data-theme="dark"] a.app-button-danger:hover,
:root[data-theme="dark"] input.app-button-danger:hover {
  background-color: rgba(239, 68, 68, 0.20) !important;
  color: #fee2e2 !important;
  border-color: rgba(248, 113, 113, 0.40) !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] button.app-button-ghost:hover,
:root[data-theme="dark"] a.app-button-ghost:hover,
:root[data-theme="dark"] input.app-button-ghost:hover,
:root[data-theme="dark"] button.app-button-subtle:hover,
:root[data-theme="dark"] a.app-button-subtle:hover,
:root[data-theme="dark"] input.app-button-subtle:hover {
  background-color: rgba(30, 41, 59, 0.78) !important;
}

:root[data-theme="dark"] body[data-app-background],
:root[data-theme="dark"] [data-profile-background-swatch] {
  --profile-preset-background:
    linear-gradient(180deg, rgb(var(--app-panel-dark-rgb, 15 23 42) / 0.98) 0%, rgb(var(--app-panel-dark-rgb, 15 23 42) / 0.98) 52%, rgb(var(--app-panel-dark-rgb, 15 23 42) / 0.96) 100%);
}

:root[data-theme="light"] body[data-app-background],
:root[data-theme="light"] [data-profile-background-swatch] {
  --profile-preset-background:
    linear-gradient(180deg, rgb(var(--app-panel-light-rgb, 248 250 252) / 0.96) 0%, rgb(var(--app-panel-light-rgb, 248 250 252) / 0.98) 100%);
}

:root[data-theme="light"] body[data-app-background="dashboard"] {
  --profile-preset-background:
    linear-gradient(
      180deg,
      rgb(var(--app-custom-overlay-surface-light-rgb, 255 255 255) / var(--app-custom-overlay-surface-light-top, 0.72)) 0%,
      rgb(var(--app-custom-overlay-surface-light-rgb, 255 255 255) / var(--app-custom-overlay-surface-light-bottom, 0.82)) 100%
    );
  background:
    linear-gradient(
      180deg,
      rgb(var(--app-custom-overlay-body-light-rgb, 255 255 255) / var(--app-custom-overlay-body-light-top, 0.28)) 0%,
      rgb(var(--app-custom-overlay-body-light-rgb, 255 255 255) / var(--app-custom-overlay-body-light-bottom, 0.34)) 100%
    ),
    url("/static/profile-backgrounds/default-light-dashboard.jpg") center / cover no-repeat fixed !important;
}

:root[data-theme="light"] [data-profile-background-swatch="dashboard"] {
  background:
    linear-gradient(
      180deg,
      rgb(var(--app-custom-overlay-body-light-rgb, 255 255 255) / 0.18) 0%,
      rgb(var(--app-custom-overlay-body-light-rgb, 255 255 255) / 0.26) 100%
    ),
    url("/static/profile-backgrounds/default-light-dashboard.jpg") center / cover no-repeat !important;
}

:root[data-theme="dark"] body[data-app-background] {
  --app-surface-background: var(--profile-preset-background);
}

:root[data-theme="light"] body[data-app-background] {
  --app-surface-background: var(--profile-preset-background);
}

:root[data-theme="dark"] body[data-app-background="custom"] {
  --app-surface-background:
    linear-gradient(
      180deg,
      rgb(var(--app-custom-overlay-surface-dark-rgb, 2 6 23) / var(--app-custom-overlay-surface-dark-top, 0.7)) 0%,
      rgb(var(--app-custom-overlay-surface-dark-rgb, 2 6 23) / var(--app-custom-overlay-surface-dark-bottom, 0.76)) 100%
    );
}

:root[data-theme="light"] body[data-app-background="custom"] {
  --app-surface-background:
    linear-gradient(
      180deg,
      rgb(var(--app-custom-overlay-surface-light-rgb, 255 255 255) / var(--app-custom-overlay-surface-light-top, 0.72)) 0%,
      rgb(var(--app-custom-overlay-surface-light-rgb, 255 255 255) / var(--app-custom-overlay-surface-light-bottom, 0.82)) 100%
    );
}

:root[data-theme="dark"] body[data-app-background="custom"] {
  background:
    linear-gradient(
      180deg,
      rgb(var(--app-custom-overlay-body-dark-rgb, 2 6 23) / var(--app-custom-overlay-body-dark-top, 0.28)) 0%,
      rgb(var(--app-custom-overlay-body-dark-rgb, 2 6 23) / var(--app-custom-overlay-body-dark-bottom, 0.36)) 100%
    ) !important;
}

:root[data-theme="light"] body[data-app-background="custom"] {
  background:
    linear-gradient(
      180deg,
      rgb(var(--app-custom-overlay-body-light-rgb, 255 255 255) / var(--app-custom-overlay-body-light-top, 0.28)) 0%,
      rgb(var(--app-custom-overlay-body-light-rgb, 255 255 255) / var(--app-custom-overlay-body-light-bottom, 0.34)) 100%
    ) !important;
}

body[data-app-background="custom"] {
  position: relative;
}

body[data-app-background="custom"]::before {
  content: "";
  position: fixed;
  pointer-events: none;
  inset: 0;
  z-index: 0;
  background-image: var(--app-custom-background-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(var(--app-custom-background-blur-dark, 0px));
  transform: scale(var(--app-custom-background-blur-scale-dark, 1));
  transform-origin: center;
  opacity: 1;
}

:root[data-theme="light"] body[data-app-background="custom"]::before {
  filter: blur(var(--app-custom-background-blur-light, 0px));
  transform: scale(var(--app-custom-background-blur-scale-light, 1));
}

body[data-app-background="custom"] > * {
  position: relative;
  z-index: 1;
}

body[data-app-background="custom"][data-app-background-attachment="fixed"]::before {
  position: fixed;
}

body[data-app-background="custom"][data-app-background-attachment="scroll"]::before {
  position: absolute;
  inset: 0;
  min-height: 100%;
  height: 100%;
  background-position: top center;
  background-repeat: repeat-y;
  background-size: 100% auto;
}

:root[data-theme="dark"] [data-profile-background-swatch],
:root[data-theme="light"] [data-profile-background-swatch] {
  background: var(--profile-preset-background);
}

:root[data-theme="dark"] body[data-app-background="lager"],
:root[data-theme="dark"] [data-profile-background-swatch="lager"] {
  --profile-preset-background:
    radial-gradient(circle at top left, rgba(16, 185, 129, 0.15), transparent 28%),
    radial-gradient(circle at top right, rgba(251, 191, 36, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(11, 18, 32, 0.92), rgba(20, 34, 56, 0.92));
}

:root[data-theme="dark"] body[data-app-background="midnight"],
:root[data-theme="dark"] [data-profile-background-swatch="midnight"],
:root[data-theme="light"] body[data-app-background="midnight"],
:root[data-theme="light"] [data-profile-background-swatch="midnight"] {
  --profile-preset-background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(30, 41, 59, 0.98) 52%, rgba(15, 23, 42, 0.96) 100%);
}

:root[data-theme="light"] body[data-app-background="lager"],
:root[data-theme="light"] [data-profile-background-swatch="lager"] {
  --profile-preset-background:
    radial-gradient(circle at top left, rgba(110, 231, 183, 0.22), transparent 32%),
    radial-gradient(circle at top right, rgba(251, 191, 36, 0.16), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.96));
}

:root[data-theme="dark"] body[data-app-background="forest"],
:root[data-theme="dark"] [data-profile-background-swatch="forest"] {
  --profile-preset-background:
    radial-gradient(circle at top left, rgba(74, 222, 128, 0.18), transparent 30%),
    radial-gradient(circle at bottom right, rgba(20, 184, 166, 0.16), transparent 32%),
    linear-gradient(180deg, rgba(7, 23, 20, 0.96), rgba(18, 52, 46, 0.94));
}

:root[data-theme="light"] body[data-app-background="forest"],
:root[data-theme="light"] [data-profile-background-swatch="forest"] {
  --profile-preset-background:
    radial-gradient(circle at top left, rgba(134, 239, 172, 0.22), transparent 30%),
    radial-gradient(circle at bottom right, rgba(45, 212, 191, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(251, 255, 252, 0.98), rgba(236, 253, 245, 0.96));
}

:root[data-theme="dark"] body[data-app-background="sunset"],
:root[data-theme="dark"] [data-profile-background-swatch="sunset"] {
  --profile-preset-background:
    radial-gradient(circle at top right, rgba(251, 191, 36, 0.2), transparent 28%),
    radial-gradient(circle at bottom left, rgba(244, 63, 94, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(36, 17, 48, 0.96), rgba(91, 33, 60, 0.94));
}

:root[data-theme="light"] body[data-app-background="sunset"],
:root[data-theme="light"] [data-profile-background-swatch="sunset"] {
  --profile-preset-background:
    radial-gradient(circle at top right, rgba(253, 224, 71, 0.24), transparent 28%),
    radial-gradient(circle at bottom left, rgba(251, 113, 133, 0.16), transparent 32%),
    linear-gradient(180deg, rgba(255, 251, 245, 0.98), rgba(255, 241, 242, 0.96));
}

:root[data-theme="dark"] body[data-app-background="ocean"],
:root[data-theme="dark"] [data-profile-background-swatch="ocean"] {
  --profile-preset-background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.2), transparent 28%),
    radial-gradient(circle at bottom right, rgba(96, 165, 250, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(8, 20, 44, 0.96), rgba(24, 45, 88, 0.94));
}

:root[data-theme="light"] body[data-app-background="ocean"],
:root[data-theme="light"] [data-profile-background-swatch="ocean"] {
  --profile-preset-background:
    radial-gradient(circle at top left, rgba(125, 211, 252, 0.22), transparent 28%),
    radial-gradient(circle at bottom right, rgba(96, 165, 250, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(239, 246, 255, 0.96));
}

:root[data-theme="dark"] body[data-app-background="aurora"],
:root[data-theme="dark"] [data-profile-background-swatch="aurora"] {
  --profile-preset-background:
    radial-gradient(circle at top left, rgba(45, 212, 191, 0.18), transparent 26%),
    radial-gradient(circle at top right, rgba(167, 139, 250, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(9, 16, 35, 0.97), rgba(29, 38, 74, 0.94));
}

:root[data-theme="light"] body[data-app-background="aurora"],
:root[data-theme="light"] [data-profile-background-swatch="aurora"] {
  --profile-preset-background:
    radial-gradient(circle at top left, rgba(153, 246, 228, 0.24), transparent 28%),
    radial-gradient(circle at top right, rgba(196, 181, 253, 0.2), transparent 32%),
    linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(238, 242, 255, 0.96));
}

:root[data-theme="dark"] body[data-app-background="ember"],
:root[data-theme="dark"] [data-profile-background-swatch="ember"] {
  --profile-preset-background:
    radial-gradient(circle at top right, rgba(251, 146, 60, 0.22), transparent 28%),
    radial-gradient(circle at bottom left, rgba(239, 68, 68, 0.16), transparent 32%),
    linear-gradient(180deg, rgba(31, 16, 16, 0.97), rgba(67, 24, 24, 0.94));
}

:root[data-theme="light"] body[data-app-background="ember"],
:root[data-theme="light"] [data-profile-background-swatch="ember"] {
  --profile-preset-background:
    radial-gradient(circle at top right, rgba(253, 186, 116, 0.24), transparent 28%),
    radial-gradient(circle at bottom left, rgba(252, 165, 165, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(255, 251, 235, 0.98), rgba(255, 237, 213, 0.96));
}

:root[data-theme="dark"] body[data-app-background="lilac"],
:root[data-theme="dark"] [data-profile-background-swatch="lilac"] {
  --profile-preset-background:
    radial-gradient(circle at top left, rgba(192, 132, 252, 0.22), transparent 28%),
    radial-gradient(circle at bottom right, rgba(96, 165, 250, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(24, 16, 42, 0.97), rgba(52, 28, 77, 0.94));
}

:root[data-theme="light"] body[data-app-background="lilac"],
:root[data-theme="light"] [data-profile-background-swatch="lilac"] {
  --profile-preset-background:
    radial-gradient(circle at top left, rgba(221, 214, 254, 0.3), transparent 28%),
    radial-gradient(circle at bottom right, rgba(191, 219, 254, 0.2), transparent 34%),
    linear-gradient(180deg, rgba(250, 245, 255, 0.98), rgba(243, 232, 255, 0.96));
}

:root[data-theme="dark"] body[data-app-background="copper"],
:root[data-theme="dark"] [data-profile-background-swatch="copper"] {
  --profile-preset-background:
    radial-gradient(circle at top right, rgba(217, 119, 6, 0.2), transparent 28%),
    radial-gradient(circle at bottom left, rgba(120, 53, 15, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(28, 20, 14, 0.97), rgba(68, 44, 26, 0.94));
}

:root[data-theme="light"] body[data-app-background="copper"],
:root[data-theme="light"] [data-profile-background-swatch="copper"] {
  --profile-preset-background:
    radial-gradient(circle at top right, rgba(253, 230, 138, 0.24), transparent 28%),
    radial-gradient(circle at bottom left, rgba(251, 191, 36, 0.14), transparent 32%),
    linear-gradient(180deg, rgba(255, 251, 235, 0.98), rgba(254, 243, 199, 0.96));
}

:root[data-theme="dark"] body[data-app-background="mint"],
:root[data-theme="dark"] [data-profile-background-swatch="mint"] {
  --profile-preset-background:
    radial-gradient(circle at top left, rgba(16, 185, 129, 0.2), transparent 26%),
    radial-gradient(circle at bottom right, rgba(34, 197, 94, 0.14), transparent 32%),
    linear-gradient(180deg, rgba(12, 26, 24, 0.97), rgba(20, 53, 48, 0.94));
}

:root[data-theme="light"] body[data-app-background="mint"],
:root[data-theme="light"] [data-profile-background-swatch="mint"] {
  --profile-preset-background:
    radial-gradient(circle at top left, rgba(167, 243, 208, 0.28), transparent 28%),
    radial-gradient(circle at bottom right, rgba(134, 239, 172, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(236, 253, 245, 0.98), rgba(220, 252, 231, 0.96));
}

:root[data-theme="dark"] body[data-app-background="graphite"],
:root[data-theme="dark"] [data-profile-background-swatch="graphite"] {
  --profile-preset-background:
    radial-gradient(circle at top left, rgba(148, 163, 184, 0.12), transparent 28%),
    radial-gradient(circle at bottom right, rgba(71, 85, 105, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(10, 14, 24, 0.98), rgba(31, 41, 55, 0.95));
}

:root[data-theme="light"] body[data-app-background="graphite"],
:root[data-theme="light"] [data-profile-background-swatch="graphite"] {
  --profile-preset-background:
    radial-gradient(circle at top left, rgba(226, 232, 240, 0.32), transparent 28%),
    radial-gradient(circle at bottom right, rgba(203, 213, 225, 0.2), transparent 34%),
    linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(226, 232, 240, 0.96));
}

:root[data-theme="dark"] body[data-app-background="berry"],
:root[data-theme="dark"] [data-profile-background-swatch="berry"] {
  --profile-preset-background:
    radial-gradient(circle at top right, rgba(236, 72, 153, 0.2), transparent 28%),
    radial-gradient(circle at bottom left, rgba(190, 24, 93, 0.16), transparent 32%),
    linear-gradient(180deg, rgba(32, 14, 28, 0.97), rgba(78, 21, 52, 0.94));
}

:root[data-theme="light"] body[data-app-background="berry"],
:root[data-theme="light"] [data-profile-background-swatch="berry"] {
  --profile-preset-background:
    radial-gradient(circle at top right, rgba(251, 207, 232, 0.26), transparent 28%),
    radial-gradient(circle at bottom left, rgba(244, 114, 182, 0.16), transparent 32%),
    linear-gradient(180deg, rgba(253, 242, 248, 0.98), rgba(252, 231, 243, 0.96));
}

body > .min-h-screen:not(.flex),
body > .min-h-screen.flex > .flex-1 {
  background: var(--app-surface-background) !important;
}

:root[data-theme="dark"] body[data-app-background="dashboard"] > .min-h-screen:not(.flex)[class*="-surface"],
:root[data-theme="dark"] body[data-app-background="dashboard"] > .min-h-screen.flex > .flex-1[class*="-surface"] {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

:root[data-theme="light"] body[data-app-background="dashboard"] > .min-h-screen:not(.flex)[class*="-surface"],
:root[data-theme="light"] body[data-app-background="dashboard"] > .min-h-screen.flex > .flex-1[class*="-surface"] {
  background: var(--app-surface-background) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

:root[data-theme="light"] body:not([data-app-background="dashboard"]) > .min-h-screen:not(.flex),
:root[data-theme="light"] body:not([data-app-background="dashboard"]) > .min-h-screen.flex > .flex-1 {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, calc(var(--app-panel-light-top, 0.96) * 0.62)) 0%,
      rgba(248, 250, 252, calc(var(--app-panel-light-mid, 0.98) * 0.70)) 38%,
      rgba(241, 245, 249, calc(var(--app-panel-light-bottom, 0.98) * 0.76)) 100%),
    var(--app-surface-background) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

:root[data-theme="light"] body[data-app-background="dashboard"] > .min-h-screen:not(.flex),
:root[data-theme="light"] body[data-app-background="dashboard"] > .min-h-screen.flex > .flex-1 {
  background: var(--app-surface-background) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

:root[data-theme="light"] body[data-app-background="custom"] > .min-h-screen:not(.flex),
:root[data-theme="light"] body[data-app-background="custom"] > .min-h-screen.flex > .flex-1 {
  background: var(--app-surface-background) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

:root[data-theme="light"] [data-mobile-topbar] {
  background-color: #ffffff !important;
}

@media (min-width: 768px) {
  :root[data-theme="light"] [data-mobile-topbar] {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  :root[data-theme="light"] [data-mobile-topbar].bg-slate-950\/70 {
    background: transparent !important;
    background-color: transparent !important;
  }
}

:root[data-theme="light"] .text-slate-100,
:root[data-theme="light"] .text-slate-200,
:root[data-theme="light"] .text-slate-300,
:root[data-theme="light"] .text-slate-400,
:root[data-theme="light"] .text-slate-500 {
  color: color-mix(in srgb, var(--app-bc) 90%, #000000 0%) !important;
}

:root[data-theme="light"] .bg-slate-950,
:root[data-theme="light"] .bg-slate-900 {
  background-color: #ffffff !important;
}

:root[data-theme="light"] .bg-slate-900\/80,
:root[data-theme="light"] .bg-slate-900\/70,
:root[data-theme="light"] .bg-slate-900\/60,
:root[data-theme="light"] .bg-slate-900\/50,
:root[data-theme="light"] .bg-slate-900\/40,
:root[data-theme="light"] .bg-slate-900\/30 {
  background-color: #ffffff !important;
}

:root[data-theme="light"] .bg-slate-950\/75,
:root[data-theme="light"] .bg-slate-950\/70,
:root[data-theme="light"] .bg-slate-800\/70,
:root[data-theme="light"] .bg-slate-800\/60,
:root[data-theme="light"] .bg-slate-800\/50,
:root[data-theme="light"] .bg-slate-800\/40 {
  background-color: #ffffff !important;
}

:root[data-theme="light"] .from-slate-900,
:root[data-theme="light"] .from-slate-950,
:root[data-theme="light"] .via-slate-800,
:root[data-theme="light"] .via-slate-900,
:root[data-theme="light"] .to-slate-900,
:root[data-theme="light"] .to-slate-950 {
  --tw-gradient-from: #ffffff var(--tw-gradient-from-position) !important;
  --tw-gradient-via: #ffffff var(--tw-gradient-via-position) !important;
  --tw-gradient-to: #ffffff var(--tw-gradient-to-position) !important;
}

:root[data-theme="light"] .bg-slate-950\/78,
:root[data-theme="light"] .bg-slate-950\/75,
:root[data-theme="light"] .bg-slate-950\/70 {
  background-color: rgba(15, 23, 42, 0.42) !important;
}

@media (max-width: 767px) {
  :root[data-theme="light"] [data-mobile-topbar],
  :root[data-theme="light"] [data-mobile-topbar].bg-slate-950\/70 {
    background: rgba(255, 255, 255, 0.72) !important;
    background-color: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
    backdrop-filter: blur(14px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
  }

  :root[data-theme="light"] [data-mobile-topbar] [data-mobile-underhall-camera-open] {
    background-color: rgba(37, 99, 235, 0.14) !important;
    border-color: rgba(37, 99, 235, 0.38) !important;
    color: rgb(29, 78, 216) !important;
  }

  :root[data-theme="light"] [data-mobile-topbar] [data-mobile-underhall-camera-open]:hover {
    background-color: rgba(37, 99, 235, 0.2) !important;
  }
}

:root[data-theme="dark"] .bg-slate-950\/78,
:root[data-theme="dark"] .bg-slate-950\/75,
:root[data-theme="dark"] .bg-slate-950\/70,
:root[data-theme="dark"] .bg-slate-950\/60,
:root[data-theme="dark"] .bg-slate-950\/55 {
  background-color: rgba(2, 6, 23, 0.55) !important;
}

@media (min-width: 768px) {
  :root[data-theme="dark"] [data-mobile-topbar],
  :root[data-theme="dark"] [data-mobile-topbar].bg-slate-950\/70 {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
}

:root[data-theme="light"] .border-slate-800,
:root[data-theme="light"] .border-slate-700,
:root[data-theme="light"] .border-slate-800\/80,
:root[data-theme="light"] .border-slate-700\/80,
:root[data-theme="light"] .border-slate-800\/70,
:root[data-theme="light"] .border-slate-700\/70 {
  border-color: var(--app-border) !important;
}

:root[data-theme="light"] .border-slate-800\/60,
:root[data-theme="light"] .border-slate-700\/60,
:root[data-theme="light"] .border-slate-700\/50,
:root[data-theme="light"] .border-slate-700\/40 {
  border-color: color-mix(in srgb, var(--app-bc) 11%, transparent) !important;
}

:root[data-theme="light"] .divide-slate-800\/80 > :not([hidden]) ~ :not([hidden]),
:root[data-theme="light"] .divide-slate-800\/70 > :not([hidden]) ~ :not([hidden]),
:root[data-theme="light"] .divide-slate-800\/60 > :not([hidden]) ~ :not([hidden]),
:root[data-theme="light"] .divide-slate-800\/50 > :not([hidden]) ~ :not([hidden]),
:root[data-theme="light"] .divide-slate-700\/50 > :not([hidden]) ~ :not([hidden]),
:root[data-theme="light"] .divide-slate-700\/40 > :not([hidden]) ~ :not([hidden]) {
  border-color: color-mix(in srgb, var(--app-bc) 11%, transparent) !important;
}

:root[data-theme="light"] tbody tr:hover,
:root[data-theme="light"] [data-order-entry]:hover,
:root[data-theme="light"] [data-customer-row]:hover,
:root[data-theme="light"] [data-employee-row]:hover,
:root[data-theme="light"] [data-kund-item]:hover,
:root[data-theme="light"] [data-frakt-row]:hover,
:root[data-theme="light"] [data-rek-row]:hover {
  background-color: rgba(59, 130, 246, 0.12) !important;
}

:root[data-theme="light"] .hover\:bg-slate-800\/60:hover,
:root[data-theme="light"] .hover\:bg-slate-800\/50:hover,
:root[data-theme="light"] .hover\:bg-slate-800\/40:hover {
  background-color: color-mix(in srgb, var(--app-b3) 55%, #ffffff) !important;
}

:root[data-theme="light"] .bg-emerald-500,
:root[data-theme="light"] .bg-emerald-500\/90,
:root[data-theme="light"] .bg-sky-500,
:root[data-theme="light"] .bg-sky-500\/90,
:root[data-theme="light"] .bg-cyan-500,
:root[data-theme="light"] .bg-cyan-500\/90 {
  background-color: var(--app-p) !important;
  color: var(--app-pc) !important;
}

:root[data-theme="light"] .bg-emerald-500\/80,
:root[data-theme="light"] .bg-sky-500\/80,
:root[data-theme="light"] .bg-cyan-500\/80 {
  background-color: color-mix(in srgb, var(--app-p) 90%, #ffffff) !important;
  color: var(--app-pc) !important;
}

:root[data-theme="light"] .bg-emerald-500\/10,
:root[data-theme="light"] .bg-emerald-500\/15,
:root[data-theme="light"] .bg-emerald-500\/20,
:root[data-theme="light"] .bg-emerald-500\/25,
:root[data-theme="light"] .bg-emerald-500\/30,
:root[data-theme="light"] .bg-sky-500\/10,
:root[data-theme="light"] .bg-sky-500\/15,
:root[data-theme="light"] .bg-sky-500\/20,
:root[data-theme="light"] .bg-sky-500\/25,
:root[data-theme="light"] .bg-sky-500\/30,
:root[data-theme="light"] .bg-cyan-500\/10,
:root[data-theme="light"] .bg-cyan-500\/15,
:root[data-theme="light"] .bg-cyan-500\/20,
:root[data-theme="light"] .bg-cyan-500\/25,
:root[data-theme="light"] .bg-cyan-500\/30 {
  background-color: color-mix(in srgb, var(--app-p) 16%, #ffffff) !important;
  color: var(--app-p) !important;
}

:root[data-theme="light"] .text-emerald-100,
:root[data-theme="light"] .text-emerald-200,
:root[data-theme="light"] .text-emerald-300,
:root[data-theme="light"] .text-sky-100,
:root[data-theme="light"] .text-sky-200,
:root[data-theme="light"] .text-sky-300,
:root[data-theme="light"] .text-cyan-100,
:root[data-theme="light"] .text-cyan-200,
:root[data-theme="light"] .text-cyan-300 {
  color: var(--app-p) !important;
}

:root[data-theme="light"] .border-emerald-500\/60,
:root[data-theme="light"] .border-sky-500\/60,
:root[data-theme="light"] .border-cyan-500\/60,
:root[data-theme="light"] .border-emerald-400\/60,
:root[data-theme="light"] .border-sky-400\/60,
:root[data-theme="light"] .border-cyan-400\/60 {
  border-color: color-mix(in srgb, var(--app-p) 48%, transparent) !important;
}

:root[data-theme="light"] .bg-rose-500,
:root[data-theme="light"] .bg-rose-500\/90 {
  background-color: var(--app-er) !important;
  color: var(--app-erc) !important;
}

:root[data-theme="light"] .bg-rose-500\/10,
:root[data-theme="light"] .bg-rose-500\/15,
:root[data-theme="light"] .bg-rose-500\/20,
:root[data-theme="light"] .bg-rose-500\/25,
:root[data-theme="light"] .bg-rose-500\/30 {
  background-color: color-mix(in srgb, var(--app-er) 15%, #ffffff) !important;
  color: var(--app-er) !important;
}

:root[data-theme="light"] .text-rose-100,
:root[data-theme="light"] .text-rose-200,
:root[data-theme="light"] .text-rose-300 {
  color: var(--app-er) !important;
}

:root[data-theme="light"] .border-rose-500\/60,
:root[data-theme="light"] .border-rose-400\/60 {
  border-color: color-mix(in srgb, var(--app-er) 50%, transparent) !important;
}

:root[data-theme="light"] .bg-amber-500,
:root[data-theme="light"] .bg-amber-500\/80,
:root[data-theme="light"] .bg-amber-500\/90 {
  background-color: var(--app-wa) !important;
  color: var(--app-wac) !important;
}

:root[data-theme="light"] .bg-amber-500\/10,
:root[data-theme="light"] .bg-amber-500\/15,
:root[data-theme="light"] .bg-amber-500\/20,
:root[data-theme="light"] .bg-amber-500\/25,
:root[data-theme="light"] .bg-amber-500\/30 {
  background-color: color-mix(in srgb, var(--app-wa) 16%, #ffffff) !important;
  color: color-mix(in srgb, var(--app-wa) 88%, #111827) !important;
}

:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea {
  background-color: var(--app-b1) !important;
  border-color: var(--app-border) !important;
  color: var(--app-bc) !important;
}

:root[data-theme="light"] input:focus,
:root[data-theme="light"] select:focus,
:root[data-theme="light"] textarea:focus {
  outline: none !important;
  border-color: color-mix(in srgb, var(--app-p) 52%, #ffffff) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-p) 15%, transparent) !important;
}

/* Light sidebar styling */
:root[data-theme="light"] [data-sidebar] {
  background-color: rgba(15, 23, 42, 0.9) !important;
  border-right-color: rgba(51, 65, 85, 0.85) !important;
}

:root[data-theme="light"] [data-sidebar] [data-sidebar-brand-subtitle] {
  color: #94a3b8 !important;
}

:root[data-theme="light"] [data-sidebar] [data-sidebar-brand-title] {
  color: #fcd34d !important;
}

:root[data-theme="light"] [data-sidebar] [data-sidebar-item],
:root[data-theme="light"] [data-sidebar] [data-sidebar-child] {
  color: #e2e8f0 !important;
}

:root[data-theme="light"] [data-sidebar] [data-sidebar-badge] {
  background-color: #fcd34d !important;
  color: #0f172a !important;
}

:root[data-theme="light"] [data-sidebar] [data-sidebar-icon] .text-slate-400 {
  color: #cbd5e1 !important;
}

:root[data-theme="light"] [data-sidebar] [data-sidebar-icon] .text-emerald-300 {
  color: #fcd34d !important;
}

:root[data-theme="light"] [data-sidebar] [data-sidebar-item]:hover,
:root[data-theme="light"] [data-sidebar] [data-sidebar-child]:hover {
  background-color: rgba(51, 65, 85, 0.75) !important;
  border-color: rgba(71, 85, 105, 0.7) !important;
}

:root[data-theme="light"] [data-sidebar] [data-sidebar-item][aria-current="page"],
:root[data-theme="light"] [data-sidebar] details[open] > summary[data-sidebar-item] {
  background-color: rgba(30, 41, 59, 0.92) !important;
  border-color: rgba(252, 211, 77, 0.34) !important;
}

:root[data-theme="light"] table thead,
:root[data-theme="light"] table tfoot {
  background-color: rgb(0 0 0) !important;
}

table thead th,
table thead td,
table tfoot th,
table tfoot td {
  padding: 0.5rem 0.75rem !important;
}

:root[data-theme="light"] table thead,
:root[data-theme="light"] table thead th,
:root[data-theme="light"] table thead td,
:root[data-theme="light"] table thead button,
:root[data-theme="light"] table tfoot,
:root[data-theme="light"] table tfoot th,
:root[data-theme="light"] table tfoot td,
:root[data-theme="light"] table tfoot button {
  color: #e2e8f0 !important;
}

:root[data-theme="light"] table thead th,
:root[data-theme="light"] table thead td,
:root[data-theme="light"] table thead button {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
}

:root[data-theme="light"] table tfoot {
  border-top-color: rgba(252, 211, 77, 0.34) !important;
}

/* Light right-side drawers and page panels */
:root[data-theme="dark"] [data-kund-drawer-panel],
:root[data-theme="dark"] [data-order-drawer-panel],
:root[data-theme="dark"] [data-customer-drawer-panel],
:root[data-theme="dark"] [data-underhall-drawer-panel],
:root[data-theme="dark"] [data-underhall-forrad-drawer-panel],
:root[data-theme="dark"] [data-underhall-create-modal-panel],
:root[data-theme="dark"] [data-underhall-schema-modal-panel],
:root[data-theme="dark"] [data-schema-drawer-panel],
:root[data-theme="dark"] [data-underhall-schema-tree-drawer-panel],
:root[data-theme="dark"] [data-user-panel-panel],
:root[data-theme="dark"] [data-role-panel-panel],
:root[data-theme="dark"] [data-employee-panel-body],
:root[data-theme="dark"] [data-frakt-panel-body],
:root[data-theme="dark"] [data-driver-panel-body],
:root[data-theme="dark"] [data-wg-client-drawer-panel],
:root[data-theme="dark"] [data-dhcp-editor],
:root[data-theme="dark"] [data-router-editor],
:root[data-theme="dark"] [data-saglinjen-drawer-panel],
:root[data-theme="dark"] [data-prodplan-object-modal-dialog],
:root[data-theme="dark"] [data-doc-modal-panel],
:root[data-theme="dark"] [data-panel],
:root[data-theme="dark"] [data-implager-booking-panel],
:root[data-theme="dark"] [data-camera-settings-panel] {
  background:
    linear-gradient(180deg,
      rgb(var(--app-floating-panel-dark-rgb, 15 23 42) / var(--app-floating-panel-dark-top, 0.94)) 0%,
      rgb(var(--app-floating-panel-dark-rgb, 15 23 42) / var(--app-floating-panel-dark-bottom, 0.98)) 100%) !important;
}

:root[data-theme="light"] [data-kund-drawer-panel],
:root[data-theme="light"] [data-order-drawer-panel],
:root[data-theme="light"] [data-customer-drawer-panel],
:root[data-theme="light"] [data-underhall-drawer-panel],
:root[data-theme="light"] [data-underhall-forrad-drawer-panel],
:root[data-theme="light"] [data-underhall-create-modal-panel],
:root[data-theme="light"] [data-doc-modal-panel],
:root[data-theme="light"] [data-doc-image-preview-panel],
:root[data-theme="light"] [data-underhall-schema-modal-panel],
:root[data-theme="light"] [data-schema-drawer-panel],
:root[data-theme="light"] [data-underhall-schema-tree-drawer-panel],
:root[data-theme="light"] [data-user-panel-panel],
:root[data-theme="light"] [data-role-panel-panel],
:root[data-theme="light"] [data-employee-panel-body],
:root[data-theme="light"] [data-frakt-panel-body],
:root[data-theme="light"] [data-driver-panel-body],
:root[data-theme="light"] [data-wg-client-drawer-panel],
:root[data-theme="light"] [data-dhcp-editor],
:root[data-theme="light"] [data-router-editor],
:root[data-theme="light"] [data-saglinjen-drawer-panel],
:root[data-theme="light"] [data-prodplan-object-modal-dialog],
:root[data-theme="light"] [data-doc-modal-panel],
:root[data-theme="light"] [data-panel],
:root[data-theme="light"] [data-implager-booking-panel],
:root[data-theme="light"] [data-camera-settings-panel] {
  background:
    linear-gradient(180deg,
      rgb(var(--app-floating-panel-light-rgb, 248 250 252) / var(--app-floating-panel-light-top, 0.96)) 0%,
      rgb(var(--app-floating-panel-light-rgb, 248 250 252) / var(--app-floating-panel-light-bottom, 0.98)) 100%) !important;
  border-color: rgba(148, 163, 184, 0.38) !important;
  color: var(--app-bc) !important;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.4),
    0 4px 6px -4px rgba(0, 0, 0, 0.4),
    0 3px 10px rgba(255, 255, 255, 0.42) inset !important;
}

:root[data-theme="light"] body [data-dashboard-app] [data-dashboard-grid] > article,
:root[data-theme="light"] body [data-dashboard-app] [data-dashboard-panel-scroll] > section,
:root[data-theme="light"] body [data-dashboard-app] [data-dashboard-settings-dialog] > div:last-child,
:root[data-theme="light"] body [data-anvandare-page] [data-anvandare-panel],
:root[data-theme="light"] body [data-kund-page] [data-kund-panel],
:root[data-theme="light"] body:not(.chat-popup) [data-calendar-page]:not([data-calendar-popup="1"]) [data-calendar-view-toggle],
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.kameror-surface [data-kameror-panel],
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.kameror-surface [data-camera-settings-panel],
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.kameror-surface [data-camera-grid-surface],
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.fjarrstyrning-surface [data-fjarr-panel],
:root[data-theme="light"] body [data-frakt-page] [data-frakt-panel-card],
:root[data-theme="light"] body [data-frakt-page] [data-frakt-flat],
:root[data-theme="light"] body [data-frakt-page] [data-frakt-status-card],
:root[data-theme="light"] body [data-driver-page] [data-driver-panel-card],
:root[data-theme="light"] body [data-driver-page] [data-driver-panel-surface],
:root[data-theme="light"] body [data-driver-page] [data-driver-delivered-panel],
:root[data-theme="light"] body [data-nyheter-page] [data-nyheter-panel],
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.span-mine-surface [data-span-mine-panel],
:root[data-theme="light"] body:not(.chat-popup) [data-calendar-page]:not([data-calendar-popup="1"]) [data-calendar-main],
:root[data-theme="light"] body:not(.chat-popup) [data-calendar-page]:not([data-calendar-popup="1"]) [data-calendar-sidepanel] {
  background:
    linear-gradient(180deg,
      rgb(var(--app-panel-light-rgb, 248 250 252) / var(--app-panel-light-top, 0.96)) 0%,
      rgb(var(--app-panel-light-rgb, 248 250 252) / var(--app-panel-light-bottom, 0.98)) 100%) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.12),
    0 4px 6px -4px rgba(0, 0, 0, 0.1),
    0 3px 10px rgba(255, 255, 255, 0.42) inset !important;
}

:root[data-theme="light"] body [data-dashboard-app] [data-dashboard-panel],
:root[data-theme="light"] body [data-anvandare-page] [data-user-panel-panel],
:root[data-theme="light"] body [data-anvandare-page] [data-role-panel-panel] {
  background:
    linear-gradient(180deg,
      rgb(var(--app-floating-panel-light-rgb, 248 250 252) / var(--app-floating-panel-light-top, 0.96)) 0%,
      rgb(var(--app-floating-panel-light-rgb, 248 250 252) / var(--app-floating-panel-light-bottom, 0.98)) 100%) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  box-shadow:
    0 20px 40px rgba(15, 23, 42, 0.16),
    0 3px 10px rgba(255, 255, 255, 0.35) inset !important;
}

:root[data-theme="light"] [data-anstallda-page],
:root[data-theme="light"] [data-nyheter-page],
:root[data-theme="light"] body:not(.chat-popup) [data-calendar-page]:not([data-calendar-popup="1"]) {
  background: transparent !important;
}

:root[data-theme="light"] body:not(.chat-popup) > .min-h-screen.flex > .flex-1.chat-surface {
  background: var(--app-surface-background) !important;
}

:root[data-theme="light"] body.chat-popup > .min-h-screen.flex > .flex-1.chat-surface {
  background: var(--app-surface-background) !important;
}

:root[data-theme="light"] body [data-anvandare-page] .text-slate-400,
:root[data-theme="light"] body [data-kund-page] .text-slate-400,
:root[data-theme="light"] body [data-anstallda-page] .text-slate-400,
:root[data-theme="light"] body [data-nyheter-page] .text-slate-400,
:root[data-theme="light"] body:not(.chat-popup) [data-chat-page] .text-slate-400,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.profil-surface .text-slate-400,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.prodplan-surface .text-slate-400,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.kameror-surface .text-slate-400,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.fjarrstyrning-surface .text-slate-400,
:root[data-theme="light"] body [data-frakt-page] .text-slate-400,
:root[data-theme="light"] body [data-grind-page] .text-slate-400,
:root[data-theme="light"] body:not(.chat-popup) [data-calendar-page]:not([data-calendar-popup="1"]) .text-slate-400 {
  color: rgb(71 85 105) !important;
}

:root[data-theme="light"] body [data-anvandare-page] .text-slate-500,
:root[data-theme="light"] body [data-kund-page] .text-slate-500,
:root[data-theme="light"] body [data-anstallda-page] .text-slate-500,
:root[data-theme="light"] body [data-nyheter-page] .text-slate-500,
:root[data-theme="light"] body:not(.chat-popup) [data-chat-page] .text-slate-500,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.profil-surface .text-slate-500,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.prodplan-surface .text-slate-500,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.kameror-surface .text-slate-500,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.fjarrstyrning-surface .text-slate-500,
:root[data-theme="light"] body [data-frakt-page] .text-slate-500,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.rekvisition-surface .text-slate-500,
:root[data-theme="light"] body [data-grind-page] .text-slate-500,
:root[data-theme="light"] body:not(.chat-popup) [data-calendar-page]:not([data-calendar-popup="1"]) .text-slate-500 {
  color: rgb(100 116 139) !important;
}

:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.rekvisition-surface .text-slate-400 {
  color: rgb(71 85 105) !important;
}

:root[data-theme="light"] body:not(.chat-popup) [data-chat-page] .text-slate-100 {
  color: rgb(15 23 42) !important;
}

:root[data-theme="light"] body:not(.chat-popup) [data-calendar-page]:not([data-calendar-popup="1"]) .text-slate-200 {
  color: rgb(15 23 42) !important;
}

:root[data-theme="light"] body:not(.chat-popup) [data-calendar-page]:not([data-calendar-popup="1"]) .border-slate-800,
:root[data-theme="light"] body:not(.chat-popup) [data-calendar-page]:not([data-calendar-popup="1"]) .border-slate-800\/70,
:root[data-theme="light"] body:not(.chat-popup) [data-calendar-page]:not([data-calendar-popup="1"]) .border-slate-700\/70,
:root[data-theme="light"] body:not(.chat-popup) [data-chat-page] .border-slate-800,
:root[data-theme="light"] body:not(.chat-popup) [data-chat-page] .border-slate-800\/80,
:root[data-theme="light"] body:not(.chat-popup) [data-chat-page] .border-slate-700\/70,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.prodplan-surface .border-slate-800,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.prodplan-surface .border-slate-800\/80,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.prodplan-surface .border-slate-700\/70,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.kameror-surface .border-slate-800,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.kameror-surface .border-slate-800\/70,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.kameror-surface .border-slate-700\/70,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.fjarrstyrning-surface .border-slate-800,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.fjarrstyrning-surface .border-slate-800\/70,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.fjarrstyrning-surface .border-slate-700\/70,
:root[data-theme="light"] body [data-frakt-page] .border-slate-800,
:root[data-theme="light"] body [data-frakt-page] .border-slate-800\/70,
:root[data-theme="light"] body [data-frakt-page] .border-slate-700\/70,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.rekvisition-surface .border-slate-800,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.rekvisition-surface .border-slate-700\/70,
:root[data-theme="light"] body [data-grind-page] .border-slate-800,
:root[data-theme="light"] body [data-grind-page] .border-slate-700\/70 {
  border-color: rgba(148, 163, 184, 0.28) !important;
}

:root[data-theme="light"] body [data-anstallda-page] [data-anstallda-panel],
:root[data-theme="light"] body [data-anstallda-page] [data-anstallda-inner] {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, var(--app-panel-light-top, 0.96)) 0%,
      rgba(248, 250, 252, var(--app-panel-light-bottom, 0.98)) 100%) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.12),
    0 4px 6px -4px rgba(0, 0, 0, 0.1),
    0 3px 10px rgba(255, 255, 255, 0.42) inset !important;
}

:root[data-theme="light"] body [data-frakt-page] [data-frakt-panel-card],
:root[data-theme="light"] body [data-frakt-page] [data-frakt-flat],
:root[data-theme="light"] body [data-frakt-page] [data-frakt-status-card],
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.prodplan-surface aside,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.prodplan-surface [data-prodplan-object-modal-dialog],
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.prodplan-surface [data-prodplan-node-form] > .rounded-xl,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.prodplan-surface [data-prodplan-edge-form] > .rounded-xl,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.prodplan-surface [data-prodplan-object-edge-form] > .rounded-xl,
:root[data-theme="light"] body [data-grind-page] > section {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, var(--app-panel-light-top, 0.96)) 0%,
      rgba(240, 243, 247, var(--app-panel-light-bottom, 0.98)) 100%) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.12),
    0 4px 6px -4px rgba(0, 0, 0, 0.1),
    0 3px 10px rgba(255, 255, 255, 0.42) inset !important;
}

:root[data-theme="light"] body:not(.chat-popup) [data-chat-page] [data-chat-members-panel],
:root[data-theme="light"] body:not(.chat-popup) [data-chat-page] [data-chat-panel] {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, var(--app-panel-light-top, 0.96)) 0%,
      rgba(240, 243, 247, var(--app-panel-light-bottom, 0.98)) 100%) !important;
  border-color: rgba(148, 163, 184, 0.26) !important;
  box-shadow:
    0 10px 15px -3px rgba(15, 23, 42, 0.12),
    0 4px 6px -4px rgba(15, 23, 42, 0.1),
    0 3px 10px rgba(255, 255, 255, 0.42) inset !important;
}

:root[data-theme="light"] [data-lager-page] {
  color: rgb(15 23 42) !important;
}

:root[data-theme="light"] [data-lager-page] > div > p:first-child {
  color: rgb(100 116 139) !important;
}

:root[data-theme="light"] [data-lager-page] > div > h2 {
  color: rgb(15 23 42) !important;
}

:root[data-theme="light"] [data-lager-page] > div > p:last-child {
  color: rgb(71 85 105) !important;
}

:root[data-theme="light"] [data-lager-summary-card] {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, var(--app-panel-light-top, 0.96)) 0%,
      rgba(240, 243, 247, var(--app-panel-light-bottom, 0.98)) 100%) !important;
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 40px rgba(148, 163, 184, 0.14) !important;
}

:root[data-theme="light"] [data-lager-view-toggle] {
  background:
    linear-gradient(180deg,
      rgb(var(--app-floating-panel-light-rgb, 248 250 252) / var(--app-floating-panel-light-top, 0.92)) 0%,
      rgb(var(--app-floating-panel-light-rgb, 248 250 252) / var(--app-floating-panel-light-bottom, 0.96)) 100%) !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  color: rgb(51 65 85) !important;
}

:root[data-theme="light"] [data-lager-page] .border-slate-700\/70.bg-slate-900\/50 {
  border-color: rgba(203, 213, 225, 0.9) !important;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, var(--app-panel-light-top, 0.96)) 0%,
      rgba(240, 243, 247, var(--app-panel-light-bottom, 0.98)) 100%) !important;
  box-shadow: 0 14px 34px rgba(148, 163, 184, 0.12) !important;
}

:root[data-theme="light"] [data-lager-page] .text-slate-500 {
  color: rgb(100 116 139) !important;
}

:root[data-theme="light"] [data-lager-group-card] {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, var(--app-panel-light-top, 0.96)) 0%,
      rgba(240, 243, 247, var(--app-panel-light-bottom, 0.98)) 100%) !important;
  border-color: rgba(203, 213, 225, 0.88) !important;
  box-shadow: 0 18px 42px rgba(148, 163, 184, 0.14) !important;
}

:root[data-theme="light"] [data-lager-group-card][data-layout="list"] {
  box-shadow: 0 10px 26px rgba(148, 163, 184, 0.1) !important;
}

:root[data-theme="light"] [data-lager-group-card] .text-slate-100,
:root[data-theme="light"] [data-lager-group-card] .text-slate-200 {
  color: rgb(15 23 42) !important;
}

:root[data-theme="light"] [data-lager-group-card] .text-slate-300,
:root[data-theme="light"] [data-lager-group-card] .text-slate-400 {
  color: rgb(71 85 105) !important;
}

:root[data-theme="light"] [data-lager-group-card] .text-slate-500 {
  color: rgb(148 163 184) !important;
}

:root[data-theme="light"] [data-lager-group-card] .border-slate-800\/70,
:root[data-theme="light"] [data-lager-group-card] .border-slate-700\/70 {
  border-color: rgba(226, 232, 240, 0.95) !important;
}

:root[data-theme="light"] [data-lager-group-card] .bg-slate-900\/60,
:root[data-theme="light"] [data-lager-group-card] .bg-slate-900\/35,
:root[data-theme="light"] [data-lager-group-card] .bg-slate-950\/35,
:root[data-theme="light"] [data-lager-group-card] .bg-slate-900\/25 {
  background: rgba(248, 250, 252, 0.86) !important;
}

:root[data-theme="light"] [data-lager-group-card] .bg-slate-950\/70 {
  background: rgba(226, 232, 240, 0.8) !important;
}

:root[data-theme="light"] [data-lager-product-row] {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, var(--app-floating-panel-light-top, 0.92)) 0%,
      rgba(226, 232, 240, var(--app-floating-panel-light-bottom, 0.96)) 100%) !important;
  border-color: rgba(226, 232, 240, 0.95) !important;
}

:root[data-theme="light"] [data-lager-group-card] button:not([data-lager-group-popout-open]):not([data-lager-group-edit]):not([data-lager-group-expand]),
:root[data-theme="light"] [data-lager-product-row] button {
  color: rgb(51 65 85) !important;
}

:root[data-theme="light"] [data-lager-group-modal],
:root[data-theme="light"] [data-lager-product-modal],
:root[data-theme="light"] [data-lager-summary-modal] {
  background: rgba(226, 232, 240, 0.5) !important;
}

:root[data-theme="light"] [data-lager-group-modal] > .relative,
:root[data-theme="light"] [data-lager-product-modal] > .relative,
:root[data-theme="light"] [data-lager-summary-modal] > .relative {
  border-color: rgba(203, 213, 225, 0.92) !important;
  background:
    linear-gradient(180deg,
      rgb(var(--app-floating-panel-light-rgb, 248 250 252) / var(--app-floating-panel-light-top, 0.92)) 0%,
      rgb(var(--app-floating-panel-light-rgb, 248 250 252) / var(--app-floating-panel-light-bottom, 0.96)) 100%) !important;
  box-shadow: 0 28px 70px rgba(148, 163, 184, 0.22) !important;
}

:root[data-theme="light"] [data-lager-group-modal] .border-b,
:root[data-theme="light"] [data-lager-product-modal] .border-b,
:root[data-theme="light"] [data-lager-summary-modal] .border-b {
  border-color: rgba(226, 232, 240, 0.95) !important;
}

:root[data-theme="light"] [data-lager-group-modal] .bg-slate-900\/95,
:root[data-theme="light"] [data-lager-product-modal] .bg-slate-900\/95,
:root[data-theme="light"] [data-lager-summary-modal] .bg-slate-900\/95,
:root[data-theme="light"] [data-lager-group-modal] .bg-slate-800\/90,
:root[data-theme="light"] [data-lager-product-modal] .bg-slate-800\/90,
:root[data-theme="light"] [data-lager-summary-modal] .bg-slate-800\/90,
:root[data-theme="light"] [data-lager-group-modal] .bg-slate-900\/60,
:root[data-theme="light"] [data-lager-product-modal] .bg-slate-900\/60,
:root[data-theme="light"] [data-lager-summary-modal] .bg-slate-900\/60,
:root[data-theme="light"] [data-lager-group-modal] .bg-slate-900\/35,
:root[data-theme="light"] [data-lager-product-modal] .bg-slate-900\/35,
:root[data-theme="light"] [data-lager-summary-modal] .bg-slate-900\/35,
:root[data-theme="light"] [data-lager-group-modal] .bg-slate-900\/30,
:root[data-theme="light"] [data-lager-product-modal] .bg-slate-900\/30,
:root[data-theme="light"] [data-lager-summary-modal] .bg-slate-900\/30,
:root[data-theme="light"] [data-lager-group-modal] .bg-slate-900\/50,
:root[data-theme="light"] [data-lager-product-modal] .bg-slate-900\/50,
:root[data-theme="light"] [data-lager-summary-modal] .bg-slate-900\/50 {
  background: rgba(255, 255, 255, 0.82) !important;
}

:root[data-theme="light"] [data-lager-group-modal] .text-slate-100,
:root[data-theme="light"] [data-lager-product-modal] .text-slate-100,
:root[data-theme="light"] [data-lager-summary-modal] .text-slate-100,
:root[data-theme="light"] [data-lager-group-modal] .text-slate-200,
:root[data-theme="light"] [data-lager-product-modal] .text-slate-200,
:root[data-theme="light"] [data-lager-summary-modal] .text-slate-200 {
  color: rgb(15 23 42) !important;
}

:root[data-theme="light"] [data-lager-group-modal] .text-slate-300,
:root[data-theme="light"] [data-lager-product-modal] .text-slate-300,
:root[data-theme="light"] [data-lager-summary-modal] .text-slate-300,
:root[data-theme="light"] [data-lager-group-modal] .text-slate-400,
:root[data-theme="light"] [data-lager-product-modal] .text-slate-400,
:root[data-theme="light"] [data-lager-summary-modal] .text-slate-400 {
  color: rgb(71 85 105) !important;
}

:root[data-theme="light"] [data-lager-group-modal] .text-slate-500,
:root[data-theme="light"] [data-lager-product-modal] .text-slate-500,
:root[data-theme="light"] [data-lager-summary-modal] .text-slate-500 {
  color: rgb(100 116 139) !important;
}

:root[data-theme="light"] [data-lager-group-modal] .border-slate-700\/70,
:root[data-theme="light"] [data-lager-product-modal] .border-slate-700\/70,
:root[data-theme="light"] [data-lager-summary-modal] .border-slate-700\/70,
:root[data-theme="light"] [data-lager-group-modal] .border-slate-800\/70,
:root[data-theme="light"] [data-lager-product-modal] .border-slate-800\/70,
:root[data-theme="light"] [data-lager-summary-modal] .border-slate-800\/70,
:root[data-theme="light"] [data-lager-group-modal] .border-slate-600\/70,
:root[data-theme="light"] [data-lager-product-modal] .border-slate-600\/70,
:root[data-theme="light"] [data-lager-summary-modal] .border-slate-600\/70 {
  border-color: rgba(226, 232, 240, 0.95) !important;
}

:root[data-theme="light"] [data-lager-group-modal] input,
:root[data-theme="light"] [data-lager-group-modal] textarea,
:root[data-theme="light"] [data-lager-product-modal] input,
:root[data-theme="light"] [data-lager-product-modal] textarea {
  background: rgba(255, 255, 255, 0.94) !important;
  color: rgb(15 23 42) !important;
  border-color: rgba(203, 213, 225, 0.95) !important;
}

:root[data-theme="light"] [data-lager-group-history] article,
:root[data-theme="light"] [data-lager-summary-modal-list] article {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(226, 232, 240, 0.95) !important;
}

:root[data-theme="light"] body [data-nyheter-page] [data-nyheter-inner] {
  background:
    linear-gradient(180deg,
      rgb(var(--app-floating-panel-light-rgb, 248 250 252) / var(--app-floating-panel-light-top, 0.96)) 0%,
      rgb(var(--app-floating-panel-light-rgb, 248 250 252) / var(--app-floating-panel-light-bottom, 0.98)) 100%) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.14),
    0 4px 6px -4px rgba(0, 0, 0, 0.12),
    0 3px 10px rgba(255, 255, 255, 0.42) inset !important;
}

:root[data-theme="light"] body:not(.chat-popup) [data-calendar-modal] > div {
  background:
    linear-gradient(180deg,
      rgb(var(--app-floating-panel-light-rgb, 248 250 252) / var(--app-floating-panel-light-top, 0.96)) 0%,
      rgb(var(--app-floating-panel-light-rgb, 248 250 252) / var(--app-floating-panel-light-bottom, 0.98)) 100%) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  box-shadow:
    0 20px 40px rgba(15, 23, 42, 0.16),
    0 3px 10px rgba(255, 255, 255, 0.35) inset !important;
}

:root[data-theme="light"] body [data-anvandare-page] [data-anvandare-inner],
:root[data-theme="light"] body [data-kund-page] [data-kund-inner],
:root[data-theme="light"] body [data-frakt-page] [data-frakt-inner],
:root[data-theme="light"] body [data-driver-page] [data-driver-inner] {
  background:
    linear-gradient(180deg,
      rgb(var(--app-floating-panel-light-rgb, 248 250 252) / var(--app-floating-panel-light-top, 0.96)) 0%,
      rgb(var(--app-floating-panel-light-rgb, 248 250 252) / var(--app-floating-panel-light-bottom, 0.98)) 100%) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.14),
    0 4px 6px -4px rgba(0, 0, 0, 0.12),
    0 3px 10px rgba(255, 255, 255, 0.42) inset !important;
}

:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.profil-surface main,
:root[data-theme="light"] [data-profile-avatar-modal] > .relative.z-10 > div,
:root[data-theme="light"] body [data-frakt-panel-body],
:root[data-theme="light"] body:not(.chat-popup) [data-chat-page] [data-chat-main],
:root[data-theme="light"] body:not(.chat-popup) [data-chat-page] [data-chat-members-modal] > div,
:root[data-theme="light"] body:not(.chat-popup) [data-chat-page] [data-chat-members-modal] > .w-full,
:root[data-theme="light"] body [data-grind-log-modal] > div,
:root[data-theme="light"] body [data-grind-help-modal] > div {
  background:
    linear-gradient(180deg,
      rgb(var(--app-floating-panel-light-rgb, 248 250 252) / var(--app-floating-panel-light-top, 0.96)) 0%,
      rgb(var(--app-floating-panel-light-rgb, 248 250 252) / var(--app-floating-panel-light-bottom, 0.98)) 100%) !important;
  box-shadow:
    0 20px 40px rgba(15, 23, 42, 0.16),
    0 3px 10px rgba(255, 255, 255, 0.35) inset !important;
}

:root[data-theme="light"] [data-profile-avatar-modal] > .relative.z-10 > div,
:root[data-theme="light"] body [data-frakt-panel-body],
:root[data-theme="light"] body:not(.chat-popup) [data-chat-page] [data-chat-members-modal] > div,
:root[data-theme="light"] body:not(.chat-popup) [data-chat-page] [data-chat-members-modal] > .w-full,
:root[data-theme="light"] body:not(.chat-popup) [data-chat-page] [data-chat-main],
:root[data-theme="light"] body [data-grind-log-modal] > div,
:root[data-theme="light"] body [data-grind-help-modal] > div {
  border-color: rgba(148, 163, 184, 0.28) !important;
}

:root[data-theme="light"] body [data-frakt-panel-body] {
  border-left-color: rgba(148, 163, 184, 0.28) !important;
}

:root[data-theme="light"] body [data-anvandare-page] input,
:root[data-theme="light"] body [data-anvandare-page] select,
:root[data-theme="light"] body [data-anvandare-page] textarea,
:root[data-theme="light"] body [data-kund-page] input,
:root[data-theme="light"] body [data-kund-page] select,
:root[data-theme="light"] body [data-kund-page] textarea,
:root[data-theme="light"] body [data-anstallda-page] input,
:root[data-theme="light"] body [data-anstallda-page] select,
:root[data-theme="light"] body [data-anstallda-page] textarea,
:root[data-theme="light"] body [data-nyheter-page] input,
:root[data-theme="light"] body [data-nyheter-page] textarea,
:root[data-theme="light"] body:not(.chat-popup) [data-chat-page] textarea,
:root[data-theme="light"] body:not(.chat-popup) [data-chat-page] input,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.profil-surface input,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.profil-surface textarea,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.profil-surface select,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.prodplan-surface input,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.prodplan-surface select,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.prodplan-surface textarea,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.kameror-surface input,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.kameror-surface select,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.kameror-surface textarea,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.fjarrstyrning-surface input,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.fjarrstyrning-surface select,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.fjarrstyrning-surface textarea,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.rekvisition-surface input,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.rekvisition-surface select,
:root[data-theme="light"] body > .min-h-screen.flex > .flex-1.rekvisition-surface textarea,
:root[data-theme="light"] body:not(.chat-popup) [data-calendar-page]:not([data-calendar-popup="1"]) input,
:root[data-theme="light"] body:not(.chat-popup) [data-calendar-page]:not([data-calendar-popup="1"]) textarea,
:root[data-theme="light"] body:not(.chat-popup) [data-calendar-page]:not([data-calendar-popup="1"]) select {
  background-color: rgba(255, 255, 255, 0.96) !important;
  color: rgb(15 23 42) !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
}

:root[data-theme="light"] body [data-nyheter-page] input::placeholder,
:root[data-theme="light"] body [data-nyheter-page] textarea::placeholder {
  color: rgb(100 116 139) !important;
}

:root[data-theme="light"] [data-user-menu] {
  background:
    linear-gradient(
      180deg,
      rgb(var(--app-floating-panel-light-rgb, 248 250 252) / var(--app-floating-panel-light-top, 0.94)) 0%,
      rgb(var(--app-floating-panel-light-rgb, 248 250 252) / var(--app-floating-panel-light-bottom, 0.92)) 100%
    ) !important;
  border-color: rgba(148, 163, 184, 0.32) !important;
  box-shadow:
    0 16px 28px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
  color: rgb(15 23 42) !important;
}

:root[data-theme="light"] [data-user-profile] {
  background:
    linear-gradient(
      180deg,
      rgb(var(--app-floating-panel-light-rgb, 248 250 252) / var(--app-floating-panel-light-top, 0.94)) 0%,
      rgb(var(--app-floating-panel-light-rgb, 248 250 252) / var(--app-floating-panel-light-bottom, 0.92)) 100%
    ) !important;
  border-color: rgba(148, 163, 184, 0.32) !important;
  color: rgb(15 23 42) !important;
  box-shadow:
    0 10px 22px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
}

:root[data-theme="light"] [data-user-profile]:hover {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(241, 245, 249, 0.95) 100%
    ) !important;
}

:root[data-theme="light"] [data-user-profile] .bg-slate-800\/80,
:root[data-theme="light"] [data-user-profile] .border-slate-600 {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
}

:root[data-theme="light"] [data-user-profile] .text-slate-200,
:root[data-theme="light"] [data-user-profile] .text-slate-400,
:root[data-theme="light"] [data-user-profile] .text-slate-500 {
  color: rgb(15 23 42) !important;
}

:root[data-theme="light"] [data-user-profile] .text-emerald-200 {
  color: rgb(5 150 105) !important;
}

:root[data-theme="light"] [data-user-menu] [data-user-menu-item] {
  color: rgb(15 23 42) !important;
}

:root[data-theme="light"] [data-user-menu] [data-user-menu-item]:hover {
  background: rgba(148, 163, 184, 0.12) !important;
}

:root[data-theme="light"] [data-user-menu] [data-user-menu-logout] {
  color: rgb(190 24 93) !important;
}

:root[data-theme="light"] [data-user-menu] [data-user-menu-logout]:hover {
  background: rgba(244, 63, 94, 0.08) !important;
}

:root[data-theme="light"] [data-kund-drawer-panel] input,
:root[data-theme="light"] [data-kund-drawer-panel] select,
:root[data-theme="light"] [data-kund-drawer-panel] textarea,
:root[data-theme="light"] [data-order-drawer-panel] input,
:root[data-theme="light"] [data-order-drawer-panel] select,
:root[data-theme="light"] [data-order-drawer-panel] textarea,
:root[data-theme="light"] [data-customer-drawer-panel] input,
:root[data-theme="light"] [data-customer-drawer-panel] select,
:root[data-theme="light"] [data-customer-drawer-panel] textarea,
:root[data-theme="light"] [data-underhall-drawer-panel] input,
:root[data-theme="light"] [data-underhall-drawer-panel] select,
:root[data-theme="light"] [data-underhall-drawer-panel] textarea,
:root[data-theme="light"] [data-underhall-forrad-drawer-panel] input,
:root[data-theme="light"] [data-underhall-forrad-drawer-panel] select,
:root[data-theme="light"] [data-underhall-forrad-drawer-panel] textarea,
:root[data-theme="light"] [data-underhall-create-modal-panel] input,
:root[data-theme="light"] [data-underhall-create-modal-panel] select,
:root[data-theme="light"] [data-underhall-create-modal-panel] textarea,
:root[data-theme="light"] [data-doc-modal-panel] input,
:root[data-theme="light"] [data-doc-modal-panel] select,
:root[data-theme="light"] [data-doc-modal-panel] textarea,
:root[data-theme="light"] [data-doc-image-preview-panel] input,
:root[data-theme="light"] [data-doc-image-preview-panel] select,
:root[data-theme="light"] [data-doc-image-preview-panel] textarea,
:root[data-theme="light"] [data-underhall-schema-modal-panel] input,
:root[data-theme="light"] [data-underhall-schema-modal-panel] select,
:root[data-theme="light"] [data-underhall-schema-modal-panel] textarea,
:root[data-theme="light"] [data-schema-drawer-panel] input,
:root[data-theme="light"] [data-schema-drawer-panel] select,
:root[data-theme="light"] [data-schema-drawer-panel] textarea,
:root[data-theme="light"] [data-underhall-schema-tree-drawer-panel] input,
:root[data-theme="light"] [data-underhall-schema-tree-drawer-panel] select,
:root[data-theme="light"] [data-underhall-schema-tree-drawer-panel] textarea,
:root[data-theme="light"] [data-user-panel-panel] input,
:root[data-theme="light"] [data-user-panel-panel] select,
:root[data-theme="light"] [data-user-panel-panel] textarea,
:root[data-theme="light"] [data-role-panel-panel] input,
:root[data-theme="light"] [data-role-panel-panel] select,
:root[data-theme="light"] [data-role-panel-panel] textarea,
:root[data-theme="light"] [data-employee-panel-body] input,
:root[data-theme="light"] [data-employee-panel-body] select,
:root[data-theme="light"] [data-employee-panel-body] textarea,
:root[data-theme="light"] [data-frakt-panel-body] input,
:root[data-theme="light"] [data-frakt-panel-body] select,
:root[data-theme="light"] [data-frakt-panel-body] textarea,
:root[data-theme="light"] [data-driver-panel-body] input,
:root[data-theme="light"] [data-driver-panel-body] select,
:root[data-theme="light"] [data-driver-panel-body] textarea,
:root[data-theme="light"] [data-wg-client-drawer-panel] input,
:root[data-theme="light"] [data-wg-client-drawer-panel] select,
:root[data-theme="light"] [data-wg-client-drawer-panel] textarea,
:root[data-theme="light"] [data-dhcp-editor] input,
:root[data-theme="light"] [data-dhcp-editor] select,
:root[data-theme="light"] [data-dhcp-editor] textarea,
:root[data-theme="light"] [data-router-editor] input,
:root[data-theme="light"] [data-router-editor] select,
:root[data-theme="light"] [data-router-editor] textarea,
:root[data-theme="light"] [data-saglinjen-drawer-panel] input,
:root[data-theme="light"] [data-saglinjen-drawer-panel] select,
:root[data-theme="light"] [data-saglinjen-drawer-panel] textarea,
:root[data-theme="light"] [data-prodplan-object-modal-dialog] input,
:root[data-theme="light"] [data-prodplan-object-modal-dialog] select,
:root[data-theme="light"] [data-prodplan-object-modal-dialog] textarea {
  background-color: color-mix(in srgb, var(--app-b1) 96%, #ffffff) !important;
  border-color: color-mix(in srgb, var(--app-bc) 14%, transparent) !important;
  color: var(--app-bc) !important;
}

:root[data-theme="light"] [data-kund-drawer-panel] .text-slate-100,
:root[data-theme="light"] [data-kund-drawer-panel] .text-slate-200,
:root[data-theme="light"] [data-kund-drawer-panel] .text-slate-300,
:root[data-theme="light"] [data-order-drawer-panel] .text-slate-100,
:root[data-theme="light"] [data-order-drawer-panel] .text-slate-200,
:root[data-theme="light"] [data-order-drawer-panel] .text-slate-300,
:root[data-theme="light"] [data-customer-drawer-panel] .text-slate-100,
:root[data-theme="light"] [data-customer-drawer-panel] .text-slate-200,
:root[data-theme="light"] [data-customer-drawer-panel] .text-slate-300,
:root[data-theme="light"] [data-underhall-drawer-panel] .text-slate-100,
:root[data-theme="light"] [data-underhall-drawer-panel] .text-slate-200,
:root[data-theme="light"] [data-underhall-drawer-panel] .text-slate-300,
:root[data-theme="light"] [data-underhall-forrad-drawer-panel] .text-slate-100,
:root[data-theme="light"] [data-underhall-forrad-drawer-panel] .text-slate-200,
:root[data-theme="light"] [data-underhall-forrad-drawer-panel] .text-slate-300,
:root[data-theme="light"] [data-underhall-create-modal-panel] .text-slate-100,
:root[data-theme="light"] [data-underhall-create-modal-panel] .text-slate-200,
:root[data-theme="light"] [data-underhall-create-modal-panel] .text-slate-300,
:root[data-theme="light"] [data-doc-modal-panel] .text-slate-100,
:root[data-theme="light"] [data-doc-modal-panel] .text-slate-200,
:root[data-theme="light"] [data-doc-modal-panel] .text-slate-300,
:root[data-theme="light"] [data-doc-image-preview-panel] .text-slate-100,
:root[data-theme="light"] [data-doc-image-preview-panel] .text-slate-200,
:root[data-theme="light"] [data-doc-image-preview-panel] .text-slate-300,
:root[data-theme="light"] [data-underhall-schema-modal-panel] .text-slate-100,
:root[data-theme="light"] [data-underhall-schema-modal-panel] .text-slate-200,
:root[data-theme="light"] [data-underhall-schema-modal-panel] .text-slate-300,
:root[data-theme="light"] [data-schema-drawer-panel] .text-slate-100,
:root[data-theme="light"] [data-schema-drawer-panel] .text-slate-200,
:root[data-theme="light"] [data-schema-drawer-panel] .text-slate-300,
:root[data-theme="light"] [data-underhall-schema-tree-drawer-panel] .text-slate-100,
:root[data-theme="light"] [data-underhall-schema-tree-drawer-panel] .text-slate-200,
:root[data-theme="light"] [data-underhall-schema-tree-drawer-panel] .text-slate-300,
:root[data-theme="light"] [data-user-panel-panel] .text-slate-100,
:root[data-theme="light"] [data-user-panel-panel] .text-slate-200,
:root[data-theme="light"] [data-user-panel-panel] .text-slate-300,
:root[data-theme="light"] [data-role-panel-panel] .text-slate-100,
:root[data-theme="light"] [data-role-panel-panel] .text-slate-200,
:root[data-theme="light"] [data-role-panel-panel] .text-slate-300,
:root[data-theme="light"] [data-employee-panel-body] .text-slate-100,
:root[data-theme="light"] [data-employee-panel-body] .text-slate-200,
:root[data-theme="light"] [data-employee-panel-body] .text-slate-300,
:root[data-theme="light"] [data-frakt-panel-body] .text-slate-100,
:root[data-theme="light"] [data-frakt-panel-body] .text-slate-200,
:root[data-theme="light"] [data-frakt-panel-body] .text-slate-300,
:root[data-theme="light"] [data-driver-panel-body] .text-slate-100,
:root[data-theme="light"] [data-driver-panel-body] .text-slate-200,
:root[data-theme="light"] [data-driver-panel-body] .text-slate-300,
:root[data-theme="light"] [data-wg-client-drawer-panel] .text-slate-100,
:root[data-theme="light"] [data-wg-client-drawer-panel] .text-slate-200,
:root[data-theme="light"] [data-wg-client-drawer-panel] .text-slate-300,
:root[data-theme="light"] [data-dhcp-editor] .text-slate-100,
:root[data-theme="light"] [data-dhcp-editor] .text-slate-200,
:root[data-theme="light"] [data-dhcp-editor] .text-slate-300,
:root[data-theme="light"] [data-router-editor] .text-slate-100,
:root[data-theme="light"] [data-router-editor] .text-slate-200,
:root[data-theme="light"] [data-router-editor] .text-slate-300,
:root[data-theme="light"] [data-saglinjen-drawer-panel] .text-slate-100,
:root[data-theme="light"] [data-saglinjen-drawer-panel] .text-slate-200,
:root[data-theme="light"] [data-saglinjen-drawer-panel] .text-slate-300,
:root[data-theme="light"] [data-prodplan-object-modal-dialog] .text-slate-100,
:root[data-theme="light"] [data-prodplan-object-modal-dialog] .text-slate-200,
:root[data-theme="light"] [data-prodplan-object-modal-dialog] .text-slate-300 {
  color: color-mix(in srgb, var(--app-bc) 92%, #000000 0%) !important;
}

:root[data-theme="light"] * {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.6) transparent;
}

:root[data-theme="light"] *::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

:root[data-theme="light"] *::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.45);
  border-radius: 999px;
}

:root[data-theme="light"] *::-webkit-scrollbar-track {
  background: transparent;
}

[data-sidebar] nav {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.6) transparent;
}

[data-sidebar] nav::-webkit-scrollbar {
  width: 6px;
}

[data-sidebar] nav::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.45);
  border-radius: 999px;
}

[data-sidebar] nav::-webkit-scrollbar-track {
  background: transparent;
}

html {
  --app-viewport-height: calc(100dvh / var(--ui-zoom-scale, 1));
}

@media (min-width: 768px) {
  body,
  body > .min-h-screen {
    min-height: var(--app-viewport-height);
  }

  [data-sidebar] {
    height: var(--app-viewport-height);
    max-height: var(--app-viewport-height);
  }
}

.app-toast-container {
  position: fixed;
  top: 0;
  right: 1rem;
  left: auto;
  z-index: 150;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  transform: none;
  pointer-events: none;
}

@media (max-width: 639px) {
  .app-toast-container {
    top: 0;
    right: 0.75rem;
  }
}

.app-toast {
  pointer-events: auto;
  padding: 1.25rem 2rem;
  border-radius: 1rem;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background: rgba(16, 185, 129, 0.18);
  color: #ecfdf5;
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 20px 45px rgba(6, 95, 70, 0.25);
  transition: opacity 300ms ease, transform 300ms ease;
  white-space: pre-line;
}

.app-toast--clickable {
  cursor: pointer;
}

.app-toast--rich {
  max-width: min(32rem, calc(100vw - 2rem));
  text-align: left;
}

:root[data-theme="light"] .app-toast {
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.94);
  color: rgb(15, 23, 42);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
}

.app-toast--success {
  background: rgba(16, 185, 129, 0.18);
  color: #ecfdf5;
  box-shadow: 0 20px 45px rgba(6, 95, 70, 0.25);
}

:root[data-theme="light"] .app-toast--success {
  background: rgba(236, 253, 245, 0.98);
  color: rgb(6, 95, 70);
  border-color: rgba(16, 185, 129, 0.22);
}

.app-toast--error {
  background: rgba(244, 63, 94, 0.18);
  color: #fff1f2;
  box-shadow: 0 20px 45px rgba(136, 19, 55, 0.22);
}

:root[data-theme="light"] .app-toast--error {
  background: rgba(255, 241, 242, 0.98);
  color: rgb(153, 27, 27);
  border-color: rgba(244, 63, 94, 0.24);
}

.app-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0.46) 0%, rgba(15, 23, 42, 0.56) 100%);
  opacity: 0;
  pointer-events: auto;
  backdrop-filter: blur(3px);
  transition: opacity 160ms ease;
}

.app-loading-overlay[data-open="true"] {
  opacity: 1;
}

.app-loading-overlay__card {
  display: flex;
  min-width: min(18rem, 84vw);
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.36);
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.94) 0%, rgba(15, 23, 42, 0.94) 100%);
  padding: 2rem;
  color: rgb(241 245 249);
  box-shadow: 0 28px 72px rgba(2, 6, 23, 0.42);
}

.app-loading-overlay__spinner {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 9999px;
  border: 0.45rem solid rgba(148, 163, 184, 0.30);
  border-top-color: rgb(52 211 153);
  border-right-color: rgb(125 211 252);
  animation: app-loading-spin 780ms linear infinite;
}

.app-loading-overlay__text {
  max-width: 18rem;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
}

:root[data-theme="light"] .app-loading-overlay {
  background:
    linear-gradient(180deg, rgba(241, 245, 249, 0.52) 0%, rgba(226, 232, 240, 0.62) 100%);
}

:root[data-theme="light"] .app-loading-overlay__card {
  border-color: rgba(148, 163, 184, 0.44);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(239, 246, 255, 0.92) 100%);
  color: rgb(15 23 42);
  box-shadow: 0 22px 54px rgba(15, 23, 42, 0.18);
}

@keyframes app-loading-spin {
  to {
    transform: rotate(360deg);
  }
}