/* ===================================================================
   RBIH FileVault — theme v2
   Tokens taken from the RBIH brand guidelines (kosh.rbihub.in):
     Terracotta  #BA644F   (tints #C17461 #C88372, deep #A55440)
     Charcoal    #2F2F2F   (#444444 #595959)
     Ivory       #F2F0E6   (#F9F7F2 #FCFBF8)
     Sandalwood  #E4DFCE   (#E1D5BC #E7DDC9)
     Muted       #6B675B
     Olive       #6B8E23   accent · success
   Typeface: Anek Latin (brand), Inter for dense data.
   =================================================================== */

@font-face {
  font-family: 'Anek Latin';
  src: url('/static/custom/fonts/AnekLatin.woff2') format('woff2-variations'),
       url('/static/custom/fonts/AnekLatin.woff2') format('woff2');
  font-weight: 100 800;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --rb-terracotta:      #BA644F;
  --rb-terracotta-lift: #C88372;
  --rb-terracotta-mid:  #C17461;
  --rb-terracotta-deep: #A55440;
  --rb-tint:            #F6E9E4;
  --rb-paper:           #FCFBF8;
  --rb-ivory:           #F2F0E6;
  --rb-ivory-soft:      #F9F7F2;
  --rb-sandalwood:      #E4DFCE;
  --rb-sandalwood-deep: #E1D5BC;
  --rb-ink:             #2F2F2F;
  --rb-ink-2:           #444444;
  --rb-ink-3:           #595959;
  --rb-muted:           #6B675B;
  --rb-olive:           #6B8E23;

  --rb-line:      rgba(47, 47, 47, .09);
  --rb-line-warm: rgba(186, 100, 79, .16);

  --rb-display: 'Anek Latin', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --rb-data:    'Inter', 'Anek Latin', ui-sans-serif, system-ui, sans-serif;

  --rb-ease:     cubic-bezier(.22, 1, .36, 1);
  --rb-ease-out: cubic-bezier(.16, 1, .3, 1);
  --rb-shadow-sm: 0 1px 2px rgba(47,47,47,.04), 0 2px 8px rgba(165,84,64,.05);
  --rb-shadow-md: 0 2px 4px rgba(47,47,47,.04), 0 10px 30px -8px rgba(165,84,64,.13);
  --rb-shadow-lg: 0 4px 8px rgba(47,47,47,.05), 0 26px 60px -18px rgba(165,84,64,.22);

  /* map onto the theme's variable layer */
  --bs-primary:               #BA644F;
  --bs-primary-rgb:           186, 100, 79;
  --bs-primary-active:        #A55440;
  --bs-primary-light:         #F6E9E4;
  --bs-primary-inverse:       #FCFBF8;
  --bs-primary-clarity:       rgba(186, 100, 79, .22);
  --bs-primary-bg-subtle:     #F8EEEA;
  --bs-primary-border-subtle: #E3C4B9;
  --bs-primary-text-emphasis: #8A4130;

  --bs-success:        #6B8E23;
  --bs-success-active: #5C7B1E;
  --bs-success-light:  #F0F4E9;

  --bs-body-bg:        #FCFBF8;
  --bs-body-color:     #2F2F2F;
  --bs-body-color-rgb: 47, 47, 47;
  --bs-link-color:       #BA644F;
  --bs-link-hover-color: #A55440;
  --bs-component-active-bg:    #BA644F;
  --bs-component-active-color: #FCFBF8;

  --bs-gray-100: #F9F7F2;
  --bs-gray-200: #F2F0E6;
  --bs-gray-300: #E4DFCE;
  --bs-gray-400: #D2CAB4;
  --bs-gray-500: #A9A292;
  --bs-gray-600: #6B675B;
  --bs-gray-700: #595959;
  --bs-gray-800: #444444;
  --bs-gray-900: #2F2F2F;

  --bs-border-radius:    .625rem;
  --bs-border-radius-sm: .45rem;
  --bs-border-radius-lg: .9rem;
  --bs-border-radius-xl: 1.15rem;
}

[data-bs-theme=dark] {
  --rb-paper: #24221F;
  --rb-line:  rgba(252, 251, 248, .10);
  --bs-body-bg:    #1C1A18;
  --bs-body-color: #F2F0E6;
  --bs-primary:        #C88372;
  --bs-primary-rgb:    200, 131, 114;
  --bs-primary-active: #BA644F;
  --bs-primary-light:  rgba(200, 131, 114, .16);
  --bs-primary-inverse:#1C1A18;
  --bs-gray-100: #24221F;
  --bs-gray-200: #2F2F2F;
  --bs-gray-300: #3D3A35;
  --bs-gray-600: #A9A292;
  --bs-gray-700: #C9C4B8;
  --bs-gray-800: #E2DDD1;
  --bs-gray-900: #F2F0E6;
}

/* ---------- typography -------------------------------------------- */

body,
.form-label, .menu-link, .btn, .card-title,
h1, h2, h3, h4, h5, h6, .fw-bold, .fw-semibold {
  font-family: var(--rb-display);
}

