/* SentriIQ Microsoft Fluent light theme.
 * Loaded after the recovered application stylesheet so every route shares one
 * professional visual system without modifying the compiled React bundle.
 */

:root,
html,
html.dark,
html[data-theme],
html[data-easy-view="true"] {
  color-scheme: light !important;

  --background: 210 38% 92%;
  --foreground: 214 36% 16%;
  --border: 210 28% 74%;
  --input: 210 30% 69%;
  --ring: 207 85% 40%;

  --card: 207 50% 97%;
  --card-foreground: 214 36% 16%;
  --card-border: 209 34% 78%;
  --popover: 207 48% 97%;
  --popover-foreground: 214 36% 16%;
  --popover-border: 209 34% 74%;

  --primary: 207 85% 40%;
  --primary-foreground: 0 0% 100%;
  --secondary: 209 46% 89%;
  --secondary-foreground: 211 49% 24%;
  --muted: 209 34% 88%;
  --muted-foreground: 212 22% 34%;
  --accent: 207 67% 84%;
  --accent-foreground: 207 85% 25%;
  --destructive: 354 86% 42%;
  --destructive-foreground: 0 0% 100%;

  --sidebar: 208 52% 90%;
  --sidebar-foreground: 211 49% 20%;
  --sidebar-border: 208 38% 70%;
  --sidebar-primary: 207 85% 40%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 207 62% 82%;
  --sidebar-accent-foreground: 207 85% 25%;
  --sidebar-ring: 207 85% 40%;

  --chart-1: 207 85% 40%;
  --chart-2: 184 68% 32%;
  --chart-3: 263 47% 51%;
  --chart-4: 32 94% 43%;
  --chart-5: 142 70% 33%;

  --radius: 0.5rem;
  --opaque-button-border-intensity: 0.12;
  --button-outline: rgb(0 0 0 / 10%);
  --badge-outline: rgb(0 0 0 / 8%);
  --elevate-1: rgb(0 0 0 / 4%);
  --elevate-2: rgb(0 0 0 / 8%);
  --led: 207 85% 40%;

  --font-sans: "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
  --font-heading: "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
  --default-font-family: "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
}

html {
  background: #d9e7f2 !important;
}

