@charset "UTF-8";
/* theme-name: OadeTech */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");
/* =====================================================================
   DESIGN SYSTEM — light mode (default). Modern SaaS: indigo/violet on
   near-white surfaces, soft shadows, generous radius, calm neutrals.
   ===================================================================== */
:root[data-glpi-theme=oadetech] {
  /* ---- core Tabler tokens ---- */
  --tblr-dark: #1f2130;
  --tblr-light: #ffffff;
  --tblr-body-bg: #f4f5fa;
  --tblr-body-color: #20222e;
  --tblr-bg-surface: #ffffff;
  --tblr-bg-surface-secondary: #f6f6fb;
  --tblr-bg-surface-tertiary: #eeeef6;
  /* Primary = the app's own black CTA buttons (matches the reference's
     "+ Nova conversa" / "Salvar" pattern); blue is the separate brand/link
     accent below (--oadetech-accent-blue), not the button color. */
  --tblr-primary-rgb: 15, 17, 21;
  --tblr-primary-fg: #ffffff;
  --tblr-primary-darken: #000000;
  --tblr-secondary: #6b7280;
  --tblr-secondary-fg: #ffffff;
  --tblr-tertiary: #8a8f9c;
  --tblr-muted: #767c8c;
  --tblr-success-rgb: 22, 163, 74;
  --tblr-warning-rgb: 245, 158, 11;
  --tblr-danger-rgb: 239, 68, 68;
  --tblr-info-rgb: 47, 111, 237;
  --tblr-link-color-rgb: 47, 111, 237;
  --tblr-link-hover-color-rgb: 29, 78, 216;
  --tblr-code-color: #1d4ed8;
  --tblr-border-color: #e7e7f1;
  --tblr-border-color-translucent: rgba(32, 34, 46, .08);
  --tblr-badge-bg: var(--tblr-bg-surface-tertiary);
  --tblr-badge-color: var(--tblr-body-color);
  /* rounder, calmer geometry across every Tabler component */
  --tblr-border-radius-scale: 1.3;
  --tblr-box-shadow: 0 1px 2px rgba(20, 21, 41, .04);
  --tblr-box-shadow-sm: 0 1px 2px rgba(20, 21, 41, .05);
  --tblr-box-shadow-lg: 0 12px 32px rgba(20, 21, 41, .10);
  --tblr-font-sans-serif: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* ---- GLPI surface tokens ---- */
  --glpi-mainmenu-bg: #ffffff;
  --glpi-mainmenu-fg: #383c4a;
  --glpi-mainmenu-fg-muted: #9297a6;
  --glpi-mainmenu-active-bg: #e8f0fe;
  --glpi-hover-bg: rgba(47, 111, 237, .06);
  --glpi-search-bg: #f0f0f8;
  --glpi-search-fg: var(--tblr-body-color);
  --glpi-search-border-color: var(--tblr-border-color);
  --glpi-badge-bg: #e8f0fe;
  --glpi-badge-fg: #1d4ed8;
  --glpi-helpdesk-header: #eaf1fe;
  --glpi-helpdesk-tiles-section-bg: #ffffff;
  --glpi-helpdesk-tabs-section-bg: #f4f5fa;
  --glpi-illustrations-header-light: #eaf1fe;
  --glpi-illustrations-background: #ffffff;
  --glpi-illustrations-primary: var(--oadetech-accent-blue);
  --glpi-illustrations-gradient-1: #eaf1fe;
  --glpi-illustrations-gradient-2: #bfd7fc;
  --glpi-illustrations-gradient-3: #2f6fed;
  --glpi-form-header-fg: #1d4ed8;
  --glpi-form-header-bg: #eaf1fe;
  --glpi-form-header-border-color: #cfe1fb;
  --glpi-tabs-bg: #ffffff;
  --glpi-tabs-fg: #767c8c;
  --glpi-tabs-border-color: var(--tblr-border-color);
  --glpi-tabs-active-bg: #ffffff;
  --glpi-tabs-active-fg: #1d4ed8;
  --glpi-tabs-active-border-color: #2f6fed;
  --glpi-itil-secondary-bg: #f4f5fa;
  --glpi-timeline-itil-content-bg: #eef8f0;
  --glpi-timeline-itil-content-fg: #1c6b34;
  --glpi-timeline-itil-content-border-color: #bfe6c8;
  --glpi-timeline-fup-bg: #f2f2f7;
  --glpi-timeline-fup-fg: #46485a;
  --glpi-timeline-fup-border-color: #dcdce8;
  --glpi-timeline-task-bg: #fdf3e0;
  --glpi-timeline-task-fg: #7a5a12;
  --glpi-timeline-task-border-color: #f2debf;
  --glpi-timeline-solution-bg: #e9f1fd;
  --glpi-timeline-solution-fg: #1c4d80;
  --glpi-timeline-solution-border-color: #c3dcf7;
  --glpi-timeline-document-bg: #eaf1fe;
  --glpi-timeline-document-fg: #1d4ed8;
  --glpi-timeline-document-border-color: #cfe1fb;
  --glpi-timeline-log-bg: #f2f2f7;
  --glpi-timeline-badge-bg: rgba(47, 111, 237, .10);
  --glpi-timeline-badge-fg: #1d4ed8;
  --glpi-palette-color-1: #ffffff;
  --glpi-palette-color-2: #eaf1fe;
  --glpi-palette-color-3: #2f6fed;
  --glpi-palette-color-4: #e7e7f1;
  --glpi-scrollbar-thumb-color: rgba(47, 111, 237, .25);
  --glpi-scrollbar-track-color: transparent;
  /* Brand accent blue (links, focus rings, badges, sidebar active item) —
     kept separate from --tblr-primary, which drives button color (black). */
  --oadetech-accent-blue: #2f6fed;
  --oadetech-accent-blue-deep: #1d4ed8;
  /* legacy alias kept for existing rules further down (toggle icon, dashboard
     top accent bar, "Concluir Chamado" button) — now points at the blue accent */
  --oadetech-gold: #2f6fed;
  --oadetech-gold-deep: #1d4ed8;
  --oadetech-gold-glow: rgba(47, 111, 237, .18);
  --oadetech-silver: #6b7280;
  --oadetech-void: #f6f6fb;
  --oadetech-panel: #ffffff;
  --oadetech-panel-2: #f6f6fb;
  --oadetech-line: #e7e7f1;
  --oadetech-ink: #20222e;
  --oadetech-ink-dim: #767c8c;
  --oadetech-on-accent: #ffffff;
  --glpi-logo: url("/pics/oadetech/logo-icon.png");
  --glpi-logo-reduced: url("/pics/oadetech/logo-icon.png");
  --glpi-logo-light: url("/pics/oadetech/logo-icon.png");
  --glpi-logo-light-reduced: url("/pics/oadetech/logo-icon.png");
  --glpi-logo-dark: url("/pics/oadetech/logo-icon.png");
  --glpi-logo-dark-reduced: url("/pics/oadetech/logo-icon.png");
  --glpi-logo-dark-login: url("/pics/oadetech/logo-full.png");
  --glpi-logo-light-login: url("/pics/oadetech/logo-full.png");
}
:root[data-glpi-theme=oadetech] body,
:root[data-glpi-theme=oadetech] .btn,
:root[data-glpi-theme=oadetech] .form-control,
:root[data-glpi-theme=oadetech] .form-select {
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}
:root[data-glpi-theme=oadetech] h1, :root[data-glpi-theme=oadetech] h2, :root[data-glpi-theme=oadetech] h3, :root[data-glpi-theme=oadetech] h4, :root[data-glpi-theme=oadetech] h5,
:root[data-glpi-theme=oadetech] .card-title,
:root[data-glpi-theme=oadetech] .navbar-brand {
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  letter-spacing: 0.01em;
  font-weight: 600;
}
:root[data-glpi-theme=oadetech] .page .glpi-logo {
  width: auto !important;
  height: 55px !important;
}
:root[data-glpi-theme=oadetech] .navbar-brand {
  position: relative;
}
:root[data-glpi-theme=oadetech] .navbar-brand .glpi-logo {
  background-image: var(--glpi-logo-dark-login) !important;
  width: 130px !important;
  height: 36px !important;
  background-size: contain !important;
  background-position: left center !important;
  margin-inline-start: 4px;
}
:root[data-glpi-theme=oadetech] body.navbar-collapsed .navbar-brand .glpi-logo {
  background-image: var(--glpi-logo-dark) !important;
  width: 40px !important;
  height: 40px !important;
  background-position: center !important;
  margin-inline-start: 0;
}

