/**
 * Sentinel Design System - EAGLE AP
 * Custom overrides and utilities beyond Tailwind
 */

/* ── Font overrides: Plus Jakarta Sans + Fraunces ───────── */
/* These override the compiled Tailwind font-family values.  */
body,
.font-body,
.font-label,
button,
input,
select,
textarea {
    /* font-family: 'Plus Jakarta Sans', 'Noto Sans Telugu', sans-serif !important; */
}

.font-headline,
h1,
h2,
h3,
h4,
h5,
h6 {
    /* font-family: 'Fraunces', 'Noto Serif Telugu', serif !important; */
}

.font-mono,
code,
pre,
.font-mono * {
    font-family: 'IBM Plex Mono', monospace !important;
}

/* Fraunces optical size for large display text */
h1 {
    font-optical-sizing: auto;
}

h2 {
    font-optical-sizing: auto;
}

/* ─────────────────────────────────────────────────────────── */

/* Material Symbols — must set font-family explicitly to override body !important */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
}

.material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Public header nav links (legacy single-tier — kept for safety) */
.eagle-nav-active {
    background-color: #FE6B00 !important;
    color: #ffffff !important;
    border: none !important;
    text-decoration: none !important;
}

.eagle-nav-link {
    color: #0A2540 !important;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

.eagle-nav-link:hover {
    color: #FE6B00 !important;
}

/* ── Double-header Tier 1 ─────────────────────────── */
.eagle-header-tier1 {
    border-color: var(--eagle-outline-variant) !important;
}

/* ── Double-header Tier 2 nav links ──────────────── */
.eagle-tier2-link {
    font-size: 0.875rem !important;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.75) !important;
    border-radius: 999px !important;
    padding: 0.25rem 0.875rem !important;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.eagle-tier2-link:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.eagle-tier2-active {
    color: #ffffff !important;
    font-weight: 700 !important;
    background-color: #FE6B00 !important;
}

.eagle-tier2-active:hover {
    background-color: #e05f00 !important;
}

/* ── Particle grid overlay (hero sections) ───────── */
.particle-grid {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 30px 30px;
}

/* ── Font-weight black (BS5 only has fw-bold/bolder) ─ */
.fw-black {
    font-weight: 900 !important;
}

/* ── Keyframe animations (replacing Tailwind animate-*) ─ */
@keyframes eagle-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}

