/* SHAKO login 2026-11-11 (Owner / Admin / Agent / Reseller): clean light page, one white card, large blue
 * «تسجيل الدخول» button and the official Google button directly under it at the same width and height.
 * Visual only: same form, same fields, same GIS button and callback. Loaded after design-a.css/panels-20261109.css. */
:root { --login-blue: #2563eb; --login-blue-hover: #1d4ed8; --login-blue-active: #1e40af;
  --login-ring: rgba(37, 99, 235, .28); --login-bg: #f4f6fb; --login-line: #e4e8f0; --login-ink: #111827;
  --login-muted: #5b6475; --login-btn-h: 48px; --login-radius: 8px; }

/* Page: light background, no dark side panel, card centred. */
html[data-design="a"] .login-layout { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center;
  min-height: 100vh; padding: 72px 16px 40px; box-sizing: border-box;
  background: radial-gradient(70% 50% at 50% 0%, #e9efff 0%, transparent 70%), var(--login-bg); }
html[data-design="a"] .login-aside { display: none; }

/* Card */
html[data-design="a"] .login-panel { width: 100%; max-width: 440px; margin: 0; box-sizing: border-box;
  padding: 40px 40px 32px; background: #fff; border: 1px solid var(--login-line); border-radius: 24px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 16px 40px rgba(16, 24, 40, .08); }
html[data-design="a"] .login-panel .login-brand { justify-content: center; margin-bottom: 28px; }
html[data-design="a"] .login-panel .eyebrow,
html[data-design="a"] .login-panel h1,
html[data-design="a"] .login-panel #portal-caption { text-align: center; }
html[data-design="a"] .login-panel .eyebrow { color: var(--login-blue); }
html[data-design="a"] .login-panel h1 { color: var(--login-ink); font-size: 1.7rem; }
html[data-design="a"] .login-panel #portal-caption { color: var(--login-muted); margin-bottom: 0; }
html[data-design="a"] .login-panel #login-form { margin-top: 26px; gap: 14px; }
html[data-design="a"] .login-panel label { color: var(--login-ink); }
html[data-design="a"] .login-panel input { border-color: var(--login-line); border-radius: 10px; }
html[data-design="a"] .login-panel input:focus { border-color: var(--login-blue); box-shadow: 0 0 0 4px var(--login-ring); }

/* Primary button */
html[data-design="a"] .login-panel .login-submit { width: 100%; min-height: var(--login-btn-h); height: var(--login-btn-h);
  margin-top: 6px; padding: 0 16px; border: 0; border-radius: var(--login-radius); background: var(--login-blue); color: #fff;
  font-size: 1rem; font-weight: 700; box-shadow: 0 6px 16px rgba(37, 99, 235, .22); cursor: pointer;
  transition: background-color .15s, box-shadow .15s, transform .05s; }
html[data-design="a"] .login-panel .login-submit:hover:not(:disabled) { background: var(--login-blue-hover); box-shadow: 0 8px 20px rgba(37, 99, 235, .28); }
html[data-design="a"] .login-panel .login-submit:active:not(:disabled) { background: var(--login-blue-active); transform: translateY(1px); }
html[data-design="a"] .login-panel .login-submit:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--login-ring); }
html[data-design="a"] .login-panel .login-submit:disabled { opacity: .75; cursor: progress; box-shadow: none; }

/* Google button. The panel CSP (style-src 'self') blocks Google's own stylesheet (accounts.google.com/gsi/style), so
 * the GIS button markup is styled here, from our origin, as the official white outlined button with the coloured G.
 * Same GIS renderButton, same click handler and callback: nothing about sign-in changes. Without these rules the
 * button showed as a full-size «G» image on Production (seen 2026-11-11). */
.google-button-host svg { max-width: 18px; max-height: 18px; }
.google-button-host .S9gUrf-YoZ4jf { max-width: 100%; }
.google-button-host .nsm7Bb-HzV7m-LgbsSe { position: relative; box-sizing: border-box; display: flex; align-items: center;
  justify-content: center; width: min(100%, 320px); max-width: 400px; height: 40px; padding: 0 12px; border: 1px solid #dadce0;
  border-radius: 4px; background: #fff; color: #3c4043; font: 500 14px/1.2 "Google Sans", Roboto, Arial, sans-serif;
  letter-spacing: .25px; cursor: pointer; overflow: hidden; user-select: none; outline: none;
  transition: background-color .2s, border-color .2s, box-shadow .2s; }
.google-button-host .nsm7Bb-HzV7m-LgbsSe-MJoBVe { position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  transition: background-color .2s; }
.google-button-host .nsm7Bb-HzV7m-LgbsSe:hover { border-color: #d2e3fc; }
.google-button-host .nsm7Bb-HzV7m-LgbsSe:hover .nsm7Bb-HzV7m-LgbsSe-MJoBVe { background: rgba(66, 133, 244, .04); }
.google-button-host .nsm7Bb-HzV7m-LgbsSe:active .nsm7Bb-HzV7m-LgbsSe-MJoBVe { background: rgba(66, 133, 244, .1); }
.google-button-host .nsm7Bb-HzV7m-LgbsSe:focus-visible { border-color: #4285f4; box-shadow: 0 0 0 3px rgba(66, 133, 244, .3); }
.google-button-host .nsm7Bb-HzV7m-LgbsSe-bN97Pc-sM5MNb { position: relative; display: flex; align-items: center; justify-content: center;
  gap: 10px; width: 100%; height: 100%; min-width: 0; }
.google-button-host .nsm7Bb-HzV7m-LgbsSe-Bz112c { flex: none; display: flex; width: 18px; height: 18px; }
.google-button-host .nsm7Bb-HzV7m-LgbsSe-Bz112c svg { display: block; width: 18px; height: 18px; }
.google-button-host .nsm7Bb-HzV7m-LgbsSe-BPrWId { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.google-button-host .L6cTce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Login: directly under «تسجيل الدخول», same width and height, same corner radius. */
html[data-design="a"] .login-panel .google-button-host.login-google { display: block; width: 100%; min-height: var(--login-btn-h);
  padding: 0; background: none; border-radius: 0; box-shadow: none; outline: none; }
html[data-design="a"] .login-panel .google-button-host.login-google:hover { box-shadow: none; }
html[data-design="a"] .login-panel .google-button-host.login-google .nsm7Bb-HzV7m-LgbsSe { width: 100% !important; max-width: none;
  height: var(--login-btn-h); border-radius: var(--login-radius); font-size: 15px; }
html[data-design="a"] .login-panel .google-button-host.login-google > .S9gUrf-YoZ4jf { width: 100%; }

/* Help links under the buttons */
html[data-design="a"] .login-panel .login-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 6px; }
html[data-design="a"] .login-panel .login-links .text-button { color: var(--login-blue); font-weight: 600; font-size: .9rem; padding: 4px 0; }
html[data-design="a"] .login-panel .login-links .text-button:hover { color: var(--login-blue-hover); text-decoration: underline; }

/* Other login steps keep the same button look */
html[data-design="a"] .login-panel .form-stack.compact .button.primary { min-height: var(--login-btn-h); border-radius: var(--login-radius);
  background: var(--login-blue); border-color: var(--login-blue); }

@media (max-width: 780px) {
  html[data-design="a"] .login-layout { padding: 68px 16px 28px; }
  html[data-design="a"] .login-panel { margin: 0; padding: 30px 20px 24px; border-radius: 20px; }
  html[data-design="a"] .login-panel .login-brand { margin-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) { html[data-design="a"] .login-panel .login-submit { transition: none; } }

/* Subscriber-field rule hint (credential-filter.js) */
.alnum-hint { display: block; margin-top: 4px; font-size: .78rem; font-weight: 500; color: var(--muted, #6c6a86); }