/* =====================================================================
   DARK MODE — opt-in via the toggle button, kept available but not the
   default. Same indigo identity, on dark-slate surfaces.
   ===================================================================== */
:root[data-glpi-theme=oadetech][data-oade-mode=dark] {
  --tblr-dark: #eceefb;
  --tblr-light: #1b1c29;
  --tblr-body-bg: #121320;
  --tblr-body-color: #dfe0ee;
  --tblr-bg-surface: #191a29;
  --tblr-bg-surface-secondary: #1e1f30;
  --tblr-bg-surface-tertiary: #23243a;
  /* Dark mode can't use a black button (invisible on a dark surface), so
     primary stays a light blue here — same brand hue as the light-mode
     accent, just light enough to read. */
  --tblr-primary-rgb: 96, 150, 255;
  --tblr-primary-fg: #0b1220;
  --tblr-secondary: #a7abc0;
  --tblr-secondary-fg: #14151f;
  --tblr-muted: #8b8fa8;
  --tblr-link-color-rgb: 96, 150, 255;
  --tblr-link-hover-color-rgb: 148, 186, 255;
  --tblr-code-color: #94baff;
  --tblr-border-color: #2b2d42;
  --tblr-badge-bg: var(--tblr-bg-surface-tertiary);
  --tblr-badge-color: var(--tblr-body-color);
  --glpi-mainmenu-bg: #14141f;
  --glpi-mainmenu-fg: #c9cbe0;
  --glpi-mainmenu-fg-muted: #7b7fa0;
  --glpi-mainmenu-active-bg: #26264a;
  --glpi-hover-bg: rgba(138, 128, 255, .10);
  --glpi-search-bg: #1e1f30;
  --glpi-search-fg: var(--tblr-body-color);
  --glpi-search-border-color: var(--tblr-border-color);
  --glpi-badge-bg: #26264a;
  --glpi-badge-fg: #b6afff;
  --glpi-helpdesk-header: #171827;
  --glpi-helpdesk-tiles-section-bg: #191a29;
  --glpi-helpdesk-tabs-section-bg: #1e1f30;
  --glpi-illustrations-header-light: #171827;
  --glpi-form-header-fg: #b6afff;
  --glpi-form-header-bg: #20213a;
  --glpi-form-header-border-color: #33345c;
  --glpi-tabs-bg: #191a29;
  --glpi-tabs-fg: #8b8fa8;
  --glpi-tabs-active-bg: #191a29;
  --glpi-tabs-active-fg: #b6afff;
  --glpi-tabs-active-border-color: #8a80ff;
  --glpi-itil-secondary-bg: #1b1c29;
  --glpi-illustrations-gradient-1: #26264a;
  --glpi-illustrations-gradient-2: #1b1c29;
  --glpi-illustrations-gradient-3: #121320;
  --glpi-palette-color-1: #191a29;
  --glpi-palette-color-2: #1e1f30;
  --glpi-palette-color-3: #8a80ff;
  --glpi-palette-color-4: #2b2d42;
  --oadetech-accent-blue: #94baff;
  --oadetech-accent-blue-deep: #6096ff;
  --oadetech-gold: #6096ff;
  --oadetech-gold-deep: #94baff;
  --oadetech-gold-glow: rgba(96, 150, 255, .22);
  --oadetech-silver: #a7abc0;
  --oadetech-void: #121320;
  --oadetech-panel: #191a29;
  --oadetech-panel-2: #1e1f30;
  --oadetech-line: #2b2d42;
  --oadetech-ink: #dfe0ee;
  --oadetech-ink-dim: #8b8fa8;
  --oadetech-on-accent: #ffffff;
}

/* =====================================================================
   Theme toggle button (present on every authenticated page)
   ===================================================================== */
