/* =========================================================================
   TOPBAR / RIBBON — CoreBanking
   Inspirado no ribbon do Microsoft Word: separadores principais no topo,
   e por baixo uma faixa contextual com os "grupos" de ferramentas de cada
   separador. Layout claro (light), cara de banco, cantos praticamente
   retos (max. 1px de border-radius em toda a folha de estilos).

   ORGANIZAÇÃO DO FICHEIRO
   1. Tokens (variáveis)
   2. Reset local
   3. Estrutura geral do appbar
   4. Separadores principais (tabs)               -> .x-tab / .x-tab-active
   5. Faixa do ribbon e painéis por separador      -> .x-ribbon-panel / .x-ribbon-panel-active
   6. Grupos e botões do ribbon                    -> .x-group / .x-btn / .x-btn-active
   7. Dropdowns (sem JS)                           -> .x-dropdown / .x-dropdown-active
   8. Área do utilizador (única parte com JS)      -> .x-user-menu / .x-user-menu-active
   9. Área de conteúdo principal
   10. Utilitários de estado genéricos             -> .x-active / .x-current

   REGRA DE ESTADO "ACTIVO"
   Como existem vários tipos de elementos que podem ficar "activos"
   (separador principal, painel do ribbon, botão do ribbon, item de
   dropdown, item de menu do utilizador), cada tipo tem a sua própria
   classe de estado, todas seguindo o padrão x-<elemento>-active, para
   nunca haver ambiguidade sobre o que está a ser marcado:

     .x-tab-active           -> separador principal seleccionado
     .x-ribbon-panel-active  -> painel do ribbon visível
     .x-btn-active            -> botão do ribbon correspondente à vista actual
     .x-dropdown-active      -> dropdown aberto
     .x-dropdown-item-active -> item seleccionado dentro de um dropdown
     .x-user-menu-active     -> menu do utilizador aberto

   Também existe uma classe genérica ".x-active" que pode ser usada em
   qualquer novo componente que vier a ser adicionado, caso não se queira
   criar uma classe dedicada de imediato.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------- */
:root {
    /* cor - fundo / superfícies */
    --x-bg: #eef0f2;
    --x-surface: #ffffff;
    --x-surface-alt: #f6f7f9;
    --x-surface-sunken: #eceef1;

    /* cor - linhas e bordas */
    --x-border: #d7dce1;
    --x-border-strong: #b9c1ca;

    /* cor - marca (banco) */
    --x-primary: #0d3b66;
    --x-primary-dark: #082948;
    --x-primary-tint: #e7edf3;
    --x-accent: #a9791f;
    --x-accent-tint: #f4ecd8;

    /* cor - texto */
    --x-text: #1f2a37;
    --x-text-muted: #5b6572;
    --x-text-inverse: #ffffff;

    /* cor - estado */
    --x-danger: #a33227;
    --x-danger-tint: #f5e6e4;
    --x-focus: #0d3b66;

    /* tipografia — pilha "Office-like", coerente com a inspiração no Word */
    --x-font: "Segoe UI", "Segoe UI Variable", Arial, Helvetica, sans-serif;
    --x-font-caption: "Segoe UI", Arial, sans-serif;

    /* geometria — praticamente sem arredondamento (máx. 1px) */
    --x-radius: 1px;

    /* medidas */
    --x-topbar-height: 44px;
    --x-ribbon-height: 92px;
    --x-gap: 8px;
}

/* -------------------------------------------------------------------------
     2. RESET LOCAL (não interfere com o resto da aplicação)
     ------------------------------------------------------------------------- */
.x-appbar,
.x-appbar *,
.x-content,
.x-content * {
    box-sizing: border-box;
}

.x-appbar {
    font-family: var(--x-font);
    color: var(--x-text);
    background: var(--x-surface);
    -webkit-font-smoothing: antialiased;
}

.x-appbar button,
.x-appbar input,
.x-appbar label {
    font-family: inherit;
    font-size: 13px;
    color: inherit;
}

.x-appbar a {
    color: inherit;
    text-decoration: none;
}

/* -------------------------------------------------------------------------
     3. ESTRUTURA GERAL DO APPBAR
     ------------------------------------------------------------------------- */
.x-appbar {
    position: relative;
    border-bottom: 1px solid var(--x-border-strong);
}

/* inputs de controlo dos separadores — não são visíveis,
     apenas guardam o estado "qual separador está seleccionado" */
.x-tab-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.x-appbar-top {
    height: var(--x-topbar-height);
    display: flex;
    align-items: stretch;
    background: var(--x-surface);
    border-bottom: 1px solid var(--x-border);
}

/* -- marca / logótipo do banco -- */
.x-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    border-right: 1px solid var(--x-border);
    white-space: nowrap;
}

.x-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: var(--x-primary);
    color: var(--x-text-inverse);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.5px;
    border-radius: var(--x-radius);
}

.x-brand-name {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--x-primary-dark);
    letter-spacing: 0.2px;
}

