/* Horizon Storage: the Quant Intel Co desk look over the stock SFTPGo (KeenThemes) UI.
   Black and white only: black ground in dark mode, paper white in light mode, greys for structure,
   hairline rules, no accent colour and no shadows. Emphasis is contrast, weight and the serif.
   Type: Instrument Sans for the interface, Instrument Serif for titles, Geist Mono for numbers.
   Fonts are self-hosted (OFL-1.1, copied from the quant-desk build). */

@font-face { font-family: "Instrument Sans"; font-weight: 400; font-display: swap; src: url(fonts/instrument-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 500; font-display: swap; src: url(fonts/instrument-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 600 700; font-display: swap; src: url(fonts/instrument-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-weight: 400; font-display: swap; src: url(fonts/instrument-serif-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 400; font-display: swap; src: url(fonts/geist-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 500 700; font-display: swap; src: url(fonts/geist-mono-latin-500-normal.woff2) format("woff2"); }

/* Paper (light). Every colour in the UI resolves to one of these greys. */
:root, [data-bs-theme=light] {
  --hz-bg: #ffffff; --hz-panel: #ffffff; --hz-panel-2: #f6f6f6; --hz-hover: #f2f2f2;
  --hz-line: #e8e8e8; --hz-line-2: #d2d2d2;
  --hz-text: #0a0a0a; --hz-text-2: #3a3a3a; --hz-muted: #6b6b6b;
  --hz-ink: #000000; --hz-ink-rgb: 0, 0, 0; --hz-ink-active: #262626; --hz-on-ink: #ffffff;

  --bs-font-sans-serif: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-font-monospace: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-bg: var(--hz-bg); --bs-body-bg-rgb: 255, 255, 255;
  --bs-body-color: var(--hz-text); --bs-body-color-rgb: 10, 10, 10;
  --bs-emphasis-color: #000000; --bs-heading-color: var(--hz-text);
  --bs-secondary-color: var(--hz-muted); --bs-tertiary-color: rgba(10, 10, 10, .5);
  --bs-secondary-bg: var(--hz-panel-2); --bs-tertiary-bg: #f7f7f7;
  --bs-border-color: var(--hz-line); --bs-border-color-translucent: rgba(0, 0, 0, .1);
  --bs-link-color: #000000; --bs-link-color-rgb: 0, 0, 0; --bs-link-hover-color: #3a3a3a; --bs-link-hover-color-rgb: 58, 58, 58;
  --bs-gray-100: #f7f7f7; --bs-gray-200: #efefef; --bs-gray-300: #e2e2e2; --bs-gray-400: #c4c4c4; --bs-gray-500: #a3a3a3;
  --bs-gray-600: #6b6b6b; --bs-gray-700: #4a4a4a; --bs-gray-800: #2a2a2a; --bs-gray-900: #0a0a0a;
  --bs-text-gray-100: #f7f7f7; --bs-text-gray-200: #efefef; --bs-text-gray-300: #e2e2e2; --bs-text-gray-400: #a3a3a3; --bs-text-gray-500: #8a8a8a;
  --bs-text-gray-600: #6b6b6b; --bs-text-gray-700: #4a4a4a; --bs-text-gray-800: #2a2a2a; --bs-text-gray-900: #0a0a0a;
  --bs-text-muted: var(--hz-muted); --bs-text-dark: #0a0a0a;
  --bs-app-bg-color: var(--hz-bg); --bs-app-blank-bg-color: var(--hz-bg);
  --bs-app-header-base-bg-color: var(--hz-bg); --bs-app-sidebar-base-bg-color: var(--hz-bg);
  --bs-app-footer-bg-color: var(--hz-bg);
  --bs-card-bg: var(--hz-panel); --bs-card-border-color: var(--hz-line); --bs-card-box-shadow: none;
  --bs-menu-link-bg-color-active: var(--hz-hover); --bs-menu-link-color-active: #000000;
  --bs-menu-link-bg-color-hover: var(--hz-hover); --bs-menu-link-color-hover: #000000;
  --bs-dropdown-box-shadow: 0 24px 60px rgba(0, 0, 0, .16); --bs-menu-dropdown-box-shadow: 0 24px 60px rgba(0, 0, 0, .16);
  --bs-scrollbar-color: #d2d2d2; --bs-scrollbar-hover-color: #a3a3a3;
}

/* Black (dark) is the desk. */
[data-bs-theme=dark] {
  --hz-bg: #000000; --hz-panel: #0a0a0a; --hz-panel-2: #111111; --hz-hover: #161616;
  --hz-line: #1c1c1c; --hz-line-2: #2b2b2b;
  --hz-text: #f4f4f4; --hz-text-2: #c4c4c4; --hz-muted: #8a8a8a;
  --hz-ink: #ffffff; --hz-ink-rgb: 255, 255, 255; --hz-ink-active: #d9d9d9; --hz-on-ink: #000000;

  --bs-body-bg: var(--hz-bg); --bs-body-bg-rgb: 0, 0, 0;
  --bs-body-color: var(--hz-text); --bs-body-color-rgb: 244, 244, 244;
  --bs-emphasis-color: #ffffff; --bs-heading-color: var(--hz-text);
  --bs-secondary-color: var(--hz-muted); --bs-tertiary-color: rgba(244, 244, 244, .5);
  --bs-secondary-bg: var(--hz-panel-2); --bs-tertiary-bg: #0d0d0d;
  --bs-border-color: var(--hz-line); --bs-border-color-translucent: rgba(255, 255, 255, .1);
  --bs-link-color: #ffffff; --bs-link-color-rgb: 255, 255, 255; --bs-link-hover-color: #c4c4c4; --bs-link-hover-color-rgb: 196, 196, 196;
  --bs-gray-100: #0d0d0d; --bs-gray-200: #161616; --bs-gray-300: #1f1f1f; --bs-gray-400: #2b2b2b; --bs-gray-500: #5e5e5e;
  --bs-gray-600: #8a8a8a; --bs-gray-700: #a3a3a3; --bs-gray-800: #c4c4c4; --bs-gray-900: #f4f4f4;
  --bs-text-gray-100: #0d0d0d; --bs-text-gray-200: #161616; --bs-text-gray-300: #2b2b2b; --bs-text-gray-400: #5e5e5e; --bs-text-gray-500: #8a8a8a;
  --bs-text-gray-600: #8a8a8a; --bs-text-gray-700: #a3a3a3; --bs-text-gray-800: #c4c4c4; --bs-text-gray-900: #f4f4f4;
  --bs-text-muted: var(--hz-muted); --bs-text-dark: #f4f4f4;
  --bs-app-bg-color: var(--hz-bg); --bs-app-blank-bg-color: var(--hz-bg);
  --bs-app-header-base-bg-color: var(--hz-bg); --bs-app-sidebar-base-bg-color: var(--hz-bg);
  --bs-app-footer-bg-color: var(--hz-bg);
  --bs-card-bg: var(--hz-panel); --bs-card-border-color: var(--hz-line); --bs-card-box-shadow: none;
  --bs-menu-link-bg-color-active: var(--hz-hover); --bs-menu-link-color-active: #ffffff;
  --bs-menu-link-bg-color-hover: var(--hz-hover); --bs-menu-link-color-hover: #ffffff;
  --bs-dropdown-box-shadow: 0 24px 60px rgba(0, 0, 0, .55); --bs-menu-dropdown-box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  --bs-scrollbar-color: #2b2b2b; --bs-scrollbar-hover-color: #5e5e5e;
}

/* Every semantic colour (primary, success, info, warning, danger, secondary, dark) becomes ink. */
:root, [data-bs-theme=light], [data-bs-theme=dark] {
  --bs-primary: var(--hz-ink); --bs-primary-rgb: var(--hz-ink-rgb); --bs-primary-active: var(--hz-ink-active);
  --bs-primary-light: var(--hz-hover); --bs-primary-clarity: rgba(var(--hz-ink-rgb), .12); --bs-primary-inverse: var(--hz-on-ink);
  --bs-text-primary: var(--hz-ink); --bs-primary-text-emphasis: var(--hz-ink); --bs-primary-bg-subtle: var(--hz-hover); --bs-primary-border-subtle: var(--hz-line-2);
  --bs-success: var(--hz-ink); --bs-success-rgb: var(--hz-ink-rgb); --bs-success-active: var(--hz-ink-active); --bs-success-light: var(--hz-hover);
  --bs-success-clarity: rgba(var(--hz-ink-rgb), .12); --bs-success-inverse: var(--hz-on-ink); --bs-text-success: var(--hz-ink); --bs-success-text-emphasis: var(--hz-ink);
  --bs-info: var(--hz-text-2); --bs-info-rgb: var(--hz-ink-rgb); --bs-info-active: var(--hz-ink); --bs-info-light: var(--hz-hover);
  --bs-info-clarity: rgba(var(--hz-ink-rgb), .12); --bs-info-inverse: var(--hz-on-ink); --bs-text-info: var(--hz-text-2); --bs-info-text-emphasis: var(--hz-text-2);
  --bs-warning: var(--hz-text-2); --bs-warning-rgb: var(--hz-ink-rgb); --bs-warning-active: var(--hz-ink); --bs-warning-light: var(--hz-hover);
  --bs-warning-clarity: rgba(var(--hz-ink-rgb), .12); --bs-warning-inverse: var(--hz-on-ink); --bs-text-warning: var(--hz-text-2); --bs-warning-text-emphasis: var(--hz-text-2);
  --bs-danger: var(--hz-ink); --bs-danger-rgb: var(--hz-ink-rgb); --bs-danger-active: var(--hz-ink-active); --bs-danger-light: var(--hz-hover);
  --bs-danger-clarity: rgba(var(--hz-ink-rgb), .12); --bs-danger-inverse: var(--hz-on-ink); --bs-text-danger: var(--hz-ink); --bs-danger-text-emphasis: var(--hz-ink);
  --bs-form-invalid-color: var(--hz-ink); --bs-form-invalid-border-color: var(--hz-ink);
  --bs-form-valid-color: var(--hz-ink); --bs-form-valid-border-color: var(--hz-line-2);
  --bs-input-solid-bg: var(--hz-panel-2); --bs-input-solid-bg-focus: var(--hz-hover); --bs-input-bg: var(--hz-panel);
  --bs-border-radius: 8px; --bs-border-radius-sm: 6px; --bs-border-radius-lg: 10px; --bs-box-shadow: none; --bs-box-shadow-sm: none;
}

body { font-family: var(--bs-body-font-family); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: 0; }
::selection { background: var(--hz-text); color: var(--hz-bg); }
code, kbd, pre, samp, .font-monospace, .mono { font-family: var(--bs-font-monospace) !important; font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--hz-ink); outline-offset: 2px; }

/* Titles in the serif, the way the desk sets page and security names. */
h1, .h1, .page-heading, .card-title h2, .card-title h3, .modal-title, .swal2-title, .app-blank h1 {
  font-family: "Instrument Serif", "Iowan Old Style", Georgia, serif !important; font-weight: 400 !important; letter-spacing: 0;
}
.page-heading, .app-blank h1 { font-size: 1.9rem !important; }

/* Hairlines instead of shadows, flat surfaces. */
.card, .modal-content, .menu-sub-dropdown, .dropdown-menu, .app-blank #app_root .bg-body.rounded, .swal2-popup {
  box-shadow: none !important; border: 1px solid var(--hz-line) !important; border-radius: 10px !important;
}
.app-header, .app-sidebar, .app-footer, .app-toolbar { box-shadow: none !important; border-color: var(--hz-line) !important; }
.app-header { border-bottom: 1px solid var(--hz-line) !important; }
.app-sidebar { border-right: 1px solid var(--hz-line) !important; }
.separator, hr { border-color: var(--hz-line) !important; opacity: 1; }
.table > :not(caption) > * > * { border-bottom-color: var(--hz-line) !important; }
.table.table-row-dashed tr { border-bottom-style: solid !important; border-bottom-color: var(--hz-line) !important; }
.table tbody tr:hover > * { background: var(--hz-hover) !important; }
.table thead th, .table thead tr { color: var(--hz-muted) !important; font-weight: 500 !important; letter-spacing: .04em; }

/* Buttons: solid ink, or a hairline outline. No gradients, no colour. */
.btn { border-radius: 8px !important; font-weight: 500 !important; box-shadow: none !important; }
.btn.btn-primary, .btn.btn-success, .btn.btn-danger, .btn.btn-info, .btn.btn-warning, .btn.btn-dark {
  background: var(--hz-ink) !important; color: var(--hz-on-ink) !important; border: 1px solid var(--hz-ink) !important;
}
.btn.btn-primary i, .btn.btn-success i, .btn.btn-danger i, .btn.btn-info i, .btn.btn-warning i, .btn.btn-dark i { color: var(--hz-on-ink) !important; }
.btn.btn-primary:hover:not(.btn-active), .btn.btn-success:hover, .btn.btn-danger:hover, .btn.btn-info:hover, .btn.btn-warning:hover, .btn.btn-dark:hover {
  background: var(--hz-ink-active) !important; border-color: var(--hz-ink-active) !important;
}
.btn.btn-light, .btn.btn-secondary, .btn.btn-light-primary, .btn.btn-light-danger, .btn.btn-light-success, .btn.btn-light-info, .btn.btn-light-warning,
.btn.btn-bg-light, .btn.btn-outline, .btn.btn-active-light-primary {
  background: transparent !important; color: var(--hz-text) !important; border: 1px solid var(--hz-line-2) !important;
}
.btn.btn-light i, .btn.btn-secondary i, .btn.btn-light-primary i, .btn.btn-light-danger i, .btn.btn-bg-light i, .btn.btn-active-light-primary i { color: var(--hz-text-2) !important; }
.btn.btn-light:hover, .btn.btn-secondary:hover, .btn.btn-light-primary:hover, .btn.btn-light-danger:hover, .btn.btn-bg-light:hover,
.btn.btn-active-light-primary:hover, .btn.btn-active-light-primary.active {
  background: var(--hz-hover) !important; color: var(--hz-ink) !important; border-color: var(--hz-text-2) !important;
}
.btn.btn-icon.btn-active-color-primary:hover i { color: var(--hz-ink) !important; }

/* Forms: hairline fields, ink focus ring. */
.form-control, .form-select, .form-control.form-control-solid, .form-select.form-select-solid {
  background-color: var(--hz-panel) !important; border: 1px solid var(--hz-line-2) !important; color: var(--hz-text) !important; border-radius: 8px !important;
}
.form-control:focus, .form-select:focus, .form-control.form-control-solid:focus {
  border-color: var(--hz-ink) !important; box-shadow: 0 0 0 3px rgba(var(--hz-ink-rgb), .1) !important; background-color: var(--hz-panel) !important;
}
.form-control::placeholder { color: var(--hz-muted) !important; }
.form-check-input { border-color: var(--hz-line-2) !important; background-color: var(--hz-panel) !important; }
.form-check-input:checked { background-color: var(--hz-ink) !important; border-color: var(--hz-ink) !important; }
[data-bs-theme=dark] .form-check-input:checked[type=checkbox] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11' width='13' height='11' fill='none'%3e%3cpath d='M11.0426 1.02893C11.3258 0.695792 11.8254 0.655283 12.1585 0.938451C12.4917 1.22162 12.5322 1.72124 12.249 2.05437L5.51985 9.97104C5.23224 10.3094 4.72261 10.3451 4.3907 10.05L0.828197 6.88335C0.50141 6.59288 0.471975 6.09249 0.762452 5.7657C1.05293 5.43891 1.55332 5.40948 1.88011 5.69995L4.83765 8.32889L11.0426 1.02893Z' fill='%23000000'/%3e%3c/svg%3e") !important;
}
.invalid-feedback, .fv-plugins-message-container .invalid-feedback, .text-danger { color: var(--hz-ink) !important; font-weight: 500; }
.is-invalid, .form-control.is-invalid { border-color: var(--hz-ink) !important; border-width: 1.5px !important; }

/* Sidebar and menus: active item = hover grey + ink text + ink bar. */
.menu .menu-item .menu-link { border-radius: 8px !important; }
.menu .menu-item .menu-link.active, .menu .menu-item .menu-link:hover:not(.disabled) { background: var(--hz-hover) !important; }
.menu .menu-item .menu-link.active .menu-title, .menu .menu-item .menu-link.active .menu-icon i,
.menu .menu-item .menu-link:hover .menu-title, .menu .menu-item .menu-link:hover .menu-icon i { color: var(--hz-ink) !important; }
.menu .menu-item .menu-link.active { box-shadow: inset 2px 0 0 var(--hz-ink) !important; }

/* Badges, alerts, notices, icons and links: grey family only. */
.badge { border-radius: 6px !important; font-weight: 500 !important; }
[class*="badge-light-"], .badge.badge-light, .badge.badge-secondary {
  background: var(--hz-hover) !important; color: var(--hz-text) !important; border: 1px solid var(--hz-line-2);
}
.badge.badge-primary, .badge.badge-success, .badge.badge-danger, .badge.badge-info, .badge.badge-warning, .badge.badge-dark {
  background: var(--hz-ink) !important; color: var(--hz-on-ink) !important;
}
.alert, .notice, [class*="bg-light-"] { background: var(--hz-panel-2) !important; border: 1px solid var(--hz-line) !important; color: var(--hz-text) !important; }
.alert *, .notice * { color: var(--hz-text) !important; }
[class*="text-primary"], [class*="text-success"], [class*="text-info"], [class*="text-warning"], .text-danger, .link-primary { color: var(--hz-ink) !important; }
.bg-primary, .bg-success, .bg-danger, .bg-info, .bg-warning { background-color: var(--hz-ink) !important; color: var(--hz-on-ink) !important; }
a { text-underline-offset: 3px; }
.progress { background: var(--hz-hover) !important; }
.progress-bar { background: var(--hz-ink) !important; }

/* Login screen: plain paper or black, hairline card. */
body.app-blank { background: var(--hz-bg) !important; background-image: none !important; }
.app-blank #app_root .bg-body.rounded { background: var(--hz-panel) !important; }

/* Dialogs (SweetAlert2): monochrome icons and buttons. */
.swal2-popup { background: var(--hz-panel) !important; color: var(--hz-text) !important; }
.swal2-icon { border-color: var(--hz-line-2) !important; color: var(--hz-ink) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: var(--hz-line-2) !important; }
.swal2-icon [class^=swal2-x-mark-line], .swal2-icon .swal2-success-line-tip, .swal2-icon .swal2-success-line-long { background-color: var(--hz-ink) !important; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--hz-line-2); border-radius: 6px; border: 3px solid var(--hz-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--hz-muted); }
::-webkit-scrollbar-track { background: transparent; }

/* Brand name next to the logo: serif, like the desk's display type. */
.app-sidebar-logo span, .text-sidebar { font-family: "Instrument Serif", Georgia, serif !important; font-weight: 400 !important; font-size: 1.45rem !important; color: var(--hz-text) !important; }

/* Sidebar items at full legibility (Keen fades inactive ones to near-invisible grey). */
.app-sidebar .menu .menu-item .menu-link .menu-title, .app-sidebar .menu .menu-item .menu-link .menu-icon i,
.app-sidebar .menu .menu-item .menu-link .menu-arrow { color: var(--hz-text-2) !important; opacity: 1 !important; }
.app-sidebar .menu .menu-item .menu-link.active .menu-title, .app-sidebar .menu .menu-item .menu-link.active .menu-icon i,
.app-sidebar .menu .menu-item .menu-link:hover .menu-title, .app-sidebar .menu .menu-item .menu-link:hover .menu-icon i { color: var(--hz-ink) !important; }

/* Section titles ("Update user", "Public keys") in the serif. */
.section-title { font-family: "Instrument Serif", Georgia, serif !important; font-weight: 400 !important; font-size: 1.7rem !important; color: var(--hz-text) !important; }
.section-title-inner { font-family: "Instrument Serif", Georgia, serif !important; font-weight: 400 !important; font-size: 1.45rem !important; color: var(--hz-text) !important; }

/* Pagination: current page in ink. */
.page-link { color: var(--hz-text-2) !important; background: transparent !important; border-radius: 8px !important; }
.page-item.active .page-link, .page-item .page-link:hover { background: var(--hz-ink) !important; color: var(--hz-on-ink) !important; }
.page-item.disabled .page-link { color: var(--hz-line-2) !important; }

/* Switches and checkboxes keep a visible hairline when off. */
.form-check-input, .form-check-custom.form-check-solid .form-check-input { border: 1px solid var(--hz-line-2) !important; }
.form-switch .form-check-input:not(:checked) { background-color: var(--hz-panel-2) !important; }

/* Keen's "light" surface is slate blue in dark mode; make it the panel grey. */
:root, [data-bs-theme=light], [data-bs-theme=dark] { --bs-light: var(--hz-panel-2); --bs-light-active: var(--hz-hover); --bs-light-inverse: var(--hz-text); }
[data-bs-theme=dark] { --bs-light-rgb: 17, 17, 17; }
[data-bs-theme=light], :root { --bs-light-rgb: 246, 246, 246; }
.card > .card-header, .bg-light, .bg-gray-100, .bg-body-tertiary { background-color: var(--hz-panel-2) !important; border-bottom: 1px solid var(--hz-line) !important; }