/*
  PANEOTECH Storage Management System: theme for SFTPGo web UI.
  Loaded through SFTPGo's official branding EXTRA_CSS hook; templates are untouched.
  Brand blue #1152D4 (sampled from the PANEOTECH logo). Deep navy #0A1A3F for chrome.
*/

/* ---------- tokens ---------- */
:root, [data-bs-theme=light] {
  --pt-blue: #1152D4;
  --pt-blue-600: #0D45B5;
  --pt-blue-700: #0B3A99;
  --pt-blue-050: #EEF3FD;
  --pt-blue-100: #DCE6FB;
  --pt-navy: #0A1A3F;
  --pt-navy-2: #0E2558;
  --pt-ink: #0F172A;
  --pt-muted: #64748B;
  --pt-line: #E6EAF2;
  --pt-page: #F5F7FB;
  --pt-card: #FFFFFF;
  --pt-radius: 14px;
  --pt-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);

  --bs-primary: var(--pt-blue);
  --bs-primary-rgb: 17, 82, 212;
  --bs-primary-active: var(--pt-blue-600);
  --bs-primary-light: var(--pt-blue-050);
  --bs-primary-inverse: #FFFFFF;
  --bs-text-primary: var(--pt-blue);
  --bs-link-color: var(--pt-blue);
  --bs-link-color-rgb: 17, 82, 212;
  --bs-link-hover-color: var(--pt-blue-700);
  --bs-component-active-bg: var(--pt-blue);
  --bs-component-hover-color: var(--pt-blue);
  --bs-component-checked-bg: var(--pt-blue);
  --bs-app-bg-color: var(--pt-page);
  --bs-body-bg: var(--pt-page);
  --bs-app-header-base-bg-color: var(--pt-page);
  --bs-app-header-minimize-bg-color: rgba(245, 247, 251, .85);
  --bs-app-footer-bg-color: transparent;
}

[data-bs-theme=dark] {
  --pt-blue: #3B7BF5;
  --pt-blue-600: #2F6AE0;
  --pt-blue-700: #6C9CF7;
  --pt-blue-050: rgba(59, 123, 245, .14);
  --pt-blue-100: rgba(59, 123, 245, .22);
  --pt-navy: #070F24;
  --pt-navy-2: #0B1736;
  --pt-ink: #E6EAF2;
  --pt-muted: #94A3B8;
  --pt-line: #1E2A44;
  --pt-page: #0B1222;
  --pt-card: #111A2E;
  --pt-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);

  --bs-primary: var(--pt-blue);
  --bs-primary-rgb: 59, 123, 245;
  --bs-primary-active: var(--pt-blue-600);
  --bs-primary-light: var(--pt-blue-050);
  --bs-text-primary: #6C9CF7;
  --bs-link-color: #6C9CF7;
  --bs-component-active-bg: var(--pt-blue);
  --bs-component-checked-bg: var(--pt-blue);
  --bs-app-bg-color: var(--pt-page);
  --bs-body-bg: var(--pt-page);
  --bs-app-header-base-bg-color: var(--pt-page);
  --bs-app-header-minimize-bg-color: rgba(11, 18, 34, .85);
  --bs-app-footer-bg-color: transparent;
}

body { background-color: var(--pt-page) !important; }

