/* ===== VARIÁVEIS GLOBAIS ===== */
:root {
  --moriah-topbar:       #0c1e3d;
  --moriah-blue-dark:    #0c4480;
  --moriah-blue:         #185FA5;
  --moriah-blue-medium:  #378ADD;
  --moriah-blue-light:   #85B7EB;
  --moriah-blue-pale:    #E6F1FB;
  --moriah-content-bg:   #f0f2f5;
  --moriah-badge:        #E24B4A;
  --moriah-font:         'Source Sans 3', sans-serif;
  --topbar-height:       80px;
  --tabs-height:         38px;
  --sidebar-width:       200px;

  --mud-appbar-height:   118px; /* topbar(80px) + tabs(38px) — referência, sobrescrito pelo MudBlazor JS */
}

/* ===== FONTE GLOBAL ===== */
*, body {
  font-family: var(--moriah-font) !important;
}

/* ===== TOPBAR ===== */
.moriah-topbar {
  background-color: var(--moriah-topbar) !important;
  height: var(--topbar-height) !important;
  box-shadow: none !important;
}

/* Centraliza verticalmente todos os itens do topbar */
.moriah-topbar .mud-toolbar {
  height: 100% !important;
  align-items: center !important;
}

.topbar-brand {
  color: white !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
  margin-right: 4px !important;
}

/* ===== TOPBAR — LOGO DO TENANT ===== */
.topbar-logo-area {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 4px;
}

.tenant-logo-pill {
  background: white;
  border-radius: 6px;
  height: 45px;
  padding: 0 12px;
  display: flex;
  align-items: center;
}

.tenant-logo-topbar {
  max-height: 33px;
  max-width: 140px;
  object-fit: contain;
}

.tenant-nome-text {
  font-size: 11px;
  font-weight: 600;
  color: #0c1e3d;
  white-space: nowrap;
}

.topbar-divider {
  width: 0.5px;
  height: 20px;
  background: rgba(255, 255, 255, 0.18);
  margin: 0 10px;
}

.moriah-byline {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.segment-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.08);
  border: 0.5px solid rgba(255,255,255,0.22);
  border-radius: 6px;
  color: rgba(255,255,255,0.85);
  font-size: 11px;
  padding: 6px 14px;
  cursor: pointer;
  margin-left: 12px;
  transition: background 0.15s;
}

.segment-btn:hover {
  background: rgba(255,255,255,0.14);
}

/* ===== MENUS DROPDOWN (MudMenu — todos no app) ===== */
/* Classe real do item: .mud-menu-item / texto: .mud-menu-item-text */
.mud-menu-list {
  display: flex !important;
  flex-direction: column !important;
  padding: 4px 0 !important;
  overflow: hidden !important;
  min-width: 160px !important;
}

.mud-menu-item {
  border-radius: 6px !important;
  padding: 6px 10px !important;
  margin: 1px 4px !important;
  color: #374151 !important;
  background: transparent !important;
}

.mud-menu-item-text {
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: inherit !important;
}

.mud-menu-item:hover {
  background: #f3f4f6 !important;
  color: #111827 !important;
}

/* Rótulo interno dos botões de contexto (Ambiente: / Módulo:) */
.segment-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-right: 4px;
}

/* Variação do seletor de Ambiente — mesmo formato do segment-btn mas tom azul distinto */
.segment-btn--ambiente {
  border-color: rgba(56, 138, 221, 0.5);
  background: rgba(56, 138, 221, 0.12);
}

.segment-btn--ambiente:hover {
  background: rgba(56, 138, 221, 0.22);
}

.topbar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}

.topbar-avatar:hover {
  background: rgba(255,255,255,0.22);
}

/* ===== TABS DE MÓDULOS (div fixa abaixo do AppBar) ===== */
.modulos-tabs-bar {
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  right: 0;
  z-index: 1200; /* acima do MudDrawer (~1000) e MudAppBar (~1100) */
  background: var(--moriah-topbar);
  height: var(--tabs-height);
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding: 0 20px;
}

.modulo-tab {
  position: relative;
  padding: 7px 20px 9px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  background: rgba(255,255,255,0.07);
  border-radius: 8px 8px 0 0;
  border: 0.5px solid rgba(255,255,255,0.12);
  border-bottom: none;
  white-space: nowrap;
  transition: all 0.15s;
  user-select: none;
  line-height: 1;
}

