/* ===== CaseFox Theme (Drop-in) ===== */
:root{
  /* Brand core */
  --cf-primary: #ff620c;      /* CaseFox orange */
  --cf-primary-600:#e65809;   /* hover */
  --cf-primary-700:#c64e0a;   /* active */
  --cf-navy:    #0b1f3a;      /* headings, strong text */
  --cf-slate-900:#111827;     /* darkest text */
  --cf-slate-700:#4b5563;     /* body text */
  --cf-slate-400:#cfd6df;     /* subtle borders */
  --cf-bg:      #f7f9fc;      /* app background */
  --cf-card:    #ffffff;      /* panels */
  --cf-danger:  #d92d20;      /* errors */
  --radius-lg:  20px;
  --shadow-lg:  0 12px 32px rgba(11,31,58,0.08);
}

/* Reset & base */
*{ box-sizing:border-box; }
body{
  margin:0; padding:0;
  font-family:'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  background: var(--cf-bg);
  color: var(--cf-slate-900);
  height:100vh; display:flex; align-items:center; justify-content:center;
}

/* Shell */
.admin-wrapper{
  display:flex; width:100%; max-width:1100px;
  background: var(--cf-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow:hidden; padding:20px 0;
}

/* Left column */
.login-side{
  flex:1; padding:100px 50px;
  display:flex; flex-direction:column; justify-content:center; position:relative;
}
.login-side .logo{ position:absolute; top:10px; left:50px; }
.login-side .logo img{ height:62px; padding-bottom: 10px; }

/* Login box */
.login-box{ width:100%; max-width:360px; }
.login-box h2{
  font-size:28px; font-weight:700; color: var(--cf-navy); margin:0 0 12px;
}
.login-box p{
  font-size:15px; color: var(--cf-slate-700); margin:0 0 30px;
}

/* Inputs */
input[type="text"], input[type="password"]{
  width:100%; padding:14px; margin-bottom:16px;
  border:1px solid var(--cf-slate-400);
  border-radius:8px; font-size:15px; background:#fff; color:var(--cf-slate-900);
  transition:border-color .2s, box-shadow .2s;
}
input[type="text"]::placeholder, input[type="password"]::placeholder{ color:#9aa6b2; }
input[type="text"]:focus, input[type="password"]:focus{
  outline:none;
  border-color: var(--cf-primary);
  box-shadow: 0 0 0 3px rgba(255,98,12,0.15);
}

/* Button */
button{
  width:100%; padding:14px;
  background: var(--cf-primary); color:#fff;
  border:none; border-radius:8px; font-size:16px; font-weight:600; cursor:pointer;
  transition: background .2s, transform .02s ease-in-out, box-shadow .2s;
  box-shadow: 0 6px 16px rgba(255,98,12,0.18);
}
button:hover{ background: var(--cf-primary-600); }
button:active{ background: var(--cf-primary-700); transform: translateY(1px); }
button:focus-visible{
  outline:none; box-shadow: 0 0 0 4px rgba(255,98,12,0.22);
}

/* Error */
.error{
  color: var(--cf-danger);
  background: #fdeceb;
  border: 1px solid #f7c7c3;
  padding:10px 12px; border-radius:8px;
  font-size:14px; margin-bottom:16px;
}

/* Right column (hero/illustration) */
.image-side{
  flex:1;
  background:
    url('https://img.freepik.com/free-vector/sign-page-abstract-concept-illustration_335657-3875.jpg') no-repeat center/cover;
}

/* Responsive */
@media (max-width: 991px){
  .login-side{ padding:60px 40px; margin-top:100px; }
  .login-side .logo{ top:20px; left:30px; }
  .login-box h2{ font-size:24px; }
}

@media (max-width: 768px){
  body{ height:auto; }
  .admin-wrapper{
    flex-direction: column-reverse;
    border-radius:0; box-shadow:none; padding:0;
  }
  .login-side{ padding:40px 25px; align-items:center; text-align:center; }
  .login-side .logo{ position:static; margin-bottom:20px; }
  .login-box{ max-width:100%; }
  .image-side{ height:220px; width:100%; }
}

/* Optional: subtle link style if you add “Forgot password?” later */
a{ color: var(--cf-primary); text-decoration:none; }
a:hover{ text-decoration:underline; }