/* RubyPlanet ServiceDesk - MOBILE-FIRST RESPONSIVE CSS */
/* Version 2.3 - FIXED: Button spacing, attachment icons, card arrows, card titles */

/* ===== CRITICAL MOBILE FIXES ===== */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box !important;
}

/* Mobile-specific overflow fixes */
@media (max-width: 768px) {
    html {
        overflow-x: hidden !important;
        width: 100vw;
        max-width: 100vw;
    }
    
    body {
        overflow-x: hidden !important;
        width: 100vw;
        max-width: 100vw;
        position: relative;
    }
    
    *:not(html):not(body) {
        max-width: 100vw !important;
    }
}

/* Prevent iOS zoom on input focus */
input, select, textarea {
    font-size: 16px !important;
}

/* ===== BASE CONTAINER STYLES (MOBILE FIRST) ===== */
.rp-client-dashboard,
.rp-agent-portal,
.rp-admin-portal,
.rp-login-container {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 8px !important;
    background: #fff;
    border-radius: 0;
    box-shadow: none;
    overflow-x: hidden !important;
    position: relative;
    box-sizing: border-box !important;
}

.rp-client-dashboard > *,
.rp-agent-portal > *,
.rp-admin-portal > *,
.rp-login-container > * {
    max-width: calc(100vw - 16px) !important;
    box-sizing: border-box !important;
}

@media (min-width: 769px) {
    .rp-client-dashboard,
    .rp-agent-portal,
    .rp-admin-portal,
    .rp-login-container {
        max-width: 1200px !important;
        width: auto !important;
        margin: 20px auto !important;
        padding: 20px !important;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .rp-client-dashboard > *,
    .rp-agent-portal > *,
    .rp-admin-portal > *,
    .rp-login-container > * {
        max-width: 100% !important;
    }
}

/* ===== HEADER (MOBILE FIRST) ===== */
.rp-header {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e0e0e0;
    width: 100%;
}

.rp-header h3 {
    margin: 0;
    color: #333;
    font-size: 20px;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.rp-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

@media (min-width: 769px) {
    .rp-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
        padding-bottom: 20px;
        flex-wrap: wrap;
    }
    
    .rp-header h3 {
        font-size: 24px;
        text-align: left;
        flex: 1 1 auto;
        min-width: 200px;
    }
    
    .rp-actions {
        flex-direction: row;
        width: auto;
        flex-wrap: wrap;
    }
}

/* ===== BUTTONS (MOBILE FIRST) ===== */
.rp-button {
    display: inline-flex !important;           /* ← THIS is the key change */
    align-items: center;
    justify-content: center;
    padding: 12px 24px !important;
    min-height: 44px !important;
    min-width: 130px !important;               /* standard minimum width */
    border: none !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-sizing: border-box !important;
    
    /* Mobile: full-width buttons */
    width: 40%;
}

.rp-button-primary {
    background: #0073aa;
    color: #fff;
}

.rp-button-primary:hover,
.rp-button-primary:active {
    background: #005a87;
}

.rp-button-secondary {
    background: #e0e0e0;
    color: #333;
}

.rp-button-secondary:hover,
.rp-button-secondary:active {
    background: #d0d0d0;
}

.rp-button-small {
    padding: 8px 16px !important;
    min-width: 90px !important;
    font-size: 13px !important;
}

.rp-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (min-width: 769px) {
    .rp-button {
        width: auto;           /* ← no longer full-width */
        flex: 0 1 auto;
    }
}

/* ===== FORMS ===== */
.rp-form {
    margin: 20px 0;
    width: 100%;
}


/* ===== DAn Changed 10 Dec ===== */
.rp-form-group {
    margin-bottom: 2px;
    width: 100%;
}
/* ===== DAn Changed 10 Dec ===== */

.rp-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #555;
    font-size: 15px;
}

.rp-form input[type="text"],
.rp-form input[type="email"],
.rp-form input[type="password"],
.rp-form input[type="tel"],
.rp-form select,
.rp-form textarea {
    width: 100%;
    padding: 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
    background: #fff;
}

.rp-form textarea {
    min-height: 120px;
    resize: vertical;
}

.rp-form input:focus,
.rp-form select:focus,
.rp-form textarea:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 3px rgba(0,115,170,0.1);
}

/* FIXED: Button spacing - add gap between form buttons */
.rp-form button + button,
.rp-form .rp-button + .rp-button {
    margin-top: 10px;
}

@media (min-width: 769px) {
    .rp-form input[type="text"],
    .rp-form input[type="email"],
    .rp-form input[type="password"],
    .rp-form input[type="tel"],
    .rp-form select,
    .rp-form textarea {
        padding: 12px;
        font-size: 14px;
    }
    
    /* FIXED: Desktop - buttons side by side with spacing */
    .rp-form button + button,
    .rp-form .rp-button + .rp-button {
        margin-top: 0;
        margin-left: 12px;
    }
}

/* ===== TABLES (MOBILE FIRST - CARD VIEW) ===== */
.rp-table-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 15px 0;
    overflow: visible;
    padding: 0;
}

.rp-table {
    width: 100%;
    max-width: 100%;
    display: block;
}

.rp-table thead {
    display: none;
}

.rp-table tbody {
    display: block;
    width: 100%;
    max-width: 100%;
}

.rp-table tbody tr {
    display: block;
    margin-bottom: 12px;
    padding: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* FIXED: Collapsible card header with proper arrow icon */
.rp-collapsible-card .rp-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #f5f5f5;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    border-bottom: 1px solid #e0e0e0;
    transition: background 0.2s ease;
}

.rp-collapsible-card .rp-card-header:active {
    background: #ebebeb;
}

.rp-collapsible-card.expanded .rp-card-header {
    background: #e8f4f8;
    border-bottom-color: #0073aa;
}

/* FIXED: Arrow icon using proper unicode character */
.rp-card-toggle {
    font-size: 14px;
    color: #0073aa;
    flex-shrink: 0;
    width: 20px;
    transition: transform 0.2s ease;
    font-family: Arial, sans-serif;
}

.rp-collapsible-card.collapsed .rp-card-toggle::before {
    content: '▶';
}

.rp-collapsible-card.expanded .rp-card-toggle::before {
    content: '▼';
}

/* FIXED: Card title now includes both ref and subject */
.rp-card-title {
    flex: 1;
    font-size: 14px;
    color: #333;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.rp-card-title strong {
    color: #0073aa;
    font-weight: 600;
}

/* Collapsible card content */
.rp-collapsible-card .rp-card-content {
    padding: 12px;
}

.rp-collapsible-card .rp-card-content td {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 4px 0;
    border: none;
    text-align: left;
    font-size: 14px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.rp-collapsible-card .rp-card-content td:before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    color: #555;
    margin-bottom: 4px;
    font-size: 12px;
}

