/**
 * HM Share — SFTPGo WebAdmin & WebClient theme overlay
 *
 * Repo (canonical): branding/hmshare-theme.css
 * Brand font:        branding/fonts/poiret-one-latin-400-normal.woff2
 * Dated snapshot:    scripts/remote/releases/YYYY-MM-DD/branding/ (run scripts/snapshot-release.ps1)
 * Server (live):     /sftpgo/config/branding/hmshare-theme.css
 *                    /sftpgo/config/branding/fonts/  (mounted into image static)
 *
 * Load via EXTRA_CSS env — survives docker pull / OS reboot (host bind mount).
 * Brand title font: Poiret One (self-hosted under /static/branding/fonts/)
 * Design: enterprise slate + muted orange accent
 */

/* ------------------------------------------------------------------ */
/* Poiret One — login title + sidebar brand only (OFL, repo fonts/)    */
/* ------------------------------------------------------------------ */
@font-face {
  font-family: "Poiret One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/branding/fonts/poiret-one-latin-400-normal.woff2") format("woff2");
}

#sign_in_form h1,
#sign_in_form h1.text-gray-900,
.app-sidebar #kt_app_sidebar_logo .menu-heading,
.app-sidebar #kt_app_sidebar_logo a,
.app-sidebar #kt_app_sidebar_logo span,
.app-sidebar .app-sidebar-logo .menu-heading,
.app-sidebar .app-sidebar-logo span,
.app-sidebar .text-sidebar {
  font-family: "Poiret One", "Segoe UI", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em;
  text-transform: none;
}

/* Login header row: title height ~ logo (h-80px–h-lg-100px) */
#sign_in_form .container.mb-10 > .row.align-items-center,
#sign_in_form .row.align-items-center {
  align-items: center !important;
}

#sign_in_form h1,
#sign_in_form h1.text-gray-900 {
  font-size: 2.65rem;
  line-height: 1.08;
  margin-bottom: 0 !important;
  color: var(--hm-slate-950) !important;
  letter-spacing: 0.1em;
}

@media (min-width: 768px) {
  #sign_in_form h1,
  #sign_in_form h1.text-gray-900 {
    font-size: 2.85rem;
  }
}

@media (min-width: 992px) {
  #sign_in_form h1,
  #sign_in_form h1.text-gray-900 {
    font-size: 3rem;
  }
}

/* Sidebar brand: logo + title on one row, vertically centered */
.app-sidebar #kt_app_sidebar_logo,
.app-sidebar .app-sidebar-logo {
  display: flex !important;
  align-items: center !important;
  min-height: 0;
}

.app-sidebar #kt_app_sidebar_logo a,
.app-sidebar .app-sidebar-logo a {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
}

.app-sidebar #kt_app_sidebar_logo a > img,
.app-sidebar .app-sidebar-logo a > img,
.app-sidebar #kt_app_sidebar_logo .app-sidebar-logo-default,
.app-sidebar .app-sidebar-logo-default {
  flex-shrink: 0;
}

.app-sidebar #kt_app_sidebar_logo .d-flex.flex-column,
.app-sidebar .app-sidebar-logo .d-flex.flex-column {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap;
  gap: 0.15rem 0.35rem;
  min-width: 0;
}

.app-sidebar #kt_app_sidebar_logo .menu-heading,
.app-sidebar #kt_app_sidebar_logo a,
.app-sidebar #kt_app_sidebar_logo span,
.app-sidebar .app-sidebar-logo .menu-heading,
.app-sidebar .app-sidebar-logo span,
.app-sidebar .text-sidebar {
  font-size: 1.2rem;
  line-height: 1.15;
  color: rgba(255, 255, 255, 0.94) !important;
  letter-spacing: 0.1em;
  white-space: normal;
}

