/* Sky Trade Support — shared design system (professional aviation B2B).
   Loaded on every page; refines type, surfaces and interaction details
   without overriding the per-page Tailwind utilities. */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800&display=swap');

:root{
    --brand:#0066cc; --brand-dark:#004a99; --sky:#38bdf8; --ink:#0b1f3a;
    --ring:rgba(0,102,204,.35);
}

/* Display typeface for headings — deliberate, tightened tracking. */
h1,h2,h3,.font-display{ font-family:'Outfit','Inter',sans-serif; letter-spacing:-0.018em; }
h1{ font-weight:800; }

/* Smoother, consistent micro-interactions. */
a,button,input,select,textarea,.transition-all{ transition:color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease; }

/* Accessible keyboard focus everywhere. */
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }

::selection{ background:rgba(0,102,204,.18); }

/* Refined scrollbars. */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:#c7d2e0; border-radius:9px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:#a9b8cc; }
*::-webkit-scrollbar-track{ background:transparent; }
.dark *::-webkit-scrollbar-thumb{ background:#334155; }

/* Signature: quiet ambient "sky" glow, top-right — reads as cockpit/altitude. */
body{ background-image:radial-gradient(1100px 380px at 100% -8%, rgba(56,189,248,.07), transparent 70%); background-attachment:fixed; }
.dark body{ background-image:radial-gradient(1100px 380px at 100% -8%, rgba(56,189,248,.06), transparent 70%); }

/* ===== Deep-blue gradient top bar (matches the left sidebar) =====
   Scoped to the app shell (sticky headers); the public landing header is
   position:fixed and keeps its own marketing styling. */
header.sticky{
    background:linear-gradient(100deg,#06254f 0%,#0b3f8f 55%,#0a63c9 100%) !important;
    border-bottom:1px solid rgba(255,255,255,.14) !important;
    box-shadow:0 6px 20px -8px rgba(3,20,55,.55);
}
header.sticky .material-symbols-outlined{ color:#eaf2ff; }
/* Header trigger controls read as light on the blue bar (dropdown panels keep
   their own light-surface styling because they live outside these buttons). */
#appNavBurger, #bwBtn, #pwMenuBtn, #bellBtn{ color:#eaf2ff !important; }
#appNavBurger *, #bwBtn *, #pwMenuBtn *, #bellBtn *{ color:#eaf2ff !important; }
#appNavBurger:hover, #bwBtn:hover, #pwMenuBtn:hover, #bellBtn:hover{ background:rgba(255,255,255,.15) !important; }
#pwMenuBtn span[data-pw-avatar]{ background:rgba(255,255,255,.18) !important; box-shadow:0 0 0 1px rgba(255,255,255,.35); }
/* Restore dark text inside the dropdown panels that render within the header. */
#pwDropdown, #pwDropdown *, #bwMenu, #bwMenu *{ color:revert !important; }
#pwDropdown .material-symbols-outlined{ color:#4c739a; }

/* ===== Shared surface polish for a cohesive, engineered look ===== */
.rounded-xl.border{ box-shadow:0 1px 2px rgba(2,20,43,.04), 0 8px 24px -18px rgba(2,20,43,.20); }
main h1{ letter-spacing:-0.02em; }
/* Section eyebrow accent under primary headings inside main content. */
table thead th{ letter-spacing:.06em; }

@media (prefers-reduced-motion: reduce){
    a,button,input,select,textarea,.transition-all{ transition:none !important; }
}

/* ===== DataTables — pagination + search, themed to match the app ===== */
.dt-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px 14px; }
.dt-footer{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px 14px; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
    border:1px solid #cfdbe7; background:#f8fafc; color:#0d141b; border-radius:.5rem; padding:.4rem .7rem; font-size:.8rem; outline:none;
}
.dataTables_wrapper .dataTables_filter input{ min-width:220px; }
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus{ border-color:#0066cc; box-shadow:0 0 0 2px rgba(0,102,204,.2); }
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter{ color:#4c739a; font-size:.8rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button{
    padding:.35rem .7rem !important; margin:0 2px; border-radius:.5rem !important; border:1px solid transparent !important;
    color:#4c739a !important; background:transparent !important; cursor:pointer; font-size:.8rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{ background:#eef2f7 !important; color:#0066cc !important; border-color:#cfdbe7 !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current{ background:#0066cc !important; color:#fff !important; border-color:#0066cc !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled{ opacity:.4; cursor:default; }
table.dataTable{ border-collapse:collapse !important; width:100% !important; }
/* DataTables ships external sort-icon PNGs (blocked by CSP) — replace with CSS carets. */
table.dataTable thead th{ cursor:pointer; background-image:none !important; position:relative; }
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after{ content:'⇅'; opacity:.35; margin-left:6px; font-size:.7em; }
table.dataTable thead th.sorting_asc:after{ content:'↑'; opacity:.9; }
table.dataTable thead th.sorting_desc:after{ content:'↓'; opacity:.9; }
/* Dark mode */
.dark .dataTables_wrapper .dataTables_filter input,
.dark .dataTables_wrapper .dataTables_length select{ background:#0f172a; border-color:#334155; color:#fff; }
.dark .dataTables_wrapper .dataTables_info,
.dark .dataTables_wrapper .dataTables_length,
.dark .dataTables_wrapper .dataTables_filter,
.dark .dataTables_wrapper .dataTables_paginate .paginate_button{ color:#94a3b8 !important; }
.dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover{ background:#1e293b !important; }