/* Non-collapsible cards */
.rp-table tbody tr:not(.rp-collapsible-card) {
    padding: 12px;
}

.rp-table tbody td {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 8px 0;
    border: none;
    text-align: left;
    font-size: 14px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.rp-table tbody td:before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    color: #555;
    margin-bottom: 4px;
    font-size: 12px;
}

/* Desktop table view */
@media (min-width: 769px) {
    .rp-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 15px -20px;
        padding: 0 20px;
    }
    
    .rp-table {
        display: table;
        border-collapse: collapse;
        min-width: 600px;
        width: 100%;
        table-layout: auto;
    }
    
    .rp-table thead {
        display: table-header-group;
    }
    
    .rp-table tbody {
        display: table-row-group;
    }
    
    .rp-table tbody tr {
        display: table-row;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .rp-table tbody tr:hover {
        background: #f9f9f9;
    }
    
    .rp-table th,
    .rp-table tbody td {
        display: table-cell;
        padding: 10px 6px;
        border-bottom: 1px solid #e0e0e0;
        font-size: 13px;
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .rp-table th {
        background: #f5f5f5;
        font-weight: 600;
        color: #333;
        white-space: nowrap;
    }
    
    .rp-table th:first-child,
    .rp-table tbody td:first-child {
        max-width: 80px;
        white-space: nowrap;
    }
    
    .rp-table th:last-child,
    .rp-table tbody td:last-child {
        white-space: normal;
        max-width: none;
        min-width: 120px;
    }
    
    .rp-table tbody td:before {
        display: none;
    }
    
    .rp-collapsible-card .rp-card-header {
        display: none;
    }
    
    .rp-collapsible-card .rp-card-content {
        display: table-row !important;
        padding: 0;
    }
    
    .rp-collapsible-card .rp-card-content td {
        display: table-cell !important;
        padding: 10px 6px !important;
    }
}

@media (min-width: 1200px) {
    .rp-table-wrapper {
        margin: 20px 0;
        padding: 0;
    }
    
    .rp-table th,
    .rp-table tbody td {
        padding: 12px 8px;
        font-size: 14px;
        max-width: 200px;
    }
    
    .rp-table th:first-child,
    .rp-table tbody td:first-child {
        max-width: 100px;
    }
}

/* ===== FILTER DROPDOWNS ===== */
.rp-filters {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 15px 0;
    padding: 15px;
    background: #f5f5f5;
    border-radius: 6px;
}

.rp-filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rp-filter-group label {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
}

.rp-filter-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
}

@media (min-width: 576px) {
    .rp-filters {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
    }
    
    .rp-filter-group {
        flex: 1;
        min-width: 150px;
    }
}

@media (min-width: 769px) {
    .rp-filters {
        padding: 20px;
    }
    
    .rp-filter-group select {
        padding: 8px 12px;
    }
}

/* ===== STATUS BADGES ===== */
.rp-status-badge {
    padding: 6px 14px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
    white-space: nowrap;
}