/* -------------------------------------------------------------------------
     4. SEPARADORES PRINCIPAIS (TABS)
     ------------------------------------------------------------------------- */
.x-tabs {
    display: flex;
    align-items: stretch;
}

.x-tab {
    display: flex;
    align-items: center;
    padding: 0 18px;
    height: 100%;
    font-size: 13px;
    font-weight: 600;
    color: var(--x-text-muted);
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    position: relative;
}

.x-tab:hover {
    color: var(--x-primary-dark);
    background: var(--x-surface-alt);
}

.x-tab:focus-visible {
    outline: 2px solid var(--x-focus);
    outline-offset: -2px;
}

/* estado "activo" do separador principal — via :checked (sem JS)
     e também disponível como classe explícita .x-tab-active, para o
     dia em que os separadores passem a ser controlados por JS/router. */
#x-tab-microcredito:checked~.x-appbar-top label[for="x-tab-microcredito"],
#x-tab-banco:checked~.x-appbar-top label[for="x-tab-banco"],
#x-tab-admin:checked~.x-appbar-top label[for="x-tab-admin"],
.x-tab.x-tab-active {
    color: var(--x-primary-dark);
    background: var(--x-surface-alt);
}

#x-tab-microcredito:checked~.x-appbar-top label[for="x-tab-microcredito"]::after,
#x-tab-banco:checked~.x-appbar-top label[for="x-tab-banco"]::after,
#x-tab-admin:checked~.x-appbar-top label[for="x-tab-admin"]::after,
.x-tab.x-tab-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--x-accent);
}

/* -- lado direito: pesquisa, notificações, utilizador -- */
.x-appbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
}

.x-search {
    display: flex;
    align-items: center;
}

.x-search-input {
    width: 230px;
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--x-border);
    background: var(--x-surface-alt);
    border-radius: var(--x-radius);
    font-size: 12.5px;
}

.x-search-input:focus {
    outline: none;
    border-color: var(--x-primary);
    background: var(--x-surface);
}

.x-icon-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--x-radius);
    cursor: pointer;
}

.x-icon-btn:hover {
    background: var(--x-surface-alt);
    border-color: var(--x-border);
}

/* -------------------------------------------------------------------------
     5. FAIXA DO RIBBON E PAINÉIS POR SEPARADOR
     ------------------------------------------------------------------------- */
.x-ribbon {
    height: var(--x-ribbon-height);
    background: var(--x-surface-alt);
}

.x-ribbon-panel {
    display: none;
    height: 100%;
    align-items: stretch;
    gap: 0;
}

/* liga cada radio ao respectivo painel pelo id — e mantém também
     a classe explícita .x-ribbon-panel-active como alternativa
     controlada por JS/framework no futuro. */
#x-tab-microcredito:checked~.x-ribbon #x-panel-microcredito,
#x-tab-banco:checked~.x-ribbon #x-panel-banco,
#x-tab-admin:checked~.x-ribbon #x-panel-admin,
.x-ribbon-panel.x-ribbon-panel-active {
    display: flex;
}

/* -------------------------------------------------------------------------
     6. GRUPOS E BOTÕES DO RIBBON
     ------------------------------------------------------------------------- */
.x-group {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4px 14px;
    border-right: 1px solid var(--x-border);
    min-width: max-content;
}

.x-group:last-child {
    border-right: none;
}

.x-group-buttons {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    flex: 1;
}

.x-group-title {
    text-align: center;
    font-size: 11px;
    color: var(--x-text-muted);
    padding-top: 4px;
    letter-spacing: 0.2px;
}

/* colunas de botões pequenos empilhados (estilo "Colar/Recortar/Copiar" do Word) */
.x-btn-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* -- botão grande (ícone em cima, rótulo em baixo) -- */
.x-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    width: 76px;
    padding: 6px 4px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--x-radius);
    cursor: pointer;
    text-align: center;
    line-height: 1.15;
}

.x-btn .x-icon {
    width: 22px;
    height: 22px;
    color: var(--x-primary);
}

.x-btn .x-label {
    font-size: 11.5px;
    color: var(--x-text);
    font-weight: 500;
}

.x-btn:hover {
    background: var(--x-surface);
    border-color: var(--x-border);
}

.x-btn:active {
    background: var(--x-primary-tint);
}

.x-btn:focus-visible {
    outline: 2px solid var(--x-focus);
    outline-offset: -2px;
}

/* estado "activo" de um botão do ribbon (ex.: representa a vista actual) */
.x-btn.x-btn-active {
    background: var(--x-primary-tint);
    border-color: var(--x-border-strong);
}

.x-btn.x-btn-active .x-label {
    color: var(--x-primary-dark);
    font-weight: 600;
}

/* -- botão pequeno / horizontal (para as colunas empilhadas) -- */
.x-btn-small {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 132px;
    padding: 3px 6px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--x-radius);
    cursor: pointer;
    text-align: left;
}

.x-btn-small .x-icon {
    width: 15px;
    height: 15px;
    color: var(--x-primary);
    flex: none;
}

