/* Optical header only: shared framework controls retain their existing actions. */
.z-app-shell[data-compact-header=true] .z-topbar {
 min-height:66px; height:66px; padding:10px 16px; gap:12px; flex-wrap:nowrap;
 background:var(--z-surface); color:var(--z-text); border-bottom:1px solid var(--z-border);
}
.z-app-shell[data-compact-header=true] .z-topbar-title {display:block; flex:1 1 auto; min-width:0;}
.z-app-shell[data-compact-header=true] .z-topbar-title strong {display:block; font-size:15px; line-height:1.3; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.z-app-shell[data-compact-header=true] .z-topbar-actions {flex:0 1 auto; flex-wrap:nowrap; gap:8px; margin-inline-start:auto; min-width:0;}
.z-app-shell[data-compact-header=true] .z-topbar :is(.z-icon-button,.z-language-compact label) {width:36px; height:36px; min-height:36px; border-radius:9px; flex-shrink:0;}
.z-app-shell[data-compact-header=true] .z-topbar .z-business-time {min-height:32px; padding:4px 0; gap:5px; margin:0; border:0; background:transparent; font-size:12px; white-space:nowrap; color:var(--z-text-muted);}
.z-app-shell[data-compact-header=true] .z-business-time strong {font-weight:500;}
.z-app-shell[data-compact-header=true] .z-business-time small {font-size:10px; max-width:48px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.z-app-shell[data-compact-header=true] .branch-indicator {min-width:150px; max-width:210px; height:42px; box-sizing:border-box; padding:5px 10px; gap:7px; background:var(--z-primary-soft); border-color:var(--z-border);}
.z-app-shell[data-compact-header=true] .branch-indicator__label {color:var(--z-text-muted); font-size:9px; letter-spacing:.035em;}
.z-app-shell[data-compact-header=true] :is(.branch-indicator__select,.branch-indicator__name) {color:var(--z-text); font-size:12px; line-height:18px;}
.z-app-shell[data-compact-header=true] .z-account-control>.z-user-menu {min-height:40px; height:40px; padding:4px 7px; gap:7px; width:210px; max-width:230px; min-width:190px; border-radius:10px;}
.z-app-shell[data-compact-header=true] .z-account-control>.z-user-menu .z-user-avatar {display:inline-flex; width:30px; height:30px; border-radius:9px; font-size:12px;}
.z-app-shell[data-compact-header=true] .z-account-control>.z-user-menu .z-user-summary {display:grid; min-width:0; gap:1px; text-align:start;}
.z-app-shell[data-compact-header=true] .z-account-control>.z-user-menu .z-user-summary strong {font-size:12px; max-width:160px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; overflow-wrap:normal;}
.z-app-shell[data-compact-header=true] .z-account-control>.z-user-menu .z-user-summary small {font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.z-app-shell[data-compact-header=true] .z-sub-summary {position:relative; flex-shrink:0; font-size:11px;}
.z-sub-summary>summary {display:flex; align-items:center; gap:5px; min-height:30px; padding:3px 9px; box-sizing:border-box; border:1px solid var(--z-border); border-radius:999px; background:var(--z-primary-soft); color:var(--z-text); cursor:pointer; list-style:none; white-space:nowrap;}
.z-sub-summary>summary::-webkit-details-marker {display:none;}
.z-sub-summary>summary>span:not(.z-sub-status-dot) {max-width:85px; overflow:hidden; text-overflow:ellipsis;}
.z-sub-summary>summary strong {font-weight:600;}
.z-sub-status-dot {width:6px; height:6px; border-radius:50%; background:var(--z-primary); flex-shrink:0;}
.z-sub-summary.z-sub-chip-warning .z-sub-status-dot {background:var(--z-warning,#a66a00);}
.z-sub-summary.z-sub-chip-danger .z-sub-status-dot {background:var(--z-danger);}
.z-sub-renewal {position:absolute; inset-inline-end:0; top:calc(100% + 10px); z-index:60; display:grid; gap:8px; width:max-content; max-width:260px; padding:14px; border:1px solid var(--z-border); border-radius:12px; background:var(--z-surface); color:var(--z-text); box-shadow:var(--z-shadow-md); font-size:12px;}
.z-app-shell[data-compact-header=true] .z-topbar :is(button,summary):focus-visible {outline:2px solid var(--z-primary); outline-offset:3px;}
.z-app-shell[data-compact-header=true] .z-topbar :is(.z-icon-button,.z-user-menu):hover,.z-sub-summary>summary:hover {background:var(--z-primary-soft); border-color:var(--z-primary);}
@media (max-width:1250px) {
 .z-app-shell[data-compact-header=true] .z-topbar-actions {gap:6px;}
 .z-app-shell[data-compact-header=true] .z-topbar .z-business-time {display:none;}
 .z-app-shell[data-compact-header=true] .z-topbar-title {display:block;}
 .z-app-shell[data-compact-header=true] .z-account-control>.z-user-menu .z-user-summary {display:grid;}
 .z-app-shell[data-compact-header=true] .branch-indicator {min-width:140px; max-width:190px;}
}
@media (max-width:1100px) {
 .z-app-shell[data-compact-header=true] .z-topbar {height:auto; min-height:66px; flex-wrap:wrap; padding:9px 12px; gap:8px;}
 .z-app-shell[data-compact-header=true] .z-topbar-title {flex:1;}
 .z-app-shell[data-compact-header=true] .z-topbar-actions {flex:1 1 100%; flex-wrap:wrap; justify-content:flex-end;}
 .z-app-shell[data-compact-header=true] .branch-indicator {flex:1; max-width:220px; min-width:120px;}
 .z-app-shell[data-compact-header=true] .z-account-menu {position:fixed; top:120px; inset-inline-end:12px;}
}

/* HRMS-style name/role account summary; full identity stays in the dropdown. */
.z-app-shell[data-compact-header=true] .z-account-control {flex-shrink:0;}
.z-app-shell[data-compact-header=true] .z-account-control>.z-user-menu .z-user-summary {flex:1;}
.z-account-caret {flex-shrink:0;}
.z-account-menu .z-account-email {display:block; overflow-wrap:anywhere; margin-top:4px; color:var(--z-text-muted);}
.z-sub-summary {--optical-expiry-color:var(--z-success);}
.z-sub-expiry-info {--optical-expiry-color:var(--z-info,#2563eb);}
.z-sub-expiry-warning {--optical-expiry-color:var(--z-warning,#b45309);}
.z-sub-expiry-danger {--optical-expiry-color:var(--z-danger);}
.z-sub-expiry-neutral {--optical-expiry-color:var(--z-text-muted);}
.z-sub-summary>summary {border-radius:10px; gap:8px; min-height:40px; padding:5px 9px; border-color:color-mix(in srgb,var(--optical-expiry-color) 35%,var(--z-border)); background:color-mix(in srgb,var(--optical-expiry-color) 7%,var(--z-surface));}
.z-sub-summary>summary>svg {color:var(--optical-expiry-color); flex-shrink:0;}
.z-sub-summary>summary>.z-sub-expiry-copy {display:grid; gap:2px; max-width:none; overflow:visible; text-align:start;}
.z-sub-expiry-copy strong {font-size:11px; line-height:14px;}
.z-sub-expiry-copy small {font-size:10px; line-height:13px; color:var(--z-text-muted);}
/* Keep the existing theme menu and accessible labels; only its header glyph changes. */
.z-app-shell[data-compact-header=true] .z-theme-trigger .z-icon-theme {width:20px; height:20px; border:0; border-radius:0; background:currentColor; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1ZM8 21h8m-4-4v4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
.z-app-shell[data-compact-header=true] .z-theme-trigger .z-icon-theme::before,.z-app-shell[data-compact-header=true] .z-theme-trigger .z-icon-theme::after {display:none;}

/* Shared header utilities: consistent HRMS-style clock and icon-menu spacing. */
.z-app-shell[data-compact-header=true] .z-topbar .z-business-time {min-height:40px; box-sizing:border-box; padding:7px 10px; gap:7px; border:1px solid var(--z-border); border-radius:10px; background:var(--z-surface); color:var(--z-text);}
.z-app-shell[data-compact-header=true] .z-business-time strong {font-size:12px; font-weight:650;}
.z-app-shell[data-compact-header=true] .z-business-time small {font-size:11px; max-width:56px;}
.z-app-shell[data-compact-header=true] .z-topbar :is(.z-icon-button,.z-language-compact label) {width:40px; height:40px; min-height:40px; box-sizing:border-box; padding:0; display:inline-flex; align-items:center; justify-content:center;}
.z-app-shell[data-compact-header=true] .z-topbar .z-notification-bell>svg,.z-app-shell[data-compact-header=true] .z-business-time>svg {width:20px; height:20px; min-width:20px; min-height:20px; flex:0 0 20px;}
.z-app-shell[data-compact-header=true] .z-topbar .z-theme-menu {min-width:210px; padding:8px; border-radius:14px; background:var(--z-surface); color:var(--z-text);}
.z-app-shell[data-compact-header=true] .z-topbar .z-theme-menu button {display:flex; align-items:center; gap:12px; width:100%; min-height:46px; padding:6px 10px; border-radius:10px; font-size:13px; font-weight:500; color:var(--z-text);}
.z-theme-option-icon {display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex:0 0 34px; border-radius:9px; background:var(--z-primary-soft); color:var(--z-primary);}
.z-app-shell[data-compact-header=true] .z-topbar .z-theme-option-icon>svg {width:20px; height:20px; min-width:20px; flex-shrink:0;}
:root[data-z-theme-mode="light"] .z-topbar [data-theme-option="light"],:root[data-z-theme-mode="dark"] .z-topbar [data-theme-option="dark"],:root[data-z-theme-mode="auto"] .z-topbar [data-theme-option="auto"] {background:var(--z-primary-soft); color:var(--z-primary); font-weight:700;}
:root[data-z-theme-mode="light"] .z-topbar [data-theme-option="light"] .z-theme-option-icon,:root[data-z-theme-mode="dark"] .z-topbar [data-theme-option="dark"] .z-theme-option-icon,:root[data-z-theme-mode="auto"] .z-topbar [data-theme-option="auto"] .z-theme-option-icon {background:var(--z-primary); color:var(--z-on-primary);}
.z-app-shell[data-compact-header=true] .z-theme-menu button:hover {background:var(--z-primary-soft);}

/* HRMS notification preview: fixed heading/footer and one contained list. */
.optical-notification-control {position:relative; display:inline-flex; flex-shrink:0;}
.z-app-shell[data-compact-header=true] .z-topbar .optical-notification-dismiss {position:fixed; inset:0; z-index:69; width:100%; height:100%; margin:0; padding:0; border:0; border-radius:0; background:transparent; cursor:default;}
.optical-notification-preview {position:absolute; inset-inline-end:0; top:calc(100% + 10px); z-index:70; display:flex; flex-direction:column; width:380px; max-width:calc(100vw - 24px); max-height:min(470px,calc(100dvh - 100px)); border:1px solid var(--z-border); border-radius:14px; background:var(--z-surface); color:var(--z-text); box-shadow:var(--z-shadow-md); overflow:hidden;}
.optical-notification-preview>header {display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid var(--z-border); flex-shrink:0;}
.optical-notification-preview>header>div {display:grid; gap:3px;}
.optical-notification-preview>header strong {font-size:14px; font-weight:650;}
.optical-notification-preview small {font-size:12px; color:var(--z-text-muted);}
.optical-notification-items {overflow-y:auto; overscroll-behavior:contain; min-height:0;}
.optical-notification-items>p {margin:0; padding:18px 14px; font-size:13px; line-height:1.5;}
.z-app-shell[data-compact-header=true] .z-topbar .optical-notification-item {display:flex; align-items:flex-start; gap:12px; width:100%; min-height:84px; padding:13px 14px; border:0; border-bottom:1px solid var(--z-border); border-radius:0; background:transparent; color:var(--z-text); text-align:start; white-space:normal;}
.z-app-shell[data-compact-header=true] .z-topbar .optical-notification-item:hover {background:var(--z-primary-soft);}
.optical-notification-icon {display:flex; align-items:center; justify-content:center; width:34px; height:34px; flex:0 0 34px; margin-top:5px; border-radius:9px; background:var(--z-primary-soft); color:var(--z-primary);}
.optical-notification-icon>svg {width:18px; height:18px; min-width:18px;}
.optical-notification-copy {display:grid; gap:4px; min-width:0; font-size:12px; line-height:1.4; overflow-wrap:anywhere;}
.optical-notification-copy strong {font-size:13px; font-weight:650;}
.optical-notification-unread {display:inline-block; width:6px; height:6px; margin-inline-start:3px; border-radius:50%; background:var(--z-primary); vertical-align:middle;}
.optical-notification-view-all {display:block; padding:12px; text-align:center; color:var(--z-primary); font-size:13px; font-weight:650; text-decoration:none; background:var(--z-surface-alt); flex-shrink:0;}
.optical-notification-view-all:hover {text-decoration:underline;}
.optical-notification-view-all:focus-visible {outline:2px solid var(--z-primary); outline-offset:-3px;}
@media(max-width:600px){.optical-notification-preview {position:fixed; inset-inline-end:12px; top:124px; max-height:calc(100dvh - 144px);}}