/* ==========================================
   AKILLI ÇOBAN
   RESPONSIVE / MOBİL UYUMLULUK
   ========================================== */


/* Tablet ve telefon */
@media (max-width: 900px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }


    /* ======================================
       ANA YAPI
       ====================================== */

    .dashboard-container {
        display: block !important;
        width: 100% !important;
        min-height: 100vh;
    }


    .dashboard-main {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;

        padding: 15px !important;

        box-sizing: border-box;
    }


    /* ======================================
       SOL MENÜ MOBİLDE ÜSTE GELSİN
       ====================================== */

    .sidebar {
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        min-height: auto !important;
        height: auto !important;

        left: auto !important;
        top: auto !important;

        padding: 12px !important;

        box-sizing: border-box;

        overflow: hidden;
    }


    .sidebar-logo {
        text-align: center;

        font-size: 21px !important;

        padding: 10px !important;

        margin-bottom: 8px !important;
    }


    /* Menü yatay kaydırılabilir */
    .sidebar nav {
        display: flex !important;

        flex-direction: row !important;

        gap: 8px !important;

        overflow-x: auto !important;

        overflow-y: hidden !important;

        white-space: nowrap;

        padding: 5px 0 10px 0 !important;

        scrollbar-width: thin;
    }


    .sidebar nav a {
        display: inline-flex !important;

        flex: 0 0 auto !important;

        align-items: center;
        justify-content: center;

        width: auto !important;

        margin: 0 !important;

        padding: 10px 13px !important;

        border-radius: 9px !important;

        font-size: 13px !important;

        text-decoration: none;
    }


    /* ======================================
       ÜST BAŞLIK
       ====================================== */

    .dashboard-header {
        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;

        gap: 12px !important;

        width: 100% !important;
    }


    .dashboard-header h1 {
        font-size: 25px !important;
    }


    .dashboard-header p {
        font-size: 14px !important;
    }


    .dashboard-header button {
        width: 100% !important;
    }


    /* ======================================
       KARTLAR
       ====================================== */

    .dashboard-cards,
    .stat-grid,
    .summary-grid,
    .ozet-kartlari,
    .rapor-ozet-kartlari,
    .saglik-kartlari,
    .ayar-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr))
            !important;

        width: 100% !important;
    }


    /* ======================================
       FORM ELEMANLARI
       ====================================== */

    input,
    select,
    textarea,
    button {
        max-width: 100%;

        box-sizing: border-box;
    }


    form {
        max-width: 100% !important;
    }


    /* ======================================
       TABLOLAR
       ====================================== */

    table {
        white-space: nowrap;
    }


    .table-container,
    .table-responsive,
    .rapor-tablosu-responsive,
    .saglik-tablo-responsive {
        width: 100% !important;

        overflow-x: auto !important;

        -webkit-overflow-scrolling: touch;
    }


    /* Tabloyu taşıyan kart taşmasın */
    .rapor-tablo-panel,
    .saglik-tablo-panel {
        max-width: 100% !important;

        overflow: hidden;
    }


    /* ======================================
       HARİTA
       ====================================== */

    #map,
    #harita {
        width: 100% !important;

        min-height: 450px !important;
    }


    /* ======================================
       RAPORLAR
       ====================================== */

    .rapor-filtre-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr))
            !important;
    }


    .rapor-grid {
        grid-template-columns:
            1fr !important;
    }


    /* ======================================
       SAĞLIK
       ====================================== */

    .saglik-filtreler {
        grid-template-columns:
            1fr !important;
    }


    .saglik-form-grid {
        grid-template-columns:
            1fr !important;
    }


    .saglik-tam {
        grid-column: auto !important;
    }


    /* ======================================
       BİLDİRİM KUTUSU
       ====================================== */

    #akilliCobanBildirimPanel {
        right: 8px !important;

        bottom: 8px !important;

        width: 155px !important;
    }

}



/* ==========================================
   TELEFON
   ========================================== */

@media (max-width: 600px) {

    .dashboard-main {
        padding: 10px !important;
    }


    .sidebar {
        padding: 8px !important;
    }


    .sidebar-logo {
        font-size: 19px !important;
    }


    .sidebar nav a {
        padding: 8px 10px !important;

        font-size: 12px !important;
    }


    .dashboard-header h1 {
        font-size: 21px !important;
    }


    /* Kartlar tek sütun */
    .dashboard-cards,
    .stat-grid,
    .summary-grid,
    .ozet-kartlari,
    .rapor-ozet-kartlari,
    .saglik-kartlari,
    .ayar-grid {
        grid-template-columns:
            1fr !important;
    }


    /* Rapor filtreleri tek sütun */
    .rapor-filtre-grid {
        grid-template-columns:
            1fr !important;
    }


    /* Büyük kartlar */
    .card,
    .panel,
    .ayar-kart,
    .rapor-panel,
    .rapor-tablo-panel,
    .saglik-tablo-panel,
    .saglik-form-panel {
        width: 100% !important;

        max-width: 100% !important;

        box-sizing: border-box;

        padding: 15px !important;
    }


    /* Başlık butonları */
    .yeni-hayvan-btn,
    .rapor-btn,
    .saglik-kaydet {
        width: 100% !important;
    }


    /* Harita telefon ekranı */
    #map,
    #harita {
        min-height: 380px !important;
    }


    /* Bildirim kutusu daha küçük */
    #akilliCobanBildirimPanel {
        width: 140px !important;

        right: 6px !important;

        bottom: 6px !important;
    }

}



/* ==========================================
   ÇOK KÜÇÜK TELEFONLAR
   ========================================== */

@media (max-width: 400px) {

    .dashboard-main {
        padding: 7px !important;
    }


    .dashboard-header h1 {
        font-size: 19px !important;
    }


    .sidebar nav a {
        font-size: 11px !important;

        padding: 7px 9px !important;
    }


    #akilliCobanBildirimPanel {
        width: 125px !important;
    }

}