.rp-status-new { background: #e3f2fd; color: #1976d2; }
.rp-status-open { background: #fff3e0; color: #f57c00; }
.rp-status-waiting { background: #f3e5f5; color: #7b1fa2; }
.rp-status-closed { background: #e8f5e9; color: #388e3c; }

/* ===== MODAL ===== */
.rp-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
}

.rp-modal-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 20px;
    border-radius: 8px;
    width: 95%;
    max-width: 800px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 6px 24px rgba(0,0,0,0.3);
}

.rp-close-button {
    color: #aaa;
    float: right;
    font-size: 32px;
    font-weight: bold;
    line-height: 1;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    min-width: 44px;
    min-height: 44px;
}

.rp-close-button:hover,
.rp-close-button:focus {
    color: #000;
}

@media (min-width: 769px) {
    .rp-modal-content {
        margin: 2% auto;
        padding: 30px;
        width: 90%;
        max-height: 90vh;
    }
}

/* ===== COMMENTS - FIXED: NO SCROLLING ===== */
.rp-comments-container {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 20px;
    background: #fafafa;
    width: 100%;
}

.rp-comment {
    padding: 12px;
    margin-bottom: 12px;
    background: #fff;
    border-left: 3px solid #0073aa;
    border-radius: 4px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.rp-comment-internal {
    border-left-color: #d32f2f;
    background: #ffebee;
}

.rp-comment-header {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #666;
}

.rp-comment-author {
    font-weight: 600;
    color: #333;
}

.rp-comment-internal-badge {
    background: #d32f2f;
    color: #fff;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    text-transform: uppercase;
    display: inline-block;
}

.rp-comment-message {
    color: #333;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

@media (min-width: 769px) {
    .rp-comment-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

/* ===== TICKET DETAILS ===== */
.rp-ticket-details {
    margin: 20px 0;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 6px;
    width: 100%;
    overflow-x: hidden;
}
/* ===== Dan change 10 dec  ===== */
.rp-ticket-details p {
    margin: 1px 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
/* ===== Dan change 10 dec  ===== */
.rp-ticket-details strong {
    color: #555;
    display: inline-block;
    margin-right: 5px;
}

@media (min-width: 769px) {
    .rp-ticket-details {
        padding: 20px;
    }
}

/* ===== DASHBOARD STATS (MOBILE FIRST) ===== */
.rp-dashboard-stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 12px 0;
    width: 100%;
    max-width: 100%;
    padding: 0;
}

.rp-stat-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 18px 12px;
    border-radius: 6px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.rp-stat-card:nth-child(2) {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.rp-stat-card:nth-child(3) {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.rp-stat-card:nth-child(4) {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.rp-stat-card h3 {
    margin: 0 0 10px 0;
    font-size: 32px;
    font-weight: bold;
}

.rp-stat-card p {
    margin: 0;
    font-size: 14px;
    opacity: 0.9;
}

@media (min-width: 576px) {
    .rp-dashboard-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .rp-dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin: 20px 0;
    }
    
    .rp-stat-card {
        padding: 20px 15px;
    }
}

@media (min-width: 1025px) {
    .rp-dashboard-stats {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin: 30px 0;
    }
    
    .rp-stat-card {
        padding: 25px;
    }
    
    .rp-stat-card h3 {
        font-size: 36px;
		color: whitesmoke;
    }
}

/* ===== ADMIN TABS (MOBILE FIRST) ===== */
.rp-admin-tabs {
    display: flex;
    gap: 3px;
    margin: 12px -8px 12px -8px;
    padding: 0 8px 6px 8px;
    border-bottom: 2px solid #e0e0e0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    width: calc(100% + 16px);
    max-width: calc(100vw);
}

.rp-admin-tabs::-webkit-scrollbar {
    height: 3px;
}

.rp-admin-tabs::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
}

.rp-admin-tab {
    padding: 9px 15px;
    border: none;
    background: #555555;
    color: #ffffff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px 4px 0 0;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 38px;
    min-width: 75px;
}

.rp-admin-tab:hover,
.rp-admin-tab:active {
    background: #333333;
}

.rp-admin-tab.active {
    background: #0073aa;
    font-weight: 600;
}

@media (min-width: 769px) {
    .rp-admin-tabs {
        margin: 20px 0;
        padding: 0 0 0 0;
        gap: 5px;
        width: 100%;
        flex-wrap: wrap;
    }
    
    .rp-admin-tab {
        padding: 14px 24px;
        font-size: 14px;
        min-height: 44px;
    }
}

/* ===== ADMIN CONTENT AREA ===== */
#rp-admin-content {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
}

#rp-admin-content > * {
    max-width: 100%;
}

#rp-admin-content h2,
#rp-admin-content h3,
#rp-admin-content h4 {
    margin: 15px 0 10px 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* ===== SETTINGS FORMS - IMPROVED SPACING ===== */
.rp-settings-form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
    padding: 15px;
    background: #fff;
    border-radius: 6px;
}

.rp-settings-form-group input[type="text"],
.rp-settings-form-group select {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.rp-settings-form-group button {
    margin-top: 5px;
}

@media (min-width: 576px) {
    .rp-settings-form-group {
        flex-direction: row;
        align-items: center;
    }
    
    .rp-settings-form-group button {
        margin-top: 0;
        margin-left: 10px;
    }
}

/* ===== LOADING & ALERTS ===== */
.rp-loading {
    text-align: center;
    padding: 40px 20px;
    color: #666;
    font-size: 16px;
}

.rp-loading:after {
    content: "...";
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
    0%, 20% { content: "."; }
    40% { content: ".."; }
    60%, 100% { content: "..."; }
}

.rp-alert {
    padding: 14px 15px;
    margin: 15px 0;
    border-radius: 6px;
    font-size: 14px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.rp-alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.rp-alert-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.rp-alert-info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.rp-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.rp-empty-state-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.rp-empty-state-text {
    font-size: 16px;
}

/* ===== REPORT FILTERS - IMPROVED LAYOUT ===== */
.rp-report-filters {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0;
    padding: 15px;
    background: #f5f5f5;
    border-radius: 6px;
}

.rp-report-filters select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    margin-bottom: 10px;
}

.rp-report-filters label {
    font-weight: 600;
    margin-bottom: 5px;
    display: block;
}

@media (min-width: 769px) {
    .rp-report-filters {
        flex-direction: row;
        align-items: center;
        padding: 20px;
        gap: 15px;
    }
    
    .rp-report-filters select {
        width: auto;
        min-width: 200px;
        font-size: 14px;
        padding: 10px 14px;
        margin-bottom: 0;
    }
}

/* ===== PASSWORD REVEAL ===== */
.rp-password-field-wrapper {
    position: relative;
    width: 100%;
}

.rp-password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    cursor: pointer;
    font-size: 20px;
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    color: #666;
}

.rp-password-toggle:hover,
.rp-password-toggle:active {
    color: #0073aa;
}

/* ===== ATTACHMENTS (MOBILE FIRST) ===== */
.rp-attachments-area {
    margin: 20px 0;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    width: 100%;
    overflow-x: hidden;
}

.rp-attachments-list {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

.rp-attachment-item {
    display: flex;
    flex-direction: column;
    padding: 12px;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    transition: all 0.2s ease;
    gap: 10px;
}

.rp-attachment-item:hover,
.rp-attachment-item:active {
    border-color: #0073aa;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.rp-attachment-info {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.rp-attachment-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0073aa;
    color: #fff;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

.rp-attachment-icon.pdf { background: #d32f2f; }
.rp-attachment-icon.doc,
.rp-attachment-icon.docx { background: #1976d2; }
.rp-attachment-icon.xls,
.rp-attachment-icon.xlsx { background: #388e3c; }
.rp-attachment-icon.jpg,
.rp-attachment-icon.jpeg,
.rp-attachment-icon.png,
.rp-attachment-icon.gif { background: #f57c00; }

.rp-attachment-details {
    flex: 1;
    min-width: 0;
}

.rp-attachment-name {
    font-weight: 600;
    color: #333;
    margin-bottom: 3px;
    word-break: break-word;
    overflow-wrap: break-word;
    font-size: 14px;
}

.rp-attachment-meta {
    font-size: 12px;
    color: #666;
}

/* FIXED: Attachment actions with proper spacing */
.rp-attachment-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    width: 100%;
}

.rp-attachment-actions .rp-button {
    flex: 1;
    min-width: 90px;
}

@media (min-width: 769px) {
    .rp-attachment-item {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .rp-attachment-actions {
        width: auto;
        flex-wrap: nowrap;
    }
    
    /* FIXED: Desktop button spacing in attachments */
    .rp-attachment-actions .rp-button {
        flex: 0;
        width: auto;
        margin-left: 0;
    }
    
    .rp-attachment-actions .rp-button:first-child {
        margin-left: 0;
    }
}

.rp-upload-zone {
    border: 2px dashed #ddd;
    border-radius: 6px;
    padding: 30px 15px;
    text-align: center;
    background: #fafafa;
    cursor: pointer !important;
    transition: all 0.3s ease;
    margin: 15px 0;
    position: relative;
	z-index: 1;
}

.rp-upload-zone:hover,
.rp-upload-zone:active {
    border-color: #0073aa;
    background: #f0f8ff;
}

.rp-upload-zone.dragging {
    border-color: #0073aa;
    background: #e3f2fd;
}

/* FIXED: Upload icon showing paperclip unicode character */
.rp-upload-icon {
    font-size: 40px;
    color: #999;
    margin-bottom: 10px;
}

.rp-upload-icon::before {
    content: '📎';
}

.rp-upload-text {
    color: #666;
    font-size: 15px;
    margin-bottom: 8px;
    word-wrap: break-word;
}

.rp-upload-text strong {
    color: #0073aa;
}

.rp-upload-hint {
    font-size: 13px;
    color: #999;
    margin-top: 10px;
}

.rp-file-input {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    pointer-events: none !important;
	left: -9999px !important;
}

.rp-upload-progress {
    margin: 15px 0;
    padding: 10px;
    background: #e3f2fd;
    border-radius: 4px;
    border-left: 3px solid #1976d2;
}

.rp-upload-progress-bar {
    height: 6px;
    background: #ddd;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 10px;
}

.rp-upload-progress-fill {
    height: 100%;
    background: #1976d2;
    transition: width 0.3s ease;
}

.rp-attachment-count {
    display: inline-block;
    background: #e3f2fd;
    color: #1976d2;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 10px;
}

@media (min-width: 769px) {
    .rp-upload-zone {
        padding: 40px 20px;
    }
    
    .rp-upload-icon {
        font-size: 48px;
    }
}

/* ===== EXTRA MOBILE SAFETY ===== */
@media (max-width: 480px) {
    .rp-client-dashboard,
    .rp-agent-portal,
    .rp-admin-portal {
        padding: 6px !important;
        margin: 0 !important;
    }
    
    .rp-client-dashboard > *,
    .rp-agent-portal > *,
    .rp-admin-portal > * {
        max-width: calc(100vw - 12px) !important;
    }
    
    .rp-stat-card {
        padding: 15px 10px !important;
    }
    
    .rp-admin-tab {
        min-width: 70px !important;
        padding: 8px 12px !important;
        font-size: 11px !important;
    }
    
    .rp-header h2 {
        font-size: 16px !important;
    }
    
    .rp-table tbody tr {
        padding: 8px !important;
    }
    
    .rp-admin-tabs {
        margin: 10px -6px 10px -6px;
        padding: 0 6px 5px 6px;
        width: calc(100% + 12px);
    }
}

/* ===== VIEWPORT FIX FOR SMALL SCREENS ===== */
@media (max-width: 375px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    * {
        max-width: 100vw !important;
    }
    
    .rp-admin-portal,
    .rp-client-dashboard,
    .rp-agent-portal {
        padding: 5px !important;
    }
    
    .rp-stat-card {
        padding: 12px 8px !important;
    }
    
    .rp-admin-tab {
        min-width: 65px !important;
        padding: 7px 10px !important;
        font-size: 11px !important;
    }
}

/* ===== LANDSCAPE MOBILE FIX ===== */
@media (max-height: 500px) and (orientation: landscape) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    .rp-admin-portal,
    .rp-client-dashboard,
    .rp-agent-portal {
        padding: 5px !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }
    
    .rp-admin-portal > *,
    .rp-client-dashboard > *,
    .rp-agent-portal > * {
        max-width: calc(100vw - 10px) !important;
    }
    
    .rp-dashboard-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    
    .rp-stat-card {
        padding: 10px 8px !important;
    }
    
    .rp-stat-card h3 {
        font-size: 24px !important;
    }
    
    .rp-admin-tabs {
        margin: 8px -5px 8px -5px !important;
        padding: 0 5px 4px 5px !important;
        width: calc(100% + 10px) !important;
    }
    
    .rp-admin-tab {
        padding: 6px 10px !important;
        font-size: 11px !important;
        min-width: 60px !important;
    }
    
    .rp-header {
        margin-bottom: 10px !important;
        padding-bottom: 10px !important;
    }
    
    .rp-header h3 {
        font-size: 16px !important;
    }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-contrast: high) {
    .rp-button-primary {
        border: 2px solid #000;
    }
    
    .rp-status-badge {
        border: 1px solid currentColor;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .rp-header,
    .rp-actions,
    .rp-button,
    .rp-admin-tabs,
    .rp-upload-zone,
    .rp-attachment-actions {
        display: none !important;
    }
    
    .rp-table {
        display: table !important;
    }
    
    .rp-table thead {
        display: table-header-group !important;
    }
    
    .rp-table tbody {
        display: table-row-group !important;
    }
    
    .rp-table tbody tr {
        display: table-row !important;
        border: 1px solid #ddd !important;
    }
    
    .rp-table tbody td {
        display: table-cell !important;
        padding: 8px !important;
        border: 1px solid #ddd !important;
    }
    
    .rp-table tbody td:before {
        display: none !important;
    }
}

/* ===== END OF STYLESHEET ===== */

/* ===== NOV 2025 FIXES: Button spacing, attachments, icons, mobile cards ===== */
/* FIXED: Standard button size & spacing for View/Close and Add Comment/Back */
.rp-button-small {
    min-width: 90px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    margin-left: 12px !important; /* Space between buttons */
}

.rp-button-small:first-of-type {
    margin-left: 0 !important;
}

/* FIXED: Attachments - prevent delete button from covering download */
@media (min-width: 769px) {
    .rp-attachment-actions {
        display: flex !important;
        gap: 15px !important;
        align-items: center !important;
    }
    
    .rp-attachment-actions .rp-button-small {
        margin-left: 0 !important;
        flex-shrink: 0 !important;
    }
}

/* FIXED: Paperclip icon - replace "Clip" text with 📎 */
.rp-upload-icon::before {
    content: "📎" !important;
    font-size: 40px !important;
}

/* FIXED: Mobile card arrows - use ▶ and ▼ instead of text */
@media (max-width: 768px) {
    .rp-card-toggle::before {
        content: "▶" !important;
    }
    
    .rp-collapsible-card.expanded .rp-card-toggle::before {
        content: "▼" !important;
    }
    
    .rp-card-toggle {
        font-size: 18px !important;
        margin-right: 8px !important;
    }
}

/* FIXED: Mobile card title - include subject next to ref (via JS, but CSS ensures wrap) */
@media (max-width: 768px) {
    .rp-card-title {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* FIX: Add Comment + Back buttons - proper spacing & size (desktop + mobile) */
.rp-comment-actions {
    display: flex !important;
    gap: 15px !important;           /* Perfect space between buttons */
    margin-top: 20px !important;
    flex-wrap: wrap;                 /* Mobile safety */
}

.rp-comment-actions .rp-button {
    min-width: 140px !important;     /* Standard button width */
    padding: 12px 20px !important;
    flex: 1;                         /* On mobile: equal width */
    text-align: center;
}

@media (min-width: 769px) {
    .rp-comment-actions .rp-button {
        flex: 0 1 auto;              /* Desktop: natural width, not stretched */
    }
}


/* ==== ADMIN REPORTS – CLEAN PROFESSIONAL TABLES (does NOT affect dashboard cards) ==== */
.rp-report-table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    border-radius: 8px;
    overflow: hidden;
    font-size: 14px;
}

.rp-report-table th {
    background: #0073aa;
    color: #fff;
    padding: 15px 16px;
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.6px;
}

.rp-report-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}

.rp-report-table tr:hover {
    background-color: #f8fbff;
}

.rp-report-table tbody tr:nth-child(even) {
    background-color: #fbfbfb;
}

.rp-report-table tr:last-child td {
    border-bottom: none;
}

/* Mobile → turns into clean stacked cards automatically */
@media (max-width: 768px) {
    .rp-report-table,
    .rp-report-table thead,
    .rp-report-table tbody,
    .rp-report-table th,
    .rp-report-table td,
    .rp-report-table tr { display: block; }

    .rp-report-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .rp-report-table tr {
        border: 1px solid #ddd;
        border-radius: 8px;
        margin-bottom: 15px;
        padding: 12px;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    }

    .rp-report-table td {
        border: none;
        position: relative;
        padding-left: 50%;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .rp-report-table td:before {
        content: attr(data-label);
        position: absolute;
        left: 16px;
        width: 45%;
        font-weight: 600;
        color: #0073aa;
        text-transform: uppercase;
        font-size: 11px;
    }
}

/* ——— FINAL FIX: Make Admin Reports look PERFECT on desktop AND mobile ——— */
.rp-report-table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    border-radius: 10px;
    overflow: hidden;
    font-size: 15px;
}

.rp-report-table th {
    background: #0073aa;
    color: #fff;
    padding: 16px 18px;
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.8px;
}

.rp-report-table td {
    padding: 16px 18px;
    border-bottom: 1px solid #eef2f6;
    background: #fff;
}

.rp-report-table tbody tr:hover {
    background-color: #f8fbff !important;
}

.rp-report-table tbody tr:nth-child(even) {
    background-color: #fbfbfb;
}

.rp-report-table tbody tr:last-child td {
    border-bottom: none;
}

/* ——— MOBILE: Keep as real table until screen is very small ——— */
@media (max-width: 768px) {
    .rp-report-table {
        font-size: 14px;
    }
    .rp-report-table th,
    .rp-report-table td {
        padding: 12px 14px;
    }
}

/* ——— Only on VERY small screens: turn into clean labeled cards ——— */
@media (max-width: 480px) {
    .rp-report-table,
    .rp-report-table thead,
    .rp-report-table tbody,
    .rp-report-table th,
    .rp-report-table td,
    .rp-report-table tr {
        display: block;
    }

    .rp-report-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .rp-report-table tr {
        border: 1px solid #e0e0e0;
        border-radius: 10px;
        margin-bottom: 16px;
        padding: 16px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

    .rp-report-table td {
        border: none;
        position: relative;
        padding-left: 50%;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .rp-report-table td:before {
        content: attr(data-label) ": ";
        position: absolute;
        left: 16px;
        width: 45%;
        font-weight: 700;
        color: #0073aa;
        font-size: 13px;
        text-transform: uppercase;
    }

    .rp-report-table td strong {
        color: #222;
    }
}



/* Perfect mobile report cards — dynamic label */
@media (max-width: 480px) {
    .rp-report-table td:first-child {
        font-size: 17px;
        font-weight: 600;
        padding-top: 20px;
        color: #222;
    }
    .rp-report-table td:first-child:before {
        font-size: 12px;
        color: #0073aa;
    }
}

/* NEW LAYOUT FOR REPORTS — SCROLLABLE TABLE ON MOBILE, NO CARDS */
.rp-report-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 20px 0;
}

.rp-report-table {
    min-width: 600px; /* Force horizontal scroll on small screens */
    border-collapse: collapse;
    width: 30%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-radius: 8px;
    font-size: 14px;
	/* display: flex */
}

.rp-report-table th {
    background: #0073aa;
    color: #fff;
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.rp-report-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #ddd;
}

.rp-report-table tr:hover {
    background-color: #f8f9fa;
}

.rp-report-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* No stacking on mobile — just horizontal scroll */
@media (max-width: 768px) {
    .rp-report-table th, .rp-report-table td {
        white-space: nowrap; /* Prevent wrapping to keep table structure */
    }
}

/* ====================== REPORTS TAB – DESKTOP & MOBILE CLEANUP ====================== */
#rp-admin-content .rp-reports-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: end;
    margin-bottom: 20px;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

#rp-admin-content .rp-reports-controls .rp-form-group {
    flex: 1;
    min-width: 200px;
    margin: 0;
}

#rp-admin-content .rp-reports-controls .rp-form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
}

#rp-admin-content .rp-reports-controls select,
#rp-admin-content .rp-reports-controls button {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

#rp-admin-content .rp-reports-controls button {
    min-width: 140px;
    max-width: 180px;
    background: #2271b1;
    color: white;
    font-weight: bold;
}



/* Mobile report – premium look */
@media (max-width: 768px) {
    .rp-report-table,
    .rp-report-table + .rp-mobile-report {  /* hides the duplicated table when it accidentally appears */
        display: none !important;
    }
    
    .rp-mobile-report {
        display: block !important;
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        margin: 20px 10px;
    }
    
    .rp-mobile-report-item {
        padding: 18px 20px;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        background: #fdfdfd;
    }
    
    .rp-mobile-report-item:nth-child(even) {
        background: #f9f9f9;
    }
    
    .rp-mobile-report-item:last-child {
        border-bottom: none;
    }
    
    .rp-mobile-report-item strong {
        color: #2271b1;
        font-weight: 600;
    }
    
    .rp-mobile-report-item span {
        font-weight: 600;
        color: #333;
    }
}





/* Hide ID columns on Users & Settings tabs */
#rp-users-table thead th:first-child,
#rp-users-table tbody td:first-child,
#rp-settings-table thead th:first-child,
#rp-settings-table tbody td:first-child {
    display: none;
}

/* Better column widths on Tickets tab */
#rp-tickets-table .column-ref     { width: 100px; }
#rp-tickets-table .column-title   { width: auto; }
#rp-tickets-table .column-status  { width: 110px; }
#rp-tickets-table .column-priority{ width: 100px; }
#rp-tickets-table .column-agent   { width: 140px; }
#rp-tickets-table .column-date    { width: 130px; }




/* FINAL – WORKS ON YOUR SITE RIGHT NOW */
#rp-users-table th:first-child,
#rp-users-table td:first-child,
table[class^="rp-settings-"] th:first-child,
table[class^="rp-settings-"] td:first-child {
    display: none !important;
}


/* ===== IMPROVED USERS TABLE STYLING ===== */

/* Better column widths for Users table */
.rp-admin-portal .rp-table thead th:nth-child(1) { /* Email */
    width: 25%;
    min-width: 180px;
}

.rp-admin-portal .rp-table thead th:nth-child(2) { /* Name */
    width: 18%;
    min-width: 140px;
}

.rp-admin-portal .rp-table thead th:nth-child(3) { /* Role */
    width: 10%;
    min-width: 80px;
    text-align: center;
}

.rp-admin-portal .rp-table thead th:nth-child(4) { /* Regions */
    width: 22%;
    min-width: 150px;
}

.rp-admin-portal .rp-table thead th:nth-child(5) { /* Created */
    width: 15%;
    min-width: 120px;
    text-align: right;
}

.rp-admin-portal .rp-table thead th:nth-child(6) { /* Actions */
    width: 10%;
    min-width: 140px;
    text-align: center;
}

/* Align table data cells to match headers */
.rp-admin-portal .rp-table tbody td:nth-child(3) { /* Role */
    text-align: left;
}

.rp-admin-portal .rp-table tbody td:nth-child(5) { /* Created */
    text-align: left;
    font-size: 13px;
    color: #666;
}

.rp-admin-portal .rp-table tbody td:nth-child(6) { /* Actions */
    text-align: left;
    white-space: nowrap;
}

/* FIXED: Better button spacing and layout in Actions column */
.rp-admin-portal .rp-table tbody td:nth-child(6) .rp-button-small {
    display: inline-block;
    margin: 3px 5px;
    min-width: 65px;
    padding: 8px 12px;
    vertical-align: middle;
}

/* Desktop: Side by side buttons with proper spacing */
@media (min-width: 769px) {
    .rp-admin-portal .rp-table tbody td:nth-child(6) .rp-button-small:first-child {
        margin-right: 8px;
    }
    
    .rp-admin-portal .rp-table tbody td:nth-child(6) .rp-button-small:last-child {
        margin-left: 0;
    }
}

/* Mobile: Stack buttons vertically for better touch targets */
@media (max-width: 768px) {
    .rp-admin-portal .rp-table tbody td:nth-child(6) .rp-button-small {
        display: block;
        width: 20%;
        margin: 5px 0;
    }
}

/* Improve text wrapping for long emails and regions */
.rp-admin-portal .rp-table tbody td:nth-child(1) { /* Email */
    word-break: break-word;
    overflow-wrap: break-word;
	white-space: nowrap;
}

.rp-admin-portal .rp-table tbody td:nth-child(4) { /* Regions */
    font-size: 13px;
    line-height: 1.4;
}

/* Zebra striping for better readability */
.rp-admin-portal .rp-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Enhanced hover effect */
.rp-admin-portal .rp-table tbody tr:hover {
    background-color: #e8f4f8 !important;
    transform: scale(1.005);
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* COLOR-CODED ROLE BADGES */
.rp-admin-portal .rp-table tbody td:nth-child(3) {
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Admin = Blue */
.rp-admin-portal .rp-table tbody tr td:nth-child(3):contains("Admin") {
    color: #1976d2;
}

/* Since CSS doesn't have :contains, we'll add classes via JavaScript */
/* Agent = Green */
.rp-role-agent {
    color: #388e3c !important;
}

/* Admin = Blue */
.rp-role-admin {
    color: #1976d2 !important;
}

/* Client = Gray */
.rp-role-client {
    color: #666 !important;
}

/* Add some padding to table cells */
.rp-admin-portal .rp-table td,
.rp-admin-portal .rp-table th {
    padding: 0px 12px;
}

/* Better header styling */
.rp-admin-portal .rp-table thead th {
    background: #f5f5f5;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: #555;
    border-bottom: 2px solid #ddd;
}

/* Table borders */
.rp-admin-portal .rp-table {
    border: 1px solid #f7f2f200;
    border-radius: 8px;
    overflow: hidden;
}

.rp-admin-portal .rp-table tbody td {
    border-bottom: 1px solid #eee;
}

.rp-admin-portal .rp-table tbody tr:last-child td {
    border-bottom: none;
}


/* ===== CLICKABLE TICKET REF STYLING ===== */

.rp-ticket-ref-link {
    color: #0073aa;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-size: 14px;
}

.rp-ticket-ref-link:hover {
    background: #0073aa;
    color: #fff;
    text-decoration: none;
    transform: translateX(2px);
}

.rp-ticket-ref-link:active {
    transform: scale(0.95);
}

/* Make Ref column narrower and centered */
#rp-admin-tickets-table thead th:nth-child(1) {
    width: 90px;
    min-width: 90px;
    text-align: center;
}

#rp-admin-tickets-table tbody td:nth-child(1) {
    text-align: center;
    white-space: nowrap;
}

/* Adjust Status column to be narrower */
#rp-admin-tickets-table thead th:nth-child(4) {
    width: 90px;
    min-width: 90px;
    text-align: center;
}

#rp-admin-tickets-table tbody td:nth-child(4) {
    text-align: left;
}

/* Now the table should fit without scrolling */
#rp-admin-tickets-table {
    width: 100%;
    table-layout: auto;
}

/* ===== MOBILE TICKET LIST & DETAIL – COMPACT & INLINE BUTTONS ===== */
@media (max-width: 768px) {
    
    /* Compact horizontal label-value pairs in ticket details */
    .rp-ticket-details .rp-ticket-info > div,
    .rp-ticket-list .rp-ticket-row .rp-ticket-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        border-bottom: 1px solid #eee;
        font-size: 13px;
        line-height: 1.3;
    }
    
    .rp-ticket-details .rp-ticket-info > div:last-child,
    .rp-ticket-list .rp-ticket-row .rp-ticket-meta > div:last-child {
        border-bottom: none;
    }
    
    .rp-ticket-details .rp-ticket-info strong,
    .rp-ticket-list .rp-ticket-row .rp-ticket-meta strong {
        font-weight: 600;
        color: #333;
        min-width: 70px;
        margin-right: 8px;
        font-size: 12px;
    }
    
    .rp-ticket-details .rp-ticket-info span,
    .rp-ticket-details .rp-ticket-info select,
    .rp-ticket-list .rp-ticket-row .rp-ticket-meta span,
    .rp-ticket-list .rp-ticket-row .rp-ticket-meta div {
        flex: 1;
        text-align: right;
        font-weight: 500;
        font-size: 12px;
    }
    
    /* Status badges smaller */
    .rp-status-new, .rp-status-open, .rp-status-waiting, .rp-status-closed {
        font-size: 10px !important;
        padding: 3px 8px !important;
        border-radius: 12px !important;
    }
    
    /* Inline small action buttons in ticket list */
    .rp-ticket-row .rp-ticket-actions {
        display: flex;
        gap: 8px;
        margin-top: 8px;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    
    .rp-ticket-row .rp-ticket-actions .rp-button {
        flex: 1;
        min-width: 70px;
        max-width: 80px;
        padding: 8px 12px !important;
        font-size: 12px !important;
        border-radius: 5px !important;
        line-height: 1.2;
    }
    
    /* Ensure View and Close fit side-by-side */
    .rp-ticket-row .rp-ticket-actions .rp-button:first-child {
        background: #0073aa !important;
        color: #fff !important;
    }
    
    .rp-ticket-row .rp-ticket-actions .rp-button:last-child {
        background: #dc3232 !important;
        color: #fff !important;
    }
    
    /* Compact ticket row overall */
    .rp-ticket-list .rp-ticket-row {
        padding: 12px;
        margin-bottom: 12px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        background: #fafafa;
    }
    
    .rp-ticket-list .rp-ticket-row .rp-ticket-title {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 8px;
        display: block;
    }
    
    /* Detail view enhancements */
    .rp-ticket-details .rp-description {
        margin: 16px 0;
        padding: 12px 0;
        border-top: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .rp-ticket-details .rp-description h5 {
        margin: 0 0 6px 0;
        font-size: 14px;
    }
    
    .rp-ticket-details .rp-description p {
        margin: 0;
        font-size: 13px;
        line-height: 1.4;
    }
    
    .rp-back-btn {
        font-size: 13px;
        padding: 6px 0 !important;
        margin-bottom: 10px;
        color: #0073aa;
    }
}

/* ===== MOBILE: COMPACT TICKET LISTS & DETAILS ===== */
@media (max-width: 768px) {
    
    /* All ticket detail info (Client + Agent + Admin) → label : value on one line */
    .rp-ticket-details .rp-ticket-info > div,
    .rp-ticket-details .rp-ticket-info strong,
    .rp-ticket-details .rp-ticket-info span {
        display: inline-block;
        width: auto;
    }
    .rp-ticket-details .rp-ticket-info > div {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid #eee;
        font-size: 14px;
    }
    .rp-ticket-details .rp-ticket-info strong {
        min-width: 90px;
        font-weight: 600;
        margin-right: 12px;
    }

    /* Status badges smaller */
    .rp-status-badge {
        font-size: 11px !important;
        padding: 4px 9px !important;
        border-radius: 20px !important;
    }

    /* Make clickable Ref links look better on mobile */
    .rp-ticket-ref-link {
        font-weight: 600;
        color: #0073aa;
        text-decoration: underline;
        font-size: 20px;
    }

    /* Compact rows */
    #rp-tickets-table tbody tr,
    .rp-ticket-list .rp-ticket-row {
        font-size: 13.5px;
    }
}

/* ===== DESKTOP: CLIENT TICKET LIST – PERFECT LAYOUT ===== */
@media (min-width: 769px) {
    
    /* Table layout – give proper weight to each column */
    #rp-client-area .rp-table thead th:nth-child(1) { width: 9%;   }   /* Ref */
    #rp-client-area .rp-table thead th:nth-child(2) { width: 30%;  }   /* Title */
    #rp-client-area .rp-table thead th:nth-child(3) { width: 11%;  }   /* Status */
    #rp-client-area .rp-table thead th:nth-child(4) { width: 11%;  }   /* Severity */
    #rp-client-area .rp-table thead th:nth-child(5) { width: 14%;  }   /* Created */
    #rp-client-area .rp-table thead th:nth-child(6) { width: 25%; text-align: right; } /* Actions */

    /* Actions column – right-aligned, nice spacing */
    #rp-client-area .rp-table tbody td:last-child {
        text-align: right;
        padding-right: 20px !important;
    }

    /* Actions container – inline buttons with perfect gap */
    #rp-client-area .rp-ticket-actions {
        display: inline-flex !important;
        gap: 10px;
        justify-content: flex-end;
    }

    /* Buttons – consistent size and style on desktop */
    #rp-client-area .rp-ticket-actions .rp-button {
        min-width: 82px;
        padding: 8px 16px !important;
        font-size: 13px !important;
        border-radius: 6px !important;
    }

    /* Make sure View is primary blue, Close is red */
    #rp-client-area .rp-ticket-actions .rp-view-ticket-btn {
        background: #0073aa !important;
        color: #fff !important;
    }
    #rp-client-area .rp-ticket-actions .rp-close-ticket-btn {
        background: #d63638 !important;
        color: #fff !important;
    }

    /* Slight hover effect */
    #rp-client-area .rp-ticket-actions .rp-button:hover {
        opacity: 0.9;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
}

