/* Heritage Transport CPL - app styles on top of Tabler */
:root {
  --cpl-brand: #0b5ea8;
  --cpl-brand-2: #0a8f6a;
  --cpl-sidebar-bg: #0f2a44;
}
[ng-cloak], .ng-cloak { display: none !important; }
body { background: var(--tblr-body-bg); }

/* ---------- login */
.cpl-login { min-height: 100vh; display: flex; background: var(--tblr-bg-surface); }
.cpl-login-brand {
  flex: 1 1 56%; position: relative; overflow: hidden; color: #fff; display: flex;
  background:
    radial-gradient(700px 420px at 85% 10%, rgba(77, 171, 247, .35), transparent 60%),
    radial-gradient(600px 400px at 0% 100%, rgba(32, 201, 151, .35), transparent 60%),
    linear-gradient(145deg, #0a2540 0%, #0b5ea8 55%, #0a8f6a 100%);
}
.cpl-login-brand::before {  /* soft snowflake / dot pattern */
  content: ""; position: absolute; inset: 0; opacity: .12;
  background-image: radial-gradient(#fff 1px, transparent 1.2px); background-size: 22px 22px;
}
.cpl-login-brand::after {   /* glow ring */
  content: ""; position: absolute; width: 520px; height: 520px; right: -160px; bottom: -200px; border-radius: 50%;
  border: 60px solid rgba(255, 255, 255, .05);
}
.cpl-login-brand-inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 2.2rem; padding: 3rem 4rem; width: 100%; max-width: 760px; margin: 0 auto; }
.cpl-login-logo { background: #fff; border-radius: 14px; padding: 6px 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); display: inline-flex; }
.cpl-login-logo img { height: 44px; width: auto; }
.cpl-login-chip { display: inline-flex; align-items: center; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px; padding: .3rem .85rem; font-size: .8rem; font-weight: 500; backdrop-filter: blur(4px); }
.cpl-login-hero h1 { font-size: clamp(2rem, 3.4vw, 3.1rem); font-weight: 800; line-height: 1.1; margin: 1.1rem 0 1rem; letter-spacing: -.02em; }
.cpl-login-hero p { font-size: 1.05rem; line-height: 1.6; opacity: .85; max-width: 520px; margin: 0; }
.cpl-login-features { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.cpl-login-features li { display: flex; align-items: center; gap: .9rem; }
.cpl-login-features li > span { width: 44px; height: 44px; border-radius: 12px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2); font-size: 1.35rem; }
.cpl-login-features b { display: block; font-size: .98rem; }
.cpl-login-features small { opacity: .75; font-size: .82rem; }
.cpl-login-route { display: flex; align-items: center; max-width: 520px; }
.cpl-login-route .node { width: 46px; height: 46px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: #0b5ea8; font-size: 1.35rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); }
.cpl-login-route .line { flex: 1; position: relative; height: 2px; margin: 0 .4rem; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .7) 0 8px, transparent 8px 14px); }
.cpl-login-route .line i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -62%); font-size: 1.4rem; color: #fff;
  animation: cpl-drive 4s ease-in-out infinite; }
.cpl-login-route .line:nth-of-type(4) i { animation-delay: 2s; }
@keyframes cpl-drive { 0% { left: 12%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 88%; opacity: 0; } }
.cpl-login-route-labels { display: flex; justify-content: space-between; max-width: 520px; font-size: .75rem; opacity: .75; margin-top: -1.6rem; }