body {
  font-feature-settings: "ss01" 1, "cv01" 1;
  letter-spacing: -.004em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* dense data keeps Inter — better at small sizes in tables */
.table, .table td, .table th,
code, kbd, pre, .text-monospace, input, textarea, select {
  font-family: var(--rb-data);
}

h1, h2, h3 { letter-spacing: -.026em; font-weight: 600; }

/* ---------- ambient ground ---------------------------------------- */

body {
  background-color: var(--rb-ivory);
  background-image:
    radial-gradient(1100px 620px at 12% -8%,  rgba(186, 100, 79, .10), transparent 62%),
    radial-gradient(900px 520px at 105% 8%,   rgba(228, 223, 206, .95), transparent 60%),
    linear-gradient(168deg, #F2F0E6 0%, #EEE9DA 46%, #E4DFCE 100%);
  background-attachment: fixed;
  color: var(--rb-ink);
}

[data-bs-theme=dark] body {
  background-image:
    radial-gradient(1100px 620px at 12% -8%, rgba(186, 100, 79, .20), transparent 62%),
    linear-gradient(168deg, #211F1C 0%, #1C1A18 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: -25vmax;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(38vmax 38vmax at 22% 28%, rgba(186, 100, 79, .085), transparent 65%),
    radial-gradient(32vmax 32vmax at 78% 72%, rgba(228, 223, 206, .55), transparent 65%);
  animation: rb-drift 38s var(--rb-ease) infinite alternate;
}

@keyframes rb-drift {
  from { transform: translate3d(-2.5%, -1.5%, 0) scale(1);    }
  to   { transform: translate3d( 2.5%,  1.5%, 0) scale(1.07); }
}

.d-flex.flex-column.flex-root { position: relative; z-index: 1; }

.d-flex.flex-column.flex-column-fluid.bgi-position-y-bottom::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, var(--rb-line-warm) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rb-line-warm) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
  opacity: .45;
}

/* ---------- login card -------------------------------------------- */

.bg-body.rounded.shadow-sm {
  position: relative;
  background: linear-gradient(180deg, var(--rb-paper) 0%, var(--rb-ivory-soft) 100%) !important;
  border: 1px solid var(--rb-line);
  border-radius: 20px !important;
  box-shadow: var(--rb-shadow-lg) !important;
  overflow: hidden;
  animation: rb-rise .78s var(--rb-ease-out) both;
}

.bg-body.rounded.shadow-sm::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--rb-terracotta) 22%, var(--rb-terracotta-lift) 50%, var(--rb-terracotta) 78%, transparent);
  transform: scaleX(0);
  animation: rb-filament 1.15s .18s var(--rb-ease-out) forwards;
}

@keyframes rb-filament { to { transform: scaleX(1); } }

@keyframes rb-rise {
  from { opacity: 0; transform: translate3d(0, 22px, 0) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.form.w-100 > *          { animation: rb-rise .62s var(--rb-ease-out) both; }
.form.w-100 > *:nth-child(1) { animation-delay: .10s; }
.form.w-100 > *:nth-child(2) { animation-delay: .17s; }
.form.w-100 > *:nth-child(3) { animation-delay: .24s; }
.form.w-100 > *:nth-child(4) { animation-delay: .31s; }
.form.w-100 > *:nth-child(5) { animation-delay: .38s; }
.form.w-100 > *:nth-child(6) { animation-delay: .45s; }

/* --- logo lockup: stack it, centre it, give the wordmark room --- */

.container.mb-10 .row.align-items-center {
  flex-direction: column;
  align-items: center;
  gap: 1.05rem;
  text-align: center;
}

.container.mb-10 .row.align-items-center > [class^="col-"],
.container.mb-10 .row.align-items-center > [class*=" col-"] {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
}

.logo-img {
  display: block;
  width: 100%;
  max-width: 236px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 6px 18px rgba(165, 84, 64, .16));
  animation: rb-logo 1.05s var(--rb-ease-out) both;
}

@keyframes rb-logo {
  from { opacity: 0; transform: translate3d(0, 8px, 0) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* hairline rule between mark and product name */
.container.mb-10 .row.align-items-center > [class^="col-"]:last-child::before {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  margin: 0 auto .95rem;
  background: linear-gradient(90deg, transparent, var(--rb-terracotta), transparent);
  opacity: .55;
}

h1.text-gray-900 {
  color: var(--rb-ink) !important;
  font-family: var(--rb-display);
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: -.028em;
  margin-left: 0 !important;
  text-align: center;
}

/* ---------- buttons ------------------------------------------------ */

.btn { transition: transform .28s var(--rb-ease), box-shadow .28s var(--rb-ease), background-color .2s ease; }

/* sign-in: shorter body, larger and heavier label — was 62px tall with a
   light 500-weight label, which read as a small word in a big slab */
.btn.btn-lg {
  --bs-btn-padding-y: .78rem;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-font-size: 1.125rem;
  --bs-btn-font-weight: 600;
  --bs-btn-line-height: 1.35;
  --bs-btn-border-radius: .75rem;
  letter-spacing: .008em;
}

#sign_in_submit {
  padding: .78rem 1.5rem !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  border-radius: 12px !important;
}

.btn.btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--rb-terracotta-mid) 0%, var(--rb-terracotta) 55%, var(--rb-terracotta-deep) 100%) !important;
  border: none !important;
  color: var(--rb-paper) !important;
  box-shadow: 0 1px 2px rgba(165,84,64,.26), 0 8px 22px -8px rgba(165,84,64,.52);
}

.btn.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(252,251,248,.28) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform .72s var(--rb-ease-out);
}

.btn.btn-primary:hover::after { transform: translateX(120%); }

