/* Responsive Cards CSS - Modern, sophisticated display of table-to-card conversions */

/* Enhanced responsive table-to-card styling */
@media (max-width: 768px) {
    /* Neutralize conflicting global table rules (from subscribers dark theme) */
    .table-card,
    .table-card thead,
    .table-card tbody,
    .table-card tr,
    .table-card td,
    .table-card th {
        max-width: none !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        table-layout: auto !important;
    }
    /* Ensure responsive tables/cards use full width */
    .table-responsive,
    .table-card {
        width: 100%;
    }
    .table-card tr { width: 100%; }

    /* Card container styling */
    .table-responsive, 
    .table-card { 
        overflow-x: visible; 
        padding: 0;
    }
    
    /* Modern card design */
    .table-card tr {
        display: flex;
        flex-direction: column;
        background-color: #2a2a2a;
        border-radius: 12px;
        margin-bottom: 16px;
        padding: 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(212, 175, 55, 0.1);
        overflow: hidden;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        position: relative;
    }
    
    .table-card tr:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(212, 175, 55, 0.15);
    }
    
    /* Card header - special styling for first cell */
    .table-card td:first-child {
        background-color: rgba(212, 175, 55, 0.05);
        border-bottom: 1px solid rgba(212, 175, 55, 0.1) !important;
        padding: 14px 16px;
        display: flex;
        align-items: center;
        min-height: 56px;
    }
    
    /* Card body cells */
    .table-card td {
        /* Switch to grid so label (before) and value layout side-by-side */
        display: grid;
        grid-template-columns: 30% 1fr; /* more room for value */
        column-gap: 12px;
        align-items: center;
        padding: 14px 16px;
        min-height: 56px;
        position: relative;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        width: 100%;
        min-width: 0; /* allow content to shrink within grid */
    }
    
    .table-card td:last-child {
        border-bottom: none !important;
        padding-bottom: 20px;
    }

    /* Reset column width constraints from .table-dark-custom on mobile cards */
    .table-card.table-dark-custom td,
    .table-card.table-dark-custom th {
        width: auto !important;
        max-width: none !important;
    }
    .table-card.table-dark-custom td:first-child,
    .table-card.table-dark-custom th:first-child,
    .table-card.table-dark-custom td:nth-child(2),
    .table-card.table-dark-custom th:nth-child(2),
    .table-card.table-dark-custom td:nth-child(3),
    .table-card.table-dark-custom th:nth-child(3),
    .table-card.table-dark-custom td:nth-child(4),
    .table-card.table-dark-custom th:nth-child(4),
    .table-card.table-dark-custom td:nth-child(5),
    .table-card.table-dark-custom th:nth-child(5) {
        width: auto !important;
    }
    
    /* Elegant label styling */
    .table-card td::before {
        content: attr(data-label);
        position: static; /* no absolute, participates in grid */
        grid-column: 1;
        align-self: center;
        justify-self: start;
        width: auto;
        font-weight: 500;
        color: rgba(212, 175, 55, 0.9);
        text-align: left;
        padding-right: 12px;
        font-size: 0.85rem;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }
    
    /* Special styling for email/name fields */
    .table-card td[data-label="Email"],
    .table-card td[data-label="Name"],
    .table-card td[data-label="Contact"] {
        font-weight: 600;
        font-size: 1.05rem;
    }
    
    /* Status badges styling */
    .table-card td .badge {
        display: inline-block;
        padding: 6px 10px;
        border-radius: 20px;
        font-weight: 500;
        font-size: 0.8rem;
        letter-spacing: 0.3px;
        text-transform: capitalize;
    }
    
    /* Action buttons area */
    .table-card td .action-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: flex-start;
        width: 100%;
    }
    
    /* Button styling */
    .table-card td .action-buttons .btn {
        margin: 0;
        flex: 0 0 auto;
        border-radius: 8px;
        padding: 8px 12px;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .table-card td .action-buttons .btn i {
        font-size: 0.9rem;
    }
    
    .table-card td .action-buttons .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    
    /* Checkbox styling */
    .table-card td .form-check {
        padding-left: 0;
        margin: 0;
    }
    
    .table-card td .form-check-input {
        width: 20px;
        height: 20px;
        cursor: pointer;
        border-color: rgba(212, 175, 55, 0.4);
    }
    
    /* Date fields styling */
    .table-card td[data-label*="Date"] {
        color: #aaa;
        font-size: 0.9rem;
    }
    
    /* Image styling */
    .table-card td img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    /* Lists styling within cards */
    .table-card td ul {
        margin: 0;
        padding-left: 18px;
    }
    
    .table-card td ul li {
        margin-bottom: 4px;
    }
    
    /* Ensure content spans the value column fully */
    .table-card td > * {
        grid-column: 2;
        width: 100%;
        text-align: left;
        min-width: 0; /* allow natural wrap */
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Actions row: let buttons use full width and hide label */
    .table-card td[data-label="Actions"] {
        grid-template-columns: 1fr;
    }
    .table-card td[data-label="Actions"]::before { display: none; }
}

/* Extra-small devices: stack label above value to avoid squish */
@media (max-width: 480px) {
    .table-card td {
        grid-template-columns: 1fr;
        align-items: start;
    }
    .table-card td::before {
        display: block;
        margin-bottom: 4px;
        opacity: 0.9;
    }
    .table-card td > * {
        grid-column: 1;
    }
}

/* Specific improvements for subscribers list */
@media (max-width: 768px) {
    /* Subscriber cards */
    .subscribers-table.table-card tr,
    #newsletter .table-card tr,
    #roundtable .table-card tr,
    #ai-readiness .table-card tr {
        border-left: 3px solid rgba(212, 175, 55, 0.5);
    }
    
    /* Email field styling */
    .subscribers-table.table-card .subscriber-email,
    #newsletter .table-card .subscriber-email {
        word-break: break-word;
        font-weight: 600;
    }
    
    /* Status badge styling */
    .subscribers-table.table-card .subscriber-status,
    #newsletter .table-card .subscriber-status {
        display: inline-block;
        text-transform: capitalize;
    }
    
    /* Lists styling */
    .subscribers-table.table-card td[data-label="Lists"] span,
    #newsletter .table-card td[data-label="Lists"] span {
        display: inline-block;
        background: rgba(212, 175, 55, 0.1);
        padding: 4px 8px;
        border-radius: 4px;
        margin: 2px;
        font-size: 0.85rem;
    }

    /* Compact date/status presentation for subscribers */
    #newsletter .table-card td[data-label="Subscribed Date"] {
        color: #bdbdbd;
        font-size: 0.85rem;
    }
    #newsletter .table-card td[data-label="Status"] .badge {
        padding: 4px 8px;
        font-size: 0.78rem;
        border: 1px solid rgba(212, 175, 55, 0.25);
    }
}

