/* ==========================================================
   SecureShield — Dark / Orange Theme
   Scoped to the existing login markup only (no HTML changes)
========================================================== */

:root {
    --bg: #0b0d10;
    --bg-elev: #14171c;
    --card-bg: #15181d;
    --border-color: #262b32;
    --text-light: #f5f6f7;
    --text-muted: #9aa0a8;
    --orange: #ff7a1a;
    --orange-dark: #e4650a;
    --orange-glow: rgba(255, 122, 26, 0.35);
  }
  
  html,
  body {
    background-color: var(--bg) !important;
    color: var(--text-light);
    font-family: "Inter", "Segoe UI", sans-serif;
  }
  
  /* Subtle grid + glow backdrop behind the login content */
  main.container.my-5 {
    position: relative;
    z-index: 1;
  }
  
  main.container.my-5::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
      linear-gradient(rgba(255, 122, 26, 0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 122, 26, 0.045) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
    z-index: -2;
    pointer-events: none;
  }
  
  main.container.my-5::after {
    content: "";
    position: fixed;
    top: -160px;
    left: 50%;
    transform: translateX(-50%);
    width: 560px;
    height: 560px;
    background: var(--orange-glow);
    filter: blur(120px);
    opacity: 0.45;
    z-index: -1;
    pointer-events: none;
  }
  
  /* ==========================================================
     Card
  ========================================================== */
  main.container.my-5 .card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 18px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5) !important;
    animation: fadeInUp 0.5s ease both;
  }
  
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  
  main.container.my-5 .card-body h2.font-playfair {
    color: var(--text-light);
    position: relative;
  }
  
  /* Little shield accent above the title */
  main.container.my-5 .card-body h2.font-playfair::before {
    content: "\F5EC";
    font-family: "bootstrap-icons", sans-serif;
    display: block;
    width: 52px;
    height: 52px;
    line-height: 52px;
    margin: 0 auto 0.85rem;
    text-align: center;
    font-size: 1.4rem;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--orange), var(--orange-dark));
    color: #150b04;
    box-shadow: 0 10px 25px var(--orange-glow);
  }
  
  /* ==========================================================
     Form labels & inputs
  ========================================================== */
  main.container.my-5 .form-label {
    color: #c7cbd1;
    font-weight: 500;
    font-size: 0.85rem;
  }
  
  main.container.my-5 .form-control {
    background-color: var(--bg-elev) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-light) !important;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  
  main.container.my-5 .form-control::placeholder {
    color: #5c6169;
  }
  
  main.container.my-5 .form-control:focus {
    background-color: var(--bg-elev) !important;
    color: var(--text-light) !important;
    border-color: var(--orange) !important;
    box-shadow: 0 0 0 3px var(--orange-glow) !important;
  }
  
  /* jQuery Validate error states — keep red, tuned for dark bg */
  main.container.my-5 #loginform input.error {
    border-color: #ff5c5c !important;
    box-shadow: 0 0 0 3px rgba(255, 92, 92, 0.2) !important;
  }
  
  main.container.my-5 #loginform label.error {
    color: #ff8080 !important;
  }
  
  /* ==========================================================
     Submit button
  ========================================================== */
  main.container.my-5 #loginBtn.btn-dark {
    background: linear-gradient(135deg, var(--orange), var(--orange-dark)) !important;
    border: none !important;
    color: #150b04 !important;
    font-weight: 600;
    font-size: 0.98rem;
    border-radius: 10px;
    box-shadow: 0 10px 25px var(--orange-glow);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  }
  
  main.container.my-5 #loginBtn.btn-dark:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px var(--orange-glow);
    color: #150b04 !important;
  }
  
  main.container.my-5 #loginBtn.btn-dark:disabled {
    opacity: 0.8;
    cursor: progress;
  }
  
  main.container.my-5 #btnLoader .spinner-border {
    color: #150b04;
  }
  
  /* ==========================================================
     Responsive tweaks
  ========================================================== */
  @media (max-width: 575.98px) {
    main.container.my-5 .card {
      padding: 1.5rem 1.1rem !important;
      border-radius: 14px !important;
    }
  
    main.container.my-5 .card-body h2.font-playfair {
      font-size: 1.25rem;
    }
  }
  
  @media (min-width: 1200px) {
    main.container.my-5 .card {
      padding: 2.75rem 2.25rem !important;
    }
  }