.btn.btn-primary:hover:not(.btn-active) {
  background: linear-gradient(180deg, var(--rb-terracotta) 0%, var(--rb-terracotta-deep) 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(165,84,64,.24), 0 16px 34px -10px rgba(165,84,64,.60);
}

.btn.btn-primary:active { transform: translateY(0) scale(.988); }

.btn.btn-light, .btn.btn-secondary {
  background-color: var(--rb-ivory) !important;
  border: 1px solid var(--rb-line) !important;
  color: var(--rb-ink-3) !important;
}

.btn.btn-light:hover, .btn.btn-secondary:hover {
  background-color: var(--rb-sandalwood) !important;
  color: var(--rb-ink) !important;
  transform: translateY(-1px);
}

/* ---------- inputs ------------------------------------------------- */

.form-control {
  border-radius: 12px;
  transition: border-color .24s var(--rb-ease), box-shadow .3s var(--rb-ease), background-color .24s ease;
}

.form-control-solid {
  background-color: var(--rb-ivory-soft) !important;
  border: 1px solid var(--rb-line) !important;
  color: var(--rb-ink) !important;
}

.form-control-solid:hover:not(:focus) { background-color: var(--rb-ivory) !important; }

.form-control-solid:focus,
.form-control-solid:active {
  background-color: var(--rb-paper) !important;
  border-color: var(--rb-terracotta) !important;
  box-shadow: 0 0 0 4px rgba(186, 100, 79, .13) !important;
}

.form-control::placeholder { color: var(--rb-muted); opacity: .75; }

/* ---------- tables / cards / chrome -------------------------------- */

.card {
  background: var(--rb-paper);
  border: 1px solid var(--rb-line);
  border-radius: 16px;
  box-shadow: var(--rb-shadow-md);
}

.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--rb-line) !important;
  min-height: 66px;
}

.card-header.bg-light {
  background: linear-gradient(180deg, var(--rb-ivory) 0%, #EDE8DA 100%) !important;
}

.card-toolbar .btn { border-radius: 10px; }

.table > thead th {
  color: var(--rb-muted) !important;
  font-family: var(--rb-display);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .085em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rb-line) !important;
}

.table tbody tr { transition: background-color .2s ease, box-shadow .24s var(--rb-ease); }

.table tbody tr:hover {
  --bs-table-bg-state: transparent;
  --rb-glow: .085;
  background-color: transparent !important;
  background-image: var(--rb-row-glow-neutral);
  box-shadow: none !important;
}

.table > tbody > tr > td { border-color: var(--rb-line) !important; }

.menu.menu-sub-dropdown {
  background: var(--rb-paper) !important;
  border: 1px solid var(--rb-line);
  border-radius: 14px;
  box-shadow: var(--rb-shadow-md) !important;
  animation: rb-pop .22s var(--rb-ease-out) both;
}

@keyframes rb-pop {
  from { opacity: 0; transform: translate3d(0, -6px, 0) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.modal-content {
  background: var(--rb-paper);
  border: 1px solid var(--rb-line);
  border-radius: 18px;
  box-shadow: var(--rb-shadow-lg);
  animation: rb-rise .42s var(--rb-ease-out) both;
}

.modal-header { border-bottom: 1px solid var(--rb-line) !important; }
.separator    { border-color: var(--rb-line) !important; }

.menu-link {
  border-radius: 10px;
  transition: background-color .2s ease, color .2s ease, transform .24s var(--rb-ease);
}

.menu-link:hover { transform: translateX(2px); }

.menu-item .menu-link.active {
  background-color: var(--rb-tint) !important;
  color: var(--rb-terracotta-deep) !important;
  font-weight: 600;
}

.btn.btn-active-light-primary:hover,
.btn.btn-active-light-primary.active {
  background-color: var(--rb-tint) !important;
  color: var(--rb-terracotta-deep) !important;
}

.badge-primary, .badge.badge-light-primary {
  background-color: var(--rb-tint) !important;
  color: var(--rb-terracotta-deep) !important;
  border-radius: 999px;
}

a { transition: color .18s ease; }

* { scrollbar-color: var(--rb-sandalwood) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--rb-sandalwood);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--rb-terracotta); background-clip: content-box; }

::selection { background: rgba(186, 100, 79, .20); color: var(--rb-ink); }
:focus-visible { outline: 2px solid var(--rb-terracotta); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  body::before { animation: none; }
}

/* ===================================================================
   v3 — post-login shell
   Fixes: near-black sidebar/header (#0B0C10 / #0F1014), the white-on-
   white active nav item (bg #F9F9F9 + white label), blue file icons
   (--bs-text-primary #0069E0), and the theme dropdown -> slider.
   =================================================================== */

:root {
  /* the shell was dark regardless of theme — bring it into the palette */
  --bs-app-bg-color:                 #FCFBF8;
  --bs-app-sidebar-base-bg-color:    #F2F0E6;
  --bs-app-sidebar-base-border-end:  1px solid rgba(47, 47, 47, .10);
  --bs-app-header-base-bg-color:     #FCFBF8;
  --bs-app-header-minimize-bg-color: rgba(252, 251, 248, .82);

  /* this was the blue on the folder / file icons */
  --bs-text-primary:   #BA644F;
  --bs-text-secondary: #595959;
  --bs-text-dark:      #2F2F2F;
  --bs-text-muted:     #6B675B;
  --bs-text-success:   #6B8E23;

  /* active nav item was white-on-white — now terracotta with ivory text */
  --bs-menu-link-bg-color-active: #BA644F;
  --bs-menu-link-color-active:    #FCFBF8;
  --bs-menu-link-bg-color-here:   #BA644F;
  --bs-menu-link-color-here:      #FCFBF8;
  --bs-menu-link-bg-color-hover:  #E4DFCE;
  --bs-menu-link-color-hover:     #2F2F2F;
  --bs-menu-link-bg-color-show:   #E4DFCE;
  --bs-menu-link-color-show:      #2F2F2F;
}