body {
  background:
    radial-gradient(circle at 8% 0%, rgb(15 108 189 / 18%), transparent 34rem),
    radial-gradient(circle at 100% 100%, rgb(0 120 112 / 12%), transparent 36rem),
    linear-gradient(145deg, #dce9f4 0%, #eaf2f8 48%, #d8e7f1 100%) !important;
  color: #172b3d !important;
  font-family: "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(20px, 1.412vw, 24px) !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: hsl(var(--foreground));
  font-family: "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif !important;
  letter-spacing: -0.015em !important;
}

::selection {
  background: #cfe4fa;
  color: #242424;
}

*:focus-visible {
  outline: 2px solid #0f6cbd !important;
  outline-offset: 2px !important;
}

/* Fluent surfaces */
[data-slot="card"],
.card-premium {
  background: linear-gradient(145deg, #f8fbfe 0%, #edf5fb 100%) !important;
  border-color: #afc8db !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgb(21 66 99 / 10%), 0 5px 16px rgb(21 66 99 / 8%) !important;
}

[data-slot="card"]:hover,
.card-premium:hover {
  border-color: #5b9aca !important;
  box-shadow: 0 2px 4px rgb(15 84 140 / 10%), 0 9px 24px rgb(15 84 140 / 10%) !important;
}

[data-slot="dialog-content"],
[data-slot="alert-dialog-content"],
[data-slot="sheet-content"],
[data-slot="popover-content"],
[data-slot="dropdown-menu-content"],
[data-slot="context-menu-content"],
[data-slot="select-content"],
[data-radix-popper-content-wrapper] > div {
  background: linear-gradient(145deg, #f8fbfe 0%, #e7f1f8 100%) !important;
  border-color: #8fb4cf !important;
  color: #172b3d !important;
  box-shadow: 0 10px 28px rgb(10 56 91 / 22%) !important;
}

[data-slot="dialog-overlay"],
[data-slot="alert-dialog-overlay"],
[data-slot="sheet-overlay"] {
  background: rgb(0 0 0 / 32%) !important;
  backdrop-filter: none !important;
}

/* Navigation and shell */
[data-slot="sidebar"],
[data-sidebar="sidebar"],
[data-sidebar="content"],
[data-sidebar="header"],
[data-sidebar="footer"] {
  background: #dceaf5 !important;
  color: #17324d !important;
  border-color: #a9c4d8 !important;
  box-shadow: none !important;
}

[data-sidebar="menu-button"] {
  border-radius: 4px !important;
  color: #17324d !important;
}

[data-sidebar="menu-button"]:hover,
[data-sidebar="menu-button"][data-active="true"] {
  background: #cbe2f3 !important;
  color: #0b4f82 !important;
}

/* The recovered application uses text utility classes rather than inheriting
 * one document size. A controlled 1.25x–1.5x accessibility scale keeps text
 * consistently readable without destabilising fixed-width forms and dense
 * management layouts on very wide displays. */
body .text-xs {
  font-size: clamp(15px, 1.059vw, 18px) !important;
  line-height: 1.3333 !important;
}

body .text-sm {
  font-size: clamp(17.5px, 1.235vw, 21px) !important;
  line-height: 1.4286 !important;
}

body .text-base {
  font-size: clamp(20px, 1.412vw, 24px) !important;
  line-height: 1.5 !important;
}

body .text-lg {
  font-size: clamp(22.5px, 1.588vw, 27px) !important;
  line-height: 1.5556 !important;
}

body .text-xl {
  font-size: clamp(25px, 1.765vw, 30px) !important;
  line-height: 1.4 !important;
}

body .text-2xl {
  font-size: clamp(30px, 2.118vw, 36px) !important;
  line-height: 1.3333 !important;
}

body .text-3xl {
  font-size: clamp(37.5px, 2.647vw, 45px) !important;
  line-height: 1.2 !important;
}

body .text-4xl {
  font-size: clamp(45px, 3.176vw, 54px) !important;
  line-height: 1.1111 !important;
}

body .text-5xl {
  font-size: clamp(60px, 4.235vw, 72px) !important;
  line-height: 1 !important;
}

body [class~="text-[7px]"] { font-size: clamp(8.75px, 0.618vw, 10.5px) !important; line-height: 1.35 !important; }
body [class~="text-[8px]"] { font-size: clamp(10px, 0.706vw, 12px) !important; line-height: 1.35 !important; }
body [class~="text-[9px]"] { font-size: clamp(11.25px, 0.794vw, 13.5px) !important; line-height: 1.35 !important; }
body [class~="text-[10px]"] { font-size: clamp(12.5px, 0.882vw, 15px) !important; line-height: 1.35 !important; }
body [class~="text-[11px]"] { font-size: clamp(13.75px, 0.971vw, 16.5px) !important; line-height: 1.35 !important; }
body [class~="text-[12px]"] { font-size: clamp(15px, 1.059vw, 18px) !important; line-height: 1.35 !important; }
body [class~="text-[13px]"] { font-size: clamp(16.25px, 1.147vw, 19.5px) !important; line-height: 1.35 !important; }
body [class~="text-[14px]"] { font-size: clamp(17.5px, 1.235vw, 21px) !important; line-height: 1.35 !important; }
body [class~="text-[15px]"] { font-size: clamp(18.75px, 1.324vw, 22.5px) !important; line-height: 1.35 !important; }
body [class~="text-[17px]"] { font-size: clamp(21.25px, 1.5vw, 25.5px) !important; line-height: 1.35 !important; }
body [class~="text-[18px]"] { font-size: clamp(22.5px, 1.588vw, 27px) !important; line-height: 1.35 !important; }
body [class~="text-[20px]"] { font-size: clamp(25px, 1.765vw, 30px) !important; line-height: 1.35 !important; }

body [style*="font-size: 7px"] { font-size: clamp(8.75px, 0.618vw, 10.5px) !important; line-height: 1.35 !important; }
body [style*="font-size: 8px"] { font-size: clamp(10px, 0.706vw, 12px) !important; line-height: 1.35 !important; }
body [style*="font-size: 9px"] { font-size: clamp(11.25px, 0.794vw, 13.5px) !important; line-height: 1.35 !important; }
body [style*="font-size: 10px"] { font-size: clamp(12.5px, 0.882vw, 15px) !important; line-height: 1.35 !important; }
body [style*="font-size: 11px"] { font-size: clamp(13.75px, 0.971vw, 16.5px) !important; line-height: 1.35 !important; }
body [style*="font-size: 12.5px"] { font-size: clamp(15.625px, 1.103vw, 18.75px) !important; line-height: 1.45 !important; }
body [style*="font-size: 13px"] { font-size: clamp(16.25px, 1.147vw, 19.5px) !important; line-height: 1.35 !important; }
body [style*="font-size: 22px"] { font-size: clamp(27.5px, 1.941vw, 33px) !important; line-height: 1.2 !important; }

button,
input,
select,
textarea,
[role="button"] {
  min-height: 1.9em;
}

/* Replace the left navigation's text-link treatment with explicit Fluent
 * button surfaces. Both top-level and expanded child links are covered. */
#root [class~="bg-sidebar"][class~="border-r"] {
  width: clamp(18rem, 16vw, 26rem) !important;
  background:
    radial-gradient(circle at 0 0, rgb(15 108 189 / 15%), transparent 20rem),
    linear-gradient(180deg, #e4f0f8 0%, #d5e7f3 58%, #cbdfea 100%) !important;
  border-color: #91b5cf !important;
  color: #17324d !important;
  box-shadow: 3px 0 14px rgb(30 82 118 / 10%) !important;
}

#root [class~="bg-sidebar"][class~="border-r"] nav a {
  color: #242424 !important;
  text-decoration: none !important;
}

#root [class~="bg-sidebar"][class~="border-r"] nav a > div[class*="cursor-pointer"] {
  min-height: 2.4em !important;
  margin-block: 0.35rem !important;
  padding: 0.5em 0.7em !important;
  background: linear-gradient(145deg, #f2f8fc 0%, #e4eff7 100%) !important;
  border: 1px solid #9fbed4 !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / 5%) !important;
  color: #17324d !important;
}

#root [class~="bg-sidebar"][class~="border-r"] nav a > div[class*="cursor-pointer"]:hover {
  background: #c9e2f4 !important;
  border-color: #0f6cbd !important;
  color: #083f6f !important;
}

#root [class~="bg-sidebar"][class~="border-r"] nav a > div[class~="bg-sidebar-primary"] {
  background: #0f6cbd !important;
  border-color: #0f6cbd !important;
  color: #fff !important;
  box-shadow: 0 2px 5px rgb(15 108 189 / 20%) !important;
}

