/**
 * Gideon: larger font size in main content area only
 */
.content-page {
  font-size: 1rem;
  margin-left: var(--ins-sidenav-width);
  transition: margin-left 0.25s ease-in-out;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-x: visible;
  padding-bottom: 0;
}

html[data-sidenav-size=condensed] .content-page {
  margin-left: var(--ins-sidenav-width-sm);
}

html[data-sidenav-size=compact] .content-page {
  margin-left: var(--ins-sidenav-width-md);
}

/* Main content container must participate in full-height flex layout */
.content-page > .container-fluid {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Availability reminder banner: inside container-fluid; full-bleed bar under page title */
.availability-banner-wrap {
  margin-left: calc(-1 * var(--bs-gutter-x, 0.75rem));
  margin-right: calc(-1 * var(--bs-gutter-x, 0.75rem));
  margin-bottom: 1rem;
}
.availability-banner-wrap .alert {
  border-radius: 0;
}
/* Mobile: message and button stack so message isn't squeezed into a small box */
@media (max-width: 991.98px) {
  .availability-banner-wrap .alert {
    flex-direction: column;
    align-items: stretch;
    text-align: start;
  }
  .availability-banner-wrap .alert > span {
    flex: 0 0 auto;
    min-width: 0;
  }
  .availability-banner-wrap .alert .dropdown {
    flex: 0 0 auto;
    align-self: flex-start;
  }
}

/* ==========================================================================
   Dedicated AI agent chat page
   - page fills viewport height, only messages area scrolls, composer always visible
   ========================================================================== */

/* Constrain the page to viewport height so the chat card fills it and only #chatMessages scrolls */
body.ai-agent-chat-route .wrapper {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}
body.ai-agent-chat-route .wrapper > .content-page,
body.ai-agent-chat-route .wrapper > .gideon-layout-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
body.ai-agent-chat-route .content-page > .container-fluid {
  min-height: 0;
  overflow: hidden;
}

/* Chat block: fills available space in the constrained layout */
#ai-agent-chat-page.ai-agent-chat-page {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  display: flex;
  flex-direction: column;
}

#ai-agent-chat-page.ai-agent-chat-page.row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
}

#ai-agent-chat-page > .col-12 {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
}

#ai-agent-chat-page .card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#ai-agent-chat-page .card-header {
  flex: 0 0 auto;
}

#ai-agent-chat-page .card-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#ai-agent-chat-page #chatAlert,
#ai-agent-chat-page #chatExampleChips,
#ai-agent-chat-page #chatQuickReplySection,
#ai-agent-chat-page .border-top.p-3 {
  flex: 0 0 auto;
}

#ai-agent-chat-page #chatMessages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

#ai-agent-chat-page .min-height-0 {
  min-height: 0 !important;
}

/* Welcome text should not look disabled */
#chatWelcome {
  color: var(--bs-body-color, #212529) !important;
  font-size: 0.95rem;
  line-height: 1.65;
}

#chatExampleChips {
  gap: 0.5rem !important;
}

#chatInput {
  resize: vertical;
  min-height: 52px;
  max-height: 180px;
}

/* Hide floating launcher on dedicated full chat page */
body.ai-agent-chat-route .gideon-ai-toggle-btn {
  display: none !important;
}

/**
 * Gideon AI: right-side panel, same pattern as left .sidenav-menu (fixed, full height when shown).
 * Only applied when FEATURE_GIDEON_AI is on.
 */
:root {
  --ins-gideon-sidebar-width: 360px;
  --ins-footer-height: 3.5rem;
}

.gideon-layout-wrap {
  display: flex;
  min-width: 0;
  position: relative;
  margin-left: var(--ins-sidenav-width);
  transition: margin 0.25s ease-in-out;
}
html[data-sidenav-size=condensed] .gideon-layout-wrap {
  margin-left: var(--ins-sidenav-width-sm);
}
html[data-sidenav-size=compact] .gideon-layout-wrap {
  margin-left: var(--ins-sidenav-width-md);
}

.gideon-layout-wrap .content-page {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 0;
  transition: margin-right 0.2s ease-out;
}
html[data-sidenav-size=condensed] .gideon-layout-wrap .content-page,
html[data-sidenav-size=compact] .gideon-layout-wrap .content-page {
  margin-left: 0;
}

/* Closed: zero width in flow (like collapsed sidenav) */
.gideon-ai-sidebar {
  flex: 0 0 auto;
  width: 0;
  overflow: hidden;
  background: var(--ins-light-bg-subtle, #f8f9fa);
  border-left: 1px solid var(--ins-border-color, #dee2e6);
  display: flex;
  flex-direction: column;
  transition: width 0.2s ease-out;
  min-height: 0;
}

/* When open: same as .sidenav-menu but on the right - fixed, full viewport height */
.gideon-layout-wrap.gideon-ai-open .gideon-ai-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--ins-gideon-sidebar-width);
  overflow: hidden;
  z-index: 1005;
  box-shadow: var(--ins-box-shadow);
}

/* Reserve space so content, topbar and footer don't sit under the panel */
.gideon-layout-wrap.gideon-ai-open {
  margin-right: var(--ins-gideon-sidebar-width);
}
body.gideon-ai-open .app-topbar {
  margin-right: var(--ins-gideon-sidebar-width);
}

.gideon-ai-sidebar-inner {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  height: 100%;
  width: var(--ins-gideon-sidebar-width);
  min-height: 0;
  overflow: hidden;
  font-size: 1rem;
}

.gideon-ai-sidebar-inner .small {
  font-size: 0.95rem;
}

.gideon-ai-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 1rem;
}

/* Toggle button: fixed at bottom-right; hidden when panel is open (use X to close) */
.gideon-ai-toggle-btn {
  position: fixed;
  bottom: 4rem;
  right: 0.5rem;
  z-index: 1040;
  padding: 0 !important;
  border-radius: 50% !important;
}

@media (min-width: 576px) {
  .gideon-ai-toggle-btn {
    right: 0;
    border-radius: 8px 0 0 8px !important;
  }
}

/* Hide toggle when panel is open (button is outside the wrap, so use body class) */
body.gideon-ai-open .gideon-ai-toggle-btn {
  display: none !important;
}

/* ==========================================================================
   Mobile: allow horizontal scroll when content is wide (e.g. tickets table)
   ========================================================================== */
html {
  overflow-x: auto;
  max-width: 100%;
}
body {
  max-width: 100%;
  overflow-x: auto;
}
/* Wrapper: height by content so layout works with or without availability banner */
.wrapper {
  height: auto;
  min-height: 0;
  min-width: 0;
  overflow-x: visible;
  display: flex;
  flex-direction: column;
}

/* Main content blocks (direct children of .wrapper) take only their content height */
.wrapper > .content-page,
.wrapper > .gideon-layout-wrap {
  flex: 0 0 auto;
}

/* ==========================================================================
   Footer: in flow, no stretching
   ========================================================================== */

.content-page .footer {
  flex: 0 0 auto;
  margin-top: 1rem;
}

