/* Premium 2026 Header Styles (RTL-friendly) */
:root {
  --bg: rgba(255, 255, 255, 0.8);
  --surface: rgba(255, 255, 255, 0.96);
  --text: #0f172a; /* slate-900 */
  --muted: #64748b; /* slate-500 */
  --border: rgba(15, 23, 42, 0.06);
  --primary: #06b6d4; /* cyan */
  --shadow: 0 8px 30px rgba(2, 8, 23, 0.08);
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.header-container {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: clamp(12px, 3vw, 24px);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 10px;
}

/* Logical grouping */
.header-left, .header-center, .header-right { display: flex; align-items: center; gap: 8px; }
.header-center { min-width: 0; flex: 1; justify-content: center; }
.header-left { gap: 8px; }
.header-right { gap: 12px; }

/* RTL support: mirror layout using logical properties */
html[dir="rtl"] .header-content { direction: rtl; }

/* Buttons */
.hdr-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding-inline: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--surface);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease, border-color .2s ease;
}

.hdr-btn i { color: var(--primary); }

.hdr-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 36px rgba(2,8,23,0.12); }
.hdr-btn:active { transform: translateY(1px); }
.hdr-btn:focus-visible { outline: 3px solid rgba(6,182,212,0.35); outline-offset: 2px; }

.hdr-pill { border-radius: 999px; }

/* Labels collapse on small screens */
@media (max-width: 768px) {
  .hdr-label { display: none; }
  .hdr-btn { height: 40px; padding-inline: 10px; }
}

/* Brand */
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; min-width: 0; }
.brand:focus-visible { outline: 3px solid rgba(6,182,212,0.35); outline-offset: 3px; border-radius: 12px; }

/* Brand Logo */
.brand-logo {
  height: 40px;
  max-height: 40px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.brand:hover .brand-logo { transform: scale(1.05); }

/* Fallback icon (shown only if logo fails to load) */
.brand-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background: linear-gradient(135deg, #06b6d4 0%, #7c3aed 100%); color:#fff; box-shadow: var(--shadow); flex-shrink: 0; }

.brand-text { line-height:1.1; min-width: 0; }
.brand-title { font-weight:800; color:var(--text); letter-spacing:.2px; }
.brand-sub { font-size:.85rem; color:var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* User chip */
.user-chip { position: relative; display:flex; align-items:center; gap:10px; padding:6px 10px; border:1px solid var(--border); border-radius:16px; background: var(--surface); cursor:pointer; box-shadow: var(--shadow); }
.user-chip:hover { transform: translateY(-1px); }
.user-chip:focus-visible { outline:3px solid rgba(6,182,212,0.35); outline-offset:2px; }
.avatar { color:#06b6d4; font-size:1.4rem; }
.user-meta { display:flex; align-items:center; gap:8px; min-width:0; }
.email { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight:600; }
.role-badge { background: rgba(6,182,212,0.12); color:#0e7490; border:1px solid rgba(6,182,212,0.25); padding:2px 8px; border-radius:999px; font-size:.8rem; font-weight:700; }
.caret { color:#64748b; }

/* Dropdown menu */
.user-menu { position:absolute; inset-inline-end:0; top:calc(100% + 8px); min-width:220px; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow: 0 16px 48px rgba(2,8,23,0.18); display:none; overflow:hidden; }
.user-menu a { display:flex; align-items:center; gap:8px; padding:10px 12px; color:var(--text); text-decoration:none; transition: background-color .15s ease; }
.user-menu a:hover { background: rgba(6,182,212,0.08); }
.user-menu a.logout { color:#ef4444; }

/* Center content defaults (optional breadcrumb/title injected by pages) */
.header-center .title { font-weight:800; color:var(--text); font-size:1rem; }
.header-center .crumbs { color:var(--muted); font-size:.9rem; }

/* Prevent wrapping ugliness */
.header-content { flex-wrap: nowrap; }
.header-right, .header-left { flex-wrap: nowrap; }

/* Accessibility helpers */
.hdr-btn[aria-label] { position:relative; }

/* Mobile layout tightening */
@media (max-width: 768px) {
  .header-right { gap:8px; }
  .email { max-width: 120px; }
  .brand-logo { height: 32px; max-height: 32px; max-width: 100px; }
  .brand-title { font-size:1rem; }
  .brand-sub { font-size:.75rem; }
}

/* Extra small screens - hide subtitle */
@media (max-width: 576px) {
  .brand-sub { display: none; }
  .brand-logo { height: 28px; max-height: 28px; max-width: 90px; }
}