/* ═══════════════════════════════════════════════════════
   Joticle Authenticated Backend — New Design System
   Purple-accent corporate theme using --joticle-* tokens
   ═══════════════════════════════════════════════════════ */

/* ─── Detail Grid ─── */
.detail-grid-joticle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--joticle-space-xl);
    margin-bottom: var(--joticle-space-xl);
}

.detail-grid-joticle .card-joticle-full {
    grid-column: 1 / -1;
}

@media (max-width: 768px) {
    .detail-grid-joticle {
        grid-template-columns: 1fr;
    }
}

/* ─── Detail Rows ─── */
.detail-row-joticle {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f5f9;
}

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

.detail-label-joticle {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--joticle-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.detail-value-joticle {
    font-size: 0.875rem;
    color: var(--joticle-text-primary);
    font-weight: 500;
    text-align: right;
}

.detail-value-large-joticle {
    font-size: 2rem;
    font-weight: 700;
    color: var(--joticle-text-primary);
}

/* ─── Back Link ─── */
.back-link-joticle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--joticle-text-secondary);
    text-decoration: none;
    font-weight: 600;
    margin-bottom: var(--joticle-space-lg);
    transition: var(--joticle-transition);
}

.back-link-joticle:hover {
    color: var(--joticle-accent);
    gap: 0.75rem;
}