.modulo-tab:hover {
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.13);
}

.modulo-tab.active {
  background: var(--moriah-content-bg);
  color: var(--moriah-topbar);
  font-weight: 600;
  border-color: transparent;
  padding-bottom: 11px;
  margin-bottom: -1px;
  z-index: 5;
}

.modulo-tab--disabled {
  color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
  cursor: not-allowed;
  pointer-events: none;
}

.modulo-tab--disabled:hover {
  color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.03);
}

/* ===== BADGE DA TAB ===== */
.tab-badge {
  position: absolute;
  top: -7px;
  right: -5px;
  background: var(--moriah-badge);
  color: white;
  font-size: 10px;
  font-weight: 600;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1.5px solid var(--moriah-topbar);
  z-index: 6;
}

.tab-badge.active {
  border-color: var(--moriah-content-bg);
}

/* ===== SIDEBAR ===== */
.moriah-sidebar {
  width: var(--sidebar-width) !important;
  top: calc(var(--topbar-height) + var(--tabs-height)) !important;
  border-right: 0.5px solid rgba(0,0,0,0.08) !important;
  box-shadow: none !important;
}

.moriah-sidebar .mud-drawer-header {
  display: none !important;
}

/*
 * Corrige o gap à esquerda:
 * MudBlazor usa --mud-drawer-width-left para calcular o margin-left do MudMainContent.
 * Por padrão é 240px, mas nosso sidebar é 200px — 40px de gap indesejado.
 */
.mud-layout {
  --mud-drawer-width-left: var(--sidebar-width) !important;
}

.moriah-sidebar .mud-drawer-content {
  padding: 10px 8px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ===== SIDEBAR — FOOTER (Moriah One + versão) ===== */
.sidebar-footer {
  margin-top: auto;
  padding: 10px 14px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
}

.moriah-footer-brand {
  font-size: 8px;
  font-weight: 500;
  color: #d1d5db;
  letter-spacing: 0.3px;
}

.moriah-footer-version {
  font-size: 8px;
  color: #e5e7eb;
  margin-top: 1px;
}

.sidebar-section-title {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #6b7280 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin: 4px 0 8px 4px !important;
  line-height: 1.2 !important;
}

/* ===== NAV ITEMS ===== */
a.nav-item,
.nav-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 7px 10px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: #374151 !important;
  cursor: pointer !important;
  margin-bottom: 2px !important;
  border: none !important;
  text-decoration: none !important;
  transition: background 0.12s !important;
  background: transparent !important;
}

a.nav-item:hover,
.nav-item:hover {
  background: #f3f4f6 !important;
  color: #111827 !important;
  text-decoration: none !important;
}

a.nav-item-active,
.nav-item-active,
a.nav-item.active,
.nav-item.active {
  background: var(--moriah-blue-pale) !important;
  color: var(--moriah-blue) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* ===== ÍCONE DO NAV ===== */
.nav-item-icon {
  font-size: 16px !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  opacity: 0.6;
  margin-right: 8px !important;
}
a.nav-item-active .nav-item-icon,
.nav-item-active .nav-item-icon {
  opacity: 1;
}

/* ===== BADGE DO NAV ===== */
.nav-badge {
  background: var(--moriah-badge);
  color: white;
  font-size: 10px;
  font-weight: 600;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  flex-shrink: 0;
}

/* ===== GRUPO DO NAV (divisor de seção no sidebar) ===== */
.nav-group-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #9ca3af !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  padding: 12px 10px 4px !important;
  line-height: 1 !important;
  margin-top: 2px !important;
}

/* ===== CONTEÚDO PRINCIPAL ===== */
/*
 * MudBlazor JS mede o AppBar (56px) e sobrescreve --mud-appbar-height: 56px via inline style
 * no .mud-layout, ignorando nosso :root de 94px.
 * Resultado: padding-top do MudMainContent fica 56px → conteúdo atrás das tabs.
 * Fix: forçamos padding-top = topbar(56px) + tabs(38px) = 94px com !important.
 */
.mud-main-content {
  padding-top: calc(var(--topbar-height) + var(--tabs-height)) !important;
}

