/* Dashboard layout - modern, fluid, CSS variables */
:root {
    --dashboard-nav-width: 238px;
    --dashboard-nav-width-compact: 80px;
    --dashboard-transition-duration: 0.3s;
    --dashboard-header-height: 60px;
    --dashboard-nav-bg: #323537;
    --dashboard-header-bg: #2595D2;
    --dashboard-toolbar-bg: #ededed;
    --report-viewer_top_offset: 240px;
}

.dashboard {
    min-height: 100vh;
}

.dashboard-app {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.dashboard-content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* IMPORTANT: in this Syncfusion build the SfSidebar root does NOT receive the
   CssClass ("dashboard-nav"). So we target the sidebar by structure: it is the
   only .e-sidebar that is a direct child of .dashboard.
   position:fixed + top/bottom forces full viewport height; the dock only changes
   WIDTH (238<->80) so fixed positioning does not interfere with it. The inner
   column (logo / menu / footer) then fills the sidebar in one colour: the nav list
   grows (flex:1) and the footer sticks to the bottom (margin-top:auto). */
.dashboard > .e-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background-color: var(--dashboard-nav-bg) !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
    z-index: 1050 !important;
    transition: width var(--dashboard-transition-duration) ease !important;
}

/* Direct targets so the dark background is independent of SfSidebar DOM nesting */
.dashboard-nav-list,
.dashboard-nav-footer {
    background-color: var(--dashboard-nav-bg) !important;
}

/* Compact: dark background on the treeview content */
.dashboard-compact .dashboard-nav-list,
.dashboard-compact .dashboard_sf_treeview,
.dashboard-compact .dashboard_sf_treeview .e-list-item,
.dashboard-compact .dashboard_sf_treeview .e-text-content {
    background-color: var(--dashboard-nav-bg) !important;
}

/* Compact: zero treeview indentation so icons sit inside the dock width */
.dashboard-compact .dashboard_sf_treeview .e-text-content,
.dashboard-compact .dashboard_sf_treeview .e-list-text {
    padding: 0 !important;
    margin: 0 !important;
}

/* Compact: force EXACTLY ONE icon per item. Non-active shows the unselected
   variant; active shows the selected (coloured) variant. !important is required
   because Syncfusion's tree styles otherwise let the selected image render too,
   producing two icons side by side. */
.dashboard-compact .dashboard_sf_treeview .menu-icon-unselected {
    display: inline-block !important;
}

.dashboard-compact .dashboard_sf_treeview .menu-icon-selected {
    display: none !important;
}

.dashboard-compact .dashboard_sf_treeview .active .menu-icon-unselected {
    display: none !important;
}

.dashboard-compact .dashboard_sf_treeview .active .menu-icon-selected {
    display: inline-block !important;
}

/* Syncfusion date/time pickers and dropdown popups above fixed sidebar (1050) and toolbar (1200).
   Keep dialog layers on Syncfusion's own stacking order so modal overlays do not cover their dialogs. */
body .e-popup.e-popup-open:not(.e-dialog):not(.e-dlg-container):not(.e-dlg-wrapper):not(.e-dlg-overlay),
body .e-datepicker.e-popup-open,
body .e-datepicker-popup-modal.e-popup-open,
body .e-daterangepicker.e-popup-open,
body .e-ddl.e-popup.e-popup-open,
body .e-dropdownbase.e-popup.e-popup-open {
    z-index: 12100 !important;
}

/* Syncfusion dialogs: same stacking pattern used by QUser.
   The overlay stays below the dialog, and dropdown/calendar popups keep their higher z-index. */
body .e-dlg-container:has(.e-dialog),
body .e-dlg-wrapper:has(.e-dialog) {
    z-index: 12000 !important;
}

body .e-dlg-container:has(.e-dialog) .e-dlg-overlay,
body .e-dlg-wrapper:has(.e-dialog) .e-dlg-overlay {
    z-index: 1 !important;
}

body .e-dlg-container:has(.e-dialog) .e-dialog,
body .e-dlg-wrapper:has(.e-dialog) .e-dialog {
    z-index: 2 !important;
}

/* Virtual scheduling editor dialog: compact Syncfusion chrome and keep actions close to the form. */
.virtual_schedule_editor_dialog.e-dialog {
    max-height: calc(100vh - 48px) !important;
}

.virtual_schedule_editor_dialog .e-dlg-header-content {
    min-height: 0 !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid #e8edf1 !important;
}

.virtual_schedule_editor_dialog .e-dlg-header {
    width: 100%;
    line-height: 1.2;
    font-size: 13px;
    font-weight: 500;
    color: #323537;
}

.virtual_schedule_editor_dialog .e-dlg-content {
    padding: 16px 14px 8px 14px !important;
    overflow: visible !important;
}

.virtual_schedule_editor_dialog .e-footer-content {
    padding: 10px 14px !important;
    border-top: 1px solid #e8edf1 !important;
}

.virtual_schedule_editor_dialog .portal-modal_body {
    overflow: visible !important;
    padding-right: 0;
}

.virtual_schedule_editor_dialog .portal-modal_actions {
    margin-top: 0;
}

.virtual_schedule_editor_dialog .virtual_schedule_editor .form-section:first-child {
    margin-top: 0;
}

.virtual_schedule_editor_dialog .virtual_schedule_editor .form-section {
    padding: 16px;
    margin-top: 14px;
}

.virtual_schedule_editor_dialog .virtual_schedule_editor .form-section-title {
    margin-bottom: 14px;
}

.virtual_schedule_editor_dialog .virtual_schedule_editor .form-control {
    min-height: 32px;
}

.virtual_schedule_editor_dialog .virtual_schedule_editor .virtual_schedule_comments {
    height: 32px;
    min-height: 32px;
    resize: vertical;
    line-height: 18px;
}

    .dashboard > .e-sidebar::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .dashboard > .e-sidebar::-webkit-scrollbar-track,
    .dashboard > .e-sidebar::-webkit-scrollbar-thumb,
    .dashboard > .e-sidebar::-webkit-scrollbar-button {
        display: none;
    }


.dashboard > .e-sidebar header {
    min-height: var(--dashboard-header-height);
    padding: 8px 27px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--dashboard-header-bg);
    flex-shrink: 0;
}


.dashboard > .e-sidebar a {
    color: #fff;
    text-decoration: none;
}

    .dashboard > .e-sidebar a:hover {
        text-decoration: none;
    }

.brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-open,
.logo-closed {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
}

/* Expanded menu: show full logo only; compact logo hidden by default */
.logo-closed {
    display: none;
}

    .logo-open img,
    .logo-closed img,
    .logo-open svg,
    .logo-closed svg {
        height: 100%;
        width: auto;
    }

.brand-logo:focus,
.brand-logo:active,
.brand-logo:hover {
    color: #dbdbdb;
    text-decoration: none;
}

.dashboard-nav-list {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

/* ── Syncfusion SfTreeView sidebar navigation — full chrome reset ── */

.dashboard_sf_treeview.e-treeview {
    background-color: var(--dashboard-nav-bg);
    border: none;
    padding: 0;
    width: 100%;
    overflow: visible;
    font-family: inherit;
    font-size: inherit;
}

/* Every list item: no Syncfusion background, padding or border — all interaction states */
.dashboard_sf_treeview .e-list-item,
.dashboard_sf_treeview .e-list-item.e-active,
.dashboard_sf_treeview .e-list-item.e-hover,
.dashboard_sf_treeview .e-list-item.e-node-focus,
.dashboard_sf_treeview .e-list-item:focus,
.dashboard_sf_treeview .e-list-item:hover,
.dashboard_sf_treeview .e-list-item:active {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    line-height: normal !important;
    outline: none !important;
    box-shadow: none !important;
    transition: none !important;
    animation: none !important;
}

/* Disable all transitions/ripples on every child element too */
.dashboard_sf_treeview .e-list-item *,
.dashboard_sf_treeview .e-list-item *::before,
.dashboard_sf_treeview .e-list-item *::after {
    transition: none !important;
    animation: none !important;
}

/* The full-row overlay div that Syncfusion uses for the blue selection highlight.
   Hidden unconditionally — active state is rendered by our template classes. */
.dashboard_sf_treeview .e-fullrow,
.dashboard_sf_treeview .e-list-item.e-active > .e-fullrow,
.dashboard_sf_treeview .e-list-item.e-hover > .e-fullrow,
.dashboard_sf_treeview .e-list-item.e-node-focus > .e-fullrow {
    display: none !important;
    background: transparent !important;
    background-color: transparent !important;
    opacity: 0 !important;
}

/* Neutralise EVERY Syncfusion selection/hover/focus paint on the node (covering
   both the .e-active/.e-hover/.e-node-focus classes and the :hover/:focus pseudos,
   on the row, the text-content and the list-text). The active look (white strip +
   dark text) and the subtle hover are rendered only by our own classes. */
.dashboard_sf_treeview .e-list-item .e-text-content,
.dashboard_sf_treeview .e-list-item .e-text-content:hover,
.dashboard_sf_treeview .e-list-item:hover > .e-text-content,
.dashboard_sf_treeview .e-list-item:focus > .e-text-content,
.dashboard_sf_treeview .e-list-item.e-hover > .e-text-content,
.dashboard_sf_treeview .e-list-item.e-active > .e-text-content,
.dashboard_sf_treeview .e-list-item.e-node-focus > .e-text-content,
.dashboard_sf_treeview .e-list-item .e-list-text,
.dashboard_sf_treeview .e-list-item.e-active .e-list-text,
.dashboard_sf_treeview .e-list-item.e-hover .e-list-text {
    background: transparent !important;
    background-color: transparent !important;
}

/* Text-content row: full width, no padding, flex so our template spans correctly */
.dashboard_sf_treeview .e-text-content {
    padding: 0 !important;
    width: 100%;
    display: flex !important;
    align-items: stretch !important;
    overflow: visible !important;
}

/* The span wrapping our NodeTemplate — must fill the row */
.dashboard_sf_treeview .e-list-text {
    padding: 0 !important;
    line-height: normal !important;
    color: #fff !important;
    width: 100%;
    display: block !important;
    overflow: visible !important;
    white-space: normal !important;
}

/* Our template spans take full width inside e-list-text */
.dashboard_sf_treeview .e-list-text > span {
    display: flex;
    width: 100%;
    box-sizing: border-box;
}

/* Hide Syncfusion expand/collapse icons — our ::after arrow handles this */
.dashboard_sf_treeview .e-icons.e-icon-expandable,
.dashboard_sf_treeview .e-icons.e-icon-collapsible,
.dashboard_sf_treeview .e-icon-collapsible,
.dashboard_sf_treeview .e-icon-expandable {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Sub-lists: no padding/margin/indent */
.dashboard_sf_treeview .e-ul {
    padding: 0 !important;
    margin: 0 !important;
}

/* Child items: remove Syncfusion's default left-indent */
.dashboard_sf_treeview .e-ul .e-list-item {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Show down-arrow when parent is expanded (state is on aria-expanded, not a class) */
.dashboard_sf_treeview .e-list-item[aria-expanded="true"] > .e-text-content .dashboard-nav-dropdown-toggle::after {
    background-image: url('/images/svg/arrow_down.svg') !important;
}

/* Dock/compact: sub-lists follow Syncfusion's own expand/collapse state, so that
   clicking a parent icon expands its children inline. We must NOT force-hide them
   (a previous rule did, which made parent clicks do nothing in compact). */

.dashboard-nav-list::-webkit-scrollbar {
    width: 6px;
}

.dashboard-nav-list::-webkit-scrollbar-track {
    background: transparent;
}

.dashboard-nav-list::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.35);
    border-radius: 10px;
}

.dashboard-nav-list::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.55);
}

.dashboard-nav-list::-webkit-scrollbar-button {
    display: none;
}

.dashboard-nav-list::-webkit-scrollbar-button:start:decrement,
.dashboard-nav-list::-webkit-scrollbar-button:end:increment,
.dashboard-nav-list::-webkit-scrollbar-button:vertical:increment,
.dashboard-nav-list::-webkit-scrollbar-button:vertical:decrement {
    display: none;
    height: 0;
    width: 0;
}

.dashboard-nav-footer {
    margin-top: auto;
    flex-shrink: 0;
}

.dashboard-nav-item {
    min-height: 32px;
    padding-left: 0.5rem;
    display: flex;
    align-items: center;
    letter-spacing: 0.02em;
    transition: ease-out 0.5s;
    cursor: pointer;
}

    .dashboard-nav-item:hover {
        background: rgba(255, 255, 255, 0.04);
    }

    .dashboard-nav-item.active,
    .dashboard-nav-dropdown-item.active,
    .dashboard-nav-dropdown-toggle.active {
        color: #323537;
        font-weight: bold;
        border-left: none;
        position: relative;
        background: transparent;
        /* Contain the ::before strip (z-index:-1) in its own stacking context, so it
           paints over the dark nav background instead of disappearing behind it. */
        isolation: isolate;
    }

        .dashboard-nav-item.active::before,
        .dashboard-nav-dropdown-item.active::before,
        .dashboard-nav-dropdown-toggle.active::before {
            content: "";
            position: absolute;
            left: 5px;
            right: 6px;
            top: 50%;
            transform: translateY(-50%);
            height: 22px;
            width: auto;
            background-color: rgba(221, 225, 232, 0.7);
            border-radius: 4px;
            z-index: -1;
        }

        .dashboard-nav-dropdown-item.active::before {
            left: 13px;
        }

/* Compact mode: active item colour + pill background */
.dashboard-compact .dashboard-nav-item.active,
.dashboard-compact .dashboard-nav-dropdown-toggle.active {
    color: #323537;
}

/* Compact mode: highlight the WHOLE button (not just the icon). The narrow
   ::before pill is dropped here; the light background is painted on the full
   menu-item that contains the active node instead. */
.dashboard-compact .dashboard-nav-item.active::before,
.dashboard-compact .dashboard-nav-dropdown-toggle.active::before {
    display: none !important;
}

.dashboard-nav-item.active .menu-icon,
.dashboard-nav-dropdown-toggle.active .menu-icon {
    filter: brightness(0.2);
}

/* Selected-state assets (_b.svg) are authored for the light active strip; do not darken them. */
.dashboard-nav-item.active .menu-icon-selected,
.dashboard-nav-dropdown-toggle.active .menu-icon-selected,
.dashboard-nav-dropdown-item.active .menu-icon-selected {
    filter: none;
}


.dashboard-nav-item.active .menu-text,
.dashboard-nav-dropdown-item.active .menu-text,
.dashboard-nav-dropdown-toggle.active .menu-text {
    position: relative;
    z-index: 1;
}

.dashboard-nav-dropdown {
    display: flex;
    flex-direction: column;
}

    .dashboard-nav-dropdown.show > .dashboard-nav-dropdown-menu {
        display: flex;
    }

    .dashboard-nav-dropdown.show > .dashboard-nav-dropdown-toggle:after {
        background-image: url('/images/svg/arrow_down.svg');
        width: 10px;
        height: 10px;
        background-size: contain;
    }

