/*
 * Theme: Material (Material Design–inspired)
 * Overrides only — layout/header.blade.php loads /themes/default/css/style.css first, then this file.
 */

/* --------------------------------------------------------------------------
   Design tokens (Material-style, high contrast)
   -------------------------------------------------------------------------- */
:root {
    --material-primary-green: #188038;
    --material-primary-green-hover: #137333;
    --material-primary-green-pressed: #0d652d;
    --material-secondary-blue: #1a73e8;
    --material-secondary-blue-hover: #1557b0;
    --material-danger: #d93025;
    --material-danger-hover: #b3261e;
    --material-on-surface: #1f1f1f;
    --material-on-surface-variant: #444746;
    --material-outline: #747775;
    --material-surface: #f8f9fa;
    --material-surface-container: #ffffff;
    --material-sidebar-bg: #1a2332;
    --material-sidebar-text: #e8eaed;
    --material-sidebar-muted: #9aa0a6;
    --material-sidebar-hover: rgba(255, 255, 255, 0.08);
    /* Item ativo: azul secundário bem visível */
    --material-sidebar-active-bg: rgba(66, 133, 244, 0.32);
    --material-sidebar-active-border: #64b5f6;
    --material-sidebar-selected-tint: rgba(100, 181, 246, 0.15);
    --material-focus-ring: 0 0 0 3px rgba(26, 115, 232, 0.35);
    --material-radius-md: 3px;
    --material-radius-sm: 3px;
    --material-radius-ui: 3px;
    --material-elevation-1: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
    --material-elevation-2: 0 1px 2px rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
    --material-transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease,
    border-color 0.2s ease;
    /* Borda esbatida no item pai com submenu ativo */
    --material-sidebar-parent-active-border: rgba(100, 181, 246, 0.5);
    --material-sidebar-topbar-border: rgba(100, 181, 246, 0.35);
}

/* Configurações: menu lateral claro e nítido (contrasta com o escuro #1a2332 — não usa cinza “meio”) */
body.settings {
    --material-sidebar-bg: #ffffff;
    --material-sidebar-text: #0f172a;
    --material-sidebar-muted: #64748b;
    --material-sidebar-hover: rgba(26, 115, 232, 0.09);
    --material-sidebar-selected-tint: rgba(26, 115, 232, 0.12);
    --material-sidebar-active-border: #1a73e8;
    --material-sidebar-active-bg: rgba(26, 115, 232, 0.18);
    --material-sidebar-parent-active-border: rgba(26, 115, 232, 0.7);
}

/* --------------------------------------------------------------------------
   Typography — Inter + Roboto (Roboto already in layout header)
   -------------------------------------------------------------------------- */
body {
    font-family: "Inter", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--material-on-surface-variant);
    font-weight: 400;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--material-on-surface);
    font-weight: 600;
    letter-spacing: -0.01em;
}

h2 {
    font-weight: 700;
}

h5 {
    font-weight: 600;
}

/* Link colours: inherit from default theme; only tune .link helper */
a.link {
    color: var(--material-on-surface-variant);
}

a.link:hover,
a.link:focus {
    color: var(--material-secondary-blue);
}

/* --------------------------------------------------------------------------
   Layout: sidebar 250px + main content alignment
   -------------------------------------------------------------------------- */
.left-sidebar {
    width: 250px;
    background: var(--material-sidebar-bg);
    border-right: none;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.12);
}

.sidebar-nav {
    background: transparent;
}

.sidebar-nav ul li a {
    color: var(--material-sidebar-text);
    font-weight: 500;
    border-radius: var(--material-radius-ui);
    margin-right: 8px;
    padding: 10px 16px 10px 12px;
    transition: var(--material-transition);
}

.sidebar-nav ul li a:hover {
    background: var(--material-sidebar-hover);
    color: #ffffff;
}

.sidebar-nav ul li a.active {
    color: #ffffff;
    font-weight: 600;
}

.sidebar-nav > ul > li > a i {
    color: var(--material-sidebar-muted);
}

.sidebar-nav ul li a:hover i,
.sidebar-nav ul li a.active i {
    color: #ffffff;
}

.sidebar-nav > ul > li > a {
    border-left: 4px solid transparent;
}

.sidebar-nav > ul > li > a.active {
    background: var(--material-sidebar-selected-tint);
    color: #ffffff;
    border-left-color: var(--material-sidebar-active-border);
    font-weight: 600;
}

/* CRM coloca `active` no <li> (ex.: dashboard, tarefas) ou só no link do submenu (ex.: /projects) */
.sidebar-nav > ul > li.active > a {
    color: #ffffff;
    font-weight: 600;
}