.eagle-pulse {
    animation: eagle-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes eagle-ping {

    75%,
    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

.eagle-ping {
    animation: eagle-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* ── Quick-action tile hover system (replaces Tailwind group-hover) ── */
.eagle-quick-tile {
    display: block;
    text-decoration: none;
    transition: background-color 0.5s ease;
}

/* Tile separators — vertical on ≥md, horizontal on mobile */
@media (min-width: 768px) {
    .eagle-quick-tile:not(:last-child) {
        border-right: 1px solid rgba(196, 198, 206, 0.25);
    }
}

@media (max-width: 767.98px) {
    .eagle-quick-tile:not(:last-child) {
        border-bottom: 1px solid rgba(196, 198, 206, 0.25);
    }
}

.eagle-quick-tile .eagle-tile-icon,
.eagle-quick-tile .eagle-tile-title,
.eagle-quick-tile .eagle-tile-text {
    transition: color 0.5s ease, transform 0.4s ease;
}

/* Tile 1 — orange (secondary-container) on hover */
.eagle-tile-report:hover {
    background-color: var(--eagle-secondary-container) !important;
}

.eagle-tile-report:hover .eagle-tile-icon {
    color: #ffffff !important;
    transform: scale(1.1);
}

.eagle-tile-report:hover .eagle-tile-title {
    color: #ffffff !important;
}

.eagle-tile-report:hover .eagle-tile-text {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Tile 2 — dark-blue (primary-container) on hover */
.eagle-tile-helpline:hover {
    background-color: var(--eagle-primary-container) !important;
}

.eagle-tile-helpline:hover .eagle-tile-icon {
    color: var(--eagle-tertiary-fixed) !important;
    transform: scale(1.1);
}

.eagle-tile-helpline:hover .eagle-tile-title {
    color: #ffffff !important;
}

.eagle-tile-helpline:hover .eagle-tile-text {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Tile 3 — gold (tertiary) on hover */
.eagle-tile-law:hover {
    background-color: var(--eagle-tertiary) !important;
}

.eagle-tile-law:hover .eagle-tile-icon {
    color: #ffffff !important;
    transform: scale(1.1);
}

.eagle-tile-law:hover .eagle-tile-title {
    color: #ffffff !important;
}

.eagle-tile-law:hover .eagle-tile-text {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Card-style block anchor links — prevent Bootstrap underline/color defaults */
a.group,
a {
    color: inherit;
    text-decoration: none;
}

a.group:hover,
a:hover {
    color: inherit;
    text-decoration: none;
}

/* Topographic pattern texture */
.topo-pattern {
    background-image: radial-gradient(#ffffff 0.5px, transparent 0.5px);
    background-size: 24px 24px;
    opacity: 0.05;
}

/* Grain texture for admin sidebar */
.grain-texture {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.02;
}

/* Text shadow utility */
.text-shadow-sm {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Selection colors */
::selection {
    background: #FE6B00;
    color: #fff;
}

/* Focus ring for accessibility */
*:focus-visible {
    outline: 2px solid #FE6B00;
    outline-offset: 2px;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #c4c6ce;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #74777e;
}

/* Telugu line-height fix */
.font-telugu {
    line-height: 1.6;
}

/* Print styles */
@media print {

    header,
    footer,
    nav,
    .no-print {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
    }
}

/* Skip to content link */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: #FE6B00;
    color: #fff;
    padding: 8px 16px;
    z-index: 100;
    font-weight: bold;
    transition: top 0.2s;
}

.skip-to-content:focus {
    top: 0;
}

/* Glassmorphism nav on scroll */
.nav-scrolled {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

/* ── Eagle Admin Sidebar ─────────────────────────────── */
.sidebar-eagle {
    background: linear-gradient(180deg, #06112a 0%, #09193e 40%, #060e22 100%);
    border-right: 1px solid rgba(80, 160, 255, 0.15);
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.5), inset -1px 0 0 rgba(80, 160, 255, 0.08);
    overflow: hidden;
}

/* Ambient right-edge glow */
.sidebar-eagle::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg,
            transparent 0%,
            rgba(80, 160, 255, 0.5) 20%,
            rgba(120, 180, 255, 0.8) 50%,
            rgba(80, 160, 255, 0.5) 80%,
            transparent 100%);
    box-shadow: 0 0 12px 1px rgba(80, 160, 255, 0.3);
}

/* Top highlight bar */
.sidebar-top-glow {
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            rgba(120, 180, 255, 0.7),
            rgba(255, 255, 255, 0.5),
            rgba(120, 180, 255, 0.7),
            transparent);
    box-shadow: 0 0 10px 1px rgba(100, 180, 255, 0.5);
}

/* Background nebula glow */
.sidebar-eagle::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -30%;
    width: 160%;
    height: 60%;
    background: radial-gradient(ellipse, rgba(20, 80, 200, 0.12) 0%, transparent 65%);
    pointer-events: none;
}

/* Logo */
.sidebar-logo-wrap {
    position: relative;
    flex-shrink: 0;
}

.sidebar-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    filter:
        drop-shadow(0 4px 16px rgba(30, 100, 255, 0.55)) drop-shadow(0 1px 6px rgba(0, 0, 0, 0.7));
    animation: sidebarLogoPulse 3.5s ease-in-out infinite;
}

@keyframes sidebarLogoPulse {

    0%,
    100% {
        filter: drop-shadow(0 4px 16px rgba(30, 100, 255, 0.55)) drop-shadow(0 1px 6px rgba(0, 0, 0, 0.7));
    }

    50% {
        filter: drop-shadow(0 4px 24px rgba(30, 140, 255, 0.80)) drop-shadow(0 1px 6px rgba(0, 0, 0, 0.7));
    }
}

/* Branding text */
.sidebar-brand-title {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    color: #fff;
    text-shadow: 0 0 20px rgba(100, 180, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
    line-height: 1.1;
}

.sidebar-brand-sub {
    font-size: 0.5rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(160, 200, 255, 0.45);
    line-height: 1.6;
}

/* Divider */
.sidebar-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(80, 140, 255, 0.35), transparent);
    margin: 0 0.25rem;
}

/* Nav links — base */
.sidebar-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    margin: 0 0.375rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.825rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
}

/* Inactive state */
.sidebar-inactive {
    color: rgba(180, 210, 255, 0.6);
}

.sidebar-inactive .sidebar-icon {
    color: rgba(100, 160, 255, 0.45);
}

.sidebar-inactive:hover {
    background: rgba(30, 80, 180, 0.15);
    color: rgba(210, 230, 255, 0.9);
    box-shadow: inset 0 0 0 1px rgba(80, 160, 255, 0.12);
}

.sidebar-inactive:hover .sidebar-icon {
    color: rgba(100, 180, 255, 0.75);
}

/* Active state — blue glow pill */
.sidebar-active {
    background: linear-gradient(135deg, rgba(26, 92, 218, 0.55) 0%, rgba(14, 63, 168, 0.65) 100%);
    border: 1px solid rgba(80, 160, 255, 0.35);
    color: #e8f2ff;
    box-shadow:
        0 0 0 1px rgba(80, 160, 255, 0.15) inset,
        0 4px 20px rgba(20, 80, 220, 0.35),
        0 0 12px rgba(30, 100, 255, 0.15);
}

.sidebar-active .sidebar-icon {
    color: rgba(140, 200, 255, 0.95);
}

/* Active left accent bar */
.sidebar-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, #4aa8ff, #1e6fff);
    box-shadow: 0 0 8px rgba(80, 160, 255, 0.8);
}