/* AI Readiness Consultations specific styling */
@media (max-width: 768px) {
    #ai-readiness .table-card tr {
        border-left: 3px solid rgba(0, 123, 255, 0.5);
    }
    
    #ai-readiness .table-card td[data-label="Scheduled Date"] {
        font-weight: 600;
        color: #f8f9fa;
    }
}

/* Roundtable Applications specific styling */
@media (max-width: 768px) {
    #roundtable .table-card tr {
        border-left: 3px solid rgba(40, 167, 69, 0.5);
    }

    #roundtable .table-card td[data-label="Industry"] {
        font-style: italic;
        color: #aaa;
    }
}

/* Users (Settings > Users tab) specific styling */
@media (max-width: 768px) {
    #users .table-card tr {
        border-left: 3px solid rgba(212, 175, 55, 0.5);
    }
    #users .table-card td[data-label="Name"],
    #users .table-card td[data-label="Email"] {
        font-weight: 700;
        font-size: 1.05rem;
        line-height: 1.2;
        word-break: break-word;
    }
    #users .table-card td[data-label="Role"],
    #users .table-card td[data-label="Status"] {
        min-height: 44px;
    }
    #users .table-card td[data-label="Status"] .badge,
    #users .table-card td[data-label="Role"] .badge {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 0.8rem;
        border: 1px solid rgba(212, 175, 55, 0.25);
        text-transform: capitalize;
    }
    #users .table-card td[data-label*="Login"],
    #users .table-card td[data-label*="Date"] {
        color: #bdbdbd;
        font-size: 0.85rem;
    }
    #users .table-card td .action-buttons {
        gap: 8px;
    }
    #users .table-card td .action-buttons .btn {
        padding: 8px 10px;
        border-radius: 8px;
    }
}