.sidebar-nav > ul > li.active > a i {
    color: #ffffff;
}

/* Secção com submenu: linha do pai quando o módulo está ativo (ex.: Projetos) */
.sidebar-nav > ul > li.sidenav-menu-item.active > a.has-arrow {
    color: #ffffff !important;
    font-weight: 600;
    border-left-color: var(--material-sidebar-parent-active-border);
}

.sidebar-nav > ul > li.sidenav-menu-item.active > a.has-arrow i {
    color: #ffffff !important;
}

/* Itens dentro de .collapse (Projetos, Clientes, etc.) — link ativo com o mesmo destaque */
.sidebar-nav ul ul li a.active,
.sidebar-nav .sidenav-submenu a.active,
.sidebar-nav ul.collapse li a.active {
    background: var(--material-sidebar-selected-tint) !important;
    border-left: 4px solid var(--material-sidebar-active-border);
    font-weight: 600;
    color: #ffffff !important;
}

/* Entradas sem submenu: o <a> só herda quando o <li> tem .active */
.sidebar-nav > ul > li.sidenav-menu-item.active > a:not(.has-arrow) {
    background: var(--material-sidebar-selected-tint);
    border-left: 4px solid var(--material-sidebar-active-border);
    color: #ffffff !important;
    font-weight: 600;
}

.sidebar-nav ul li.nav-small-cap {
    color: var(--material-sidebar-muted);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 11px;
    /* Espaçamento explícito: o tema base usa padding; aqui reforçamos para não “colar” no item de cima */
    margin: 18px 0 6px 0;
    padding: 12px 14px 6px 20px;
    list-style: none;
}

.sidebar-nav > ul > li.nav-small-cap:first-child {
    margin-top: 0;
    padding-top: 4px;
}

.sidebar-nav ul li.nav-devider {
    background: rgba(255, 255, 255, 0.12);
}

.sidebar-nav .has-arrow::after {
    border-color: var(--material-sidebar-muted);
}

.sidebar-nav .user-profile > a {
    color: var(--material-sidebar-text);
}

.sidebar-nav .user-profile .profile-text {
    color: var(--material-sidebar-text);
}

/*
 * Menu lateral colapsado (mini-sidebar): o tema base posiciona o submenu com fundo
 * claro (#edf0f5). As regras gerais .sidebar-nav ul li a usam texto claro para o
 * fundo escuro — no flyout isso fica ilegível. Forçar cores “surface” no painel.
 */
@media (min-width: 768px) {
    .mini-sidebar .sidebar-nav #sidebarnav > li > ul,
    .mini-sidebar .sidebar-nav #sidebarnav > li > ul.collapse {
        background: #ffffff !important;
        border: 1px solid #dadce0;
        border-radius: var(--material-radius-md);
        box-shadow: var(--material-elevation-2);
    }

    .mini-sidebar .sidebar-nav #sidebarnav > li:hover > a {
        color: var(--material-on-surface) !important;
    }

    .mini-sidebar .sidebar-nav #sidebarnav > li:hover > a i {
        color: var(--material-outline) !important;
    }

    .mini-sidebar .sidebar-nav #sidebarnav > li > ul li a,
    .mini-sidebar .sidebar-nav #sidebarnav > li > ul.collapse li a {
        color: var(--material-on-surface-variant) !important;
    }

    .mini-sidebar .sidebar-nav #sidebarnav > li > ul li a i,
    .mini-sidebar .sidebar-nav #sidebarnav > li > ul.collapse li a i {
        color: var(--material-outline) !important;
    }

    .mini-sidebar .sidebar-nav #sidebarnav > li > ul li a:hover,
    .mini-sidebar .sidebar-nav #sidebarnav > li > ul.collapse li a:hover {
        background: rgba(26, 115, 232, 0.08) !important;
        color: var(--material-on-surface) !important;
    }

    .mini-sidebar .sidebar-nav #sidebarnav > li > ul li a:hover i,
    .mini-sidebar .sidebar-nav #sidebarnav > li > ul.collapse li a:hover i {
        color: var(--material-secondary-blue) !important;
    }

    .mini-sidebar .sidebar-nav #sidebarnav > li > ul li a.active,
    .mini-sidebar .sidebar-nav #sidebarnav > li > ul.collapse li a.active {
        background: rgba(26, 115, 232, 0.12) !important;
        border-left: 4px solid var(--material-secondary-blue) !important;
        color: var(--material-secondary-blue) !important;
    }

    .mini-sidebar .sidebar-nav #sidebarnav > li > ul li a.active i,
    .mini-sidebar .sidebar-nav #sidebarnav > li > ul.collapse li a.active i {
        color: var(--material-secondary-blue) !important;
    }

    .navbar-header {
        width: 250px;
    }
}