.dashboard-nav-dropdown-toggle {
    position: relative;
    cursor: pointer;
    padding-right: 22px;
    box-sizing: border-box;
}

    .dashboard-nav-dropdown-toggle:after {
        content: "";
        position: absolute;
        right: 8px;
        z-index: 2;
        display: inline-block;
        width: 10px;
        height: 10px;
        background-image: url('/images/svg/arrow_left.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        border: none;
        filter: brightness(0.5) invert(0.5);
        pointer-events: none;
    }

    .dashboard-nav-dropdown-toggle.active::after {
        filter: brightness(0);
    }

.dashboard-nav-dropdown-menu {
    display: none;
    flex-direction: column;
    overflow: hidden;
    transition: opacity var(--dashboard-transition-duration) ease;
}

.dashboard-nav-dropdown-item {
    min-height: 20px;
    max-height: 20px;
    line-height: 11px;
    padding-left: 1rem;
    display: flex;
    align-items: center;
    transition: ease-out 0.5s;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
    position: relative;
}

    .dashboard-nav-dropdown-item:hover {
        background: rgba(255, 255, 255, 0.09);
    }

/* Section titles inside expanded submenu groups — gray pill header (reference layout). */
.dashboard_sf_treeview .e-list-item:has(.menu_separator) {
    margin-top: 6px !important;
    margin-bottom: 2px !important;
}

.dashboard_sf_treeview .e-list-item:has(.menu_separator) .e-text-content,
.dashboard_sf_treeview .e-list-item:has(.menu_separator):hover .e-text-content,
.dashboard_sf_treeview .e-list-item:has(.menu_separator).e-hover .e-text-content {
    background: transparent !important;
    cursor: default;
}

.dashboard_sf_treeview .e-list-item:has(.menu_separator) .e-list-text {
    display: block !important;
    width: 100%;
}

.dashboard_sf_treeview .menu_separator {
    display: block;
    box-sizing: border-box;
    width: calc(100% - 12px);
    margin: 4px 6px;
    padding: 6px 10px;
    font-size: 12px !important;
    font-weight: 500;
    line-height: 1.25;
    color: #ffffff !important;
    background-color: #4a4d50;
    border-radius: 8px;
    cursor: default;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Flyout submenu (compact mode): same pill style for section titles */
.e-menu-popup .menu_separator {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 6px 0 4px;
    padding: 6px 10px;
    font-size: 12px !important;
    font-weight: 500;
    line-height: 1.25;
    color: #ffffff !important;
    background-color: #4a4d50;
    border-radius: 8px;
    cursor: default;
    white-space: nowrap;
}

.e-menu-popup .e-menu-item:has(.menu_separator) {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 8px !important;
    background: transparent !important;
    cursor: default;
}

.e-menu-popup .e-menu-item:has(.menu_separator):hover,
.e-menu-popup .e-menu-item:has(.menu_separator).e-focused {
    background: transparent !important;
}

/* ──────────────────────────────────────────────────────────────────────
   Expanded sidebar refinements. Scoped to .dashboard_sf_treeview, which only
   renders in expanded mode (compact uses SfMenu), so the dock view is never
   affected: slightly larger text + row spacing, plus a distinct background
   on expanded parents so the open group stands out (mirrors time.track).
   ────────────────────────────────────────────────────────────────────── */

/* Larger top-level rows + text */
.dashboard_sf_treeview .dashboard-nav-item {
    min-height: 40px;
}

/* !important is required to beat Syncfusion's base ".e-control * { font-size:12px!important }". */
.dashboard_sf_treeview .menu-text {
    font-size: 14px !important;
}

/* Larger child rows + text */
.dashboard_sf_treeview .dashboard-nav-dropdown-item {
    min-height: 28px;
    max-height: 28px;
    line-height: 14px;
}

.dashboard_sf_treeview .dashboard-nav-dropdown-item .menu-text {
    font-size: 13px !important;
}

/* Active strip grows with the taller rows */
.dashboard_sf_treeview .dashboard-nav-item.active::before,
.dashboard_sf_treeview .dashboard-nav-dropdown-toggle.active::before {
    height: 30px;
}

.dashboard_sf_treeview .dashboard-nav-dropdown-item.active::before {
    height: 24px;
}

/* Expanded parent: lighter background so the open group is highlighted.
   This Syncfusion build marks the open node with aria-expanded="true" (there is
   no .e-node-expanded class), so the state is matched via the attribute. */
.dashboard_sf_treeview .e-list-item[aria-expanded="true"] > .e-text-content .dashboard-nav-dropdown-toggle {
    background: rgba(255, 255, 255, 0.07);
}

/* Children of an expanded parent sit in a slightly recessed (darker) block */
.dashboard_sf_treeview .e-list-item[aria-expanded="true"] > .e-ul {
    background: rgba(0, 0, 0, 0.13);
}

/* ── SfButton menu toggle — hamburger via button background-image ── */
.menu-toggle.e-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    cursor: pointer;
    background: transparent url('/images/svg/menu_icon.svg') center / 24px 24px no-repeat !important;
    color: transparent !important;
}

.menu-toggle.e-btn:hover,
.menu-toggle.e-btn:active,
.menu-toggle.e-btn:focus,
.menu-toggle.e-btn.e-active,
.menu-toggle.e-btn.e-ripple {
    background: transparent url('/images/svg/menu_icon.svg') center / 24px 24px no-repeat !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/* Hide any Syncfusion icon span — image is on the button itself */
.menu-toggle.e-btn .e-btn-icon {
    display: none !important;
}

/* ── SfButton toolbar action icons (via background-image) ── */
.sf_btn_icon.e-btn {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 4px !important;
    cursor: pointer;
    background-size: 22px 22px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    color: transparent !important;
}

.sf_btn_icon.e-btn:hover,
.sf_btn_icon.e-btn:active,
.sf_btn_icon.e-btn:focus {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    opacity: 0.75;
}

.sf_btn_icon.e-btn .e-btn-icon {
    display: none !important;
}

.sf_btn_repor.e-btn {
    background-image: url('/images/svg/buttons/botao_repor_b.svg') !important;
}

.sf_btn_eliminar.e-btn {
    background-image: url('/images/svg/buttons/botao_eliminar_b.svg') !important;
}

.sf_btn_preferencias.e-btn {
    background-image: url('/images/svg/buttons/botao_preferencias_b.svg') !important;
}

.dashboard-toolbar .menu-toggle {
    display: flex !important;
}

.dashboard-toolbar {
    min-height: var(--dashboard-header-height);
    background-color: var(--dashboard-toolbar-bg);
    display: flex;
    align-items: center;
    padding: 8px 27px;
    position: sticky;
    top: 0;
    z-index: 1200;
}

/* Compact mode: SfTreeView icons always visible + centred */
.dashboard-compact .dashboard_sf_treeview .e-list-item .menu-icon {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.dashboard-compact .dashboard_sf_treeview .e-list-text {
    overflow: visible !important;
}

.dashboard-compact .dashboard_sf_treeview .e-list-text > span {
    justify-content: center !important;
    align-items: center !important;
    overflow: visible !important;
}

.nav-item-divider {
    height: 1px;
    margin: 1rem auto;
    overflow: hidden;
    background-color: #aaaeb3;
    width: 95%;
}

.nav_lang {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 0.5rem;
    flex-wrap: wrap;
}

.nav_lang_flag {
    display: flex;
    padding: 2px;
}

    .nav_lang_flag img {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        object-fit: cover;
    }

.nav_tenant_info {
    padding: 0.25rem 1rem;
    color: #9ba8b7;
    font-size: 0.75rem;
}

.nav_about {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.5rem 1rem;
    color: #fff;
    text-decoration: none;
    min-height: 32px;
}

    .nav_about:hover {
        text-decoration: none;
        color: #dbdbdb;
    }

.nav_about_icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

.nav_app_info {
    padding: 0.5rem 1rem 1rem;
    text-align: center;
}

.nav_app_info_logo {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.nav_app_info_logo_img {
    width: 110px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.nav_app_info_copyright {
    color: #aaaeb3;
    font-size: 11px;
}

.breadcrumb-container {
    display: flex;
    align-items: center;
    margin-left: 15px;
    flex-grow: 1;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: transparent;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    color: #515151;
    font-size: 12px;
    white-space: nowrap;
}

    .breadcrumb-item a {
        color: #323537;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .breadcrumb-item a:hover {
            color: #323537;
            text-decoration: underline;
        }

    .breadcrumb-item.active {
        color: #515151;
    }

    .breadcrumb-item + .breadcrumb-item {
        padding-left: 8px;
    }

        .breadcrumb-item + .breadcrumb-item::before {
            display: inline-block;
            padding-right: 8px;
            color: #6c757d;
            content: ">";
        }

    .breadcrumb-item:empty {
        display: none;
    }

.header_user_info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    white-space: nowrap;
}

.dashboard_toolbar_actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 18px;
    min-width: 0;
    max-width: 100%;
}

.dashboard_toolbar_hidden_widgets {
    display: none;
    flex-wrap: wrap;
    align-content: center;
    gap: 2px 6px;
    flex: 1 1 auto;
    min-height: 0;
    margin-left: 4px;
    max-width: min(1100px, calc(100vw - 340px));
    max-height: none;
    overflow: visible;
}

.dashboard_toolbar_hidden_widgets_visible {
    display: flex;
}

.dashboard_toolbar_hidden_widget {
    border: 1px solid #1f83b8;
    background: #2595D2;
    color: #ffffff;
    border-radius: 10px;
    padding: 0 8px;
    font-size: 10px;
    line-height: 13px;
    white-space: nowrap;
    cursor: grab;
    user-select: none;
}

    .dashboard_toolbar_hidden_widget:active {
        cursor: grabbing;
    }

.dashboard_toolbar_action {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #4c545b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

    .dashboard_toolbar_action:hover {
        background: transparent;
    }

    .dashboard_toolbar_action img {
        width: 22px;
        height: 22px;
    }

.employee_name {
    font-size: 1rem;
    color: #515151;
}

.user_dropdown {
    position: relative;
}

.user_link {
    display: flex;
    align-items: center;
    cursor: pointer;
}

    .user_link img,
    .user_avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        border: 1px solid #909192;
    }

.rounded-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid #909192;
}

.user_dropdown_menu {
    position: absolute;
    top: 50px;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: none;
    list-style: none;
    padding: 10px 0;
    min-width: 150px;
    z-index: 999999;
}

    .user_dropdown_menu.show {
        display: block;
    }

    .user_dropdown_menu li {
        padding: 8px 15px;
    }

        .user_dropdown_menu li a {
            color: #333;
            text-decoration: none;
            display: block;
        }

            .user_dropdown_menu li a:hover {
                background: #f5f5f5;
            }

.menu-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    vertical-align: middle;
    transition: width var(--dashboard-transition-duration), height var(--dashboard-transition-duration), margin var(--dashboard-transition-duration);
}

.dashboard-nav-dropdown-item .menu-icon {
    width: 18px;
    height: 18px;
}

.menu-text-wrap {
    flex: 1 1 0;
    min-width: 0;
    width: 0;
    overflow: hidden;
    display: block;
    box-sizing: border-box;
}

.dashboard-nav-dropdown-toggle .menu-text-wrap {
    padding-right: 4px;
}

.dashboard-nav-dropdown-item .menu-text-wrap {
    padding-right: 8px;
}

.menu-text {
    font-size: 13px;
    font-weight: 300;
    display: inline-block;
    white-space: nowrap;
}

.dashboard-nav-dropdown-item .menu-text {
    font-size: 11px;
    font-weight: 200;
}

.dashboard-nav-item,
.dashboard-nav-dropdown-item,
.dashboard-nav-dropdown-toggle {
    overflow: hidden;
}

/* ── Auto marquee for overflowing labels (CSS-only). Container query compares the
   full text width (width:max-content on hover) against the visible wrap width,
   so short labels never animate. Scoped to the tree; flyout is untouched. ── */
.dashboard_sf_treeview .menu-text-wrap {
    container-type: inline-size;
}

/* Default: truncate long labels with ellipsis. */
.dashboard_sf_treeview .e-list-item .menu-text {
    display: block !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Marquee only on the row under the cursor — not parent/siblings. */
.dashboard_sf_treeview .dashboard-nav-item:hover > .menu-text-wrap > .menu-text,
.dashboard_sf_treeview .dashboard-nav-dropdown-item:hover > .menu-text-wrap > .menu-text,
.dashboard_sf_treeview .dashboard-nav-dropdown-toggle:hover > .menu-text-wrap > .menu-text {
    display: inline-block !important;
    width: max-content;
    max-width: none;
    text-overflow: clip;
    animation: dashboard-menu-autoscroll 1.2s linear infinite alternate !important;
}

@keyframes dashboard-menu-autoscroll {
    0%, 2% {
        transform: translateX(0);
    }

    98%, 100% {
        transform: translateX(min(0px, calc(100cqw - 100%)));
    }
}

.menu-icon-selected {
    display: none;
}

.dashboard-nav-item.active .menu-icon-selected,
.dashboard-nav-dropdown-toggle.active .menu-icon-selected,
.dashboard-nav-dropdown-item.active .menu-icon-selected {
    display: inline-block;
}

.dashboard-nav-item.active .menu-icon-unselected,
.dashboard-nav-dropdown-toggle.active .menu-icon-unselected,
.dashboard-nav-dropdown-item.active .menu-icon-unselected {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════
   Compact mode — controlled by Blazor state (.dashboard-compact)
   ═══════════════════════════════════════════════════════════════ */

/* Logo: show full logo when expanded, small logo when compact */
.dashboard-compact .logo-open {
    display: none;
}

.dashboard-compact .logo-closed {
    display: block;
}

/* Menu icon: compact size when docked */
.dashboard-compact .menu-icon {
    width: 28px;
    height: 28px;
    margin: 8px auto;
}

/* Compact mode: nav items centred, text hidden */
.dashboard-compact .dashboard-nav-item {
    text-align: center;
    justify-content: center;
    padding-left: 0;
}

.dashboard-compact .dashboard-nav-item span {
    display: none;
}

/* Compact: expanded child items are icon-only and centred too */
.dashboard-compact .dashboard-nav-dropdown-item {
    text-align: center;
    justify-content: center;
    padding-left: 0;
}

.dashboard-compact .dashboard-nav-dropdown-item span {
    display: none;
}

/* Compact mode: legacy dropdown menus always hidden */
.dashboard-compact .dashboard-nav-dropdown-menu,
.dashboard-compact .dashboard-nav-dropdown.show > .dashboard-nav-dropdown-menu {
    display: none;
}

.dashboard-compact .dashboard-nav-dropdown-toggle::after {
    display: none;
}

/* Compact mode: footer items hidden */
.dashboard-compact .nav-item-divider,
.dashboard-compact .nav_lang,
.dashboard-compact .nav_app_info {
    display: none;
}

/* Compact mode: Acerca = icon only */
.dashboard-compact .nav_about {
    justify-content: center;
    padding-left: 0;
}

.dashboard-compact .nav_about_text {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════
   Compact sidebar — native SfMenu (vertical) with flyout submenus
   The flyout popup must escape the 80px dock, so allow overflow.
   ═══════════════════════════════════════════════════════════════ */
.dashboard-compact > .e-sidebar,
.dashboard-compact > .e-sidebar .e-sidebar-content,
.dashboard-compact .dashboard-nav-list {
    overflow: visible !important;
}

/* NOTE: Syncfusion does not reliably copy the SfMenu CssClass onto the rendered
   wrapper / popup, so these rules are anchored on stable hooks instead:
   - the main bar lives inside <nav class="dashboard-nav-list">
   - every flyout popup is .e-menu-popup; we scope to ours via .dashboard-nav-item
     (a class only our NodeTemplate emits) so grid context-menus are untouched. */

/* Main vertical bar: dark background (same as sidebar), no Syncfusion chrome.
   Do NOT assume the .e-vertical class is present — anchor on .e-menu only. */
.dashboard-nav-list .e-menu-wrapper,
.dashboard-nav-list ul.e-menu {
    width: 100% !important;
    min-width: 0 !important;
    background: var(--dashboard-nav-bg) !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Top-level item: centred icon, no text, no caret */
.dashboard-nav-list ul.e-menu > .e-menu-item {
    height: auto !important;
    line-height: normal !important;
    padding: 6px 0 !important;
    background: var(--dashboard-nav-bg) !important;
    color: inherit !important;
    display: flex !important;
    justify-content: center !important;
}

.dashboard-nav-list ul.e-menu > .e-menu-item .menu-text-wrap {
    display: none !important;
}

.dashboard-nav-list ul.e-menu > .e-menu-item .e-caret {
    display: none !important;
}

.dashboard-nav-list ul.e-menu > .e-menu-item.e-focused,
.dashboard-nav-list ul.e-menu > .e-menu-item:hover,
.dashboard-nav-list ul.e-menu > .e-menu-item.e-selected {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Active parent: light highlight over the whole button */
.dashboard-nav-list ul.e-menu > .e-menu-item:has(.dashboard-nav-item.active),
.dashboard-nav-list ul.e-menu > .e-menu-item:has(.dashboard-nav-item.active):hover,
.dashboard-nav-list ul.e-menu > .e-menu-item:has(.dashboard-nav-item.active).e-focused,
.dashboard-nav-list ul.e-menu > .e-menu-item:has(.dashboard-nav-item.active).e-selected {
    background: rgba(221, 225, 232, 0.7) !important;
}

/* Flyout popup: same dark panel as the sidebar (scoped to our menu only).
   Auto-size to the longest child name so nothing gets clipped. */
.e-menu-popup:has(.dashboard-nav-item) {
    width: max-content !important;
    max-width: none !important;
    min-width: 220px !important;
    background: var(--dashboard-nav-bg) !important;
    border: none !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
    overflow: visible !important;
}

.e-menu-popup:has(.dashboard-nav-item) ul,
.e-menu-popup:has(.dashboard-nav-item) .e-menu-vscroll,
.e-menu-popup:has(.dashboard-nav-item) .e-vscroll-content {
    width: max-content !important;
    max-width: none !important;
    min-width: 220px !important;
    background: var(--dashboard-nav-bg) !important;
    border: none !important;
    padding: 4px 0 !important;
    overflow: visible !important;
}

/* Each child row spans the full popup width so the hover highlight does too */
.e-menu-popup .e-menu-item:has(.dashboard-nav-item) {
    height: auto !important;
    line-height: normal !important;
    width: 100% !important;
    max-width: none !important;
    color: #fff !important;
    background: transparent !important;
    padding: 0 !important;
}

.e-menu-popup .e-menu-item:has(.dashboard-nav-item):hover,
.e-menu-popup .e-menu-item:has(.dashboard-nav-item).e-focused {
    background: rgba(255, 255, 255, 0.12) !important;
}

/* Child content: icon + name, left aligned, full width, text always white.
   The compact rule hides every span, so re-show BOTH text spans here. */
.e-menu-popup .dashboard-nav-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    overflow: visible !important;
}

/* Base .menu-text-wrap is width:0 + overflow:hidden (marquee trick); undo that
   here so the child name sizes to its content instead of collapsing. */
.e-menu-popup .dashboard-nav-item .menu-text-wrap,
.e-menu-popup .dashboard-nav-item .menu-text {
    display: inline-block !important;
    width: auto !important;
    flex: 0 0 auto !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.e-menu-popup .dashboard-nav-item .menu-icon {
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

/* Active child inside the flyout: full-row light highlight + dark text (instead of
   the centred compact pill, which would look wrong on a wide row). */
.e-menu-popup .dashboard-nav-item.active {
    background: rgba(221, 225, 232, 0.7) !important;
    color: #323537 !important;
}

.e-menu-popup .dashboard-nav-item.active::before {
    display: none !important;
}

.e-menu-popup .dashboard-nav-item.active .menu-text {
    color: #323537 !important;
}

@media (max-width: 768px) {
    .dashboard-content {
        padding: 15px 10px;
    }

    .breadcrumb-container {
        display: none;
    }

    .filter-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        align-items: end;
    }

        .filter-container .filter-item,
        .filter-container .filter-item_short,
        .filter-container .filter-item_period {
            min-width: 0;
            max-width: none;
            width: 100%;
            grid-column: auto;
        }

        .filter-container .filter-select,
        .filter-container .filter-input,
        .filter-container .filter-date,
        .filter-container .dashboard_date_range.e-control.e-daterangepicker,
        .filter-container .e-multiselect.e-control,
        .filter-container .e-dropdownlist.e-control,
        .filter-container .e-ddl.e-control,
        .filter-container .e-input-group.e-control {
            width: 100% !important;
            min-width: 0;
            max-width: 100% !important;
        }

    .page-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
    }

    .page-title {
        min-width: 0;
        gap: 8px;
    }

    .page-title-text {
        font-size: 18px;
    }

    .page-actions {
        flex-shrink: 0;
        flex-wrap: nowrap;
        margin-left: 0;
    }

    .page-actions .portal-botao {
        flex: 0 0 auto;
        min-width: 32px;
        width: auto;
        height: 32px;
        padding: 6px;
        gap: 0;
        justify-content: center;
        font-size: 0;
        line-height: 0;
    }

        .page-actions label.portal-botao {
            display: inline-flex;
        }

        .page-actions .portal-botao img {
            width: 14px;
            height: 14px;
        }
}

/* Page structure (from REGRAS) */
.page-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    min-width: 0;
}

.page-header {
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ededed;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.page-title-text {
    font-size: 24px;
    font-weight: 600;
    color: #323537;
}

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


.filter-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 10px;
    align-items: flex-end;
}

.filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
    width: 100%;
}

.filter-item {
    display: flex;
    flex-direction: column;
    min-width: 10%;
    max-width: 30%;
}

    .filter-item label {
        margin-bottom: 5px;
        font-weight: 500;
    }

/* =========================================================
   Shared filter rules (reusable across pages)
   Use these classes in any page with filters:
   - filter-item_short
   - filter-item_period
   - dashboard_date_range
   ========================================================= */


.filter-container .filter-item_short {
    min-width: 150px;
    max-width: 200px;
}

.filter-container .filter-item_period {
    min-width: 285px;
    max-width: 350px;
    flex: 0 0 300px;
}

.filter-container .dashboard_date_range {
    width: 100%;
}

.filter-container .filter-item .e-multiselect.e-control,
.filter-container .filter-item .e-dropdownlist.e-control,
.filter-container .filter-item .e-ddl.e-control,
.filter-container .filter-item .dashboard_date_range.e-control.e-daterangepicker,
.filter-container .filter-item > .e-input-group {
    width: 300px;
    max-width: 100%;
}

/* Shared multi-location filter (LocationFilterMultiSelect) */
.filter_location_multiselect_host {
    min-width: 200px;
    max-width: 400px;
}

.filter_location_multiselect {
    position: relative;
    width: 100%;
}

.filter_location_multiselect .e-multiselect.e-input-group,
.filter_location_multiselect .e-multi-select-wrapper {
    overflow: hidden;
    border-radius: 4px;
    width: 100%;
}

.filter_location_multiselect .e-multiselect .e-multi-select-wrapper .e-delim-values,
.filter_location_multiselect .e-multiselect .e-multi-select-wrapper .e-delim-view {
    display: none !important;
}

.filter_location_multiselect .e-multiselect .e-multi-select-wrapper input.e-dropdownbase {
    color: transparent;
    caret-color: transparent;
}

.filter_location_multiselect .e-multiselect .e-multi-select-wrapper input.e-dropdownbase::placeholder {
    color: transparent;
    opacity: 0;
}

.filter_location_multiselect .e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon.e-clear-icon {
    z-index: 3;
}

.filter_location_multiselect_summary {
    position: absolute;
    left: 10px;
    right: 42px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 2;
    font-size: 13px;
    line-height: 1.2;
    color: #2c3e50;
}

.filter_location_multiselect .e-multiselect .e-input-group-icon.e-ddl-icon {
    position: relative;
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    height: auto;
    margin: 0;
    padding: 0;
    border-left: 1px solid #dce1e6;
    box-sizing: border-box;
    flex-shrink: 0;
    border-radius: 0 4px 4px 0;
}

.filter_location_multiselect .e-multiselect .e-chips-close.e-close-hooker {
    right: 34px;
}


.schedule_report_filters .schedule_report_filter_item_short {
    min-width: 150px;
    max-width: 170px;
}

.schedule_report_filters .schedule_report_filter_item_period {
    min-width: 285px;
    max-width: 350px;
    flex: 0 0 300px;
}

.schedule_report_filters {
    margin-bottom: 14px;
}

.portal-botao {
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    background-color: #323537;
    color: #fff;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 13px !important;
    font-weight: 500;
    height: 30px;
    padding: 0 18px !important;
    box-sizing: border-box;
}

    .portal-botao:hover {
        background-color: #242729;
    }

    .portal-botao img {
        width: 15px;
        height: 15px;
        filter: brightness(0) invert(1);
    }

/* Labels used as buttons (e.g. file upload): match portal corner radius; some themes/UA yield pill-shaped labels */
label.portal-botao {
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 10px !important;
    vertical-align: middle;
}

/* SfButton + .portal-botao: match native .portal-botao radius, height, padding (Syncfusion themes often differ) */
.dashboard-content .page-actions .e-lib.e-btn.e-control.portal-botao,
.dashboard-content .filter-container .e-lib.e-btn.e-control.portal-botao,
.dashboard-content .filter-form .e-lib.e-btn.e-control.portal-botao,
.dashboard-content .report-toolbar .e-lib.e-btn.e-control.portal-botao,
.dashboard-content .employee_data_col .e-lib.e-btn.e-control.portal-botao,
.dashboard-content .dashboard_toolbar_actions .e-lib.e-btn.e-control.portal-botao {
    border-radius: 10px !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    line-height: normal !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* SfButton + IsPrimary adds .e-primary (Syncfusion/Bootstrap primary blue). Restore .portal-botao dark gray in main content. */
.dashboard-content .page-actions .e-lib.e-btn.e-control.portal-botao:not(.portal-botao_secondary):not(.portal-botao_danger):not(.portal-botao_success):not(.portal-botao_warning):not(.portal-botao_info),
.dashboard-content .filter-container .e-lib.e-btn.e-control.portal-botao:not(.portal-botao_secondary):not(.portal-botao_danger):not(.portal-botao_success):not(.portal-botao_warning):not(.portal-botao_info),
.dashboard-content .filter-form .e-lib.e-btn.e-control.portal-botao:not(.portal-botao_secondary):not(.portal-botao_danger):not(.portal-botao_success):not(.portal-botao_warning):not(.portal-botao_info),
.dashboard-content .report-toolbar .e-lib.e-btn.e-control.portal-botao:not(.portal-botao_secondary):not(.portal-botao_danger):not(.portal-botao_success):not(.portal-botao_warning):not(.portal-botao_info),
.dashboard-content .employee_data_col .e-lib.e-btn.e-control.portal-botao:not(.portal-botao_secondary):not(.portal-botao_danger):not(.portal-botao_success):not(.portal-botao_warning):not(.portal-botao_info),
.dashboard-content .dashboard_toolbar_actions .e-lib.e-btn.e-control.portal-botao:not(.portal-botao_secondary):not(.portal-botao_danger):not(.portal-botao_success):not(.portal-botao_warning):not(.portal-botao_info) {
    background-color: #323537 !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

    .dashboard-content .page-actions .e-lib.e-btn.e-control.portal-botao:not(.portal-botao_secondary):not(.portal-botao_danger):not(.portal-botao_success):not(.portal-botao_warning):not(.portal-botao_info):hover,
    .dashboard-content .page-actions .e-lib.e-btn.e-control.portal-botao:not(.portal-botao_secondary):not(.portal-botao_danger):not(.portal-botao_success):not(.portal-botao_warning):not(.portal-botao_info):focus,
    .dashboard-content .page-actions .e-lib.e-btn.e-control.portal-botao:not(.portal-botao_secondary):not(.portal-botao_danger):not(.portal-botao_success):not(.portal-botao_warning):not(.portal-botao_info):active,
    .dashboard-content .filter-container .e-lib.e-btn.e-control.portal-botao:not(.portal-botao_secondary):not(.portal-botao_danger):not(.portal-botao_success):not(.portal-botao_warning):not(.portal-botao_info):hover,
    .dashboard-content .filter-container .e-lib.e-btn.e-control.portal-botao:not(.portal-botao_secondary):not(.portal-botao_danger):not(.portal-botao_success):not(.portal-botao_warning):not(.portal-botao_info):focus,
    .dashboard-content .filter-container .e-lib.e-btn.e-control.portal-botao:not(.portal-botao_secondary):not(.portal-botao_danger):not(.portal-botao_success):not(.portal-botao_warning):not(.portal-botao_info):active,
    .dashboard-content .filter-form .e-lib.e-btn.e-control.portal-botao:not(.portal-botao_secondary):not(.portal-botao_danger):not(.portal-botao_success):not(.portal-botao_warning):not(.portal-botao_info):hover,
    .dashboard-content .filter-form .e-lib.e-btn.e-control.portal-botao:not(.portal-botao_secondary):not(.portal-botao_danger):not(.portal-botao_success):not(.portal-botao_warning):not(.portal-botao_info):focus,
    .dashboard-content .filter-form .e-lib.e-btn.e-control.portal-botao:not(.portal-botao_secondary):not(.portal-botao_danger):not(.portal-botao_success):not(.portal-botao_warning):not(.portal-botao_info):active,
    .dashboard-content .report-toolbar .e-lib.e-btn.e-control.portal-botao:not(.portal-botao_secondary):not(.portal-botao_danger):not(.portal-botao_success):not(.portal-botao_warning):not(.portal-botao_info):hover,
    .dashboard-content .report-toolbar .e-lib.e-btn.e-control.portal-botao:not(.portal-botao_secondary):not(.portal-botao_danger):not(.portal-botao_success):not(.portal-botao_warning):not(.portal-botao_info):focus,
    .dashboard-content .report-toolbar .e-lib.e-btn.e-control.portal-botao:not(.portal-botao_secondary):not(.portal-botao_danger):not(.portal-botao_success):not(.portal-botao_warning):not(.portal-botao_info):active,
    .dashboard-content .employee_data_col .e-lib.e-btn.e-control.portal-botao:not(.portal-botao_secondary):not(.portal-botao_danger):not(.portal-botao_success):not(.portal-botao_warning):not(.portal-botao_info):hover,
    .dashboard-content .employee_data_col .e-lib.e-btn.e-control.portal-botao:not(.portal-botao_secondary):not(.portal-botao_danger):not(.portal-botao_success):not(.portal-botao_warning):not(.portal-botao_info):focus,
    .dashboard-content .employee_data_col .e-lib.e-btn.e-control.portal-botao:not(.portal-botao_secondary):not(.portal-botao_danger):not(.portal-botao_success):not(.portal-botao_warning):not(.portal-botao_info):active,
    .dashboard-content .dashboard_toolbar_actions .e-lib.e-btn.e-control.portal-botao:not(.portal-botao_secondary):not(.portal-botao_danger):not(.portal-botao_success):not(.portal-botao_warning):not(.portal-botao_info):hover,
    .dashboard-content .dashboard_toolbar_actions .e-lib.e-btn.e-control.portal-botao:not(.portal-botao_secondary):not(.portal-botao_danger):not(.portal-botao_success):not(.portal-botao_warning):not(.portal-botao_info):focus,
    .dashboard-content .dashboard_toolbar_actions .e-lib.e-btn.e-control.portal-botao:not(.portal-botao_secondary):not(.portal-botao_danger):not(.portal-botao_success):not(.portal-botao_warning):not(.portal-botao_info):active {
        background-color: #242729 !important;
        color: #fff !important;
        border-color: transparent !important;
    }

    .dashboard-content .page-actions .e-lib.e-btn.e-control.portal-botao:not(.portal-botao_secondary):not(.portal-botao_danger):not(.portal-botao_success):not(.portal-botao_warning):not(.portal-botao_info) img,
    .dashboard-content .filter-container .e-lib.e-btn.e-control.portal-botao:not(.portal-botao_secondary):not(.portal-botao_danger):not(.portal-botao_success):not(.portal-botao_warning):not(.portal-botao_info) img,
    .dashboard-content .filter-form .e-lib.e-btn.e-control.portal-botao:not(.portal-botao_secondary):not(.portal-botao_danger):not(.portal-botao_success):not(.portal-botao_warning):not(.portal-botao_info) img,
    .dashboard-content .report-toolbar .e-lib.e-btn.e-control.portal-botao:not(.portal-botao_secondary):not(.portal-botao_danger):not(.portal-botao_success):not(.portal-botao_warning):not(.portal-botao_info) img,
    .dashboard-content .employee_data_col .e-lib.e-btn.e-control.portal-botao:not(.portal-botao_secondary):not(.portal-botao_danger):not(.portal-botao_success):not(.portal-botao_warning):not(.portal-botao_info) img,
    .dashboard-content .dashboard_toolbar_actions .e-lib.e-btn.e-control.portal-botao:not(.portal-botao_secondary):not(.portal-botao_danger):not(.portal-botao_success):not(.portal-botao_warning):not(.portal-botao_info) img {
        filter: brightness(0) invert(1);
    }

/* Syncfusion primary buttons (e.g. SfDialog "Confirmar") render outside .dashboard-content
   and would otherwise show the Syncfusion theme blue. Force the q.track brand blue (#2595D2). */
.e-btn.e-primary,
.e-css.e-btn.e-primary,
button.e-btn.e-primary {
    background-color: var(--qtrack-blue, #2595D2) !important;
    border-color: var(--qtrack-blue, #2595D2) !important;
    color: #fff !important;
}

    .e-btn.e-primary:hover,
    .e-btn.e-primary:focus,
    .e-btn.e-primary:active,
    .e-btn.e-primary.e-active,
    .e-css.e-btn.e-primary:hover,
    .e-css.e-btn.e-primary:focus,
    .e-css.e-btn.e-primary:active {
        background-color: var(--qtrack-blue-dark, #1e7ab5) !important;
        border-color: var(--qtrack-blue-dark, #1e7ab5) !important;
        color: #fff !important;
    }

.dashboard-content .page-actions .e-lib.e-btn.e-control.portal-botao.portal-botao_secondary,
.dashboard-content .filter-container .e-lib.e-btn.e-control.portal-botao.portal-botao_secondary,
.dashboard-content .filter-form .e-lib.e-btn.e-control.portal-botao.portal-botao_secondary,
.dashboard-content .report-toolbar .e-lib.e-btn.e-control.portal-botao.portal-botao_secondary,
.dashboard-content .employee_data_col .e-lib.e-btn.e-control.portal-botao.portal-botao_secondary,
.dashboard-content .dashboard_toolbar_actions .e-lib.e-btn.e-control.portal-botao.portal-botao_secondary {
    background: #f5f5f5 !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
}

    .dashboard-content .page-actions .e-lib.e-btn.e-control.portal-botao.portal-botao_secondary:hover,
    .dashboard-content .page-actions .e-lib.e-btn.e-control.portal-botao.portal-botao_secondary:focus,
    .dashboard-content .page-actions .e-lib.e-btn.e-control.portal-botao.portal-botao_secondary:active,
    .dashboard-content .filter-container .e-lib.e-btn.e-control.portal-botao.portal-botao_secondary:hover,
    .dashboard-content .filter-container .e-lib.e-btn.e-control.portal-botao.portal-botao_secondary:focus,
    .dashboard-content .filter-container .e-lib.e-btn.e-control.portal-botao.portal-botao_secondary:active,
    .dashboard-content .filter-form .e-lib.e-btn.e-control.portal-botao.portal-botao_secondary:hover,
    .dashboard-content .filter-form .e-lib.e-btn.e-control.portal-botao.portal-botao_secondary:focus,
    .dashboard-content .filter-form .e-lib.e-btn.e-control.portal-botao.portal-botao_secondary:active,
    .dashboard-content .report-toolbar .e-lib.e-btn.e-control.portal-botao.portal-botao_secondary:hover,
    .dashboard-content .report-toolbar .e-lib.e-btn.e-control.portal-botao.portal-botao_secondary:focus,
    .dashboard-content .report-toolbar .e-lib.e-btn.e-control.portal-botao.portal-botao_secondary:active,
    .dashboard-content .employee_data_col .e-lib.e-btn.e-control.portal-botao.portal-botao_secondary:hover,
    .dashboard-content .employee_data_col .e-lib.e-btn.e-control.portal-botao.portal-botao_secondary:focus,
    .dashboard-content .employee_data_col .e-lib.e-btn.e-control.portal-botao.portal-botao_secondary:active,
    .dashboard-content .dashboard_toolbar_actions .e-lib.e-btn.e-control.portal-botao.portal-botao_secondary:hover,
    .dashboard-content .dashboard_toolbar_actions .e-lib.e-btn.e-control.portal-botao.portal-botao_secondary:focus,
    .dashboard-content .dashboard_toolbar_actions .e-lib.e-btn.e-control.portal-botao.portal-botao_secondary:active {
        background: #e8e8e8 !important;
        color: #333 !important;
        border-color: #999 !important;
    }

    .dashboard-content .page-actions .e-lib.e-btn.e-control.portal-botao.portal-botao_secondary img,
    .dashboard-content .filter-container .e-lib.e-btn.e-control.portal-botao.portal-botao_secondary img,
    .dashboard-content .filter-form .e-lib.e-btn.e-control.portal-botao.portal-botao_secondary img,
    .dashboard-content .report-toolbar .e-lib.e-btn.e-control.portal-botao.portal-botao_secondary img,
    .dashboard-content .employee_data_col .e-lib.e-btn.e-control.portal-botao.portal-botao_secondary img,
    .dashboard-content .dashboard_toolbar_actions .e-lib.e-btn.e-control.portal-botao.portal-botao_secondary img {
        filter: none !important;
    }

.dashboard-content .page-actions .e-lib.e-btn.e-control.portal-botao.portal-botao_danger,
.dashboard-content .filter-container .e-lib.e-btn.e-control.portal-botao.portal-botao_danger,
.dashboard-content .filter-form .e-lib.e-btn.e-control.portal-botao.portal-botao_danger,
.dashboard-content .report-toolbar .e-lib.e-btn.e-control.portal-botao.portal-botao_danger,
.dashboard-content .employee_data_col .e-lib.e-btn.e-control.portal-botao.portal-botao_danger,
.dashboard-content .dashboard_toolbar_actions .e-lib.e-btn.e-control.portal-botao.portal-botao_danger {
    background-color: #dc3545 !important;
    color: #fff !important;
    border-color: transparent !important;
}

    .dashboard-content .page-actions .e-lib.e-btn.e-control.portal-botao.portal-botao_danger:hover,
    .dashboard-content .page-actions .e-lib.e-btn.e-control.portal-botao.portal-botao_danger:focus,
    .dashboard-content .page-actions .e-lib.e-btn.e-control.portal-botao.portal-botao_danger:active,
    .dashboard-content .filter-container .e-lib.e-btn.e-control.portal-botao.portal-botao_danger:hover,
    .dashboard-content .filter-container .e-lib.e-btn.e-control.portal-botao.portal-botao_danger:focus,
    .dashboard-content .filter-container .e-lib.e-btn.e-control.portal-botao.portal-botao_danger:active,
    .dashboard-content .filter-form .e-lib.e-btn.e-control.portal-botao.portal-botao_danger:hover,
    .dashboard-content .filter-form .e-lib.e-btn.e-control.portal-botao.portal-botao_danger:focus,
    .dashboard-content .filter-form .e-lib.e-btn.e-control.portal-botao.portal-botao_danger:active,
    .dashboard-content .report-toolbar .e-lib.e-btn.e-control.portal-botao.portal-botao_danger:hover,
    .dashboard-content .report-toolbar .e-lib.e-btn.e-control.portal-botao.portal-botao_danger:focus,
    .dashboard-content .report-toolbar .e-lib.e-btn.e-control.portal-botao.portal-botao_danger:active,
    .dashboard-content .employee_data_col .e-lib.e-btn.e-control.portal-botao.portal-botao_danger:hover,
    .dashboard-content .employee_data_col .e-lib.e-btn.e-control.portal-botao.portal-botao_danger:focus,
    .dashboard-content .employee_data_col .e-lib.e-btn.e-control.portal-botao.portal-botao_danger:active,
    .dashboard-content .dashboard_toolbar_actions .e-lib.e-btn.e-control.portal-botao.portal-botao_danger:hover,
    .dashboard-content .dashboard_toolbar_actions .e-lib.e-btn.e-control.portal-botao.portal-botao_danger:focus,
    .dashboard-content .dashboard_toolbar_actions .e-lib.e-btn.e-control.portal-botao.portal-botao_danger:active {
        background-color: #c82333 !important;
        color: #fff !important;
    }

.dashboard-content .page-actions .e-lib.e-btn.e-control.portal-botao.portal-botao_success,
.dashboard-content .filter-container .e-lib.e-btn.e-control.portal-botao.portal-botao_success,
.dashboard-content .filter-form .e-lib.e-btn.e-control.portal-botao.portal-botao_success,
.dashboard-content .report-toolbar .e-lib.e-btn.e-control.portal-botao.portal-botao_success,
.dashboard-content .employee_data_col .e-lib.e-btn.e-control.portal-botao.portal-botao_success,
.dashboard-content .dashboard_toolbar_actions .e-lib.e-btn.e-control.portal-botao.portal-botao_success {
    background-color: #5cb85c !important;
    color: #fff !important;
    border-color: transparent !important;
}

    .dashboard-content .page-actions .e-lib.e-btn.e-control.portal-botao.portal-botao_success:hover,
    .dashboard-content .page-actions .e-lib.e-btn.e-control.portal-botao.portal-botao_success:focus,
    .dashboard-content .page-actions .e-lib.e-btn.e-control.portal-botao.portal-botao_success:active,
    .dashboard-content .filter-container .e-lib.e-btn.e-control.portal-botao.portal-botao_success:hover,
    .dashboard-content .filter-container .e-lib.e-btn.e-control.portal-botao.portal-botao_success:focus,
    .dashboard-content .filter-container .e-lib.e-btn.e-control.portal-botao.portal-botao_success:active,
    .dashboard-content .filter-form .e-lib.e-btn.e-control.portal-botao.portal-botao_success:hover,
    .dashboard-content .filter-form .e-lib.e-btn.e-control.portal-botao.portal-botao_success:focus,
    .dashboard-content .filter-form .e-lib.e-btn.e-control.portal-botao.portal-botao_success:active,
    .dashboard-content .report-toolbar .e-lib.e-btn.e-control.portal-botao.portal-botao_success:hover,
    .dashboard-content .report-toolbar .e-lib.e-btn.e-control.portal-botao.portal-botao_success:focus,
    .dashboard-content .report-toolbar .e-lib.e-btn.e-control.portal-botao.portal-botao_success:active,
    .dashboard-content .employee_data_col .e-lib.e-btn.e-control.portal-botao.portal-botao_success:hover,
    .dashboard-content .employee_data_col .e-lib.e-btn.e-control.portal-botao.portal-botao_success:focus,
    .dashboard-content .employee_data_col .e-lib.e-btn.e-control.portal-botao.portal-botao_success:active,
    .dashboard-content .dashboard_toolbar_actions .e-lib.e-btn.e-control.portal-botao.portal-botao_success:hover,
    .dashboard-content .dashboard_toolbar_actions .e-lib.e-btn.e-control.portal-botao.portal-botao_success:focus,
    .dashboard-content .dashboard_toolbar_actions .e-lib.e-btn.e-control.portal-botao.portal-botao_success:active {
        background-color: #449d44 !important;
        color: #fff !important;
    }

.dashboard-content .page-actions .e-lib.e-btn.e-control.portal-botao.portal-botao_warning,
.dashboard-content .filter-container .e-lib.e-btn.e-control.portal-botao.portal-botao_warning,
.dashboard-content .filter-form .e-lib.e-btn.e-control.portal-botao.portal-botao_warning,
.dashboard-content .report-toolbar .e-lib.e-btn.e-control.portal-botao.portal-botao_warning,
.dashboard-content .employee_data_col .e-lib.e-btn.e-control.portal-botao.portal-botao_warning,
.dashboard-content .dashboard_toolbar_actions .e-lib.e-btn.e-control.portal-botao.portal-botao_warning {
    background-color: #f0ad4e !important;
    color: #fff !important;
    border-color: transparent !important;
}

    .dashboard-content .page-actions .e-lib.e-btn.e-control.portal-botao.portal-botao_warning:hover,
    .dashboard-content .page-actions .e-lib.e-btn.e-control.portal-botao.portal-botao_warning:focus,
    .dashboard-content .page-actions .e-lib.e-btn.e-control.portal-botao.portal-botao_warning:active,
    .dashboard-content .filter-container .e-lib.e-btn.e-control.portal-botao.portal-botao_warning:hover,
    .dashboard-content .filter-container .e-lib.e-btn.e-control.portal-botao.portal-botao_warning:focus,
    .dashboard-content .filter-container .e-lib.e-btn.e-control.portal-botao.portal-botao_warning:active,
    .dashboard-content .filter-form .e-lib.e-btn.e-control.portal-botao.portal-botao_warning:hover,
    .dashboard-content .filter-form .e-lib.e-btn.e-control.portal-botao.portal-botao_warning:focus,
    .dashboard-content .filter-form .e-lib.e-btn.e-control.portal-botao.portal-botao_warning:active,
    .dashboard-content .report-toolbar .e-lib.e-btn.e-control.portal-botao.portal-botao_warning:hover,
    .dashboard-content .report-toolbar .e-lib.e-btn.e-control.portal-botao.portal-botao_warning:focus,
    .dashboard-content .report-toolbar .e-lib.e-btn.e-control.portal-botao.portal-botao_warning:active,
    .dashboard-content .employee_data_col .e-lib.e-btn.e-control.portal-botao.portal-botao_warning:hover,
    .dashboard-content .employee_data_col .e-lib.e-btn.e-control.portal-botao.portal-botao_warning:focus,
    .dashboard-content .employee_data_col .e-lib.e-btn.e-control.portal-botao.portal-botao_warning:active,
    .dashboard-content .dashboard_toolbar_actions .e-lib.e-btn.e-control.portal-botao.portal-botao_warning:hover,
    .dashboard-content .dashboard_toolbar_actions .e-lib.e-btn.e-control.portal-botao.portal-botao_warning:focus,
    .dashboard-content .dashboard_toolbar_actions .e-lib.e-btn.e-control.portal-botao.portal-botao_warning:active {
        background-color: #ec971f !important;
        color: #fff !important;
    }

.dashboard-content .page-actions .e-lib.e-btn.e-control.portal-botao.portal-botao_info,
.dashboard-content .filter-container .e-lib.e-btn.e-control.portal-botao.portal-botao_info,
.dashboard-content .filter-form .e-lib.e-btn.e-control.portal-botao.portal-botao_info,
.dashboard-content .report-toolbar .e-lib.e-btn.e-control.portal-botao.portal-botao_info,
.dashboard-content .employee_data_col .e-lib.e-btn.e-control.portal-botao.portal-botao_info,
.dashboard-content .dashboard_toolbar_actions .e-lib.e-btn.e-control.portal-botao.portal-botao_info {
    background-color: #5bc0de !important;
    color: #fff !important;
    border-color: transparent !important;
}

    .dashboard-content .page-actions .e-lib.e-btn.e-control.portal-botao.portal-botao_info:hover,
    .dashboard-content .page-actions .e-lib.e-btn.e-control.portal-botao.portal-botao_info:focus,
    .dashboard-content .page-actions .e-lib.e-btn.e-control.portal-botao.portal-botao_info:active,
    .dashboard-content .filter-container .e-lib.e-btn.e-control.portal-botao.portal-botao_info:hover,
    .dashboard-content .filter-container .e-lib.e-btn.e-control.portal-botao.portal-botao_info:focus,
    .dashboard-content .filter-container .e-lib.e-btn.e-control.portal-botao.portal-botao_info:active,
    .dashboard-content .filter-form .e-lib.e-btn.e-control.portal-botao.portal-botao_info:hover,
    .dashboard-content .filter-form .e-lib.e-btn.e-control.portal-botao.portal-botao_info:focus,
    .dashboard-content .filter-form .e-lib.e-btn.e-control.portal-botao.portal-botao_info:active,
    .dashboard-content .report-toolbar .e-lib.e-btn.e-control.portal-botao.portal-botao_info:hover,
    .dashboard-content .report-toolbar .e-lib.e-btn.e-control.portal-botao.portal-botao_info:focus,
    .dashboard-content .report-toolbar .e-lib.e-btn.e-control.portal-botao.portal-botao_info:active,
    .dashboard-content .employee_data_col .e-lib.e-btn.e-control.portal-botao.portal-botao_info:hover,
    .dashboard-content .employee_data_col .e-lib.e-btn.e-control.portal-botao.portal-botao_info:focus,
    .dashboard-content .employee_data_col .e-lib.e-btn.e-control.portal-botao.portal-botao_info:active,
    .dashboard-content .dashboard_toolbar_actions .e-lib.e-btn.e-control.portal-botao.portal-botao_info:hover,
    .dashboard-content .dashboard_toolbar_actions .e-lib.e-btn.e-control.portal-botao.portal-botao_info:focus,
    .dashboard-content .dashboard_toolbar_actions .e-lib.e-btn.e-control.portal-botao.portal-botao_info:active {
        background-color: #31b0d5 !important;
        color: #fff !important;
    }

.form-label {
    font-weight: 500;
    margin-bottom: 5px;
    display: block;
}

.employee_data_col {
    display: flex;
    flex-direction: column;
    gap: 0;
}

    .employee_data_col .form-row {
        display: flex;
        flex-wrap: wrap;
        gap: 16px 24px;
        margin-bottom: 16px;
        align-items: flex-start;
    }

    .employee_data_col .form-group {
        display: flex;
        flex-direction: column;
        min-width: 120px;
        flex: 1;
        max-width: 280px;
    }

    .employee_data_col .form-group .form-label + .form-label {
        margin-top: 16px;
    }

        .employee_data_col .form-group:empty {
            max-width: none;
            flex: 0 0 0;
        }

    .employee_data_col .form-group.active_toggle_field_group {
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        flex: 0 0 auto;
        max-width: none;
    }

    .employee_data_col .form-control {
        padding: 6px 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 14px;
        width: 100%;
    }

    .employee_data_col .separator {
        margin: 24px 0 12px;
        border-top: 1px solid #e0e0e0;
        padding-top: 12px;
    }

    .employee_data_col .label-separator {
        font-weight: 600;
        font-size: 16px;
        color: #323537;
    }

.employee-photo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Profile edit: photo column + form (utentes / funcionários) */
.profile_edit_layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px 32px;
    align-items: start;
}

@media (max-width: 900px) {
    .profile_edit_layout {
        grid-template-columns: 1fr;
    }
}

.profile_edit_photo_col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 220px;
}

.profile_edit_photo_frame {
    position: relative;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    background: #fff;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    box-sizing: border-box;
}

.profile_edit_photo_trash {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
}

.profile_edit_avatar {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.profile_edit_avatar_placeholder {
    object-fit: contain;
    padding: 8px;
}

.profile_edit_photo_input_hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.profile_edit_add_photo_btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px dashed #b8b8b8;
    background: #fafafa;
    padding: 10px 12px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    font-size: 13px;
    color: #555;
    font-weight: 500;
}

.profile_edit_add_photo_btn:hover {
    background: #f0f0f0;
    border-color: #2595D2;
    color: #323537;
}

.profile_edit_form_col .employee_data_col .form-group.form-group_full {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 100%;
}

.profile_edit_form_col .employee_data_col .form-group {
    max-width: none;
}

.profile_edit_form_col .employee_data_col .form-row {
    align-items: flex-start;
}

.profile_edit_header_row {
    flex-wrap: nowrap;
}

.profile_edit_header_row .form-group {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
}

@media (min-width: 769px) {
    .profile_edit_header_row .form-group:first-child {
        flex: 0 1 220px;
    }

    .profile_edit_header_row .form-group:nth-child(2) {
        flex: 1 1 280px;
    }

    .profile_edit_header_row .form-group:nth-child(3) {
        flex: 0 1 240px;
    }
}

.profile_edit_form_col .employee_data_col .form-control:not(textarea),
.profile_edit_form_col .employee_data_col select.form-control {
    min-height: 30px;
    max-height: 30px;
    height: 30px;
    box-sizing: border-box;
    padding: 0 10px;
    line-height: 30px;
}

/* Native inputs/selects on edit forms — same 30px + vertically centred text */
.employee_data_col input.form-control:not([type="checkbox"]):not([type="radio"]),
.employee_data_col select.form-control {
    min-height: 30px;
    max-height: 30px;
    height: 30px;
    padding: 0 10px;
    line-height: 30px;
    box-sizing: border-box;
}

.form-label_check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    cursor: pointer;
}

    .form-label_check input[type="checkbox"] {
        width: auto;
    }

.form-radio_group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
}

    .form-radio_group label {
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        font-weight: 400;
    }

.form-check_list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

    .form-check_list .form-label_check {
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
    }

.form-message {
    padding: 16px;
    color: #666;
    border-radius: 4px;
}

.form-message_success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-message_error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.form-message_info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
    padding: 10px 16px;
    border-radius: 4px;
    font-size: 13px;
}

/* List selector actions (select all, clear) */
.list-selector_actions {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

/* Multi-select list control */
.form-control_list {
    min-height: 180px;
    max-width: none;
}

/* Add/Edit form tabs (separadores) */
.addedit_tabs {
    margin-top: 12px;
}

.addedit_tab_nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 0;
    padding: 0;
    list-style: none;
}

.addedit_tab_btn {
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    color: #666;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    margin-bottom: -1px;
}

    .addedit_tab_btn:hover {
        color: #323537;
        background: #eee;
    }

.addedit_tab_btn_active {
    color: #2595D2;
    background: #fff;
    border-color: #e0e0e0;
    border-bottom: 1px solid #fff;
}

.addedit_tab_content {
    padding: 20px 0 0;
    border: 1px solid #e0e0e0;
    border-top: none;
    border-radius: 0 0 8px 8px;
    background: #fff;
}

.addedit_tab_panel {
    display: none;
    padding: 0 20px 20px;
}

.addedit_tab_panel_visible {
    display: block;
}


.portal-grid_wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: auto;
}

/* List pages: fill dashboard content width so grids align with header / scrollbar */
#mainDashboard .dashboard-content > .page-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    box-sizing: border-box;
}

/* List pages: stretch grid vertically to use remaining viewport under header/filters */
#mainDashboard .dashboard-content > .page-container > .portal-grid_wrapper.syncfusion-grid-override {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

    #mainDashboard .dashboard-content > .page-container > .portal-grid_wrapper.syncfusion-grid-override .e-grid {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    #mainDashboard .dashboard-content > .page-container > .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-gridcontent {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    #mainDashboard .dashboard-content > .page-container > .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-gridcontent .e-content {
        flex: 1 1 auto;
        min-height: 0;
    }

    /* DevExpress DxGrid inside portal wrapper - optional overrides to align with portal-grid look */
    .portal-grid_wrapper.dx-grid-override .portal-grid_btn {
        padding: 4px;
        border: none;
        background: transparent;
        cursor: pointer;
    }

    /* Syncfusion SfGrid - hide internal header_table id text that appears when theme loads late (e.g. after refresh) */
    .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-gridheader caption,
    .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-columnheader .e-label:empty,
    .portal-grid_wrapper.syncfusion-grid-override .e-grid [id$="_header_table"] + .e-label,
    .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-headercelldiv .e-label[id$="_header_table"] {
        display: none !important;
        font-size: 0 !important;
        line-height: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
    }

    /* Syncfusion SfGrid inside portal wrapper - match portal-grid visual and app font */
    .portal-grid_wrapper.syncfusion-grid-override .e-grid,
    .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-headercell,
    .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-rowcell,
    .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-pager,
    .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-input {
        font-family: 'Montserrat', sans-serif;
    }
    /* Grid separator lines: thinnest possible (0.5px), override theme */
    .portal-grid_wrapper.syncfusion-grid-override .e-grid {
        font-size: 11px;
        border: 0.5px solid #e0e0e0 !important;
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Syncfusion: stretch header/body/pager/toolbar to wrapper width (avoid right gutter when column sum < 100%) */
    .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-gridheader,
    .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-gridcontent,
    .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-pager,
    .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-toolbar {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-headercontent,
    .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-gridcontent .e-content {
        width: 100% !important;
        box-sizing: border-box;
    }

    .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-gridheader .e-table,
    .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-gridcontent .e-table {
        width: 100% !important;
        box-sizing: border-box;
    }

        .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-gridheader,
        .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-gridheader .e-headercell {
            border-width: 0.5px !important;
            border-color: #e0e0e0 !important;
        }

        .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-gridheader {
            background-color: #f5f5f5;
            border-bottom: 0.5px solid #e0e0e0 !important;
        }

        .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-headercell {
            background-color: #f5f5f5;
            font-weight: bold;
            padding: 10px 12px;
            border: none !important;
            border-right: 0.5px solid #e0e0e0 !important;
            border-bottom: 0.5px solid #e0e0e0 !important;
        }

        .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-headercelldiv {
            font-size: 11px;
            color: inherit;
        }

        /* Body rows: horizontal separators only; vertical lines stay on header (.e-headercell).
           overflow must clip by default so long cell content (e.g. comma-separated service
           lists) truncates with an ellipsis instead of bleeding into neighboring columns;
           the active-toggle button cell opts back into overflow: visible below. */
        .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-gridcontent .e-rowcell,
        .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-gridcontent td.e-rowcell {
            padding: 6px 12px;
            border: none !important;
            border-bottom: 0.5px solid #e0e0e0 !important;
            border-left: none !important;
            border-right: none !important;
            height: 36px;
            max-height: 36px;
            line-height: 1.2;
            vertical-align: middle;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            box-sizing: border-box;
        }

        .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-gridcontent .e-rowcell.e-ellipsis,
        .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-gridcontent td.e-rowcell.e-ellipsis {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-gridcontent .e-rowcell.e-ellipsis .e-cellcontent {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-gridcontent tr.e-row {
            height: 36px !important;
            max-height: 36px !important;
            overflow: visible;
        }

        .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-gridcontent .e-table {
            overflow: visible;
        }

        .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-frozenbodycontent .e-rowcell,
        .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-movablecontent .e-rowcell,
        .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-summarycontent .e-rowcell {
            border-left: none !important;
            border-right: none !important;
        }

        .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-row:hover .e-rowcell {
            background-color: #fafafa;
        }

        /* Empty datasource: center message; colspan is corrected in wwwroot/js/site.js */
        .portal-grid_wrapper.syncfusion-grid-override .e-grid tbody tr.e-emptyrow td,
        .portal-grid_wrapper.syncfusion-grid-override .e-grid tbody tr.e-emptyrow th {
            text-align: center !important;
            vertical-align: middle;
        }

        .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-pager {
            padding: 12px;
            border-top: 0.5px solid #e0e0e0 !important;
            background: #fff;
        }

        .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-toolbar {
            background: #fff !important;
            border: none !important;
            box-shadow: none !important;
            padding: 0 !important;
        }

            .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-toolbar .e-toolbar-items {
                justify-content: flex-start;
            }

    .portal-grid_wrapper.syncfusion-grid-override .portal-grid_btn {
        padding: 4px;
        border: none;
        background: transparent;
        cursor: pointer;
    }

/* Syncfusion grids (anywhere in app shell / dialogs): empty row message alignment */
#mainDashboard .dashboard-content .e-grid {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
}

#mainDashboard .dashboard-content .e-grid .e-gridheader,
#mainDashboard .dashboard-content .e-grid .e-gridcontent,
#mainDashboard .dashboard-content .e-grid .e-pager,
#mainDashboard .dashboard-content .e-grid .e-toolbar {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
}

#mainDashboard .dashboard-content .e-grid .e-headercontent,
#mainDashboard .dashboard-content .e-grid .e-gridcontent .e-content {
    width: 100% !important;
    box-sizing: border-box;
}

#mainDashboard .dashboard-content .e-grid .e-gridheader .e-table,
#mainDashboard .dashboard-content .e-grid .e-gridcontent .e-table {
    width: 100% !important;
    box-sizing: border-box;
}

#mainDashboard .e-grid tbody tr.e-emptyrow td,
#mainDashboard .e-grid tbody tr.e-emptyrow th,
.e-dlg-container .e-grid tbody tr.e-emptyrow td,
.e-dlg-container .e-grid tbody tr.e-emptyrow th {
    text-align: center !important;
    vertical-align: middle;
}

/* Group toolbar: custom “agrupar campos” icon (sync with grid toolbar height) */
.e-toolbar-group-toggle {
    cursor: pointer;
    user-select: none;
}

.toolbar-group-drop-icon {
    width: 22px;
    height: 22px;
    display: block;
    object-fit: contain;
    flex-shrink: 0;
}

.toolbar-group-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.portal-grid {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    table-layout: fixed;
}

.portal-grid_th,
.portal-grid_td {
    padding: 10px 12px;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
}

.portal-grid_th {
    font-weight: bold;
    background-color: #f5f5f5;
}

.portal-grid_th_sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    padding-right: 20px;
    position: relative;
}

    .portal-grid_th_sortable:hover {
        background-color: #ebebeb;
    }

    .portal-grid_th_sortable::after {
        content: "";
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0.35;
        border: 4px solid transparent;
        border-top-color: currentColor;
        border-bottom: none;
        margin-top: -2px;
    }

