/*!
 * Whitebox fresh look (Oct 2026)
 * Loaded after whitebox.css (theme files load alphabetically). Visual only: colours, type, spacing.
 * Brand: pcm green (Pantone 375 C, as on pcm.pt) and charcoal; see docs/specs/2026-10-09-fresh-look-design.md.
 * Rollback: delete this file.
 */

:root {
    --wb-green: #8ed200;
    --wb-green-hover: #7dba00;
    --wb-green-text: #4d7a00;
    --wb-green-soft: #f1f9e0;
    --wb-on-green: #1d2400;
    --wb-selected: #4d7a00;
    --wb-charcoal: #353539;
    --wb-charcoal-dark: #2a2a2e;
    --wb-charcoal-line: #46464b;
    --wb-text: #2f3134;
    --wb-muted: #6b6f76;
    --wb-page: #f4f5f7;
    --wb-surface: #fff;
    --wb-border: #dfe2e6;
    --wb-border-strong: #c9cdd2;
    --wb-danger: #c9302c;
    --wb-radius: 4px;
    --wb-radius-lg: 6px;
    --wb-focus: 0 0 0 3px rgba(142, 210, 0, .35);
    --wb-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);
    --wb-font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Type and page ---------- */

body {
    font-family: var(--wb-font);
    color: var(--wb-text);
    background-color: var(--wb-page);
    -webkit-font-smoothing: antialiased;
}

input, button, select, textarea,
.popover, .tooltip {
    font-family: inherit;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--wb-font);
    font-weight: 600;
    color: var(--wb-text);
}

a {
    color: var(--wb-green-text);
}

a:hover, a:focus {
    color: var(--wb-green-hover);
}

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

/* ---------- Header ---------- */

.navbar-top,
.navbar-top-simple {
    background-color: var(--wb-charcoal);
    background-image: none;
    border-bottom: 1px solid var(--wb-green);
    box-shadow: inset 0 -2px 0 var(--wb-green);
}

.navbar-brand,
.navbar-top-simple .navbar-brand {
    color: #fff;
    font-weight: 600;
    letter-spacing: .2px;
    text-shadow: none !important;
}

.navbar-brand:hover,
.navbar-brand:focus {
    color: var(--wb-green);
}

.navbar-top .btn {
    text-shadow: none;
    box-shadow: none;
}

.navbar-top .btn-default {
    color: #fff;
    background-color: transparent;
    background-image: none;
    border-color: rgba(255, 255, 255, .35);
}

.navbar-top .btn-default:hover,
.navbar-top .btn-default:focus {
    color: #fff;
    background-color: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .6);
}

.navbar-top .btn-danger {
    color: #fff;
    background-color: transparent;
    background-image: none;
    border-color: rgba(255, 255, 255, .35);
}

.navbar-top .btn-danger:hover,
.navbar-top .btn-danger:focus {
    color: #fff;
    background-color: var(--wb-danger);
    border-color: var(--wb-danger);
}

/* ---------- Sidebar menu ---------- */

.sidebar {
    background: var(--wb-surface);
    border-top: 0;
}

@media screen and (min-width: 768px) {
    .sidebar:before {
        background: var(--wb-surface);
        border-right: 1px solid var(--wb-border);
    }
}

.sidebar .nav-menu > li > a {
    color: #3a3d42;
    font-weight: 500;
    border-left: 3px solid transparent;
}

.sidebar .nav-menu > li > a > i {
    width: 22px;
    margin-right: 4px;
    text-align: center;
    color: var(--wb-green-text);
}

.sidebar .nav-menu > li > a:hover,
.sidebar .nav-menu > li > a:focus {
    background-color: #f3f5f7 !important;
    color: var(--wb-text);
}

.sidebar .nav-menu > li > a.active,
.sidebar .nav-menu > li > a:active,
.sidebar .nav-menu > li > a[aria-expanded="true"] {
    background-color: var(--wb-green-soft) !important;
    border-left-color: var(--wb-green);
    color: var(--wb-text);
    font-weight: 600;
}