/* Profile avatar fallback when no picture: show initials in a circle */
.avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bs-primary, #5b73e8);
  color: #fff;
  font-weight: 600;
  font-size: 0.875em;
}
.avatar-initials.avatar-md {
  width: 2.5rem;
  height: 2.5rem;
}
.avatar-initials.topbar-avatar {
  width: 32px;
  height: 32px;
  font-size: 0.75rem;
}
.avatar-initials.dashboard-member-avatar,
.dashboard-member-avatar {
  width: 24px;
  height: 24px;
  font-size: 0.7rem;
  flex: 0 0 24px;
}

/* Topbar: allow flex items to shrink so avatar and title aren't cut off */
.app-topbar .topbar-menu {
  min-width: 0;
  flex-wrap: nowrap;
}
.app-topbar .topbar-menu > .d-flex:first-child {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.app-topbar .topbar-menu > .d-flex:last-child {
  flex: 0 0 auto;
  min-width: 0;
}
.app-topbar .logo-topbar .logo-lg img {
  max-height: 1.75rem;
}
.app-topbar .app-search {
  max-width: 100%;
  min-width: 0;
}
.app-topbar .app-search .form-control {
  max-width: 100%;
}
/* Topbar global search: dropdown must not be clipped by .d-flex:first-child overflow:hidden */
#topbar-search-results {
  position: fixed !important;
  z-index: 9999;
  top: 0;
  left: 0;
}
.topbar-item.nav-user .dropdown-toggle {
  min-width: 0;
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

/* Main content: allow horizontal scroll at page level so tickets/search tables don't sit in a small scroll frame */
.content-page {
  min-width: 0;
  overflow-x: visible;
}
.content-page .container-fluid {
  min-width: 0;
  overflow-x: visible;
}
/* Search and other pages that use .container: allow wide tables to extend and scroll at page level */
.content-page .container {
  max-width: none;
  overflow-x: visible;
}
.gideon-layout-wrap {
  min-width: 0;
  overflow-x: visible;
}

/* Page title / breadcrumb row: wrap and don't overflow */
.page-title-head {
  flex-wrap: wrap;
  min-width: 0;
  overflow-x: hidden;
}
.page-title-head .breadcrumb {
  flex-wrap: wrap;
}

/* Tickets / search: avoid inner scroll frame; let table extend and page scroll horizontally */
.table-responsive.overflow-visible {
  overflow-x: visible !important;
}


/* On small viewports, content and topbar full width (sidebar is overlay) */
@media (max-width: 991.98px) {
  .app-topbar,
  .content-page,
  .gideon-layout-wrap {
    margin-left: 0 !important;
  }

  /* Hamburger first: ensure tap target and visibility over theme quirks */
  .app-topbar .sidenav-toggle-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 2.5rem;
    min-height: 2.5rem;
  }

  /* Availability: icon-only closed state (label hidden via d-none d-lg-inline in template) */
  #availability-dropdown-btn {
    min-width: 2.25rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    justify-content: center;
  }
}

/* ==========================================================================
   Computers page: computer info modal (#info-dialog)
   ========================================================================== */
#info-dialog .info-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 0.35rem 1rem;
  align-items: baseline;
}
/* Allow long values (e.g. agent status badge) to wrap instead of overflowing the card */
#info-dialog .info-grid > * {
  min-width: 0;
}
#info-dialog #form-comp-status-msg {
  max-width: 100%;
}
#info-dialog #form-comp-status-msg .badge {
  white-space: normal;
  display: inline-block;
  max-width: 100%;
  text-align: left;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.35;
  vertical-align: top;
}
#info-dialog .modal-body .row > [class*="col-"] {
  min-width: 0;
}
#info-dialog .tracking-tight {
  letter-spacing: 0.02em;
}
#info-dialog .nav-pills .nav-link {
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  padding: 0.35rem 0.65rem;
}
#info-dialog .nav-pills .nav-link.active {
  font-weight: 600;
}
#info-dialog .modal-header.info-dialog-header {
  background: var(--bs-primary);
}
#info-dialog .info-dialog-icon-box {
  width: 48px;
  height: 48px;
}
#info-dialog .info-dialog-title {
  font-size: 1.25rem;
}
#info-dialog-status-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}
#info-dialog .info-dialog-inventory-tabs {
  flex-wrap: nowrap;
  scrollbar-width: thin;
}
#info-dialog .info-dialog-inventory-panes {
  max-height: 320px;
  overflow: auto;
}

/* ==========================================================================
   Inventory asset page: user picker (tag-style), details table, dropdown
   ========================================================================== */
.inv-user-picker {
  position: relative;
}
.inv-user-picker.min-height-input {
  min-height: 38px;
}
.inv-user-picker .inv-user-search:focus {
  outline: none;
  box-shadow: none;
}
.inv-user-picker .inv-user-search {
  min-width: 140px;
}
/* KB category icon picker: selected icon */
#kb-category-icon-picker .kb-icon-opt.active {
  background-color: var(--bs-primary);
  color: var(--bs-white);
  border-color: var(--bs-primary);
}

