/* One shared header row. Text is collapsed individually only when measured space runs out. */
.admin-nav-backdrop[hidden] { display: none !important; }
@media screen {
    .app-header * { transition-property: background-color, color, border-color, box-shadow !important; }
    :is(.admin-portal, .pos-portal) .app-header {
        position: relative; display: flex !important; flex-wrap: nowrap !important;
        align-items: center; justify-content: flex-start; gap: 8px !important;
        width: 100%; height: 56px !important; min-height: 56px !important;
        padding: 0 clamp(8px, 1vw, 20px) !important; background: #154f38;
    }
    .app-header :is(.header-left, .header-right) {
        display: flex !important; flex: 0 0 auto !important; flex-wrap: nowrap !important;
        align-items: center; grid-area: auto; width: auto !important; min-width: 0;
        padding: 0 !important; gap: 6px !important; order: initial;
    }
    .app-header .header-right { margin: 0 0 0 auto !important; }
    .app-header .brand-logo-white-badge { display: flex; flex: 0 0 auto; max-width: none; min-width: 0; padding: 5px 8px !important; gap: 7px; border-radius: 8px; }
    .app-header .brand-logo-img { width: 28px !important; height: 28px !important; }
    .app-header .brand-text-container { display: flex !important; min-width: 0; }
    .app-header .brand-logo-text { font-size: 13px !important; white-space: nowrap; overflow: visible; text-overflow: clip; }
    .app-header :is(.brand-author-text, .brand-sub-badge, .branch-lock-badge) { display: none !important; }
    .app-header .branch-select-container { position: relative; flex: 0 0 auto !important; width: auto !important; max-width: none !important; min-width: 0; height: 44px; gap: 6px !important; padding: 6px 8px !important; border-radius: 8px; }
    .app-header .branch-select { width: var(--header-branch-width, 150px) !important; max-width: none !important; min-width: 0; padding: 0; font-size: 16px !important; font-weight: 600; }
    .app-header .branch-select-container:focus-within { outline: 2px solid #b8dec7; outline-offset: 2px; }
    .app-header .system-nav { position: static; display: flex; grid-area: auto; flex: 0 0 auto; flex-wrap: nowrap !important; align-items: center; width: auto !important; min-width: 0; max-height: none; margin: 0; padding: 0 !important; gap: 4px !important; border: 0; border-radius: 0; overflow: visible; background: transparent; box-shadow: none; }
    :is(.admin-portal, .pos-portal) .app-header .system-nav { display: flex; }
    .app-header .system-nav .sys-tab-btn { display: inline-flex; flex: 0 0 auto !important; align-items: center; justify-content: center; width: auto; min-width: 44px; height: 44px; min-height: 44px; margin: 0 !important; padding: 8px 10px !important; gap: 7px !important; white-space: nowrap !important; line-height: 1.3 !important; font-size: 12px !important; }
    .app-header .sys-tab-btn > i { flex: 0 0 auto; font-size: 15px; }
    .app-header .admin-menu-toggle { display: none !important; flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; padding: 0; margin: 0 !important; align-items: center; justify-content: center; border: 1px solid #ffffff29; border-radius: 8px; color: #ffffff; background: transparent; cursor: pointer; }
    .app-header .admin-menu-toggle > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .app-header .btn-header-sync { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 7px !important; min-width: 44px; height: 44px; min-height: 44px; padding: 7px 10px !important; font-size: 12px !important; }
    .app-header .btn-header-sync .btn-sync-text { display: inline !important; }
    .app-header .network-status-badge { display: inline-flex; flex: 0 0 auto; min-height: 30px; padding: 6px 9px; margin: 0 !important; gap: 6px; font-size: 11px; }
    .app-header .clock-badge { display: block; flex: 0 0 auto; padding: 7px 8px; font-size: 12px; }
    .app-header .user-profile-badge { display: flex; flex: 0 0 auto; align-items: center; padding: 0; gap: 6px; border: 0; background: transparent; }
    .app-header .cashier-info { display: flex; flex: 0 0 auto; max-width: none !important; min-width: 0; font-size: 12px; }
    .app-header #cashierName { max-width: none; white-space: nowrap; overflow: visible; text-overflow: clip; }
    .app-header .user-role-tag { display: inline-flex; flex: 0 0 auto; font-size: 10px; }
    .app-header .btn-logout { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 7px; width: auto !important; min-width: 44px; height: 44px !important; padding: 7px 10px; font-size: 12px; }
    .app-header .header-el-hidden { display: none !important; }
    .app-header .header-icon-only :is(.header-nav-label, .header-utility-label, .btn-sync-text, #networkStatusText, .brand-text-container) { display: none !important; }
    .app-header .header-icon-only:is(.sys-tab-btn, .btn-header-sync, .btn-logout, .btn-print-settings) { width: 44px !important; padding-left: 0 !important; padding-right: 0 !important; gap: 0 !important; }
    .app-header .network-status-badge.header-icon-only { width: 24px; min-width: 24px; padding: 7px; gap: 0; }
    .app-header .branch-select-container.header-icon-only { width: 44px !important; padding: 0 !important; justify-content: center; }
    .app-header .branch-select-container.header-icon-only .branch-select { position: absolute; inset: 0; width: 100% !important; height: 100%; opacity: 0 !important; cursor: pointer; }
    .app-header .branch-select-container.header-icon-only > i { pointer-events: none; }
    .app-header .header-text-measure { position: fixed; top: -10000px; left: 0; visibility: hidden; pointer-events: none; white-space: pre; }
    .admin-nav-backdrop { display: none !important; }
    .header-menu-mode .app-header .admin-menu-toggle { display: inline-flex !important; }
    .header-menu-mode .app-header .system-nav { display: none !important; position: absolute; top: calc(100% + 8px); right: 8px; width: min(580px, calc(100% - 16px)) !important; max-height: calc(100dvh - 80px - env(safe-area-inset-bottom, 0px)); padding: 10px !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px !important; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #ffffff29; border-radius: 14px; background: #154f38; box-shadow: 0 16px 44px #102d3440; z-index: 2; }
    .header-menu-mode.admin-nav-open .app-header .system-nav { display: grid !important; }
    .header-menu-mode .app-header .system-nav .sys-tab-btn { justify-content: flex-start; width: 100%; min-width: 0; height: auto; min-height: 56px; white-space: normal !important; line-height: 1.5 !important; }
    .header-menu-mode .app-header .header-nav-label { min-width: 0; overflow-wrap: anywhere; }
    .header-menu-mode.admin-nav-open .admin-nav-backdrop:not([hidden]) { display: block !important; position: fixed; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: #102d3440; z-index: 90; }
}