/* purpose: shared MD Portals app header — same chrome as Module Editor portal */
/* author: MD Hub */
/* date: 2026-08-31 */

.ap-top,.ph-top{
	display:flex;flex-wrap:nowrap;gap:10px;align-items:center;justify-content:space-between;
	padding:10px 14px;border-bottom:1px solid var(--bo-border,#e2e8f0);
	background:var(--bo-bg-elevated,#fff);flex-shrink:0;position:relative
}
.ap-top{padding-right:52px}
.ph-top{margin-bottom:10px;padding-right:52px}
#ap_settings_btn.ap-gear,#ph_settings_btn.ph-gear{
	position:absolute;top:50%;right:12px;transform:translateY(-50%);z-index:5;
	width:40px;min-width:40px;min-height:40px;padding-left:0;padding-right:0;justify-content:center
}
body.ap-kind-recipes .ap-top.ap-has-extra{padding-right:100px}
body.ap-kind-recipes #ap_settings_btn.ap-gear{right:60px}
body.ap-kind-recipes #rx_fs_btn.ap-fs{
	position:absolute;top:50%;right:12px;transform:translateY(-50%);z-index:5;
	width:40px;min-width:40px;min-height:40px;padding-left:0;padding-right:0;justify-content:center
}
#ap_portal_settings,#ph_settings{
	position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:center;
	padding:max(16px,env(safe-area-inset-top)) 16px 24px;background:rgba(15,23,42,.48)
}
#ap_portal_settings[hidden],#ph_settings[hidden]{display:none!important}
.ap-settings-sheet,.ph-settings-sheet{
	width:100%;max-width:28rem;max-height:min(86dvh,640px);overflow:auto;margin-top:8vh;
	border-radius:16px;background:var(--bo-bg-elevated,#fff);border:1px solid var(--bo-border,#e2e8f0);
	box-shadow:0 16px 40px rgba(15,23,42,.24);padding:16px
}
.ap-settings-head,.ph-settings-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.ap-settings-head h2,.ph-settings-head h2{margin:0;font-size:1.05rem;display:flex;align-items:center;gap:8px;color:var(--bo-text-strong,#0f172a)}
.ap-settings-head .ap-btn,.ph-settings-head .ph-btn{width:36px;min-width:36px;padding:0;justify-content:center}
.ap-settings-section{margin:0 0 16px}
.ap-settings-section h3,.ph-settings-appear h3{
	margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--bo-text-muted,#64748b)
}
.ap-settings-lead,.ph-settings-lead{margin:0 0 12px;font-size:13px;color:var(--bo-text-muted,#64748b);line-height:1.45}
.ap-theme-modes,.ph-theme-modes{display:flex;gap:8px;margin:0 0 4px}
.ap-theme-mode,.ph-theme-mode{
	flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
	padding:9px 12px;border-radius:10px;border:1px solid var(--bo-border,#e2e8f0);
	background:var(--bo-bg,#f8fafc);color:var(--bo-text,#111827);font-size:13px;font-weight:600;cursor:pointer
}
.ap-theme-mode.is-on,.ph-theme-mode.is-on{
	background:var(--bo-accent,#4C1D95);border-color:var(--bo-accent,#4C1D95);color:var(--bo-on-accent,#fff)
}
body.md-portal-chrome #theme_toggle,
body.md-portal-chrome #rx_settings_btn,
body.md-portal-chrome #sl_theme_btn,
body.md-portal-chrome #cal_theme_btn{display:none!important}
.ap-brand,.ph-brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.ap-brand-ico,.ap-brand-ico img,.ph-brand-ico,.ph-brand-ico img{
	width:40px;height:40px;border-radius:10px;display:block;flex-shrink:0
}
.ph-brand-ico{width:40px;height:40px;border-radius:10px;overflow:hidden;background:transparent;display:inline-flex;align-items:center;justify-content:center}
.ap-brand h1,.ph-brand h1{
	margin:0;font-size:1.15rem;font-weight:650;line-height:1.2;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--bo-text-strong,var(--bo-text,#0f172a))
}
.ap-brand p,.ph-brand p{margin:0;font-size:12px;color:var(--bo-text-muted,#64748b)}
.ap-actions,.ph-actions{display:flex;flex-wrap:nowrap;gap:8px;margin-left:auto;flex-shrink:0;align-items:center}
.ap-btn,.ph-btn{
	display:inline-flex;align-items:center;gap:6px;border:1px solid var(--bo-border,#e2e8f0);
	background:var(--bo-bg,#f8fafc);color:var(--bo-text,#111827);border-radius:10px;
	padding:8px 12px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap
}
.ph-btn{background:var(--bo-bg-elevated,#fff)}
.ap-hub-back,[hidden].ap-hub-back{display:none!important}
html.md-from-hub.md-phone .ap-hub-back:not([hidden]),
html.md-from-hub.md-native-android .ap-hub-back:not([hidden]){display:inline-flex!important;align-items:center;flex-shrink:0}
.ap-module-masthead{display:none}
body.ap-app-portal .ap-module-masthead,
body.ei-inbox-portal .ap-module-masthead,
body.md-portal-chrome .ap-module-masthead,
body.ap-kind-calendar #calendar_module_root > h1,
body.ap-kind-shopping #ap_workspace > .mb-3 > .min-w-0,
body.ap-kind-recipes .ap-module-masthead,
body.ap-kind-transactions .ap-module-masthead{display:none!important}
body.md-portal-chrome #btn_install_app,
body.md-portal-chrome #ei_desk_pwa,
body.md-portal-chrome #cvh_install_app{display:none!important}
html.md-phone #ap_desk_shortcut,
html.md-phone #ph_desk_shortcut,
html.md-native-android #ap_desk_shortcut,
html.md-native-android #ph_desk_shortcut{display:none}

#ap_session_gate,#ei_session_gate,#np_session_gate,#vp_session_gate{position:relative}
html.md-from-hub.md-phone #ap_session_gate .ap-hub-back:not([hidden]),
html.md-from-hub.md-native-android #ap_session_gate .ap-hub-back:not([hidden]),
html.md-from-hub.md-phone #ei_session_gate .ap-hub-back:not([hidden]),
html.md-from-hub.md-native-android #ei_session_gate .ap-hub-back:not([hidden]),
html.md-from-hub.md-phone #np_session_gate .ap-hub-back:not([hidden]),
html.md-from-hub.md-native-android #np_session_gate .ap-hub-back:not([hidden]),
html.md-from-hub.md-phone #vp_session_gate .ap-hub-back:not([hidden]),
html.md-from-hub.md-native-android #vp_session_gate .ap-hub-back:not([hidden]){
	position:absolute;z-index:2;top:max(12px,env(safe-area-inset-top));
	left:max(12px,env(safe-area-inset-left));min-height:44px
}

body.md-portal-chrome{
	display:flex;flex-direction:column;height:100%;height:100dvh;min-height:0;overflow:hidden
}
body.md-portal-chrome > .ap-top{flex-shrink:0}
body.md-portal-chrome #app,
body.md-portal-chrome #inbox_portal_host,
body.md-portal-chrome #module-content,
body.md-portal-chrome #video_portal_host,
body.md-portal-chrome #ap_workspace{
	flex:1 1 auto;min-height:0;height:auto
}

@media (max-width:900px){
	.ap-top,.ph-top{
		flex-direction:row;flex-wrap:nowrap;align-items:center;gap:8px;
		padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top));
		padding-left:max(10px,env(safe-area-inset-left));
		padding-right:max(52px,env(safe-area-inset-right))
	}
	.ap-top,.ph-top{padding-right:52px}
	html.md-from-hub .ap-hub-back:not([hidden]){display:inline-flex!important;align-items:center;flex-shrink:0;min-height:40px;padding:7px 10px}
	.ap-brand,.ph-brand{min-width:0;gap:8px;flex:1}
	.ap-brand-ico,.ap-brand-ico img,.ph-brand-ico,.ph-brand-ico img{width:32px;height:32px;border-radius:8px}
	.ap-brand h1,.ph-brand h1{font-size:1rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
	.ap-brand p,.ph-brand p{display:none}
	.ap-actions,.ph-actions{flex-wrap:nowrap;gap:6px;margin-left:auto}
	.ap-top .ap-btn,.ph-top .ph-btn,.ap-top .ph-btn{min-height:40px;padding:7px 10px;font-size:12px;white-space:nowrap}
}
html.md-phone .ap-top,
html.md-phone .ph-top,
html.md-native-android .ap-top,
html.md-native-android .ph-top{
	flex-direction:row;flex-wrap:nowrap;align-items:center;gap:8px;
	padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top));
	padding-left:max(10px,env(safe-area-inset-left));
	padding-right:max(10px,env(safe-area-inset-right))
}
html.md-phone .ap-top,
html.md-phone .ph-top,
html.md-native-android .ap-top,
html.md-native-android .ph-top{padding-right:60px}
html.md-phone #ap_settings_btn.ap-gear,
html.md-phone #ph_settings_btn.ph-gear,
html.md-native-android #ap_settings_btn.ap-gear,
html.md-native-android #ph_settings_btn.ph-gear{width:40px;min-width:40px;min-height:40px;top:50%;right:10px}
html.md-phone body.ap-kind-recipes .ap-top.ap-has-extra,
html.md-native-android body.ap-kind-recipes .ap-top.ap-has-extra{padding-right:108px}
html.md-phone body.ap-kind-recipes #ap_settings_btn.ap-gear,
html.md-native-android body.ap-kind-recipes #ap_settings_btn.ap-gear{right:58px}
html.md-phone body.ap-kind-recipes #rx_fs_btn.ap-fs,
html.md-native-android body.ap-kind-recipes #rx_fs_btn.ap-fs{right:10px;width:40px;min-width:40px;min-height:40px}
html.md-from-hub.md-phone .ap-hub-back:not([hidden]),
html.md-from-hub.md-native-android .ap-hub-back:not([hidden]){display:inline-flex!important;align-items:center;flex-shrink:0;min-height:40px;padding:7px 10px}
html.md-phone .ap-brand,
html.md-phone .ph-brand,
html.md-native-android .ap-brand,
html.md-native-android .ph-brand{min-width:0;gap:8px;flex:1}
html.md-phone .ap-brand-ico,
html.md-phone .ap-brand-ico img,
html.md-phone .ph-brand-ico,
html.md-phone .ph-brand-ico img,
html.md-native-android .ap-brand-ico,
html.md-native-android .ap-brand-ico img,
html.md-native-android .ph-brand-ico,
html.md-native-android .ph-brand-ico img{width:32px;height:32px;border-radius:8px}
html.md-phone .ap-brand h1,
html.md-phone .ph-brand h1,
html.md-native-android .ap-brand h1,
html.md-native-android .ph-brand h1{font-size:1rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.md-phone .ap-brand p,
html.md-phone .ph-brand p,
html.md-native-android .ap-brand p,
html.md-native-android .ph-brand p{display:none}
html.md-phone .ap-actions,
html.md-phone .ph-actions,
html.md-native-android .ap-actions,
html.md-native-android .ph-actions{flex-wrap:nowrap;gap:6px;margin-left:auto}
html.md-phone .ap-top .ap-btn,
html.md-phone .ph-top .ph-btn,
html.md-native-android .ap-top .ap-btn,
html.md-native-android .ph-top .ph-btn{min-height:40px;padding:7px 10px;font-size:12px;white-space:nowrap}