/* ── Plate Templates Suite — screen + print styles ──
   Site-themed re-implementation of the 6 helicopter landing-plate layouts.
   The mockup used Tailwind utilities; these are the plain-CSS equivalents,
   prefixed .ptl- so they never collide with the existing .plate-* screen plates. */

:root {
    --ptl-ink: #1e293b;
    --ptl-ink-2: #0f172a;
    --ptl-slate-900: #0f172a;
    --ptl-slate-800: #1e293b;
    --ptl-slate-700: #334155;
    --ptl-slate-500: #64748b;
    --ptl-slate-400: #94a3b8;
    --ptl-slate-300: #cbd5e1;
    --ptl-slate-100: #f1f5f9;
    --ptl-slate-50: #f8fafc;
    --ptl-blue: #2563eb;
    --ptl-blue-800: #1e40af;
    --ptl-emerald: #059669;
    --ptl-emerald-400: #34d399;
    --ptl-amber-400: #fbbf24;
    --ptl-red: #dc2626;
    --ptl-red-600: #dc2626;
}

/* ── Shared header controls (global copies of the inline component styles so the
   plate pages and the SiteProfile "View Plates" button render consistently) ── */
.hgs-btn-brand {
    color: #fff; background: linear-gradient(90deg, #0d9488, #0f766e); border: 0;
    border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 600; padding: 0.45rem 0.9rem;
    box-shadow: 0 4px 10px -4px rgba(13, 148, 136, 0.6); white-space: nowrap; transition: all 0.15s ease;
}
.hgs-btn-brand:hover, .hgs-btn-brand:focus { color: #fff; background: linear-gradient(90deg, #14b8a6, #0d9488); }
.hgs-btn-brand:active { transform: scale(0.97); }
.hgs-btn-brand:disabled { color: #fff; opacity: 0.65; }

.hgsp-back {
    display: flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: 50%;
    border: 1px solid var(--ins-border-color, #dee2e6); color: inherit; text-decoration: none;
    flex-shrink: 0;
}
.hgsp-back:hover { background-color: rgba(13, 148, 136, 0.08); color: #0d9488; }

/* Site identity block — global copies of the SiteProfile header styles so the plate
   pages present the site detail in exactly the same format as the profile page. */
.hgsp-head-icon {
    width: 2.75rem; height: 2.75rem; border-radius: 0.75rem;
    background-color: rgba(13, 148, 136, 0.1); color: #0d9488;
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
    flex-shrink: 0;
}
.hgsp-head-sub { font-size: 0.8rem; color: #64748b; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.15rem; }
.hgsp-dot { color: #cbd5e1; }
.hgsp-mono, .hgsp-mono-teal { font-family: var(--ins-font-monospace, monospace); }
.hgsp-mono-teal { color: #0d9488; font-weight: 600; }

[data-bs-theme="dark"] .hgsp-head-sub { color: #94a3b8; }
[data-bs-theme="dark"] .hgsp-dot { color: #475569; }

/* ── Suite control bar (tabs + actions) ── */
.ptl-suite { display: flex; flex-direction: column; gap: 1rem; }

.ptl-controls {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0.75rem;
    background-color: var(--ins-secondary-bg, #fff);
    border: 1px solid var(--ins-border-color, #dee2e6);
    border-radius: 0.75rem;
    padding: 1.25rem;
}

.ptl-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.ptl-tab {
    border: 1px solid #dee2e6; background: #fff; color: #495057;
    border-radius: 0.5rem; font-size: 0.78rem; font-weight: 600;
    padding: 0.4rem 0.75rem; white-space: nowrap; cursor: pointer;
    transition: all 0.15s ease;
}
.ptl-tab:hover { background: #f1f5f9; }
.ptl-tab.ptl-tab--active {
    color: #fff; background: linear-gradient(90deg, #0d9488, #0f766e);
    border-color: transparent; box-shadow: 0 4px 10px -4px rgba(13, 148, 136, 0.6);
}

.ptl-active-desc {
    background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 0.5rem;
    padding: 0.6rem 0.85rem; font-size: 0.8rem; color: #495057;
}
.ptl-active-desc strong { color: #212529; }

/* ── The A4 document pages ── */
.ptl-stage { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.ptl-doc { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; width: 100%; }

.ptl-page {
    width: 100%; max-width: 210mm; min-height: 280mm; background: #fff; color: var(--ptl-ink);
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.35);
    box-sizing: border-box; display: flex; flex-direction: column;
    padding: 14mm 12mm; font-size: 12px; line-height: 1.35;
}
.ptl-page--bordered { border: 4px solid var(--ptl-slate-900); }
.ptl-page--red { border: 4px solid var(--ptl-red-600); }
.ptl-page--light { border: 1px solid var(--ptl-slate-300); background: var(--ptl-slate-50); }

.ptl-mono { font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }

/* Typography helpers */
.ptl-title { font-size: 1.25rem; font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; margin: 0; line-height: 1.15; }
.ptl-title-lg { font-size: 1.5rem; }
.ptl-eyebrow { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; }
.ptl-flex { display: flex; }
.ptl-between { display: flex; justify-content: space-between; align-items: flex-start; }
.ptl-center { align-items: center; }
.ptl-gap { gap: 0.5rem; }
.ptl-grow { flex: 1; min-width: 0; }
.ptl-right { text-align: right; }

/* Badges & pills */
.ptl-badge { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 3px; }
.ptl-badge--dark { background: #000; color: #fff; }
.ptl-badge--blue { background: var(--ptl-blue-800); color: #fff; }
.ptl-badge--emerald { background: #065f46; color: #fff; }
.ptl-badge--outline { border: 1px solid #000; color: #000; }
.ptl-badge--slate { background: var(--ptl-slate-700); color: #fff; }

.ptl-code-lg { font-family: inherit; font-size: 0.95rem; font-weight: 700; display: block; }
.ptl-code-sm { font-size: 0.78rem; font-weight: 600; color: var(--ptl-slate-500); display: block; }

/* Header rule */
.ptl-head-rule { border-bottom: 2px solid var(--ptl-slate-900); padding-bottom: 8px; margin-bottom: 10px; }
.ptl-head-rule--thick { border-bottom-width: 4px; }

/* Dark header block (templates 2, 4) */
.ptl-dark-head {
    background: var(--ptl-slate-900); color: #fff; border-radius: 6px;
    padding: 10px 12px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;
}
.ptl-red-head { background: var(--ptl-red-600); color: #fff; border-radius: 6px; padding: 10px 12px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }

/* Maps */
.ptl-map-wrap {
    border: 2px solid var(--ptl-slate-800); border-radius: 6px; padding: 6px;
    background: var(--ptl-slate-50); margin-bottom: 10px; display: flex; flex-direction: column; flex: 1;
}
.ptl-map-label {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--ptl-slate-700); margin-bottom: 4px; display: flex; justify-content: space-between;
}
.ptl-map {
    flex: 1; width: 100%; min-height: 240px; border: 1px solid var(--ptl-slate-300); border-radius: 4px;
    position: relative; overflow: hidden;
}
.ptl-map .leaflet-container { width: 100%; height: 100%; }

/* Helipad marker used inside maps */
.ptl-helipad {
    display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
    border: 2px solid var(--ptl-red); border-radius: 50%; background: rgba(220, 38, 38, 0.25);
    color: var(--ptl-red); font-weight: 800; font-size: 13px;
}

/* Info grids */
.ptl-grid { display: grid; gap: 8px; margin-bottom: 10px; }
.ptl-grid-2 { grid-template-columns: 1fr 1fr; }
.ptl-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ptl-grid-4 { grid-template-columns: repeat(4, 1fr); }

.ptl-box {
    border: 1px solid var(--ptl-slate-300); border-radius: 4px; padding: 8px 10px;
    background: var(--ptl-slate-50);
}
.ptl-box--plain { background: #fff; }

.ptl-kv { display: flex; justify-content: space-between; gap: 8px; }
.ptl-k { color: var(--ptl-slate-500); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; }
.ptl-v { font-weight: 700; color: var(--ptl-ink); }
.ptl-section-h {
    font-weight: 700; text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.05em;
    border-bottom: 1px solid var(--ptl-slate-300); padding-bottom: 3px; margin-bottom: 5px;
    display: flex; justify-content: space-between; color: var(--ptl-slate-900);
}

/* Dark spec ribbon (D-Value / MTOW / Elevation / FATO) */
.ptl-spec-ribbon {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    background: var(--ptl-slate-900); color: #fff; border-radius: 8px; padding: 10px 12px; margin-bottom: 10px;
}
.ptl-spec { border-right: 1px solid var(--ptl-slate-700); padding-right: 8px; }
.ptl-spec:last-child { border-right: none; }
.ptl-spec-k { font-size: 0.55rem; text-transform: uppercase; color: var(--ptl-slate-400); display: block; }
.ptl-spec-v { font-weight: 700; font-size: 0.85rem; }
.ptl-spec-v--emerald { color: var(--ptl-emerald-400); }
.ptl-spec-v--blue { color: #60a5fa; }
.ptl-spec-v--amber { color: var(--ptl-amber-400); font-size: 0.7rem; }
.ptl-spec-v--red { color: #f87171; }

/* Light spec ribbon variant (templates 2, 5) */
.ptl-spec-ribbon--light {
    background: var(--ptl-slate-100); color: var(--ptl-ink); border: 1px solid var(--ptl-slate-300); text-align: center;
}
.ptl-spec-ribbon--light .ptl-spec { border-right-color: var(--ptl-slate-300); }
.ptl-spec-ribbon--light .ptl-spec-k { color: var(--ptl-slate-500); }
.ptl-spec-ribbon--light .ptl-spec-v { color: var(--ptl-ink); }

/* Callout boxes */
.ptl-callout { border-radius: 4px; padding: 8px 10px; margin-bottom: 8px; font-size: 0.78rem; }
.ptl-callout--amber { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }
.ptl-callout--blue { background: #eff6ff; border: 1px solid #93c5fd; color: #1e3a8a; }
.ptl-callout--red { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.ptl-callout h4 { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; margin: 0 0 2px; }
.ptl-callout p { margin: 0; }
.ptl-callout--redbar { background: var(--ptl-red-600); color: #fff; text-align: center; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; padding: 8px; border-radius: 4px; }

/* Data tables (template 3) */
.ptl-table { width: 100%; border-collapse: collapse; font-size: 0.72rem; border: 1px solid var(--ptl-slate-800); margin-bottom: 8px; }
.ptl-table thead th { background: var(--ptl-slate-900); color: #fff; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; padding: 5px 6px; text-align: left; }
.ptl-table td { border-top: 1px solid var(--ptl-slate-300); padding: 5px 6px; vertical-align: top; }
.ptl-table td.ptl-td-key { font-weight: 700; width: 34%; }
.ptl-row-alt { background: var(--ptl-slate-50); }

/* GPS card (template 4) */
.ptl-gps { background: var(--ptl-slate-900); color: #fff; border-radius: 10px; padding: 10px; margin-bottom: 10px; border: 2px solid #f87171; }
.ptl-gps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: center; }
.ptl-gps-cell { background: var(--ptl-slate-800); padding: 8px; border-radius: 6px; }
.ptl-gps-cell .ptl-spec-k { color: var(--ptl-slate-400); }
.ptl-gps-cell strong { color: #f87171; font-size: 0.95rem; }

/* EFB white cards (template 5) */
.ptl-card { background: #fff; border: 1px solid var(--ptl-slate-300); border-radius: 12px; padding: 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); margin-bottom: 10px; }

/* Footer */
.ptl-footer {
    border-top: 1px solid var(--ptl-slate-300); padding-top: 6px; margin-top: auto;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.62rem; color: var(--ptl-slate-500);
}

.ptl-muted { color: var(--ptl-slate-400); }
.ptl-red-text { color: var(--ptl-red); }
.ptl-emerald-text { color: var(--ptl-emerald); }
.ptl-blue-text { color: var(--ptl-blue-800); }

/* ── Print ── */
@media print {
    .ptl-controls, .ptl-active-desc,
    .sidenav-menu, .app-topbar, .footer, .page-title-head, .hgsp-toast {
        display: none !important;
    }
    body, .content-page { margin: 0 !important; padding: 0 !important; background: #fff !important; }

    .ptl-stage { gap: 0; }
    .ptl-page {
        box-shadow: none !important; max-width: 100% !important; width: 100% !important;
        min-height: 100vh; page-break-after: always; break-after: page;
    }
    .ptl-page:last-child { page-break-after: auto; }

    .ptl-dark-head, .ptl-red-head, .ptl-spec-ribbon, .ptl-gps, .ptl-badge,
    .ptl-callout, .ptl-table thead th, .ptl-page--red, .ptl-page--bordered, .ptl-map {
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }

    @page { size: A4; margin: 8mm; }
}

@media screen and (max-width: 820px) {
    .ptl-page { padding: 8mm; min-height: auto; }
    .ptl-grid-4, .ptl-spec-ribbon { grid-template-columns: repeat(2, 1fr); }
}