.sidebar .nav-submenu {
    background-color: #fafbfc;
    border-top: 1px solid #eef0f2;
    border-bottom: 1px solid #eef0f2;
    box-shadow: none;
}

.sidebar .nav-submenu > li > a {
    padding-left: 44px;
    color: #4a4e55;
}

.sidebar .nav-submenu > li > a.active,
.sidebar .nav-submenu > li > a:active,
.sidebar .nav-submenu > li > a:hover,
.sidebar .nav-submenu > li > a:focus,
.sidebar .nav-submenu > li.open > a,
.sidebar .nav-submenu > li.open > a.active,
.sidebar .nav-submenu > li.open > a:active,
.sidebar .nav-submenu > li.open > a:hover,
.sidebar .nav-submenu > li.open > a:focus {
    color: var(--wb-green-text);
    background-color: var(--wb-green-soft);
}

.sidebar .nav-submenu > li > a.active i,
.sidebar .nav-submenu > li > a:active i,
.sidebar .nav-submenu > li > a:hover i,
.sidebar .nav-submenu > li > a:focus i {
    color: var(--wb-green-text);
}

/* Top-level menu icons. Every entry renders glyphicon-folder-close; the ids are the fixed top-level
   Menus.nodeId values loaded at sign-in (UserSessionBuilder), so each gets an icon that says what it is. */
#menu-001 > a > i:before { content: "\e021"; } /* Home: home */
#menu-002 > a > i:before { content: "\e008"; } /* Collaborator: user */
#menu-003 > a > i:before { content: "\e105"; } /* Supervisor: eye-open */
#menu-004 > a > i:before { content: "\e062"; } /* Field Interventions: map-marker */
#menu-005 > a > i:before { content: "\e185"; } /* Reports: stats */
#menu-006 > a > i:before { content: "\e137"; } /* Ticket Control: tasks */
#menu-007 > a > i:before { content: "\e032"; } /* Profile: list-alt */
#menu-009 > a > i:before { content: "\e111"; } /* Chat: comment */
#menu-010 > a > i:before { content: "\e171"; } /* Envios: send */
#menu-013 > a > i:before { content: "\e125"; } /* NPS: thumbs-up */
#menu-018 > a > i:before { content: "\e139"; } /* PCM: briefcase */
#menu-033 > a > i:before { content: "\e116"; } /* Logistics: shopping-cart */
#menu-039 > a > i:before { content: "\e141"; } /* Dashboards: dashboard */
#menu-041 > a > i:before { content: "\e018"; } /* Monitoring management: signal */
#menu-042 > a > i:before { content: "\e136"; } /* Developer: wrench */
#menu-043 > a > i:before { content: "\e019"; } /* Management: cog */
#menu-044 > a > i:before { content: "\e182"; } /* Phoenix: earphone */
#menu-045 > a > i:before { content: "\e210"; } /* Painel: equalizer */

/* ---------- Breadcrumbs and footer ---------- */

.breadcrumb {
    background-color: var(--wb-surface);
    border-bottom-color: var(--wb-border);
    color: var(--wb-muted);
}

footer {
    background: var(--wb-surface);
    border-top: 1px solid var(--wb-border);
    color: var(--wb-muted);
}

footer a {
    color: var(--wb-green-text);
}

/* ---------- Style picker button (the light, whitebox and dark styles are in whitebox.themes.css) ---------- */

.wb-theme-toggle {
    padding-left: 9px;
    padding-right: 9px;
}

.breadcrumb > .active {
    color: var(--wb-text);
    font-weight: 600;
}

/* ---------- Panels, wells, modals ---------- */

.panel {
    border-color: var(--wb-border);
    border-radius: var(--wb-radius-lg);
    box-shadow: var(--wb-shadow);
}

.panel > .panel-heading {
    border-top-left-radius: calc(var(--wb-radius-lg) - 1px);
    border-top-right-radius: calc(var(--wb-radius-lg) - 1px);
}

