:root {
    --app-shell-sidebar-width: 280px;
    --bg: #f0f2f5;
    --surface: #ffffff;
    --surface-2: #f5f7f9;
    --text: #1e2433;
    --muted: #6b7280;
    --line: #e4e7ed;
    --blue-900: #0f1f3d;
    --blue-800: #152849;
    --blue-700: #1e3a6e;
    --accent: #3468e8;
    --primary: #202A6E;
    --ok: #16a34a;
    --warn: #d97706;
    --danger: #dc2626;
    --shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    /* Customizable branding (overridden per-tenant in header) */
    --sidebar-bg: #202A6E;
    --sidebar-text: #e8efff;
    --main-bg: #f0f2f5;
    --main-text: #1e2433;
    --btn-primary-bg: #202A6E;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #eaebeb;
    --btn-secondary-text: #1e2433;
    --btn-secondary-border: #e4e7ed;
    --btn-primary-hover-bg: #182055;
    --btn-primary-hover-text: #ffffff;
    --btn-secondary-hover-bg: #d4d5d5;
    --btn-secondary-hover-text: #1e2433;
}

:root[data-theme='dark'] {
    --bg: #11141a;
    --surface: #1b212b;
    --surface-2: #171d26;
    --text: #e5e7eb;
    --muted: #94a3b8;
    --line: #2e3745;
    --blue-900: #0c2a4f;
    --blue-800: #123865;
    --blue-700: #1b4a82;
    --accent: #60a5fa;
    --primary: #60a5fa;
    --shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
    /* Customizable branding defaults for dark theme */
    --sidebar-bg: #0D111D;
    --sidebar-text: #eef2f8;
    --main-bg: #11141a;
    --main-text: #e5e7eb;
    --btn-primary-bg: #1f3a6e;
    --btn-primary-text: #58a6ff;
    --btn-secondary-bg: transparent;
    --btn-secondary-text: #fb923c;
    --btn-secondary-border: #f97316;
    --btn-primary-hover-bg: #162d58;
    --btn-primary-hover-text: #8cc2ff;
    --btn-secondary-hover-bg: #1a2035;
    --btn-secondary-hover-text: #fb923c;
}

:root[data-theme='dark'] a:not(.btn-primary):not(.btn-secondary):not(.btn-outline):not(.btn-link),
:root[data-theme='dark'] a:visited:not(.btn-primary):not(.btn-secondary):not(.btn-outline):not(.btn-link) {
    color: #ffffff;
}

* {
    box-sizing: border-box;
}

/* Garante que o atributo hidden seja respeitado mesmo quando CSS autor define display em elementos */
[hidden] { display: none !important; }

html,
body {
    margin: 0;
    padding: 0;
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    background: var(--bg);
    color: var(--text);
}

.app-shell {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: 100vh;
    transition: grid-template-columns 0.22s ease;
}

.app-shell.sidebar-collapsed {
    grid-template-columns: 64px 1fr;
}

.sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.brand {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 0 4px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 16px;
}

.brand-mark {
    flex: 1;
    min-width: 0;
    height: 44px;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.brand-logo-img {
    height: 45px;
    width: auto;
    object-fit: contain;
    border-radius: inherit;
    display: block;
}

.theme-logo-stack {
    position: relative;
    display: inline-grid;
    place-items: center;
}

.theme-logo-stack > .theme-logo {
    grid-area: 1 / 1;
}

.theme-logo-stack > .theme-logo--light {
    display: block !important;
}

.theme-logo-stack > .theme-logo--dark {
    display: none !important;
}

html[data-theme='dark'] .theme-logo-stack > .theme-logo--light {
    display: none !important;
}

html[data-theme='dark'] .theme-logo-stack > .theme-logo--dark {
    display: block !important;
}

.brand-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.brand-text strong {
    font-size: 0.9rem;
    font-weight: 700;
    color: #f0f6ff;
}

.brand-text small {
    font-size: 0.72rem;
    opacity: 0.6;
}

.menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.menu-item {
    color: rgba(214, 231, 255, 0.75);
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s, color 0.15s;
}

.menu-item:hover {
    background: var(--menu-hover-bg, rgba(255, 255, 255, 0.08));
    color: var(--menu-hover-text, #ffffff);
}

.menu-item.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.sidebar-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
}

.sidebar-user__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0;
}

.sidebar-user__name {
    font-size: 0.78rem;
    color: rgba(215, 230, 255, 0.85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:root[data-theme='dark'] .sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
}

:root[data-theme='dark'] .sidebar .brand {
    border-bottom-color: rgba(226, 232, 240, 0.14);
}

:root[data-theme='dark'] .sidebar .brand-text strong {
    color: #f8fafc;
}

:root[data-theme='dark'] .sidebar .brand-text small {
    color: rgba(226, 232, 240, 0.72);
    opacity: 1;
}

:root[data-theme='dark'] .sidebar .menu-group-label {
    color: rgba(203, 213, 225, 0.85);
}

:root[data-theme='dark'] .sidebar .menu-item {
    color: rgba(226, 232, 240, 0.9);
}

:root[data-theme='dark'] .sidebar .menu-item:hover {
    background: var(--menu-hover-bg, rgba(148, 163, 184, 0.16));
    color: var(--menu-hover-text, #ffffff);
}

:root[data-theme='dark'] .sidebar .menu-item--active {
    background: rgba(203, 213, 225, 0.2);
    color: #ffffff;
}

:root[data-theme='dark'] .sidebar .sidebar-footer {
    border-top-color: rgba(226, 232, 240, 0.14);
}

:root[data-theme='dark'] .sidebar .sidebar-user {
    background: rgba(148, 163, 184, 0.16);
}

:root[data-theme='dark'] .sidebar .sidebar-user__name {
    color: rgba(241, 245, 249, 0.96);
}

/* ── Sidebar toggle button ───────────────────────────────────────────────── */
.sidebar-toggle {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    padding: 5px 6px;
    border-radius: 6px;
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    margin-left: auto;
    flex-shrink: 0;
}
.sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* ── Mobile navigation drawer (hamburger button + backdrop) ──────────────── */
/* Hidden by default (desktop); only shown via the max-width: 980px media query
   further down, alongside the off-canvas .sidebar behaviour. The backdrop is a
   real element (not a ::before) so its visibility can be driven by the [hidden]
   attribute from JS, which [hidden] { display: none !important } above enforces
   against the media query's display:block. */
.mobile-nav-toggle {
    display: none;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text);
    cursor: pointer;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    font-size: 1.15rem;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mobile-nav-toggle:hover {
    background: var(--surface-2);
}

.mobile-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 999;
}

/* ── Collapsed sidebar ───────────────────────────────────────────────────── */
.sidebar-collapsed .sidebar {
    padding: 20px 8px;
    align-items: stretch;
}
.sidebar-collapsed .brand {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    gap: 8px;
}
.sidebar-collapsed .brand-text {
    display: none;
}
.sidebar-collapsed .brand-mark {
    flex: none;
    width: 40px;
}
.sidebar-collapsed .sidebar-toggle {
    margin-left: 0;
}
.sidebar-collapsed .menu-group > summary {
    display: none !important;
}
.sidebar-collapsed .menu-group {
    overflow: hidden;
    display: contents; /* override details hiding so all items are always visible */
}
/* Force menu items visible in collapsed mode regardless of details[open] state */
.sidebar-collapsed .menu-group > :not(summary) {
    display: flex;
}
.sidebar-collapsed .menu-item {
    justify-content: center;
    padding: 10px 4px;
    gap: 0;
}
.sidebar-collapsed .menu-item .bi {
    font-size: 1.3rem;
    opacity: 1;
}
.sidebar-collapsed .menu-item__label {
    display: none;
}
.sidebar-collapsed .menu-item .badge {
    display: none;
}
.sidebar-collapsed .sidebar-footer .btn-outline {
    justify-content: center;
    padding: 10px;
}
.sidebar-collapsed .sidebar-footer .btn-outline i {
    margin-right: 0 !important;
}
.sidebar-collapsed .sidebar-footer .btn-outline .btn-label {
    display: none;
}

.content {
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.topbar {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 18px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    box-shadow: var(--shadow);
}

.topbar h1 {
    margin: 0 0 3px;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.topbar p {
    margin: 0;
    color: var(--muted);
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.86rem;
}

.breadcrumb__item {
    color: var(--muted);
    text-decoration: none;
}

.breadcrumb__item--current {
    color: var(--text);
    font-weight: 600;
}

.breadcrumb__sep {
    color: var(--muted);
}

/* Breadcrumb group label (non-link middle item) */
.breadcrumb__item--has-dropdown {
    position: relative;
}

/* Breadcrumb page dropdown */
.breadcrumb-dropdown {
    display: inline-block;
    position: relative;
}

.breadcrumb-dropdown > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    outline: none;
    font-weight: 600;
    color: var(--text);
}

.breadcrumb-dropdown > summary::-webkit-details-marker { display: none; }

.breadcrumb-dropdown__arrow {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transform-origin: center;
    margin-bottom: 2px;
    margin-left: 3px;
    margin-top: -3px;
    opacity: .6;
    transition: transform .15s, margin .15s;
    flex-shrink: 0;
}

.breadcrumb-dropdown[open] > summary .breadcrumb-dropdown__arrow {
    transform: rotate(-135deg);
    margin-bottom: -2px;
}

.breadcrumb-dropdown__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: #fff;
    color: #1a202c;
    border: 1px solid var(--line);
    border-radius: 10px;
    min-width: 190px;
    padding: 0.3rem;
    margin: 0;
    list-style: none;
    z-index: 200;
    box-shadow: 0 8px 24px rgba(0,0,0,.13);
}

:root[data-theme='dark'] .breadcrumb-dropdown__menu {
    background: #1b212b;
    color: #e5e7eb;
    box-shadow: 0 8px 24px rgba(0,0,0,.45);
}

.breadcrumb-dropdown__item {
    display: block;
    padding: 0.42rem 0.65rem;
    border-radius: 7px;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
    white-space: nowrap;
    font-weight: 400;
}

.breadcrumb-dropdown__item:hover {
    background: rgba(52, 104, 232, 0.07);
}

.breadcrumb-dropdown__item--active {
    font-weight: 600;
    background: rgba(52, 104, 232, 0.06);
    color: var(--accent);
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 5px;
    border-radius: 999px;
    background: rgba(0,0,0,.045);
    border: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.topbar-user:hover {
    background: rgba(0,0,0,.08);
}

.topbar-user__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--tenant-primary, #4f46e5);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0;
}

.topbar-user__name {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 18ch;
}

:root[data-theme='dark'] .topbar-user {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.1);
}

.pa-global-tooltip {
    position: fixed;
    left: -9999px;
    top: -9999px;
    z-index: 2147483647;
    max-width: 320px;
    max-height: none;
    padding: 0.35rem 0.55rem;
    border-radius: 0.375rem;
    border: none;
    margin: 0;
    inset: unset;
    overflow: visible;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    font-size: 0.78rem;
    line-height: 1.25;
    text-align: left;
    white-space: pre-line;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.16);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.pa-global-tooltip::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border-width: 5px 5px 0 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
}

.pa-global-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.pa-global-tooltip.is-bottom {
    transform: translateY(-4px);
}

.pa-global-tooltip.is-bottom::after {
    top: auto;
    bottom: 100%;
    border-width: 0 5px 5px 5px;
    border-color: transparent transparent rgba(0, 0, 0, 0.9) transparent;
}

.help-button {
    /* icon-only variant: use .help-icon-btn */
}

.help-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.help-icon-btn:hover {
    background: var(--surface-2);
    color: var(--text);
}

/* Phone-only "more actions" trigger — collapses help/theme/language/profile
   into a dropdown. display:none here so it never appears above 640px; see
   the @media (max-width: 640px) block near the end of this file for the
   opened-dropdown layout. */
.topbar-kebab {
    display: none;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text);
    cursor: pointer;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    font-size: 1.1rem;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.topbar-kebab:hover {
    background: var(--surface-2);
}

.help-dialog {
    width: min(760px, 92vw);
    border: none;
    border-radius: 18px;
    padding: 0;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
    background: var(--surface);
    color: var(--text);
}

.help-dialog::backdrop {
    background: rgba(200, 215, 245, 0.65);
    backdrop-filter: blur(3px);
}

.help-dialog__header,
.help-dialog__body {
    padding: 18px 20px;
}

.help-dialog__header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--line);
}

.help-dialog__header p {
    margin-bottom: 0;
    color: var(--muted);
}

.help-dialog__section + .help-dialog__section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.help-dialog__section h3 {
    margin: 0 0 6px;
}

.help-dialog__section p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.modal-dialog {
    width: min(640px, 92vw);
    max-height: 92vh;
    border: none;
    border-radius: 18px;
    padding: 0;
    overflow: hidden;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
}

.modal-dialog--xl {
    width: min(1200px, 96vw);
}

/* Replaces markup style="width:min(900px,96vw)" / style="width:80vw;…" on the
   users dialogs. An inline style outranks every author stylesheet rule, so the
   phone full-screen rules below could never have applied while these widths
   lived in the markup. Identical rendering on desktop. */
.modal-dialog--lg {
    width: min(900px, 96vw);
}

