/*
 * THMLab Client Portal branding for SFTPGo 2.7.0 WebClient.
 * This file is loaded only through the supported WebClient extra_css setting.
 */
:root {
  --thm-navy: #07105c;
  --thm-navy-hover: #101b78;
  --thm-gold: #e9a91b;
  --thm-green: #16965f;
  --thm-light-bg: #f6f7f9;
  --thm-light-border: #d9dde5;
  --thm-dark-bg: #111318;
  --thm-dark-surface: #191c22;
  --thm-dark-border: #343943;
  --thm-radius: 6px;
  --thm-logo-light: url("https://www.thmlab.com/assets/logoblue-D1_uEmRm.webp");
  --thm-logo-dark: url("https://www.thmlab.com/assets/logonobackground-BR-0dmWM.webp");
}

/* Use the exact THMLab-hosted logos, with the mounted light logo as src fallback. */
html[data-bs-theme="light"] img[alt="Logo"] { content: var(--thm-logo-light); }
html[data-bs-theme="dark"] img[alt="Logo"] { content: var(--thm-logo-dark); }

body { letter-spacing: -0.005em; }
.rounded, .rounded-1, .rounded-2, .rounded-3,
.card, .modal-content, .menu-sub-dropdown, .form-control, .form-select, .btn {
  border-radius: var(--thm-radius) !important;
}
.shadow, .shadow-sm { box-shadow: 0 1px 3px rgb(8 15 35 / 8%) !important; }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible,
.menu-link:focus-visible, a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--thm-gold) 72%, transparent) !important;
  outline-offset: 2px;
}

/* Authentication pages */
body.app-blank { background: var(--thm-light-bg); }
body.app-blank #app_root > div > div > div {
  width: min(420px, calc(100vw - 32px)) !important;
  padding: 32px !important;
  border: 1px solid var(--thm-light-border);
}
#sign_in_form > .container:first-child { margin-bottom: 24px !important; }
#sign_in_form > .container:first-child .row { display: block; text-align: center; }
#sign_in_form > .container:first-child .col-5,
#sign_in_form > .container:first-child .col-7 { width: 100%; }
#sign_in_form > .container:first-child .col-5 {
  height: 64px;
  background: var(--thm-logo-light) center / 190px auto no-repeat;
}
html[data-bs-theme="dark"] #sign_in_form > .container:first-child .col-5 {
  background-image: var(--thm-logo-dark);
}
#sign_in_form > .container:first-child img {
  visibility: hidden;
  width: 190px;
  height: 64px !important;
}
#sign_in_form h1 {
  margin: 18px 0 0 !important;
  color: var(--thm-navy) !important;
  font-size: 0 !important;
  line-height: 1.35;
}
#sign_in_form h1::before {
  content: "Client Portal";
  display: block;
  font-size: 24px;
  font-weight: 700;
}
#sign_in_form h1::after {
  content: "Manage your website files securely.";
  display: block;
  margin-top: 6px;
  color: #596173;
  font-size: 14px;
  font-weight: 400;
}
body.app-blank hr + .d-flex { justify-content: center !important; flex-wrap: wrap; gap: 10px; }
body.app-blank hr + .d-flex > .me-10 { margin-right: 0 !important; }
body.app-blank hr + .d-flex a { color: var(--thm-navy); font-size: 12px; }

