/* =========================================================================
   L.I.F.E. Dark Corporate Theme — File Browser custom.css
   Built against the actual compiled stylesheet (index-CErZX58q.css).
   Palette: Black #0b0b0c | Ivory #f2f0e6 | Signal Red #e2001a
   Scope: forced everywhere — applies to :root AND :root.dark so a
   user's personal light/dark preference can't revert the look.
   ========================================================================= */

:root {
  --life-black:      #0b0b0c;
  --life-panel:       #17171a;
  --life-panel-2:     #1f1f23;
  --life-ivory:       #f2f0e6;
  --life-ivory-dim:   rgba(242, 240, 230, 0.65);
  --life-red:         #e2001a;
  --life-red-hover:   #ff2436;
  --life-border:      #2a2a2e;
}

/* -------------------------------------------------------------------------
   1. CORE VARIABLE OVERRIDES (forced on both light and dark root classes)
   Everything below reads from File Browser's own --background,
   --surfacePrimary, --textPrimary, etc. Overriding them here recolors
   headers, nav, cards, listing rows, search, and login in one pass —
   instead of chasing each selector individually. Applying this to both
   :root and :root.dark means even a user who has personally selected
   "light" in their profile settings still sees this theme, not the
   original white/blue look.
   ------------------------------------------------------------------------- */
:root,
:root.dark {
  --background:       var(--life-black);
  --surfacePrimary:   var(--life-panel);
  --surfaceSecondary: var(--life-panel-2);
  --textPrimary:      var(--life-ivory-dim);
  --textSecondary:    var(--life-ivory);
  --divider:          rgba(226, 0, 26, 0.15);
  --borderPrimary:    var(--life-border);
  --borderSecondary:  rgba(226, 0, 26, 0.25);
  --hover:            rgba(226, 0, 26, 0.12);
  --action:           var(--life-ivory);

  /* Accent color used for buttons, selected items, active nav,
     links, shell prompt icon, share links, etc. */
  --blue:             var(--life-red);
  --dark-blue:        var(--life-red-hover);

  /* File-type icon colors — unified to theme red instead of the
     default rainbow (audio/image/video/etc all had separate colors). */
  --icon-blue:        var(--life-red);
  --icon-red:         var(--life-red);
  --icon-orange:      var(--life-red);
  --icon-yellow:      var(--life-red);
  --icon-green:       var(--life-red);
  --icon-violet:      var(--life-red);
}

/* -------------------------------------------------------------------------
   2. HARDCODED-COLOR OVERRIDES
   A few elements don't use variables at all — these need direct rules.
   ------------------------------------------------------------------------- */

/* Top loading progress bar: hardcoded #40c4ff in the source */
.progress div {
  background-color: var(--life-red) !important;
}

/* -------------------------------------------------------------------------
   3. BACKGROUND IMAGE — login page + main app canvas
   #login and body both set solid backgrounds via variables above, so we
   override those specific rules directly with !important to add the image.
   Path is relative to the branding folder, e.g.
   /path/to/branding/img/background.png
   ------------------------------------------------------------------------- */
html,
body,
#login {
  background-image:
    linear-gradient(rgba(11, 11, 12, 0.86), rgba(11, 11, 12, 0.86)),
    url("img/background.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* -------------------------------------------------------------------------
   4. LOGO on login page
   Default rule is #login img{width:4em;height:4em} — a FIXED size, so
   max-width alone never took effect. Overriding width/height directly.
   4x the original 4em = 16em.
   ------------------------------------------------------------------------- */
#login img {
  width: 16em !important;
  height: 16em !important;
  filter: drop-shadow(0 0 14px rgba(226, 0, 26, 0.35));
}

/* -------------------------------------------------------------------------
   5. CHECKBOXES / RADIOS
   File Browser doesn't style these at all — the blue is the browser's
   native default checkbox color. accent-color overrides it directly.
   ------------------------------------------------------------------------- */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--life-red);
}

/* -------------------------------------------------------------------------
   5. BUTTON POLISH
   Color already comes from --blue override above; this just refines
   shape/motion so it doesn't look like a re-skinned default.
   ------------------------------------------------------------------------- */
.button {
  border-radius: 6px !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.15s ease, transform 0.1s ease;
}

.button:hover {
  background: var(--life-red-hover) !important;
  transform: translateY(-1px);
}

/* -------------------------------------------------------------------------
   6. SCROLLBAR
   ------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--life-black);
}
::-webkit-scrollbar-thumb {
  background: var(--life-border);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--life-red);
}