@media (min-width: 1024px) {
    .page-wrapper {
        margin-left: 260px;
    }

    .settings .page-wrapper {
        margin-left: 250px;
    }
}

/* Settings area sidebar (narrower menu) */
.settings .left-sidebar {
    width: 250px;
    background-color: var(--material-sidebar-bg);
    border-right: 1px solid #cbd5e1;
    box-shadow: none;
}

.settings .left-sidebar .sidebar-nav {
    background: transparent;
}

.settings .left-sidebar .sidebar-nav ul li a {
    color: var(--material-sidebar-text);
}

.settings .left-sidebar .sidebar-nav ul li a.active {
    color: #0d47a1;
    background: var(--material-sidebar-selected-tint);
    border-radius: var(--material-radius-ui);
    border-left: 4px solid var(--material-sidebar-active-border);
}

/* Sobreposição: o tema escuro força texto branco em hover/active — aqui é painel claro */
.settings .left-sidebar .sidebar-nav ul li a:hover {
    color: #0f172a !important;
}

.settings .left-sidebar .sidebar-nav ul li a:hover i {
    color: #1a73e8 !important;
}

.settings .left-sidebar .sidebar-nav ul li a.active i {
    color: #1565c0 !important;
}

.settings .left-sidebar .sidebar-nav > ul > li > a.active {
    color: #0d47a1 !important;
}

.settings .left-sidebar .sidebar-nav > ul > li.active > a,
.settings .left-sidebar .sidebar-nav > ul > li.active > a i {
    color: #0f172a !important;
}

.settings .left-sidebar .sidebar-nav > ul > li.active > a i {
    color: #1a73e8 !important;
}

.settings .left-sidebar .sidebar-nav > ul > li.sidenav-menu-item.active > a.has-arrow {
    color: #0f172a !important;
}

.settings .left-sidebar .sidebar-nav > ul > li.sidenav-menu-item.active > a.has-arrow i {
    color: #1a73e8 !important;
}

.settings .left-sidebar .sidebar-nav ul ul li a.active,
.settings .left-sidebar .sidebar-nav .sidenav-submenu a.active,
.settings .left-sidebar .sidebar-nav ul.collapse li a.active {
    color: #0d47a1 !important;
}

.settings .left-sidebar .sidebar-nav ul ul li a.active i,
.settings .left-sidebar .sidebar-nav ul.collapse li a.active i {
    color: #1565c0 !important;
}

.settings .left-sidebar .sidebar-nav > ul > li.sidenav-menu-item.active > a:not(.has-arrow) {
    color: #0d47a1 !important;
}

.settings .left-sidebar .sidebar-nav ul li.nav-devider {
    background: rgba(15, 23, 42, 0.08);
}

.settings .navbar-header {
    width: 250px;
    background-color: var(--material-sidebar-bg);
    border-right: 1px solid #cbd5e1;
    border-bottom: 1px solid #e2e8f0;
}

.settings .left-sidebar .exit-panel {
    border-bottom-color: #cbd5e1;
}

/* Inner sub-menus (lists) */
.has_left_inner_menu .left-inner-menu {
    width: 250px;
    background: #eef1f4;
    border-right: 1px solid #dadce0;
}

.has_left_inner_menu .container-fluid {
    margin-left: 250px;
    width: calc(100% - 250px);
}

/* Top bar — coluna do logo com o mesmo azul escuro da sidebar */
.topbar {
    background: var(--material-surface-container);
    box-shadow: var(--material-elevation-1);
}

.topbar .navbar-header,
.topbar #topnav-logo-container {
    background: var(--material-sidebar-bg) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.mini-sidebar .top-navbar .navbar-header {
    background: var(--material-sidebar-bg) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.topbar .top-navbar .navbar-header .navbar-brand .light-logo {
    color: #e8eaed;
}

/*.topbar .navbar-header .navbar-brand b {*/
/*  color: #e8eaed;*/
/*}*/

/* Definições: faixa do logo igual ao painel claro (bordas explícitas — evita herdar bordas “escuras”) */
.settings .topbar .navbar-header,
.settings .topbar #topnav-logo-container,
.settings #topnav-logo-container {
    background: var(--material-sidebar-bg) !important;
    border-right: 1px solid #cbd5e1 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.settings.mini-sidebar .top-navbar .navbar-header {
    border-bottom: 1px solid #e2e8f0 !important;
}

.settings .navbar-header .exit-panel a,
.settings .navbar-header .exit-panel .font-14 {
    color: #0f172a !important;
}

.settings .navbar-header .exit-panel i {
    color: #1a73e8 !important;
}