/* User picker dropdown: custom list (not Bootstrap dropdown) so it's not clipped by overflow */
.inv-user-dropdown-list {
  display: none;
  position: fixed;
  z-index: 1060;
  min-width: 200px;
  max-height: 220px;
  overflow-y: auto;
  margin-top: 2px;
  padding: 0.25rem 0;
  font-size: 0.875rem;
  color: var(--bs-body-color, #212529);
  background-color: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, rgba(0,0,0,.175));
  border-radius: 0.3rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
}
.inv-user-dropdown-list.show {
  display: block;
}
.inv-user-dropdown-list .inv-user-option {
  display: block;
  width: 100%;
  padding: 0.4rem 0.94rem;
  clear: both;
  font-weight: 400;
  color: var(--bs-body-color, #212529);
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.inv-user-dropdown-list .inv-user-option:hover {
  background-color: var(--bs-tertiary-bg, rgba(0,0,0,.04));
}
.inv-user-dropdown-list .inv-user-option-item {
  display: block;
  padding: 0.4rem 0.94rem;
  color: var(--bs-secondary-color, #6c757d);
  font-size: 0.8125rem;
}
.inv-user-tag-remove {
  font-size: 1rem;
  line-height: 1;
}

/* Transfer modal: user dropdown must be positioned relative to picker (modal transform breaks fixed) */
#inv-transfer-user-picker {
  position: relative;
}
#inv-transfer-user-picker .inv-user-dropdown-list {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  width: 100% !important;
  min-width: 100%;
  box-sizing: border-box;
}

/* Details table first column width (asset label) */
.inv-asset-details-table td:first-child {
  width: 38%;
}

/* --- Ticket list / view / edit (helpdesk) --- */
.ticket-list-page .ticket-filters {
  background: var(--bs-tertiary-bg, rgba(0,0,0,.03));
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
}
.ticket-table-wrap {
  overflow-x: auto;
}
.ticket-table {
  font-size: 0.95rem;
  line-height: 1.45;
}
.ticket-table th {
  white-space: nowrap;
  font-weight: 600;
}
.ticket-table .col-id { width: 3rem; }
.ticket-table .col-user { max-width: 120px; }
.ticket-table .col-title { min-width: 140px; }
.ticket-table .col-assignee { max-width: 100px; }
.ticket-table .col-priority, .ticket-table .col-status { white-space: nowrap; }
.ticket-table .col-created, .ticket-table .col-updated { white-space: nowrap; }
.ticket-table .col-duration { white-space: nowrap; }
.ticket-table td,
.ticket-table th {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}
.ticket-row:hover {
  background-color: var(--bs-tertiary-bg, rgba(0,0,0,.04));
}
.ticket-row-overdue {
  border-left: 3px solid var(--bs-warning, #ffc107);
}
/* Priority borders override overdue when both apply (same specificity, order wins) */
.ticket-row-high-priority {
  border-left: 3px solid var(--bs-danger, #dc3545);
}
.ticket-row-critical {
  border-left: 3px solid purple;
}
.ticket-row-closed {
  border-left: 3px solid var(--bs-secondary, #6c757d);
}
.badge-priority.bg-secondary { background-color: var(--bs-secondary) !important; }
.badge-status.bg-secondary { background-color: var(--bs-secondary) !important; }
/* Ensure status badges on ticket list have visible text (priority uses .priority-* classes with own colors) */
.ticket-table .col-status .badge:not(.bg-warning) {
  color: #fff !important;
}
.ticket-table .col-status .badge.bg-warning {
  color: #212529 !important;
}

/* Edit ticket form: ensure status select is visible (empty selects can collapse in some browsers) */
#edit-ticket-form #tstatus.form-select {
  min-height: 1.75rem;
  width: 100%;
}

/* Priority badge classes (from karnaf.css) - used when helpdesk_priorities.color_class is set or fallback by priority_id */
.badge.priority-low {
  background-color: #4DB0F7;
  color: #000;
}
.badge.priority-normal {
  background-color: #EFEFEF;
  color: #000;
}
.badge.priority-high {
  background-color: #FF3300;
  color: #fff;
}
.badge.priority-critical {
  background-color: purple;
  color: #fff;
}

/* Urgency badge classes */
.badge.urgency-low {
  background-color: #E5E7EB;
  color: #000;
}

.badge.urgency-normal {
  background-color: #FCD34D;
  color: #000;
}

.badge.urgency-high {
  background-color: #F59E0B;
  color: #000;
}

.badge.urgency-urgent {
  background-color: #D97706;
  color: #fff;
}

.badge.urgency-critical {
  background-color: #92400E;
  color: #fff;
}

.ticket-count {
  font-weight: 500;
}

.ticket-view-page pre,
.ticket-edit-page pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.95rem;
  line-height: 1.6;
}
.ticket-view-page .card-header,
.ticket-edit-page .card-header {
  font-size: 1rem;
}
.ticket-view-page .list-group-item pre,
.ticket-edit-page .list-group-item pre {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0;
}
.ticket-edit-page #editTicketTabContent .tab-pane {
  display: none;
}
.ticket-edit-page #editTicketTabContent .tab-pane.show {
  display: block;
}

/* KB article body: code blocks and callouts (warning, info, note) */
.kb-article-body pre,
.kb-article-layout pre {
  background: var(--bs-tertiary-bg, #f8f9fa);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.25rem;
  padding: 0.75rem 1rem;
  overflow-x: auto;
  font-size: 0.875rem;
}
.kb-article-body pre code,
.kb-article-layout pre code {
  background: none;
  padding: 0;
}
.kb-article-body .kb-callout,
.kb-article-layout .kb-callout {
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  border-left: 4px solid;
  border-radius: 0 0.25rem 0.25rem 0;
}
.kb-article-body .kb-callout-title,
.kb-article-layout .kb-callout-title {
  font-weight: 600;
  margin: 0 0 0.35em 0;
}
.kb-article-body .kb-callout p:last-child,
.kb-article-layout .kb-callout p:last-child {
  margin-bottom: 0;
}
.kb-article-body .kb-callout-warning,
.kb-article-layout .kb-callout-warning {
  background: #fff3cd;
  border-color: #ffc107;
}
.kb-article-body .kb-callout-info,
.kb-article-layout .kb-callout-info {
  background: #cff4fc;
  border-color: #0dcaf0;
}
.kb-article-body .kb-callout-note,
.kb-article-layout .kb-callout-note {
  background: #e7f1ff;
  border-color: #0d6efd;
}

/* KB redesign: premium layout, cards, hero, and browse/view surfaces */
.content-page .kb-page {
  --kb-bg: #f3f6fb;
  --kb-surface: #ffffff;
  --kb-border: #e6ebf2;
  --kb-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --kb-shadow-soft: 0 6px 18px rgba(15, 23, 42, 0.06);
  --kb-title: #0f172a;
  --kb-muted: #5b6577;
  --kb-accent: #2f6fed;
  color: var(--kb-title);
}
.content-page .kb-home-page .kb-hero {
  border-radius: 1rem;
  background: linear-gradient(135deg, #254e9f 0%, #2f6fed 35%, #4f8cff 100%);
  box-shadow: var(--kb-shadow);
  color: #fff;
  border: 0 !important;
}
.content-page .kb-home-page .kb-hero-inner {
  padding: 2rem 2rem 1.25rem;
}
.kb-hero-title {
  font-size: 2.3rem !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff !important;
}
.kb-hero-subtitle {
  color: rgba(255, 255, 255, 0.9);
  max-width: 44rem;
  font-size: 1rem;
}
.kb-hero-search {
  margin-top: 1.25rem;
  max-width: 52rem;
}
.kb-search-group .form-control {
  border: 0;
  box-shadow: none;
}
.kb-search-group .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.kb-quick-link {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}
.kb-quick-link:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.kb-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.kb-stat-chip {
  min-width: 120px;
  padding: 0.5rem 0.7rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  display: flex;
  flex-direction: column;
}
.kb-stat-chip span {
  font-size: 1.15rem;
  line-height: 1.1;
  font-weight: 700;
  color: #fff;
}
.kb-stat-chip small {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.88);
}
.kb-surface-card {
  border: 1px solid var(--kb-border) !important;
  border-radius: 1rem !important;
  box-shadow: var(--kb-shadow-soft) !important;
  background: #fff !important;
}
.kb-surface-card .card-header {
  border-top-left-radius: 1rem !important;
  border-top-right-radius: 1rem !important;
}
.kb-surface-card .card-body {
  padding: 1rem 1rem 1.1rem !important;
}
.kb-popular-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem;
  border: 1px solid var(--kb-border);
  border-radius: 0.7rem;
  transition: all 0.2s ease;
  color: var(--kb-title);
}
.kb-popular-link:hover {
  border-color: #c9d7ef;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}
.kb-popular-icon {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef4ff;
  color: var(--kb-accent);
}
.kb-popular-title {
  flex: 1;
  font-weight: 600;
  font-size: 0.95rem;
}
.kb-popular-arrow {
  color: #90a0b8;
}
.kb-cat-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 88px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--kb-border);
  border-radius: 0.85rem;
  background: var(--kb-surface);
  transition: all 0.2s ease;
  text-decoration: none !important;
}
.kb-cat-card-clickable {
  cursor: pointer;
}
.kb-cat-card-clickable:focus-visible {
  outline: 2px solid #7aa6f7;
  outline-offset: 2px;
}
.kb-cat-card:hover {
  transform: translateY(-1px);
  border-color: #c9d7ef;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.kb-cat-icon-wrap {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #eef4ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.35rem;
}
.kb-cat-icon-wrap i {
  font-size: 1rem;
}
.kb-cat-card .flex-grow-1 {
  padding-right: 0.35rem;
}
.kb-cat-card .flex-grow-1 .fw-semibold {
  line-height: 1.28;
}
.kb-cat-card .text-muted.small {
  display: inline-block;
  margin-top: 0.15rem;
}
.kb-cat-arrow {
  color: #90a0b8;
}
.kb-cat-card .kb-cat-edit-btn {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
}
.kb-browse-page .kb-categories-nav .kb-cat-row {
  border-radius: 0.7rem;
  margin-bottom: 0.45rem;
  border: 1px solid var(--kb-border);
  background: var(--kb-surface);
}
.kb-browse-page .kb-categories-nav .kb-cat-row.active {
  border-color: #bcd0f4;
  background: #eef4ff;
}
.kb-browse-page .kb-categories-nav .kb-cat-link {
  min-width: 0;
  gap: 0.4rem;
}
.kb-browse-page .kb-browse-cat-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
  line-height: 1.25;
}
.kb-browse-page .kb-browse-cat-count {
  flex: 0 0 auto;
  margin-left: 0.35rem;
  padding: 0.08rem 0.46rem;
  border-radius: 999px;
  background: #eaf1ff;
  border: 1px solid #d6e4fb;
  color: #42679d;
  font-size: 0.72rem;
  font-weight: 700;
}
.kb-browse-page .kb-categories-nav .kb-cat-row.active .kb-browse-cat-count {
  background: #dce9ff;
  border-color: #c3d9ff;
  color: #2f5fa7;
}
.kb-browse-page #kb-category-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--kb-title);
}
.kb-article-card {
  display: block;
  border: 1px solid var(--kb-border);
  border-radius: 0.85rem;
  background: #fff;
  padding: 0.9rem 1rem;
  color: var(--kb-title);
  min-height: 126px;
  transition: all 0.2s ease;
}
.kb-article-card-clickable {
  cursor: pointer;
}
.kb-article-card-clickable:focus-visible {
  outline: 2px solid #7aa6f7;
  outline-offset: 2px;
}
.kb-article-card:hover {
  border-color: #c9d7ef;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
  color: var(--kb-title);
}
.kb-article-card-title {
  font-weight: 600;
  line-height: 1.35;
  font-size: 0.98rem;
}
.kb-article-card-meta {
  margin-top: 0.45rem;
  color: var(--kb-muted);
  font-size: 0.8125rem;
}
.kb-view-page #kb-view-title {
  color: var(--kb-title);
  letter-spacing: -0.02em;
  font-weight: 700;
}
.kb-reading-surface {
  border: 1px solid var(--kb-border);
  border-radius: 1rem;
  padding: 1.35rem 1.35rem 1.1rem;
  background: #fff;
}
.kb-view-page .card-body {
  padding: 1.25rem !important;
}
.kb-reading-surface p {
  color: #1f2937;
  line-height: 1.75;
}
.kb-reading-surface h2,
.kb-reading-surface h3,
.kb-reading-surface h4 {
  color: #0f172a;
  margin-top: 1.4rem;
  margin-bottom: 0.7rem;
}
.kb-reading-surface h2 {
  font-size: 1.42rem;
}
.kb-reading-surface h3 {
  font-size: 1.2rem;
}
.kb-reading-surface ul,
.kb-reading-surface ol {
  padding-left: 1.2rem;
  line-height: 1.8;
}

