/* ================================================================
   TOOLS PAGE — Layout & Sidebar Overrides
   Loaded on every tool page via base_tool.html
   ================================================================ */

/* ── Tool page: no right column, wider center ───────────────────── */
.tool-center-content {
    padding: 0;
    min-height: 60vh;
}

/* ── Tools sidebar nav block ─────────────────────────────────────── */
.tools-nav-block {
    margin-top: 0 !important;
}

.tools-nav-block .block-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--text-muted, #888);
    padding: 12px 14px 6px;
}

.tools-nav-block .block-title i {
    font-size: 0.75rem;
    color: var(--accent, #f5a623);
}

/* ── Active tool link highlight ──────────────────────────────────── */
.active-tool-link {
    background: var(--sidebar-item-active-bg, rgba(245,166,35,0.12)) !important;
    color: var(--accent, #f5a623) !important;
    font-weight: 600;
    border-left: 3px solid var(--accent, #f5a623);
    padding-left: 13px !important;
}

.active-tool-link .premium-crown i {
    color: var(--accent, #f5a623) !important;
}

/* ── Tool sidebar: always open, no toggle animation ─────────────── */
#tools-dropdown .dropdown-body {
    display: flex !important;
    flex-direction: column;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    padding-bottom: 8px;
}

/* ── Ensure sidebar header arrow points down (expanded state) ───── */
#tools-dropdown .dropdown-header .fa-angle-down {
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

/* Overriding layout to remove empty right sidebar gap */
.layout { grid-template-columns: 240px 1fr !important; }
.tool-center-content { max-width: 100% !important; }

@media (max-width: 1024px) {
    .layout:has(.tool-center-content) {
        grid-template-columns: minmax(0, 1fr) !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .content:has(.tool-center-content),
    .tool-center-content,
    .af-page,
    .glm-page {
        width: 100% !important;
        max-width: 100% !important;
    }

    .content:has(.tool-center-content) {
        grid-column: 1 / -1;
        overflow-x: hidden;
    }
}

@media (max-width: 768px) {
    .page-container:has(.tool-center-content) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .content:has(.tool-center-content) {
        border-radius: 0 !important;
    }
}