/* ─── Role Badges ─── */
.role-badge-joticle {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--joticle-radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.role-officer { background: rgba(139, 92, 246, 0.15); color: #7c3aed; }
.role-founder { background: rgba(59, 130, 246, 0.15); color: #2563eb; }
.role-investor { background: rgba(100, 116, 139, 0.15); color: #475569; }
.role-employee { background: rgba(16, 185, 129, 0.15); color: #059669; }
.role-advisor { background: rgba(245, 158, 11, 0.15); color: #d97706; }
.role-consultant { background: rgba(236, 72, 153, 0.15); color: #be185d; }
.role-board { background: rgba(239, 68, 68, 0.15); color: #dc2626; }

/* ─── Ownership Bar ─── */
.ownership-bar-joticle {
    width: 100px;
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
}

.ownership-bar-fill-joticle {
    height: 100%;
    background: var(--joticle-accent-gradient);
    border-radius: 3px;
}

/* ─── Charts ─── */
.charts-grid-joticle {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--joticle-space-lg);
    margin-bottom: var(--joticle-space-xl);
}

@media (max-width: 1024px) {
    .charts-grid-joticle {
        grid-template-columns: 1fr;
    }
}

.chart-card-joticle {
    background: var(--joticle-card-bg);
    border-radius: var(--joticle-card-radius);
    padding: var(--joticle-space-lg);
    box-shadow: var(--joticle-card-shadow);
    border: 1px solid var(--joticle-card-border);
}

.chart-card-joticle h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--joticle-text-primary);
    margin: 0 0 var(--joticle-space-md) 0;
}

.chart-container-joticle {
    position: relative;
    height: 250px;
}

.chart-legend-joticle {
    display: flex;
    justify-content: center;
    gap: var(--joticle-space-lg);
    margin-top: var(--joticle-space-md);
    flex-wrap: wrap;
}

.legend-item-joticle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--joticle-text-secondary);
}

.legend-dot-joticle {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.legend-dot-for { background: #22c55e; }
.legend-dot-against { background: #ef4444; }
.legend-dot-abstain { background: #9ca3af; }

/* ─── Vote Badges ─── */
.vote-badge-joticle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.vote-badge-for { background: #dcfce7; color: #166534; }
.vote-badge-against { background: #fee2e2; color: #991b1b; }
.vote-badge-abstain { background: #f3f4f6; color: #4b5563; }

/* ─── Sort Controls ─── */
.sort-btn-joticle {
    padding: 0.5rem 1rem;
    border: 2px solid var(--joticle-card-border);
    border-radius: var(--joticle-radius-sm);
    background: var(--joticle-card-bg);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--joticle-text-secondary);
    cursor: pointer;
    text-decoration: none;
    transition: var(--joticle-transition);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.sort-btn-joticle:hover {
    border-color: var(--joticle-accent);
    color: var(--joticle-accent);
}

.sort-btn-joticle.active {
    background: var(--joticle-accent);
    border-color: var(--joticle-accent);
    color: #ffffff;
}

/* ─── Token Display ─── */
.token-display-joticle {
    background: #f8fafc;
    padding: var(--joticle-space-md);
    border-radius: var(--joticle-radius-md);
    font-family: monospace;
    word-break: break-all;
    margin-top: 0.5rem;
    border: 2px dashed var(--joticle-card-border);
}

/* ─── Notes Textarea ─── */
.notes-textarea-joticle {
    width: 100%;
    padding: var(--joticle-space-md);
    border: 2px solid var(--joticle-card-border);
    border-radius: var(--joticle-radius-md);
    font-size: 0.875rem;
    font-family: inherit;
    resize: vertical;
    min-height: 120px;
}

.notes-textarea-joticle:focus {
    outline: none;
    border-color: var(--joticle-accent);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

/* ─── Stats Row (mini stats) ─── */
.stats-row-joticle {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--joticle-space-md);
    margin-bottom: var(--joticle-space-xl);
}

.stat-mini-joticle {
    background: var(--joticle-card-bg);
    padding: var(--joticle-space-md) var(--joticle-space-lg);
    border-radius: var(--joticle-radius-md);
    box-shadow: var(--joticle-card-shadow);
    border: 1px solid var(--joticle-card-border);
}

.stat-mini-label-joticle {
    font-size: 0.75rem;
    color: var(--joticle-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin: 0;
}

.stat-mini-value-joticle {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--joticle-text-primary);
    margin: 0.25rem 0 0 0;
}

/* ─── Response Preview ─── */
.response-preview-joticle {
    font-size: 0.875rem;
    color: var(--joticle-text-secondary);
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── Priority Indicator ─── */
.priority-indicator-joticle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ─── Login Page ─── */
.login-body-joticle {
    font-family: var(--joticle-font), var(--joticle-font-system);
    margin: 0;
    padding: 0;
    background: var(--joticle-sidebar-bg);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-container-joticle {
    max-width: 450px;
    width: 100%;
    padding: var(--joticle-space-xl);
}

.login-card-joticle {
    background: var(--joticle-card-bg);
    border-radius: var(--joticle-radius-xl);
    padding: var(--joticle-space-2xl);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.login-header-joticle {
    text-align: center;
    margin-bottom: var(--joticle-space-xl);
}

.login-header-joticle h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--joticle-text-primary);
    margin: 0 0 0.5rem 0;
}

.login-subtitle-joticle {
    font-size: 0.875rem;
    color: var(--joticle-text-secondary);
    margin: 0;
}

.login-error-joticle {
    background: rgba(239, 68, 68, 0.1);
    border-left: 4px solid var(--joticle-danger);
    color: #dc2626;
    padding: var(--joticle-space-md);
    border-radius: var(--joticle-radius-sm);
    margin-bottom: var(--joticle-space-lg);
    font-size: 0.875rem;
}

.login-btn-joticle {
    width: 100%;
    padding: var(--joticle-space-md);
    background: var(--joticle-accent-gradient);
    color: #ffffff;
    border: none;
    border-radius: var(--joticle-radius-md);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--joticle-transition-slow);
}

.login-btn-joticle:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.3);
}

.login-checkbox-joticle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--joticle-space-lg);
}

.login-checkbox-joticle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--joticle-accent);
}

.login-checkbox-label-joticle {
    font-size: 0.875rem;
    color: var(--joticle-text-secondary);
    cursor: pointer;
}

/* ─── Dashboard Page ─── */
.dash-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-bottom: 2rem; }
.dash-card { background: white; border-radius: 12px; padding: 1.25rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-top: 4px solid; text-decoration: none; color: inherit; transition: all 0.2s ease; display: block; }
.dash-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); color: inherit; }
.dash-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.dash-card-abbr { font-size: 0.6875rem; font-weight: 700; padding: 0.125rem 0.5rem; border-radius: 4px; color: white; }
.dash-card-icon { font-size: 1.25rem; opacity: 0.4; }
.dash-card-count { font-size: 2.25rem; font-weight: 700; color: #1e293b; line-height: 1; margin-bottom: 0.25rem; }
.dash-card-label { font-size: 0.8125rem; font-weight: 600; color: #1e293b; margin: 0; }
.dash-card-sub { font-size: 0.6875rem; color: #64748b; margin: 0; }

.radiator { background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); overflow: hidden; }
.radiator-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid #f1f5f9; }
.radiator-header h2 { font-size: 1rem; font-weight: 700; color: #1e293b; margin: 0; }
.radiator-live { display: flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; font-weight: 600; color: #10b981; }
.radiator-dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; animation: pulse-dot 2s infinite; }
.radiator table { width: 100%; border-collapse: collapse; }
.radiator th { padding: 0.625rem 1rem; font-size: 0.6875rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; text-align: left; border-bottom: 1px solid #f1f5f9; }
.radiator td { padding: 0.75rem 1rem; font-size: 0.8125rem; color: #334155; border-bottom: 1px solid #f8fafc; }
.radiator tr:hover { background: #f8fafc; }
.tenant-badge-sm { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 4px; font-size: 0.625rem; font-weight: 600; background: rgba(100,116,139,0.12); color: #475569; }
.type-badge-sm { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 4px; font-size: 0.625rem; font-weight: 600; }
.type-bug { background: rgba(239,68,68,0.12); color: #dc2626; }
.type-enhancement { background: rgba(59,130,246,0.12); color: #2563eb; }
.type-feedback { background: rgba(139,92,246,0.12); color: #7c3aed; }
.page-url-trunc { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; color: #94a3b8; }
.time-ago { font-size: 0.75rem; color: #64748b; white-space: nowrap; }
.empty-radiator { text-align: center; padding: 2.5rem 1rem; color: #94a3b8; }
.empty-radiator i { font-size: 2rem; opacity: 0.3; display: block; margin-bottom: 0.75rem; }
.empty-radiator p { margin: 0; font-size: 0.875rem; }
.dash-card-staged { border-top-color: #f59e0b; }
.dash-card-abbr-staged { background: #f59e0b; }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ─── Login Page ─── */
.login-page-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #1a4a7a 0%, #134163 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-page-container {
    max-width: 450px;
    width: 100%;
    padding: 2rem;
}

.login-page-card {
    background: white;
    border-radius: 16px;
    padding: 3rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.login-page-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-page-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.5rem 0;
}

.login-page-subtitle {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
}

.login-page-form-group {
    margin-bottom: 1.5rem;
}

.login-page-form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.login-page-form-control {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: inherit;
    box-sizing: border-box;
}

.login-page-form-control:focus {
    outline: none;
    border-color: #7a9b3f;
    box-shadow: 0 0 0 3px rgba(122, 155, 63, 0.1);
}

.login-page-error-message {
    background: rgba(239, 68, 68, 0.1);
    border-left: 4px solid #ef4444;
    color: #dc2626;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}

.login-page-btn-primary {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #1a4a7a 0%, #134163 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.login-page-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(26, 74, 122, 0.3);
}

.login-page-checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.login-page-checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.login-page-checkbox-label {
    font-size: 0.875rem;
    color: #475569;
    cursor: pointer;
}

/* ─── VoteResults Page ─── */
.vr-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.vr-stat-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
}

.vr-stat-card h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vr-stat-card .value {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.vr-stat-card .subtext {
    font-size: 0.875rem;
    color: #64748b;
    margin-top: 0.25rem;
}

.vr-charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.vr-chart-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
}

.vr-chart-card h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 1rem 0;
}

.vr-chart-container {
    position: relative;
    height: 250px;
}

.vr-chart-legend {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.vr-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #475569;
}

.vr-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.vr-legend-dot.for { background: #22c55e; }
.vr-legend-dot.against { background: #ef4444; }
.vr-legend-dot.abstain { background: #9ca3af; }

.vr-table-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.vr-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.vr-table-header h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.vr-sort-controls {
    display: flex;
    gap: 0.5rem;
}

.vr-sort-btn {
    padding: 0.5rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    background: white;
    font-size: 0.875rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.vr-sort-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}

.vr-sort-btn.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

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

.vr-votes-table th {
    background: #f8fafc;
    padding: 0.875rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #e2e8f0;
}

.vr-votes-table td {
    padding: 1rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.875rem;
    color: #1e293b;
}

.vr-votes-table tr:hover {
    background: #f8fafc;
}

.vr-vote-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.vr-vote-badge.for { background: #dcfce7; color: #166534; }
.vr-vote-badge.against { background: #fee2e2; color: #991b1b; }
.vr-vote-badge.abstain { background: #f3f4f6; color: #4b5563; }

.vr-empty-state {
    text-align: center;
    padding: 3rem;
    color: #64748b;
}

.vr-empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.vr-value-active { color: #22c55e; }

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

    .vr-charts-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .vr-table-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .vr-votes-table {
        display: block;
        overflow-x: auto;
    }
}

/* ─── Shareholders Index Page ─── */
.sh-page-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.sh-filters-container {
    display: flex;
    gap: 1rem;
    flex: 1;
    flex-wrap: wrap;
}

.sh-search-box {
    flex: 1;
    min-width: 300px;
    position: relative;
}

.sh-search-box input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.sh-search-box input:focus {
    outline: none;
    border-color: #7a9b3f;
    box-shadow: 0 0 0 3px rgba(122, 155, 63, 0.1);
}

.sh-search-box i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
}

.sh-filter-select {
    padding: 0.75rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
    min-width: 150px;
    transition: all 0.3s ease;
}

.sh-filter-select:focus {
    outline: none;
    border-color: #7a9b3f;
    box-shadow: 0 0 0 3px rgba(122, 155, 63, 0.1);
}

.sh-btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(122, 155, 63, 0.3);
    white-space: nowrap;
}

.sh-btn-primary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(122, 155, 63, 0.4);
    color: white;
}

.sh-btn-clear {
    background: #64748b;
}

.sh-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.sh-stat-mini {
    background: white;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.sh-stat-mini-label {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin: 0;
}

.sh-stat-mini-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0.25rem 0 0 0;
}

.sh-data-table {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.sh-data-table table {
    width: 100%;
    margin: 0;
}

.sh-data-table th {
    background: #f8f9fa;
    padding: 1rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.sh-data-table td {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}

.sh-data-table tr:hover {
    background: #f8f9fa;
}

.sh-shareholder-name {
    font-weight: 600;
    color: #1e293b;
    display: block;
    margin-bottom: 0.25rem;
}

.sh-shareholder-email {
    font-size: 0.875rem;
    color: #64748b;
}

.sh-role-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.sh-role-officer { background: rgba(122, 155, 63, 0.15); color: #5d7830; }
.sh-role-founder { background: rgba(26, 74, 122, 0.15); color: #1a4a7a; }
.sh-role-investor { background: rgba(100, 116, 139, 0.15); color: #475569; }
.sh-role-employee { background: rgba(59, 130, 246, 0.15); color: #2563eb; }
.sh-role-advisor { background: rgba(139, 92, 246, 0.15); color: #7c3aed; }
.sh-role-consultant { background: rgba(236, 72, 153, 0.15); color: #be185d; }
.sh-role-board { background: rgba(245, 158, 11, 0.15); color: #d97706; }

.sh-badge {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.sh-badge-success { background: rgba(16, 185, 129, 0.15); color: #059669; }
.sh-badge-warning { background: rgba(245, 158, 11, 0.15); color: #d97706; }
.sh-badge-danger { background: rgba(239, 68, 68, 0.15); color: #dc2626; }
.sh-badge-info { background: rgba(59, 130, 246, 0.15); color: #2563eb; }

.sh-ownership-bar {
    width: 100px;
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.sh-ownership-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #7a9b3f 0%, #5d7830 100%);
    border-radius: 3px;
}

.sh-ownership-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sh-ownership-pct {
    font-size: 0.875rem;
    font-weight: 600;
}

.sh-action-link {
    color: #7a9b3f;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.2s ease;
}

.sh-action-link:hover {
    color: #5d7830;
    gap: 0.5rem;
}

.sh-empty-state {
    text-align: center;
    padding: 3rem;
    color: #64748b;
}

.sh-empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

/* ─── Shareholders Details Page ─── */
.sd-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #64748b;
    text-decoration: none;
    font-weight: 600;
    margin-bottom: 1.5rem;
    transition: all 0.2s ease;
}

.sd-back-link:hover {
    color: #7a9b3f;
    gap: 0.75rem;
}

.sd-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.sd-detail-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.sd-detail-card-full {
    grid-column: 1 / -1;
}

.sd-detail-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f1f5f9;
}

.sd-detail-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sd-detail-card-title i {
    color: #7a9b3f;
}

.sd-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f5f9;
}

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

.sd-detail-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.sd-detail-value {
    font-size: 0.875rem;
    color: #1e293b;
    font-weight: 500;
    text-align: right;
}

.sd-detail-value-large {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
}

.sd-detail-value-highlight {
    font-size: 1.25rem;
    font-weight: 700;
    color: #7a9b3f;
}

.sd-btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(122, 155, 63, 0.3);
    cursor: pointer;
}

.sd-btn-primary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(122, 155, 63, 0.4);
    color: white;
}

.sd-btn-secondary {
    background: #f8f9fa;
    color: #475569;
    border: 2px solid #e2e8f0;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.sd-btn-secondary:hover {
    background: white;
    border-color: #7a9b3f;
    color: #7a9b3f;
}

.sd-role-badge {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.sd-role-officer { background: rgba(122, 155, 63, 0.15); color: #5d7830; }
.sd-role-founder { background: rgba(26, 74, 122, 0.15); color: #1a4a7a; }
.sd-role-investor { background: rgba(100, 116, 139, 0.15); color: #475569; }

.sd-timeline {
    position: relative;
}

.sd-timeline-item {
    padding-left: 2rem;
    padding-bottom: 1.5rem;
    position: relative;
    border-left: 2px solid #e2e8f0;
}

.sd-timeline-item:last-child {
    border-left: none;
    padding-bottom: 0;
}

.sd-timeline-dot {
    position: absolute;
    left: -7px;
    top: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #7a9b3f;
    border: 2px solid white;
    box-shadow: 0 0 0 2px #7a9b3f;
}

.sd-timeline-content {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
}

.sd-timeline-date {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.sd-timeline-title {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.sd-timeline-description {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
}

.sd-notes-textarea {
    width: 100%;
    padding: 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: inherit;
    resize: vertical;
    min-height: 120px;
}

.sd-notes-textarea:focus {
    outline: none;
    border-color: #7a9b3f;
    box-shadow: 0 0 0 3px rgba(122, 155, 63, 0.1);
}

.sd-empty-state {
    text-align: center;
    padding: 2rem;
    color: #64748b;
}

.sd-empty-state i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.3;
}

.sd-alert {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sd-alert-success {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
    border-left: 4px solid #10b981;
}

.sd-alert-error {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    border-left: 4px solid #ef4444;
}

.sd-token-display {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
    font-family: monospace;
    word-break: break-all;
    margin-top: 0.5rem;
    border: 2px dashed #e2e8f0;
}

.sd-token-content {
    flex: 1;
}

.sd-token-hint {
    margin-top: 0.5rem;
    display: block;
}

.sd-notes-actions {
    margin-top: 1rem;
    display: flex;
    gap: 1rem;
}

.sd-actions-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .sd-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── Responses Index Page ─── */
.rsp-page-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.rsp-filters-container {
    display: flex;
    gap: 1rem;
    flex: 1;
    flex-wrap: wrap;
}

.rsp-search-box {
    flex: 1;
    min-width: 300px;
    position: relative;
}

.rsp-search-box input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.rsp-search-box input:focus {
    outline: none;
    border-color: #7a9b3f;
    box-shadow: 0 0 0 3px rgba(122, 155, 63, 0.1);
}

.rsp-search-box i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
}

.rsp-filter-select {
    padding: 0.75rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
    min-width: 150px;
    transition: all 0.3s ease;
}

.rsp-filter-select:focus {
    outline: none;
    border-color: #7a9b3f;
    box-shadow: 0 0 0 3px rgba(122, 155, 63, 0.1);
}

.rsp-btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(122, 155, 63, 0.3);
    white-space: nowrap;
}

.rsp-btn-primary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(122, 155, 63, 0.4);
    color: white;
}

.rsp-btn-clear {
    background: #64748b;
}

.rsp-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.rsp-stat-mini {
    background: white;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.rsp-stat-mini-label {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin: 0;
}

.rsp-stat-mini-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0.25rem 0 0 0;
}

.rsp-stat-value-green { color: #10b981; }
.rsp-stat-value-blue { color: #3b82f6; }
.rsp-stat-value-red { color: #ef4444; }
.rsp-stat-value-amber { color: #f59e0b; }

.rsp-data-table {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.rsp-data-table table {
    width: 100%;
    margin: 0;
}

.rsp-data-table th {
    background: #f8f9fa;
    padding: 1rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.rsp-data-table td {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}

.rsp-data-table tr:hover {
    background: #f8f9fa;
}

.rsp-shareholder-name {
    font-weight: 600;
    color: #1e293b;
    display: block;
    margin-bottom: 0.25rem;
}

.rsp-shareholder-email {
    font-size: 0.875rem;
    color: #64748b;
}

.rsp-response-preview {
    font-size: 0.875rem;
    color: #64748b;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rsp-no-comments {
    color: #94a3b8;
}

.rsp-priority-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.rsp-priority-high { color: #dc2626; }
.rsp-priority-medium { color: #d97706; }
.rsp-priority-low { color: #059669; }

.rsp-action-link {
    color: #7a9b3f;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.2s ease;
}

.rsp-action-link:hover {
    color: #5d7830;
    gap: 0.5rem;
}

.rsp-empty-state {
    text-align: center;
    padding: 3rem;
    color: #64748b;
}

.rsp-empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

/* ─── Staged Submissions Page ─── */
.ss-filter-bar { display: flex; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; align-items: center; }
.ss-filter-bar select, .ss-filter-bar input[type="text"] { padding: 0.5rem 0.75rem; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 0.875rem; }
.ss-filter-bar select:focus, .ss-filter-bar input:focus { border-color: #7a9b3f; outline: none; box-shadow: 0 0 0 3px rgba(122,155,63,0.1); }
.ss-filter-bar .ss-search-input { flex: 1; min-width: 200px; }
.ss-submissions-table { background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden; }
.ss-submissions-table table { width: 100%; border-collapse: collapse; }
.ss-submissions-table th { background: #f8f9fa; padding: 0.75rem 1rem; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid #e2e8f0; text-align: left; white-space: nowrap; }
.ss-submissions-table td { padding: 0.75rem 1rem; border-bottom: 1px solid #f1f5f9; font-size: 0.875rem; color: #334155; }
.ss-submissions-table tr:hover { background: #f8fafc; }
.ss-submissions-table tr.killed { opacity: 0.5; background: #fef2f2; }
.ss-submissions-table tr.promoted { background: #f0fdf4; }
.ss-type-badge { display: inline-block; padding: 0.25rem 0.625rem; border-radius: 6px; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; }
.ss-type-bug { background: rgba(239,68,68,0.15); color: #dc2626; }
.ss-type-enhancement { background: rgba(59,130,246,0.15); color: #2563eb; }
.ss-type-feedback { background: rgba(139,92,246,0.15); color: #7c3aed; }
.ss-tenant-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: 4px; font-size: 0.6875rem; font-weight: 600; background: rgba(100,116,139,0.15); color: #475569; }
.ss-status-tag { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: 4px; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; }
.ss-status-killed { background: #fee2e2; color: #991b1b; }
.ss-status-promoted { background: #dcfce7; color: #166534; }
.ss-btn-sm { padding: 0.375rem 0.75rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; border: none; cursor: pointer; transition: all 0.2s; }
.ss-btn-promote { background: #3b82f6; color: white; }
.ss-btn-promote:hover { background: #2563eb; }
.ss-btn-kill { background: #ef4444; color: white; }
.ss-btn-kill:hover { background: #dc2626; }
.ss-btn-filter { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; padding: 0.5rem 1rem; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; }
.ss-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9000; align-items: center; justify-content: center; }
.ss-modal-overlay.active { display: flex; }
.ss-modal-box { background: white; border-radius: 12px; padding: 2rem; max-width: 500px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
.ss-modal-box h3 { margin: 0 0 1rem; font-size: 1.25rem; color: #1e293b; }
.ss-modal-box label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.375rem; color: #1e293b; }
.ss-modal-box input, .ss-modal-box select, .ss-modal-box textarea { width: 100%; padding: 0.625rem; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 0.875rem; margin-bottom: 1rem; box-sizing: border-box; }
.ss-modal-box textarea { min-height: 80px; resize: vertical; }
.ss-modal-actions { display: flex; gap: 0.75rem; justify-content: flex-end; }
.ss-modal-actions button { padding: 0.625rem 1.25rem; border-radius: 8px; font-weight: 600; border: none; cursor: pointer; }
.ss-modal-cancel { background: #f1f5f9; color: #475569; }
.ss-empty-state { text-align: center; padding: 3rem; color: #64748b; }
.ss-empty-state i { font-size: 3rem; opacity: 0.3; margin-bottom: 1rem; display: block; }
.ss-subject-cell { max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-page-url-cell { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; color: #64748b; }
.ss-checkbox-label { display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: #475569; cursor: pointer; white-space: nowrap; }
.ss-checkbox-label input { width: 16px; height: 16px; }

/* ─── Tickets Index Page ─── */
.tk-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.tk-filter-row { display: flex; gap: 0.75rem; flex-wrap: wrap; flex: 1; }
.tk-filter-row select, .tk-filter-row input { padding: 0.5rem 0.75rem; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 0.875rem; }
.tk-filter-row select:focus, .tk-filter-row input:focus { border-color: #7a9b3f; outline: none; }
.tk-filter-row input { flex: 1; min-width: 180px; }
.tk-btn-new { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; padding: 0.625rem 1.25rem; border-radius: 8px; font-weight: 600; border: none; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; }
.tk-table { background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden; }
.tk-table table { width: 100%; border-collapse: collapse; }
.tk-table th { background: #f8f9fa; padding: 0.75rem 1rem; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid #e2e8f0; text-align: left; }
.tk-table td { padding: 0.75rem 1rem; border-bottom: 1px solid #f1f5f9; font-size: 0.875rem; }
.tk-table tr:hover { background: #f8fafc; }
.tk-ticket-num { font-weight: 700; color: #7a9b3f; }
.tk-level-icon { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 600; }
.tk-level-epic { color: #7c3aed; }
.tk-level-feature { color: #2563eb; }
.tk-level-workitem { color: #475569; }
.tk-status-badge { display: inline-block; padding: 0.1875rem 0.625rem; border-radius: 20px; font-size: 0.6875rem; font-weight: 600; }
.tk-status-new { background: #dbeafe; color: #1e40af; }
.tk-status-inprogress { background: #fef3c7; color: #92400e; }
.tk-status-inreview { background: #e0e7ff; color: #3730a3; }
.tk-status-blocked { background: #fee2e2; color: #991b1b; }
.tk-status-done { background: #dcfce7; color: #166534; }
.tk-status-cancelled { background: #f3f4f6; color: #6b7280; }
.tk-priority-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: 4px; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; }
.tk-priority-critical { background: #fecaca; color: #991b1b; }
.tk-priority-high { background: #fed7aa; color: #9a3412; }
.tk-priority-medium { background: #fef3c7; color: #92400e; }
.tk-priority-low { background: #e2e8f0; color: #475569; }
.tk-tenant-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: 4px; font-size: 0.6875rem; font-weight: 600; background: rgba(100,116,139,0.15); color: #475569; }
.tk-empty-state { text-align: center; padding: 3rem; color: #64748b; }
.tk-empty-state i { font-size: 3rem; opacity: 0.3; display: block; margin-bottom: 1rem; }
.tk-child-count { font-size: 0.6875rem; color: #64748b; margin-left: 0.375rem; }
.tk-ticket-link { color: #1e293b; text-decoration: none; font-weight: 600; }
.tk-ticket-link:hover { color: #7a9b3f; }

/* ─── Ticket Detail Page ─── */
.td-back-link { display: inline-flex; align-items: center; gap: 0.5rem; color: #64748b; text-decoration: none; font-weight: 600; margin-bottom: 1.5rem; }
.td-back-link:hover { color: #7a9b3f; }
.td-breadcrumb-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: #64748b; margin-bottom: 1rem; }
.td-breadcrumb-row a { color: #7a9b3f; text-decoration: none; font-weight: 600; }
.td-breadcrumb-row a:hover { text-decoration: underline; }
.td-ticket-header { background: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-bottom: 1.5rem; }
.td-ticket-header-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.td-ticket-title { font-size: 1.5rem; font-weight: 700; color: #1e293b; margin: 0 0 0.75rem; }
.td-ticket-meta { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.8125rem; color: #64748b; }
.td-ticket-meta span { display: flex; align-items: center; gap: 0.375rem; }
.td-status-form { display: flex; align-items: center; gap: 0.5rem; }
.td-status-select { padding: 0.375rem 0.75rem; border: 2px solid #e2e8f0; border-radius: 6px; font-size: 0.8125rem; font-weight: 600; }
.td-btn-update { padding: 0.375rem 0.75rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; border: none; cursor: pointer; background: #3b82f6; color: white; }
.td-detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; }
.td-detail-card { background: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.td-detail-card h3 { font-size: 1.125rem; font-weight: 700; color: #1e293b; margin: 0 0 1rem; display: flex; align-items: center; gap: 0.5rem; }
.td-detail-card h3 i { color: #7a9b3f; }
.td-detail-card-spaced { margin-top: 1.5rem; }
.td-description-text { font-size: 0.9375rem; color: #475569; line-height: 1.7; white-space: pre-wrap; }
.td-children-table { width: 100%; border-collapse: collapse; margin-top: 0.75rem; }
.td-children-table th { font-size: 0.6875rem; font-weight: 700; color: #64748b; text-transform: uppercase; padding: 0.5rem; border-bottom: 1px solid #e2e8f0; text-align: left; }
.td-children-table td { padding: 0.5rem; font-size: 0.8125rem; border-bottom: 1px solid #f1f5f9; }
.td-children-table a { color: #7a9b3f; font-weight: 600; text-decoration: none; }
.td-timeline-item { padding-left: 1.5rem; padding-bottom: 1rem; border-left: 2px solid #e2e8f0; position: relative; }
.td-timeline-item:last-child { border-left: none; }
.td-timeline-dot { position: absolute; left: -5px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: #7a9b3f; }
.td-timeline-time { font-size: 0.6875rem; color: #94a3b8; }
.td-timeline-desc { font-size: 0.8125rem; color: #334155; }
.td-timeline-by { font-size: 0.6875rem; color: #64748b; }
.td-comment-item { padding: 1rem; border-radius: 8px; margin-bottom: 0.75rem; }
.td-comment-external { background: #f8fafc; border-left: 3px solid #7a9b3f; }
.td-comment-internal { background: #fefce8; border-left: 3px solid #f59e0b; }
.td-comment-header { display: flex; justify-content: space-between; font-size: 0.75rem; color: #64748b; margin-bottom: 0.5rem; }
.td-comment-body { font-size: 0.875rem; color: #334155; }
.td-internal-tag { font-size: 0.625rem; font-weight: 700; color: #92400e; background: #fef3c7; padding: 0.125rem 0.375rem; border-radius: 3px; text-transform: uppercase; }
.td-comment-form { margin-top: 1rem; }
.td-comment-form textarea { width: 100%; padding: 0.75rem; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 0.875rem; min-height: 80px; resize: vertical; font-family: inherit; box-sizing: border-box; }
.td-comment-form textarea:focus { border-color: #7a9b3f; outline: none; }
.td-comment-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 0.75rem; }
.td-internal-check { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: #475569; }
.td-internal-check input { width: 16px; height: 16px; }
.td-btn-comment { padding: 0.5rem 1rem; background: #3b82f6; color: white; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; }
.td-info-row { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid #f1f5f9; font-size: 0.8125rem; }
.td-info-label { color: #64748b; font-weight: 600; }
.td-info-value { color: #1e293b; }
.td-level-badge, .td-status-badge, .td-priority-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: 4px; font-size: 0.6875rem; font-weight: 600; }
.td-level-epic { background: rgba(124,58,237,0.15); color: #7c3aed; }
.td-level-feature { background: rgba(37,99,235,0.15); color: #2563eb; }
.td-level-workitem { background: rgba(100,116,139,0.15); color: #475569; }
.td-priority-critical { background: #fecaca; color: #991b1b; }
.td-priority-high { background: #fed7aa; color: #9a3412; }
.td-priority-medium { background: #fef3c7; color: #92400e; }
.td-priority-low { background: #e2e8f0; color: #475569; }
.td-no-activity { color: #94a3b8; font-size: 0.875rem; text-align: center; padding: 1rem; }

.td-btn-delete-comment { background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 0.6875rem; padding: 0.125rem 0.375rem; margin-left: 0.5rem; transition: color 0.2s; }
.td-btn-delete-comment:hover { color: #ef4444; }
.td-attachment-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.td-attachment-item { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background: #f8fafc; border-radius: 8px; border: 1px solid #f1f5f9; }
.td-attachment-info { display: flex; align-items: center; gap: 0.75rem; }
.td-attachment-info > i { color: #64748b; font-size: 1.25rem; }
.td-attachment-name { font-size: 0.8125rem; font-weight: 600; color: #1e293b; }
.td-attachment-meta { font-size: 0.6875rem; color: #94a3b8; }
.td-attachment-actions-row { display: flex; align-items: center; gap: 0.375rem; }
.td-btn-download-sm { color: #7a9b3f; font-size: 0.8125rem; padding: 0.25rem 0.5rem; text-decoration: none; }
.td-btn-download-sm:hover { color: #5d7830; }
.td-attachment-upload-form { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
.td-attachment-file-input { font-size: 0.8125rem; flex: 1; }

@media (max-width: 768px) {
    .td-detail-grid { grid-template-columns: 1fr; }
    .td-ticket-header-top { flex-direction: column; }
}

/* ─── Ticket Create Page ─── */
.tc-create-form { max-width: 800px; }
.tc-form-card { background: white; border-radius: 12px; padding: 2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-bottom: 1.5rem; }
.tc-form-card h3 { font-size: 1.125rem; font-weight: 700; color: #1e293b; margin: 0 0 1.25rem; display: flex; align-items: center; gap: 0.5rem; }
.tc-form-card h3 i { color: #7a9b3f; }
.tc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.tc-form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.tc-form-group { margin-bottom: 1rem; }
.tc-form-group label { display: block; font-size: 0.8125rem; font-weight: 600; color: #1e293b; margin-bottom: 0.375rem; }
.tc-form-group label .req { color: #ef4444; }
.tc-form-group input, .tc-form-group select, .tc-form-group textarea { width: 100%; padding: 0.625rem 0.75rem; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 0.875rem; font-family: inherit; box-sizing: border-box; }
.tc-form-group input:focus, .tc-form-group select:focus, .tc-form-group textarea:focus { border-color: #7a9b3f; outline: none; box-shadow: 0 0 0 3px rgba(122,155,63,0.1); }
.tc-form-group textarea { min-height: 150px; resize: vertical; }
.tc-form-actions { display: flex; gap: 1rem; }
.tc-btn-save { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; padding: 0.75rem 2rem; border-radius: 8px; font-weight: 600; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; }
.tc-btn-save:hover { box-shadow: 0 4px 12px rgba(122,155,63,0.3); transform: translateY(-1px); }
.tc-btn-cancel { background: #f1f5f9; color: #475569; padding: 0.75rem 2rem; border-radius: 8px; font-weight: 600; border: none; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; }
.tc-classification-group { display: none; }
.tc-classification-group.visible { display: block; }
.tc-parent-group { display: none; }
.tc-parent-group.visible { display: block; }
.tc-back-link { display: inline-flex; align-items: center; gap: 0.5rem; color: #64748b; text-decoration: none; font-weight: 600; margin-bottom: 1.5rem; }
.tc-back-link:hover { color: #7a9b3f; }

@media (max-width: 768px) {
    .tc-form-row, .tc-form-row-3 { grid-template-columns: 1fr; }
}

/* ─── Roadmap Page ─── */
.rm-controls { display: flex; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; align-items: center; }
.rm-controls select { padding: 0.5rem 0.75rem; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 0.875rem; }
.rm-controls label { display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: #475569; cursor: pointer; }
.rm-controls label input { width: 16px; height: 16px; }
.rm-stats-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-bottom: 2rem; }
.rm-stat-box { background: white; border-radius: 8px; padding: 1rem 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,0.08); text-align: center; }
.rm-stat-box .rm-num { font-size: 1.75rem; font-weight: 700; color: #1e293b; }
.rm-stat-box .rm-lbl { font-size: 0.6875rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.25rem; }
.rm-stat-pct { color: #10b981; }
.rm-tree { margin: 0; padding: 0; }
.rm-epic-node { background: white; border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-left: 4px solid #7c3aed; }
.rm-epic-title { font-size: 1.125rem; font-weight: 700; color: #1e293b; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
.rm-epic-title a { color: #1e293b; text-decoration: none; }
.rm-epic-title a:hover { color: #7c3aed; }
.rm-epic-num { color: #7c3aed; font-size: 0.875rem; }
.rm-feature-list { margin-left: 1.5rem; padding-left: 1rem; border-left: 2px solid #e2e8f0; margin-top: 0.75rem; }
.rm-feature-node { padding: 0.75rem 0; border-bottom: 1px solid #f1f5f9; }
.rm-feature-node:last-child { border-bottom: none; }
.rm-feature-title { font-weight: 600; color: #1e293b; display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; }
.rm-feature-title a { color: #1e293b; text-decoration: none; }
.rm-feature-title a:hover { color: #2563eb; }
.rm-feature-num { color: #2563eb; font-size: 0.8125rem; }
.rm-wi-list { margin-left: 1.5rem; margin-top: 0.5rem; }
.rm-wi-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.375rem 0; font-size: 0.8125rem; }
.rm-wi-item a { color: #475569; text-decoration: none; font-weight: 500; }
.rm-wi-item a:hover { color: #7a9b3f; }
.rm-wi-num { color: #64748b; font-size: 0.75rem; font-weight: 600; }
.rm-wi-assignee { color: #94a3b8; font-size: 0.75rem; margin-left: auto; }
.rm-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.rm-dot-new { background: #3b82f6; }
.rm-dot-inprogress { background: #f59e0b; }
.rm-dot-inreview { background: #8b5cf6; }
.rm-dot-blocked { background: #ef4444; }
.rm-dot-done { background: #10b981; }
.rm-dot-cancelled { background: #9ca3af; }
.rm-badge-sm { display: inline-block; padding: 0.125rem 0.375rem; border-radius: 3px; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; }
.rm-badge-sm-done { background: #dcfce7; color: #166534; }
.rm-badge-sm-blocked { background: #fee2e2; color: #991b1b; }
.rm-empty-roadmap { text-align: center; padding: 3rem; color: #64748b; background: white; border-radius: 12px; }
.rm-empty-roadmap i { font-size: 3rem; opacity: 0.3; display: block; margin-bottom: 1rem; }

.rm-tenant-section { margin-bottom: 2rem; }
.rm-tenant-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; background: #f1f5f9; border-radius: 8px; margin-bottom: 1rem; }
.rm-tenant-header h3 { font-size: 1rem; font-weight: 700; color: #1e293b; margin: 0; }
.rm-tenant-header .rm-tenant-count { font-size: 0.75rem; color: #64748b; margin-left: auto; }
.rm-collapse-bar { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
.rm-collapse-btn { padding: 0.375rem 0.75rem; border: 2px solid #e2e8f0; border-radius: 6px; background: white; font-size: 0.75rem; font-weight: 600; color: #64748b; cursor: pointer; }
.rm-collapse-btn:hover { border-color: #7a9b3f; color: #7a9b3f; }
.rm-epic-pct { margin-left: auto; font-size: 0.75rem; font-weight: 600; color: #64748b; }
.rm-epic-pct-bar { width: 60px; height: 4px; background: #e2e8f0; border-radius: 2px; overflow: hidden; display: inline-block; vertical-align: middle; margin-left: 0.5rem; }
.rm-epic-pct-fill { height: 100%; background: #10b981; border-radius: 2px; }
.rm-feature-pct { font-size: 0.6875rem; color: #94a3b8; margin-left: auto; }
.rm-orphan-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed #e2e8f0; }
.rm-orphan-label { font-size: 0.6875rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.rm-toggle-icon { cursor: pointer; font-size: 0.6875rem; color: #94a3b8; transition: transform 0.2s; }
.rm-toggle-icon.collapsed { transform: rotate(-90deg); }
.rm-collapsible { overflow: hidden; transition: max-height 0.3s ease; }
.rm-collapsible.collapsed { max-height: 0 !important; }
.rm-wi-priority { display: inline-block; padding: 0.0625rem 0.375rem; border-radius: 3px; font-size: 0.5625rem; font-weight: 700; text-transform: uppercase; margin-left: 0.375rem; }
.rm-wi-priority-critical { background: #fecaca; color: #991b1b; }
.rm-wi-priority-high { background: #fed7aa; color: #9a3412; }
.rm-wi-priority-medium { background: #fef3c7; color: #92400e; }
.rm-wi-priority-low { background: #e2e8f0; color: #475569; }
.rm-new-ticket-btn { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1rem; padding: 0.625rem 1.25rem; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; border-radius: 8px; font-weight: 600; text-decoration: none; font-size: 0.875rem; }

@media (max-width: 768px) {
    .rm-stats-bar { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Admin Layout ─── */
.admin-container {
    display: flex;
    min-height: 100vh;
}

.admin-sidebar {
    width: 280px;
    background: var(--admin-nav-bg);
    color: white;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.1);
}

.admin-logo {
    padding: 2rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-logo h1 {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.admin-logo p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    margin: 0.25rem 0 0 0;
}

.admin-nav {
    padding: 1.5rem 0;
}

.admin-nav-section {
    margin-bottom: 2rem;
}

.admin-nav-section-title {
    padding: 0 1.5rem 0.75rem 1.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
}

.admin-nav-link {
    display: flex;
    align-items: center;
    padding: 0.875rem 1.5rem;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.admin-nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: white;
    border-left-color: transparent;
}

.admin-nav-link.active {
    background: rgba(255, 255, 255, 0.12);
    color: white;
    border-left-color: var(--admin-nav-accent);
    font-weight: 600;
}

.admin-nav-link i {
    width: 20px;
    margin-right: 0.75rem;
    font-size: 1rem;
}

.placeholder-badge {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.admin-main {
    margin-left: 280px;
    flex: 1;
    min-height: 100vh;
}

.admin-header {
    background: white;
    border-bottom: 1px solid #e2e8f0;
    padding: 1.25rem 2rem;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.admin-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admin-header-title h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.25rem 0;
}

.admin-header-title p {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
}

.admin-header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.admin-user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.admin-user-avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1rem;
}

.admin-user-details {
    display: flex;
    flex-direction: column;
}

.admin-user-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.2;
}

.admin-user-role {
    font-size: 0.75rem;
    color: #64748b;
}

.admin-content {
    padding: 2rem;
}

.admin-logout {
    margin-top: auto;
    padding: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-logout-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.875rem 1rem;
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.admin-logout-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    color: #fef2f2;
    transform: translateY(-1px);
}

.admin-logout-btn i {
    margin-right: 0.75rem;
}

.admin-nav-collapsible {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.admin-nav-collapsible.expanded {
    max-height: 500px;
}

.admin-nav-toggle {
    display: flex;
    align-items: center;
    padding: 0 1.5rem 0.75rem 1.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.admin-nav-toggle:hover {
    color: rgba(255, 255, 255, 0.8);
}

.admin-nav-toggle i.toggle-chevron {
    margin-left: auto;
    transition: transform 0.3s ease;
    font-size: 0.625rem;
}

.admin-nav-toggle.expanded i.toggle-chevron {
    transform: rotate(90deg);
}

@media (max-width: 768px) {
    .admin-sidebar {
        transform: translateX(-100%);
    }

    .admin-main {
        margin-left: 0;
    }
}

/* ─── Tenants Index Page ─── */
.tn-status-msg { padding: 0.75rem 1.25rem; border-radius: 8px; margin-bottom: 1.5rem; background: rgba(16,185,129,0.12); color: #059669; border-left: 4px solid #10b981; font-size: 0.875rem; font-weight: 500; }
.tn-table { background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden; }
.tn-table table { width: 100%; border-collapse: collapse; }
.tn-table th { background: #f8f9fa; padding: 0.875rem 1.25rem; font-size: 0.75rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid #e2e8f0; text-align: left; white-space: nowrap; }
.tn-table td { padding: 0.875rem 1.25rem; border-bottom: 1px solid #f1f5f9; font-size: 0.875rem; color: #334155; vertical-align: middle; }
.tn-table tr:hover { background: #f8fafc; }
.tn-table tr.tn-row-inactive { opacity: 0.5; }
.tn-badge { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; color: white; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; }
.tn-name-link { color: #1e293b; text-decoration: none; font-weight: 600; }
.tn-name-link:hover { color: #7a9b3f; }
.tn-hostname { font-size: 0.8125rem; color: #64748b; font-family: monospace; }
.tn-count-link { color: #7a9b3f; text-decoration: none; font-weight: 700; font-size: 1rem; }
.tn-count-link:hover { text-decoration: underline; }
.tn-count-zero { color: #94a3b8; font-weight: 600; }
.tn-toggle-form { display: inline; }
.tn-toggle-btn { padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.6875rem; font-weight: 600; border: none; cursor: pointer; transition: all 0.2s; }
.tn-toggle-active { background: #dcfce7; color: #166534; }
.tn-toggle-active:hover { background: #bbf7d0; }
.tn-toggle-inactive { background: #fee2e2; color: #991b1b; }
.tn-toggle-inactive:hover { background: #fecaca; }
.tn-inline-input { padding: 0.375rem 0.5rem; border: 2px solid #e2e8f0; border-radius: 6px; font-size: 0.8125rem; font-family: inherit; width: 100%; box-sizing: border-box; }
.tn-inline-input:focus { outline: none; border-color: #7a9b3f; box-shadow: 0 0 0 2px rgba(122,155,63,0.1); }
.tn-inline-input-host { font-family: monospace; }
.tn-save-btn { padding: 0.25rem 0.75rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; border: none; cursor: pointer; background: #3b82f6; color: white; transition: all 0.2s; white-space: nowrap; }
.tn-save-btn:hover { background: #2563eb; }
.tn-created { font-size: 0.75rem; color: #94a3b8; }
.tn-actions-cell { display: flex; gap: 0.375rem; align-items: center; flex-wrap: nowrap; }
.tn-view-btn { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.75rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; text-decoration: none; background: var(--admin-nav-bg); color: white; border: 1px solid var(--admin-nav-bg); transition: all 0.2s; white-space: nowrap; }
.tn-view-btn:hover { background: #0c5a8c; border-color: #0c5a8c; color: white; }
.tn-view-btn i { font-size: 0.6875rem; }
.tn-delete-form { display: inline; margin: 0; }
.tn-delete-btn { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.75rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; border: 1px solid #ef4444; background: white; color: #ef4444; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.tn-delete-btn:hover { background: #ef4444; color: white; }
.tn-delete-btn i { font-size: 0.6875rem; }

@media (max-width: 1024px) {
    .tn-table { overflow-x: auto; }
    .tn-table table { min-width: 900px; }
}

/* ─── Audit Log Page ─── */
.al-filters { display: flex; gap: 0.75rem; margin-bottom: 1.5rem; flex-wrap: wrap; align-items: flex-end; }
.al-filters label { display: block; font-size: 0.6875rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.25rem; }
.al-filters input, .al-filters select { padding: 0.5rem 0.75rem; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 0.8125rem; }
.al-filters input:focus, .al-filters select:focus { border-color: #7a9b3f; outline: none; }
.al-filters button { padding: 0.5rem 1rem; background: #3b82f6; color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 0.8125rem; }
.al-table { background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden; }
.al-table table { width: 100%; border-collapse: collapse; }
.al-table th { background: #f8f9fa; padding: 0.75rem 1rem; font-size: 0.6875rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid #e2e8f0; text-align: left; white-space: nowrap; }
.al-table td { padding: 0.75rem 1rem; border-bottom: 1px solid #f1f5f9; font-size: 0.8125rem; color: #334155; }
.al-table tr:hover { background: #f8fafc; }
.al-action-badge { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 4px; font-size: 0.6875rem; font-weight: 600; background: rgba(100,116,139,0.12); color: #475569; }
.al-entity { font-size: 0.75rem; color: #64748b; }
.al-time { font-size: 0.75rem; color: #64748b; white-space: nowrap; }
.al-ip { font-family: monospace; font-size: 0.75rem; color: #94a3b8; }
.al-empty { text-align: center; padding: 3rem; color: #64748b; }
.al-empty i { font-size: 3rem; opacity: 0.3; display: block; margin-bottom: 1rem; }

/* ─── Companies Page ─── */
.co-add-form { background: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-bottom: 1.5rem; display: none; }
.co-add-form.visible { display: block; }
.co-add-form h3 { font-size: 1rem; font-weight: 700; color: #1e293b; margin: 0 0 1rem; }
.co-form-row { display: flex; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.co-form-group { flex: 1; min-width: 200px; }
.co-form-group label { display: block; font-size: 0.8125rem; font-weight: 600; color: #1e293b; margin-bottom: 0.25rem; }
.co-form-group input, .co-form-group select { width: 100%; padding: 0.5rem 0.75rem; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 0.875rem; box-sizing: border-box; }
.co-form-group input:focus, .co-form-group select:focus { border-color: #7a9b3f; outline: none; }
.co-form-actions { display: flex; gap: 0.75rem; }
.co-btn-save { padding: 0.5rem 1.25rem; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; }
.co-btn-cancel { padding: 0.5rem 1.25rem; background: #f1f5f9; color: #475569; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; }
.co-btn-add { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.25rem; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; margin-bottom: 1.5rem; text-decoration: none; }
.co-btn-back { margin-top: 1rem; }
.co-table { background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden; }
.co-table table { width: 100%; border-collapse: collapse; }
.co-table th { background: #f8f9fa; padding: 0.75rem 1rem; font-size: 0.6875rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid #e2e8f0; text-align: left; }
.co-table td { padding: 0.75rem 1rem; border-bottom: 1px solid #f1f5f9; font-size: 0.875rem; color: #334155; }
.co-table tr:hover { background: #f8fafc; }
.co-name-link { color: #1e293b; text-decoration: none; font-weight: 600; }
.co-name-link:hover { color: #7a9b3f; }
.co-slug { font-family: monospace; font-size: 0.8125rem; color: #64748b; }
.co-tier-badge { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 4px; font-size: 0.6875rem; font-weight: 600; background: rgba(139,92,246,0.12); color: #7c3aed; }
.co-status-active { color: #059669; font-weight: 600; }
.co-status-inactive { color: #dc2626; font-weight: 600; }
.co-empty { text-align: center; padding: 3rem; color: #64748b; }

/* ─── SLA Badges ─── */
.tk-sla-badge { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 4px; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; }
.tk-sla-ontrack { background: #dcfce7; color: #166534; }
.tk-sla-atrisk { background: #fef3c7; color: #92400e; }
.tk-sla-breached { background: #fee2e2; color: #991b1b; }

/* ─── Admin Header Search ─── */
.admin-search-form { display: flex; }
.admin-search-input { padding: 0.5rem 0.75rem; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 0.8125rem; width: 220px; transition: all 0.2s; }
.admin-search-input:focus { outline: none; border-color: #7a9b3f; width: 300px; }

/* ─── Dashboard Overdue Tickets ─── */
.dash-overdue { background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); overflow: hidden; margin-bottom: 1.5rem; border-left: 4px solid #ef4444; }
.dash-overdue-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid #f1f5f9; }
.dash-overdue-header h2 { font-size: 1rem; font-weight: 700; color: #dc2626; margin: 0; }
.dash-overdue-header h2 i { margin-right: 0.5rem; }
.dash-overdue-count { background: #fee2e2; color: #991b1b; padding: 0.125rem 0.625rem; border-radius: 12px; font-size: 0.75rem; font-weight: 700; }
.dash-overdue table { width: 100%; border-collapse: collapse; }
.dash-overdue th { background: #fef2f2; padding: 0.625rem 1rem; font-size: 0.6875rem; font-weight: 700; color: #991b1b; text-transform: uppercase; letter-spacing: 0.05em; text-align: left; border-bottom: 1px solid #fecaca; }
.dash-overdue td { padding: 0.625rem 1rem; font-size: 0.8125rem; color: #334155; border-bottom: 1px solid #f8fafc; }
.dash-overdue tr:hover { background: #fef2f2; }
.dash-overdue-link { color: #1e293b; text-decoration: none; font-weight: 600; }
.dash-overdue-link:hover { color: #dc2626; }
.dash-overdue-date { color: #dc2626; font-weight: 600; font-size: 0.75rem; }

/* ─── Ticket Bulk Actions ─── */
.tk-bulk-bar { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1.25rem; background: #f0f9ff; border: 2px solid #bae6fd; border-radius: 8px; margin-bottom: 1rem; flex-wrap: wrap; }
.tk-bulk-count { font-size: 0.875rem; font-weight: 700; color: #1e40af; white-space: nowrap; }
.tk-bulk-form { display: flex; align-items: center; gap: 0.5rem; }
.tk-bulk-select { padding: 0.375rem 0.5rem; border: 2px solid #e2e8f0; border-radius: 6px; font-size: 0.8125rem; }
.tk-bulk-btn { padding: 0.375rem 0.75rem; background: #3b82f6; color: white; border: none; border-radius: 6px; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.tk-bulk-btn:hover { background: #2563eb; }
.tk-row-check { width: 16px; height: 16px; cursor: pointer; }

/* ─── Blocked Banner ─── */
.td-blocked-banner { background: #fef2f2; border: 2px solid #fecaca; border-radius: 8px; padding: 0.75rem 1.25rem; margin-bottom: 1rem; color: #991b1b; font-size: 0.875rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.td-blocked-banner a { color: #dc2626; font-weight: 700; text-decoration: underline; }

/* ─── User Management ─── */
.um-role-badge { display: inline-block; padding: 0.1875rem 0.625rem; border-radius: 20px; font-size: 0.6875rem; font-weight: 600; }
.um-role-superadmin { background: #dcfce7; color: #166534; }
.um-role-admin { background: #dbeafe; color: #1e40af; }
.um-role-shareholder { background: #f3f4f6; color: #4b5563; }
.um-role-user { background: #f1f5f9; color: #64748b; }
.um-status-badge { display: inline-block; padding: 0.1875rem 0.625rem; border-radius: 20px; font-size: 0.6875rem; font-weight: 600; }
.um-status-active { background: #dcfce7; color: #166534; }
.um-status-inactive { background: #f3f4f6; color: #9ca3af; }
.um-edit-link { color: #3b82f6; text-decoration: none; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.um-edit-link:hover { color: #1d4ed8; text-decoration: underline; }
.al-muted { color: #94a3b8; font-size: 0.8125rem; }
.um-section { background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); padding: 1.5rem; margin-bottom: 1.5rem; }
.um-section h3 { font-size: 1rem; font-weight: 700; color: #1e293b; margin: 0 0 1rem 0; }
.um-form-group { margin-bottom: 1rem; }
.um-form-group label { display: block; font-size: 0.8125rem; font-weight: 600; color: #475569; margin-bottom: 0.375rem; }
.um-form-group input[type="text"], .um-form-group select { width: 100%; padding: 0.5rem 0.75rem; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 0.875rem; }
.um-form-group input:focus, .um-form-group select:focus { border-color: #7a9b3f; outline: none; box-shadow: 0 0 0 3px rgba(122,155,63,0.1); }
.um-form-group input[readonly] { background: #f8fafc; color: #64748b; cursor: not-allowed; }
.um-toggle { display: flex; align-items: center; gap: 0.5rem; }
.um-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.um-tenant-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0; border-bottom: 1px solid #f1f5f9; }
.um-tenant-row:last-child { border-bottom: none; }
.um-tenant-name { flex: 1; font-size: 0.875rem; font-weight: 500; color: #334155; }
.um-tenant-level { padding: 0.375rem 0.5rem; border: 2px solid #e2e8f0; border-radius: 6px; font-size: 0.8125rem; }
.um-btn-save { padding: 0.625rem 1.5rem; background: #3b82f6; color: white; border: none; border-radius: 8px; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.um-btn-save:hover { background: #2563eb; }
.um-btn-back { color: #64748b; text-decoration: none; font-size: 0.875rem; }
.um-btn-back:hover { color: #334155; }
.um-danger-zone { background: white; border: 2px solid #fecaca; border-radius: 12px; padding: 1.5rem; margin-top: 1.5rem; }
.um-danger-zone h3 { color: #dc2626; margin: 0 0 0.75rem 0; font-size: 1rem; }
.um-btn-danger { padding: 0.5rem 1.25rem; background: #dc2626; color: white; border: none; border-radius: 8px; font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
.um-btn-danger:hover { background: #b91c1c; }
.um-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; }
@media (max-width: 768px) {
    .um-two-col { grid-template-columns: 1fr; }
}

/* ─── Dashboard Card Metrics ─── */
.dash-card-metrics { display: flex; gap: 0.625rem; flex-wrap: wrap; margin-top: 0.5rem; }
.dash-metric { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.6875rem; color: #64748b; text-decoration: none; }
.dash-metric:hover { color: #334155; }
.dash-metric i { font-size: 0.625rem; }
.dash-metric-red { color: #dc2626; font-weight: 700; }
.dash-metric-red:hover { color: #991b1b; }
.dash-metric-orange { color: #d97706; font-weight: 700; }

/* ─── Dashboard Card Grid Fix ─── */
.dash-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-bottom: 2rem; }
.dash-card { min-height: 160px; display: flex; flex-direction: column; }
.dash-card-metrics { margin-top: auto; padding-top: 0.5rem; }

@media (max-width: 1400px) {
    .dash-cards { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1100px) {
    .dash-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .dash-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Holdings Dashboard ─── */
.holding-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid #e2e8f0; }
.holding-badge { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 10px; color: white; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.02em; background: #64748b; flex-shrink: 0; }
.holding-name { font-size: 1.5rem; font-weight: 700; color: #1e293b; margin: 0; flex: 1; }
.holding-status-pill { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.holding-status-active { background: #dcfce7; color: #166534; }
.holding-status-inactive { background: #fee2e2; color: #991b1b; }
.holding-tiles { grid-template-columns: repeat(4, 1fr); }
.holding-tile .dash-card-abbr-staged { background: var(--admin-nav-bg); }
.holding-back-link { margin-top: 1.5rem; }
.holding-back-link a { color: var(--admin-nav-bg); text-decoration: none; font-size: 0.875rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem; }
.holding-back-link a:hover { color: #0c5a8c; text-decoration: underline; }

@media (max-width: 1100px) {
    .holding-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .holding-tiles { grid-template-columns: repeat(1, 1fr); }
}

/* ─── Nav Spacing Reduction ─── */
.admin-nav-link { padding: 0.375rem 1.5rem !important; font-size: 0.8125rem; }
.admin-nav-section { margin-bottom: 0.5rem !important; }
.admin-nav-section-title, .admin-nav-toggle { padding-bottom: 0.375rem !important; font-size: 0.65rem !important; }

/* ─── User Cards Grid ─── */
.user-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.user-card { background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.user-card-avatar { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 700; color: white; background: #3b82f6; flex-shrink: 0; }
.user-card-avatar.superadmin { background: #10b981; }
.user-card-header { display: flex; align-items: center; gap: 1rem; }
.user-card-name { font-weight: 600; color: #1e293b; }
.user-card-email { font-size: 0.8rem; color: #94a3b8; }
.user-card-tenants { display: flex; flex-wrap: wrap; gap: 4px; }
.user-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 0.5rem; border-top: 1px solid #e2e8f0; }

/* ─── Role Option Cards ─── */
.role-option-card { border: 2px solid #e2e8f0; border-radius: 8px; padding: 1rem; cursor: pointer; transition: all 0.2s; margin-bottom: 0.5rem; display: block; }
.role-option-card:hover { border-color: #3b82f6; }
.role-option-card.selected { border-color: #3b82f6; background: rgba(59,130,246,0.05); }
.role-option-card input[type=radio] { display: none; }
.role-option-title { font-weight: 600; color: #1e293b; }
.role-option-desc { font-size: 0.8rem; color: #94a3b8; margin-top: 2px; }

/* ─── Tenant Access Rows ─── */
.tenant-access-row { display: flex; align-items: center; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid #e2e8f0; }
.tenant-access-row:last-child { border-bottom: none; }
.tenant-access-name { flex: 1; font-weight: 500; font-size: 0.875rem; }
.tenant-access-level { width: 140px; }

/* ─── Toggle Switch ─── */
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle-switch input { display: none; }
.toggle-slider { position: absolute; inset: 0; background: #e2e8f0; border-radius: 999px; cursor: pointer; transition: all 0.2s; }
.toggle-slider:before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: all 0.2s; }
.toggle-switch input:checked + .toggle-slider { background: #3b82f6; }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(20px); }

/* ─── Edit Bottom Bar ─── */
.edit-bottom-bar { position: sticky; bottom: 0; background: white; border-top: 1px solid #e2e8f0; padding: 1rem 1.5rem; display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; z-index: 10; }

@media (max-width: 1024px) { .user-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .user-cards-grid { grid-template-columns: 1fr; } }