/* ═══════════════════════════════════════════════════════════════
   AstraGeneral — Unified Application Shell
   One sidebar + topbar + breadcrumb component, shared by every
   authenticated page. Edit this file once, every page updates.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --shell-sidebar-w: 240px;
  --shell-sidebar-w-collapsed: 68px;
  --shell-topbar-h: 56px;
  --shell-bc-h: 38px;
}
.ag-shell-body{margin:0;background:var(--ag-bg,#04081a)}

/* ── SIDEBAR ── */
.ag-sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--shell-sidebar-w);background:var(--ag-chrome);border-right:1px solid var(--ag-line);display:flex;flex-direction:column;z-index:600;transition:width .18s ease}
.ag-sidebar.collapsed{width:var(--shell-sidebar-w-collapsed)}
/* Brand block is pinned to the topbar height so their bottom borders form one
   continuous line across the header. Padding alone made it 73px against the
   topbar's 56px, leaving a visible 17px step. */
.ag-sb-brand{display:flex;align-items:center;gap:9px;height:var(--shell-topbar-h);
  box-sizing:border-box;padding:0 12px;border-bottom:1px solid var(--ag-line);
  flex-shrink:0;text-decoration:none;overflow:hidden;white-space:nowrap}
.ag-sb-brand .mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#ff6b00,#ff8c33);display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;font-size:15px;flex-shrink:0}
.ag-sb-brand .txt{overflow:hidden}
.ag-sb-brand img{width:34px;height:34px}
.ag-sb-brand .txt .n{font-size:14px;font-weight:800;color:var(--ag-text);line-height:1.2;font-family:'Manrope',sans-serif}
.ag-sb-brand .txt{min-width:0}
/* Tagline is longer than the old one, so tighten tracking and allow it to
   ellipsis rather than overflow the fixed-width sidebar. */
