/* ==========================================================================
   Techworx theme for SFTPGo WebClient: BASE (colours, shapes, dark mode)
   Always load this first, then ONE layout file (classic or split):
   SFTPGO_HTTPD__BINDINGS__0__BRANDING__WEB_CLIENT__EXTRA_CSS=/custom/techworx-base.css,/custom/techworx-classic.css
   ========================================================================== */

/* ---- Brand palette ------------------------------------------------------ */
:root {
  --tw-teal: #327389;
  --tw-teal-rgb: 50, 115, 137;
  --tw-teal-dark: #275c6e;
  --tw-teal-deep: #1d4553;
  --tw-mist: #b1c6c9;
  --tw-mist-tint: #eaf1f2;
  --tw-charcoal: #2b2a32;
  --tw-charcoal-2: #36353e;
  --tw-brown: #50433b;
  --tw-orange: #ed8d26;
  --tw-orange-dark: #d77a16;
  --tw-sand: #b5a58e;
  --tw-radius: 12px;
}

/* ---- Light theme -------------------------------------------------------- */
[data-bs-theme=light] {
  --bs-primary: var(--tw-teal);
  --bs-primary-rgb: var(--tw-teal-rgb);
  --bs-primary-active: var(--tw-teal-dark);
  --bs-primary-light: var(--tw-mist-tint);
  --bs-primary-clarity: rgba(var(--tw-teal-rgb), .2);
  --bs-primary-bg-subtle: var(--tw-mist-tint);
  --bs-primary-border-subtle: var(--tw-mist);
  --bs-primary-text-emphasis: var(--tw-teal-deep);
  --bs-primary-inverse: #fff;
  --bs-text-primary: var(--bs-primary);
  --bs-component-active-bg: var(--bs-primary);
  --bs-component-checked-bg: var(--bs-primary);
  --bs-component-hover-color: var(--bs-primary);
  --bs-menu-link-color-active: var(--bs-primary);
  --bs-menu-link-color-here: var(--bs-primary);
  --bs-menu-link-color-hover: var(--bs-primary);
  --bs-menu-link-color-show: var(--bs-primary);
  --bs-nav-pills-link-active-bg: var(--bs-primary);
  --bs-progress-bar-bg: var(--bs-primary);
  --bs-scrolltop-bg-color: var(--bs-primary);
  --bs-scrolltop-bg-color-hover: var(--bs-primary-active);
  --bs-link-color: var(--tw-teal);
  --bs-link-color-rgb: var(--tw-teal-rgb);
  --bs-link-hover-color: var(--tw-teal-dark);
  --bs-app-bg-color: #f3f6f7;
  --bs-app-sidebar-base-bg-color: var(--tw-charcoal);
  --bs-app-header-base-bg-color: #f3f6f7;
  --bs-text-gray-900: var(--tw-charcoal);
  --bs-gray-900: var(--tw-charcoal);
}

/* ---- Dark theme (users can switch with the sun/moon icon) --------------- */
[data-bs-theme=dark] {
  --bs-primary: #5aa3b9;
  --bs-primary-rgb: 90, 163, 185;
  --bs-primary-active: #74b6ca;
  --bs-primary-light: #1c2b31;
  --bs-primary-clarity: rgba(90, 163, 185, .2);
  --bs-primary-bg-subtle: #1c2b31;
  --bs-primary-border-subtle: #2c4a55;
  --bs-primary-text-emphasis: #9cc9d6;
  --bs-primary-inverse: #0f1a1e;
  --bs-text-primary: var(--bs-primary);
  --bs-component-active-bg: var(--bs-primary);
  --bs-component-checked-bg: var(--bs-primary);
  --bs-component-hover-color: var(--bs-primary);
  --bs-menu-link-color-active: var(--bs-primary);
  --bs-menu-link-color-here: var(--bs-primary);
  --bs-menu-link-color-hover: var(--bs-primary);
  --bs-menu-link-color-show: var(--bs-primary);
  --bs-nav-pills-link-active-bg: var(--bs-primary);
  --bs-progress-bar-bg: var(--bs-primary);
  --bs-scrolltop-bg-color: var(--bs-primary);
  --bs-scrolltop-bg-color-hover: var(--bs-primary-active);
  --bs-link-color: #5aa3b9;
  --bs-link-color-rgb: 90, 163, 185;
  --bs-link-hover-color: #74b6ca;
  --bs-app-bg-color: #1a191f;
  --bs-app-header-base-bg-color: #1a191f;
  --bs-app-sidebar-base-bg-color: #121116;
  --bs-body-bg: #222128;
  --bs-card-bg: #222128;
}

/* ---- General shape ------------------------------------------------------ */
body { letter-spacing: -.005em; }
.card { border-radius: var(--tw-radius) !important; }
.card.shadow-sm { box-shadow: 0 1px 2px rgba(43, 42, 50, .06), 0 8px 24px rgba(43, 42, 50, .06) !important; }
[data-bs-theme=dark] .card.shadow-sm { box-shadow: none !important; border: 1px solid #2f2e36 !important; }
.btn { border-radius: 10px; font-weight: 600; }
.form-control, .form-select { border-radius: 10px; }
.modal-content { border-radius: 16px; }

/* ---- Buttons ------------------------------------------------------------ */
.btn.btn-primary { background-color: var(--bs-primary); }
.btn.btn-primary:hover:not(.btn-active),
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:active:not(.btn-active) { background-color: var(--bs-primary-active) !important; }

/* "Upload Files" gets the orange call-to-action (dark text for contrast) */
button[data-bs-target="#modal_upload"].btn-primary,
#upload_files_button.btn-primary,
#upload_files_empty_button.btn-primary {
  background-color: var(--tw-orange) !important;
  color: var(--tw-charcoal) !important;
}
button[data-bs-target="#modal_upload"].btn-primary i,
button[data-bs-target="#modal_upload"].btn-primary i span { color: var(--tw-charcoal) !important; }
button[data-bs-target="#modal_upload"].btn-primary:hover,
#upload_files_button.btn-primary:hover { background-color: var(--tw-orange-dark) !important; }

/* ---- File list ---------------------------------------------------------- */
#file_manager_list thead th, table.dataTable thead th {
  text-transform: uppercase; font-size: .78rem !important; letter-spacing: .06em; color: #7a7985 !important;
}
table.dataTable tbody tr:hover td { background-color: var(--bs-primary-light); }
.ki-folder, .ki-folder span { color: var(--bs-primary) !important; }
/* Breadcrumb "Home" pill */
.breadcrumb .btn, #breadcrumb_container .btn { border-radius: 999px; }

/* Dark mode: dark text on the lighter teal buttons for contrast */
[data-bs-theme=dark] .btn.btn-primary:not([data-bs-target="#modal_upload"]):not(#upload_files_button),
[data-bs-theme=dark] .btn.btn-primary:not([data-bs-target="#modal_upload"]) .indicator-label { color: #0f1a1e !important; }

/* ---- Upload dropzone ---------------------------------------------------- */
.dropzone {
  border: 2px dashed var(--tw-mist) !important;
  background-color: var(--tw-mist-tint) !important;
  border-radius: var(--tw-radius) !important;
}
[data-bs-theme=dark] .dropzone { background-color: #1c2b31 !important; border-color: #2c4a55 !important; }


/* ---- Checkboxes and switches in brand colour (SFTPGo default is blue) --- */
.form-check-input:checked { background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; }
.form-check-input:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2); }