/* Nav labels stay Inter — not .menu-title in sidebar logo block */
.app-sidebar .menu .menu-link .menu-title {
  font-family: Inter, "Segoe UI", system-ui, sans-serif !important;
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------ */
/* Design tokens                                                       */
/* ------------------------------------------------------------------ */
:root,
[data-bs-theme="light"] {
  --hm-accent: #c46a2e;
  --hm-accent-hover: #a85824;
  --hm-accent-active: #8f4a1f;
  --hm-accent-rgb: 196, 106, 46;
  --hm-accent-soft: #f3e8de;

  --hm-slate-950: #14171c;
  --hm-slate-900: #1c2128;
  --hm-slate-800: #2a3038;
  --hm-slate-700: #3d4550;
  --hm-slate-600: #5c6370;
  --hm-slate-200: #dde1e6;
  --hm-slate-100: #eef0f3;
  --hm-surface: #f4f5f7;

  /* Bootstrap / Metronic primary → orange accent */
  --bs-primary: var(--hm-accent);
  --bs-primary-active: var(--hm-accent-hover);
  --bs-primary-inverse: #ffffff;
  --bs-primary-rgb: var(--hm-accent-rgb);
  --bs-primary-light: var(--hm-accent-soft);
  --bs-link-color: var(--hm-accent-active);
  --bs-link-hover-color: var(--hm-accent-hover);

  /* Softer page chrome */
  --bs-body-bg: var(--hm-surface);
  --bs-body-color: #1a1d23;
  --bs-border-color: var(--hm-slate-200);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;

  /* Tighter cards (default Metronic padding is very large) */
  --bs-card-spacer-y: 1rem;
  --bs-card-spacer-x: 1.25rem;
  --bs-card-border-color: var(--hm-slate-200);
  --bs-card-box-shadow: 0 1px 2px rgba(20, 23, 28, 0.06);

  /* Sidebar: professional dark grey (not pure black) */
  --bs-app-sidebar-base-bg-color: var(--hm-slate-900);
  --bs-app-sidebar-base-border-end: 1px solid rgba(255, 255, 255, 0.06);

  /* Active nav: orange accent instead of bright blue */
  --bs-menu-link-color-active: #e8a06b;
  --bs-menu-link-bg-color-active: var(--hm-slate-800);
  --bs-menu-link-bg-color-hover: var(--hm-slate-800);
  --bs-menu-link-bg-color-here: var(--hm-slate-800);

  /* Buttons */
  --bs-btn-padding-y: 0.45rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: var(--bs-border-radius);
}

[data-bs-theme="dark"] {
  --bs-primary: #d4844a;
  --bs-primary-active: #c46a2e;
  --bs-primary-rgb: 212, 132, 74;
  --bs-link-color: #e8a06b;
  --bs-menu-link-color-active: #e8a06b;
  --bs-app-sidebar-base-bg-color: var(--hm-slate-950);
}

/* ------------------------------------------------------------------ */
/* Typography & density                                                */
/* ------------------------------------------------------------------ */
/* Inter is bundled by SFTPGo under /static/vendor/fonts/inter/ (no CDN). */
body,
.app-default,
.form-control,
.btn,
.menu-title {
  font-family: Inter, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial,
    sans-serif;
}

body {
  font-size: 0.875rem;
  letter-spacing: -0.01em;
}

.section-title {
  font-size: 1.2rem !important;
}

.section-title-inner {
  font-size: 1.05rem !important;
}

/* ------------------------------------------------------------------ */
/* Cards & main content                                                */
/* ------------------------------------------------------------------ */
.card {
  border: 1px solid var(--hm-slate-200);
  box-shadow: var(--bs-card-box-shadow);
}

.card .card-body {
  padding: 1.25rem 1.5rem !important;
}

.card .card-header {
  padding: 0.875rem 1.5rem !important;
  min-height: unset;
  border-bottom: 1px solid var(--hm-slate-200);
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */
.btn {
  font-weight: 500;
  letter-spacing: 0.01em;
}

.btn.px-10,
.btn[class*="px-10"] {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.btn-lg,
.btn.btn-lg {
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1.125rem;
  font-size: 0.875rem;
}

.btn-primary {
  box-shadow: 0 1px 2px rgba(var(--hm-accent-rgb), 0.25);
}

.btn-primary:hover:not(.btn-active),
.btn-primary:focus:not(.btn-active) {
  box-shadow: 0 2px 6px rgba(var(--hm-accent-rgb), 0.3);
}

.btn-light-primary,
.btn.btn-light-primary {
  color: var(--hm-accent-active);
  background-color: var(--hm-accent-soft);
  border-color: transparent;
}

/* ------------------------------------------------------------------ */
/* Forms (login + in-app)                                              */
/* ------------------------------------------------------------------ */
.form-control,
.form-control-solid,
.form-select,
.form-select-solid {
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  min-height: calc(1.5em + 1rem + 2px);
  border-radius: var(--bs-border-radius);
}

.form-control-lg,
.form-control-solid.form-control-lg {
  font-size: 0.875rem;
  padding: 0.55rem 0.85rem;
  min-height: calc(1.5em + 1.1rem + 2px);
}

/* Login page: less “chunky toy” card */
body:not([data-kt-app-sidebar-fixed]) .w-lg-500px .card,
.w-lg-500px .card {
  border-radius: var(--bs-border-radius-lg);
}

.w-lg-500px .card .card-body {
  padding: 1.5rem 1.75rem !important;
}

/* ------------------------------------------------------------------ */
/* DataTables footer (page length + “Showing X of Y”)                    */
/* ------------------------------------------------------------------ */
.dataTables_wrapper .dataTables_length label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem;
  margin: 0;
  white-space: nowrap;
}

.dataTables_wrapper .dataTables_length .form-select,
.dataTables_wrapper .dataTables_length select {
  width: auto !important;
  min-width: 4.5rem;
  min-height: unset !important;
  height: auto !important;
  padding: 0.35rem 2rem 0.35rem 0.65rem !important;
  line-height: 1.25;
  margin: 0;
  background-position: right 0.5rem center;
}

.dataTables_wrapper .dataTables_info {
  display: flex;
  align-items: center;
  padding-top: 0.25rem;
  white-space: nowrap;
}

.dataTables_wrapper > .row:last-child,
.dataTables_wrapper .row[data-kt-datatable="pager"] {
  align-items: center !important;
}

.dataTables_wrapper .col-sm-12.col-md-5,
.dataTables_wrapper .col-sm-12.col-md-7 {
  display: flex;
  align-items: center;
}

/* ------------------------------------------------------------------ */
/* Tables (WebClient file list)                                        */
/* ------------------------------------------------------------------ */
.table {
  --bs-table-striped-bg: rgba(20, 23, 28, 0.02);
  font-size: 0.8125rem;
}

.table > :not(caption) > * > * {
  padding: 0.5rem 0.75rem;
}

.table a:not(.btn) {
  color: var(--hm-slate-800);
  font-weight: 500;
  text-decoration: none;
}

.table a:not(.btn):hover {
  color: var(--hm-accent);
}

/* File type icons: tone down bright blue */
.table .svg-icon svg [fill]:not([fill="none"]),
.table .text-primary .svg-icon {
  color: var(--hm-slate-600) !important;
}

/* ------------------------------------------------------------------ */
/* Pagination & badges                                                 */
/* ------------------------------------------------------------------ */
.page-item.active .page-link {
  background-color: var(--hm-accent);
  border-color: var(--hm-accent);
}

.badge-light-primary,
.badge.badge-light-primary {
  color: var(--hm-accent-active);
  background-color: var(--hm-accent-soft);
}

/* Breadcrumb / path pills */
.breadcrumb .badge,
.badge-primary {
  background-color: var(--hm-accent-soft) !important;
  color: var(--hm-accent-active) !important;
}

/* ------------------------------------------------------------------ */
/* Sidebar                                                             */
/* ------------------------------------------------------------------ */
.app-sidebar {
  --bs-app-sidebar-width: 240px;
}

.app-sidebar .menu-link.active .menu-title,
.app-sidebar .menu-link.here .menu-title {
  font-weight: 600;
}

.text-sidebar {
  color: rgba(255, 255, 255, 0.94);
}

/* Sidebar + breadcrumb icons — orange/slate instead of default blue */
.app-sidebar .menu-link .menu-icon .ki-duotone,
.app-sidebar .menu-link .menu-icon .ki-outline {
  color: #9aa3af;
}

.app-sidebar .menu-link.active .menu-icon .ki-duotone,
.app-sidebar .menu-link.active .menu-icon .ki-outline,
.app-sidebar .menu-link.here .menu-icon .ki-duotone,
.app-sidebar .menu-link.here .menu-icon .ki-outline {
  color: #e8a06b;
}

.breadcrumb .ki-duotone,
.breadcrumb .ki-outline,
.breadcrumb .svg-icon {
  color: var(--hm-accent) !important;
}

/* ------------------------------------------------------------------ */
/* Header / toolbar                                                    */
/* ------------------------------------------------------------------ */
.app-header {
  border-bottom: 1px solid var(--hm-slate-200);
  box-shadow: none;
}

/* ------------------------------------------------------------------ */
/* Links in content (keep readable, accent on hover)                   */
/* ------------------------------------------------------------------ */
a:not(.btn):not(.menu-link):not(.page-link) {
  color: var(--hm-accent-active);
}

a:not(.btn):not(.menu-link):not(.page-link):hover {
  color: var(--hm-accent-hover);
}

/* Footer version line */
#kt_app_footer,
.app-footer {
  font-size: 0.75rem;
  color: var(--hm-slate-600);
}

/* ------------------------------------------------------------------ */
/* Accessibility                                                       */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}