/* =============================================================================
   AEROSOPHIA SHELL GLUE  ·  aerosophia-shell.css
   Integration layer between the design-system shell (aerosophia-ds.css §6/§13:
   .rail icon-rail sidebar + C3 .topbar mission strip) and the legacy Datta-Able
   page scaffold (.pcoded-main-container) that every unconverted page still uses.
   Loads AFTER the tenant style.css so the offsets below win over the legacy
   260px sidebar rules. Component styling itself lives in aerosophia-ds.css —
   only positioning glue and font-icon equivalents belong here.
   ============================================================================= */

/* ---- Rail: fixed full-height column (the DS styles it as a flex child of
        .app; the live app has no such wrapper, so pin it instead) ---- */
.rail{position:fixed; left:0; top:0; bottom:0; height:100vh;}

/* ---- Page + topbar offsets track the rail width (64px ↔ 212px) ---- */
.pcoded-main-container{margin-left:64px !important; transition:margin-left var(--dur-base) var(--ease);}
body.aero-rail-x .pcoded-main-container{margin-left:212px !important;}
.topbar{margin-left:64px; transition:margin-left var(--dur-base) var(--ease);}
body.aero-rail-x .topbar{margin-left:212px;}

/* ---- Feather FONT icons (<i class="feather icon-*">) inside the DS shell.
        The DS sizes inline SVGs; the live app renders Feather as an icon font,
        so mirror the same metrics for <i> elements. ---- */