.panel-default > .panel-heading {
    color: var(--wb-text);
    background-color: var(--wb-surface);
    border-color: var(--wb-border);
}

.panel-default > .panel-heading .panel-title {
    font-weight: 600;
}

.panel-footer {
    background-color: #fafbfc;
    border-top-color: var(--wb-border);
}

.well {
    background-color: #fafbfc;
    border-color: var(--wb-border);
    border-radius: var(--wb-radius-lg);
    box-shadow: none;
}

.modal-content {
    border: 0;
    border-radius: var(--wb-radius-lg);
    box-shadow: 0 12px 32px rgba(16, 24, 40, .2);
}

.modal-header {
    border-bottom-color: var(--wb-border);
}

.modal-header .modal-title {
    font-weight: 600;
}

.modal-footer {
    border-top-color: var(--wb-border);
}

/* ---------- Buttons ---------- */

.btn {
    border-radius: var(--wb-radius);
    text-shadow: none;
    background-image: none;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn:focus,
.btn.focus,
.btn:active:focus {
    outline: 0;
    box-shadow: var(--wb-focus);
}

/* The ring is for keyboard users; a mouse click does not leave it behind. */
.btn:focus:not(:focus-visible) {
    box-shadow: none;
}

.btn-default {
    color: var(--wb-text);
    background-color: var(--wb-surface);
    border-color: var(--wb-border-strong);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active {
    color: var(--wb-text);
    background-color: #f0f2f4;
    border-color: #b9bec4;
}

.btn-primary,
.btn-primary:disabled,
.btn-primary[disabled] {
    color: var(--wb-on-green);
    background-color: var(--wb-green);
    border-color: var(--wb-green-hover);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    color: var(--wb-on-green);
    background-color: var(--wb-green-hover);
    border-color: #6ea500;
}

.btn-success,
.btn-success:disabled,
.btn-success[disabled] {
    color: #fff;
    background-color: #3f9142;
    border-color: #37803a;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
    color: #fff;
    background-color: #37803a;
    border-color: #2f6e32;
}

.btn-info,
.btn-info:disabled,
.btn-info[disabled] {
    color: #fff;
    background-color: #2f86b6;
    border-color: #2a77a2;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active {
    color: #fff;
    background-color: #2a77a2;
    border-color: #24678c;
}

.btn-warning,
.btn-warning:disabled,
.btn-warning[disabled] {
    color: #2f2100;
    background-color: #f0ad4e;
    border-color: #e39d3a;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active {
    color: #2f2100;
    background-color: #e39d3a;
    border-color: #d58c26;
}

.btn-danger,
.btn-danger:disabled,
.btn-danger[disabled] {
    color: #fff;
    background-color: var(--wb-danger);
    border-color: #b52b27;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
    color: #fff;
    background-color: #b52b27;
    border-color: #9e2522;
}

.btn-link {
    color: var(--wb-green-text);
}

/* ---------- Forms ---------- */

.form-control {
    border-color: var(--wb-border-strong);
    border-radius: var(--wb-radius);
    box-shadow: none;
    color: var(--wb-text);
}

.form-control:focus {
    border-color: var(--wb-green-hover);
    box-shadow: var(--wb-focus);
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: #f3f4f6;
}

.input-group-addon {
    background-color: #f3f4f6;
    border-color: var(--wb-border-strong);
    color: var(--wb-muted);
}

label {
    font-weight: 600;
}

/* ---------- Tables ---------- */

.table > thead > tr > th,
.table > thead > tr > td,
.table > tbody > tr > th {
    background-color: var(--wb-charcoal) !important;
    border-color: var(--wb-charcoal);
    font-weight: 600;
}

.table > tbody > tr > td {
    border-top-color: #eceef1;
}

.table-hover > tbody > tr:hover > td {
    background-color: var(--wb-green-soft);
}

/* ---------- Tabs, pills, pagination, list groups ---------- */

.nav-tabs {
    border-bottom-color: var(--wb-border);
}

.nav-tabs > li > a {
    color: var(--wb-muted);
    border-radius: var(--wb-radius) var(--wb-radius) 0 0;
}

.nav-tabs > li > a:hover {
    color: var(--wb-text);
    background-color: #eef0f2;
    border-color: transparent;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--wb-text);
    font-weight: 600;
    border-color: var(--wb-border) var(--wb-border) transparent;
    box-shadow: inset 0 3px 0 var(--wb-green);
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    color: #fff;
    background-color: var(--wb-selected);
}

.pagination > li > a,
.pagination > li > span {
    color: var(--wb-green-text);
    border-color: var(--wb-border);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    color: #fff;
    background-color: var(--wb-selected);
    border-color: var(--wb-selected);
}

.list-group-item {
    border-color: var(--wb-border);
}

a.list-group-item.active,
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    color: #fff;
    background-color: var(--wb-selected);
    border-color: var(--wb-selected);
    background-image: none;
}