/* Nav icon */
.sidebar-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: color 0.2s;
}

/* Section label */
.sidebar-section-label {
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(201, 168, 76, 0.6);
    padding: 1rem 1.375rem 0.4rem;
}

/* Footer */
.sidebar-footer {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(80, 140, 255, 0.1);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(100, 160, 255, 0.3);
}

/* Scrollbar inside sidebar */
.sidebar-nav::-webkit-scrollbar {
    width: 3px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(80, 160, 255, 0.2);
    border-radius: 2px;
}

/* High contrast mode */
@media (forced-colors: active) {
    .sidebar-active {
        border: 2px solid CanvasText;
    }
}

/* ── DataTables — Sentinel overrides ───────────────────────── */

/* Default row padding for all DataTables-rendered tbody cells */
.dataTables_wrapper table tbody td {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

/* Views supply custom search inputs; hide the built-in controls */
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
    display: none !important;
}

/* Info text */
.dataTables_wrapper .dataTables_info {
    font-size: 12px;
    color: #74777e;
    padding: 12px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(0, 0, 0, 0.01);
    padding-top: 0;
    padding-bottom: 0;
    line-height: 44px;
}

/* ==========================================================================
   ULTIMATE DATA-TABLES PAGINATION OVERRIDE (Capsule Design)
   ========================================================================== */

/* Outer Wrapper Management */
div.dataTables_wrapper div.dataTables_paginate {
    padding: 24px 16px !important;
    margin-top: 16px !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
    background: #ffffff !important;
}

/* Reset ALL pagination elements to blank slates */
div.dataTables_wrapper .dataTables_paginate .paginate_button,
div.dataTables_wrapper .dataTables_paginate .paginate_button.page-item,
div.dataTables_wrapper .dataTables_paginate .paginate_button.page-link {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    outline: none !important;
}

/* Arrow Navigation Circles */
div.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
div.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 50% !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    color: #64748b !important;
    font-size: 0 !important;
    /* Hide the text "Previous" / "Next" */
    position: relative !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