.modal-dialog--wide {
    width: 80vw;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

#log-detail-dialog {
    width: min(900px, 96vw);
}

#job-form-dialog[open] {
    position: fixed;
    inset: 0;
    margin: auto;
}

.modal-dialog[open] {
    position: fixed;
    inset: 0;
    margin: auto;
}

.help-dialog[open] {
    position: fixed;
    inset: 0;
    margin: auto;
}

.modal-dialog::backdrop {
    background: rgba(200, 215, 245, 0.65);
    backdrop-filter: blur(3px);
}

.modal-form {
    padding: 0;
    display: flex;
    flex-direction: column;
    max-height: 92vh;
}

.modal-form__header,
.modal-form__body,
.modal-form__actions {
    padding: 18px 20px;
}

.modal-form {
    position: relative;
}

.modal-form__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex: 0 0 auto;
    padding-right: 2.75rem;
    border-bottom: 1px solid var(--line);
}

.modal-form [data-log-detail-close],
.modal-form [data-ip-detail-close],
.modal-form__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1.3rem;
    padding: 0.25rem;
    line-height: 1;
}

.modal-form [data-log-detail-copy],
.modal-form [data-ip-detail-copy] {
    padding-left: 4px;
    padding-right: 4px;
    width: 130px;
    margin-right: 10px;
}

/* Phone-only duplicate action button, used by the IP-detail dialog and every
   "Ver detalhes" log dialog (audit, email/application logs, access-logs,
   query-logs — each renders its own copy of #log-detail-dialog): these all
   share the same header shape (title+subtitle div, then an .inline-actions
   group with a copy button + close button), so on a phone the copy button
   is duplicated into the title div (full width, under the subtitle) and the
   original in .inline-actions is hidden — CSS can't move an element between
   two different flex siblings, so a real duplicate is simplest. Both copies
   carry the page's own [data-*-copy] attribute, so the existing JS (which
   binds via jQuery .find(), not getElementById) needs no changes.
   Hidden here so it never shows above the dialog's own full-screen
   breakpoint; the @media (max-width: 600px) block near the end of this file
   swaps it in for the desktop one.
   .btn-secondary (display:inline-block) is defined later in this file and
   ties this rule's specificity (0,1,0) — same-specificity same rule order
   would let it win and show this button on desktop too. Qualifying with
   .btn-secondary here (0,2,0) settles it regardless of order. */
.btn-secondary.modal-header-action--mobile {
    display: none;
}

.ip-detail-layout {
    display: flex;
    gap: 1.25rem;
    align-items: stretch;
}

.ip-detail-fields {
    flex: 0 0 auto;
    width: 380px;
    margin: 0;
}

.ip-detail-map-panel {
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 0.5rem;
}

/* IP map dark mode: invert the Google Maps embed colours */
:root[data-theme='dark'] .ip-map-frame {
    filter: invert(90%) hue-rotate(180deg);
}

.modal-form__header h3 {
    margin: 0 0 6px;
}

.modal-form__header p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.modal-form__body {
    display: grid;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.modal-form__body label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.modal-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    flex: 0 0 auto;
    border-top: 1px solid var(--line);
}

.form-section {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px;
}

.form-subsection {
    margin: 1.5rem 0 0 0;
    border: none;
    border-radius: 0;
    padding: 0;
}

.form-subsection legend {
    padding: 0 0 12px 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    border-bottom: 2px solid var(--line);
    margin-bottom: 12px;
}

.form-subsection:first-of-type {
    margin-top: 0;
}

.panel-disclosure {
    margin-bottom: 1.5rem;
}

.panel-disclosure summary {
    list-style: none;
}

.panel-disclosure__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-weight: 600;
    cursor: pointer;
}

.panel-disclosure__summary::after {
    content: '▾';
    font-size: 0.9rem;
    color: var(--muted);
}

.panel-disclosure[open] .panel-disclosure__summary::after {
    transform: rotate(180deg);
}

.panel-disclosure summary::-webkit-details-marker {
    display: none;
}

.panel-disclosure__body {
    margin-top: 1rem;
    border-top: 1px solid var(--line);
    padding-top: 1rem;
}

.form-section legend {
    padding: 0 8px;
    font-weight: 700;
}

.form-hint {
    color: var(--muted);
    line-height: 1.45;
}

.info-dot {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    border-radius: 999px;
    background: rgba(47, 126, 216, 0.12);
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: help;
}

.page-intro {
    color: var(--muted);
    line-height: 1.6;
}

.install-page {
    padding: 24px;
}

.install-card {
    width: min(1100px, 96vw);
}

.login-page.install-page {
    display: block;
}

.install-page.install-page--client {
    min-height: 100vh;
    padding: 28px;
    background: var(--bg);
}

[data-theme='dark'] .install-page.install-page--client {
    background: var(--bg);
}

.install-shell {
    width: min(1440px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(560px, 860px);
    gap: 22px;
    align-items: stretch;
}

.install-shell > * {
    min-width: 0;
}

.install-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.install-hero {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 28px 22px;
    color: #f8fafc;
    background: #202A6E;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.install-hero__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.12);
}

.install-hero__logo img {
    width: 100%;
    max-width: 180px;
    height: auto;
    object-fit: contain;
}

.install-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid rgba(250, 204, 21, 0.35);
    color: #facc15;
    padding: 6px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    align-self: flex-start;
}

.install-hero h1 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
    color: #f0f6ff;
}

.install-hero p {
    margin: 0;
    color: rgba(226, 232, 240, 0.8);
    line-height: 1.5;
    font-size: 0.9rem;
}

.install-feature-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.install-feature-list li {
    border: none;
    border-radius: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(226, 232, 240, 0.85);
    line-height: 1.4;
    font-size: 0.85rem;
}

.install-feature-list li strong {
    display: block;
    color: #f0f6ff;
    font-weight: 600;
    margin-bottom: 2px;
}

.install-wizard-progress {
    height: 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.22);
    overflow: hidden;
    margin-bottom: 10px;
}

.install-wizard-progress__bar {
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
    transition: width 0.28s ease;
}

.install-wizard-steps {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.install-wizard-steps li {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--muted);
    padding: 8px 10px;
    font-size: 0.8rem;
    text-align: center;
}

[data-theme='dark'] .install-wizard-steps li {
    border-color: rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.4);
    color: #94a3b8;
}

.install-wizard-steps li.is-active {
    color: #fff;
    border-color: var(--primary);
    background: var(--primary);
    font-weight: 700;
}

.install-wizard-steps li.is-done {
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.4);
}

.is-hidden {
    display: none;
}

.install-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.install-mode-card {
    text-align: left;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.58);
    padding: 14px;
    display: grid;
    gap: 8px;
}

.install-mode-card strong {
    color: #f8fafc;
    font-size: 1.02rem;
}

.install-mode-card small {
    color: #94a3b8;
    line-height: 1.4;
}

.install-mode-card.is-selected {
    border-color: rgba(250, 204, 21, 0.65);
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.2) inset;
}

.install-mode-badge {
    display: inline-block;
    width: fit-content;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #111827;
    background: rgba(250, 204, 21, 0.9);
}

.install-mode-panel {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    background: rgba(15, 23, 42, 0.5);
}

.install-mode-panel h3 {
    margin: 0 0 6px;
}

.install-field-inline {
    display: flex;
    align-items: end;
}

.install-subsection {
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    padding: 12px;
    background: rgba(10, 15, 24, 0.35);
}

.install-subsection__title {
    margin: 0 0 10px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #facc15;
}

.multi-email {
    display: grid;
    gap: 8px;
}

.multi-email__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.multi-email__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 999px;
    padding: 4px 8px;
    background: rgba(30, 41, 59, 0.6);
    color: #e2e8f0;
    font-size: 0.82rem;
    user-select: none;
}

.multi-email__chip-text {
    pointer-events: none;
    user-select: none;
}

.multi-email__chip-remove {
    border: 0;
    padding: 0;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: rgba(248, 113, 113, 0.22);
    color: #fecaca;
    font-size: 0.72rem;
    line-height: 1;
    cursor: pointer;
}

.multi-email__entry {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}


.install-permission-list {
    margin: 10px 0 0;
    padding-left: 18px;
    color: #e2e8f0;
    line-height: 1.5;
}

.install-review-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 12px;
    padding: 12px;
    background: rgba(10, 15, 24, 0.5);
    color: #e2e8f0;
    margin: 10px 0 12px;
}

.install-auto-runtime {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.24);
}

.install-auto-steps {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.install-auto-steps li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(10, 15, 24, 0.45);
    color: #cbd5e1;
    padding: 8px 10px;
    font-size: 0.9rem;
}

.auto-step-icon {
    flex-shrink: 0;
    min-width: 1.1em;
    text-align: center;
    color: #475569;
    font-style: normal;
}

.auto-step-label {
    flex: 1;
}

.auto-step-message {
    font-size: 0.82rem;
    opacity: 0.75;
}

.auto-step-elapsed {
    flex-shrink: 0;
    min-width: 3.5em;
    text-align: right;
    font-size: 0.8rem;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.install-auto-steps li.is-running {
    border-color: #bfdbfe;
    color: #dbeafe;
}

.install-auto-steps li.is-running .auto-step-icon {
    color: #93c5fd;
    display: inline-block;
    animation: pa-spin 1.1s linear infinite;
}

.install-auto-steps li.is-done {
    border-color: #86efac;
    color: #bbf7d0;
}

.install-auto-steps li.is-done .auto-step-icon {
    color: #4ade80;
}

.install-auto-steps li.is-failed {
    border-color: #fecaca;
    color: #fecaca;
}

.install-auto-steps li.is-failed .auto-step-icon {
    color: #f87171;
}

@keyframes pa-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.auto-step-counter {
    margin: 8px 0 0;
    min-height: 1.2em;
    font-size: 0.85rem;
    color: #94a3b8;
}

.install-final-review {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.install-final-section {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 12px;
    padding: 12px 14px;
    background: rgba(10, 15, 24, 0.5);
}

.install-final-section h4 {
    margin: 0 0 10px;
    color: #94a3b8;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.install-review-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 14px;
    margin: 0;
    font-size: 0.9rem;
    color: #e2e8f0;
}

.install-review-dl dt {
    color: #94a3b8;
    font-weight: 500;
    white-space: nowrap;
}

.install-review-dl dd {
    margin: 0;
    word-break: break-all;
}

.install-secret-notice {
    margin: 10px 0 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.28);
    color: #fca5a5;
    font-size: 0.85rem;
    line-height: 1.4;
}

.install-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.install-topbar .login-head {
    flex: 1 1 auto;
    max-width: none;
}

.install-topbar .login-head p {
    max-width: none;
}

.install-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.install-topbar-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.install-login-indicator {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.2;
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.install-login-indicator.is-hidden {
    display: none;
}

.install-switch-account {
    font-size: 0.82rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--primary);
    text-decoration: underline;
    cursor: pointer;
}

.install-switch-account.is-hidden {
    display: none;
}

.install-form {
    gap: 18px;
}

.form-section-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
    margin-bottom: 14px;
}

.install-tool-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.btn-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

.install-permissions-list {
    margin: 0 0 14px;
    padding-left: 18px;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.45;
}

.test-feedback {
    display: none;
    margin-top: 12px;
    margin-bottom: 15px;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.92rem;
    border: 1px solid var(--line);
    background: var(--surface-2);
}

.test-feedback.is-visible {
    display: block;
}

.test-feedback--pending {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.test-feedback--success {
    border-color: #86efac;
    background: #f0fdf4;
    color: #166534;
    font-weight: 600;
}

.test-feedback--warning {
    border-color: #fed7aa;
    background: #fffbeb;
    color: #b45309;
    font-weight: 500;
}

.test-feedback--error {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
    font-weight: 500;
}

.empty-state {
    display: block;
    padding: 0.8rem 1.1rem;
    margin: 1rem 0;
    border-radius: 6px;
    border: 1px solid #fcd34d;
    background: #fffbeb;
    color: #92400e;
    font-size: 0.9rem;
    font-weight: 500;
}
[data-theme='dark'] .empty-state {
    background: #1a1500;
    border-color: #7c5010;
    color: #fbbf24;
}

.install-actions {
    display: flex;
    justify-content: flex-end;
}

.install-actions--between {
    justify-content: space-between;
}

.install-consents {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    margin-bottom: 10px;
}

.install-consents .install-consent-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.92rem;
    color: var(--text);
}

.install-consent-item input[type="checkbox"] {
    flex: 0 0 auto;
    display: block;
    width: 16px;
    height: 16px;
    padding: 0;
    border-radius: 4px;
    appearance: auto;
    -webkit-appearance: checkbox;
    background: transparent;
    margin-top: 0.18rem;
}

.install-consent-item span {
    flex: 1 1 auto;
    min-width: 0;
}

.install-consent-item a {
    color: var(--primary);
    text-decoration: underline;
}

.auth-topbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 20px;
}

.user-chip {
    padding: 8px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--line);
}

.grid.kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

/* pm-dashboard chart/table grids. minmax(0, ...) (not bare 1fr/2fr) so a grid
   item can shrink below its content's min-content width — otherwise a wide
   Chart.js canvas or table forces the whole row past the viewport instead of
   the mobile override below collapsing it to one column. */