.settings .topbar .top-navbar .navbar-header .navbar-brand .light-logo {
    color: #0f172a !important;
}

@media (max-width: 767px) {
    /* Faixa do logo: no desktop segue o azul da sidebar; no mobile fica branca como o resto do topbar */
    .topbar .navbar-header,
    .topbar #topnav-logo-container {
        background: #ffffff !important;
        border-right: 1px solid #dadce0 !important;
        border-bottom: 1px solid #e8eaed !important;
        /*display: none !important;*/
    }

    .mini-sidebar .top-navbar .navbar-header {
        background: #ffffff !important;
        border-bottom: 1px solid #e8eaed !important;
    }

    .topbar .top-navbar .navbar-header .navbar-brand .light-logo {
        color: var(--material-on-surface) !important;
    }

    .topbar .navbar-header .navbar-brand b {
        color: var(--material-on-surface) !important;
    }

    .settings .top-navbar .navbar-header {
        background: #ffffff !important;
        border-color: #dadce0 !important;
    }

    /* Right sidepanel must fully cover small screens */
    .right-sidebar {
        right: -100vw;
        left: auto;
    }

    .right-sidebar.shw-rside,
    .shw-rside,
    .shw-rside.sidebar-md,
    .shw-rside.sidebar-lg,
    .shw-rside.sidebar-xl,
    .shw-rside.sidebar-xxl,
    .shw-rside.sidebar-full-width {
        right: 0;
        left: 0;
        width: 100vw !important;
        max-width: 100vw;
    }
}

/* Page surface */
.page-wrapper {
    background: var(--material-surface);
}

.container-fluid {
    padding: 28px 28px;
}

/* --------------------------------------------------------------------------
   Home (/home): cartões alinhados na grelha (mesma altura na linha; colunas 8/4 alinhadas)
   Só filhos diretos de .row para não afetar colunas de gráficos/tabelas dentro dos cartões.
   -------------------------------------------------------------------------- */
#js-trigger-home-admin-wrapper > .row,
#js-trigger-home-team-wrapper > .row,
#js-trigger-home-client-wrapper > .row {
    align-items: stretch;
}

/* :not(.hidden) — .hidden no tema é só display:none; um seletor com #id ganha e mostrava o card de tickets (hidden). */
#js-trigger-home-admin-wrapper > .row > [class*="col-"]:not(.hidden):not(.d-none),
#js-trigger-home-team-wrapper > .row > [class*="col-"]:not(.hidden):not(.d-none),
#js-trigger-home-client-wrapper > .row > [class*="col-"]:not(.hidden):not(.d-none) {
    display: flex;
    flex-direction: column;
}

#js-trigger-home-admin-wrapper > .row > [class*="col-"]:not(.hidden):not(.d-none) > .card,
#js-trigger-home-team-wrapper > .row > [class*="col-"]:not(.hidden):not(.d-none) > .card,
#js-trigger-home-client-wrapper > .row > [class*="col-"]:not(.hidden):not(.d-none) > .card {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
}

/* --------------------------------------------------------------------------
   Cards & tables
   -------------------------------------------------------------------------- */
.card {
    border: 1px solid #dadce0;
    border-radius: var(--material-radius-md);
    box-shadow: var(--material-elevation-1);
    background: var(--material-surface-container);
}

.card .card-title {
    font-weight: 600;
    color: var(--material-on-surface);
}

.card .card-subtitle {
    color: var(--material-on-surface-variant);
    font-weight: 500;
}

.table {
    color: var(--material-on-surface-variant);
}

.table thead th {
    color: var(--material-on-surface);
    font-weight: 600;
    border-bottom: 2px solid #dadce0;
}

.table td,
.table th {
    border-color: #e8eaed;
}

.table-hover tbody tr:hover {
    background-color: rgba(26, 115, 232, 0.06);
}

/* --------------------------------------------------------------------------
   Form controls — visible borders + focus ring
   -------------------------------------------------------------------------- */
.form-control {
    border: 1px solid #c4c7c5;
    border-radius: var(--material-radius-sm);
    color: var(--material-on-surface);
    transition: var(--material-transition);
    min-height: 40px;
}

.form-control:hover {
    border-color: var(--material-on-surface);
}

.form-control:focus {
    border-color: var(--material-secondary-blue);
    box-shadow: var(--material-focus-ring);
    outline: none;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #f1f3f4;
    color: #5f6368;
    opacity: 1;
}

.control-label,
.col-form-label {
    font-weight: 600;
    color: var(--material-on-surface);
    font-size: 13px;
}

select.form-control {
    cursor: pointer;
}

