/* ==========================================================================
   APP SHELL (Header)
   ========================================================================== */
.app-layout { display: flex; flex-direction: column; height: 100vh; }

.app-header {
    min-height: 60px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 0 24px;
    z-index: 100;
}

.header-left { display: flex; align-items: center; gap: 18px; min-width: 0; }
.header-logo { display: flex; align-items: center; cursor: pointer; padding: 4px 0; border-radius: 4px; }
.header-divider { width: 1px; height: 22px; background-color: var(--line-strong); }
.active-module-indicator { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 14px; font-weight: 500; white-space: nowrap; }
.active-module-indicator i { display: none; }

.header-right { display: flex; align-items: center; gap: 16px; }

.sync-status { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.sync-status i { color: var(--ok-strong); }
.sync-status.is-connecting i { color: var(--ink-3); }
.sync-status.is-warning i { color: var(--warn-strong); }
.sync-status.is-error { color: var(--danger-strong); }
.sync-status.is-error i { color: var(--danger-strong); }

.btn-theme {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    cursor: pointer;
    display: grid;
    place-items: center;
    flex: none;
    transition: var(--transition-fast);
}
.btn-theme:hover { color: var(--ink); border-color: var(--line-strong); }

.user-profile-badge { display: flex; align-items: center; gap: 12px; border-left: 1px solid var(--line); padding-left: 16px; }
.user-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background-color: var(--nml-deep);
    color: var(--nml-electric);
    display: flex; justify-content: center; align-items: center;
    font-weight: 600; font-size: 13px; flex: none;
}
:root[data-theme="dark"] .user-avatar { background: var(--nml-electric); color: var(--nml-deep); }
.user-info { display: flex; flex-direction: column; line-height: 1.3; }
.user-name { font-size: 13px; font-weight: 600; }
.user-email { font-size: 11.5px; color: var(--ink-3); }

.btn-icon-logout {
    background: none; border: none; cursor: pointer;
    color: var(--ink-3); font-size: 16px; padding: 6px; border-radius: 6px;
    transition: var(--transition-fast);
}
.btn-icon-logout:hover { color: var(--danger-strong); background: var(--danger-soft); }

.app-main-content { flex: 1; overflow-y: auto; padding: 28px; }


/* Clear space around the logo is 1/2 N (half the logo height) per the guidelines */
.header-brand { height: 34px; }