.pm-dashboard-trend-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.pm-dashboard-split-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 18px 20px;
    box-shadow: var(--shadow);
}

.kpi {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kpi strong {
    font-size: 1.8rem;
}

.kpi.danger strong {
    color: var(--danger);
}

.kpi.warning strong {
    color: var(--warn);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    font-size: 0.875rem;
}

th {
    color: var(--muted);
    font-weight: 600;
}

table thead th {
    background: #f1f3f5;
    border-bottom: 1px solid #d8dde6;
}

:root[data-theme='dark'] table thead th {
    background: #262f3d;
    border-bottom: 1px solid #3a4659;
}

table tbody tr {
    transition: background-color 0.12s ease;
}

table tbody tr:hover {
    background-color: rgba(99, 130, 255, 0.13);
}

:root[data-theme='dark'] table tbody tr:hover {
    background-color: rgba(99, 130, 255, 0.1);
}

.enhanced-table thead th {
    color: var(--text);
    white-space: nowrap;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.pa-table-sticky-head thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.pa-table-sticky-head .tablesorter-filter-row td,
.pa-table-sticky-head .tablesorter-filter-row th {
    position: sticky;
    top: 41px;
    z-index: 2;
}

.tablesorter-header {
    cursor: pointer;
    user-select: none;
}

.tablesorter-indicator {
    opacity: 0.45;
    font-size: 0.72rem;
    margin-left: 0.35rem;
}

.tablesorter-headerAsc .tablesorter-indicator::before {
    content: '▲';
}

.tablesorter-headerDesc .tablesorter-indicator::before {
    content: '▼';
}

/* Tablesorter: filtered rows hidden via CSS class (theme CSS not loaded) */
tr.filtered {
    display: none;
}

.tablesorter-filter-row td,
.tablesorter-filter-row th {
    background: #f8fafc;
    border-bottom: 1px solid var(--line);
}

.tablesorter-filter {
    width: 100%;
    min-width: 110px;
    background: #fff;
}

input.tablesorter-filter {
    padding-left: 26px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 7px center;
    background-size: 14px 14px;
    background-attachment: scroll;
}

.tablesorter-filter::placeholder {
    color: var(--muted);
}

select.tablesorter-filter {
    -webkit-appearance: none;
    appearance: none;
    /* A <select> has no placeholder — its "Selecionar" default option renders
       through the element's own `color`, not `::placeholder`. Matching that
       to the text-input filters' placeholder color (instead of the default
       var(--text), full-strength body text) is what makes an unselected
       filter select read the same as an empty search box next to it. */
    color: var(--muted);
    /* The generic `select { line-height: 1; padding-top: 12px; padding-bottom:
       9px }` rule (meant for regular form selects) shrinks this one's line box
       enough that even its extra 3px of padding doesn't make up for it, so it
       renders visibly shorter than the text-input filters next to it despite
       having MORE padding. Resetting line-height and equalizing padding to
       input.tablesorter-filter's 9px/9px makes both compute to the same
       height. */
    line-height: inherit;
    padding-top: 9px;
    padding-bottom: 9px;
    padding-left: 26px;
    padding-right: 22px;
    background-color: #fff;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z'/%3E%3Cpath d='M13 13l6 6'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: 7px center, right 7px center;
    background-size: 13px 13px, 10px 10px;
    cursor: pointer;
}

/* `:root[data-theme='dark'] .tablesorter-filter { background-color: var(--surface) }`
   below (0,3,0) already outranks the generic dark `select { ... }` tint rule
   (0,2,1) — that's why the select filter kept the plain, untinted --surface
   while input.tablesorter-filter (whose own dark rule carries six :not()
   clauses, pushing it to (0,8,1)) got the tint. Re-declaring the tint here
   at (0,3,1) is the only combination that beats both. */
:root[data-theme='dark'] select.tablesorter-filter {
    background-color: color-mix(in srgb, var(--line) 35%, var(--surface));
    /* Same reasoning as the base rule's `color: var(--muted)` above — the
       generic dark `.tablesorter-filter { color: var(--text) }` rule (0,3,0)
       would otherwise win over that base select rule (0,1,1) and brighten
       the text back up in dark mode specifically. */
    color: var(--muted);
}

.pill {
    display: inline-block;
    border-radius: 999px;
    padding: 4px 16px;
    font-size: 0.75rem;
    background: #e5e7eb;
    color: #111827;
}

.pill.failed,
.pill.unavailable,
.pill.critical,
.pill.high {
    background: #fee2e2;
    color: #7f1d1d;
}

.pill.running,
.pill.ready,
.pill.healthy,
.pill.medium {
    background: #dcfce7;
    color: #14532d;
}

.pill.low,
.pill.degraded,
.pill.warning {
    background: #fef3c7;
    color: #7c2d12;
}

.pill.active {
    background: #dcfce7;
    color: #14532d;
}

.pill.blocked {
    background: #fee2e2;
    color: #7f1d1d;
}

.pill.inactive {
    background: #e5e7eb;
    color: #111827;
}

.pill.user-inactive {
    background: #fee2e2;
    color: #7f1d1d;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

.form-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.9rem;
}

.form-grid .form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.9rem;
}

/* Flex/grid items default to min-width:auto, which for a <select> resolves
   to its widest <option>'s content width — align-items:stretch above still
   can't shrink it below that floor. A select with a long option (an
   organization name, say) can end up wider than its column and spill past
   the dialog on a phone. width:100% + min-width:0 forces it (and any
   sibling input/textarea) to actually respect the column instead. Not
   scoped to .form-grid — .form-field/label are used as generic form-row
   wrappers outside it too (e.g. the /support organization filter). */
label > select,
label > input,
label > textarea,
.form-field > select,
.form-field > input,
.form-field > textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.form-grid .form-label {
    font-weight: 500;
}
.form-grid .form-label-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.form-grid .form-label-inline .info-dot {
    margin-left: 0;
    flex: 0 0 auto;
}

.form-grid .full {
    grid-column: 1 / -1;
}

.form-grid label.switch {
    align-self: center;
    margin-top: 26px;
}

input,
textarea,
select,
button {
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    padding: 9px 12px;
    font: inherit;
    font-size: 0.9rem;
}

select {
    line-height: 1;
    padding-top: 12px;
    padding-bottom: 9px;
}

input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--accent);
    outline-offset: 0;
    border-color: var(--accent);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]):hover,
textarea:hover,
select:hover {
    border-color: color-mix(in srgb, var(--muted) 45%, var(--line));
}

select {
    cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
    cursor: pointer;
    padding: 0;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    border: none;
    background: none;
}

button,
.btn-primary,
.btn-secondary,
.btn-outline {
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    line-height: 1.2;
}

button:disabled,
input[type='button']:disabled,
input[type='submit']:disabled,
input[type='reset']:disabled,
input[type='checkbox']:disabled,
input[type='radio']:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-outline:disabled,
input[type='checkbox']:disabled + span,
input[type='radio']:disabled + span {
    cursor: not-allowed;
}

.btn-primary {
    background: var(--btn-primary-bg);
    border: 1px solid transparent;
    color: var(--btn-primary-text);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    padding: 10px 18px;
    transition: opacity 0.15s;
}

.btn-primary:hover {
    background: var(--btn-primary-hover-bg);
    color: var(--btn-primary-hover-text);
    opacity: 1;
}

.btn-secondary {
    background: var(--btn-secondary-bg);
    border: 1px solid var(--btn-secondary-border);
    font-size: 0.875rem;
    color: var(--btn-secondary-text);
    padding: 10px 16px;
    font-weight: 500;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}

.btn-secondary:hover {
    background: var(--btn-secondary-hover-bg);
    color: var(--btn-secondary-hover-text);
    transform: translateY(-1px);
}

.btn-outline {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(241, 245, 249, 0.85);
    font-size: 0.875rem;
    padding: 9px 14px;
}

:root[data-theme='dark'] .btn-primary {
    background: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

:root[data-theme='dark'] .btn-primary:hover {
    background: var(--btn-primary-hover-bg);
    color: var(--btn-primary-hover-text);
    opacity: 1;
}

:root[data-theme='dark'] .btn-secondary {
    background: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-border);
    color: var(--btn-secondary-text);
}

:root[data-theme='dark'] .btn-secondary:hover {
    background: var(--btn-secondary-hover-bg);
    color: var(--btn-secondary-hover-text);
    transform: translateY(-1px);
}

:root[data-theme='dark'] .btn-outline {
    background: transparent;
    border-color: #22c55e;
    color: #4ade80;
}

:root[data-theme='dark'] .btn-outline:hover {
    background: rgba(34, 197, 94, 0.16);
    border-color: #4ade80;
    color: #86efac;
}

.sidebar-footer .btn-outline {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

.sidebar-footer .btn-outline:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

:root[data-theme='dark'] .sidebar-footer .btn-outline {
    border-color: #ef4444;
    color: #f87171;
}

:root[data-theme='dark'] .sidebar-footer .btn-outline:hover {
    background: rgba(239, 68, 68, 0.16);
    border-color: #f87171;
    color: #fca5a5;
}

:root[data-theme='dark'] .actions-menu > summary.btn-secondary {
    background: #0d111d;
    border-color: #334155;
    color: #ffffff;
}

:root[data-theme='dark'] .actions-menu > summary.btn-secondary:hover {
    background: #141b2b;
    border-color: #475569;
    color: #ffffff;
}

/* Dark theme — tablesorter filter row */
:root[data-theme='dark'] .tablesorter-filter-row td,
:root[data-theme='dark'] .tablesorter-filter-row th {
    background-color: var(--surface-2);
}

:root[data-theme='dark'] .tablesorter-filter {
    background-color: var(--surface);
    color: var(--text);
    border-color: var(--line);
}

:root[data-theme='dark'] .tablesorter-filter::placeholder {
    color: var(--muted);
}

/* Dark theme — inputs/selects/textareas levemente mais claros que o surface */
:root[data-theme='dark'] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]),
:root[data-theme='dark'] textarea,
:root[data-theme='dark'] select,
:root[data-theme='dark'] .filter-dropdown__summary,
:root[data-theme='dark'] .filter-dropdown__menu {
    background-color: color-mix(in srgb, var(--line) 35%, var(--surface));
}

:root[data-theme='dark'] select,
:root[data-theme='dark'] input[type="date"],
:root[data-theme='dark'] input[type="datetime-local"] {
    color-scheme: dark;
    color: var(--text);
}

:root[data-theme='dark'] select option {
    background-color: color-mix(in srgb, var(--line) 35%, var(--surface));
    color: var(--text);
}

/* Reaplicar ícones do select tablesorter com stroke claro no dark mode */
:root[data-theme='dark'] select.tablesorter-filter {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z'/%3E%3Cpath d='M13 13l6 6'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: 7px center, right 7px center;
    background-size: 13px 13px, 10px 10px;
}

.switch {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    justify-content: flex-start;
}

.login-page:not(.install-page) {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    background: var(--bg);
    position: relative;
    overflow: hidden;
}

.login-page:not(.install-page)::before,
.login-page:not(.install-page)::after {
    display: none;
}

.login-page:not(.install-page) .login-card {
    width: min(440px, 92vw);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    box-shadow:
        0 4px 6px rgba(20, 41, 77, 0.04),
        0 16px 48px rgba(20, 41, 77, 0.12),
        inset 0 1px 0 rgba(255,255,255,0.9);
    padding: 32px 28px;
    position: relative;
    z-index: 1;
}

.login-page:not(.install-page) .login-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    border-radius: 16px 16px 0 0;
    background: var(--tenant-primary, var(--primary));
}

/* ── Dark mode overrides for login / auth pages ────────────────────────── */
[data-theme='dark'] .login-page:not(.install-page) {
    background: var(--bg);
}

[data-theme='dark'] .login-page:not(.install-page) .login-card {
    background: rgba(22, 29, 42, 0.97);
    border-color: rgba(52, 63, 82, 0.75);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.35), 0 20px 56px rgba(0, 0, 0, 0.55);
}

[data-theme='dark'] .login-page:not(.install-page)::before,
[data-theme='dark'] .login-page:not(.install-page)::after {
    display: none;
}

.login-card.install-card {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 24px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
}

[data-theme='dark'] .login-card.install-card {
    border-color: var(--line);
    background: var(--surface);
    color: #e5e7eb;
}

.install-page.install-page--client .login-head p,
.install-page.install-page--client .form-hint,
.install-page.install-page--client .form-grid label {
    color: var(--muted);
}

.install-page.install-page--client .form-section {
    border-color: var(--line);
    background: var(--surface-2);
}
.btn-microsoft {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-microsoft__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}
.btn-microsoft__icon svg {
    display: block;
}

.btn-mail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-mail__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}

.btn-mail__icon svg {
    display: block;
}

[data-theme='dark'] .install-page.install-page--client .form-section {
    border-color: rgba(148, 163, 184, 0.28);
    background: rgba(12, 17, 27, 0.5);
}

.install-page.install-page--client .form-section legend {
    color: var(--text);
}

.install-page.install-page--client input,
.install-page.install-page--client textarea,
.install-page.install-page--client select,
.install-page.install-page--client button {
    border-color: var(--line);
    background: var(--surface);
    color: var(--text);
}