/* Select2 / vendor inputs inside theme */
.select2-container--default .select2-selection--single {
    border: 1px solid #c4c7c5 !important;
    border-radius: var(--material-radius-sm) !important;
    min-height: 40px;
}

.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--material-secondary-blue) !important;
    box-shadow: var(--material-focus-ring);
}

/* --------------------------------------------------------------------------
   Buttons — cantos ~3px (sem pill nem círculo)
   -------------------------------------------------------------------------- */
.btn {
    border-radius: var(--material-radius-ui) !important;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: var(--material-transition);
}

.btn-xs,
.btn-sm,
.btn-lg,
.btn-circle,
.btn-rounded,
.btn-rounded-x,
.btn-add-circle,
.btn-icon-circle {
    border-radius: var(--material-radius-ui) !important;
}

.btn-circle,
.btn-add-circle {
    min-width: auto;
}

.btn-icon-circle {
    border-radius: var(--material-radius-ui) !important;
}

.btn:disabled,
.btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-secondary,
.btn-secondary.disabled {
    background-color: #f1f3f4;
    color: #3c4043;
    border: 1px solid #dadce0;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: #e8eaed !important;
    color: #202124 !important;
    border-color: #bdc1c6 !important;
}

.btn-primary,
.btn-primary.disabled {
    background: #e8f0fe !important;
    color: #174ea6 !important;
    border: 1px solid #aecbfa !important;
}

.btn-primary:hover,
.btn-primary.disabled:hover {
    background: #d2e3fc !important;
    color: #174ea6 !important;
    border-color: #8ab4f8 !important;
    box-shadow: var(--material-elevation-1);
}

.btn-primary.active,
.btn-primary:active,
.btn-primary:focus {
    background: #d2e3fc !important;
    color: #174ea6 !important;
}

.btn-success,
.btn-success.disabled {
    background: var(--material-primary-green) !important;
    border: 1px solid var(--material-primary-green) !important;
    color: #ffffff !important;
}

.btn-success:hover,
.btn-success.disabled:hover {
    background: var(--material-primary-green-hover) !important;
    border-color: var(--material-primary-green-hover) !important;
    box-shadow: var(--material-elevation-2);
}

.btn-success.active,
.btn-success:active,
.btn-success:focus {
    background: var(--material-primary-green-pressed) !important;
    border-color: var(--material-primary-green-pressed) !important;
}

.btn-info,
.btn-info.disabled {
    background: #e8f0fe !important;
    color: #1967d2 !important;
    border: 1px solid #aecbfa !important;
}

.btn-info:hover,
.btn-info.disabled:hover {
    background: #d2e3fc !important;
    box-shadow: var(--material-elevation-1);
}

.btn-info.active,
.btn-info:active,
.btn-info:focus {
    background: #d2e3fc !important;
    color: #174ea6 !important;
}

.btn-themecolor,
.btn-themecolor.disabled {
    background: var(--material-secondary-blue) !important;
    border-color: var(--material-secondary-blue) !important;
    color: #ffffff !important;
}

.btn-themecolor:hover {
    background: var(--material-secondary-blue-hover) !important;
    border-color: var(--material-secondary-blue-hover) !important;
}

.btn-danger,
.btn-danger.disabled {
    background: var(--material-danger) !important;
    border-color: var(--material-danger) !important;
    color: #ffffff !important;
}

.btn-danger:hover,
.btn-danger.disabled:hover {
    background: var(--material-danger-hover) !important;
    border-color: var(--material-danger-hover) !important;
    box-shadow: var(--material-elevation-1);
}

.btn-danger.active,
.btn-danger:active,
.btn-danger:focus {
    background: #9c1f18 !important;
    border-color: #9c1f18 !important;
}

/* Grow CRM usa btn-danger para Salvar / + adicionar — forçar verde */
.btn-danger.edit-add-modal-button,
.btn-danger.btn-add-circle,
button[type="submit"].btn-danger:not(.confirm-action-danger),
.btn-danger.apply-filter-button,
.btn-danger.x-submit-button,
.btn-danger.js-description-save,
#commonModalSubmitButton.btn-danger,
#email-general-settings-button.btn-danger,
#settings-submit-button.btn-danger,
#email-smtp-settings-button.btn-danger,
#settingsFormTimesheetsButton.btn-danger,
#editTicketMessageButton.btn-danger,
#card-comment-post-button.btn-danger,
#card-description-button-save.btn-danger,
.actions-modal .btn-danger[type="submit"],
.modal .btn-danger[type="submit"]:not(.confirm-action-danger) {
    background: var(--material-primary-green) !important;
    border-color: var(--material-primary-green) !important;
    color: #ffffff !important;
}

