/*
  Brand refresh for PT Minera Nusa Drillindo - Site CPM.
  Copper -> gold -> amber accent identity, applied narrowly:
  the brand wordmark (.fi-logo) and the login card, not the data UI.
  Registered as a plain static CSS asset (no build step needed).
*/

@font-face {
  font-family: 'Oswald Brand';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/oswald-bold.woff2') format('woff2');
}

/* Brand wordmark: solid copper in light mode (verified 4.6:1 on white),
   full copper -> gold -> amber gradient in dark mode (verified 3.8-15:1 on charcoal).
   Filament's own compiled Tailwind utilities (.text-gray-950 etc.) load after
   this stylesheet at equal specificity, so the selector is doubled here to
   win the cascade without resorting to !important. */
.fi-logo.fi-logo {
  font-family: 'Oswald Brand', ui-sans-serif, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  color: #B35E31;
}

.dark .fi-logo.fi-logo {
  background-image: linear-gradient(90deg, #B35E31 0%, #CE8E25 55%, #F4E664 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Login card: thin brand accent bar on top, slightly refined edge. */
.fi-simple-main {
  position: relative;
  overflow: hidden;
}

.fi-simple-main::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background-image: linear-gradient(90deg, #B35E31, #CE8E25);
}

.fi-simple-header-heading {
  letter-spacing: -0.01em;
}

/* ==========================================================================
   Split-screen auth layout (login / password reset): a dark brand panel on
   the left (always dark, regardless of the panel's light/dark toggle - it's
   a fixed brand statement) plus the original card on the right, unchanged
   functionally. See resources/views/vendor/filament-panels/components/
   layout/simple.blade.php for the markup this targets.
   ========================================================================== */

/* Two-column split at the lg breakpoint (1024px), single column below it.
   Written as plain CSS rather than Tailwind utility classes (lg:grid-cols-2,
   lg:flex etc.) because those specific responsive utilities were never
   compiled into Filament's shipped app.css - there is no Tailwind build step
   on this server, so unknown utility classes silently do nothing. */
.fi-simple-layout {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  grid-template-columns: 1fr;
}

.fi-simple-main-ctn {
  padding-inline: 1rem;
}

.mnd-auth-brand-panel {
  display: none;
  position: relative;
  background-color: #171512;
  isolation: isolate;
}

@media (min-width: 1024px) {
  .fi-simple-layout {
    grid-template-columns: 1fr 1fr;
  }

  .mnd-auth-brand-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem;
  }
}

/* Off-center ambient glow - asymmetric on purpose, not a centered blob. */
.mnd-auth-brand-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(206, 142, 37, 0.30), transparent 45%),
    radial-gradient(circle at 88% 92%, rgba(179, 94, 49, 0.24), transparent 42%);
}

/* Subtle grain, matches the brand's "industrial dark precision" texture. */
.mnd-auth-brand-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.15;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Oversized crosshair-circle motif (from the MND drill-bit/compass logo),
   bleeding off the corner as a faint watermark. */
.mnd-auth-brand-crosshair {
  position: absolute;
  z-index: 0;
  width: 640px;
  height: 640px;
  right: -220px;
  bottom: -220px;
  border-radius: 9999px;
  border: 1px solid rgba(244, 230, 100, 0.08);
}

.mnd-auth-brand-crosshair::before,
.mnd-auth-brand-crosshair::after {
  content: '';
  position: absolute;
  background-color: rgba(244, 230, 100, 0.08);
}

.mnd-auth-brand-crosshair::before {
  inset-inline: 0;
  top: 50%;
  height: 1px;
}

.mnd-auth-brand-crosshair::after {
  inset-block: 0;
  left: 50%;
  width: 1px;
}

.mnd-auth-brand-content {
  position: relative;
  z-index: 2;
}

/* Brand wordmark inside the panel always gets the gradient treatment,
   regardless of the app's own light/dark toggle (equal specificity to the
   base .fi-logo.fi-logo rule above; wins on source order since it's later
   in this file). */
.mnd-auth-brand-panel .fi-logo {
  font-family: 'Oswald Brand', ui-sans-serif, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  font-size: 1.375rem;
  background-image: linear-gradient(90deg, #B35E31 0%, #CE8E25 55%, #F4E664 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.mnd-auth-tagline {
  font-family: 'Oswald Brand', ui-sans-serif, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 1.25;
  color: #fafaf9;
  max-width: 20ch;
}

.mnd-auth-subtext {
  margin-top: 0.75rem;
  max-width: 36ch;
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(250, 250, 249, 0.62);
}

.mnd-auth-footer-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(250, 250, 249, 0.4);
}

/* The small in-card logo is redundant once the brand panel takes over on
   large screens; it stays visible on mobile where the brand panel hides. */
@media (min-width: 1024px) {
  .fi-simple-header .fi-logo {
    display: none;
  }
}

/* Form-side background: a considered warm/near-black neutral instead of
   Tailwind's default flat gray-50 / gray-950, for a touch more depth. */
.fi-simple-main-ctn {
  background-color: #fafaf9;
}

.dark .fi-simple-main-ctn {
  background-color: #0c0c0d;
}

.fi-simple-main {
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.25);
}