[data-bs-theme=dark] {
  --bs-app-bg-color:                 #1C1A18;
  --bs-app-sidebar-base-bg-color:    #24221F;
  --bs-app-sidebar-base-border-end:  1px solid rgba(252, 251, 248, .10);
  --bs-app-header-base-bg-color:     #1C1A18;
  --bs-app-header-minimize-bg-color: rgba(28, 26, 24, .82);
  --bs-text-primary:   #C88372;
  --bs-text-muted:     #A9A292;
  --bs-menu-link-bg-color-active: #BA644F;
  --bs-menu-link-color-active:    #FCFBF8;
  --bs-menu-link-bg-color-hover:  #3D3A35;
  --bs-menu-link-color-hover:     #F2F0E6;
}

/* ---------- left column -------------------------------------------- */

.app-sidebar {
  background: linear-gradient(180deg, var(--rb-ivory) 0%, #EEE9DA 100%) !important;
  border-right: 1px solid var(--rb-line) !important;
  box-shadow: inset -1px 0 0 rgba(252, 251, 248, .5);
}

[data-bs-theme=dark] .app-sidebar {
  background: linear-gradient(180deg, #24221F 0%, #1F1D1B 100%) !important;
}

.app-sidebar-logo img { max-height: 34px; width: auto; }

.text-sidebar {
  color: var(--rb-ink) !important;
  font-family: var(--rb-display);
  letter-spacing: -.018em;
}

[data-bs-theme=dark] .text-sidebar { color: var(--rb-ivory) !important; }

/* nav items: readable in every state */
.app-sidebar .menu-link {
  color: var(--rb-ink-3) !important;
  font-weight: 500;
  padding-top: .62rem;
  padding-bottom: .62rem;
}

.app-sidebar .menu-link .menu-icon i { color: var(--rb-muted) !important; }

.app-sidebar .menu-link:hover {
  background-color: var(--rb-sandalwood) !important;
  color: var(--rb-ink) !important;
}

.app-sidebar .menu-link:hover .menu-icon i { color: var(--rb-terracotta) !important; }

.app-sidebar .menu-item .menu-link.active {
  background: linear-gradient(180deg, var(--rb-terracotta-mid) 0%, var(--rb-terracotta) 100%) !important;
  color: var(--rb-paper) !important;
  font-weight: 600;
  box-shadow: 0 2px 10px -3px rgba(165, 84, 64, .6);
}

.app-sidebar .menu-item .menu-link.active .menu-title,
.app-sidebar .menu-item .menu-link.active .menu-icon i {
  color: var(--rb-paper) !important;
}

[data-bs-theme=dark] .app-sidebar .menu-link { color: var(--rb-ivory) !important; }

/* ---------- top row ------------------------------------------------ */

.app-header {
  background: rgba(252, 251, 248, .86) !important;
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--rb-line);
}

[data-bs-theme=dark] .app-header {
  background: rgba(28, 26, 24, .86) !important;
  border-bottom-color: rgba(252, 251, 248, .10);
}

.app-header .logo-img,
.app-header img[alt="Logo"] { max-height: 38px; width: auto; }

/* ---------- icons --------------------------------------------------- */

.ki-duotone.text-primary,
i.text-primary,
.text-primary > i { color: var(--rb-terracotta) !important; }

.ki-folder.text-primary,
.ki-folder-up.text-primary,
.ki-file.text-primary,
.ki-file-up.text-primary,
.ki-home.text-primary { color: var(--rb-terracotta) !important; }

/* ---------- day / night: dropdown -> animated segmented slider ------ */

[data-kt-element="theme-mode-menu"] {
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  width: auto !important;
  min-width: 246px !important;
  padding: 5px !important;
  background: var(--rb-ivory) !important;
  border: 1px solid var(--rb-line);
  border-radius: 999px !important;
  box-shadow: var(--rb-shadow-md) !important;
  overflow: hidden;
}

[data-bs-theme=dark] [data-kt-element="theme-mode-menu"] { background: #2F2F2F !important; }

/* the pill that slides */
[data-kt-element="theme-mode-menu"]::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc((100% - 10px) / 3);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--rb-terracotta-mid) 0%, var(--rb-terracotta) 100%);
  box-shadow: 0 2px 12px -2px rgba(165, 84, 64, .65);
  transform: translateX(0);
  transition: transform .44s var(--rb-ease-out);
}

[data-kt-element="theme-mode-menu"]:has(.menu-item:nth-child(2) .menu-link.active)::before { transform: translateX(100%); }
[data-kt-element="theme-mode-menu"]:has(.menu-item:nth-child(3) .menu-link.active)::before { transform: translateX(200%); }

[data-kt-element="theme-mode-menu"] .menu-item {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  padding: 0 !important;
  margin: 0 !important;
}

[data-kt-element="theme-mode-menu"] .menu-link {
  justify-content: center;
  padding: .46rem .4rem !important;
  border-radius: 999px !important;
  background: transparent !important;
  font-size: .875rem;
  font-weight: 600;
  color: var(--rb-muted) !important;
  transition: color .3s var(--rb-ease);
}

/* label only — icons make the control cramped at this width */
[data-kt-element="theme-mode-menu"] .menu-icon { display: none !important; }

[data-kt-element="theme-mode-menu"] .menu-link:hover { color: var(--rb-ink) !important; }

