/* ==========================================================
   Daqiq auth pages (login, signup, password reset, OTP): brand style.
   Linked only from layouts/auth2.blade.php. CSS only, no markup changes.
   Brand: dark teal #0B3B3C, teal #0B7F7A, lime #C9F15A (lime only on dark).
   Selectors start with "html body" so they beat each page's own <style> block.
   Rollback: remove the <link> to this file.
   ========================================================== */
html body {
    --au-ink: #0B3B3C;
    --au-ink-hover: #134E4F;
    --au-teal: #0B7F7A;
    --au-teal-dark: #08625E;
    --au-lime: #C9F15A;
    --au-line: #DCE7E5;
    --au-tint: #EAF4F3;
    font-family: 'IBM Plex Sans Arabic', 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
    color: #0F2A2E !important;
    background:
        radial-gradient(620px 420px at 88% -4%, rgba(201, 241, 90, .22), transparent 70%),
        radial-gradient(720px 520px at 6% 104%, rgba(11, 127, 122, .14), transparent 70%),
        linear-gradient(180deg, #EEF7F5 0%, #F6FAF9 100%) !important;
    background-attachment: fixed !important;
}

html body input,
html body button,
html body select,
html body textarea,
html body .login-header,
html body .register-header,
html body [style*="Tajawal"] {
    font-family: inherit !important;
}

/* ---------- top bar: logo, links, language ---------- */
html body .tw-absolute a.tw-text-white {
    color: var(--au-ink) !important;
    font-weight: 600;
}

html body .tw-absolute a.tw-text-white:hover {
    color: var(--au-teal) !important;
}

html body .tw-absolute .tw-rounded-full.tw-border-white {
    background: var(--au-ink);
    border-color: var(--au-ink) !important;
    box-shadow: 0 8px 20px -10px rgba(11, 59, 60, .6);
}

html body .tw-absolute .tw-rounded-full.tw-border-white a.tw-text-white,
html body .tw-absolute .tw-rounded-full.tw-border-white a.tw-text-white:hover {
    color: var(--au-lime) !important;
}

html body a.change_lang[style*="#6366f1"] {
    background: var(--au-ink) !important;
    color: var(--au-lime) !important;
}

html body a.change_lang:not([style*="#6366f1"]) {
    color: #4A6366 !important;
}

/* ---------- card ---------- */
html body .login-card,
html body .register-card,
html body .otp-card {
    border: 1px solid #E1ECEA !important;
    border-radius: 22px !important;
    box-shadow: 0 30px 70px -30px rgba(11, 59, 60, .30), 0 2px 6px rgba(11, 59, 60, .04) !important;
}

/* brand panel */
html body .login-header,
html body .register-header {
    background:
        radial-gradient(380px 280px at 85% 8%, rgba(201, 241, 90, .16), transparent 70%),
        radial-gradient(420px 320px at 0% 100%, rgba(11, 127, 122, .45), transparent 70%),
        linear-gradient(160deg, #0B3B3C 0%, #0B4A4A 100%) !important;
    border: 0 !important;
}

html body .login-header h1,
html body .register-header h1 {
    color: #FFFFFF !important;
}

html body .login-header p,
html body .register-header p {
    color: #A9CDCB !important;
}

html body .login-header a,
html body .register-header a {
    color: var(--au-lime) !important;
}

html body .login-header a:hover,
html body .register-header a:hover {
    color: #E3FA9E !important;
}

/* ---------- fields ---------- */
html body .form-input,
html body .login-body .form-control,
html body .register-body .form-control,
html body .otp-input {
    border-color: var(--au-line) !important;
    border-radius: 12px !important;
}

html body .form-input:focus,
html body .form-control:focus,
html body .otp-input:focus,
html body input.tw-w-full:focus {
    border-color: var(--au-teal) !important;
    box-shadow: 0 0 0 3px rgba(11, 127, 122, .14) !important;
    outline: none !important;
}

html body .otp-input.filled {
    border-color: var(--au-teal) !important;
    background: var(--au-tint) !important;
}

html body input[type="checkbox"] {
    accent-color: var(--au-teal);
}

html body .toggle-password:hover {
    color: var(--au-teal) !important;
}

/* ---------- primary buttons ---------- */
html body .login-button,
html body .register-button,
html body #register_submit_btn,
html body .verify-btn,
html body #verify_otp_btn,
html body form button[type="submit"].tw-bg-gradient-to-r {
    background: var(--au-ink) !important;
    background-image: none !important;
    color: var(--au-lime) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 26px -14px rgba(11, 59, 60, .75) !important;
}

html body .login-button:hover,
html body .register-button:hover,
html body #register_submit_btn:hover,
html body .verify-btn:hover:not(:disabled),
html body #verify_otp_btn:hover,
html body form button[type="submit"].tw-bg-gradient-to-r:hover {
    background: var(--au-ink-hover) !important;
    color: var(--au-lime) !important;
}

html body .login-button svg,
html body #register_submit_btn i,
html body #verify_otp_btn i,
html body form button[type="submit"].tw-bg-gradient-to-r svg {
    color: inherit !important;
}

html body #send_otp_btn {
    background: var(--au-teal) !important;
    border-color: var(--au-teal) !important;
    color: #FFFFFF !important;
}

html body #send_otp_btn:hover {
    background: var(--au-teal-dark) !important;
}