[data-theme='dark'] .install-page.install-page--client input,
[data-theme='dark'] .install-page.install-page--client textarea,
[data-theme='dark'] .install-page.install-page--client select,
[data-theme='dark'] .install-page.install-page--client button {
    border-color: rgba(148, 163, 184, 0.3);
    background: rgba(10, 15, 24, 0.85);
    color: #f8fafc;
}

.install-page.install-page--client .btn-secondary {
    color: var(--text);
}

[data-theme='dark'] .install-page.install-page--client .btn-secondary {
    color: #f8fafc;
}

.install-page.install-page--client .btn-primary {
    background: var(--primary);
    color: #fff;
    font-weight: 700;
}

.install-step {
    margin: 0;
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

[data-theme='dark'] .install-step {
    color: #facc15;
}

.install-page.install-page--client .help-button,
.install-page.install-page--client .help-icon-btn {
    border-color: var(--line);
    color: var(--text);
}

[data-theme='dark'] .install-page.install-page--client .help-button,
[data-theme='dark'] .install-page.install-page--client .help-icon-btn {
    border-color: rgba(148, 163, 184, 0.35);
    color: #f8fafc;
}

.install-page.install-page--client .help-icon-btn:hover {
    background: var(--surface-2);
    color: var(--text);
}

[data-theme='dark'] .install-page.install-page--client .help-icon-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.install-page.install-page--client .lang-switcher__trigger,
.install-page.install-page--client .lang-switcher__summary {
    border-color: var(--line);
}

[data-theme='dark'] .install-page.install-page--client .lang-switcher__trigger,
[data-theme='dark'] .install-page.install-page--client .lang-switcher__summary {
    border-color: rgba(148, 163, 184, 0.35);
}

.install-page.install-page--client .lang-switcher__trigger:hover,
.install-page.install-page--client .lang-switcher__summary:hover {
    background: var(--surface-2);
}

[data-theme='dark'] .install-page.install-page--client .lang-switcher__trigger:hover,
[data-theme='dark'] .install-page.install-page--client .lang-switcher__summary:hover {
    background: rgba(255, 255, 255, 0.08);
}

.install-page.install-page--client .test-feedback {
    background: var(--surface-2);
    border-color: var(--line);
    color: var(--text);
}

.install-page.install-page--client .test-feedback--pending {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.install-page.install-page--client .test-feedback--success {
    background: #f0fdf4;
    border-color: #86efac;
    color: #166534;
    font-weight: 600;
}

.install-page.install-page--client .test-feedback--warning {
    background: #fffbeb;
    border-color: #fed7aa;
    color: #b45309;
    font-weight: 500;
}

.install-page.install-page--client .test-feedback--error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
    font-weight: 500;
}

[data-theme='dark'] .install-page.install-page--client .test-feedback {
    background: rgba(12, 17, 27, 0.8);
    border-color: rgba(148, 163, 184, 0.25);
    color: #cbd5e1;
}

[data-theme='dark'] .install-page.install-page--client .test-feedback--pending {
    background: rgba(14, 30, 60, 0.6);
    border-color: rgba(191, 219, 254, 0.4);
    color: #93c5fd;
}

[data-theme='dark'] .install-page.install-page--client .test-feedback--success {
    background: rgba(20, 40, 20, 0.6);
    border-color: rgba(134, 239, 172, 0.4);
    color: #86efac;
    font-weight: 600;
}

[data-theme='dark'] .install-page.install-page--client .test-feedback--warning {
    background: rgba(60, 40, 15, 0.6);
    border-color: rgba(254, 215, 170, 0.4);
    color: #fbbf24;
    font-weight: 500;
}

[data-theme='dark'] .install-page.install-page--client .test-feedback--error {
    background: rgba(60, 15, 15, 0.6);
    border-color: rgba(254, 202, 202, 0.4);
    color: #fca5a5;
    font-weight: 500;
}

.login-head h1 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.login-logo-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 0.8rem;
}

.login-logo-wrap--install {
    justify-content: flex-start;
}

.login-logo-img {
    width: min(260px, 100%);
    max-height: 72px;
    object-fit: contain;
    display: block;
}

.login-head p {
    color: var(--muted);
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.login-page:not(.install-page) .login-head {
    margin-bottom: 20px;
}

.login-page:not(.install-page) .login-foot {
    color: #475569;
}

.login-page:not(.install-page) .login-foot.login-foot--spaced {
    margin-top: 14px;
}

.password-strength {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.password-strength__bars {
    display: flex;
    gap: 3px;
    flex: 1;
}

.password-strength__bar {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--line);
    transition: background 0.2s;
}

.password-strength__label {
    font-size: 11px;
    min-width: 52px;
    text-align: right;
    font-weight: 500;
    transition: color 0.2s;
}

.lang-switcher {
    position: relative;
}

.lang-switcher summary {
    list-style: none;
    cursor: pointer;
}

.lang-switcher summary::-webkit-details-marker {
    display: none;
}

.lang-switcher__trigger,
.lang-switcher__summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--line);
    cursor: pointer;
    list-style: none;
    flex-shrink: 0;
    transition: background 0.15s;
}

.lang-switcher__trigger:hover,
.lang-switcher__summary:hover {
    background: var(--surface-2);
}

.lang-switcher__trigger .lang-flag,
.lang-switcher__trigger .fi,
.lang-switcher__summary .lang-flag,
.lang-switcher__summary .fi {
    font-size: 1.25rem;
    line-height: 1;
    pointer-events: none;
}

/* Hide text label inside compact trigger — keep only flag */
.lang-switcher__trigger > span:not(.lang-flag):not(.fi),
.lang-switcher__summary > span:not(.lang-flag):not(.fi) {
    display: none;
}

.lang-flag {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 1rem;
    line-height: 1;
}

.lang-switcher ul {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    background: #ffffff;
    border: 1px solid #e4e7ed;
    border-radius: 12px;
    min-width: 200px;
    padding: 0.35rem;
    margin: 0;
    list-style: none;
    z-index: 80;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    color: #1e2433;
}

.lang-switcher li + li {
    margin-top: 2px;
}

.lang-switcher li button,
.lang-switcher li a.lang-option {
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: #1e2433;
    padding: 0.5rem 0.6rem;
    border-radius: 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.9rem;
    text-decoration: none;
    box-sizing: border-box;
}

.lang-switcher li button:hover,
.lang-switcher li a.lang-option:hover {
    background: rgba(37, 99, 235, 0.08);
}

.lang-switcher li a.lang-option--active {
    background: rgba(37, 99, 235, 0.06);
    font-weight: 600;
}

.lang-switcher .fi {
    font-size: 18px;
    border-radius: 3px;
    flex-shrink: 0;
    vertical-align: middle;
}

.pa-help-swal {
    border-radius: 18px;
    padding: 0 0 0.75rem;
}

.pa-help-swal__title {
    text-align: left;
    margin: 1.2rem 1.2rem 0.2rem;
}

.pa-help-modal {
    text-align: left;
    padding: 0 1.2rem;
}

.pa-help-modal__summary {
    margin: 0.2rem 0 1rem;
    color: var(--muted);
    line-height: 1.55;
}

.pa-help-modal__section + .pa-help-modal__section {
    margin-top: 0.95rem;
    padding-top: 0.95rem;
    border-top: 1px solid var(--line);
}

.pa-help-modal__section h3 {
    margin: 0 0 0.35rem;
    font-size: 1.02rem;
}

.pa-help-modal__section p {
    margin: 0;
    line-height: 1.55;
    color: var(--muted);
}

.full {
    width: 100%;
}

.alert-error {
    margin: 12px 0;
    border-radius: 10px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
    padding: 10px;
}

.alert-info {
    margin: 12px 0;
    border-radius: 10px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1e3a8a;
    padding: 10px;
}

.pa-auth-blockui {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(1px);
}

.pa-auth-blockui__box {
    min-width: min(360px, 86vw);
    max-width: 86vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 22px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 20px 45px rgba(2, 6, 23, 0.25);
}

.pa-auth-blockui__spinner {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 3px solid rgba(148, 163, 184, 0.3);
    border-top-color: var(--primary);
    animation: pa-spin 1.1s linear infinite;
}

.pa-auth-blockui__text {
    margin: 0;
    text-align: center;
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.4;
}

.btn-sm {
    padding: 0.32rem 0.55rem;
    font-size: 0.8rem;
}

