/* public/assets/app.css — Lux Law Theme (navy+gold)
   Split brand (left) + glass login (right), full-page background, colored top bar */

/* ===== Design Tokens ===== */
:root{
  --ink:#0b1f3a;            /* navy */
  --ink-2:#122749;
  --gold:#caa75a;           /* accent */
  --page:#f6f8fb;           /* fallback page color */
  --card:#ffffff;
  --muted:#6b7280;
  --border:#e6e8ee;
  --ring:rgba(202,167,90,.25);
  --blue:#1769e0;
  --blue-2:#0f56bd;
  --shadow-lg:0 24px 70px rgba(0,0,0,.18);
  --shadow-sm:0 10px 34px rgba(0,0,0,.08);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu;
  color:#0f172a;
  background: var(--page);   /* fallback */
  position:relative;
}

/* Full-page background (fixed) — image more visible */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background:
    /* خفّضنا التعتيم ليظهر الـ bg أوضح */
    linear-gradient(180deg,
      rgba(255,255,255,.35) 0%,
      rgba(255,255,255,.45) 18%,
      rgba(255,255,255,.52) 38%,
      rgba(255,255,255,.62) 100%
    ),
    url("../assets/bg.jpg") center/cover no-repeat fixed;
}

/* لمسة لمعان خفيفة أسفل الهيدر (اختياري لطيف) */
body::after{
  content:"";
  position:fixed; left:0; right:0; top:0; height:80px; z-index:-1;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  pointer-events:none;
}

/* Links */
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* ===== Header (colored top bar) ===== */
.header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:22px 26px;
  background: linear-gradient(180deg, #6593d8 0%, #616e80 100%);
  border-bottom:1px solid rgba(255,255,255,.12);
  color:#f8fafc;
  position:sticky; top:0; z-index:30;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; color:#f8fafc}
.brand img{height:80px; width:auto; display:block; filter: drop-shadow(0 6px 18px rgba(0,0,0,.18))}
.nav a{margin-inline:8px; color:#eaf2ff; font-weight:600}
.nav a:hover{color:#fff; text-decoration:underline}
.lang select{
  padding:8px 10px; border:1px solid rgba(255,255,255,.18);
  border-radius:12px; background:rgba(255,255,255,.08); color:#f8fafc
}
.lang select option{ color:#111 }

/* ===== Generic Layout ===== */
.container{max-width:1200px; margin:26px auto; padding:0 16px}
.card{
  background:#fff; border:1px solid var(--border); border-radius:18px;
  padding:18px; margin-bottom:18px; box-shadow:var(--shadow-sm);
}

/* Tables / Alerts / Footer */
.table{width:100%; border-collapse:collapse}
.table th,.table td{padding:10px; border-bottom:1px solid var(--border); text-align:right}
.alert{
  padding:12px 14px; border-radius:12px; margin:10px 0;
  background:#fff7e6; color:#6a4b00; border:1px solid #ffe3b0
}
.footer{opacity:.85; text-align:center; padding:18px}

/* ===================================================================== */
/*                           Split Auth Layout                            */
/* ===================================================================== */

.split-auth{
  display:grid;
  grid-template-columns: 1fr 1fr;      /* left brand / right form */
  gap:0;
  margin:24px auto;
  max-width:1200px;
  border-radius:26px;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  background:#fff;                      /* base under both panes */
}

/* ------- Left pane (brand) ------- */
.brand-pane{
  background:
    radial-gradient(100% 140% at 0% 0%, #3f659e 0%, #345686 38%, #1f5cb3 100%),
    linear-gradient(180deg, var(--ink-2), var(--ink));
  position:relative;
  display:grid; place-items:center;
  padding:24px;
}
.brand-pane::after{
  /* decorative glints */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 85% 10%, rgba(255,255,255,.12), transparent 40%),
    linear-gradient(135deg, rgba(202,167,90,.18), transparent 55%),
    linear-gradient(215deg, rgba(255,255,255,.10), transparent 60%);
  pointer-events:none;
}
.brand-surface{
  width:min(520px, 86%); aspect-ratio: 4/3;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:22px;
  display:grid; place-items:center;
  backdrop-filter:saturate(140%); /* no blur */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 18px 60px rgba(0,0,0,.25);
}
.brand-logo{
  width:min(340px, 70%); height:auto; display:block;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.28));
}
.brand-tag{
  margin-top:14px; font-weight:700; letter-spacing:.3px;
  color:#f9fafb; opacity:.9; text-align:center;
}

/* ------- Right pane (form) ------- */
.form-pane{
  background:
    radial-gradient(1200px 600px at 120% -20%, rgba(202,167,90,.14), transparent 40%),
    linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);
  display:flex; align-items:center; justify-content:center;
  padding:32px;
}

/* ===== Login Card ===== */
.login-card{
  position:relative; width:min(560px, 92%);
  padding:26px 26px 24px;
  background:rgba(255,255,255,.98);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.14);
}

/* title */
.login-title{
  font-size:1.55rem; font-weight:900; text-align:center;
  color:var(--ink); letter-spacing:.2px; margin:2px 0 18px;
}

/* grid fields */
.form-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:0 0 14px}
label{display:block; font-weight:700; margin:0 0 6px; color:#374151}
input,select,textarea{
  width:100%; background:#fff; border:1.5px solid var(--border); color:#0f172a;
  border-radius:12px; padding:12px 14px; font-size:16px; outline:none;
  transition:border-color .15s, box-shadow .15s, transform .06s;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
}
input::placeholder{color:#9aa3b2}
input:focus,select:focus,textarea:focus{border-color:#b4c6ff; box-shadow:0 0 0 4px var(--ring)}

/* buttons */
.btn{display:inline-block; border:none; cursor:pointer; border-radius:12px; font-weight:800}
.btn.btn-primary,
.login-card .btn{
  padding:12px 16px; width:100%; color:#fff;
  background:linear-gradient(180deg, var(--blue) 0%, var(--blue-2) 100%);
  box-shadow:0 12px 30px rgba(23,105,224,.28);
}
.login-card .btn:hover{filter:brightness(1.04)}
.login-card .btn:active{transform:translateY(1px)}
.btn.secondary{background:#465a7b; color:#fff; padding:10px 14px}

/* hint */
.hint{opacity:.75; text-align:center; margin:10px 0 0; color:#4b5563}

/* ===== Responsive ===== */
@media (max-width: 1060px){
  .brand-logo{width:min(300px, 72%)}
  .brand-surface{width:min(520px, 90%)}
  .brand img{height:70px}
}
@media (max-width: 920px){
  .split-auth{grid-template-columns: 1fr; border-radius:22px}
  .brand-pane{padding:20px 16px}
  .form-pane{padding:22px 16px}
  .brand-surface{aspect-ratio:auto; padding:20px}
}
@media (max-width: 720px){
  .brand img{height:56px}        /* header logo scales down on mobile */
  .login-card{width:95%; padding:22px 18px 20px}
  .form-row{grid-template-columns:1fr}
  .brand-logo{width:68%}
}