/* CSS Document */
/* ================================
   THEME VARIABLES
================================ */

/* Default = DARK */
:root {
  --bg: #0b0b0b !important;
  --panel: #121212 !important;
  --text: #f7f7f7 !important;
  --muted: #cfc8c0 !important;
  --accent: #d4af37 !important;
  --border: rgba(255,255,255,0.08) !important;
  --glass: rgba(255,255,255,0.04) !important;
  --transition: 300ms ease !important;
}

/* Light Mode */
:root[data-theme="light"] {
  --bg: #ffffff !important;
  --panel: #ffffff !important;
  --text: #0b0b0b !important;
  --muted: #404040 !important;
  --accent: #b8860b !important;
  --border: rgba(0,0,0,0.08) !important;
  --glass: rgba(0,0,0,0.04) !important;
}

/* ================================
   GLOBAL COLOR APPLY
================================ */
body {
  color: var(--text) !important;
  background-color: var(--bg) !important; /* fallback only */
  transition: background-color var(--transition),
              color var(--transition) !important;
}

.login-card {
  background: var(--panel) !important;
  color: var(--text) !important;
}

.visual {
  color: var(--text) !important;
}

html[data-theme="dark"] .form-control {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
  border-color: #444 !important;
}

html[data-theme="dark"] .form-control:focus {
  border-color: var(--accent) !important;
  box-shadow: none !important;
}

/* ================================
   GLOBAL BACKGROUND IMAGE
================================ */
body {
  background-image: url("../image/web1.png") !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
  position: relative !important;
}

/* Dark mode background image */
html[data-theme="dark"] body {
  background-image: url("../image/web1_dark.png") !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
  position: relative !important;	
}

/* Overlay */
body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
}



/* ================================
   LOGIN CARD
================================ */
.login-card {
  position: relative !important;
  z-index: 1 !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15) !important;
  overflow: hidden !important;
}

/* ================================
   LEFT VISUAL PANEL
================================ */
.visual {
  background: linear-gradient(135deg, #c9b27c, #e6d3a3) !important;
  border-radius: 18px 0 0 18px !important;
}

html[data-theme="dark"] .visual {
  background: linear-gradient(135deg, #3a3222, #6b5a3a) !important;
}

/* ================================
   RESPONSIVE
================================ */
@media (max-width: 576px) {

  body {
    background-position: center !important;
  }

  .visual {
    border-radius: 18px 18px 0 0 !important;
    text-align: center !important;
  }

  .login-card {
    border-radius: 18px !important;
  }
}