.oadetech-theme-toggle {
  z-index: 2000;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--oadetech-panel, #fff);
  border: 1px solid var(--oadetech-line, #e7e7f1);
  color: var(--oadetech-gold, #2f6fed);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(20, 21, 41, 0.08);
  transition: box-shadow 0.2s ease, transform 0.15s ease, background 0.2s ease;
  flex-shrink: 0;
}

.oadetech-theme-toggle:hover {
  box-shadow: 0 4px 14px rgba(20, 21, 41, 0.12), 0 0 14px var(--oadetech-gold-glow, rgba(47, 111, 237, 0.18));
  transform: translateY(-1px);
}

.oadetech-theme-toggle:active {
  transform: translateY(0);
}

.oadetech-theme-toggle--search {
  align-self: center;
  margin-inline-start: auto;
  margin-inline-end: 8px;
  flex: 0 0 auto;
}

/* The header docks the search form in a wrapper with Bootstrap's
   `ms-lg-auto` (margin-left: auto) so it floats to the right edge of the
   header row. Now that the toggle carries that auto-margin instead (to
   pull the pair together), cancel the wrapper's own margin so it sits
   flush against the toggle rather than a second auto-gap away from it. */
.oadetech-theme-toggle--search + div {
  margin-inline-start: 0 !important;
}

.oadetech-theme-toggle--floating {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
}

/* =====================================================================
   Sidebar — white, calm, grouped, with a soft indigo "pill" on the
   active item (menu.html.twig: ul.navbar-nav > li.nav-item > a/button.nav-link,
   with sub-items as .dropdown-item inside .dropdown-menu).
   ===================================================================== */
:root[data-glpi-theme=oadetech] {
  /* Scoped to the vertical sidebar specifically — its submenus sit
     inline inside the sidebar's own background, so they don't need one
     of their own. The header's user-account menu also matches the bare
     `.navbar-nav .dropdown-menu` selector (it reuses that same Bootstrap
     class for unrelated reasons) and was incorrectly inheriting this
     transparency, which is why it looked like text floating with no
     panel behind it — see the dedicated `.user-menu .dropdown-menu`
     rule further down for its real (opaque) styling. */
  /* Header user-account menu (avatar top-right) — a floating popover,
     unlike the sidebar's inline submenus, so it needs a real opaque
     panel behind it. Reuses the same surface/border tokens as every
     other card in the theme, so it matches in both light and dark mode. */
}
:root[data-glpi-theme=oadetech] #sidebar-view,
:root[data-glpi-theme=oadetech] .navbar-vertical {
  box-shadow: 1px 0 0 var(--oadetech-line);
}
:root[data-glpi-theme=oadetech] .navbar-nav {
  gap: 2px;
  padding-inline: 8px;
}
:root[data-glpi-theme=oadetech] .navbar-nav .nav-link {
  color: var(--glpi-mainmenu-fg);
  border-radius: calc(var(--tblr-border-radius, 8px) + 2px) !important;
  margin-block: 1px;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}
:root[data-glpi-theme=oadetech] .navbar-nav .nav-link:hover,
:root[data-glpi-theme=oadetech] .navbar-nav .nav-link:focus-visible {
  background: var(--glpi-hover-bg);
  color: var(--glpi-mainmenu-fg);
}
:root[data-glpi-theme=oadetech] .navbar-nav .nav-item.active > .nav-link,
:root[data-glpi-theme=oadetech] .navbar-nav .nav-link.active {
  background: var(--glpi-mainmenu-active-bg);
  color: var(--oadetech-accent-blue);
  font-weight: 600;
}
:root[data-glpi-theme=oadetech] .navbar-vertical .navbar-nav .dropdown-menu {
  border: none;
  background: transparent;
  box-shadow: none;
  padding-inline-start: 1.75rem;
}
:root[data-glpi-theme=oadetech] .navbar-nav .dropdown-item {
  border-radius: var(--tblr-border-radius, 8px) !important;
  color: var(--glpi-mainmenu-fg);
  font-size: 0.875rem;
  padding-block: 0.4rem;
}
:root[data-glpi-theme=oadetech] .navbar-nav .dropdown-item:hover {
  background: var(--glpi-hover-bg);
}
:root[data-glpi-theme=oadetech] .navbar-nav .dropdown-item.active {
  background: var(--glpi-mainmenu-active-bg);
  color: var(--oadetech-accent-blue);
  font-weight: 600;
}
:root[data-glpi-theme=oadetech] .navbar-nav .dropdown-header {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--glpi-mainmenu-fg-muted);
  padding-block: 0.5rem 0.25rem;
}
:root[data-glpi-theme=oadetech] .menu-label {
  letter-spacing: 0.01em;
}
:root[data-glpi-theme=oadetech] .user-menu .dropdown-menu {
  background: var(--tblr-bg-surface) !important;
  border: 1px solid var(--oadetech-line) !important;
  box-shadow: 0 12px 30px rgba(20, 21, 41, 0.16);
}
:root[data-glpi-theme=oadetech] .user-menu .dropdown-item:hover {
  background: var(--glpi-hover-bg);
}

/* =====================================================================
   Broader modernization pass — cards, buttons, badges, tabs, tables,
   forms, dashboard, modals, alerts.
   ===================================================================== */
:root[data-glpi-theme=oadetech] {
  /* Tables */
  /* Forms */
  /* Tabs */
  /* Modals */
  /* Alerts / toasts */
  /* =================================================================
     Dashboard (Dashboard, Todos, Visão pessoal/grupo/global). GLPI's
     bigNumber widget paints the whole card in a per-widget admin-chosen
     color (inline <style> block per widget id) — the reference instead
     wants a neutral white card with just a small colored icon badge.
     We can't touch that per-widget color (it's admin config, not ours to
     remove), so instead of neutralizing it everywhere we leave it in
     place on the card root and only force *specific* text nodes
     (number/label) back to neutral ink; the icon is deliberately left to
     inherit the widget's own color and gets boxed into a soft tinted
     badge with color-mix(), so each KPI keeps its distinct accent without
     tinting the whole tile. ===============================================
     ================================================================= */
  /* Compact metric-card layout (inspired by the OadeChat dashboard's
     "icon left, value+label stacked right" stat tiles) — scoped to
     .big-number only, since it's the sole widget whose 3 pieces
     (icon/content/label) are siblings we can freely re-lay-out with grid.
     Selector specificity (4 classes) beats the generic .main-icon rule
     above without needing !important. */
  /* Chart widgets (g-chart) only use .main-icon as a plain "edit" affordance,
     not a category accent, so they keep the flat/borderless look. */
  /* No spinning-circles loading state: content should just appear as soon as it's ready */
}
:root[data-glpi-theme=oadetech] .card {
  border-radius: 14px;
  border-color: var(--oadetech-line);
  box-shadow: 0 1px 3px rgba(20, 21, 41, 0.06);
  transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}
:root[data-glpi-theme=oadetech] .card:hover {
  box-shadow: 0 6px 20px rgba(20, 21, 41, 0.08);
}
:root[data-glpi-theme=oadetech] .card-title {
  font-size: 1rem;
}
:root[data-glpi-theme=oadetech] .btn {
  border-radius: 10px;
  font-weight: 500;
  transition: box-shadow 0.18s ease, transform 0.15s ease, border-color 0.18s ease, background-color 0.18s ease;
}
:root[data-glpi-theme=oadetech] .btn-primary {
  border: none;
  box-shadow: 0 1px 2px rgba(15, 17, 21, 0.18);
}
:root[data-glpi-theme=oadetech] .btn-primary:hover {
  box-shadow: 0 4px 14px rgba(15, 17, 21, 0.28);
  transform: translateY(-1px);
}
:root[data-glpi-theme=oadetech] .btn-ghost-secondary:hover {
  background: var(--glpi-hover-bg);
}
:root[data-glpi-theme=oadetech] .badge {
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
:root[data-glpi-theme=oadetech] .avatar {
  border-radius: 999px;
  font-weight: 600;
}
:root[data-glpi-theme=oadetech] .table thead th {
  color: var(--tblr-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-bottom-width: 1px;
}
:root[data-glpi-theme=oadetech] .table tbody tr:hover {
  background: var(--glpi-hover-bg);
}
:root[data-glpi-theme=oadetech] .table td, :root[data-glpi-theme=oadetech] .table th {
  vertical-align: middle;
}
:root[data-glpi-theme=oadetech] .form-control,
:root[data-glpi-theme=oadetech] .form-select {
  border-radius: 10px;
  border-color: var(--oadetech-line);
}
:root[data-glpi-theme=oadetech] .form-control:focus,
:root[data-glpi-theme=oadetech] .form-select:focus {
  border-color: var(--oadetech-accent-blue);
  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.15);
}
:root[data-glpi-theme=oadetech] .form-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tblr-muted);
  letter-spacing: 0.01em;
}
:root[data-glpi-theme=oadetech] .nav-tabs .nav-link,
:root[data-glpi-theme=oadetech] .tab-content,
:root[data-glpi-theme=oadetech] .card-tabs .nav-link {
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
:root[data-glpi-theme=oadetech] .nav-tabs .nav-link.active {
  font-weight: 600;
}
:root[data-glpi-theme=oadetech] .modal-content {
  border-radius: 16px;
  border: 1px solid var(--oadetech-line);
  box-shadow: 0 24px 60px rgba(20, 21, 41, 0.18);
}
:root[data-glpi-theme=oadetech] .modal-header {
  border-bottom-color: var(--oadetech-line);
}
:root[data-glpi-theme=oadetech] .modal-footer {
  border-top-color: var(--oadetech-line);
}
:root[data-glpi-theme=oadetech] .alert {
  border-radius: 12px;
  border-width: 1px;
}
:root[data-glpi-theme=oadetech] .toast {
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(20, 21, 41, 0.14);
}
:root[data-glpi-theme=oadetech] .grid-stack-item .card {
  background: var(--oadetech-panel) !important;
  border: 1px solid var(--oadetech-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(20, 21, 41, 0.06) !important;
  position: relative;
  overflow: hidden;
}
:root[data-glpi-theme=oadetech] .grid-stack-item .card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--oadetech-gold), transparent 85%);
  opacity: 0.7;
}
:root[data-glpi-theme=oadetech] .grid-stack-item .card .formatted-number,
:root[data-glpi-theme=oadetech] .grid-stack-item .card .formatted-number *,
:root[data-glpi-theme=oadetech] .grid-stack-item .card > .label,
:root[data-glpi-theme=oadetech] .grid-stack-item .card .main-label {
  color: var(--oadetech-ink) !important;
}
:root[data-glpi-theme=oadetech] .grid-stack-item .card .formatted-number .number {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
}
:root[data-glpi-theme=oadetech] .grid-stack-item .card .main-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0.85rem;
  inset-inline-end: 0.85rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  background: color-mix(in srgb, currentColor 14%, white);
  font-size: 1.1rem;
  line-height: 1;
}
:root[data-glpi-theme=oadetech] .grid-stack-item .card.big-number {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.9rem;
  padding: 1.05rem 1.15rem;
}
:root[data-glpi-theme=oadetech] .grid-stack-item .card.big-number .content {
  grid-column: 2;
  grid-row: 1;
}
:root[data-glpi-theme=oadetech] .grid-stack-item .card.big-number > .label {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--oadetech-ink) 62%, transparent) !important;
}
:root[data-glpi-theme=oadetech] .grid-stack-item .card.big-number .main-icon {
  grid-column: 1;
  grid-row: 1/span 2;
  position: static;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.25rem;
}
:root[data-glpi-theme=oadetech] .grid-stack-item .card.g-chart .main-icon {
  position: static;
  width: auto;
  height: auto;
  background: none;
  color: var(--tblr-muted);
  font-size: 1rem;
}
:root[data-glpi-theme=oadetech] .grid-stack-item .card .empty-card.no-data {
  color: var(--tblr-muted);
}
:root[data-glpi-theme=oadetech] .grid-stack-item {
  transition: transform 0.15s ease;
}
:root[data-glpi-theme=oadetech] .grid-stack-item:hover {
  transform: translateY(-2px);
}
:root[data-glpi-theme=oadetech] .spinner-overlay {
  display: none !important;
}
:root[data-glpi-theme=oadetech] .spinner-border,
:root[data-glpi-theme=oadetech] .spinner-grow {
  display: none !important;
}