#root [class~="bg-sidebar"][class~="border-r"] nav a > div[class*="cursor-pointer"] span[class~="truncate"] {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

#root [class~="bg-sidebar"][class~="border-r"] nav a > div[class*="cursor-pointer"] svg {
  width: 1.25em !important;
  height: 1.25em !important;
}

/* Enlarged type must drive shell height instead of overflowing the recovered
 * 48px header and other fixed-density regions. */
#root > div[class~="h-[100dvh]"][class~="overflow-hidden"] > div[class~="flex-1"][class~="overflow-hidden"] {
  min-width: 0 !important;
}

#root > div[class~="h-[100dvh]"][class~="overflow-hidden"] > div[class~="flex-1"][class~="overflow-hidden"] > div[style*="height: 48px"] {
  height: auto !important;
  min-height: clamp(64px, 2.4vw, 96px) !important;
  padding-block: clamp(0.65rem, 0.8vw, 1.1rem) !important;
  flex-wrap: wrap !important;
  align-content: center !important;
  row-gap: 0.75rem !important;
  background: linear-gradient(105deg, #0f548c 0%, #0f6cbd 52%, #1479c9 100%) !important;
  border-color: #083f6f !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgb(8 63 111 / 22%) !important;
}

#root > div[class~="h-[100dvh]"][class~="overflow-hidden"] > div[class~="flex-1"][class~="overflow-hidden"] > div[style*="height: 48px"] :is(.text-foreground, .text-primary, .text-muted-foreground) {
  color: #fff !important;
}