div.dataTables_wrapper .dataTables_paginate .paginate_button.previous::before,
div.dataTables_wrapper .dataTables_paginate .paginate_button.next::before {
    font-family: "Material Symbols Outlined" !important;
    font-size: 24px !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    line-height: 1 !important;
}

div.dataTables_wrapper .dataTables_paginate .paginate_button.previous::before {
    content: "chevron_left" !important;
}

div.dataTables_wrapper .dataTables_paginate .paginate_button.next::before {
    content: "chevron_right" !important;
}

div.dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover:not(.disabled),
div.dataTables_wrapper .dataTables_paginate .paginate_button.next:hover:not(.disabled) {
    border-color: #FE6B00 !important;
    color: #FE6B00 !important;
    background-color: #fff8f5 !important;
    transform: scale(1.08) !important;
    box-shadow: 0 4px 12px rgba(254, 107, 0, 0.1) !important;
}

div.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.25 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* The Numbers Container (SaaS-style Capsule) */
div.dataTables_wrapper .dataTables_paginate>span {
    display: inline-flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 100px !important;
    padding: 3px !important;
    gap: 1px !important;
    margin: 0 4px !important;
}

/* Individual Number Buttons within the Capsule */
div.dataTables_wrapper .dataTables_paginate>span .paginate_button,
div.dataTables_wrapper .dataTables_paginate .page-item .page-link,
div.dataTables_wrapper .dataTables_paginate .page-item .paginate_button {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    color: #64748b !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

div.dataTables_wrapper .dataTables_paginate>span .paginate_button:hover:not(.current) {
    color: #FE6B00 !important;
    background: #f8fafc !important;
}

/* THE ACTIVE CIRCLE (Current Page) */
div.dataTables_wrapper .dataTables_paginate>span .paginate_button.current,
div.dataTables_wrapper .dataTables_paginate .page-item.active .page-link,
div.dataTables_wrapper .dataTables_paginate .page-item.active .paginate_button {
    background: #000f22 !important;
    /* Premium Dark Contrast */
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 10px rgba(0, 15, 34, 0.2) !important;
    transform: scale(1.05) !important;
    z-index: 2 !important;
    border: none !important;
}

/* Ellipsis (...) Styling within Capsule */
div.dataTables_wrapper .dataTables_paginate .ellipsis {
    width: 30px !important;
    display: inline-flex !important;
    justify-content: center !important;
    color: #cbd5e1 !important;
    font-weight: 900 !important;
    font-size: 14px !important;
}

/* Footer row layout */
.dataTables_wrapper {
    display: flex;
    flex-direction: column;
}

.dataTables_wrapper .dt-bottom-row,
.dataTables_wrapper>div:last-child:not(.dataTables_scroll):not(table) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}

/* Processing indicator */
.dataTables_wrapper .dataTables_processing {
    background: rgba(255, 255, 255, 0.92);
    border: none !important;
    box-shadow: none !important;
    font-size: 13px;
    color: #74777e;
}

/* SweetAlert2 overrides */
.swal2-confirm {
    background: #FE6B00 !important;
}

.swal2-cancel {
    background: #74777e !important;
}

/* Toastr overrides */
.toast-success {
    background-color: #27AE60 !important;
}

.toast-error {
    background-color: #ba1a1a !important;
}

.toast-warning {
    background-color: #FE6B00 !important;
}

.toast-info {
    background-color: #0A2540 !important;
}

/* Pulse animation for helpline */
@keyframes helpline-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(254, 107, 0, 0.4);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(254, 107, 0, 0);
    }
}

.helpline-pulse {
    animation: helpline-pulse 2s ease-in-out infinite;
}

/* Chart.js container responsive */
.chart-container {
    position: relative;
    width: 100%;
}

/* High contrast mode support */
@media (forced-colors: active) {
    .sidebar-active {
        border: 2px solid CanvasText;
    }

    .helpline-pulse {
        border: 2px solid LinkText;
    }

    *:focus-visible {
        outline: 3px solid Highlight;
    }
}

