@font-face {
  font-family: "SUSE";
  src: url("/static/fonts/SUSE/SUSE-VariableFont_wght.ttf") format("truetype");
}

@font-face {
  font-family: "DM Sans Light";
  src: url("/static/fonts/DM_Sans/DMSans-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 300;
}

:root {
    --compass-blue: #103EFF;
    --navy: #11122C; /* Primary dark surface. App background, top nav, panel headers, body text on light surfaces. */
    --navy-6: #1A1B3D; /* Navy +6% lightness */
    --navy-12: #252748; /* Navy +12% lightness */
    --deep-navy: #050D4F; /* Deepest surface tier. Modal overlays, deepest dark sections, contrast against navy. */
    --blue: #103EFF; /* Primary action color. CTAs, primary buttons, active states, links on dark, focus rings. */
    --blue1: #708BFF;
    --blue2: #4065FF;
    --blue3: #0D32CC;
    --blue4: #0A2599;
    --blue5: #061966;
    --green: #BDED33; /* Stat callouts and success. Black-on-green for KPIs, success states, positive confirmations, severity "OK" indicators. */
    --compass-green: #BDED33;
    --green1: #DEF699;
    --green2: #D1F270;
    --green3: #C4EF47;
    --green4: #AAD52E;
    --green5: #84A624;
    --purple: #6C63FF; /* Secondary accent. Use for tertiary actions, decorative emphasis on closing or mission-level moments. Do not use it for danger or warning. */
    --purple2: #7B73FF;
    --orange: #F15823; /* Small accent only. Reserved for the Compass logo accent and rare highlight moments. NEVER on primary CTAs. */
    --orange1: #F3794F;
    --orange2: #F16939;
    --orange3: #F05823;
    --orange4: #D84F20;
    --orange5: #C0461C;
    --off-white: #F7F7F7; /* Light surface. Used sparingly inside the dark theme: code blocks, secondary content blocks, body text on dark surfaces (90% opacity). */
    --white: #FFFFFF; /* Body text on dark, primary readable text on navy surfaces, icon strokes. */
    --black: #000000;
    --text: #191919; /* Secondary text on light surfaces. Captions and metadata. */
    --border: #D9D9DE; /* Hairline dividers and table borders on light surfaces. */
    --border-op: rgba(255,255,255,0.16);

    --severity-critical: #D63B26; /* Pill on dark surfaces: white text on this red. Used only for true Critical alerts.  */
    --severity-high: #F15823; /* Pill: white text on Compass orange. This is the only place orange shows up at meaningful scale in the UI. */
    --severity-medium: #F0B72F; /* Pill: navy text on amber. A muted amber that pairs with the brand palette. */
    --severity-low: #103EFF; /* Pill: white text on Compass blue. Repurposes the action color for low-severity informational items. */
    --severity-info: #6B7280; /* Pill: white text on neutral slate. Calm. Does not compete with severity. */
    --severity-ok: #BDED33; /* Pill: black text on Compass green. Black-on-green is reserved for positive confirmation. */

    --app-bg: var(--navy); /* The default canvas the entire app sits on. */
    --panel-surface: var(--navy-6); /* For dashboard panels, data cards, and content blocks that sit on the app background. */
    --elevated-surface: var(--navy-12); /* For modals, dropdowns, popovers, and the New Ticket panel. */
    --deep-surface: var(--deep-navy); /* For the top nav bar and the footer. Creates a hairline edge with the panel surface above. */
    --hairline-divider: rgba(255, 255, 255, 0.08); /* For section separators inside panels. No solid divider lines on-dark, use opacity. */
    --body-text: rgba(255, 255, 255, 0.92); /* Primary readable text */
    --meta-text: rgba(255, 255, 255, 0.64); /* for metadata and captions */

    --cta: var(--blue);
    --cta-hover: var(--blue2);


    /* these are not syntactically correct */
    --font-heading: SUSE, Inter, Arial, sans-serif;
    --font-body: "DM Sans Light", "DM Sans", Arial, sans-serif; /* weight 300 */
    --font-mono: ui-monospace, "SF Mono", Consolas, monospace; /*for ticket IDs, IPs, hostnames, code */
    --text-display: bold 40px/48px var(--font-heading); /* page titles only */
    --h1: bold 28px/36px var(--font-heading);
    --h2: bold 22px/30px var(--font-heading);
    --h3: bold 18px/26px var(--font-heading);
    --body: bold 15px/24px var(--font-body);
    --small: bold 13px/20px var(--font-body);
    --stat-xl: bold 56px/60px var(--font-heading); /* for dashboard KPI numerals */
    --stat-lg: bold 36px/42px var(--font-heading); /* for posture and report counters */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --radius-none: 0px; /* default. Compass visual language is hard edges and straight corners. */
    --radius-sm: 2px;  /* only for very small elements where a true 0 reads jagged */
    --radius-pill: 999px; /* severity pills, status badges, filter chips only */

    --nav-height: 64px;

    --checkbox-border-color: var(--body-text);
    --checkbox-bg-color: transparent;
    --checkbox-checked-bg-color: var(--compass-blue);
    --checkbox-check-color: var(--body-text);
    --checkbox-disabled-checked-bg-color: #6699cc;
    --checkbox-indeterminate-color: var(--hairline-divider);
}

html, body {
    padding: 0;
    margin: 0;
    background: var(--app-bg);
    color: var(--body-text);
    font-family: var(--font-body);
}

h1 { font: var(--h1) }
h2 { font: var(--h2) }
h3 { font: var(--h3) }
h4 {
    font-family: var(--font-heading);
    font-weight: bold;
}

.severity-critical { color: var(--severity-critical) !important; }
.severity-warning { color: var(--severity-high) !important; }
.severity-medium { color: var(--severity-medium) !important; }
.severity-low { color: var(--severity-low) !important; }
.severity-info { color: var(--severity-info) !important; }
.severity-ok { color: var(--severity-ok) !important; }
.severity-critical-bg { background-color: var(--severity-critical) !important; color: white !important; }
.severity-warning-bg { background-color: var(--severity-high) !important; color: white !important; }
.severity-medium-bg { background-color: var(--severity-medium) !important; color: var(--navy) !important; }
.severity-low-bg { background-color: var(--severity-low) !important; color: white !important; }
.severity-info-bg { background-color: var(--severity-info) !important; color: white !important; }
.severity-ok-bg { background-color: var(--severity-ok) !important; color: black !important; }
.compass-blue-bg { background-color: var(--compass-blue) }
.neutral-bg { background-color: #333 }

.bold-text {
    font-family: var(--font-heading);
    font-weight: 700;
}

select {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: var(--body-text);
}

#footer {
    color: var(--meta-text);
    background: var(--deep-surface);
    font: var(--small);
    display: flex;
    flex-direction: row;
    padding: 30px 0;
}

#footer h5 {
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 8px 0;
}

