/* =========================================================
   topbar.css — Topbar, Mini Sidebar, Tabs Bar
   MMSEO Crawl & Audit Console
   ========================================================= */

/* ── TOPBAR ── */
.topbar{
  border-bottom:1px solid var(--border);
  padding:0 16px;height:48px;display:flex;align-items:center;gap:0;flex-shrink:0;
  position:relative;z-index:500;
}
.top-logo{display:flex;align-items:center;gap:8px;padding-right:16px;border-right:1px solid var(--border);height:100%;color:inherit;}
.top-logo-icon{width:28px;height:28px;background:var(--forest);border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.top-logo-icon svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;}
.top-logo-name{font-size:15px;font-weight:700;color:var(--forest);letter-spacing:-.3px;}
.top-breadcrumb{display:flex;align-items:center;gap:5px;padding:0 14px;font-size:11px;color:var(--text-dim);}
.top-breadcrumb a{color:var(--text-dim);text-decoration:none;}
.top-breadcrumb a:hover{color:var(--forest);}
.top-breadcrumb .sep{font-size:11px;color:var(--text-dim);margin:0 2px;font-weight:300;}
.top-breadcrumb .current{color:var(--forest);font-weight:600;}
.top-right{margin-left:auto;display:flex;align-items:center;gap:8px;}
.top-plan-badge{border:1.5px solid var(--border);color:var(--text-mid);font-size:11px;font-weight:600;padding:4px 11px;border-radius:20px;background:transparent;}
.top-avatar{width:28px;height:28px;border-radius:50%;background:var(--bg2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--text-mid);cursor:pointer;}
.top-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);cursor:pointer;border-radius:6px;}
.top-icon:hover{background:var(--bg2);}
.top-divider{width:1px;height:18px;background:var(--border);margin:0 2px;}
a.top-nav-pill, .top-nav-pill{
  display:flex!important;align-items:center;padding:4px 11px;
  border-radius:20px;border:1.5px solid var(--border)!important;
  font-size:11px;font-weight:600;color:var(--text-mid)!important;
  text-decoration:none!important;transition:border-color .15s,color .15s,background .15s;
  white-space:nowrap;background:transparent;
}
a.top-nav-pill:hover, .top-nav-pill:hover{border-color:var(--forest)!important;color:var(--forest)!important;background:var(--bg2);}
.top-notif-btn{padding:4px 10px!important;color:var(--text-mid)!important;}
.top-profile-pill{
  display:flex;align-items:center;gap:6px;padding:3px 9px 3px 4px;
  border-radius:20px;border:1.5px solid var(--forest);
  cursor:pointer;transition:border-color .15s,background .15s;
  background:var(--bg);
}
.top-profile-pill:hover{background:var(--bg2);}
.top-profile-avatar{
  width:22px;height:22px;border-radius:50%;
  background:var(--forest);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;flex-shrink:0;
}

/* ── LEFT MINI SIDEBAR ── */

/* ── PRIMARY TABS BAR ── */
.tabs-bar{
  background:var(--white);border-bottom:1px solid var(--border);
  display:flex;flex-shrink:0;overflow-x:auto;position:relative;z-index:200;
}
.tabs-bar::-webkit-scrollbar{display:none;}
.tab{
  padding:0 11px;height:var(--chrome-size);display:flex;align-items:center;gap:4px;
  font-size:11px;color:var(--text-mid);cursor:pointer;
  border-bottom:2px solid transparent;white-space:nowrap;
  background:transparent;border-top:none;border-left:none;border-right:none;
  font-family:inherit;transition:color .15s;position:relative;flex-shrink:0;
  text-decoration:none;
}
.tab:hover:not(.active){color:var(--text);}
.tab.active{color:var(--forest);border-bottom:2px solid var(--forest);font-weight:600;}
.tab .tab-arrow{font-size:8px;color:var(--text-dim);transition:color .15s;}
.tab:hover .tab-arrow,.tab.active .tab-arrow{color:var(--forest);}

