/* ============================================================
   FİNAPSİS — App shell glue
   Maps the legacy router DOM contract (.side-nav / .menu-btn /
   .submenu / .app-main / .view-section …) onto the new design
   system (tokens.css + components.css). No @layer hacks — plain
   source order. styles.css stays only as a temporary bridge for
   not-yet-migrated feature pages and is removed once migration ends.
   ============================================================ */

/* ---------- Preloader ---------- */
#preloader.fp-boot-loader{
  position:fixed;
  inset:0;
  z-index:9000;
  display:grid;
  place-items:center;
  padding:24px;
  background:var(--bg-0);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .28s ease, visibility .28s ease;
}
#preloader.fp-hidden,
#preloader.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.fp-loader-card{
  width:min(360px, 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  padding:28px 24px;
  border:1px solid var(--border-subtle);
  border-radius:var(--r-xl);
  background:var(--bg-1);
}
.fp-loader-logo{
  width:38px;
  height:38px;
  border-radius:var(--r-md);
  display:block;
}
.fp-loader-state{
  width:100%;
  padding:0;
  gap:10px;
}
.fp-loader-state .spinner{
  width:24px;
  height:24px;
}
.fp-loader-skeletons{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:6px;
}
.fp-loader-skeletons .skeleton{
  height:10px;
}
.fp-loader-skeletons .skeleton:nth-child(1){width:88%; margin:0 auto}
.fp-loader-skeletons .skeleton:nth-child(2){width:100%}
.fp-loader-skeletons .skeleton:nth-child(3){width:72%; margin:0 auto}

/* ---------- App layout (legacy container names) ---------- */
/* Fixed-viewport terminal shell: sidebar + topbar stay put, content scrolls within. */
.app-shell{display:flex; height:100vh; overflow:hidden; background:var(--bg-0)}
/* padding:0 resets the legacy .app-main{padding-top:var(--fp-global-search-h)} (62px),
   left over from the old separate full-width search bar — it pushed the topbar down. */
.app-main{flex:1; min-width:0; height:100vh; display:flex; flex-direction:column; padding:0}
.app-views{flex:1; min-width:0; min-height:0; display:flex; flex-direction:column}

/* Each view is its own scroll container by default. Specificity raised so it
   wins over legacy per-page overflow rules in styles.css (the bridge). */
.view-section{--page-pad-b:var(--s-7); display:none; min-height:0; position:relative}
.app-main .view-section.active{display:block; flex:1; min-height:0; overflow:auto}
/* Pages that manage their own internal scroll (e.g. data tables) opt out. */
.app-main .view-section.active.fp-fixed{overflow:hidden; display:flex; flex-direction:column}

/* QA-5: migrated fixed-table pages already use .page as the design-system
   content container. Remove legacy .view-section padding to avoid double inset. */
.app-main #view-indicators.view-section,
.app-main #view-companies.view-section{
  padding:0;
}

/* Migrated pages wrap their content in .page (= design .content) */
.page{--page-pad-b:var(--s-11); min-width:0; width:100%; max-width:var(--maxw); margin:0 auto;
  padding:var(--s-7) var(--s-8) var(--s-11)}
/* A .page inside a fixed (internally-scrolling) view fills the height. */
.view-section.fp-fixed .page{--page-pad-b:var(--s-7); flex:1; min-height:0; padding-bottom:var(--s-7)}

/* ---------- Sidebar (= design .sidebar) ---------- */
.side-nav{width:var(--sidebar-w); flex:0 0 var(--sidebar-w); background:var(--bg-sidebar);
  border-right:1px solid var(--border-subtle); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; z-index:30; transition:width .2s ease, flex-basis .2s ease}

.sb-head{display:flex; align-items:center; gap:10px; height:var(--topbar-h); flex:0 0 var(--topbar-h);
  padding:0 12px 0 18px; border-bottom:1px solid var(--border-subtle)}
.side-collapse-btn{margin-left:auto; width:28px; height:28px; border-radius:var(--r-sm); color:var(--text-lo);
  display:grid; place-items:center}
.side-collapse-btn:hover{background:var(--bg-2); color:var(--text)}

.side-nav-scroll{flex:1; overflow-y:auto; overflow-x:hidden; padding:10px}
.sb-group-label{padding:14px 10px 6px; font-size:var(--fs-micro); letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-dim); font-weight:500}
.sb-group-label:first-child{padding-top:6px}