/* Shared controls */
.btn-primary {
  --bs-btn-bg: var(--thm-navy);
  --bs-btn-border-color: var(--thm-navy);
  --bs-btn-hover-bg: var(--thm-navy-hover);
  --bs-btn-hover-border-color: var(--thm-navy-hover);
  --bs-btn-active-bg: var(--thm-navy-hover);
  --bs-btn-active-border-color: var(--thm-navy-hover);
  color: #fff !important;
  background-color: var(--thm-navy) !important;
  border-color: var(--thm-navy) !important;
}
.btn-primary:hover, .btn-primary:active {
  background-color: var(--thm-navy-hover) !important;
  border-color: var(--thm-navy-hover) !important;
}
.btn-success { --bs-btn-bg: var(--thm-green); --bs-btn-border-color: var(--thm-green); }
.btn-light-primary { color: var(--thm-navy) !important; border: 1px solid #cbd1df !important; }
.text-primary, .text-hover-primary:hover { color: var(--thm-navy) !important; }
.form-control:focus, .form-select:focus { border-color: var(--thm-gold) !important; }
.form-check-input:checked { background-color: var(--thm-navy); border-color: var(--thm-navy); }

/* Authenticated file-management shell */
#kt_app_sidebar { background: #080f42; border-right: 1px solid #121c5c; }
#kt_app_sidebar .app-sidebar-logo { display: flex; align-items: center; }
#kt_app_sidebar .app-sidebar-logo img { width: 112px; object-fit: contain; }
#kt_app_sidebar .text-sidebar { color: #fff !important; white-space: nowrap; }
#kt_app_sidebar .menu-link { border-radius: var(--thm-radius); }
#kt_app_sidebar .menu-link .menu-title,
#kt_app_sidebar .menu-link .menu-icon i { color: #d8dcef !important; }
#kt_app_sidebar .menu-link:hover { background: rgb(255 255 255 / 8%); }
#kt_app_sidebar .menu-link.active {
  background: var(--thm-gold) !important;
  box-shadow: none;
}
#kt_app_sidebar .menu-link.active .menu-title,
#kt_app_sidebar .menu-link.active .menu-icon i { color: #17191e !important; }
#kt_app_header { border-bottom: 1px solid var(--thm-light-border); box-shadow: none; }
#kt_app_content { padding-top: 20px; }
#kt_app_content .card { border: 1px solid var(--thm-light-border); }
#file_manager_list { table-layout: auto; }
#file_manager_list th, #file_manager_list td { padding-top: 11px; padding-bottom: 11px; }
#file_manager_list td:nth-child(3) { max-width: 46vw; overflow-wrap: anywhere; }
#file_manager_list tbody tr:hover { background: rgb(7 16 92 / 4%); }
.modal-content, .menu-sub-dropdown { border: 1px solid var(--thm-light-border); box-shadow: 0 8px 24px rgb(8 15 35 / 14%) !important; }
#kt_app_footer { border-top: 1px solid var(--thm-light-border); }

/* Profile and password settings */
#page_form, #change_pwd_form {
  max-width: 1040px;
  margin-inline: auto;
}
#page_form > .form-group,
#change_pwd_form > .form-group {
  padding: 4px 0;
}
#page_form .col-form-label,
#change_pwd_form .col-form-label {
  color: #30384a;
  font-weight: 600;
}
#page_form > .card {
  margin-top: 28px !important;
  overflow: hidden;
  border-color: var(--thm-light-border) !important;
  box-shadow: none !important;
}
#page_form > .card > .card-header,
body:has(#change_pwd_form) #kt_app_content_container > .card > .card-header,
body:has(#page_form) #kt_app_content_container > .card > .card-header {
  min-height: 58px;
  background: #f4f5f8 !important;
  border-bottom: 1px solid var(--thm-light-border);
  border-left: 4px solid var(--thm-gold);
}
#page_form > .card > .card-header .card-title,
body:has(#change_pwd_form) #kt_app_content_container > .card > .card-header .card-title,
body:has(#page_form) #kt_app_content_container > .card > .card-header .card-title {
  color: var(--thm-navy) !important;
  font-size: 17px;
  font-weight: 700;
}
#page_form textarea {
  min-height: 112px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
}
#page_form .readonly-input {
  padding: 11px 13px;
  color: #586174;
  background: #f4f5f7;
  border: 1px solid var(--thm-light-border);
  border-radius: var(--thm-radius);
}
#page_form [data-repeater-item] + [data-repeater-item] {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--thm-light-border);
}
#page_form .btn-light-danger {
  color: #a52b35 !important;
  background: #fff4f4 !important;
  border: 1px solid #f0c8cc !important;
}
#page_form .btn-light-danger:hover {
  color: #fff !important;
  background: #b4232f !important;
  border-color: #b4232f !important;
}
#page_form #form_submit,
#change_pwd_form #form_submit {
  min-width: 132px;
}
#change_pwd_form {
  max-width: 760px;
}
#change_pwd_form .form-control {
  min-height: 46px;
}
#idAllowAPIKeyAuth:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--thm-gold) 72%, transparent);
}