/* ── DROPDOWN OVERLAY ── */
#tabDropdownOverlay{
  display:none;
  position:fixed;
  z-index:9999;
  min-width:210px;
}
#tabDropdownMenu{
  background:var(--white);
  border:1px solid var(--border);
  border-top:none;
  border-radius:0 0 var(--radius) var(--radius);
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  overflow:hidden;
}
.ddrop-item{
  display:flex;align-items:center;gap:9px;
  width:100%;padding:9px 14px;
  font-size:11px;font-weight:500;color:var(--text-mid);
  text-decoration:none;background:transparent;
  border:none;font-family:inherit;cursor:pointer;
  transition:background .12s,color .12s;
  white-space:nowrap;text-align:left;
}
.ddrop-item:hover{background:var(--bg2);color:var(--forest);}
.ddrop-item.ddrop-active{color:var(--forest);font-weight:600;background:#eaf3e0;}
.ddrop-item i{font-size:11px;color:var(--text-dim);flex-shrink:0;}
.ddrop-item:hover i{color:var(--forest);}

/* ── SUB-TABS BAR ── */
.subtabs-bar{
  background:var(--bg);border-bottom:1px solid var(--border);
  display:none;flex-shrink:0;overflow-x:auto;padding:0 8px;
}
.subtabs-bar::-webkit-scrollbar{display:none;}
.subtabs-bar.visible{display:flex;}
.subtab{
  padding:0 12px;height:34px;display:flex;align-items:center;gap:5px;
  font-size:11px;color:var(--text-mid);cursor:pointer;
  border-bottom:2px solid transparent;white-space:nowrap;flex-shrink:0;
  background:transparent;border-top:none;border-left:none;border-right:none;
  font-family:inherit;transition:color .12s;
}
.subtab:hover:not(.active){color:var(--text);}
.subtab.active{color:var(--forest);border-bottom:2px solid var(--forest);font-weight:600;}
.subtab i{font-size:11px;}

/* ── MENUS ── */
#notifMenu{font-family:inherit!important;}
#accountMenu{font-family:inherit;}
#exportMenu{font-family:inherit;}

/* ── CSS-ONLY PROFILE DROPDOWN ── */
.css-profile-wrap{position:relative;}
.css-profile-menu{
  display:none;position:absolute;top:calc(100% + 8px);right:0;
  width:210px;background:var(--bg);border:1px solid var(--border);
  border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.15);
  z-index:9999;font-size:11px;overflow:hidden;font-family:inherit;
}
.css-profile-menu.open{display:block!important;}
.css-profile-header{
  padding:8px 12px;border-bottom:1px solid var(--border);
  background:var(--bg);border-radius:10px 10px 0 0;font-size:11px;
}
.css-profile-body{padding:5px;background:var(--bg);}
.css-profile-footer{padding:5px;border-top:1px solid var(--border);background:var(--bg);border-radius:0 0 10px 10px;}
.css-profile-item{
  display:block;padding:6px 10px;font-size:11px;color:var(--text);
  text-decoration:none;border-radius:6px;transition:background .15s;
}
.css-profile-item:hover{background:var(--bg2);}
.css-profile-logout{color:#d93025;}

/* ── MINI SIDEBAR ── */
.mini-sidebar{display:flex;flex-direction:column;align-items:center;gap:4px;width:var(--chrome-size);flex-shrink:0;background:var(--white);border-right:1px solid var(--border);padding:8px 0;}
.msb-btn{width:30px;height:30px;border:none;background:transparent;color:var(--text-dim);border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;transition:all .15s;}
.msb-btn:hover{background:var(--bg2);color:var(--forest);}
.msb-btn.active{background:#eaf3e0;color:var(--forest);}
.msb-divider{width:18px;height:1px;background:var(--border);margin:4px 0;}

/* ── HAMBURGER ── */
.topbar-hamburger{display:none;background:none;border:none;cursor:pointer;color:var(--text-mid);font-size:20px;padding:4px;}

/* Profile menu auth state */
.css-profile-menu.hidden{display:none!important;}