/* nav buttons (= design .nav-item) */
.menu-btn{display:flex; align-items:center; gap:11px; width:100%; height:38px; padding:0 11px; margin:1px 0;
  border-radius:var(--r-md); color:var(--text-mid); font-size:var(--fs-sm); font-weight:450;
  position:relative; cursor:pointer; white-space:nowrap; text-align:left;
  /* kill legacy bridge box: rgba fill + 1px transparent border (+ green active ring) */
  background:none; border:none}
.menu-btn .nav-ic{color:var(--text-lo); flex:0 0 auto; display:inline-flex}
.menu-btn .menu-text{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis}
.menu-btn .menu-chevron{margin-left:auto; color:var(--text-dim); transition:transform .2s ease}
.menu-btn:hover{background:var(--bg-2); color:var(--text-hi)}
.menu-btn:hover .nav-ic{color:var(--text)}
.menu-btn.active{background:var(--bg-2); color:var(--text-hi); font-weight:500}
.menu-btn.active .nav-ic{color:var(--accent)}
.menu-btn.active::before{content:""; position:absolute; left:-10px; top:8px; bottom:8px; width:3px;
  border-radius:0 3px 3px 0; background:var(--accent)}
.menu-btn.is-open .menu-chevron{transform:rotate(180deg)}
.menu-btn:focus-visible{outline:none; box-shadow:var(--ring-focus)}

/* accordion submenu (= design .nav-sub, with legacy max-height animation) */
.submenu{max-height:0; overflow:hidden; transition:max-height .24s ease; margin:0 0 2px;
  padding-left:30px; position:relative}
.submenu.is-open{max-height:none}
.submenu::before{content:""; position:absolute; left:18px; top:2px; bottom:6px; width:1px; background:var(--border-subtle)}
.submenu-list{display:flex; flex-direction:column; padding:2px 0 4px}
.submenu-title{padding:6px 11px 4px; font-size:var(--fs-micro); letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim)}
.submenu-btn{display:flex; align-items:center; height:32px; padding:0 11px; border-radius:var(--r-sm);
  font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.01em; color:var(--text-mid); cursor:pointer; white-space:nowrap}
.submenu-btn:hover{background:var(--bg-2); color:var(--text-hi)}
.submenu-btn.active{color:var(--accent)}

/* sidebar footer / user (= design .sb-foot + .user-card) */
.side-user-area{
  height:var(--side-user-area-h);
  min-height:var(--side-user-area-h);
  max-height:var(--side-user-area-h);
  padding:10px;
  border-top:1px solid var(--border-subtle);
  flex:0 0 var(--side-user-area-h);
}
.side-user-info{display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--r-md);
  border:1px solid var(--border-subtle); cursor:pointer}
.side-user-info:hover{background:var(--bg-2); border-color:var(--border)}
.side-user-info.active{background:var(--accent-soft); border-color:var(--accent-line)}
.side-user-avatar{width:30px; height:30px; flex:0 0 30px; border-radius:50%; background:var(--accent); color:var(--on-accent);
  display:grid; place-items:center; font-weight:600; font-size:12px}
