/*
 * Top Navigation Override — add AFTER your main CSS in index.html.
 * Works with topnav-plugin.js to move sidebar links into a horizontal topbar.
 * Remove both files to revert. No other files touched.
 */

/* ── Desktop: hide sidebar, remove margin ── */
@media (min-width: 901px) {
  .sidebar { display: none !important; }
  .app-main { margin-left: 0 !important; }
  .mobile-menu-btn { display: none !important; }

  /* Topbar becomes the main nav */
  .topbar {
    min-height: 48px;
    padding: 0 20px;
    gap: 8px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }

  /* Hide role text, shrink title */
  .topbar__left .muted { display: none; }
  .topbar__left .page-title { font-size: 1rem; font-weight: 800; color: var(--primary); white-space: nowrap; }

  /* Center content */
  .page-content { max-width: 96%; margin: 0 auto; padding-top:5px;
    margin-top: 50px !important;}

  /* ── Injected topnav links (added by topnav-plugin.js) ── */
  .topnav-bar {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 12px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .topnav-bar::-webkit-scrollbar { display: none; }

  .tn-link {
    padding: 4px 12px;
    color: var(--text-faint);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 6px;
    transition: 0.12s;
  }
  .tn-link:hover { color: var(--text); background: var(--surface-soft); }
  .tn-link--active { color: var(--text) !important; font-weight: 700 !important; border-bottom: 2px solid var(--primary); border-radius: 0; padding-bottom: 12px; }

  /* Dropdown */
  .tn-drop { position: relative; }
  .tn-drop-btn {
    padding: 4px 12px;
    color: var(--text-faint);
    font-size: 0.82rem;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 6px;
    transition: 0.12s;
    font-family: inherit;
  }
  .tn-drop-btn:hover { color: var(--text); background: var(--surface-soft); }
  .tn-drop-btn--active { color: var(--text) !important; font-weight: 700 !important; border-bottom: 2px solid var(--primary); border-radius: 0; padding-bottom: 12px; }

  .tn-drop-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    min-width: 170px;
    z-index: 50;
    overflow: hidden;
  }
  .tn-drop:hover .tn-drop-menu { display: block!important; }
  .tn-drop-menu.tn-open { display: block!important; }

  .tn-drop-item {
    display: block;
    padding: 8px 16px;
    color: var(--text-soft);
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 500;
    transition: background 0.1s;
  }
  .tn-drop-item:hover { background: var(--surface-soft); color: var(--text); }
  .tn-drop-item--active { color: var(--primary); font-weight: 600; background: rgba(26,86,219,0.04); }
  .tn-drop-item + .tn-drop-item { border-top: 1px solid var(--border); }
}

/* ── Mobile: topnav bar hidden, sidebar still works ── */
@media (max-width: 900px) {
  .topnav-bar { display: none !important; }
}


/* ── Dropdown visibility — outside media query for max specificity ── */
.tn-drop-menu.tn-open {
  display: block !important;
}

.tn-drop:hover > .tn-drop-menu {
  display: block !important;
}

/* ── Force dropdown to be visible above everything ── */
.tn-drop-menu {
  z-index: 9999 !important;
  background: #ffffff !important;
  color: #374151 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: fixed !important;
}

.tn-drop-item {
  color: #374151 !important;
  background: #ffffff !important;
  opacity: 1 !important;
}

.tn-drop-item:hover {
  background: #f3f4f6 !important;
  color: #111827 !important;
}

.tn-drop-item--active {
  color: #1a56db !important;
  background: #eff6ff !important;
}

/* Kill backdrop-filter on topbar — it creates a stacking context that clips dropdowns */
.topbar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
  position: fixed;
  width: 100vw;
}


/* ══════════════════════════════════════════════════════════════
   TAB OVERRIDES — clean underline style to match topnav look
   ══════════════════════════════════════════════════════════════ */

/* Base tab bar — underline strip instead of pill container */
.dispatch-tabs {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  width: 100% !important;
}

/* Individual tab — underline on active, no background fill */
.dispatch-tab {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  margin-bottom: -2px;
  padding: 10px 18px !important;
  color: var(--text-faint) !important;
  font-weight: 600 !important;
  font-size: 0.86rem !important;
  transition: color 0.12s, border-color 0.12s !important;
}

.dispatch-tab:hover {
  color: var(--text) !important;
  background: transparent !important;
}

/* Active tab — filled pill, white text */
.dispatch-tab--active {
  color: #fff !important;
  background: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
  border-radius: 6px !important;
}

.dispatch-tab--active:hover {
  color: #fff !important;
  background: var(--primary-hover, #1648b8) !important;
}

/* CRM won tab — green fill when active */
.crm-tab--won {
  color: var(--success) !important;
}

.crm-tab--won.dispatch-tab--active {
  color: #fff !important;
  background: var(--success) !important;
  border-bottom-color: var(--success) !important;
}

/* CRM lost tab — red fill when active */
.crm-tab--lost {
  color: var(--danger) !important;
}

.crm-tab--lost.dispatch-tab--active {
  color: #fff !important;
  background: var(--danger) !important;
  border-bottom-color: var(--danger) !important;
}

/* Pulsing new tab — subtle pulse on underline instead of background */
.crm-tab--new-pulse {
  animation: tn-tab-pulse 1.5s ease-in-out infinite !important;
  color: var(--primary);
  background: transparent;
  box-shadow: none !important;
  border: 2px solid var(--primary) !important;

  /* background: var(--primary) !important;
  color: var(--surface-soft) !important; */
}

.crm-tab--new-pulse.dispatch-tab--active {
  animation: none !important;
  border-bottom-color: var(--primary) !important;
}

@keyframes tn-tab-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ── Shipment detail tabs (sd-tabs) — same treatment ── */
#sd-tabs {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

#sd-tabs .dispatch-tab {
  margin-bottom: -2px;
}

/* ── Invoice detail tabs ── */
#inv-tabs {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* ── Pricing tabs ── */
#pricing-tabs {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* ── Exception tabs ── */
#exc-tabs {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* ── Quote tabs ── */
#quote-tabs {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* ── My shipments tabs ── */
#my-ship-tabs {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* ── Accounting tabs ── */
#acc-tabs {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* ── Settings tabs ── */
.dispatch-tabs[id$="-tabs"] {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 0 !important;
}