/* ===== SETTINGS → REGIONS & CATEGORIES – FINAL, WORKING FIX (DIV-BASED LISTS) ===== */
@media (min-width: 769px) {

    /* Target every single row in both Regions and Categories */
    #rp-admin-content .rp-settings-section > div:not(.rp-add-form):not(h3) > div {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 24px 28px !important;           /* ← BIG vertical + horizontal breathing room */
        background: #ffffff !important;
        border-bottom: 1px solid #e2e4e7 !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        transition: background 0.2s ease !important;
    }

    /* First row – rounded top corners */
    #rp-admin-content .rp-settings-section > div:not(.rp-add-form):not(h3) > div:first-child {
        border-top-left-radius: 10px !important;
        border-top-right-radius: 10px !important;
    }

    /* Last row – rounded bottom corners + no bottom border */
    #rp-admin-content .rp-settings-section > div:not(.rp-add-form):not(h3) > div:last-child {
        border-bottom: none !important;
        border-bottom-left-radius: 10px !important;
        border-bottom-right-radius: 10px !important;
    }

    /* Hover effect */
    #rp-admin-content .rp-settings-section > div:not(.rp-add-form):not(h3) > div:hover {
        background: #f6f7f8 !important;
    }

    /* The card container itself */
    #rp-admin-content .rp-settings-section > div:not(.rp-add-form):not(h3) {
        background: #fff !important;
        border: 1px solid #c3c4c7 !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
        margin-top: 20px !important;
    }

    /* Delete buttons – perfect size and spacing */
    #rp-admin-content .rp-settings-section .rp-button-delete {
        min-width: 96px !important;
        padding: 10px 20px !important;
        border-radius: 8px !important;
        font-weight: 500 !important;
        background: #d63638 !important;
        color: #fff !important;
    }

    /* Add forms – a little more space below the list */
    #rp-admin-content .rp-settings-section .rp-add-form {
        margin-top: 32px !important;
    }
}