.portal-grid_th_sort_asc::after {
    opacity: 1;
    border-bottom-color: currentColor;
    border-top: none;
    margin-top: 2px;
}

.portal-grid_th_sort_desc::after {
    opacity: 1;
    margin-top: -2px;
}

.portal-grid_sort_link {
    color: inherit;
    text-decoration: none;
}

    .portal-grid_sort_link:hover {
        text-decoration: underline;
    }

.portal-grid_th_center,
.portal-grid_td_center {
    text-align: center;
}

.portal-grid_tr:hover {
    background-color: #fafafa;
}

.portal-grid_empty {
    text-align: center;
    color: #666;
    padding: 24px;
}

.portal-grid-imagem {
    width: 24px;
    height: 24px;
    object-fit: contain;
    vertical-align: middle;
}

.portal-grid-imagem_thumb {
    width: 40px;
    height: 40px;
}

.active_toggle_icon_grid {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
    transform: scale(2);
    transform-origin: center center;
}

.active_toggle_icon_form {
    width: 64px;
    height: 64px;
}

.portal-grid_btn.active_toggle_grid_btn {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    padding: 0;
    margin: 0 auto;
    line-height: 0;
    overflow: visible;
    vertical-align: middle;
    flex-shrink: 0;
}

.portal-grid_wrapper.syncfusion-grid-override .e-grid .e-rowcell:has(.active_toggle_grid_btn) {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    line-height: 0;
    vertical-align: middle;
    overflow: visible;
}