/* ---------- Alerts, labels, badges ---------- */

.alert {
    border-radius: var(--wb-radius-lg);
    background-image: none;
    box-shadow: none;
    text-shadow: none;
}

.label {
    border-radius: var(--wb-radius);
    font-weight: 600;
}

.label-primary {
    color: var(--wb-on-green);
    background-color: var(--wb-green);
}

.dropdown-menu {
    border-color: var(--wb-border);
    border-radius: var(--wb-radius-lg);
    box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    color: #fff;
    background-color: var(--wb-selected);
    background-image: none;
}

/* ---------- Keyboard focus everywhere ---------- */

a:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--wb-green-hover);
    outline-offset: 2px;
}

/* ---------- Search and filter panels (class wb-filters on the panel, wb-results on the results body) ---------- */

/* Labels above their fields, every filter one equal column (216 px), so fields line up from row to row.
   A filter showing two or three fields side by side spans two or three columns. Fields hidden with
   style="display:none" (shown later by script) do not count, and a filter with nothing visible takes no space.
   Visual only: same controls, ids and order. */
.wb-filters {
    --wb-filter-column: 216px;
    --wb-filter-gap: 16px;
}

.wb-filters .form-inline .form-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 6px;
    vertical-align: top;
    width: var(--wb-filter-column);
    max-width: 100%;
    margin: 0 var(--wb-filter-gap) 12px 0;
}

.wb-filters .form-inline .form-group > label,
.wb-filters .form-inline .form-group > span[for] {
    flex: 0 0 100%;
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--wb-muted);
}

.wb-filters .form-inline .form-group > .form-control,
.wb-filters .form-inline .form-group > .input-group {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}

.wb-filters .form-inline .form-group > .input-group > .form-control {
    width: 100%;
}

.wb-filters .form-inline .form-group:has(> :is(.form-control, .input-group):not([style*="none"]) ~ :is(.form-control, .input-group):not([style*="none"])) {
    width: calc(2 * var(--wb-filter-column) + var(--wb-filter-gap));
}

.wb-filters .form-inline .form-group:has(> :is(.form-control, .input-group):not([style*="none"]) ~ :is(.form-control, .input-group):not([style*="none"]) ~ :is(.form-control, .input-group):not([style*="none"])) {
    width: calc(3 * var(--wb-filter-column) + 2 * var(--wb-filter-gap));
}

.wb-filters .form-inline .form-group:not(:has(> :not([style*="none"]))) {
    display: none;
}

.wb-filters .wb-search-button {
    min-width: 96px;
}

.wb-filters .wb-search-button .glyphicon {
    margin-right: 4px;
}

/* Phones: one full-width filter per row, its fields stacked. */
@media (max-width: 767px) {
    .wb-filters .form-inline .form-group,
    .wb-filters .form-inline .form-group:has(> :is(.form-control, .input-group) ~ :is(.form-control, .input-group)) {
        width: 100% !important; /* beats the two- and three-column rules above */
        margin-right: 0;
    }

    .wb-filters .form-inline .form-group > :is(.form-control, .input-group) {
        flex-basis: 100%;
        margin-bottom: 6px;
    }
}

/* Empty results (before the first search, or nothing found): say what to do. */
.wb-results:not(:has(table td, .panel, li, canvas, img))::before {
    content: 'No results to show. Choose filters and press Search.';
    display: block;
    padding: 24px 0;
    text-align: center;
    color: var(--wb-muted);
}

/* ---------- Login page (Login/Login.aspx links this file directly; it has no master page) ---------- */

.login-form {
    max-width: 420px;
    margin: 10vh auto 40px;
    padding: 28px;
    background: var(--wb-surface);
    border: 0;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 8px 24px rgba(16, 24, 40, .08);
}

/* The 2018 brand manual wants the logo on white. */
.login-form .form-brand {
    margin: -28px -28px 24px;
    padding: 28px 28px 8px;
    background: transparent;
    border-top: 4px solid var(--wb-green);
    border-radius: 10px 10px 0 0;
    text-align: center;
}

.login-form .login-logo {
    display: block;
    height: 44px;
    width: auto;
    margin: 0 auto;
}

.login-form .login-app-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--wb-muted);
}

/* The Whitebox box icon is drawn white for the dark header; inverted it reads on the white card. */
.login-form .login-app-icon {
    width: 24px;
    height: 24px;
    filter: invert(1) brightness(.85);
}

.login-form .input-group {
    margin-bottom: 12px;
}

.login-form .form-control {
    height: 38px;
}

.login-form .btn-primary {
    min-width: 96px;
}

@media (max-width: 480px) {
    .login-form {
        margin: 24px 16px;
        padding: 20px;
    }

    .login-form .form-brand {
        margin: -20px -20px 20px;
        padding: 24px 20px 8px;
    }
}

/* ---------- Table headers stay visible on long lists ---------- */

/* whitebox.css clips the page with overflow: hidden, which stops position: sticky from working.
   overflow: clip clips the same way without that side effect; flow-root keeps the floats contained as before. */
.container-fluid.content {
    overflow: clip;
    display: flow-root;
}

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

/* ---------- jGrowl messages ---------- */

.jGrowl {
    font-family: var(--wb-font);
    font-size: 13px;
}

.jGrowl-notification {
    color: var(--wb-text);
    background-color: var(--wb-surface);
    border: 1px solid var(--wb-border);
    border-left: 4px solid var(--wb-muted);
    border-radius: var(--wb-radius-lg);
    box-shadow: 0 8px 24px rgba(16, 24, 40, .14);
    padding: 12px 14px;
}

.jGrowl-notification.ui-state-success {
    color: var(--wb-text);
    background-color: var(--wb-surface);
    border-color: var(--wb-border);
    border-left-color: var(--wb-green);
}

.jGrowl-notification.ui-state-error {
    color: var(--wb-text);
    background-color: var(--wb-surface);
    border-color: var(--wb-border);
    border-left-color: var(--wb-danger);
}

.jGrowl-notification.ui-state-warning {
    color: var(--wb-text);
    background-color: var(--wb-surface);
    border-color: var(--wb-border);
    border-left-color: #f0ad4e;
}

.jGrowl-notification .jGrowl-close {
    color: var(--wb-muted);
}

/* The style button shows the current style: light = ring, whitebox = ring with a charcoal and a green half, dark = solid disc. */

.wb-style-icon {
    display: block;
    margin: 1px 0;
}

.wb-style-icon-ring {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}

.wb-style-icon-left,
.wb-style-icon-right {
    fill: transparent;
}

html[data-wb-theme="whitebox"] .wb-style-icon-left {
    fill: currentColor;
}

html[data-wb-theme="whitebox"] .wb-style-icon-right {
    fill: var(--wb-green, #8ed200);
}

html[data-wb-theme="dark"] .wb-style-icon-left,
html[data-wb-theme="dark"] .wb-style-icon-right {
    fill: currentColor;
}