/* ============================================================================
   SSOC Shared Styles
   ============================================================================ */

/* --- CSS Variables --- */
:root {
    --primary: #667eea;
    --primary-dark: #764ba2;
    --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --success: #4CAF50;
    --danger: #f44336;
    --warning: #ff9800;
    --info: #2196F3;
    --text: #333;
    --text-light: #666;
    --text-muted: #999;
    --border: #ddd;
    --bg-light: #f5f5f5;
    --radius: 6px;
    --radius-lg: 12px;
    --shadow: 0 2px 8px rgba(0,0,0,0.1);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.15);
    --navbar-height: 56px;
}

/* --- Layout --- */
body.has-navbar {
    padding-top: var(--navbar-height);
}

.ssoc-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px;
    min-height: calc(100vh - var(--navbar-height) - 60px);
}

.ssoc-content.admin-wide {
    max-width: 1400px;
}

/* --- Dateline (thin strip above navbar) --- */
.ssoc-dateline {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--dateline-height);
    background: #1a1f3a;
    color: rgba(255,255,255,0.85);
    font-size: 0.75em;
    padding: 0 12px;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: var(--dateline-height);
}
.ssoc-dateline .dl-heb { flex: 1; text-align: start; }
.ssoc-dateline .dl-eng { flex: 1; text-align: end; }
.ssoc-dateline .dl-lang {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
}
.ssoc-dateline .dl-lang a { display: inline-flex; align-items: center; padding: 0 3px; }
.ssoc-dateline .dl-lang img {
    height: 12px; width: auto; display: block;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.35);
}

/* --- Navbar --- */
.ssoc-navbar {
    background: var(--gradient);
    position: fixed;
    top: var(--dateline-height);
    left: 0;
    right: 0;
    height: var(--navbar-height);
    z-index: 1000;
    display: flex;
    align-items: center;
    padding: 0 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.ssoc-navbar .nav-brand {
    color: white;
    font-size: 1.2em;
    font-weight: bold;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 24px;
}

.ssoc-navbar .nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.ssoc-navbar .nav-links a,
.ssoc-navbar .nav-right a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    padding: 8px 14px;
    border-radius: var(--radius);
    font-size: 0.9em;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

.ssoc-navbar .nav-links a:hover,
.ssoc-navbar .nav-right a:hover {
    background: rgba(255,255,255,0.15);
    color: white;
}

.ssoc-navbar .nav-links a.active {
    background: rgba(255,255,255,0.2);
    color: white;
}

.ssoc-navbar .nav-right {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.ssoc-navbar .nav-separator {
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,0.3);
    margin: 0 8px;
}

/* Dropdown */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 1001;
    margin-top: 4px;
    overflow: hidden;
}

.nav-dropdown-content.right {
    left: auto;
    right: 0;
}

.nav-dropdown:hover .nav-dropdown-content,
.nav-dropdown.open .nav-dropdown-content {
    display: block;
}

.nav-dropdown-content a {
    display: block;
    color: var(--text) !important;
    padding: 10px 16px !important;
    border-radius: 0 !important;
    font-size: 0.9em;
}

.nav-dropdown-content a:hover {
    background: var(--bg-light) !important;
    color: var(--primary) !important;
}

.nav-dropdown-content a i {
    width: 20px;
    text-align: center;
    margin-right: 8px;
    color: var(--text-light);
}

.nav-dropdown-content .dropdown-divider {
    border-top: 1px solid var(--border);
    margin: 4px 0;
}

/* Mobile hamburger */
.nav-hamburger {
    display: none;
    color: white;
    font-size: 1.4em;
    cursor: pointer;
    padding: 8px;
    margin-left: auto;
}

/* User avatar in navbar */
.nav-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.5);
    margin-right: 6px;
}

.nav-avatar-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.85em;
    margin-right: 6px;
}

/* --- Toast Notifications --- */
.toast-container {
    position: fixed;
    top: calc(var(--navbar-height) + 16px);
    right: 16px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 400px;
}

.toast {
    padding: 14px 40px 14px 16px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    animation: toastSlideIn 0.3s ease;
    position: relative;
    font-size: 0.9em;
    line-height: 1.4;
}

.toast.toast-success {
    background: #e8f5e9;
    border-left: 4px solid var(--success);
    color: #2e7d32;
}

.toast.toast-error {
    background: #ffebee;
    border-left: 4px solid var(--danger);
    color: #c62828;
}

.toast.toast-warning {
    background: #fff3e0;
    border-left: 4px solid var(--warning);
    color: #e65100;
}

.toast.toast-info {
    background: #e3f2fd;
    border-left: 4px solid var(--info);
    color: #1565c0;
}

.toast .toast-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1em;
    color: inherit;
    opacity: 0.6;
    padding: 4px;
}

.toast .toast-close:hover {
    opacity: 1;
}

.toast.toast-fade-out {
    animation: toastFadeOut 0.3s ease forwards;
}

@keyframes toastSlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes toastFadeOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

/* --- Stats Cards --- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 16px;
}

.stat-card .stat-icon {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
    color: white;
    flex-shrink: 0;
}

.stat-card .stat-icon.bg-primary { background: var(--gradient); }
.stat-card .stat-icon.bg-success { background: var(--success); }
.stat-card .stat-icon.bg-warning { background: var(--warning); }
.stat-card .stat-icon.bg-danger { background: var(--danger); }
.stat-card .stat-icon.bg-info { background: var(--info); }

.stat-card .stat-info .stat-number {
    font-size: 1.6em;
    font-weight: bold;
    color: var(--text);
    line-height: 1.2;
}

.stat-card .stat-info .stat-label {
    font-size: 0.85em;
    color: var(--text-muted);
}

/* --- Admin Tables --- */
.admin-table-wrapper {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 24px;
}

.admin-table-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.admin-table-header h3 {
    margin: 0;
    font-size: 1.1em;
    color: var(--text);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th {
    background: var(--bg-light);
    padding: 10px 16px;
    text-align: left;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
}

.admin-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.9em;
    color: var(--text);
    vertical-align: middle;
}

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

.admin-table tr:hover td {
    background: #fafafa;
}