.portal-grid_wrapper.syncfusion-grid-override .e-grid .e-rowcell:has(.active_toggle_grid_btn) > div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    line-height: 0;
    overflow: visible;
}

.active_toggle_field_group {
    justify-content: flex-end;
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
}

.active_toggle_field {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
}

.active_toggle_field .form-label {
    display: inline;
    margin-bottom: 0;
    white-space: nowrap;
}

.active_toggle_field_group .form-label {
    margin-bottom: 0;
    white-space: nowrap;
}

.active_toggle_field_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: none;
    border: none;
    cursor: pointer;
}

.active_toggle_inline {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.active_toggle_inline .active_toggle_icon_form {
    width: 64px;
    height: 64px;
}

.portal-grid_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

    .portal-grid_btn:hover {
        opacity: 0.8;
    }

    .portal-grid_btn img:not(.active_toggle_icon_grid) {
        display: block;
    }

.grid-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
}

.grid-pager_left {
    font-size: 14px;
    color: #515151;
}

.grid-pager_center {
    display: flex;
    align-items: center;
    gap: 8px;
}

.grid-pager_btn {
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
}

    .grid-pager_btn:hover:not(:disabled) {
        background: #f0f0f0;
    }

    .grid-pager_btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

a.grid-pager_btn {
    text-decoration: none;
    color: inherit;
}

.grid-pager_btn_disabled {
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f5f5f5;
    font-size: 14px;
    opacity: 0.6;
    cursor: default;
}

.grid-pager_size_form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.grid-pager_page {
    padding: 6px 12px;
    font-weight: 600;
}

.grid-pager_right {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .grid-pager_right label {
        font-size: 14px;
        margin: 0;
    }

.grid-pager_select {
    min-width: 60px;
}

.portal-modal_backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1040;
}

.portal-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    min-width: 320px;
}

.portal-modal_actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    justify-content: flex-end;
}

.portal-modal_actions_leading {
    margin-right: auto;
}

.portal-botao_secondary {
    background: #f5f5f5;
    color: #333;
    border: 1px solid #ccc;
}

    .portal-botao_secondary:hover {
        background: #e8e8e8;
        border-color: #999;
    }

.client_delete_dialog .portal-modal_actions .e-btn.portal-botao_secondary:first-child,
.client_delete_dialog .portal-modal_actions .portal-botao.portal-botao_secondary:first-child {
    background: #2595D2 !important;
    color: #fff !important;
    border: 1px solid #2595D2 !important;
}

    .client_delete_dialog .portal-modal_actions .e-btn.portal-botao_secondary:first-child:hover,
    .client_delete_dialog .portal-modal_actions .e-btn.portal-botao_secondary:first-child:focus,
    .client_delete_dialog .portal-modal_actions .e-btn.portal-botao_secondary:first-child:active,
    .client_delete_dialog .portal-modal_actions .portal-botao.portal-botao_secondary:first-child:hover,
    .client_delete_dialog .portal-modal_actions .portal-botao.portal-botao_secondary:first-child:focus,
    .client_delete_dialog .portal-modal_actions .portal-botao.portal-botao_secondary:first-child:active {
        background: #1f88bf !important;
        color: #fff !important;
        border-color: #1f88bf !important;
    }

.client_delete_dialog .portal-modal_actions .e-btn.portal-botao_secondary:last-child,
.client_delete_dialog .portal-modal_actions .portal-botao.portal-botao_secondary:last-child {
    background: #f5f5f5 !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
}

    .client_delete_dialog .portal-modal_actions .e-btn.portal-botao_secondary:last-child:hover,
    .client_delete_dialog .portal-modal_actions .e-btn.portal-botao_secondary:last-child:focus,
    .client_delete_dialog .portal-modal_actions .e-btn.portal-botao_secondary:last-child:active,
    .client_delete_dialog .portal-modal_actions .portal-botao.portal-botao_secondary:last-child:hover,
    .client_delete_dialog .portal-modal_actions .portal-botao.portal-botao_secondary:last-child:focus,
    .client_delete_dialog .portal-modal_actions .portal-botao.portal-botao_secondary:last-child:active {
        background: #ececec !important;
        color: #333 !important;
        border-color: #bdbdbd !important;
    }

.client_import_dialog .portal-modal_actions .e-btn.portal-botao:not(.portal-botao_secondary) {
    background: #2595D2 !important;
    color: #fff !important;
    border: 1px solid #2595D2 !important;
}

    .client_import_dialog .portal-modal_actions .e-btn.portal-botao:not(.portal-botao_secondary):hover,
    .client_import_dialog .portal-modal_actions .e-btn.portal-botao:not(.portal-botao_secondary):focus,
    .client_import_dialog .portal-modal_actions .e-btn.portal-botao:not(.portal-botao_secondary):active {
        background: #1f88bf !important;
        color: #fff !important;
        border-color: #1f88bf !important;
    }

