/* ==================================================
   DEBUGFORGE MAIN STYLESHEET
   Author: DebugForge Team 😎
   Purpose:
   - Layout
   - Theme
   - Components
   - Responsive Design
================================================== */


/* ==================================================
   CSS RESET
================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
    background:#0f172a;
    color:#f8fafc;
    min-height:100vh;
}


/* ==================================================
   THEME VARIABLES
================================================== */

:root{

    /* Primary Colors */
    --bg:#0f172a;
    --sidebar:#111827;
    --card:#1e293b;

    /* Accent */
    --primary:#38bdf8;
    --primary-hover:#0ea5e9;

    /* Text */
    --text:#f8fafc;
    --muted:#94a3b8;

    /* Borders */
    --border:#334155;

    /* Effects */
    --radius:16px;
    --shadow:0 8px 30px rgba(0,0,0,.25);

}


/* ==================================================
   APP LAYOUT
================================================== */

.app{
    display:flex;
    min-height:100vh;
}


/* ==================================================
   SIDEBAR
================================================== */

.sidebar{
    width:270px;
    background:var(--sidebar);
    border-right:1px solid var(--border);
    padding:25px;
    display:flex;
    flex-direction:column;
}

.logo{
    margin-bottom:40px;
}

.logo h1{
    font-size:1.8rem;
}

.logo p{
    color:var(--muted);
    margin-top:5px;
}


/* Navigation */

.sidebar ul{
    list-style:none;
}

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

    padding:14px 16px;
    margin-bottom:10px;

    border-radius:12px;

    cursor:pointer;

    transition:.3s;
}

.nav-link:hover{
    background:rgba(56,189,248,.1);
}

.nav-link.active{
    background:var(--primary);
    color:#000;
}

.material-icons{
    font-size:20px;
}


/* ==================================================
   MAIN CONTENT
================================================== */

.main-content{
    flex:1;
    padding:25px;
}


/* ==================================================
   TOPBAR
================================================== */

.topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:30px;
}

.topbar h2{
    font-size:1.6rem;
}

.topbar-actions{
    display:flex;
    gap:10px;
}

.topbar button{
    padding:10px 16px;
    border:none;
    border-radius:10px;

    background:var(--card);
    color:var(--text);

    cursor:pointer;
}


/* ==================================================
   PAGE SYSTEM (SPA)
================================================== */

.page{
    display:none;
}

.active-page{
    display:block;
}


/* ==================================================
   HERO
================================================== */

.hero{
    margin-bottom:30px;
}

.hero h1{
    font-size:2rem;
    margin-bottom:10px;
}

.hero p{
    color:var(--muted);
}


/* ==================================================
   STATS GRID
================================================== */

.stats-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

    margin-bottom:30px;
}

.stat-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:20px;

    box-shadow:var(--shadow);

    transition:.3s;
}

.stat-card:hover{
    transform:translateY(-5px);
}

.stat-card h3{
    color:var(--muted);
    margin-bottom:10px;
}

.stat-card span{
    font-size:2rem;
    font-weight:bold;
}


/* ==================================================
   QUICK ACTION BUTTONS
================================================== */

.quick-actions{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
}

.action-btn{

    padding:14px 20px;

    border:none;

    border-radius:12px;

    background:var(--primary);

    color:#000;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;
}

.action-btn:hover{
    background:var(--primary-hover);
    transform:translateY(-2px);
}


/* ==================================================
   SECTION HEADERS
================================================== */

.section-header{
    margin-bottom:25px;
}

.section-header h2{
    margin-bottom:8px;
}

.section-header p{
    color:var(--muted);
}


/* ==================================================
   INPUTS
================================================== */

input,
textarea{

    width:100%;

    padding:15px;

    margin-bottom:15px;

    border-radius:12px;

    border:1px solid var(--border);

    background:var(--card);

    color:var(--text);

    outline:none;
}

textarea{
    resize:vertical;
    min-height:180px;
}

input:focus,
textarea:focus{
    border-color:var(--primary);
}


/* ==================================================
   GENERAL BUTTONS
================================================== */

button{

    padding:12px 18px;

    border:none;

    border-radius:10px;

    cursor:pointer;
}


/* ==================================================
   DECODER RESULT BOX
================================================== */

#decoderResult{

    margin-top:20px;

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:20px;
}


/* ==================================================
   ERROR LIBRARY
================================================== */

#errorList{

    display:grid;

    gap:15px;

    margin-top:20px;
}

.error-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:15px;
}


/* ==================================================
   CHECKLIST
================================================== */

.checklist-container{

    display:flex;

    flex-direction:column;

    gap:15px;
}

.checklist-container label{

    background:var(--card);

    padding:15px;

    border-radius:12px;

    display:flex;

    align-items:center;

    gap:10px;

    cursor:pointer;
}


/* ==================================================
   SAVED SOLUTIONS
================================================== */

#savedSolutions{

    display:grid;

    gap:15px;
}

.saved-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:15px;
}


/* ==================================================
   SETTINGS
================================================== */

.settings-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:20px;
}

.setting-card{

    background:var(--card);

    border-radius:var(--radius);

    padding:20px;
}


/* ==================================================
   COMMAND PALETTE
================================================== */

#commandPalette{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.65);

    display:flex;

    justify-content:center;

    align-items:flex-start;

    padding-top:100px;

    z-index:999;
}

.hidden{
    display:none !important;
}

.palette-box{

    width:min(700px,90%);

    background:var(--sidebar);

    border-radius:20px;

    overflow:hidden;

    box-shadow:
    0 20px 60px rgba(0,0,0,.5);
}

#paletteSearch{

    margin:0;

    border:none;

    border-radius:0;

    padding:18px;
}

#paletteResults{

    max-height:400px;

    overflow-y:auto;
}


/* ==================================================
   SCROLLBAR
================================================== */

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-track{
    background:#0f172a;
}

::-webkit-scrollbar-thumb{
    background:#334155;
    border-radius:10px;
}


/* ==================================================
   RESPONSIVE DESIGN
================================================== */

@media(max-width:900px){

    .sidebar{
        width:220px;
    }

}

@media(max-width:768px){

    .app{
        flex-direction:column;
    }

    .sidebar{
        width:100%;
        border-right:none;
        border-bottom:1px solid var(--border);
    }

    .topbar{
        flex-direction:column;
        gap:15px;
        align-items:flex-start;
    }

    .quick-actions{
        flex-direction:column;
    }

    .action-btn{
        width:100%;
    }

}

@media(max-width:500px){

    .main-content{
        padding:15px;
    }

    .hero h1{
        font-size:1.5rem;
    }

}