.footer-col {
    flex: 1;
    text-align: center;
}

a,
a:visited {
    text-decoration: none;
    color: var(--body-text);
}
a:active,
a:hover,
a:focus {
    color: var(--green);
    outline: none;
}
.msp-link {
    text-decoration: none !important;
    color: var(--body-text) !important;
}
.msp-link:active,
.msp-link:hover {
    color: var(--green) !important;
}
.msp-link:visited {
    color: var(--green4) !important;
}

.orange {
    color: var(--orange) !important;
}

.orange-link {
    text-decoration: none;
    font-family: var(--font-heading);
    color: var(--orange) !important;
}
.orange-link:active,
.orange-link:hover {
    color: var(--orange2) !important;
}
.orange-link:visited {
    color: var(--orange4) !important;
}

.form-control,
.input-group-addon {
    border: 1px solid var(--border-op) !important;
    background: var(--elevated-surface) !important;
    color: var(--body-text) !important;
    border-radius: 0 !important;
}

.form-control:hover,
.form-control:active,
.form-control:focus {
    cursor: pointer !important;
    border-color: var(--blue) !important;
    background: var(--elevated-surface) !important;
    outline: none !important;
    box-shadow: none !important;
    color: var(--body-text) !important;
}

.input-cta {
    background-color: var(--elevated-surface);
    border: 1px solid transparent;
    color: var(--body-text);
}

.input-cta::placeholder {
    color: rgba(255, 255, 255, 0.64);
}
.input-cta:focus {
    border: 1px solid var(--blue);
    outline: none;
}
.btn-cta {
    border: none;
    color: var(--body-text);
    background: var(--cta);
    min-height: 44px;
}
.btn-cta:hover {
    background: var(--cta-hover);
    cursor: pointer;
}

.msp-service-name {}
.msp-service-legacy {}

.pill-ok {
    background: var(--green);
    color: var(--black);
}

.pill-disabled {
    background: var(--black);
    color: var(--meta-text);
}

.panel,
.panel-heading {
    border: none;
    border-radius: 0;
    color: var(--body-text) !important;
}

.panel {
    background-color: var(--panel-surface) !important;
}