@media (max-width: 991px) {
  .kb-hero-title {
    font-size: 1.7rem !important;
  }
  .content-page .kb-home-page .kb-hero-inner {
    padding: 1.3rem 1.1rem 1rem;
  }
}

/* Ticket view page (/view/?id=...) - match reference layout */
.ticket-view-page {
  background: #f1f5f9;
}
.ticket-view-page-title {
  color: #0f172a;
  letter-spacing: 0.02em;
}
.ticket-view-page .card {
  border: 1px solid #e2e8f0 !important;
}
.ticket-title {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0f172a;
}
.ticket-hero {
  background: #ffffff;
}
.ticket-view-page .ticket-actions .btn {
  box-shadow: none;
}
.ticket-view-page .ticket-actions .btn-teal {
  background: #0d9488;
  border-color: #0d9488;
  color: #fff;
}
.ticket-view-page .ticket-actions .btn-teal:hover {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}
.ticket-status-badge {
  background: #0d9488;
  color: #fff;
  font-weight: 600;
}
.ticket-tag-neutral {
  background: #fff;
  color: #475569;
  border: 1px solid #cbd5e1;
  font-weight: 500;
}
.ticket-view-page .card-header {
  font-weight: 600;
  color: #0f172a;
}
.conversation-list .conversation-item:last-child {
  border-bottom: 0 !important;
}
.conversation-pre {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  font-family: inherit;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
}
.conversation-pre-private {
  background: #fff7ed;
  border-color: #fdba74;
}
.conversation-badge {
  font-weight: 600;
  text-transform: lowercase;
  font-size: 0.7rem;
}
.conversation-badge-requester {
  background: #dbeafe;
  color: #1d4ed8;
  border: 1px solid #93c5fd;
}
.conversation-badge-reply {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
}
.conversation-badge-private {
  background: #ffedd5;
  color: #c2410c;
  border: 1px solid #fdba74;
}
.conversation-badge-action {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}
.ticket-view-page .kv-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.ticket-view-page .kv-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1rem;
  align-items: start;
}
.ticket-view-page .kv-label {
  color: #64748b;
}
.ticket-view-page .kv-value {
  color: #0f172a;
  font-weight: 500;
}
/* Ticket view / edit: icon timeline (Tabler timeline-icon-based pattern) */
.ticket-view-page .ticket-conversation-timeline,
.ticket-edit-page .ticket-conversation-timeline {
  position: relative;
}
.ticket-view-page .ticket-conversation-timeline .ticket-timeline-time,
.ticket-edit-page .ticket-conversation-timeline .ticket-timeline-time {
  min-width: 5.5rem;
  font-size: 0.8rem;
  line-height: 1.35;
  padding-top: 0.35rem;
}
@media (min-width: 768px) {
  .ticket-view-page .ticket-conversation-timeline .ticket-timeline-time,
  .ticket-edit-page .ticket-conversation-timeline .ticket-timeline-time {
    min-width: 7.5rem;
    font-size: 0.85rem;
    text-align: end;
  }
}
/* Mobile: time row above dot+content so the message column gets full width */
@media (max-width: 767.98px) {
  .ticket-view-page .ticket-conversation-timeline .timeline-item,
  .ticket-edit-page .ticket-conversation-timeline .timeline-item {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-areas:
      "time time"
      "dot content";
    column-gap: 0.75rem;
    row-gap: 0.35rem;
    align-items: start !important;
  }

  .ticket-view-page .ticket-conversation-timeline .ticket-timeline-time,
  .ticket-edit-page .ticket-conversation-timeline .ticket-timeline-time {
    grid-area: time;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 0 0.35rem 0 !important;
    margin: 0;
    text-align: start !important;
    font-size: 0.8rem;
    line-height: 1.25;
    white-space: normal;
    word-break: break-word;
  }

  .ticket-view-page .ticket-conversation-timeline .timeline-dot,
  .ticket-edit-page .ticket-conversation-timeline .timeline-dot {
    grid-area: dot;
    margin-top: 0.1rem;
  }

  .ticket-view-page .ticket-conversation-timeline .timeline-content,
  .ticket-edit-page .ticket-conversation-timeline .timeline-content {
    grid-area: content;
    padding-left: 0 !important;
    min-width: 0;
    padding-bottom: 1rem !important;
  }

  .ticket-view-page .ticket-conversation-timeline .ticket-timeline-heading,
  .ticket-edit-page .ticket-conversation-timeline .ticket-timeline-heading {
    display: block;
  }

  .ticket-view-page .ticket-conversation-timeline .conversation-badge,
  .ticket-edit-page .ticket-conversation-timeline .conversation-badge {
    margin-top: 0.25rem;
  }

  .ticket-view-page .ticket-conversation-timeline pre.conversation-pre,
  .ticket-edit-page .ticket-conversation-timeline pre.conversation-pre {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
  }
}
.ticket-view-page .ticket-conversation-timeline .timeline-dot,
.ticket-edit-page .ticket-conversation-timeline .timeline-dot {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  margin-top: 0;
  box-shadow: 0 0 0 3px #fff;
}
.ticket-view-page .ticket-timeline-dot--open,
.ticket-edit-page .ticket-timeline-dot--open {
  background: #dbeafe;
  color: #1d4ed8;
  border: 1px solid #93c5fd;
}
.ticket-view-page .ticket-timeline-dot--user,
.ticket-edit-page .ticket-timeline-dot--user {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.ticket-view-page .ticket-timeline-dot--staff,
.ticket-edit-page .ticket-timeline-dot--staff {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #6ee7b7;
}
.ticket-view-page .ticket-timeline-dot--private,
.ticket-edit-page .ticket-timeline-dot--private {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fdba74;
}
.ticket-view-page .ticket-timeline-dot--assign,
.ticket-edit-page .ticket-timeline-dot--assign {
  background: #f0f9ff;
  color: #0369a1;
  border: 1px solid #7dd3fc;
}
.ticket-view-page .ticket-timeline-dot--merge,
.ticket-edit-page .ticket-timeline-dot--merge {
  background: #faf5ff;
  color: #7c3aed;
  border: 1px solid #d8b4fe;
}
.ticket-view-page .ticket-timeline-dot--system,
.ticket-edit-page .ticket-timeline-dot--system {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}
.ticket-view-page .ticket-timeline-heading,
.ticket-edit-page .ticket-timeline-heading {
  font-weight: 600;
  color: #0f172a;
}
@media (min-width: 1200px) {
  .ticket-view-page .ticket-sidebar-sticky {
    position: sticky;
    top: 1.25rem;
  }
}
@media (max-width: 767.98px) {
  .ticket-view-page {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  .ticket-view-page .kv-row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
  .ticket-view-page .ticket-actions {
    width: 100%;
  }
  .ticket-view-page .ticket-actions .btn,
  .ticket-view-page .ticket-actions form,
  .ticket-view-page .ticket-actions form .btn {
    width: 100%;
  }
}

/* Ticket edit page (/edit/?id=...) */
.ticket-edit-page {
  background: #f4f7fb;
}
.ticket-edit-page .card {
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
}
.ticket-edit-hero {
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}
.ticket-edit-title {
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ticket-edit-tabs .nav-link {
  border: 1px solid #dbe3ee;
  background: #fff;
  color: #334155;
  font-weight: 500;
  padding: 0.6rem 1rem;
}
.ticket-edit-tabs .nav-link.active {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
}
.ticket-edit-page .card-header {
  font-weight: 600;
}
.ticket-edit-page .conversation-list .conversation-item:last-child {
  border-bottom: 0 !important;
}
.ticket-edit-page .conversation-pre {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  font-family: inherit;
  background: #f8fafc;
  border: 1px solid #e9eef5;
  border-radius: 1rem;
  padding: 1rem;
}
.ticket-edit-page .conversation-pre-private {
  background: #fff8e8;
  border-color: #f4ddb0;
}
.ticket-edit-page .conversation-badge {
  font-weight: 600;
  text-transform: lowercase;
}
.ticket-edit-page .reply-textarea,
.ticket-edit-page .action-textarea,
.ticket-edit-page #description,
.ticket-edit-page #description_tab {
  min-height: 160px;
}
.ticket-edit-page .kv-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.ticket-edit-page .kv-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1rem;
  align-items: start;
}
.ticket-edit-page .kv-label {
  color: #64748b;
}
.ticket-edit-page .kv-value {
  color: #0f172a;
  font-weight: 500;
}
@media (min-width: 1200px) {
  .ticket-edit-page .ticket-sidebar-sticky {
    position: sticky;
    top: 1.25rem;
  }
}
@media (max-width: 767.98px) {
  .ticket-edit-page {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  .ticket-edit-page .kv-row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

/* ==========================================================================
   Tom Select (timezone on settings, locations, org): readable dropdown
   - Raise stacking above siblings (MFA card, tabs, other fields) so the list
     isn't visually mixed with content behind it.
   - Opaque surfaces so option text stays legible on any background.
   ========================================================================== */
.ts-wrapper.dropdown-active {
  position: relative;
  z-index: 1060;
}
.ts-dropdown {
  z-index: 1061 !important;
  background-color: var(--bs-body-bg, #fff) !important;
  border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.175));
  border-radius: var(--bs-border-radius, 0.375rem);
  box-shadow: var(--bs-box-shadow-lg, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
}
.ts-dropdown-content {
  background-color: var(--bs-body-bg, #fff) !important;
}
.ts-dropdown .option {
  background-color: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #212529);
}
.ts-dropdown .option:hover,
.ts-dropdown .option.active,
.ts-dropdown .create:hover,
.ts-dropdown .create.active {
  background-color: var(--bs-tertiary-bg, #f8f9fa) !important;
  color: var(--bs-body-color, #212529);
}
.ts-dropdown .optgroup-header {
  background-color: var(--bs-secondary-bg, #e9ecef);
  color: var(--bs-body-color, #212529);
}

/* Ticket inbox (/inbox/): horizontal toolbar on small screens (Inspinia email.html) */
.inbox-toolbar-scroll {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.inbox-page .inbox-star-btn {
  cursor: pointer;
}
/* Unread = newuserreply (customer replied); closed rows use Inspinia .mark-as-read on parent .email-app */
.inbox-page .inbox-unread-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
}
.inbox-page .inbox-row-unread td {
  vertical-align: middle;
}

/* Inbox ticket view: one scrollbar - SimpleBar on #inboxViewThreadScroll only (no overflow-auto on same node).
   Cap .email-app height to viewport so the page body does not also scroll the same content. */
.inbox-view-page .inbox-view-email-app {
  min-height: 240px;
  max-height: calc(100vh - 12rem);
  overflow: hidden;
}
@media (max-width: 991.98px) {
  .inbox-view-page .inbox-view-email-app {
    max-height: calc(100vh - 10rem);
  }
}
.inbox-view-page .inbox-view-email-app > .card.d-flex.flex-column {
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}
.inbox-view-page #inboxViewThreadScroll.inbox-view-thread-scroll {
  min-height: 0;
  flex: 1 1 auto;
  position: relative;
  z-index: 1;
}
.inbox-view-page .card-body > .flex-shrink-0.border-top.mt-auto {
  position: relative;
  z-index: 3;
}

/* Compose (/inbox/compose): theme .outlook-box uses fixed viewport height + overflow, which forces a
   second scrollbar inside the card. Let the form define height and use normal page scroll only. */
.inbox-compose-page .outlook-box.email-app {
  height: auto;
  min-height: 0;
}
@media (max-width: 991.98px) {
  .inbox-compose-page .outlook-box.email-app {
    overflow: visible;
  }
}

/* --------------------------------------------------------------------------
   Self-service portal (/portal/*): company intranet-style layout
   -------------------------------------------------------------------------- */
body.portal-company-route .content-page > .container-fluid {
  max-width: 1200px;
}
.portal-shell {
  padding-bottom: 2rem;
}
.portal-topnav {
  background: linear-gradient(135deg, var(--bs-body-bg, #fff) 0%, var(--bs-tertiary-bg, #f8f9fa) 100%);
  border-radius: 1rem;
  padding: 0.75rem 1.25rem !important;
}
.portal-brand-icon {
  width: 2.75rem;
  height: 2.75rem;
  background: linear-gradient(145deg, #3d5afe 0%, #1a237e 100%);
  color: #fff;
  font-size: 1.35rem;
  box-shadow: 0 4px 14px rgba(26, 35, 126, 0.35);
}
.portal-brand-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--bs-body-color, #212529);
}
.portal-brand-sub {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--bs-secondary-color, #6c757d);
  font-weight: 600;
}
.portal-nav-toggler {
  border-radius: 2rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  font-size: 0.875rem;
}
.portal-nav-pills .portal-nav-link {
  border-radius: 2rem;
  padding: 0.5rem 1rem;
  font-weight: 500;
  color: var(--bs-secondary-color, #6c757d);
  transition: background 0.2s ease, color 0.2s ease;
}
.portal-nav-pills .portal-nav-link:hover {
  background: var(--bs-tertiary-bg, #f8f9fa);
  color: var(--bs-body-color, #212529);
}
.portal-nav-pills .portal-nav-link.active {
  background: linear-gradient(135deg, #3949ab 0%, #1a237e 100%);
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(26, 35, 126, 0.25);
}
.portal-hero {
  background: #1a237e;
  min-height: 11rem;
}
.portal-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(100, 181, 246, 0.45) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(171, 71, 188, 0.35) 0%, transparent 50%),
    linear-gradient(125deg, #1a237e 0%, #283593 40%, #0d1642 100%);
  opacity: 1;
}
.portal-hero-eyebrow {
  opacity: 0.85;
  letter-spacing: 0.2em;
}
.portal-hero-title {
  font-size: clamp(1.5rem, 4vw, 2rem);
}
.portal-hero-lead {
  max-width: 36rem;
}
.portal-tile {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid transparent !important;
}
.portal-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.75rem 2rem rgba(26, 35, 126, 0.12) !important;
  border-color: rgba(57, 73, 171, 0.15) !important;
}
.portal-tile-icon {
  width: 3rem;
  height: 3rem;
  font-size: 1.5rem;
  background: var(--bs-tertiary-bg, #f8f9fa);
}
.portal-quick-link {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.portal-quick-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.08) !important;
}
.portal-quick-link:hover .portal-quick-icon {
  background: linear-gradient(135deg, #3949ab 0%, #1a237e 100%);
  color: #fff;
}
.portal-quick-icon {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.15rem;
  background: var(--bs-tertiary-bg, #f8f9fa);
  color: var(--bs-primary, #3d5afe);
  transition: background 0.2s ease, color 0.2s ease;
}
.portal-section-panel .portal-table-wrap {
  overflow: hidden;
}
.portal-catalog-card {
  transition: box-shadow 0.2s ease;
}
.portal-catalog-card:hover {
  box-shadow: 0 0.5rem 1.5rem rgba(26, 35, 126, 0.1) !important;
}
.portal-catalog-pkg {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.25rem;
  background: var(--bs-tertiary-bg, #f8f9fa);
  color: var(--bs-success, #198754);
}
html[data-bs-theme="dark"] .portal-topnav {
  background: linear-gradient(135deg, var(--bs-body-bg) 0%, rgba(255, 255, 255, 0.04) 100%);
}
html[data-bs-theme="dark"] .portal-hero-bg {
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(100, 181, 246, 0.2) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(171, 71, 188, 0.15) 0%, transparent 50%),
    linear-gradient(125deg, #0d1429 0%, #1a237e 50%, #0a0e1a 100%);
}
html[data-bs-theme="dark"] .portal-tile-icon,
html[data-bs-theme="dark"] .portal-quick-icon,
html[data-bs-theme="dark"] .portal-catalog-pkg {
  background: rgba(255, 255, 255, 0.06);
}

/* Karnaf-style ticket presence: who else is viewing/editing (polls /api_watching_heartbeat) */
.ticket-watching-presence {
  font-size: 0.9rem;
}
html[data-bs-theme="dark"] .ticket-watching-presence.alert-info {
  background: rgba(13, 110, 253, 0.12);
  color: var(--bs-body-color, inherit);
  border: 1px solid rgba(13, 110, 253, 0.25) !important;
}

/* Language icon pickers (tenant settings, locations, platform tenant) */
.btn.ui-lang-opt.active,
.btn.location-lang-opt.active {
  background-color: rgba(13, 110, 253, 0.08);
  color: var(--bs-body-color, #212529);
  border-color: var(--bs-primary, #0d6efd);
}

/* Keep selected language labels readable when Bootstrap marks outline buttons active. */
.btn.btn-outline-secondary.ui-lang-opt.active,
.btn.btn-outline-secondary.location-lang-opt.active,
.btn.btn-outline-secondary.ui-lang-opt.active:hover,
.btn.btn-outline-secondary.location-lang-opt.active:hover,
.btn.btn-outline-secondary.ui-lang-opt.active:focus,
.btn.btn-outline-secondary.location-lang-opt.active:focus,
.btn-group > .btn.btn-outline-secondary.ui-lang-opt.active,
.btn-group > .btn.btn-outline-secondary.location-lang-opt.active,
.btn-group > .btn.btn-outline-secondary.ui-lang-opt.active:hover,
.btn-group > .btn.btn-outline-secondary.location-lang-opt.active:hover,
.btn-group > .btn.btn-outline-secondary.ui-lang-opt.active:focus,
.btn-group > .btn.btn-outline-secondary.location-lang-opt.active:focus {
  color: var(--bs-body-color, #212529);
  border-color: var(--bs-primary, #0d6efd);
}

html[data-bs-theme="dark"] .btn.btn-outline-secondary.ui-lang-opt.active,
html[data-bs-theme="dark"] .btn.btn-outline-secondary.location-lang-opt.active,
html[data-bs-theme="dark"] .btn-group > .btn.btn-outline-secondary.ui-lang-opt.active,
html[data-bs-theme="dark"] .btn-group > .btn.btn-outline-secondary.location-lang-opt.active {
  color: var(--bs-light, #f8f9fa);
}

/* --------------------------------------------------------------------------
   RTL: keep <html dir="ltr"> and .sidenav-menu without dir. Use dir only on
   .content-page and .auth-box (see templates).
   Icon + label: flex + gap - strip icon margins (no me-*/ms-* with gap).
   :has(> i) limits to controls with a direct icon child; opt-in classes for
   nested icons or special cases. Use row-reverse if markup is text-then-icon.
   Topbar and sidebar stay LTR; dropdown items there keep default spacing.
   -------------------------------------------------------------------------- */
.content-page[dir="rtl"] .btn:has(> i),
.auth-box[dir="rtl"] .btn:has(> i),
.content-page[dir="rtl"] .btn-group > .btn:has(> i),
.auth-box[dir="rtl"] .btn-group > .btn:has(> i),
.content-page[dir="rtl"] .btn-with-icon,
.auth-box[dir="rtl"] .btn-with-icon,
.content-page[dir="rtl"] .btn-group > .btn-with-icon,
.auth-box[dir="rtl"] .btn-group > .btn-with-icon {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  column-gap: 0.5rem;
  text-align: start;
  vertical-align: middle;
}
.content-page[dir="rtl"] .btn:has(> i) > i,
.auth-box[dir="rtl"] .btn:has(> i) > i,
.content-page[dir="rtl"] .btn-group > .btn:has(> i) > i,
.auth-box[dir="rtl"] .btn-group > .btn:has(> i) > i,
.content-page[dir="rtl"] .btn-with-icon > i,
.auth-box[dir="rtl"] .btn-with-icon > i,
.content-page[dir="rtl"] .btn-group > .btn-with-icon > i,
.auth-box[dir="rtl"] .btn-group > .btn-with-icon > i {
  margin: 0 !important;
  flex: 0 0 auto;
}
.content-page[dir="rtl"] .btn:has(> i) > span,
.auth-box[dir="rtl"] .btn:has(> i) > span,
.content-page[dir="rtl"] .btn-with-icon > span,
.auth-box[dir="rtl"] .btn-with-icon > span,
.content-page[dir="rtl"] .btn-group > .btn:has(> i) > span,
.auth-box[dir="rtl"] .btn-group > .btn:has(> i) > span,
.content-page[dir="rtl"] .btn-group > .btn-with-icon > span,
.auth-box[dir="rtl"] .btn-group > .btn-with-icon > span {
  flex: 0 1 auto;
  text-align: start;
}

.content-page[dir="rtl"] .dropdown-item:has(> i),
.auth-box[dir="rtl"] .dropdown-item:has(> i),
.content-page[dir="rtl"] .dropdown-item-with-icon,
.auth-box[dir="rtl"] .dropdown-item-with-icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  column-gap: 0.5rem;
  text-align: start;
}
.content-page[dir="rtl"] .dropdown-item:has(> i) > i,
.auth-box[dir="rtl"] .dropdown-item:has(> i) > i,
.content-page[dir="rtl"] .dropdown-item-with-icon > i,
.auth-box[dir="rtl"] .dropdown-item-with-icon > i {
  margin: 0 !important;
  flex: 0 0 auto;
}
.content-page[dir="rtl"] .dropdown-item:has(> i) > span,
.auth-box[dir="rtl"] .dropdown-item:has(> i) > span,
.content-page[dir="rtl"] .dropdown-item-with-icon > span,
.auth-box[dir="rtl"] .dropdown-item-with-icon > span {
  flex: 0 1 auto;
  text-align: start;
}

/* Nav links with icon (main content / auth only; sidebar stays LTR) */
.content-page[dir="rtl"] .nav-link-with-icon,
.auth-box[dir="rtl"] .nav-link-with-icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  text-align: start;
}
.content-page[dir="rtl"] .nav-link-with-icon > i,
.auth-box[dir="rtl"] .nav-link-with-icon > i {
  flex: 0 0 auto;
  margin: 0 !important;
}

/* Send message: Choices.js multiple select - avoid double spacing with .mb-3 */
#sendmsg-recipients-wrap .choices {
  margin-bottom: 0;
}

/* Broadcast: Tagify user list - match Inspinia form demo (bordered scope, no JSON input leak) */
.mb-recipient-tagify-wrap {
  position: relative;
  margin-bottom: 0;
}

/*
 * Tagify inserts <tags class="tagify form-control"> then leaves the original <input> as next sibling
 * for JSON value; Bootstrap .form-control keeps it visible unless hidden.
 */
.mb-recipient-tagify-wrap tags.tagify + #mb-user-tagify,
.mb-recipient-tagify-wrap .tagify + #mb-user-tagify {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.mb-recipient-tagify-wrap tags.tagify,
.mb-recipient-tagify-wrap .tagify {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.35rem;
  width: 100%;
  min-height: calc(2.1259rem + 2px);
  /* Tight padding: large outer padding made Tagify treat "margin" clicks as focus/blur glitches (dropdown opens then closes on mouseup). */
  padding: 0.2rem 0.35rem;
  margin-bottom: 0;
  border: 1px solid var(--ins-border-color, var(--bs-border-color, #dee2e6));
  border-radius: var(--bs-border-radius, 0.375rem);
  background-color: var(--ins-secondary-bg, var(--bs-body-bg, #fff));
}

/* Fill the row so clicks land on the real input, not empty flex gutter. */
.mb-recipient-tagify-wrap .tagify__input {
  flex: 1 1 auto;
  min-width: 10rem;
  min-height: 1.65rem;
  padding: 0.2rem 0.35rem !important;
}

.mb-recipient-tagify-wrap tags.tagify:focus-within,
.mb-recipient-tagify-wrap .tagify.tagify--focus {
  border-color: var(--ins-primary, var(--bs-primary, #0d6efd));
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Avatar row + remove control on the end of the pill (theme default assumes <x> before <div>) */
.mb-recipient-tagify-wrap .tagify__tag {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  margin-inline-end: 0;
}
.mb-recipient-tagify-wrap .tagify__tag > .tagify__tag__removeBtn {
  flex: 0 0 auto;
  margin-inline-start: 0.35rem;
  margin-inline-end: 0.15rem;
  padding: 0.2rem 0.35rem;
}
.mb-recipient-tagify-wrap .tagify__tag > div.mb-broadcast-tag-body {
  padding-inline-end: 0.25rem;
  flex: 1 1 auto;
  min-width: 0;
}

.mb-recipient-tagify-wrap .tagify__dropdown.users-list {
  max-height: min(22rem, 70vh);
}

/*
 * Tagify targets .tagify__tag > div > * with overflow:hidden on direct flex children.
 * Theme demo (Full/dist form-tagify.js) wraps the photo in .avatar > img so the img is not that direct child.
 */
.mb-recipient-tagify-wrap .tagify__tag > div.mb-broadcast-tag-body > .avatar {
  overflow: visible !important;
  flex-shrink: 0 !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: none !important;
  line-height: 0;
}
.mb-recipient-tagify-wrap .tagify__tag > div.mb-broadcast-tag-body > .tagify__tag-text {
  min-width: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mb-recipient-tagify-wrap .tagify__dropdown__item .tagify__dropdown__item__avatar-wrap {
  flex-shrink: 0 !important;
  overflow: visible !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: none !important;
  line-height: 0;
}

.mb-recipient-tagify-wrap .tagify__dropdown__item .avatar-sm,
.mb-recipient-tagify-wrap .tagify__tag .avatar-xs,
.mb-recipient-tagify-wrap .mb-broadcast-avatar-img.avatar-xs,
.mb-recipient-tagify-wrap .mb-broadcast-avatar-fallback.avatar-xs {
  width: 28px;
  height: 28px;
  object-fit: cover;
}
.mb-recipient-tagify-wrap .mb-broadcast-avatar-img.avatar-sm,
.mb-recipient-tagify-wrap .mb-broadcast-avatar-fallback.avatar-sm {
  width: 32px;
  height: 32px;
  object-fit: cover;
}
.mb-recipient-tagify-wrap .tagify__tag .avatar-initials.avatar-xs {
  width: 28px;
  height: 28px;
  min-width: 28px;
  font-size: 0.65rem;
}
.mb-recipient-tagify-wrap .tagify__dropdown__item .avatar-initials.avatar-sm {
  width: 32px;
  height: 32px;
  min-width: 32px;
  font-size: 0.7rem;
}

/*
 * HR wizard modals: avoid modal-dialog-centered (min-height ~100vh + flex) and
 * modal-dialog-scrollable (forces full height). Use a plain dialog that shrink-wraps.
 * Tall steps scroll inside .modal-body only when needed.
 */
#modal-hr-edit-user .hr-modal-dialog,
#modal-hr-add-employee .hr-modal-dialog {
  margin-left: auto;
  margin-right: auto;
}
#modal-hr-edit-user .hr-modal-dialog .modal-content,
#modal-hr-add-employee .hr-modal-dialog .modal-content {
  max-height: calc(100vh - 2.5rem);
  max-height: calc(100dvh - 2.5rem);
  display: flex;
  flex-direction: column;
}
/* Override theme flex:1 on body so it cannot absorb phantom space; allow scroll when tall */
#modal-hr-edit-user .hr-modal-dialog .modal-body,
#modal-hr-add-employee .hr-modal-dialog .modal-body {
  flex: 0 1 auto !important;
  overflow-y: auto;
  max-height: calc(100vh - 11rem);
  max-height: calc(100dvh - 11rem);
}
/* Nav pills: no fixed min-height - it made the left column taller than short tabs (e.g. Contact), stretching the row */
#modal-hr-edit-user .ins-wizard [data-wizard-nav] > .nav-item > .nav-link,
#modal-hr-add-employee .ins-wizard [data-wizard-nav] > .nav-item > .nav-link {
  display: flex;
  align-items: center;
}

/* Unsaved-changes confirmation (global #manageros-modal-unsaved; HR + /users/) - full red frame */
.hr-unsaved-confirm {
  border: 3px solid #c82333 !important;
  box-shadow:
    0 1.25rem 3rem rgba(220, 53, 69, 0.12),
    0 0.5rem 1.5rem rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
}
.hr-unsaved-confirm-icon {
  width: 4.75rem;
  height: 4.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 25%, #fff8f8 0%, #ffe8ea 45%, #ffd6da 100%);
  border: 2px solid rgba(220, 53, 69, 0.35);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.8) inset,
    0 10px 28px rgba(220, 53, 69, 0.18);
}
.hr-unsaved-confirm-icon .ti {
  font-size: 2.35rem;
  color: #c82333;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6));
}
#manageros-modal-unsaved .modal-dialog {
  max-width: 420px;
}
#manageros-modal-unsaved .btn-primary {
  box-shadow: 0 2px 8px rgba(13, 110, 253, 0.25);
}
#manageros-modal-unsaved .btn-outline-danger:hover {
  box-shadow: 0 2px 10px rgba(220, 53, 69, 0.2);
}

/* Advisories: category headers + compact table (default / table-sm sizing) */
.advisory-list-page .advisory-table-wrap {
  overflow-x: auto;
}
.advisory-list-page .advisory-table th {
  white-space: nowrap;
  font-weight: 600;
}
.advisory-list-page .advisory-table .adv-col-title {
  min-width: 200px;
}
.adv-row:hover {
  background-color: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.04));
}
.adv-cat-header {
  font-size: 1rem;
  font-weight: 600;
  color: var(--bs-body-color);
}
.adv-affected-list li {
  margin-bottom: 0.25rem;
}
.adv-ai-content {
  line-height: 1.5;
}
.adv-ai-content pre {
  white-space: pre-wrap;
}
.adv-new-badge {
  background: linear-gradient(135deg, #e7f1ff 0%, #d4e8ff 100%);
  color: #0d47a1 !important;
  border: 1px solid rgba(13, 110, 253, 0.25);
  font-weight: 600;
  font-size: 0.7rem;
}

.btn-outline-black {
 --ins-btn-color: black;
 --ins-btn-bg: transparent;
 --ins-btn-border-color: black;
 --ins-btn-hover-bg: black;
 --ins-btn-hover-color: white;
 --ins-btn-hover-border-color: black;
 --ins-btn-focus-shadow-rgb: gray;
 --ins-btn-active-bg: black;
 --ins-btn-active-border-color: black;
}

/* /reports/ - full card is one link; hover + keyboard focus highlight.
   App theme uses --ins-* variables; --bs-primary is often undefined so border-color looked unchanged.
   .border and .shadow-sm both use !important - match with !important and add an outline ring so the frame always reads. */
a.report-card-tile {
  color: inherit;
}
a.report-card-tile .card {
  transition: outline-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  cursor: pointer;
  outline: 2px solid transparent !important;
  outline-offset: -2px;
}
a.report-card-tile:hover .card {
  border-color: var(--ins-primary) !important;
  outline-color: var(--ins-primary) !important;
  box-shadow: var(--ins-box-shadow-sm), 0 0.375rem 1rem rgba(var(--ins-primary-rgb), 0.22) !important;
}
a.report-card-tile:focus-visible {
  outline: none;
}
a.report-card-tile:focus-visible .card {
  border-color: var(--ins-primary) !important;
  outline-color: var(--ins-primary) !important;
  box-shadow: var(--ins-box-shadow-sm), 0 0 0 0.25rem rgba(var(--ins-primary-rgb), 0.35) !important;
}

/* /patch-management/ - outer shell: primary-tinted frame (matches report-card-tile --ins-primary accent) */
.card.patch-mgmt-shell {
  border: 1px solid var(--ins-primary, var(--bs-primary, #0d6efd)) !important;
  box-shadow: var(--ins-box-shadow-sm) !important;
}
/* Overview stat tiles: avoid stretched column height (h-100) leaving dead space under content */
a.patch-mgmt-overview-jump .patch-mgmt-overview-card-body {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
a.patch-mgmt-overview-jump .patch-mgmt-overview-card-body > .h4 {
  line-height: 1.2;
}

/* Automation rules: delete confirm (SweetAlert2) — spacing + icon buttons, centered */
.swal2-popup .swal2-actions.swal2-actions-ar {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem !important;
  width: 100%;
  box-sizing: border-box;
}
.swal2-popup .swal2-actions.swal2-actions-ar .swal2-confirm,
.swal2-popup .swal2-actions.swal2-actions-ar .swal2-cancel {
  margin: 0 !important;
}