[data-kt-element="theme-mode-menu"] .menu-link.active,
[data-kt-element="theme-mode-menu"] .menu-link.active .menu-title {
  color: var(--rb-paper) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* (v3 sun/moon hover rules removed in v4 — they used scale() on an inline
   element, which is what made the header row jump. See the v4 block.) */

@media (prefers-reduced-motion: reduce) {
  [data-kt-element="theme-mode-menu"]::before { transition: none; }
}

/* The bundle declares these on [data-bs-theme=light|dark] (specificity 0,1,0).
   :root ties and wins on source order, but mirror the light block explicitly
   so the fix survives any future reordering of the stylesheets. */
[data-bs-theme=light] {
  --bs-app-bg-color:                 #FCFBF8;
  --bs-app-sidebar-base-bg-color:    #F2F0E6;
  --bs-app-sidebar-base-border-end:  1px solid rgba(47, 47, 47, .10);
  --bs-app-header-base-bg-color:     #FCFBF8;
  --bs-app-header-minimize-bg-color: rgba(252, 251, 248, .82);
  --bs-text-primary:   #BA644F;
  --bs-text-secondary: #595959;
  --bs-text-dark:      #2F2F2F;
  --bs-text-muted:     #6B675B;
  --bs-text-success:   #6B8E23;
  --bs-menu-link-bg-color-active: #BA644F;
  --bs-menu-link-color-active:    #FCFBF8;
  --bs-menu-link-bg-color-here:   #BA644F;
  --bs-menu-link-color-here:      #FCFBF8;
  --bs-menu-link-bg-color-hover:  #E4DFCE;
  --bs-menu-link-color-hover:     #2F2F2F;
  --bs-menu-link-bg-color-show:   #E4DFCE;
  --bs-menu-link-color-show:      #2F2F2F;
  --bs-primary:        #BA644F;
  --bs-primary-active: #A55440;
  --bs-body-bg:        #FCFBF8;
  --bs-body-color:     #2F2F2F;
}

/* ===================================================================
   v4 — fixes
   1. sun/moon hover shifted the whole header row: transform was being
      applied to <i>, a non-replaced INLINE element, where transforms
      are spec-undefined and browsers reflow the line box.
   2. segmented slider: pill and labels off-centre.
   3. card header bars -> sandalwood.
   4. version footer removed.
   =================================================================== */

/* ---- 1. theme trigger: pin the box, then rotate inside it ---------- */

.theme-switcher-fix, /* no-op hook, keeps this block greppable */
a[data-kt-menu-trigger][data-kt-menu-attach="parent"].btn-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 1;
  overflow: hidden;
}

.theme-light-show,
.theme-dark-show {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
  transition: transform .45s var(--rb-ease-out), color .25s ease;
}

/* keep the display:none toggle authoritative */
[data-bs-theme=light] .theme-dark-show,
[data-bs-theme=dark]  .theme-light-show { display: none !important; }

/* rotate only — no scale, nothing that can nudge a baseline */
a[data-kt-menu-trigger]:hover .theme-light-show { transform: rotate(42deg); }
a[data-kt-menu-trigger]:hover .theme-dark-show  { transform: rotate(-16deg); }

/* ---- 2. segmented slider: true centring --------------------------- */

[data-kt-element="theme-mode-menu"] {
  box-sizing: border-box;
  border: none !important;               /* border removed from the box
                                            model so the pill maths is exact */
  box-shadow: 0 0 0 1px var(--rb-line), var(--rb-shadow-md) !important;
  align-items: center;
}

[data-kt-element="theme-mode-menu"] .menu-item {
  flex: 1 1 0 !important;
  min-width: 0;
  display: flex;
}

[data-kt-element="theme-mode-menu"] .menu-link {
  display: flex !important;
  flex: 1 1 auto;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  line-height: 1.25;
  min-height: 34px;
  white-space: nowrap;
}

[data-kt-element="theme-mode-menu"] .menu-link .menu-title {
  flex: 0 0 auto !important;
  width: auto !important;
  text-align: center;
  margin: 0 !important;
  padding: 0 !important;
}

/* pill: inset from all four sides, exact third of the inner width */
[data-kt-element="theme-mode-menu"]::before {
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc((100% - 10px) / 3);
}

/* ---- 3. card header bars -> sandalwood ---------------------------- */

.card-header,
.card-header.bg-light {
  background: var(--rb-sandalwood-deep) !important;
  border-bottom: 1px solid rgba(47, 47, 47, .10) !important;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  min-height: 60px;
}

/* nested cards sit inside a parent card — slightly tighter */
.card .card .card-header,
.card .card .card-header.bg-light {
  min-height: 52px;
  border-top-left-radius: 11px;
  border-top-right-radius: 11px;
}

.card-header .card-title,
.card-header .section-title,
.card-header .section-title-inner {
  color: var(--rb-ink) !important;
  font-family: var(--rb-display);
  margin-bottom: 0;
}

[data-bs-theme=dark] .card-header,
[data-bs-theme=dark] .card-header.bg-light {
  background: #3D3A35 !important;
  border-bottom-color: rgba(252, 251, 248, .10) !important;
}

[data-bs-theme=dark] .card-header .card-title,
[data-bs-theme=dark] .card-header .section-title,
[data-bs-theme=dark] .card-header .section-title-inner {
  color: var(--rb-ivory) !important;
}

/* ---- 4. drop the version footer ----------------------------------- */

#kt_app_footer,
.app-footer { display: none !important; }

/* ===================================================================
   v5 — dark locked, switcher removed
   The app is now forced to dark via data-bs-theme-mode="dark" on <html>
   (common/base.html + common/baselogin.html). That attribute outranks
   localStorage in KTThemeMode.getMode(), so a saved "light" preference
   cannot win. The switcher stays in the DOM (the JS queries it) but is
   hidden.

   Several --rb-* tokens had no dark value, so light surfaces and dark
   text were leaking through in dark mode — that was the unreadable
   text. The dark palette is completed below.
   =================================================================== */

/* ---- hide the day/night control ----------------------------------- */

