/*------------------------------------*\
    Color tokens
    Used directly by the file-listing pages (private/share folder views,
    which load theme/style.css, not Bootstrap) and mirrored into Bootstrap's
    own CSS variables below for the login/setup/install/admin pages.
\*------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg-color: #0f1220;
  --bg-color-alt: #151833;
  --text-color: #e8eaf0;
  --muted-color: #8b92b0;
  --link-color: #b1bcff;
  --link-hover-color: #d2d8ff;
  --accent-1: #6366f1;
  --accent-2: #8b5cf6;
  --accent-3: #c084fc;
  --accent-soft: rgba(99, 102, 241, .12);
  --card-bg: #1a1e33;
  --border-color: #2a2f47;
  --row-alt: rgba(99, 102, 241, .04);
  --row-hover: rgba(99, 102, 241, .08);
  --focus-ring: rgba(99, 102, 241, .35);
  --shadow: 0 1px 2px rgba(0, 0, 0, .45);
  --radius: 16px;
  --radius-sm: 10px;
  color-scheme: dark;

  /* keep Bootstrap's own rounding (default 6px) in step with the rest of the design */
  --bs-border-radius-sm: 8px;
  --bs-border-radius: 10px;
  --bs-border-radius-lg: 14px;
  --bs-border-radius-xl: var(--radius);
}

html {
  background: var(--bg-color) !important;
  background-image: none !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/*------------------------------------*\
    Bootstrap re-theme (login/setup/install/admin pages)
    Bootstrap's dark mode ships as CSS custom properties, so most components
    (.card, .table, .form-control, .navbar, focus rings, .text-bg-primary
    badges, links) pick these up automatically. .btn-primary is the one
    component whose colors Bootstrap ships pre-resolved rather than living
    off a variable, so it gets an explicit gradient override below.
\*------------------------------------*/
[data-bs-theme="dark"] {
  --bs-body-bg: var(--bg-color);
  --bs-body-color: var(--text-color);
  --bs-secondary-color: var(--muted-color);
  --bs-border-color: var(--border-color);
  --bs-border-color-translucent: var(--border-color);
  --bs-tertiary-bg: var(--card-bg);
  --bs-secondary-bg: var(--card-bg);
  --bs-emphasis-color: #ffffff;
  --bs-primary: var(--accent-1);
  --bs-primary-rgb: 99, 102, 241;
  --bs-link-color: #a5b4fc;
  --bs-link-color-rgb: 165, 180, 252;
  --bs-link-hover-color: #c7d2fe;
  --bs-link-hover-color-rgb: 199, 210, 254;
  --bs-focus-ring-color: var(--focus-ring);
  --bs-card-bg: var(--card-bg);
  --bs-card-border-color: var(--border-color);
  --bs-table-bg: var(--card-bg);
  --bs-table-border-color: var(--border-color);
  --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Keep Bootstrap screens visually identical to the public/listing screens. */
[data-bs-theme="dark"] body {
  background: var(--bg-color);
  background-image: radial-gradient(circle at 8% -10%, var(--bg-color-alt), var(--bg-color) 58%);
}

[data-bs-theme="dark"] .navbar {
  border-color: var(--border-color) !important;
  background: color-mix(in srgb, var(--bg-color) 86%, var(--accent-1)) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

[data-bs-theme="dark"] .card {
  border-color: var(--border-color);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
}

[data-bs-theme="dark"] .table {
  --bs-table-bg: var(--card-bg);
  --bs-table-color: var(--text-color);
  --bs-table-border-color: var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  border-color: var(--border-color);
  background-color: #0d1427;
  color: var(--text-color);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  border-color: var(--accent-1);
  background-color: #0d1427;
  color: var(--text-color);
  box-shadow: 0 0 0 .25rem var(--focus-ring);
}

[data-bs-theme="dark"] .btn {
  border-radius: var(--radius-sm);
  font-weight: 700;
}

[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: var(--text-color);
  --bs-btn-border-color: var(--border-color);
  --bs-btn-hover-color: var(--text-color);
  --bs-btn-hover-bg: var(--accent-soft);
  --bs-btn-hover-border-color: var(--accent-1);
}

.btn-primary {
  --bs-btn-bg: var(--accent-1);
  --bs-btn-border-color: var(--accent-1);
  --bs-btn-hover-bg: #7c7ff3;
  --bs-btn-hover-border-color: #7c7ff3;
  --bs-btn-active-bg: #4f46e5;
  --bs-btn-active-border-color: #4f46e5;
  --bs-btn-disabled-bg: var(--accent-1);
  --bs-btn-disabled-border-color: var(--accent-1);
  --bs-btn-focus-shadow-rgb: 99, 102, 241;
  background-image: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  border: none;
}

.navbar {
  background-color: var(--bg-color);
}

/*------------------------------------*\
    Brand mark (shared: Bootstrap navbar + the plain listing-page nav below)
\*------------------------------------*/
.app-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: url('/theme/logo.svg') center / cover no-repeat;
  color: transparent;
  font-size: 0;
  font-weight: 800;
  flex-shrink: 0;
}

.app-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/*------------------------------------*\
    Auth card (login / setup / install / share-password)
    A bespoke branded shell (gradient top edge, violet glow) kept as custom
    CSS on top of Bootstrap - the form controls inside it are plain
    Bootstrap (.form-label, .form-control, .btn, .alert).
\*------------------------------------*/
.auth-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 32px 28px 28px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .22);
  text-align: center;
}

