/* ========================================================
   Trip Form V2 - shared by newtrip.php and edittrip.php
   Design language matches tripsheetrecord_v2.css
   ======================================================== */

body {
    margin: 0;
    padding: 0;
    background: #eef2f6;            /* light page canvas */
    font-family: 'Inter', 'Segoe UI', 'PT Sans', 'Tahoma', sans-serif;
    color: #1f2933;
    font-size: 15px;
}

.tf-wrap {
    width: 96%;
    margin: 16px auto;
}

/* ---------- Header ---------- */
.tf-header {
    background: linear-gradient(135deg, #1e3a5f 0%, #16222A 100%);
    color: #fff;
    padding: 14px 22px;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .24);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}
.tf-header h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: .4px; }
.tf-header .tf-sub { font-size: 14px; color: #c7d5e0; margin-top: 4px; }

.tf-chip {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255,255,255,.12);
    color: #fff;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    margin-right: 6px;
    border: 1px solid rgba(255,255,255,.15);
}

/* ---------- Cards (DARK upper card view) ---------- */
.tf-card {
    background: #1e293b;            /* dark slate inside the card */
    padding: 14px 22px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    border-bottom: 1px solid #2d3a4f;
}
.tf-card.tf-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    align-items: flex-start;
}
.tf-card h3 {
    grid-column: 1 / -1;
    margin: 0 0 4px;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #60a5fa;                 /* lighter blue on dark bg */
    font-weight: 700;
}

.tf-field { display: flex; flex-direction: column; min-width: 0; }
.tf-field label {
    font-size: 14px;
    color: #cbd5e1;                 /* light label on dark card */
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
    margin-bottom: 5px;
}
.tf-field input[type="text"],
.tf-field input[type="number"],
.tf-field input[type="date"],
.tf-field select,
.tf-field textarea {
    padding: 7px 11px;
    border: 1px solid #3b4a63;
    border-radius: 6px;
    background: #0f172a;            /* deeper dark for inputs */
    color: #f1f5f9;                 /* light text inside fields */
    font-size: 15px;
    height: 36px;
    box-sizing: border-box;
    width: 100%;
}
.tf-field input::placeholder,
.tf-field textarea::placeholder { color: #64748b; }
.tf-field input[readonly] {
    background: #111c30;
    color: #94a3b8;
    cursor: not-allowed;
}
.tf-field input[type="date"] {
    color-scheme: dark;             /* native date picker icon adapts */
}
.tf-field input:focus, .tf-field select:focus, .tf-field textarea:focus {
    outline: none;
    border-color: #60a5fa;
    background: #1a2740;
    box-shadow: 0 0 0 3px rgba(96,165,250,.25);
}

/* Driver field with refresh button */
.tf-field.with-action { position: relative; }
.tf-field.with-action input { padding-right: 38px; }
.tf-field.with-action .field-action {
    position: absolute;
    bottom: 3px; right: 3px;
    width: 30px; height: 30px;
    border: 0;
    background: #1e88e5;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
}
.tf-field.with-action .field-action:hover { background: #0d47a1; }

/* Inline checkbox row */
.tf-checks {
    grid-column: 1 / -1;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    padding-top: 4px;
}
.tf-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    padding: 7px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    color: #e2e8f0;
    font-size: 15px;
}
.tf-check input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }

/* Select2 height tweak (dark variant for upper card) */
.tf-field .select2-container .select2-selection--single {
    height: 36px;
    border: 1px solid #3b4a63;
    border-radius: 6px;
    background: #0f172a;
}
.tf-field .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px;
    padding-left: 11px;
    font-size: 15px;
    color: #f1f5f9;
}
.tf-field .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #64748b;
}
.tf-field .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px;
}
.tf-field .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #94a3b8 transparent transparent transparent;
}

