/* =====================================================================
   SIPPM Poltesa — public site + auth pages polish (MDB base).
   Loaded LAST in layouts/app.blade.php and layouts/app-auth.blade.php.
   Additive: modernises the existing navy/teal/gold identity — Plus
   Jakarta Sans headings, Inter body, softer radii & shadows, calmer
   surfaces. Remove the <link> to revert.
   ===================================================================== */

:root {
    --navy: #1c3d5a;
    --navy-dark: #0f2334;
    --teal: #12707f;
    --teal-soft: #145c6e;
    --gold: #c1922f;
    --bg: #f4f6f8;
    --ink: #1f2a37;
    --muted: #667085;
    --line: #e6e9ef;
    --r: 14px;
    --r-lg: 20px;
    --sh-1: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --sh-2: 0 10px 30px rgba(16, 24, 40, .10);
}

body {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.font-heading, .navbar-brand, .h1, .h2, .h3, .h4 {
    font-family: 'Plus Jakarta Sans', 'Poppins', system-ui, sans-serif;
    letter-spacing: -.015em;
}

/* ---- Navbar --------------------------------------------------- */

.main-navbar {
    background: rgba(255, 255, 255, .9);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 10px rgba(16, 24, 40, .03);
}

.main-navbar .brand-mark {
    border-radius: 9px;
    background: #fff;
    padding: 3px;
    box-shadow: var(--sh-1);
}

.main-navbar .brand-name {
    color: var(--navy);
}

.main-navbar .nav-link.active::after {
    height: 3px;
    border-radius: 3px;
}

/* ---- Buttons -------------------------------------------------- */
.btn-brand,
.btn-login {
    background: var(--navy);
    border-color: var(--navy);
    box-shadow: 0 6px 16px rgba(28, 61, 90, .22);
    transition: transform .06s ease, box-shadow .16s ease, background .16s ease;
}

.btn-brand:hover,
.btn-login:hover {
    background: var(--navy-dark);
    border-color: var(--navy-dark);
    box-shadow: 0 10px 22px rgba(28, 61, 90, .3);
}

.btn-brand:active,
.btn-login:active {
    transform: translateY(1px);
}

.btn-brand-outline:hover {
    box-shadow: 0 6px 16px rgba(28, 61, 90, .18);
}

.btn, .btn-brand, .btn-brand-outline, .btn-ghost {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ---- Hero --------------------------------------------------- */
.hero {
    background: linear-gradient(120deg, var(--navy) 0%, var(--teal) 100%) !important;
}

.hero h1 {
    font-size: 2.7rem;
    line-height: 1.12;
}

@media (max-width: 767px) {
    .hero h1 { font-size: 1.9rem; }
}

.hero .btn-gold {
    box-shadow: 0 8px 22px rgba(193, 146, 47, .35);
}

/* ---- Cards ------------------------------------------------- */
.feature-card,
.news-card {
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-1);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.feature-card:hover,
.news-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-2);
    border-color: transparent;
}

.feature-card .icon-wrap {
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(18, 112, 127, .14), rgba(28, 61, 90, .1));
    color: var(--teal);
}

.news-card img {
    height: 180px;
}

.section-eyebrow {
    color: var(--teal);
}

/* ---- CTA + footer --------------------------------------- */
.cta-strip {
    background: linear-gradient(120deg, var(--navy-dark) 0%, var(--teal-soft) 130%);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
}

.site-footer {
    background: var(--navy-dark);
}

/* ---- Forms --------------------------------------------- */
.form-control {
    border-radius: 10px;
    border-color: var(--line);
}

.form-control:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 .2rem rgba(18, 112, 127, .15);
}

.card {
    border-radius: var(--r);
    border-color: var(--line);
    box-shadow: var(--sh-1);
}

table.dataTable thead th {
    text-transform: uppercase;
    font-size: .74rem;
    letter-spacing: .05em;
    color: var(--muted);
}

/* ---- Login card ------------------------------------------ */
.login-card {
    border-radius: var(--r-lg) !important;
    box-shadow: 0 24px 60px rgba(15, 35, 52, .4) !important;
}

.login-card .brand-side {
    background: linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%) !important;
}

.login-card .brand-side img {
    background: #fff;
    border-radius: 12px;
    padding: 8px;
    width: 64px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}

.btn-login {
    border-radius: 10px !important;
}

/* ---- Auth layout (register / password) ------------------ */
.auth-shell {
    min-height: 100vh;
    background: linear-gradient(125deg, var(--navy) 0%, var(--teal) 100%);
    position: relative;
    overflow: hidden;
}

.auth-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .09) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    opacity: .5;
}

.auth-shell .navbar {
    position: relative;
    background: rgba(255, 255, 255, .92) !important;
    backdrop-filter: saturate(180%) blur(8px);
}

.auth-shell .card,
.auth-shell .card.bg-white {
    border: 0;
    border-radius: var(--r-lg);
    box-shadow: 0 24px 60px rgba(15, 35, 52, .4);
}