.moriah-content {
  background: var(--moriah-content-bg) !important;
  height: 100vh !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Área do @Body — cresce e rola; footer sempre visível abaixo */
.content-body {
  flex: 1 1 auto;
  overflow-y: auto;
}

/* ===== FOOTER ===== */
.moriah-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  margin-top: auto;
  border-top: 0.5px solid rgba(0,0,0,0.08);
  background: #ffffff;
  font-size: 11px;
  color: #9ca3af;
}

.footer-copy {
  font-weight: 400;
}

.footer-versions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer-version {
  font-weight: 600;
  color: #6b7280;
  background: #f3f4f6;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  letter-spacing: 0.3px;
}

.footer-separator {
  color: #d1d5db;
  font-size: 12px;
}

/* ===== BOTÃO PRIMÁRIO ===== */
.mud-button-filled-primary {
  background-color: var(--moriah-blue) !important;
  text-transform: none !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

.mud-button-filled-primary:hover {
  background-color: var(--moriah-blue-dark) !important;
}

/* ===== STATUS PILLS ===== */
.status-pendente  { background: #FAEEDA !important; color: #854F0B !important; }
.status-enviado   { background: #EAF3DE !important; color: #3B6D11 !important; }
.status-aprovado  { background: #EAF3DE !important; color: #3B6D11 !important; }
.status-declinado { background: #FCEBEB !important; color: #A32D2D !important; }
.status-cancelado { background: #F1EFE8 !important; color: #5F5E5A !important; }

.status-pill {
  font-size: 10px !important;
  padding: 3px 8px !important;
  border-radius: 12px !important;
  font-weight: 500 !important;
  display: inline-block !important;
}

/* ===== TABELAS ===== */
.moriah-table-header {
  background: #f9fafb;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  padding: 10px 16px;
  border-bottom: 0.5px solid rgba(0,0,0,0.08);
}

.moriah-table-row {
  padding: 11px 16px;
  border-bottom: 0.5px solid rgba(0,0,0,0.05);
  font-size: 12px;
}

.moriah-table-row:hover {
  background: #f9fafb;
}

/* ===== MUD TABS COMPLETE REGISTRATION ===== */
.tabs-fill .mud-tabs-toolbar,
.tabs-fill .mud-tabs-toolbar-wrapper,
.tabs-fill .mud-tabs-tabbar {
  width: 100% !important;
}

.tabs-fill .mud-tabs-tabbar {
  display: flex !important;
  overflow: hidden !important;
}

.tabs-fill .mud-tabs-tabbar .mud-tab {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  justify-content: center !important;
}

.tabs-fill .mud-tabs-tabbar .mud-tab .mud-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== UTILITÁRIOS RESPONSIVOS ===== */
.only-mobile  { display: none !important; }
.mobile-toolbar { display: none; align-items: center; gap: 8px; }

/* Topbar mobile: oculto no desktop, ativado via media query */
.m-topbar { display: none; }

/* Perfil mobile: oculto no desktop */
.m-profile-overlay { display: none; }

/* Modal conta mobile: oculto no desktop */
.m-conta-overlay { display: none; }

/* Barra de seções mobile: oculta no desktop */
.m-secao-bar    { display: none; }

/* Tabs dropdown mobile: oculto no desktop */
.tabs-dropdown  { display: none; }

/* Nav drawer mobile: oculto no desktop */
.m-nav-drawer   { display: none; }

@media (max-width: 768px) {
    .only-mobile    { display: inline-flex !important; }
    .only-desktop   { display: none !important; }
    .mobile-toolbar { display: flex; }
}

/* ===== RESPONSIVO ===== */
@media (max-width: 768px) {

    /* ----- Variáveis mobile ----- */
    :root {
        --topbar-height-mobile: 50px;
        --tabs-height-mobile:   40px;
        --bottom-nav-height:    60px;
    }

    /* ----- Topbar mobile: Row 1 ----- */
    .m-topbar {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0; left: 0; right: 0;
        background: #0c1e3d;
        z-index: 1100;
    }

    .topbar-row1 {
        height: 50px;
        display: flex;
        align-items: center;
        padding: 0 12px;
        gap: 7px;
        border-bottom: 0.5px solid rgba(255,255,255,0.06);
    }

    .m-logo {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }

    .m-logo-icon {
        width: 22px;
        height: 22px;
    }

    .m-logo-name {
        font-size: 13px;
        font-weight: 700;
        color: #fff;
        letter-spacing: -0.2px;
        white-space: nowrap;
    }

    .m-spacer { flex: 1; }

    .m-pill-btn {
        display: flex;
        align-items: center;
        gap: 5px;
        background: rgba(255,255,255,0.1);
        border: 0.5px solid rgba(255,255,255,0.16);
        border-radius: 8px;
        padding: 5px 9px;
        cursor: pointer;
        flex-shrink: 0;
    }

    .m-pill-label {
        font-size: 11px;
        font-weight: 600;
        color: white;
        white-space: nowrap;
    }

    .m-pill-ch {
        font-size: 10px;
        color: rgba(255,255,255,0.42);
    }

    .m-sep {
        width: 0.5px;
        height: 18px;
        background: rgba(255,255,255,0.18);
        flex-shrink: 0;
        margin: 0 1px;
    }

    .m-avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: rgba(255,255,255,0.12);
        border: 0.5px solid rgba(255,255,255,0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
    }

    /* ----- Barra de seções mobile (Row 2) ----- */
    .m-secao-bar {
        display: flex;
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        height: 40px;
        background: #0c1e3d;
        z-index: 1099;
        padding: 0 8px;
        gap: 8px;
        align-items: center;
        border-top: 0.5px solid rgba(255,255,255,0.07);
    }

    .m-secao-item {
        flex-shrink: 0;
        position: relative;
        display: flex;
        align-items: center;
        gap: 5px;
        height: 28px;
        padding: 0 12px;
        border-radius: 7px;
        font-size: 12px;
        font-weight: 500;
        color: rgba(255,255,255,0.55);
        cursor: pointer;
        white-space: nowrap;
        transition: background .15s, color .15s;
    }

    .m-secao-item:active { background: rgba(255,255,255,0.12); }

    .m-secao-item.active {
        background: rgba(255,255,255,0.12);
        color: #fff;
        font-weight: 600;
    }

    .m-secao-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 8px;
        background: #e53935;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
    }

    /* ----- Hamburger ----- */
    .m-hamburger {
        width: 34px;
        height: 28px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
        flex-shrink: 0;
        padding: 0 3px;
    }

    .m-hamburger span {
        display: block;
        height: 1.5px;
        background: rgba(255,255,255,0.72);
        border-radius: 2px;
        transition: transform .2s ease, opacity .15s ease;
        transform-origin: center;
    }

    .m-hamburger.is-open span:nth-child(1) {
        transform: translateY(6.5px) rotate(45deg);
        background: rgba(255,255,255,0.9);
    }

    .m-hamburger.is-open span:nth-child(2) {
        opacity: 0;
    }

    .m-hamburger.is-open span:nth-child(3) {
        transform: translateY(-6.5px) rotate(-45deg);
        background: rgba(255,255,255,0.9);
    }

    /* ----- Botão de seção ativa ----- */
    .m-secao-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        height: 28px;
        padding: 0 10px;
        background: rgba(255,255,255,0.09);
        border: 0.5px solid rgba(255,255,255,0.14);
        border-radius: 8px;
        cursor: pointer;
        flex-shrink: 0;
        max-width: calc(100% - 60px);
        margin-left: auto;
        transition: background .15s;
    }

    .m-secao-btn:active,
    .m-secao-btn.is-open {
        background: rgba(255,255,255,0.18);
    }

    .m-secao-btn-label {
        font-size: 12px;
        font-weight: 600;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .m-secao-btn-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 8px;
        background: #e53935;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        flex-shrink: 0;
    }

    .m-secao-btn-arr {
        color: rgba(255,255,255,0.55);
        flex-shrink: 0;
        transition: transform .2s ease;
    }

    .m-secao-btn.is-open .m-secao-btn-arr {
        transform: rotate(180deg);
    }

    /* ----- Tap-close — overlay invisível ----- */
    .tap-close {
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(12,30,61,0.32);
        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px);
    }

    /* ----- Tabs dropdown ----- */
    .tabs-dropdown {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 90px;
        left: 0;
        right: 0;
        background: #fff;
        z-index: 1050;
        max-height: calc(100vh - 90px);
        overflow-y: auto;
        box-shadow: 0 8px 24px rgba(0,0,0,0.14);
        border-bottom: 0.5px solid rgba(0,0,0,0.07);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-6px);
        transition: transform .2s ease, opacity .18s;
    }

    .tabs-dropdown.open {
        opacity: 1;
        pointer-events: all;
        transform: translateY(0);
    }

    .tabs-dd-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        cursor: pointer;
        border-bottom: 0.5px solid rgba(0,0,0,0.05);
        transition: background .1s;
    }

    .tabs-dd-item:last-child { border-bottom: none; }
    .tabs-dd-item:active     { background: #f5f7fa; }
    .tabs-dd-item.active     { background: #EDF4FB; }

    .tabs-dd-icon {
        width: 36px;
        height: 36px;
        border-radius: 9px;
        background: rgba(24,95,165,0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #185FA5;
        flex-shrink: 0;
    }

    .tabs-dd-item.active .tabs-dd-icon {
        background: rgba(24,95,165,0.15);
    }

    .tabs-dd-info { flex: 1; min-width: 0; }

    .tabs-dd-name {
        font-size: 14px;
        font-weight: 600;
        color: #1a1a2e;
        line-height: 1.3;
    }

    .tabs-dd-item.active .tabs-dd-name { color: #185FA5; }

    .tabs-dd-desc {
        font-size: 11px;
        color: #9ca3af;
        margin-top: 1px;
    }

    .tabs-dd-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 10px;
        background: #e53935;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        flex-shrink: 0;
    }

    /* ----- Nav drawer (hamburger slide-in) ----- */
    .m-nav-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 90px;
        bottom: 0;
        left: 0;
        width: 220px;
        background: #fff;
        z-index: 1050;
        overflow-y: auto;
        padding: 10px 8px;
        box-shadow: 4px 0 20px rgba(0,0,0,0.14);
        transform: translateX(-100%);
        transition: transform .25s ease;
    }

    .m-nav-drawer.open {
        transform: translateX(0);
    }

    /* ----- Popup de perfil mobile ----- */
    .m-profile-overlay {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 1200;
        align-items: flex-start;
        justify-content: flex-end;
        pointer-events: none;
        opacity: 0;
        transition: opacity .18s;
        background: rgba(12,30,61,0.45);
        backdrop-filter: blur(2px);
    }

    .m-profile-overlay.open {
        pointer-events: all;
        opacity: 1;
    }

    .m-profile-card {
        background: white;
        border-radius: 14px;
        width: 240px;
        margin: 54px 12px 0 0;
        overflow: hidden;
        transform: scale(0.9) translateY(-8px);
        transform-origin: top right;
        transition: transform .2s ease, opacity .18s ease;
        opacity: 0;
        box-shadow: 0 16px 48px rgba(0,0,0,0.22);
    }

    .m-profile-overlay.open .m-profile-card {
        transform: scale(1) translateY(0);
        opacity: 1;
    }

    .m-profile-head {
        padding: 16px 16px 12px;
        border-bottom: 0.5px solid rgba(0,0,0,0.08);
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .m-profile-avatar-lg {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #E6F1FB;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 700;
        color: #185FA5;
        flex-shrink: 0;
    }

    .m-profile-name  { font-size: 13px; font-weight: 700; color: #1a1a2e; }
    .m-profile-email { font-size: 11px; color: #9ca3af; margin-top: 1px; }

    .m-profile-role-badge {
        display: inline-flex;
        background: #E6F1FB;
        color: #185FA5;
        font-size: 10px;
        font-weight: 700;
        padding: 2px 7px;
        border-radius: 6px;
        margin-top: 4px;
    }

    .m-profile-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 16px;
        cursor: pointer;
        transition: background .1s;
        border-bottom: 0.5px solid rgba(0,0,0,0.04);
    }

    .m-profile-item:last-child { border-bottom: none; }
    .m-profile-item:hover { background: #fafafa; }
    .m-profile-item.danger span:last-child { color: #A32D2D; }

    .m-profile-item-icon { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }

    .m-profile-divider { height: 0.5px; background: rgba(0,0,0,0.08); }

    /* ----- Modal selecionar conta ----- */
    .m-conta-overlay {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 1200;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        opacity: 0;
        transition: opacity .2s;
        background: rgba(12,30,61,0.55);
        backdrop-filter: blur(3px);
    }

    .m-conta-overlay.open {
        pointer-events: all;
        opacity: 1;
    }

    .m-conta-modal {
        background: white;
        border-radius: 16px;
        width: calc(100% - 48px);
        max-width: 310px;
        overflow: hidden;
        transform: scale(0.92) translateY(8px);
        transition: transform .22s ease, opacity .18s ease;
        opacity: 0;
        box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    }

    .m-conta-overlay.open .m-conta-modal {
        transform: scale(1) translateY(0);
        opacity: 1;
    }

    .m-conta-head {
        padding: 16px 18px 12px;
        border-bottom: 0.5px solid rgba(0,0,0,0.08);
    }

    .m-conta-title { font-size: 15px; font-weight: 700; color: #0c1e3d; }
    .m-conta-sub   { font-size: 11px; color: #9ca3af; margin-top: 2px; }

    .m-conta-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 13px 18px;
        cursor: pointer;
        transition: background .1s;
        border-bottom: 0.5px solid rgba(0,0,0,0.04);
    }

    .m-conta-item:last-of-type { border-bottom: none; }
    .m-conta-item:hover        { background: #fafafa; }
    .m-conta-item.active       { background: #E6F1FB; }

    .m-conta-item-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 700;
        flex-shrink: 0;
    }

    .m-conta-item-name {
        font-size: 14px;
        font-weight: 600;
        color: #1a1a2e;
        flex: 1;
    }

    .m-conta-item.active .m-conta-item-name { color: #185FA5; }

    .m-conta-check {
        color: #185FA5;
        font-size: 18px;
        font-weight: 700;
        flex-shrink: 0;
    }

    .m-conta-cancel {
        padding: 13px 18px;
        text-align: center;
        font-size: 13px;
        font-weight: 700;
        color: #9ca3af;
        border-top: 0.5px solid rgba(0,0,0,0.08);
        cursor: pointer;
        transition: background .1s;
    }

    .m-conta-cancel:hover { background: #fafafa; }

    /* ----- Topbar compacta ----- */
    .moriah-topbar {
        height: var(--topbar-height-mobile) !important;
    }

        .moriah-topbar .mud-toolbar {
            padding: 0 12px !important;
        }

    /* Oculta elementos secundários do topbar em telas pequenas */
    .topbar-divider,
    .moriah-byline,
    .segment-btn--ambiente {
        display: none !important;
    }

    /* Logo do tenant menor */
    .tenant-logo-pill {
        height: 34px;
        padding: 0 8px;
    }

    .tenant-logo-topbar {
        max-height: 24px;
        max-width: 100px;
    }

    /* Botão de conta (tenant) mais compacto */
    .segment-btn {
        font-size: 11px;
        padding: 5px 10px;
        margin-left: 6px;
    }

    /* ----- Tabs de módulos: scroll horizontal sem scrollbar visível ----- */
    .modulos-tabs-bar {
        top: var(--topbar-height-mobile);
        height: var(--tabs-height-mobile);
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none; /* Firefox */
        -webkit-overflow-scrolling: touch;
        padding: 0 12px;
        gap: 2px;
        align-items: center;
    }

        .modulos-tabs-bar::-webkit-scrollbar {
            display: none; /* Chrome/Safari */
        }

    .modulo-tab {
        padding: 6px 14px 8px;
        font-size: 12px;
        flex-shrink: 0;
    }

        .modulo-tab.active {
            padding-bottom: 10px;
        }

    /* ----- Sidebar: oculta em mobile — substituída pela bottom nav ----- */
    .moriah-sidebar {
        display: none !important;
    }

    /* Remove margem que o MudBlazor adiciona por conta do drawer */
    .mud-layout {
        --mud-drawer-width-left: 0px !important;
    }

    /* ----- Conteúdo principal: ajusta padding para topbar mobile + tabs + bottom nav ----- */
    .mud-main-content {
        padding-top: calc(var(--topbar-height-mobile) + var(--tabs-height-mobile)) !important;
        padding-bottom: var(--bottom-nav-height) !important;
        padding-left: 0 !important;
    }

    .moriah-content {
        height: calc(100vh - var(--bottom-nav-height)) !important;
    }

    /* ----- Bottom Navigation ----- */
    /*
   * Adicione no seu _Layout.cshtml (antes de </body>):
   *
   *   <nav class="moriah-bottom-nav">
   *     <a href="/contas"     class="bottom-nav-item">...</a>
   *     <a href="/usuarios"   class="bottom-nav-item bottom-nav-item--active">...</a>
   *     <a href="/financeiro" class="bottom-nav-item">...</a>
   *     <a href="/config"     class="bottom-nav-item">...</a>
   *   </nav>
   */
    .moriah-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: var(--bottom-nav-height);
        background: #ffffff;
        border-top: 0.5px solid rgba(0, 0, 0, 0.10);
        z-index: 1300;
        align-items: stretch;
        padding-bottom: env(safe-area-inset-bottom); /* suporte a iPhone com notch */
    }

    .bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        text-decoration: none;
        color: #9ca3af;
        font-size: 10px;
        font-weight: 400;
        transition: color 0.15s;
        -webkit-tap-highlight-color: transparent;
    }

        .bottom-nav-item:hover,
        .bottom-nav-item:active {
            color: var(--moriah-blue);
            text-decoration: none;
        }

    .bottom-nav-item--active {
        color: var(--moriah-blue) !important;
        font-weight: 600 !important;
    }

    .bottom-nav-icon {
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Esconde a bottom nav em desktop (ela só existe em mobile) */
    /* — a nav em si pode estar no HTML sempre; só aparece via esta media query */

    /* ----- Tabelas → Cards ----- */
    /*
   * Em mobile, linhas de tabela viram cards empilhados.
   * Envolva cada linha em: <div class="moriah-table-row moriah-card-row">
   * e cada célula em:      <div class="moriah-card-cell" data-label="Nome">...</div>
   */
    .moriah-table-header {
        display: none !important; /* Cabeçalho da tabela some — os labels ficam inline */
    }

    .moriah-table-row {
        display: flex !important;
        flex-direction: column !important;
        background: #ffffff;
        border-radius: 10px !important;
        border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
        margin: 0 12px 8px !important;
        padding: 12px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

        .moriah-table-row:hover {
            background: #f9fafb;
        }

    /* Célula individual vira linha label + valor */
    .moriah-card-cell {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 4px 0 !important;
        font-size: 13px !important;
        border-bottom: 0.5px solid rgba(0, 0, 0, 0.05) !important;
        gap: 8px;
    }

        .moriah-card-cell:last-child {
            border-bottom: none !important;
            padding-bottom: 0 !important;
        }

        /* Label gerado via data-label="Nome" */
        .moriah-card-cell::before {
            content: attr(data-label);
            font-size: 11px;
            font-weight: 600;
            color: #9ca3af;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
            flex-shrink: 0;
        }

    /* Linha de cabeçalho do card (nome + status) */
    .moriah-card-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 8px !important;
        gap: 8px;
    }

    .moriah-card-avatar {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--moriah-blue-pale);
        color: var(--moriah-blue);
        font-size: 12px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .moriah-card-name {
        flex: 1;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #111827 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ----- Status pills: tamanho touch-friendly ----- */
    .status-pill {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }

    /* ----- Footer: simplificado em mobile ----- */
    .moriah-footer {
        flex-direction: column !important;
        gap: 4px !important;
        padding: 10px 16px !important;
        text-align: center !important;
        margin-bottom: var(--bottom-nav-height) !important;
    }

    /* ----- Página interna: padding lateral menor ----- */
    .content-body {
        padding: 0 !important;
    }

    /* Paginação: compacta e com quebra de linha se necessário */
    .mud-table-pagination {
        padding: 0 12px !important;
        flex-wrap: wrap !important;
    }

}

/* ===== MOBILE CARDS — GRADES ===== */

/* Desktop: esconde lista mobile */
.mc-list { display: none; }

/* Mobile: oculta tabela visualmente (sem tirar do DOM) e mostra lista de cards */
@media (max-width: 768px) {
    .hide-mobile {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
    }
    .mc-list { display: block; }
}

.mc-card {
    background: #ffffff;
    border-radius: 10px;
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    margin: 0 0 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.mc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px 6px 14px;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
}

.mc-id {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
}

.mc-body {
    padding: 10px 14px 12px;
}

.mc-name {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 6px;
    line-height: 1.3;
}

.mc-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mc-meta-label {
    font-size: 10px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mc-meta-value {
    font-size: 12px;
    color: #374151;
    font-weight: 500;
}

.mc-pager {
    display: flex;
    justify-content: center;
    padding: 8px 0 4px;
}

/* ===== EMPRESA CARDS (mobile lista estilo preview) ===== */

.empresa-card {
    background: #ffffff;
    border-radius: 12px;
    margin: 12px 0 0;
    border: 0.5px solid rgba(0,0,0,0.08);
    padding: 14px;
    cursor: pointer;
    transition: background .1s;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.empresa-card:hover  { background: #fafafa; }
.empresa-card:active { background: #f5f7fa; }
.empresa-card:last-child { margin-bottom: 14px; }

/* ── layout de card com linha-1 (ícone+nome+slug+status) e linha-2 (descrição) ── */
.mc-card-col {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.mc-row1 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mc-name {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a2e;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-slug {
    font-size: 10px;
    font-weight: 600;
    color: #9ca3af;
    background: #f4f5f7;
    border: 0.5px solid rgba(0,0,0,0.08);
    border-radius: 6px;
    padding: 2px 7px;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: monospace;
}

.mc-desc {
    margin-top: 5px;
    font-size: 11px;
    color: #9ca3af;
    line-height: 1.45;
}

.empresa-av {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.av-blue  { background: #E6F1FB; color: #185FA5; }
.av-green { background: #EAF3DE; color: #3B6D11; }
.av-amber { background: #FAEEDA; color: #854F0B; }
.av-gray  { background: #F1EFE8; color: #5F5E5A; }
.av-red   { background: #FCEBEB; color: #A32D2D; }

.empresa-name  { font-size: 13px; font-weight: 700; color: #1a1a2e; line-height: 1.3; }
.empresa-tags  { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }

.empresa-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
}

.p-green { background: #EAF3DE; color: #3B6D11; }
.p-amber { background: #FAEEDA; color: #854F0B; }
.p-red   { background: #FCEBEB; color: #A32D2D; }
.p-gray  { background: #F1EFE8; color: #5F5E5A; }
.p-blue  { background: #E6F1FB; color: #185FA5; }

/* ===== LOADER DE INICIALIZAÇÃO ===== */
.moriah-loader {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(24, 95, 165, 0.18) 0%, transparent 65%),
    linear-gradient(160deg, rgba(12, 30, 61, 0.97) 0%, rgba(10, 24, 50, 0.95) 55%, rgba(12, 52, 110, 0.93) 100%);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.moriah-loader__bg-m {
  position: absolute;
  top: -15%;
  left: -15%;
  height: 120vh;
  width: auto;
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
}

.moriah-loader__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.moriah-loader__tagline {
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
  letter-spacing: 0.6px;
}

.moriah-loader__frase {
  color: rgba(255, 255, 255, 0.65);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.3px;
  text-align: center;
  max-width: 300px;
  min-height: 22px;
  animation: moriah-frase-in 0.6s ease-out;
}

@keyframes moriah-frase-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.moriah-loader__dots {
  display: flex;
  gap: 10px;
}

.moriah-loader__dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--moriah-blue-light);
  animation: moriah-dot-pulse 1.4s infinite ease-in-out;
}

.moriah-loader__dots span:nth-child(2) { animation-delay: 0.22s; }
.moriah-loader__dots span:nth-child(3) { animation-delay: 0.44s; }

@keyframes moriah-dot-pulse {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.75); }
  40%           { opacity: 1;    transform: scale(1);    }
}

/* ── Activity Log Payload (Auditoria) ──────────────────────── */
.activity-log-payload {
  background: #1e1e1e;
  border-radius: 6px;
  padding: 12px 16px;
  max-height: 320px;
  overflow: auto;
}

.activity-log-payload pre {
  margin: 0;
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: 12px;
  line-height: 1.6;
  color: #d4d4d4;
  white-space: pre;
}