/* ---------- KPI / totals strip (dark, bottom of upper card) ---------- */
.tf-kpis {
    display: flex;
    gap: 12px;
    padding: 12px 22px;
    background: #1e293b;
    border-bottom: 0;
    border-radius: 0 0 12px 12px;   /* close off the upper card */
    flex-wrap: wrap;
    align-items: center;
}
.tf-kpi {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}
.tf-kpi .ico {
    width: 40px; height: 40px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 18px;
}
.tf-kpi .lbl { font-size: 13px; color: #94a3b8; text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }
.tf-kpi .val { font-size: 24px; color: #f1f5f9; font-weight: 700; line-height: 1.1; }
.tf-kpi.k-lr  .ico { background: #1e88e5; }
.tf-kpi.k-pkg .ico { background: #f57c00; }
.tf-kpi.k-wgt .ico { background: #2e7d32; }

.tf-actions {
    display: flex;
    gap: 10px;
    margin-left: auto;
    align-items: center;
    flex-wrap: wrap;
}
.tf-btn {
    padding: 10px 20px;
    border-radius: 6px;
    border: 0;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .4px;
    transition: all .15s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.tf-btn.primary { background: #2e7d32; color: #fff; }
.tf-btn.primary:hover { background: #1b5e20; transform: translateY(-1px); }
.tf-btn.secondary { background: #1e88e5; color: #fff; }
.tf-btn.secondary:hover { background: #0d47a1; }
.tf-btn.warn { background: #f57c00; color: #fff; }
.tf-btn.warn:hover { background: #e65100; }
.tf-btn.ghost { background: #f1f5f9; color: #475569; border: 1px solid #e1e8ee; }
.tf-btn.ghost:hover { background: #e2e8f0; }
.tf-btn[disabled] { opacity: .55; cursor: not-allowed; }

.tf-loading {
    display: none;
    align-items: center;
    gap: 8px;
    color: #fbbf24;
    font-weight: 600;
    font-size: 13px;
}
.tf-loading.show { display: inline-flex; }
.tf-loading .dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #f57c00;
    animation: tfPulse 600ms ease infinite alternate;
}
@keyframes tfPulse { from { opacity: .35; } to { opacity: 1; } }

/* ---------- LR table card (detached, light) ---------- */
.tf-table-wrap {
    background: #fff;
    border-radius: 12px;             /* full rounded - separate card */
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    overflow: hidden;                /* keep rounded corners crisp on both sides */
    margin-top: 14px;                /* gap between upper card & table */
    margin-bottom: 24px;             /* breathing room below the table */
}

/* Helper: make a field span the full row of a .tf-card.tf-form grid */
.tf-field.tf-field-wide { grid-column: 1 / -1; }
.tf-field textarea { min-height: 64px; resize: vertical; }

/* Same equal padding on both sides so the table is inset matching left/right. */
.tf-table-wrap .dataTables_wrapper {
    padding: 10px 12px 12px;
    box-sizing: border-box;
    overflow-x: auto;                /* if anything still overflows, scroll inside the card (rounded edges stay clean) */
    overflow-y: visible;
}
.tf-table-wrap .dataTables_length,
.tf-table-wrap .dataTables_filter,
.tf-table-wrap .dataTables_info,
.tf-table-wrap .dataTables_paginate { padding: 0 4px; }

/* Custom thin scrollbar (if scroll appears) */
.tf-table-wrap .dataTables_wrapper::-webkit-scrollbar { height: 8px; }
.tf-table-wrap .dataTables_wrapper::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}
.tf-table-wrap .dataTables_wrapper::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.tf-table-wrap .dataTables_wrapper::-webkit-scrollbar-track { background: transparent; }

#abc {
    width: 100% !important;
    background: #fff;
    border-collapse: collapse;
}
#abc thead th {
    background: #f1f5f9;
    color: #475569;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 9px 8px;
    border-bottom: 2px solid #cdd5db;
    text-align: left;
    font-weight: 700;
    white-space: nowrap;
}
#abc thead th:first-child { padding-left: 10px; }
#abc thead th:last-child  { padding-right: 10px; }
#abc tbody td {
    padding: 7px 8px;
    border-bottom: 1px solid #eef2f6;
    font-size: 14px;
    color: #1f2933;
    vertical-align: middle;
    transition: background .12s ease;
}
#abc tbody td:first-child { padding-left: 10px; }
#abc tbody td:last-child  { padding-right: 10px; }
#abc tbody tr:hover td {
    background: #e0f2fe;                         /* sky-100 - visible highlight */
    box-shadow: inset 0 1px 0 #93c5fd,
                inset 0 -1px 0 #93c5fd;
}
#abc tbody tr:hover td:first-child {
    box-shadow: inset 4px 0 0 #1e88e5,            /* left accent bar */
                inset 0 1px 0 #93c5fd,
                inset 0 -1px 0 #93c5fd;
}

#abc tbody td input[type="text"] {
    padding: 5px 8px;
    border: 1px solid #cdd5db;
    border-radius: 5px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    background: #f8fafc;
}
#abc tbody td input[type="text"]:focus {
    outline: none;
    border-color: #1e88e5;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(30,136,229,.15);
}
#abc tbody td input[type="checkbox"] { width: 17px; height: 17px; cursor: pointer; }

/* DataTables tweaks */
.dataTables_wrapper { font-size: 14px; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { font-size: 14px; color: #1f2933; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    padding: 7px 11px;
    border: 1px solid #cdd5db;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
}
.dataTables_wrapper .dataTables_filter input { min-width: 220px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 6px !important;
    margin: 0 2px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #1e88e5 !important;
    color: #fff !important;
    border-color: #1e88e5 !important;
}
.dataTables_wrapper .dt-buttons .dt-button {
    background: #2e7d32 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 6px !important;
    padding: 7px 16px !important;
    margin-right: 6px !important;
    box-shadow: none !important;
    font-size: 14px !important;
}

/* Warehouse select2 inside rows - sized so the table fits inside the card.
   The trigger truncates with ellipsis; clicking opens an auto-widening
   dropdown panel that shows full warehouse names (see .wh-select-dropdown). */
.wh-select-wrap {
    min-width: 170px;
    max-width: 200px;
}
.wh-select-wrap .select2-container { width: 100% !important; max-width: 100% !important; }
.wh-select-wrap .select2-container .select2-selection--single {
    height: 32px;
    border: 1px solid #cdd5db;
    border-radius: 5px;
    background: #f8fafc;
    width: 100%;
}
.wh-select-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 30px;
    padding-left: 9px;
    padding-right: 38px;  /* leave room for the clear + arrow indicators */
    font-size: 14px;
    color: #1f2933;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wh-select-wrap .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 30px;
    right: 2px;
}
.wh-select-wrap .select2-container--default .select2-selection--single .select2-selection__clear {
    margin-right: 18px;  /* keep clear button from overlapping the arrow */
}
/* Make the dropdown options panel itself nice and wide enough to read */
.select2-dropdown { font-size: 14px; }
.select2-results__option { padding: 7px 10px; }

/* The warehouse dropdown panel auto-widens (dropdownAutoWidth:true) so the
   FULL warehouse name is readable when the user opens it, even if the
   in-row trigger truncates with ellipsis. */
.wh-select-dropdown { min-width: 340px !important; max-width: 480px !important; }
.wh-select-dropdown .select2-results__option {
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
}

/* ============================================================
   THEME: Local Hire (apply to <body class="lh-theme">)
   ------------------------------------------------------------
   Distinguishes local-hire screens (local_hire_new / edit) from
   the main trip screens by recoloring the dark upper card from
   slate-blue to a deep teal / petrol palette - a logistics/
   industrial feel that's clearly separate from the main trip.
   ============================================================ */
body.lh-theme .tf-header {
    background: linear-gradient(135deg, #0e7490 0%, #083344 100%);
}
body.lh-theme .tf-card,
body.lh-theme .tf-kpis {
    background: #083344;             /* deep teal (cyan-950) */
}
body.lh-theme .tf-card {
    border-bottom-color: #134e5c;
}
body.lh-theme .tf-card h3 {
    color: #67e8f9;                  /* cyan-300 section title */
}
body.lh-theme .tf-field label {
    color: #cffafe;
}
body.lh-theme .tf-field input[type="text"],
body.lh-theme .tf-field input[type="number"],
body.lh-theme .tf-field input[type="date"],
body.lh-theme .tf-field select,
body.lh-theme .tf-field textarea {
    background: #042134;             /* deeper teal for inputs */
    border-color: #155e75;
    color: #ecfeff;
}
body.lh-theme .tf-field input::placeholder,
body.lh-theme .tf-field textarea::placeholder { color: #5d8a96; }
body.lh-theme .tf-field input[readonly] {
    background: #0a2a3a;
    color: #8eb4be;
}
body.lh-theme .tf-field input:focus,
body.lh-theme .tf-field select:focus,
body.lh-theme .tf-field textarea:focus {
    outline: none;
    border-color: #22d3ee;
    background: #052e44;
    box-shadow: 0 0 0 3px rgba(34,211,238,.25);
}

/* Select2 trigger in the upper card (lh-theme) */
body.lh-theme .tf-field .select2-container .select2-selection--single {
    background: #042134;
    border-color: #155e75;
}
body.lh-theme .tf-field .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #ecfeff;
}
body.lh-theme .tf-field .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #67e8f9 transparent transparent transparent;
}

/* Driver-style field action button in lh-theme (teal) */
body.lh-theme .tf-field.with-action .field-action { background: #0891b2; }
body.lh-theme .tf-field.with-action .field-action:hover { background: #0e7490; }

/* Inline checkboxes inside lh-theme dark card */
body.lh-theme .tf-check {
    background: rgba(255,255,255,.06);
    border-color: rgba(103,232,249,.18);
    color: #cffafe;
}

/* KPI tiles within lh-theme */
body.lh-theme .tf-kpi {
    background: rgba(255,255,255,.05);
    border-color: rgba(103,232,249,.12);
}
body.lh-theme .tf-kpi .lbl { color: #8eb4be; }
body.lh-theme .tf-kpi .val { color: #ecfeff; }
body.lh-theme .tf-kpi.k-lr  .ico { background: #0891b2; }
body.lh-theme .tf-kpi.k-pkg .ico { background: #f59e0b; }
body.lh-theme .tf-kpi.k-wgt .ico { background: #10b981; }

/* Loading dot tinted teal */
body.lh-theme .tf-loading { color: #67e8f9; }
body.lh-theme .tf-loading .dot { background: #67e8f9; }

/* LR table row hover - teal accent for lh-theme pages */
body.lh-theme #abc tbody tr:hover td {
    background: #cffafe;
    box-shadow: inset 0 1px 0 #67e8f9,
                inset 0 -1px 0 #67e8f9;
}
body.lh-theme #abc tbody tr:hover td:first-child {
    box-shadow: inset 4px 0 0 #0891b2,
                inset 0 1px 0 #67e8f9,
                inset 0 -1px 0 #67e8f9;
}