/* css/components.css — cards, buttons, forms, navbar, tables, trip cards, modals, alerts, footer, etc. */

/* Week separator lines in Activity Trends table */
.week-separator td { border-top: 3px solid var(--border-color-subtle) !important; }

/* ================== SORTABLE COLUMN HEADERS ================== */
.sortable { cursor: pointer; user-select: none; }
.sortable:hover { color: var(--bs-primary, #2563eb); }
.sort-indicator { font-size: 0.75em; opacity: 0.6; }

/* ================== TABLE / DATATABLES ================== */
.duty-hours {
    font-weight: bold;
}

.table-container {
    margin-top: 20px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    padding: 1rem;
}

/* Increase width of Round Trip Totals column and allow text wrapping */
#trips_table th:nth-child(10),
#trips_table td:nth-child(10),
#user_trips_table th:nth-child(10),
#user_trips_table td:nth-child(10) {
    width: 200px;
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
    min-height: 50px;
}

.card {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border-radius: var(--card-radius);
    border: 1px solid var(--border-color-subtle);
    box-shadow: var(--elev-2);
    transition: box-shadow var(--transition-base, 0.2s ease);
}

.card:hover {
    box-shadow: var(--elev-3);
}

.card-header {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
    position: relative;
    font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: var(--card-radius) var(--card-radius) 0 0 !important;
}

.form-control {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--input-border);
    border-radius: var(--radius-md);
}

.form-control:focus {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--primary-blue);
    box-shadow: var(--focus-ring);
}

.form-control::placeholder,
textarea::placeholder {
    color: var(--placeholder-color);
    opacity: 1;
}

textarea,
.form-select {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--input-border);
    border-radius: var(--radius-md);
}

.form-select:focus {
    border-color: var(--primary-blue);
    box-shadow: var(--focus-ring);
}

/* Form labels — tighter hierarchy against inputs */
.form-label {
    font-weight: 500;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}

/* ================== MODALS ================== */
.modal-content {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}
.modal-header {
    background-color: var(--bg-elevated);
    border-bottom-color: var(--border-color);
}

/* ================== ALERTS ================== */
.alert-info {
    background-color: var(--alert-info-bg);
    border-color: var(--alert-info-border);
    color: var(--alert-info-text);
}
.alert-info strong, .alert-info b {
    color: var(--alert-info-strong);
}
.alert-warning {
    background-color: var(--alert-warning-bg);
    border-left-color: var(--alert-warning-border);
    color: var(--alert-warning-text);
}
.alert-warning strong, .alert-warning b {
    color: var(--alert-warning-strong);
}
.alert-danger {
    background-color: var(--alert-danger-bg);
    border-left-color: var(--alert-danger-border);
    color: var(--alert-danger-text);
}
.alert-danger strong, .alert-danger b {
    color: var(--alert-danger-strong);
}

.table thead th {
    background-color: var(--bg-elevated);
    color: var(--text-secondary);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--bg-elevated) !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    color: var(--text-primary);
}

/* Table Background and Stripes */
.table {
    background-color: var(--table-bg) !important;
    color: var(--text-primary);
}

.table td,
.table th {
    border-color: var(--border-color);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--table-stripe-bg) !important;
}

.table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: var(--table-bg) !important;
}

.dataTables_paginate .paginate_button {
    background-color: var(--bg-elevated);
    border-color: var(--border-color);
}

.dataTables_paginate .paginate_button:hover {
    background-color: var(--border-color-subtle) !important;
}

/* ================== TRIP PAIR ROW BORDERS ================== */
/* Remove border between outbound and inbound rows in paired round trips */
#trips_table tbody tr.trip-pair-1[data-trip-type="home_away"] + tr.trip-pair-1[data-trip-type="away_home"],
#trips_table tbody tr.trip-pair-2[data-trip-type="home_away"] + tr.trip-pair-2[data-trip-type="away_home"],
#user_trips_table tbody tr.trip-pair-1[data-trip-type="home_away"] + tr.trip-pair-1[data-trip-type="away_home"],
#user_trips_table tbody tr.trip-pair-2[data-trip-type="home_away"] + tr.trip-pair-2[data-trip-type="away_home"] {
    border-top: none !important;
}

#trips_table tbody tr.trip-pair-1[data-trip-type="home_away"],
#trips_table tbody tr.trip-pair-2[data-trip-type="home_away"],
#user_trips_table tbody tr.trip-pair-1[data-trip-type="home_away"],
#user_trips_table tbody tr.trip-pair-2[data-trip-type="home_away"] {
    border-bottom: none !important;
}

/* Trip Colors (Single Set) */
#trips_table tbody tr.trip-pair-1 td,
#user_trips_table tbody tr.trip-pair-1 td {
    background-color: var(--trip-pair-1-bg) !important;
    color: var(--trip-pair-1-fg) !important;
}

#trips_table tbody tr.trip-pair-2 td,
#user_trips_table tbody tr.trip-pair-2 td {
    background-color: var(--trip-pair-2-bg) !important;
    color: var(--trip-pair-2-fg) !important;
}

#trips_table tbody tr.home-home td,
#user_trips_table tbody tr.home-home td {
    background-color: var(--trip-pair-1-bg) !important;
    color: var(--trip-pair-1-fg) !important;
}

/* Incomplete Trip Colors */
#trips_table tbody tr.unpaired-home-away td,
#user_trips_table tbody tr.unpaired-home-away td {
    background-color: var(--trip-unpaired-ha-bg) !important;
    color: var(--trip-unpaired-ha-fg) !important;
}

#trips_table tbody tr.unpaired-away-home td,
#user_trips_table tbody tr.unpaired-away-home td {
    background-color: var(--trip-unpaired-ah-bg) !important;
    color: var(--trip-unpaired-ah-fg) !important;
}

#trips_table tbody tr.away-away td,
#user_trips_table tbody tr.away-away td {
    background-color: var(--trip-away-away-bg) !important;
    color: var(--trip-away-away-fg) !important;
}

/* ================== TABLE ROW HOVER EFFECTS ================== */
.table > tbody > tr {
    transition: background-color var(--transition-fast), filter var(--transition-fast);
}
.table:not(.table-borderless) > tbody > tr:hover > td {
    background-color: rgba(var(--primary-blue-rgb), 0.04) !important;
}
/* Colored trip rows: use brightness instead of overriding background */
.table > tbody > tr[class*="trip-pair"]:hover > td,
.table > tbody > tr.home-home:hover > td,
.table > tbody > tr[class*="unpaired"]:hover > td,
.table > tbody > tr.away-away:hover > td {
    filter: brightness(1.08);
}