/* -------------------------
   Frontend: card styles (original colors preserved)
   ------------------------- */
.lsp-cards-wrapper{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-items:start}
.lsp-row{display:contents}
.lsp-card{background:#fff;border:1px solid #e6e6e6;border-radius:10px;padding:12px;display:flex;align-items:center;gap:12px;box-shadow:0 1px 4px rgba(0,0,0,0.04)}
.lsp-card-icon{font-size:28px;width:44px;text-align:center}
.lsp-card-body{flex:1}
.lsp-card-title{font-size:13px;color:#0073aa;margin-bottom:6px;font-weight:600}
.lsp-card-value{font-size:20px;font-weight:700;color:#111}
.lsp-total-card{border-left:6px solid #009245}

/* -------------------------
   Admin styles
   ------------------------- */
.lsp-admin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:900px){ .lsp-admin-grid{grid-template-columns:1fr} }

.lsp-admin-card{
    padding:12px;
    border:1px solid #ddd;
    min-width:220px;
    background:#fff;
    border-radius:6px;
}
.lsp-admin-card.positive{background:#e6ffed}
.lsp-admin-card .lsp-admin-title{font-size:13px;margin-bottom:6px}
.lsp-admin-card .lsp-admin-value{font-size:20px;font-weight:700}

/* Table tweaks */
.lsp-logs-table th, .lsp-logs-table td{padding:8px;border-bottom:1px solid #eee}
.lsp-logs-table tbody tr:nth-child(even){background:#fafafa}

/* Settings */
#lsp_shortcode_box{width:320px;padding:8px;border:1px solid #ddd}
#lsp_copy_shortcode{margin-left:8px}

/* Tools forms */
.lsp-tools-actions{display:flex;gap:8px;align-items:center;margin-bottom:12px}

/* Misc */
.lsp-wrap{padding:8px}

/* -------------------------
   Mobile Fix: Keep 2 cards per row
------------------------- */
@media (max-width: 760px) {
    .lsp-cards-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
        display: grid !important;
        gap: 14px !important;
    }
}

/* ============================================================
   FIX TOP PAGES (All Time)
   Proper responsive styles for summary + URL list
   ============================================================ */

/* LOWER the inherited bold weight from .lsp-card-value */
.lsp-card-value {
    font-size: 16px !important;
    font-weight: 500 !important;
}

/* Make the summary text neat */
.lsp-card-value summary {
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

/* STYLE THE LIST */
.lsp-card-value ul {
    margin: 8px 0 0 16px !important;
    padding: 0 !important;
    list-style-type: disc;
    font-size: 14px;
    font-weight: 500;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.35;
}

/* STYLE LIST ITEMS */
.lsp-card-value ul li {
    margin-bottom: 6px;
    white-space: normal;
    word-break: break-word;
}

/* --------------------------------------------------
   MOBILE FIXES
-------------------------------------------------- */
@media (max-width: 600px) {

    /* Make summary smaller on mobile */
    .lsp-card-value summary {
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    /* Make URL list smaller */
    .lsp-card-value ul {
        font-size: 13px !important;
        margin-left: 12px !important;
        line-height: 1.3 !important;
    }

    /* Make each page entry cleaner */
    .lsp-card-value ul li {
        font-size: 13px !important;
        margin-bottom: 5px !important;
        word-break: break-word !important;
        white-space: normal !important;
    }

    /* Prevent any overflow on mobile */
    .lsp-card {
        overflow-x: hidden !important;
    }
}


.lsp-countries-table th,
.lsp-countries-table td {
    white-space: nowrap !important;
}

.lsp-countries-table {
    min-width: 100%;
}


/* ============================================
   LSP Countries Frontend — Force Header Top
   ============================================ */

/* Force card content to flow vertically */
.lsp-card {
    display: block !important;
}

/* Header must stay at the top */
.lsp-header {
    position: static !important;
    width: 100% !important;
    clear: both !important;
    float: none !important;
    display: block !important;
    text-align: left !important;
    margin-bottom: 20px;
}

/* Ensure table never sits beside header */
.lsp-table-wrap {
    width: 100%;
    clear: both;
}


/* ============================================
   LSP Countries Frontend — Header polish
   ============================================ */

/* Center title only */
.lsp-header h2 {
    width: 100%;
    text-align: center;
    margin-bottom: 8px;
}



/* ============================================
   FORCE LSP SEARCH WIDTH (Override OceanWP)
   ============================================ */

/* Desktop only */
@media (min-width: 992px) {

    /* Beat OceanWP input rule */
    .lsp-card input.lsp-search[type="text"] {
        width: 60% !important;
        min-width: 0 !important;
        max-width: none !important;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ================================
   Monthly Summary (Frontend)
   Compact + Mobile Friendly
================================ */

.lsp-monthly-wrapper {
    width: 100%;
    margin: 16px 0;
}

.lsp-monthly-scroll {
    overflow-x: auto;
    width: 100%;
}

/* tighter table */
.lsp-monthly-table {
    width: 100%;
    min-width: 520px; /* MUCH smaller than before */
    border-collapse: collapse;
    background: #fff;
    font-size: 14px;
}

/* tighter cells */
.lsp-monthly-table th,
.lsp-monthly-table td {
    padding: 6px 8px;   /* 🔥 reduced spacing */
    border-bottom: 1px solid #e5e5e5;
    text-align: center;
    white-space: nowrap;
}

/* headers */
.lsp-monthly-table th {
    background: #f3f4f6;
    font-weight: 600;
    font-size: 13px;
}

/* live row */
.lsp-monthly-live {
    background: #f9fdf9;
    font-weight: 600;
}

/* empty row */
.lsp-monthly-empty {
    text-align: center;
    color: #777;
    padding: 12px;
}

/* Mobile fine-tuning */
@media (max-width: 480px) {
    .lsp-monthly-table {
        min-width: 460px;
        font-size: 13px;
    }

    .lsp-monthly-table th,
    .lsp-monthly-table td {
        padding: 5px 6px;
    }
}



.lsp-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}

.lsp-page-btn {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    background: #fff;
    font-size: 14px;
}

.lsp-page-btn:hover {
    background: #f0f0f0;
}

.lsp-page-btn.active {
    background: #0073aa;
    color: #fff;
    border-color: #0073aa;
}