/* ═══════════════════════════════════════════════════════════════════════════
   DGR RMS — LAYOUT THEME  (header · navigation · body · footer · global polish)
   Load this AFTER your existing site css (and after bootstrap) so it wins:
       <link rel="stylesheet" href="css/layout-theme.css" />
   All sizes are in px on purpose: the legacy css sets  html { font-size: 10px }
   so rem-based sizes would come out 37% smaller than expected.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --navy-950: #071733;
    --navy-900: #0a1f44;
    --navy-800: #0f2e63;
    --navy-700: #143c82;
    --blue-600: #1d4ed8;
    --blue-500: #2563eb;
    --accent: #f5a623;
    --ink: #1f2937;
    --muted: #64748b;
    --line: #e2e8f0;
    --surface: #ffffff;
    --bg: #f3f6fb;
    --radius: 12px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --shadow-md: 0 6px 18px rgba(16, 24, 40, .10);
}

/* ───────── Base ───────── */
html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.55;
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: #1e293b;
}

a {
    color: #0b5ed7;
}

    a:hover, a:focus {
        color: var(--navy-700);
    }

    a:focus {
        outline: none;
    }

:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .45);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection {
    background: rgba(37, 99, 235, .22);
}

/* slim, modern scrollbar (legacy one was 1em wide and near-black) */
body::-webkit-scrollbar {
    width: 12px;
}

body::-webkit-scrollbar-track {
    background: #e9eef6;
    box-shadow: none;
}

body::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 8px;
    border: 3px solid #e9eef6;
    outline: none;
}

    body::-webkit-scrollbar-thumb:hover {
        background: #64748b;
    }

/* ───────── Cards (legacy css gave every card 10px left padding, a black shadow and 30px bottom margin) ───────── */
body .card {
    padding: 0;
    margin-top: 0;
    margin-bottom: 16px;
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

    body .card.border-0 {
        border: 0;
    }

    body .card:hover {
        box-shadow: var(--shadow-sm);
    }

/* ───────── Controls ───────── */
body .btn {
    border-radius: 8px;
    font-weight: 500;
}

body .btn-lg {
    border-radius: 10px;
}

body .form-control, body .form-select {
    border-radius: 8px;
}

    body .form-control:focus, body .form-select:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, .18);
    }

body .progress {
    box-shadow: none;
    background: #e9eef6;
}

body .badge {
    font-weight: 600;
}

/* ═══════════════ APP SHELL ═══════════════ */
.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/*.app-main {
    flex: 1 0 auto;
}*/

.app-body {
    max-width: 1760px;
    margin: 0 auto;
}

.app-wrap {
    max-width: 1760px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ═══════════════ HEADER ═══════════════ */
.app-header {
    background: #fff;
}

.app-flag {
    height: 4px;
    background: linear-gradient(90deg, #ff9933 0 33.33%, #ffffff 33.33% 66.66%, #138808 66.66% 100%);
}

/* utility bar */
.app-utility {
    background: var(--navy-900);
    color: #e2e8f0;
}

    .app-utility .app-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 42px;
        flex-wrap: wrap;
        padding-top: 3px;
        padding-bottom: 3px;
    }

.app-login {
    color: #e2e8f0;
    font-size: 13.5px;
}

    .app-login a, .app-login .btn-link {
        color: #e2e8f0;
    }

        .app-login a:hover {
            color: #fff;
        }

.app-util-links {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.app-util-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #cbd5e1;
    font-size: 13px;
    padding: 5px 10px;
    border-radius: 8px;
    text-decoration: none;
    line-height: 1.2;
}

    .app-util-link:hover {
        background: rgba(255, 255, 255, .12);
        color: #fff;
        text-decoration: none;
    }

.app-util-sep {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, .22);
    margin: 0 4px;
}

.app-fs {
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 8px;
    overflow: hidden;
}

    .app-fs a {
        color: #e2e8f0;
        font-size: 13px;
        font-weight: 600;
        padding: 4px 11px;
        text-decoration: none;
        line-height: 1.3;
        border-right: 1px solid rgba(255, 255, 255, .18);
    }

        .app-fs a:last-child {
            border-right: 0;
        }

        .app-fs a:hover {
            background: rgba(255, 255, 255, .16);
            color: #fff;
            text-decoration: none;
        }

    .app-fs sup {
        font-size: 9px;
        top: -.6em;
        margin-left: 1px;
    }

/* brand bar */
.app-brand {
    background: #fff;
    border-bottom: 1px solid var(--line);
}

    .app-brand .app-wrap {
        display: flex;
        align-items: center;
        gap: 0px;
        padding-top: 15px;
        padding-bottom: 10px;
        flex-wrap: wrap;
    }

.app-brand-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.app-emblem img {
    height: 90px;
    width: auto;
    display: block;
}

.app-brand-hi {
    font-size: 30.5px;
    color: var(--navy-700);
    line-height: 1.3;
}

