@import url('carrier-portal.css');

/* Contractor Portal Overrides & Extensions */

:root {
    --contractor-highlight: #38bdf8;
    --contractor-warning: #f97316;
    --contractor-critical: #ef4444;
    --contractor-success: #22c55e;
    --contractor-info: #60a5fa;
}

.nav-brand h2 {
    color: var(--contractor-highlight);
}

.stat-card .stat-icon {
    background: rgba(56, 189, 248, 0.15);
}

/* Dashboard */
.safety-alerts {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.alert-item {
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.85);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.alert-item.critical {
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2);
}

.alert-item.warning {
    border-color: rgba(249, 115, 22, 0.4);
    box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.15);
}

.alert-item.info {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.15);
}

.alert-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.alert-title {
    font-weight: 600;
    color: var(--text-primary);
}

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

.access-window-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.access-window {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid rgba(56, 189, 248, 0.2);
    background: rgba(15, 23, 42, 0.85);
    gap: 1.5rem;
}

.window-time {
    min-width: 150px;
    font-weight: 600;
    color: var(--contractor-highlight);
}

.window-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    color: var(--text-secondary);
}

.window-details strong {
    color: var(--text-primary);
}

.window-status {
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.window-status.approved {
    background: rgba(34, 197, 94, 0.15);
    color: var(--contractor-success);
}

.window-status.pending {
    background: rgba(249, 115, 22, 0.18);
    color: var(--contractor-warning);
}

.window-status.scheduled {
    background: rgba(96, 165, 250, 0.2);
    color: var(--contractor-info);
}

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

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

.action-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.action-list li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.action-meta {
    display: block;
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.action-status {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.action-status.overdue {
    color: var(--contractor-critical);
}

.training-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.training-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 10px;
    background: rgba(56, 189, 248, 0.08);
}

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

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

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

.incident-table th,
.incident-table td {
    padding: 0.75rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    font-size: 0.85rem;
}

.briefing-kit {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.briefing-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(56, 189, 248, 0.15);
    border-radius: 10px;
    padding: 0.75rem 1rem;
}

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

/* Access Control */
.access-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.access-table-wrapper {
    border-radius: 12px;
    border: 1px solid var(--card-border);
    overflow: hidden;
    background: var(--card-bg);
}

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

.access-table th,
.access-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    font-size: 0.85rem;
}

.access-table tbody tr.row-highlight {
    background: rgba(56, 189, 248, 0.12);
}

.access-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.summary-card {
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--card-border);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.summary-stats {
    display: flex;
    justify-content: space-between;
}

.summary-count {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--contractor-highlight);
}

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

.checkin-list,
.insight-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

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

/* Site Assignments */
.map-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
}

.map-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

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

.site-map {
    min-height: 420px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.map-popup {
    color: var(--bg-color);
    font-size: 0.85rem;
    line-height: 1.4;
}

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

.assigned-sites-list ul,
.asset-list,
.audit-checklist,
.document-list,
.field-notes-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.assigned-sites-list li {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(56, 189, 248, 0.15);
}

.detail-meta {
    display: block;
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin-top: 0.2rem;
}

.site-progress {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.progress-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    align-items: center;
}

.progress-value {
    font-weight: 600;
    color: var(--text-secondary);
}

/* Work Logs */
.worklog-layout {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 1.5rem;
}

.worklog-timeline {
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--card-border);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.timeline-item {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 1rem;
}

.timeline-date {
    font-weight: 600;
    color: var(--contractor-highlight);
}

.timeline-content {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

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

.worklog-summary {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

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

.crew-hours-list,
.site-frequency-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.frequency-count {
    color: var(--text-secondary);
}

/* Compliance */
.compliance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

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

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

.compliance-table th,
.compliance-table td {
    padding: 0.75rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    text-align: left;
    font-size: 0.85rem;
}

.renewal-pipeline {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pipeline-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(56, 189, 248, 0.08);
    border-radius: 10px;
    padding: 0.75rem 1rem;
}

.pipeline-title {
    font-weight: 500;
}

.pipeline-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--contractor-highlight);
}

.audit-checklist li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(15, 23, 42, 0.8);
    border-radius: 10px;
    padding: 0.75rem 1rem;
}

.check-status {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.check-status.complete {
    color: var(--contractor-success);
}

.check-status.pending {
    color: var(--contractor-warning);
}

.check-status.in-progress {
    color: var(--contractor-info);
}

/* Equipment */
.equipment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

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

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

.equipment-table th,
.equipment-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.readiness-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(56, 189, 248, 0.08);
    padding: 0.75rem 1rem;
    border-radius: 10px;
}

.checklist-item input[type="checkbox"] {
    accent-color: var(--contractor-highlight);
}

.asset-list li {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(56, 189, 248, 0.12);
}

/* Documents */
.document-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.document-card {
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--card-border);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.document-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: rgba(15, 23, 42, 0.8);
    padding: 0.75rem 1rem;
    border-radius: 10px;
}

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

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

.analytics-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.analytics-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Settings */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.settings-card {
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--card-border);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.settings-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
}

.settings-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.permission-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.permission-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(15, 23, 42, 0.8);
    padding: 0.75rem 1rem;
    border-radius: 10px;
}

.permission-tag {
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    background: rgba(56, 189, 248, 0.2);
    color: var(--contractor-highlight);
}

.integration-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.integration-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.integration-status {
    font-size: 0.8rem;
    color: var(--contractor-success);
}

.integration-status.warn {
    color: var(--contractor-warning);
}

@media (max-width: 1200px) {

    .map-layout,
    .worklog-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {

    .access-window,
    .timeline-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .window-time,
    .progress-item {
        width: 100%;
    }

    .map-controls {
        flex-direction: column;
        align-items: stretch;
    }
}