.rail__item i.feather{font-size:18px; line-height:1;}
.rail__chev{font-size:13px; line-height:1;}
.rail--x .rail__chev{display:inline-block;}
.rail__flyout-hd i.feather{font-size:14px; line-height:1; color:var(--accent);}
.rail__toggle i.feather{font-size:15px; line-height:1;}
.topbar__btn i.feather{font-size:18px; line-height:1;}
.ctx-pill .seg i.feather{font-size:12px; line-height:1; color:#8ba2bb;}

/* ---- Rail anchors must not pick up legacy/global link colors ---- */
.rail a{text-decoration:none;}

/* [REMOVAL-1127] Tenant logo rule dropped — <img class="rail__tenantlogo"> removed from sidebar foot */

/* ---- Topbar utility dropdowns (notifications / language / user) ----
   Markup keeps the Bootstrap dropdown contract from the legacy navbar so
   notification_core.js / navigation.js keep working unchanged. */
.topbar .dropdown-menu{display:none;}
.topbar .dropdown-menu.show{display:block;}
.topbar .dropdown .notification{position:absolute; top:100%; right:0; z-index:1000; min-width:350px;}
.topbar .dropdown-toggle{display:flex; align-items:center; color:#9fb0c0;}
.topbar .dropdown-toggle::after{display:none;}
.topbar__btn:hover, .topbar .dropdown-toggle:hover{color:#fff;}

.notification-bell-wrapper{position:relative; display:inline-flex; align-items:center;}
.notification-counter{position:absolute; top:-8px; right:-8px; min-width:18px; height:18px; padding:0 5px;
  font-size:11px; font-weight:600; line-height:18px; text-align:center; color:#fff;
  background-color:var(--danger-500); border-radius:10px; box-shadow:var(--elev-1);}
.notification-counter:empty,
.notification-counter[data-count="0"]{display:none;}

.notification-section{margin-bottom:1rem;}
.notification-section-header{display:flex; justify-content:space-between; align-items:center; font-size:0.75rem;
  font-weight:600; text-transform:uppercase; color:var(--text-muted); padding:6px 8px;
  border-bottom:1px solid var(--border-subtle); margin-bottom:8px;}
.notification-dismiss-btn{background:none; border:none; padding:2px 4px; margin:-2px -4px; border-radius:4px;
  color:var(--text-disabled); cursor:pointer; font-size:14px; line-height:1;
  transition:color var(--dur-fast), background-color var(--dur-fast); flex-shrink:0;}
.notification-dismiss-btn:hover{color:var(--danger-500); background-color:var(--danger-50);}
.notification-dismiss-btn i{pointer-events:none;}
.noti-head{padding:10px 20px !important;}
.notification-tabs{width:100%; border-bottom:1px solid var(--border-subtle);}
.notification-tabs .nav-item{width:50%; padding:0 !important;}
.notification-tabs .nav-item .nav-link{width:100%; padding:9px !important;}
.notification-tabs .nav-item .nav-link.active{border-bottom:5px solid var(--accent) !important;}

/* ---- Shared topbar menu chrome (.topbar-menu) ----------------------------
   Design-system card chrome for the three topbar utility dropdowns (user /
   language / notifications). Token-only; re-skins with data-palette and flips
   in data-theme="dark". Lives here (loads last) so it beats Bootstrap's
   single-class .dropdown-menu / .dropdown-item defaults without !important. */
.topbar .topbar-menu{
  padding:0; border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  background:var(--surface-0); box-shadow:var(--elev-3); overflow:visible;
  line-height:1.4;
}
/* Identity / section header — soft accent wash, not the legacy charcoal block */
.topbar-menu__head{
  display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4);
  background:linear-gradient(135deg,var(--accent-soft-strong),var(--accent-soft));
  border-bottom:1px solid var(--border-subtle);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.topbar-menu__avatar{
  flex:0 0 auto; width:42px; height:42px; border-radius:var(--radius-round);
  background:var(--accent); color:#fff; display:flex; align-items:center;
  justify-content:center; font-size:17px; font-weight:700; box-shadow:var(--elev-2);
}
.topbar-menu__id{min-width:0; display:flex; flex-direction:column; gap:2px;}
.topbar-menu__name{font-size:14px; font-weight:700; color:var(--text-primary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.topbar-menu__role{
  display:inline-flex; align-items:center; gap:5px; align-self:flex-start;
  max-width:100%; font-size:11px; font-weight:600; color:var(--accent-active);
  background:var(--surface-0); border:1px solid var(--border-subtle);
  padding:1px 8px; border-radius:var(--radius-pill);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.topbar-menu__role-dot{flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:var(--success-500);}
/* Caption header (language / notifications) */
.topbar-menu__caption{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:11px var(--space-4) 9px; border-bottom:1px solid var(--border-subtle);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0; background:var(--surface-1);}
.topbar-menu__caption-title{font-size:0.72rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-muted); margin:0;}

.topbar-menu__body{padding:var(--space-2); display:flex; flex-direction:column;}
.topbar .topbar-menu__item{
  display:flex; align-items:center; gap:var(--space-3); width:100%;
  padding:9px var(--space-3); border-radius:var(--radius-md);
  color:var(--text-secondary); font-size:13.5px; font-weight:500;
  text-decoration:none; cursor:pointer; background:none; border:none; text-align:left;
  transition:background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);}
.topbar .topbar-menu__item i,
.topbar .topbar-menu__item svg{width:17px; font-size:16px; flex:0 0 auto;
  color:var(--text-muted); transition:color var(--dur-fast) var(--ease);}
.topbar .topbar-menu__item:hover,
.topbar .topbar-menu__item:focus{background:var(--accent-soft); color:var(--accent-active);}
.topbar .topbar-menu__item:hover i, .topbar .topbar-menu__item:focus i,
.topbar .topbar-menu__item:hover svg, .topbar .topbar-menu__item:focus svg{color:var(--accent-active);}
.topbar .topbar-menu__item:focus-visible{outline:none; box-shadow:var(--focus-ring);}
.topbar-menu__sep{height:1px; background:var(--border-subtle); margin:var(--space-2) var(--space-3);}
.topbar .topbar-menu__item--danger{color:var(--danger-600);}
.topbar .topbar-menu__item--danger i, .topbar .topbar-menu__item--danger svg{color:var(--danger-500);}
.topbar .topbar-menu__item--danger:hover, .topbar .topbar-menu__item--danger:focus{background:var(--danger-50); color:var(--danger-600);}
.topbar .topbar-menu__item--danger:hover i, .topbar .topbar-menu__item--danger:focus i{color:var(--danger-600);}
/* Notification panel has no caret — clip its head/footer to the card radius */
.topbar .notification.topbar-menu{overflow:hidden;}
/* Caret pointing back to the toggle */
.topbar-menu__caret{position:absolute; top:-6px; right:18px; width:12px; height:12px;
  background:linear-gradient(135deg,var(--accent-soft-strong),var(--accent-soft));
  border-left:1px solid var(--border-subtle); border-top:1px solid var(--border-subtle);
  transform:rotate(45deg);}

/* ---- Compact notification digest (day → topic grouping) -------------------
   Token-driven cards rendered by navigation.js. Replaces the legacy Bootstrap
   .card + inline-hex notification rows. Tone is data-driven via [data-tone];
   each tone maps to a constant status token trio so meaning never re-skins. */
#notifications-container{padding:6px 8px 4px;}

.noti-day{display:flex; align-items:center; gap:8px; position:sticky; top:0; z-index:1;
  padding:6px 6px 4px; margin-top:4px; background:var(--surface-0);
  font-size:0.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-muted);}
.noti-day::after{content:""; flex:1; height:1px; background:var(--border-subtle);}
.noti-day:first-child{margin-top:0;}

/* Compact card / row (single notification or a group child) */
.noti-card{display:flex; gap:10px; align-items:flex-start; width:100%;
  padding:9px 10px; margin:4px 0; border:1px solid var(--border-subtle);
  border-left:3px solid transparent; border-radius:var(--radius-md);
  background:var(--surface-0); cursor:pointer; text-align:left;
  transition:background-color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);}
.noti-card:hover{background:var(--surface-1); box-shadow:var(--elev-1);}
.noti-card[data-unread="true"]{border-left-color:var(--accent); background:var(--accent-soft);}
.noti-card[data-unread="true"]:hover{background:var(--accent-soft-strong);}

.noti-card__icon{flex-shrink:0; width:30px; height:30px; border-radius:var(--radius-round);
  display:inline-flex; align-items:center; justify-content:center; font-size:15px;
  background:var(--neutral-100); color:var(--text-secondary);}
.noti-card__icon i{pointer-events:none;}

.noti-card__body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.noti-card__top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.noti-card__title{margin:0; font-size:0.8rem; font-weight:600; line-height:1.25; color:var(--text-primary);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.noti-card[data-unread="true"] .noti-card__title{font-weight:700;}
.noti-card__msg{margin:0; font-size:0.74rem; line-height:1.3; color:var(--text-muted);
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.noti-card__time{flex-shrink:0; font-size:0.66rem; color:var(--text-disabled); white-space:nowrap;}

.noti-card__dismiss{flex-shrink:0; background:none; border:none; padding:2px 4px; margin:-2px -2px -2px 0;
  border-radius:var(--radius-sm); color:var(--text-disabled); cursor:pointer; font-size:13px; line-height:1;
  transition:color var(--dur-fast), background-color var(--dur-fast);}
.noti-card__dismiss:hover{color:var(--danger-500); background-color:var(--danger-50);}
.noti-card__dismiss i{pointer-events:none;}

/* Topic group (collapsed cluster of same-origin notifications) */
.noti-group{margin:4px 0; border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  overflow:hidden; background:var(--surface-0);}
.noti-group__hd{display:flex; gap:10px; align-items:center; width:100%; padding:9px 10px;
  background:var(--surface-0); border:none; cursor:pointer; text-align:left;
  transition:background-color var(--dur-fast);}
.noti-group__hd:hover{background:var(--surface-1);}
.noti-group__title{flex:1; min-width:0; font-size:0.8rem; font-weight:600; color:var(--text-primary);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.noti-group__count{flex-shrink:0; min-width:20px; height:18px; padding:0 6px; border-radius:var(--radius-pill);
  font-size:0.68rem; font-weight:700; line-height:18px; text-align:center;
  background:var(--accent); color:var(--text-inverse);}
.noti-group[data-unread="false"] .noti-group__count{background:var(--neutral-300); color:var(--text-secondary);}
.noti-group__chevron{flex-shrink:0; color:var(--text-muted); font-size:14px; transition:transform var(--dur-base) var(--ease);}
.noti-group.is-open .noti-group__chevron{transform:rotate(180deg);}
.noti-group__body{display:none; padding:0 8px 6px; border-top:1px solid var(--border-subtle);}
.noti-group.is-open .noti-group__body{display:block;}
.noti-group__body .noti-card{border-left-width:3px; margin:6px 0;}

/* Tone trios (constant across palettes — drive the topic icon chip) */
.noti-card__icon[data-tone="accent"]{background:var(--accent-soft); color:var(--accent-active);}
.noti-card__icon[data-tone="info"]{background:var(--info-50); color:var(--info-600);}
.noti-card__icon[data-tone="success"]{background:var(--success-50); color:var(--success-600);}
.noti-card__icon[data-tone="warning"]{background:var(--warning-50); color:var(--warning-600);}
.noti-card__icon[data-tone="danger"]{background:var(--danger-50); color:var(--danger-600);}
.noti-card__icon[data-tone="neutral"]{background:var(--neutral-100); color:var(--text-secondary);}

/* Empty state */
.noti-empty{display:flex; flex-direction:column; align-items:center; gap:8px; padding:28px 16px; text-align:center;}
.noti-empty i{font-size:26px; color:var(--text-disabled);}
.noti-empty p{margin:0; font-size:0.82rem; color:var(--text-muted);}

/* ---- Ephemeral progress card (Socket.IO driven) — token-driven tones ------ */
.notification-progress-card{display:block; padding:9px 11px; margin:4px 0;
  border:1px solid var(--border-subtle); border-left:3px solid var(--accent);
  border-radius:var(--radius-md); background:var(--accent-soft); cursor:default;}
.notification-progress-card[data-tone="success"]{border-left-color:var(--success-500); background:var(--success-50);}
.notification-progress-card[data-tone="danger"]{border-left-color:var(--danger-500); background:var(--danger-50);}
.np-card__hd{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:5px;}
.np-card__title{display:flex; align-items:center; gap:6px; margin:0; font-size:0.8rem; font-weight:600;
  color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.np-card__title i{font-size:13px; color:var(--accent-active);}
.notification-progress-card[data-tone="success"] .np-card__title i{color:var(--success-600);}
.notification-progress-card[data-tone="danger"] .np-card__title i{color:var(--danger-600);}
.np-card__pct{flex-shrink:0; min-width:34px; height:18px; padding:0 6px; border-radius:var(--radius-pill);
  font-size:0.68rem; font-weight:700; line-height:18px; text-align:center;
  background:var(--accent); color:var(--text-inverse);}
.notification-progress-card[data-tone="success"] .np-card__pct{background:var(--success-500);}
.notification-progress-card[data-tone="danger"] .np-card__pct{background:var(--danger-500);}
.np-card__track{height:6px; border-radius:var(--radius-pill); background:var(--neutral-200); overflow:hidden; margin-bottom:5px;}
.np-card__bar{height:100%; border-radius:var(--radius-pill); background:var(--accent); transition:width var(--dur-base) var(--ease);}
.notification-progress-card[data-tone="success"] .np-card__bar{background:var(--success-500);}
.notification-progress-card[data-tone="danger"] .np-card__bar{background:var(--danger-500);}
.np-card__ft{display:flex; align-items:center; justify-content:space-between; gap:6px;}
.np-card__step{font-size:0.72rem; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.np-card__eta{flex-shrink:0; font-size:0.7rem; white-space:nowrap; color:var(--accent-active);}
.notification-progress-card[data-tone="success"] .np-card__eta{color:var(--success-600);}
.notification-progress-card[data-tone="danger"] .np-card__eta{color:var(--danger-600);}

/* language selector flags + user menu head (carried over from the legacy bar) */
.flag-img{width:15px; margin-right:8px;}
.pro-head{padding:10px 15px !important; display:flex; align-items:center;}
.user-avatar-circle{width:40px; height:40px; border-radius:50%; background:var(--accent-soft); color:var(--accent-active);
  display:inline-flex; align-items:center; justify-content:center; font-weight:bold; font-size:16px;
  margin-right:10px; text-transform:uppercase;}

/* the live ticker + rail livedot are shown by aerosophia-shell.js only while
   pipelines run; author display rules in the DS would otherwise defeat the
   [hidden] attribute */
.live-chip[hidden]{display:none !important;}
.livedot[hidden]{display:none !important;}

/* =============================================================================
   LEGACY COEXISTENCE COMPAT (temporary — unwinds per-surface as the waves
   convert). aerosophia-ds.css loads BEFORE Bootstrap/Datta so legacy pages
   keep their look wherever both stylesheets set the same property — but a few
   DS rules set properties Bootstrap never re-declares and would leak into
   every unconverted page. Neutralise exactly those here (this file loads
   last). Converted surfaces use DS-specific structure (.modal-scrim > .modal,
   .rail, .win…) which is re-asserted below where needed.
   ============================================================================= */

/* DS .nav targets the classic wide-sidebar shell (unused — we ship the .rail);
   Bootstrap .nav must stay horizontal. */
.nav{flex-direction:row; padding:0; overflow-y:visible; flex:initial;}

/* DS .alert is flex for its icon layout; Bootstrap alerts are block. */
.alert{display:block;}

/* DS .row is a centered flex utility; Bootstrap grid rows must keep the
   default stretch alignment. */
.row{align-items:initial;}

/* DS cards clip their rounded corners; Datta cards host dropdown menus that
   must escape the card box. */
.card{overflow:visible;}

/* DS .modal styles the dialog box; Bootstrap .modal is the fixed overlay.
   Strip the dialog cosmetics from the overlay and re-assert them only for
   the DS structure (.modal-scrim > .modal). */
.modal{max-width:none; max-height:none; background:transparent; border-radius:0; box-shadow:none;}
.modal-scrim > .modal{max-width:480px; max-height:88vh; background:var(--surface-0);
  border-radius:var(--radius-xl); box-shadow:var(--elev-4); display:flex; overflow:hidden;}
.modal-scrim > .modal--lg{max-width:720px;}
.modal-scrim > .modal--sm{max-width:380px;}

/* DS fixes controls at --control-h (36px); multi-row selects must keep their
   natural height. */
select[multiple].form-select, .form-select[size]:not([size="1"]){height:auto;}

/* DS sets img{display:block}; legacy templates rely on inline images (flag
   icons in labels, icons in text). inline-block renders identically to the
   browser default for replaced elements while keeping max-width:100%. */
img{display:inline-block;}