/* ---------- links ---------- */
html body .forgot-password,
html body .register-link a,
html body .login-link a,
html body .resend-btn:not(:disabled),
html body .terms_condition,
html body a.tw-text-indigo-500 {
    color: var(--au-teal) !important;
}

html body .forgot-password:hover,
html body .register-link a:hover,
html body .login-link a:hover,
html body .resend-btn:not(:disabled):hover,
html body .back-link:hover,
html body a.tw-text-indigo-500:hover {
    color: var(--au-teal-dark) !important;
}

/* inline blue/orange hints in the signup form */
html body [style*="color:#3b82f6"],
html body [style*="color: #3b82f6"] {
    color: var(--au-teal) !important;
}

html body [style*="background: #f0f9ff"] {
    background: var(--au-tint) !important;
    color: var(--au-ink) !important;
}

html body #resend_otp_link {
    color: var(--au-teal) !important;
}

/* ---------- icons ---------- */
html body .otp-icon,
html body .channel-icon.email {
    background: var(--au-tint) !important;
}

html body .otp-icon svg {
    color: var(--au-teal) !important;
}

html body .tw-bg-gradient-to-br.tw-from-indigo-500 {
    background-image: linear-gradient(135deg, #0B3B3C 0%, #0B7F7A 100%) !important;
}

html body .channel-btn:hover:not(:disabled) {
    border-color: var(--au-teal) !important;
    background: var(--au-tint) !important;
    box-shadow: 0 4px 12px rgba(11, 127, 122, .15) !important;
}

/* ---------- founding-member strip on signup ---------- */
html body div[style*="#064e3b"][style*="position: fixed"] {
    background: linear-gradient(90deg, #0B3B3C 0%, #0B7F7A 100%) !important;
}

html body div[style*="#064e3b"] span[style*="#f59e0b"] {
    background: var(--au-lime) !important;
    border-color: var(--au-lime) !important;
    color: var(--au-ink) !important;
}

/* ---------- small layout touches ---------- */
html body .tw-absolute .tw-rounded-full.tw-border-white {
    width: auto !important;
    padding: 0 20px;
}

html body .tw-absolute > a > div.tw-overflow-hidden {
    width: auto !important;
    height: auto !important;
    margin-bottom: 0 !important;
}

html body .tw-absolute > a > div.tw-overflow-hidden img {
    height: 40px;
    width: auto;
}

/* password-reset card (tailwind) */
html body .tw-rounded-2xl.tw-ring-1 {
    --tw-ring-color: #E1ECEA !important;
    margin-top: 56px;
    border-radius: 22px !important;
    box-shadow: 0 30px 70px -30px rgba(11, 59, 60, .30), 0 0 0 1px #E1ECEA !important;
}