.client_import_dialog .portal-modal_actions .e-btn.portal-botao.portal-botao_secondary {
    background: #f5f5f5 !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
}

    .client_import_dialog .portal-modal_actions .e-btn.portal-botao.portal-botao_secondary:hover,
    .client_import_dialog .portal-modal_actions .e-btn.portal-botao.portal-botao_secondary:focus,
    .client_import_dialog .portal-modal_actions .e-btn.portal-botao.portal-botao_secondary:active {
        background: #ececec !important;
        color: #333 !important;
        border-color: #bdbdbd !important;
    }

    .portal-botao_secondary img {
        filter: none;
    }

.portal-botao_danger {
    background-color: #dc3545;
    color: #fff;
}

    .portal-botao_danger:hover {
        background-color: #c82333;
    }

.portal-botao_success {
    background-color: #5cb85c;
    color: #fff;
    border: 1px solid transparent;
}

    .portal-botao_success:hover {
        background-color: #449d44;
    }

.portal-botao_warning {
    background-color: #f0ad4e;
    color: #fff;
    border: 1px solid transparent;
}

    .portal-botao_warning:hover {
        background-color: #ec971f;
    }

.portal-botao_info {
    background-color: #5bc0de;
    color: #fff;
    border: 1px solid transparent;
}

    .portal-botao_info:hover {
        background-color: #31b0d5;
    }

/* Report Toolbar */
.report-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.report-toolbar_left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.report-toolbar_right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* .report-toolbar_right .portal-botao inherits from .portal-botao */

.report-total {
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

/* Report grid full height */
.report-grid-fullheight {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

    .report-grid-fullheight .e-grid {
        flex: 1;
        min-height: 0;
    }

/* Report placeholder */
.report-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 200px;
    background-color: #f9f9f9;
    border: 1px dashed #ccc;
    border-radius: 8px;
    color: #666;
    font-size: 14px;
}

/* Permissions Tree */
.permissions-tree_actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.permissions_tree_select_all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
    cursor: pointer;
    font-size: 14px;
    user-select: none;
}

.permissions_tree_select_all input[type="checkbox"] {
    cursor: pointer;
}

.permissions_tree_toggle_spacer {
    display: inline-flex;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.permissions_tree_toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.permissions_tree_toggle_icon {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid #495057;
    transition: transform 0.15s ease;
}

.permissions_tree_toggle_icon_expanded {
    transform: rotate(90deg);
}

.permissions_tree_section {
    background-color: #dee2e6;
    font-weight: 700;
}

.permissions_tree_page {
    background-color: #e9ecef;
    font-weight: 600;
}

.permissions_tree_separator {
    margin: 10px 0 6px 12px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #6c757d;
    letter-spacing: 0.04em;
}

.permissions-tree_search {
    margin-top: 0;
}

.profile_edit_header_row .permissions-tree_search {
    margin-top: 0;
}

.permissions-tree {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    background-color: #fafafa;
}

.profile_loading_state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 260px;
}

.profile_loading_text {
    font-size: 13px;
    font-weight: 500;
    color: #555;
}

.tree-node {
    margin-bottom: 8px;
}

.tree-node_nested {
    margin-bottom: 0;
}

.tree-node_parent {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background-color: #e9ecef;
    border-radius: 6px;
    font-weight: 600;
}

    .tree-node_parent input[type="checkbox"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

.tree-node_label {
    cursor: pointer;
    user-select: none;
}

.tree-node_children {
    margin-left: 24px;
    margin-top: 4px;
    border-left: 2px solid #ddd;
    padding-left: 12px;
}

.tree-node_children .tree-node_children {
    margin-left: 20px;
}

.tree-node_child {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 4px;
}

    .tree-node_child:hover {
        background-color: #f0f0f0;
    }

    .tree-node_child input[type="checkbox"] {
        width: 16px;
        height: 16px;
        cursor: pointer;
    }

        .tree-node_child input[type="checkbox"]:disabled {
            cursor: not-allowed;
            opacity: 0.6;
        }

    .tree-node_child .text-muted {
        color: #999;
    }

/* Large Modal for Import */
.portal-modal_large {
    width: 90%;
    max-width: 1000px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.about_modal.portal-modal_large {
    width: 94vw;
    max-width: 1280px;
    max-height: 94vh;
}

/* Syncfusion DateTimePicker applies CssClass to the popup; .form-control uses width:100% and stretches the calendar outside the modal. */
.portal-modal_schedule_edit .schedule_modal_datetime.e-control-wrapper {
    width: 100%;
    max-width: 100%;
    font-size: 14px;
}

.portal-modal_schedule_edit .e-popup.schedule_modal_datetime,
.portal-modal_schedule_edit .e-popup:has(.e-calendar) {
    width: auto !important;
    max-width: min(340px, calc(100vw - 48px)) !important;
    min-width: 260px;
    box-sizing: border-box;
}

.portal-modal_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 15px;
}

    .portal-modal_header h3 {
        margin: 0;
        font-size: 18px;
        color: #333;
    }

.portal-modal_close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
    padding: 0;
    line-height: 1;
}

    .portal-modal_close:hover {
        color: #333;
    }

.portal-modal_body {
    flex: 1;
    overflow-y: auto;
    padding-right: 5px;
}

.import-preview-grid {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 15px;
}

.import-summary {
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 4px;
    margin-bottom: 15px;
}

    .import-summary p {
        margin: 0;
        font-size: 14px;
        color: #666;
    }

.form-help {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
}

.form-error {
    color: #dc3545;
}

.form-success {
    color: #28a745;
}

.form-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 0.9em;
}

.form-readonly-list {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px 14px;
    font-size: 0.88em;
    color: #495057;
    line-height: 1.8;
}

/* Tabs Styles */
.tabs-container {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.tabs-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
}

.tabs-header_nav {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.tabs-header_context {
    margin-left: auto;
    padding: 0 16px 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: #323537;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(48vw, 460px);
    line-height: 1.3;
}

.tab-button-tooltip-wrapper {
    display: inline-flex;
}

.tab-button {
    padding: 12px 20px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    color: #666;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
}

    .tab-button:hover {
        background-color: #e8e8e8;
        color: #333;
    }

    .tab-button:disabled,
    .tab-button-disabled {
        cursor: not-allowed;
        opacity: 0.55;
    }

        .tab-button:disabled:hover,
        .tab-button-disabled:hover {
            background: none;
            color: #666;
        }

    .tab-button.active {
        background-color: #fff;
        color: #323537;
        border-bottom-color: #323537;
        font-weight: 500;
    }

/* SfButton in tab strips: Syncfusion + Bootstrap --bs-primary otherwise paint tabs like solid primary buttons */
.tabs-header .e-btn.tab-button,
.tabs-header .e-lib.e-btn.e-control.tab-button {
    background: none !important;
    background-color: transparent !important;
    color: #666 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: normal !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

    .tabs-header .e-btn.tab-button:hover,
    .tabs-header .e-lib.e-btn.e-control.tab-button:hover {
        background-color: #e8e8e8 !important;
        color: #333 !important;
    }

    .tabs-header .e-btn.tab-button.active,
    .tabs-header .e-lib.e-btn.e-control.tab-button.active {
        background-color: #fff !important;
        color: #323537 !important;
        border-bottom: 3px solid #323537 !important;
        font-weight: 500 !important;
    }

    .tabs-header .e-btn.tab-button:disabled,
    .tabs-header .e-lib.e-btn.e-control.tab-button:disabled {
        cursor: not-allowed !important;
        opacity: 0.55 !important;
    }

.sub-tabs .e-btn.sub-tab-button,
.sub-tabs .e-lib.e-btn.e-control.sub-tab-button {
    background-color: transparent !important;
    color: #666 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-bottom: -2px !important;
    border-bottom: 2px solid transparent !important;
}

    .sub-tabs .e-btn.sub-tab-button:hover,
    .sub-tabs .e-lib.e-btn.e-control.sub-tab-button:hover {
        color: #323537 !important;
        background-color: #f5f5f5 !important;
    }

    .sub-tabs .e-btn.sub-tab-button.active,
    .sub-tabs .e-lib.e-btn.e-control.sub-tab-button.active {
        color: #323537 !important;
        border-bottom-color: #323537 !important;
        font-weight: 600 !important;
    }

.tabs-content {
    padding: 20px;
}

.tab-panel h3 {
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    color: #333;
    font-size: 18px;
}

.tab-panel h4 {
    margin: 20px 0 15px 0;
    color: #666;
    font-size: 15px;
}

/* Password Strength Indicators */
.strength-unacceptable {
    color: #dc3545;
}

.strength-weak {
    color: #fd7e14;
}

.strength-acceptable {
    color: #ffc107;
}

.strength-strong {
    color: #28a745;
}

.strength-safe {
    color: #20c997;
}

/* Configuration Page Styles */
.config-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.config-column {
    flex: 1;
    min-width: 300px;
    max-width: 500px;
}

    .config-column h4 {
        margin: 20px 0 15px 0;
        color: #333;
        font-size: 15px;
        border-bottom: 1px solid #eee;
        padding-bottom: 8px;
    }

.fieldset-section {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.fieldset-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    font-weight: 500;
    font-size: 16px;
    color: #333;
}

/* Configuration Form Styles */
.tab-panel .form-group {
    margin-bottom: 20px;
}

    .tab-panel .form-group label {
        display: block;
        margin-bottom: 6px;
        color: #555;
        font-weight: 500;
    }

    .tab-panel .form-group.active_toggle_field_group .active_toggle_field .form-label {
        display: inline;
        margin-bottom: 0;
    }

    .tab-panel .form-group .e-checkbox-wrapper {
        display: inline-flex;
        align-items: center;
        margin-top: 2px;
        margin-left: 0;
        padding-left: 0;
    }

.tab-panel .form-group_checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

    .tab-panel .form-group_checkbox input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin: 0;
        cursor: pointer;
        accent-color: #323537;
    }

    .tab-panel .form-group_checkbox label {
        display: inline;
        margin-bottom: 0;
        cursor: pointer;
        font-weight: normal;
    }

.tab-panel .form-control {
    width: 100%;
    max-width: 400px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

    .tab-panel .form-control:focus {
        outline: none;
        border-color: #323537;
        box-shadow: 0 0 0 2px rgba(50, 53, 55, 0.1);
    }

.tab-panel select.form-control {
    background-color: #fff;
}

.config-column .form-group {
    margin-bottom: 18px;
}

/* Template info button and panel */
.btn-info-template {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    border: 1px solid #323537;
    border-radius: 50%;
    background-color: #323537;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    font-style: italic;
    cursor: pointer;
    vertical-align: middle;
}

    .btn-info-template:hover {
        background-color: #4a4d50;
    }

.template-info-panel {
    margin-top: 10px;
    margin-bottom: 15px;
    padding: 12px 16px;
    background-color: #e3f2fd;
    border: 1px solid #90caf9;
    border-radius: 4px;
    font-size: 13px;
}

    .template-info-panel ul {
        margin: 8px 0 0 0;
        padding-left: 20px;
    }

    .template-info-panel li {
        margin-bottom: 4px;
    }

    .template-info-panel code {
        background-color: #fff;
        padding: 1px 5px;
        border-radius: 3px;
        font-family: 'Courier New', monospace;
        font-size: 12px;
    }

/* Image upload container */
.image-upload-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Unified image upload (click + drag-and-drop) */
.image_uploader {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.image_uploader_preview_row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.image_uploader_preview {
    display: flex;
    justify-content: flex-start;
}

.image_uploader_preview_img {
    max-width: 120px;
    max-height: 120px;
    object-fit: contain;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    background: #fff;
}

.image_uploader_control {
    width: 100%;
    border: none;
}

.image_uploader_control .e-upload {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    border: 2px dashed #b8b8b8;
    border-radius: 4px;
    min-height: 52px;
    padding: 0.5rem 0.75rem;
    background: #fff;
    box-sizing: border-box;
}

.image_uploader_control .e-file-select-wrap {
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}

.image_uploader_control .e-upload-files {
    display: none;
}

.image_uploader_drop_zone {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.image_uploader_remove_btn {
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
    padding: 0.35rem 0.45rem;
}

.image_uploader_remove_btn img {
    display: block;
    width: 16px;
    height: 16px;
}

.image_uploader_drop_zone_text {
    flex: 1 1 auto;
    min-width: 0;
    color: #8a8a8a;
    font-size: 0.85rem;
    line-height: 1.35;
    text-align: left;
}

.image_uploader_compact .image_uploader_control .e-upload {
    min-height: 44px;
    padding: 0.35rem 0.5rem;
    gap: 0.35rem;
}

.image_uploader_compact .image_uploader_drop_zone_text {
    font-size: 0.75rem;
    line-height: 1.25;
}

.image_uploader_compact .image_uploader_preview_img {
    max-width: 80px;
    max-height: 80px;
}

.profile_edit_photo_col .image_uploader_preview_img {
    width: 160px;
    height: 160px;
    max-width: 160px;
    max-height: 160px;
    border-radius: 50%;
    object-fit: cover;
}

.image-preview {
    position: relative;
    display: inline-block;
}

.config_vt_preview_img {
    max-width: 150px;
    max-height: 150px;
}

.btn-delete-image {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    padding: 4px;
    border: none;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

    .btn-delete-image img {
        width: 20px;
        height: 20px;
    }

    .btn-delete-image:hover {
        background-color: #fee;
    }

/* Success/error text colors */
.text-success {
    color: #28a745;
}

.text-danger {
    color: #dc3545;
}

/* Sub-tabs for template selection */
.sub-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid #e0e0e0;
}

.sub-tab-button {
    padding: 8px 16px;
    border: none;
    background-color: transparent;
    color: #666;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
}

    .sub-tab-button:hover {
        color: #323537;
        background-color: #f5f5f5;
    }

    .sub-tab-button.active {
        color: #323537;
        border-bottom-color: #323537;
        font-weight: 600;
    }

/* ============================================
   DASHBOARD WIDGETS GRID LAYOUT
   ============================================ */

/* Dashboard Grid - 3 columns layout for proper spanning */
.dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    margin-top: 15px;
}

/* 2 columns on medium screens */
@media (max-width: 1600px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* 1 column on smaller screens */
@media (max-width: 900px) {
    .dashboard-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Dashboard Widget Card - subtle border */
.dashboard-widget {
    background: #ffffff;
    border: 1px solid #e6eaee;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    min-height: 280px;
    box-shadow: none;
    transition: box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
    overflow: hidden;
}

    .dashboard-widget:hover {
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
        border-color: #d7dee6;
    }

    .dashboard-widget.dragging {
        opacity: 0.7;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        transform: scale(1.01);
        z-index: 1000;
    }

    .dashboard-widget.minimized {
        min-height: auto;
    }

/* Widget column spans */
.widget-width-1 {
    grid-column: span 1;
}

.widget-width-2 {
    grid-column: span 2;
}

.widget-width-3 {
    grid-column: span 3;
}

/* Widget row spans */
.widget-height-2 {
    grid-row: span 2;
    min-height: 580px;
}

/* Responsive adjustments for column spans */
@media (max-width: 1600px) {
    .widget-width-3 {
        grid-column: span 2;
    }
}

@media (max-width: 900px) {
    .widget-width-2,
    .widget-width-3 {
        grid-column: span 1;
    }
}

/* Widget header - qtrack blue color */
.dashboard-widget .widget-header {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    background: #ffffff;
    border-bottom: 5px solid #edf0f3;
    cursor: grab;
    user-select: none;
    min-height: 28px;
    border-radius: 10px 10px 0 0;
}

    .dashboard-widget .widget-header:active {
        cursor: grabbing;
    }

.dashboard-widget .widget-title {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    color: #6e7a86;
    text-transform: none;
    letter-spacing: 0.2px;
}

.dashboard-widget .widget-actions {
    display: flex;
    gap: 4px;
}

.dashboard-widget .widget-btn {
    background: transparent;
    border: none;
    padding: 0 3px;
    cursor: pointer;
    border-radius: 0;
    font-size: 12px;
    font-weight: 700;
    color: #9aa3ac;
    transition: all 0.2s ease;
    line-height: 1;
}

    .dashboard-widget .widget-btn:hover {
        background: transparent;
        color: #6e7a86;
    }

.dashboard-widget .widget-btn-close:hover {
    background: transparent;
    color: #6e7a86;
}

/* Widget content */
.dashboard-widget .widget-content {
    flex: 1;
    padding: 12px;
    overflow-x: auto;
    overflow-y: auto;
    min-height: 200px;
    background: #fff;
    border-radius: 0 0 10px 10px;
}

.dashboard-widget .widget-content:has(.dashboard_chart_host) {
    overflow: hidden;
    min-height: 0;
}

.dashboard_chart_host {
    width: 100%;
    min-width: 0;
    min-height: 280px;
    overflow: hidden;
}

.dashboard_chart_host .e-chart,
.dashboard_chart_host .e-accumulationchart {
    width: 100% !important;
    overflow: hidden !important;
}

/* Dashboard filters */
.dashboard-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
    padding: 4px 0 0 0;
    border-bottom: none;
    margin-bottom: 0;
}

.dashboard_page_container {
    margin-bottom: 0;
    min-width: 0;
    overflow-x: hidden;
}

.dashboard_top_row {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 6px;
    margin-bottom: 6px;
}

    .dashboard_top_row .dashboard-filters {
        flex: 1;
        margin-bottom: 0;
    }

.dashboard_top_datetime {
    width: 280px;
    min-width: 280px;
    border: 1px solid #d8dce0;
    border-radius: 4px;
    background: #ffffff;
    align-self: stretch;
    display: flex;
}

    .dashboard_top_datetime .dashboard_datetime_widget {
        align-items: center;
        justify-content: center;
        min-height: 100%;
        height: 100%;
        width: 100%;
        padding: 4px 10px;
    }

    .dashboard_top_datetime .dashboard_datetime_date {
        font-size: 11px;
        text-transform: uppercase;
    }

    .dashboard_top_datetime .dashboard_datetime_time {
        font-size: 34px;
    }

.dashboard-filters .filter-group.filter-zone,
.dashboard-filters .filter-group.filter_location_multiselect_host {
    flex: 0 0 auto;
}

.dashboard-filters .filter-group.filter-zone {
    min-width: 220px;
    width: 220px;
}

.dashboard-filters .filter-group.filter_location_multiselect_host {
    min-width: 320px;
    width: 320px;
    max-width: 420px;
}

.dashboard-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 160px;
}

    .dashboard-filters .filter-group.filter-period {
        min-width: 285px;
        max-width: 330px;
    }

.dashboard-filters .filter-group:not(.filter-checkbox):not(.filter-actions) .dashboard_filter_combo.e-multiselect.e-control,
.dashboard-filters .filter-group:not(.filter-checkbox):not(.filter-actions) .dashboard_filter_combo.e-multiselect {
    width: 100% !important;
    min-width: 100%;
    max-width: 100%;
}

    .dashboard-filters .filter-group label {
        font-weight: 600;
        font-size: 1rem;
        color: #333;
    }

.dashboard-filters .filter-checkbox {
    align-self: center;
    padding-top: 14px;
    margin-bottom: -33px;
}

.dashboard-filters .filter-actions {
    align-self: flex-end;
}

/* Push the Consult action to the far right of the filter row. */
.dashboard-filters .filter-actions.dashboard_filter_actions_right {
    margin-left: auto;
}

.dashboard_consult_btn {
    text-transform: uppercase;
    min-width: 130px;
    justify-content: center;
}

/* Preferences button */
.preferences-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    margin-left: 15px;
    padding: 4px 8px;
    border-radius: 4px;
}

    .preferences-btn:hover {
        background: rgba(0, 0, 0, 0.1);
    }

.dashboard_legend_icon {
    height: 20px;
    vertical-align: middle;
}

.dashboard_legend_button_icon {
    height: 27px;
    margin-bottom: 8px;
    vertical-align: middle;
}

.dashboard_update_icon {
    height: 14px;
    margin-right: 5px;
}

.dashboard_trash_zone {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 4px 0;
    padding: 8px 12px;
    border: 1px dashed #bfc6cc;
    border-radius: 6px;
    color: #5e656b;
    background: #f8f9fa;
}

.dashboard_trash_zone_active {
    border-color: #dc3545;
    background: #fff0f1;
    color: #a8202d;
}

.dashboard_grid_area {
    margin-top: 6px;
    overflow-x: hidden;
    width: 100%;
}

.dashboard_grid_area .e-dashboardlayout.e-control {
    background: transparent;
    width: 100% !important;
}

.dashboard_grid_area .e-dashboardlayout .e-panel,
.dashboard_grid_area .e-dashboardlayout .e-panel:hover {
    border: none;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.dashboard_grid_area .e-dashboardlayout .e-panel .e-panel-container {
    overflow: visible;
}

.dashboard_grid_area .e-dashboardlayout .e-panel .e-panel-header {
    display: none;
}

.dashboard_grid_area .e-dashboardlayout .e-panel .e-panel-content {
    padding: 0;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.dashboard_grid_area .e-dashboardlayout .e-panel .e-panel-content .dashboard_layout_panel_content {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

.dashboard_grid_area .e-dashboardlayout .e-panel .e-panel-content .dashboard-widget {
    min-height: 0;
    height: 100%;
}

.dashboard_grid_area .dashboard-widget .widget-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dashboard_grid_area #widget1 .widget-content {
    overflow-y: auto;
}

.dashboard_grid_area .dashboard-widget .widget-content:has(.dashboard_chart_host) {
    padding: 8px 12px 12px;
}

.dashboard_grid_area .dashboard_chart_host {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
}

.dashboard_grid_area .dashboard_chart_host .e-chart,
.dashboard_grid_area .dashboard_chart_host .e-accumulationchart {
    height: 100% !important;
}

.dashboard_grid_area .dashboard-stats-inline {
    height: 100%;
    align-content: stretch;
}

.dashboard_grid_area .stats-card-inline {
    min-height: 0;
}

.dashboard_grid_area .e-dashboardlayout .e-panel .e-panel-container .e-resize.e-south-east {
    bottom: 0;
    right: 0;
    width: 22px;
    height: 22px;
    z-index: 210;
    pointer-events: auto;
}

.dashboard_grid_area .e-dashboardlayout .e-panel .e-panel-container .e-resize.e-east,
.dashboard_grid_area .e-dashboardlayout .e-panel .e-panel-container .e-resize.e-south {
    z-index: 210;
    pointer-events: auto;
}

.dashboard_grid_area .e-dashboardlayout .e-panel .e-panel-container .e-resize.e-west,
.dashboard_grid_area .e-dashboardlayout .e-panel .e-panel-container .e-resize.e-north {
    display: none;
}

.dashboard_grid_area .e-dashboardlayout .e-panel.e-panel-transition {
    overflow: visible;
}

.dashboard_drag_handle {
    cursor: grab;
}

.dashboard_drag_handle:active {
    cursor: grabbing;
}

.dashboard_grid_area .dashboard-widget .widget-btn,
.dashboard_grid_area .dashboard-filters input,
.dashboard_grid_area .dashboard-filters select,
.dashboard_grid_area .dashboard-filters .e-input-group,
.dashboard_grid_area .dashboard-filters .e-dropdownbase {
    cursor: pointer;
}

.dashboard_datetime_widget {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px;
}

.dashboard_datetime_date {
    font-size: 14px;
    color: #495057;
}

.dashboard_datetime_time {
    font-size: 28px;
    line-height: 1;
    font-weight: 700;
    color: #323537;
}

.dashboard-filters .dxbl-edit,
.dashboard-filters .dxbl-date-edit,
.dashboard-filters .dxbl-dropdown,
.dashboard-filters .dxbl-list-box,
.dashboard-filters .dxbl-btn {
    font-size: 16px !important;
    min-height: 34px;
}

.dashboard-filters .dxbl-input,
.dashboard-filters .dxbl-edit-input {
    font-size: 16px !important;
}

.dashboard-filters .e-btn,
.dashboard-filters .e-checkbox-wrapper {
    font-size: 16px;
    min-height: 30px;
    max-height: 30px;
}

.dashboard-filters .dashboard_date_range.e-control.e-daterangepicker {
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
}

.schedule_report_filters .dashboard_date_range {
    width: 100%;
}

@media (max-width: 900px) {
    .dashboard_page_container {
        padding-left: 8px;
        padding-right: 8px;
    }

    .dashboard_top_row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding-bottom: 8px;
    }

    .dashboard_top_datetime {
        order: -1;
        width: 100%;
        min-width: 0;
    }

    .dashboard-filters {
        order: 1;
        gap: 8px;
        align-items: stretch;
    }

        .dashboard-filters .filter-group:not(.filter-checkbox):not(.filter-actions) {
            flex: 1 1 100%;
            width: 100%;
            min-width: 0;
            max-width: 100%;
        }

            .dashboard-filters .filter-group.filter-period {
                min-width: 0;
                max-width: 100%;
            }

        .dashboard-filters .filter-group:not(.filter-checkbox):not(.filter-actions) .dashboard_filter_combo.e-multiselect.e-control,
        .dashboard-filters .filter-group:not(.filter-checkbox):not(.filter-actions) .dashboard_filter_combo.e-multiselect,
        .dashboard-filters .dashboard_date_range.e-control.e-daterangepicker {
            width: 100% !important;
            min-width: 0;
            max-width: 100% !important;
        }

        .dashboard-filters .e-btn,
        .dashboard-filters .e-checkbox-wrapper {
            width: 100%;
        }

        .dashboard-filters .filter-checkbox {
            align-self: stretch;
            flex: 0 0 100%;
            width: 100%;
            padding-top: 0;
            margin-bottom: 0;
        }

        .dashboard-filters .filter-actions {
            align-self: center;
            width: auto;
            margin-left: 0;
        }

            .dashboard-filters .filter-actions .e-btn {
                justify-content: center;
            }

    .dashboard-widget .widget-header {
        min-height: 36px;
        padding: 8px 10px;
    }

    .dashboard-widget .widget-title {
        font-size: 14px;
    }

    .dashboard-widget .widget-content {
        padding: 10px;
    }

    /* Estado Geral de Atendimento: reduce text/icon scale on mobile */
    #widget1 .stats-header-inline {
        font-size: 10px;
        padding: 5px 6px;
    }

    #widget1 .stats-icon-inline img {
        height: 42px;
    }

    #widget1 .stats-body-inline {
        padding: 6px 8px;
    }

    #widget1 .stats-row-inline {
        font-size: 11px;
        padding: 2px 0;
    }

    #widget1 .dashboard-stats-inline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .stats-row-inline--location {
        justify-content: flex-start;
    }

    .waiting-location-text {
        flex: 1;
        min-width: 0;
    }
}

