/* IBM Plex Sans Arabic font */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;600;700&display=swap');

:root{
  --blue:#2563eb;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --radius:22px;
  --shadow:0 26px 60px rgba(0,0,0,.15);
}

html,body{height:100%}
body.login-screen{
  margin:0;
  min-height:100vh;
  background:var(--blue);
  font-family:'IBM Plex Sans Arabic', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  /* Safe areas + symmetric side gutters on phones */
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
  box-sizing: border-box;
  overflow:auto;
}

body.login-screen header,
body.login-screen .header,
body.login-screen .sidebar,
body.login-screen nav,
body.login-screen aside{display:none!important}

/* Logo */
.login-logo{position:static; margin-bottom:40px; display:flex; justify-content:center}
.login-logo img{height:48px; filter:brightness(0) invert(1)}

/* Card centered with guaranteed side gutters (>= 24px each side) */
.login-card{
  box-sizing: border-box;
  width: clamp(300px, calc(100vw - 64px), 440px); /* 32px gutters by default */
  margin-inline: auto;
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px 28px 22px;
  display:block;
}
.login-title{margin:0 0 16px; font-weight:700; font-size:22px; line-height:1.2; text-align:center; color:#111827}

/* Alerts */
.login-alert{background:#fee2e2; border:1px solid #fecaca; color:#991b1b; padding:10px 12px; border-radius:12px; margin:10px 0; font-size:13px}

/* Form */
.login-form{display:grid; gap:12px}
.field{display:block}
.input{
  box-sizing:border-box;
  width:100%;
  height:46px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#f3f4f6;
  padding:0 14px;
  font-size:14px;
  outline:none;
  border-left-width:1px; border-right-width:1px
}
.input:focus{border-color:#93c5fd; box-shadow:0 0 0 3px rgba(59,130,246,.15)}

/* Primary button */
.btn-primary{height:44px; border:0; border-radius:12px; background:#2563eb; color:#fff; font-weight:700; cursor:pointer}
.btn-primary:active{transform:translateY(1px)}

/* Divider */
.divider{display:flex; align-items:center; justify-content:center; color:#9ca3af; font-weight:600; margin:6px 0 8px}
.divider:before,.divider:after{content:""; flex:1; height:1px; background:#e5e7eb; margin:0 10px}

/* Google button */
.btn-google{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px;
  border-radius:12px; border:1px solid var(--border); background:#fff; color:#111827; text-decoration:none; font-weight:600
}
.g-logo{height:18px}

/* Note */
.login-note{margin:10px 0 0; text-align:center; color:var(--muted); font-size:12px}

/* Responsive tweaks */
@media (max-width:480px){
  .login-logo img{height:44px}
  .login-card{padding:24px 20px 18px; border-radius:20px}
}
@media (max-width:380px){
  .login-logo{margin-bottom:28px}
  .login-logo img{height:40px}
  .login-title{font-size:20px}
  .input{height:48px; font-size:15px}
  .btn-primary{height:46px}
}