.side-user-text{min-width:0; line-height:1.25; flex:1}
.side-user-name{font-size:var(--fs-sm); color:var(--text-hi); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.side-user-label{font-size:var(--fs-micro); color:var(--text-lo)}
.side-user-chevron{color:var(--text-dim); flex:0 0 auto}

/* ---------- Collapsed sidebar (user-toggled, desktop) ---------- */
.side-nav.collapsed{width:var(--sidebar-w-collapsed); flex-basis:var(--sidebar-w-collapsed)}
.side-nav.collapsed .wordmark,
.side-nav.collapsed .menu-text,
.side-nav.collapsed .menu-chevron,
.side-nav.collapsed .sb-group-label,
.side-nav.collapsed .side-user-text,
.side-nav.collapsed .side-user-chevron,
.side-nav.collapsed .side-collapse-btn{display:none}
.side-nav.collapsed .sb-head{padding:0; justify-content:center}
.side-nav.collapsed .menu-btn{justify-content:center; padding:0; gap:0}
.side-nav.collapsed .menu-btn.active::before{left:0}
.side-nav.collapsed .submenu{display:none}
.side-nav.collapsed .side-user-info{justify-content:center; padding:9px 0}
/* pre-paint restore */
html.sidebar-init-collapsed .side-nav{width:var(--sidebar-w-collapsed); flex-basis:var(--sidebar-w-collapsed)}

/* tooltip on collapsed hover */
.side-nav.collapsed .menu-btn{position:relative}
.side-nav.collapsed .menu-btn:hover::after{content:attr(data-tip); position:absolute; left:calc(100% + 10px); top:50%;
  transform:translateY(-50%); background:var(--bg-elev); border:1px solid var(--border-strong); color:var(--text-hi);
  font-size:var(--fs-xs); padding:6px 10px; border-radius:var(--r-sm); white-space:nowrap; z-index:60;
  box-shadow:var(--shadow-overlay); pointer-events:none}

/* ---------- Topbar: locked to the same height as the sidebar logo area ---------- */
.topbar{height:var(--topbar-h); min-height:var(--topbar-h); max-height:var(--topbar-h);
  flex:0 0 var(--topbar-h); padding:0 var(--s-7)}

/* ---------- Topbar global search (legacy ids restyled) ---------- */
/* Override legacy .fp-global-search-bar (it was position:fixed; left:var(--fp-side-w)).
   Reset inset so the relatively-positioned bar sits flush-left in the topbar, not +240px. */
.topbar .fp-global-search-bar{position:relative; left:0; right:auto; top:auto; height:40px; min-height:40px; max-height:40px;
  flex:1; max-width:560px; padding:0 14px; margin:0}
.fp-global-search-bar{position:relative}
.fp-global-search-icon{color:var(--text-lo); flex:0 0 auto; display:inline-flex}
.fp-global-search-input{flex:1; min-width:0; background:none; border:none; outline:none; color:var(--text-hi); font-size:var(--fs-sm)}
.fp-global-search-input::placeholder{color:var(--text-lo)}
.search-clear-btn{display:none; width:22px; height:22px; border-radius:var(--r-sm); color:var(--text-lo); place-items:center}
.fp-global-search-bar.has-text .search-clear-btn{display:grid}
.search-clear-btn:hover{color:var(--text-hi); background:var(--bg-2)}
.fp-global-search-dd{position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60;
  background:var(--bg-elev); border:1px solid var(--border-strong); border-radius:var(--r-md);
  box-shadow:var(--shadow-overlay); overflow:hidden; max-height:60vh; overflow-y:auto; display:none}
.topbar.search-open{z-index:3000}

/* ---------- App footer / active-view scroll-end footer ---------- */
.app-footer{
  position:static;
  width:100%;
  height:var(--side-user-area-h);
  min-height:var(--side-user-area-h);
  margin-top:20px;
  margin-bottom:calc(var(--page-pad-b, 0px) * -1);
  padding:8px 0 0;
  border-top:1px solid var(--border-subtle);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  column-gap:18px;
  color:var(--text-lo);
  font-size:11px;
}
.app-footer-legal{
  grid-column:1;
  justify-self:start;
  min-width:0;
  max-width:640px;
  display:flex;
  align-items:center;
  gap:8px;
  line-height:1.3;
}
.app-footer-info{
  width:16px;
  height:16px;
  flex:0 0 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--text-dim);
}
.app-footer-info svg{
  width:15px;
  height:15px;
}
.app-footer-legal span:last-child{
  min-width:0;
}
.app-footer-legal a{
  color:var(--text-mid);
  text-decoration:underline;
  text-underline-offset:2px;
}
.app-footer-legal a:hover{
  color:var(--text-hi);
}
.app-footer-copy{
  grid-column:2;
  justify-self:center;
  min-width:max-content;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:var(--text-mid);
  white-space:nowrap;
  line-height:1.3;
}
.app-footer-mark{
  width:18px;
  height:18px;
  flex:0 0 18px;
  border-radius:var(--r-xs);
  display:block;
}
.app-footer-links{
  grid-column:3;
  justify-self:end;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  line-height:1.3;
}
.app-footer-link{
  color:var(--text-mid);
  font-size:11px;
  white-space:nowrap;
}
.app-footer-link:hover{
  color:var(--text-hi);
}
.app-footer-social{
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border-subtle);
  border-radius:var(--r-sm);
  background:var(--bg-1);
  color:var(--text-mid);
}
.app-footer-social:hover{
  color:var(--accent);
  border-color:var(--accent-line);
  background:var(--accent-soft);
}
.app-footer-x{
  font-family:var(--font-sans);
  font-size:14px;
  line-height:1;
  font-weight:600;
}
.app-footer .ic{
  display:block;
}

