/* ==========================================================================
   1. GLOBAL THEME DNA
   ========================================================================== */
html[data-theme="light"] {
    --bg: #edf0f5; --bg2: #f8fafd; --text: #4a5568; --heading: #0b0e14;
    --muted: #8a94a8; --border: rgba(0,0,0,0.1); --surface2: #ffffff;
}
html[data-theme="dark"] {
    --bg: #0c0e12; --bg2: #161b24; --text: #8a94a8; --heading: #e8ecf4;
    --muted: #4a5568; --border: rgba(255,255,255,0.1); --surface2: #1c222d;
}

body, html { overflow-x: hidden; width: 100%; margin: 0; }
body, .jpr-section { background-color: var(--bg) !important; transition: background-color 0.3s ease; }

/* ==========================================================================
   2. COLORFUL STATUS BADGES (The "Actual Badge" Look)
   ========================================================================== */
body .pf-media .status-badge {
    position: absolute !important;
    top: 25px !important; 
    right: 15px !important;
    z-index: 100 !important;
    padding: 5px 12px !important;
    border-radius: 20px !important; 
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    border: 2px solid rgba(255,255,255,0.3) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}

body .status-live     { background-color: #2ecc71 !important; } 
body .status-draft    { background-color: #e67e22 !important; } 
body .status-concept  { background-color: #3498db !important; } 
body .status-updates  { background-color: #9b59b6 !important; } 
body .status-headline { background-color: #1abc9c !important; }

/* ==========================================================================
   3. GRID & TABS (Cleaned Up)
   ========================================================================== */
.jpr-portfolio-tabs { border: 1px solid var(--border); width: fit-content; background: var(--surface2); margin-bottom: 2rem; padding: 0; display: flex; flex-wrap: wrap; }
.jpr-portfolio-tabs .nav-link { background: transparent; color: var(--muted); border: none; border-radius: 0; border-left: 1px solid var(--border); padding: 12px 20px; font-size: 10px; font-weight: 700; text-transform: uppercase; cursor: pointer; }
.jpr-portfolio-tabs .nav-link.active { background: #0099e6 !important; color: #ffffff !important; }

.pf-card-wrapper { background: var(--surface2); border: 1px solid var(--border); padding: 10px; border-radius: 8px; height: 100%; display: flex; flex-direction: column; }
.pf-media { position: relative !important; display: block !important; margin-bottom: 15px; border-radius: 4px; overflow: hidden; height: 180px; }
.pf-img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

.pf-title a { color: var(--heading) !important; font-weight: 700; text-decoration: none; font-size: 16px; margin-top: 5px; }
.pf-meta a { color: var(--text) !important; font-size: 12px; text-decoration: none; opacity: 0.8; }

.tab-pane .row { display: flex !important; flex-wrap: wrap !important; width: 100% !important; }