/* Mobile – keep your existing mobile styles untouched */
@media (max-width: 768px) {
    #rp-admin-content .rp-settings-section > div:not(.rp-add-form):not(h3) > div {
        padding: 16px 20px !important;
    }
}

/* ===== SETTINGS → REGIONS & CATEGORIES – INSTANT SPACING FIX (THE ONE THAT WORKS) ===== */
.rp-admin-portal .rp-settings-section .rp-table tbody td {
    padding: 18px 16px !important;           /* ← THIS IS ALL YOU NEED */
    border-bottom: 1px solid #e0e0e0 !important;
    font-size: 14px !important;
}

.rp-admin-portal .rp-settings-section .rp-table tbody tr:last-child td {
    border-bottom: none !important;
    padding-bottom: 22px !important;
}

/* Optional polish – make it look even better */
.rp-admin-portal .rp-settings-section .rp-table {
    border: 1px solid #d0d0d0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    margin-top: 16px;
}

.rp-admin-portal .rp-settings-section .rp-table tbody tr:hover {
    background: #f8f9fa;
}


.rp-admin-portal .rp-table tbody td {
    border-bottom: 1px solid #eee;
}

.rp-admin-portal .rp-table tbody tr:last-child td {
    border-bottom: none;
}

.rp-admin-portal .rp-table tbody td {
    border-bottom: 5px solid #eeeeee00 !important;
}