/* Stats cards inside widget */
.dashboard-stats-inline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.stats-card-inline {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}

.stats-header-inline {
    background: #f6f7f9;
    color: #3a4147;
    padding: 6px 8px;
    font-weight: 600;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
    border-bottom: 1px solid #e4e7eb;
}

.stats-icon-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    background: transparent;
    border-bottom: 1px solid #edf0f3;
}

    .stats-icon-inline img {
        height: 40px;
        width: auto;
        object-fit: contain;
    }

.stats-body-inline {
    padding: 8px 10px;
    flex: 1;
}

.stats-row-inline {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
    border-bottom: 1px solid #f5f5f5;
}

    .stats-row-inline:last-child {
        border-bottom: none;
    }

    .stats-row-inline span {
        color: #666;
    }

.waiting-location-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
}

.stats-row-inline strong {
    color: #333;
}

/* Placeholder widget */
.placeholder-widget {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    color: #888;
    font-style: italic;
    background: #fafafa;
    border-radius: 8px;
}

/* ============================================
   DASHBOARD PREFERENCES PANEL
   ============================================ */

.preferences-panel {
    padding: 10px 0;
}

.preferences-hint {
    color: #666;
    font-size: 13px;
    margin-bottom: 15px;
}

.preferences-list {
    max-height: 400px;
    overflow-y: auto;
}

.preference-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    margin-bottom: 6px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

    .preference-item:hover {
        background: #e9ecef;
    }

.preference-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

    .preference-checkbox input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: #2595D2;
        cursor: pointer;
    }

    .preference-checkbox label {
        cursor: pointer;
        font-size: 13px;
        color: #333;
        font-weight: 500;
    }

.preference-size {
    flex-shrink: 0;
}

    .preference-size select {
        padding: 5px 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 12px;
        background: #fff;
        cursor: pointer;
        min-width: 100px;
    }

        .preference-size select:focus {
            outline: none;
            border-color: #2595D2;
        }

/* ============================================
   WIDGET RESIZE HANDLE
   ============================================ */

/* Resize handle in bottom-right corner */
.dashboard-widget .resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    cursor: se-resize;
    background: linear-gradient(135deg, transparent 50%, #2595D2 50%);
    border-radius: 0 0 7px 0;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.dashboard-widget:hover .resize-handle {
    opacity: 0.8;
}

.dashboard-widget .resize-handle:hover {
    opacity: 1;
}

/* Widget state during resize */
.dashboard-widget.resizing {
    z-index: 1000;
    box-shadow: 0 8px 25px rgba(37, 149, 210, 0.3);
    border-color: #2595D2;
}

/* Ensure widget has relative positioning for resize handle */
.dashboard-widget {
    position: relative;
}

/* Smooth transition for grid changes */
.dashboard-grid {
    transition: none;
}

.dashboard-widget {
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* =====================================================
   Report page styles
   ===================================================== */

/* Service tree dropdown */
.service-tree_dropdown {
    position: relative;
    width: 300px;
    max-width: 100%;
}

.service-tree_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 34px;
    padding: 0 36px 0 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #fff;
    color: #212529;
    cursor: pointer;
    font-size: 14px;
    line-height: 34px;
    box-sizing: border-box;
    position: relative;
}

    .service-tree_header:hover {
        border-color: #b6b6b6;
    }

    .service-tree_header:focus,
    .service-tree_header:focus-visible {
        outline: none;
        border-color: #b6b6b6;
        box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.12);
    }

.service-tree_arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #6c757d;
    pointer-events: none;
}

.service-tree_panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ced4da;
    border-top: none;
    border-radius: 0 0 4px 4px;
    z-index: 100;
    box-shadow: 0 4px 8px rgba(0,0,0,0.12);
}

.service-tree_item {
    padding: 6px 12px;
}

    .service-tree_item label {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        font-size: 14px;
        color: #212529;
        margin: 0;
    }

    .service-tree_item:hover {
        background: #f8f9fa;
    }

    .service-tree_item input[type="checkbox"] {
        accent-color: #2595D2;
    }

.service-tree_child {
    padding-left: 32px;
}

/* Report summary bar */
.report-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 20px;
    background: #f4f6f9;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 16px;
}

.report-summary_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 120px;
}

.report-summary_label {
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.report-summary_value {
    font-size: 20px;
    font-weight: 600;
    color: #323537;
}

/* Report container */
.report-container {
    margin-top: 16px;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.report-container .portal-grid_wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.report-container.report_erse_container .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-gridheader .e-headercelldiv,
.report-container.report_erse_container .portal-grid_wrapper.syncfusion-grid-override .e-grid .e-gridcontent .e-rowcell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* DevExpress Report Viewer - fill remaining viewport height */
.page-container:has(.report-viewer_wrapper) {
    min-height: 100%;
}

.page-container:has(.report-viewer_wrapper) > .page-header,
.page-container:has(.report-viewer_wrapper) > .filter-container,
.page-container:has(.report-viewer_wrapper) > form.filter-container,
.page-container:has(.report-viewer_wrapper) > .form-message,
.page-container:has(.report-viewer_wrapper) > .survey_loading,
.page-container:has(.report-viewer_wrapper) > .portal-grid_empty,
.page-container:has(.report-viewer_wrapper) > .alert {
    flex-shrink: 0;
}

.report-container.report-viewer_wrapper {
    flex: 1 1 auto;
    width: 100%;
    margin-top: 16px;
    overflow: hidden;
    min-height: calc(100vh - var(--dashboard-header-height) - var(--report-viewer_top_offset));
    height: calc(100vh - var(--dashboard-header-height) - var(--report-viewer_top_offset));
}

.report-container.report-viewer_wrapper > .qtrack-report-viewer,
.report-container.report-viewer_wrapper > .dx-reportviewer,
.report-container.report-viewer_wrapper > .dx-report-viewer {
    width: 100%;
    height: 100%;
    min-height: inherit;
}

/* =============================================
   DevExpress Report Viewer color overrides
   --dxbrv-primary-color: controls loading, progress bar, focus, bricks
   .dxbrv-tabs: sidebar tab strip (purple -> gray #323537)
   ============================================= */

/* Override primary color: purple -> qtrack blue (loading, progress, focus) */
.qtrack-report-viewer {
    --dxbrv-primary-color: #2595D2;
    width: 100%;
    height: 100%;
}

    /* Loading indicator - override on the element itself */
    .qtrack-report-viewer .dxbl-wait-indicator {
        --dxbl-wait-indicator-color: #2595D2 !important;
    }

    .qtrack-report-viewer .dxbl-loading-panel-message {
        --dxbl-loading-panel-message-color: #2595D2 !important;
    }

    /* Loading animation dots (report viewer specific) */
    .qtrack-report-viewer .dxv-blazor-loading-animation div:after {
        background: #2595D2 !important;
    }

    /* Native checkboxes inside report viewer: accent-color overrides purple */
    .qtrack-report-viewer input[type="checkbox"],
    .qtrack-report-viewer input[type="radio"] {
        accent-color: #2595D2;
    }

    /* DevExpress Blazor checkboxes (if used elsewhere) */
    .qtrack-report-viewer .dxbl-checkbox {
        --dxbl-checkbox-check-element-checked-bg: #2595D2 !important;
        --dxbl-checkbox-check-element-checked-hover-bg: #1d7aab !important;
        --dxbl-checkbox-checked-focus-shadow-color: rgba(37, 149, 210, 0.5) !important;
        --dxbl-checkbox-unchecked-focus-shadow-color: rgba(37, 149, 210, 0.5) !important;
    }

        .qtrack-report-viewer .dxbl-checkbox.dxbl-checkbox-checked .dxbl-checkbox-check-element {
            background-color: #2595D2 !important;
        }

    /* Sidebar tab strip: purple -> gray (same as portal-botao #323537) */
    .qtrack-report-viewer .dxbrv-tabs {
        background-color: #323537 !important;
    }

        /* Active tab on gray sidebar: slightly darker */
        .qtrack-report-viewer .dxbrv-tabs .dxbrv-active-tab {
            background: rgba(0, 0, 0, 0.3) !important;
        }

        /* Tab icon hover */
        .qtrack-report-viewer .dxbrv-tabs .dxbrv-tab-icon:hover {
            background: rgba(0, 0, 0, 0.15);
        }

/* Hidden file input inside upload button */
.portal-file_hidden {
    display: none;
}

/* Legacy ListTemplates layout classes migrated from WebQtrack.css */
.princ_col {
    width: 100%;
}

    .princ_col .one_col {
        width: 100%;
    }

    .princ_col li {
        list-style: none;
        float: left;
        margin-right: 8px;
    }

        .princ_col li.name {
            min-width: 110px;
            padding-top: 8px;
        }

.pagebgTitle {
    color: #616161;
    font-size: 16px;
    font-weight: 500;
}

.top_filter {
    width: 100%;
    margin-top: 10px;
}

.PanelDevicesFormat tr {
    float: none;
}

.PanelDevicesFormat .OnePanelTemplate {
    border: 0;
}

.PanelDevicesFormat .TemplateEdite {
    background-color: #e6e6e6 !important;
    border-top: 1px solid #616161 !important;
    border-right: 1px solid #616161 !important;
    width: 55.5px !important;
}

.PanelDevicesFormat .TemplateName {
    width: 97.5%;
    font-weight: bold;
    color: white !important;
    background-color: #616161 !important;
    border-bottom: 1px solid #ccc !important;
}

.PanelDevicesFormat .TemplateImageDefault img,
.PanelDevicesFormat .TemplateImageDefault input {
    max-width: 244px;
    max-height: 137px;
    height: auto !important;
    width: auto !important;
}

.ComponetUpload .IconUpload {
    padding: 5px 10px 5px 10px;
    float: left;
    z-index: 10;
}

.upload-btn-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

    .upload-btn-wrapper button {
        padding: 5px 8px 5px 8px;
        text-align: center;
        cursor: pointer;
        border: 1px solid #c4c4c4;
        font-weight: 300;
        font-size: 14px;
        border-radius: 3px !important;
        color: black;
        background: linear-gradient(to bottom, rgba(235, 235, 235, 1) 0%, rgba(205, 205, 205, 1) 100%);
        box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.35);
    }

    .upload-btn-wrapper input[type=file] {
        font-size: 20px !important;
        position: absolute;
        left: 0;
        top: 0;
        margin-left: -41px;
        opacity: 0;
    }

        .upload-btn-wrapper input[type=file]:hover {
            cursor: pointer;
        }

/* Warning message */
.form-message_warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
    padding: 10px 16px;
    border-radius: 4px;
    margin-bottom: 12px;
}

/* ===== Template List - Modern Card Grid ===== */
.template_toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 16px;
    gap: 12px;
}

.template_upload_btn {
    cursor: pointer;
    gap: 6px;
    border-radius: 10px !important;
}

.template_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

@media (max-width: 1200px) {
    .template_grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .template_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .template_grid {
        grid-template-columns: 1fr;
    }
}

.template_card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

    .template_card:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
    }

.template_card_image_link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #f0f2f5;
    overflow: hidden;
    position: relative;
}

.template_card_image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.template_card_placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e8ecf1, #f5f7fa);
}

.template_card_placeholder_icon {
    width: 48px;
    height: 48px;
    opacity: 0.35;
}

.canvas_preview_container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.template_card_body {
    padding: 6px 10px 4px 10px;
    flex: 1;
}

.template_card_name {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}

    .template_card_name:hover {
        color: #3498db;
    }

.template_card_actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    padding: 4px 8px 6px 8px;
    border-top: 1px solid #f0f0f0;
}

.template_card_action_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    padding: 0;
    text-decoration: none;
}

    .template_card_action_btn:hover {
        background-color: #f0f2f5;
    }

.template_card_action_btn_danger:hover {
    background-color: #fdecea;
}

.template_card_action_btn img {
    width: 18px;
    height: 18px;
    display: block;
}

.template_empty {
    text-align: center;
    padding: 40px 20px;
    color: #888;
    font-size: 15px;
}

.template_create_modal {
    min-width: 420px;
    max-width: min(480px, calc(100vw - 32px));
    padding: 0;
    display: flex;
    flex-direction: column;
}

.template_create_modal .portal-modal_header {
    padding: 20px 24px 16px;
    margin-bottom: 0;
}

.template_create_modal .portal-modal_body {
    padding: 0 24px 8px;
}

.template_create_modal .portal-modal_actions {
    padding: 16px 24px 20px;
    margin-top: 0;
    border-top: 1px solid #eee;
}

.template_create_modal_section {
    margin-bottom: 16px;
}

.template_create_modal_section_title {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.template_create_modal_manual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.template_create_modal_manual .form-group {
    margin-bottom: 0;
}

/* ===== Device List - Modern Card Grid ===== */
.device_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

@media (max-width: 1200px) {
    .device_grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .device_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .device_grid {
        grid-template-columns: 1fr;
    }
}

.device_card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

    .device_card:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
    }

.device_card_header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 8px 14px;
}

.device_card_status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

@keyframes device_card_status_pulse_active {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 6px rgba(40, 167, 69, 0.45);
    }

    50% {
        transform: scale(1.12);
        box-shadow: 0 0 12px rgba(40, 167, 69, 0.75);
    }
}

@keyframes device_card_status_pulse_inactive {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 6px rgba(220, 53, 69, 0.35);
    }

    50% {
        opacity: 0.78;
        box-shadow: 0 0 9px rgba(220, 53, 69, 0.5);
    }
}

.device_card_status_active {
    background-color: #28a745;
    animation: device_card_status_pulse_active 2.1s ease-in-out infinite;
}

.device_card_status_role_signalr.device_card_status_active {
    animation-duration: 1.35s;
}

.device_card_status_inactive {
    background-color: #dc3545;
    animation: device_card_status_pulse_inactive 2.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .device_card_status_active,
    .device_card_status_inactive {
        animation: none;
    }

    .device_card_status_active {
        box-shadow: 0 0 6px rgba(40, 167, 69, 0.4);
    }

    .device_card_status_inactive {
        box-shadow: 0 0 6px rgba(220, 53, 69, 0.3);
    }
}

.device_card_name {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    line-height: 1.4;
}

    .device_card_name:hover {
        color: #3498db;
    }

.device_card_number {
    font-size: 12px;
    color: #95a5a6;
    font-weight: 500;
    flex-shrink: 0;
}

.device_card_image_link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #f0f2f5;
    overflow: hidden;
    position: relative;
}

.device_card_image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.device_card_placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e8ecf1, #f5f7fa);
}

.device_card_placeholder_icon {
    width: 48px;
    height: 48px;
    opacity: 0.35;
}

.device_card_info {
    padding: 10px 14px 4px 14px;
    flex: 1;
}

.device_card_meta {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 1.5;
}

.device_card_meta_template {
    align-items: center;
}

.device_card_meta_label {
    color: #95a5a6;
    flex-shrink: 0;
}

.device_card_meta_value {
    color: #2c3e50;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.device_card_actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    padding: 6px 10px 10px 10px;
    border-top: 1px solid #f0f0f0;
}