/* ---------- buttons ---------- */
.btn { border-radius: 10px !important; font-weight: 600; letter-spacing: .1px; }
.btn.btn-primary {
  background: var(--pt-blue) !important; border-color: var(--pt-blue) !important; color: #fff !important;
  box-shadow: 0 6px 16px -6px rgba(17, 82, 212, .55);
}
.btn.btn-primary:hover, .btn.btn-primary:focus { background: var(--pt-blue-600) !important; }
.btn.btn-light-primary { background: var(--pt-blue-050) !important; color: var(--pt-blue) !important; }
.btn.btn-light-primary:hover { background: var(--pt-blue) !important; color: #fff !important; }
.btn.btn-light-primary:hover i, .btn.btn-light-primary:hover .path1, .btn.btn-light-primary:hover .path2 { color: #fff !important; }
.form-control, .form-select { border-radius: 10px !important; }
.form-control:focus, .form-select:focus { border-color: var(--pt-blue) !important; box-shadow: 0 0 0 3px var(--pt-blue-100) !important; }
.form-check-input:checked { background-color: var(--pt-blue) !important; border-color: var(--pt-blue) !important; }

/* ---------- sidebar ---------- */
#kt_app_sidebar.app-sidebar {
  background: linear-gradient(180deg, var(--pt-navy) 0%, var(--pt-navy-2) 100%) !important;
  border-right: 0 !important;
}
#kt_app_sidebar .app-sidebar-header { padding-bottom: 18px; margin-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
#kt_app_sidebar img.app-sidebar-logo-default { content: url(paneotech-icon-white.png); height: 36px !important; width: 36px; }
#kt_app_sidebar .app-sidebar-header .text-sidebar {
  display: inline-flex; flex-direction: column; justify-content: center; padding-left: 14px !important;
  color: #fff !important; font-weight: 800 !important; letter-spacing: .6px; font-size: 1.05rem !important; line-height: 1.15;
}
#kt_app_sidebar .app-sidebar-header .text-sidebar::after {
  content: "Storage Management"; display: block; white-space: nowrap; font-weight: 500; letter-spacing: .3px;
  font-size: .72rem; color: rgba(255, 255, 255, .55); margin-top: 3px; text-transform: uppercase;
}
#kt_app_sidebar .menu .menu-link { border-radius: 10px !important; margin: 2px 0; transition: background .15s ease; }
#kt_app_sidebar .menu .menu-link .menu-title { color: rgba(255, 255, 255, .72) !important; font-weight: 500; }
#kt_app_sidebar .menu .menu-link .menu-icon i,
#kt_app_sidebar .menu .menu-link .menu-icon i span,
#kt_app_sidebar .menu .menu-link .menu-icon i span::before,
#kt_app_sidebar .menu .menu-link .menu-arrow,
#kt_app_sidebar .menu .menu-link .menu-bullet .bullet { color: rgba(255, 255, 255, .55) !important; }
#kt_app_sidebar .menu .menu-link .menu-bullet .bullet { background-color: rgba(255, 255, 255, .45) !important; }
#kt_app_sidebar .menu .menu-link:hover { background: rgba(255, 255, 255, .06) !important; }
#kt_app_sidebar .menu .menu-link:hover .menu-title { color: #fff !important; }
#kt_app_sidebar .menu .menu-link.active {
  background: linear-gradient(90deg, var(--pt-blue) 0%, #2A6BF0 100%) !important;
  box-shadow: 0 8px 20px -10px rgba(17, 82, 212, .9);
}
#kt_app_sidebar .menu .menu-link.active .menu-title,
#kt_app_sidebar .menu .menu-link.active .menu-icon i,
#kt_app_sidebar .menu .menu-link.active .menu-icon i span,
#kt_app_sidebar .menu .menu-link.active .menu-icon i span::before { color: #fff !important; }
#kt_app_sidebar .menu .menu-link.active .menu-bullet .bullet { background-color: #fff !important; }
#kt_app_sidebar .menu-item.here > .menu-link .menu-title { color: #fff !important; }

/* mobile header logo (dark icon on light header is fine) */
#kt_app_header img.h-30px { height: 30px !important; }

/* ---------- header ---------- */
#kt_app_header.app-header { background: transparent !important; box-shadow: none !important; border: 0 !important; }

