/* ============================================================
 * ControlPanel.lol — Mobile Responsive (24 Nis 2026)
 * ============================================================ */

/* Hamburger button — varsayılan gizli, mobilde görünür */
.cp-hamburger {
    display: none;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 9999;
    background: rgba(30,30,40,0.95);
    color: #fff;
    border: 1px solid rgba(120,120,140,0.3);
    border-radius: 8px;
    width: 42px;
    height: 42px;
    font-size: 20px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}

/* =========== TABLET (<=960px) =========== */
@media (max-width: 960px) {
    .sidebar { width: 60px !important; }
    .sidebar .logo-text, .sidebar .nav-icon + span,
    .sidebar-footer > span { display: none !important; }
    .main, main, .content { margin-left: 60px !important; padding: 14px !important; }
    .stats, .stat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
    .domain-list, .domain-grid { grid-template-columns: 1fr !important; }
}

/* =========== MOBILE (<=640px) =========== */
@media (max-width: 640px) {
    html, body { overflow-x: hidden; }

    .cp-hamburger { display: inline-flex !important; }

    /* --- SIDEBAR: off-canvas --- */
    .sidebar {
        position: fixed !important;
        left: -100% !important;
        top: 0 !important;
        width: 270px !important;
        height: 100vh !important;
        z-index: 9998 !important;
        transition: left 0.28s ease;
        box-shadow: 2px 0 16px rgba(0,0,0,0.5);
    }
    body.sidebar-open .sidebar { left: 0 !important; }
    .sidebar .logo-text, .sidebar .nav-icon + span,
    .sidebar-footer > span { display: inline !important; }

    /* Sidebar overlay */
    body.sidebar-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.55);
        z-index: 9997;
    }

    /* --- MAIN CONTENT --- */
    .main, main, .content {
        margin-left: 0 !important;
        padding: 60px 10px 16px !important;
        max-width: 100% !important;
    }
    .header, .page-header {
        flex-wrap: wrap;
        padding: 8px 0 !important;
        gap: 8px;
    }
    .logo, .logo-text { font-size: 16px !important; }
    .header-right { flex-wrap: wrap; gap: 6px; }

    /* --- STAT KARTLARI: 2 sütun --- */
    .stats, .stat-grid, .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .stat-card { padding: 12px !important; }
    .stat-card .value, .metric-value { font-size: 20px !important; }
    .stat-card .label, .metric-label { font-size: 11px !important; }
    .today-badge { font-size: 10px !important; padding: 2px 6px !important; }

    /* --- DOMAIN CARD GRID → tek sütun --- */
    .domain-list, .domain-grid, .card-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .domain-card, .access-item, .card {
        padding: 12px !important;
        font-size: 14px !important;
    }
    .domain-name { word-break: break-all; font-size: 15px !important; }
    .meta, .cred, .info { font-size: 12px !important; }

    /* --- TABS: yatay scroll --- */
    .tabs, .tab-nav, .status-section-title {
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        display: flex;
        gap: 4px;
        padding: 6px 4px !important;
        -webkit-overflow-scrolling: touch;
    }
    .tab { flex: 0 0 auto; padding: 8px 12px !important; font-size: 13px !important; min-height: 38px; }

    /* --- BUTONLAR: touch-friendly --- */
    .btn, button, a.btn,
    .btn-sm, .btn-check, .btn-delete, .btn-postjet, .btn-pushlink,
    .btn-seo, .btn-trash, .btn-used {
        min-height: 38px;
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    .btn-sm { min-height: 30px; padding: 4px 10px !important; font-size: 12px !important; }

    /* --- BULK BAR: alt kenara sabit --- */
    .bulk-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 10px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        z-index: 1000;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.4);
    }
    .bulk-bar .btn { flex: 1 1 auto; min-width: 100px; }

    /* --- DETAIL PANEL: tam ekran modal --- */
    .detail-panel, .modal, .overlay {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        padding: 14px 12px !important;
    }
    .detail-panel .close { min-width: 40px; min-height: 40px; }

    /* --- SEO GRID --- */
    .seo-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px; }
    .seo-metric { padding: 8px !important; font-size: 12px !important; }
    .seo-badges { flex-wrap: wrap; gap: 4px; }
    .seo-badge { font-size: 10px !important; padding: 2px 5px !important; }

    /* --- SEARCH / FILTER --- */
    .search-bar {
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 8px !important;
    }
    .search-bar input, .search-bar select {
        font-size: 16px !important; /* iOS autozoom önler */
        padding: 8px 10px !important;
        min-height: 38px;
        width: 100% !important;
    }

    /* --- TABLOLAR: yatay scroll wrapper --- */
    table { min-width: 500px; font-size: 12px; }
    .table-wrap, .scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* --- FORM alanları --- */
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="url"], textarea, select {
        font-size: 16px !important;
        min-height: 38px;
        width: 100% !important;
        box-sizing: border-box;
    }
    label { font-size: 12px !important; }

    /* --- PAGINATION --- */
    .pagination { flex-wrap: wrap; justify-content: center; gap: 4px; font-size: 13px; }
    .pagination a, .pagination span { min-width: 36px; min-height: 36px; }

    /* --- BADGES/LABELS --- */
    .badge, .label { font-size: 10px !important; padding: 2px 5px !important; }
}

/* =========== SMALL MOBILE (<=380px) =========== */
@media (max-width: 380px) {
    .stats, .stat-grid, .stats-grid { grid-template-columns: 1fr !important; }
    .seo-grid { grid-template-columns: 1fr !important; }
    .sidebar { width: 85vw !important; }
    .main, main, .content { padding: 54px 6px 12px !important; }
    .bulk-bar .btn { flex: 1 1 100%; }
}

/* =========== COARSE POINTER (touch) =========== */
@media (pointer: coarse) {
    .card:hover, .btn:hover, .tab:hover, .domain-card:hover { transform: none !important; }
}