/* 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 #adb5bd !important; }

/* ================== SORTABLE COLUMN HEADERS ================== */
.sortable { cursor: pointer; user-select: none; }
.sortable:hover { color: var(--bs-primary, #0d6efd); }
.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-color: var(--border-color);
}

.card-header {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
    position: relative;
    border-radius: var(--card-radius) var(--card-radius) 0 0 !important;
}

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

.form-control::placeholder {
    color: var(--placeholder-color);
}

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

textarea::placeholder {
    color: var(--placeholder-color);
}

/* ================== 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-primary);
}

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

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #ced4da !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: #83938E !important;
    color: #ffffff !important;
}

#trips_table tbody tr.trip-pair-2 td,
#user_trips_table tbody tr.trip-pair-2 td {
    background-color: #68757F !important;
    color: #ffffff !important;
}

#trips_table tbody tr.home-home td,
#user_trips_table tbody tr.home-home td {
    background-color: #83938E !important;
    color: #ffffff !important;
}

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

#trips_table tbody tr.unpaired-away-home td,
#user_trips_table tbody tr.unpaired-away-home td {
    background-color: #e6d5a7 !important;
    color: var(--text-primary) !important;
}

#trips_table tbody tr.away-away td,
#user_trips_table tbody tr.away-away td {
    background-color: #ff1030 !important;
    color: #ffffff !important;
}