.rp-admin-portal .rp-table tbody tr:last-child td {
     border-bottom: 5px solid #eeeeee00 !important;
}

.rp-admin-portal .rp-table tbody tr:last-child td {
     border-top: 5px solid #eeeeee00 !important;
}

/* ===== SETTINGS → REGIONS & CATEGORIES – YOUR WINNING SPACING FIX ===== */
/* This adds perfect breathing room between rows without breaking anything else */
.rp-admin-portal .rp-table tbody td {
    border-top: 5px solid transparent !important;
    border-bottom: 5px solid transparent !important;
}

.rp-admin-portal .rp-table tbody tr:last-child td {
    border-bottom: none !important;   /* removes the extra gap at the very bottom */
}

/* ===== AGENT PORTAL TICKET LIST – REF COLUMN NARROW + SUBJECT WIDE ===== */
#rp-agent-portal #rp-tickets-table th:nth-child(1),
#rp-agent-portal #rp-tickets-table td:nth-child(1),
#rp-agent-portal #rp-agent-tickets-table th:nth-child(1),
#rp-agent-portal #rp-agent-tickets-table td:nth-child(1) {
    width: 70px !important;      /* Ref = narrow */
    min-width: 70px !important;
    max-width: 80px !important;
    text-align: left !important;
    white-space: nowrap;
}