[data-kt-element="theme-mode-menu"] { display: none !important; }
a[data-kt-menu-trigger].btn-icon:has(.theme-light-show) { display: none !important; }
a[data-kt-menu-trigger].btn-icon:has(.theme-dark-show)  { display: none !important; }
/* fallback for browsers without :has() — at worst an empty button remains */
.theme-light-show, .theme-dark-show { display: none !important; }

/* ---- complete the dark palette ------------------------------------ */

[data-bs-theme=dark] {
  --rb-paper:           #24221F;
  --rb-ivory:           #2A2724;
  --rb-ivory-soft:      #201E1B;
  --rb-sandalwood:      #3D3A35;
  --rb-sandalwood-deep: #E1D5BC;   /* kept — the card header bars */
  --rb-tint:            rgba(200, 131, 114, .18);

  --rb-ink:    #F2F0E6;
  --rb-ink-2:  #E2DDD1;
  --rb-ink-3:  #C9C4B8;
  --rb-muted:  #A9A292;

  --rb-line:      rgba(252, 251, 248, .10);
  --rb-line-warm: rgba(200, 131, 114, .16);

  /* warm shadows vanish on dark ground — go darker instead */
  --rb-shadow-sm: 0 1px 2px rgba(0,0,0,.30), 0 2px 8px rgba(0,0,0,.24);
  --rb-shadow-md: 0 2px 4px rgba(0,0,0,.34), 0 10px 30px -8px rgba(0,0,0,.46);
  --rb-shadow-lg: 0 4px 8px rgba(0,0,0,.38), 0 26px 60px -18px rgba(0,0,0,.62);
}

/* ---- surfaces that referenced the missing tokens ------------------ */