.app-brand-en {
    display: block;
    font-size: 26px;
    font-weight: 700;
    color: var(--navy-900);
    line-height: 1.2;
    text-decoration: none;
    letter-spacing: -.2px;
}

    .app-brand-en:hover {
        color: var(--blue-600);
        text-decoration: none;
    }

.app-brand-dept {
    font-size: 15.5px;
    color: darkblue;
    margin-top: 2px;
}

.app-azadi {
    max-height: 72px;
    width: auto;
    margin: 0 auto;
}

.app-brand-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.app-logos {
    display: flex;
    align-items: center;
    gap: 14px;
}

    .app-logos img {
        height: 54px;
        width: auto;
        display: block;
    }

.app-visit {
    align-items: center;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid var(--line);
    border: 2px solid red;
    border-radius: 10px;
    padding: 5px 4px;
}

.app-visit-ic {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff4de;
    color: #b45309;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.app-visit-t {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    line-height: 1.3;
}

.app-visit-d {
    font-size: 13px;
    color: var(--ink);
    line-height: 1.4;
    font-weight: 500;
}

/* ═══════════════ NAVIGATION ═══════════════ */
.app-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: mediumblue;
    box-shadow: 0 3px 10px rgba(7, 23, 51, .28);
}

    .app-nav .app-wrap {
        overflow-x: auto;
        scrollbar-width: none;
    }

        .app-nav .app-wrap::-webkit-scrollbar {
            display: none;
        }

    .app-nav ul {
        display: flex;
        align-items: stretch;
        gap: 2px;
        list-style: none;
        margin: 0;
        padding: 0;
        white-space: nowrap;
    }

    .app-nav li {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .app-nav a {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        color: #dbe4f3;
        font-size: 14.5px;
        font-weight: 500;
        line-height: 1.2;
        padding: 15px 16px;
        text-decoration: none;
        border-bottom: 3px solid transparent;
        transition: background .15s ease, color .15s ease, border-color .15s ease;
    }

        .app-nav a:hover {
            background: rgba(255, 255, 255, .09);
            color: #fff;
            text-decoration: none;
        }

        .app-nav a.active {
            color: #fff;
            background: rgba(255, 255, 255, .12);
            border-bottom-color: var(--accent);
        }

    .app-nav .nav-icon {
        margin: 0;
        font-size: 15px;
        opacity: .92;
        vertical-align: baseline;
    }

    .app-nav .app-ext {
        font-size: 10.5px;
        opacity: .6;
        margin-left: -2px;
    }

/* ═══════════════ FOOTER (restyles the legacy footer markup) ═══════════════ */
footer {
    float: none !important;
    width: 100%;
    flex-shrink: 0;
    background: var(--navy-900);
    color: #cbd5e1;
    margin-top: 8px;
}

    footer .footer-top {
        background: var(--navy-900);
        padding: 28px 0 18px;
    }

        footer .footer-top h4, footer .footer-top h5, footer .footer-top p, footer .footer-top li, footer .footer-top span {
            color: #cbd5e1;
        }

        footer .footer-top h4 {
            font-size: 16px;
            font-weight: 600;
            color: #fff;
        }

        footer .footer-top ul li a {
            color: #cbd5e1;
            background-image: none;
            padding-left: 0;
        }

            footer .footer-top ul li a:hover {
                color: var(--accent);
                padding-left: 4px;
                text-decoration: none;
            }

    footer a {
        color: #cbd5e1;
    }

        footer a:hover {
            color: var(--accent);
        }

    footer .footer-bottom {
        background: var(--navy-950);
        color: #94a3b8;
        font-size: 13px;
    }

        footer .footer-bottom p {
            font-size: 13px;
        }

        footer .footer-bottom ul li a {
            color: #cbd5e1;
            border-left-color: rgba(255, 255, 255, .2);
            line-height: 1.2;
        }

            footer .footer-bottom ul li a:hover {
                color: var(--accent);
            }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width: 991px) {
    .app-brand-en {
        font-size: 21px;
    }

    .app-emblem img {
        height: 60px;
    }

    .app-logos img {
        height: 44px;
    }
}

@media (max-width: 575px) {
    .app-wrap {
        padding: 0 12px;
    }

    .app-brand-left {
        gap: 10px;
    }

    .app-brand-en {
        font-size: 18px;
    }

    .app-brand-dept {
        font-size: 12px;
    }

    .app-brand-right {
        margin-left: 0;
    }

    .app-nav a {
        padding: 13px 12px;
        font-size: 13.5px;
    }
}

/* ═══════════════ PRINT ═══════════════ */
@media print {
    .app-flag, .app-utility, .app-brand, .app-nav, footer {
        display: none !important;
    }

    .app-body {
        max-width: none;
        padding: 0;
    }
}
@keyframes hmFadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes hmTextFade {
    from {
        opacity: 0;
        filter: blur(3px);
    }

    to {
        opacity: 1;
        filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hm-text-reveal {
        opacity: 1;
        animation: none;
        filter: none;
    }
}