/* CSS variables driven by branding/config.json */
    :root {
      --primary:    #0f2f1a;
      --accent:     #07ed2d;
      --secondary:  #06c724;
      --bg-from:    #0a1f12;
      --bg-via:     #0f3a22;
      --bg-to:      #15592e;
      --bg-image:   none;
      --bg-opacity: 0.60;
      --bg-blur:    0px;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Tajawal', 'Segoe UI', Arial, sans-serif;
      min-height: 100vh;
      background: linear-gradient(135deg, var(--bg-from) 0%, var(--bg-via) 50%, var(--bg-to) 100%);
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
      position: relative; overflow: hidden;
    }
    /* Background image layer (UAE flag) — faded behind gradient */
    body::before {
      content: '';
      position: absolute; inset: 0;
      background-image: var(--bg-image);
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      opacity: var(--bg-opacity);
      filter: blur(var(--bg-blur));
      z-index: 0;
    }
    /* Subtle dark overlay for text readability */
    body::after {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.4) 100%);
      z-index: 0; pointer-events: none;
    }
    .lang-switch {
      position: absolute; top: 20px; left: 20px;
      background: rgba(255,255,255,.15); color: #fff;
      border: 1px solid rgba(255,255,255,.3); padding: 6px 14px;
      border-radius: 6px; cursor: pointer; font-size: 13px;
      z-index: 10;
    }
    .lang-switch:hover { background: rgba(255,255,255,.25); }

    .login-card {
      background: linear-gradient(135deg,
        rgba(0, 201, 30, 0.35) 0%,
        rgba(7, 122, 25, 0.35) 100%);
      backdrop-filter: blur(12px) saturate(130%);
      -webkit-backdrop-filter: blur(12px) saturate(130%);
      border: 1px solid rgba(7, 237, 45, 0.45);
      border-radius: 12px; max-width: 300px; width: 100%;
      color: #fff; padding: 20px 18px;
      box-shadow:
        0 14px 40px rgba(0,0,0,0.45),
        0 0 30px rgba(7,237,45,0.20),
        inset 0 1px 0 rgba(255,255,255,0.15);
      position: relative; z-index: 1;
    }
    .login-header { text-align: center; margin-bottom: 14px; }
    .login-logo {
      width: 66px; height: 66px; display: block; margin: 0 auto 6px;
      filter: drop-shadow(0 0 12px rgba(7,237,45,0.5));
      animation: logoPulse 2.6s ease-in-out infinite;
    }
    @keyframes logoPulse {
      0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 10px rgba(7,237,45,0.4)); }
      50%      { transform: scale(1.1);  filter: drop-shadow(0 0 22px rgba(7,237,45,0.75)); }
    }
    .login-header h1 {
      color: #fff; font-size: 21px; font-weight: 800;
      margin: 6px 0 3px; letter-spacing: 2px;
      text-shadow: 0 2px 10px rgba(0,0,0,0.55);
    }
    .login-header .tagline { color: #fff; font-size: 11px; margin: 2px 0; text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
    .login-header .welcome { color: #fff; font-size: 10px; margin-top: 6px; opacity: 0.95; text-shadow: 0 1px 4px rgba(0,0,0,0.3); }
    .login-header hr { border: none; border-top: 1px solid rgba(255,255,255,.35); margin: 10px 0 0; }

    .login-body { display: flex; flex-direction: column; gap: 8px; }
    .login-field {
      display: flex; align-items: center;
      background: rgba(255,255,255,0.95); border-radius: 6px; overflow: hidden;
      transition: box-shadow .2s;
    }
    .login-field:focus-within { box-shadow: 0 0 0 2px var(--accent); }
    .login-icon {
      padding: 0 10px; align-self: stretch;
      background: rgba(0,0,0,0.06);
      display: flex; align-items: center; color: #4a4a4a;
    }
    .login-icon svg { width: 14px; height: 14px; display: block; }
    .login-field input {
      flex: 1; padding: 9px 9px; border: none; outline: none;
      background: transparent; color: #222; font-size: 12px;
      font-family: inherit; min-width: 0;
    }
    .pw-toggle {
      background: transparent; border: none; cursor: pointer;
      padding: 0 10px; align-self: stretch; color: #4a4a4a;
      display: flex; align-items: center; transition: color .15s;
    }
    .pw-toggle:hover { color: #0e7a3a; }
    .pw-toggle svg   { width: 16px; height: 16px; display: block; }
    .login-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 2px 2px; font-size: 12px; color: #cfd8e6;
    }
    .login-remember { display: flex; align-items: center; gap: 5px; cursor: pointer; }
    .login-row a { color: var(--accent); text-decoration: none; font-size: 12px; }
    .login-row a:hover { text-decoration: underline; }
    .login-error {
      color: #ff5252; text-align: center; min-height: 16px;
      font-weight: 600; font-size: 12px;
      transition: opacity .2s;
    }
    .login-error:not(:empty) { background: rgba(255,82,82,0.12); padding: 4px; border-radius: 4px; }

    .login-btn {
      background: linear-gradient(135deg, #8a9c2c 0%, #5d6e1e 100%);
      color: #fff; border: none; padding: 9px;
      border-radius: 6px; font-size: 13px; font-weight: 700; cursor: pointer;
      display: flex; justify-content: center; align-items: center; gap: 6px;
      transition: filter 0.2s, transform 0.1s, box-shadow 0.2s;
      font-family: inherit; letter-spacing: 0.5px;
      box-shadow: 0 3px 10px rgba(93,110,30,0.45);
    }
    .login-btn:hover { filter: brightness(1.12); box-shadow: 0 5px 16px rgba(93,110,30,0.65); }
    .login-btn:active { transform: scale(0.98); }
    .login-btn:active { transform: scale(0.98); }
    .login-btn:disabled { opacity: 0.6; cursor: not-allowed; }

    .login-footer {
      text-align: center; color: #8c9; font-size: 10px;
      margin-top: 14px; padding-top: 10px;
      border-top: 1px solid rgba(255,255,255,.1);
    }

    /* LTR mode */
    html[dir="ltr"] body { direction: ltr; }
    html[dir="ltr"] .lang-switch { left: auto; right: 20px; }

.is-hidden { display: none !important; }