.cpl-login-form { flex: 1 1 44%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; position: relative; }
.cpl-login-card { width: 100%; max-width: 400px; }
.cpl-login-card h2 { font-size: 1.75rem; font-weight: 700; }
.cpl-login-card .form-control-lg { font-size: 1rem; border-radius: 10px; }
.cpl-login-card .input-icon .form-control-lg { padding-left: 2.6rem; }
.cpl-pwd-toggle { position: absolute; right: .85rem; top: 50%; transform: translateY(-50%); z-index: 5; font-size: 1.15rem; }
.cpl-login-btn { border-radius: 10px; font-weight: 600; background: linear-gradient(90deg, #0b5ea8, #0a8f6a); border: 0; }
.cpl-login-btn:hover { filter: brightness(1.07); }
.cpl-login-footer { position: absolute; bottom: 1.2rem; left: 0; right: 0; text-align: center; font-size: .75rem; color: var(--tblr-secondary); }
.cpl-login-mobile-brand { display: none; text-align: center; margin-bottom: 1.5rem; }
.cpl-login-mobile-brand img { height: 56px; width: auto; }

@media (max-width: 991.98px) {
  .cpl-login { flex-direction: column; }
  .cpl-login-brand { display: none; }
  .cpl-login-form { min-height: 100vh; background:
      radial-gradient(600px 300px at 50% -10%, rgba(11, 94, 168, .18), transparent 70%), var(--tblr-bg-surface); }
  .cpl-login-mobile-brand { display: block; }
  .cpl-login-card h2, .cpl-login-card > p { text-align: center; }
}
@media (max-height: 760px) and (min-width: 992px) {
  .cpl-login-brand-inner { gap: 1.4rem; padding: 2rem 3rem; }
  .cpl-login-route, .cpl-login-route-labels { display: none; }
}

/* ---------- sidebar */
.cpl-sidebar { background: linear-gradient(180deg, var(--cpl-sidebar-bg) 0%, #0b1f33 100%) !important; }
.cpl-sidebar .navbar-brand-image { height: 2.1rem; background: #fff; border-radius: 8px; padding: 2px; }
.cpl-sidebar .cpl-brand { padding: .75rem 0; white-space: normal; }
.cpl-sidebar .cpl-brand .fw-bold { font-size: .82rem; letter-spacing: .01em; }
.cpl-sidebar .cpl-brand .small { font-size: .72rem; }
.cpl-sidebar .nav-link { font-weight: 500; }
.cpl-sidebar .dropdown-menu .dropdown-item { display: flex; align-items: center; padding-left: 2.6rem; font-size: .84rem; }
.cpl-sidebar .dropdown-menu .dropdown-item.active { background: rgba(255, 255, 255, .08); color: #fff; border-left: 3px solid #4dabf7; }
@media (min-width: 992px) {
  .cpl-sidebar .dropdown-menu { position: static !important; transform: none !important; }
}
.cpl-sidebar-signout { margin-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: .5rem; }
.cpl-sidebar-signout .nav-link:hover { color: #ff8787; }
.cpl-topbar { background: var(--tblr-bg-surface); border-bottom: 1px solid var(--tblr-border-color); }

/* ---------- page chrome */
.cpl-view { min-height: calc(100vh - 7rem); }
.page-header .page-pretitle { letter-spacing: .04em; }
.cpl-page-icon { width: 2.5rem; height: 2.5rem; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; }
.card-header .card-title i { opacity: .7; }
.cpl-filter-bar { background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius-lg); padding: .75rem 1rem; }

/* ---------- tables */
.table-cpl { font-size: .84rem; }
.table-cpl thead th { position: sticky; top: 0; z-index: 2; background: var(--tblr-bg-surface-secondary); white-space: nowrap; font-size: .7rem; }
.table-cpl td { vertical-align: middle; }
.table-cpl tfoot td { font-weight: 600; background: var(--tblr-bg-surface-secondary); }
.table-scroll { max-height: 68vh; overflow: auto; }
.table-scroll-sm { max-height: 42vh; overflow: auto; }
.cpl-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.row-click { cursor: pointer; }
tr.row-selected td { background: rgba(32, 107, 196, .08) !important; }

/* ---------- toasts / loading */
.cpl-toasts { position: fixed; top: 1rem; right: 1rem; z-index: 2000; width: min(420px, calc(100vw - 2rem)); }
.cpl-toast { transition: opacity .35s, transform .35s; margin-bottom: .5rem; }
.cpl-toast.hide { opacity: 0; transform: translateX(30px); }
.cpl-loading { position: fixed; top: 0; left: 0; right: 0; z-index: 2100; }
.cpl-loading .progress { border-radius: 0; height: 3px; }

/* ---------- widgets */
.kpi-trend-up { color: var(--tblr-red); }
.kpi-trend-down { color: var(--tblr-green); }
.cost-row { display: flex; justify-content: space-between; padding: .45rem 0; border-bottom: 1px dashed var(--tblr-border-color); }
.cost-row:last-child { border-bottom: 0; }
.cost-total { font-size: 1.15rem; font-weight: 700; border-top: 2px solid var(--tblr-border-color); padding-top: .6rem; margin-top: .3rem; }
.map-box { height: 420px; border-radius: var(--tblr-border-radius); overflow: hidden; }
.map-box-lg { height: calc(100vh - 13rem); min-height: 480px; border-radius: var(--tblr-border-radius); overflow: hidden; }
.photo-thumb { width: 100%; max-height: 180px; object-fit: cover; border-radius: 8px; border: 1px solid var(--tblr-border-color); }
.odo-input { font-size: 1.6rem; font-weight: 700; letter-spacing: .05em; text-align: center; font-variant-numeric: tabular-nums; }
.stop-dot { width: 1.8rem; height: 1.8rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; color: #fff; }
.drag-handle { cursor: grab; }
.timeline-event-icon.bg-load { background: var(--tblr-green) !important; }
.timeline-event-icon.bg-unload { background: var(--tblr-orange) !important; }
.leaflet-container { font-family: inherit; }
.truck-marker { background: transparent; border: 0; }
.truck-marker .pin { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); border: 2px solid #fff; }
/* Tom Select: its bootstrap5 theme uses --bs-* variables, Tabler defines --tblr-*; restyle to match Tabler inputs */
.ts-wrapper.form-select, .ts-wrapper.form-control { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.ts-wrapper { min-height: calc(1.4285714em + 1rem + 2px); }
.ts-wrapper .ts-control, .ts-wrapper.single.input-active .ts-control {
  border: var(--tblr-border-width, 1px) solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background-color: var(--tblr-bg-forms, var(--tblr-bg-surface));
  color: var(--tblr-body-color);
  padding: .5625rem .75rem;
  min-height: calc(1.4285714em + 1.125rem + 2px);
  font-size: .875rem;
  line-height: 1.4285714;
}
.ts-wrapper.single .ts-control { padding-right: 2.25rem; }
.ts-wrapper:not(.form-control):not(.form-select).single .ts-control { background-position: right .75rem center; }
[data-bs-theme="dark"] .ts-wrapper.single .ts-control {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23c8d3e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
}
.ts-wrapper.focus .ts-control {
  border-color: var(--tblr-primary);
  box-shadow: 0 0 0 .25rem rgba(var(--tblr-primary-rgb), .25);
}
.ts-wrapper.disabled .ts-control { background-color: var(--tblr-bg-surface-secondary); opacity: .7; }
.ts-wrapper .ts-control > input { color: var(--tblr-body-color); font-size: .875rem; }
.ts-wrapper .ts-control > input::placeholder { color: var(--tblr-secondary); }
.ts-wrapper.multi .ts-control > .item {
  background: var(--tblr-primary-lt, rgba(var(--tblr-primary-rgb), .1)); color: var(--tblr-primary);
  border: 1px solid rgba(var(--tblr-primary-rgb), .25); border-radius: 4px; padding: 0 .4rem;
}
.ts-wrapper.plugin-clear_button .clear-button { color: var(--tblr-secondary); right: 2rem; }
.ts-dropdown, .ts-dropdown.form-control, .ts-dropdown.form-select {
  z-index: 2050; background: var(--tblr-bg-surface); color: var(--tblr-body-color);
  border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius);
  box-shadow: var(--tblr-box-shadow-dropdown, 0 8px 24px rgba(0, 0, 0, .12));
}
/* dropdown kept inside its wrapper (used in modals): position under the control */
.ts-wrapper > .ts-dropdown { position: absolute; top: 100%; left: 0; right: 0; width: 100%; margin-top: 2px; }
.modal .ts-wrapper.dropdown-active { z-index: 10; }
/* let an open dropdown overflow a scrollable modal instead of being clipped */
.modal-dialog-scrollable .modal-content:has(.ts-wrapper.dropdown-active),
.modal-dialog-scrollable .modal-body:has(.ts-wrapper.dropdown-active),
.modal .table-responsive:has(.ts-wrapper.dropdown-active) { overflow: visible; }
.ts-dropdown .option, .ts-dropdown .no-results, .ts-dropdown .create { padding: .45rem .75rem; font-size: .875rem; }
.ts-dropdown .active { background: rgba(var(--tblr-primary-rgb), .08); color: var(--tblr-primary); }
.ts-dropdown .selected { background: rgba(var(--tblr-primary-rgb), .14); }
.ts-dropdown .highlight { background: rgba(var(--tblr-yellow-rgb, 245, 159, 0), .3); border-radius: 2px; }
.form-select-sm + .ts-wrapper .ts-control, .ts-wrapper.form-select-sm .ts-control { padding: .25rem .5rem; min-height: calc(1.4285714em + .5rem + 2px); font-size: .8rem; }

@media print {
  .cpl-sidebar, .cpl-topbar, .footer, .d-print-none, .cpl-toasts { display: none !important; }
  .page-wrapper { margin: 0 !important; }
  .card { border: 0 !important; box-shadow: none !important; }
}