/* --- Status Badges --- */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-active, .badge-success { background: #e8f5e9; color: #2e7d32; }
.badge-pending, .badge-warning { background: #fff3e0; color: #e65100; }
.badge-suspended, .badge-danger { background: #ffebee; color: #c62828; }
.badge-deleted { background: #f5f5f5; color: #999; }
.badge-info { background: #e3f2fd; color: #1565c0; }
.badge-admin { background: #f3e5f5; color: #7b1fa2; }

/* --- Action Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius);
    font-size: 0.85em;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.1s;
    white-space: nowrap;
}

.btn:hover { opacity: 0.85; }
.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--gradient); color: white; }
.btn-success { background: var(--success); color: white; }
.btn-danger { background: var(--danger); color: white; }
.btn-warning { background: var(--warning); color: white; }
.btn-info { background: var(--info); color: white; }
.btn-outline {
    background: white;
    color: var(--text);
    border: 1px solid var(--border);
}
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }

.btn-sm { padding: 4px 10px; font-size: 0.8em; }
.btn-xs { padding: 2px 8px; font-size: 0.75em; }

.btn-group { display: inline-flex; gap: 4px; }

/* --- Search & Filter Bar --- */
.filter-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.filter-bar input,
.filter-bar select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9em;
    outline: none;
}

.filter-bar input:focus,
.filter-bar select:focus {
    border-color: var(--primary);
}

.filter-bar input[type="search"] {
    min-width: 220px;
}

/* --- Pagination --- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 16px;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
    font-size: 0.85em;
    transition: all 0.2s;
}

.pagination a:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.pagination .active {
    background: var(--gradient);
    color: white;
    border-color: transparent;
}

.pagination .disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* --- Cards --- */
.card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    margin-bottom: 20px;
    overflow: hidden;
}

.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-header.gradient {
    background: var(--gradient);
    color: white;
    border-bottom: none;
}

.card-body {
    padding: 20px;
}

.card-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--bg-light);
}

/* --- Detail Rows --- */
.detail-row {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.detail-row:last-child { border-bottom: none; }

.detail-label {
    width: 160px;
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.detail-value {
    flex: 1;
    color: var(--text);
    font-size: 0.95em;
}

/* --- Forms in layout pages --- */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--text-light);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.95em;
    outline: none;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* --- Password Strength Meter --- */
.password-meter {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}

.password-meter .meter-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s, background 0.3s;
    width: 0;
}

.password-meter .meter-fill.strength-0 { width: 0; }
.password-meter .meter-fill.strength-1 { width: 20%; background: var(--danger); }
.password-meter .meter-fill.strength-2 { width: 40%; background: #ff5722; }
.password-meter .meter-fill.strength-3 { width: 60%; background: var(--warning); }
.password-meter .meter-fill.strength-4 { width: 80%; background: #8bc34a; }
.password-meter .meter-fill.strength-5 { width: 100%; background: var(--success); }

.password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
}

.password-toggle:hover { color: var(--text); }

/* --- Section Headers --- */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.page-header h2 {
    margin: 0;
    font-size: 1.5em;
    color: var(--text);
}

.page-header .subtitle {
    color: var(--text-muted);
    font-size: 0.85em;
    margin-top: 2px;
}

/* --- Footer (sticky at bottom of viewport) --- */
:root { --footer-height: 52px; }
.ssoc-footer {
    background: #1a1f3a;
    color: rgba(255,255,255,0.75);
    font-size: 0.85em;
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    min-height: var(--footer-height);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
}
body.has-navbar { padding-bottom: var(--footer-height); }
.ssoc-footer .footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ssoc-footer .footer-col { flex: 1; min-width: 220px; }
.ssoc-footer .footer-copy { text-align: center; }
.ssoc-footer .footer-tagline { font-size: 0.9em; opacity: 0.75; }
.ssoc-footer .footer-links { text-align: center; }
.ssoc-footer .footer-links a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    padding: 0 4px;
}
.ssoc-footer .footer-links a:hover { color: white; text-decoration: underline; }
.ssoc-footer .footer-links .sep { opacity: 0.4; }
.ssoc-footer .footer-copy a { color: rgba(255,255,255,0.85); text-decoration: none; }
.ssoc-footer .footer-copy a:hover { text-decoration: underline; }

/* --- Utility --- */
.text-muted { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-primary { color: var(--primary); }
.text-small { font-size: 0.85em; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.gap-1 { gap: 8px; }
.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* --- Confirmation Modal --- */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 3000;
    align-items: center;
    justify-content: center;
}

.modal-overlay.active { display: flex; }

.modal-box {
    background: white;
    border-radius: var(--radius-lg);
    padding: 24px;
    max-width: 450px;
    width: 90%;
    box-shadow: var(--shadow-lg);
}

.modal-box h3 { margin-top: 0; }

.modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 20px;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .ssoc-navbar .nav-links,
    .ssoc-navbar .nav-right .nav-text,
    .ssoc-navbar .nav-separator {
        display: none;
    }

    .nav-hamburger { display: block; }

    .ssoc-navbar .nav-links.mobile-open {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: var(--navbar-height);
        left: 0;
        right: 0;
        background: white;
        box-shadow: var(--shadow-lg);
        padding: 8px 0;
    }

    .ssoc-navbar .nav-links.mobile-open a {
        color: var(--text);
        padding: 12px 20px;
        border-radius: 0;
    }

    .ssoc-navbar .nav-links.mobile-open a:hover {
        background: var(--bg-light);
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-table-wrapper {
        overflow-x: auto;
    }

    .detail-row {
        flex-direction: column;
        gap: 4px;
    }

    .detail-label {
        width: auto;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================================
   RTL Support
   ============================================================================ */
.is-rtl { direction: rtl; text-align: right; }
.is-rtl .ssoc-navbar .nav-brand { margin-right: 0; margin-left: 24px; }
.is-rtl .ssoc-navbar .nav-right { margin-left: 0; margin-right: auto; }
.is-rtl .nav-dropdown-content.right { right: auto; left: 0; }
.is-rtl .nav-dropdown-content:not(.right) { left: auto; right: 0; }
.is-rtl .btn i:first-child { margin-right: 0; margin-left: 6px; }
.is-rtl .btn-group { direction: ltr; } /* keep button order */
.is-rtl input, .is-rtl textarea, .is-rtl select { text-align: right; }
.is-rtl input[type="email"], .is-rtl input[type="url"] { direction: ltr; text-align: left; }
.is-rtl .text-muted { text-align: inherit; }
.is-rtl .modal-actions { flex-direction: row-reverse; }
.is-rtl .page-header { flex-direction: row-reverse; }

/* ============================================================================
   Language Switcher
   ============================================================================ */
.lang-switcher {
    display: flex;
    align-items: center;
    margin-right: 12px;
}
.is-rtl .lang-switcher { margin-right: 0; margin-left: 12px; }
.lang-flag {
    display: inline-flex;
    align-items: center;
    padding: 4px !important;
    border-radius: 4px;
    transition: background 0.2s;
}
.lang-flag img {
    height: 18px;
    width: auto;
    display: block;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.4);
}
.lang-flag:hover { background: rgba(255,255,255,0.15); }
/* Legacy .lang-btn (text fallback) */
.lang-btn {
    color: rgba(255,255,255,0.7) !important;
    padding: 4px 8px !important;
    font-size: 0.75em !important;
    font-weight: 600;
    border-radius: 4px !important;
    text-decoration: none;
    transition: all 0.2s;
    letter-spacing: 0.5px;
}
.lang-btn:hover { color: white !important; background: rgba(255,255,255,0.15); }
.lang-btn.lang-active { color: var(--primary) !important; background: white; }

/* ============================================================================
   Site Cards (Dashboard & Directory)
   ============================================================================ */
.site-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.site-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 20px;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

.site-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.site-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.site-card-logo {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    background: var(--gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.4em;
    flex-shrink: 0;
}

.site-card-logo img {
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    object-fit: cover;
}

.site-card-title {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.site-card-domain {
    font-size: 0.8em;
    color: var(--text-muted);
}

.site-card-desc {
    color: var(--text-light);
    font-size: 0.9em;
    flex: 1;
    margin-bottom: 12px;
    line-height: 1.4;
}

.site-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8em;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.site-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.btn-launch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: var(--gradient);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s;
}
.btn-launch:hover { opacity: 0.9; color: white; }

.btn-join {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--success);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 0.85em;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s;
}
.btn-join:hover { opacity: 0.9; color: white; }

.btn-request {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--info);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 0.85em;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s;
}
.btn-request:hover { opacity: 0.9; color: white; }

.access-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75em;
    font-weight: 500;
}
.access-badge.open { background: #e8f5e9; color: #2e7d32; }
.access-badge.approval { background: #fff3e0; color: #e65100; }
.access-badge.invite { background: #e3f2fd; color: #1565c0; }

/* Section headers */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.section-header h2 {
    font-size: 1.3em;
    color: var(--text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-header h2 i { color: var(--primary); }

/* Empty state */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}
.empty-state i {
    font-size: 3em;
    margin-bottom: 16px;
    display: block;
    opacity: 0.5;
}
.empty-state p { font-size: 1.1em; margin-bottom: 16px; }

/* ============================================================================
   Dashboard Phase 2a Styles
   ============================================================================ */

/* Welcome header */
.page-header { margin-bottom: 24px; }
.page-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
.page-header-actions { flex-shrink: 0; }
.user-welcome {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 250px;
}
.welcome-avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary);
}
.welcome-avatar-placeholder {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    font-weight: bold;
    flex-shrink: 0;
}
.welcome-info h2 { margin: 0 0 4px; font-size: 1.5em; }
.welcome-info p { margin: 2px 0; color: var(--text-light); }

/* Activity rows */
.activity-row {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    gap: 12px;
}
.activity-row:last-child { border-bottom: none; }
.activity-icon {
    width: 35px; height: 35px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85em;
    flex-shrink: 0;
}
.activity-info { flex: 1; }

/* Quick action buttons */
.quick-actions { display: flex; flex-direction: column; gap: 8px; }
.quick-action-btn {
    display: block;
    padding: 12px;
    text-align: center;
    border-radius: 8px;
    text-decoration: none;
    color: white;
    font-weight: 500;
    transition: opacity 0.2s, transform 0.2s;
}
.quick-action-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.quick-action-btn i { margin-right: 6px; }
.is-rtl .quick-action-btn i { margin-right: 0; margin-left: 6px; }
.qa-profile { background: #667eea; }
.qa-edit { background: #764ba2; }
.qa-avatar { background: #11998e; }
.qa-security { background: #e74c3c; }
.qa-directory { background: #2196F3; }

/* Section header with h3 */
.section-header h3 {
    font-size: 1.2em;
    color: var(--text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-header h3 i { color: var(--primary); }

/* Filter tabs */
.filter-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.filter-tab {
    padding: 8px 16px;
    border: 2px solid var(--border);
    border-radius: 20px;
    background: white;
    color: var(--text-light);
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s;
}
.filter-tab:hover { border-color: var(--primary); color: var(--primary); }
.filter-tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}
.filter-tab i { margin-right: 4px; }
.is-rtl .filter-tab i { margin-right: 0; margin-left: 4px; }

/* Input with icon */
.input-group { position: relative; }
.input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}
.is-rtl .input-icon { left: auto; right: 12px; }
.is-rtl .input-group .form-input { padding-left: 12px; padding-right: 35px; }

/* Badge variants */
.badge-info { background: var(--info); color: white; }

/* btn-sm */
.btn-sm { padding: 6px 14px; font-size: 0.85em; }
.btn-outline {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
}
.btn-outline:hover { background: var(--primary); color: white; }

/* ============================================================================
   Site Directory — toggle groups, list view, local badge
   ============================================================================ */
.dir-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 0 0 14px;
    padding: 8px 12px;
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.dir-filter-bar .dir-title {
    margin: 0;
    font-size: 1.15em;
    flex: 0 0 auto;
    padding-inline-end: 8px;
    border-inline-end: 1px solid var(--border);
}
.dir-filter-bar .dir-back { margin-inline-start: auto; }

.btn-toggle-group { display: inline-flex; gap: 0; margin: 0; }
.btn-toggle-group .btn { border-radius: 0; }
.btn-toggle-group .btn:first-child { border-start-start-radius: var(--radius); border-end-start-radius: var(--radius); }
.btn-toggle-group .btn:last-child  { border-start-end-radius:   var(--radius); border-end-end-radius:   var(--radius); }

.badge-local {
    display: inline-block;
    font-size: 0.7em; font-weight: 600;
    padding: 2px 6px; border-radius: 8px;
    background: #fff7e0; color: #8a6d00; border: 1px solid #e9d78a;
    margin: 0 6px; vertical-align: middle;
}

/* List view — compact, 2 lines per site */
.site-list { display: flex; flex-direction: column; gap: 8px; }
.site-list-row {
    display: flex; align-items: center; gap: 12px;
    background: white; border-radius: var(--radius); padding: 10px 14px;
    box-shadow: var(--shadow);
}
.site-list-logo {
    flex: 0 0 40px; width: 40px; height: 40px;
    border-radius: var(--radius);
    background: var(--bg-light); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1em; overflow: hidden;
}
.site-list-logo img { width: 100%; height: 100%; object-fit: cover; }
.site-list-body { flex: 1; min-width: 0; }
.site-list-line1 {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap; font-size: 0.95em;
}
.site-list-line2 {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 2px;
}
.site-list-actions { flex: 0 0 auto; }

@media (max-width: 768px) {
    .site-grid { grid-template-columns: 1fr; }
    .lang-switcher { margin-right: 8px; }
    .is-rtl .lang-switcher { margin-left: 8px; margin-right: 0; }
    .page-header-content { flex-direction: column; align-items: stretch; }
    .user-welcome { flex-direction: column; text-align: center; }
    .filter-tabs { justify-content: center; }
    .w3-twothird, .w3-third { width: 100% !important; }
}

/* ============================================================================
   Two-column layout (body + right sidebar) for logged-in pages.
   Uses aw-row (flex) so dir="rtl" naturally flips the column order; RCOL is
   written first in markup so it lands on the right edge in HE, left edge in EN.
   The body fills the remaining width; its inner .ssoc-content keeps the usual
   max-width + centered look.
   ============================================================================ */
:root { --rcol-width: 380px; }
/* Explicit display:flex so the layout doesn't depend on aw-flex.css's .aw-row
   rule being reachable (remote uiLib could 404 or load late). */
.ssoc-layout-2col {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
}
.ssoc-layout-2col .ssoc-body {
    flex: 1 1 0;       /* basis 0: body takes all leftover width next to RCOL */
    min-width: 0;      /* allow children to shrink below their intrinsic width */
}
/* Body content sits flush next to the RCOL — no auto-centering — but keeps
   the usual 1200px cap so lines stay readable on very wide monitors. */
.ssoc-layout-2col .ssoc-body .ssoc-content {
    margin: 0;
    max-width: 1200px;
    padding: 20px 24px;
}
/* HE (RTL): RCOL is on the right edge; give the body a small breathing room on
   the opposite (left) viewport edge so content doesn't kiss the window frame. */
.is-rtl .ssoc-layout-2col .ssoc-body .ssoc-content { padding-inline-end: 16px; padding-inline-start: 8px; }

.ssoc-rcol {
    flex: 0 0 var(--rcol-width);
    max-width: var(--rcol-width);
    padding: 16px 10px;
    position: sticky;
    top: calc(var(--navbar-height) + var(--dateline-height) + 10px);
    align-self: flex-start;
    max-height: calc(100vh - var(--navbar-height) - var(--dateline-height) - var(--footer-height) - 20px);
    overflow-y: auto;
}

/* RCOL cards */
.rcol-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 12px 14px;
    margin-bottom: 10px;
    font-size: 0.9em;
}

/* Profile block */
.rcol-profile { text-align: center; }
.rcol-avatar {
    width: 64px; height: 64px; margin: 0 auto 6px;
    border-radius: 50%;
    background: var(--bg-light); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8em; overflow: hidden;
    border: 2px solid var(--border);
}
.rcol-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rcol-name { font-weight: 700; font-size: 1.05em; margin-bottom: 6px; color: var(--text); }
.rcol-line { display: flex; align-items: center; gap: 6px; text-align: start; margin: 3px 0; color: var(--text-light); font-size: 0.88em; }
.rcol-line i { width: 14px; text-align: center; color: var(--text-muted); flex-shrink: 0; }
.rcol-line .rcol-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rcol-line .rcol-check { color: var(--success); flex-shrink: 0; }
.rcol-small { font-size: 0.78em !important; color: var(--text-muted) !important; }

/* Stats row */
.rcol-stats { display: flex; justify-content: space-around; padding: 12px 8px; }
.rcol-stat { text-align: center; flex: 1; }
.rcol-stat-icon {
    width: 36px; height: 36px; margin: 0 auto 4px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 0.95em;
}
.rcol-stat-icon.stat-entries { background: var(--success); }
.rcol-stat-icon.stat-sites   { background: var(--info); }
.rcol-stat-icon.stat-oauth   { background: var(--warning); }
.rcol-stat-val { font-weight: 700; font-size: 1.1em; color: var(--text); line-height: 1; }
.rcol-stat-lbl { font-size: 0.72em; color: var(--text-muted); margin-top: 2px; }

/* Icon menu row */
.rcol-iconmenu {
    display: flex;
    justify-content: space-between;
    gap: 2px;
    padding: 8px;
}
.rcol-iconmenu a {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 9px 0;
    color: var(--text-light);
    text-decoration: none;
    border-radius: var(--radius);
    font-size: 1em;
    transition: background 0.15s, color 0.15s;
}
.rcol-iconmenu a:hover { background: var(--bg-light); color: var(--primary); }
.rcol-iconmenu a.active { background: var(--primary); color: white; }
.rcol-iconmenu .rcol-logout { color: var(--danger); }
.rcol-iconmenu .rcol-logout:hover { background: #ffe5e5; color: var(--danger); }

/* ─── Admin RCOL extras ─── */
.rcol-admin-head { text-align: center; padding: 8px 12px; }
.rcol-admin-title { font-weight: 700; color: var(--primary-dark); font-size: 1em; }
.rcol-stat-icon.stat-users { background: var(--primary); }
.rcol-stat-icon.stat-logs  { background: #8e44ad; }
.rcol-stat-link {
    text-decoration: none; color: inherit; display: block; flex: 1;
    border-radius: var(--radius); transition: background 0.15s;
}
.rcol-stat-link:hover { background: var(--bg-light); }
.rcol-pending {
    display: flex; align-items: center; gap: 8px;
    background: #fff3e0; color: #8a4b00;
    padding: 10px 14px; text-decoration: none; font-size: 0.9em;
    border-inline-start: 4px solid var(--warning);
}
.rcol-pending:hover { background: #ffe8c7; }
/* Shared header strip used by Quick Actions / Overview / OAuth Usage / Regs cards */
.rcol-card-head {
    margin: -12px -14px 10px;
    padding: 8px 14px;
    background: #f4f6fb;
    border-bottom: 1px solid var(--border);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    font-weight: 700; font-size: 0.92em; color: var(--text);
}
.rcol-card-head i { margin-inline-end: 6px; color: var(--primary); }

/* Quick Actions list */
.rcol-actions { padding-bottom: 6px; }
.rcol-actions-body { display: flex; flex-direction: column; gap: 4px; }
.rcol-act {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; text-decoration: none;
    color: var(--text); font-size: 0.9em;
    border-radius: var(--radius);
    transition: background 0.12s, color 0.12s;
}
.rcol-act i { width: 18px; text-align: center; color: var(--primary); }
.rcol-act:hover { background: var(--bg-light); color: var(--primary-dark); }
.rcol-act-warn { background: #fff3e0; color: #8a4b00; }
.rcol-act-warn i { color: var(--warning); }
.rcol-act-warn:hover { background: #ffe8c7; color: #6a3a00; }

/* System overview at-a-glance — 3x2 mini grid */
.rcol-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.rov-cell {
    text-align: center;
    padding: 6px 2px;
    border-radius: var(--radius);
    background: var(--bg-light);
}
.rov-icon {
    width: 28px; height: 28px; margin: 0 auto 3px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 0.8em;
}
.rov-icon.ov-active    { background: var(--success); }
.rov-icon.ov-pending   { background: var(--warning); }
.rov-icon.ov-suspended { background: var(--danger); }
.rov-icon.ov-sess      { background: var(--primary); }
.rov-icon.ov-logins    { background: #2e7d6a; }
.rov-icon.ov-failed    { background: #c62828; }
.rov-val { font-weight: 700; font-size: 1em; color: var(--text); line-height: 1; }
.rov-lbl { font-size: 0.66em; color: var(--text-muted); margin-top: 2px; line-height: 1.2; }

/* OAuth Usage list (dashboard variant) */
.rcol-oauthuse-body { display: flex; flex-direction: column; gap: 2px; }
.rcol-oauthuse-body .rcol-oauth-row { padding: 4px 0; }
.rcol-empty { color: var(--text-muted); font-size: 0.85em; text-align: center; padding: 8px 0; }

/* Registrations trend big number */
.rcol-regs-body { text-align: center; padding: 4px 0 2px; }
.rcol-regs-num {
    font-size: 2em; font-weight: 800;
    color: var(--primary-dark); line-height: 1.1;
}
.rcol-regs-sub { font-size: 0.78em; color: var(--text-muted); margin-top: 2px; }

.rcol-oauthcard { padding: 0; overflow: hidden; }
.rcol-oauthcard-head {
    background: #f4f6fb; padding: 10px 14px; font-weight: 700;
    color: var(--text); font-size: 0.92em; border-bottom: 1px solid var(--border);
}
.rcol-oauthcard-body { padding: 10px 14px; font-size: 0.88em; }
.rcol-oauth-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.rcol-oauth-row i { width: 18px; text-align: center; font-size: 1em; }
.rcol-oauth-name { flex: 1; color: var(--text-light); }
.rcol-badge {
    font-size: 0.72em; font-weight: 600; padding: 2px 7px;
    border-radius: 10px; white-space: nowrap;
}
.rcol-badge-ok   { background: #e8f5e9; color: #2e7d32; }
.rcol-badge-warn { background: #fff3e0; color: #e65100; }
.rcol-badge-off  { background: #eceff1; color: #607d8b; }
.rcol-reg {
    margin-top: 10px; padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 0.88em; color: var(--text-light);
}
.rcol-reg-ok  { color: var(--success); margin-inline-end: 4px; }
.rcol-reg-off { color: var(--text-muted); margin-inline-end: 4px; }

/* RCOL filters card */
.rcol-filters-head { font-weight: 700; color: var(--primary-dark); font-size: 0.95em; margin-bottom: 10px; }
.rcol-filter-form label {
    display: block; font-size: 0.78em; color: var(--text-muted);
    font-weight: 600; margin: 8px 0 2px;
}
.rcol-filter-form input,
.rcol-filter-form select {
    width: 100%; box-sizing: border-box;
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 7px 9px; font-size: 0.9em; background: white;
}
.rcol-filter-form input:focus,
.rcol-filter-form select:focus { border-color: var(--primary); outline: none; }
.rcol-filter-actions { margin-top: 10px; display: flex; gap: 6px; justify-content: flex-end; }

/* Admin user-detail: inline action bar below header */
.admin-actionbar {
    display: flex; flex-wrap: wrap; gap: 8px;
    background: white; padding: 10px 14px;
    border-radius: var(--radius); box-shadow: var(--shadow);
    margin-bottom: 16px;
}
.admin-actionbar .aa-form { display: inline-flex; gap: 4px; margin: 0; }
.admin-actionbar .aa-role select {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 4px 8px; font-size: 0.85em; background: white;
}
.admin-actionbar .aa-delete { margin-inline-start: auto; }

/* Collapsible admin sections */
.adm-section > summary {
    cursor: pointer;
    list-style: none;
    display: flex; align-items: center; gap: 8px;
    user-select: none;
}
.adm-section > summary::-webkit-details-marker { display: none; }
.adm-section > summary::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free'; font-weight: 900;
    font-size: 0.8em; opacity: 0.5; margin-inline-start: auto;
    transition: transform 0.2s;
}
.adm-section[open] > summary::after { transform: rotate(180deg); }
.adm-section .adm-section-meta {
    margin-inline-start: 8px; font-size: 0.85em; color: var(--text-muted);
    display: inline-flex; gap: 6px; align-items: center;
}
.adm-section + .adm-section { margin-top: 12px; }

/* User-detail profile strip inside the info section */
.adm-profile-strip {
    display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
    padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.adm-avatar {
    width: 60px; height: 60px; border-radius: 50%; object-fit: cover;
    flex-shrink: 0;
}
.adm-avatar-fallback {
    background: var(--gradient); color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5em; font-weight: 700;
}
.adm-name { font-size: 1.15em; font-weight: 700; color: var(--text); }

/* Members: Add existing-user form — clean 2-row layout on mobile, inline on desktop */
.mem-add-form, .mem-inv-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.mem-add-field, .mem-inv-field { flex: 1; min-width: 160px; }
.mem-add-field label, .mem-inv-field label,
.mem-inv-contacts label {
    display: block; font-size: 0.85em; font-weight: 600;
    color: var(--text-light); margin-bottom: 4px;
}
.mem-add-field input, .mem-add-field select,
.mem-inv-field  input, .mem-inv-field  select,
.mem-inv-contacts textarea {
    width: 100%; box-sizing: border-box;
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 8px 10px; font-size: 0.9em; background: white;
}
.mem-inv-contacts { flex: 1 1 320px; min-width: 260px; }
.mem-inv-contacts textarea { resize: vertical; font-family: inherit; }
.mem-inv-side { flex: 0 0 220px; display: flex; flex-direction: column; gap: 10px; }
.mem-add-submit { display: flex; align-items: flex-end; }

/* My Sites dropdown */
.rcol-mysites details summary {
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}
.rcol-mysites details summary::-webkit-details-marker { display: none; }
.rcol-mysites .rcol-count {
    margin-inline-start: auto;
    background: var(--bg-light);
    color: var(--text-muted);
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 0.8em;
    font-weight: 600;
}
.rcol-mysites-body { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.rcol-mysite {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
    font-size: 0.88em;
}
.rcol-mysite:hover { background: var(--bg-light); }
.rcol-mysite img { width: 20px; height: 20px; border-radius: 3px; object-fit: cover; flex-shrink: 0; }
.rcol-mysite i:first-child { width: 20px; text-align: center; color: var(--text-muted); flex-shrink: 0; }
.rcol-mysite span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcol-mysite-arrow { font-size: 0.7em; color: var(--text-muted); flex-shrink: 0; }
.rcol-empty { color: var(--text-muted); font-size: 0.85em; text-align: center; margin: 8px 0 0; }

@media (max-width: 900px) {
    .ssoc-layout-2col { flex-direction: column; flex-wrap: wrap; }
    .ssoc-rcol {
        flex: 1 1 100%;
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        position: static;
        padding: 12px 12px 0;
        max-height: none;
        overflow: visible;
    }
    /* Body fills full viewport width once stacked below the RCOL.
       No overflow-clipping here — content must genuinely fit (via min-width:0 +
       word-wrap below); clipping would hide the leftmost card edge in RTL. */
    .ssoc-layout-2col .ssoc-body {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
    .ssoc-layout-2col .ssoc-body .ssoc-content,
    .ssoc-layout-2col .ssoc-body .ssoc-content.admin-wide {
        padding: 12px;
        max-width: 100%;
        box-sizing: border-box;
    }
    .admin-table-wrapper:has(.admin-cardable) { max-width: 100%; }
    .admin-table.admin-cardable { max-width: 100%; }

    /* Admin-specific mobile adjustments (kick in at 900 so they align with the
       RCOL-stack breakpoint — the 768 rule below was too late). */
    .page-header-content { flex-direction: column; align-items: stretch; }
    .page-header-actions {
        display: flex; flex-wrap: wrap; gap: 6px;
        justify-content: flex-start;
    }
    /* ═══ Sledgehammer: kill any intrinsic min-width in the logged-in column.
       This catches form inputs, textareas, cells, images, flex children — any
       descendant that was trying to be wider than its share of the viewport. */
    .ssoc-layout-2col .ssoc-body *,
    .ssoc-layout-2col .ssoc-rcol *,
    .ssoc-layout-2col .ssoc-body img,
    .ssoc-layout-2col .ssoc-body table,
    .ssoc-layout-2col .ssoc-body tr,
    .ssoc-layout-2col .ssoc-body td,
    .ssoc-layout-2col .ssoc-body th {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    /* Admin tables that DON'T carry .admin-cardable (none in practice) would
       get horizontal scroll via their own wrapper only if explicitly opted in. */
    .admin-table.admin-cardable, .admin-table.admin-cardable tbody,
    .admin-table.admin-cardable tr, .admin-table.admin-cardable td { display: block; width: 100%; box-sizing: border-box; }
    .admin-table.admin-cardable thead { display: none; }
    .admin-table.admin-cardable tr {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 10px 12px;
        margin-bottom: 8px;
        background: white;
    }
    .admin-table.admin-cardable td {
        border: none;
        padding: 4px 0;
        font-size: 0.9em;
        display: grid;
        grid-template-columns: 90px 1fr;
        column-gap: 10px;
        align-items: center;
    }
    .admin-table.admin-cardable td::before {
        content: attr(data-label);
        color: var(--text-muted);
        font-size: 0.8em;
        font-weight: 600;
    }
    .admin-table.admin-cardable td[data-label=""]::before,
    .admin-table.admin-cardable td:not([data-label])::before { content: ''; display: none; }
    .admin-table.admin-cardable td[data-label=""],
    .admin-table.admin-cardable td:not([data-label]) { grid-template-columns: 1fr; }
    .admin-table.admin-cardable tr:hover td { background: transparent; }

    /* ─── Compact member card (mobile) ─── */
    .admin-cardable.compact-members tr {
        display: grid;
        /* fractional columns — never "auto" (which = max-content = overflows).
           1fr columns always share remaining space regardless of content size. */
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 0.6fr);
        grid-template-rows: auto auto;
        gap: 2px 6px;
        padding: 8px 10px;
        min-width: 0;
        max-width: 100%;
    }
    .admin-cardable.compact-members td {
        display: block;
        padding: 0;
        font-size: 0.88em;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .admin-cardable.compact-members td::before { display: none; content: none; }
    .admin-cardable.compact-members td:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
    .admin-cardable.compact-members td:nth-child(2) {
        grid-area: 1 / 2 / 2 / 3;
        justify-self: end;
        font-size: 0.8em;
        color: var(--text-light);
        white-space: nowrap;
    }
    .admin-cardable.compact-members td:nth-child(4) { grid-area: 1 / 3 / 2 / 4; justify-self: end; }
    .admin-cardable.compact-members td:nth-child(6) {
        grid-area: 2 / 1 / 3 / 2;
        color: var(--text-muted);
        font-size: 0.78em;
        align-self: center;
    }
    .admin-cardable.compact-members td:nth-child(3) { grid-area: 2 / 2 / 3 / 3; justify-self: end; }
    .admin-cardable.compact-members td:nth-child(7) { grid-area: 2 / 3 / 3 / 4; justify-self: end; }
    .admin-cardable.compact-members td:nth-child(5) { display: none; }

    /* ─── Compact users card (mobile) — same layout as compact-members ─── */
    .admin-cardable.compact-users tr {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 0.6fr);
        grid-template-rows: auto auto;
        gap: 2px 6px;
        padding: 8px 10px;
        min-width: 0;
        max-width: 100%;
    }
    .admin-cardable.compact-users td {
        display: block;
        padding: 0;
        font-size: 0.88em;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .admin-cardable.compact-users td::before { display: none; content: none; }
    /* Users cells: 1 Username, 2 Email, 3 Name, 4 Status, 5 Role, 6 OAuth, 7 Logins, 8 Registered, 9 Actions */
    .admin-cardable.compact-users td:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
    .admin-cardable.compact-users td:nth-child(2) {
        grid-area: 1 / 2 / 2 / 3;
        justify-self: end;
        font-size: 0.8em;
        color: var(--text-light);
        white-space: nowrap;
    }
    .admin-cardable.compact-users td:nth-child(4) { grid-area: 1 / 3 / 2 / 4; justify-self: end; }
    .admin-cardable.compact-users td:nth-child(8) {
        grid-area: 2 / 1 / 3 / 2;
        color: var(--text-muted);
        font-size: 0.78em;
        align-self: center;
    }
    .admin-cardable.compact-users td:nth-child(5) { grid-area: 2 / 2 / 3 / 3; justify-self: end; }
    .admin-cardable.compact-users td:nth-child(9) { grid-area: 2 / 3 / 3 / 4; justify-self: end; }
    .admin-cardable.compact-users td:nth-child(3),
    .admin-cardable.compact-users td:nth-child(6),
    .admin-cardable.compact-users td:nth-child(7) { display: none; }

    /* ─── Compact site card (mobile) ─── */
    .admin-cardable.compact-sites tr {
        display: grid;
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
        grid-template-rows: auto auto auto;
        gap: 2px 6px;
        padding: 8px 10px;
        min-width: 0;
        max-width: 100%;
    }
    .admin-cardable.compact-sites td {
        display: block;
        padding: 0;
        font-size: 0.85em;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .admin-cardable.compact-sites td::before { display: none; content: none; }
    .admin-cardable.compact-sites td:nth-child(1) {
        grid-area: 1 / 1 / 2 / 2;
        font-weight: 700;
        font-size: 0.95em;
    }
    .admin-cardable.compact-sites td:nth-child(2) {
        grid-area: 1 / 2 / 2 / 3;
        justify-self: end;
        white-space: nowrap;
    }
    .admin-cardable.compact-sites td:nth-child(3) {
        grid-area: 2 / 1 / 3 / 2;
        color: var(--text-light);
        font-size: 0.82em;
    }
    .admin-cardable.compact-sites td:nth-child(5) { grid-area: 2 / 2 / 3 / 3; justify-self: end; }
    .admin-cardable.compact-sites td:nth-child(8) {
        grid-area: 3 / 1 / 4 / 3;
        padding-top: 6px;
        margin-top: 4px;
        border-top: 1px solid var(--border);
    }
    .admin-cardable.compact-sites td:nth-child(8) .btn-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 6px;
        max-width: 100%;
    }
    /* Inner flex wrappers must shrink below intrinsic width. */
    .admin-cardable.compact-members td > *,
    .admin-cardable.compact-users td > *,
    .admin-cardable.compact-sites td > * {
        min-width: 0;
        max-width: 100%;
    }
    /* Long strings (emails, URLs, usernames) — break anywhere to fit the
       card column rather than pushing the row wider than the viewport. */
    .admin-cardable.compact-members td,
    .admin-cardable.compact-users td,
    .admin-cardable.compact-sites td,
    .admin-cardable.compact-members td a,
    .admin-cardable.compact-users td a,
    .admin-cardable.compact-sites td a {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    /* Email column specifically — remove white-space:nowrap that forces
       single-line and pushes the card wide. */
    .admin-cardable.compact-members td:nth-child(2),
    .admin-cardable.compact-users td:nth-child(2),
    .admin-cardable.compact-sites td:nth-child(2) {
        white-space: normal;
    }
    .admin-cardable.compact-sites td:nth-child(4),
    .admin-cardable.compact-sites td:nth-child(6),
    .admin-cardable.compact-sites td:nth-child(7) { display: none; }
    .filter-bar { flex-direction: column; align-items: stretch; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat-card { padding: 14px; }
    .stat-card .stat-number { font-size: 1.4em; }
    .dir-filter-bar { flex-direction: column; align-items: stretch; gap: 8px; }
    .dir-filter-bar .dir-title { border-inline-end: none; padding-inline-end: 0; }
    .dir-filter-bar .dir-back { margin-inline-start: 0; }
    .btn-toggle-group { flex-wrap: wrap; }
}
@media (max-width: 520px) {
    .stats-grid { grid-template-columns: 1fr; }
    .admin-table { min-width: 480px; }
}

/* ============================================================================
   Layout frame, unlogged gradient, hero, landing features
   ============================================================================ */
:root { --dateline-height: 22px; }
/* Prevent the whole page from ever becoming horizontally scrollable. The cards
   DO fit inside; this is a final safety net for any widget that briefly claims
   extra width during reflow (fixed-position navbar/dateline/footer). */
html, body { max-width: 100vw; overflow-x: clip; }
body.has-navbar {
    padding-top: calc(var(--navbar-height) + var(--dateline-height));
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body.is-logged { background: var(--bg-light); }
body.is-unlogged { background: var(--gradient); background-attachment: fixed; }
.ssoc-main { flex: 1; }
/* Home page (unlogged) — flush to the start edge (RTL→right / LTR→left), wide. */
.ssoc-content.landing-wide {
    max-width: 1320px;
    margin-inline-start: 0;
    margin-inline-end: auto;
    padding-inline-start: 16px;
}

/* Navbar logo image */
.ssoc-navbar .nav-brand { padding: 4px 12px; }
.ssoc-navbar .nav-logo {
    height: 50px;
    display: block;
    background: white;
    border-radius: 6px;
    padding:0;
}

/* User icon sits right after the logo (logged-in only) */
.ssoc-navbar .nav-user { margin: 0 6px; }
.ssoc-navbar .nav-user-trigger {
    display: inline-flex;
    align-items: center;
    padding: 4px !important;
    border-radius: 50%;
}
.ssoc-navbar .nav-user-trigger:hover { background: rgba(255,255,255,0.15); }
.ssoc-navbar .nav-user .nav-avatar,
.ssoc-navbar .nav-user .nav-avatar-placeholder {
    margin: 0;                  /* drop the 6px right-margin that assumed a trailing name */
    width: 34px; height: 34px;
}

/* Unlogged CTA buttons in nav */
.ssoc-navbar .nav-cta {
    background: white;
    color: var(--primary) !important;
    padding: 6px 14px !important;
    border-radius: 20px;
    font-weight: 600;
    margin-left: 6px;
}
.is-rtl .ssoc-navbar .nav-cta { margin-left: 0; margin-right: 6px; }
.ssoc-navbar .nav-cta:hover { background: rgba(255,255,255,0.9) !important; color: var(--primary-dark) !important; }
.ssoc-navbar .nav-cta-outline {
    background: transparent;
    color: white !important;
    border: 1.5px solid rgba(255,255,255,0.6);
}
.ssoc-navbar .nav-cta-outline:hover { background: rgba(255,255,255,0.15) !important; color: white !important; border-color: white; }

/* ─────────────────────────────────────────────────────────────────────
   Home page (/)  — unlogged: 2-col hero+sites; logged: stack of cards
   beside the master.tpl RCOL panel.
   ───────────────────────────────────────────────────────────────────── */

.home-2col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 24px;
    align-items: start;
    margin: 24px 0;
}

/* LEFT — hero on the purple gradient body */
.home-left {
    color: white;
    text-align: center;
    padding: 24px 12px;
}
.home-left .home-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 18px;
}
.home-left .btn-hero {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.02em;
    transition: transform 0.15s, box-shadow 0.15s;
}
.home-left .btn-hero:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.home-left .btn-hero.btn-white { background: white; color: var(--primary); }
.home-left .btn-hero.btn-ghost { background: transparent; color: white; border: 2px solid white; }

.home-welcome {
    font-size: 1.55em;
    font-weight: 700;
    margin: 14px 0 6px;
    line-height: 1.25;
}
.home-tagline {
    margin: 0 auto 16px;
    max-width: 460px;
    font-size: 1em;
    opacity: 0.92;
    line-height: 1.5;
}
.home-logo {
    max-width: 100%;
    width: 480px;
    height: auto;
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    margin: 8px 0 20px;
}

.home-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 18px;
}
.home-feature {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    color: white;
    border-radius: var(--radius-lg);
    padding: 18px 12px;
    text-align: center;
    backdrop-filter: blur(4px);
}
.home-feature .feat-icon { font-size: 1.7em; margin-bottom: 8px; opacity: 0.95; }
.home-feature .feat-title { font-size: 1.05em; font-weight: 700; margin-bottom: 4px; }
.home-feature .feat-desc  { font-size: 0.85em; opacity: 0.88; line-height: 1.4; }

/* RIGHT — sites directory card on white */
.home-right { padding: 0; }

.sites-card {
    background: white;
    color: var(--text);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 18px 18px 22px;
}
.sites-title {
    margin: 0 0 14px;
    color: var(--primary-dark);
    font-size: 1.25em;
    font-weight: 700;
    text-align: center;
}
.sites-3col {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.sites-col-h {
    margin: 0 0 10px;
    padding: 6px 8px;
    font-size: 0.92em;
    font-weight: 700;
    text-align: center;
    color: white;
    border-radius: 6px;
    letter-spacing: 0.02em;
}
.sites-col-h.sc-direct { background: #2e7d6a; }
.sites-col-h.sc-login  { background: var(--primary); }
.sites-col-h.sc-invite { background: var(--primary-dark); }
.sites-col-h i { margin-inline-end: 6px; }

/* Individual site card (link) */
.slink-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    margin-bottom: 8px;
    background: #f7f7fb;
    border: 1px solid #ececf3;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
    transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.slink-card:hover {
    transform: translateY(-1px);
    border-color: var(--primary);
    box-shadow: var(--shadow);
}
.slink-logo {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    object-fit: contain;
    background: white;
    border: 1px solid #e6e6ee;
    border-radius: 6px;
    padding: 2px;
}
.slink-body { min-width: 0; flex: 1; }
.slink-title {
    font-weight: 700;
    font-size: 0.92em;
    color: var(--primary-dark);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.slink-desc {
    font-size: 0.78em;
    color: var(--text-light);
    line-height: 1.3;
    margin-top: 2px;
}

/* "local" pill — emitted only for admin sessions where the slink has a
   local_url. Hidden by default; revealed when JS confirms the home-PC probe
   and adds .is-home-pc on body (uiW3/auth/home.tpl). When visible, the card's
   href is also swapped to data-local in JS, so the click goes to the .c1 host. */
.slink-local-tag {
    display: none;
    margin-inline-start: 6px;
    padding: 1px 7px;
    background: #2e7d6a;
    color: white;
    font-size: 0.66em;
    font-weight: 700;
    border-radius: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    align-self: center;
    flex: 0 0 auto;
}
body.is-home-pc .slink-local-tag { display: inline-block; }
body.is-home-pc .slink-card[data-local] {
    border-color: #b8d8d0;
    background: #f0faf6;
}

/* Admin-only RCOL "Home PC mode" toggle card */
.rcol-homepc { padding: 12px 14px; }
.rcol-homepc-row {
    display: flex; align-items: center; gap: 8px;
    margin-top: 8px;
}
.rcol-homepc-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--text-muted);
    flex: 0 0 auto;
}
.rcol-homepc.rcol-homepc-on .rcol-homepc-dot,
body.is-home-pc .rcol-homepc .rcol-homepc-dot { background: #2e7d6a; box-shadow: 0 0 0 3px rgba(46,125,106,0.18); }
.rcol-homepc-label {
    flex: 1; min-width: 0;
    font-size: 0.82em; color: var(--text-light); line-height: 1.25;
}
.rcol-homepc-btn {
    flex: 0 0 auto;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: white;
    color: var(--text);
    font-size: 0.78em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.rcol-homepc-btn:hover { border-color: var(--primary); color: var(--primary); }
.rcol-homepc.rcol-homepc-on .rcol-homepc-btn,
body.is-home-pc .rcol-homepc .rcol-homepc-btn {
    border-color: #2e7d6a; color: #2e7d6a;
}
.rcol-homepc.rcol-homepc-on .rcol-homepc-btn:hover,
body.is-home-pc .rcol-homepc .rcol-homepc-btn:hover {
    background: #2e7d6a; color: white;
}

/* Logged-in home — sits inside master.tpl 2-col with RCOL */
.home-logged { display: flex; flex-direction: column; gap: 16px; }
.home-welcome-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 18px 20px;
}
.home-welcome-card h2 { margin: 0 0 6px; color: var(--primary-dark); font-size: 1.2em; }
.home-welcome-card .muted { margin: 0; color: var(--text-light); }

/* Responsive */
@media (max-width: 980px) {
    .home-2col { grid-template-columns: 1fr; }
    .sites-3col { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .home-features { grid-template-columns: 1fr; }
}

/* Legal pages — content styling */
.legal-page { max-width: 820px; padding: 24px 28px; }
.legal-page h2 { color: var(--primary-dark); margin-bottom: 8px; }
.legal-page h4 { color: var(--primary); margin-top: 22px; margin-bottom: 6px; }
.legal-page p, .legal-page li { line-height: 1.65; }
.legal-page ul, .legal-page ol { padding-inline-start: 22px; }
.legal-page a { color: var(--primary); text-decoration: none; }
.legal-page a:hover { text-decoration: underline; }
/* Unlogged = purple-gradient body → give the legal text a readable white card. */
.is-unlogged .legal-page {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    margin: 24px auto;
}

/* Auth card on purple background */
.auth-wrap {
    max-width: 460px;
    margin: 32px auto;
    padding: 0 16px;
}
.auth-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    box-shadow: var(--shadow-lg);
}
.auth-card h2 { margin-top: 0; text-align: center; color: var(--primary-dark); }
.auth-card .subtitle { text-align: center; color: var(--text-muted); margin-bottom: 24px; }

@media (max-width: 600px) {
    /* Keep footer single-row on mobile so fixed height stays correct */
    .ssoc-footer .footer-links { display: none; }
    .ssoc-footer .footer-col { min-width: 0; }
    .ssoc-footer .footer-col:first-child { font-size: 0.8em; }
}