/* FreightDeck Permits — Standalone CSS (dark theme matching production) */
* { margin:0; padding:0; box-sizing:border-box; }

:root {
    --bg-primary: #111111;
    --bg-secondary: #1a1a1a;
    --bg-accent: #2d2d2d;
    --text-primary: #f5f5f5;
    --text-secondary: #d4d4d4;
    --text-muted: #a0a0a0;
    --border-color: #2a2a2a;
    --accent-primary: #4a9eff;
    --accent-light: #1e3a5f;
    --accent-text: #4a9eff;
    --input-bg: #232323;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.2);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-primary);
    min-height: 100vh;
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ==================== NAV ==================== */
.nav { background:rgba(17,17,17,0.95); border-bottom:1px solid #2a2a2a; padding:12px 24px; position:sticky; top:0; z-index:100; backdrop-filter:blur(12px); }
.nav-inner { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; }
.nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; color:#f5f5f5; font-weight:700; font-size:16px; }
.nav-sub { color:#4a9eff; font-weight:600; }
.nav-right { display:flex; align-items:center; gap:10px; }
#userBadge { font-size:13px; color:#a0a0a0; padding:4px 12px; background:rgba(74,158,255,0.12); border-radius:20px; }

/* ==================== BUTTONS ==================== */
.btn { padding:8px 16px; border-radius:6px; border:1px solid #333; background:rgba(26,26,26,0.6); color:#e5e5e5; font-size:13px; cursor:pointer; transition:all 0.15s ease; text-decoration:none; display:inline-block; }
.btn:hover { background:rgba(74,158,255,0.15); border-color:#4a9eff; }
.btn-sm { padding:6px 12px; font-size:12px; }
.btn-lg { padding:12px 24px; font-size:15px; }
.btn-outline { background:transparent; border-color:#444; }
.btn-primary { background:linear-gradient(135deg,#4a9eff 0%,#3b82f6 100%); border:none; color:white; font-weight:600; }
.btn-primary:hover { background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%); }
.btn-secondary { background:rgba(100,100,100,0.15); border:1px solid #333; color:#a0a0a0; }
.btn-secondary:hover { background:rgba(100,100,100,0.25); color:#f5f5f5; }
.btn-large { padding:14px 24px; font-size:15px; font-weight:600; border-radius:8px; box-shadow:0 4px 12px rgba(74,158,255,0.3); }

/* ==================== HERO ==================== */
.hero { text-align:center; padding:48px 24px 32px; }
.hero-inner { max-width:700px; margin:0 auto; }
.badge { display:inline-block; background:rgba(74,158,255,0.15); color:#4a9eff; border:1px solid rgba(74,158,255,0.3); padding:4px 14px; border-radius:20px; font-size:12px; font-weight:600; margin-bottom:16px; }
.hero h1 { font-size:36px; font-weight:700; color:#f5f5f5; line-height:1.2; margin-bottom:12px; }
.accent { color:#4a9eff; }
.hero-sub { font-size:16px; color:#888; }

/* ==================== TOOL SECTION ==================== */
.tool-section { max-width:1200px; margin:0 auto; padding:0 24px 40px; }

/* ==================== PERMIT ESTIMATOR LAYOUT ==================== */
.permit-main-layout {
    display: grid;
    grid-template-columns: 0.85fr 1fr;
    gap: 24px;
    min-height: 500px;
}

/* Form Panel */
.permit-form-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-section {
    background: linear-gradient(180deg, #1c1c1c 0%, #1a1a1a 100%);
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-section:hover { border-color:#333; }
.form-section:focus-within { border-color:rgba(74,158,255,0.3); box-shadow:0 2px 12px rgba(0,0,0,0.2), 0 0 0 1px rgba(74,158,255,0.1); }

.form-section label { color:#888; font-size:0.8rem; font-weight:600; display:block; margin-bottom:8px; text-transform:uppercase; letter-spacing:0.03em; }
.form-section .field-icon { margin-right:6px; opacity:0.8; }
.section-label { font-size:0.8rem; text-transform:uppercase; letter-spacing:0.03em; color:#888; font-weight:600; margin-bottom:14px; display:block; }

/* Lane Row (origin/dest) */
.lane-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.lane-field { position:relative; }
.lane-field label { display:block; font-size:0.8rem; color:#888; margin-bottom:8px; font-weight:600; text-transform:uppercase; letter-spacing:0.03em; }
.lane-field input { width:100%; padding:11px 14px; border:1px solid #333; border-radius:8px; font-size:0.9rem; background:#232323; color:#f5f5f5; font-weight:500; }
.lane-field input:hover { border-color:#444; background:#282828; }
.lane-field input:focus { outline:none; border-color:#4a9eff; background:#282828; box-shadow:0 0 0 3px rgba(74,158,255,0.2); }
.lane-field input::placeholder { color:#555; }

/* Dims Grid */
.dims-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.dim-field label { text-transform:none; font-size:0.75rem; color:#666; letter-spacing:0; margin-bottom:6px; display:block; }

/* Ft + In inputs */
.ft-in-input { display:flex; align-items:center; gap:4px; }
.ft-in-input input {
    width:52px; padding:9px 6px; border:1px solid #333; border-radius:6px;
    font-size:0.85rem; background:#232323; color:#f5f5f5; text-align:center; font-weight:500;
}
.ft-in-input input:hover { border-color:#444; background:#282828; }
.ft-in-input input:focus { outline:none; border-color:#4a9eff; background:#282828; box-shadow:0 0 0 2px rgba(74,158,255,0.15); }
.ft-in-input input::placeholder { color:#555; }
.ft-in-input .unit-label, .weight-input .unit-label { font-size:0.7rem; color:#555; font-weight:500; min-width:14px; }

/* Weight input */
.weight-input { display:flex; align-items:center; gap:6px; }
.weight-input input {
    flex:1; padding:9px 10px; border:1px solid #333; border-radius:6px;
    font-size:0.85rem; background:#232323; color:#f5f5f5; font-weight:500;
}
.weight-input input:hover { border-color:#444; background:#282828; }
.weight-input input:focus { outline:none; border-color:#4a9eff; background:#282828; box-shadow:0 0 0 2px rgba(74,158,255,0.15); }
.weight-input input::placeholder { color:#555; }

/* Dim warnings */
.dim-warnings { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.dim-warnings:empty { display:none; }

/* Equipment select */
.equipment-select {
    width:100%; padding:11px 14px; border:1px solid #333; border-radius:8px;
    font-size:0.9rem; background:#232323; color:#f5f5f5; cursor:pointer; font-weight:500;
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 12px center; padding-right:36px;
}
.equipment-select:hover { border-color:#444; background:#282828; }
.equipment-select:focus { outline:none; border-color:#4a9eff; box-shadow:0 0 0 3px rgba(74,158,255,0.2); }
.equipment-select optgroup { background:#1a1a1a; color:#888; }
.equipment-select option { background:#1a1a1a; color:#f5f5f5; }

/* Trailer specs mini */
.trailer-specs-mini {
    display:flex; gap:6px; flex-wrap:nowrap; align-items:center; margin-top:10px;
    padding:8px 10px; background:linear-gradient(180deg,#1e1e1e 0%,#1a1a1a 100%);
    border:1px solid #2a2a2a; border-radius:8px; font-size:0.72rem;
}
.trailer-specs-mini .spec { color:#666; font-weight:500; white-space:nowrap; }
.trailer-specs-mini span span { color:#4a9eff; font-weight:600; }
.trailer-recommendation { font-size:11px; color:#22c55e; font-weight:600; margin-left:6px; }
.trailer-recommendation:empty { display:none; }

/* ==================== MAP PANEL ==================== */
.permit-map-panel { position:relative; }
.permit-map-panel .map-container {
    position:relative; height:100%; min-height:480px; border-radius:12px; overflow:hidden;
    border:1px solid #2a2a2a; background:#1a1a1a; box-shadow:0 4px 16px rgba(0,0,0,0.3);
}
.permit-map-panel .map-container::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(circle at 30% 40%,rgba(74,158,255,0.08) 0%,transparent 50%),radial-gradient(circle at 70% 60%,rgba(124,58,237,0.06) 0%,transparent 50%),linear-gradient(180deg,#1a1a1a 0%,#141414 100%);
    z-index:0; pointer-events:none;
}
.permit-map-panel .map-container.has-route::before { display:none; }
.permit-route-map { width:100%; height:100%; min-height:480px; }
.map-placeholder {
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; color:#444; z-index:1; pointer-events:none;
}
.map-placeholder-icon { font-size:4rem; opacity:0.5; margin-bottom:12px; }
.map-placeholder-text { font-size:0.85rem; color:#555; }
.map-miles-badge {
    position:absolute; bottom:16px; left:16px; z-index:10;
    background:linear-gradient(135deg,#4a9eff 0%,#3b82f6 100%); color:white; padding:10px 18px;
    border-radius:24px; font-weight:700; font-size:0.95rem; letter-spacing:0.01em;
    box-shadow:0 4px 16px rgba(74,158,255,0.4);
}

/* ==================== PERMIT RESULTS ==================== */
.permit-results-section { margin-top:24px; padding:20px; background:#1a1a1a; border:1px solid #333; border-radius:12px; }
.permit-results-section > h3 { color:#f5f5f5; font-size:16px; margin-bottom:16px; }

#permitResults { max-width:650px; margin:0 auto; padding:20px; }

/* Overall Dims Bar */
.permit-dims-compact {
    display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px;
    padding:16px 20px; background:#1a1a1a; border:1px solid #2a2a2a; border-radius:10px; margin-bottom:16px;
}
.permit-dims-oneline { flex-wrap:wrap; gap:6px; padding:10px 14px; justify-content:center; width:100%; max-width:600px; margin:0 auto 16px; }
.overall-dims-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:#666; margin-right:4px; }
.trailer-tag { display:inline-block; padding:4px 12px; font-size:11px; font-weight:600; color:#fff; background:linear-gradient(135deg,#4a9eff,#3b82f6); border-radius:20px; white-space:nowrap; }
.dim-tag { display:inline-block; padding:4px 10px; font-size:12px; font-weight:500; color:#e5e5e5; background:#232323; border:1px solid #333; border-radius:6px; white-space:nowrap; }
.dim-tag.od { color:#fbbf24; border-color:rgba(251,191,36,0.4); background:rgba(251,191,36,0.1); font-weight:600; }

/* Cost Summary */
.cost-summary { padding:0; margin-bottom:20px; }

/* Details button */
.details-btn { background:none; border:none; color:#4a9eff; font-size:10px; cursor:pointer; text-decoration:underline; margin-left:4px; }
.details-btn:hover { color:#93c5fd; }

/* ==================== FEATURES ==================== */
.features { padding:60px 24px; border-top:1px solid #2a2a2a; }
.features-inner { max-width:1000px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.feature { text-align:center; padding:24px; border-radius:12px; background:#1a1a1a; border:1px solid #2a2a2a; }
.feature-icon { font-size:32px; font-weight:800; color:#4a9eff; margin-bottom:12px; }
.feature h3 { font-size:16px; color:#f5f5f5; margin-bottom:8px; }
.feature p { font-size:13px; color:#888; line-height:1.6; }

/* ==================== CTA ==================== */
.cta-section { padding:60px 24px; text-align:center; background:rgba(74,158,255,0.04); border-top:1px solid rgba(74,158,255,0.1); }
.cta-inner { max-width:600px; margin:0 auto; }
.cta-inner h2 { font-size:24px; color:#f5f5f5; margin-bottom:8px; }
.cta-inner p { color:#888; margin-bottom:20px; }

/* ==================== FOOTER ==================== */
.footer { padding:24px; border-top:1px solid #2a2a2a; }
.footer-inner { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; font-size:13px; color:#555; }
.footer-links { display:flex; gap:20px; }
.footer-links a { color:#555; text-decoration:none; }
.footer-links a:hover { color:#888; }

/* ==================== AUTH MODAL ==================== */
.modal-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.7); z-index:10000; display:flex; align-items:center; justify-content:center; }
.modal-card { background:#1a1a1a; border:1px solid #333; border-radius:12px; padding:32px; max-width:400px; width:90%; position:relative; }
.modal-close { position:absolute; top:12px; right:16px; background:none; border:none; color:#888; font-size:24px; cursor:pointer; }
.modal-card h2 { color:#f5f5f5; font-size:20px; margin-bottom:4px; }
.modal-sub { color:#888; font-size:13px; margin-bottom:20px; }
.auth-error { background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.3); color:#fca5a5; padding:10px 14px; border-radius:6px; font-size:13px; margin-bottom:12px; }
.input-group { margin-bottom:12px; }
.input-group label { display:block; font-size:12px; color:#888; margin-bottom:4px; font-weight:500; }
.input-group input { width:100%; padding:10px 12px; border:1px solid #333; border-radius:6px; background:#232323; color:#f5f5f5; font-size:14px; }
.input-group input:focus { outline:none; border-color:#4a9eff; box-shadow:0 0 0 2px rgba(74,158,255,0.2); }
.input-group input::placeholder { color:#555; }
.auth-toggle { text-align:center; margin-top:16px; font-size:13px; color:#888; }
.auth-toggle a { color:#4a9eff; text-decoration:none; }

/* ==================== TOAST ==================== */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#1a1a1a; border:1px solid #333; color:#f5f5f5; padding:12px 24px; border-radius:8px; font-size:13px; z-index:10001; box-shadow:0 4px 16px rgba(0,0,0,0.4); }

/* ==================== MOBILE ==================== */
@media (max-width:900px) {
    .permit-main-layout { grid-template-columns:1fr; }
    .permit-map-panel .map-container { min-height:300px; }
    .permit-route-map { min-height:300px; }
    .dims-grid { grid-template-columns:1fr 1fr; }
    .lane-row { grid-template-columns:1fr; }
    .hero h1 { font-size:28px; }
    .features-inner { grid-template-columns:1fr; }
    .footer-inner { flex-direction:column; gap:12px; text-align:center; }
}

@media (max-width:640px) {
    .permit-dims-oneline .trailer-tag { font-size:10px; padding:2px 8px; }
    .permit-dims-oneline .dim-tag { font-size:11px; padding:2px 6px; }
    .ft-in-input input { width:48px; padding:6px 4px; }
}

/* Hide number input spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
input[type="number"] { -moz-appearance:textfield; }

/* Smooth transitions */
body * { transition:background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }