/* ==========================================================================
   IntelFinder customer workspace
   CyberATS's workspace design language (sidebar, raised gradient panels,
   quiet tables, pill tabs) in IntelFinder's blue palette, light and dark.
   Loaded last by include/header.php, customer portal only. The partner and
   administration portals share styles.css but never load this file, so all
   theme tokens live under html[data-theme].
   ========================================================================== */

/* --- Light theme (default) --- */
html[data-theme="light"] {
  color-scheme: light;

  /* Workspace tokens */
  --if-canvas: #f3f6fb;
  --if-surface: #ffffff;
  --if-surface-2: #f7f9fd;
  --if-surface-3: #eef3fa;
  --if-ink: #15233b;
  --if-ink-2: #34445c;
  --if-muted: #5f6f86;
  --if-subtle: #8494aa;
  --if-border: #e1e8f1;
  --if-border-strong: #cfdbea;
  --if-accent: #2563eb;
  --if-accent-hover: #1d4fd1;
  --if-accent-2: #3b82f6;
  --if-accent-rgb: 37, 99, 235;
  --if-tint: #eaf1fe;
  --if-tint-2: #f3f7ff;
  --if-hover: #f2f6fd;
  --if-overlay-1: rgba(21, 35, 59, .025);
  --if-overlay-2: rgba(21, 35, 59, .045);
  --if-overlay-3: rgba(21, 35, 59, .08);
  --if-panel-gradient: linear-gradient(135deg, #ffffff 20%, #edf3fe);
  --if-panel-border: #d6e2f5;
  --if-panel-footer: rgba(255, 255, 255, .45);
  --if-row-border: #e6edf8;
  --if-shadow: 0 6px 18px -7px rgba(30, 64, 125, .15), 0 1px 3px rgba(30, 64, 125, .035);
  --if-shadow-hover: 0 12px 25px -8px rgba(30, 64, 125, .22), 0 2px 4px rgba(30, 64, 125, .04);
  --if-shadow-lg: 0 20px 70px rgba(21, 35, 59, .18);
  --if-focus: #5b9cf6;
  --if-shadow-rgb: 30, 50, 90;
  --if-shadow-k: .45;
  --if-topbar-bg: rgba(255, 255, 255, .9);
  --if-sidebar-bg: #ffffff;
  --if-sidebar-brand-bg: linear-gradient(180deg, #f6f9ff, #ffffff 80%);
  --if-input-bg: #ffffff;
  --if-input-border: #cfdbe8;
  --if-backdrop: #15233b;
  --if-canvas-glow: radial-gradient(ellipse at 38% 0%, rgba(96, 165, 250, .13), transparent 48%), radial-gradient(ellipse at 100% 12%, rgba(129, 140, 248, .10), transparent 42%);

  /* Status, priority and feature colours, readable on white */
  --if-success: #1d8a57;
  --if-success-bg: #e8f6ee;
  --if-success-border: #c6e6d4;
  --if-warning: #a3620c;
  --if-warning-bg: #fff4de;
  --if-warning-border: #f3dcae;
  --if-danger: #c2363f;
  --if-danger-bg: #fdecee;
  --if-danger-border: #f2cdd1;
  --if-info: #0e7490;
  --if-info-bg: #e6f6fa;
  --if-info-border: #c3e6ef;
  --if-violet: #6d48d8;
  --if-violet-bg: #f1edfd;
  --if-violet-border: #ddd3f8;
  --if-cyan: #0e7490;
  --if-pink: #be2f74;
  --if-p1: #15935c;
  --if-p2: #0b7fc0;
  --if-p3: #b7791f;
  --if-p4: #dd6b20;
  --if-p5: #d92d3a;
  --if-status-open: #d0414a;
  --if-status-remediation: #c76a0c;
  --if-status-closed: #188355;
  --if-status-neutral: #69747e;

  /* Chart colours (read by js/app.js) */
  --if-chart-text: #6b7a90;
  --if-chart-label: #3d4d64;
  --if-chart-grid: rgba(21, 35, 59, .07);
  --if-chart-accent-soft: rgba(37, 99, 235, .22);
  --if-chart-accent-fade: rgba(37, 99, 235, 0);
  --if-chart-secondary: #7c3aed;
  --if-chart-secondary-soft: rgba(124, 58, 237, .2);
  --if-chart-tooltip-bg: #15233b;
  --if-chart-tooltip-border: #15233b;
  --if-chart-tooltip-text: #ffffff;

  /* Legacy IntelFinder tokens, used by every page stylesheet */
  --bg-primary: var(--if-canvas);
  --bg-secondary: var(--if-surface-2);
  --bg-tertiary: var(--if-surface-3);
  --bg-card: var(--if-surface);
  --bg-card-hover: var(--if-hover);
  --bg-input: var(--if-input-bg);
  --bg-navbar: var(--if-topbar-bg);
  --border-primary: var(--if-border);
  --border-secondary: var(--if-border-strong);
  --border-subtle: rgba(21, 35, 59, .07);
  --text-primary: var(--if-ink);
  --text-secondary: var(--if-ink-2);
  --text-muted: var(--if-muted);
  --text-heading: var(--if-ink);
  --accent: var(--if-accent);
  --accent-hover: var(--if-accent-hover);
  --accent-glow: rgba(37, 99, 235, .16);
  --accent-subtle: rgba(37, 99, 235, .08);
  --success: #1f9d61;
  --warning: #d98a0b;
  --danger: #d6404a;
  --info: #0891b2;
  --shadow-sm: 0 1px 2px rgba(30, 64, 125, .08);
  --shadow-md: var(--if-shadow);
  --shadow-lg: 0 12px 32px -10px rgba(30, 64, 125, .2);
  --shadow-glow: 0 0 0 3px rgba(37, 99, 235, .12);
}

/* --- Dark theme --- */
html[data-theme="dark"] {
  color-scheme: dark;

  --if-canvas: #0b1120;
  --if-surface: #111a2b;
  --if-surface-2: #0f1727;
  --if-surface-3: #172238;
  --if-ink: #e6edf7;
  --if-ink-2: #b8c4d6;
  --if-muted: #8e9db3;
  --if-subtle: #6b7b92;
  --if-border: #1f2b3f;
  --if-border-strong: #2a3a54;
  --if-accent: #5b9cf8;
  --if-accent-hover: #7cb0fa;
  --if-accent-2: #3b82f6;
  --if-accent-rgb: 91, 156, 248;
  --if-tint: rgba(59, 130, 246, .15);
  --if-tint-2: rgba(59, 130, 246, .08);
  --if-hover: rgba(59, 130, 246, .07);
  --if-overlay-1: rgba(255, 255, 255, .025);
  --if-overlay-2: rgba(255, 255, 255, .05);
  --if-overlay-3: rgba(255, 255, 255, .09);
  --if-panel-gradient: linear-gradient(135deg, #131d30 20%, #16233c);
  --if-panel-border: #22324b;
  --if-panel-footer: rgba(0, 0, 0, .12);
  --if-row-border: #1d2a40;
  --if-shadow: 0 8px 22px -10px rgba(0, 0, 0, .6), 0 1px 3px rgba(0, 0, 0, .2);
  --if-shadow-hover: 0 14px 30px -10px rgba(0, 0, 0, .7), 0 2px 4px rgba(0, 0, 0, .25);
  --if-shadow-lg: 0 24px 70px rgba(0, 0, 0, .55);
  --if-focus: #93c5fd;
  --if-shadow-rgb: 0, 0, 0;
  --if-shadow-k: 1;
  --if-topbar-bg: rgba(11, 17, 32, .86);
  --if-sidebar-bg: #0e1626;
  --if-sidebar-brand-bg: linear-gradient(180deg, #111c31, #0e1626 80%);
  --if-input-bg: #0f1828;
  --if-input-border: #2a3a54;
  --if-backdrop: #02050c;
  --if-canvas-glow: radial-gradient(ellipse at 38% 0%, rgba(59, 130, 246, .10), transparent 48%), radial-gradient(ellipse at 100% 12%, rgba(99, 102, 241, .08), transparent 42%);

  --if-success: #4ade80;
  --if-success-bg: rgba(34, 197, 94, .12);
  --if-success-border: rgba(34, 197, 94, .26);
  --if-warning: #fbbf24;
  --if-warning-bg: rgba(245, 158, 11, .12);
  --if-warning-border: rgba(245, 158, 11, .26);
  --if-danger: #f87171;
  --if-danger-bg: rgba(239, 68, 68, .12);
  --if-danger-border: rgba(239, 68, 68, .26);
  --if-info: #67e8f9;
  --if-info-bg: rgba(6, 182, 212, .12);
  --if-info-border: rgba(6, 182, 212, .26);
  --if-violet: #c4b5fd;
  --if-violet-bg: rgba(139, 92, 246, .12);
  --if-violet-border: rgba(167, 139, 250, .24);
  --if-cyan: #22d3ee;
  --if-pink: #f472b6;
  --if-p1: #34d399;
  --if-p2: #38bdf8;
  --if-p3: #fbbf24;
  --if-p4: #fb923c;
  --if-p5: #f87171;
  --if-status-open: #e5484d;
  --if-status-remediation: #d97706;
  --if-status-closed: #16a34a;
  --if-status-neutral: #64748b;

  --if-chart-text: #7d8ca3;
  --if-chart-label: #a9b6c8;
  --if-chart-grid: rgba(148, 163, 184, .08);
  --if-chart-accent-soft: rgba(59, 130, 246, .32);
  --if-chart-accent-fade: rgba(59, 130, 246, 0);
  --if-chart-secondary: #a855f7;
  --if-chart-secondary-soft: rgba(168, 85, 247, .3);
  --if-chart-tooltip-bg: #1e293b;
  --if-chart-tooltip-border: #334155;
  --if-chart-tooltip-text: #f1f5f9;

  --bg-primary: var(--if-canvas);
  --bg-secondary: var(--if-surface-2);
  --bg-tertiary: var(--if-surface-3);
  --bg-card: var(--if-surface);
  --bg-card-hover: #17243b;
  --bg-input: var(--if-input-bg);
  --bg-navbar: var(--if-topbar-bg);
  --border-primary: var(--if-border);
  --border-secondary: var(--if-border-strong);
  --border-subtle: rgba(255, 255, 255, .06);
  --text-primary: var(--if-ink);
  --text-secondary: var(--if-ink-2);
  --text-muted: var(--if-muted);
  --text-heading: var(--if-ink);
  --accent: var(--if-accent);
  --accent-hover: var(--if-accent-hover);
  --accent-glow: rgba(59, 130, 246, .25);
  --accent-subtle: rgba(59, 130, 246, .1);
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #06b6d4;
}

/* --- Base --- */
html[data-theme] { min-height: 100%; }
body.if-app {
  min-height: 100vh;
  color: var(--if-ink);
  background-color: var(--if-canvas);
  font-family: 'Manrope', 'Inter', 'Segoe UI', sans-serif;
  font-size: 13px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.if-shell { background-image: var(--if-body-gradient, var(--if-panel-gradient)); background-attachment: fixed; }
.if-app h1, .if-app h2, .if-app h3, .if-app h4, .if-app h5, .if-app h6,
.if-app .modal-content, .if-app .btn, .if-app .form-control, .if-app .popover, .if-app .tooltip {
  font-family: 'Manrope', 'Inter', 'Segoe UI', sans-serif;
}
.if-app h1, .if-app h2, .if-app h3 { font-weight: 750; letter-spacing: -.03em; color: var(--if-ink); }
.if-app h4, .if-app h5, .if-app h6 { font-weight: 700; color: var(--if-ink); }
.if-app h1 { font-size: 30px; }
.if-app h3 { font-size: 20px; }
.if-app a { color: var(--if-accent); }
.if-app a:hover, .if-app a:focus { color: var(--if-accent-hover); }
.if-app a:focus-visible, .if-app button:focus-visible, .if-app input:focus-visible,
.if-app select:focus-visible, .if-app textarea:focus-visible, .if-app [tabindex]:focus-visible {
  outline: 3px solid var(--if-focus) !important;
  outline-offset: 2px;
}
.if-app ::selection { background: var(--if-accent); color: #fff; }
.if-app hr { border-top-color: var(--if-border); }
.if-app .text-muted { color: var(--if-muted); }
.if-app .text-danger { color: var(--if-danger); }
.if-app .text-success { color: var(--if-success); }
.if-app .text-warning { color: var(--if-warning); }
.if-app .text-info { color: var(--if-info); }
.if-app .text-primary { color: var(--if-accent); }
.if-app #text-header, .if-app .header-text { color: var(--if-ink); font-weight: 750; letter-spacing: -.02em; }

/* Theme toggle icons */
.if-theme-icon-light { display: none; }
html[data-theme="dark"] .if-theme-icon-dark { display: none; }
html[data-theme="dark"] .if-theme-icon-light { display: inline-block; }

/* --- Shell: sidebar, top bar, content --- */
.if-skip-link { position: fixed; top: -80px; left: 260px; z-index: 2200; padding: 12px 18px; background: var(--if-surface); border: 1px solid var(--if-border); border-radius: 8px; }
.if-skip-link:focus { top: 10px; }
.if-shell #screen-container.logged-in { flex: 1; padding: 0; margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
.if-shell .content-container.body-container {
  flex: 1;
  margin: 0 0 0 248px;
  padding: 102px 36px 28px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.if-shell .content-container.body-container > .if-shell-footer { margin-top: auto; }

.if-shell .nav-side-menu {
  position: fixed; top: 0; left: 0; z-index: 1060;
  display: flex; flex-direction: column;
  width: 248px; height: 100vh; height: 100dvh;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--if-sidebar-bg);
  border-right: 1px solid var(--if-border);
  color: var(--if-ink);
}
.if-shell .nav-side-menu .brand { padding: 26px 20px 18px; background: var(--if-sidebar-brand-bg); line-height: normal; }
.if-brand { display: block; width: fit-content; margin: 0 4px 24px; text-decoration: none !important; }
.if-brand-logo { display: block; width: 172px; height: auto; }
.if-brand-partner .if-brand-logo { width: auto; max-width: 180px; max-height: 44px; }
.if-workspace { display: flex; align-items: center; gap: 11px; background: var(--if-panel-gradient); border: 1px solid var(--if-panel-border); border-radius: 9px; padding: 11px; margin-bottom: 16px; font-size: 12px; }
.if-workspace > span:last-child { min-width: 0; }
.if-workspace strong { display: block; color: var(--if-ink); font-size: 12px; font-weight: 750; overflow-wrap: anywhere; line-height: 1.35; }
.if-workspace small { display: block; margin-top: 3px; font-size: 10px; color: var(--if-muted); }
.if-workspace-icon { display: grid; place-items: center; width: 33px; height: 33px; background: var(--if-tint); border-radius: 7px; flex-shrink: 0; color: var(--if-accent); font-size: 14px; }
.if-shell #sidebar-request-takedown { width: 100%; display: flex; justify-content: center; align-items: center; gap: 9px; padding: 10px; font-size: 12px; }
.if-shell .menu-list { padding: 0 14px 12px; }
.if-nav-section { padding: 16px 15px 6px; font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--if-subtle); }
.if-shell .nav-side-menu ul { margin: 0; padding: 0; list-style: none; }
.if-shell .nav-side-menu li { margin: 2px 0; padding: 0; border: 0; background: transparent; }
.if-shell .nav-side-menu li a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 15px; border-radius: 7px;
  color: var(--if-muted); line-height: 20px; font-size: 12.5px; font-weight: 600;
  text-decoration: none; transition: background-color .15s, color .15s;
}
.if-shell .nav-side-menu li a i { width: 18px; text-align: center; color: var(--if-subtle); font-size: 15px; transition: color .15s; }
.if-shell .nav-side-menu li a:hover { background: var(--if-hover); color: var(--if-accent); }
.if-shell .nav-side-menu li a:hover i { color: var(--if-accent); }
.if-shell .nav-side-menu li.active a {
  background: linear-gradient(100deg, var(--if-tint), var(--if-tint-2));
  color: var(--if-accent); font-weight: 800;
  box-shadow: inset 3px 0 0 var(--if-accent);
}
.if-shell .nav-side-menu li.active a i { color: var(--if-accent); }
.if-sidebar-footer { display: flex; gap: 6px; align-items: center; margin: auto 14px 0; border-top: 1px solid var(--if-border); padding: 16px 0 18px; }
.if-sidebar-user { display: flex; gap: 10px; align-items: center; min-width: 0; flex: 1; padding: 6px 8px; border-radius: 8px; text-decoration: none !important; }
.if-sidebar-user:hover, .if-sidebar-user.active { background: var(--if-hover); }
.if-sidebar-user-copy { min-width: 0; }
.if-sidebar-user strong { display: block; color: var(--if-ink); font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.if-sidebar-user small { display: block; color: var(--if-muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.if-avatar { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--if-tint); color: var(--if-accent); font-size: 12px; font-weight: 800; }
.if-signout { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 7px; color: var(--if-muted) !important; font-size: 14px; flex-shrink: 0; }
.if-signout:hover { background: var(--if-danger-bg); color: var(--if-danger) !important; }

.if-topbar {
  position: fixed; left: 248px; right: 0; top: 0; z-index: 1030;
  height: 70px; padding: 0 36px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--if-topbar-bg);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--if-border);
  box-shadow: 0 3px 14px -8px rgba(30, 64, 125, .14);
}
.if-breadcrumb { display: flex; gap: 14px; align-items: center; color: var(--if-muted); font-size: 11.5px; min-width: 0; }
.if-breadcrumb > i { font-size: 8px; color: var(--if-subtle); }
.if-breadcrumb strong { font-weight: 700; color: var(--if-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.if-topbar-actions { display: flex; align-items: center; gap: 12px; }
.if-icon-button {
  position: relative; display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  color: var(--if-muted) !important; background: transparent;
  border: 1px solid var(--if-border); border-radius: 50%;
  font-size: 14px; text-decoration: none !important;
  transition: background-color .15s, color .15s, border-color .15s;
}
.if-icon-button:hover, .if-icon-button.active { color: var(--if-accent) !important; background: var(--if-tint); border-color: transparent; }
.if-va-button .va-messages-icon { color: inherit; }
.if-va-button #va-messages-number-container { position: absolute; top: -5px; right: -7px; }
.if-va-button .va-messages-number { display: inline-block; min-width: 18px; padding: 2px 5px; border-radius: 9px; background: var(--if-accent); color: #fff; font-size: 9.5px; font-weight: 800; line-height: 1.3; border: 2px solid var(--if-surface); }
.if-va-button .va-messages-number.is-zero { display: none; }
.if-profile-menu { position: relative; }
.if-profile { display: flex; align-items: center; gap: 9px; padding: 3px 10px 3px 3px; border-radius: 20px; font-size: 12px; font-weight: 650; color: var(--if-ink) !important; text-decoration: none !important; }
.if-profile:hover, .if-profile-menu.open .if-profile { background: var(--if-hover); }
.if-profile > .fa-chevron-down { font-size: 9px; color: var(--if-subtle); }
.if-profile-name { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.if-menu-toggle, .if-nav-scrim { display: none; }

/* The gap above the divider is padding on the footer, so it holds even when the footer is pushed down with margin-top: auto. */
.if-shell-footer { padding: 32px 0 0; font-size: 11px; color: var(--if-muted); background: none; width: auto; border: 0; }
.if-shell-footer-inner { display: flex; justify-content: space-between; gap: 15px; padding-top: 16px; border-top: 1px solid var(--if-border); }
.if-shell-footer #tos-link { color: var(--if-muted); text-decoration: underline; }

/* Signed-out top bar (sign-up, reset, OTP, terms) */
.if-auth .navbar-default { background-color: var(--if-topbar-bg) !important; border-bottom: 1px solid var(--if-border) !important; box-shadow: 0 3px 14px -8px rgba(30, 64, 125, .12); }
.if-auth .navbar-default .navbar-nav > li > a { color: var(--if-muted) !important; font-weight: 650; }
.if-auth .navbar-default .navbar-nav > li > a:hover { color: var(--if-accent) !important; background: var(--if-hover) !important; }
.if-auth .if-theme-toggle-nav { font-size: 14px; }
.if-auth footer { background: var(--if-surface); border-top: 1px solid var(--if-border); color: var(--if-muted); font-size: 12px; }
html[data-theme] .if-auth #tos-link { color: var(--if-muted); }

/* Opening a modal blurs the workspace behind it */
.if-shell.modal-open .if-topbar { -webkit-filter: blur(4px); filter: blur(4px); }
.if-shell.modal-open, .if-shell .modal-open { padding-right: 0 !important; }
.if-app .modal-backdrop { z-index: 2000; background: var(--if-backdrop); }
.if-app .modal-backdrop.in { opacity: .45; }

/* --- Buttons --- */
.if-app .btn { border-radius: 7px !important; padding: 8px 14px; font-size: 12.5px; font-weight: 700; letter-spacing: 0; transition: background-color .18s, border-color .18s, box-shadow .18s, transform .18s, color .18s; box-shadow: none; }
.if-app .btn-sm { padding: 5px 10px; font-size: 11.5px; }
.if-app .btn-xs { padding: 2px 7px; font-size: 11px; }
.if-app .btn-lg { padding: 11px 20px; font-size: 14px; }
.if-app .btn:active { transform: translateY(1px); }
.if-app .btn-primary { background: linear-gradient(115deg, var(--if-accent), var(--if-accent-2)) !important; color: #fff !important; border: 1px solid var(--if-accent); box-shadow: 0 4px 10px rgba(var(--if-accent-rgb), .18), inset 0 1px 0 rgba(255, 255, 255, .16); }
.if-app .btn-primary:hover, .if-app .btn-primary:focus { background: linear-gradient(115deg, var(--if-accent-hover), var(--if-accent)) !important; border-color: var(--if-accent-hover); box-shadow: 0 6px 16px rgba(var(--if-accent-rgb), .26); }
html[data-theme="dark"] .if-app .btn-primary, html[data-theme="dark"] .if-app .btn-primary:hover { background: linear-gradient(115deg, #2563eb, #3b82f6) !important; border-color: #3b82f6; }
.if-app .btn-default { background: var(--if-surface) !important; color: var(--if-ink) !important; border: 1px solid var(--if-border-strong); }
.if-app .btn-default:hover, .if-app .btn-default:focus { background: var(--if-tint) !important; border-color: var(--if-panel-border); color: var(--if-accent) !important; }
.if-app .btn-default.active, .if-app .btn-default:active, .if-app .open > .dropdown-toggle.btn-default { background: var(--if-tint) !important; color: var(--if-accent) !important; border-color: var(--if-panel-border); box-shadow: none; }
.if-app .btn-success { background: var(--success); border-color: var(--success); color: #fff; }
.if-app .btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.if-app .btn-warning { background: var(--warning); border-color: var(--warning); color: #fff; }
.if-app .btn-info { background: var(--info); border-color: var(--info); color: #fff; }
.if-app .btn-success:hover, .if-app .btn-danger:hover, .if-app .btn-warning:hover, .if-app .btn-info:hover { filter: brightness(.94); color: #fff; }
.if-app .btn-link { color: var(--if-accent); }
.if-app .btn:disabled, .if-app .btn[disabled] { opacity: .5; cursor: not-allowed; }
.if-app .sso-btn { background: var(--if-surface) !important; border: 1px solid var(--if-border-strong); color: var(--if-ink); }
.if-app .sso-btn:hover { background: var(--if-tint) !important; border-color: var(--if-panel-border); color: var(--if-accent); }

/* --- Forms --- */
.if-app .form-control {
  background-color: var(--if-input-bg) !important;
  color: var(--if-ink);
  border: 1px solid var(--if-input-border);
  border-radius: 6px;
  font-size: 13px;
  box-shadow: none;
  min-height: 36px;
  height: 36px;
  padding: 7px 11px;
}
.if-app select.form-control[multiple], .if-app select.form-control[size] { height: auto; }
.if-app textarea.form-control { height: auto; min-height: 90px; }
.if-app .form-control:focus { border-color: var(--if-accent) !important; box-shadow: 0 0 0 3px rgba(var(--if-accent-rgb), .12) !important; }
.if-app .form-control::placeholder { color: var(--if-subtle); }
.if-app .form-control[disabled], .if-app .form-control[readonly] { background-color: var(--if-surface-3) !important; color: var(--if-muted); }
.if-app label, .if-app .control-label, .if-app .form-group label { font-weight: 650; font-size: 12px; color: var(--if-ink-2); }
.if-app .checkbox label, .if-app .radio label { font-weight: 500; }
.if-app input[type="checkbox"], .if-app input[type="radio"] { accent-color: var(--if-accent); }
.if-app .input-group-addon { background: var(--if-surface-3); color: var(--if-muted); border-color: var(--if-input-border); }
.if-app .help-block { color: var(--if-muted); }
.if-app .error-input { border-color: var(--if-danger) !important; box-shadow: 0 0 0 3px rgba(214, 64, 74, .14) !important; }
html[data-theme="dark"] .if-app input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.8); }

/* --- Panels and cards --- */
.if-app .panel {
  background: var(--if-panel-gradient) !important;
  border: 1px solid var(--if-panel-border);
  border-radius: 12px;
  box-shadow: var(--if-shadow);
  overflow: hidden;
}
.if-app .panel:hover { box-shadow: var(--if-shadow); }
.if-app .panel > .panel-heading, .if-app .panel > .panel-body, .if-app .panel > .panel-footer,
.if-app .panel-heading, .if-app .panel-body, .if-app .panel-footer { background-color: transparent !important; }
.if-app .panel-heading { padding: 16px 20px; color: var(--if-ink); border-bottom: 1px solid var(--if-panel-border) !important; border-radius: 0; }
.if-app .panel-primary > .panel-heading, .if-app .panel-default > .panel-heading { background: transparent !important; color: var(--if-ink); }
.if-app .panel-heading header, .if-app .panel-title { color: var(--if-ink); font-weight: 750; }
.if-app .panel-body { padding: 20px; }
.if-app .panel-footer { background: var(--if-panel-footer) !important; border-top: 1px solid var(--if-panel-border) !important; padding: 12px 20px; color: var(--if-muted); }
.if-app .panel .panel { box-shadow: none; }
.if-app .panel-content { border-color: var(--if-panel-border); border-radius: 10px; }
.if-app .well { background: var(--if-surface-2); border: 1px solid var(--if-border); border-radius: 10px; box-shadow: none; color: var(--if-ink); }

/* --- Tables --- */
.if-app .table { color: var(--if-ink); font-size: 12.5px; }
.if-app .table > thead > tr > th, .if-app .table > tbody > tr > th, .if-app .table > tr > th, .if-app .table th {
  padding: 12px 16px;
  background: var(--if-panel-footer);
  color: var(--if-muted);
  font-size: 11px;
  font-weight: 750;
  text-transform: none;
  letter-spacing: .01em;
  border: 0;
  border-bottom: 1px solid var(--if-panel-border);
}
.if-app .table > tbody > tr > td, .if-app .table > tr > td, .if-app .table td {
  padding: 13px 16px;
  color: var(--if-ink);
  border-top: 0;
  border-bottom: 1px solid var(--if-row-border);
  vertical-align: middle;
}
.if-app .table > tbody > tr:last-child > td { border-bottom: 0; }
.if-app .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--if-overlay-1); }
.if-app .table-hover > tbody > tr:hover, .if-app .table tr.pointer-hover:hover > td { background-color: var(--if-hover); }
.if-app .table-bordered, .if-app .table-bordered > tbody > tr > td, .if-app .table-bordered > thead > tr > th { border-color: var(--if-row-border); }
.if-table-scroll { width: 100%; overflow-x: auto; border: 1px solid var(--if-panel-border); border-radius: 10px; background: var(--if-panel-gradient); box-shadow: var(--if-shadow); }
.if-table-scroll > .table { margin: 0; min-width: 680px; }

/* --- Tabs, pills, pagination --- */
.if-app .nav-tabs { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding-bottom: 4px; margin-bottom: 14px; }
.if-app .nav-tabs > li { float: none; margin: 0; }
.if-app .nav-tabs > li > a, .if-app .nav-tabs a { color: var(--if-muted); background: transparent; border: 0 !important; border-radius: 7px; padding: 8px 14px; font-size: 12.5px; font-weight: 650; margin: 0; }
.if-app .nav-tabs > li > a:hover { background: var(--if-overlay-2); color: var(--if-ink); }
.if-app .nav-tabs > li.active > a, .if-app .nav-tabs > li.active > a:hover, .if-app .nav-tabs > li.active > a:focus { border: 0 !important; color: var(--if-accent); background: var(--if-tint); font-weight: 750; }
.if-app .nav-pills > li > a { border-radius: 7px; color: var(--if-muted); font-weight: 650; }
.if-app .nav-pills > li.active > a, .if-app .nav-pills > li.active > a:hover { background: var(--if-tint); color: var(--if-accent); }
.if-app .pagination { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.if-app .pagination > li > a, .if-app .pagination > li > span { border: 1px solid var(--if-border) !important; color: var(--if-muted); border-radius: 6px !important; background: var(--if-surface); margin: 0; font-weight: 650; font-size: 12px; }
.if-app .pagination > li > a:hover { background: var(--if-tint); color: var(--if-accent); border-color: var(--if-panel-border) !important; }
.if-app .pagination > .active > a, .if-app .pagination > .active > a:hover, .if-app .pagination > .active > span { background: var(--if-accent); color: #fff; border-color: var(--if-accent) !important; }

/* --- Labels, badges, alerts --- */
.if-app .label { border-radius: 4px; font-weight: 700; font-size: 10.5px; padding: 3px 7px; letter-spacing: .01em; }
.if-app .label-default { background: var(--if-surface-3); color: var(--if-muted); }
.if-app .label-primary { background: var(--if-tint); color: var(--if-accent); }
.if-app .label-info { background: var(--if-info-bg); color: var(--if-info); }
.if-app .label-success { background: var(--if-success-bg); color: var(--if-success); }
.if-app .label-danger { background: var(--if-danger-bg); color: var(--if-danger); }
.if-app .label-warning { background: var(--if-warning-bg); color: var(--if-warning); }
.if-app .badge { background: var(--if-surface-3); color: var(--if-muted); font-weight: 750; }
.if-app .alert { border-radius: 9px; padding: 13px 17px; font-size: 12.5px; }
.if-app .alert-info { background: var(--if-info-bg); border: 1px solid var(--if-info-border); color: var(--if-info); }
.if-app .alert-success { background: var(--if-success-bg); border: 1px solid var(--if-success-border); color: var(--if-success); }
.if-app .alert-warning { background: var(--if-warning-bg); border: 1px solid var(--if-warning-border); color: var(--if-warning); }
.if-app .alert-danger { background: var(--if-danger-bg); border: 1px solid var(--if-danger-border); color: var(--if-danger); }
.if-app .alert a { color: inherit; font-weight: 750; text-decoration: underline; }
.if-app .alert .btn-primary { color: #fff !important; text-decoration: none; }
.if-app code { background: var(--if-surface-3); color: var(--if-pink); border: 1px solid var(--if-border); border-radius: 5px; }
.if-app pre { background: var(--if-surface-2); color: var(--if-ink); border: 1px solid var(--if-border); border-radius: 7px; font-size: 12px; line-height: 1.6; }

/* --- Modals, dropdowns, popovers, tooltips --- */
.if-app .modal { z-index: 2002; }
.if-app .modal-content { background: var(--if-surface) !important; background-image: var(--if-panel-gradient) !important; border: 1px solid var(--if-panel-border); border-radius: 13px !important; box-shadow: var(--if-shadow-lg); overflow: hidden; color: var(--if-ink); }
.if-app .modal-header { background: transparent !important; border-radius: 0 !important; border-bottom: 1px solid var(--if-panel-border); padding: 18px 24px; }
.if-app .modal-body { background: transparent !important; padding: 22px 24px; }
.if-app .modal-footer { background: var(--if-panel-footer) !important; border-radius: 0 !important; border-top: 1px solid var(--if-panel-border); padding: 14px 24px; }
.if-app .modal-title { font-size: 16px; font-weight: 750; color: var(--if-ink); letter-spacing: -.01em; }
.if-app .modal .close { color: var(--if-muted); opacity: .8; text-shadow: none; }
.if-app .modal .close:hover { color: var(--if-ink); opacity: 1; }
.if-app .dropdown-menu { background-color: var(--if-surface) !important; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--if-border); border-radius: 9px !important; box-shadow: 0 10px 28px rgba(21, 35, 59, .12); padding: 6px; }
html[data-theme="dark"] .if-app .dropdown-menu { box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
.if-app .dropdown-menu > li > a { color: var(--if-ink-2) !important; border-radius: 6px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; }
.if-app .dropdown-menu > li > a:hover, .if-app .dropdown-menu > li > a:focus { background: var(--if-hover) !important; color: var(--if-accent) !important; }
.if-app .dropdown-menu > .active > a, .if-app .dropdown-menu > .active > a:hover { background: var(--if-tint) !important; color: var(--if-accent) !important; }
.if-app .dropdown-menu .divider { background-color: var(--if-border); }
.if-app .dropdown-header { color: var(--if-subtle); }
.if-app .popover { background: var(--if-surface); border: 1px solid var(--if-border); color: var(--if-ink); box-shadow: 0 10px 28px rgba(21, 35, 59, .14); border-radius: 9px; }
.if-app .popover-title { background: var(--if-surface-2); border-bottom: 1px solid var(--if-border); color: var(--if-ink); }
.if-app .popover.top > .arrow:after { border-top-color: var(--if-surface); }
.if-app .popover.bottom > .arrow:after { border-bottom-color: var(--if-surface); }
.if-app .popover.left > .arrow:after { border-left-color: var(--if-surface); }
.if-app .popover.right > .arrow:after { border-right-color: var(--if-surface); }
.if-app .tooltip-inner { background: var(--if-chart-tooltip-bg); color: var(--if-chart-tooltip-text); border: 1px solid var(--if-chart-tooltip-border); border-radius: 6px; font-size: 11.5px; }
.if-app .tooltip.top .tooltip-arrow { border-top-color: var(--if-chart-tooltip-bg); }
.if-app .tooltip.bottom .tooltip-arrow { border-bottom-color: var(--if-chart-tooltip-bg); }
.if-app .ui-widget-content { background: var(--if-surface); color: var(--if-ink); border-color: var(--if-border); }

/* Scrollbars */
.if-app ::-webkit-scrollbar-track { background: var(--if-canvas); }
.if-app ::-webkit-scrollbar-thumb { background: var(--if-border-strong); border-radius: 4px; }
.if-app ::-webkit-scrollbar-thumb:hover { background: var(--if-subtle); }

/* --- Shared status and priority colours --- */
.if-app .very-low-priority { color: var(--if-p1); }
.if-app .low-priority { color: var(--if-p2); }
.if-app .medium-priority { color: var(--if-p3); }
.if-app .high-priority { color: var(--if-p4); }
.if-app .urgent-priority { color: var(--if-p5); }
.if-app .va-messages-icon { color: var(--if-violet); }

/* --- Shared list cards (alerts, takedowns, messages, suggestions) --- */
.if-app #alerts-list > li, .if-app #takedowns-list > li, .if-app .takedown-div, .if-app #va-messages > li, .if-app #suggestions-list > li {
  background: var(--if-panel-gradient) !important;
  border: 1px solid var(--if-panel-border) !important;
  border-radius: 10px;
  box-shadow: none;
  transform: none;
  transition: box-shadow .18s, border-color .18s;
}
.if-app #alerts-list > li:hover, .if-app #takedowns-list > li:hover, .if-app .takedown-div:hover, .if-app #va-messages > li:hover, .if-app #suggestions-list > li:hover {
  background: var(--if-panel-gradient) !important;
  border-color: var(--if-panel-border) !important;
  box-shadow: var(--if-shadow);
  transform: none;
}
.if-app #alerts-list > li.selected-alert, .if-app #takedowns-list > li.selected-takedown {
  background: linear-gradient(135deg, var(--if-tint) 10%, var(--if-tint-2)) !important;
  border-color: var(--if-accent) !important;
  box-shadow: 0 0 0 1px var(--if-accent), var(--if-shadow) !important;
}
.if-app .alert-title, .if-app .takedown-title { color: var(--if-ink); font-weight: 700; }
.if-app #alerts-list .alert-title { color: var(--if-accent); }
.if-app .alert-details, .if-app .takedown-details { color: var(--if-muted); }
.if-app .icon-container i, .if-app .takedown-icon-container i { color: var(--if-subtle); opacity: 1; }
.if-app .new-alert { background: linear-gradient(180deg, var(--if-accent), rgba(var(--if-accent-rgb), .45)); box-shadow: 0 0 8px rgba(var(--if-accent-rgb), .3); }

/* Type icon tile (CyberATS) */
.if-type-icon {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 44px; height: 44px;
  border: 1px solid var(--if-panel-border); border-radius: 12px;
  background: linear-gradient(145deg, var(--if-tint-2), var(--if-tint));
  color: var(--if-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 3px 7px rgba(30, 64, 125, .07);
  font-size: 19px;
  --fa-primary-color: var(--if-accent-hover); --fa-secondary-color: var(--if-accent); --fa-secondary-opacity: .5;
}
html[data-theme="dark"] .if-type-icon { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }

/* ==========================================================================
   Dashboard (index.php)
   ========================================================================== */
.if-page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.if-page-heading h1 { margin: 0 0 6px; font-size: 30px; line-height: 1.25; }
.if-page-heading p { color: var(--if-muted); font-size: 12.5px; margin: 0; }
.if-heading-date { flex-shrink: 0; padding-top: 4px; font-size: 11px; text-align: right; color: var(--if-muted); }
.if-heading-date strong { display: block; color: var(--if-ink); font-weight: 700; font-size: 12px; }
.if-notices { display: grid; gap: 10px; margin-bottom: 20px; }
.if-notices > .row { margin: 0; }
.if-notices > .row > [class*="col-"] { padding: 0; }
.if-notices .alert { margin: 0; display: flex; align-items: center; gap: 10px; }
.if-notices .alert .pull-right { float: none !important; margin-left: auto; display: flex; align-items: center; gap: 10px; order: 2; flex-shrink: 0; }

.if-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 24px; }
.if-metric {
  position: relative; display: block; padding: 21px 23px;
  border: 1px solid var(--if-panel-border); border-radius: 12px;
  background: var(--if-panel-gradient); box-shadow: var(--if-shadow);
  color: var(--if-ink) !important; text-decoration: none !important;
  transition: box-shadow .2s, border-color .2s;
}
/* Hover never moves a panel: a moving element gets its own compositing layer in Safari, which re-renders
   it and the panels around it (their text visibly shifts). Border and shadow only, which are repainted in place. */
@media (hover: hover) { a.if-metric:hover { border-color: rgba(var(--if-accent-rgb), .45); box-shadow: var(--if-shadow-hover); } }
.if-metric-label { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--if-muted); font-size: 11.5px; font-weight: 650; }
.if-metric-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--if-tint); color: var(--if-accent); font-size: 13px; flex-shrink: 0; }
.if-metric-number { display: block; margin: 8px 0 4px; font-size: 34px; font-weight: 800; line-height: 1.3; letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--if-ink); }
.if-metric-note { color: var(--if-muted); font-size: 11px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.if-metric-note strong { color: var(--if-ink); font-weight: 750; font-variant-numeric: tabular-nums; }
.if-metric-alert { --if-panel-gradient: linear-gradient(135deg, var(--if-surface) 20%, var(--if-danger-bg)); --if-panel-border: var(--if-danger-border); }
.if-metric-alert .if-metric-icon { background: var(--if-status-open); color: #fff; }
.if-metric-new .if-metric-icon { background: var(--if-accent); color: #fff; }
.if-metric-remediation .if-metric-icon { background: var(--if-status-remediation); color: #fff; }
.if-metric-takedown .if-metric-icon { background: var(--if-violet-bg); color: var(--if-violet); }
.if-metric-priority { display: inline-flex; align-items: center; gap: 5px; font-weight: 750; }

/* Same 4-column grid as the metric cards, so the side cards line up with the last metric card. */
.if-insights { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 26px; }
.if-insights > .if-activity-card { grid-column: span 3; }
.if-card { min-width: 0; padding: 22px 24px; border: 1px solid var(--if-panel-border); border-radius: 12px; background: var(--if-panel-gradient); box-shadow: var(--if-shadow); }
.if-activity-card { display: flex; flex-direction: column; }
.if-activity-card .if-chart-box { flex: 1; min-height: 240px; }
.if-activity-card { box-shadow: 0 10px 28px -10px rgba(30, 64, 125, .18), 0 1px 3px rgba(30, 64, 125, .03); }
html[data-theme="dark"] .if-activity-card { box-shadow: var(--if-shadow); }
.if-card-header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 14px; position: relative; }
.if-card-header h2 { margin: 0 0 3px; font-size: 16px !important; font-weight: 750; color: var(--if-ink); }
.if-card-header p { margin: 0; color: var(--if-muted); font-size: 11px; }
.if-period { flex-shrink: 0; padding: 4px 9px; font-size: 10.5px; border: 1px solid var(--if-border); border-radius: 5px; color: var(--if-muted); white-space: nowrap; background: var(--if-surface); }
.if-card-tool { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--if-border); background: var(--if-surface); color: var(--if-muted); cursor: pointer; flex-shrink: 0; }
.if-card-tool:hover { color: var(--if-accent); background: var(--if-tint); }
.if-chart-box { position: relative; height: 240px; }
.if-chart-box.is-short { height: 200px; }
.if-chart-footer { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--if-border); padding-top: 14px; margin-top: 16px; font-size: 11px; color: var(--if-muted); }
.if-chart-footer strong { color: var(--if-ink); font-weight: 750; }
.if-side-stack { display: grid; gap: 16px; align-content: start; }
.if-compact-card { padding: 19px 21px; }
.if-compact-card h2 { margin: 0 0 12px; font-size: 14px !important; font-weight: 750; color: var(--if-ink); }
.if-card-link { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 8px 0; font-size: 12px; color: var(--if-muted) !important; text-decoration: none !important; }
.if-card-link + .if-card-link { border-top: 1px solid var(--if-row-border); }
.if-card-link > span { display: inline-flex; align-items: center; gap: 9px; }
.if-card-link strong { color: var(--if-ink); font-variant-numeric: tabular-nums; font-weight: 750; }
.if-card-link .fa-chevron-right { margin-left: 8px; font-size: 8px; color: var(--if-subtle); }
a.if-card-link:hover { color: var(--if-accent) !important; }
.if-priority-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.if-priority-bar { display: flex; height: 8px; border-radius: 5px; overflow: hidden; background: var(--if-surface-3); margin: 4px 0 12px; }
.if-priority-bar > span { display: block; height: 100%; }
.if-balance { display: flex; gap: 14px; align-items: center; margin: 4px 0 10px; }
.if-balance > i { font-size: 20px; color: var(--if-accent); background: var(--if-tint); padding: 12px; border-radius: 10px; }
.if-balance strong { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.045em; line-height: 1.3; color: var(--if-ink); }
.if-balance small { color: var(--if-muted); font-size: 11px; }
.if-sub-filter { position: relative; }
.if-app .sub-filter-popover { position: absolute; top: 34px; right: 0; z-index: 100; min-width: 230px; max-height: 260px; overflow-y: auto; padding: 10px 14px; background: var(--if-surface); border: 1px solid var(--if-border); border-radius: 9px; box-shadow: 0 10px 28px rgba(21, 35, 59, .14); }
.if-app .sub-filter-label { display: block; margin: 0; padding: 4px 0; font-size: 12px; font-weight: 500; color: var(--if-ink); cursor: pointer; }
.if-app .sub-filter-label:hover { color: var(--if-accent); }

.if-section { margin-bottom: 26px; }
.if-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 13px; }
.if-section-heading h2 { margin: 0; font-size: 17px !important; font-weight: 750; color: var(--if-ink); }
.if-section-heading p { margin: 4px 0 0; font-size: 11px; color: var(--if-muted); }
.if-section-heading > a, .if-section-heading > .if-section-actions { font-size: 12px; font-weight: 700; flex-shrink: 0; display: flex; align-items: center; gap: 12px; }
.if-count { margin-left: 7px; padding: 3px 7px; border-radius: 5px; font-size: 10.5px; font-weight: 750; vertical-align: middle; background: var(--if-surface-3); color: var(--if-muted); letter-spacing: 0; }
.if-section-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.if-empty-state { display: flex; gap: 15px; align-items: center; padding: 26px; border: 1px solid var(--if-panel-border); border-radius: 10px; background: var(--if-panel-gradient); }
.if-empty-state > i { padding: 14px; font-size: 20px; border-radius: 50%; color: var(--if-success); background: var(--if-success-bg); }
.if-empty-state h3 { margin: 0 0 3px !important; font-size: 14px; }
.if-empty-state p { margin: 0; font-size: 12px; color: var(--if-muted); }

.if-app .if-cases { min-width: 720px; }
.if-app .if-cases td { font-size: 12px; }
.if-cases .if-case-id { white-space: nowrap; font-weight: 750; }
.if-threat-target { display: flex; align-items: center; gap: 11px; min-width: 0; }
.if-threat-target .if-type-icon { width: 36px; height: 36px; border-radius: 10px; font-size: 16px; }
.if-target-copy { min-width: 0; }
.if-target-copy strong { display: block; color: var(--if-ink); font-weight: 700; }
.if-target-copy > span { display: block; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--if-muted); font-size: 11.5px; }
.if-date { white-space: nowrap; color: var(--if-muted) !important; font-size: 11.5px !important; }
.if-status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 6px; background: var(--if-status-color, var(--if-status-open)); color: #fff; font-size: 11px; font-weight: 800; line-height: 1.5; white-space: nowrap; box-shadow: 0 2px 5px rgba(21, 35, 59, .12); }
.if-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.if-overview #main-content { animation: if-workspace-arrive .5s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes if-workspace-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   Sign in (light: IntelFinder's motion in light blues)
   ========================================================================== */
html[data-theme="light"] body.if-signin {
  background: #f1f6fd;
  --signin-edge: #d6e2f5;
  --signin-surface: linear-gradient(135deg, #ffffff 20%, #eef4fe);
}
html[data-theme="light"] .if-signin .if-signin-scene { background: #f1f6fd; }
html[data-theme="light"] .if-signin .if-signin-scene::before { background-image: var(--signin-artwork-light, var(--signin-artwork)); }
html[data-theme="light"] .if-signin .if-signin-scene::after { background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .7) 44%, transparent 68%); mix-blend-mode: soft-light; }
html[data-theme="light"] .if-signin .navbar { --bg-navbar: rgba(255, 255, 255, .72); border-bottom-color: rgba(37, 99, 235, .1) !important; }
html[data-theme="light"] .if-signin .login-wrapper,
html[data-theme="light"] .if-signin .login-card {
  background-color: #ffffff;
  box-shadow: 0 24px 80px -20px rgba(33, 72, 140, .24), 0 5px 18px rgba(33, 72, 140, .05), inset 0 1px 0 #ffffff;
}
html[data-theme="light"] .if-signin .login-wrapper::before,
html[data-theme="light"] .if-signin .login-card::before { height: 4px; background: linear-gradient(100deg, #1f5fd8, #60a5fa 55%, #818cf8); }
html[data-theme="light"] .if-signin .login-info-side { background: linear-gradient(145deg, #f3f7ff, #e9f1fe); border-color: #dfe8f6; }
html[data-theme="light"] .if-signin .login-divider span { background: #fbfcff; }
html[data-theme="light"] .if-signin .login-feature-icon { background: linear-gradient(135deg, #dfeafe, #eef4ff); box-shadow: inset 0 1px 0 #fff; color: var(--if-accent); }
html[data-theme="light"] .if-signin .login-subtitle,
html[data-theme="light"] .if-signin .login-cta-note { color: var(--if-muted); }
html[data-theme="light"] .if-signin .partner-badge { color: var(--if-accent); background: var(--if-tint); border-color: var(--if-panel-border); }
html[data-theme="light"] .if-signin :is(a, button):focus-visible { outline-color: var(--if-focus); }
html[data-theme="light"] .if-signin footer { background: rgba(255, 255, 255, .78); border-color: rgba(37, 99, 235, .1); color: var(--if-muted); }
html[data-theme="light"] .if-signin .login-form .form-control { background: #f8fbff !important; border-color: #dbe5f1; }
html[data-theme="light"] .if-signin .login-form .form-control:focus { background: #fff !important; }
.if-signin .login-title { font-size: 28px; font-weight: 800; letter-spacing: -.04em; }
.if-signin .login-actions #sign-in { border-radius: 9px !important; padding: 9px 22px; }
.if-app #error-container:not(:empty) { color: var(--if-danger); background: var(--if-danger-bg); border-color: var(--if-danger-border); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 1600px) { .if-shell .content-container.body-container { padding-left: 48px; padding-right: 48px; } }
@media (max-width: 1199px) {
  .if-shell .content-container.body-container { padding-left: 24px; padding-right: 24px; }
  .if-topbar { padding: 0 24px; }
  .if-metric { padding: 18px; }
  .if-card { padding: 20px; }
}
@media (max-width: 991px) {
  .if-shell .content-container.body-container { margin-left: 0; padding-top: 96px; }
  .if-topbar { left: 0; }
  .if-shell .nav-side-menu { transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility .2s; box-shadow: none; }
  .if-shell.if-nav-open .nav-side-menu { transform: translateX(0); visibility: visible; box-shadow: var(--if-shadow-lg); }
  .if-menu-toggle { display: grid; place-items: center; width: 34px; height: 34px; background: transparent; color: var(--if-ink); border: 1px solid var(--if-border); border-radius: 6px; }
  .if-nav-open .if-nav-scrim { display: block; position: fixed; inset: 0; z-index: 1040; border: 0; background: rgba(21, 35, 59, .3); }
  .if-nav-open .if-menu-toggle { position: relative; z-index: 1070; margin-left: 232px; background: var(--if-surface); }
  .if-nav-open { overflow: hidden; }
  .if-skip-link { left: 15px; }
  .if-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .if-insights, .if-section-split { grid-template-columns: 1fr; }
  .if-insights > .if-activity-card { grid-column: auto; }
  .if-side-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .if-shell .content-container.body-container { padding: 88px 16px 24px; }
  .if-topbar { height: 64px; padding: 0 16px; }
  .if-breadcrumb { gap: 10px; }
  .if-breadcrumb > span, .if-breadcrumb > i { display: none; }
  .if-profile-name, .if-profile > .fa-chevron-down { display: none; }
  .if-profile { padding: 2px; }
  .if-page-heading h1 { font-size: 25px; }
  .if-heading-date { display: none; }
  .if-metrics { gap: 12px; margin-bottom: 18px; }
  .if-metric { padding: 16px; }
  .if-metric-number { font-size: 29px; }
  .if-side-stack { grid-template-columns: 1fr; }
  .if-card { padding: 18px; }
  .if-shell-footer-inner { flex-direction: column; gap: 4px; }
  .if-notices .alert { flex-wrap: wrap; }
}
@media (max-width: 480px) { .if-metrics { grid-template-columns: 1fr 1fr; } .if-metric-number { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) {
  .if-app *, .if-app *::before, .if-app *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Bootstrap's fixed .container widths follow the window, not the space beside the sidebar. */
.if-shell #main-content .container { width: 100% !important; max-width: 1400px; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.if-shell #main-content { overflow-x: clip; }

/* Dashboard: alerts by subscription, a ranked list with inline bars */
.if-rank-list { display: grid; gap: 11px; }
.if-rank-label { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--if-ink-2); margin-bottom: 5px; }
.if-rank-label span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.if-rank-label strong { color: var(--if-ink); font-weight: 750; font-variant-numeric: tabular-nums; }
.if-rank-track { height: 6px; border-radius: 4px; background: var(--if-surface-3); overflow: hidden; }
.if-rank-track > span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--if-accent), var(--if-accent-2)); }
.if-rank-row + .if-rank-row .if-rank-track > span { opacity: .7; }

/* Every panel and card paints a solid surface under its gradient, so the background artwork never
   shows through. background-color with !important survives the background shorthands in page CSS. */
.if-shell :is(
  .panel, .panel-content, .panel-tabs, .well, .modal-content,
  .if-card, .if-metric, .if-table-scroll, .if-empty-state,
  .sb-info-card, .sb-card, .sb-account-chip, .sidebar-card, .content-card,
  .td-card, .td-header-card, .timeline__content, .vas-card, .agent-doc-card, .int-doc-card, .integration-button,
  .intel-card, .intel-insight, .acc-panel-card, .acc-section, .account-summary-panel, .billing-section, .billing-card,
  .customers-card, .assets-card, .users-card, .sub-card, .subs-card, .support-card, .renew-license-item, .new-license-item,
  .info-container, .doc-disclaimer, .options-details, .asset-item, .message-item, .user-card, .takedown-div,
  .kb-block, .partners-card, .partner-card, .customer-card, .summary-card, .stat-card, .dash-card, .sys-item, .settings-card, .billing-panel,
  #alerts-list > li, #takedowns-list > li, #suggestions-list > li, #va-messages > li, #ul-messages > li
) { background-color: var(--if-surface) !important; }
.if-shell :is(.panel, .if-card, .if-metric, .if-table-scroll, .if-empty-state, .sidebar-card, .td-card, .vas-card, .agent-doc-card, .sb-card, .sb-info-card) { background-image: var(--if-panel-gradient) !important; }
.if-shell :is(.panel-footer, .table th) { background-color: var(--if-surface-2) !important; }
.if-shell .panel > .panel-footer:only-child, .if-shell .panel-content > .panel-footer { background-color: transparent !important; }
.if-shell :is(.alert-info, .alert-success, .alert-warning, .alert-danger) { background-image: linear-gradient(var(--if-surface), var(--if-surface)); background-blend-mode: normal; }
.if-shell .alert-info { background: linear-gradient(var(--if-info-bg), var(--if-info-bg)), var(--if-surface); }
.if-shell .alert-success { background: linear-gradient(var(--if-success-bg), var(--if-success-bg)), var(--if-surface); }
.if-shell .alert-warning { background: linear-gradient(var(--if-warning-bg), var(--if-warning-bg)), var(--if-surface); }
.if-shell .alert-danger { background: linear-gradient(var(--if-danger-bg), var(--if-danger-bg)), var(--if-surface); }

/* Alert report (alert.php): the description, details and updates sit on one solid panel. */
.if-shell .alert-container {
  padding: 26px 28px 30px;
  border: 1px solid var(--if-panel-border);
  border-radius: 12px;
  background-color: var(--if-surface);
  background-image: var(--if-panel-gradient);
  box-shadow: var(--if-shadow);
}
.if-shell .alert-container > .section { display: flow-root; margin: 0; padding: 0; background: none; }
.if-shell .alert-container > .section.blink { animation: none; }
.if-shell .alert-container > hr { border-top-color: var(--if-border); }
.if-shell .alert-container > .alert { clear: both; margin: 24px 0 0; }
.if-shell .alert-container #va-panel { margin-bottom: 18px; }

/* Alert details (alert.php): sidebar + report as a two-column grid over the full content width.
   The page markup uses col-md-3 + col-md-8, which left a twelfth of the row empty. */
.if-shell #main-content .container { max-width: none; }
@media (min-width: 1000px) {
  .if-shell.page-alert #main-content .container > .row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; margin: 0; }
  .if-shell.page-alert #main-content .container > .row > [class*="col-"] { width: auto; float: none; padding: 0; min-width: 0; }
  .if-shell.page-alert .sidebar-container { width: 220px; top: 94px; }
  .if-shell.page-alert #main-content .container > .row > [class*="col-"] > .row { margin: 0; }
  .if-shell.page-alert .alert-container { width: 100%; float: none; }
}

/* ==========================================================================
   Sign-in transition (js/app.js IFTransition)
   Leave: the sign-in card dissolves while a veil in the workspace gradient opens from the
   button, with the IntelFinder radar mark assembling at its centre.
   Arrive: the mark settles and fades, then the sidebar, top bar and content rise into place.
   ========================================================================== */
.if-veil {
  position: fixed; inset: 0; z-index: 3000;
  display: grid; place-items: center;
  background: var(--if-panel-gradient), var(--if-surface);
  pointer-events: all;
}
html[data-theme] .if-veil { background-color: var(--if-surface); }
.if-veil.is-opening { animation: if-veil-open .78s cubic-bezier(.65, 0, .35, 1) both; }
.if-veil.is-closing { animation: if-veil-close .55s cubic-bezier(.4, 0, .2, 1) .28s both; pointer-events: none; }
.if-veil-glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--if-accent-rgb), .16), rgba(var(--if-accent-rgb), 0) 62%); }
.if-veil.is-opening .if-veil-glow { animation: if-veil-glow 1.1s ease-out .2s both; }
.if-veil-mark { position: relative; width: 92px; height: 92px; display: grid; place-items: center; }
.if-veil-mark svg { width: 92px; height: 92px; overflow: visible; }
.if-veil-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(var(--if-accent-rgb), .45); opacity: 0; }
.if-veil-orbit-outer, .if-veil-orbit-inner, .if-veil-signal { transform-box: view-box; transform-origin: 32px 32px; }
.if-veil-signal { transform-origin: 50px 14px; }
.if-veil-caption { position: absolute; top: calc(50% + 100px); left: 0; right: 0; text-align: center; font-size: 13px; font-weight: 650; letter-spacing: .01em; color: var(--if-muted); opacity: 0; }

/* Leave */
.if-veil.is-opening .if-veil-orbit-outer { animation: if-orbit-in .9s cubic-bezier(.22, 1, .36, 1) .25s both; }
.if-veil.is-opening .if-veil-orbit-inner { animation: if-orbit-in-reverse .9s cubic-bezier(.22, 1, .36, 1) .33s both; }
.if-veil.is-opening .if-veil-signal { animation: if-signal-pop .5s cubic-bezier(.34, 1.56, .64, 1) .72s both; }
.if-veil.is-opening .if-veil-ring { animation: if-ring 1.3s cubic-bezier(.22, 1, .36, 1) .78s both; }
.if-veil.is-opening .if-veil-ring.r2 { animation-delay: 1s; }
.if-veil.is-opening .if-veil-caption { animation: if-caption-in .5s ease-out .6s both; }
.if-signin .login-wrapper.if-leaving, .if-signin .login-card.if-leaving { animation: if-card-leave .55s cubic-bezier(.4, 0, .2, 1) both; }
.if-signin .navbar.if-leaving { transition: opacity .4s ease; opacity: 0; }
#sign-in.is-success, #submit-code.is-success { background: linear-gradient(115deg, #15935c, #22b573) !important; border-color: #15935c !important; box-shadow: 0 6px 16px rgba(21, 147, 92, .28) !important; }
#sign-in.is-success i, #submit-code.is-success i { animation: if-signal-pop .4s cubic-bezier(.34, 1.56, .64, 1) both; }

/* Arrive: the page is hidden until js/app.js has put the veil in place (the failsafe reveals it if scripts fail). */
html.if-arriving body > *:not(.if-veil) { opacity: 0; animation: if-failsafe 0s linear 2.5s forwards; }
.if-arrive .if-veil-orbit-outer, .if-arrive .if-veil-orbit-inner, .if-arrive .if-veil-signal { animation: none; }
.if-veil.is-closing .if-veil-mark { animation: if-mark-out .55s cubic-bezier(.4, 0, .2, 1) both; }
.if-veil.is-closing .if-veil-ring { animation: if-ring .9s cubic-bezier(.22, 1, .36, 1) both; }
/* fill-mode backwards: the start state holds during the delay, and nothing lingers afterwards
   (the drawer sidebar on small screens keeps its own transform). */
@media (min-width: 992px) { .if-arrive-run .nav-side-menu { animation: if-rise-x .7s cubic-bezier(.22, 1, .36, 1) .3s backwards; } }
.if-arrive-run .if-topbar { animation: if-rise-down .6s cubic-bezier(.22, 1, .36, 1) .38s backwards; }
.if-arrive-run .if-rise { animation: if-rise-up .7s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(.42s + var(--if-rise-i, 0) * 70ms); }
.if-arrive-run.if-overview #main-content { animation: none; }

@keyframes if-veil-open { from { clip-path: circle(0 at var(--if-veil-x, 50%) var(--if-veil-y, 50%)); } to { clip-path: circle(150vmax at var(--if-veil-x, 50%) var(--if-veil-y, 50%)); } }
@keyframes if-veil-close { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@keyframes if-veil-glow { from { transform: scale(.4); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1); opacity: .85; } }
@keyframes if-orbit-in { from { transform: rotate(-150deg) scale(.55); opacity: 0; } to { transform: rotate(0) scale(1); opacity: 1; } }
@keyframes if-orbit-in-reverse { from { transform: rotate(160deg) scale(.4); opacity: 0; } to { transform: rotate(0) scale(1); opacity: 1; } }
@keyframes if-signal-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes if-ring { 0% { transform: scale(.7); opacity: 0; } 25% { opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes if-caption-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes if-card-leave { to { opacity: 0; transform: translateY(-10px) scale(.97); filter: blur(6px); } }
@keyframes if-mark-out { to { transform: scale(1.18); opacity: 0; filter: blur(2px); } }
@keyframes if-rise-x { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes if-rise-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes if-rise-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes if-failsafe { to { opacity: 1; } }
.if-veil-glow { opacity: .85; }
.if-arrive .if-veil-caption { opacity: 1; }

/* Top-bar notification badges and sidebar counters (shared by all portals) */
.if-icon-button .if-badge-wrap { position: absolute; top: -5px; right: -7px; }
.if-icon-button .if-badge { display: inline-block; min-width: 18px; padding: 2px 5px; border-radius: 9px; background: var(--if-accent); color: #fff !important; font-size: 9.5px; font-weight: 800; line-height: 1.3; border: 2px solid var(--if-surface); }
.if-icon-button .if-badge.is-zero { display: none; }
.if-icon-button .va-messages-icon { color: inherit; }
.if-nav-badge { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 10px; background: var(--if-danger); color: #fff; font-size: 10px; font-weight: 800; text-align: center; line-height: 1.5; }

/* Dashboard lists and legends (partner and administration dashboards) */
a.if-rank-row { display: block; color: inherit !important; text-decoration: none !important; border-radius: 6px; }
a.if-rank-row:hover .if-rank-label span { color: var(--if-accent); }
.if-legend { display: grid; gap: 8px; align-content: center; }
.if-legend-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--if-ink-2); }
.if-legend-row > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.if-legend-row strong { font-weight: 750; color: var(--if-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.if-legend-row small { margin-left: 8px; color: var(--if-muted); font-weight: 600; }
.if-doughnut-wrap { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: center; }
.if-doughnut-wrap .if-chart-box { height: 200px; }
.if-app .if-mini-table { margin: 0; }
.if-app .if-mini-table th, .if-app .if-mini-table td { padding: 9px 4px; font-size: 12px; background: transparent !important; }
.if-app .if-mini-table th { border-bottom: 1px solid var(--if-row-border); }
.if-list-scroll { max-height: 300px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.if-list-empty { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 12px; color: var(--if-muted); }
.if-list-empty i { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: var(--if-success); background: var(--if-success-bg); font-size: 11px; }
.if-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.if-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.if-segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: 8px; background: var(--if-surface-3); }
.if-segmented button { border: 0; background: transparent; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; color: var(--if-muted); }
.if-segmented button.active { background: var(--if-surface); color: var(--if-accent); box-shadow: 0 1px 3px rgba(21, 35, 59, .1); }
.if-sys-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.if-sys-tile { padding: 12px 14px; border: 1px solid var(--if-row-border); border-radius: 9px; background: var(--if-surface-2); }
.if-sys-tile small { display: block; font-size: 11px; color: var(--if-muted); font-weight: 650; }
.if-sys-tile strong { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.03em; color: var(--if-ink); font-variant-numeric: tabular-nums; }
.if-sys-tile strong.sys-warning { color: var(--if-warning); }
.if-sys-tile strong.sys-danger { color: var(--if-danger); }
.if-sys-tile span { display: block; font-size: 10.5px; color: var(--if-muted); }
.if-server-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 8px 0; font-size: 12px; }
.if-server-row + .if-server-row { border-top: 1px solid var(--if-row-border); }
.if-server-row > span { color: var(--if-ink-2); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.if-server-row > small { color: var(--if-muted); }
.if-server-row .if-rank-track { grid-column: 1 / -1; }
@media (max-width: 1199px) { .if-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991px) { .if-grid-3, .if-grid-4 { grid-template-columns: 1fr; } .if-doughnut-wrap { grid-template-columns: 1fr; } }
.if-app .if-mini-table { table-layout: fixed; width: 100%; }
.if-app .if-mini-table td:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.if-app .if-mini-table th:last-child:not(:first-child), .if-app .if-mini-table td:last-child:not(:first-child) { width: 92px; white-space: nowrap; }

/* List rows (alerts, takedowns, messages, suggestions) sit directly on the page gradient, so they use a
   solid surface, a firmer border and a resting shadow to stand apart from it. */
.if-app #alerts-list > li, .if-app #takedowns-list > li, .if-app .takedown-div, .if-app #va-messages > li, .if-app #suggestions-list > li, .if-app #ul-messages > li {
  background: var(--if-surface) !important;
  border: 1px solid var(--if-border-strong) !important;
  box-shadow: 0 1px 2px rgba(var(--if-shadow-rgb), calc(.10 * var(--if-shadow-k))), 0 6px 14px -8px rgba(var(--if-shadow-rgb), calc(.30 * var(--if-shadow-k)));
}
.if-app #alerts-list > li:hover, .if-app #takedowns-list > li:hover, .if-app .takedown-div:hover, .if-app #va-messages > li:hover, .if-app #suggestions-list > li:hover, .if-app #ul-messages > li:hover {
  background: var(--if-surface) !important;
  border-color: rgba(var(--if-accent-rgb), .45) !important;
  box-shadow: var(--if-shadow-hover);
}
.if-app #alerts-list > li.selected-alert, .if-app #takedowns-list > li.selected-takedown {
  background: linear-gradient(135deg, var(--if-tint) 10%, var(--if-tint-2)), var(--if-surface) !important;
  border-color: var(--if-accent) !important;
}

/* Light theme: list rows need more separation from the near-white page gradient, and their type icons
   a stronger colour than the general "subtle" grey. */
html[data-theme="light"] { --if-list-border: #c3d2e8; --if-list-icon: #4f6a8f; }
html[data-theme="dark"] { --if-list-border: var(--if-border-strong); --if-list-icon: #8193ad; }
html[data-theme="light"] .if-app :is(#alerts-list, #takedowns-list, #va-messages, #suggestions-list, #ul-messages) > li,
html[data-theme="light"] .if-app .takedown-div {
  border-color: var(--if-list-border) !important;
  box-shadow: 0 1px 2px rgba(30, 50, 90, .08), 0 8px 18px -10px rgba(30, 50, 90, .28);
}
html[data-theme="light"] .if-app :is(#alerts-list, #takedowns-list, #va-messages, #suggestions-list, #ul-messages) > li:hover,
html[data-theme="light"] .if-app .takedown-div:hover { border-color: rgba(var(--if-accent-rgb), .55) !important; box-shadow: var(--if-shadow-hover); }
.if-app .icon-container i, .if-app .takedown-icon-container i, .if-app :is(#alerts-list, #takedowns-list) .alert-details i, .if-app :is(#alerts-list, #takedowns-list) .takedown-details i { color: var(--if-list-icon); opacity: 1; }
html[data-theme="light"] .if-app :is(#alerts-list, #takedowns-list) :is(.alert-details, .takedown-details) { color: #4d5e76; }

/* Alert rows: a priority tint that starts after the text area and deepens towards the priority and
   status columns on the right. */
.if-app #alerts-list > li:has(.priority-container .very-low-priority) { --if-row-tint: var(--if-p1); }
.if-app #alerts-list > li:has(.priority-container .low-priority) { --if-row-tint: var(--if-p2); }
.if-app #alerts-list > li:has(.priority-container .medium-priority) { --if-row-tint: var(--if-p3); }
.if-app #alerts-list > li:has(.priority-container .high-priority) { --if-row-tint: var(--if-p4); }
.if-app #alerts-list > li:has(.priority-container .urgent-priority) { --if-row-tint: var(--if-p5); }
html[data-theme="light"] { --if-row-tint-strength: 13%; }
html[data-theme="dark"] { --if-row-tint-strength: 17%; }
.if-app #alerts-list > li:not(.selected-alert):has(.priority-container [class$="-priority"]),
.if-app #alerts-list > li:not(.selected-alert):has(.priority-container [class$="-priority"]):hover {
  background: linear-gradient(90deg, var(--if-surface) 50%, color-mix(in srgb, var(--if-row-tint) var(--if-row-tint-strength), var(--if-surface)) 100%) !important;
}

/* Alert rows: one layout in every portal. The customer list, the partner and administration lists and
   a customer's Alerts tab in the portals each carry their own older stylesheet; these rules give them
   the customer list's row (paddings, columns, type sizes and text colours). */
.if-app #alerts-list > li { padding: 0 15px; color: var(--if-ink); }
.if-app #alerts-list > li .col-xs-12 { padding-top: 15px; padding-bottom: 15px; }
.if-app #alerts-list > li .meta-container { text-align: center; }
.if-app #alerts-list > li .priority-container { width: 130px; padding: 0 15px 0 40px; }
.if-app #alerts-list > li .status-container { width: 130px; padding: 0; }
.if-app #alerts-list > li .alert-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.65; }
.if-app #alerts-list > li .alert-details { font-size: 12px; line-height: 1.65; }
.if-app #alerts-list > li .alert-details i { font-size: 12px; }
/* Older page stylesheets that lift cards on hover (dashboard priority cards, partner Knowledge Base):
   the same still hover as the workspace panels. */
.if-app .priority-card, .if-app .kb-block { transition: box-shadow .2s, border-color .2s, background-color .2s; }
.if-app .priority-card:hover, .if-app .kb-block:hover, .if-app .kb-block:focus { transform: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.if-app #alerts-list > li .icon-container i { width: 65px; padding-top: 15px; padding-bottom: 15px; font-size: 36px; }
.if-app #takedowns-list > li { color: var(--if-ink); }
.if-app #takedowns-list > li .td-status-container { width: 130px; padding-top: 5px; text-align: center; }

/* Section rail: page-level tabs as a vertical secondary sidebar beside their panel (built by js/app.js). */
.if-tabbed { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 20px; align-items: start; }
.if-tabbed-column { float: none !important; width: 100% !important; max-width: 1040px; margin-left: 0 !important; }
.if-tab-rail {
  position: sticky; top: 94px;
  padding: 10px;
  background: var(--if-surface);
  border: 1px solid var(--if-panel-border);
  border-radius: 12px;
  box-shadow: var(--if-shadow);
}
.if-app .if-tab-rail .nav-tabs { display: flex !important; flex-direction: column; flex-wrap: nowrap; gap: 2px; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.if-app .if-tab-rail .nav-tabs > li { float: none; width: 100%; margin: 0; }
.if-app .if-tab-rail .nav-tabs > li > a {
  display: flex !important; align-items: center; gap: 11px;
  padding: 9px 12px !important; margin: 0;
  border: 0 !important; border-radius: 7px !important;
  background: none !important;
  color: var(--if-muted) !important; font-size: 12.5px; font-weight: 600; line-height: 20px; white-space: normal;
}
.if-app .if-tab-rail .nav-tabs > li > a .if-tab-icon { width: 16px; text-align: center; font-size: 13px; color: var(--if-subtle); flex-shrink: 0; }
.if-app .if-tab-rail .nav-tabs > li > a:hover { background: var(--if-hover) !important; color: var(--if-accent) !important; }
.if-app .if-tab-rail .nav-tabs > li > a:hover .if-tab-icon { color: var(--if-accent); }
.if-app .if-tab-rail .nav-tabs > li.active > a, .if-app .if-tab-rail .nav-tabs > li.active > a:hover, .if-app .if-tab-rail .nav-tabs > li.active > a:focus {
  background: linear-gradient(100deg, var(--if-tint), var(--if-tint-2)) !important;
  color: var(--if-accent) !important; font-weight: 750;
  box-shadow: inset 3px 0 0 var(--if-accent);
}
.if-app .if-tab-rail .nav-tabs > li.active > a .if-tab-icon { color: var(--if-accent); }
.if-app .if-tab-rail .nav-tabs .badge { margin-left: auto; background: var(--if-accent); color: #fff; font-size: 10px; }
/* The panel is a standalone card again (page styles used to attach it to a tab strip). */
.if-app .if-tabbed > .panel-tabs {
  margin: 0;
  border: 1px solid var(--if-panel-border) !important;
  border-radius: 12px !important;
  background: var(--if-panel-gradient), var(--if-surface) !important;
  box-shadow: var(--if-shadow) !important;
}
.if-app .if-tabbed > .panel-tabs > .panel-footer { border-top: 0 !important; background: transparent !important; }
@media (max-width: 991px) {
  .if-tabbed { grid-template-columns: 1fr; }
  .if-tab-rail { position: static; padding: 6px; overflow-x: auto; }
  .if-app .if-tab-rail .nav-tabs { flex-direction: row; }
  .if-app .if-tab-rail .nav-tabs > li { width: auto; }
  .if-app .if-tab-rail .nav-tabs > li > a { white-space: nowrap; }
  .if-app .if-tab-rail .nav-tabs > li.active > a { box-shadow: inset 0 -2px 0 var(--if-accent); }
}

/* Breadcrumb trail in the top bar */
.if-crumbs { min-width: 0; }
.if-crumbs ol { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; min-width: 0; }
.if-crumb { display: flex; align-items: center; min-width: 0; font-size: 12px; color: var(--if-muted); white-space: nowrap; }
.if-crumb + .if-crumb::before { content: '\f054'; font-family: 'Font Awesome 6 Pro'; font-weight: 900; font-size: 8px; color: var(--if-subtle); margin: 0 11px; }
.if-crumb a { color: var(--if-muted) !important; font-weight: 600; padding: 3px 6px; margin: 0 -6px; border-radius: 6px; text-decoration: none !important; }
.if-crumb a:hover { color: var(--if-accent) !important; background: var(--if-hover); }
.if-crumb.is-current { flex-shrink: 1; overflow: hidden; }
.if-crumb.is-current strong { font-weight: 750; color: var(--if-ink); overflow: hidden; text-overflow: ellipsis; max-width: 420px; display: block; }
@media (max-width: 767px) {
  .if-crumb:not(.is-current):not(:nth-last-child(2)) { display: none; }
  .if-crumb:nth-last-child(2)::before { display: none; }
}

/* The back button of a tabbed page sits above its section rail */
.if-tab-column { position: sticky; top: 94px; display: grid; gap: 12px; align-content: start; }
.if-tab-column > .if-tab-rail { position: static; }
.if-app .if-tab-back { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; padding: 9px 14px; background: var(--if-surface) !important; }
.if-app .if-tab-back i { color: var(--if-muted); font-size: 12px; }
.if-app .if-tab-back:hover i { color: var(--if-accent); }
@media (max-width: 991px) { .if-tab-column { position: static; } .if-app .if-tab-back { width: auto; justify-self: start; } }

/* Takedown rows: one layout for every takedown list (customer portal, partner/admin takedowns and the
   Takedowns tab of a customer), with a status tint on the right like the alert rows. */
.if-app #takedowns-list > li.takedown-line { padding: 0 18px 0 6px !important; margin-bottom: 8px; min-height: 0; height: auto; }
/* The row markup closes the content column after the status block, so the text flows between two floats. */
.if-app #takedowns-list > li.takedown-line > .row { display: flow-root; position: relative; margin: 0; padding: 13px 0 13px 68px; min-height: 66px; }
.if-app #takedowns-list > li.takedown-line > .row::before, .if-app #takedowns-list > li.takedown-line > .row::after { display: none; }
.if-app #takedowns-list > li.takedown-line .icon-container { position: absolute; left: 0; top: 0; bottom: 0; width: 62px; display: flex; align-items: center; justify-content: center; }
.if-app #takedowns-list > li.takedown-line .icon-container i { float: none; padding: 0 !important; width: auto; font-size: 30px; line-height: 1; opacity: 1; }
.if-app #takedowns-list > li.takedown-line > .row > .col-xs-12 { float: right; width: auto; padding: 0 !important; min-height: 0; }
.if-app #takedowns-list > li.takedown-line .meta-container { float: none !important; display: flex; align-items: center; height: 40px; margin-left: 16px; }
.if-app #takedowns-list > li.takedown-line .meta-container > .row { margin: 0; }
.if-app #takedowns-list > li.takedown-line :is(.status-container, .td-status-container) { width: 120px; padding: 0 !important; text-align: center; font-size: 12px; font-weight: 650; line-height: 1.5; }
.if-app #takedowns-list > li.takedown-line .takedown-id { color: var(--if-muted); font-size: 12.5px; font-weight: 700; letter-spacing: .01em; }
.if-app #takedowns-list > li.takedown-line .takedown-title { color: var(--if-ink); font-size: 13.5px; font-weight: 700; letter-spacing: -.005em; overflow-wrap: anywhere; }
.if-app #takedowns-list > li.takedown-line .takedown-details { display: inline-block; margin-top: 3px; font-size: 12px; }
.if-app #takedowns-list .open-status { color: var(--if-accent); }
.if-app #takedowns-list .successful-status { color: var(--if-success); }
.if-app #takedowns-list .suspended-status { color: var(--if-danger); }
.if-app #takedowns-list .cancelled-status { color: var(--if-muted); }
.if-app #takedowns-list > li.takedown-line:has(.open-status) { --if-row-tint: var(--if-accent); }
.if-app #takedowns-list > li.takedown-line:has(.successful-status) { --if-row-tint: var(--if-success); }
.if-app #takedowns-list > li.takedown-line:has(.suspended-status) { --if-row-tint: var(--if-danger); }
.if-app #takedowns-list > li.takedown-line:has(.cancelled-status) { --if-row-tint: var(--if-muted); }
.if-app #takedowns-list > li.takedown-line:not(.selected-takedown):has(:is(.open-status, .successful-status, .suspended-status, .cancelled-status)),
.if-app #takedowns-list > li.takedown-line:not(.selected-takedown):has(:is(.open-status, .successful-status, .suspended-status, .cancelled-status)):hover {
  background: linear-gradient(90deg, var(--if-surface) 55%, color-mix(in srgb, var(--if-row-tint) var(--if-row-tint-strength), var(--if-surface)) 100%) !important;
}

/* ==========================================================================
   Light theme depth: the page sits a step below the panels, tables get a tinted header band,
   and text, borders, shadows and metric icons carry more contrast.
   ========================================================================== */
html[data-theme="light"] {
  --if-body-gradient: linear-gradient(135deg, #f3f6fc 10%, #e4ecfa);
  --if-panel-gradient: linear-gradient(135deg, #ffffff 45%, #f3f7ff);
  --if-panel-border: #d2deef;
  --if-row-border: #e2e9f4;
  --if-border: #dbe3ee;
  --if-muted: #55667e;
  --if-subtle: #7486a0;
  --if-ink-2: #2f3f57;
  --if-shadow: 0 8px 22px -10px rgba(30, 64, 125, .22), 0 1px 3px rgba(30, 64, 125, .06);
  --if-shadow-hover: 0 14px 30px -10px rgba(30, 64, 125, .28), 0 2px 5px rgba(30, 64, 125, .07);
  --if-chart-accent-soft: rgba(37, 99, 235, .28);
  --if-chart-grid: rgba(21, 35, 59, .09);
  --if-table-head: #eef3fb;
  --if-table-head-text: #44546d;
  --if-zebra: #fafcff;
}
html[data-theme="dark"] { --if-table-head: rgba(255, 255, 255, .03); --if-table-head-text: var(--if-muted); --if-zebra: rgba(255, 255, 255, .015); }

/* Tables: tinted header band, zebra rows, clear hover */
.if-app .table > thead > tr > th, .if-app .table > tbody > tr > th, .if-app .table th { background: var(--if-table-head) !important; color: var(--if-table-head-text); border-bottom: 1px solid var(--if-panel-border); }
.if-app .table > tbody > tr:nth-of-type(even) > td { background-color: var(--if-zebra); }
.if-app .table > tbody > tr:hover > td { background-color: var(--if-hover); }
.if-app .if-mini-table th { background: var(--if-table-head) !important; padding: 8px 10px !important; border-radius: 0; }
.if-app .if-mini-table td { padding: 9px 10px !important; }
.if-app .if-mini-table tr:first-child th:first-child { border-top-left-radius: 7px; }
.if-app .if-mini-table tr:first-child th:last-child { border-top-right-radius: 7px; }

/* Cards: compact card titles get a divider; counts are firmer */
.if-compact-card > h2, .if-compact-card > .if-card-header { padding-bottom: 11px; margin-bottom: 13px !important; border-bottom: 1px solid var(--if-row-border); }
.if-count { background: #e3eaf6; color: #3d4f6d; }
html[data-theme="dark"] .if-count { background: var(--if-surface-3); color: var(--if-muted); }

/* Metric icons: each card a colour of its own (cards with a status keep theirs) */
.if-metric-icon { background: linear-gradient(145deg, #e3edfe, #d3e2fd); color: var(--if-accent); }
html[data-theme="dark"] .if-metric-icon { background: var(--if-tint); }
.if-metric:not([class*="if-metric-"]):nth-child(2) .if-metric-icon { background: var(--if-success-bg); color: var(--if-success); }
.if-metric:not([class*="if-metric-"]):nth-child(3) .if-metric-icon { background: var(--if-warning-bg); color: var(--if-warning); }
.if-metric-new .if-metric-icon { background: linear-gradient(145deg, var(--if-accent), var(--if-accent-2)); color: #fff; }
.if-metric-takedown .if-metric-icon { background: linear-gradient(145deg, #ede7fe, #e0d6fc); color: var(--if-violet); }
html[data-theme="dark"] .if-metric-takedown .if-metric-icon { background: var(--if-violet-bg); }

/* Ranked bars: thicker, on a visible track */
.if-rank-track { height: 7px; background: #e5ecf7; }
html[data-theme="dark"] .if-rank-track { background: var(--if-surface-3); }
.if-priority-bar { height: 9px; }

/* Sidebar and top bar read as solid surfaces above the deeper page */
html[data-theme="light"] .if-shell .nav-side-menu { box-shadow: 1px 0 0 #dbe3ee, 6px 0 24px -18px rgba(30, 64, 125, .25); }
html[data-theme="light"] .if-topbar { background: rgba(255, 255, 255, .94); }

/* Theme color field (partner settings) */
.if-color-field { display: flex; align-items: center; gap: 10px; }
.if-color-field input[type="color"] { flex-shrink: 0; width: 40px; height: 36px; padding: 3px; border: 1px solid var(--if-input-border); border-radius: 7px; background: var(--if-input-bg); cursor: pointer; }
.if-color-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.if-color-field input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 4px; }
.if-color-field .form-control { font-family: 'JetBrains Mono', Consolas, monospace; text-transform: lowercase; }
.if-theme-color-group { margin-top: 16px; }

/* Customer dashboard: ranked bars follow the chart colour (a partner's theme colour when set). */
.if-overview .if-rank-track > span { background: linear-gradient(90deg, var(--if-chart-accent, var(--if-accent)), var(--if-chart-accent-2, var(--if-accent-2))); }

/* Dashboard: Virtual Analyst card with its filtering state */
.if-metric-va .if-metric-icon { background: var(--if-violet-bg) !important; color: var(--if-violet) !important; }
.if-va-filter { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 4px 10px 4px 8px; border-radius: 14px; font-size: 11px; font-weight: 750; line-height: 1.4; }
.if-va-filter.is-on { background: var(--if-success-bg); color: var(--if-success); }
.if-va-filter.is-partial { background: var(--if-warning-bg); color: var(--if-warning); }
.if-va-filter.is-off { background: var(--if-surface-3); color: var(--if-muted); }
/* A workspace card without a second line keeps the name centred beside the icon */
.if-workspace > span:last-child { display: flex; flex-direction: column; justify-content: center; min-height: 33px; }

/* Theme Color: eyedropper, logo picker pop-over and sidebar preview */
.if-app .if-eyedropper { flex-shrink: 0; width: 38px; height: 36px; padding: 0; display: grid; place-items: center; }
.if-logo-preview { margin-top: 2px; }
.if-logo-picker {
  position: absolute; z-index: 2100; width: 360px;
  background: var(--if-surface); border: 1px solid var(--if-border); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(21, 35, 59, .22); overflow: hidden;
  animation: if-picker-in .18s cubic-bezier(.22, 1, .36, 1) both;
}
html[data-theme="dark"] .if-logo-picker { box-shadow: 0 18px 44px rgba(0, 0, 0, .55); }
.if-logo-picker-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 12px 14px 10px; border-bottom: 1px solid var(--if-row-border); }
.if-logo-picker-head strong { font-size: 13px; color: var(--if-ink); }
.if-logo-picker-head span { font-size: 10.5px; color: var(--if-muted); }
.if-logo-picker-stage {
  display: grid; place-items: center; min-height: 120px; padding: 16px;
  background-color: #fff; background-image: linear-gradient(45deg, #eef1f6 25%, transparent 25%), linear-gradient(-45deg, #eef1f6 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eef1f6 75%), linear-gradient(-45deg, transparent 75%, #eef1f6 75%);
  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.if-logo-picker-stage canvas {
  display: block; max-width: 100%; height: auto;
  /* Eyedropper pointer; its tip is the hot spot. */
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M20.7 3.3a2.4 2.4 0 0 0-3.4 0l-2.6 2.6-1.1-1.1-1.4 1.4 1.1 1.1-8.2 8.2c-.4.4-.6.9-.6 1.4V19l-1.7 1.7 1.4 1.4L5.9 20.4h2.1c.5 0 1-.2 1.4-.6l8.2-8.2 1.1 1.1 1.4-1.4-1.1-1.1 2.6-2.6a2.4 2.4 0 0 0 0-3.4z' fill='%2315233b' stroke='%23ffffff' stroke-width='1.2'/%3E%3C/svg%3E") 2 22, crosshair;
}
.if-logo-picker-foot { display: flex; align-items: center; gap: 10px; padding: 10px 14px 12px; border-top: 1px solid var(--if-row-border); font-size: 11.5px; color: var(--if-muted); }
.if-logo-picker-chip { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--if-border-strong); background: var(--if-surface-3); flex-shrink: 0; }
.if-logo-picker-chip.is-empty { background-image: linear-gradient(45deg, transparent 45%, var(--if-danger) 45%, var(--if-danger) 55%, transparent 55%); }
.if-logo-picker-foot code { padding: 2px 6px; font-size: 12px; color: var(--if-ink); background: var(--if-surface-2); }
.if-logo-picker-foot small { margin-left: auto; text-align: right; }
.if-brand.is-previewing { position: relative; }
.if-brand.is-previewing::after { content: 'Preview'; position: absolute; top: -10px; right: -8px; padding: 1px 6px; border-radius: 6px; background: var(--if-warning-bg); color: var(--if-warning); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
@keyframes if-picker-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* The Virtual Analyst card owns violet; takedowns use cyan beside it */
.if-metric-takedown .if-metric-icon { background: var(--if-info-bg) !important; color: var(--if-info) !important; }
#org-logo { display: block; max-width: 220px; max-height: 56px; width: auto; height: auto; }
#org-logo.is-default-logo { width: 180px; }
.if-default-logo-note { display: block; margin-top: 4px; font-size: 11px; color: var(--if-muted); }

/* Partner (custom) logos span the width of the workspace card below them and are centred in it,
   so wide and compact logos both line up with the card. Same rule for real white-label sidebars and previews. */
.if-shell .if-brand.if-brand-partner { display: flex; justify-content: center; align-items: center; width: 100%; height: 56px; margin: 0 0 20px; }
.if-shell .if-brand-partner .if-brand-logo { width: auto; height: auto; max-width: 100%; max-height: 56px; object-fit: contain; }

/* ==========================================================================
   Alert details (all portals, both themes): one clean report card instead of boxes inside a box.
   Section headings become quiet labels with a rule, the details table has a tinted label column and
   firm row lines (no cell grid), the screenshot sits in a light frame, and the sidebar cards are plain
   cards like the rest of the workspace. Layout and type are shared; only the colours are per theme,
   so switching themes changes nothing but colour.
   ========================================================================== */
html[data-theme="light"] {
  --if-ad-table-border: #bfd0ea; --if-ad-row-line: #d2ddef;
  --if-ad-label-bg: #dde7fa; --if-ad-label-hover: #d2dff8; --if-ad-label-ink: #1b3866;
  --if-ad-value-bg: #ffffff; --if-ad-value-alt: #f4f7fe; --if-ad-value-hover: #eef4ff;
  --if-ad-table-shadow: 0 1px 2px rgba(30, 64, 125, .06), 0 8px 20px -14px rgba(30, 64, 125, .3);
  --if-ad-image-bg: #ffffff; --if-ad-image-shadow: 0 1px 2px rgba(30, 64, 125, .06), 0 10px 26px -14px rgba(30, 64, 125, .28);
}
html[data-theme="dark"] {
  --if-ad-table-border: #2a3a54; --if-ad-row-line: #22324b;
  --if-ad-label-bg: #172338; --if-ad-label-hover: #1c2c48; --if-ad-label-ink: #a9c4ef;
  --if-ad-value-bg: #111a2b; --if-ad-value-alt: #142036; --if-ad-value-hover: #172742;
  --if-ad-table-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 20px -14px rgba(0, 0, 0, .6);
  --if-ad-image-bg: #172238; --if-ad-image-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 10px 26px -14px rgba(0, 0, 0, .6);
}
html[data-theme] .page-alert .alert-container { padding: 30px 34px 34px; }
html[data-theme] .page-alert .alert-container > .section { text-align: left; color: var(--if-ink-2); font-size: 13.5px; line-height: 1.75; }
html[data-theme] .page-alert .alert-container .base-title,
html[data-theme] .page-alert .alert-container h1 { margin: 0 0 4px; font-size: 25px !important; font-weight: 800; letter-spacing: -.035em; line-height: 1.25; color: var(--if-ink); }
html[data-theme] .page-alert .alert-container .data-container { color: var(--if-muted); font-size: 12px; line-height: 1.9; text-align: right; }
html[data-theme] .page-alert .alert-container .data-container i { width: 14px; text-align: center; color: var(--if-subtle); }
html[data-theme] .page-alert .alert-container h2 {
  display: flex; align-items: center; gap: 12px;
  margin: 30px 0 12px; font-size: 18px !important; font-weight: 750; letter-spacing: -.02em; text-transform: none; color: var(--if-ink);
}
html[data-theme] .page-alert .alert-container h2::after { content: ''; flex: 1; height: 1px; background: var(--if-row-border); }
html[data-theme] .page-alert .alert-container h2 sup { top: 0; }
html[data-theme] .page-alert .alert-container a { color: var(--if-accent); font-weight: 650; }

html[data-theme] .page-alert .alert-container .table {
  margin: 8px 0 20px; border: 1px solid var(--if-ad-table-border) !important; border-radius: 10px; border-collapse: separate; border-spacing: 0;
  overflow: hidden; background: var(--if-ad-value-bg) !important; box-shadow: var(--if-ad-table-shadow);
}
html[data-theme] .page-alert .alert-container .table > tbody > tr > td { padding: 11px 16px !important; border: 0 !important; border-top: 1px solid var(--if-ad-row-line) !important; vertical-align: top; font-size: 13px; line-height: 1.43; }
html[data-theme] .page-alert .alert-container .table > tbody > tr:first-child > td { border-top: 0 !important; }
html[data-theme] .page-alert .alert-container .label-td {
  width: 210px; background: var(--if-ad-label-bg) !important; border-right: 1px solid var(--if-ad-table-border) !important;
  color: var(--if-ad-label-ink) !important; font-weight: 700; font-size: 12.5px;
}
html[data-theme] .page-alert .alert-container .value-td { background: var(--if-ad-value-bg) !important; color: var(--if-ink) !important; font-weight: 500; overflow-wrap: anywhere; }
html[data-theme] .page-alert .alert-container .table > tbody > tr:nth-child(even) > .value-td { background: var(--if-ad-value-alt) !important; }
html[data-theme] .page-alert .alert-container .table > tbody > tr:hover > .value-td { background: var(--if-ad-value-hover) !important; }
html[data-theme] .page-alert .alert-container .table > tbody > tr:hover > .label-td { background: var(--if-ad-label-hover) !important; }

html[data-theme] .page-alert .alert-container .embedded-image { display: block; margin: 12px 0 6px; padding: 0; border: 1px solid var(--if-border) !important; border-radius: 10px; background: var(--if-ad-image-bg); box-shadow: var(--if-ad-image-shadow); }
html[data-theme] .page-alert .alert-container hr { margin: 34px 0 26px; border-top: 1px solid var(--if-row-border); }
html[data-theme] .page-alert .alert-container .alert { margin-top: 26px; }

html[data-theme] .page-alert :is(.sb-account-chip, .sb-info-card, .sb-card) {
  background: var(--if-surface) !important; background-image: none !important;
  border: 1px solid var(--if-panel-border) !important; box-shadow: var(--if-shadow) !important;
}
html[data-theme] .page-alert .sb-account-avatar { background: var(--if-tint); color: var(--if-accent); }
html[data-theme] .page-alert .sb-keyword { border-top: 1px solid var(--if-row-border); color: var(--if-ink-2); }
html[data-theme] .page-alert .btn-sidebar { justify-content: flex-start; }

/* Customer pages: the shared page heading replaces the pages' own titles */
.if-page-heading-auto { margin-bottom: 22px; }
.page-vas .vas-page-title,
.page-agent .agent-row > h3:first-child, .page-agent .agent-row > h4:first-of-type,
.page-integrations .container > .row:first-child h3:first-child,
.page-integrations h3 + br:first-of-type { display: none; }
.page-accounts .accounts-totals { margin-top: 0; font-size: 13px !important; }
/* The count moved into the page title; the old count line is hidden (its row keeps any controls) */
.if-shell .if-count-source { display: none !important; }
.if-page-heading-auto.is-compact { margin-bottom: 18px; }
.if-page-heading-auto.is-compact h1 { margin-bottom: 0; }
/* Alerts: "Keyboard Shortcuts" joins the toolbar line; Takedowns: the emptied count row goes away */
.page-alerts #text-header-container { margin-top: -51px; margin-bottom: 27px; min-height: 0; pointer-events: none; }
.page-alerts #text-header-container #keyboard-shortcuts { pointer-events: auto; line-height: 36px; }
.page-takedowns #text-header-container { display: none; }
.page-alert .alert-container .label-td { word-break: normal; overflow-wrap: normal; hyphens: manual; }

/* Alert header: subscription and date sit under the title as prominent chips (all portals, both themes) */
.if-alert-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 6px; }
.if-meta-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 8px;
  background: var(--if-surface-3); border: 1px solid var(--if-border);
  color: var(--if-ink); font-size: 13px; font-weight: 650; line-height: 1.4;
}
.if-meta-chip i { color: var(--if-muted); font-size: 12px; }
.if-meta-chip.is-subscription { background: var(--if-tint); border-color: rgba(var(--if-accent-rgb), .28); color: var(--if-accent); }
.if-meta-chip.is-subscription i { color: var(--if-accent); }
.if-meta-chip.is-comments { cursor: pointer; }
.if-meta-chip.is-comments:hover { border-color: rgba(var(--if-accent-rgb), .45); color: var(--if-accent); }
.page-alert .alert-container .section > h1 { margin-bottom: 0; }
.page-alert .if-alert-meta + h2 { margin-top: 22px !important; }
.if-meta-chip.is-comments .messages-number { display: inline-block; min-width: 20px; margin-left: 2px; padding: 1px 6px; border-radius: 10px; background: var(--if-surface); color: var(--if-muted) !important; font-size: 11px; font-weight: 800; text-align: center; }
.if-meta-chip.is-comments.existing-alerts { color: var(--if-accent); border-color: rgba(var(--if-accent-rgb), .3); }
.if-meta-chip.is-comments.existing-alerts i { color: var(--if-accent); }
.if-meta-chip.is-comments.existing-alerts .messages-number { background: var(--if-accent); color: #fff !important; }

/* ==========================================================================
   Choice cards: the shared replacement for "a box with a very large icon".
   An icon chip, a title and a one-line description; selectable cards show a check, link cards an arrow.
   Used by Reports, the billing payment method and the integrations list.
   ========================================================================== */
.if-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.if-choices.is-compact { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.if-app .if-choice {
  position: relative; display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 72px; padding: 14px 40px 14px 14px; margin: 0; text-align: left; white-space: normal;
  background: var(--if-surface) !important; border: 1px solid var(--if-border-strong) !important; border-radius: 11px !important;
  color: var(--if-ink) !important; font-weight: 600; box-shadow: none;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.if-app .if-choice:hover, .if-app .if-choice:focus-visible { border-color: rgba(var(--if-accent-rgb), .5) !important; box-shadow: var(--if-shadow); background: var(--if-surface) !important; }
.if-app .if-choice.is-selected, .if-app .if-choice.active-button { border-color: var(--if-accent) !important; background: linear-gradient(135deg, var(--if-tint-2), var(--if-tint)) !important; box-shadow: 0 0 0 1px var(--if-accent), var(--if-shadow); color: var(--if-ink) !important; }
.if-choice-icon { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 11px; background: var(--if-tint); color: var(--if-accent); font-size: 19px; overflow: hidden; transition: background-color .15s, color .15s; }
.if-choice-icon.is-logo { background: #fff; border: 1px solid var(--if-border); }
.if-choice-icon img { max-width: 32px; max-height: 28px; width: auto; height: auto; }
.if-choice.is-selected .if-choice-icon, .if-choice.active-button .if-choice-icon { background: linear-gradient(145deg, var(--if-accent), var(--if-accent-2)); color: #fff; }
.if-choice-copy { min-width: 0; }
.if-choice-copy strong { display: block; font-size: 13.5px; font-weight: 750; color: var(--if-ink); line-height: 1.35; }
.if-choice-copy small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; line-height: 1.45; color: var(--if-muted); }
.if-choice-check { position: absolute; top: 12px; right: 12px; font-size: 15px; color: var(--if-accent); opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
.if-choice.is-selected .if-choice-check, .if-choice.active-button .if-choice-check { opacity: 1; transform: scale(1); }
.if-choice-arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--if-subtle); transition: transform .15s, color .15s; }
.if-choice:hover .if-choice-arrow { color: var(--if-accent); transform: translate(3px, -50%); }
.if-choice-warning { position: absolute; top: 8px; right: 10px; font-size: 12px; color: var(--if-danger); }
html[data-theme="dark"] .if-choice-icon.is-logo { background: #f3f6fb; }

/* Integrations list */
.page-integrations .if-int-category { margin: 22px 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--if-muted); }
.page-integrations .if-int-category:first-of-type { margin-top: 4px; }
.page-integrations .if-int-more { margin-top: 22px; font-size: 12.5px; color: var(--if-muted); }

/* Billing payment method */
#methods-row.if-choices { margin: 0; }
/* The integrations stylesheet still styles the old tiles; the card layout wins */
.page-integrations .if-choice.integration-button { padding: 14px 40px 14px 14px !important; border-radius: 11px !important; font-size: 13px; transform: none; }
.page-integrations .if-choice-icon .int-icon { padding: 0; font-size: 19px; opacity: 1; color: inherit; }
.page-integrations .if-choice-icon .int-logo { width: auto; max-width: 32px; max-height: 28px; margin: 0; opacity: 1; }
.page-integrations h2.if-int-category { font-size: 11px !important; letter-spacing: .08em; }
/* Partner Knowledge Base: the old centred tiles become choice cards */
.if-app .kb-block.if-choice { flex-direction: row; align-items: center; text-align: left; padding: 14px 40px 14px 14px !important; text-decoration: none !important; }
.if-app .kb-grid.if-choices { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
/* Billing: breathing room between the payment method cards and the description under them */
#methods-row.if-choices + #payment-description { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--if-row-border); }
#methods-row.if-choices + #payment-description:empty { display: none; }

/* Users */
.if-users { max-width: 980px; }
.if-users .if-section-heading { align-items: flex-end; }
.if-users-table { min-width: 0 !important; }
.if-users-table .actions-td { width: 1%; white-space: nowrap; text-align: right; }
.if-user-cell { display: inline-flex; align-items: center; gap: 10px; }
.if-user-cell strong { font-weight: 700; color: var(--if-ink); }
.if-user-email { color: var(--if-muted) !important; }
.if-users .if-empty-state > i { color: var(--if-accent); background: var(--if-tint); }
.page-users #error-container:empty { display: none; }
/* Integrations: the "Connectors" group above SIEMs, threat intelligence platforms and business tools */
.page-integrations .if-int-group { margin: 34px 0 4px; padding-top: 22px; border-top: 1px solid var(--if-border); }
.page-integrations .if-int-group h2 { margin: 0 0 3px; font-size: 18px !important; font-weight: 750; color: var(--if-ink); letter-spacing: -.02em; }
.page-integrations .if-int-group p { margin: 0; font-size: 12.5px; color: var(--if-muted); }
.page-integrations .if-int-group + .if-int-category { margin-top: 16px; }

/* Date picker (jQuery UI): month arrows as chevrons in the theme's text colour, in every theme */
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
  top: 4px !important; width: 30px; height: 30px; border: 0 !important; border-radius: 7px; background: transparent !important;
  display: grid; place-items: center; cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev { left: 4px !important; }
.ui-datepicker .ui-datepicker-next { right: 4px !important; }
.ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover,
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { background: var(--if-hover, #eef4ff) !important; }
/* The arrows are Font Awesome chevrons (custom jquery-ui.js); they inherited a white link colour */
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next, .ui-datepicker .ui-datepicker-prev i, .ui-datepicker .ui-datepicker-next i { color: var(--if-ink, #15233b) !important; font-size: 12px; }
.ui-datepicker .ui-datepicker-prev:hover i, .ui-datepicker .ui-datepicker-next:hover i { color: var(--if-accent, #2563eb) !important; }
.ui-datepicker .ui-datepicker-title { line-height: 30px; }

/* --- Dashboard: alert activity chart (js/alertActivity.js) ---
   Flat stacked bars per day by alert type, a 7-day average line, the period's type mix as a rank list,
   and a per-day breakdown ring that opens when a day is clicked. Type colors are validated for
   colour-blind separation in both themes; the first follows a partner's chart color when one is set. */
html[data-theme="light"] { --if-type-1: var(--if-chart-accent, #2563eb); --if-type-2: #d97706; --if-type-3: #0d9488; --if-type-4: #7c3aed; --if-type-5: #db2777; --if-type-6: #94a3b8; --if-aa-halo: #ffffff; --if-aa-empty: #dbe3ef; }
html[data-theme="dark"] { --if-type-1: var(--if-chart-accent, #5b8ef0); --if-type-2: #c97a1a; --if-type-3: #1a9e90; --if-type-4: #9a6ff0; --if-type-5: #dc5a8c; --if-type-6: #6b7b92; --if-aa-halo: #142036; --if-aa-empty: #22314a; }
.if-insights > .if-activity-card { grid-column: 1 / -1; }
.if-insights > .if-side-stack { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.if-aa-body { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 28px; }
.if-aa-stage { position: relative; min-height: 360px; }
.if-aa-chart { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.if-aa-chart text { font-family: 'Manrope', 'Inter', 'Segoe UI', sans-serif; }
.if-aa-tick { fill: var(--if-chart-text); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.if-aa-grid { stroke: var(--if-chart-grid); stroke-width: 1; }
.if-aa-base { stroke: var(--if-border); stroke-width: 1; }
.if-aa-fade { transition: opacity .3s ease; }
.if-aa-stage.is-detail .if-aa-fade { opacity: 0; }
.if-aa-col { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s ease; }
.if-aa-stage.is-hovering .if-aa-col { opacity: .45; }
.if-aa-stage.is-hovering .if-aa-col.is-hover { opacity: 1; }
.if-aa-stage.is-detail .if-aa-col { transform: scaleY(0); opacity: 0; }
.if-aa-hit { fill: transparent; cursor: pointer; outline: none; }
.if-aa-hit:focus-visible { outline: 2px solid var(--if-focus); }
.if-aa-stage.is-detail .if-aa-hit { pointer-events: none; }
.if-aa-cap { fill: var(--if-ink); font-size: 11.5px; font-weight: 750; text-anchor: middle; font-variant-numeric: tabular-nums; pointer-events: none; opacity: 0; transition: opacity .15s ease; }
.if-aa-cap.is-on { opacity: 1; }
.if-aa-kpis { position: absolute; left: 0; top: 0; display: flex; gap: 26px; pointer-events: none; transition: opacity .3s ease; }
.if-aa-kpi { font-size: 24px; font-weight: 800; letter-spacing: -.04em; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--if-ink); }
.if-aa-kpi-label { margin-top: 1px; font-size: 11px; font-weight: 650; color: var(--if-muted); }
.if-aa-stage.is-detail .if-aa-kpis { opacity: 0; }
.if-aa-back { position: absolute; left: 0; top: 0; z-index: 2; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--if-border); background: var(--if-surface); color: var(--if-ink-2); font-size: 12px; font-weight: 650; padding: 6px 11px; border-radius: 6px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .25s ease .2s; }
.if-aa-back:hover { color: var(--if-accent); background: var(--if-tint); }
.if-aa-back i { font-size: 11px; }
.if-aa-stage.is-detail .if-aa-back { opacity: 1; pointer-events: auto; }
.if-aa-donut { position: absolute; left: 0; top: 0; width: 200px; height: 200px; transform-origin: 50% 50%; will-change: transform, opacity; opacity: 0; pointer-events: none; }
.if-aa-donut svg { width: 100%; height: 100%; overflow: visible; }
.if-aa-donut .arc { cursor: pointer; transition: stroke-width .2s ease, opacity .2s ease; }
.if-aa-donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.if-aa-donut-center b { font-size: 28px; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--if-ink); }
.if-aa-donut-center small { font-size: 11px; font-weight: 650; color: var(--if-muted); }
.if-aa-box { position: absolute; top: 0; left: 0; width: 250px; padding: 14px 16px; border-radius: 10px; background: var(--if-surface); border: 1px solid var(--if-border); box-shadow: var(--if-shadow-hover); opacity: 0; pointer-events: none; will-change: transform, opacity; }
.if-aa-box-date { font-size: 11px; font-weight: 650; color: var(--if-muted); }
.if-aa-box-total { margin: 1px 0 10px; font-size: 16px; font-weight: 750; color: var(--if-ink); }
.if-aa-box-total span { display: block; font-size: 11px; font-weight: 600; color: var(--if-muted); }
.if-aa-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 5px 7px; margin: 0 -7px; border-radius: 6px; font-size: 12px; font-variant-numeric: tabular-nums; }
.if-aa-row.is-hot { background: var(--if-hover); }
.if-aa-row i { width: 8px; height: 8px; border-radius: 50%; }
.if-aa-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--if-ink-2); }
.if-aa-row b { font-weight: 750; color: var(--if-ink); }
.if-aa-row b small { font-weight: 600; color: var(--if-muted); margin-left: 5px; }
.if-aa-empty-day { font-size: 12px; color: var(--if-muted); margin: 0 0 6px; }
.if-aa-open { display: inline-flex; gap: 7px; align-items: center; margin-top: 10px; background: var(--if-accent); color: #fff !important; font-size: 12px; font-weight: 650; padding: 6px 12px; border-radius: 6px; text-decoration: none !important; }
.if-aa-open:hover { background: var(--if-accent-hover); }
.if-aa-status { position: absolute; inset: 0; display: grid; place-items: center; color: var(--if-muted); font-size: 12px; pointer-events: none; }
.if-aa-status[hidden] { display: none; }
.if-aa-mix { display: grid; align-content: start; gap: 14px; min-width: 0; }
.if-aa-mix-top { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; }
.if-aa-eyebrow { font-size: 11px; font-weight: 650; color: var(--if-muted); }
.if-aa-headline { font-size: 15px; font-weight: 750; line-height: 1.3; margin: 0; color: var(--if-ink); text-wrap: balance; }
.if-aa-subline { font-size: 11px; color: var(--if-muted); margin: 3px 0 0; line-height: 1.5; }
.if-aa-ring { position: relative; width: 96px; height: 96px; }
.if-aa-ring svg { width: 100%; height: 100%; overflow: visible; }
.if-aa-ring-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.if-aa-ring-center b { font-size: 17px; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--if-ink); }
.if-aa-ring-center small { font-size: 10px; font-weight: 650; color: var(--if-muted); }
.if-aa-types { display: grid; gap: 4px; }
.if-aa-type { display: block; width: calc(100% + 14px); margin: 0 -7px; padding: 5px 7px; text-align: left; border: 0; background: transparent; border-radius: 6px; cursor: pointer; color: inherit; font: inherit; }
.if-aa-type:hover { background: var(--if-hover); }
.if-aa-type.is-off { opacity: .4; }
.if-aa-type.is-solo { background: var(--if-tint); }
.if-aa-type-label { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--if-ink-2); margin-bottom: 5px; }
.if-aa-type-label > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.if-aa-type-label i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.if-aa-type-label strong { color: var(--if-ink); font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.if-aa-type-label strong small { color: var(--if-muted); font-weight: 600; margin-left: 4px; font-size: 11px; }
.if-aa-track { display: block; height: 6px; border-radius: 4px; background: var(--if-surface-3); overflow: hidden; }
.if-aa-track > span { display: block; height: 100%; border-radius: 4px; transition: width .5s ease; }
.if-aa-note { font-size: 11px; color: var(--if-subtle); margin: 0; }
@keyframes if-aa-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.if-aa-col.is-intro { animation: if-aa-rise .6s cubic-bezier(.2, .8, .2, 1) both; }
@media (max-width: 1100px) { .if-aa-body { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .if-insights > .if-side-stack { grid-template-columns: 1fr; } .if-aa-stage { min-height: 300px; } }
@media (prefers-reduced-motion: reduce) { .if-aa-col, .if-aa-fade, .if-aa-back, .if-aa-kpis, .if-aa-track > span { transition: none !important; } .if-aa-col.is-intro { animation: none; } }

/* Alerts list: the detection-day filter set from the dashboard chart */
.if-day-filter { display: flex; width: max-content; max-width: 100%; align-items: center; gap: 9px; margin: 0 0 12px; padding: 5px 6px 5px 12px; border: 1px solid var(--if-border); border-radius: 999px; background: var(--if-tint); color: var(--if-ink-2); font-size: 12px; }
.if-day-filter strong { color: var(--if-ink); font-weight: 750; }
.if-day-filter i.fa-calendar-day { color: var(--if-accent); }
.if-day-filter button { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--if-muted); cursor: pointer; }
.if-day-filter button:hover { background: var(--if-surface); color: var(--if-ink); }

/* Empty alert and takedown lists (js/app.js) */
.if-list-empty { margin: 4px 0 16px; }
.if-list-empty > i.fa-filter { color: var(--if-accent); background: var(--if-tint); }
.if-list-empty > i { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; padding: 0 !important; font-size: 18px !important; line-height: 1; }
.if-empty-state.if-list-empty { padding: 22px 26px !important; gap: 16px; }

/* Alert activity card in the partner and administration dashboards */
.if-aa-mix-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.if-aa-mix-head .if-segmented { flex-shrink: 0; }
.if-aa-type.is-static { cursor: default; }
.if-aa-type.is-static:hover { background: transparent; }
.if-aa-note[hidden] { display: none; }
/* Administration: system status as one full-width card, queues beside storage */
.if-insights > .if-sys-card { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.if-sys-card .if-sys-col > h2 { margin-top: 0; }
@media (max-width: 900px) { .if-insights > .if-sys-card { grid-template-columns: minmax(0, 1fr); } }

/* Uploaded files (customer Account > letters, Files tab of a customer in the portals): a file chip in the
   page's own type instead of 16px underlined text. */
html[data-theme] .file-container { display: inline-flex; align-items: center; gap: 0; max-width: 100%; margin-top: 4px; padding: 7px 12px; border: 1px solid var(--if-border); border-radius: 8px; background: var(--if-surface); font-size: 13px; line-height: 1.4; }
html[data-theme] .file-container > i { color: var(--if-accent); font-size: 13px; }
html[data-theme] .file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--if-ink) !important; font-weight: 600; text-decoration: none; }
html[data-theme] .file-name:hover { color: var(--if-accent) !important; text-decoration: underline; }