@media (max-width:860px){
  :root{
    --side-user-area-h:148px;
  }
  .side-user-area{
    height:70px;
    min-height:70px;
    max-height:70px;
    flex-basis:70px;
  }
  .app-footer{
    grid-template-columns:1fr;
    align-items:flex-start;
    gap:16px;
    height:auto;
  }
  .app-footer-legal{
    grid-column:1;
    justify-self:stretch;
    max-width:none;
    text-align:center;
    justify-content:center;
  }
  .app-footer-info{
    display:none;
  }
  .app-footer-links{
    grid-column:1;
    justify-self:center;
    justify-content:center;
    order:2;
  }
  .app-footer-link{
    display:none;
  }
  .app-footer-copy{
    grid-column:1;
    justify-self:center;
    justify-content:center;
    order:3;
  }
}
.fp-global-search-dd.open,.fp-global-search-dd.show{display:block}
.fp-search-group-header{padding:8px 12px 4px; font-size:var(--fs-micro); letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-dim); font-weight:600; border-top:1px solid var(--border-subtle)}
.fp-search-group-header:first-child{border-top:none}
.fp-global-search-item{display:flex; align-items:center; justify-content:flex-start; gap:12px;
  min-height:46px; padding:8px 12px; border-bottom:1px solid var(--border-subtle);
  cursor:pointer; color:var(--text); text-align:left}
.fp-global-search-item:hover{background:var(--bg-2)}
.fp-global-search-logo{width:28px; height:28px; flex:0 0 28px; border-radius:var(--r-sm);
  object-fit:contain; background:var(--bg-1); border:1px solid var(--border-subtle); padding:3px}
.fp-global-search-logo--fallback{display:grid; place-items:center; color:var(--text-lo);
  font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:600}
.fp-global-search-left{min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:2px}
.fp-global-search-title{font-size:var(--fs-sm); font-weight:500; color:var(--text-hi);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fp-global-search-sub{font-size:var(--fs-xs); color:var(--text-lo);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fp-global-search-ticker{flex:0 0 auto; margin-left:auto; font-family:var(--font-mono); font-size:var(--fs-xs);
  font-weight:600; color:var(--accent); letter-spacing:.01em}
.fp-global-search-item:last-child{border-bottom:none}

/* ---------- Row action menu (shared) ---------- */
#fpRowMenuOverlay{position:fixed; inset:0; z-index:200; background:rgba(5,7,6,.5); backdrop-filter:blur(2px);
  display:none; align-items:flex-start; justify-content:flex-start}
#fpRowMenuOverlay.open,#fpRowMenuOverlay.show{display:block}
#fpRowMenu{position:fixed; min-width:212px; background:var(--bg-elev); border:1px solid var(--border-strong);
  border-radius:var(--r-md); box-shadow:var(--shadow-overlay); padding:6px; z-index:201}
.fpMenuHead{display:flex; align-items:center; justify-content:space-between; padding:6px 8px 8px; border-bottom:1px solid var(--border-subtle); margin-bottom:4px}
.fpMenuTitle{font-size:var(--fs-xs); color:var(--text-lo)}
.fpMenuTicker{font-family:var(--font-mono); color:var(--accent)}
.fpMenuClose{width:24px; height:24px; border-radius:var(--r-sm); display:grid; place-items:center; color:var(--text-lo); cursor:pointer}
.fpMenuClose:hover{background:var(--bg-2); color:var(--text-hi)}
.fpMenuItem{display:flex; align-items:center; gap:10px; height:34px; padding:0 8px; border-radius:var(--r-sm);
  font-size:var(--fs-sm); color:var(--text); cursor:pointer}
.fpMenuItem:hover{background:var(--bg-2); color:var(--text-hi)}
.fpMenuIcon{color:var(--text-lo); display:inline-flex; width:16px; justify-content:center}
.fpMenuItem:hover .fpMenuIcon{color:var(--text)}

