/* =========================================================
   BOSPHORUSJET : dark chrome + light content (FINAL LOCK)
   - Single source of truth for Sidebar + Topbar chrome
   - Removes conflicting legacy sidebar systems
   - IMPORTANT: Topbar dropdowns are controlled by topbar.php (.is-open + .tb-menu)
   ========================================================= */

/* -------------------------
   TOKENS
------------------------- */
:root{
  /* CONTENT (light) */
  --bg:#f5f7fb;
  --card:#ffffff;

  --stroke:#d7deea;
  --strokeSoft:#e7ecf5;

  --text:#101828;
  --muted:#667085;
  --soft:#344054;

  --accent:#2D8CFF;
  --accentSoft: rgba(45,140,255,.18);

  --shadow: 0 12px 28px rgba(16,24,40,.10);

  /* CHROME (dark) */
  --sidebar:#0B1A33;
  --topbar:#0B1A33;

  /* Chrome gradient */
  --chrome-1: #071b33;
  --chrome-2: #06162d;

  /* Sidebar sizing */
  --sb-w: 180px;

  /* Mini cards background (light) */
  --mini-bg: rgba(255,255,255,.75);
}

/* Prevent “dropdown open => right scrollbar” */
html, body{
  overflow-x: hidden;
}

/* =========================================================
   TOPBAR (Chrome locked)
   ========================================================= */
.topbar{
  background: linear-gradient(180deg, var(--chrome-1), var(--chrome-2)) !important;
  color:#EAF1FF;

  /* --- FIX: zıplama / flicker önleme --- */
  min-height: 56px;

  /* IMPORTANT: contain kaldırıldı (dropdown clipping / stacking conflict olmasın) */
  contain: none !important;
}

.topbar,
.topbar *{
  -webkit-tap-highlight-color: transparent;
}

/* Topbar product text (BOSPHORUS JET | Business Aviation Suite) */
.topbar .topbar-product,
.topbar .topbar-product *{
  color: #EAF1FF !important;
}

/* Button-like pills on chrome */
.topbar .pill,
.topbar .acct-btn{
  color: rgba(234,241,255,.92) !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 999px !important;

  /* transition ALL yok; layout değişimini animasyona sokma */
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease, box-shadow .15s ease;
}

/* Clock pill stabilizer (UTC/LT text updates => no width jump) */
#utcClock{
  display:inline-flex;
  justify-content:center;
  min-width: 150px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.topbar .pill:hover,
.topbar .acct-btn:hover{
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(45,140,255,.28) !important;
}

.topbar .acct-btn,
.topbar .acct-name{
  color:#EAF1FF !important;
}

/* =========================================================
   SIDEBAR — SINGLE LOCKED SYSTEM
   Works with: #sb, .sb, .sidebar (legacy-safe)
   ========================================================= */

/* Sidebar container (LOCK width) */
#sb,
.sb,
.sidebar{
  width: var(--sb-w) !important;
  min-width: var(--sb-w) !important;
  max-width: var(--sb-w) !important;

  background: linear-gradient(180deg, var(--chrome-1), var(--chrome-2)) !important;
  color: rgba(255,255,255,.92) !important;

  border-right: 1px solid rgba(255,255,255,.08);
}

/* If sidebar is flex child */
#sb{ flex: 0 0 var(--sb-w) !important; }
.sb{ flex: 0 0 var(--sb-w) !important; }
.sidebar{ flex: 0 0 var(--sb-w) !important; }

/* Ensure nav area doesn't create horizontal overflow */
#sb * , .sb * , .sidebar *{
  box-sizing: border-box;
}

/* Kill underline globally inside sidebar */
#sb a, .sb a, .sidebar a{
  text-decoration:none !important;
}

/* =========================================================
   SIDEBAR BRAND (Logo only, 80x80, NO frame)
   Hide any brand texts to stop layout noise
   ========================================================= */
.sidebar .sidebar-brand,
.sb-brand,
.bj-sb-brand,
.sbx-brand,
.bj-side-header,
.bj-sb-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px 10px 10px;
  border-bottom: 0 !important;
}

/* Hide any brand text blocks (only logo) */
.sidebar .sb-title,
.sidebar .sb-sub,
.sb-brandText,
.sb-brand-text,
.sb-title,
.sb-sub,
.bj-brandText,
.bj-brand-text{
  display:none !important;
}