.btn-danger.edit-add-modal-button:hover,
.btn-danger.btn-add-circle:hover,
button[type="submit"].btn-danger:not(.confirm-action-danger):hover,
.btn-danger.apply-filter-button:hover,
.btn-danger.x-submit-button:hover,
.btn-danger.js-description-save:hover,
#commonModalSubmitButton.btn-danger:hover,
#editTicketMessageButton.btn-danger:hover {
    background: var(--material-primary-green-hover) !important;
    border-color: var(--material-primary-green-hover) !important;
}

/* Manter vermelho: eliminar, confirmar perigo, timer, cancelar */
.btn-danger.confirm-action-danger,
.btn-danger.timer-stop-button,
.btn-danger[data-dismiss="modal"],
button.ticket-editor-toggle.btn-danger,
#ticket_reply_button_close.btn-danger {
    background: var(--material-danger) !important;
    border-color: var(--material-danger) !important;
    color: #ffffff !important;
}

.btn-danger.confirm-action-danger:hover,
.btn-danger.timer-stop-button:hover,
.btn-danger[data-dismiss="modal"]:hover,
button.ticket-editor-toggle.btn-danger:hover,
#ticket_reply_button_close.btn-danger:hover {
    background: var(--material-danger-hover) !important;
    border-color: var(--material-danger-hover) !important;
}

/* FullCalendar: botão + (custom_button_add_event) — base tema usa vermelho #ff5c6c */
.calendar .fc-custom_button_add_event-button {
    background: var(--material-primary-green) !important;
    border-color: var(--material-primary-green) !important;
    color: #ffffff !important;
}

.calendar .fc-custom_button_add_event-button:hover {
    background: var(--material-primary-green-hover) !important;
    border-color: var(--material-primary-green-hover) !important;
}

.btn-warning,
.btn-warning.disabled {
    color: #ffffff !important;
}

.btn-outline-success {
    color: var(--material-primary-green) !important;
    border-color: var(--material-primary-green) !important;
    background: transparent !important;
}

.btn-outline-success:hover {
    background: rgba(24, 128, 56, 0.08) !important;
}

.btn-outline-danger {
    color: var(--material-danger) !important;
    border-color: var(--material-danger) !important;
    background: transparent !important;
}

.btn-outline-danger:hover {
    background: rgba(217, 48, 37, 0.08) !important;
}

.btn-outline-info {
    color: var(--material-secondary-blue) !important;
    border-color: #aecbfa !important;
    background: transparent !important;
}

.btn-outline-secondary {
    color: #5f6368 !important;
    border-color: #dadce0 !important;
}

.btn-default {
    background-color: #f1f3f4 !important;
    border: 1px solid #dadce0 !important;
    color: #3c4043 !important;
}

.btn-default:hover {
    background-color: #e8eaed !important;
}

/* --------------------------------------------------------------------------
   Semantic text colors (stronger)
   -------------------------------------------------------------------------- */
.text-success {
    color: var(--material-primary-green) !important;
}

.text-primary {
    color: #1967d2 !important;
}

.text-danger {
    color: var(--material-danger) !important;
}

.text-orange {
    color: #ff9041 !important;
}

.text-info {
    color: var(--material-secondary-blue) !important;
}

.text-label-info {
    color: #20aee3 !important;
}

.text-muted {
    color: #5f6368 !important;
}

.bg-success {
    background-color: var(--material-primary-green) !important;
}

.bg-primary {
    background-color: #e8f0fe !important;
    color: #174ea6 !important;
}

.bg-danger {
    background-color: var(--material-danger) !important;
}

/* --------------------------------------------------------------------------
   Alerts, pagination, badges
   -------------------------------------------------------------------------- */
.alert {
    border-radius: var(--material-radius-sm);
    border-width: 1px;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    background-color: var(--material-secondary-blue);
    border-color: var(--material-secondary-blue);
}

/* --------------------------------------------------------------------------
   Loading / preloader visibility
   -------------------------------------------------------------------------- */
.preloader {
    background: rgba(255, 255, 255, 0.92);
}

.loader-loading {
    border-color: rgba(26, 115, 232, 0.25);
    border-top-color: var(--material-secondary-blue);
}

/* --------------------------------------------------------------------------
   Misc: blockquote, modals
   -------------------------------------------------------------------------- */
html body blockquote {
    border-left: 4px solid var(--material-secondary-blue);
    border-radius: var(--material-radius-sm);
    background: #f8f9fa;
}

.modal-content {
    border-radius: var(--material-radius-md);
    border: 1px solid #dadce0;
    box-shadow: var(--material-elevation-2);
}

/* --------------------------------------------------------------------------
   Accessibility: keyboard focus (does not alter mouse-only link styling)
   -------------------------------------------------------------------------- */
a:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
button:focus-visible {
    outline: 2px solid var(--material-secondary-blue);
    outline-offset: 2px;
}

.form-control:focus {
    outline: none;
}

.form-control:focus-visible {
    box-shadow: var(--material-focus-ring);
}

/* --------------------------------------------------------------------------
   Chips, etiquetas e badges — cantos ~3px (não circulares)
   -------------------------------------------------------------------------- */
.label,
.badge,
.chip,
.bootstrap-tagsinput .tag {
    border-radius: var(--material-radius-ui) !important;
}

.list-table-action .btn {
    border-color: transparent !important;
}

.sidebar-nav ul li ul {
    padding-top: 10px !important;
    /*padding-bottom: 5px !important;*/
}

html body .page-wrapper {
    background: #eee !important;
}

.kanban .kanban-wrapper .boards .board .board-body {
    background-color: #1a23321a !important;
}

/* --------------------------------------------------------------------------
  List page actions toolbar (search + icon buttons + add button)
  -------------------------------------------------------------------------- */
#list-page-actions-container {
    max-width: 100%;
    min-width: 0;
}

.page-titles #list-page-actions-container {
    min-width: 0;
}

#list-page-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    row-gap: 8px;
    max-width: 100%;
    min-width: 0;
    vertical-align: top;
}

.header-search {
    max-width: 220px;
    min-width: 0;
}

@media (max-width: 991.98px) {
    /* Alinhamento à direita: toolbar nas vistas lista / projeto embebido. */
    #list-page-actions-container.text-right {
        text-align: right !important;
    }

    /* Pesquisa em linha completa; ícones e botão + na(s) linha(s) seguinte(s) à direita */
    #list-page-actions {
        justify-content: flex-end;
        width: 100%;
    }

    .header-search {
        max-width: none;
        width: 100%;
        flex: 1 1 100%;
    }
}

@media (max-width: 575.98px) {
    .list-actions-button,
    #list-page-actions .btn-group > .btn {
        min-width: 40px;
        min-height: 40px;
    }
}

.header-search input,
.list-actions-search {
    width: 100%;
    min-width: 0;
    background-color: #ffffff !important;
    border: 1px solid #c7d1db !important;
    color: var(--material-on-surface) !important;
    border-radius: var(--material-radius-md);
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.12);
}

.header-search i {
    color: #5f6368;
}

.header-search input:focus,
.list-actions-search:focus {
    border-color: var(--material-secondary-blue) !important;
    box-shadow: var(--material-focus-ring) !important;
}

.btn.btn-page-actions.list-actions-button,
.list-actions-button {
    background-color: #ffffff !important;
    border: 1px solid #c7d1db !important;
    color: #5f6368 !important;
    border-radius: var(--material-radius-md);
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.12);
    transition: var(--material-transition);
}

.btn.btn-page-actions.list-actions-button:hover,
.list-actions-button:hover {
    background-color: #f1f6ff !important;
    border-color: #9fc0f3 !important;
    color: var(--material-secondary-blue) !important;
    box-shadow: 0 2px 6px rgba(26, 115, 232, 0.2);
}

.btn.btn-page-actions.list-actions-button.active,
.list-actions-button.active {
    background-color: #e8f0fe !important;
    border-color: #7baaf7 !important;
    color: var(--material-secondary-blue) !important;
}

.btn.btn-danger.btn-add-circle {
    box-shadow: 0 2px 6px rgba(24, 128, 56, 0.35);
}

.profile_header.client {
    background-color: #fff !important;
}

/* --------------------------------------------------------------------------
   Projeto: .parent-page-actions
   O default (style.css) usa `.project .parent-page-actions { height: 58px }`.
   Com vistas embebidas (tarefas, etc.) o ajax move `#list-page-actions` para
   este contentor; a altura fixa faz o toolbar transbordar e ficar por cima das
   abas (nav-tabs) no mobile e no desktop.
   -------------------------------------------------------------------------- */
body.project .parent-page-actions {
    height: auto !important;
    min-height: 58px;
}

/* --------------------------------------------------------------------------
   Relatórios — mobile / tablet estreito
   - Rótulos das tabs: no base, .hidden-xs-down esconde texto em ecrãs muito estreitos (só setas).
   - Conteúdo à direita: com menu lateral “aberto” (sem mini-sidebar) o default
     mantém margin-left: 70px no .page-wrapper até 1023px; no telemóvel o conteúdo
     deve ser largura total.
   - Ilustração inicial: largura fixa 390px no default estoura a viewport.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    /* Relatórios + projeto: dropdowns "Financeiro" / "Mais" usam .hidden-xs-down no base */
    body.reports .reports-top-nav .hidden-xs-down,
    body.project .project-top-nav .hidden-xs-down {
        display: inline !important;
    }
}