.x-btn-small .x-label {
    font-size: 11.5px;
}

.x-btn-small:hover {
    background: var(--x-surface);
    border-color: var(--x-border);
}

.x-btn-small.x-btn-active {
    background: var(--x-primary-tint);
    border-color: var(--x-border-strong);
}

/* -------------------------------------------------------------------------
     7. DROPDOWNS DO RIBBON — 100% CSS (checkbox hack), sem JS
     ------------------------------------------------------------------------- */
.x-dropdown {
    position: relative;
}

.x-dropdown-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.x-dropdown .x-caret {
    font-size: 9px;
    color: var(--x-text-muted);
}

.x-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    margin-top: 2px;
    padding: 4px 0;
    background: var(--x-surface);
    border: 1px solid var(--x-border-strong);
    border-radius: var(--x-radius);
    box-shadow: 0 2px 6px rgba(15, 32, 51, 0.14);
    z-index: 30;
}

/* abre via :checked (interacção por clique, sem JS) e também
     suporta a classe explícita .x-dropdown-active para uso futuro
     com JS/framework — ambos os caminhos aplicam o mesmo resultado. */
.x-dropdown-toggle:checked~.x-dropdown-menu,
.x-dropdown.x-dropdown-active .x-dropdown-menu {
    display: block;
}

.x-dropdown-toggle:checked~label.x-btn,
.x-dropdown-toggle:checked~label.x-btn-small,
.x-dropdown.x-dropdown-active>label.x-btn,
.x-dropdown.x-dropdown-active>label.x-btn-small {
    background: var(--x-surface);
    border-color: var(--x-border-strong);
}

.x-dropdown-item {
    display: block;
    padding: 6px 12px;
    font-size: 12.5px;
    color: var(--x-text);
    white-space: nowrap;
    cursor: pointer;
}

.x-dropdown-item:hover {
    background: var(--x-surface-alt);
}

/* item seleccionado / corrente dentro de um dropdown */
.x-dropdown-item.x-dropdown-item-active {
    background: var(--x-primary-tint);
    color: var(--x-primary-dark);
    font-weight: 600;
}

.x-dropdown-item-danger {
    color: var(--x-danger);
}

.x-dropdown-item-danger:hover {
    background: var(--x-danger-tint);
}

.x-dropdown-divider {
    height: 1px;
    margin: 4px 0;
    background: var(--x-border);
}

/* -------------------------------------------------------------------------
     8. ÁREA DO UTILIZADOR — única parte com JS (abrir/fechar menu)
     ------------------------------------------------------------------------- */
.x-user {
    position: relative;
}

.x-user-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 8px 0 4px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--x-radius);
    cursor: pointer;
}

.x-user-trigger:hover {
    background: var(--x-surface-alt);
    border-color: var(--x-border);
}

.x-user-avatar {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--x-primary);
    color: var(--x-text-inverse);
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--x-radius);
    flex: none;
}

.x-user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    text-align: left;
}

.x-user-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--x-text);
}

.x-user-role {
    font-size: 10.5px;
    color: var(--x-text-muted);
}

.x-user-caret {
    font-size: 9px;
    color: var(--x-text-muted);
}

.x-user-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 210px;
    padding: 4px 0;
    background: var(--x-surface);
    border: 1px solid var(--x-border-strong);
    border-radius: var(--x-radius);
    box-shadow: 0 2px 8px rgba(15, 32, 51, 0.16);
    z-index: 40;
}

/* controlado por JS: quando aberto, recebe .x-user-menu-active */
.x-user-menu.x-user-menu-active {
    display: block;
}

/* -------------------------------------------------------------------------
     9. ÁREA DE CONTEÚDO PRINCIPAL (placeholder para o resto da aplicação)
     ------------------------------------------------------------------------- */
.x-content {
    min-height: calc(100vh - var(--x-topbar-height) - var(--x-ribbon-height));
    background: var(--x-bg);
    padding: 20px;
}

.x-content-placeholder {
    height: 100%;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--x-surface);
    border: 1px dashed var(--x-border-strong);
    border-radius: var(--x-radius);
    color: var(--x-text-muted);
    font-size: 13px;
}

/* -------------------------------------------------------------------------
     10. UTILITÁRIOS DE ESTADO GENÉRICOS
     -------------------------------------------------------------------------
     Classe livre para novos componentes que ainda não têm uma classe de
     estado dedicada. Assim que um novo tipo de elemento activo aparecer
     com frequência, vale a pena "promovê-lo" a uma classe própria
     (x-<elemento>-active), seguindo o mesmo padrão desta folha.
     ------------------------------------------------------------------------- */
.x-active {
    background: var(--x-primary-tint);
    border-color: var(--x-border-strong);
    color: var(--x-primary-dark);
    font-weight: 600;
}

/* -------------------------------------------------------------------------
     Responsivo (ajuste básico — a pesquisa recolhe em ecrãs estreitos)
     ------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .x-search {
        display: none;
    }
}