/* =====================================================================
   Login / anonymous pages — clean, light-first by default; a dark
   variant remains available through the toggle.
   ===================================================================== */
:root[data-glpi-theme=oadetech] body.welcome-anonymous {
  background: radial-gradient(ellipse 900px 500px at 15% -10%, rgba(47, 111, 237, 0.1), transparent 60%), radial-gradient(ellipse 700px 500px at 100% 10%, rgba(47, 111, 237, 0.06), transparent 55%), linear-gradient(180deg, #f4f5fa 0%, #eaf1fe 100%);
  background-color: #f4f5fa;
  position: relative;
  overflow-x: hidden;
}

:root[data-glpi-theme=oadetech][data-oade-mode=dark] body.welcome-anonymous {
  background: radial-gradient(ellipse 900px 500px at 15% -10%, rgba(138, 128, 255, 0.16), transparent 60%), radial-gradient(ellipse 700px 500px at 100% 10%, rgba(138, 128, 255, 0.08), transparent 55%), linear-gradient(180deg, #121320 0%, #14141f 100%);
  background-color: #121320;
}

:root[data-glpi-theme=oadetech] body.welcome-anonymous .glpi-logo {
  width: 320px !important;
  height: auto !important;
  max-width: 90vw;
  aspect-ratio: 2313/824;
}

:root[data-glpi-theme=oadetech] body.welcome-anonymous .main-content-card {
  background: #ffffff;
  border: 1px solid var(--oadetech-line);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(20, 21, 41, 0.1);
}

:root[data-glpi-theme=oadetech][data-oade-mode=dark] body.welcome-anonymous .main-content-card {
  background: linear-gradient(180deg, #191a29 0%, #14141f 100%);
  border: 1px solid #2b2d42;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02) inset, 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 60px rgba(138, 128, 255, 0.08);
}

:root[data-glpi-theme=oadetech] body.welcome-anonymous .card-header h2 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  color: #20222e;
}

:root[data-glpi-theme=oadetech][data-oade-mode=dark] body.welcome-anonymous .card-header h2 {
  background: linear-gradient(90deg, #dfe0ee 0%, #b6afff 120%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

:root[data-glpi-theme=oadetech] body.welcome-anonymous .form-control {
  background: #ffffff;
  border: 1px solid var(--oadetech-line);
  color: #20222e;
}

:root[data-glpi-theme=oadetech][data-oade-mode=dark] body.welcome-anonymous .form-control {
  background: #14141f;
  border: 1px solid #2b2d42;
  color: #dfe0ee;
}

:root[data-glpi-theme=oadetech] body.welcome-anonymous .form-control:focus {
  border-color: #2f6fed;
  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.14);
}

:root[data-glpi-theme=oadetech][data-oade-mode=dark] body.welcome-anonymous .form-control:focus {
  border-color: #8a80ff;
  box-shadow: 0 0 0 3px rgba(138, 128, 255, 0.16);
}

:root[data-glpi-theme=oadetech] body.welcome-anonymous .btn-primary {
  background: #2f6fed;
  color: #ffffff;
  font-weight: 600;
  border: none;
}

:root[data-glpi-theme=oadetech][data-oade-mode=dark] body.welcome-anonymous .btn-primary {
  background: linear-gradient(90deg, #8a80ff 0%, #6c60e6 100%);
  color: #ffffff;
}

:root[data-glpi-theme=oadetech] body.welcome-anonymous .btn-primary:hover {
  box-shadow: 0 6px 20px rgba(47, 111, 237, 0.35);
}

:root[data-glpi-theme=oadetech] body.welcome-anonymous a {
  color: #1d4ed8;
}

:root[data-glpi-theme=oadetech][data-oade-mode=dark] body.welcome-anonymous a {
  color: #b6afff;
}

:root[data-glpi-theme=oadetech] body.welcome-anonymous .container-tight > .text-center:first-child::after {
  content: "Central de Atendimento OadeTech";
  display: block;
  text-align: center;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #767c8c;
}

:root[data-glpi-theme=oadetech][data-oade-mode=dark] body.welcome-anonymous .container-tight > .text-center:first-child::after {
  color: #8b8fa8;
}

/* ===== "Concluir Chamado" quick action ===== */
.oadetech-conclude-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #2f6fed;
  color: #ffffff !important;
  font-weight: 600;
  border: none;
  margin-inline-start: 0.5rem;
}

.oadetech-conclude-btn:hover {
  box-shadow: 0 4px 16px rgba(47, 111, 237, 0.35);
  color: #ffffff;
}

.oadetech-conclude-btn i {
  font-size: 1.1rem;
}

:root[data-glpi-theme=oadetech][data-oade-mode=dark] .oadetech-conclude-btn {
  background: linear-gradient(90deg, #8a80ff 0%, #6c60e6 100%);
  color: #ffffff !important;
}

/* ===== Hide "Escolher arquivo / Nenhum arquivo escolhido" once a file is attached ===== */
.fileupload:has(.fileupload_info:not(:empty)) input[type=file] {
  display: none;
}

/* =====================================================================
   Login split-screen (layout/page_login_split.html.twig + login.html.twig).
   Structural change explained in those templates: this new markup (left
   marketing panel, icon-prefixed inputs, kicker label) can't be produced by
   CSS alone from the previous single-card markup.
   ===================================================================== */
body.oadetech-login-split {
  background: #f4f5fa;
  overflow: hidden;
}

body.oadetech-login-split main.page-anonymous {
  display: block;
  height: 100vh;
}

.oadetech-login-shell {
  display: flex;
  height: 100vh;
  min-height: 100vh;
}

.oadetech-login-left {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 3.5rem;
  background: radial-gradient(ellipse 900px 500px at 10% -10%, rgba(47, 111, 237, 0.16), transparent 60%), linear-gradient(160deg, #0b1220 0%, #131b2e 100%);
  color: #e7ecf7;
  overflow: hidden;
}

.oadetech-login-left::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(148, 186, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 186, 255, 0.07) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 75% 65% at 30% 35%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 30% 35%, #000 0%, transparent 75%);
}

.oadetech-login-left-inner {
  position: relative;
  width: 100%;
  max-width: 30rem;
  margin: 0;
}

.oadetech-login-left .glpi-logo {
  display: block;
  width: 150px !important;
  height: 48px !important;
  background-image: var(--glpi-logo-dark-login) !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat;
  /* Centered against the width of the feature grid below it, not
     left-aligned like the headline/subheadline text. */
  margin: 0 auto 2.5rem auto;
}

.oadetech-login-headline {
  font-family: "Space Grotesk", sans-serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.25;
  color: #f4f6fc;
  margin-bottom: 0.75rem;
  text-align: center;
}

.oadetech-login-headline-accent {
  color: #6096ff;
}

.oadetech-login-subheadline {
  color: #aab3c9;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 2.25rem;
  text-align: center;
}

.oadetech-login-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.oadetech-login-feature {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.oadetech-login-feature i {
  font-size: 1.3rem;
  color: #6096ff;
  flex-shrink: 0;
}

.oadetech-login-feature-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #f4f6fc;
}

.oadetech-login-feature-subtitle {
  font-size: 0.75rem;
  color: #8891a8;
}

.oadetech-login-left-footer {
  position: absolute;
  left: 3.5rem;
  right: 3.5rem;
  bottom: 2rem;
  display: flex;
  gap: 1.5rem;
  font-size: 0.75rem;
  color: #7d879d;
}

.oadetech-login-left-footer i {
  color: #566178;
  margin-inline-end: 0.3rem;
}

.oadetech-login-right {
  flex: 0 0 30rem;
  max-width: 40vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  padding: 2rem;
  overflow-y: auto;
}

.oadetech-login-right-inner {
  width: 100%;
  max-width: 22rem;
}

/* The login form still carries its original Bootstrap grid classes
   (`.row.justify-content-center > .col-md-5`), which made sense when this
   markup sat in a wide centered card. Inside our narrower right-hand panel,
   a 41.67%-width column squeezes the inputs down to a sliver — override it
   to take the full width of the panel instead of removing the classes
   (kept intact since other code/CSS may still reference them). */
.oadetech-login-card .row.justify-content-center {
  margin-inline: 0;
}

.oadetech-login-card .col-md-5 {
  width: 100%;
  max-width: 100%;
  flex: 1 1 100%;
  padding-inline: 0;
}

.oadetech-login-card.main-content-card {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

.oadetech-login-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--oadetech-accent-blue, #2f6fed);
  margin-bottom: 0.5rem;
}

.oadetech-login-kicker::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.oadetech-login-card .card-header h2 {
  background: none !important;
  -webkit-text-fill-color: unset !important;
  color: #20222e !important;
  font-size: 1.375rem;
}

.oadetech-input-icon {
  position: relative;
}

.oadetech-input-icon i {
  position: absolute;
  inset-inline-start: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9297a6;
  font-size: 1.05rem;
  pointer-events: none;
}

.oadetech-input-icon .form-control {
  padding-inline-start: 2.5rem;
}

/* The left brand panel is always dark by design (it's the marketing side,
   not app content) — only the right form panel follows the light/dark toggle. */
:root[data-glpi-theme=oadetech][data-oade-mode=dark] .oadetech-login-right {
  background: #14141f;
}

:root[data-glpi-theme=oadetech][data-oade-mode=dark] .oadetech-login-card .card-header h2 {
  color: #dfe0ee !important;
}

/* Below the tablet breakpoint the marketing panel is dropped so the login
   card gets the full viewport width instead of being squeezed. */
@media (max-width: 900px) {
  .oadetech-login-left {
    display: none;
  }
  .oadetech-login-right {
    flex: 1 1 auto;
    max-width: none;
  }
}
/* ===== Chart series palette (Chartist) — retinted to the new design system ===== */
.ct-series.ct-series-a {
  fill: #2f6fed;
  stroke: #2f6fed;
}

.ct-legend .ct-series-0::before {
  background-color: #2f6fed;
  border-color: #2f6fed;
}

.ct-series.ct-series-b {
  fill: #16a34a;
  stroke: #16a34a;
}

.ct-legend .ct-series-1::before {
  background-color: #16a34a;
  border-color: #16a34a;
}

.ct-series.ct-series-c {
  fill: #f59e0b;
  stroke: #f59e0b;
}

.ct-legend .ct-series-2::before {
  background-color: #f59e0b;
  border-color: #f59e0b;
}

.ct-series.ct-series-d {
  fill: #ef4444;
  stroke: #ef4444;
}

.ct-legend .ct-series-3::before {
  background-color: #ef4444;
  border-color: #ef4444;
}

.ct-series.ct-series-e {
  fill: #7c3aed;
  stroke: #7c3aed;
}

.ct-legend .ct-series-4::before {
  background-color: #7c3aed;
  border-color: #7c3aed;
}

.ct-series.ct-series-f {
  fill: #0ea5e9;
  stroke: #0ea5e9;
}

.ct-legend .ct-series-5::before {
  background-color: #0ea5e9;
  border-color: #0ea5e9;
}

.ct-series.ct-series-g {
  fill: #64748b;
  stroke: #64748b;
}

.ct-legend .ct-series-6::before {
  background-color: #64748b;
  border-color: #64748b;
}

.ct-series.ct-series-h {
  fill: #ec4899;
  stroke: #ec4899;
}

.ct-legend .ct-series-7::before {
  background-color: #ec4899;
  border-color: #ec4899;
}

.ct-series.ct-series-i {
  fill: #2f6fed;
  stroke: #2f6fed;
}

.ct-legend .ct-series-8::before {
  background-color: #2f6fed;
  border-color: #2f6fed;
}

.ct-series.ct-series-j {
  fill: #16a34a;
  stroke: #16a34a;
}

.ct-legend .ct-series-9::before {
  background-color: #16a34a;
  border-color: #16a34a;
}

.ct-series.ct-series-k {
  fill: #f59e0b;
  stroke: #f59e0b;
}

.ct-legend .ct-series-10::before {
  background-color: #f59e0b;
  border-color: #f59e0b;
}

.ct-series.ct-series-l {
  fill: #ef4444;
  stroke: #ef4444;
}

.ct-legend .ct-series-11::before {
  background-color: #ef4444;
  border-color: #ef4444;
}

.ct-series.ct-series-m {
  fill: #7c3aed;
  stroke: #7c3aed;
}

.ct-legend .ct-series-12::before {
  background-color: #7c3aed;
  border-color: #7c3aed;
}

.ct-series.ct-series-n {
  fill: #0ea5e9;
  stroke: #0ea5e9;
}

.ct-legend .ct-series-13::before {
  background-color: #0ea5e9;
  border-color: #0ea5e9;
}

.ct-series.ct-series-o {
  fill: #64748b;
  stroke: #64748b;
}

.ct-legend .ct-series-14::before {
  background-color: #64748b;
  border-color: #64748b;
}

.ct-series.ct-series-p {
  fill: #ec4899;
  stroke: #ec4899;
}

.ct-legend .ct-series-15::before {
  background-color: #ec4899;
  border-color: #ec4899;
}

.ct-series.ct-series-q {
  fill: #2f6fed;
  stroke: #2f6fed;
}

.ct-legend .ct-series-16::before {
  background-color: #2f6fed;
  border-color: #2f6fed;
}

.ct-series.ct-series-r {
  fill: #16a34a;
  stroke: #16a34a;
}

.ct-legend .ct-series-17::before {
  background-color: #16a34a;
  border-color: #16a34a;
}

.ct-series.ct-series-s {
  fill: #f59e0b;
  stroke: #f59e0b;
}

.ct-legend .ct-series-18::before {
  background-color: #f59e0b;
  border-color: #f59e0b;
}

.ct-series.ct-series-t {
  fill: #ef4444;
  stroke: #ef4444;
}

.ct-legend .ct-series-19::before {
  background-color: #ef4444;
  border-color: #ef4444;
}

.ct-series.ct-series-u {
  fill: #7c3aed;
  stroke: #7c3aed;
}

.ct-legend .ct-series-20::before {
  background-color: #7c3aed;
  border-color: #7c3aed;
}

.ct-series.ct-series-v {
  fill: #0ea5e9;
  stroke: #0ea5e9;
}

.ct-legend .ct-series-21::before {
  background-color: #0ea5e9;
  border-color: #0ea5e9;
}

.ct-series.ct-series-w {
  fill: #64748b;
  stroke: #64748b;
}

.ct-legend .ct-series-22::before {
  background-color: #64748b;
  border-color: #64748b;
}

.ct-series.ct-series-x {
  fill: #ec4899;
  stroke: #ec4899;
}

.ct-legend .ct-series-23::before {
  background-color: #ec4899;
  border-color: #ec4899;
}

.ct-series.ct-series-y {
  fill: #2f6fed;
  stroke: #2f6fed;
}

.ct-legend .ct-series-24::before {
  background-color: #2f6fed;
  border-color: #2f6fed;
}

.ct-series.ct-series-z {
  fill: #16a34a;
  stroke: #16a34a;
}

.ct-legend .ct-series-25::before {
  background-color: #16a34a;
  border-color: #16a34a;
}

/* =====================================================================
   Dashboard empty-state — a soft icon instead of plain "no data" text.
   Uses an inline SVG mask (tinted via currentColor) instead of a Tabler
   icon glyph, so it doesn't depend on knowing a specific font codepoint.
   ===================================================================== */
.grid-stack-item .card .empty-card.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  height: 100%;
  min-height: 90px;
  color: var(--tblr-muted);
  font-size: 0.8rem;
  text-align: center;
}

.grid-stack-item .card .empty-card.no-data::before {
  content: "";
  display: block;
  width: 34px;
  height: 34px;
  background-color: currentColor;
  opacity: 0.3;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3v18h18'/><rect x='7' y='12' width='3' height='6'/><rect x='12' y='8' width='3' height='10'/><rect x='17' y='5' width='3' height='13'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3v18h18'/><rect x='7' y='12' width='3' height='6'/><rect x='12' y='8' width='3' height='10'/><rect x='17' y='5' width='3' height='13'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* =====================================================================
   "Ações Rápidas" dashboard widget (plugins/oadetech/inc/quickactions.php)
   ===================================================================== */
.oadetech-quick-actions {
  padding: 1rem !important;
  display: flex;
  align-items: center;
}

.oadetech-quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 0.5rem;
  width: 100%;
}

.oadetech-quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem 0.5rem;
  border-radius: 12px;
  text-decoration: none !important;
  color: var(--oadetech-ink) !important;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.oadetech-quick-action:hover {
  background: var(--glpi-hover-bg);
  transform: translateY(-2px);
}

.oadetech-quick-action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  background: var(--glpi-badge-bg);
  color: var(--oadetech-accent-blue);
  font-size: 1.15rem;
}

.oadetech-quick-action-label {
  font-size: 0.72rem;
  font-weight: 500;
  text-align: center;
  color: var(--tblr-muted) !important;
  line-height: 1.2;
}

/* =====================================================================
   Fase 3 — listagens (GLPI Search engine: tickets, ativos, usuários...).
   Status: GLPI already color-codes the little `.itilstatus` dot icon per
   status (see css/includes/components/itilobject/_status.scss) — instead
   of duplicating that per-status color map, we use :has() to turn the
   *wrapping* <span> into a tinted pill matching whichever status class the
   icon carries, reusing GLPI's own colors rather than inventing new ones.
   Priority: GLPI's `.badge_block` already gets a per-priority color inline
   (admin-configurable) — kept as-is, just reshaped into a pill.
   ===================================================================== */
.text-nowrap:has(> .itilstatus) {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--tblr-bg-surface-tertiary);
  color: var(--oadetech-ink);
}

/* incoming/new = blue */
.text-nowrap:has(> .itilstatus.new) {
  background: rgba(47, 111, 237, 0.12);
  color: #1d4ed8;
}

/* in progress = amber */
.text-nowrap:has(> .itilstatus.assigned),
.text-nowrap:has(> .itilstatus.planned),
.text-nowrap:has(> .itilstatus.waiting),
.text-nowrap:has(> .itilstatus.qualif),
.text-nowrap:has(> .itilstatus.test) {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

/* solved/accepted/approved = green */
.text-nowrap:has(> .itilstatus.solved),
.text-nowrap:has(> .itilstatus.accepted),
.text-nowrap:has(> .itilstatus.approval),
.text-nowrap:has(> .itilstatus.eval) {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}

/* canceled/refused = red */
.text-nowrap:has(> .itilstatus.canceled),
.text-nowrap:has(> .itilstatus.refused) {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

/* closed/observe fall through to the neutral default pill above */
.itilstatus {
  font-size: 0.85rem;
}

.badge_block {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.65rem !important;
  border-radius: 999px !important;
  font-size: 0.75rem;
  font-weight: 500;
  border-width: 1px;
  border-style: solid;
  background: var(--tblr-bg-surface-tertiary);
}

.badge_block span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* =====================================================================
   Ticket list only (plugins/oadetech/public/js/ticket-list-fx.js):
   requester/technician avatars + clickable status chips.
   ===================================================================== */
.oadetech-list-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--glpi-badge-bg);
  color: var(--oadetech-accent-blue);
  font-size: 0.65rem;
  font-weight: 600;
  margin-inline-end: 0.4rem;
  vertical-align: middle;
  flex-shrink: 0;
}

.oadetech-status-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.oadetech-status-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: var(--tblr-bg-surface);
  border: 1px solid var(--oadetech-line);
  color: var(--tblr-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none !important;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.oadetech-status-chip:hover {
  background: var(--glpi-hover-bg);
  color: var(--oadetech-ink);
}

.oadetech-status-chip.active {
  background: var(--oadetech-accent-blue);
  border-color: var(--oadetech-accent-blue);
  color: #ffffff;
}

/* Pagination + page-size selector polish (present on every search list) */
.pagination .page-link {
  border-radius: 8px;
  margin-inline: 1px;
  border-color: var(--oadetech-line);
}

.pagination .page-item.active .page-link {
  background: var(--oadetech-accent-blue);
  border-color: var(--oadetech-accent-blue);
}

/* =====================================================================
   Central de Atendimento — anonymous "helpdesk" layout (the forms opened
   from /central/'s dark catalog, e.g. "Reportar um Problema"). GLPI was
   rendering these with the same light theme as the authenticated app, so
   leaving the catalog's dark page read as a hard flash back to a
   "default" light color, and felt inconsistent between the various
   category forms. This re-applies the exact palette already used in
   /central/'s own inline <style> (public/central/index.html) so the
   whole anonymous journey — catalog -> form -> confirmation -> altcha
   captcha -> rich-text editor chrome — stays one continuous dark surface.
   Scoped strictly to `body.helpdesk`, so the authenticated app keeps its
   separate light theme untouched. The TinyMCE *content* itself lives in
   a same-origin `srcdoc` iframe this stylesheet can't reach; that part is
   handled by plugins/oadetech/public/js/helpdesk-fx.js instead.
   ===================================================================== */
body.helpdesk {
  /* Dialed back halfway toward the original near-black palette after
     the first lightening pass read as "too light" — same hues, a
     middle ground between the original and the fully-lightened attempt
     (matches the same pass on public/central/index.html). */
  --hd-void: #0f1512;
  --hd-panel: #151c18;
  --hd-panel-2: #1a231d;
  --hd-line: #2b372f;
  --hd-ink: #f2f6f3;
  --hd-ink-dim: #a9bbb1;
  --hd-ink-faint: #79897f;
  --hd-signal: #7dffb2;
  --hd-signal-deep: #214432;
  --hd-on-signal: #052314;
  --hd-gold: #f2b84b;
  background: radial-gradient(ellipse 900px 500px at 15% -10%, rgba(125, 255, 178, 0.11), transparent 60%), radial-gradient(ellipse 700px 500px at 100% 10%, rgba(242, 184, 75, 0.08), transparent 55%), linear-gradient(180deg, #0f1512 0%, #121a16 100%) !important;
  background-color: var(--hd-void) !important;
  color: var(--hd-ink) !important;
  min-height: 100vh;
}

body.helpdesk header.topbar {
  /* Solid, not translucent+blur: backdrop-filter on a position:sticky
     header caused stale/ghosted repaints while scrolling (a known
     Chromium sticky+backdrop-filter compositor bug) — a flat color
     avoids it entirely. */
  background: var(--hd-void) !important;
  border-bottom: 1px solid var(--hd-line) !important;
  box-shadow: none !important;
}

body.helpdesk header.topbar .glpi-logo {
  filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(125, 255, 178, 0.3));
}

body.helpdesk .page-header,
body.helpdesk .page-body,
body.helpdesk .page-wrapper {
  background: transparent !important;
}

body.helpdesk .form-title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  background: linear-gradient(90deg, var(--hd-ink) 0%, var(--hd-signal) 120%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.helpdesk .form-description,
body.helpdesk .text-muted,
body.helpdesk .block-description,
body.helpdesk .text-secondary {
  color: var(--hd-ink-dim) !important;
}

body.helpdesk h3 {
  color: var(--hd-ink);
}

body.helpdesk .card {
  background: linear-gradient(180deg, var(--hd-panel-2) 0%, var(--hd-panel) 100%) !important;
  border: 1px solid var(--hd-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25) !important;
}

body.helpdesk .form-control,
body.helpdesk .form-select,
body.helpdesk textarea.form-control {
  background: var(--hd-panel-2) !important;
  border: 1px solid var(--hd-line) !important;
  color: var(--hd-ink) !important;
}

body.helpdesk .form-control::placeholder {
  color: var(--hd-ink-faint);
  opacity: 1;
}

body.helpdesk .form-control:focus,
body.helpdesk .form-select:focus {
  border-color: var(--hd-signal) !important;
  box-shadow: 0 0 0 3px rgba(125, 255, 178, 0.18) !important;
}

body.helpdesk .btn-primary {
  background: var(--hd-signal) !important;
  border-color: var(--hd-signal) !important;
  color: var(--hd-on-signal) !important;
  font-weight: 600;
}

body.helpdesk .btn-primary:hover {
  background: #93ffc0 !important;
  border-color: #93ffc0 !important;
}

body.helpdesk [data-glpi-form-renderer-success] .icon.text-green {
  color: var(--hd-signal) !important;
}

/* TinyMCE chrome (toolbar/border/status bar) sits in the light DOM and is
   reachable normally; the editable content pane does not (see
   helpdesk-fx.js). `.tox-statusbar` (the bottom resize-handle bar) was
   missed originally — it kept its default white oxide-skin background,
   which read as a bright white strip against the rest of the dark editor. */
body.helpdesk .tox-tinymce {
  border-color: var(--hd-line) !important;
  border-radius: 10px !important;
  background: var(--hd-panel-2) !important;
  overflow: hidden;
}

body.helpdesk .tox .tox-toolbar__primary,
body.helpdesk .tox .tox-edit-area,
body.helpdesk .tox .tox-statusbar,
body.helpdesk .tox .tox-editor-header,
body.helpdesk .tox .tox-toolbar-overlord,
body.helpdesk .tox .tox-anchorbar {
  background: var(--hd-panel-2) !important;
  box-shadow: none !important;
}

body.helpdesk .tox .tox-statusbar {
  border-top-color: var(--hd-line) !important;
}

body.helpdesk .tox .tox-statusbar__path-item,
body.helpdesk .tox .tox-statusbar__wordcount {
  color: var(--hd-ink-faint) !important;
}

body.helpdesk .tox .tox-statusbar__resize-handle-icon svg {
  fill: var(--hd-ink-faint) !important;
}

body.helpdesk .tox .tox-tbtn svg {
  fill: var(--hd-ink-dim) !important;
}

body.helpdesk .tox .tox-tbtn:hover {
  background: var(--hd-line) !important;
}

body.helpdesk altcha-widget {
  --altcha-color-base: var(--hd-panel-2);
  --altcha-color-border: var(--hd-line);
  --altcha-color-text: var(--hd-ink);
  --altcha-color-border-focus: var(--hd-signal);
}

/* Select2 replaces the native <select> with its own markup (the plain
   .form-select rule above only reaches the now-hidden original element),
   and its dropdown popup is portaled onto <body> — still inside
   body.helpdesk, so it's caught by this same scope. */
body.helpdesk .select2-selection--single {
  background: var(--hd-panel-2) !important;
  border: 1px solid var(--hd-line) !important;
}

body.helpdesk .select2-selection__rendered {
  color: var(--hd-ink) !important;
}

body.helpdesk .select2-selection__arrow b {
  border-color: var(--hd-ink-dim) transparent transparent transparent !important;
}

body.helpdesk .select2-dropdown {
  background: var(--hd-panel-2) !important;
  border: 1px solid var(--hd-line) !important;
  color: var(--hd-ink) !important;
}

body.helpdesk .select2-search__field {
  background: var(--hd-panel) !important;
  border: 1px solid var(--hd-line) !important;
  color: var(--hd-ink) !important;
}

body.helpdesk .select2-results__option {
  color: var(--hd-ink) !important;
}

body.helpdesk .select2-results__option--highlighted {
  background: var(--hd-signal-deep) !important;
  color: var(--hd-ink) !important;
}