/* Backpocket - 1960s starship console theme for the SFTPGo 2.7 web client.
   Loaded after base-dark.css (which forces dark mode everywhere). */

@font-face { font-family: "Michroma"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/branding/fonts/michroma-latin.woff2) format("woff2"); }
@font-face { font-family: "Share Tech Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/branding/fonts/sharetechmono-latin.woff2) format("woff2"); }

:root, [data-bs-theme=light], [data-bs-theme=dark] {
  --bp-space: #05060d;
  --bp-panel: #121628;
  --bp-panel-2: #1b2038;
  --bp-line: #2c3358;
  --bp-gold: #f2b33d;
  --bp-gold-hi: #ffd866;
  --bp-blue: #4fa3e3;
  --bp-red: #e8463a;
  --bp-green: #5fd38d;
  --bp-text: #e9e4d4;
  --bp-dim: #9aa0bd;

  --bs-body-bg: var(--bp-space);
  --bs-body-bg-rgb: 5,6,13;
  --bs-body-color: var(--bp-text);
  --bs-body-color-rgb: 233,228,212;
  --bs-heading-color: var(--bp-gold);
  --bs-app-bg-color: transparent;
  --bs-app-blank-bg-color: transparent;
  --bs-app-header-base-bg-color: rgba(5,6,13,.85);
  --bs-app-header-minimize-bg-color: rgba(5,6,13,.92);
  --bs-app-sidebar-base-bg-color: var(--bp-panel);
  --bs-app-sidebar-base-border-end: 3px solid var(--bp-gold);
  --bs-app-footer-bg-color: transparent;
  --bs-card-bg: var(--bp-panel);
  --bs-root-card-border-color: var(--bp-line);
  --bs-border-color: var(--bp-line);
  --bs-border-dashed-color: var(--bp-line);
  --bs-dropdown-bg: var(--bp-panel-2);
  --bs-menu-dropdown-bg-color: var(--bp-panel-2);
  --bs-input-bg: #0a0d1a;
  --bs-input-solid-bg: #0a0d1a;
  --bs-input-solid-bg-focus: #0e1224;
  --bs-input-color: var(--bp-text);
  --bs-input-solid-color: var(--bp-text);
  --bs-input-solid-placeholder-color: var(--bp-dim);
  --bs-primary: var(--bp-gold);
  --bs-primary-rgb: 242,179,61;
  --bs-primary-active: var(--bp-gold-hi);
  --bs-primary-light: rgba(242,179,61,.14);
  --bs-primary-inverse: #10131f;
  --bs-text-primary: var(--bp-gold);
  --bs-link-color: var(--bp-blue);
  --bs-link-color-rgb: 79,163,227;
  --bs-link-hover-color: var(--bp-gold-hi);
  --bs-component-active-bg: var(--bp-gold);
  --bs-component-active-color: #10131f;
  --bs-component-hover-bg: rgba(242,179,61,.10);
  --bs-component-hover-color: var(--bp-gold);
  --bs-menu-link-color-active: var(--bp-gold);
  --bs-menu-link-color-here: var(--bp-gold);
  --bs-menu-link-color-hover: var(--bp-gold-hi);
  --bs-menu-link-bg-color-active: rgba(242,179,61,.12);
  --bs-menu-link-bg-color-hover: rgba(242,179,61,.08);
  --bs-menu-link-bg-color-here: rgba(242,179,61,.08);
  --bs-text-muted: var(--bp-dim);
  --bs-table-striped-bg: rgba(79,163,227,.05);
  --bs-scrollbar-color: var(--bp-line);
  --bs-scrollbar-hover-color: var(--bp-gold);
}

/* ---- deep space + slow starfield ---- */
html { background-color: var(--bp-space) !important; }
body, .app-blank, .app-default, #app_root, .app-page, .app-wrapper, .app-main { background: transparent !important; }
html, body {
  font-family: "Share Tech Mono", ui-monospace, Menlo, Consolas, monospace !important;
  letter-spacing: .01em;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 72%, #cfe6ff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 34%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 77% 81%, #ffe7b3 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 6% 58%, #cfe6ff 50%, transparent 51%),
    radial-gradient(1px 1px at 46% 92%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 6%, #fff 50%, transparent 51%),
    radial-gradient(ellipse at 80% 110%, rgba(79,163,227,.16), transparent 55%),
    radial-gradient(ellipse at 0% -10%, rgba(232,70,58,.10), transparent 50%),
    var(--bp-space);
  background-size: 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 100% 100%, 100% 100%, 100% 100%;
  animation: bp-drift 240s linear infinite;
}
@keyframes bp-drift { to { background-position: -420px 210px, -420px 210px, -420px 210px, -420px 210px, -420px 210px, -420px 210px, -420px 210px, -420px 210px, 0 0, 0 0, 0 0; } }

/* ---- the console light strip across the top ---- */
body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 6px; z-index: 1000; pointer-events: none;
  background: repeating-linear-gradient(90deg,
    var(--bp-red) 0 28px, transparent 28px 34px,
    var(--bp-gold) 34px 62px, transparent 62px 68px,
    var(--bp-blue) 68px 96px, transparent 96px 102px,
    var(--bp-green) 102px 130px, transparent 130px 136px);
  animation: bp-blink 2.4s steps(2, jump-none) infinite;
}
@keyframes bp-blink { 0% { opacity: 1; filter: none; } 50% { opacity: .55; filter: hue-rotate(60deg); } 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  body::after, body::before { animation: none; }
}

/* ---- type ---- */
h1, h2, h3, h4, .card-title, .card-title h3, .modal-title, .menu-title,
.btn, .page-heading, .text-sidebar, .nav-link, .badge, th {
  font-family: "Michroma", "Share Tech Mono", sans-serif !important;
  text-transform: uppercase;
  letter-spacing: .08em;
}
h1, h1.text-gray-900 { color: var(--bp-gold) !important; text-shadow: 0 0 18px rgba(242,179,61,.35); }
.text-gray-900, .text-gray-800 { color: var(--bp-text) !important; }

/* ---- login / blank pages: a console panel ---- */
.app-blank .bg-body {
  background: linear-gradient(180deg, var(--bp-panel-2), var(--bp-panel)) !important;
  border: 2px solid var(--bp-line);
  border-top: 8px solid var(--bp-gold);
  border-radius: 6px 6px 28px 6px !important;
  box-shadow: 0 0 0 1px #000, 0 0 40px rgba(79,163,227,.18), inset 0 0 60px rgba(0,0,0,.45) !important;
  position: relative;
}
.app-blank .bg-body::before {          /* three indicator lamps on the panel */
  content: ""; position: absolute; top: 14px; right: 18px; width: 54px; height: 10px;
  background:
    radial-gradient(circle at 5px 5px, var(--bp-red) 4px, transparent 5px),
    radial-gradient(circle at 27px 5px, var(--bp-gold) 4px, transparent 5px),
    radial-gradient(circle at 49px 5px, var(--bp-green) 4px, transparent 5px);
  animation: bp-blink 1.7s steps(2, jump-none) infinite;
}
.app-blank .bg-body::after {
  content: "BACKPOCKET // CARGO TRANSFER CONSOLE";
  position: absolute; bottom: 10px; left: 0; right: 0; text-align: center;
  font: 10px/1 "Share Tech Mono", monospace; letter-spacing: .28em; color: var(--bp-dim);
}

/* ---- surfaces ---- */
.card, .modal-content, .menu-sub-dropdown, .dropdown-menu {
  background-color: var(--bp-panel) !important;
  border: 1px solid var(--bp-line) !important;
  border-radius: 4px 4px 20px 4px !important;
  box-shadow: 0 0 24px rgba(0,0,0,.5) !important;
}
.card > .card-header { border-bottom: 2px solid var(--bp-gold) !important; }
.app-sidebar { background: linear-gradient(180deg, var(--bp-panel-2), var(--bp-panel)) !important; }
.app-header { border-bottom: 1px solid var(--bp-line); backdrop-filter: blur(6px); }

/* ---- controls ---- */
.form-control, .form-select, .form-control-solid {
  background-color: #0a0d1a !important;
  border: 1px solid var(--bp-line) !important;
  color: var(--bp-text) !important;
  border-radius: 3px !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--bp-blue) !important;
  box-shadow: 0 0 0 2px rgba(79,163,227,.25), 0 0 14px rgba(79,163,227,.25) !important;
}
.btn { border-radius: 3px 3px 14px 3px !important; }
.btn.btn-primary {
  background: linear-gradient(180deg, var(--bp-gold-hi), var(--bp-gold)) !important;
  color: #10131f !important; border: 0 !important;
  box-shadow: 0 0 0 1px #000, 0 0 14px rgba(242,179,61,.35) !important;
}
.btn.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 0 0 1px #000, 0 0 22px rgba(242,179,61,.6) !important; }
.btn.btn-light-primary { background: rgba(242,179,61,.12) !important; color: var(--bp-gold) !important; }
.btn.btn-danger, .btn.btn-light-danger { background: var(--bp-red) !important; color: #fff !important; }
.btn.btn-secondary, .btn.btn-light {
  background: var(--bp-panel-2) !important; color: var(--bp-blue) !important; border: 1px solid var(--bp-line) !important;
}
.link-primary, a.link-primary { color: var(--bp-blue) !important; }
.link-primary:hover { color: var(--bp-gold-hi) !important; }

/* ---- file table ---- */
table.dataTable tbody tr:hover, .table-hover > tbody > tr:hover > * { background-color: rgba(79,163,227,.08) !important; }
table thead th { color: var(--bp-gold) !important; border-bottom: 1px solid var(--bp-gold) !important; font-size: .72rem !important; }
.ki-duotone.ki-folder .path1, .ki-duotone.ki-folder .path2 { color: var(--bp-gold) !important; }
.badge { border-radius: 2px 2px 8px 2px !important; }

/* sidebar menu: active item gets a red "alert lamp" */
.menu-link.active { position: relative; }
.menu-link.active::before {
  content: ""; position: absolute; left: -6px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: var(--bp-red); box-shadow: 0 0 8px var(--bp-red);
}

/* dark mode is the only mode on this ship */
[data-kt-element="theme-mode-menu"], .theme-light-show, .theme-dark-show { display: none !important; }
#kt_app_footer .text-gray-700 { color: var(--bp-dim) !important; font-size: .7rem; letter-spacing: .2em; }