/* ---------- Mobile drawer (≤1023px) ---------- */
.nav-scrim{display:none}
@media (max-width:1023px){
  .mobile-only{display:grid !important}
  .side-nav{position:fixed; top:0; left:0; height:100vh; width:272px; flex-basis:272px;
    transform:translateX(-100%); transition:transform .22s ease; z-index:2010; border-right:1px solid var(--border)}
  /* force-expanded look inside the drawer even if .collapsed was set */
  .side-nav.collapsed{width:272px; flex-basis:272px}
  .side-nav.collapsed .wordmark,.side-nav.collapsed .menu-text,.side-nav.collapsed .menu-chevron,
  .side-nav.collapsed .sb-group-label,.side-nav.collapsed .side-user-text,.side-nav.collapsed .side-user-chevron{display:revert}
  .side-nav.collapsed .menu-btn{justify-content:flex-start; padding:0 11px; gap:11px}
  .side-nav.collapsed .side-user-info{justify-content:flex-start; padding:9px 11px}
  .side-collapse-btn{display:none}
  .app-shell.nav-open .side-nav{transform:translateX(0)}
  .nav-scrim{display:block; position:fixed; inset:0; background:rgba(5,7,6,.6); backdrop-filter:blur(2px);
    z-index:2000; opacity:0; pointer-events:none; transition:opacity .2s}
  .app-shell.nav-open .nav-scrim{opacity:1; pointer-events:auto}
  .page{--page-pad-b:var(--s-10); padding:var(--s-6) var(--s-5) var(--s-10)}
}
@media (min-width:1024px){
  .mobile-only{display:none !important}
}

/* QA-45: Sidebar brand uses updated design-reference assets.
   Expanded: favicon + wordmark + collapse control.
   Collapsed: fixed 64px rail, centered favicon, hover/focus reveals expand control. */
.side-nav .logo{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  overflow:hidden;
}
.side-nav .logo .monogram{
  display:block;
  width:32px;
  height:32px;
  flex:0 0 32px;
  object-fit:contain;
  transition:opacity .12s ease;
}
.side-nav .logo .wordmark{
  display:block;
  width:86px;
  max-width:86px;
  height:auto;
  max-height:22px;
  object-fit:contain;
}

/* Hard-lock collapsed rail geometry. */
html.sidebar-init-collapsed .side-nav,
.side-nav.collapsed{
  width:var(--sidebar-w-collapsed);
  min-width:var(--sidebar-w-collapsed);
  max-width:var(--sidebar-w-collapsed);
  flex:0 0 var(--sidebar-w-collapsed);
  flex-basis:var(--sidebar-w-collapsed);
  position:relative;
}

/* Remove collapsed brand header from flex flow so it cannot push or stretch the rail. */
.side-nav.collapsed .sb-head{
  position:absolute;
  left:0;
  top:0;
  width:var(--sidebar-w-collapsed);
  height:var(--topbar-h);
  min-height:var(--topbar-h);
  max-height:var(--topbar-h);
  flex:0 0 var(--topbar-h);
  padding:0;
  margin:0;
  border-bottom:1px solid var(--border-subtle);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  transform:none;
  z-index:5;
}

/* Since the collapsed header is absolute, the scroll rail must start below it. */
.side-nav.collapsed .side-nav-scroll{
  margin-top:var(--topbar-h);
}

.side-nav.collapsed .logo{
  width:32px;
  height:32px;
  flex:0 0 32px;
  justify-content:center;
  margin:0;
  transform:none;
}
.side-nav.collapsed .logo .wordmark{
  display:none;
}

/* Existing legacy rule hides this button in collapsed mode; restore it only as an overlay. */
.side-nav.collapsed .side-collapse-btn{
  display:grid;
  position:absolute;
  left:50%;
  top:50%;
  width:32px;
  height:32px;
  flex:0 0 32px;
  margin:0;
  transform:translate(-50%,-50%);
  opacity:0;
  pointer-events:auto;
  z-index:6;
  border-radius:var(--r-md);
  background:var(--bg-2);
  border:1px solid var(--border);
}
.side-nav.collapsed .sb-head:hover .side-collapse-btn,
.side-nav.collapsed .side-collapse-btn:focus-visible{
  opacity:1;
}
.side-nav.collapsed .sb-head:hover .logo .monogram{
  opacity:0;
}
.side-nav.collapsed .side-collapse-btn:hover{
  background:var(--bg-elev);
  border-color:var(--border-strong);
}
.side-nav.collapsed .side-collapse-btn svg{
  transform:rotate(180deg);
  transform-origin:center;
}