#root > div[class~="h-[100dvh]"][class~="overflow-hidden"] > div[class~="flex-1"][class~="overflow-hidden"] > div[style*="height: 48px"] [class*="text-emerald-"] {
  color: #8ee3b1 !important;
}

#root > div[class~="h-[100dvh]"][class~="overflow-hidden"] > div[class~="flex-1"][class~="overflow-hidden"] > div[style*="height: 48px"] [class*="text-amber-"] {
  color: #ffe38f !important;
}

#root > div[class~="h-[100dvh]"][class~="overflow-hidden"] > div[class~="flex-1"][class~="overflow-hidden"] > div[style*="height: 48px"] [class~="border-border"] {
  border-color: rgb(255 255 255 / 28%) !important;
}

#root > div[class~="h-[100dvh]"][class~="overflow-hidden"] > div[class~="flex-1"][class~="overflow-hidden"] > div[style*="height: 48px"] button {
  background: rgb(255 255 255 / 12%) !important;
  border-color: rgb(255 255 255 / 34%) !important;
  color: #fff !important;
}

#root > div[class~="h-[100dvh]"][class~="overflow-hidden"] > div[class~="flex-1"][class~="overflow-hidden"] > div[style*="height: 48px"] > div {
  min-width: 0 !important;
}

#root > div[class~="h-[100dvh]"][class~="overflow-hidden"] > div[class~="flex-1"][class~="overflow-hidden"] > div[style*="height: 48px"] > div[class~="ml-auto"] {
  flex: 1 1 38rem !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  min-width: min(100%, 28rem) !important;
  row-gap: 0.65rem !important;
}

#root > div[class~="h-[100dvh]"][class~="overflow-hidden"] > div[class~="flex-1"][class~="overflow-hidden"] > div[style*="height: 48px"] button span[class*="max-w-"] {
  max-width: min(28vw, 24rem) !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

#root > div[class~="h-[100dvh]"][class~="overflow-hidden"] > div[class~="flex-1"][class~="overflow-hidden"] > div[class~="min-h-9"][class~="overflow-x-auto"] {
  min-height: clamp(48px, 1.8vw, 72px) !important;
  padding-block: 0.55rem !important;
  flex-wrap: wrap !important;
  align-content: center !important;
  overflow-x: visible !important;
  row-gap: 0.65rem !important;
  background: linear-gradient(90deg, #d6eaf8 0%, #c5e0f3 100%) !important;
  border-color: #8db5d1 !important;
  color: #17324d !important;
}

#root > div[class~="h-[100dvh]"][class~="overflow-hidden"] > div[class~="flex-1"][class~="overflow-hidden"] > div[class~="bg-amber-500/8"] {
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  padding-block: 0.8rem !important;
  line-height: 1.4 !important;
  background: linear-gradient(90deg, #fff4ce 0%, #fbe8aa 100%) !important;
  border-color: #d6a900 !important;
  color: #654700 !important;
}

#root > div[class~="h-[100dvh]"][class~="overflow-hidden"] > div[class~="flex-1"][class~="overflow-hidden"] > div[class~="bg-amber-500/8"] [class*="text-amber-"] {
  color: #654700 !important;
}

#root [class~="bg-sidebar"][class~="border-r"] > div:first-child,
#root [class~="bg-sidebar"][class~="border-r"] > div:last-child {
  flex-shrink: 0 !important;
}