/* ---------- cards and tables ---------- */
.card {
  border: 1px solid var(--pt-line) !important; border-radius: var(--pt-radius) !important;
  box-shadow: var(--pt-shadow) !important; background: var(--pt-card) !important;
}
.card > .card-header {
  border-bottom: 1px solid var(--pt-line) !important; background: transparent !important;
  border-top-left-radius: var(--pt-radius) !important; border-top-right-radius: var(--pt-radius) !important;
}
.card > .card-header .card-title, .card > .card-header h3 { font-weight: 700 !important; color: var(--pt-ink) !important; letter-spacing: -.1px; }
.table thead th, .table thead tr {
  color: var(--pt-muted) !important; text-transform: uppercase; font-size: .8rem !important;
  letter-spacing: .5px; font-weight: 700 !important;
}
.table tbody tr { transition: background .12s ease; }
.table tbody tr:hover { background: var(--pt-blue-050) !important; }
.table tbody td { color: var(--pt-ink); }
.table.table-row-dashed tr { border-bottom-style: solid !important; border-bottom-color: var(--pt-line) !important; }
.page-item.active .page-link { background: var(--pt-blue) !important; border-radius: 8px !important; }
.breadcrumb, .bg-light-primary.rounded { border-radius: 10px !important; }
.badge-light-primary { background: var(--pt-blue-050) !important; color: var(--pt-blue) !important; }
.nav-line-tabs .nav-item .nav-link.active { border-bottom-color: var(--pt-blue) !important; color: var(--pt-blue) !important; }
.menu-sub-dropdown { border-radius: 12px !important; box-shadow: 0 16px 40px rgba(15, 23, 42, .14) !important; }

/* ---------- footer ---------- */
#kt_app_footer { opacity: .55; font-size: .78rem; }

/* ---------- login pages ---------- */
body.app-blank {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(42, 107, 240, .45), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(17, 82, 212, .40), transparent 60%),
    linear-gradient(160deg, #0A1A3F 0%, #0B2560 55%, #0A1A3F 100%) !important;
  min-height: 100vh;
}
body.app-blank::before {
  /* faint brand mark watermark */
  content: ""; position: fixed; right: -120px; bottom: -120px; width: 560px; height: 560px;
  background: url(paneotech-icon-white.png) no-repeat center / contain; opacity: .05; pointer-events: none;
}
body.app-blank #app_root > div > div > div.bg-body {
  border-radius: 20px !important; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55) !important;
  border: 1px solid rgba(255, 255, 255, .06);
  background: var(--pt-card) !important;
  position: relative; z-index: 1;
}
/* swap the square logo for the full PANEOTECH wordmark and add the product name */
body.app-blank form .container.mb-10 .row { flex-direction: column; align-items: center !important; }
body.app-blank form .container.mb-10 .col-5,
body.app-blank form .container.mb-10 .col-7 { width: 100%; flex: 0 0 100%; text-align: center; max-width: 100%; }
body.app-blank form .container.mb-10 .col-5 img {
  content: url(paneotech-wordmark.png); height: auto !important; width: 100%; max-width: 300px;
}
body.app-blank form .container.mb-10 .col-7 h1 { font-size: 0 !important; margin: 18px 0 0 !important; }
body.app-blank form .container.mb-10 .col-7 h1::after {
  content: "Storage Management System"; font-size: .82rem; font-weight: 700; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--pt-muted);
}
[data-bs-theme=dark] body.app-blank form .container.mb-10 .col-5 img { content: url(paneotech-wordmark-white.png); }
body.app-blank .form-control-solid { background: var(--pt-page) !important; border: 1px solid var(--pt-line) !important; }
body.app-blank #sign_in_submit { height: 52px; font-size: 1rem; }
body.app-blank .separator { border-color: var(--pt-line) !important; }

/* admin login gets a small badge so people know which door they are at */
body.app-blank form[action*="/web/admin/"] .container.mb-10::after {
  content: "Administrator"; display: inline-block; margin-top: 12px; padding: 4px 12px; border-radius: 999px;
  background: var(--pt-blue-050); color: var(--pt-blue); font-size: .72rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}
body.app-blank form[action*="/web/admin/"] .container.mb-10 { text-align: center; }

/* ---------- small screens ---------- */
@media (max-width: 575px) {
  body.app-blank #app_root > div > div { padding: 16px !important; }
  body.app-blank #app_root > div > div > div.bg-body { padding: 28px 22px !important; width: 100%; }
  body.app-blank::before { width: 320px; height: 320px; right: -80px; bottom: -80px; }
}