/* Give the Subject/Title column the breathing room it deserves */
#rp-agent-portal #rp-tickets-table th:nth-child(3),
#rp-agent-portal #rp-tickets-table td:nth-child(3),
#rp-agent-portal #rp-agent-tickets-table th:nth-child(3),
#rp-agent-portal #rp-agent-tickets-table td:nth-child(3) {
    width: 45% !important;      /* Subject gets most of the space */
    min-width: 280px !important;
    white-space: normal !important;
}

/* Optional: tighten up other columns if you want */
#rp-agent-portal #rp-tickets-table th:nth-child(2),
#rp-agent-portal #rp-tickets-table td:nth-child(2) {   /* Client name */
    width: 18% !important;
}


/* ===== AGENT PORTAL – FINAL TICKET LIST COLUMN WIDTHS (PERFECT) ===== */
.rp-agent-portal table {
    table-layout: fixed !important;
    width: 100% !important;
}

/* Ref column – narrow and fixed */
.rp-agent-portal table th:nth-of-type(1),
.rp-agent-portal table td:nth-of-type(1) {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 80px !important;
    white-space: nowrap !important;
}

/* Client column – reasonable fixed width */
.rp-agent-portal table th:nth-of-type(2),
.rp-agent-portal table td:nth-of-type(2) {
    width: 20% !important;
}