#root [class~="bg-sidebar"][class~="border-r"] > nav {
  min-height: 0 !important;
}

#root [class~="bg-sidebar"][class~="border-r"] > div:last-child {
  max-height: min(46dvh, 44rem) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  background: rgb(192 219 237 / 72%) !important;
  border-color: #8fb4cf !important;
}

#root footer > div {
  flex-wrap: wrap !important;
  gap: 0.5rem 1.5rem !important;
  padding-block: 0.75rem !important;
}

#root footer {
  background: #cfe2ef !important;
  border-color: #8fb4cf !important;
  color: #264a65 !important;
}

/* Page banners contain inline pixel measurements in the recovered bundle. */
body [style*="min-height: 152px"] {
  min-height: auto !important;
  background:
    radial-gradient(circle at 80% 20%, rgb(34 186 212 / 22%), transparent 26rem),
    linear-gradient(115deg, #e3f2fb 0%, #cfe7f5 58%, #d7eef1 100%) !important;
  border-color: #7db4d2 !important;
  box-shadow: 0 7px 22px rgb(21 84 124 / 12%) !important;
}

body [style*="min-height: 152px"] > div[class*="items-center"] {
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  padding-block: clamp(1.15rem, 1vw, 2rem) !important;
}

body [style*="min-height: 152px"] [style*="height: 52px"][style*="width: 52px"] {
  height: clamp(52px, 2vw, 72px) !important;
  width: clamp(52px, 2vw, 72px) !important;
}

body [style*="min-height: 152px"] p[class*="max-w-"] {
  max-width: min(78vw, 90rem) !important;
  overflow-wrap: anywhere;
}

[data-slot="card"],
.card-premium,
main,
main > div {
  min-width: 0;
}

main {
  background:
    linear-gradient(135deg, rgb(255 255 255 / 18%) 25%, transparent 25%) 0 0 / 28px 28px,
    linear-gradient(315deg, rgb(15 108 189 / 4%) 25%, transparent 25%) 0 0 / 28px 28px,
    linear-gradient(145deg, #dceaf5 0%, #e9f2f8 50%, #d6e7f2 100%) !important;
}

main [class*="grid"] > [data-slot="card"]:nth-child(4n + 1),
main [class*="grid"] > .card-premium:nth-child(4n + 1) {
  background: linear-gradient(145deg, #eef8f1 0%, #dcefe3 100%) !important;
  border-top: 4px solid #107c10 !important;
}

main [class*="grid"] > [data-slot="card"]:nth-child(4n + 2),
main [class*="grid"] > .card-premium:nth-child(4n + 2) {
  background: linear-gradient(145deg, #fff3f3 0%, #f8dede 100%) !important;
  border-top: 4px solid #c50f1f !important;
}

main [class*="grid"] > [data-slot="card"]:nth-child(4n + 3),
main [class*="grid"] > .card-premium:nth-child(4n + 3) {
  background: linear-gradient(145deg, #fff8e8 0%, #f7e8bd 100%) !important;
  border-top: 4px solid #ca7602 !important;
}

main [class*="grid"] > [data-slot="card"]:nth-child(4n),
main [class*="grid"] > .card-premium:nth-child(4n) {
  background: linear-gradient(145deg, #eaf4fc 0%, #d5e9f8 100%) !important;
  border-top: 4px solid #0f6cbd !important;
}

[data-slot="dialog-content"],
[data-slot="alert-dialog-content"],
[data-slot="sheet-content"],
[data-slot="popover-content"],
[data-slot="dropdown-menu-content"],
[data-slot="select-content"] {
  max-width: min(94vw, 72rem) !important;
  max-height: 88dvh !important;
  overflow: auto !important;
}

header,
[data-slot="header"] {
  border-color: #e5e5e5 !important;
}

/* Buttons */
[data-slot="button"],
button,
[role="button"] {
  font-family: "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

button[class*="bg-primary"],
[data-slot="button"][class*="bg-primary"] {
  background: #0f6cbd !important;
  border-color: #0f6cbd !important;
  color: #fff !important;
  box-shadow: none !important;
}

button[class*="bg-primary"]:hover,
[data-slot="button"][class*="bg-primary"]:hover {
  background: #115ea3 !important;
  border-color: #115ea3 !important;
}

button[class*="bg-primary"]:active,
[data-slot="button"][class*="bg-primary"]:active {
  background: #0f548c !important;
}

button[class*="bg-secondary"],
button[class*="bg-muted"] {
  background: #dcebf6 !important;
  border-color: #91b5cf !important;
  color: #17324d !important;
}

button:disabled,
[role="button"][aria-disabled="true"] {
  background: #f0f0f0 !important;
  border-color: #e0e0e0 !important;
  color: #a0a0a0 !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

/* Forms */
input,
textarea,
select,
[data-slot="input"],
[data-slot="textarea"],
[data-slot="select-trigger"] {
  background: #f8fbfe !important;
  border-color: #789fbc !important;
  color: #172b3d !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 1px rgb(0 0 0 / 3%) !important;
}

input:hover,
textarea:hover,
select:hover,
[data-slot="select-trigger"]:hover {
  border-color: #0f6cbd !important;
}

input:focus,
textarea:focus,
select:focus,
[data-slot="select-trigger"]:focus {
  border-color: #0f6cbd !important;
  box-shadow: inset 0 -2px 0 #0f6cbd !important;
}

input::placeholder,
textarea::placeholder {
  color: #8a8a8a !important;
}

/* Tables, tabs and lists */
table,
[data-slot="table"] {
  background: #f5faff;
  color: #172b3d;
}

thead,
[data-slot="table-header"] {
  background: #cfe3f1 !important;
}

th {
  color: #17324d !important;
  font-weight: 600 !important;
}

tr,
td,
th,
[data-slot="table-row"],
[data-slot="table-cell"],
[data-slot="table-head"] {
  border-color: #a9c4d8 !important;
}

tbody tr:nth-child(even),
[data-slot="table-row"]:nth-child(even) {
  background: #eaf3f9 !important;
}

tbody tr:hover,
[data-slot="table-row"]:hover {
  background: #d5e9f7 !important;
}

[data-slot="tabs-list"] {
  background: #cfe1ee !important;
  border: 1px solid #93b5cd !important;
}

[data-slot="tabs-trigger"][data-state="active"] {
  background: #f7fbfe !important;
  color: #0f548c !important;
  box-shadow: 0 1px 3px rgb(0 0 0 / 10%) !important;
}

[data-slot="separator"] {
  background: #a9c4d8 !important;
}

/* Status and feedback */
[data-slot="badge"] {
  background: #d7e9f5 !important;
  border-color: #83abc6 !important;
  color: #17324d !important;
  box-shadow: none !important;
}

body [class*="text-emerald-"],
body [class*="text-green-"] {
  color: #0b6a0b !important;
}

body [class*="text-amber-"],
body [class*="text-yellow-"] {
  color: #865900 !important;
}

body [class*="text-red-"] {
  color: #b10e1c !important;
}

body [class*="text-sky-"],
body [class*="text-cyan-"] {
  color: #0067a8 !important;
}

body [class*="text-violet-"],
body [class*="text-purple-"] {
  color: #5c2d91 !important;
}

[data-slot="toast"],
[data-sonner-toast] {
  background: linear-gradient(145deg, #f7fbfe 0%, #dcecf7 100%) !important;
  border-color: #6f9fbe !important;
  color: #172b3d !important;
  box-shadow: 0 8px 24px rgb(0 0 0 / 14%) !important;
}

/* Remove the cyber/neon layer while keeping status colors meaningful. */
.text-gradient-primary {
  background: none !important;
  color: #0f6cbd !important;
  -webkit-text-fill-color: currentColor !important;
}

.glow-primary {
  box-shadow: 0 0 0 3px rgb(15 108 189 / 10%) !important;
}

.cylon-scanner,
[class*="scanner"],
[class*="header-sweep"] {
  display: none !important;
}

.page-backdrop-teal,
.page-backdrop-purple,
.page-backdrop-blue,
.page-backdrop-amber,
.page-backdrop-red,
.page-backdrop-green {
  background:
    radial-gradient(circle at 85% 10%, rgb(34 186 212 / 13%), transparent 30rem),
    linear-gradient(180deg, rgb(15 108 189 / 10%), transparent 24rem) !important;
}

/* Login and recovery: Fluent brand panel rather than the dark photo treatment. */
body:has(form input[type="password"]) #root > div[class*="min-h-"] > div:first-child {
  background:
    radial-gradient(circle at 82% 18%, rgb(255 255 255 / 16%), transparent 16rem),
    linear-gradient(145deg, #0f6cbd 0%, #115ea3 58%, #0f548c 100%) !important;
}

body:has(form input[type="password"]) #root > div[class*="min-h-"] > div:first-child > img,
body:has(form input[type="password"]) #root > div[class*="min-h-"] > div:first-child > div.absolute.inset-0 {
  display: none !important;
}

body:has(form input[type="password"]) #root > div[class*="min-h-"] > div:first-child h1,
body:has(form input[type="password"]) #root > div[class*="min-h-"] > div:first-child h2,
body:has(form input[type="password"]) #root > div[class*="min-h-"] > div:first-child h3 {
  color: #fff !important;
}

body:has(form input[type="password"]) #root > div[class*="min-h-"] > div:last-child {
  background:
    radial-gradient(circle at 100% 0, rgb(15 108 189 / 12%), transparent 20rem),
    linear-gradient(145deg, #edf5fb 0%, #dcebf6 100%) !important;
  border-left: 1px solid #8fb4cf;
  width: clamp(28rem, 24vw, 38rem) !important;
  padding-inline: clamp(2rem, 3vw, 4.5rem) !important;
}

body:has(form input[type="password"]) #root > div[class*="min-h-"] > div:last-child > div[class*="max-w-sm"] {
  max-width: 32rem !important;
}

body:has(form input[type="password"]) #root > div[class*="min-h-"] > div:first-child [class~="max-w-md"] {
  max-width: 46rem !important;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #d5e5f0 !important;
}

::-webkit-scrollbar-thumb {
  background: #7fa6c0 !important;
  border: 2px solid #d5e5f0;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: #4f83a7 !important;
}

/* Preserve purpose-built media/terminal canvases as dark work surfaces. */
.xterm,
.xterm .xterm-viewport,
video,
canvas {
  color-scheme: dark;
}

/* Mobile navigation is injected only after the authenticated shell mounts. */
.sentriiq-mobile-menu,
.sentriiq-mobile-backdrop {
  display: none;
}

@media (max-width: 1023px) {
  html.sentriiq-nav-open,
  body.sentriiq-nav-open {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  .sentriiq-mobile-menu {
    position: fixed;
    top: max(0.65rem, env(safe-area-inset-top));
    left: max(0.65rem, env(safe-area-inset-left));
    z-index: 1002;
    display: inline-flex;
    min-width: 5.5rem;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid #82a9c5;
    border-radius: 6px;
    background: #f8fbfe;
    color: #0b4f82;
    box-shadow: 0 3px 14px rgb(14 67 104 / 20%);
    font: 650 0.9rem/1 "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
    cursor: pointer;
  }

  .sentriiq-mobile-menu-icon {
    display: grid;
    width: 1.15rem;
    gap: 3px;
  }

  .sentriiq-mobile-menu-icon i {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
    transition: transform 160ms ease, opacity 160ms ease;
  }

  html.sentriiq-nav-open .sentriiq-mobile-menu-icon i:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
  }

  html.sentriiq-nav-open .sentriiq-mobile-menu-icon i:nth-child(2) {
    opacity: 0;
  }

  html.sentriiq-nav-open .sentriiq-mobile-menu-icon i:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
  }

  .sentriiq-mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: block;
    border: 0;
    background: rgb(11 37 56 / 48%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  html.sentriiq-nav-open .sentriiq-mobile-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  #root .sentriiq-mobile-sidebar,
  body:has(form input[type="password"]) #root > div[class*="min-h-"] {
    overscroll-behavior: contain;
  }

  #root .sentriiq-mobile-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 1001 !important;
    width: min(88vw, 22rem) !important;
    min-width: 0 !important;
    height: 100dvh !important;
    max-height: none !important;
    padding-top: max(4.35rem, calc(env(safe-area-inset-top) + 4rem)) !important;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    visibility: hidden;
    transform: translateX(-105%);
    box-shadow: 8px 0 28px rgb(7 41 65 / 24%) !important;
    transition: transform 180ms ease, visibility 180ms linear;
  }

  html.sentriiq-nav-open #root .sentriiq-mobile-sidebar {
    visibility: visible;
    transform: translateX(0);
  }

  #root .sentriiq-mobile-sidebar a,
  #root .sentriiq-mobile-sidebar button {
    min-height: 2.75rem !important;
  }

  #root > div[class~="h-[100dvh]"][class~="overflow-hidden"] > div[class~="flex-1"][class~="overflow-hidden"] {
    min-width: 0 !important;
    width: 100% !important;
  }

  #root > div[class~="h-[100dvh]"][class~="overflow-hidden"] > div[class~="flex-1"][class~="overflow-hidden"] > div[style*="height: 48px"] {
    min-height: 4rem !important;
    padding-left: 7.25rem !important;
  }

  #root iframe[src*="web-monitor-unified"],
  #root iframe[src*="rds-monitor"] {
    height: calc(100dvh - 7.5rem) !important;
    min-height: 34rem !important;
  }

  body:has(form input[type="password"]) #root > div[class*="min-h-"] {
    background: #dceaf5 !important;
  }

  body:has(form input[type="password"]) #root > div[class*="min-h-"] > div:last-child {
    width: 100% !important;
    padding-inline: clamp(1.25rem, 5vw, 2rem) !important;
  }

  #root [class~="bg-sidebar"][class~="border-r"] {
    width: min(88vw, 22rem) !important;
  }
}

