/* Thanh công cụ bên dùng chung. Tách khỏi _sidebar_tools_nav.blade.php để trình duyệt lưu đệm. */
.sidebar-tool-row {
    display: flex; align-items: stretch; gap: 2px;
    margin-bottom: 5px;
}
.sidebar-tool-row.is-active .sidebar-tool-actions { display: none; }
.sidebar-tool-link {
    flex: 1;
    display: block;
    padding: 5px 8px;
    font-size: 0.78rem;
    color: var(--color-accent-gold);
    text-decoration: none;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    transition: background 0.15s, border-color 0.15s;
}
.sidebar-tool-link:hover {
    background: var(--color-bg-active);
    border-color: var(--color-accent-gold);
    color: var(--color-text-main);
    text-decoration: none;
}
.sidebar-tool-active {
    color: var(--color-accent-gold);
    background: var(--color-bg-active);
    border-color: var(--color-accent-gold);
    font-weight: 600;
    cursor: default;
}
.sidebar-tool-icon {
    display: inline-block;
    width: 18px;
    text-align: center;
}
/* #3612: đuôi hàng (nhãn Full) nổi bên phải tên công cụ; chú thích dưới danh sách. */
.sidebar-tool-end { float: right; display: inline-flex; align-items: center; gap: var(--space-2); }
.sidebar-tool-end svg { font-size: var(--fs-xs); }
.sidebar-tool-note { margin-top: var(--space-3); }
.sidebar-tool-note svg { flex: 0 0 auto; color: var(--color-accent-gold); }

/* Dropdown actions */
.sidebar-tool-actions { position: relative; }
.sidebar-tool-toggle {
    list-style: none;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 100%; min-height: 28px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: rgba(255,255,255,0.02);
    transition: border-color 0.15s, color 0.15s;
}
.sidebar-tool-toggle::-webkit-details-marker { display: none; }
.sidebar-tool-toggle:hover { color: var(--color-accent-gold); border-color: var(--color-accent-gold); }
.sidebar-tool-actions[open] .sidebar-tool-toggle { color: var(--color-accent-gold); border-color: var(--color-accent-gold); }
.sidebar-tool-menu {
    position: absolute; top: calc(100% + 4px); right: 0;
    z-index: 200;
    min-width: 170px;
    background: var(--color-bg-main, #0f172a);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    padding: 4px;
    display: flex; flex-direction: column; gap: 1px;
}
.sidebar-tool-menu-item {
    display: block;
    width: 100%; text-align: left;
    padding: 5px 8px;
    background: transparent;
    border: none;
    border-radius: 3px;
    color: var(--color-text-main);
    font-size: 0.76rem;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.1s;
}
.sidebar-tool-menu-item:hover { background: rgba(255,255,255,0.06); color: var(--color-accent-gold); }
.sidebar-tool-menu-item:disabled { opacity: 0.4; cursor: not-allowed; }

/* Inline row loading — spinner overlay on chỉ row đang fetch, không che màn hình. */
.sidebar-tool-row.is-loading { position: relative; }
.sidebar-tool-row.is-loading .sidebar-tool-link {
    opacity: 0.55;
    pointer-events: none;
}
.sidebar-tool-row.is-loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 16px; height: 16px;
    margin-top: -8px; margin-left: -8px;
    border: 2px solid rgba(255,255,255,0.18);
    border-top-color: var(--color-accent-gold);
    border-radius: 50%;
    animation: tn-pin-spin 0.7s linear infinite;
    pointer-events: none;
}
@keyframes tn-pin-spin { to { transform: rotate(360deg); } }

/* Transient toast (top-right). */
.tn-pin-toast {
    position: fixed;
    top: 70px; right: 20px;
    background: var(--color-bg-main, #0f172a);
    border: 1px solid var(--color-accent-gold);
    color: var(--color-accent-gold);
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 0.78rem;
    box-shadow: 0 6px 24px rgba(0,0,0,0.5);
    z-index: 99600;
    opacity: 0; transform: translateY(-6px);
    transition: opacity 0.18s, transform 0.18s;
    pointer-events: none;
    max-width: 340px;
}
.tn-pin-toast.is-visible { opacity: 1; transform: translateY(0); }
.tn-pin-toast.is-error { border-color: #f87171; color: #f87171; }

/* #3869 (mẫu anh Hoè): sidebar công cụ dạng danh sách phẳng — tiêu đề nhóm có biểu tượng, hàng ngăn bằng vạch mảnh,
   biểu tượng vàng + chữ sáng + mũi tên › cuối hàng, hàng đang mở nền vàng nhạt + chữ vàng (mẫu có vạch vàng trái, nhưng luật thanh-mep cấm mép trái dày). Chỉ áp trong hai khối .stn;
   thanh tab dọc và trang thành viên dùng chung tên lớp nhưng giữ kiểu riêng. */
.widget.stn .stn-hd { display: flex; align-items: center; gap: var(--space-2); border-bottom: 1px solid var(--color-ui-border-subtle); color: var(--heading-color); font-size: var(--fs-md); padding-bottom: var(--space-2); margin-bottom: 0; }
.stn .stn-hd-ic { display: inline-flex; color: var(--color-accent-gold); font-size: var(--fs-lg); }
.stn .sidebar-tool-row { margin: 0; gap: 0; border-bottom: 1px solid var(--color-ui-border-subtle); }
.stn > .sidebar-tool-link { border-bottom: 1px solid var(--color-ui-border-subtle); }
.stn .sidebar-tool-link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); font-size: var(--fs-base); color: var(--color-text-main); border: 0; border-radius: 0; background: none; }
.stn .sidebar-tool-link::after { content: '›'; order: 3; margin-left: auto; color: var(--color-text-muted); font-size: var(--fs-lg); line-height: 1; }
.stn .sidebar-tool-row:not(.is-active):has(.sidebar-tool-actions) .sidebar-tool-link::after { content: none; }
.stn .sidebar-tool-link:hover { background: var(--color-bg-hover-strong); color: var(--color-text-main); }
.stn .sidebar-tool-link:hover::after { color: var(--color-accent-gold); }
.stn .sidebar-tool-active, .stn .sidebar-tool-active:hover { background: color-mix(in srgb, var(--color-accent-gold) 12%, transparent); color: var(--color-accent-gold); }
.stn .sidebar-tool-icon { flex: none; width: 1.3em; color: var(--color-accent-gold); font-size: var(--fs-lg); line-height: 1; }
.stn .sidebar-tool-end { float: none; order: 2; margin-left: auto; }
.stn .sidebar-tool-toggle { width: 2em; min-height: 0; border: 0; background: none; font-size: var(--fs-lg); transition: transform var(--motion-fast), color var(--motion-fast); }
.stn .sidebar-tool-actions[open] .sidebar-tool-toggle { transform: rotate(90deg); }