/* Screen reader only utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Mobile responsive fixes */
@media (max-width: 640px) {
    .max-w-screen-2xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .font-headline {
        word-break: break-word;
    }

    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Ensure minimum touch target size (WCAG 2.5.8) */
@media (pointer: coarse) {

    a,
    button,
    [role="button"],
    input[type="submit"],
    select {
        min-height: 44px;
        min-width: 44px;
    }

    input[type="radio"],
    input[type="checkbox"] {
        min-height: 24px;
        min-width: 24px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .animate-pulse {
        animation: none !important;
    }

    .animate-ping {
        animation: none !important;
    }
}

/* Hide CKEditor powered-by branding */
.ck-powered-by {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   EAGLE UI ENRICHMENT & MISSING UTILITIES
   v2.0 — fills empty spaces, group-hover system, visual depth patterns
   All classes are CSP-safe (no inline styles, no !important abuse).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Aspect ratio utilities ── */
.aspect-\[16\/10\] {
    aspect-ratio: 16 / 10 !important;
}

.aspect-\[4\/3\] {
    aspect-ratio: 4 / 3 !important;
}

.aspect-\[3\/2\] {
    aspect-ratio: 3 / 2 !important;
}

/* ── Negative positioning (home.php, about.php decorative elements) ── */
.-right-1 {
    right: -0.25rem !important;
}

.-bottom-1 {
    bottom: -0.25rem !important;
}

.-right-4 {
    right: -1rem !important;
}

.-bottom-4 {
    bottom: -1rem !important;
}

.-left-6 {
    left: -1.5rem !important;
}

.-top-10 {
    top: -2.5rem !important;
}

.-right-10 {
    right: -2.5rem !important;
}

.-bottom-6 {
    bottom: -1.5rem !important;
}

.-left-4 {
    left: -1rem !important;
}

/* ── Responsive utilities missing from eagle-theme.css ── */
@media (min-width: 992px) {
    .lg\:w-72 {
        width: 18rem !important;
    }

    .lg\:top-28 {
        top: 7rem !important;
    }

    .lg\:sticky {
        position: sticky !important;
    }
}

/* ── Group-hover system (replaces Tailwind group-hover: prefix) ── */
.group:hover .group-hover\:scale-105 {
    transform: scale(1.05) !important;
}

.group:hover .group-hover\:text-secondary {
    color: var(--eagle-secondary) !important;
}

.group:hover .group-hover\:bg-secondary {
    background-color: var(--eagle-secondary) !important;
}

.group:hover .group-hover\:text-white {
    color: #fff !important;
}

.group:hover .group-hover\:shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

.group:hover .group-hover\:grayscale-0 {
    filter: grayscale(0%) !important;
}

.group:hover .group-hover\:-translate-y-1 {
    transform: translateY(-0.25rem) !important;
}

.group:hover .group-hover\:opacity-100 {
    opacity: 1 !important;
}

.group:hover .group-hover\:scale-110 {
    transform: scale(1.10) !important;
}

/* Legacy hyphenated group-hover (used in knowledge-base, news index) */
.group:hover .group-hover-text-secondary {
    color: var(--eagle-secondary) !important;
}

.group:hover .group-hover-bg-secondary {
    background-color: var(--eagle-secondary) !important;
}

.group:hover .group-hover-text-white {
    color: #fff !important;
}

.group:hover .group-hover-translate-x {
    transform: translateX(4px) !important;
}

/* ── Hover utilities for Bootstrap pages ── */
.hover-translate-y:hover {
    transform: translateY(-4px) !important;
}

.hover-translate-x:hover {
    transform: translateX(4px) !important;
}

.hover-translate-x-neg:hover {
    transform: translateX(-4px) !important;
}

.translate-y-hover:hover {
    transform: translateY(-4px) !important;
}

.hover-shadow-lg:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10) !important;
}

.hover-shadow-xl:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10) !important;
}