@media (max-width: 700px) {
  body {
    font-size: 17px !important;
  }

  body .text-xs { font-size: 12px !important; }
  body .text-sm { font-size: 14px !important; }
  body .text-base { font-size: 16px !important; }
  body .text-lg { font-size: 18px !important; }
  body .text-xl { font-size: 20px !important; }
  body .text-2xl { font-size: 24px !important; }
  body .text-3xl { font-size: 29px !important; }
  body .text-4xl { font-size: 34px !important; }
  body .text-5xl { font-size: 40px !important; }

  #root main {
    padding: 0.8rem !important;
  }

  #root main [class~="grid-cols-2"],
  #root main [class~="grid-cols-3"],
  #root main [class~="grid-cols-4"],
  #root main [class~="grid-cols-5"],
  #root main [class~="grid-cols-6"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #root main button,
  #root main input,
  #root main select,
  #root main textarea {
    min-height: 2.75rem;
  }

  [data-slot="dialog-content"],
  [data-slot="alert-dialog-content"],
  [data-slot="sheet-content"] {
    width: calc(100vw - 1.25rem) !important;
    max-width: calc(100vw - 1.25rem) !important;
    max-height: calc(100dvh - 1.25rem) !important;
    overflow-y: auto !important;
  }
}

@media (min-width: 768px) {
  body [class~="md:text-sm"] {
    font-size: clamp(17.5px, 1.235vw, 21px) !important;
    line-height: 1.4286 !important;
  }

  body [class~="md:text-5xl"] {
    font-size: clamp(60px, 4.235vw, 72px) !important;
    line-height: 1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}