/* Subject column – takes everything that’s left (YOUR WINNING CHANGE) */
.rp-agent-portal table th:nth-of-type(3),
.rp-agent-portal table td:nth-of-type(3) {
    width: auto !important;
    min-width: 260px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}
/* ===== DAN - TWEAKS ===== */


@media (min-width: 1400px) {
    .rp-agent-portal {
        max-width: 75vw !important;   /* or 100vw, or 1600px – whatever you like */
        padding: 0 20px;
    }
}

/* Client column – reasonable fixed width */
.rp-admin-portal table th:nth-of-type(1),
.rp-admin-portal table td:nth-of-type(1) {
    width: 20% !important;
}


@media (min-width: 1400px) {
    .rp-admin-portal {
        max-width: 75vw !important;   /* or 100vw, or 1600px – whatever you like */
        padding: 0 20px;
    }
}

/* Subject column – takes everything that’s left (YOUR WINNING CHANGE) */
.rp-admin-portal table th:nth-of-type(3),
.rp-admin-portal table td:nth-of-type(3) {
    width: auto !important;
    min-width: 260px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}









/* Client column – reasonable fixed width */
.rp-client-dashboard table th:nth-of-type(1),
.rp-client-dashboard table td:nth-of-type(1) {
    width: 20% !important;
}


@media (min-width: 1400px) {
    .rp-client-dashboard {
        max-width: 75vw !important;   /* or 100vw, or 1600px – whatever you like */
        padding: 0 20px;
    }
}

/* ============================================================= */
/* SETTINGS TAB ONLY – Right-justify the "Actions" column        */
/* Works with your exact HTML structure – no JS changes needed  */
/* ============================================================= */

.rp-admin-portal .rp-table-wrapper + .rp-settings-form-group {
    /* This rule is just a clever "hook" – it fires only on the Settings tab */
}

.rp-admin-portal .rp-table-wrapper + .rp-settings-form-group ~ .rp-table-wrapper table th:last-child,
.rp-admin-portal .rp-table-wrapper + .rp-settings-form-group ~ .rp-table-wrapper table td:last-child,
.rp-admin-portal h3 + .rp-table-wrapper table th:last-child,
.rp-admin-portal h3 + .rp-table-wrapper table td:last-child {
    text-align: right !important;
    width: 130px !important;           /* narrow fixed width for the Delete button */
    padding-right: 15px !important;
    white-space: nowrap !important;
}

/* Push the actual Delete button all the way to the right */
.rp-admin-portal h3 + .rp-table-wrapper table td:last-child button,
.rp-admin-portal .rp-table-wrapper + .rp-settings-form-group ~ .rp-table-wrapper table td:last-child button {
    float: right;
    margin-left: 10px;
}

/* Optional: make the Name column expand nicely */
.rp-admin-portal h3 + .rp-table-wrapper table th:first-child,
.rp-admin-portal h3 + .rp-table-wrapper table td:first-child,
.rp-admin-portal .rp-table-wrapper + .rp-settings-form-group ~ .rp-table-wrapper table th:first-child,
.rp-admin-portal .rp-table-wrapper + .rp-settings-form-group ~ .rp-table-wrapper table td:first-child {
    width: auto !important;
    text-align: left !important;
}

/* ============================================================= */
/* REPORTS TAB ONLY – Right-justify the Count column            */
/* Works with your exact current HTML – zero side effects      */
/* ============================================================= */

.rp-report-table th:nth-child(2),
.rp-report-table td:nth-child(2) {
    text-align: right !important;
    padding-right: 20px !important;
}

/* Optional: nicer left padding on the Status column */
.rp-report-table th:first-child,
.rp-report-table td:first-child {
    padding-left: 20px !important;
}