/* ── Pixel-specific width/height (used in contact, report forms, knowledge-base) ── */
.w-40-px {
    width: 40px !important;
}

.h-40-px {
    height: 40px !important;
}

.w-60-px {
    width: 60px !important;
}

.h-60-px {
    height: 60px !important;
}

.w-70-px {
    width: 70px !important;
}

.h-70-px {
    height: 70px !important;
}

.w-80-px {
    width: 80px !important;
}

.h-80-px {
    height: 80px !important;
}

/* ── Eagle label & tracking utilities ── */
.eagle-label-xs {
    font-size: 0.6875rem !important;
    line-height: 1.25 !important;
}

.eagle-tracking-widest {
    letter-spacing: 0.2em !important;
}

.eagle-tracking-wide {
    letter-spacing: 0.1em !important;
}

.eagle-tracking-wider {
    letter-spacing: 0.15em !important;
}

/* ── Line-height utilities ── */
.line-height-1-2 {
    line-height: 1.2 !important;
}

.line-height-1-4 {
    line-height: 1.4 !important;
}

.line-height-1-6 {
    line-height: 1.6 !important;
}

/* ── Z-index & transform extras ── */
.eagle-z-2 {
    z-index: 2 !important;
    position: relative !important;
}

.eagle-z-10 {
    z-index: 10 !important;
}

.eagle-rotate-12 {
    transform: rotate(12deg) !important;
}

/* ── Misc utilities ── */
.active-opacity {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.active-opacity:hover {
    opacity: 0.9;
}

.select-all {
    user-select: all !important;
}

.fs-7 {
    font-size: 0.75rem !important;
}

/* ── Divide-x (horizontal child dividers, used in social info bars) ── */
.divide-x> :not([hidden])~ :not([hidden]) {
    border-left-width: 1px !important;
    border-left-style: solid !important;
    border-left-color: var(--eagle-outline-variant) !important;
}

.divide-x.divide-outline-variant\/30> :not([hidden])~ :not([hidden]) {
    border-left-color: rgba(196, 198, 206, 0.3) !important;
}

/* ════════════════════════════════════════════════════════════
   SECTION VISUAL ENRICHMENT SYSTEM
   Reusable patterns applied across all public-facing pages.
   ════════════════════════════════════════════════════════════ */

/* ── Dot-grid background overlay ── */
.sct-bg-dots {
    position: relative;
}

.sct-bg-dots::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(0, 15, 34, 0.035) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}

.sct-bg-dots>* {
    position: relative;
    z-index: 1;
}

/* ── Warm soft background (off-white / light orange tint) ── */
.sct-warm {
    background: linear-gradient(160deg, #fffaf6 0%, #fff7f2 40%, #fef9f7 100%);
}

/* ── Neutral cool background ── */
.sct-neutral {
    background: linear-gradient(160deg, #f4f4f2 0%, #f9f9f7 50%, #f4f4f2 100%);
}

/* ── Subtle white with faint gradient ── */
.sct-white {
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}

/* ── Orange accent top bar ── */
.sct-accent-top {
    position: relative;
}

.sct-accent-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--eagle-secondary) 25%, var(--eagle-secondary) 75%, transparent);
    z-index: 1;
}

/* ── Glow circle decorators ── */
.sct-glow-orange {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(254, 107, 0, 0.07) 0%, transparent 70%);
    filter: blur(60px);
    z-index: 0;
}

.sct-glow-navy {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(10, 37, 64, 0.05) 0%, transparent 70%);
    filter: blur(60px);
    z-index: 0;
}

/* ── Section overline label ── */
.sct-overline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.625rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--eagle-secondary);
    margin-bottom: 0.5rem;
}

.sct-overline::before {
    content: '';
    display: inline-block;
    width: 1.75rem;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    flex-shrink: 0;
}

/* ── Heading accent bar below h2/h3 ── */
.sct-accent-bar {
    display: block;
    width: 3rem;
    height: 3px;
    background: var(--eagle-secondary);
    border-radius: 2px;
    margin-top: 0.75rem;
}