.device_card_action_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    padding: 0;
    text-decoration: none;
}

    .device_card_action_btn:hover {
        background-color: #f0f2f5;
    }

.device_card_action_btn_danger:hover {
    background-color: #fdecea;
}

.device_card_action_btn img {
    width: 18px;
    height: 18px;
    display: block;
}

.device_list_export_grid_hidden {
    display: none;
}

.grid_export_actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
}

.grid_export_icon_btn {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .grid_export_icon_btn img {
        width: 28px;
        height: 28px;
        display: block;
    }

.device_grid_export_actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
}

.device_grid_export_icon_btn {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .device_grid_export_icon_btn img {
        width: 28px;
        height: 28px;
        display: block;
    }

.device_card_template_select {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    border: 1px solid #dce1e6;
    border-radius: 4px;
    background: #fff;
    color: #2c3e50;
    cursor: pointer;
    transition: border-color 0.15s ease;
    max-width: 100%;
}

.device_card_template_edit_btn {
    width: 28px;
    height: 28px;
    align-self: center;
}

.device_card_template_select:hover {
    border-color: #3498db;
}

.device_card_template_select:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.15);
}

.device_general_layout {
    display: grid;
    grid-template-columns: 96px 1fr 320px;
    gap: 20px;
    align-items: start;
}

.device_general_type_image {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 20px;
}

.device_general_type_image_img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.device_general_fields .form-group {
    max-width: none;
}

.device_general_preview .form-group {
    max-width: none;
}

.device_edit_page .config-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 320px));
    gap: 16px 24px;
    align-items: start;
}

.device_edit_page .config-column {
    flex: none;
    min-width: 0;
    max-width: none;
}

.device_printing_layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 12px;
    align-items: start;
}

.device_printing_fields .form-group {
    max-width: none;
}

.device_edit_page .device_header_image_uploader .e-file-upload-btn.e-btn,
.device_edit_page .device_header_image_uploader .e-file-select-wrap .e-btn {
    background-color: #323537 !important;
    border-color: transparent !important;
    color: #fff !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    height: 30px !important;
    padding: 0 18px !important;
}

.device_edit_page .device_header_image_uploader .e-file-upload-btn.e-btn:hover,
.device_edit_page .device_header_image_uploader .e-file-upload-btn.e-btn:focus,
.device_edit_page .device_header_image_uploader .e-file-select-wrap .e-btn:hover,
.device_edit_page .device_header_image_uploader .e-file-select-wrap .e-btn:focus {
    background-color: #242729 !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
}