/* Logo wrappers: remove backgrounds/borders */
.sidebar .sb-logo,
.sb-logo,
.bj-sb-logo,
.sbx-logoLink,
.bj-brand{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Logo image: 80x80, premium shadow */
.sidebar .sb-logo img,
.sb-logo img,
.bj-sb-logo img,
.sbx-logo,
.bj-logo,
.bj-sb-logo img{
  width: 80px !important;
  height: 80px !important;
  object-fit: contain !important;
  display:block;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.45));
}

/* Divider AFTER logo */
.sb-divider,
.sbx-divider,
.bj-sb-divider,
.sidebar .sb-divider{
  height: 1px;
  background: rgba(255,255,255,.08) !important;
  margin: 10px 12px !important;
  border:0 !important;
}

/* =========================================================
   SIDEBAR NAV LAYOUT
   ========================================================= */
.sb-nav,
.sbx-nav,
.bj-sb-nav,
.sidebar .nav,
.bj-side-nav{
  padding: 10px 10px 14px !important;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

/* Remove wasted dividers inside nav */
.bj-divider{
  display:none !important;
}

/* =========================================================
   MENU STYLE — “Düz yazı” + dropdown
   ========================================================= */
.sb-item,
.sb-head,
.sbx-item,
.sbx-toggle,
.bj-sb-item,
.bj-sb-acc-btn,
.sidebar .nav a,
.sidebar .nav-group-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding: 12px 12px !important;
  border-radius: 10px !important;

  background: transparent !important;
  border: 1px solid transparent !important;

  color: rgba(255,255,255,.90) !important;
  font-weight: 650 !important;
  letter-spacing: .10px;

  cursor:pointer;
  user-select:none;

  box-shadow:none !important;
  outline:none;
  -webkit-tap-highlight-color: transparent;
}

/* Hover */
.sb-item:hover,
.sb-head:hover,
.sbx-item:hover,
.sbx-toggle:hover,
.bj-sb-item:hover,
.bj-sb-acc-btn:hover,
.sidebar .nav a:hover,
.sidebar .nav-group-btn:hover{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.98) !important;
}

/* Active */
.sb-item.is-active,
.sb-head.is-active,
.sbx-item.is-active,
.bj-sb-item.is-active,
.sidebar .nav a.active,
.sidebar .nav a.is-active{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.12) !important;
  color:#fff !important;
  position: relative;
}

/* Left accent bar */
.sb-item.is-active::before,
.sb-head.is-active::before,
.sbx-item.is-active::before,
.bj-sb-item.is-active::before,
.sidebar .nav a.active::before,
.sidebar .nav a.is-active::before{
  content:"";
  position:absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 999px;
  background: var(--accent);
}

