/* ==========================================================================
   AZRA REF-UI v76 — Pop-Noir reference pass #2
   1) Notifications: green "new" cards, outlined read cards, New/All/Calendar tabs
   2) Calendar (Planned-Calls look): month grid, dots, pink selected day, day list
   3) Dashboard stats: "Marketing" bento tiles (green / dark / pink / blue / yellow)
   4) Community Hub menu restyled like the Community left rail
   LOAD AFTER azra-ref-ui.css. Tokens only (azra-tokens.css), RTL-safe.
   ========================================================================== */

/* ------------------------------------------------------ 1) NOTIFICATIONS */
.az-nhead { display:flex; align-items:center; gap:10px; margin:2px 0 12px; }
.az-nhead h1 { flex:1; margin:0; font:700 22px/1.1 var(--az-font-display, inherit); letter-spacing:-.01em; color:var(--az-text,#fff); }
.az-nback, .az-nmark {
  width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--az-line-strong, rgba(255,255,255,.18)); background:transparent; color:var(--az-text,#fff); cursor:pointer;
  transition:transform var(--az-dur-1,120ms), border-color var(--az-dur-2,200ms);
}
.az-nback:active, .az-nmark:active { transform:scale(.94); }
.az-nback:hover, .az-nmark:hover { border-color:var(--az-primary,#FFD500); }
.az-nback .ico, .az-nmark .ico { width:22px; height:22px; stroke-width:1.8; }
[dir="rtl"] .az-nback .ico { transform:scaleX(-1); }

.az-ntabs { display:flex; align-items:center; gap:24px; padding:0 6px; margin:0 0 14px; }
.az-ntab {
  position:relative; background:none; border:0; padding:8px 0; cursor:pointer;
  font:700 15px/1 var(--az-font-ui, inherit); color:var(--az-dim,#6A6D78);
  transition:color var(--az-dur-2,200ms);
}
.az-ntab.on { color:var(--az-text,#fff); }
.az-ntab::after {
  content:""; position:absolute; inset:auto 0 0 0; height:2px; border-radius:2px; background:var(--az-primary,#FFD500);
  transform:scaleX(0); transform-origin:center; transition:transform var(--az-dur-3,320ms) var(--az-ease,cubic-bezier(.2,.8,.2,1));
}
.az-ntab.on::after { transform:scaleX(1); }
.az-nprefs { margin-inline-start:auto; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; color:var(--az-mut,#9A9DA8); }
.az-nprefs:hover { color:var(--az-text,#fff); }

.az-ngroup { margin:14px 6px 8px; font:700 11px/1 var(--az-font-ui, inherit); letter-spacing:.12em; text-transform:uppercase; color:var(--az-dim,#6A6D78); }
.az-nlist { display:flex; flex-direction:column; }

.az-nc {
  display:flex; align-items:flex-start; gap:12px; margin:0 0 12px; padding:16px 18px;
  border-radius:26px; border:1px solid var(--az-line-strong, rgba(255,255,255,.18));
  background:transparent; color:var(--az-text,#fff); cursor:pointer;
  transition:transform var(--az-dur-1,120ms), background var(--az-dur-2,200ms);
  -webkit-tap-highlight-color:transparent;
}
.az-nc:active { transform:scale(.985); }
.az-nc:hover { background:var(--az-surface,#0C0C0E); }
.az-nc:focus-visible { outline:2px solid var(--az-primary,#FFD500); outline-offset:2px; }
.az-nc.is-new { background:var(--az-green,#22E06B); border-color:transparent; color:#000; }
.az-nc.is-new:hover { background:var(--az-green,#22E06B); filter:brightness(1.05); }
.az-nc-ic { width:38px; height:38px; flex:none; border-radius:13px; overflow:hidden; display:grid; place-items:center; background:rgba(255,255,255,.08); }
.az-nc.is-new .az-nc-ic { background:rgba(0,0,0,.12); }
.az-nc-ic .avatar { width:100% !important; height:100% !important; border-radius:0 !important; font-size:14px; }
.az-nc-ic img { width:100%; height:100%; object-fit:cover; }
.az-nc-ic .ico { width:20px; height:20px; }
.az-nc-b { flex:1; min-width:0; font:500 14px/1.4 var(--az-font-ui, inherit); overflow-wrap:anywhere; }
.az-nc-b b { font-weight:800; }
.az-nc-b .q { display:block; margin-top:3px; font-size:12.5px; opacity:.7; color:inherit; }
.az-nc-t { flex:none; font:600 12px/1.6 var(--az-font-ui, inherit); opacity:.7; white-space:nowrap; }
.az-nempty { padding:26px 8px; text-align:center; color:var(--az-dim,#6A6D78); font-size:14px; }

/* ----------------------------------------------------------- 2) CALENDAR */
.az-ncal { margin:0 0 6px; }
.az-ncal-head { display:flex; align-items:center; justify-content:center; gap:14px; margin:4px 0 12px; }
.az-ncal-head b { min-width:150px; text-align:center; font:700 18px/1 var(--az-font-display, inherit); }
.az-ncal-nav { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--az-line-strong,rgba(255,255,255,.18)); background:transparent; color:var(--az-text,#fff); cursor:pointer; }
.az-ncal-nav:active { transform:scale(.92); }
.az-ncal-nav .ico { width:18px; height:18px; }
[dir="rtl"] .az-ncal-nav .ico { transform:scaleX(-1); }
.az-cwd, .az-cgrid { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); }
.az-cwd { margin-bottom:4px; }
.az-cwd span { text-align:center; font:600 12px/1 var(--az-font-ui, inherit); color:var(--az-mut,#9A9DA8); padding:6px 0; }
.az-cgrid { row-gap:4px; }
.az-cd {
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:3px;
  min-height:50px; padding:5px 0 4px; background:none; border:0; cursor:pointer; color:var(--az-text,#fff);
  -webkit-tap-highlight-color:transparent;
}
.az-cd b { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; font:600 14px/1 var(--az-font-ui, inherit); font-variant-numeric:tabular-nums; transition:background var(--az-dur-2,200ms), transform var(--az-dur-2,200ms) var(--az-spring, ease); }
.az-cd:active b { transform:scale(.9); }
.az-cd.is-today b { box-shadow:inset 0 0 0 1.5px var(--az-primary,#FFD500); }
.az-cd.is-sel b { background:var(--az-pink,#FF7AC6); color:#000; box-shadow:none; font-weight:800; }
.az-cd:focus-visible b { outline:2px solid var(--az-primary,#FFD500); outline-offset:2px; }
.az-cdots { display:flex; gap:3px; height:5px; }
.az-cdots u { width:4px; height:4px; border-radius:50%; background:var(--az-mut,#9A9DA8); }
.az-cdots u.n { background:var(--az-green,#22E06B); }
.az-nday { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:16px 6px 12px; padding-top:14px; border-top:1px solid var(--az-line-strong,rgba(255,255,255,.18)); }
.az-nday b { font:800 22px/1 var(--az-font-display, inherit); }
.az-nday span { font:600 14px/1 var(--az-font-ui, inherit); }
.az-nday small { margin-inline-start:auto; color:var(--az-dim,#6A6D78); font-size:12px; }

/* ----------------------------------------------------- 3) STAT BENTO */
.az-bento { display:grid; gap:12px; grid-template-columns:repeat(2, minmax(0,1fr)); margin-bottom:16px;
  grid-template-areas:"act donut" "views donut" "bars bars" "rep fol"; }
.az-tile { position:relative; min-width:0; padding:16px; border-radius:28px; overflow:hidden; color:#000; display:flex; flex-direction:column; gap:8px; }
.az-tile h4 { margin:0; font:700 14px/1.2 var(--az-font-display, inherit); letter-spacing:-.005em; }
.az-tile .az-big { font:800 34px/1 var(--az-font-display, inherit); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.az-tile .az-big small { margin-inline-start:6px; font:600 12px var(--az-font-ui, inherit); opacity:.65; letter-spacing:0; }
.az-tile p { margin:0; font-size:12.5px; opacity:.75; }
.az-tile.g { background:var(--az-green,#22E06B); }
.az-tile.p { background:var(--az-pink,#FF7AC6); }
.az-tile.b { background:var(--az-blue,#4C8DFF); }
.az-tile.y { background:var(--az-primary,#FFD500); }
.az-tile.d { background:var(--az-surface,#0C0C0E); border:1px solid var(--az-line-strong,rgba(255,255,255,.18)); color:var(--az-text,#fff); }
.t-act { grid-area:act; } .t-donut { grid-area:donut; } .t-views { grid-area:views; }
.t-bars { grid-area:bars; } .t-rep { grid-area:rep; } .t-fol { grid-area:fol; }
.az-spark { width:100%; height:64px; margin-top:auto; color:#000; overflow:visible; }
.az-days { display:flex; justify-content:space-between; font:600 10px/1 var(--az-font-ui, inherit); opacity:.7; }
.az-donut { width:100%; max-width:150px; align-self:center; margin:4px 0; }
.az-dn { font:800 22px var(--az-font-display, inherit); fill:currentColor; }
.az-dl { font:600 9px var(--az-font-ui, inherit); fill:currentColor; opacity:.6; }
.az-legend { list-style:none; margin:auto 0 0; padding:0; display:grid; gap:7px; font-size:12px; }
.az-legend li { display:flex; align-items:center; gap:8px; }
.az-legend i { width:9px; height:9px; border-radius:50%; flex:none; }
.az-legend b { margin-inline-start:auto; font-variant-numeric:tabular-nums; }
.az-bars { display:grid; gap:10px; }
.az-bars > div { display:grid; grid-template-columns:minmax(78px,32%) 1fr auto; align-items:center; gap:10px; font-size:12.5px; font-weight:600; }
.az-bars i { height:10px; border-radius:99px; background:rgba(0,0,0,.18); overflow:hidden; }
.az-bars em { display:block; height:100%; border-radius:99px; background:#000; transform-origin:left; animation:azBarIn var(--az-dur-4,520ms) var(--az-ease,ease) both; }
[dir="rtl"] .az-bars em { transform-origin:right; }
.az-bars b { font-variant-numeric:tabular-nums; }
@keyframes azBarIn { from { transform:scaleX(0); } }
@media (min-width:760px) {
  .az-bento { grid-template-columns:repeat(4, minmax(0,1fr)); grid-template-areas:"act act donut donut" "views views donut donut" "bars bars rep fol"; }
}
@media (prefers-reduced-motion:reduce), html[data-motion="reduce"] { .az-bars em { animation:none; } }

/* ------------------------------------------- 4) HUB MENU = COMMUNITY MENU */
@media (min-width:901px) {
  html body .hub .hub-side { background:transparent; border-right:0; border-inline-end:0; padding:18px 14px 20px; }
  html body .hub .hub-side .hub-back {
    display:flex; align-items:center; gap:10px; padding:10px 13px; margin-bottom:10px;
    border-radius:var(--az-radius-md,16px); color:var(--az-text-2,#D5D6DC); font-weight:700; font-size:14px;
  }
  html body .hub .hub-side .hub-back:hover { background:var(--az-surface-2,#16161A); }
  html body .hub .hub-side .hub-here { display:none; }
  /* the menu becomes a card, exactly like .rail-left .navcard */
  html body .hub .hub-side #tabs {
    padding:8px !important; gap:3px !important;
    background:var(--az-surface,#0C0C0E) !important;
    border:1px solid var(--az-line,rgba(255,255,255,.09)) !important;
    border-radius:var(--az-radius-lg,24px) !important;
  }
  html body .hub .hub-side #tabs .tab {
    height:auto !important; padding:11px 13px !important; gap:12px !important;
    border-radius:var(--az-radius-md,16px) !important;
    color:var(--az-text-2,#D5D6DC) !important; font:600 14px/1.2 var(--az-font-ui, inherit) !important;
    box-shadow:none !important; transition:background var(--az-dur-2,200ms), color var(--az-dur-2,200ms);
  }
  html body .hub .hub-side #tabs .tab:hover { background:var(--az-surface-2,#16161A) !important; color:var(--az-text,#fff) !important; }
  html body .hub .hub-side #tabs .tab.active {
    background:var(--az-primary-soft,rgba(255,213,0,.12)) !important; color:var(--az-primary,#FFD500) !important; box-shadow:none !important;
  }
  html body .hub .hub-side #tabs .tab.active .hxi { color:var(--az-primary,#FFD500) !important; }
  html body .hub .hub-side #tabs .tab .hxi { width:20px; height:20px; flex:none; }
  html body .hub .hub-side #tabs .tab-section > summary {
    padding:12px 13px 6px !important; color:var(--az-dim,#6A6D78) !important;
    font:700 11px/1 var(--az-font-ui, inherit) !important; letter-spacing:.12em; text-transform:uppercase;
  }
  html body .hub .hub-side .hub-side-links { border-top:0; margin-top:14px; padding:8px; gap:3px;
    background:var(--az-surface,#0C0C0E); border:1px solid var(--az-line,rgba(255,255,255,.09)); border-radius:var(--az-radius-lg,24px); }
  html body .hub .hub-side .hub-side-links a {
    height:auto; padding:11px 13px; gap:12px; border-radius:var(--az-radius-md,16px);
    color:var(--az-text-2,#D5D6DC); font:600 14px/1.2 var(--az-font-ui, inherit);
  }
  html body .hub .hub-side .hub-side-links a:hover { background:var(--az-surface-2,#16161A); color:var(--az-text,#fff); }
  html body .hub .hub-side .hub-tag { color:var(--az-dim,#6A6D78); }
}
/* top links of the Hub header → same pill style as the Community top bar */
html body .hub .hub-topnav a { border-radius:999px; font-weight:700; }
html body .hub .hub-topnav a.on, html body .hub .hub-topnav a[aria-current="page"] {
  background:var(--az-primary-soft,rgba(255,213,0,.12)); color:var(--az-primary,#FFD500);
}
html[data-theme="light"] .az-nc.is-new, html[data-theme="light"] .az-tile:not(.d) { color:#000; }

/* ==========================================================================
   v76b — Hub "Menu" sheet buttons = Community "More" sheet buttons
   (.hxm-sheet in mobile-nav.js  ↔  .az-more-sheet .sheet-nav in community)
   ========================================================================== */
@media (max-width: 900px) {
  html body .hxm-back { background: rgba(0,0,0,.66); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  html body .hxm-panel {
    width: 100%; max-width: 560px; margin-inline: auto; left: 0; right: 0;
    background: #050506; border: 0; border-top: 1px solid rgba(255,255,255,.12);
    border-radius: 34px 34px 0 0; box-shadow: 0 -24px 60px rgba(0,0,0,.6);
  }
  html body .hxm-grab { width: 40px; background: rgba(255,255,255,.2); margin: 8px auto 0; }
  html body .hxm-head { padding: 18px 20px 12px; }
  html body .hxm-head b { font: 600 22px/1.1 var(--az-font-display, inherit); letter-spacing: .005em; color: var(--az-text,#fff); }
  html body .hxm-x { width: 40px; height: 40px; background: transparent; border: 1px solid rgba(255,255,255,.16); color: var(--az-text,#fff); }
  html body .hxm-body { padding: 4px 16px 20px; }
  html body .hxm-sec > h4 {
    margin: 4px 6px 10px; font: 700 11px/1 var(--az-font-ui, inherit); letter-spacing: .12em; color: var(--az-dim,#6A6D78);
  }
  html body .hxm-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }

  /* the buttons */
  html body .hxm-sheet .hxm-tile {
    flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px;
    min-height: 64px; padding: 10px 14px 10px 10px; text-align: start;
    background: #08080A; border: 1px solid rgba(255,255,255,.10); border-radius: 22px;
    color: var(--az-text,#fff); font: 600 14px/1.2 var(--az-font-ui, inherit);
    transition: background .2s, border-color .2s, transform .12s;
  }
  html body .hxm-sheet[dir="rtl"] .hxm-tile { padding: 10px 10px 10px 14px; }
  html body .hxm-sheet .hxm-tile:hover { background: #0F0F12; border-color: rgba(255,255,255,.2); }
  html body .hxm-sheet .hxm-tile:active { transform: scale(.97); background: #0F0F12; }
  html body .hxm-sheet .hxm-tile:focus-visible { outline: 2px solid var(--az-primary,#FFD500); outline-offset: 2px; }
  html body .hxm-sheet .hxm-tile span { overflow-wrap: normal; }
  /* icon → coloured squircle (same 4-colour rotation as Community) */
  html body .hxm-sheet .hxm-tile svg {
    flex: none; box-sizing: content-box; width: 22px; height: 22px; padding: 9px; border-radius: 15px;
    stroke: #000; stroke-width: 1.9; fill: none; filter: none; background: var(--az-primary,#FFD500);
  }
  html body .hxm-sheet .hxm-grid > :nth-child(4n+1) svg { background: #EE5BA4; stroke: #fff; }
  html body .hxm-sheet .hxm-grid > :nth-child(4n+2) svg { background: #3B82F6; stroke: #fff; }
  html body .hxm-sheet .hxm-grid > :nth-child(4n+3) svg { background: var(--az-green,#22E06B); stroke: #000; }
  html body .hxm-sheet .hxm-grid > :nth-child(4n+4) svg { background: var(--az-primary,#FFD500); stroke: #000; }
  /* current page */
  html body .hxm-sheet .hxm-tile.on {
    color: var(--az-text,#fff); background: var(--az-primary-soft,rgba(255,213,0,.12)); border-color: var(--az-primary-line,rgba(255,213,0,.3));
  }
  /* search row → outlined pill like the Messages search */
  html body .hxm-sheet .hxm-tile.hxm-wide {
    grid-column: 1 / -1; min-height: 50px; padding: 0 18px; border-radius: 999px; background: transparent;
    border-color: rgba(255,255,255,.16); color: var(--az-mut,#9A9DA8);
  }
  html body .hxm-sheet .hxm-tile.hxm-wide svg { width: 20px; height: 20px; padding: 0; background: transparent !important; stroke: currentColor; border-radius: 0; }

  html[data-theme="light"] body .hxm-panel { background: var(--az-bg); border-top-color: var(--az-line-strong); box-shadow: 0 -20px 50px rgba(60,40,10,.18); }
  html[data-theme="light"] body .hxm-grab { background: rgba(20,16,10,.2); }
  html[data-theme="light"] body .hxm-x { border-color: var(--az-line-strong); }
  html[data-theme="light"] body .hxm-sheet .hxm-tile { background: #fff; border-color: var(--az-line); }
  html[data-theme="light"] body .hxm-sheet .hxm-tile.hxm-wide { background: transparent; border-color: var(--az-line-strong); }
}