.btn-danger {
    background: var(--danger, #dc2626);
    color: #fff !important;
    border-color: var(--danger, #dc2626);
}

.btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}

.btn-danger-sm {
    padding: .1rem .45rem;
    font-size: .8rem;
    line-height: 1.4;
    height: 1.75rem;
    border-radius: 6px;
    border: none;
    background: var(--danger, #dc2626);
    color: #fff;
    cursor: pointer;
}

.btn-danger-sm:hover {
    background: color-mix(in srgb, var(--danger, #dc2626) 80%, #000);
}

.btn-outline-danger-sm {
    font-size: .75rem;
    padding: .15rem .35rem;
    border-radius: 5px;
    border: 1px solid #ef4444;
    background: transparent;
    color: #ef4444;
    cursor: pointer;
    line-height: 1.4;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.btn-outline-danger-sm:hover {
    background: #ef4444;
    color: #fff;
}

/* Password strength meter */
.pw-strength {
    margin-top: 0.45rem;
}

.pw-strength__bar {
    height: 5px;
    border-radius: 99px;
    background: var(--line);
    overflow: hidden;
}

.pw-strength__fill {
    height: 100%;
    width: 0%;
    border-radius: 99px;
    transition: width 0.25s ease, background-color 0.25s ease;
    background: var(--line);
}

.pw-strength__fill[data-level="1"] { width: 25%; background: #ef4444; }
.pw-strength__fill[data-level="2"] { width: 50%; background: #f97316; }
.pw-strength__fill[data-level="3"] { width: 75%; background: #eab308; }
.pw-strength__fill[data-level="4"] { width: 100%; background: #22c55e; }

.pw-strength__label {
    font-size: 0.78rem;
    margin-top: 0.3rem;
    color: var(--text);
    opacity: 0.75;
    min-height: 1em;
}

tr[data-check-hidden="1"] { display: none !important; }


.filter-shell {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
    background: var(--surface-2);
    margin-bottom: 1.25rem;
}

/* /support's organization filter — was an inline style="display:grid;..."
   on the <form>, which no media query could ever override. */
.support-filter-form {
    display: grid;
    grid-template-columns: minmax(280px, 420px) auto;
    gap: 1rem;
    align-items: end;
    margin-bottom: 1rem;
}

.filter-shell__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 0.85rem;
}

.filter-shell__header h3 {
    margin: 0 0 0.2rem;
    font-size: 1rem;
}

.filter-shell__header p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.filter-bar {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: end;
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 180px;
    flex: 1 1 180px;
}

.filter-field label,
.filter-choice {
    font-size: 0.84rem;
    color: var(--muted);
}

.filter-choice {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 42px;
}

/* ── Filter dropdown (checkbox multi-select or searchable single-pick) ──
   Base trigger + menu shared by both variants; monitor-organizations/index.php
   has its own copy of the base rules (predates this shared one) — identical
   values, so no visual conflict, just redundant. New pages should use this
   copy instead of re-declaring it locally. */
.filter-dropdown {
    position: relative;
}

.filter-dropdown__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    list-style: none;
    background: var(--surface, #fff);
    /* <summary> isn't a form control, so it never picked up the
       `input, textarea, select, button { font-size: 0.9rem }` rule — it
       rendered at the page's larger default font-size instead, which (via a
       taller inherited line-height) made this box 2-3px taller than the
       text inputs and native selects beside it despite identical padding. */
    font-size: 0.9rem;
}

.filter-dropdown__summary::-webkit-details-marker {
    display: none;
}

.filter-dropdown__summary::after {
    content: '';
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: 0.5rem;
    flex: 0 0 auto;
    opacity: 0.75;
    transition: transform 0.15s ease;
}

.filter-dropdown[open] .filter-dropdown__summary::after {
    transform: rotate(-135deg);
    margin-top: 0.25rem;
}

.filter-dropdown__menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    display: grid;
    gap: 0.4rem;
    padding: 0.6rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface, #fff);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    max-height: 220px;
    overflow-y: auto;
}

.filter-dropdown__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-weight: 500;
}

.filter-dropdown__option input[type="checkbox"] {
    margin: 0;
}

/* ── Searchable variant: a fixed search box + action row above a
   scrollable option list, instead of the plain checkbox grid above. The
   list itself (not the whole menu) scrolls, so the search box and the
   select-all/clear row stay put while it does. */
.filter-dropdown__menu--searchable {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 320px;
    overflow: hidden;
    padding: 0.6rem;
}

.filter-dropdown__search {
    position: relative;
    flex: 0 0 auto;
}

.filter-dropdown__search i {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.filter-dropdown__search input {
    width: 100%;
    padding-left: 2rem;
}

.filter-dropdown__bulk-actions {
    display: flex;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.filter-dropdown__bulk-actions button {
    flex: 1 1 auto;
    font-size: 0.82rem;
    padding: 6px 10px;
}

.filter-dropdown__options {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.filter-dropdown__option-group-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    padding: 0.5rem 0.4rem 0.2rem;
}

.filter-dropdown__option-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.4rem;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    font-size: 0.88rem;
    color: var(--text);
}

.filter-dropdown__option-item:hover {
    background: var(--surface-2);
}

.filter-dropdown__option-item.is-selected {
    background: rgba(37, 99, 235, 0.08);
    font-weight: 600;
    color: var(--accent);
}

.filter-dropdown__option-item input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
}

.filter-actions,
.export-actions,
.tab-strip {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.filter-actions {
    align-items: center;
}

/* Multicheck box — scrollable checkbox list for audit filters */
.multicheck-box {
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.4rem 0.5rem;
    background: var(--surface-2);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.multicheck-box__item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.18rem 0.25rem;
    border-radius: 4px;
    font-size: 0.84rem;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
}

.multicheck-box__item:hover {
    background: var(--surface);
}

.multicheck-box__item input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}

.multicheck-box__controls {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.25rem;
    font-size: 0.8rem;
}

.btn-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.btn-link:hover {
    opacity: 0.75;
}

/* ── Multicheck Dropdown ─────────────────────────────────────────── */
.multicheck-dropdown {
    position: relative;
}

.multicheck-dropdown__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.70rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    color: inherit;
    gap: 0.5rem;
    text-align: left;
}

.multicheck-dropdown.is-open .multicheck-dropdown__trigger {
    border-color: var(--accent);
    outline: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.multicheck-dropdown__arrow {
    opacity: 0.55;
    font-size: 1rem;
    transition: transform 0.15s;
    flex-shrink: 0;
}

.multicheck-dropdown.is-open .multicheck-dropdown__arrow {
    transform: rotate(180deg);
}

.multicheck-dropdown__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 1.2em;
    height: 1.2em;
    padding: 0 0.35em;
    margin-left: 0.3rem;
}

.multicheck-dropdown__panel {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    max-width: 320px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
    z-index: 200;
}

.multicheck-dropdown.is-open .multicheck-dropdown__panel {
    display: flex;
}

.multicheck-dropdown__list {
    max-height: 240px;
    overflow-y: auto;
    padding: 0.5rem 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.multicheck-dropdown__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
    white-space: nowrap;
    color: var(--text);
}

.multicheck-dropdown__item:hover {
    background: var(--hover-bg, rgba(0,0,0,.05));
}

.multicheck-dropdown__footer {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem 0.5rem;
    border-top: 1px solid var(--line);
    font-size: 0.8rem;
    color: var(--muted);
}

/* ── Pagination disabled state ───────────────────────────────────── */
.pagination__disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* ── BlockUI global ──────────────────────────────────────────────── */
.pa-ajax-block-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, .45);
    cursor: wait;
}

.blockUI.blockOverlay {
    background: rgba(200, 215, 245, 0.65) !important;
    opacity: 1 !important;
    backdrop-filter: blur(3px);
    z-index: 9999 !important;
}

.blockUI.blockMsg {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: #1b212b !important;
    color: #e8eaf0 !important;
    padding: 1.75rem 2.5rem !important;
    border-radius: 12px !important;
    box-shadow: 0 30px 80px rgba(0,0,0,.35) !important;
    border: none !important;
    z-index: 10001 !important;
    min-width: 200px !important;
    width: auto !important;
    cursor: wait !important;
}

.blockMsg p {
    margin: 0 !important;
    font-size: 1rem !important;
    color: #e8eaf0 !important;
}

.blockMsg .pa-loading-text {
    color: #e8eaf0 !important;
    margin-left: 0.5rem;
}

/* ── Resource Permissions modal — loading / error states ─────────── */

/* ── Resource Permissions panel — error state ───────────────────── */
.rp-panel-error {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1rem .25rem;
    color: var(--danger, #dc2626);
    font-size: .9rem;
}
.rp-panel-error .bi {
    font-size: 1.1rem;
}
@keyframes rp-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Resource Permissions panel — per-tab loading state ─────────── */
.rp-panel-loading {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1.25rem .25rem;
    color: var(--text-muted);
    font-size: .9rem;
}
.rp-panel-loading .bi {
    font-size: 1.2rem;
    color: #6366f1;
    animation: rp-spin 1.2s linear infinite;
}

.blockMsg svg {
    display: block !important;
    margin: 0 auto 1rem auto !important;
}

/* ── pa-loading overlay (custom full-screen loader) ──────────────── */
.pa-loading-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border: none;
    padding: 0;
    margin: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    z-index: 9999;
}

.pa-loading-overlay[open] {
    display: flex;
}

.pa-loading-overlay::backdrop {
    display: none;
}

.pa-loading-box {
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    min-width: 200px;
    background: #ffffff;
    color: #1e2433;
}

html[data-theme="dark"] .pa-loading-box {
    background: #1b212b;
    color: #e5e7eb;
}

.pa-spinner {
    animation: pa-spin 1.5s linear infinite;
}

html[data-theme="light"] .pa-spinner { color: #3468e8; }
html[data-theme="dark"]  .pa-spinner { color: #e5e7eb; }

html[data-theme="light"] .pa-loading-text { color: #1e2433; }
html[data-theme="dark"]  .pa-loading-text { color: #e5e7eb; }

/* ── pa-copy: click-to-copy cells/fields ─────────────────────────────────── */
.pa-copy {
    cursor: copy;
    position: relative;
    transition: background-color 0.15s;
}
.pa-copy:hover {
    text-decoration: underline dotted;
}
.pa-copy::after {
    content: attr(data-copy-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1b212b;
    color: #e5e7eb;
    font-size: .72rem;
    white-space: nowrap;
    padding: 3px 8px;
    border-radius: 5px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.pa-copy:hover::after {
    opacity: 1;
}
.pa-copy--copied::after {
    content: attr(data-copy-done);
    background: #1a7f4b;
}

.tab-strip {
    gap: 0;
    border-bottom: 2px solid var(--line);
    margin-bottom: 1.25rem;
}

.tab-strip .tab-link {
    padding: 0.5rem 1rem;
    text-decoration: none;
    margin-bottom: -2px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.tab-strip .tab-link.active {
    border-bottom: 2px solid var(--accent);
}

/* ─── Folder-style (boxed) tab variant ─── */
.tab-strip--panel {
    margin-bottom: 0;
    padding-left: 2px;
}

.tab-strip--panel .tab-link {
    padding: 0.5rem 1.25rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    margin-bottom: -1px;
    opacity: 0.72;
}

.tab-strip--panel .tab-link:hover {
    background: var(--surface);
    opacity: 1;
}

.tab-strip--panel .tab-link.active {
    background: var(--surface);
    border-bottom: 1px solid var(--surface);
    color: var(--accent);
    font-weight: 600;
    opacity: 1;
}

/* Dark mode — abas inativas mais visíveis */
:root[data-theme='dark'] .tab-strip--panel .tab-link {
    background: color-mix(in srgb, var(--line) 55%, var(--surface));
    opacity: 1;
}

:root[data-theme='dark'] .tab-strip--panel .tab-link:hover {
    background: color-mix(in srgb, var(--line) 80%, var(--surface));
}

:root[data-theme='dark'] .tab-strip--panel .tab-link.active {
    background: var(--surface);
    border-bottom: 1px solid var(--surface);
}

.tab-panels {
    border: 1px solid var(--line);
    border-top: none;
    border-radius: 0 4px 4px 4px;
    padding: 1.25rem 1.5rem;
}

/* "Ver dados" dialog (monitor-organizations, monitor-alerts — both pages
   render an identical copy of #pm-org-view-dialog): on a phone the row of 4
   tab buttons is replaced by a single full-width trigger showing the active
   tab, opening a stacked dropdown of the same buttons. Hidden here so
   desktop never sees it; see the @media (max-width: 600px) block near the
   end of this file for the opened-dropdown layout. */
.tab-strip-mobile-select {
    display: none;
}

.tab-strip-mobile-select__trigger {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.tab-strip-mobile-select__chevron {
    margin-left: auto;
    transition: transform 0.15s;
}

.tab-strip-mobile-select__trigger[aria-expanded="true"] .tab-strip-mobile-select__chevron {
    transform: rotate(180deg);
}

/* ── Profile page ── */
.profile-info-strip {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
}

.profile-info-dl {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    margin: 0;
}

.profile-info-dl > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.profile-info-dl dt {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.profile-info-dl dd {
    font-size: 0.9rem;
    margin: 0;
}

.permissions-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-width: 520px;
}

.permissions-list li code {
    display: block;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 0.3rem 0.7rem;
    font-size: 0.85rem;
}


input[type="color"] {
    height: 2.5rem;
    padding: 3px 5px;
    cursor: pointer;
}

.inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.inline-actions form {
    display: inline-flex;
    margin: 0;
}

.list-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.list-heading h2 {
    margin: 0;
}

.list-heading__count {
    margin: 0.35rem 0 0;
    color: var(--muted);
}

.bulk-selection-banner {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 10px;
    padding: 9px 12px;
    margin-bottom: 0.9rem;
}

.actions-menu {
    position: relative;
}

.actions-menu > summary {
    list-style: none;
}

.actions-menu > summary::-webkit-details-marker {
    display: none;
}

.actions-menu__list {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 40;
    min-width: 210px;
    display: grid;
    background: #2f3138;
    border-radius: 10px;
    border: 1px solid #23262d;
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.actions-menu__list.actions-menu__list--floating {
    z-index: 1200;
    overflow: auto;
}

/* SweetAlert2 must always sit above portaled action menus (z-index: 9999) */
.swal2-container {
    z-index: 100000 !important;
}

/* ── SweetAlert2 dark mode ───────────────────────────────────────── */
:root[data-theme='dark'] .swal2-popup {
    background: #1b212b !important;
    color: #e5e7eb !important;
    border: 1px solid #2e3745 !important;
}
:root[data-theme='dark'] .swal2-title {
    color: #e5e7eb !important;
}
:root[data-theme='dark'] .swal2-html-container {
    color: #94a3b8 !important;
}
:root[data-theme='dark'] .swal2-close {
    color: #94a3b8 !important;
}
:root[data-theme='dark'] .swal2-cancel {
    background: #2e3745 !important;
    color: #e5e7eb !important;
    border-color: #2e3745 !important;
}
:root[data-theme='dark'] .swal2-input,
:root[data-theme='dark'] .swal2-textarea,
:root[data-theme='dark'] .swal2-select {
    background: #171d26 !important;
    color: #e5e7eb !important;
    border-color: #2e3745 !important;
}
:root[data-theme='dark'] .swal2-icon {
    border-color: currentColor;
}
:root[data-theme='dark'] .swal2-icon .swal2-icon-content {
    color: inherit;
}

/* Author CSS `display: grid` would override the browser UA rule that hides
   <details> content when closed — make the hiding explicit. */
details.actions-menu:not([open]) > .actions-menu__list {
    display: none !important;
}

/* In table rows, open upward to avoid clipping inside short/scrollable containers */
td .actions-menu > .actions-menu__list {
    top: auto;
    bottom: calc(100% + 6px);
}

.actions-menu__item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: #f8fafc;
    text-align: left;
    padding: 9px 12px;
    cursor: pointer;
    font-size: 0.92rem;
    width: 100%;
}

.actions-menu__item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.actions-menu__item--danger {
    color: #fecaca;
}

a.actions-menu__item {
    text-decoration: none;
}

/* Inline (accordion-style) sub-menu inside an actions-menu list */
.actions-menu--sub > summary {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.4rem;
    list-style: none;
}

.actions-menu--sub > summary::-webkit-details-marker {
    display: none;
}

.actions-menu--sub > .actions-menu__sub-list {
    background: rgba(0, 0, 0, 0.22);
    border-left: 2px solid rgba(255, 255, 255, 0.08);
    padding: 2px 0;
}

.actions-menu--sub:not([open]) > .actions-menu__sub-list {
    display: none !important;
}

.actions-menu--sub > .actions-menu__sub-list .actions-menu__item {
    display: block;
    padding: 8px 12px 8px 26px;
    font-size: 0.88rem;
    white-space: nowrap;
}

.actions-menu__sub-arrow {
    display: inline-block;
    font-size: 0.65rem;
    transition: transform 0.15s ease;
    opacity: 0.7;
    margin-left: auto;
}

.actions-menu--sub[open] > summary .actions-menu__sub-arrow {
    transform: rotate(90deg);
}

.swal-bulk-form {
    text-align: left;
}

.swal-bulk-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 6px;
}

/* ── Ticket comments ─────────────────────────────────────────────── */
.comment--portal {
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    padding: .75rem 1rem;
    font-size: .875rem;
    display: flex;
    gap: .75rem;
    align-items: flex-start;
}
.comment--devops {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: .75rem 1rem;
    font-size: .875rem;
    display: flex;
    gap: .75rem;
    align-items: flex-start;
}
:root[data-theme='dark'] .comment--portal {
    background: #1e2a45;
    border-color: #2e3f6b;
}
:root[data-theme='dark'] .comment--devops {
    background: #2a2210;
    border-color: #4a3a10;
}

.log-detail-pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 50vh;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
    padding: 12px;
    font-size: 0.85rem;
    line-height: 1.45;
}

/* ── Log detail structured fields ───────────────────────────────── */
.log-detail-fields {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.2rem 1rem;
    font-size: 0.875rem;
    margin: 0 0 0.75rem;
    align-items: baseline;
}

.log-detail-fields dt {
    font-weight: 600;
    color: var(--text-muted, #888);
    padding-top: 0.1rem;
}

.log-detail-fields dd {
    margin: 0;
    word-break: break-all;
}

.log-detail-field-pre {
    margin: 0;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-all;
    background: var(--surface-2);
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--line);
}

.log-detail-field-pre--diff {
    line-height: 1.5;
}

.log-diff-old,
.log-diff-new {
    font-weight: 700;
}

.log-diff-old {
    color: #b42318;
}

.log-diff-new {
    color: #067647;
}

:root[data-theme='dark'] .log-diff-old {
    color: #f97066;
}

:root[data-theme='dark'] .log-diff-new {
    color: #6ce9a6;
}

.log-detail-body-section {
    margin-top: 0.75rem;
    border-top: 1px solid var(--line);
    padding-top: 0.75rem;
}

.log-detail-body-header {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #888);
    margin-bottom: 0.5rem;
}

.log-detail-body-frame {
    width: 100%;
    height: 320px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.log-detail-raw {
    margin-top: 0.75rem;
    border-top: 1px solid var(--line);
    padding-top: 0.5rem;
}

.log-detail-raw summary {
    font-size: 0.8rem;
    color: var(--text-muted, #888);
    cursor: pointer;
    user-select: none;
    margin-bottom: 0.4rem;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.log-detail-raw summary::before {
    content: '▶';
    font-size: 0.6rem;
    transition: transform 0.15s;
}

.log-detail-raw[open] summary::before {
    transform: rotate(90deg);
}

.copy-feedback {
    border: 1px solid #86efac;
    background: #f0fdf4;
    color: #166534;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.85rem;
}

.copy-feedback--error {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.ip-link-button {
    background: transparent;
    border: none;
    color: var(--accent);
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-decoration: underline;
    font: inherit;
}

.ip-link-button:hover {
    opacity: 0.85;
}

.heatmap-chart {
    display: grid;
    grid-template-columns: minmax(82px, auto) repeat(24, minmax(30px, 1fr));
    gap: 4px;
    margin-bottom: 1rem;
    overflow-x: auto;
    padding-bottom: 6px;
}

.heatmap-chart__corner,
.heatmap-chart__hour,
.heatmap-chart__day,
.heatmap-chart__cell {
    border: 1px solid var(--line);
    border-radius: 8px;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.76rem;
}

.heatmap-chart__corner,
.heatmap-chart__hour,
.heatmap-chart__day {
    background: var(--surface-2);
    color: var(--muted);
    font-weight: 600;
}

.heatmap-chart__day {
    justify-content: flex-start;
    padding: 0 8px;
}

.heatmap-chart__cell {
    font-weight: 700;
}

.menu-group-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.65);
    padding: 0 10px;
    margin: 14px 0 4px;
}

.menu-item::before {
    content: none;

.menu-item .bi {
    font-size: 1rem;
    flex-shrink: 0;
    opacity: 0.85;
}

.menu-item:hover .bi,
.menu-item--active .bi {
    opacity: 1;
}
}

.menu-item--active {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #ffffff;
    font-weight: 600;
}

/* ── Menu Group Accordion ────────────────────────────────────────── */
.menu-group {
    display: contents;
}

.menu-group summary {
    list-style: none;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    padding: 0 10px;
    margin: 14px 0 4px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
    color: rgba(148, 163, 184, 0.65);
    transition: color 0.2s;
}

.menu-group summary:hover {
    color: rgba(148, 163, 184, 0.85);
}

.menu-group summary::after {
    content: '▼';
    font-size: 0.6rem;
    transition: transform 0.2s;
    transform-origin: center;
}

.menu-group[open] > summary::after {
    transform: rotate(0deg);
}

.menu-group:not([open]) > summary::after {
    transform: rotate(-90deg);
}

/* ── Dark theme accordion ────────────────────────────────────────── */
:root[data-theme='dark'] .menu-group summary {
    color: rgba(148, 163, 184, 0.65);
}

:root[data-theme='dark'] .menu-group summary:hover {
    color: rgba(148, 163, 184, 0.85);
}

/* ── Light theme accordion ────────────────────────────────────────── */
.menu-group summary {
    color: rgba(255, 255, 255, 0.7);
}

.menu-group summary:hover {
    color: #fff;
}

/* ── Content Accordion (e.g. ticket groups) ─────────────────────────── */
.pa-accordion {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.pa-accordion > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1.1rem;
    cursor: pointer;
    user-select: none;
    background: var(--surface-alt, rgba(0,0,0,.025));
    font-weight: 700;
    font-size: .875rem;
    letter-spacing: .01em;
    color: var(--text);
    transition: background .15s;
    border-bottom: 1px solid transparent;
}
.pa-accordion > summary::-webkit-details-marker { display: none; }
.pa-accordion[open] > summary {
    border-bottom-color: var(--border);
}
.pa-accordion > summary:hover {
    background: var(--surface-hover, rgba(0,0,0,.05));
}
.pa-accordion > summary .pa-accordion__chevron {
    margin-left: auto;
    transition: transform .25s;
    opacity: .5;
    font-size: .8rem;
}
.pa-accordion[open] > summary .pa-accordion__chevron {
    transform: rotate(180deg);
}
.pa-accordion__body {
    padding: 1rem 1rem .25rem;
    background: var(--surface-inset, rgba(0,0,0,.012));
}
/* Remove double border where table sits flush */
.pa-accordion__body .pa-table-sticky-head {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}
:root[data-theme='dark'] .pa-accordion > summary {
    background: rgba(255,255,255,.04);
}
:root[data-theme='dark'] .pa-accordion > summary:hover {
    background: rgba(255,255,255,.075);
}
:root[data-theme='dark'] .pa-accordion__body {
    background: rgba(255,255,255,.015);
}

.row-unread {
    background: rgba(59, 130, 246, 0.06);
}

.row-inactive {
    opacity: 0.7;
}

.badge-danger {
    background: #dc2626;
    color: #fff;
}

.text-muted {
    color: var(--muted);
}

.job-runtime-explainer h2,
.section-divider h3,
.panel h4,
.notification-event-card h4,
.builder-card-header h4 {
    margin-top: 0;
}

.job-runtime-grid,
.split-panels,
.notification-targets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.job-runtime-banner {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 12px;
    padding: 12px 14px;
}

.section-divider {
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

.step-list,
.schedule-list,
.notification-group-list,
.notification-rules {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.builder-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
    background: var(--surface-2);
}

.builder-card-header,
.job-builder-actions,
.table-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.builder-card-actions {
    display: flex;
    gap: 8px;
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.choice-grid.stacked,
.choice-grid.compact {
    grid-template-columns: 1fr;
}

.choice-card {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.choice-card span {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.choice-card.readonly {
    opacity: 0.95;
}

.choice-card.compact {
    padding: 8px 10px;
}

.inline-choice {
    align-items: center;
}

.week-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.compact-switch {
    font-size: 0.85rem;
}

.code-editor-shell {
    display: grid;
    grid-template-columns: 48px 1fr;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: #0f172a;
}

.code-editor-lines {
    margin: 0;
    padding: 10px 8px;
    background: #111827;
    color: #94a3b8;
    text-align: right;
    font-family: Consolas, "Courier New", monospace;
    line-height: 1.5;
    white-space: pre;
    user-select: none;
    overflow: hidden;
}

.code-editor-shell textarea {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #e2e8f0;
    font-family: Consolas, "Courier New", monospace;
    line-height: 1.5;
    min-height: 220px;
    resize: vertical;
}

/* ── SQL syntax highlight overlay ─────────────────────────────────── */
.code-hl-wrap {
    position: relative;
    overflow: hidden;
    display: grid; /* fills the 1fr column of code-editor-shell */
}

.code-hl-pre {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 10px 12px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 1rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-all;
    overflow-wrap: break-word;
    color: #e2e8f0;
    background: transparent;
    pointer-events: none;
    border: 0;
    z-index: 0;
    overflow: hidden;
    tab-size: 4;
}

.code-hl-wrap textarea {
    position: relative;
    z-index: 1;
    color: transparent;
    caret-color: #e2e8f0;
    background: transparent;
    padding: 10px 12px;
    font-size: 1rem;
    tab-size: 4;
    white-space: pre-wrap;
    word-break: break-all;
    overflow-wrap: break-word;
}

/* SQL token colors */
.sql-kw  { color: #7dd3fc; font-weight: 600; }
.sql-str { color: #86efac; }
.sql-cmt { color: #64748b; font-style: italic; }
.sql-num { color: #fca5a5; }

/* ── Job form tabs — sticky strip inside scrolling dialog ─────────── */
#job-form-dialog .job-form-tabs {
    position: sticky;
    top: -14px; /* counteract modal-form__body padding-top */
    z-index: 10;
    background: var(--surface);
    padding-top: 4px;
    margin-bottom: 0;
}

#job-form-dialog .tab-panels {
    border-radius: 0 4px 4px 4px;
}

#job-form-dialog .modal-form__body {
    padding-top: 14px;
}

/* ── pa-combobox — searchable select replacement ─────────────────── */
.pa-combobox {
    position: relative;
}

.pa-combobox__control {
    position: relative;
    display: flex;
    align-items: center;
}

.pa-combobox__search {
    width: 100%;
    padding-right: 2.2rem;
    cursor: pointer;
}

.pa-combobox__arrow {
    position: absolute;
    right: 0.65rem;
    pointer-events: none;
    font-size: 0.75rem;
    color: var(--muted);
    transition: transform 0.15s;
}

.pa-combobox[data-open] .pa-combobox__arrow {
    transform: rotate(180deg);
}

/* Dropdown is portalled to <dialog> — position:fixed set via JS */
.pa-combobox__dropdown {
    position: fixed;
    z-index: 10010; /* above dialog backdrop + swal */
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    max-height: 220px;
    overflow-y: auto;
    padding: 4px 0;
    list-style: none;
    margin: 0;
}

:root[data-theme='dark'] .pa-combobox__dropdown {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.pa-combobox__option {
    padding: 8px 14px;
    cursor: pointer;
    font-size: 0.92rem;
    border-radius: 6px;
    margin: 1px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pa-combobox__option:hover,
.pa-combobox__option[data-focused] {
    background: var(--surface-2);
}

.pa-combobox__option[data-selected] {
    color: var(--accent);
    font-weight: 600;
}

.pa-combobox__no-results {
    padding: 8px 14px;
    color: var(--muted);
    font-size: 0.88rem;
    font-style: italic;
    list-style: none;
}

/* goto-step wrapper sits in the form-grid like a label */
.step-goto-wrap {
    display: flex;
    flex-direction: column;
}

.step-goto-wrap label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Schedule conditional section wrappers — transparent to the grid */
.sched-section {
    display: contents;
}

.sched-section[hidden] {
    display: none !important;
}

/* ── Specific-times tag input ─────────────────────────────────────── */
.sched-tag-field {
    margin-bottom: 0.25rem;
}

.sched-tag-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 2.5rem;
    padding: 6px 10px;
    border: 1px solid var(--input-border, #d1d5db);
    border-radius: 6px;
    background: var(--surface);
    cursor: text;
    margin-top: 4px;
}

.sched-tag-list {
    display: contents;
}

.sched-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--accent);
    color: #fff;
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: 500;
    user-select: none;
}

.sched-tag-remove {
    border: none;
    background: none;
    color: inherit;
    padding: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sched-tag-remove:hover {
    opacity: 1;
}

.sched-tag-entry {
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0;
    background: transparent;
    width: 5rem;
    min-width: 2.5rem;
    font: inherit;
    font-size: 0.875rem;
    color: var(--text);
    -moz-appearance: textfield;
}

.sched-tag-entry::-webkit-outer-spin-button,
.sched-tag-entry::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sched-times-preview {
    font-size: 0.78rem;
    color: var(--muted);
    margin: 0.35rem 0 0;
    word-break: break-all;
    line-height: 1.5;
}

/* Weekday checkbox row */
.weekdays-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.weekday-check {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.weekday-check input[type="checkbox"] {
    margin: 0;
    width: 1.1rem;
    height: 1.1rem;
}

.weekday-check span {
    font-size: 0.75rem;
    color: var(--muted);
    user-select: none;
}

/* Linked-schedule combobox bar */
.sched-link-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.sched-link-bar .pa-combobox {
    flex: 1;
    min-width: 0;
}

.linked-schedules-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.linked-sched-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
    padding: 3px 10px 3px 12px;
    font-size: 0.82rem;
    font-weight: 500;
}

.linked-sched-remove {
    background: none;
    border: none;
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
}

.linked-sched-remove:hover {
    color: #fff;
}

.sched-option-summary {
    display: block;
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 2px;
}

/* Step card accordion */
.step-card-header {
    cursor: pointer;
    user-select: none;
}

.step-card-header:hover {
    background: rgba(0, 0, 0, 0.025);
    border-radius: 8px;
}

:root[data-theme='dark'] .step-card-header:hover {
    background: rgba(255, 255, 255, 0.04);
}

.step-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.step-header-left h4 {
    margin: 0;
}

.step-collapse-icon {
    font-size: 0.8rem;
    color: var(--muted);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.step-card:not([data-collapsed]) .step-collapse-icon,
.schedule-card:not([data-collapsed]) .step-collapse-icon {
    transform: rotate(90deg);
}

.step-card[data-collapsed] .step-card-body,
.schedule-card[data-collapsed] .schedule-card-body {
    display: none;
}

.notifications-layout {
    align-items: start;
}

.notification-event-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    background: var(--surface);
}

.subsection-title {
    margin-top: 18px;
}

.panel {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
    background: var(--surface);
}

@media (max-width: 980px) {
    :root {
        --app-shell-sidebar-width: 0px;
    }

    .app-shell {
        grid-template-columns: 1fr;
    }

    /* Off-canvas mobile navigation drawer: the sidebar leaves normal grid flow
       and becomes a fixed, slide-in panel instead of stacking above the page
       content (which is what `position: relative; height: auto` used to do —
       the whole menu occupied the first screenful before any content). Opened
       and closed via the hamburger in the topbar (`.mobile-nav-toggle`), which
       only becomes visible at this breakpoint. Desktop (> 980px) is completely
       unaffected — the sidebar there keeps its original grid-column layout. */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: min(280px, 85vw);
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    .app-shell--nav-open .sidebar {
        transform: translateX(0);
        box-shadow: 8px 0 32px rgba(0, 0, 0, 0.28);
    }

    .mobile-nav-toggle {
        display: inline-flex;
    }

    .mobile-nav-backdrop:not([hidden]) {
        display: block;
    }

    /* The desktop collapse state is meaningless once the sidebar is a drawer:
       a 64px icon rail sliding in from the left is not a useful phone menu,
       and the collapsed rules hide the item labels. Neutralised here so the
       drawer always opens as the full labelled menu, whatever the persisted
       desktop preference is. */
    .app-shell.sidebar-collapsed .sidebar {
        width: min(280px, 85vw);
        padding: 20px 14px;
    }

    .app-shell.sidebar-collapsed .menu-item {
        justify-content: flex-start;
        padding: 9px 12px;
    }

    .app-shell.sidebar-collapsed .menu-item__label,
    .app-shell.sidebar-collapsed .brand-text,
    .app-shell.sidebar-collapsed .menu-group > summary,
    .app-shell.sidebar-collapsed .sidebar-footer .btn-outline .btn-label {
        display: revert;
    }

    .grid.kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .install-topbar {
        display: flex;
        flex-direction: column;
    }

    .install-topbar-meta,
    .install-topbar-actions {
        justify-content: flex-start;
    }

    .job-runtime-grid,
    .split-panels,
    .notification-targets,
    .choice-grid,
    .week-grid {
        grid-template-columns: 1fr;
    }

    .install-shell {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .install-wizard-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .install-mode-grid,
    .install-review-grid {
        grid-template-columns: 1fr;
    }

    .multi-email__entry {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 640px) {
    .content {
        padding: 12px;
    }

    /* Every "Auditoria Interna" listing page (audit, email/application logs,
       access-logs, request-logs, query-logs) shares this same header
       component: a title+subtitle div next to an .export-actions (CSV/JSON)
       button group. Wrapping here forces the title onto its own full-width
       line so the buttons drop below the subtitle instead of squeezing next
       to it, then stretches them into a full-width, evenly-split row. */
    .filter-shell__header {
        flex-wrap: wrap;
    }

    .filter-shell__header > div:first-child {
        flex: 1 1 100%;
    }

    .filter-shell__header .export-actions {
        width: 100%;
    }

    .filter-shell__header .export-actions > * {
        flex: 1 1 auto;
        text-align: center;
    }

    /* /support's organization filter: the fixed 280px minimum column left
       too little room for the "Filtrar" button next to it on a phone. */
    .support-filter-form {
        grid-template-columns: 1fr;
    }

    .topbar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 14px;
        /* Keeps the topbar (and the kebab trigger) visible while the page
           content scrolls underneath. Also the positioning context for the
           dropdown below — sticky establishes one just like relative does. */
        position: sticky;
        top: 0;
        z-index: 500;
    }

    /* Was `> div:first-child`, which stopped matching once the mobile-nav
       hamburger became the topbar's first child. */
    .topbar > div.topbar-heading {
        flex: 1 1 100%;
        min-width: 0;
    }

    .topbar-kebab {
        display: inline-flex;
    }

    /* order:-2 (less than the kebab-group's order:-1 below) keeps the
       hamburger visually first — without it, order:-1 alone would tie the
       group's margin-left:auto to being the line's FIRST item instead of
       its last, and auto-margin absorbs free space before the item it's
       set on, so it would shove the group (and the hamburger after it)
       both flush right instead of spreading them across the row. */
    .mobile-nav-toggle {
        order: -2;
    }

    /* The wrapper (not the button) carries the positioning: order:-1 pulls
       it before .topbar-heading (flex:1 1 100%, forces its own line) so it
       shares the hamburger's row instead of wrapping onto its own;
       margin-left:auto then pushes it to that row's right edge;
       position:relative makes it the anchor for .topbar-actions below, so
       the dropdown opens flush under the actual button regardless of the
       topbar's own padding (previously anchored to .topbar itself via a
       fixed `right: 14px`, which drifted from the button's real position on
       pages with a breadcrumb or a longer title). */
    .topbar-kebab-group {
        order: -1;
        margin-left: auto;
        position: relative;
    }

    /* Collapsed by default; .topbar-actions--open (toggled by the inline
       script in header.php) reveals it as a dropdown anchored under the
       kebab button. Never touches display outside this media query, so the
       always-visible desktop icon row is untouched. */
    .topbar-actions {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
        padding: 6px;
        min-width: 220px;
        z-index: 501;
    }

    .topbar-actions.topbar-actions--open {
        display: flex;
    }

    .topbar-actions > * {
        width: 100%;
    }

    /* Every action gets its icon-only control turned into a full-width
       icon + label row. The label itself is generated content (::after)
       so the click target keeps being the real control (button/summary),
       not a decorative wrapper — the row's whole width is clickable. */
    .topbar-actions [data-mobile-label] {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.65rem;
        width: 100%;
        height: auto;
        padding: 0.55rem 0.7rem;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: var(--text);
        cursor: pointer;
    }

    .topbar-actions [data-mobile-label]:hover {
        background: var(--surface-2);
    }

    .topbar-actions [data-mobile-label]::after {
        content: attr(data-mobile-label);
        font-size: 0.86rem;
        font-weight: 500;
        color: var(--text);
        white-space: nowrap;
    }

    .topbar-actions .topbar-user {
        padding: 0.55rem 0.7rem;
        border-radius: 8px;
        background: transparent;
        border: none;
    }

    .topbar-actions .topbar-user__name {
        display: inline;
        max-width: none;
    }

    .grid.kpis,
    .pm-dashboard-trend-grid,
    .pm-dashboard-split-grid {
        grid-template-columns: 1fr;
    }

    .install-topbar,
    .help-dialog__header {
        flex-direction: column;
    }

    .install-topbar {
        display: flex;
    }

    .install-topbar-meta,
    .install-topbar-actions {
        justify-content: flex-start;
    }

    .install-page {
        padding: 12px;
    }

    .install-page.install-page--client {
        padding: 12px;
    }

    .login-card.install-card {
        width: 100%;
        margin: 0;
        max-width: 100%;
        padding: 14px;
    }

    .install-hero {
        padding: 18px;
    }

    .install-wizard-steps {
        grid-template-columns: 1fr;
    }
}

/* ── Email validation ──────────────────────────────────────────────────── */
.pa-field-error {
    display: none;
    font-size: 0.78rem;
    color: #dc3545;
    margin-top: 4px;
    line-height: 1.3;
}

.pa-field-error.is-visible {
    display: block;
}

input.pa-input-invalid {
    border-color: #dc3545 !important;
    outline-color: #dc3545;
}

:root[data-theme='dark'] .pa-field-error {
    color: #ff6b6b;
}

:root[data-theme='dark'] input.pa-input-invalid {
    border-color: #ff6b6b !important;
    outline-color: #ff6b6b;
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    border-radius: 6px;
    font-size: 0.875rem;
    text-decoration: none;
    color: var(--text);
    border: 1px solid var(--line);
    background: var(--surface-2);
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.pagination a:hover {
    background: var(--surface);
    border-color: var(--accent);
    color: var(--accent);
}

.pagination a.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 600;
    pointer-events: none;
}

.pagination span.pagination__ellipsis {
    border: none;
    background: none;
    color: var(--muted);
    pointer-events: none;
}

.pagination a.pagination__nav {
    font-size: 1rem;
    font-weight: 500;
}

/* ─── Home portal ────────────────────────────────────────────────────────── */
.home-portal {
    max-width: 1280px;
}

.home-portal__header {
    margin-bottom: 1.5rem;
}

.home-portal__greeting {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0;
}

.home-portal__section-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin: 1.75rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--line);
}

.home-portal__section-title:first-of-type {
    margin-top: 1.25rem;
}

.home-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1rem;
}

.home-cards[hidden] {
    display: none !important;
}

.home-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem 1.25rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.home-card:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    color: inherit;
}

.home-card__icon {
    font-size: 2rem;
    line-height: 1;
    color: var(--accent);
    margin-bottom: 0.25rem;
}

.home-card__title {
    font-size: 0.95rem;
    font-weight: 600;
    display: block;
}

.home-card__desc {
    font-size: 0.78rem;
    color: var(--muted);
    display: block;
    line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════════════════
   PHONE LAYOUT
   Ported from power-keys (.github/instructions/mobile-layout.instructions.md).
   Everything below is inside a max-width media query or is an inert opt-in
   class, so the desktop layout is untouched.

   Two ordering facts drive how these are written:
   - Each page's <style> loads AFTER app.css (layouts/header.php), so a page
     rule of equal-or-higher specificity beats these. The #id dialog rules in
     monitor-organizations/index.php and monitor-alerts/index.php are gated in
     @media (min-width: 601px) for that reason.
   - A markup style="" outranks every stylesheet rule here. If a phone rule
     must change a property, that property cannot live in an inline style —
     extract it to a class first (see .modal-dialog--lg / --wide).
   ══════════════════════════════════════════════════════════════════════════ */

/* Wrapper class replacing inline style="overflow-x:auto" on table wrappers.
   Needed as a class (not inline) so .pa-mobile-cards below can switch the
   overflow off in card mode. Same behaviour as the inline style on desktop. */
.pa-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Import Entra ID modal's candidate list. Class instead of the inline style
   it replaces so the @media (max-width: 768px) rule below can drop the cap —
   nested touch-scroll regions on a phone are unreliable (the outer, already-
   scrollable modal body tends to capture the gesture before it reaches this
   inner box), so on mobile this list flows naturally and the single outer
   .modal-form__body scrollbar handles all of it instead. */
.import-entra-list {
    overflow-y: auto;
    max-height: 52vh;
}

@media (max-width: 768px) {
    .import-entra-list {
        overflow-y: visible;
        max-height: none;
    }
}

/* ── Mobile: opt-in "listing table becomes stacked cards" ──────────────────
   A wide listing table on a phone is one horizontally-scrolling strip. Adding
   .pa-mobile-cards to the table's WRAPPER re-lays the rows out as one card per
   record instead, so nothing scrolls sideways.

   Markup contract - all optional, all inert above 768px:
     <div class="pa-table-scroll pa-mobile-cards">
       <table>
         <thead><tr>
           <th data-mobile-label="Selecionar todos">  <- becomes a labelled bar;
           <th>...                                       every other th hidden
         </tr></thead>
         <tbody><tr>
           <td data-cell="select">   <- card header, column 1
           <td data-cell="title">    <- card header, column 2 (the record name)
           <td data-cell="actions">  <- card header, column 3 (actions menu)
           <td data-label="Status">  <- full-width "label / value" line
         </tr></tbody>
   A [data-label] cell with no content hides itself, so optional fields do not
   leave a dangling label. Cells with neither attribute are hidden on mobile,
   which is how a column that only makes sense on a wide screen opts out.

   Rows built client-side must carry the same attributes as the server-rendered
   ones, or their cards render unlabelled after the first AJAX filter/page. */
@media (max-width: 768px) {
    .pa-mobile-cards.pa-table-scroll,
    .pa-mobile-cards table {
        display: block;
        overflow-x: visible;
    }

    .pa-mobile-cards thead,
    .pa-mobile-cards tbody,
    .pa-mobile-cards thead tr,
    .pa-mobile-cards th,
    .pa-mobile-cards td {
        display: block;
    }

    /* Column titles are repeated on every card by td::before below, and the
       per-column filter inputs are unusable at this width. */
    .pa-mobile-cards thead tr.tablesorter-filter-row,
    .pa-mobile-cards thead th:not([data-mobile-label]) {
        display: none;
    }

    /* A header control worth keeping (typically "select all visible") survives
       as a labelled bar above the cards. position:static cancels
       .pa-table-sticky-head, which has nothing left to stick to once the title
       row is gone. */
    .pa-mobile-cards thead th[data-mobile-label] {
        position: static;
        display: flex;
        align-items: center;
        gap: 0.55rem;
        width: auto;
        margin-bottom: 0.85rem;
        padding: 0.65rem 0.85rem;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--surface-2);
        color: var(--muted);
        font-size: 0.82rem;
        font-weight: 600;
        text-align: left;
    }

    .pa-mobile-cards thead th[data-mobile-label]::after {
        content: attr(data-mobile-label);
    }

    .pa-mobile-cards thead th[data-mobile-label] > input[type="checkbox"] {
        flex: 0 0 auto;
        margin: 0;
    }

    /* Opt-in modifier: most .pa-mobile-cards tables hide the per-column
       search row above (the inputs are too narrow to use stacked this way),
       but a long, otherwise-unfilterable list — e.g. the Entra ID import
       preview — needs search more than it needs the header row. Add this
       class alongside .pa-mobile-cards on the wrapper to keep the filter row
       visible, laid out as one full-width labelled input per line instead of
       a cramped row. Needs 3 combined classes (not just !important) to
       out-specificity the display:none two rules above. */
    .pa-mobile-cards.pa-mobile-cards--keep-filters thead tr.tablesorter-filter-row {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.75rem 0.85rem;
        margin-bottom: 0.85rem;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--surface-2);
    }

    .pa-mobile-cards.pa-mobile-cards--keep-filters thead tr.tablesorter-filter-row th,
    .pa-mobile-cards.pa-mobile-cards--keep-filters thead tr.tablesorter-filter-row td {
        display: block;
        width: 100%;
        padding: 0;
    }

    .pa-mobile-cards.pa-mobile-cards--keep-filters thead tr.tablesorter-filter-row [data-mobile-filter-label]::before {
        content: attr(data-mobile-filter-label);
        display: block;
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--muted);
        margin-bottom: 0.25rem;
    }

    .pa-mobile-cards.pa-mobile-cards--keep-filters thead tr.tablesorter-filter-row input.tablesorter-filter,
    .pa-mobile-cards.pa-mobile-cards--keep-filters thead tr.tablesorter-filter-row select.tablesorter-filter {
        width: 100%;
    }

    /* One card per record. */
    .pa-mobile-cards tbody tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 0 0.6rem;
        margin-bottom: 0.85rem;
        padding: 0.75rem 0.9rem;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--surface);
        box-shadow: var(--shadow);
    }

    .pa-mobile-cards tbody tr:last-child {
        margin-bottom: 0;
    }

    /* The row hover tint reads as a stuck "selected" state on touch. */
    .pa-mobile-cards tbody tr:hover {
        background-color: var(--surface);
    }

    .pa-mobile-cards tbody td {
        min-width: 0;
        padding: 0;
        border-bottom: 0;
        font-size: 0.875rem;
    }

    /* Cells the page did not describe carry columns that only make sense on a
       wide screen (spacers, duplicated ids); showing them unlabelled would be
       noise. A [colspan] cell is the exception - that is the "no records"
       empty-state row, which must stay readable. */
    .pa-mobile-cards tbody td:not([data-label]):not([data-cell]):not([colspan]) {
        display: none;
    }

    .pa-mobile-cards tbody td[colspan] {
        grid-column: 1 / -1;
        color: var(--muted);
    }

    /* Card header line: select | title | actions. Placement is explicit rather
       than nth-child because these columns are often rendered conditionally
       (permission-dependent), so indices shift between users. */
    .pa-mobile-cards tbody td[data-cell="select"] {
        grid-column: 1;
        grid-row: 1;
    }

    .pa-mobile-cards tbody td[data-cell="title"] {
        grid-column: 2;
        grid-row: 1;
        color: var(--text);
        font-size: 1rem;
        font-weight: 700;
        overflow-wrap: anywhere;
    }

    .pa-mobile-cards tbody td[data-cell="actions"] {
        grid-column: 3;
        grid-row: 1;
        /* Actions columns are commonly pinned with a width hint so the table
           gives them only what their button needs. As a grid item that hint
           resolves against an auto-sized track and can collapse the cell. In
           card mode the track already shrink-wraps, so drop it and align the
           grid item itself - that survives an inline width the cell may keep. */
        width: auto;
        min-width: 0;
        justify-self: end;
        text-align: right;
    }

    /* Every remaining described cell becomes a full-width label/value line. */
    .pa-mobile-cards tbody td[data-label] {
        display: flex;
        grid-column: 1 / -1;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        margin-top: 0.4rem;
        padding-top: 0.4rem;
        border-top: 1px dashed var(--line);
        overflow-wrap: anywhere;
        /* Wide-table centring (these cells commonly carry
           style="text-align:center") would strand the value mid-cell instead
           of against the right edge of the label/value row. */
        text-align: left;
    }

    .pa-mobile-cards tbody td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--muted);
        font-size: 0.78rem;
        font-weight: 600;
    }

    /* An empty optional value would otherwise render as a lone label. */
    .pa-mobile-cards tbody td[data-label]:empty {
        display: none;
    }

    /* ── One cell into several labelled card lines ─────────────────────────
       Some columns pack two values into a single cell (a person name plus an
       e-mail). As one card line the two run together and wrap badly. Marking
       the cell .pa-card-split and giving each inner part its own [data-label]
       renders them as separate label/value lines instead. */
    .pa-mobile-cards tbody td.pa-card-split[data-label] {
        display: block;
    }

    /* The cell own label would duplicate the first part label. */
    .pa-mobile-cards tbody td.pa-card-split[data-label]::before {
        content: none;
    }

    .pa-mobile-cards tbody td.pa-card-split .pa-card-split__part {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        overflow-wrap: anywhere;
    }

    .pa-mobile-cards tbody td.pa-card-split .pa-card-split__part::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--muted);
        font-size: 0.78rem;
        font-weight: 600;
    }

    /* Same dashed divider the sibling card lines use. */
    .pa-mobile-cards tbody td.pa-card-split .pa-card-split__part + .pa-card-split__part {
        margin-top: 0.4rem;
        padding-top: 0.4rem;
        border-top: 1px dashed var(--line);
    }

    .pa-mobile-cards tbody td.pa-card-split .pa-card-split__muted {
        color: var(--muted);
    }

    /* When a split cell IS the row identifier (no separate [data-cell="title"]
       anywhere in the row), it has to occupy the card header line - otherwise
       the header holds only the actions control, with an empty gap where the
       title belongs. Spanning tracks 1-2 leaves the third for the actions. */
    .pa-mobile-cards tbody tr:not(:has(td[data-cell="title"])) td.pa-card-split[data-label] {
        grid-column: 1 / -2;
        grid-row: 1;
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }
}

/* Desktop rendering of the split parts (replaces an inline
   style="display:block;color:var(--muted)"), kept as classes so the card rules
   above can turn each part into a flex label/value line on phones. */
.pa-card-split__part {
    display: block;
}

.pa-card-split__muted {
    color: var(--muted);
}

/* A secondary line inside a [data-cell="title"] cell (a legal name under a
   trade name). The title cell is font-weight:700 in card mode, which the
   nested line would otherwise inherit. Inert on desktop. */
@media (max-width: 768px) {
    .pa-mobile-cards td[data-cell="title"] .pa-card-subtle {
        font-weight: 400;
    }
}

/* ── Mobile: wide tables scroll instead of squeezing ──────────────────────
   thead/tbody/tr/td keep their default table-* display values, so column
   alignment between header and body is preserved. A table whose wrapper opts
   into .pa-mobile-cards above overrides this back to display:block. */
@media (max-width: 768px) {
    table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Mobile: full-screen <dialog> modals ──────────────────────────────────
   Phones open modals full-screen rather than as a floating 92vw card: at this
   width the surrounding sliver of page is useless. .modal-form is already a
   flex column whose __body scrolls and whose __actions is flex:0 0 auto, so a
   fixed footer needs no structural change — only the two competing height caps
   removed (see the .modal-form rule below).

   Listed by ID as well as class because #log-detail-dialog (1,0,0) outranks
   .modal-dialog (0,1,0) regardless of source order — the same reason the page
   <style> rules in monitor-organizations/index.php and monitor-alerts/index.php
   are gated in @media (min-width: 601px).

   .pa-loading-overlay is deliberately excluded: it is a spinner, not a modal. */
@media (max-width: 600px) {
    /* A <dialog> opened with showModal() blocks interaction with the page
       behind it but does NOT stop it scrolling. Locking the scroll container
       keeps the page still, and drops the document scrollbar, while a dialog is
       open. Phones only: on desktop the modal is a floating card over a
       still-visible page, where hiding the scrollbar would shift the layout
       underneath. */
    html:has(dialog[open]) {
        overflow: hidden;
    }

    .modal-dialog,
    .modal-dialog--xl,
    .modal-dialog--lg,
    .modal-dialog--wide,
    #log-detail-dialog {
        /* NOT 100vw: that unit measures the viewport INCLUDING a classic
           scrollbar, so on platforms that reserve space for one the dialog runs
           ~15px wider than the visible area and its right edge sits under the
           scrollbar. A dialog opened with showModal() computes to
           position:fixed, so a percentage resolves against the viewport MINUS
           the scrollbar, which is exactly the visible width. */
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
    }

    /* Both .modal-dialog and .modal-form carry max-height: 92vh in this
       codebase. Left in place against the 100dvh dialog above, the form stops
       8vh short and leaves a dead band of empty dialog below the footer.
       height:100% then makes the flex column fill the dialog, which is what
       pins .modal-form__actions to the bottom of the viewport. */
    .modal-dialog > .modal-form,
    .modal-dialog--xl > .modal-form,
    .modal-dialog--lg > .modal-form,
    .modal-dialog--wide > .modal-form,
    #log-detail-dialog > .modal-form {
        height: 100%;
        max-height: none;
    }

    /* .modal-form__body is display:grid, whose align-content defaults to
       stretch. Once the dialog fills the phone height, the leftover space is
       distributed INTO the rows instead of staying blank below them — fields
       spread apart and a short warning inflates into a tall block. Applied to
       every modal body rather than per-dialog, so the bug cannot resurface one
       modal at a time. */
    .modal-form__body {
        align-content: start;
    }

    .modal-form__header,
    .modal-form__body,
    .modal-form__actions {
        padding: 14px;
    }

    /* Two buttons side by side rather than shrink-to-fit fragments pushed to
       the right edge; wrap so a third (or a long label) gets its own line. */
    .modal-form__actions {
        flex-wrap: wrap;
    }

    .modal-form__actions .btn-primary,
    .modal-form__actions .btn-secondary {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* Tab strips inside a builder dialog overflow rather than compress each
         label to unreadability. */
    .tab-strip {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Opt-in modifier: add alongside .tab-strip.tab-strip--panel on any
       tab-strip's wrapper (the "Ver dados" dialog, organizations/settings)
       to swap its row of tab-link buttons for the dropdown trigger above.
       Class-based (not #id) so any page can opt in, not just the one this
       was first built for. */
    .tab-strip-mobile-select {
        display: block;
        margin-bottom: 0.75rem;
    }

    .tab-strip--mobile-dropdown {
        display: none;
        flex-direction: column;
        gap: 2px;
        overflow: visible;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 4px;
        margin-bottom: 0.75rem;
        background: var(--surface);
    }

    .tab-strip--mobile-dropdown.is-open {
        display: flex;
    }

    .tab-strip--mobile-dropdown .tab-link {
        width: 100%;
        text-align: left;
        border-radius: 8px;
        margin-bottom: 0;
    }

    .tab-strip--mobile-dropdown .tab-link.active {
        border-bottom: none;
        background: var(--surface-2);
    }

    /* IP details dialog: stack the map under the field list instead of
       beside it (there's no room for a side-by-side map on a phone), and
       swap the header's "Copiar JSON" button for the full-width one under
       the subtitle. #3-selector specificity needed to beat
       `.modal-form [data-ip-detail-copy] { width: 130px }` above. */
    .ip-detail-layout {
        flex-direction: column;
    }

    .ip-detail-fields {
        width: 100%;
    }

    /* The plain 2-class selectors cover dialogs whose copy button has no
       [data-*-copy] attribute (e.g. query-logs, which binds its own button
       by a page-local class instead) — the 3-class ones are only needed to
       out-specificity `.modal-form [data-ip-detail-copy] { width: 130px }`
       above for the dialogs that DO carry that attribute. */
    .modal-form [data-ip-detail-copy].modal-header-action--desktop,
    .modal-form [data-log-detail-copy].modal-header-action--desktop,
    .modal-form .modal-header-action--desktop {
        display: none;
    }

    .modal-form [data-ip-detail-copy].modal-header-action--mobile,
    .modal-form [data-log-detail-copy].modal-header-action--mobile,
    .modal-form .modal-header-action--mobile {
        display: block;
        width: 100%;
        margin: 0.5rem 0 0;
    }

    /* Without this, the title block stays sized to its text's shrink-to-fit
       width (justify-content:space-between doesn't grow it), so the mobile
       copy button's width:100% above ends up 100% of that narrow box
       instead of the header's full width. Opt-in class (not a bare
       .modal-form__header selector) so this only touches the dialogs that
       actually carry a duplicated mobile action button. */
    .modal-header-title-grow {
        flex: 1 1 auto;
    }
}