/* ── Faded watermark icon ── */
.sct-watermark-icon {
    position: absolute;
    font-size: 16rem;
    line-height: 1;
    opacity: 0.025;
    pointer-events: none;
    user-select: none;
    color: var(--eagle-primary);
}

/* ════════════════════════════════════════════════════════════
   CARD ENRICHMENT SYSTEM
   ════════════════════════════════════════════════════════════ */

/* ── Base enriched card ── */
.eagle-card-enriched {
    background: #fff;
    border: 1px solid rgba(196, 198, 206, 0.18);
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    overflow: hidden;
}

.eagle-card-enriched:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
    transform: translateY(-3px);
}

/* ── Left orange accent border card ── */
.eagle-card-accent-left {
    border-left: 3px solid var(--eagle-secondary) !important;
}

/* ── Orange icon accent block ── */
.eagle-icon-accent {
    width: 3rem;
    height: 3rem;
    border-radius: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--eagle-secondary);
    color: #fff;
    flex-shrink: 0;
}

.eagle-icon-accent--sm {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
}

.eagle-icon-accent--navy {
    background-color: var(--eagle-primary-container);
}

.eagle-icon-accent--gold {
    background-color: var(--eagle-tertiary-container);
    color: var(--eagle-on-tertiary-container);
}

/* ════════════════════════════════════════════════════════════
   CAMPAIGN & NEWS CARD COMPONENTS
   ════════════════════════════════════════════════════════════ */

/* ── Campaign card ── */
.eagle-campaign-card {
    display: block;
    border-radius: 1rem;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(196, 198, 206, 0.18);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.eagle-campaign-card:hover {
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
    color: inherit;
    text-decoration: none;
}

.eagle-campaign-card-img-wrap {
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--eagle-surface-container);
    position: relative;
}

.eagle-campaign-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.eagle-campaign-card:hover .eagle-campaign-card-img {
    transform: scale(1.06);
}

.eagle-campaign-card-title {
    transition: color 0.2s ease;
}

.eagle-campaign-card:hover .eagle-campaign-card-title {
    color: var(--eagle-secondary) !important;
}

/* ── News card ── */
.eagle-news-card {
    display: block;
    border-radius: 1rem;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(196, 198, 206, 0.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.eagle-news-card:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
    transform: translateY(-3px);
    color: inherit;
    text-decoration: none;
}

.eagle-news-card-img-wrap {
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--eagle-surface-container);
    position: relative;
}

.eagle-news-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.eagle-news-card:hover .eagle-news-card-img {
    transform: scale(1.05);
}

.eagle-news-card-title {
    transition: color 0.2s ease;
}

.eagle-news-card:hover .eagle-news-card-title {
    color: var(--eagle-secondary) !important;
}

/* ════════════════════════════════════════════════════════════
   PLEDGE / CTA STRIP
   ════════════════════════════════════════════════════════════ */

.eagle-pledge-strip {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0a2540 0%, #0f2e50 40%, #07192e 100%);
    padding: 5rem 2rem;
}

.eagle-pledge-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}

.eagle-pledge-strip>* {
    position: relative;
    z-index: 1;
}

/* ════════════════════════════════════════════════════════════
   STATS SECTION ENRICHMENT (home.php)
   ════════════════════════════════════════════════════════════ */

.impact-stats-section {
    background: #fff;
    position: relative;
}

.impact-stats-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(0, 15, 34, 0.02) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}

/* ════════════════════════════════════════════════════════════
   SECTION PADDING STANDARDIZATION
   ════════════════════════════════════════════════════════════ */

.eagle-section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
    overflow: hidden;
}

@media (min-width: 992px) {
    .eagle-section {
        padding-top: 4.5rem;
        padding-bottom: 4.5rem;
    }
}

/* ── Social section heading (Follow Us) ── */
.eagle-social-section {
    padding: 5rem 2rem;
    /* background: linear-gradient(180deg, #f9f9f7 0%, #f4f4f2 100%); */
    position: relative;
}