:root {
    --aj-navy: #12304d;
    --aj-navy-deep: #0b2239;
    --aj-gold: #b68a37;
    --aj-gold-light: #d1ae65;
    --aj-gold-strong: #92722a;
    --aj-gold-soft: #f4ecd8;
    --aj-ink: #263548;
    --aj-muted: #657487;
    --aj-line: #e5e9ee;
    --aj-surface: #fff;
    --aj-page: #f5f7fa;
    --aj-radius: 16px;
    font-family: 'Noto Kufi Arabic', Tahoma, Arial, sans-serif;
    color-scheme: light;
}

/* TDRA/UAE Design System palette adapted to Ajman Police's brand accent. */
html[data-theme-color="gold"] { --aj-gold: #b68a35; --aj-gold-light: #d1ae65; --aj-gold-strong: #92722a; --aj-gold-soft: #f4ecd8; }
html[data-theme-color="black"] { --aj-navy: #34383d; --aj-navy-deep: #24272b; --aj-gold: #5f646d; --aj-gold-light: #9ea2a9; --aj-gold-strong: #3e4046; --aj-gold-soft: #ebedf0; }
html[data-theme-color="green"] { --aj-navy: #367248; --aj-navy-deep: #244d31; --aj-gold: #4a9d5c; --aj-gold-light: #a0d5ab; --aj-gold-strong: #2f663c; --aj-gold-soft: #e7f1e9; }
html[data-theme-color="red"] { --aj-navy: #9b2630; --aj-navy-deep: #701820; --aj-gold: #ea4f49; --aj-gold-light: #faaaa7; --aj-gold-strong: #b52520; --aj-gold-soft: #fbe8e7; }

* { box-sizing: border-box; }
html { overflow-x: clip; }
body { margin: 0; color: var(--aj-ink); background: var(--aj-page); line-height: 1.7; font-family: 'Noto Kufi Arabic', Tahoma, Arial, sans-serif; }
a { color: inherit; }
.site-container, .page-shell { width: min(1600px, calc(100% - 48px)); margin-inline: auto; }

main { min-height: calc(100vh - 330px); padding-block: 0; }
main.portal-main--home { padding-block: 42px 56px; }
.module-hero { padding: clamp(24px, 5vw, 48px); border: 1px solid var(--aj-line); border-top: 4px solid var(--aj-gold); border-radius: var(--aj-radius); background: var(--aj-surface); box-shadow: 0 10px 30px rgba(18,48,77,.05); }
.module-hero h1 { margin: 0 0 10px; color: var(--aj-navy); font-size: clamp(25px, 4vw, 38px); line-height: 1.45; }
.module-hero p { max-width: 720px; margin: 0; color: var(--aj-muted); }
.module-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.module-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 17px; border: 1px solid var(--aj-line); border-radius: 10px; background: #fff; color: var(--aj-navy); font-weight: 700; text-decoration: none; }
.module-link--primary { border-color: var(--aj-gold-strong); color: #fff; background: var(--aj-gold-strong); }

/* Shared action feedback used by forms and other modules. */
.portal-snackbar-region { position: fixed; z-index: 2147482000; inset-inline-end: max(18px, env(safe-area-inset-right)); inset-block-end: max(18px, env(safe-area-inset-bottom)); width: min(390px, calc(100vw - 36px)); display: grid; gap: 10px; pointer-events: none; }
.portal-snackbar { min-height: 60px; display: flex; align-items: center; gap: 13px; padding: 12px 14px; transform: translateY(10px); border: 1px solid rgba(255,255,255,.12); border-inline-start: 4px solid var(--snackbar-accent, var(--aj-gold-light)); border-radius: 13px; color: #fff; background: #142b40; box-shadow: 0 14px 36px rgba(4, 17, 30, .28); opacity: 0; pointer-events: auto; transition: opacity .2s ease, transform .22s cubic-bezier(.2,.75,.25,1); }
.portal-snackbar.is-visible { transform: translateY(0); opacity: 1; }
.portal-snackbar.is-leaving { transform: translateY(7px); opacity: 0; }
.portal-snackbar--success { --snackbar-accent: #55bd82; }
.portal-snackbar--warning { --snackbar-accent: #d7aa55; }
.portal-snackbar--error { --snackbar-accent: #e27a79; }
.portal-snackbar--info { --snackbar-accent: #73a9d6; }
.portal-snackbar__icon { flex: 0 0 23px; margin-inline-end: 2px; color: var(--snackbar-accent); font-size: 21px; text-align: center; }
.portal-snackbar__message { min-width: 0; flex: 1 1 auto; color: #f5f7fa; font-size: 12px; font-weight: 600; line-height: 1.7; text-align: start; overflow-wrap: anywhere; }
.portal-snackbar__close { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: #d9e1e9; background: rgba(255,255,255,.06); cursor: pointer; }
.portal-snackbar__close:hover, .portal-snackbar__close:focus-visible { border-color: var(--snackbar-accent); color: #fff; background: rgba(255,255,255,.12); outline: 2px solid rgba(255,255,255,.18); }
@media (prefers-reduced-motion: reduce) { .portal-snackbar, .portal-snackbar.is-leaving { transform: none; transition-duration: .01ms; } }

@media (max-width: 560px) {
    .site-container, .page-shell { width: min(100% - 28px, 1600px); }
    main { min-height: calc(100vh - 370px); padding-block: 0; }
    main.portal-main--home { padding-block: 24px 36px; }
    .portal-snackbar-region { inset-inline-end: max(12px, env(safe-area-inset-right)); inset-block-end: max(12px, env(safe-area-inset-bottom)); width: calc(100vw - 24px); }
}