/* =====================================================
   WMiNET MOBILE FINAL OVERRIDE
   Fokus: mobile rapi, card normal, tabel tetap tabel
   ===================================================== */

@media (max-width: 768px) {

    html,
    body {
        width: 100%;
        overflow-x: hidden;
        background:
            radial-gradient(circle at top left, rgba(239,68,68,.16), transparent 28%),
            linear-gradient(135deg, #07111f 0%, #0b1728 55%, #08111f 100%) !important;
        color: #f8fafc !important;
    }

    body {
        font-size: 13px !important;
    }

    .content,
    .container,
    .main-content,
    main {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 14px !important;
        box-sizing: border-box !important;
    }

    /* Header/topbar */
    .topbar,
    .navbar,
    header {
        background: rgba(5, 10, 20, .94) !important;
        border-bottom: 1px solid rgba(148,163,184,.20) !important;
        backdrop-filter: blur(18px) !important;
    }

    /* Dashboard statistic cards */
    .stats,
    .cards,
    .summary-cards,
    .dashboard-cards {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
    }

    .stat-card,
    .card,
    .summary-card {
        min-height: auto !important;
        padding: 14px !important;
        border-radius: 20px !important;
        background: rgba(15, 23, 42, .82) !important;
        border: 1px solid rgba(148,163,184,.22) !important;
        box-shadow: 0 14px 34px rgba(0,0,0,.26) !important;
        color: #f8fafc !important;
    }

    .stat-card h3,
    .card h3,
    .summary-card h3 {
        color: #cbd5e1 !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
        margin: 0 0 8px 0 !important;
        text-transform: uppercase !important;
        letter-spacing: .4px !important;
    }

    .stat-card .number,
    .stat-card strong,
    .card .number,
    .summary-card .number {
        color: #ffffff !important;
        font-size: 26px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
    }

    /* Quick action */
    .quick-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 14px 0 !important;
    }

    .qa-card {
        padding: 14px !important;
        border-radius: 18px !important;
        background: rgba(15, 23, 42, .84) !important;
        border: 1px solid rgba(148,163,184,.22) !important;
        color: #ffffff !important;
        min-height: 86px !important;
    }

    .qa-card b,
    .qa-card strong {
        color: #ffffff !important;
        font-size: 13px !important;
    }

    .qa-card small,
    .qa-card span,
    .qa-card p {
        color: #cbd5e1 !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    /* Panel umum */
    .panel,
    .box,
    .section-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 16px 0 !important;
        padding: 16px !important;
        border-radius: 22px !important;
        background: rgba(15, 23, 42, .84) !important;
        border: 1px solid rgba(148,163,184,.22) !important;
        box-shadow: 0 18px 42px rgba(0,0,0,.28) !important;
        color: #f8fafc !important;
        box-sizing: border-box !important;
    }

    .panel h1,
    .panel h2,
    .panel h3 {
        color: #ffffff !important;
        margin-top: 0 !important;
    }

    .panel p,
    .panel small {
        color: #cbd5e1 !important;
    }

    /* Technician + Wall of Fame card */
    .ops-widgets {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin: 14px 0 !important;
    }

    .ops-card {
        padding: 16px !important;
        border-radius: 22px !important;
        background: rgba(15, 23, 42, .86) !important;
        border: 1px solid rgba(148,163,184,.22) !important;
        color: #f8fafc !important;
        box-shadow: 0 18px 42px rgba(0,0,0,.26) !important;
    }

    .ops-head h3 {
        color: #ffffff !important;
        font-size: 16px !important;
        margin-bottom: 4px !important;
    }

    .ops-head p {
        color: #cbd5e1 !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    .tech-row,
    .rank-row {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 16px !important;
        background: rgba(255,255,255,.055) !important;
        border: 1px solid rgba(148,163,184,.16) !important;
        margin-bottom: 8px !important;
        color: #ffffff !important;
    }

    .tech-info,
    .rank-info {
        min-width: 0 !important;
        flex: 1 !important;
    }

    .tech-info b,
    .rank-info b {
        color: #ffffff !important;
        display: block !important;
        font-size: 13px !important;
        white-space: normal !important;
    }

    .tech-info small,
    .rank-info small {
        color: #cbd5e1 !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        word-break: normal !important;
    }

    .tech-avatar,
    .rank-number {
        flex: 0 0 auto !important;
    }

    .tech-state,
    .rank-score {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    /* TABEL: tetap model tabel, bukan card */
    .panel {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .panel::after {
        content: none !important;
        display: none !important;
    }

    table,
    .panel table {
        display: table !important;
        width: 100% !important;
        min-width: 920px !important;
        table-layout: auto !important;
        border-collapse: collapse !important;
        border-spacing: 0 !important;
        background: transparent !important;
    }

    thead,
    .panel thead {
        display: table-header-group !important;
    }

    tbody,
    .panel tbody {
        display: table-row-group !important;
    }

    tr,
    thead tr,
    tbody tr,
    .panel tr {
        display: table-row !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    th,
    td,
    thead th,
    tbody td,
    .panel th,
    .panel td {
        display: table-cell !important;
        width: auto !important;
        max-width: none !important;
        padding: 12px 13px !important;
        border-radius: 0 !important;
        text-align: left !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        box-shadow: none !important;
    }

    td::before,
    tbody td::before,
    .panel td::before {
        content: none !important;
        display: none !important;
    }

    thead th,
    .panel thead th {
        background: rgba(30, 41, 59, .96) !important;
        color: #ffffff !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        border-bottom: 1px solid rgba(148,163,184,.30) !important;
    }

    tbody td,
    .panel tbody td {
        background: transparent !important;
        color: #e5edf9 !important;
        font-size: 12px !important;
        border-bottom: 1px solid rgba(148,163,184,.16) !important;
    }

    tbody tr:nth-child(even) td,
    .panel tbody tr:nth-child(even) td {
        background: rgba(255,255,255,.035) !important;
    }

    tbody tr:hover td,
    .panel tbody tr:hover td {
        background: rgba(255,255,255,.07) !important;
        color: #ffffff !important;
    }

    tbody td a,
    .panel tbody td a {
        color: #93c5fd !important;
        font-weight: 850 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    tbody td[data-label="Client / Lokasi"],
    tbody td[data-label="Client/ODP"],
    tbody td[data-label="Lokasi"],
    tbody td[data-label="Deskripsi"],
    tbody td[data-label="Kendala"] {
        white-space: normal !important;
        min-width: 230px !important;
        line-height: 1.4 !important;
    }

    tbody td[data-label="Aksi"] {
        white-space: nowrap !important;
        min-width: 240px !important;
    }

    td form {
        display: inline-flex !important;
        margin: 2px 3px 2px 0 !important;
    }

    td .btn,
    td button,
    td input[type="submit"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        margin: 2px 3px 2px 0 !important;
        padding: 7px 10px !important;
        min-height: 32px !important;
        border-radius: 12px !important;
        font-size: 11px !important;
    }

    input,
    select,
    textarea {
        background: rgba(15, 23, 42, .92) !important;
        color: #f8fafc !important;
        border: 1px solid rgba(148,163,184,.30) !important;
    }

    input::placeholder,
    textarea::placeholder {
        color: #94a3b8 !important;
    }
}

@media (max-width: 420px) {
    .stats,
    .cards,
    .summary-cards,
    .dashboard-cards,
    .quick-actions {
        grid-template-columns: 1fr 1fr !important;
        gap: 9px !important;
    }

    .stat-card,
    .card,
    .summary-card,
    .qa-card {
        padding: 12px !important;
        border-radius: 18px !important;
    }

    table,
    .panel table {
        min-width: 880px !important;
    }

    th,
    td,
    thead th,
    tbody td,
    .panel th,
    .panel td {
        padding: 11px 10px !important;
        font-size: 11.5px !important;
    }
}