/* ==========================================================
   Tahafuz AI Dashboard
   Responsive Styles
========================================================== */

/* ==========================================
   LARGE LAPTOPS
========================================== */

@media (max-width:1400px){

    .dashboard{

        grid-template-columns:260px 1fr;

    }

    .content{

        padding:30px;

    }

    .hero h1{

        font-size:36px;

    }

    .score-number span{

        font-size:72px;

    }

}

/* ==========================================
   LAPTOPS
========================================== */

@media (max-width:1200px){

    .dashboard{

        grid-template-columns:240px 1fr;

    }

    .investigation-panel{

        grid-template-columns:1fr;

    }

    .analysis-grid{

        grid-template-columns:1fr;

    }

    .analytics-section{

        grid-template-columns:1fr;

    }

    .recommendation-grid{

        grid-template-columns:1fr;

    }

    .quick-stats{

        grid-template-columns:repeat(2,1fr);

    }

}

/* ==========================================
   TABLETS
========================================== */

@media (max-width:992px){

    .dashboard{

        grid-template-columns:1fr;

    }

    .sidebar{

        position:fixed;

        left:-320px;

        top:0;

        width:290px;

        height:100vh;

        z-index:999;

        transition:.35s ease;

    }

    .sidebar.active{

        left:0;

    }

    .content{

        width:100%;

        padding:24px;

    }

    .topbar{

        flex-direction:column;

        align-items:stretch;

    }

    .top-actions{

        justify-content:flex-end;

        flex-wrap:wrap;

    }

    .hero{

        padding:30px;

    }

    .hero h1{

        font-size:32px;

    }

    .analysis-box textarea{

        min-height:220px;

    }

}

/* ==========================================
   SMALL TABLETS
========================================== */

@media (max-width:768px){

    .upload-actions{

        flex-direction:column;

    }

    .search-box{

        padding:15px 18px;

    }

    .section-title{

        flex-direction:column;

        align-items:flex-start;

    }

    .card-top{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }

    .score-number span{

        font-size:64px;

    }

    .timeline{

        padding-left:20px;

    }

    .timeline-item span{

        left:-18px;

    }

    .quick-stats{

        grid-template-columns:1fr;

    }

}
/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:576px){

    .content{

        padding:16px;

    }

    .hero{

        padding:24px;

        border-radius:20px;

    }

    .hero h1{

        font-size:28px;

        line-height:1.3;

    }

    .hero p{

        font-size:14px;

    }

    .badge{

        font-size:12px;

        padding:6px 14px;

    }

    .investigation-card,
    .threat-card,
    .glass-card{

        padding:20px;

        border-radius:20px;

    }

    .section-icon{

        width:50px;

        height:50px;

        font-size:20px;

    }

    .section-title h2{

        font-size:22px;

    }

    .analysis-box textarea{

        min-height:180px;

        font-size:14px;

    }

    .upload-btn,
    .scan-btn{

        width:100%;

        height:54px;

        font-size:15px;

    }

    .score-number span{

        font-size:54px;

    }

    .score-number small{

        font-size:22px;

    }

    .chart-container{

        height:220px;

    }

    .stat-box{

        padding:22px;

    }

    .stat-box h2{

        font-size:28px;

    }

    .stat-box i{

        font-size:28px;

    }

}

/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width:420px){

    .logo h2{

        font-size:20px;

    }

    .logo p{

        display:none;

    }

    .hero h1{

        font-size:24px;

    }

    .top-actions{

        gap:10px;

    }

    .top-actions button{

        width:46px;

        height:46px;

    }

    .new-btn{

        width:100% !important;

        justify-content:center;

        height:50px;

    }

    .search-box{

        padding:14px 16px;

    }

    .search-box input{

        font-size:14px;

    }

    .analysis-header{

        flex-direction:column;

        gap:8px;

    }

    .finding{

        flex-direction:column;

        align-items:flex-start;

    }

    .finding-icon{

        width:48px;

        height:48px;

        font-size:18px;

    }

    .timeline{

        padding-left:16px;

    }

    .timeline-item span{

        width:16px;

        height:16px;

        left:-15px;

    }

}

/* ==========================================================
   LANDSCAPE PHONES
========================================================== */

@media (max-height:700px){

    .sidebar{

        overflow-y:auto;

    }

    .sidebar-card{

        margin-top:20px;

    }

}

/* ==========================================================
   WIDE SCREENS
========================================================== */

@media (min-width:1700px){

    .dashboard{

        grid-template-columns:320px 1fr;

    }

    .content{

        max-width:1700px;

        margin:auto;

        width:100%;

        padding:45px;

    }

    .hero h1{

        font-size:52px;

    }

    .glass-card,
    .investigation-card,
    .threat-card{

        padding:36px;

    }

}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}