/* Text overflow fix */
.sb-text,
.sbx-text,
.bj-sb-text,
.sidebar .nav a span{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* =========================================================
   DROPDOWN / ACCORDION PANELS
   ========================================================= */
.sb-caret,
.sbx-caret,
.bj-sb-caret,
.sidebar .caret{
  width:10px;
  height:10px;
  border-right: 2px solid rgba(255,255,255,.70);
  border-bottom: 2px solid rgba(255,255,255,.70);
  transform: rotate(45deg);
  transition: transform .18s ease;
  flex: 0 0 auto;
  margin-left: 6px;
}

.sb-group.is-open .sb-caret,
.sbx-group.is-open .sbx-caret,
.bj-sb-acc.is-open .bj-sb-caret{
  transform: rotate(-135deg);
}

/* Panels hidden by default */
.sb-panel,
.sbx-sub,
.bj-sb-acc-panel,
.sidebar .nav-group-items{
  display:none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Panels visible only when open */
.sb-group.is-open .sb-panel{
  display:block !important;
  margin-top: 8px !important;
  padding: 8px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(0,0,0,.14) !important;
}

.sbx-group.is-open .sbx-sub{
  display:block !important;
  margin-top: 8px !important;
  padding: 8px 6px 2px 6px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(0,0,0,.14) !important;
}

.bj-sb-acc.is-open .bj-sb-acc-panel{
  display:flex !important;
  flex-direction:column;
  gap: 8px;
  margin-top: 8px !important;
  padding: 8px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(0,0,0,.14) !important;
}

/* =========================================================
   SUB ITEMS (dropdown items)
   ========================================================= */
.sb-sub,
.sbx-subitem,
.bj-sb-sub,
.sidebar .nav-item{
  display:flex;
  align-items:center;
  gap:10px;

  padding: 10px 10px !important;
  border-radius: 10px !important;

  background: transparent !important;
  border: 1px solid transparent !important;

  color: rgba(255,255,255,.82) !important;
  font-weight: 600 !important;
  font-size: 12.4px !important;
}

.sb-sub:hover,
.sbx-subitem:hover,
.bj-sb-sub:hover,
.sidebar .nav-item:hover{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.10) !important;
  color:#fff !important;
}

.sb-sub.is-active,
.sbx-subitem.is-active,
.bj-sb-sub.is-active,
.sidebar .nav-item.is-active{
  background: rgba(45,140,255,.14) !important;
  border-color: rgba(45,140,255,.28) !important;
  color:#fff !important;
}

/* Dot elements */
.sb-dot,
.sbx-dot,
.bj-sb-dot,
.sidebar .ni-dot{
  width:6px;
  height:6px;
  border-radius:999px;
  background: rgba(255,255,255,.35);
  flex: 0 0 6px;
}

.sbx-subitem.is-active .sbx-dot,
.bj-sb-item.is-active .bj-sb-dot,
.sidebar .nav-item.is-active .ni-dot{
  background: var(--accent);
}

/* =========================================================
   Sidebar internal scroll (optional)
   ========================================================= */
.bj-side-nav::-webkit-scrollbar{ width: 8px; }
.bj-side-nav::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.10);
  border-radius: 99px;
}

/* =========================================================
   Mobile sanity
   ========================================================= */
@media (max-width: 420px){
  #sb, .sb, .sidebar{
    width: var(--sb-w) !important;
    min-width: var(--sb-w) !important;
  }
}

/* =========================================================
   SIDEBAR DESIGN B (PLAIN TEXT) — FINAL (DETAILS / NO JS)
   ========================================================= */
:root{ --sb-w: 180px; }

/* container */
.bj-sidebar{
  width: var(--sb-w) !important;
  min-width: var(--sb-w) !important;
  max-width: var(--sb-w) !important;
  flex: 0 0 var(--sb-w) !important;
  background: linear-gradient(180deg, var(--chrome-1), var(--chrome-2)) !important;
  color: rgba(234,241,255,.92) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* logo */
.bj-side-header{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px 10px 8px !important;
}
.bj-brand{ background: transparent !important; border:0 !important; box-shadow:none !important; }
.bj-logo{
  width: 80px !important;
  height: 80px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.45));
}

/* nav */
.bj-side-nav{
  display:flex;
  flex-direction:column;
  gap: 8px !important;
  padding: 10px 12px 14px !important;
}
.bj-divider{ display:none !important; }

/* DETAILS reset */
.bj-group{ margin:0 !important; padding:0 !important; border:0 !important; }
.bj-group > summary{ list-style:none; }
.bj-group > summary::-webkit-details-marker{ display:none; }

/* MAIN item (link + summary) */
.bj-nav-link,
.bj-nav-toggle{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;

  padding: 8px 4px !important;
  margin: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow:none !important;

  color: rgba(234,241,255,.88) !important;
  text-decoration:none !important;

  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .12px !important;

  cursor:pointer;
  user-select:none;
}

/* NO HOVER BOX */
.bj-nav-link:hover,
.bj-nav-toggle:hover{
  background: transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color: rgba(255,255,255,.98) !important;
}

/* ACTIVE = BOLD ONLY */
.bj-nav-link.active,
.bj-nav-toggle.active{
  background: transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:#fff !important;
  font-weight: 800 !important;
}

/* caret */
.bj-nav-toggle .chev{
  width:0; height:0;
  border-left: 6px solid rgba(234,241,255,.65);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transform: rotate(0deg);
  transition: transform .16s ease;
  margin-left: 10px;
  flex: 0 0 auto;
}

/* open => rotate caret */
.bj-group[open] > .bj-nav-toggle .chev{
  transform: rotate(90deg);
}