.ag-sb-brand .txt .s{font-size:7.6px;color:var(--ag-text3);text-transform:uppercase;letter-spacing:.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-sidebar.collapsed .ag-sb-brand .txt{display:none}
.ag-sb-toggle{margin-left:auto;width:22px;height:22px;border-radius:6px;background:var(--ag-surface);border:none;color:var(--ag-text3);cursor:pointer;font-size:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.ag-sidebar.collapsed .ag-sb-toggle{display:none}

/* ── ORGANIZATION IDENTITY (Platform Enhancement #1) ── */
.ag-sb-org{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid var(--ag-line);flex-shrink:0;overflow:hidden;white-space:nowrap}
.ag-org-logo{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;flex-shrink:0}
.ag-sb-org .txt{overflow:hidden;text-overflow:ellipsis}
.ag-sb-org .txt .n{font-size:12.5px;font-weight:700;color:var(--ag-text);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-sb-org .txt .p{font-size:9.5px;color:var(--ag-text3);display:flex;align-items:center;gap:5px;margin-top:1px}
.ag-sidebar.collapsed .ag-sb-org .txt{display:none}
.ag-env-badge{font-size:9px;font-weight:700;padding:1px 6px;border-radius:20px;white-space:nowrap}
.ag-env-badge.sandbox{background:rgba(245,158,11,.18);color:#fbbf24}
.ag-env-badge.prod{background:rgba(34,197,94,.15);color:#4ade80}

.ag-sb-nav{flex:1;overflow-y:auto;padding:12px 10px}
.ag-sb-section{font-size:10px;font-weight:700;color:var(--ag-text4);text-transform:uppercase;letter-spacing:.9px;padding:14px 10px 6px}
.ag-sidebar.collapsed .ag-sb-section{display:none}
.ag-sb-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:8px;color:var(--ag-text3);text-decoration:none;font-size:13px;font-weight:600;margin-bottom:2px;transition:.15s;white-space:nowrap;overflow:hidden;position:relative}
.ag-sb-item:hover{background:var(--ag-surface);color:var(--ag-text)}
.ag-sb-item.active{background:linear-gradient(90deg,rgba(255,107,0,.16),rgba(255,107,0,.03));color:var(--ag-accent-text)}
.ag-sb-item.active::before{content:'';position:absolute;left:-10px;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#ff6b00,#ff8c33);border-radius:0 3px 3px 0}
.ag-sb-item .ic{width:18px;text-align:center;flex-shrink:0;font-size:14px}
.ag-sb-item .lbl{overflow:hidden;text-overflow:ellipsis}
.ag-sidebar.collapsed .ag-sb-item .lbl{display:none}
.ag-sb-item .badge{margin-left:auto;font-size:9.5px;font-weight:700;background:rgba(255,107,0,.15);color:#ff9050;border-radius:20px;padding:1px 7px;flex-shrink:0}
.ag-sidebar.collapsed .ag-sb-item .badge{display:none}
.ag-sb-item[data-tip]{position:relative}
.ag-sidebar.collapsed .ag-sb-item[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:60px;top:50%;transform:translateY(-50%);background:var(--ag-chrome2);border:1px solid var(--ag-line2);color:var(--ag-text);padding:5px 10px;border-radius:6px;font-size:11.5px;white-space:nowrap;z-index:700;box-shadow:var(--ag-shadow-lg)}

/* ── ACCORDION / TREE NAV ── */
.ag-sb-item .arrow{margin-left:auto;flex-shrink:0;font-size:12px;color:var(--ag-text4);transition:transform .18s ease;display:inline-flex}
.ag-sb-item .arrow.open{transform:rotate(90deg)}
.ag-sidebar.collapsed .ag-sb-item .arrow{display:none}
.ag-sb-collapse{max-height:0;overflow:hidden;transition:max-height .22s ease}
.ag-sb-collapse.open{max-height:800px}
.ag-sidebar.collapsed .ag-sb-collapse{display:none}
.ag-sb-children{padding:2px 0 4px}
.ag-sb-parent,.ag-sb-child{display:flex;align-items:center;gap:9px;padding:7px 11px 7px 30px;border-radius:7px;color:var(--ag-text3);text-decoration:none;font-size:12.5px;font-weight:600;margin-bottom:1px;transition:.15s;white-space:nowrap;overflow:hidden;cursor:pointer;position:relative}
.ag-sb-parent.depth2,.ag-sb-child.depth2{padding-left:46px;font-size:12px}
.ag-sb-parent:hover,.ag-sb-child:hover{background:var(--ag-surface);color:var(--ag-text)}
.ag-sb-child.active{background:linear-gradient(90deg,rgba(255,107,0,.14),rgba(255,107,0,.02));color:var(--ag-accent-text)}
.ag-sb-parent .arrow{margin-left:auto;font-size:11px;transition:transform .18s ease}
.ag-sb-parent .arrow.open{transform:rotate(90deg)}
.ag-sb-child::before{content:'';position:absolute;left:19px;top:0;bottom:0;width:1px;background:var(--ag-line)}
.ag-sb-child.depth2::before{left:35px}
.ag-sb-parent .ic,.ag-sb-child .ic{width:15px;text-align:center;flex-shrink:0;font-size:12.5px}

.ag-sb-foot{border-top:1px solid var(--ag-line);padding:10px;flex-shrink:0}
.ag-sb-logout{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:8px;color:var(--ag-red);text-decoration:none;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;overflow:hidden}
.ag-sb-logout:hover{background:rgba(220,38,38,.1)}
.ag-sidebar.collapsed .ag-sb-logout .lbl{display:none}

/* ── MAIN AREA ── */
.ag-shell-main-wrap{flex:1;min-width:0;margin-left:var(--shell-sidebar-w);display:flex;flex-direction:column;min-height:100vh;transition:margin-left .18s ease}
.ag-shell-main-wrap.collapsed{margin-left:var(--shell-sidebar-w-collapsed)}

/* ── TOPBAR ── */
.ag-topbar{height:var(--shell-topbar-h);background:var(--ag-chrome);backdrop-filter:blur(20px);border-bottom:1px solid var(--ag-line);display:flex;align-items:center;gap:12px;padding:0 22px;position:sticky;top:0;z-index:500;flex-shrink:0}
.ag-tb-search{position:relative;width:320px;max-width:32vw}
.ag-tb-search input{width:100%;background:var(--ag-surface);border:1px solid var(--ag-line);border-radius:8px;padding:8px 12px 8px 32px;font-size:12.5px;color:var(--ag-text);font-family:inherit}
.ag-tb-search input:focus{outline:none;border-color:rgba(255,140,51,.5);background:var(--ag-surface-hover)}
.ag-tb-search::before{content:'🔎';position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:11px;opacity:.6}
.ag-search-results{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--ag-chrome2);border:1px solid var(--ag-line2);border-radius:10px;box-shadow:var(--ag-shadow-lg);display:none;z-index:900;max-height:360px;overflow-y:auto}
.ag-search-results.open{display:block}
.ag-sr-item{display:flex;align-items:center;gap:9px;padding:9px 12px;text-decoration:none;color:var(--ag-text2);font-size:12.5px;border-bottom:1px solid var(--ag-line)}
.ag-sr-item:last-child{border-bottom:none}
.ag-sr-item:hover{background:var(--ag-surface-hover);color:var(--ag-text)}
.ag-sr-item .ic{width:16px;text-align:center;flex-shrink:0}
.ag-sr-item .lbl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-sr-item .ty{font-size:9.5px;color:var(--ag-text4);text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}
.ag-sr-empty{padding:14px 12px;font-size:12px;color:var(--ag-text3);text-align:center}
.ag-tb-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.ag-tb-icon{position:relative;width:34px;height:34px;border-radius:8px;background:var(--ag-surface);border:1px solid var(--ag-line);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px}
.ag-tb-icon:hover{background:var(--ag-surface-hover)}
.ag-tb-dot{position:absolute;top:5px;right:6px;width:7px;height:7px;border-radius:50%;background:#dc2626;border:1.5px solid #060b1e}
.ag-tb-qa{display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,#ff6b00,#ff8c33);color:#fff;border:none;border-radius:8px;padding:8px 13px;font-family:'Manrope',sans-serif;font-size:12.5px;font-weight:700;cursor:pointer;position:relative}
.ag-dropdown{position:absolute;top:calc(100% + 10px);right:0;background:var(--ag-chrome2);border:1px solid var(--ag-line2);border-radius:12px;box-shadow:var(--ag-shadow-lg);display:none;z-index:900;overflow:hidden}
.ag-dropdown.open{display:block}
.ag-dd-notif{width:330px}
.ag-dd-head{padding:11px 15px;border-bottom:1px solid var(--ag-line);font-size:12.5px;font-weight:700;color:var(--ag-text)}
.ag-dd-list{max-height:330px;overflow-y:auto}
.ag-dd-item{display:flex;gap:9px;padding:10px 15px;border-bottom:1px solid var(--ag-line)}
.ag-dd-item:last-child{border-bottom:none}
.ag-dd-ico{width:27px;height:27px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.ag-dd-item .t{font-size:12px;color:var(--ag-text);font-weight:600;line-height:1.4}
.ag-dd-item .s{font-size:10.5px;color:var(--ag-text3);margin-top:2px}
.ag-dd-qa{width:200px;padding:6px}
.ag-dd-qa a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;font-size:12.5px;color:var(--ag-text3);text-decoration:none}
.ag-dd-qa a:hover{background:var(--ag-surface-hover);color:var(--ag-text)}
.ag-tb-profile{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:8px;background:var(--ag-surface);border:1px solid var(--ag-line);cursor:pointer;position:relative}
.ag-tb-profile:hover{background:var(--ag-surface-hover)}
.ag-avatar{width:27px;height:27px;border-radius:50%;background:linear-gradient(135deg,#ff6b00,#ff8c33);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;flex-shrink:0}
.ag-tb-profile .txt{display:none}
@media(min-width:700px){.ag-tb-profile .txt{display:block}}
.ag-tb-profile .txt .n{font-size:12px;font-weight:600;color:var(--ag-text);line-height:1.2}
.ag-tb-profile .txt .r{font-size:10px;color:var(--ag-text3);line-height:1.2}
.ag-dd-profile{width:225px;padding:6px}
.ag-dd-pm{padding:9px 11px 10px;border-bottom:1px solid var(--ag-line);margin-bottom:5px}
.ag-dd-pm .n{font-size:13px;font-weight:700;color:var(--ag-text)}
.ag-dd-pm .e{font-size:11px;color:var(--ag-text3);margin-top:1px}
.ag-dd-pm .l{font-size:10px;color:var(--ag-text4);margin-top:5px}
.ag-dd-profile a,.ag-dd-profile .it{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;font-size:12.5px;color:var(--ag-text3);text-decoration:none;cursor:pointer}
.ag-dd-profile a:hover,.ag-dd-profile .it:hover{background:var(--ag-surface-hover);color:var(--ag-text)}
.ag-dd-profile .it.danger:hover{background:rgba(220,38,38,.12);color:#fca5a5}

/* ── BREADCRUMB ── */
.ag-breadcrumb{height:var(--shell-bc-h);display:flex;align-items:center;gap:6px;padding:0 22px;font-size:12px;color:var(--ag-text3);border-bottom:1px solid var(--ag-line);flex-shrink:0}
.ag-breadcrumb a{color:var(--ag-text3);text-decoration:none}
.ag-breadcrumb a:hover{color:#ff8c33}
.ag-breadcrumb .sep{opacity:.5}
.ag-breadcrumb .cur{color:var(--ag-text3);font-weight:600}

/* ── ADMIN 'VIEW AS ORGANIZATION' BANNER (Platform Enhancement #2) ── */
.ag-viewas-banner{background:rgba(139,92,246,.14);border-bottom:1px solid rgba(139,92,246,.3);color:#c4b5fd;font-size:12.5px;padding:9px 22px;display:flex;align-items:center;gap:8px}
.ag-viewas-banner a{color:#fff;text-decoration:none;font-weight:700;margin-left:auto}
.ag-viewas-banner a:hover{text-decoration:underline}

/* ── PAGE TITLE BLOCK ── */
.ag-page-head{padding:20px 22px 4px}

/* ── Module top tabs (second navigation level) ── */
.ag-mtabs-wrap{padding:8px 22px 0;border-bottom:1px solid var(--ag-line);margin-bottom:4px}
.ag-mtabs{display:flex;gap:2px;flex-wrap:wrap}
.ag-mtab{background:none;border:0;border-bottom:2px solid transparent;padding:9px 14px;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--ag-text3);cursor:pointer;
  white-space:nowrap;transition:color .15s,border-color .15s}
.ag-mtab:hover{color:var(--ag-text2)}
.ag-mtab.active{color:var(--ag-text);border-bottom-color:var(--ag-accent,#ff6b00);font-weight:700}
.ag-msubtabs{display:flex;gap:6px;flex-wrap:wrap;padding:8px 0 10px}
.ag-msubtab{background:rgba(255,255,255,.04);border:1px solid var(--ag-line);border-radius:20px;
  padding:5px 13px;font-family:inherit;font-size:11.5px;font-weight:600;color:var(--ag-text3);
  cursor:pointer;white-space:nowrap;transition:var(--ag-transition)}
.ag-msubtab:hover{border-color:var(--ag-accent-line);color:var(--ag-text2)}
.ag-msubtab.active{background:var(--ag-accent-soft);border-color:var(--ag-accent-line);color:var(--ag-text)}
@media(max-width:700px){
  .ag-mtabs-wrap{padding:6px 14px 0;overflow-x:auto}
  .ag-mtabs{flex-wrap:nowrap}
  .ag-mtab{padding:8px 11px;font-size:12.5px}
}
/* Item 13 (AG-CIP-001 UI/UX corrections): was 22px/800 — noticeably larger and
   heavier than every other heading on the page (panel <h3> labels render at
   14.5px/800). Brought down to a single consistent page-title size so this
   reads as the top of one hierarchy instead of a competing oversized heading.
   This rule is shared by every page through app-shell.js, so the change is
   site-wide by design (the goal is one consistent scale everywhere). */
.ag-page-head h1{font-family:'Manrope',sans-serif;font-size:19px;font-weight:800;color:var(--ag-text);margin-bottom:4px}
.ag-page-head p{font-size:13px;color:var(--ag-text3);max-width:640px;line-height:1.5}

.ag-shell-content{flex:1;min-width:0}
/* .ag-shell-page is the new <main> landmark wrapping breadcrumb/page-head/
   content (accessibility fix — see app-shell.js). It replaces .ag-shell-content
   as the direct flex child of .ag-shell-main-wrap, so it needs to inherit the
   same "flex:1, fill remaining height" behavior and stay a column flexbox
   itself so .ag-shell-content inside it still expands correctly. */
.ag-shell-page{flex:1;min-width:0;display:flex;flex-direction:column}

@media(max-width:900px){
  .ag-sidebar{transform:translateX(-100%)}
  .ag-sidebar.mobile-open{transform:translateX(0)}
  .ag-shell-main-wrap{margin-left:0}
  .ag-tb-search{display:none}
  .ag-sb-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:590}
  .ag-sb-backdrop.open{display:block}
}

/* ── Organisation identity in the header ── */
.ag-tb-org{display:flex;align-items:center;gap:9px;padding:5px 12px 5px 6px;border-radius:9px;
  background:rgba(255,255,255,.03);border:1px solid var(--ag-line);flex-shrink:0;max-width:230px}
.ag-tb-org-logo{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff;flex-shrink:0}
.ag-tb-org .txt{min-width:0}
.ag-tb-org .n{font-size:12.5px;font-weight:700;color:var(--ag-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-tb-org .p{font-size:10px;color:var(--ag-text4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:900px){ .ag-tb-org .txt{display:none} .ag-tb-org{padding:5px;max-width:none} }

/* ═══════════════════════════════════════════════════════════════════
   Navigation — central styling (see ag-nav.js)
   ───────────────────────────────────────────────────────────────────
   Active state was previously ambiguous: a parent and a child could both
   look selected, or neither would. One rule set now covers both levels.
   ═══════════════════════════════════════════════════════════════════ */

/* Sidebar becomes a column so the nav scrolls and the footer stays put. */
.ag-sidebar{display:flex;flex-direction:column}
.ag-sb-nav{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding-bottom:8px}
.ag-sb-nav::-webkit-scrollbar{width:6px}
.ag-sb-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}

/* Sign Out: fixed bottom action, always reachable. */
.ag-sb-footer{flex:0 0 auto;border-top:1px solid var(--ag-line);padding:10px 12px;
  background:var(--ag-sidebar-bg,#080e22)}
.ag-sb-signout{width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:none;border:1px solid transparent;border-radius:9px;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:600;color:#f87171;transition:var(--ag-transition)}
.ag-sb-signout:hover{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3)}
.ag-sb-signout .ic{font-size:15px}

/* Parent rows are buttons — reset native button styling. */
button.ag-sb-item{width:100%;background:none;border:0;font-family:inherit;text-align:left;cursor:pointer}

/* ── Active state: one visual language for parents and children ── */
.ag-sb-item.active,
.ag-sb-child.active{
  position:relative;
  background:linear-gradient(90deg,rgba(255,107,0,.16),rgba(255,107,0,.04));
  color:var(--ag-text);
  font-weight:700;
}
.ag-sb-item.active::before,
.ag-sb-child.active::before{
  content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,#ff6b00,#ff8c33);
}
.ag-sb-item.active .ic,
.ag-sb-child.active .ic{filter:none;opacity:1}
.ag-sb-item.active .lbl,
.ag-sb-child.active .lbl{color:var(--ag-text)}

/* A parent whose group contains the current view is highlighted more softly,
   so the child remains the clearly selected destination. */
.ag-sb-item.has-children.active{
  background:linear-gradient(90deg,rgba(255,107,0,.10),transparent);
}
.ag-sb-item.has-children.active .lbl{color:#ff8c33}

/* Accordion arrow */
.ag-sb-item .arrow{margin-left:auto;font-size:15px;color:var(--ag-text4);
  transition:transform .2s ease;display:inline-block}
.ag-sb-item .arrow.open{transform:rotate(90deg);color:#ff8c33}
.ag-sb-collapse{max-height:0;overflow:hidden;transition:max-height .25s ease}
.ag-sb-collapse.open{max-height:600px}

@media(prefers-reduced-motion:reduce){
  .ag-sb-collapse,.ag-sb-item .arrow{transition:none}
}