[data-bs-theme=dark] .bg-body.rounded.shadow-sm {
  background: linear-gradient(180deg, #26241F 0%, #201E1B 100%) !important;
  border-color: rgba(252, 251, 248, .10);
}

[data-bs-theme=dark] h1.text-gray-900 { color: var(--rb-ink) !important; }

[data-bs-theme=dark] .form-control-solid {
  background-color: #201E1B !important;
  border-color: rgba(252, 251, 248, .12) !important;
  color: var(--rb-ink) !important;
}

[data-bs-theme=dark] .form-control-solid:hover:not(:focus) { background-color: #262320 !important; }

[data-bs-theme=dark] .form-control-solid:focus,
[data-bs-theme=dark] .form-control-solid:active {
  background-color: #2A2724 !important;
  border-color: var(--rb-terracotta) !important;
}

[data-bs-theme=dark] .form-control::placeholder { color: var(--rb-muted); }

[data-bs-theme=dark] .btn.btn-light,
[data-bs-theme=dark] .btn.btn-secondary {
  background-color: #2A2724 !important;
  border-color: rgba(252, 251, 248, .12) !important;
  color: var(--rb-ink-3) !important;
}

[data-bs-theme=dark] .btn.btn-light:hover,
[data-bs-theme=dark] .btn.btn-secondary:hover {
  background-color: #3D3A35 !important;
  color: var(--rb-ink) !important;
}

[data-bs-theme=dark] .table > thead th { color: var(--rb-muted) !important; }
[data-bs-theme=dark] .table,
[data-bs-theme=dark] .table td { color: var(--rb-ink-2); }
[data-bs-theme=dark] .table tbody tr:hover { --rb-glow: .095; }

[data-bs-theme=dark] .card { background: var(--rb-paper); border-color: rgba(252, 251, 248, .10); }

/* ---- the sandalwood bars, kept in dark ---------------------------- */

[data-bs-theme=dark] .card-header,
[data-bs-theme=dark] .card-header.bg-light {
  background: var(--rb-sandalwood-deep) !important;   /* #E1D5BC */
  border-bottom: 1px solid rgba(47, 47, 47, .18) !important;
}

[data-bs-theme=dark] .card-header .card-title,
[data-bs-theme=dark] .card-header .section-title,
[data-bs-theme=dark] .card-header .section-title-inner {
  color: #2F2F2F !important;                          /* charcoal on sandalwood */
}

/* ---- misc text that was inheriting a light-mode colour ------------ */

[data-bs-theme=dark] .text-gray-900,
[data-bs-theme=dark] .text-gray-800 { color: var(--rb-ink) !important; }
[data-bs-theme=dark] .text-gray-700 { color: var(--rb-ink-3) !important; }
[data-bs-theme=dark] .text-gray-600,
[data-bs-theme=dark] .text-muted    { color: var(--rb-muted) !important; }
[data-bs-theme=dark] .readonly-input,
[data-bs-theme=dark] .form-control-plaintext { color: var(--rb-ink-2) !important; }
[data-bs-theme=dark] .modal-content { background: var(--rb-paper); border-color: rgba(252,251,248,.10); }
[data-bs-theme=dark] .separator { border-color: rgba(252, 251, 248, .10) !important; }

/* ===================================================================
   v6 — kill the remaining blue, without adding more terracotta
   Two separate causes:
     a) Bootstrap 5.3 paints <a> with rgba(var(--bs-link-color-rgb),..),
        NOT var(--bs-link-color) — so the earlier override was inert and
        the bundle's dark value 31,135,255 won.
     b) six rules hardcode #0069e0 with no variable to override.
   Colours from the brand guidelines:
     Sandalwood #E1D5BC -> links / breadcrumb  (neutral, no new hue)
     Olive      #6B8E23 -> selection           ("Accent · approval")
   =================================================================== */

:root {
  --bs-link-color-rgb:       225, 213, 188;   /* sandalwood #E1D5BC */
  --bs-link-hover-color-rgb: 242, 240, 230;   /* ivory      #F2F0E6 */
}

[data-bs-theme=light] {
  --bs-link-color-rgb:       107, 103, 91;    /* muted  #6B675B */
  --bs-link-hover-color-rgb: 47, 47, 47;      /* ink    #2F2F2F */
}

[data-bs-theme=dark] {
  --bs-link-color-rgb:       225, 213, 188;
  --bs-link-hover-color-rgb: 242, 240, 230;
}

a:hover { text-decoration: underline; text-underline-offset: .18em; }

/* ---- breadcrumb: Home > … ----------------------------------------- */

[data-kt-filemanager-table-nav-bar="base"] {
  background: rgba(252, 251, 248, .06) !important;
  border: 1px solid var(--rb-line);
  color: var(--rb-ink-2) !important;
}

[data-kt-filemanager-table-nav-bar="base"] a {
  color: var(--rb-sandalwood-deep) !important;   /* #E1D5BC */
  font-weight: 500;
}

[data-kt-filemanager-table-nav-bar="base"] a:hover {
  color: var(--rb-ink) !important;
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* current folder — the non-link crumb — reads as "you are here" */
[data-kt-filemanager-table-nav-bar="base"] span {
  color: var(--rb-ink) !important;
  font-weight: 600;
}

/* chevrons + home icon were terracotta; quiet them down */
[data-kt-filemanager-table-nav-bar="base"] .ki-home,
[data-kt-filemanager-table-nav-bar="base"] .ki-right,
[data-kt-filemanager-table-nav-bar="base"] i.text-primary {
  color: var(--rb-muted) !important;
}

/* ---- selection: checkboxes / radios / range ----------------------- */

.form-check-input {
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .24s var(--rb-ease);
}

.separator.separator-content.border-primary::after,
.separator.separator-content.border-primary::before {
  border-color: var(--rb-line) !important;
}


/* ===================================================================
   v9 — selection moves to sandalwood.

   Why: #444444 is an inert colour. On the #24221F card ground it sat
   only ~2 stops off the surface, so a *checked* box read as a disabled
   one, and the #EB9087 hairline round it was the only thing saying
   "selected" — a pink edge floating on grey, in a palette that has no
   other pink. Nothing else in the UI used either hue.

   Sandalwood #E1D5BC is already the app's second surface (every card
   header band), so selection now speaks a colour the page already
   speaks. It is also the only move that inverts: a light warm chip on
   a dark warm ground reads as ON instantly, from across the row, with
   no border needed to explain it.

     fill   #E1D5BC  sandalwood
     tick   #2F2F2F  ink        (~11.4:1 on the fill)
     wash   sandalwood @ 10%    (row highlight, same hue as the box)

   The tick/dash/dot glyphs are Bootstrap's own, re-inked — they ship
   white, which would vanish on a light fill. They come through
   --bs-form-check-bg-image, so no !important is needed on them.
   =================================================================== */

:root {
  --rb-select:      #E1D5BC;
  --rb-select-lift: #EDE3CD;
  --rb-select-edge: #D4C4A4;
  --rb-select-ink:  #2F2F2F;
}

/* checked / indeterminate: sandalwood chip, ink glyph */
.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate,
.form-check.form-check-solid .form-check-input:checked,
.form-check.form-check-solid .form-check-input[type=checkbox]:indeterminate {
  background-color: var(--rb-select) !important;
  border-color: var(--rb-select) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28), 0 0 0 1px rgba(47, 47, 47, .10) inset;
}

.form-check-input:checked[type=checkbox]            { --bs-form-check-bg-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='%232F2F2F'/%3e%3c/svg%3e"); }
.form-check-input[type=checkbox]:indeterminate      { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%232F2F2F' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e"); }
.form-check-input:checked[type=radio]               { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%232F2F2F'/%3e%3c/svg%3e"); }

/* the chip lands rather than just appearing */
.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
  animation: rb-check .34s var(--rb-ease-out);
}

@keyframes rb-check {
  0%   { transform: scale(.82); }
  55%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}

.form-check-input:checked:hover,
.form-check-input[type=checkbox]:indeterminate:hover {
  background-color: var(--rb-select-lift) !important;
  border-color: var(--rb-select-lift) !important;
}

/* unchecked: a quiet ivory hairline on the dark ground, nothing more */
.form-check-input:not(:checked):not(:indeterminate),
.form-check.form-check-solid .form-check-input:not(:checked):not(:indeterminate) {
  background-color: rgba(252, 251, 248, .035) !important;
  border-color: rgba(252, 251, 248, .20) !important;
  box-shadow: none;
}

.form-check-input:not(:checked):not(:indeterminate):hover {
  background-color: rgba(225, 213, 188, .10) !important;
  border-color: rgba(225, 213, 188, .55) !important;
}

.form-check-input:focus {
  border-color: var(--rb-select-edge) !important;
  box-shadow: 0 0 0 4px rgba(225, 213, 188, .20) !important;
}

.form-check-input:checked:focus {
  box-shadow: 0 0 0 4px rgba(225, 213, 188, .24),
              0 1px 3px rgba(0, 0, 0, .28) !important;
}

/* range thumb is an action control, not a selection — terracotta */
/* Toggles are a different act from selection: a switch turns a *setting*
   on, so it takes the action colour (terracotta) and keeps its white
   knob. Sandalwood is reserved for "this row is picked". Also opted out
   of the check-pop — scaling a 3.25rem pill reads as a wobble, not a
   press; the switch already animates its knob across. */
.form-switch .form-check-input:checked {
  background-color: var(--rb-terracotta) !important;
  border-color: var(--rb-terracotta) !important;
  box-shadow: none;
  animation: none;
}

.form-switch .form-check-input:checked:hover {
  background-color: var(--rb-terracotta-lift) !important;
  border-color: var(--rb-terracotta-lift) !important;
}

.form-switch .form-check-input:focus {
  box-shadow: 0 0 0 4px rgba(186, 100, 79, .22) !important;
}

.form-range::-webkit-slider-thumb { background-color: var(--rb-terracotta) !important; }
.form-range::-moz-range-thumb     { background-color: var(--rb-terracotta) !important; }

/* ===================================================================
   v10 — the selection bar becomes a directional glow.

   The flat band was the problem, not the hue. A uniform 10% wash over
   #24221F lands on #37342F — a dead brown-grey that reads as "this row
   is disabled", and it ran the full width at one intensity, so it had
   no focal point and no relationship to the thing being selected.

   It is now a gradient whose bright core sits over the FILENAME and
   dissolves to nothing well before the right edge, so the light points
   at what it is highlighting instead of just tinting a strip.

   Geometry (measured off the real table, as % of row width):
       0.8%  checkbox        4.6%  folder icon
       6.6%  filename starts        ~23%  longest current name ends
      54%    Size col        61-72%  Last Modified
   So: kept deliberately low through the icon, ramps up as the name
   begins, plateaus across it, gone by 80% — the Size and Last Modified
   columns sit on clean ground, exactly as you described.

   Peak intensity is --rb-glow, one number, ratios below are relative
   to it. It is registered with @property so it can be *transitioned* —
   a raw gradient can't animate, but a registered number can, so the
   glow now fades in on hover instead of snapping.

   Why .34 and not the .70-.75 you suggested: the table text in dark is
   #E2DDD1. Measured over this ground, sandalwood at
       .34 -> 4.6:1   (passes AA for body text)
       .42 -> 3.8:1
       .70 -> 2.2:1   (filenames become genuinely hard to read)
   .34 is the brightest sandalwood that keeps every filename legible —
   3.4x what was there before. The terracotta folder icons collapse to
   ~1.0:1 against a mid-alpha sandalwood, which is the other reason the
   ramp starts *after* the icon rather than under it.
   =================================================================== */

@property --rb-glow {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

:root {
  --rb-glow: 0;

  /* sandalwood glow — selection */
  --rb-row-glow: linear-gradient(90deg,
    rgba(225, 213, 188, calc(var(--rb-glow) * .18))   0%,
    rgba(225, 213, 188, calc(var(--rb-glow) * .26))   2.5%,
    rgba(225, 213, 188, calc(var(--rb-glow) * .41))   5%,
    rgba(225, 213, 188, calc(var(--rb-glow) * .88))   8%,
    rgba(225, 213, 188, var(--rb-glow))              12%,
    rgba(225, 213, 188, var(--rb-glow))              25%,
    rgba(225, 213, 188, calc(var(--rb-glow) * .79))  33%,
    rgba(225, 213, 188, calc(var(--rb-glow) * .53))  43%,
    rgba(225, 213, 188, calc(var(--rb-glow) * .26))  55%,
    rgba(225, 213, 188, calc(var(--rb-glow) * .10))  67%,
    rgba(225, 213, 188, 0)                           80%);

  /* same shape, neutral — plain hover, so hover doesn't pre-announce
     selection but still speaks the same visual language */
  --rb-row-glow-neutral: linear-gradient(90deg,
    rgba(252, 251, 248, calc(var(--rb-glow) * .18))   0%,
    rgba(252, 251, 248, calc(var(--rb-glow) * .41))   5%,
    rgba(252, 251, 248, var(--rb-glow))              12%,
    rgba(252, 251, 248, var(--rb-glow))              25%,
    rgba(252, 251, 248, calc(var(--rb-glow) * .53))  43%,
    rgba(252, 251, 248, calc(var(--rb-glow) * .18))  62%,
    rgba(252, 251, 248, 0)                           74%);
}

.table tbody tr {
  transition: --rb-glow .22s var(--rb-ease), box-shadow .24s var(--rb-ease);
}

/* Bootstrap 5.3 paints every cell with `box-shadow: inset 0 0 0 9999px
   var(--bs-table-bg-state,...)`, which covers anything set on the <tr>.
   Neutralising bg-state lets the row's own gradient through — a gradient
   cannot go through bg-state, that slot only accepts a flat colour. */
.table tbody tr:has(.form-check-input:checked) {
  --bs-table-bg-state: transparent;
  --rb-glow: .34;
  background-color: transparent !important;
  background-image: var(--rb-row-glow);
  box-shadow: none !important;
}

/* hovering a selected row spreads the light further right rather than
   burning it brighter — keeps the filename above 4.5:1 either way */
.table tbody tr:has(.form-check-input:checked):hover {
  --rb-glow: .37;
  background-image: linear-gradient(90deg,
    rgba(225, 213, 188, calc(var(--rb-glow) * .18))   0%,
    rgba(225, 213, 188, calc(var(--rb-glow) * .26))   2.5%,
    rgba(225, 213, 188, calc(var(--rb-glow) * .41))   5%,
    rgba(225, 213, 188, calc(var(--rb-glow) * .88))   8%,
    rgba(225, 213, 188, var(--rb-glow))              12%,
    rgba(225, 213, 188, var(--rb-glow))              28%,
    rgba(225, 213, 188, calc(var(--rb-glow) * .82))  38%,
    rgba(225, 213, 188, calc(var(--rb-glow) * .58))  50%,
    rgba(225, 213, 188, calc(var(--rb-glow) * .30))  64%,
    rgba(225, 213, 188, calc(var(--rb-glow) * .12))  78%,
    rgba(225, 213, 188, 0)                           92%);
}