.panel-heading {
    background-color: var(--elevated-surface) !important;
}

.badge { border-radius: 0 !important; }
.comment-badge { background: none !important; }

.btn {
    border: none !important;
    border-radius: 0 !important;
}

.btn-primary,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus { background-color: var(--compass-blue); !important; }
.btn-primary:hover { background-color: var(--blue2); !important; }

.btn-secondary,
.btn-secondary:active,
.btn-secondary:visited,
.btn-secondary:focus {
    background-color: var(--purple) !important;
    color: var(--white);
}
.btn-secondary:hover { background-color: var(--purple2) !important; }

.btn-success,
.btn-success:active,
.btn-success:visited,
.btn-success:focus {
    background-color: var(--green) !important;
    color: black !important;
}
.btn-success:hover { background-color: var(--green2) !important; }

.btn-danger,
.btn-danger:active,
.btn-danger:visited,
.btn-danger:focus {
    background-color: var(--orange) !important;
}
.btn-danger:hover { background-color: var(--orange2) !important; }

.btn-warning,
.btn-warning:active,
.btn-warning:visited,
.btn-warning:focus { background-color: var(--severity-critical) !important; }
.btn-warning:hover { background-color: var(--severity-critical) !important; }

.btn-info,
.btn-info:active,
.btn-info:visited,
.btn-info:focus { background-color: var(--severity-info) !important; }
.btn-info:hover { background-color: var(--severity-info) !important; }

.btn-default,
.btn-default:active,
.btn-default:visited,
.btn-default:focus {
    background-color: var(--blue); !important;
    color: var(--white) !important;
}
.btn-default:hover { background-color: var(--blue2); !important; }

.text-danger { color: var(--orange) !important; }
.text-muted { color: var(--meta-text) !important; }

.table { color: var(--body-text); }
.table td, .table th { border-color: var(--border-op); }
.table thead th { border-bottom: 3px solid var(--hairline-divider ); }

.alert-danger {
    color: var(--severity-critical);
    background: none;
    font-weight: bold;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

#remote {
    background: var(--app-bg);
    color: var(--body-text);
    font: var(--font-body);
}

#remote h2 {
    font: var(--h2);
}

.padded {
    padding: var(--space-6);
}

.modal-content,
.modal-main {
    background-color: var(--elevated-surface) !important;
    border-radius: 0 !important;
}
.modal-header,
.modal-footer {
    border-color: var(--hairline-divider) !important;
}
.modal-header .close {
    color: var(--body-text) !important;
    opacity: 1.0;
}

.modal-header .close:hover {
    opacity: 0.8;
}

.dropdown-menu {
    background-color: var(--elevated-surface) !important;
    border-radius: 0 !important;
}

.dropdown-menu>li>a {
    color: var(--body-text) !important;
}

.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
    background-color: var(--compass-blue) !important;
}

.well {
    background-color: var(--elevated-surface) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none;
    -webkit-box-shadow: none;
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--checkbox-border-color);
  border-radius: 0;
  background-color: var(--checkbox-bg-color);
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
  position: relative;
}

/* Checked state */
input[type="checkbox"]:checked {
  background-color: var(--checkbox-checked-bg-color);
  border-color: var(--checkbox-border-color);
}

/* Checkmark using U+2713 */
input[type="checkbox"]:checked::after {
  content: "\2713";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  font-size: 12px;
  line-height: 1;
  color: var(--checkbox-check-color);
}

/* Hover state */
input[type="checkbox"]:hover {
  border-color: var(--checkbox-border-color);
  opacity: 0.85;
}

/* Focus state */
input[type="checkbox"]:focus {
  outline: 1px solid var(--checkbox-border-color);
  outline-offset: 2px;
}

input[type="checkbox"]:focus:not(:focus-visible) {
  outline: none;
}

input[type="checkbox"]:focus-visible {
  outline: 1px solid var(--checkbox-border-color);
  outline-offset: 2px;
}

/* Disabled state */
input[type="checkbox"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Disabled + checked state */
input[type="checkbox"]:disabled:checked {
  background-color: var(--checkbox-disabled-checked-bg-color);
}

/* Indeterminate state */
input[type="checkbox"]:indeterminate {
  background-color: var(--checkbox-bg-color);
  border-color: var(--checkbox-border-color);
}

input[type="checkbox"]:indeterminate::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 5px;
  width: 8px;
  height: 2px;
  background-color: var(--checkbox-indeterminate-color);
}

/* Active state */
input[type="checkbox"]:active {
  opacity: 0.7;
}