/* Small additions on top of Tailwind. */

html { -webkit-tap-highlight-color: transparent; }
body { font-feature-settings: "cv11", "ss01"; }

[x-cloak] { display: none !important; }
/* The hidden attribute must win over Tailwind display utilities (flex, grid, …). */
[hidden] { display: none !important; }

/* iOS/Android notch + gesture bar padding */
.safe-top    { padding-top: env(safe-area-inset-top); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* Diagonal accent echoing the underline in the PanTrucks logo */
.brand-slash {
    position: absolute;
    height: 22px;
    background: #E42313;
    transform: skewX(-35deg);
}

.spinner {
    width: 1.1rem; height: 1.1rem;
    border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 9999px; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.fade-in { animation: fadeIn .25s ease-out both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Form controls ---------- */
.field-label { display: block; margin-bottom: .375rem; font-size: .875rem; font-weight: 500; color: #334155; }
.field-hint  { margin-top: .375rem; font-size: .75rem; color: #64748b; }
.field-input {
    display: block; width: 100%; height: 2.75rem; padding: 0 .875rem;
    border: 1px solid #cbd5e1; border-radius: .75rem; background: #fff;
    font-size: .9375rem; color: #0f172a; transition: border-color .15s, box-shadow .15s;
}
textarea.field-input { height: auto; min-height: 5rem; padding: .625rem .875rem; resize: vertical; }
select.field-input {
    appearance: none; padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M1.6 5.1a.6.6 0 0 1 .9 0L8 10.6l5.5-5.5a.6.6 0 1 1 .9.9l-6 6a.6.6 0 0 1-.8 0l-6-6a.6.6 0 0 1 0-.9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .75rem center; background-size: .8rem;
}
.field-input::placeholder { color: #94a3b8; }
.field-input:focus { outline: none; border-color: #E42313; box-shadow: 0 0 0 4px rgba(228, 35, 19, .12); }
.field-input[readonly] { background: #f8fafc; color: #64748b; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    height: 2.5rem; padding: 0 1rem; border-radius: .75rem; font-size: .875rem; font-weight: 600;
    white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s, opacity .15s;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(228, 35, 19, .2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.btn-primary   { background: #E42313; color: #fff; }
.btn.btn-primary:hover:not(:disabled) { background: #BF1A0D; }
.btn.btn-secondary { background: #fff; color: #334155; border: 1px solid #cbd5e1; }
.btn.btn-secondary:hover:not(:disabled) { background: #f8fafc; }
.btn.btn-danger    { background: #fff; color: #BF1A0D; border: 1px solid #FBCBC5; }
.btn.btn-danger:hover:not(:disabled) { background: #FEF3F2; }
.btn-icon {
    display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .625rem;
    color: #64748b; transition: background-color .15s, color .15s;
}
.btn-icon:hover { background: #f1f5f9; color: #0f172a; }
.btn-icon.danger:hover { background: #FEF3F2; color: #BF1A0D; }

/* ---------- Modal dialogs ---------- */
dialog.modal {
    width: min(100% - 2rem, 32rem); max-height: calc(100dvh - 2rem); margin: auto; padding: 0;
    border: 0; border-radius: 1.25rem; background: #fff; color: inherit;
    box-shadow: 0 24px 48px -12px rgba(16, 24, 40, .25);
}
dialog.modal[open] { animation: fadeIn .18s ease-out both; }
dialog.modal::backdrop { background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px); }
@media (max-width: 639px) {
    /* Bottom sheet on phones */
    dialog.modal { width: 100%; max-width: none; margin: auto 0 0; border-radius: 1.25rem 1.25rem 0 0; max-height: 92dvh; }
}

/* ---------- Maps ---------- */
.eis-you {
    display: block; width: 18px; height: 18px; border-radius: 9999px;
    background: #2563eb; border: 3px solid #fff; box-shadow: 0 0 0 0 rgba(37, 99, 235, .5);
    animation: youPulse 1.8s ease-out infinite;
}
@keyframes youPulse { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .5); } 100% { box-shadow: 0 0 0 16px rgba(37, 99, 235, 0); } }
.leaflet-container { font-family: inherit; }

/* ---------- QR scanner ---------- */
#scanner { background: #0b0b0c; }
#reader { width: 100%; }
#reader video { width: 100% !important; height: 100% !important; object-fit: cover; }
#reader__dashboard, #reader img[alt="Info icon"], #qr-shaded-region { display: none !important; }
.scan-frame {
    position: absolute; left: 50%; top: 50%; width: min(68vw, 280px); aspect-ratio: 1;
    transform: translate(-50%, -50%); border-radius: 1.5rem;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55); pointer-events: none;
}
.scan-frame::before, .scan-frame::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    border: 3px solid rgba(255, 255, 255, .9);
    -webkit-mask: linear-gradient(#000 0 0) top left / 28% 28% no-repeat, linear-gradient(#000 0 0) top right / 28% 28% no-repeat,
                  linear-gradient(#000 0 0) bottom left / 28% 28% no-repeat, linear-gradient(#000 0 0) bottom right / 28% 28% no-repeat;
            mask: linear-gradient(#000 0 0) top left / 28% 28% no-repeat, linear-gradient(#000 0 0) top right / 28% 28% no-repeat,
                  linear-gradient(#000 0 0) bottom left / 28% 28% no-repeat, linear-gradient(#000 0 0) bottom right / 28% 28% no-repeat;
}
.scan-frame::after { border: 0; background: linear-gradient(to bottom, transparent, rgba(228, 35, 19, .9), transparent) 0 0 / 100% 3px no-repeat; animation: scanLine 2.2s ease-in-out infinite; -webkit-mask: none; mask: none; }
@keyframes scanLine { 0%, 100% { background-position: 0 8%; } 50% { background-position: 0 92%; } }

/* Fleet markers + clusters (PTSI asset-map style) */
.vmark { width: 84px; text-align: center; pointer-events: none; }
.vlabel {
    display: inline-block; background: #0f172a; color: #fff; font: 700 11px/1.4 ui-monospace, 'JetBrains Mono', Consolas, monospace;
    padding: 1px 6px; border-radius: 6px; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.35); pointer-events: auto;
}
.vdot {
    width: 16px; height: 16px; border-radius: 50%; margin: 3px auto 0; border: 2px solid #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.45); background: #94a3b8; pointer-events: auto;
}
.vcluster {
    width: 42px; height: 42px; border-radius: 50%; background: #0f172a; color: #fff; display: flex;
    align-items: center; justify-content: center; font-weight: 700; border: 3px solid rgba(255,255,255,.85);
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.leaflet-popup-content-wrapper { border-radius: 14px; }
.leaflet-popup-content { margin: 12px 14px; }

/* Phone Locate: map fills the space between top bar and bottom tabs */
.locate-shell { top: calc(3.5rem + 1px + env(safe-area-inset-top)); bottom: calc(3.8rem + env(safe-area-inset-bottom)); }
/* Layer switcher sits in the right-hand button column, under the search bar */
.locate-shell .leaflet-top.leaflet-right { top: 4.25rem; }
.locate-shell .leaflet-control-layers { border: 0; border-radius: .75rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 0 0 1px rgba(15,23,42,.05); }
.locate-shell .leaflet-control-layers-toggle { width: 44px; height: 44px; }
/* Live GPS (Geotab) units: blue dot in the label; arrow when moving (points along the heading) */
.vlabel.gps::before {
    content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 4px 1px 0; border-radius: 9999px;
    background: #38bdf8; box-shadow: 0 0 0 2px rgba(56, 189, 248, .35); vertical-align: middle;
}
.varrow {
    width: 0; height: 0; margin: 3px auto 0; border-left: 8px solid transparent; border-right: 8px solid transparent;
    border-bottom: 16px solid #94a3b8; transform: rotate(var(--rot, 0deg));
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); pointer-events: auto;
}

/* Units flagged Missing after an inventory count */
.vlabel.missing { background: #BF1A0D; }