/* /sfo/terminal.css */

/* --- 1) THEME VARIABLES (SFO Institutional Dark Mode) --- */
:root{
    --bg-body: #121212;
    --bg-nav: #1a1d26;
    --bg-card: #1a1d26;
    --bg-input: #121212;
    --bg-hover: #232836;

    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-accent: #4da6ff;

    --border: #2b3242;
    --success: #00b746;
    --danger: #ef4444;

    --nav-height: 46px;
    --sidebar-width: 260px;
    --font-stack: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* --- 2) GLOBAL RESET --- */
*{margin:0;padding:0;box-sizing:border-box;}
html{height:100%;}

html,body{
    font-family: var(--font-stack);
    background-color: var(--bg-body);
    color: var(--text-primary);
}

body{
    min-height:100%;
}

a{color:inherit;text-decoration:none;}

/* --- 3) TOP NAVIGATION BAR (single row) --- */
.top-nav{
    width:100%;
    border-bottom: 1px solid #4a2228;
    position:fixed;
    top:0;
    left:0;
    z-index:1000;
    height: var(--nav-height);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 0 20px;
    background-color: #2a1215;
}

.nav-left{
    display:flex;
    align-items:center;
    gap: 12px;
}

.nav-brand{
    display:flex;
    align-items:center;
}

.nav-logo{
    height: 34px;
    width: auto;
    display: block;
}

.nav-utility{
    display:flex;
    align-items:center;
    gap: 16px;
}

.nav-util-link{
    color: var(--text-secondary);
    font-size: 0.8rem;
    transition: color 0.15s ease;
    display:flex;
    align-items:center;
    gap: 5px;
}

.nav-util-link:hover{
    color: var(--text-primary);
}

.nav-subscribe-btn{
    display:flex;
    align-items:center;
    gap: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #c0880a, #e6a817);
    padding: 4px 12px;
    border-radius: 14px;
    transition: opacity 0.15s ease;
}
.nav-subscribe-btn:hover{
    opacity: 0.85;
    color: #fff;
}

.nav-toggle{
    background:none;
    border:none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor:pointer;
    padding: 4px 6px;
    transition: color 0.15s ease;
}

.nav-toggle:hover{
    color: var(--text-primary);
}

/* --- 4) LEFT SIDEBAR --- */
.sidebar{
    position:fixed;
    top: var(--nav-height);
    left:0;
    bottom:0;
    width: var(--sidebar-width);
    background-color: #151820;
    border-right: 1px solid var(--border);
    overflow-y: auto;
    z-index:900;
    transform: translateX(0);
    transition: transform 0.25s ease;
    padding: 12px 0;
}

.sidebar.closed{
    transform: translateX(-100%);
}

/* Scrollbar styling */
.sidebar::-webkit-scrollbar{ width: 4px; }
.sidebar::-webkit-scrollbar-track{ background: transparent; }
.sidebar::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 2px; }

/* Tier section */
.sidebar-section{
    margin-bottom: 4px;
}

.sidebar-tier-label{
    display:flex;
    align-items:center;
    gap: 8px;
    padding: 10px 18px 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    user-select: none;
}

.sidebar-tier-label .tier-dot{
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tier-free .tier-dot   { background: #64748b; }
.tier-bronze .tier-dot { background: #cd7f32; }
.tier-silver .tier-dot { background: #c0c0c0; }
.tier-gold .tier-dot   { background: #ffd700; }
.tier-partners .tier-dot { background: var(--text-accent); }

/* Small lock icon on tier header when user's subscription doesn't include that tier */
.sidebar-tier-label .tier-lock{
    font-size: 0.62rem;
    margin-left: 4px;
    opacity: 0.6;
}

/* Sidebar links */
.sidebar-link{
    display:flex;
    align-items:center;
    gap: 10px;
    padding: 9px 18px 9px 28px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-primary);
    transition: background 0.15s ease, color 0.15s ease;
    text-decoration: none;
    position: relative;
}

.sidebar-link:hover{
    background: var(--bg-hover);
    color: var(--text-primary);
}

.sidebar-link.active{
    background: rgba(77, 166, 255, 0.08);
    color: var(--text-accent);
    border-right: 2px solid var(--text-accent);
}

.sidebar-link i{
    width: 18px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.sidebar-link.active i{
    color: var(--text-accent);
}

/* Locked tools (above user's tier) */
.sidebar-link.locked{
    opacity: 0.45;
}

.sidebar-link.locked:hover{
    opacity: 0.7;
}

.sidebar-link .lock-badge{
    margin-left: auto;
    display:flex;
    align-items:center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 3px;
    flex-shrink: 0;
}

.lock-badge.badge-bronze{ background: rgba(205,127,50,0.15); color: #cd7f32; }
.lock-badge.badge-silver{ background: rgba(192,192,192,0.15); color: #c0c0c0; }
.lock-badge.badge-gold  { background: rgba(255,215,0,0.12); color: #ffd700; }

/* Sidebar footer (social links) */
.sidebar-footer{
    border-top: 1px solid var(--border);
    margin-top: 8px;
    padding: 12px 18px;
    display:flex;
    gap: 16px;
    justify-content: center;
}

.sidebar-footer a{
    color: var(--text-secondary);
    font-size: 1rem;
    transition: color 0.15s ease;
}

.sidebar-footer a:hover{
    color: var(--text-primary);
}

/* Sidebar overlay (mobile) */
.sidebar-backdrop{
    display:none;
    position:fixed;
    top: var(--nav-height);
    left:0;
    right:0;
    bottom:0;
    background: rgba(0,0,0,0.5);
    z-index:899;
}

/* --- 5) MAIN WORKSPACE --- */
.main-workspace{
    margin-top: var(--nav-height);
    margin-left: var(--sidebar-width);
    padding: 28px;
    min-height: calc(100vh - var(--nav-height));
    transition: margin-left 0.25s ease;
}

/* When sidebar is closed, content takes full width */
body.sidebar-closed .main-workspace{
    margin-left: 0;
}

/* Contained layout (1400px max-width for calculators) */
.main-workspace.contained{
    max-width: 1400px;
}

body.sidebar-closed .main-workspace.contained{
    margin-left: auto;
    margin-right: auto;
}

/* --- 6) RESPONSIVE (mobile) --- */
@media (max-width: 768px){
    .nav-utility{
        display:none;
    }

    /* Sidebar is overlay on mobile, not pushing content */
    .sidebar{
        transform: translateX(-100%);
        z-index: 950;
    }

    .sidebar.mobile-open{
        transform: translateX(0);
    }

    .sidebar-backdrop.visible{
        display:block;
    }

    .main-workspace{
        margin-left: 0;
        padding: 18px;
    }

    body.sidebar-closed .main-workspace{
        margin-left: 0;
    }
}