/* ==========================================================================
   1. TAB NAVIGATION & GENERAL LAYOUT
   ========================================================================== */

/* Tab Navigation Styling */
.rcg-tab-nav {
    display: flex;
    gap: 5px;
    margin-bottom: 15px;
    border-bottom: 2px solid #ccc;
}

.rcg-tab-btn {
    padding: 8px 16px;
    background: #e5e5e5;
    border: none;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    font-weight: bold;
    color: #444;
}

.rcg-tab-btn.active {
    background: #0073aa;
    color: #fff;
}

/* Tab Content Switch */
.rcg-tab-content {
    display: none !important;
}

.rcg-tab-content.active {
    display: block !important;
}

/* Search Container & Form */
.rcg-search-container {
    max-width: 700px;
    margin: 20px auto;
    text-align: center;
}

#rcg-search-form input {
    padding: 10px;
    width: 60%;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#rcg-search-form button, .rcg-print-btn {
    padding: 10px 20px;
    background: #0073aa;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.rcg-actions {
    margin-top: 20px;
}


/* ==========================================================================
   2. CARD BASE STRUCTURE (FRONT & BACK SIDE)
   ========================================================================== */

.rcg-cards-wrapper {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.rcg-card {
    position: relative;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* Front/Back Tag Indicator */
.side-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 8px;
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 10;
    text-transform: uppercase;
    font-weight: bold;
}

/* Base ID Card Sizing */
.rcg-id-card {
    width: 270px;
    min-height: 390px;
    border: 1px solid #ddd;
    text-align: center;
    padding-bottom: 10px;
}

.rcg-card-header {
    padding: 10px 8px;
    background: #2c3e50;
    color: #fff;
}

.rcg-card-header h2 {
    margin: 0;
    font-size: 15px;
    color: #fff;
    text-transform: uppercase;
}

.rcg-card-header span {
    font-size: 10px;
    letter-spacing: 1px;
    opacity: 0.9;
}

.rcg-photo {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    object-fit: cover;
    margin: 12px auto 6px;
    display: block;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.rcg-id-card h3 {
    margin: 5px 0 2px;
    font-size: 16px;
    line-height: 1.2;
}

.rcg-id-card p.designation {
    margin: 0 0 10px;
    color: #666;
    font-size: 12px;
}

.rcg-info {
    padding: 0 15px;
}

.rcg-info p {
    margin: 4px 0;
    font-size: 12px;
    text-align: left;
}

.rcg-qr {
    width: 65px;
    height: 65px;
    margin-top: 8px;
}

/* Base Visiting Card Sizing */
.rcg-visiting-card {
    width: 330px;
    height: 185px;
    border: 1px solid #ddd;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rcg-vc-content {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 12px;
}

.rcg-vc-thumb {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ddd;
}

.rcg-vc-content h3 {
    margin: 0;
    font-size: 15px;
}

.rcg-vc-content p {
    margin: 3px 0;
    font-size: 11px;
}

.rcg-vc-qr {
    text-align: center;
}

/* Status Colors */
.status-active { color: #27ae60; font-weight: bold; }
.status-expired { color: #e74c3c; font-weight: bold; }
.status-suspended { color: #e67e22; font-weight: bold; }


/* ==========================================================================
   3. 10 PROFESSIONAL DESIGN TEMPLATES
   ========================================================================== */

/* Design 1 - Red Corporate */
.tpl-1 .rcg-card-header { background: #c0392b; }
.tpl-1 .rcg-photo { border: 2px solid #c0392b; }
.tpl-1 .rcg-id-card { border-top: 4px solid #c0392b; }

/* Design 2 - Modern Blue */
.tpl-2 .rcg-card-header { background: #2980b9; }
.tpl-2 .rcg-photo { border: 2px solid #2980b9; }
.tpl-2 .rcg-card { background: #f4f9fc; border-top: 4px solid #2980b9; }

/* Design 3 - Elegant Dark */
.tpl-3 .rcg-card { background: #1f2a38; color: #ecf0f1; border: 1px solid #34495e; }
.tpl-3 .rcg-card-header { background: #111a24; }
.tpl-3 .rcg-card-header h2 { color: #f1c40f; }
.tpl-3 h3, .tpl-3 p { color: #ecf0f1; }
.tpl-3 .rcg-id-card p.designation { color: #bdc3c7; }

/* Design 4 - Emerald Green */
.tpl-4 .rcg-card-header { background: #27ae60; }
.tpl-4 .rcg-photo { border: 2px solid #27ae60; }
.tpl-4 .rcg-card { border-left: 5px solid #27ae60; }

/* Design 5 - Gold Premium */
.tpl-5 .rcg-card { background: #fffdf5; border: 2px solid #d4af37; }
.tpl-5 .rcg-card-header { background: #d4af37; }
.tpl-5 .rcg-card-header h2 { color: #111; }
.tpl-5 .rcg-photo { border: 2px solid #d4af37; }

/* Design 6 - Minimal Purple */
.tpl-6 .rcg-card-header { background: #8e44ad; }
.tpl-6 .rcg-photo { border: 2px solid #8e44ad; }
.tpl-6 .rcg-card { border-bottom: 4px solid #8e44ad; }

/* Design 7 - Orange Dynamic */
.tpl-7 .rcg-card-header { background: #d35400; }
.tpl-7 .rcg-photo { border: 2px solid #d35400; }
.tpl-7 .rcg-card { border-top: 5px solid #d35400; }

/* Design 8 - Cyan Tech */
.tpl-8 .rcg-card-header { background: #16a085; }
.tpl-8 .rcg-photo { border: 2px solid #16a085; }
.tpl-8 .rcg-card { background: #e8f8f5; }

/* Design 9 - Crimson News */
.tpl-9 .rcg-card-header { background: #800000; }
.tpl-9 .rcg-photo { border: 2px solid #800000; }
.tpl-9 .rcg-card { border: 2px solid #800000; }

/* Design 10 - Charcoal Monochromatic */
.tpl-10 .rcg-card { background: #f8f9fa; border: 2px solid #333; }
.tpl-10 .rcg-card-header { background: #333; }
.tpl-10 .rcg-photo { border: 2px solid #333; }


/* ==========================================================================
   4. OPTIMIZED PRINT MEDIA STYLES
   ========================================================================== */

@media print {
    body * {
        visibility: hidden !important;
    }

    #adminmenumain, #wpadminbar, #wpfooter, .postbox-header, 
    .submitbox, #minor-publishing, #major-publishing-actions, 
    .rcg-search-container form, .form-table, h1, h3, .button, #screen-meta-links,
    .rcg-actions, .rcg-tab-nav, .side-badge {
        display: none !important;
    }

    body {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Print Active Tab Content Only */
    .rcg-tab-content.active,
    .rcg-tab-content.active .printable-target, 
    .rcg-tab-content.active .printable-target * {
        visibility: visible !important;
    }

    .rcg-tab-content.active .printable-target {
        display: flex !important;
        justify-content: center !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 20px 0 !important;
        gap: 15px !important;
    }

    .rcg-card {
        page-break-inside: avoid;
        box-shadow: none !important;
    }
}


/* News Portal Logo Styles in Cards */
.rcg-portal-logo {
    max-width: 110px;
    max-height: 40px;
    object-fit: contain;
    display: block;
    margin: 0 auto 5px auto;
}

/* Visiting Card Logo Style */
.rcg-visiting-card .rcg-portal-logo {
    margin: 0 0 8px 0;
    max-width: 90px;
    max-height: 30px;
}