/* #######################################################################
 * 🐢 TRTL UX — Turtle Account Topbar  (TGR-aligned)
 * File: /assets/css/topbar.css
 * Version: v6.0.4-TA  (TRTL v1.0.1)
 ####################################################################### */

/* Topbar container */
.ta-topbar{
  position:sticky;
  top:0;
  z-index:20;
  background:var(--t-bg);
  border-bottom:1px solid var(--t-border);
  box-shadow:var(--shadow-sm);
}

/* ----------------------------------------------------------
   TGR TOPBAR PADDING + VERTICAL RHYTHM
   (matches turtle.onl .tn-topbar exactly)
---------------------------------------------------------- */
.ta-topbar-wrap{
  max-width:1200px;
  margin:0 auto;

  /* TGR exact values */
  padding:18px 24px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

/* Left cluster */
.ta-topbar-left{
  display:flex;
  align-items:center;
  gap:12px;
}

.ta-logo{
  width:32px;
  height:32px;
  object-fit:contain;
}

.ta-title{
  font-size:18px;
  font-weight:700;
  color:var(--t-fg);
  letter-spacing:.2px;
}

.ta-status-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--t-green);
  margin-left:4px;
}

/* ----------------------------------------------------------
   Right cluster (TGR-aligned spacing)
---------------------------------------------------------- */
.ta-topbar-right{
  display:flex;
  align-items:center;

  /* TGR spacing between control elements */
  gap:18px;
}

/* ----------------------------------------------------------
   9-DOT BUTTON — TGR exact behavior
---------------------------------------------------------- */

.btn-icon{
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
}

/* From Turtle.onl home.css */
.tn-dot9{
  width:36px;
  height:36px;
  border-radius:50%;
  border:0;
  background:transparent;

  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3px;
  align-items:center;
  justify-items:center;

  cursor:pointer;
}

.tn-dot9 .dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--t-fg);
}

/* Hover states (TGR) */
.tn-dot9:hover{
  background:rgba(0,0,0,.06);
}
html[data-theme="dark"] .tn-dot9:hover{
  background:rgba(255,255,255,.06);
}

/* ----------------------------------------------------------
   Avatar (TA-specific, but aligned to TGR baseline)
---------------------------------------------------------- */
.ta-avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  overflow:hidden;

  border:1px solid var(--t-border);
  background:var(--t-bg-alt);

  display:grid;
  place-items:center;
}

.ta-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}