/* Dark theme keeps contrast high and uses the white THMLab logo. */
html[data-bs-theme="dark"] body.app-blank { background: var(--thm-dark-bg); }
html[data-bs-theme="dark"] body.app-blank #app_root > div > div > div,
html[data-bs-theme="dark"] #kt_app_content .card,
html[data-bs-theme="dark"] .modal-content,
html[data-bs-theme="dark"] .menu-sub-dropdown {
  background: var(--thm-dark-surface) !important;
  border-color: var(--thm-dark-border) !important;
  box-shadow: none !important;
}
html[data-bs-theme="dark"] #sign_in_form h1 { color: #fff !important; }
html[data-bs-theme="dark"] #sign_in_form h1::after { color: #b7bdc8; }
html[data-bs-theme="dark"] body.app-blank hr + .d-flex a { color: #d5d9ff; }
html[data-bs-theme="dark"] #kt_app_header,
html[data-bs-theme="dark"] #kt_app_footer { border-color: var(--thm-dark-border); }
html[data-bs-theme="dark"] #file_manager_list tbody tr:hover { background: rgb(255 255 255 / 4%); }
html[data-bs-theme="dark"] .btn-light-primary {
  color: #eef0ff !important;
  background: #242936 !important;
  border-color: #414858 !important;
}
html[data-bs-theme="dark"] #page_form .col-form-label,
html[data-bs-theme="dark"] #change_pwd_form .col-form-label { color: #e2e5eb; }
html[data-bs-theme="dark"] #page_form > .card > .card-header,
html[data-bs-theme="dark"] body:has(#change_pwd_form) #kt_app_content_container > .card > .card-header,
html[data-bs-theme="dark"] body:has(#page_form) #kt_app_content_container > .card > .card-header {
  background: #20242c !important;
  border-color: var(--thm-dark-border);
}
html[data-bs-theme="dark"] #page_form > .card > .card-header .card-title,
html[data-bs-theme="dark"] body:has(#change_pwd_form) #kt_app_content_container > .card > .card-header .card-title,
html[data-bs-theme="dark"] body:has(#page_form) #kt_app_content_container > .card > .card-header .card-title {
  color: #f2f3ff !important;
}
html[data-bs-theme="dark"] #page_form .readonly-input {
  color: #c7ccd6;
  background: #20242c;
  border-color: var(--thm-dark-border);
}
html[data-bs-theme="dark"] #page_form [data-repeater-item] + [data-repeater-item] {
  border-color: var(--thm-dark-border);
}
html[data-bs-theme="dark"] #page_form .btn-light-danger {
  color: #ffb9bf !important;
  background: #342126 !important;
  border-color: #60323a !important;
}

@media (max-width: 767.98px) {
  body.app-blank #app_root > div > div { padding: 16px !important; }
  body.app-blank #app_root > div > div > div { padding: 24px !important; }
  #sign_in_form > .container:first-child .col-5 {
    height: 56px;
    background-size: 168px auto;
  }
  #sign_in_form > .container:first-child img { height: 56px !important; }
  #kt_app_content { padding-top: 12px; }
  #kt_app_content .card-header { padding: 16px; }
  #kt_app_content .card-toolbar { width: 100%; margin-top: 12px; }
  #kt_app_content .card-toolbar > div { width: 100%; }
  #kt_app_content .card-toolbar .btn { flex: 1; padding-left: 10px; padding-right: 10px; }
  [data-kt-filemanager-table-filter="search"] { width: 100% !important; }
  #file_manager_list td:nth-child(3) { max-width: 190px; }
  #page_form > .form-group,
  #change_pwd_form > .form-group { padding: 0; }
  #page_form .col-form-label,
  #change_pwd_form .col-form-label { padding-bottom: 7px; }
  #page_form > .card { margin-top: 20px !important; }
  #page_form > .card > .card-body { padding: 18px; }
  #page_form [data-repeater-item] .btn-light-danger {
    width: 100%;
    justify-content: center;
  }
  #page_form #form_submit,
  #change_pwd_form #form_submit { width: 100%; }
}