@media (max-width: 767.98px) {
    /* Mesmo sem classe mini-sidebar (menu expandido nas preferências) */
    .page-wrapper {
        margin-left: 0 !important;
    }

    body.reports .reports-start img {
        max-width: 100%;
        width: auto;
        height: auto;
    }

    body.reports .reports-start {
        box-sizing: border-box;
        padding-left: 4px;
        padding-right: 4px;
    }

    /* Visão geral do projeto: gauge c3 (150px fixos no app.js) não pode transbordar o cartão */
    body.project #project_progress_container {
        overflow-x: hidden;
    }

    body.project #project_progress_container .d-flex.no-block {
        flex-wrap: wrap;
    }

    body.project #project_progress_container .d-flex.no-block > div {
        min-width: 0;
    }

    /* .no-shrink no texto impede encolher e empurra o gráfico para fora do cartão */
    body.project #project_progress_container .d-flex.no-block > .align-self-end.no-shrink {
        flex-shrink: 1 !important;
    }

    body.project #project_progress_container .ml-auto {
        flex: 1 1 auto;
        margin-left: 0 !important;
        display: flex;
        justify-content: flex-end;
        max-width: 100%;
    }

    body.project #project_progress_chart {
        max-width: 100%;
        overflow: hidden;
    }
}

/* --------------------------------------------------------------------------
   Projeto (vistas embebidas): .card-embed-fix tem margin -20px (base) e estoura
   a largura no mobile; .project .tab-body-embedded usa 60px de padding lateral.
   -------------------------------------------------------------------------- */
body.project .tab-body-embedded .card-embed-fix {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
}

/* Menos que os 60px do tema base (evita faixa estreita), mas com margem confortável para o cartão não ficar “colado”. */
body.project #embed-content-container.tab-body.tab-body-embedded,
body.project #embed-content-container.tab-body-embedded {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

@media (min-width: 992px) {
    body.project #embed-content-container.tab-body.tab-body-embedded,
    body.project #embed-content-container.tab-body-embedded {
        padding-left: 48px !important;
        padding-right: 48px !important;
    }
}

/* Cartão da tabela: antes 25px + embed 60px; aqui só aligeiramos o interior para a grelha caber, sem colar ao bordo. */
body.project #embed-content-container .files-table-wrapper.card > .card-body {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* --------------------------------------------------------------------------
   Ficheiros com pastas (table.blade.php): .file-folders--grid usa row/col-*.
   O tema base ainda define float + margin-left na tabela — anulado aqui.
   .files-table-column precisa de min-width: 0 para a tabela não “estourar” o col.
   -------------------------------------------------------------------------- */
.file-folders.enabled.file-folders--grid .folder-panel {
    float: none !important;
    width: 100% !important;
    max-width: 100%;
    min-height: 0;
    margin-top: 0;
    padding-right: 0;
}

.file-folders.enabled.file-folders--grid .files-table-wrapper {
    margin-left: 0 !important;
    width: 100%;
    max-width: 100%;
}

.file-folders.enabled.file-folders--grid .files-table-column {
    min-width: 0;
}

.file-folders.enabled.file-folders--grid .files-table-wrapper .table-responsive {
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 992px) {
    .file-folders.enabled.file-folders--grid .folder-panel {
        padding-right: 1rem;
        border-right: 1px solid #dadce0;
        margin-bottom: 0;
        padding-bottom: 1.5rem;
    }
}

@media (max-width: 991.98px) {
    .file-folders.enabled.file-folders--grid {
        overflow-x: hidden;
    }

    .file-folders.enabled.file-folders--grid .folder-panel {
        border-bottom: 1px solid #dadce0;
        padding-bottom: 1rem;
        margin-bottom: 0;
    }

    /* Tema material usa .container-fluid com 28px — reduz área útil no telemóvel */
    body.project .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Fundo à volta do conteúdo (evita faixa escura nas margens) */
    body.project #main-wrapper {
        background: var(--material-surface-container, #ffffff) !important;
    }
}

.card-modal .card-left-panel .x-action a {
    font-size: 11px !important;
}

.logo-large {
    display: none;
}

@media (min-width: 768px) {
    .logo-small {
        display: none;
    }

    .logo-large {
        display: block;
    }
}

/* List table action menu portaled to body (see events.js — avoids #main-wrapper overflow clip on iOS) */
@media (max-width: 991.98px) {
    body > .dropdown-menu.nx-list-dd-portal {
        max-height: min(75vh, 28rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}