/* SUBNAV */
.bj-subnav{
  display:none !important;
  padding-left: 14px !important;
  margin: 2px 0 10px 0 !important;
}
.bj-group[open] > .bj-subnav{
  display:flex !important;
  flex-direction:column !important;
  gap: 6px !important;
}

/* SUB links plain */
.bj-sub-link{
  display:block !important;
  padding: 6px 4px !important;

  background: transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;

  color: rgba(234,241,255,.78) !important;
  text-decoration:none !important;

  font-size: 12.6px !important;
  font-weight: 450 !important;
  letter-spacing: .10px !important;
}
.bj-sub-link:hover{
  background: transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color: rgba(255,255,255,.96) !important;
}
.bj-sub-link.active{
  background: transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:#fff !important;
  font-weight: 800 !important;
}

/* Prevent horizontal scrollbar */
html, body{ overflow-x: hidden !important; }

/* =========================================================
   FIX: Sidebar internal scroll (dropdowns should NOT extend page)
   ========================================================= */
.bj-sidebar{
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
.bj-side-header{ flex: 0 0 auto !important; }
.bj-side-nav{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 18px !important;
  overscroll-behavior: contain;
}

/* Optional scrollbar */
.bj-side-nav::-webkit-scrollbar{ width: 8px; }
.bj-side-nav::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 99px;
}
.bj-side-nav::-webkit-scrollbar-track{
  background: rgba(255,255,255,.04);
}

/* ===== SIDEBAR: HOVER OFF (single switch) ===== */
#sb .bj-nav-link:hover,
#sb .bj-nav-toggle:hover,
#sb .bj-sub-link:hover{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  color: inherit !important;
}

/* =========================================================
   TOPBAR / LAYOUT JUMP FIX (scrollbar width compensation)
   ========================================================= */
:root{ --sbw: 0px; }

html{ scrollbar-gutter: stable; }

body.bj-scroll-locked{
  padding-right: var(--sbw) !important;
}

/* Topbar height/metrics locked */
.topbar{
  min-height: 56px !important;
  height: 56px !important;
  display:flex !important;
  align-items:center !important;
}

.topbar .topbar-left,
.topbar .topbar-right{
  min-height: 56px !important;
  align-items:center !important;
  flex-wrap: nowrap !important;
}

.topbar .pill,
.topbar .acct-btn{
  height: 32px !important;
  line-height: 32px !important;
  white-space: nowrap !important;
}

#utcClock{
  font-variant-numeric: tabular-nums;
  min-width: 150px;
  justify-content:center;
}

/* =========================================================
   TOPBAR SAFETY (no dropdown logic here)
   - Only keep overflow + stacking safe
   ========================================================= */
.topbar,
.topbar .topbar-right{
  overflow: visible !important;
}

.topbar{
  position: sticky !important;
  top: 0 !important;
  z-index: 99999 !important;
}
/* =========================
   DASHBOARD KPI GRID (A/6)
   - Cards max 500px
   - No sidebar overflow
   - Card-internal scroll
========================= */

/* Main content area must allow shrink inside flex layout */
.bj-main, .app-main, .main, .content, .page{
  min-width: 0 !important;
}

/* Grid */
.bj-kpi-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

/* Card: max 500px */
.bj-kpi-card{
  flex: 1 1 320px;
  max-width: 500px;              /* <- senin “500px” kuralı */
  min-width: 280px;
  background: var(--card);
  border: 1px solid var(--strokeSoft);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;              /* header/body düzgün kalsın */
}

/* Head */
.bj-kpi-head{
  padding: 10px 12px;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--strokeSoft);
  background: rgba(255,255,255,.75);
}

/* Body */
.bj-kpi-body{
  padding: 10px 12px;
}

/* Card-internal scroll (standard) */
.bj-kpi-scroll{
  max-height: 220px;
  overflow: auto;
}

/* Rows */
.bj-kpi-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(215,222,234,.55);
}
.bj-kpi-row:last-child{ border-bottom: 0; }

.bj-kpi-ccy{
  font-weight: 700;
  color: var(--soft);
  letter-spacing: .12px;
}

.bj-kpi-val{
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.bj-kpi-dot{
  opacity: .55;
  padding: 0 6px;
  font-weight: 800;
}

.bj-kpi-empty{
  color: var(--muted);
  font-weight: 600;
}