.device_edit_page .device_header_image_uploader .e-file-clear-btn.e-btn,
.device_edit_page .device_header_image_uploader .e-upload-actions .e-link {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #2595D2 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

.device_edit_page .device_header_image_uploader .e-file-clear-btn.e-btn:hover,
.device_edit_page .device_header_image_uploader .e-file-clear-btn.e-btn:focus,
.device_edit_page .device_header_image_uploader .e-upload-actions .e-link:hover,
.device_edit_page .device_header_image_uploader .e-upload-actions .e-link:focus {
    background: transparent !important;
    border: none !important;
    color: #1f7fb3 !important;
    text-decoration: underline !important;
    box-shadow: none !important;
}

.device_printing_preview .form-group {
    max-width: none;
}

.device_edit_page .employee_data_col .form-row {
    gap: 10px 18px;
    margin-bottom: 10px;
}

.device_edit_page .tab-panel .form-group {
    margin-bottom: 12px;
}

/* Legacy service-selection layout migrated from WebQtrack.css */
.service-selection-container {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.service-selection-label {
    text-align: left;
    margin-bottom: 5px;
    font-weight: bold;
    width: 100%;
}

.service-selection {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.service-selection .service-combo {
    flex: 1;
    min-width: 0;
}

.service-selection .get-ticket-button {
    flex-shrink: 0;
}

.device_printing_preview .template_card {
    height: 100%;
}

.device_printing_preview .template_card_image_link {
    aspect-ratio: auto;
    height: min(56vh, 420px);
    align-items: flex-start;
    overflow: auto;
}

.device_ticket_receipt {
    width: 100%;
    min-height: fit-content;
    background: #fff;
    padding: 10px 8px;
    font-family: "Courier New", Courier, monospace;
    font-size: 13px;
    color: #000;
    box-sizing: border-box;
    overflow: auto;
}

.device_ticket_receipt_upside_down {
    transform: rotate(180deg);
}

.device_ticket_imagetext_block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.device_ticket_image_icon {
    font-size: 28px;
    line-height: 1;
}

.device_ticket_image_label {
    font-size: 10px;
    color: #999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (max-width: 1200px) {
    .device_general_layout {
        grid-template-columns: 72px 1fr;
    }

    .device_general_preview {
        grid-column: 2;
    }

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

    .device_printing_preview .template_card_image_link {
        height: min(50vh, 360px);
    }
}

@media (max-width: 900px) {
    .device_edit_page .tabs-content {
        padding: 14px;
    }

    .device_edit_page .tabs-header,
    .tabs-header {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .tabs-header_context {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        padding-right: 8px;
        font-size: 12px;
    }

    .device_edit_page .tab-button,
    .tabs-header .tab-button {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 10px 14px;
    }

    .device_edit_page .sub-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .device_edit_page .sub-tab-button {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .device_edit_page .device_general_layout {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .device_edit_page .device_general_type_image {
        justify-content: flex-start;
        padding-top: 0;
    }

    .device_edit_page .device_general_type_image_img {
        width: 48px;
        height: 48px;
    }

    .device_edit_page .device_general_preview {
        grid-column: auto;
    }

    .device_edit_page .device_printing_layout {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .device_edit_page .device_printing_preview .template_card_image_link {
        height: min(46vh, 320px);
    }

    .device_edit_page .employee_data_col .form-row {
        gap: 12px;
        margin-bottom: 12px;
    }

    .device_edit_page .employee_data_col .form-group {
        min-width: 100%;
        max-width: none;
    }

    .device_edit_page .config-columns {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════
   Survey Dashboard
   ═══════════════════════════════════════════════════ */

.survey_radio_group {
    display: flex;
    gap: 16px;
    align-items: center;
}

.survey_radio_label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #2c3e50;
    cursor: pointer;
    white-space: nowrap;
}

    .survey_radio_label input[type="radio"] {
        accent-color: #3498db;
        margin: 0;
    }

.survey_summary {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: #f0f8ff;
    border: 1px solid #d6eaf8;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #2c3e50;
}

.survey_summary_item {
    font-weight: 500;
}

.survey_chart_container {
    background: #fff;
    border: 1px solid #e8edf1;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
    min-height: 400px;
    overflow-x: auto;
    overflow-y: hidden;
}

.survey_chart_container .e-chart,
.survey_chart_container .e-accumulationchart {
    overflow: hidden !important;
}

.survey_chart_title {
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.survey_loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    font-size: 0;
    color: transparent;
    position: relative;
}

    .survey_loading::before {
        content: "";
        width: 40px;
        height: 40px;
        border: 4px solid #e0e0e0;
        border-top: 4px solid #0097da;
        border-radius: 50%;
        animation: ticket_spin 0.8s linear infinite;
    }

    .survey_loading::after {
        content: "";
        position: absolute;
        width: min(560px, 80%);
        height: 80px;
        bottom: 34px;
        border-radius: 10px;
        background: linear-gradient(90deg, #edf0f2 25%, #f8f9fa 40%, #edf0f2 65%);
        background-size: 200% 100%;
        animation: loading_skeleton_band 1.3s linear infinite;
    }

@media (max-width: 768px) {
    .survey_dashboard_page .filter-container {
        grid-template-columns: 1fr;
    }

        .survey_dashboard_page .filter-container .filter-item,
        .survey_dashboard_page .filter-container .filter-item_short,
        .survey_dashboard_page .filter-container .filter-item_period {
            grid-column: auto;
        }

    .survey_dashboard_page .survey_radio_group {
        flex-wrap: wrap;
        gap: 8px 14px;
        align-items: flex-start;
    }

    .survey_dashboard_page .survey_radio_label {
        white-space: normal;
    }

    .survey_dashboard_page .survey_chart_container {
        padding: 10px;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .survey_dashboard_page .survey_chart_title {
        font-size: 13px;
        line-height: 1.25;
    }

    .survey_inquiry_page .filter-container {
        grid-template-columns: 1fr;
    }

        .survey_inquiry_page .filter-container .filter-item {
            min-width: 0;
            max-width: none;
            width: 100%;
        }

    .survey_mobile_page .filter-container {
        grid-template-columns: 1fr;
    }

        .survey_mobile_page .filter-container .filter-item,
        .survey_mobile_page .filter-container .filter-item_short,
        .survey_mobile_page .filter-container .filter-item_period {
            min-width: 0;
            max-width: none;
            width: 100%;
            grid-column: auto;
        }

    .survey_mobile_page .portal-grid_wrapper {
        overflow-x: auto;
    }

    .common_mobile_page .filter-container {
        grid-template-columns: 1fr;
    }

        .common_mobile_page .filter-container .filter-item,
        .common_mobile_page .filter-container .filter-item_short,
        .common_mobile_page .filter-container .filter-item_period {
            min-width: 0;
            max-width: none;
            width: 100%;
            grid-column: auto;
        }

    .common_mobile_page .form-row {
        flex-direction: column;
        gap: 12px;
    }

    .common_mobile_page .form-group {
        min-width: 0;
        max-width: none;
        width: 100%;
    }

    .common_mobile_page .config-columns {
        grid-template-columns: 1fr;
    }

    .common_mobile_page .tabs-header {
        overflow-x: auto;
        white-space: nowrap;
    }

    .common_mobile_page .portal-grid_wrapper {
        overflow-x: auto;
    }

    .alert_location_mobile_page .filter-container {
        grid-template-columns: 1fr;
    }

        .alert_location_mobile_page .filter-container .filter-item,
        .alert_location_mobile_page .filter-container .filter-item_short,
        .alert_location_mobile_page .filter-container .filter-item_period {
            min-width: 0;
            max-width: none;
            width: 100%;
            grid-column: auto;
        }

    .alert_location_mobile_page .form-row {
        flex-direction: column;
        gap: 12px;
    }

    .alert_location_mobile_page .form-group {
        min-width: 0;
        max-width: none;
        width: 100%;
    }

    .alert_location_mobile_page .tabs-header {
        overflow-x: auto;
        white-space: nowrap;
    }

    .alert_location_mobile_page .portal-grid_wrapper {
        overflow-x: auto;
    }

    .service_mobile_page .filter-container {
        grid-template-columns: 1fr;
    }

        .service_mobile_page .filter-container .filter-item,
        .service_mobile_page .filter-container .filter-item_short,
        .service_mobile_page .filter-container .filter-item_period {
            min-width: 0;
            max-width: none;
            width: 100%;
            grid-column: auto;
        }

    .service_mobile_page .form-row {
        flex-direction: column;
        gap: 12px;
    }

    .service_mobile_page .form-group {
        min-width: 0;
        max-width: none;
        width: 100%;
    }

    .service_mobile_page .tabs-header {
        overflow-x: auto;
        white-space: nowrap;
    }

    .service_mobile_page .portal-grid_wrapper {
        overflow-x: auto;
    }

    .staff_mobile_page .filter-container {
        grid-template-columns: 1fr;
    }

        .staff_mobile_page .filter-container .filter-item,
        .staff_mobile_page .filter-container .filter-item_short,
        .staff_mobile_page .filter-container .filter-item_period {
            min-width: 0;
            max-width: none;
            width: 100%;
            grid-column: auto;
        }

    .staff_mobile_page .form-row {
        flex-direction: column;
        gap: 12px;
    }

    .staff_mobile_page .form-group {
        min-width: 0;
        max-width: none;
        width: 100%;
    }

    .staff_mobile_page .employee_data_col .form-group:empty {
        display: none;
    }

    .staff_mobile_page .tabs-header {
        overflow-x: auto;
        white-space: nowrap;
    }

    .staff_mobile_page .portal-grid_wrapper {
        overflow-x: auto;
    }

    .user_edit_mobile_page .page-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
    }

    .user_edit_mobile_page .page-title {
        min-width: 0;
        gap: 8px;
    }

    .user_edit_mobile_page .page-title-text {
        font-size: 18px;
    }

    .user_edit_mobile_page .page-actions {
        margin-left: 0;
    }

    .user_edit_mobile_page .tabs-content {
        padding: 12px;
    }

    .user_edit_mobile_page .tabs-header {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .user_edit_mobile_page .tab-button {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 10px 12px;
    }

}

/* ── Inquiry Structure tree styles ── */
.struct_tree_container {
    background: #fff;
    border: 1px solid #e8edf1;
    border-radius: 8px;
    padding: 12px;
    margin-top: 16px;
}

.struct_tree_row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px solid #f0f2f5;
    transition: background-color 0.15s;
    min-height: 38px;
}

    .struct_tree_row:last-child {
        border-bottom: none;
    }

    .struct_tree_row:hover {
        background-color: #f5f8fc;
    }

.struct_tree_row_inquiry {
    font-weight: 600;
    background-color: #f8fafb;
}

.struct_tree_row_question {
    font-weight: 500;
}

.struct_tree_row_answer {
    font-size: 13px;
    color: #555;
}

.struct_tree_indent {
    flex-shrink: 0;
}

.struct_tree_drag_handle {
    cursor: grab;
    color: #aab4c0;
    font-size: 14px;
    padding: 0 2px;
    user-select: none;
    flex-shrink: 0;
}

    .struct_tree_drag_handle:hover {
        color: #667085;
    }

.struct_tree_type_badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
    letter-spacing: 0.5px;
    min-width: 70px;
    text-align: center;
}

.struct_tree_badge_inquiry {
    background-color: #e0edff;
    color: #1a56db;
}

.struct_tree_badge_question {
    background-color: #fef3cd;
    color: #856404;
}

.struct_tree_badge_answer {
    background-color: #d4edda;
    color: #155724;
}

.struct_tree_name {
    font-size: 14px;
    color: #2c3e50;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.struct_tree_order {
    font-size: 12px;
    color: #95a5a6;
    min-width: 30px;
    flex-shrink: 0;
}

.struct_tree_inactive {
    font-size: 11px;
    color: #e74c3c;
    font-style: italic;
    flex-shrink: 0;
}

.struct_tree_dest {
    font-size: 12px;
    color: #7f8c9b;
    flex-shrink: 0;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.struct_tree_dest_select {
    flex-shrink: 0;
    min-width: 180px;
    max-width: 320px;
    width: auto;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px;
    color: #2c3e50;
    background: #fff;
    outline: none;
}

.struct_tree_dest_select:focus {
    border-color: #1a56db;
    box-shadow: 0 0 0 2px rgba(26, 86, 219, 0.15);
}

.struct_tree_actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

.struct_tree_row:hover .struct_tree_actions {
    opacity: 1;
}

/* Inline editing */
.struct_tree_edit_input {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 13px;
    outline: none;
}

    .struct_tree_edit_input:focus {
        border-color: #1a56db;
        box-shadow: 0 0 0 2px rgba(26, 86, 219, 0.15);
    }

.struct_tree_edit_name {
    flex: 1;
    min-width: 150px;
}

.struct_tree_edit_order {
    width: 70px;
    flex-shrink: 0;
}

.struct_tree_edit_dest {
    min-width: 180px;
    max-width: 280px;
}

.struct_tree_page {
    font-size: 11px;
    color: #6c757d;
    background: #f0f2f5;
    padding: 1px 6px;
    border-radius: 8px;
    flex-shrink: 0;
}

/* Drag & drop states */
.struct_tree_row_dragging {
    opacity: 0.4;
    background-color: #e8f0fe !important;
}

.struct_tree_row_drop_target {
    background-color: #dbeafe !important;
    border-top: 2px solid #1a56db;
}

/* ── Form styles for survey pages ── */
.form-container {
    background: #fff;
    border: 1px solid #e8edf1;
    border-radius: 8px;
    padding: 20px;
    margin-top: 16px;
}

.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.form-group {
    flex: 1;
    min-width: 200px;
}

    .form-group label {
        display: block;
        font-size: 13px;
        font-weight: 500;
        color: #555;
        margin-bottom: 4px;
    }

.form-control {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

    .form-control:focus {
        border-color: #3498db;
        outline: none;
        box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.15);
    }

.checkbox-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    cursor: pointer;
}

.alert {
    padding: 12px 16px;
    border-radius: 6px;
    margin-top: 16px;
    font-size: 14px;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* Device vertical list for inquiry edit */
.device_list_vertical {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.device_list_item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .device_list_item:hover {
        background-color: #f5f8fa;
    }

.device_list_item_selected {
    background-color: #e8f4fd;
}

    .device_list_item_selected:hover {
        background-color: #d6ecf8;
    }

.device_list_item_check {
    flex-shrink: 0;
}

    .device_list_item_check input[type="checkbox"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
        accent-color: #323537;
    }

.device_list_item_icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}

    .device_list_item_icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.device_list_item_name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.device_tab_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 10px;
    background-color: #323537;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

/* ── Schedule Service Edit styles ── */
.form-section {
    background: #fff;
    border: 1px solid #e8edf1;
    border-radius: 8px;
    padding: 20px;
    margin-top: 16px;
}

.form-section-title {
    font-size: 15px;
    font-weight: 600;
    color: #323537;
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #e8edf1;
}


.schedule_type_cards {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.schedule_type_card {
    flex: 1;
    min-width: 180px;
    max-width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border: 2px solid #e8edf1;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fafbfc;
}

    .schedule_type_card:hover {
        border-color: #3498db;
        background: #f0f7ff;
    }

.schedule_type_card_disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

    .schedule_type_card_disabled:hover {
        border-color: #e8edf1;
        background: #fafbfc;
    }

.schedule_type_card_selected {
    border-color: #1a56db;
    background: #e8f0fe;
    box-shadow: 0 0 0 2px rgba(26, 86, 219, 0.15);
}

.schedule_type_card_icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.schedule_type_card_label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.schedule_multiselect_container {
    border: 1px solid #e8edf1;
    border-radius: 6px;
    overflow: hidden;
}

.schedule_multiselect_header {
    background: #f7f8fa;
    padding: 8px 12px;
    border-bottom: 1px solid #e8edf1;
}

.schedule_multiselect_toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #555;
}

.schedule_multiselect_list {
    max-height: 200px;
    overflow-y: auto;
    padding: 4px 0;
}

.schedule_multiselect_item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    transition: background 0.15s;
}

    .schedule_multiselect_item:hover {
        background: #f0f7ff;
    }

.schedule_multiselect_item_selected {
    background: #e8f0fe;
}

.schedule_weekdays_container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.schedule_weekdays_grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.schedule_weekday_item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid #e8edf1;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    transition: all 0.15s;
    background: #fafbfc;
}

    .schedule_weekday_item:hover {
        border-color: #3498db;
        background: #f0f7ff;
    }

.schedule_weekday_item_selected {
    background: #e8f0fe;
    border-color: #1a56db;
    color: #1a56db;
    font-weight: 500;
}

.schedule_checkbox_label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
}

    .schedule_checkbox_label input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: #1a56db;
    }

.schedule_inactive_container {
    margin-top: 4px;
}

.schedule_inactive_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .schedule_inactive_table th {
        background: #f7f8fa;
        padding: 8px 12px;
        text-align: left;
        font-weight: 600;
        color: #555;
        border-bottom: 2px solid #e8edf1;
    }

    .schedule_inactive_table td {
        padding: 8px 12px;
        border-bottom: 1px solid #e8edf1;
        vertical-align: middle;
    }

    .schedule_inactive_table tr:hover td {
        background: #f9fafc;
    }

.schedule_inactive_actions {
    text-align: center;
}


/* --- QRCODE PREVIEW - AddOrEditService QR Code section --- */

.qrcode_preview_card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    max-width: 320px;
}

.qrcode_preview_img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    border-radius: 8px;
}

.qrcode_preview_link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: #f0f7fc;
    border: 1px solid #d0e8f5;
    border-radius: 8px;
    font-size: 0.8rem;
    word-break: break-all;
    width: 100%;
}

    .qrcode_preview_link i {
        color: #0097da;
        font-size: 1rem;
        flex-shrink: 0;
    }

    .qrcode_preview_link a {
        color: #0077b6;
        text-decoration: none;
        font-weight: 500;
        transition: color 0.2s;
    }

        .qrcode_preview_link a:hover {
            color: #0097da;
            text-decoration: underline;
        }


/* EditTemplate toolbox fallback styles:
   Keep the left menu compact and vertical even when scoped CSS is not applied. */
.template_editor_wrapper .template_editor_toolbox_wrap {
    flex: 0 0 52px !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    position: relative !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    z-index: 999 !important;
}

.template_editor_wrapper .template_editor_toolbox_wrap_expanded {
    flex: 0 0 186px !important;
    width: 186px !important;
    min-width: 186px !important;
    max-width: 186px !important;
    background: #fff !important;
    border-right: 0 none !important;
}

.template_editor_wrapper .template_editor_toolbox_toggle {
    width: 100% !important;
    min-height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border: 0 none !important;
    border-bottom: 0 none !important;
    background: #fff !important;
    color: #555 !important;
    font-size: 11px !important;
    cursor: pointer !important;
    padding: 4px 6px !important;
    flex-shrink: 0 !important;
}

.template_editor_wrapper .template_editor_toolbox_toggle_text {
    display: none !important;
}

.template_editor_wrapper .template_editor_toolbox_wrap_expanded .template_editor_toolbox_toggle {
    justify-content: flex-start !important;
    padding: 5px 8px !important;
}

.template_editor_wrapper .template_editor_toolbox_wrap_expanded .template_editor_toolbox_toggle_text {
    display: inline !important;
}

.template_editor_wrapper .template_editor_toolbox {
    width: 52px !important;
    height: calc(100% - 28px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 6px 0 !important;
    gap: 2px !important;
    background: transparent !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-right: none !important;
    box-sizing: border-box !important;
}

.template_editor_wrapper .template_editor_toolbox_btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    width: 46px !important;
    margin: 0 !important;
    padding: 6px 2px !important;
    background: none !important;
    border: 0 none !important;
    border-radius: 6px !important;
    color: #666 !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    text-align: center !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

    .template_editor_wrapper .template_editor_toolbox_btn span {
        display: block !important;
        width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .template_editor_wrapper .template_editor_toolbox_btn img {
        width: 22px !important;
        height: 22px !important;
        object-fit: contain !important;
    }

.template_editor_wrapper .template_editor_toolbox_popup {
    position: absolute !important;
    left: 100% !important;
    width: 190px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
    z-index: 999999 !important;
    overflow: hidden !important;
}

.template_editor_wrapper .template_editor_toolbox_popup_header {
    padding: 6px 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #1c2f3a !important;
    background: #d7e5ec !important;
    border: 0 none !important;
}

.template_editor_wrapper .template_editor_toolbox_popup_list {
    padding: 2px 0 !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.template_editor_wrapper .template_editor_toolbox_item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 5px 8px !important;
    font-size: 12px !important;
    color: #222 !important;
    background: none !important;
    border: 0 none !important;
    text-align: left !important;
}

    .template_editor_wrapper .template_editor_toolbox_item img {
        width: 16px !important;
        height: 16px !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
    }

    .template_editor_wrapper .template_editor_toolbox_item:hover {
        background: #ececec !important;
    }

    .template_editor_wrapper .template_editor_toolbox_item:disabled {
        color: #888 !important;
        cursor: default !important;
    }

        .template_editor_wrapper .template_editor_toolbox_item:disabled img {
            opacity: 0.6 !important;
        }

.template_editor_wrapper .template_editor_toolbox_expanded {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 2px 0 6px !important;
    background: #fff !important;
}

.template_editor_wrapper .template_editor_toolbox_expanded_header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 6px 8px !important;
    background: #d7e5ec !important;
    color: #1c2f3a !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    width: 100% !important;
    cursor: pointer !important;
    text-align: left !important;
    border: 0 none !important;
}

.template_editor_wrapper .template_editor_toolbox_expanded_header_left {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.template_editor_wrapper .template_editor_toolbox_expanded_toggle {
    display: inline-flex !important;
    width: 14px !important;
    justify-content: center !important;
    font-weight: 700 !important;
}

.template_editor_wrapper .template_editor_toolbox_expanded_header img {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
}

.template_editor_wrapper .template_editor_toolbox_expanded_item {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 8px 6px 12px !important;
    border: 0 none !important;
    background: transparent !important;
    text-align: left !important;
    font-size: 12px !important;
    color: #222 !important;
}

    .template_editor_wrapper .template_editor_toolbox_expanded_item img {
        width: 18px !important;
        height: 18px !important;
        object-fit: contain !important;
    }

.img_picker_value_sync {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    padding-left: 6px !important;
}

.font_picker_value_preview_sync {
    display: flex !important;
    align-items: center !important;
    padding-left: 6px !important;
    font-size: 14px !important;
}

.about_modal_body_message {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 14px;
    color: #323537;
    margin: 0;
}

.about_panel {
    width: 100%;
    background: #ededed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    font-family: 'Montserrat', Arial, sans-serif;
}

.about_modal_header {
    background: #2595d2;
    border-radius: 6px 6px 0 0;
    margin: -20px -20px 15px;
    padding: 8px 12px;
    border-bottom: none;
    font-family: 'Montserrat', Arial, sans-serif;
}

    .about_modal_header #about-modal-title {
        color: #fff;
        font-family: 'Montserrat', Arial, sans-serif;
        font-weight: 700;
    }

    .about_modal_header .portal-modal_close {
        color: #fff;
        font-family: 'Montserrat', Arial, sans-serif;
        font-weight: 600;
    }

.about_modal_title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.about_modal_title_icon {
    width: 18px;
    height: 18px;
}

.about_card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin: 10px 0 16px;
    padding: 15px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.about_card_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 8px;
}

.about_logo {
    max-width: 100%;
    overflow: hidden;
}

.about_logo img {
    height: 40px;
    width: auto;
    max-width: 100%;
    max-height: 48px;
    object-fit: contain;
    display: block;
}

.about_title {
    font-size: 22px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    color: #323537;
    text-align: right;
}

.about_card_body {
    width: 100%;
    margin-top: 15px;
}

.about_stats {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.about_stats_col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

    .about_stats_col:nth-child(1) {
        flex: 0.12;
    }

    .about_stats_col:nth-child(2) {
        flex: 0.28;
    }

    .about_stats_col:nth-child(3) {
        flex: 0.60;
    }

    .about_stats_col:not(:last-child) {
        border-right: 4px solid #ededed;
    }

.about_stats_value {
    font-size: 16px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    color: #323537;
    line-height: 1.25;
}

.about_stats_label {
    font-size: 12px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    color: #777;
    margin-top: 6px;
}

.about_sms_icon_row {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 16px;
}

.about_sms_icon_img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.about_sms_data_row {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.about_sms_data_col {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
}

.about_stats_modules {
    align-items: flex-start;
}

.about_modules_container {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 12px;
    width: 100%;
}

.about_module_item {
    display: flex;
    width: 100%;
    align-items: center;
    margin-bottom: 0;
}

.about_module_icon_col {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
}

.about_module_icon {
    width: 52px;
    height: 52px;
    object-fit: contain;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.about_module_text_col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.about_module_label {
    font-size: 12px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    color: #323537;
}

.about_module_status {
    font-size: 10px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    border-radius: 4px;
    width: 78px;
    min-width: 78px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-transform: lowercase;
}

.about_status_active {
    background: #93c949;
    color: #fff;
}

.about_status_inactive {
    background: #ef3f32;
    color: #fff;
}

.about_links {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 95%;
    margin-bottom: 5px;
    padding: 15px 0;
}

.about_link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: #323537;
    text-decoration: none;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    width: 33.33%;
}

.about_link_text {
    font-family: inherit;
    font-weight: inherit;
}

.about_link:hover {
    color: #ef3f32;
}

.about_link_icon {
    width: 48px;
    height: 48px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.about_link_icon_web {
    background-image: url('../images/svg/about/icon_sobre_site.svg');
}

.about_link_icon_helpdesk {
    background-image: url('../images/svg/about/icon_sobre_helpdesk.svg');
}

.about_footer {
    padding: 15px 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 95%;
}

.about_footer_info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    color: #323537;
    width: 50%;
}

.about_footer_version {
    font-size: 16px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
}

.about_footer_hardware {
    font-size: 16px;
    color: #777;
}

.about_footer_copyright {
    font-size: 16px;
    color: #777;
}

.about_footer_spacer {
    margin-top: 10px;
}

.about_footer_hardware,
.about_footer_copyright {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
}

.about_footer_apps {
    display: flex;
    width: 25%;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

    .about_footer_apps img {
        max-width: 100%;
        width: auto;
        height: auto;
        display: block;
    }

.about_footer_stores {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.about_footer_stores .about_footer_apps {
    width: auto;
    flex: 0 1 auto;
    max-width: none;
    padding: 0;
}

.about_footer_stores .about_footer_apps img {
    width: auto;
    height: auto;
    max-width: min(150px, 42vw);
    max-height: 44px;
    object-fit: contain;
}

/* About (Acerca) modal - mobile */
@media (max-width: 768px) {
    .about_modal.portal-modal_large {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        min-width: 0 !important;
        max-height: calc(100dvh - 16px) !important;
        padding: 12px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .about_modal .portal-modal_body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding-right: 0;
    }

    .about_modal .about_modal_header {
        margin: -12px -12px 12px;
        padding: 8px 10px;
        flex-shrink: 0;
    }

    .about_modal .about_card {
        margin: 8px 0 12px;
        padding: 12px;
    }

    .about_modal .about_card_header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .about_modal .about_title {
        text-align: left;
        font-size: 18px;
        width: 100%;
    }

    .about_modal .about_stats {
        flex-direction: column;
        gap: 0;
    }

    .about_modal .about_stats_col {
        flex: none !important;
        width: 100%;
        min-width: 0;
        padding: 12px 0;
        border-right: none !important;
        border-bottom: 4px solid #ededed;
    }

    .about_modal .about_stats_col:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .about_modal .about_sms_icon_row {
        margin-bottom: 10px;
    }

    .about_modal .about_sms_icon_img {
        width: 56px;
        height: 56px;
    }

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

    .about_modal .about_module_icon_col {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
    }

    .about_modal .about_module_icon {
        width: 44px;
        height: 44px;
    }

    .about_modal .about_links {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 12px;
        padding: 10px 0;
    }

    .about_modal .about_link {
        width: 100%;
        font-size: 14px;
    }

    .about_modal .about_link_icon {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }

    .about_modal .about_footer {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 12px;
        padding: 10px 0 4px;
    }

    .about_modal .about_footer_info {
        width: 100%;
    }

    .about_modal .about_footer_version,
    .about_modal .about_footer_hardware,
    .about_modal .about_footer_copyright {
        font-size: 14px;
        word-break: break-word;
    }

    .about_modal img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

    .about_modal .about_logo {
        max-width: 100%;
    }

    .about_modal .about_logo img {
        max-width: min(180px, 65vw);
        max-height: 40px;
        width: auto;
        height: auto;
    }

    .about_modal .about_sms_icon_img {
        width: 48px;
        height: 48px;
        max-width: 100%;
    }

    .about_modal .about_module_icon {
        width: 40px;
        height: 40px;
        max-width: 100%;
    }

    .about_modal .about_link_icon {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        background-size: contain;
    }

    .about_modal .about_footer {
        flex-wrap: wrap;
        justify-content: center;
    }

    .about_modal .about_footer_stores {
        width: 100%;
        justify-content: center;
        gap: 10px;
    }

    .about_modal .about_footer_stores .about_footer_apps {
        width: auto;
        flex: 0 1 auto;
        max-width: calc(50% - 6px);
        padding: 0;
    }

    .about_modal .about_footer_stores .about_footer_apps img {
        width: auto;
        height: auto;
        max-width: min(140px, 40vw);
        max-height: 38px;
        margin: 0 auto;
    }
}

/* EditTemplate - mobile / tablet layout overrides */
@media (max-width: 1024px) {
    .template_editor_wrapper .template_editor_toolbox_wrap,
    .template_editor_wrapper .template_editor_toolbox_wrap_expanded {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #ddd;
    }

    .template_editor_wrapper .template_editor_toolbox {
        width: 100% !important;
        height: auto !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    .template_editor_wrapper .template_editor_main {
        flex-direction: column !important;
    }
}

/* ── Desk widget ─────────────────────────────────────── */

#widget15 .widget-content {
    padding: 0;
}

.desk_widget_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
    padding: 10px;
    align-content: start;
}

.desk_widget_card {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    border: 1.5px solid #e0e4e8;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    transition: box-shadow .18s, transform .18s;
}

.desk_widget_card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.11);
    transform: translateY(-1px);
}

.desk_widget_card_open {
    border-color: #22c55e;
}

.desk_widget_card_closed {
    border-color: #e0e4e8;
    opacity: .82;
}

.desk_widget_card_header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 8px 12px;
    background: #f8fafb;
    border-bottom: 1px solid #eef0f2;
}

.desk_widget_card_open .desk_widget_card_header {
    background: linear-gradient(90deg, #f0fdf4 0%, #f8fafb 100%);
}

.desk_widget_card_icon_wrap {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #e8f0fe;
    display: flex;
    align-items: center;
    justify-content: center;
}

.desk_widget_card_open .desk_widget_card_icon_wrap {
    background: #dcfce7;
}

.desk_widget_card_icon {
    width: 18px;
    height: 18px;
    opacity: .75;
}

.desk_widget_card_title_group {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.desk_widget_card_name {
    font-size: 13px;
    font-weight: 700;
    color: #1e2326;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.desk_widget_card_location {
    font-size: 10px;
    color: #7e8d9a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.desk_widget_status_badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 20px;
}

.desk_widget_status_open {
    background: #dcfce7;
    color: #15803d;
}

.desk_widget_status_closed {
    background: #f1f5f9;
    color: #94a3b8;
}

.desk_widget_card_body {
    padding: 10px 12px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.desk_widget_ticket_block {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 7px;
    background: #f1f5f9;
}

.desk_widget_ticket_block_active {
    background: #eff6ff;
}

.desk_widget_ticket_label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: #64748b;
    letter-spacing: .04em;
}

.desk_widget_ticket_value {
    font-size: 18px;
    font-weight: 800;
    color: #1e2326;
    letter-spacing: .02em;
    flex: 1;
    text-align: right;
}

.desk_widget_ticket_block_active .desk_widget_ticket_value {
    color: #2563eb;
}

.desk_widget_meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.desk_widget_meta_row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.desk_widget_meta_icon {
    font-size: 12px;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

.desk_widget_meta_svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: .55;
}

.desk_widget_meta_text {
    font-size: 11px;
    color: #4b5563;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.desk_widget_meta_empty {
    color: #b0b8c1;
}

.desk_widget_meta_time {
    font-size: 10px;
    color: #94a3b8;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}

/* Ticket block left column: label + service name stacked */
.desk_widget_ticket_left {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.desk_widget_ticket_service {
    font-size: 10px;
    color: #3b82f6;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

/* ── Alert widget ── */
#widget11 .widget-content {
    padding: 0;
}

.alert_widget_list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.alert_widget_empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 16px;
    color: #9ca3af;
    font-size: 13px;
}

.alert_widget_empty_icon {
    width: 40px;
    height: 40px;
    opacity: .35;
}

.alert_widget_item {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #f1f5f9;
    transition: background .15s;
}

.alert_widget_item:last-child {
    border-bottom: none;
}

.alert_widget_item:hover {
    background: #f8fafc;
}

.alert_widget_item_recent {
    background: #fffbeb;
}

.alert_widget_item_recent:hover {
    background: #fef9c3;
}

.alert_widget_item_bar {
    width: 4px;
    flex-shrink: 0;
    border-radius: 0;
}

.alert_widget_item_body {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.alert_widget_item_top {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.alert_widget_type_badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 2px 7px;
    border-radius: 20px;
    flex-shrink: 0;
}

.alert_widget_new_badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 2px 7px;
    border-radius: 20px;
    background: #fef08a;
    color: #854d0e;
    flex-shrink: 0;
    animation: alert_pulse 1.5s ease-in-out infinite;
}

@keyframes alert_pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .5; }
}

.alert_widget_item_time {
    margin-left: auto;
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
    flex-shrink: 0;
}

.alert_widget_item_desc {
    font-size: 12px;
    color: #1e2326;
    margin: 0;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.alert_widget_item_location {
    font-size: 11px;
    color: #6b7280;
}

/* Service Operations page */
.service_ops_section_icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 6px;
}

.service_ops_note {
    margin-top: 8px;
    margin-bottom: 0;
}

/* Alert type colours */
.alert_widget_item_bar { background: #d1d5db; }

.alert_type_waiting .alert_widget_item_bar   { background: #f59e0b; }
.alert_type_attendance .alert_widget_item_bar { background: #ef4444; }
.alert_type_clients .alert_widget_item_bar   { background: #f97316; }
.alert_type_ticket .alert_widget_item_bar    { background: #8b5cf6; }
.alert_type_device .alert_widget_item_bar    { background: #64748b; }
.alert_type_default .alert_widget_item_bar   { background: #3b82f6; }

/* Type badge colours */
.alert_type_waiting.alert_widget_type_badge   { background: #fef3c7; color: #92400e; }
.alert_type_attendance.alert_widget_type_badge { background: #fee2e2; color: #991b1b; }
.alert_type_clients.alert_widget_type_badge   { background: #ffedd5; color: #9a3412; }
.alert_type_ticket.alert_widget_type_badge    { background: #ede9fe; color: #5b21b6; }
.alert_type_device.alert_widget_type_badge    { background: #f1f5f9; color: #475569; }
.alert_type_default.alert_widget_type_badge   { background: #dbeafe; color: #1e40af; }

/* ── SMS widget ─────────────────────────────────────── */

#widget16 .widget-content {
    padding: 0;
}

.sms_widget_card_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 10px;
    height: 100%;
    align-content: start;
}

.sms_widget_card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 96px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1.5px solid #e0e4e8;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    transition: box-shadow .18s, transform .18s;
}

.sms_widget_card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.11);
    transform: translateY(-1px);
}

.sms_widget_card_sent {
    border-color: #93c5fd;
    background: linear-gradient(135deg, #eff6ff 0%, #fff 100%);
}

.sms_widget_card_available {
    border-color: #86efac;
    background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%);
}

.sms_widget_card_icon_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(0,0,0,.06);
}

.sms_widget_card_icon {
    width: 24px;
    height: 24px;
}

.sms_widget_card_body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sms_widget_card_label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #64748b;
}

.sms_widget_card_value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    color: #0f172a;
}

.sms_widget_card_hint {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sms_widget_empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 80px;
    padding: 16px;
    color: #64748b;
    font-size: 13px;
    text-align: center;
}

/* ============================================
   QUEUE KPI STRIP (widget19)
   ============================================ */

/* Each KPI is now an individual draggable panel-card (mirrors PerformanceSurvey). */
.dashboard_kpi_panel {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.dashboard_kpi_card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 10px 16px;
    background: #ffffff;
    border: 1px solid #e6eaee;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.dashboard_kpi_panel:hover .dashboard_kpi_card {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
    border-color: #d7dee6;
}

.dashboard_kpi_card_top {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.dashboard_kpi_icon_wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--dashboard_kpi_accent, #5b8def) 14%, #ffffff);
}

.dashboard_kpi_icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.dashboard_kpi_main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

.dashboard_kpi_title {
    font-size: 13px;
    font-weight: 700;
    color: #5f6b7a;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard_kpi_value_row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
}

.dashboard_kpi_value {
    font-size: 28px;
    font-weight: 700;
    color: #1f2a37;
    line-height: 1.1;
    white-space: nowrap;
}

.dashboard_kpi_value_suffix {
    font-size: 14px;
    font-weight: 600;
    color: #9aa3af;
}

.dashboard_kpi_progress {
    width: 100%;
}

.dashboard_kpi_progress_track {
    width: 100%;
    height: 6px;
    border-radius: 4px;
    background: #e8ecf2;
    overflow: hidden;
}

.dashboard_kpi_progress_fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.dashboard_kpi_caption {
    font-size: 12px;
    color: #8a96a3;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   DONUT CHART WITH SIDE LEGEND (widget4)
   ============================================ */

.dashboard_donut_chart {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.dashboard_donut_chart_plot {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
}

.dashboard_donut_chart_legend {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    max-width: 48%;
    min-width: 0;
    overflow: auto;
}

.dashboard_donut_legend_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.dashboard_donut_legend_label_row {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
}

.dashboard_donut_legend_swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
}

.dashboard_donut_legend_label {
    font-size: 11px;
    color: #5f6b7a;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard_donut_legend_metrics {
    font-size: 11px;
    font-weight: 700;
    color: #1f2a37;
    white-space: nowrap;
    flex-shrink: 0;
}

.dashboard_chart_empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 120px;
    color: #94a3b8;
    font-size: 13px;
}

/* ============================================
   FILTER CARD (top row styled as a card)
   ============================================ */

.dashboard_top_row {
    background: #ffffff;
    border: 1px solid #e6eaee;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 10px 14px;
    border-bottom: 1px solid #e6eaee;
}

.dashboard-filters .filter-group label {
    font-size: 11px;
    font-weight: 600;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.dashboard_top_datetime {
    border-color: #e6eaee;
    border-radius: 8px;
}