/* Nikrad UI Components — shared structural layer */
.ui-header{height:64px;min-height:64px;display:flex;align-items:center;gap:8px;padding:8px 18px;background:var(--raised,var(--p-surface,#fff));border-bottom:1px solid var(--line,var(--p-line,#e3dfd8));position:relative;z-index:100;direction:rtl}
.ui-header .menu-btn,.ui-header .quick-btn,.ui-header .notif-btn,.ui-header .avatar-btn{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:12px;flex:0 0 auto;color:var(--ink-soft,var(--p-text-2,#4b4945));transition:background .18s,color .18s,transform .15s;position:relative}
.ui-header .menu-btn:hover,.ui-header .quick-btn:hover,.ui-header .notif-btn:hover{background:var(--soft,var(--p-surface-2,#f0ede8));color:var(--ink,var(--p-text,#1c1b1a))}
.ui-header .menu-btn svg,.ui-header .quick-btn svg,.ui-header .notif-btn svg{width:22px;height:22px}
.ui-header .header-brand{display:flex;align-items:center;gap:7px;min-width:0;flex:1;font-size:16px;font-weight:800;letter-spacing:-.2px}
.ui-header .header-brand .spark{width:20px;height:20px;color:var(--accent,var(--p-accent,#b68b5c));flex:0 0 auto}
.ui-header .header-brand .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-header .header-brand .badge{font-size:10px;color:var(--accent,var(--p-accent,#b68b5c));background:var(--accent-soft,var(--p-accent-soft,#f0ebe3));padding:4px 9px;border-radius:999px;font-weight:600;white-space:nowrap}
.ui-header .header-actions{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.ui-header .avatar-btn{width:38px;height:38px;border-radius:50%;background:var(--accent-soft,var(--p-accent-soft,#f0ebe3));color:var(--accent,var(--p-accent,#b68b5c));font-size:14px;font-weight:700;border:1px solid var(--line,var(--p-line,#e3dfd8));overflow:hidden}
.ui-header .avatar-btn img{width:100%;height:100%;object-fit:cover}
.ui-header .notif-dot{position:absolute;top:5px;left:5px;min-width:15px;height:15px;padding:0 3px;border-radius:999px;background:#c1483a;color:#fff;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1;border:2px solid var(--raised,var(--p-surface,#fff))}
@media(max-width:767px){.ui-header{height:calc(64px + env(safe-area-inset-top));min-height:calc(64px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 12px 0;direction:rtl}.ui-header .menu-btn,.ui-header .quick-btn,.ui-header .notif-btn{width:42px;height:42px}.ui-header .header-brand{font-size:14px}.ui-header .header-brand .badge{display:none}.ui-header .header-actions{gap:2px}.ui-header .avatar-btn{width:42px;height:42px}}

/* v2.1 definitive shared header: identical visual order on every application page. */
.ui-header{direction:rtl;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-height:64px;isolation:isolate;}
.ui-header-side{display:flex;align-items:center;gap:4px;flex:0 0 auto;}
.ui-header-side-right{grid-column:1;justify-content:flex-start;}
.ui-header-side-left{grid-column:3;justify-content:flex-end;}
.ui-header .header-brand{grid-column:2;justify-content:center;overflow:hidden;text-align:center;}
.ui-header .header-brand .name{max-width:min(42vw,360px);}
.ui-header .menu-btn,.ui-header .quick-btn,.ui-header .notif-btn,.ui-header .avatar-btn{min-width:42px;min-height:42px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.ui-header .avatar-btn{overflow:hidden;border:1px solid var(--line,var(--p-line,#e3dfd8));background:var(--soft,var(--p-surface-2,#f0ede8));font-size:11px;font-weight:800;}
.ui-header .avatar-btn img{width:100%;height:100%;object-fit:cover;display:block;}
.ui-header .ui-header-placeholder{display:block;width:42px;height:42px;}
.ui-header button:focus-visible,.ui-header a:focus-visible{outline:2px solid var(--accent,var(--p-accent,#b68b5c));outline-offset:2px;}
@media(max-width:767px){
  .ui-header{grid-template-columns:auto minmax(0,1fr) auto;gap:6px;padding-inline:10px;}
  .ui-header-side{gap:2px;}
  .ui-header .header-brand{gap:5px;}
  .ui-header .header-brand .name{max-width:44vw;}
  .ui-header .header-brand .spark{width:18px;height:18px;}
  .ui-header .menu-btn,.ui-header .quick-btn,.ui-header .notif-btn,.ui-header .avatar-btn,.ui-header .ui-header-placeholder{width:42px;height:42px;min-width:42px;min-height:42px;}
}
@media(min-width:768px){
  .ui-header .header-brand .name{max-width:520px;}
}

/* Unified overlay behavior: no clipped fixed layers, safe-area aware, touch friendly. */
.ui-header ~ * .site-menu-overlay,.site-menu-overlay{z-index:5900;}
.site-menu-modal{z-index:5901;overscroll-behavior:contain;scrollbar-width:none;padding-bottom:max(14px,env(safe-area-inset-bottom));}
.site-menu-modal::-webkit-scrollbar{display:none;}
.sheet-overlay{z-index:299!important;}
.sheet{z-index:300!important;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom);}
.drawer{z-index:200!important;overscroll-behavior:contain;}
@media(max-width:767px){
  .site-menu-modal{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));width:auto;max-width:none;max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);border-radius:22px;padding:12px;}
  .site-menu-item{min-height:58px;touch-action:manipulation;}
  .sheet{left:0;right:0;width:100vw;max-width:none;max-height:min(90dvh,760px);}
  .sheet-close,.drawer-close,.site-menu-close{min-width:42px;min-height:42px;touch-action:manipulation;}
  .drawer{width:100vw;max-width:none;height:100dvh;}
}
@media(min-width:768px){
  .site-menu-modal{max-height:min(78dvh,680px);}
}


/* v2.3 — clean shared header: no visible page-name/title decoration.
   The center column remains as a flexible spacer so menu controls keep a stable
   position across all pages, widths and RTL layouts. */
.ui-header .header-brand-spacer{display:block!important;visibility:hidden!important;min-width:0!important;flex:1 1 auto!important;height:42px!important;font-size:0!important;}
.ui-header .header-brand-spacer>*{display:none!important;}
.ui-header .menu-btn,.ui-header .quick-btn,.ui-header .notif-btn{border:0;background:transparent;}
.ui-header .menu-btn svg,.ui-header .quick-btn svg,.ui-header .notif-btn svg{width:24px;height:24px;stroke-width:1.75;}
@media(max-width:767px){
  .ui-header{height:60px;min-height:60px;padding-inline:9px;gap:4px;}
  .ui-header-side{gap:1px;}
  .ui-header .menu-btn,.ui-header .quick-btn,.ui-header .notif-btn,.ui-header .avatar-btn,.ui-header .ui-header-placeholder{width:44px;height:44px;min-width:44px;min-height:44px;}
  .ui-header .menu-btn svg,.ui-header .quick-btn svg,.ui-header .notif-btn svg{width:24px;height:24px;}
  .ui-header .avatar-btn{width:40px;height:40px;min-width:40px;min-height:40px;}
  .ui-header .header-brand-spacer{height:44px!important;}
}
@media(min-width:768px){
  .ui-header{min-height:64px;height:64px;padding-inline:16px;gap:8px;}
  .ui-header .header-brand-spacer{height:44px!important;}
}