.auth-card.auth-card-wide {
  max-width: 480px;
  text-align: left;
}

.auth-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 8%;
  right: 8%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-3));
}

.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin-bottom: 1.25rem;
  font-weight: 700;
  color: var(--text-color);
}

.auth-title {
  font-size: 1.5em;
  font-weight: 800;
  margin-bottom: .3rem;
  color: var(--text-color);
  line-height: 1.3;
  letter-spacing: -.025em;
}

.auth-card-wide .auth-title {
  font-size: 1.15em;
  background: none;
  -webkit-text-fill-color: initial;
  color: var(--text-color);
}

.auth-sub {
  font-size: .875em;
  color: var(--muted-color);
  margin-bottom: 1.5rem;
}

/*------------------------------------*\
    Plain nav for the file-listing pages (private/share folder views).
    Deliberately not Bootstrap: those pages load theme/style.css for the
    table/breadcrumb/filter, and already look right without another
    framework's CSS reset fighting it.
\*------------------------------------*/
.app-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--bg-color) 86%, var(--accent-1));
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  margin: -24px -24px 2rem;
}

@media (max-width: 768px) {
  .app-nav { margin: -14px -14px 1.5rem; flex-wrap: wrap; }
}

.app-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  color: var(--text-color);
  text-decoration: none;
}

.app-nav-links {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}

.app-nav-link {
  padding: .45em .85em;
  border-radius: var(--radius-sm);
  color: var(--muted-color);
  font-size: .875em;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.app-nav-link:hover,
.app-nav-link.active {
  color: var(--text-color);
  background: var(--accent-soft);
}

.app-nav-user {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.app-user-name {
  font-size: .875em;
  color: var(--muted-color);
}

.app-btn-ghost {
  padding: .5em 1em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-color);
  font-size: .8125em;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.app-btn-ghost:hover {
  border-color: var(--accent-1);
  background: var(--accent-soft);
}

.app-badge {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .2em .65em;
  border-radius: 999px;
  font-size: .75em;
  font-weight: 600;
  background: var(--accent-soft);
  color: #c7d2fe;
  border: 1px solid rgba(99, 102, 241, .35);
}

.app-badge-admin {
  background: rgba(192, 132, 252, .14);
  color: #e9d5ff;
  border-color: rgba(192, 132, 252, .4);
}

.auth-wrapper.min-vh-100 { min-height: 100svh !important; }
.auth-card .form-control { min-height: 46px; }
.auth-card .btn-primary { min-height: 46px; }
.auth-back { display: inline-block; margin-top: 1.25rem; font-size: .875rem; }
.password-input { position: relative; }
.password-input .form-control { padding-right: 6.25rem; }
.password-toggle {
  position: absolute;
  top: 50%; right: .375rem; transform: translateY(-50%);
  border: 0; border-radius: 6px; padding: .55rem .6rem;
  background: transparent; color: #c7d2fe; font: inherit; font-size: .8125rem;
  cursor: pointer;
}
.password-toggle:hover { background: var(--accent-soft); }
.password-toggle:focus-visible, .app-btn-ghost:focus-visible {
  outline: 2px solid #b1bcff; outline-offset: 2px;
}
.password-toggle[hidden] { display: none; }
.app-nav-user { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.app-user-name { overflow-wrap: anywhere; min-width: 0; }
.app-nav-user form { margin: 0; }
.admin-toolbar { display: flex; align-items: center; gap: .75rem; max-width: 560px; }
.admin-toolbar .form-control { min-height: 42px; }
[data-admin-row="user"] td { vertical-align: middle; }
@media (max-width: 575px) {
  .admin-toolbar { display: block; max-width: none; }
  .admin-toolbar .text-body-secondary { display: block; margin-top: .4rem; }
}
@media (max-width: 480px) {
  .auth-card { padding: 28px 20px 24px; }
  .app-nav { padding: .8rem 1rem; gap: .75rem; }
  .app-nav-links { order: 3; width: 100%; }
  .app-btn-ghost { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}