/* COSMIC ADMIN Portal Styles */

:root {
    --primary-color: #3b82f6;
    --secondary-color: #60a5fa;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --critical-color: #ef4444;
    --info-color: #3b82f6;
    --bg-color: #0a0e1a;
    --bg-darker: #020617;
    --card-bg: #1e293b;
    --card-border: #334155;
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: #334155;
    --input-bg: #1e293b;
    --input-border: #334155;
    --text-color: #e2e8f0;
}

body {
    margin: 0;
    padding: 0;
    padding-top: 60px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--bg-color);
    color: var(--text-primary);
}

/* Portal Navigation */
.portal-nav {
    background: var(--bg-darker);
    border-bottom: 1px solid var(--card-border);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

.nav-brand h2 {
    margin: 0;
    color: var(--primary-color);
    font-size: 1.5rem;
}

.nav-subtitle {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

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

.notification-btn {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.notification-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.notification-btn:hover {
    background: var(--primary-color);
}

.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--critical-color);
    color: white;
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
    border-radius: 10px;
    font-weight: bold;
}

.user-btn {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.user-avatar svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.user-btn:hover {
    border-color: var(--primary-color);
}

/* Portal Container */
.portal-container {
    display: block;
    min-height: calc(100vh - 60px);
    margin-left: 250px;
}

/* Sidebar */
.sidebar {
    background: #1a1f2e;
    border-right: 1px solid var(--card-border);
    padding: 2rem 0;
    position: fixed;
    top: 60px;
    left: 0;
    height: calc(100vh - 60px);
    width: 250px;
    overflow-y: auto;
    z-index: 50;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    color: #8b92a8;
    text-decoration: none;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.nav-item:hover {
    background: rgba(59, 130, 246, 0.08);
    color: #e2e8f0;
}

.nav-item.active {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border-left-color: #3b82f6;
}

.nav-item .icon {
    width: 20px;
    height: 20px;
    margin-right: 0.75rem;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.nav-item:hover .icon,
.nav-item.active .icon {
    opacity: 1;
}

/* Main Content */
.portal-main {
    padding: 2rem;
    overflow-y: auto;
    background: var(--bg-color);
}

.portal-section {
    display: none;
}

.portal-section.active {
    display: block;
}

.section-header {
    margin-bottom: 2rem;
}

.section-header h1 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 2rem;
}

.section-header p {
    margin: 0;
    color: var(--text-secondary);
}

/* Metrics Grid */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.metric-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    border: 1px solid var(--card-border);
    transition: all 0.3s ease;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.metric-card.critical {
    border-left: 4px solid var(--critical-color);
}

.metric-card.success {
    border-left: 4px solid var(--success-color);
}

.metric-card.warning {
    border-left: 4px solid var(--warning-color);
}

.metric-card.info {
    border-left: 4px solid var(--info-color);
}

.metric-icon {
    font-size: 2.5rem;
}

.metric-content {
    flex: 1;
}

/* Carrier Portal Style Stats */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.stat-icon {
    font-size: 2.5rem;
}

.stat-info h3 {
    color: var(--text-primary);
    font-size: 2rem;
    margin: 0 0 0.25rem 0;
}

.stat-info p {
    color: var(--text-muted);
    margin: 0 0 0.5rem 0;
}

.stat-change {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.stat-change.positive {
    color: var(--success-color);
}

.stat-change.negative {
    color: var(--critical-color);
}

.metric-content h3 {
    margin: 0 0 0.5rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.metric-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.metric-change {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.metric-change.positive {
    color: var(--success-color);
}

.metric-change.negative {
    color: var(--critical-color);
}

/* Dashboard Layout */
.dashboard-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
}

.dashboard-card {
    background: var(--card-bg);
    border-radius: 10px;
    padding: 1.5rem;
    border: 1px solid var(--card-border);
}

.dashboard-card.wide {
    grid-column: 1 / -1;
}

.dashboard-card h3 {
    margin: 0 0 1rem 0;
    color: var(--text-primary);
    font-size: 1.2rem;
}

/* User Type Stats */
.user-type-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* User Type Stats - Single Row Compact */
.user-type-stats-single-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.user-stat-compact {
    background: var(--bg-color);
    border-radius: 10px;
    padding: 1.25rem;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.user-stat-compact:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}

.stat-compact-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.stat-compact-header h4 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.1rem;
}

.stat-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
}

.stat-badge.success {
    background: rgba(38, 222, 129, 0.2);
    color: var(--success-color);
    border: 1px solid var(--success-color);
}

.stat-badge.warning {
    background: rgba(255, 165, 2, 0.2);
    color: var(--warning-color);
    border: 1px solid var(--warning-color);
}

.stat-compact-numbers {
    display: flex;
    justify-content: space-around;
    gap: 1rem;
}

.stat-compact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.stat-compact-value {
    color: var(--text-primary);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
}

.stat-compact-label {
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-align: center;
}

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

    .user-type-stats-single-row {
        grid-template-columns: 1fr;
    }
}

.user-stat {
    background: var(--bg-color);
    border-radius: 8px;
    padding: 1.25rem;
    border: 1px solid var(--border-color);
}

.stat-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.stat-icon {
    font-size: 2.5rem;
}

.stat-header h4 {
    margin: 0;
    color: var(--text-primary);
}

.stat-numbers {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.stat-value {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: bold;
}

.stat-value.success {
    color: var(--success-color);
}

.stat-value.warning {
    color: var(--warning-color);
}

/* Activity List */
.activity-list,
.performance-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.performance-item {
    padding: 1rem;
    background: rgba(59, 130, 246, 0.05);
    border-radius: 8px;
}

.performer-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.rating {
    color: var(--warning-color);
    font-size: 0.9rem;
}

.performance-stat {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.activity-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-color);
    border-radius: 8px;
    border-left: 4px solid var(--border-color);
    align-items: center;
}

.activity-item.critical {
    border-left-color: var(--critical-color);
    background: rgba(239, 68, 68, 0.05);
}

.activity-item.warning {
    border-left-color: var(--warning-color);
    background: rgba(245, 158, 11, 0.05);
}

.activity-item.info {
    border-left-color: var(--info-color);
    background: rgba(59, 130, 246, 0.05);
}

.activity-icon {
    font-size: 1.5rem;
}

.activity-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.activity-dot.status-success {
    background: var(--success-color);
}

.activity-dot.status-warning {
    background: var(--warning-color);
}

.activity-dot.status-info {
    background: var(--info-color);
}

.activity-dot.status-progress {
    background: var(--primary-color);
}

.activity-content {
    flex: 1;
}

.activity-content h4 {
    margin: 0 0 0.25rem 0;
    color: var(--text-primary);
    font-size: 1rem;
}

.activity-content p {
    margin: 0 0 0.5rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.activity-time {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Score Chart */
.score-chart {
    padding: 1rem 0;
}

.score-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.score-display {
    text-align: center;
}

.score-value {
    font-size: 3rem;
    font-weight: bold;
    color: var(--primary-color);
    line-height: 1;
}

.score-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.score-change {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.score-change.positive {
    color: var(--success-color);
}

.mini-chart {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    height: 100px;
    margin-bottom: 0.5rem;
}

.chart-bar {
    flex: 1;
    background: linear-gradient(to top, var(--primary-color), var(--secondary-color));
    border-radius: 4px 4px 0 0;
    transition: all 0.3s ease;
}

.chart-bar:hover {
    opacity: 0.8;
}

.chart-labels {
    display: flex;
    justify-content: space-between;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* Section Actions */
.section-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    gap: 0.75rem;
    flex: 1;
}

.filter-select {
    padding: 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.search-input {
    padding: 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    flex: 1;
    min-width: 200px;
}

/* Buttons */
.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background: var(--secondary-color);
    transform: translateY(-2px);
}

.btn-secondary {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-success {
    background: var(--success-color);
    color: white;
}

.btn-warning {
    background: var(--warning-color);
    color: white;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

/* JHA Cards */
.jha-grid {
    display: grid;
    gap: 1.5rem;
}

.jha-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--border-color);
}

.jha-card.critical {
    border-left-color: var(--critical-color);
}

.jha-card.warning {
    border-left-color: var(--warning-color);
}

.jha-card.success {
    border-left-color: var(--success-color);
}

.jha-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.jha-header h3 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 1.1rem;
}

.jha-meta {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0;
}

.status-badge {
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-badge.critical {
    background: rgba(239, 68, 68, 0.2);
    color: var(--critical-color);
}

.status-badge.warning {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning-color);
}

.status-badge.success {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success-color);
}

.jha-content {
    margin-bottom: 1rem;
}

.jha-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.info-value {
    color: var(--text-primary);
    font-weight: 500;
}

.info-value.critical {
    color: var(--critical-color);
}

.info-value.warning {
    color: var(--warning-color);
}

.jha-hazards h4 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.jha-hazards ul {
    margin: 0;
    padding-left: 1.5rem;
    color: var(--text-secondary);
}

.jha-hazards li {
    margin-bottom: 0.25rem;
}

.jha-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* JHA Analytics Styles */
.jha-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.jha-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.35rem;
    transition: all 0.3s ease;
}

.jha-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.jha-stat-card .stat-icon {
    font-size: 2.5rem;
    opacity: 0.8;
}

.jha-stat-card .stat-content h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.8rem;
    color: var(--text-primary);
}

.jha-stat-card .stat-content p {
    margin: 0 0 0.5rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.jha-analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
}

.jha-chart-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.jha-chart-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.jha-chart-card.wide {
    grid-column: 1 / -1;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.chart-header h3 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 1.2rem;
    line-height: 1.3;
}

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

.chart-btn {
    background: transparent;
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    padding: 0.5rem 1rem;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.chart-btn.active,
.chart-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Risk Distribution Chart */
.risk-distribution-chart {
    margin-top: 1rem;
}

.risk-bars {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.risk-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.bar-label {
    min-width: 100px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-align: left;
}

.bar-container {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 30px;
}

.bar-fill {
    height: 20px;
    border-radius: 10px;
    transition: width 0.3s ease;
}

.bar-fill.critical {
    background: var(--critical-color);
}

.bar-fill.warning {
    background: var(--warning-color);
}

.bar-fill.primary {
    background: var(--primary-color);
}

.bar-fill.success {
    background: var(--success-color);
}

.bar-value {
    color: var(--text-primary);
    font-weight: 600;
    min-width: 50px;
    text-align: right;
    margin-left: 0.5rem;
}

/* Hazards List */
.hazards-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hazard-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.hazard-item:last-child {
    border-bottom: none;
}

.hazard-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.hazard-icon {
    font-size: 1.2rem;
}

.hazard-name {
    color: var(--text-primary);
    font-weight: 500;
}

.hazard-stats {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hazard-bar {
    width: 100px;
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.hazard-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.hazard-fill.critical {
    background: var(--critical-color);
}

.hazard-fill.warning {
    background: var(--warning-color);
}

.hazard-fill.primary {
    background: var(--primary-color);
}

.hazard-fill.success {
    background: var(--success-color);
}

.hazard-count {
    color: var(--text-primary);
    font-weight: 600;
    min-width: 40px;
}

/* Modern Chart Styles */
/* Gradient Definitions */
.critical-gradient {
    background: linear-gradient(90deg, #ff4757 0%, #ff6348 100%);
    box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
}

.warning-gradient {
    background: linear-gradient(90deg, #ffa502 0%, #ffb733 100%);
    box-shadow: 0 2px 8px rgba(255, 165, 2, 0.3);
}

.primary-gradient {
    background: linear-gradient(90deg, #5f87ff 0%, #7ba3ff 100%);
    box-shadow: 0 2px 8px rgba(95, 135, 255, 0.3);
}

.success-gradient {
    background: linear-gradient(90deg, #26de81 0%, #4ee399 100%);
    box-shadow: 0 2px 8px rgba(38, 222, 129, 0.3);
}

/* Modern Risk Distribution Chart */
.modern-chart {
    margin-top: 1.5rem;
}

.modern-risk-bars {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.modern-risk-bar {
    display: grid;
    grid-template-columns: 100px 1fr 60px;
    align-items: center;
    gap: 1rem;
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
}

.modern-risk-bar[data-delay="0"] {
    animation-delay: 0.1s;
}

.modern-risk-bar[data-delay="100"] {
    animation-delay: 0.2s;
}

.modern-risk-bar[data-delay="200"] {
    animation-delay: 0.3s;
}

.modern-risk-bar[data-delay="300"] {
    animation-delay: 0.4s;
}

.bar-label-modern {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95rem;
}

.bar-track {
    height: 32px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.bar-fill-modern {
    height: 100%;
    width: 0;
    border-radius: 16px;
    position: relative;
    animation: fillBar 1.5s ease forwards;
    animation-delay: 0.5s;
    transition: all 0.3s ease;
}

.bar-fill-modern:hover {
    transform: scaleY(1.1);
    filter: brightness(1.15);
}

.bar-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
    animation: shimmer 2s infinite;
    border-radius: 16px;
}

.bar-percentage {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.1rem;
    text-align: right;
}

/* Modern Hazards Chart */
.modern-hazards {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1rem;
}

.modern-hazard-item {
    display: grid;
    grid-template-columns: 1fr 200px 60px;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
    transition: all 0.3s ease;
}

.modern-hazard-item:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(5px);
    border-color: rgba(255, 255, 255, 0.15);
}

.modern-hazard-item[data-delay="0"] {
    animation-delay: 0.1s;
}

.modern-hazard-item[data-delay="100"] {
    animation-delay: 0.2s;
}

.modern-hazard-item[data-delay="200"] {
    animation-delay: 0.3s;
}

.modern-hazard-item[data-delay="300"] {
    animation-delay: 0.4s;
}

.modern-hazard-item[data-delay="400"] {
    animation-delay: 0.5s;
}

.hazard-info-modern {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.hazard-icon-modern {
    font-size: 1.5rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.hazard-name-modern {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95rem;
}

.hazard-stats-modern {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.hazard-track {
    width: 100%;
    height: 24px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hazard-fill-modern {
    height: 100%;
    width: 0;
    border-radius: 12px;
    position: relative;
    animation: fillBar 1.5s ease forwards;
    animation-delay: 0.7s;
    transition: all 0.3s ease;
}

.hazard-fill-modern:hover {
    transform: scaleY(1.15);
    filter: brightness(1.2);
}

.hazard-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
    animation: shimmer 2.5s infinite;
    border-radius: 12px;
}

.hazard-percentage {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1rem;
    text-align: right;
}

/* Animations */
@keyframes fillBar {
    0% {
        width: 0;
    }

    100% {
        width: var(--bar-width);
    }
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

/* Pie Chart Styles */
.pie-chart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin-top: 1rem;
}

.pie-chart-wrapper {
    width: 100%;
    max-width: 300px;
    animation: fadeInScale 0.8s ease forwards;
}

.pie-chart-svg {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

.pie-slice {
    transition: all 0.3s ease;
    cursor: pointer;
    stroke-linecap: round;
    animation: drawPie 1.5s ease forwards;
    stroke-dasharray: 0 440;
}

.pie-slice-1 {
    animation-delay: 0.2s;
}

.pie-slice-2 {
    animation-delay: 0.4s;
}

.pie-slice-3 {
    animation-delay: 0.6s;
}

.pie-slice-4 {
    animation-delay: 0.8s;
}

.pie-slice:hover {
    filter: url(#pie-glow) brightness(1.2);
    transform-origin: center;
    stroke-width: 32;
}

.pie-center-label {
    fill: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.pie-center-value {
    fill: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
}

/* Pie Chart Legend */
.pie-legend {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.pie-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    animation: fadeInRight 0.6s ease forwards;
    opacity: 0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.pie-legend-item:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(5px);
    border-color: rgba(255, 255, 255, 0.15);
}

.pie-legend-item[data-delay="0"] {
    animation-delay: 0.3s;
}

.pie-legend-item[data-delay="100"] {
    animation-delay: 0.5s;
}

.pie-legend-item[data-delay="200"] {
    animation-delay: 0.7s;
}

.pie-legend-item[data-delay="300"] {
    animation-delay: 0.9s;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.legend-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.legend-label {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.85rem;
}

.legend-value {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.95rem;
}

/* Pie Chart Animations */
@keyframes drawPie {
    to {
        stroke-dasharray: var(--final-dasharray, 440);
    }
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Hazards Timeline Chart */
.hazards-timeline-container {
    margin-top: 1.5rem;
}

.timeline-legend {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

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

.timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.critical-bg {
    background: linear-gradient(135deg, #ff4757, #ff6348);
}

.warning-bg {
    background: linear-gradient(135deg, #ffa502, #ffb733);
}

.primary-bg {
    background: linear-gradient(135deg, #5f87ff, #7ba3ff);
}

.success-bg {
    background: linear-gradient(135deg, #26de81, #4ee399);
}

.timeline-chart-wrapper {
    width: 100%;
    margin-bottom: 1.5rem;
    animation: fadeInUp 0.8s ease forwards;
}

.hazards-timeline-svg {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

.axis-label {
    fill: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
}

.line-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawLine 2s ease forwards;
}

.line-critical {
    animation-delay: 0.2s;
}

.line-warning {
    animation-delay: 0.4s;
}

.line-primary {
    animation-delay: 0.6s;
}

.line-success {
    animation-delay: 0.8s;
}

.area-fill {
    animation: fadeInArea 1.5s ease forwards;
}

.data-point {
    opacity: 0;
    animation: fadeInPoint 0.5s ease forwards;
    cursor: pointer;
    transition: all 0.3s ease;
}

.data-point:nth-child(6) {
    animation-delay: 1s;
}

.data-point:nth-child(7) {
    animation-delay: 1.1s;
}

.data-point:nth-child(8) {
    animation-delay: 1.2s;
}

.data-point:nth-child(9) {
    animation-delay: 1.3s;
}

.data-point:nth-child(10) {
    animation-delay: 1.4s;
}

.data-point:nth-child(11) {
    animation-delay: 1.5s;
}

.data-point:nth-child(12) {
    animation-delay: 1.6s;
}

.data-point:nth-child(15) {
    animation-delay: 1.2s;
}

.data-point:nth-child(16) {
    animation-delay: 1.3s;
}

.data-point:nth-child(17) {
    animation-delay: 1.4s;
}

.data-point:nth-child(18) {
    animation-delay: 1.5s;
}

.data-point:nth-child(19) {
    animation-delay: 1.6s;
}

.data-point:nth-child(20) {
    animation-delay: 1.7s;
}

.data-point:nth-child(21) {
    animation-delay: 1.8s;
}

.data-point:nth-child(24) {
    animation-delay: 1.4s;
}

.data-point:nth-child(25) {
    animation-delay: 1.5s;
}

.data-point:nth-child(26) {
    animation-delay: 1.6s;
}

.data-point:nth-child(27) {
    animation-delay: 1.7s;
}

.data-point:nth-child(28) {
    animation-delay: 1.8s;
}

.data-point:nth-child(29) {
    animation-delay: 1.9s;
}

.data-point:nth-child(30) {
    animation-delay: 2s;
}

.data-point:nth-child(33) {
    animation-delay: 1.6s;
}

.data-point:nth-child(34) {
    animation-delay: 1.7s;
}

.data-point:nth-child(35) {
    animation-delay: 1.8s;
}

.data-point:nth-child(36) {
    animation-delay: 1.9s;
}

.data-point:nth-child(37) {
    animation-delay: 2s;
}

.data-point:nth-child(38) {
    animation-delay: 2.1s;
}

.data-point:nth-child(39) {
    animation-delay: 2.2s;
}

.data-point:hover {
    r: 7;
    filter: drop-shadow(0 0 8px currentColor);
}

.line-path:hover {
    stroke-width: 4;
}

/* Timeline Insights */
.timeline-insights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.insight-badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
    animation: fadeInUp 0.6s ease forwards;
}

.insight-badge:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.15);
}

.insight-badge.critical {
    border-left: 3px solid #ff4757;
}

.insight-badge.warning {
    border-left: 3px solid #ffa502;
}

.insight-badge.primary {
    border-left: 3px solid #5f87ff;
}

.insight-badge.success {
    border-left: 3px solid #26de81;
}

.badge-icon {
    font-size: 1.5rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.badge-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.badge-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-value {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 700;
}

/* Timeline Animations */
@keyframes drawLine {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeInArea {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeInPoint {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive adjustments for modern charts */
@media (max-width: 768px) {
    .modern-risk-bar {
        grid-template-columns: 80px 1fr 50px;
        gap: 0.5rem;
    }

    .modern-hazard-item {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .hazard-stats-modern {
        grid-column: 1 / -1;
    }

    .bar-track,
    .hazard-track {
        min-width: 100%;
    }

    .pie-chart-container {
        gap: 1.5rem;
    }

    .pie-chart-wrapper {
        max-width: 220px;
    }

    .pie-legend {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .timeline-legend {
        gap: 1rem;
    }

    .timeline-insights {
        grid-template-columns: 1fr;
    }

    .hazards-timeline-svg {
        overflow-x: auto;
    }
}

/* Company Performance */
.company-performance {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.company-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.company-bar:last-child {
    border-bottom: none;
}

.company-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.company-name {
    color: var(--text-primary);
    font-weight: 500;
}

.company-jhas {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.performance-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.performance-fill {
    width: 150px;
    height: 12px;
    background: var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.performance-fill.success {
    background: var(--success-color);
}

.performance-fill.warning {
    background: var(--warning-color);
}

.performance-fill.critical {
    background: var(--critical-color);
}

.performance-score {
    color: var(--text-primary);
    font-weight: 600;
    min-width: 40px;
}

/* Insights Content */
.insights-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.insight-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: rgba(59, 130, 246, 0.05);
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
}

.insight-icon {
    font-size: 1.5rem;
    opacity: 0.8;
}

.insight-text h4 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 1.1rem;
}

.insight-text p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Certification Management */
.cert-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* View Controls */
.view-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.view-btn {
    background: transparent;
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    padding: 0.5rem 1rem;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.view-btn.active,
.view-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Companies Tile Grid */
.companies-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.company-tile-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

.company-tile-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}


.company-tile-card .company-logo {
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
}

.company-tile-card .company-info h3 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 1.2rem;
}

.company-tile-card .company-info p {
    margin: 0.25rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.compliance-status {
    margin-top: auto;
}

/* Companies List View */
.companies-list-view {
    margin-top: 2rem;
}

.list-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 1rem;
    padding: 1rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px 10px 0 0;
    font-weight: 600;
    color: var(--text-primary);
}

.list-item {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 1rem;
    padding: 1rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-top: none;
    cursor: pointer;
    transition: all 0.3s ease;
    align-items: center;
}

.list-item:hover {
    background: rgba(59, 130, 246, 0.05);
}

.list-item:last-child {
    border-radius: 0 0 10px 10px;
}

.list-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.company-logo-sm {
    width: 32px;
    height: 32px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9rem;
    font-weight: bold;
}

.company-name {
    color: var(--text-primary);
    font-weight: 500;
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--card-border);
}

.modal-header h2 {
    margin: 0;
    color: var(--text-primary);
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.modal-close:hover {
    background: var(--card-bg);
    color: var(--text-primary);
}

.modal-body {
    padding: 1.5rem;
}

.company-detail-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--card-border);
}

.company-logo-large {
    width: 80px;
    height: 80px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    font-weight: bold;
}

.company-basic-info h3 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 1.5rem;
}

.company-basic-info p {
    margin: 0.25rem 0;
    color: var(--text-secondary);
}

.company-basic-info .status-badge {
    margin-top: 0.5rem;
    display: inline-block;
}

/* Settings Styles - Matching Carrier Portal */
.settings-main-menu {
    max-width: 1200px;
    margin: 0 auto;
}

.settings-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.settings-menu-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.settings-menu-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color);
}

.settings-menu-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.settings-menu-card:hover::before {
    opacity: 1;
}

.settings-card-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.8;
}

.settings-menu-card h3 {
    margin: 0 0 1rem 0;
    color: var(--text-primary);
    font-size: 1.4rem;
    font-weight: 600;
}

.settings-menu-card p {
    margin: 0 0 1.5rem 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

.settings-card-arrow {
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 1.5rem;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.settings-menu-card:hover .settings-card-arrow {
    color: var(--primary-color);
    transform: translateX(4px);
}

/* Settings Category Views */
.settings-category {
    max-width: 1200px;
    margin: 0 auto;
}

/* Override for Tower Location Management - use full width */
#settings-tower-locations {
    max-width: none;
    margin: 0;
}

#settings-tower-locations .settings-form {
    margin-top: 2rem;
}

/* Maximize width for tower location components */
#settings-tower-locations .tower-stats-grid,
#settings-tower-locations .tower-action-buttons,
#settings-tower-locations .settings-group {
    max-width: 100%;
}

/* Reduce side padding when tower locations is active */
#settings.portal-section.active:has(#settings-tower-locations[style*="display: block"]) .portal-main {
    padding-left: 1rem;
    padding-right: 1rem;
}

.settings-breadcrumb {
    margin-bottom: 2rem;
}

.settings-breadcrumb a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.settings-breadcrumb a:hover {
    color: var(--secondary-color);
}

.settings-notice {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 2rem 0;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.notice-icon {
    font-size: 1.5rem;
    opacity: 0.8;
}

.notice-content h4 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 1.1rem;
}

.notice-content p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

.settings-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 2rem 0;
    border-bottom: 1px solid var(--card-border);
}

.settings-tab-btn {
    background: transparent;
    border: none;
    padding: 1rem 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    font-weight: 500;
}

.settings-tab-btn.active,
.settings-tab-btn:hover {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.settings-content {
    display: none;
}

.settings-content.active {
    display: block;
}

.settings-form {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 2rem;
    margin-top: 2rem;
}

.settings-group {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.settings-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.settings-group h3 {
    margin: 0 0 1.5rem 0;
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 600;
}

.settings-description {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.75rem;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.checkbox-label:hover {
    background: rgba(59, 130, 246, 0.05);
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
}

.checkbox-label span {
    color: var(--text-primary);
    font-weight: 500;
}

.inline-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.inline-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
}

.inline-checkbox span {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.input-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.input-row label {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--text-primary);
    font-weight: 500;
}

.settings-input {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 6px;
    padding: 0.75rem;
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.settings-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.requirement-label {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--text-primary);
    font-weight: 500;
}

.comm-requirements-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.phone-requirement {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.chat-requirement {
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

/* User Management Styles */
.user-stats-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.user-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

.user-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.user-stat-card .stat-icon {
    font-size: 2.5rem;
    opacity: 0.8;
}

.user-stat-card .stat-content h3 {
    margin: 0 0 0.25rem 0;
    color: var(--text-primary);
    font-size: 1.8rem;
    font-weight: 700;
}

.user-stat-card .stat-content p {
    margin: 0 0 0.5rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.user-stat-card .stat-change {
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.user-stat-card .stat-change.positive {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success-color);
}

.user-stat-card .stat-change.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
}

.user-stat-card .stat-change.negative {
    background: rgba(239, 68, 68, 0.1);
    color: var(--critical-color);
}

/* User Breakdown */
.user-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.breakdown-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 1.5rem;
}

.breakdown-card h3 {
    margin: 0 0 1.5rem 0;
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 600;
}

.user-type-stats {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.user-type-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    background: rgba(59, 130, 246, 0.05);
    transition: all 0.3s ease;
}

.user-type-item:hover {
    background: rgba(59, 130, 246, 0.1);
}

.user-type-item .type-icon {
    font-size: 1.5rem;
    opacity: 0.8;
}

.user-type-item .type-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.user-type-item .type-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
}

.user-type-item .type-count {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.user-type-item .type-percentage {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 1.1rem;
}

.activity-stats {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.activity-item:hover {
    background: rgba(59, 130, 246, 0.05);
}

.activity-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.activity-dot.online {
    background: var(--success-color);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.activity-dot.away {
    background: var(--warning-color);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.activity-dot.offline {
    background: var(--text-muted);
    box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.2);
}

.activity-label {
    flex: 1;
    color: var(--text-primary);
    font-weight: 500;
}

.activity-count {
    color: var(--text-secondary);
    font-weight: 600;
}

/* Recent Activity */
.recent-activity {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 2rem 0;
}

.recent-activity h3 {
    margin: 0 0 1.5rem 0;
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 600;
}

.activity-feed {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.activity-feed .activity-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.activity-feed .activity-item:hover {
    background: rgba(59, 130, 246, 0.05);
    border-color: var(--primary-color);
}

.activity-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.activity-content {
    flex: 1;
}

.activity-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.user-name {
    font-weight: 600;
    color: var(--text-primary);
}

.user-role {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary-color);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

.activity-time {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.activity-description {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.4;
}

.activity-status {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.5rem;
}

.activity-status.online {
    background: var(--success-color);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.activity-status.away {
    background: var(--warning-color);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.activity-status.offline {
    background: var(--text-muted);
    box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.2);
}

/* User Management Table */
.user-management-table {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 2rem 0;
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.table-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 600;
}

.table-controls {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.search-input {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    min-width: 200px;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.filter-select {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
}

.user-table {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.table-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
    gap: 1rem;
    padding: 1rem;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.3s ease;
}

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

.table-row.header {
    background: rgba(59, 130, 246, 0.05);
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--primary-color);
}

.table-row:not(.header):hover {
    background: rgba(59, 130, 246, 0.05);
}

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

.user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.user-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.user-details .user-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.user-details .user-email {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.role-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

.role-badge.super-admin {
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}

.role-badge.admin {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary-color);
}

.role-badge.analyst {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success-color);
}

.last-active {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.status-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

.status-badge.success {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success-color);
}

.status-badge.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
}

.status-badge.critical {
    background: rgba(239, 68, 68, 0.1);
    color: var(--critical-color);
}

.table-cell .btn {
    margin-right: 0.5rem;
}

.table-cell .btn:last-child {
    margin-right: 0;
}

.cert-stat-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--card-border);
    text-align: center;
}

.cert-stat-card.warning {
    border: 2px solid var(--warning-color);
}

.cert-stat-card.critical {
    border: 2px solid var(--critical-color);
}

.cert-stat-card.success {
    border: 2px solid var(--success-color);
}

.cert-stat-card h3 {
    margin: 0;
    font-size: 2.5rem;
    color: var(--text-primary);
}

.cert-stat-card p {
    margin: 0.5rem 0;
    color: var(--text-secondary);
}

.trend {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.trend.positive {
    color: var(--success-color);
}

.trend.negative {
    color: var(--critical-color);
}

/* Company Certification Cards */
.companies-grid {
    display: grid;
    gap: 2rem;
}

.company-cert-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--border-color);
}

.company-cert-card.success {
    border-left-color: var(--success-color);
}

.company-cert-card.warning {
    border-left-color: var(--warning-color);
}

.company-cert-card.critical {
    border-left-color: var(--critical-color);
}

.company-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.company-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.company-logo {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    color: white;
}

.company-info h3 {
    margin: 0 0 0.25rem 0;
    color: var(--text-primary);
    font-size: 1.3rem;
}

.company-type {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.compliance-badge {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

.compliance-badge.success {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success-color);
}

.compliance-badge.warning {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning-color);
}

.compliance-badge.critical {
    background: rgba(239, 68, 68, 0.2);
    color: var(--critical-color);
}

.company-cert-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.cert-category {
    background: var(--bg-color);
    border-radius: 8px;
    padding: 1.25rem;
}

.cert-category h4 {
    margin: 0 0 1rem 0;
    color: var(--text-primary);
    font-size: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.cert-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cert-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--card-bg);
    border-radius: 6px;
    border-left: 3px solid var(--border-color);
}

.cert-item.success {
    border-left-color: var(--success-color);
}

.cert-item.warning {
    border-left-color: var(--warning-color);
    background: rgba(245, 158, 11, 0.05);
}

.cert-item.critical {
    border-left-color: var(--critical-color);
    background: rgba(239, 68, 68, 0.05);
}

.cert-name {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
}

.cert-status {
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-align: right;
}

.cert-item.warning .cert-status {
    color: var(--warning-color);
    font-weight: 500;
}

.cert-item.critical .cert-status {
    color: var(--critical-color);
    font-weight: 600;
}

.company-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.btn-critical {
    background: var(--critical-color);
    color: white;
}

/* Certification Table */
.cert-table-container {
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--card-border);
}

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

.cert-table thead {
    background: var(--bg-darker);
}

.cert-table th {
    padding: 1rem;
    text-align: left;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border-color);
}

.cert-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.cert-table tr:hover {
    background: rgba(245, 158, 11, 0.05);
}

.warning-row {
    background: rgba(245, 158, 11, 0.05);
}

.critical-row {
    background: rgba(239, 68, 68, 0.05);
}

.personnel-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
}

.personnel-info div {
    display: flex;
    flex-direction: column;
}

.role {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.cert-badge {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    background: rgba(245, 158, 11, 0.2);
    color: var(--primary-color);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.btn-icon {
    background: transparent;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem;
    transition: transform 0.2s ease;
}

.btn-icon:hover {
    transform: scale(1.2);
}

/* Safety Observations */
.obs-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.obs-stat {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--card-border);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.obs-stat .stat-icon {
    font-size: 2.5rem;
}

.obs-stat .stat-content h3 {
    margin: 0;
    font-size: 2rem;
    color: var(--text-primary);
}

.obs-stat .stat-content p {
    margin: 0.25rem 0 0 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.observation-feed {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.obs-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--card-border);
}

.obs-card.critical {
    border-left: 4px solid var(--critical-color);
}

.obs-card.success {
    border-left: 4px solid var(--success-color);
}

.obs-card.warning {
    border-left: 4px solid var(--warning-color);
}

.obs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.obs-type-badge {
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.obs-type-badge.critical {
    background: rgba(239, 68, 68, 0.2);
    color: var(--critical-color);
}

.obs-type-badge.success {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success-color);
}

.obs-type-badge.warning {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning-color);
}

.obs-time {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.obs-card h4 {
    margin: 0 0 0.75rem 0;
    color: var(--text-primary);
}

.obs-description {
    color: var(--text-secondary);
    margin: 0 0 1rem 0;
    line-height: 1.6;
}

.obs-details {
    display: flex;
    gap: 2rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--bg-color);
    border-radius: 8px;
}

.detail-item {
    font-size: 0.9rem;
}

.detail-item strong {
    color: var(--text-secondary);
    margin-right: 0.5rem;
}

.obs-actions {
    display: flex;
    gap: 0.75rem;
}

/* Audits */
.audit-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.summary-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--card-border);
    text-align: center;
}

.summary-card h3 {
    margin: 0 0 1rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.summary-value {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.summary-value.success {
    color: var(--success-color);
}

.summary-value.warning {
    color: var(--warning-color);
}

.summary-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.audit-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.audit-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--card-border);
}

.audit-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.audit-header h3 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
}

.audit-meta {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.audit-body {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    margin-bottom: 1rem;
}

.score-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 6px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.score-circle.success {
    border-color: var(--success-color);
}

.score-circle.warning {
    border-color: var(--warning-color);
}

.score-num {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--text-primary);
}

.score-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.audit-details {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.audit-categories {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.category-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.category-label {
    color: var(--text-secondary);
}

.category-score {
    font-weight: 600;
    color: var(--text-primary);
}

.category-score.success {
    color: var(--success-color);
}

.category-score.warning {
    color: var(--warning-color);
}

.audit-findings h4 {
    margin: 0 0 0.75rem 0;
    color: var(--text-primary);
}

.audit-findings ul {
    margin: 0;
    padding-left: 1.5rem;
}

.audit-findings li {
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.finding.warning {
    color: var(--warning-color);
}

.finding.success {
    color: var(--success-color);
}

.audit-actions {
    display: flex;
    gap: 0.75rem;
}

/* Traffic Control - Crypto Style */
.crypto-header {
    background: linear-gradient(135deg, #0a0e1a 0%, #1e293b 100%);
    border: 1px solid #3b82f6;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.2);
}

.crypto-header h1 {
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 2px;
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 50%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
}

.crypto-subtitle {
    color: #94a3b8;
    font-size: 0.95rem;
    margin: 0.5rem 0 0 0;
    font-weight: 400;
}

.crypto-stats-mini {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.mini-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #94a3b8;
}

.pulse-indicator {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: pulse 2s infinite;
    box-shadow: 0 0 10px #10b981;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

.crypto-value {
    font-size: 1.3rem;
    color: #3b82f6;
    font-weight: 700;
}

.crypto-label {
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.crypto-traffic-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.crypto-panel {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.crypto-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #3b82f6, #a78bfa, #3b82f6);
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.crypto-panel:hover {
    border-color: #3b82f6;
    box-shadow: 0 8px 40px rgba(59, 130, 246, 0.2);
    transform: translateY(-2px);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #334155;
}

.panel-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #e2e8f0;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.update-time,
.total-count,
.feed-status {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
}

.feed-status {
    color: #10b981;
    font-weight: 600;
}

.crypto-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.crypto-metric {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.crypto-metric:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.metric-icon-wrapper {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3b82f6, #a78bfa);
    border-radius: 10px;
    flex-shrink: 0;
}

.crypto-icon {
    width: 24px;
    height: 24px;
    stroke: white;
}

.metric-data {
    flex: 1;
}

.metric-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: #e2e8f0;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.metric-label {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 0.25rem;
}

.metric-change {
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.metric-change.positive {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.metric-change.negative {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.metric-change.neutral {
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.1);
}

.crypto-bars {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.crypto-bar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bar-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

.bar-icon {
    font-size: 1.2rem;
    margin-right: 0.5rem;
}

.bar-name {
    flex: 1;
    color: #e2e8f0;
    font-weight: 600;
}

.bar-percent {
    color: #3b82f6;
    font-weight: 700;
    font-family: 'Courier New', monospace;
}

.bar-track {
    height: 8px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.bar-fill {
    height: 100%;
    position: relative;
    border-radius: 10px;
    transition: width 1s ease;
}

.carriers-fill {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.contractors-fill {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.owners-fill {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.regulators-fill {
    background: linear-gradient(90deg, #a78bfa, #c4b5fd);
}

.bar-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: slide 2s infinite;
}

@keyframes slide {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.bar-value {
    font-size: 0.8rem;
    color: #94a3b8;
    font-weight: 500;
}

.analytics-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.analytic-item {
    padding: 1rem;
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 8px;
}

.analytic-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: #94a3b8;
    font-size: 0.85rem;
}

.analytic-icon {
    width: 16px;
    height: 16px;
    stroke: #3b82f6;
}

.analytic-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #e2e8f0;
    margin-bottom: 0.25rem;
}

.analytic-time,
.analytic-change {
    font-size: 0.75rem;
    color: #64748b;
}

.analytic-change.positive {
    color: #10b981;
}

.view-toggle {
    display: flex;
    gap: 0.25rem;
    background: rgba(59, 130, 246, 0.1);
    padding: 0.25rem;
    border-radius: 6px;
}

.toggle-btn {
    padding: 0.4rem 0.8rem;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toggle-btn.active {
    background: #3b82f6;
    color: white;
}

.toggle-btn:hover:not(.active) {
    background: rgba(59, 130, 246, 0.2);
    color: #e2e8f0;
}

.feed-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 300px;
    overflow-y: auto;
}

.feed-item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 1rem;
    padding: 0.75rem;
    background: rgba(59, 130, 246, 0.05);
    border-left: 2px solid #3b82f6;
    border-radius: 4px;
    font-size: 0.85rem;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.feed-time {
    color: #64748b;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
}

.feed-action {
    color: #e2e8f0;
    font-weight: 500;
}

.feed-user {
    color: #94a3b8;
    font-size: 0.8rem;
    text-align: right;
}

.map-container {
    height: 350px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

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

.map-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.map-btn:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
}

.map-btn svg {
    width: 16px;
    height: 16px;
    stroke: #3b82f6;
}

.map-legend {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #334155;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #94a3b8;
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 0 10px currentColor;
}

.legend-dot.high-activity {
    background: #ef4444;
}

.legend-dot.medium-activity {
    background: #f59e0b;
}

.legend-dot.low-activity {
    background: #10b981;
}

.perf-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.perf-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.perf-label {
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 500;
}

.perf-bar-wrapper {
    height: 8px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.perf-bar {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    border-radius: 10px;
    transition: width 1s ease;
}

.perf-bar.perf-success {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.perf-value {
    font-size: 0.9rem;
    color: #e2e8f0;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.perf-optimal,
.perf-excellent {
    color: #10b981;
    font-size: 0.75rem;
}

.perf-good {
    color: #60a5fa;
    font-size: 0.75rem;
}

.perf-moderate {
    color: #f59e0b;
    font-size: 0.75rem;
}

.health-badge {
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.health-badge.healthy {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.geo-map {
    grid-column: 1 / -1;
}

@media (max-width: 1400px) {
    .crypto-traffic-grid {
        grid-template-columns: 1fr;
    }
}

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

    .crypto-metrics-grid,
    .analytics-stats {
        grid-template-columns: 1fr;
    }

    .map-legend {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Old Traffic Control Styles (Keep for backwards compatibility) */
.traffic-dashboard {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    margin: 2rem 0;
}

@media (max-width: 1200px) {
    .traffic-dashboard {
        grid-template-columns: 1fr 1fr;
    }
}

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

.traffic-overview {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--card-border);
    transition: all 0.3s ease;
}

.traffic-overview:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.traffic-overview h3 {
    margin: 0 0 1.5rem 0;
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 600;
}

.traffic-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.traffic-metric {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(59, 130, 246, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(59, 130, 246, 0.1);
    transition: all 0.3s ease;
}

.traffic-metric:hover {
    background: rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
}

.traffic-metric .metric-icon {
    font-size: 1.5rem;
    opacity: 0.8;
}

.metric-num {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.metric-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
    margin: 0;
}

.user-type-traffic {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--card-border);
    transition: all 0.3s ease;
}

.user-type-traffic:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.user-type-traffic h3 {
    margin: 0 0 1.5rem 0;
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 600;
}

.traffic-chart {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.traffic-bar {
    position: relative;
}

.bar-fill {
    height: 40px;
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    border-radius: 6px;
    transition: width 0.5s ease;
}

.bar-label {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    width: calc(100% - 2rem);
    font-weight: 600;
    color: white;
    font-size: 0.9rem;
}

.bar-value {
    color: white;
    font-weight: bold;
    font-size: 0.85rem;
}

.activity-heatmap {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--card-border);
    transition: all 0.3s ease;
}

.activity-heatmap:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.activity-heatmap h3 {
    margin: 0 0 1.5rem 0;
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 600;
}

.heatmap-grid {
    background: rgba(59, 130, 246, 0.05);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    color: var(--text-secondary);
    border: 1px solid rgba(59, 130, 246, 0.1);
    font-size: 0.9rem;
    line-height: 1.5;
}

.placeholder-text {
    margin: 0;
    font-style: italic;
    opacity: 0.8;
}

/* Notification Panel */
.notification-panel {
    position: fixed;
    right: -400px;
    top: 60px;
    width: 400px;
    height: calc(100vh - 60px);
    background: var(--card-bg);
    border-left: 1px solid var(--card-border);
    transition: right 0.3s ease;
    z-index: 99;
    display: flex;
    flex-direction: column;
}

.notification-panel.active {
    right: 0;
}

.notification-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-header h3 {
    margin: 0;
    color: var(--text-primary);
}

.notification-header button {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
}

.notification-list {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.notification-item {
    padding: 1rem;
    background: var(--bg-color);
    border-radius: 8px;
    margin-bottom: 1rem;
    border-left: 4px solid var(--border-color);
}

.notification-item.critical {
    border-left-color: var(--critical-color);
}

.notification-item.warning {
    border-left-color: var(--warning-color);
}

.notification-item strong {
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.5rem;
}

.notification-item p {
    color: var(--text-secondary);
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
}

.notification-time {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Placeholder Text */
.placeholder-text {
    text-align: center;
    color: var(--text-secondary);
    padding: 3rem;
    font-style: italic;
}

/* AI Analytics Section */
.ai-insights-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    color: white;
}

.ai-icon {
    font-size: 3rem;
}

.ai-content h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.3rem;
}

.ai-content p {
    margin: 0;
    opacity: 1;
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
}

.ai-status {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.status-indicator {
    font-size: 0.8rem;
}

.status-indicator.active {
    color: #10b981;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* AI Recommendations */
.ai-recommendations {
    margin-bottom: 3rem;
}

.recommendations-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--card-border);
    cursor: pointer;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.recommendations-header:hover {
    background: var(--bg-color);
    border-color: var(--primary-color);
}

.recommendations-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.3rem;
}

.toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.toggle-btn:hover {
    background: var(--secondary-color);
    transform: translateY(-2px);
}

.toggle-btn svg {
    transition: transform 0.3s ease;
}

.toggle-btn.open svg {
    transform: rotate(180deg);
}

.recommendations-grid {
    display: grid;
    gap: 1.5rem;
    max-height: 2000px;
    opacity: 1;
    overflow: hidden;
    transition: all 0.5s ease;
}

.recommendations-grid.collapsed {
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
}

.recommendation-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--border-color);
}

.recommendation-card.critical {
    border-left-color: var(--critical-color);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, rgba(239, 68, 68, 0.02) 100%);
}

.recommendation-card.warning {
    border-left-color: var(--warning-color);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(245, 158, 11, 0.02) 100%);
}

.recommendation-card.success {
    border-left-color: var(--success-color);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(16, 185, 129, 0.02) 100%);
}

.rec-header {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.rec-priority {
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.rec-priority.critical {
    background: var(--critical-color);
    color: white;
}

.rec-priority.warning {
    background: var(--warning-color);
    color: white;
}

.rec-priority.success {
    background: var(--success-color);
    color: white;
}

.rec-impact {
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
    font-size: 0.85rem;
    background: var(--bg-color);
    color: var(--text-secondary);
}

.recommendation-card h4 {
    margin: 0 0 1rem 0;
    color: var(--text-primary);
    font-size: 1.2rem;
}

.rec-description {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.rec-stats {
    background: var(--bg-color);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rec-stat {
    display: flex;
    gap: 1rem;
}

.rec-stat strong {
    color: var(--text-primary);
    min-width: 140px;
}

.rec-stat span {
    color: var(--text-secondary);
}

.rec-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Charts Grid */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.chart-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--card-border);
}

.chart-card.wide {
    grid-column: 1 / -1;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.chart-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.1rem;
}

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

.chart-btn {
    padding: 0.5rem 1rem;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
}

.chart-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.ai-insight {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-left: 3px solid #667eea;
    border-radius: 6px;
    padding: 0.875rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.ai-insight.warning {
    background: rgba(245, 158, 11, 0.1);
    border-left-color: var(--warning-color);
}

.ai-badge {
    background: #667eea;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.ai-insight p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Trend Chart */
.trend-chart-container {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: 1fr 30px;
    gap: 0.5rem;
    height: 300px;
}

.chart-y-axis {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    padding-right: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.trend-chart {
    grid-row: 1;
    grid-column: 2;
    position: relative;
    background: linear-gradient(to top, rgba(245, 158, 11, 0.05) 0%, transparent 100%);
    border-radius: 8px;
}

.trend-line {
    position: relative;
    height: 100%;
}

.trend-point {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--primary-color);
    border-radius: 50%;
    border: 2px solid var(--card-bg);
    cursor: pointer;
    transform: translate(-50%, 50%);
    transition: all 0.3s ease;
}

.trend-point:hover {
    width: 16px;
    height: 16px;
    background: var(--secondary-color);
}

.chart-x-axis {
    grid-row: 2;
    grid-column: 2;
    display: flex;
    justify-content: space-between;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Pie Chart */
.pie-chart-container {
    margin: 2rem auto;
    max-width: 300px;
}

.pie-chart {
    width: 250px;
    height: 250px;
    margin: 0 auto;
    position: relative;
    background: conic-gradient(#ef4444 0% 45%,
            #f59e0b 45% 73%,
            #3b82f6 73% 88%,
            #64748b 88% 100%);
    border-radius: 50%;
}

.pie-svg {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.pie-labels {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.pie-label {
    position: absolute;
    font-size: 1.2rem;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transform: translate(-50%, -50%);
}

.pie-legend {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.legend-color {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

.legend-color.fall-protection {
    background: #ef4444;
}

.legend-color.tool-drops {
    background: #f59e0b;
}

.legend-color.ppe {
    background: #3b82f6;
}

.legend-color.other {
    background: #64748b;
}

.legend-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Pie Chart Segments */
.pie-segment.critical {
    fill: var(--critical-color);
}

.pie-segment.warning {
    fill: var(--warning-color);
}

.pie-segment.primary {
    fill: var(--primary-color);
}

.pie-segment.muted {
    fill: var(--text-muted);
}

/* Horizontal Bar Chart */
.bar-chart-horizontal {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bar-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.bar-company {
    min-width: 150px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
}

.bar-container {
    flex: 1;
    position: relative;
    height: 36px;
    background: var(--bg-color);
    border-radius: 6px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.75rem;
    transition: width 0.5s ease;
}

.bar-fill.success {
    background: linear-gradient(90deg, var(--success-color), #10b981);
}

.bar-fill.warning {
    background: linear-gradient(90deg, var(--warning-color), #fbbf24);
}

.bar-fill.critical {
    background: linear-gradient(90deg, var(--critical-color), #f87171);
}

.bar-value {
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Risk Heatmap */
.risk-heatmap {
    background: var(--bg-color);
    border-radius: 8px;
    padding: 1.5rem;
}

.heatmap-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.heatmap-title {
    font-weight: 600;
    color: var(--text-primary);
}

.heatmap-legend {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
}

.legend-low,
.legend-medium,
.legend-high,
.legend-critical {
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
}

.legend-low {
    background: #10b981;
    color: white;
}

.legend-medium {
    background: #fbbf24;
    color: white;
}

.legend-high {
    background: #f59e0b;
    color: white;
}

.legend-critical {
    background: #ef4444;
    color: white;
}

.heatmap-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.heatmap-row {
    display: grid;
    grid-template-columns: 80px repeat(5, 1fr);
    gap: 0.5rem;
    align-items: center;
}

.row-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.heat-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.heat-cell:hover {
    transform: scale(1.1);
}

.heat-cell.low {
    background: #10b981;
    color: white;
}

.heat-cell.medium {
    background: #fbbf24;
    color: white;
}

.heat-cell.high {
    background: #f59e0b;
    color: white;
}

.heat-cell.critical {
    background: #ef4444;
    color: white;
}

.risk-factors {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 1rem;
}

.risk-factors h4 {
    margin: 0 0 0.75rem 0;
    color: var(--text-primary);
}

.risk-factors ul {
    margin: 0;
    padding-left: 1.5rem;
    color: var(--text-secondary);
}

.risk-factors li {
    margin-bottom: 0.5rem;
}

/* Compliance Gauge */
.compliance-gauge {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.gauge {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: conic-gradient(var(--primary-color) 0% calc(var(--percentage) * 1%),
            var(--bg-color) calc(var(--percentage) * 1%) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
}

.gauge-center {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: var(--card-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.gauge-value {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--primary-color);
}

.gauge-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.gauge-breakdown {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.breakdown-item {
    display: grid;
    grid-template-columns: 120px 1fr 50px;
    gap: 1rem;
    align-items: center;
}

.breakdown-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.breakdown-bar {
    height: 24px;
    background: var(--bg-color);
    border-radius: 4px;
    overflow: hidden;
}

.breakdown-fill {
    height: 100%;
    transition: width 0.5s ease;
}

.breakdown-fill.success {
    background: var(--success-color);
}

.breakdown-fill.warning {
    background: var(--warning-color);
}

.breakdown-value {
    text-align: right;
    color: var(--text-primary);
    font-weight: 600;
}

/* AI Learning Status */
.ai-learning-status {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid var(--card-border);
    margin-bottom: 2rem;
}

.learning-header h3 {
    margin: 0 0 1.5rem 0;
    color: var(--text-primary);
}

.learning-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.learning-stat {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-color);
    border-radius: 8px;
}

.learning-stat .stat-icon {
    font-size: 2rem;
}

.learning-stat strong {
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
}

.learning-stat p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Responsive */
@media (max-width: 1024px) {
    .portal-container {
        grid-template-columns: 200px 1fr;
    }

    .nav-item {
        padding: 1rem;
    }

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

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

    .sidebar {
        display: none;
    }

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

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

    .filter-group {
        flex-direction: column;
    }

    .ai-insights-banner {
        flex-direction: column;
        text-align: center;
    }

    .ai-status {
        margin-left: 0;
    }

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

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

    .heatmap-row {
        grid-template-columns: 60px repeat(5, 1fr);
    }

    .breakdown-item {
        grid-template-columns: 100px 1fr 40px;
    }
}

/* ============================================
   SETTINGS SECTION STYLES
   ============================================ */

/* Settings Main Menu */
.settings-main-menu {
    display: block;
}

.settings-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.settings-menu-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.settings-menu-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(59, 130, 246, 0.15);
    border-color: var(--primary-color);
}

.settings-card-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-card-icon i {
    width: 48px;
    height: 48px;
    stroke: var(--primary-color);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.settings-menu-card h3 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
}

.settings-menu-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.settings-card-arrow {
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 1.5rem;
    color: var(--primary-color);
    opacity: 0;
    transition: all 0.3s ease;
}

.settings-menu-card:hover .settings-card-arrow {
    opacity: 1;
    transform: translateX(4px);
}

/* Settings Category */
.settings-category {
    display: none;
}

.settings-breadcrumb {
    margin-bottom: 2rem;
}

.settings-breadcrumb a {
    color: var(--primary-color);
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.settings-breadcrumb a:hover {
    gap: 0.75rem;
}

/* Settings Form */
.settings-form {
    max-width: 100%;
}

.settings-group {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.settings-group h3 {
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--card-border);
}

.settings-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

/* Admin Users Table */
.admin-users-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.admin-users-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    background: rgba(59, 130, 246, 0.1);
    color: var(--text-primary);
    font-weight: 600;
    border-bottom: 2px solid var(--card-border);
}

.admin-users-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--card-border);
}

.user-avatar-sm {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
}

.role-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.role-badge.super-admin {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.role-badge.admin {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.role-badge.analyst {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
}

/* Permissions Grid */
.permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.permission-card {
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    padding: 1.5rem;
}

.permission-card h4 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.permission-list {
    list-style: none;
    padding: 0;
}

.permission-list li {
    padding: 0.5rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Menu Visibility Grid */
.menu-visibility-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1rem;
}

.menu-toggle-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.menu-toggle-item:hover {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.2);
}

.menu-item-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.menu-icon {
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-icon i {
    width: 28px;
    height: 28px;
    stroke: var(--primary-color);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.menu-item-info strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.menu-item-info p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #64748b;
    transition: 0.3s;
    border-radius: 28px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked+.toggle-slider {
    background-color: var(--primary-color);
}

.toggle-switch input:checked+.toggle-slider:before {
    transform: translateX(22px);
}

.toggle-switch input:disabled+.toggle-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Hidden Menu Item */
.nav-item.menu-hidden {
    display: none !important;
}

/* Settings Actions */
.settings-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

/* Settings Notice */
.settings-notice {
    background: rgba(59, 130, 246, 0.1);
    border-left: 4px solid var(--primary-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    gap: 1rem;
}

.notice-icon {
    font-size: 2rem;
}

.notice-icon i {
    width: 32px;
    height: 32px;
    stroke: var(--primary-color);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.integrations-notice .notice-icon i {
    stroke: var(--success-color);
}

.notice-content h4 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.notice-content p {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.9rem;
}

/* Integrations */
.integrations-notice {
    background: rgba(16, 185, 129, 0.1);
    border-left: 4px solid var(--success-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    gap: 1rem;
}

.integrations-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.integrations-filter {
    display: flex;
    gap: 0.5rem;
}

.filter-tab {
    padding: 0.5rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

.filter-tab:hover {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary-color);
}

.filter-tab.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.search-integrations {
    display: flex;
    gap: 0.5rem;
}

.search-input {
    padding: 0.5rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    color: var(--text-primary);
    min-width: 250px;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.integrations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
}

.integration-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.integration-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.integration-header {
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border-bottom: 1px solid var(--card-border);
}

.integration-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.integration-info {
    flex: 1;
}

.integration-info h3 {
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    font-size: 1.1rem;
}

.integration-info p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0;
}

.integration-status {
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.integration-status.enabled {
    color: var(--success-color);
}

.integration-status.available {
    color: var(--text-secondary);
}

.integration-toggle {
    flex-shrink: 0;
}

.integration-details {
    padding: 1.5rem;
}

.integration-details p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.integration-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.feature-tag {
    padding: 0.25rem 0.75rem;
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary-color);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.integration-actions {
    padding: 1.5rem;
    border-top: 1px solid var(--card-border);
    display: flex;
    gap: 0.75rem;
}

/* Toast Animations */
@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

/* Responsive Settings */
@media (max-width: 768px) {
    .settings-menu-grid {
        grid-template-columns: 1fr;
    }

    .menu-visibility-grid {
        grid-template-columns: 1fr;
    }

    .integrations-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .integrations-filter {
        flex-wrap: wrap;
    }

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

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

    .admin-users-table {
        font-size: 0.85rem;
    }

    .admin-users-table th,
    .admin-users-table td {
        padding: 0.5rem;
    }
}

/* ============================================
   Tower Location Management Styles
   ============================================ */

/* Dashboard Stats Cards */
.tower-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

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

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

.tower-stat-card {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.tower-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tower-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
    border-color: var(--primary-color);
}

.tower-stat-card:hover::before {
    opacity: 1;
}

.tower-stat-icon {
    display: none;
}

.tower-stat-content {
    width: 100%;
}

.tower-stat-content h2 {
    font-size: 2.5rem;
    margin: 0 0 0.25rem 0;
    color: var(--primary-color);
    font-weight: 700;
    line-height: 1;
}

.tower-stat-content p {
    font-size: 0.95rem;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    font-weight: 500;
}

.tower-stat-content .stat-change {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: block;
}

/* Quick Action Buttons */
.tower-action-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2.5rem;
}

@media (max-width: 1200px) {
    .tower-action-buttons {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .tower-action-buttons {
        grid-template-columns: 1fr;
    }
}

.btn-large {
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.btn-large i {
    width: 20px;
    height: 20px;
}

.btn-large:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
}

/* API Integrations List */
.api-integrations-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.api-integration-item {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    transition: all 0.3s ease;
}

.api-integration-item.active {
    border-left: 4px solid var(--success-color);
}

.api-integration-item.pending {
    border-left: 4px solid var(--warning-color);
}

.api-integration-item.disconnected {
    border-left: 4px solid var(--text-muted);
}

.api-integration-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.api-integration-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.api-integration-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-darker);
    border-radius: 12px;
    border: 1px solid var(--card-border);
}

.api-integration-info h4 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
}

.api-integration-info p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.api-integration-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.filter-bar {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    padding: 1rem;
    background: var(--bg-darker);
    border-radius: 8px;
    border: 1px solid var(--card-border);
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-group label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.filter-select,
.filter-input {
    padding: 0.5rem 0.75rem;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    min-width: 150px;
}

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

.table-container {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--card-border);
}

.permission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.permission-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.permission-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.permission-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.permission-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.permission-header h4 {
    margin: 0 0 0.25rem 0;
    color: var(--text-primary);
}

.permission-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.permission-header>div {
    flex: 1;
}

.permission-details {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.lease-settings-card,
.security-settings-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 1.5rem;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--card-border);
}

.setting-item:last-child {
    border-bottom: none;
}

.setting-item strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.setting-item p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0;
}

/* ============================================
   API Management Styles
   ============================================ */

.api-access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
}

.api-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.api-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.api-card-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--bg-darker);
    border-bottom: 1px solid var(--card-border);
}

.api-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.api-info {
    flex: 1;
}

.api-info h4 {
    margin: 0 0 0.25rem 0;
    color: var(--text-primary);
    font-size: 1.1rem;
}

.api-info p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.api-card-body {
    padding: 1.5rem;
}

.api-endpoints {
    margin-bottom: 1.5rem;
}

.api-endpoints strong {
    color: var(--text-primary);
    font-size: 0.95rem;
}

.api-endpoints ul {
    line-height: 1.6;
}

.api-stats {
    background: var(--bg-darker);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.stat-row:first-child {
    padding-top: 0;
}

.stat-row:last-child {
    padding-bottom: 0;
}

.stat-row strong {
    color: var(--primary-color);
    font-weight: 600;
}

.rate-limit-table {
    overflow-x: auto;
}

.rate-input {
    padding: 0.4rem 0.6rem;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.rate-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Additional responsive styles for new components */
@media (max-width: 1024px) {
    .api-access-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 768px) {
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

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

    .filter-select,
    .filter-input {
        min-width: 100%;
    }

    .setting-item {
        flex-direction: column;
    }
}

/* ============================================
   SITE MAP SECTION - Role-Based Site Management
   ============================================ */

/* Role Selector Bar */
.role-selector-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    flex-wrap: wrap;
}

.role-selector-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

.role-pills {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.role-pill {
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.role-pill .role-icon {
    width: 14px;
    height: 14px;
}

.role-pill:hover {
    border-color: var(--primary-color);
    color: var(--text-primary);
    background: rgba(59, 130, 246, 0.1);
}

.role-pill.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.role-pill[data-role="att"].active {
    background: #0078d4;
    border-color: #0078d4;
}

.role-pill[data-role="verizon"].active {
    background: #cd040b;
    border-color: #cd040b;
}

.role-pill[data-role="american-tower"].active {
    background: #e87722;
    border-color: #e87722;
}

.role-pill[data-role="osha"].active {
    background: #d97706;
    border-color: #d97706;
}

.role-pill[data-role="fcc"].active {
    background: #059669;
    border-color: #059669;
}

/* Admin Map Controls */
.admin-map-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.admin-map-filters {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex: 1;
}

.admin-map-filter-btn {
    padding: 0.6rem 1.2rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-color);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.admin-map-filter-btn:hover {
    border-color: var(--primary-color);
    background: rgba(59, 130, 246, 0.1);
}

.admin-map-filter-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.admin-filter-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.admin-filter-dot.status-info { background: #94a3b8; }
.admin-filter-dot.status-progress { background: #3b82f6; }
.admin-filter-dot.status-warning { background: #f59e0b; }
.admin-filter-dot.status-success { background: #22c55e; }
.admin-filter-dot.status-danger { background: #ef4444; }
.admin-filter-dot.status-compliant { background: #22c55e; }
.admin-filter-dot.status-pending { background: #f59e0b; }
.admin-filter-dot.status-violation { background: #ef4444; }
.admin-filter-dot.status-licensed { background: #22c55e; }
.admin-filter-dot.status-non-compliant { background: #ef4444; }

.admin-map-view-controls {
    display: flex;
    gap: 0.75rem;
}

/* Admin Map Container */
.admin-map-container-wrapper {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 2rem;
}

.admin-site-map {
    width: 100%;
    height: 600px;
    z-index: 1;
}

/* Admin Map Legend */
.admin-map-legend {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(10px);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--card-border);
    z-index: 1000;
}

.admin-map-legend h4 {
    color: var(--text-color);
    margin: 0 0 0.75rem 0;
    font-size: 0.95rem;
}

.admin-legend-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.admin-legend-item:last-child {
    margin-bottom: 0;
}

.admin-legend-marker {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid white;
}

.admin-legend-marker.planning { background: #94a3b8; }
.admin-legend-marker.in-progress { background: #3b82f6; }
.admin-legend-marker.testing { background: #f59e0b; }
.admin-legend-marker.completed { background: #22c55e; }
.admin-legend-marker.active-user {
    background: #ef4444;
    animation: markerBlink 1.5s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.admin-legend-item span {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Blinking red marker for active workers */
@keyframes markerBlink {
    0%, 100% {
        box-shadow: 0 0 4px rgba(239, 68, 68, 0.4);
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 16px rgba(239, 68, 68, 0.9), 0 0 32px rgba(239, 68, 68, 0.4);
        opacity: 0.85;
    }
}

@keyframes markerPulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.4);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.marker-active {
    position: relative;
}

.marker-active .marker-dot {
    animation: markerBlink 1.5s ease-in-out infinite;
}

.marker-active .marker-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.4);
    animation: markerPulse 2s ease-out infinite;
}

/* Admin Map Stats Grid */
.admin-map-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
}

.admin-map-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 1.5rem;
}

.admin-map-stat-card h3 {
    color: var(--text-color);
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.admin-coverage-list,
.admin-contractor-distribution {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.admin-coverage-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: rgba(59, 130, 246, 0.05);
    border-radius: 5px;
}

.admin-coverage-item .region {
    color: var(--text-color);
    font-weight: 500;
}

.admin-coverage-item .count {
    color: var(--primary-color);
    font-weight: 600;
}

.admin-distribution-item {
    padding: 0.75rem;
    background: rgba(59, 130, 246, 0.05);
    border-radius: 5px;
}

.admin-distribution-item strong {
    color: var(--text-color);
    display: block;
    margin-bottom: 0.25rem;
}

.admin-distribution-item span {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Violation / Safety stat items */
.admin-violation-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border-radius: 5px;
}

.admin-violation-item.critical {
    background: rgba(239, 68, 68, 0.08);
}

.admin-violation-item.warning {
    background: rgba(245, 158, 11, 0.08);
}

.admin-violation-item.info {
    background: rgba(59, 130, 246, 0.08);
}

.admin-violation-item.success {
    background: rgba(34, 197, 94, 0.08);
}

.admin-violation-item .violation-label {
    color: var(--text-color);
    font-weight: 500;
}

.admin-violation-item .violation-count {
    font-weight: 700;
    font-size: 1.1rem;
}

.admin-violation-item .violation-count.critical { color: #ef4444; }
.admin-violation-item .violation-count.warning { color: #f59e0b; }
.admin-violation-item .violation-count.info { color: #3b82f6; }
.admin-violation-item .violation-count.success { color: #22c55e; }

/* Custom Leaflet Popup Styles for Admin Site Map */
#site-map .leaflet-popup-content-wrapper {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 8px !important;
}

#site-map .leaflet-popup-content {
    margin: 1rem !important;
    min-width: 220px !important;
}

#site-map .leaflet-popup-tip {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
}

.admin-site-popup h3 {
    color: var(--primary-color);
    margin: 0 0 0.75rem 0;
    font-size: 1.1rem;
}

.admin-site-popup .popup-detail {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.admin-site-popup .popup-label {
    color: var(--text-muted);
}

.admin-site-popup .popup-value {
    color: var(--text-color);
    font-weight: 500;
}

.admin-site-popup .popup-status {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 0.5rem;
}

.admin-site-popup .popup-status.planning {
    background: rgba(148, 163, 184, 0.2);
    color: #94a3b8;
}

.admin-site-popup .popup-status.in-progress {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.admin-site-popup .popup-status.testing {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.admin-site-popup .popup-status.completed {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.admin-site-popup .popup-status.violation {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.admin-site-popup .popup-status.compliant {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.admin-site-popup .popup-status.licensed {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.admin-site-popup .popup-status.pending-license {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.admin-site-popup .popup-status.non-compliant {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.admin-site-popup .popup-progress {
    margin-top: 0.75rem;
}

.admin-site-popup .progress-label {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.admin-site-popup .progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(148, 163, 184, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

.admin-site-popup .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

.admin-site-popup .popup-safety-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.admin-site-popup .popup-safety-badge.safe {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.admin-site-popup .popup-safety-badge.warning {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.admin-site-popup .popup-safety-badge.danger {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.admin-site-popup .popup-section-title {
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.75rem;
    margin-bottom: 0.4rem;
    border-top: 1px solid var(--card-border);
    padding-top: 0.5rem;
}

/* Custom Leaflet Controls for Admin Map */
#site-map .leaflet-control-zoom {
    border: 1px solid var(--card-border) !important;
    border-radius: 5px !important;
    overflow: hidden;
}

#site-map .leaflet-control-zoom a {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-bottom: 1px solid var(--card-border) !important;
}

#site-map .leaflet-control-zoom a:hover {
    background: rgba(59, 130, 246, 0.2) !important;
}

/* MarkerCluster Overrides for Admin */
#site-map .marker-cluster-small,
#site-map .marker-cluster-medium,
#site-map .marker-cluster-large {
    background-color: rgba(59, 130, 246, 0.6) !important;
}

#site-map .marker-cluster-small div,
#site-map .marker-cluster-medium div,
#site-map .marker-cluster-large div {
    background-color: rgba(59, 130, 246, 0.8) !important;
    color: white !important;
    font-weight: bold !important;
}

/* Responsive: Site Map */
@media (max-width: 768px) {
    .role-selector-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .role-pills {
        flex-wrap: wrap;
    }

    .admin-map-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-map-filters {
        flex-wrap: wrap;
    }

    .admin-site-map {
        height: 400px;
    }

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

    .admin-map-legend {
        position: relative;
        top: auto;
        right: auto;
        margin: 0.5rem;
        border-radius: 0 0 8px 8px;
    }
}