/* ======================================================
   yt-dashboard.css — final optimized (Option A: no overlay)
   ====================================================== */

/* MAIN LAYOUT */
.yt-dashboard-layout {
    display: flex;
    min-height: 100vh;
}
/* Welcome username */
.yt-welcome-text {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    opacity: 0.85;
}

/* highlight username */
.yt-welcome-text span {
    font-weight: 600;
    color: #00d4ff;
}
.yt-profile-email {
    color: rgba(255,255,255,0.7);
    font-size: 12px;
}
/* SIDEBAR (desktop) */
.yt-sidebar {
    width: 250px;
    background: #000;
    color: #fff;
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    transition: width .25s ease, transform .25s ease;
    z-index: 1001;
}
.yt-sidebar-inner { display: flex; flex-direction: column; height: 100%; }

/* Scroll area */
.yt-sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.yt-sidebar-scroll::-webkit-scrollbar { display: none; }
.yt-sidebar-scroll { scrollbar-width: none; }

/* Brand */
.yt-sidebar-brand span {
    display: block;
    padding: 22px 18px;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

/* Footer */
.yt-sidebar-footer {
    padding: 14px 18px;
    border-top: 1px solid rgba(255,255,255,0.12);
    background: #000;
}
.yt-logout-link { display: block; color: rgba(255,255,255,0.85); text-decoration: none; font-weight: 600; }

/* Footer toggle */
.yt-footer-toggle {
    width: 100%; background: transparent; color: #fff; border: none; cursor: pointer; padding: 10px 0; display:flex; justify-content:center; gap:6px;
}
.yt-footer-toggle .icon-minus { display:inline; } .yt-footer-toggle .icon-plus { display:none; }
.yt-sidebar--collapsed .icon-minus { display:none; } .yt-sidebar--collapsed .icon-plus{ display:inline; }

/* MENU */
.yt-account-nav { display:flex; flex-direction:column; gap:6px; }
.yt-account-link { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:8px; text-decoration:none; color:rgba(255,255,255,0.85); transition: background .2s ease, color .2s ease; }
.yt-account-link:hover, .yt-account-link.is-active { background: rgba(255,255,255,0.12); color: #fff; }
.yt-menu-text { font-size:12px; }

/* Submenu */
.yt-submenu { display:none; flex-direction:column; margin-left:38px; }
.yt-menu-parent.open > .yt-submenu { display:flex; }
.yt-sub-link { padding:8px 12px !important; opacity:.75; font-size:13px; }
.yt-sub-link:hover { opacity:1; }

/* Dropdown icon */
.yt-dropdown-icon { margin-left:auto; opacity:.6; transition: transform .3s ease; pointer-events: none; }
.has-children .yt-dropdown-icon::before { content: "\f078"; font-family: "Font Awesome 5 Free"; font-weight:900; }
.has-children.open .yt-dropdown-icon { transform: rotate(180deg); }

/* Collapse mode */
.yt-sidebar--collapsed { width:70px !important; }
.yt-sidebar--collapsed .yt-menu-text { display:none !important; }
.yt-sidebar--collapsed .yt-account-link { justify-content:center; }
.yt-sidebar--collapsed .yt-submenu { display:none !important; }

/* HEADER */
.yt-header {
    height: 60px;
    background: #000;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    padding:0 24px;
    position: sticky;
    top:0;
    z-index: 500;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.yt-header-right { display:flex; align-items:center; gap:18px; }
.yt-header-home { display:flex; align-items:center; gap:6px; color:#fff; text-decoration:none; }
.yt-header-home:hover { color:#00d4ff; }

/* Profile */
.yt-header-profile { position:relative; }
.yt-profile-btn { border:none; background:transparent; cursor:pointer; }
.yt-profile-img { width:36px; height:36px; border-radius:50%; object-fit:cover; }
.yt-profile-dropdown { position:absolute; right:0; top:48px; width:180px; padding:12px; background:#111; border-radius:8px; display:none; flex-direction:column; gap:10px; }
.yt-header-profile:hover .yt-profile-dropdown { display:flex; }

/* MAIN AREA */
.yt-main-area { flex:1; display:flex; flex-direction:column; position:relative; z-index:1; }
.yt-account-content { padding:28px; }

/* TOGGLE (mobile) */
#yt-sidebar-toggle {
    position: fixed;
    top: 150px;
    right: 16px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #f85c70;
    color: #fff;
    border: none;
    font-size: 22px;
    cursor: pointer;
    z-index: 20000;
    display: none;
    justify-content:center;
    align-items:center;
    padding: 20px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.45);
}

/* CARDS */
.yt-entry-wrapper { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:20px; margin-top:25px; }
.yt-entry-card { background:#fff; border-radius:14px; padding:22px 26px; text-align:center; box-shadow:0 2px 12px rgba(0,0,0,0.12); }
.yt-entry-count { font-size:32px; font-weight:700; } .yt-entry-label { font-size:14px; color:#444; margin-top:6px; }


/* ======================================
   TOOLTIP for collapsed sidebar
====================================== */

.yt-sidebar--collapsed .yt-account-link {
    position: relative;
}

/* Tooltip bubble */
.yt-sidebar--collapsed .yt-account-link::after {
    content: attr(title);
    position: absolute;
    left: 70px; /* appears to the right of collapsed sidebar */
    top: 50%;
    transform: translateY(-50%);
    background: #111;
    color: #fff;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease-in-out;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    z-index: 999999;
}

/* Tooltip arrow */
.yt-sidebar--collapsed .yt-account-link::before {
    content: "";
    position: absolute;
    left: 64px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent #111 transparent transparent;
    opacity: 0;
    transition: opacity .15s ease-in-out;
    z-index: 999999;
}

/* Show tooltip on hover */
.yt-sidebar--collapsed .yt-account-link:hover::after,
.yt-sidebar--collapsed .yt-account-link:hover::before {
    opacity: 1;
}


/* RESPONSIVE: Mobile drawer (no overlay) */
@media (max-width: 980px) {

  /* show toggle */
  #yt-sidebar-toggle { display:flex !important; }

  /* sidebar becomes a fixed drawer */
  .yt-sidebar {
      position: fixed !important;
      top: 0; left: 0;
      width: 260px;
      height: 100vh;
      transform: translateX(-100%);
      z-index: 10001 !important;
      will-change: transform;
  }
  .yt-sidebar--open { transform: translateX(0) !important; }

  .yt-sidebar-scroll {
      max-height: calc(100vh - 110px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
  }

  /* ensure drawer above page areas */
  .yt-header, .yt-main-area { position: relative !important; z-index: 1 !important; }

  /* clickable inside drawer */
  .yt-sidebar, .yt-sidebar * { pointer-events: auto !important; }
}