html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/******************************************************************************************************************************/
/* Custom CSS classes */
/******************************************************************************************************************************/

/* Dark mode styles --------------------------------------------------------------*/
body.dark-mode {
    background-color: #1e1e1e;
    color: #f0f0f0;
}

.navbar-dark {
    background-color: #2a2a2a !important;
}

.navbar-dark .nav-link {
    color: #f0f0f0 !important;
}

/* Login / Register page design styles -------------------------------------------*/
.branding-panel {
    background: linear-gradient(to bottom right, #253026, #44914c);
    color: white;
    padding: 2rem;
    text-align: center;
}

.form-panel {
    background-color: #f8f9fa;
    padding: 2rem;
}

.e-checkbox-wrapper {
    margin-top: 30px;
}

.e-customsize.e-checkbox-wrapper .e-frame {
    height: 30px;
    width: 30px;
    padding: 8px 0;
}

.e-customsize.e-checkbox-wrapper .e-check {
    font-size: 20px;
}

.e-customsize.e-checkbox-wrapper .e-ripple-container {
    height: 52px;
    top: -11px;
    width: 47px;
}

.e-customsize.e-checkbox-wrapper .e-label {
    line-height: 30px;
    font-size: 20px;
}

@media (max-width: 768px) {
    .branding-panel {
        min-height: 40vh;
        border-bottom: 1px solid #ccc;
    }

    .form-panel {
        min-height: 60vh;
    }
}

.row.h-100 {
    margin-right: 0;
    margin-left: 0;
}

.col-md-6 {
    padding-left: 0;
    padding-right: 0;
}

.detailtable td {
    font-size: 13px;
    padding: 4px;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: normal;
    color: white;
    margin-left: auto;
    margin-right: auto;
}

/* Make all text inside shipment-secondary black ------------------------------------- */
.shipment-secondary td{
    color: #000; 
}

/* Icons for grid for shipments, trips and products on internal user side --------------------------------- */
.shipment-icon {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-inline {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

/* Icon/Marker for shipment record for client user side ------------------------------------------------- */
.shipment-marker {
    width: 5px; /* Thin vertical bar */
    height: 18px; /* Taller than a dot for a modern look */
    background: #007BFF; /* Same blue you’re using elsewhere */
    border-radius: 2px; /* Slight rounding for a polished feel */
    display: block;
    margin: 0 auto; /* Centers it in the column */
}

/* Status column for shipment grid ------------------------------------------------- */
.status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 14px;
    text-align: center;
    white-space: nowrap;
}

/* Status colors ------------------------------------------------------------------ */
.status-pending-load {
    background-color: #FCF4A9;
    color: #524B0B;
}

.status-out-for-delivery {
    background-color: #005FA8;
    color: #C7E8FF;
}

.status-completed {
    background-color: #0A8243;
    color: #D9FFEA;
}

.status-canceled {
    background-color: #B00000;
    color: #FFD9D9;
}

.status-pending-pod {
    background-color: #520085;
    color: #F0D6FF;
}

.status-ccp-hold {
    background-color: #FFD4B0;
    color: #8F4900;
}

.status-layout-hold {
    background-color: #FFEDBD;
    color: #593F00;
}

.status-with-aa {
    background-color: #FFC5BD;
    color: #630E00;
}

.status-destination-warehouse {
    background-color: #9CD3FF;
    color: #004578;
}

.status-origin-warehouse {
    background-color: #EDB5FF;
    color: #6A0094;
}

.status-unloaded {
    background-color: #BCFFB0;
    color: #0E6100;
}

.status-border-crossing {
    background-color: #B2CDD6;
    color: #2C4E5E;
}

.status-laredo-yard {
    background-color: #D9D9D9;
    color: #636363;
}

.status-nvo-laredo-yard {
    background-color: #BDBDBD;
    color: #292929;
}

.status-monterrey-yard {
    background-color: #FFFCD6;
    color: #474233;
}

.status-driver-rest {
    background-color: #633500;
    color: #FFE0BD;
}

.status-spotted {
    background-color: #F0FFD4;
    color: #3C452D;
}

.status-documents-hold {
    background-color: #FFD9D9;
    color: #5C2323;
}

.status-delivered {
    background-color: #10569E;
    color: #BDDDFF;
}

.status-under-repair {
    background-color: #525252;
    color: #D6D6D6;
}

.status-critical-status {
    background-color: #593535;
    color: #D4B8B8;
}

.status-to-origin-warehouse {
    background-color: #254952;
    color: #C2E8F0;
}

.status-closed {
    background-color: #067361;
    color: #C9FFEC;
}

.status-in-monitoring {
    background-color: #B5024D;
    color: #FFD9EA;
}

.status-canceled {
    background-color: #969696;
    color: #000000;
}

.status-first-stop {
    background-color: #D7C7FF;
    color: #4A3B73;
}

.status-on-hold {
    background-color: #4B187A;
    color: #E5C9FF;
}

.status-in-transit {
    background-color: #075E56;
    color: #FFFFFF;
}

.status-pending-invoice {
    background-color: #995500;
    color: #FFFFFF;
}

.status-pending-payment {
    background-color: #7A7A06;
    color: #FFFFFF;
}

.status-paid {
    background-color: #00663F;
    color: #FFFFFF;
}

.status-default {
    background-color: #e2e3e5;
    color: #6c757d;
}

/* Stronger style for Shipments grid */
.shipment-status {
    font-size: 0.8rem;
    font-weight: 580;
}

/* Subtle style for Trips grid */
.trip-status {
    font-size: 0.8rem;
    font-weight: 430;
}

/* Column in clients grid to combine origin and destination into a single column -------------------------- */
.route-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 520;
}

.route-origin,
.route-destination {
    color: #333;
}

.route-arrow {
    color: #007BFF;
    font-weight: 900;
}

/* Shipment detail after expanding record in grid. ------------------------------------------------------------ */
/* Client view ------------------------------------------------------------- */
/* Main container */
.shipment-card {
    background: #f0f0f0;
    border-radius: 10px;
    border-left: 4px solid #007BFF;
    padding: 16px;
    margin: 10px 0 20px 0;
    display: flex;
    gap: 40px;
}

/* Vertical stack of rows inside each card column */
.shipment-card-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

/* A single row of label + value */
.info-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Label styling for each field */
.info-label {
    font-weight: 700;
    color: #333;
    min-width: 140px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Value styling for each field */
.info-value {
    font-weight: 500;
    color: #444;
}

/* Internal view ------------------------------------------------------------- */
/* Internal card slight variation */
.internal-card {
    background: #f4f4f4; /* slightly more neutral gray */
    border-left: 4px solid #d9534f; /* subtle accent for internal UI */
    padding: 18px;
}

/* Section titles for Trips / Products */
.detail-section-title {
    margin: 20px 0 10px 4px;
    font-size: 15px;
    font-weight: 700;
    color: #444;
    letter-spacing: 0.3px;
}

/* Block wrapper */
.detail-block {
    margin-top: 20px;
}

/* Base marker style */
.section-marker {
    display: inline-block;
    width: 6px;
    height: 18px;
    border-radius: 3px;
    margin-right: 8px;
    vertical-align: middle;
}

/* Blue marker for TRIPS */
.trips-marker {
    background-color: #0078d4; /* Microsoft blue */
}

/* Yellow marker for PRODUCTS */
.products-marker {
    background-color: #f4c542; /* clean, modern yellow */
}

/* Divider line for shipments grid detail template ----------------------------------------------------------- */
.detail-divider {
    border-top: 2px solid #ddd;
    margin: 20px 0;
}

/* Base styling for the DAYS cell */
.e-grid .e-rowcell .days-value {
    position: relative;
    padding-left: 16px;
    font-weight: 600;
}

/* Set a colored circle for the column "Days since invoice" in the providers record ----------------------------------- */
/* Base circle */
/* Base DAYS cell styling */
.e-grid .e-rowcell .days-value {
    position: relative;
    padding-left: 16px;
    font-weight: 600;
}

/* Base circle */
.e-grid .e-rowcell .days-value::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ccc; /* default gray */
}

/* Green: 0–15 days */
.e-grid .e-rowcell.days-green .days-value::before {
    background: #28a745;
}

/* Yellow: 16–30 days */
.e-grid .e-rowcell.days-yellow .days-value::before {
    background: #f4c542;
}

/* Red: 31+ days */
.e-grid .e-rowcell.days-red .days-value::before {
    background: #d9534f;
}

/* PAID: black circle only */
.e-grid .e-rowcell.days-paid .days-value::before {
    background: #000; /* black */
}

/* Hide the number when PAID */
.e-grid .e-rowcell.days-paid .days-value {
    color: transparent;
}