/* =========================
    ROOT VARIABLES (UNIFIED)
========================= */
:root {
    --bg-main: #f5f7fb;
    --bg-card: #ffffff;
    --bg-hover: #f1f5f9;

    --primary: #07294d;
    --primary-hover: #f19c29;
    --primary--scroll: #f19c29;

    --text-main: #07294d;
    --text-muted: #07294d;
    --text-sidebar: #fff;

    --border: #e2e8f0;

    --sidebar-bg: #07294d;
    --sidebar-bg-dark: #07294d;

    --placeholder-bg-light: #fffdf8;

    --primary-rgb: 210, 225, 240;
    --primary-hover-rgb: 255, 236, 210;

    --secondary-rgb: 225, 235, 245;       
    --secondary-hover-rgb: 245, 228, 233; 
    /* --secondary-rgb: 225, 235, 245;
    --secondary-hover-rgb: 255, 255, 255;*/
}
/* =========================
   GLOBAL
========================= */
body {
    font-family: 'Poppins', sans-serif;
  color: var(--text-main);
  font-weight: 400;

  background: 
    linear-gradient(
      135deg,
     /* rgba(7, 41, 77, 0.85),
      rgba(11, 79, 153, 0.75) */
       rgba(var(--secondary-rgb), 0.9),
  rgba(var(--secondary-hover-rgb), 0.6)
    ),
    url('/assets/logo/logiddn.png') no-repeat center center fixed;

  background-size: cover;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;

    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.1),
        rgba(0,0,0,0.3)
    );

    pointer-events: none;
}
/* =========================
   LOGIN CENTER
========================= */
.flex-column-fluid {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}


/* =========================
   LOGIN CENTER
========================= */
.flex-column-fluid {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* =========================
   LOGIN CARD (CLEAN)
========================= */
.w-lg-500px {
    background: rgba(255,255,255,0.97);
    border: 1px solid rgba(var(--secondary-rgb), 0.2);
    box-shadow:
        0 0.5rem 1rem rgba(0,0,0,0.25),
        0 8px 20px rgba(var(--secondary-rgb), 0.15)!important;
    padding: 40px;
    max-width: 450px;
    width: 100%;
    border: 2px solid rgba(241, 156, 41, 0.2);
    backdrop-filter: blur(4px); /* subtle only */
    animation: fadeInUp 0.6s ease;
    transition: 0.3s;
    
}

.w-lg-500px:hover {
    transform: translateY(-3px);
}
.institutionNameCenter span {
    display: block;
    font-size: 26px !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
    text-transform: capitalize !important;
    color: var(--primary) !important;
}
/* =========================
   TITLE
========================= */
.login-form h3 {
    text-align: center;
    font-weight: 700;
    color: var(--primary);
}

/* =========================
   INPUTS
========================= */
.form-control {
    background: #ffffff !important;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px;
}

.form-control::placeholder {
    color: #9ca3af;
}

.form-control:focus {
    border-color: #f19c29;
    box-shadow: 0 0 0 3px rgba(241, 156, 41, 0.2);
}

/* =========================
   BUTTONS
========================= */
/*.btn,
#kt_login_signin_submit {
    border-radius: 10px;
    font-weight: 600;
} */

#kt_login_signin_submit,
.btn-primary {
     background: linear-gradient(
        135deg,
        var(--primary)
    );
    border: none;
    color: #fff;
}

/*#kt_login_signin_submit:hover,
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(182, 91, 100, 0.35);
}*/
 #kt_login_signin_submit {
    background: linear-gradient(
        135deg,
        var(--primary)
    );

    border: none;
    color: #fff;
    border-radius: 5px;
    font-weight: 600;
}
.btn.btn-default {
    color: #B5B5C3;
    background-color: #07294d;
    border-color: #F3F6F9;
}
#kt_login_signin_submit:hover,.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.3);
}
/* =========================
   LINKS
========================= */
a {
    color: var(--primary);
}

a:hover {
    color: var(--primary-hover);
}

/* =========================
   SIDEBAR
========================= */
.aside {
    background: linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-dark));

}
.brand {
    background: linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-dark));
}
#kt_aside_menu {
    background: linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-dark));
    
}

#kt_aside_menu .menu-link {
    color: var(--text-sidebar);
    border-radius: 2px;
    margin: 6px;
    transition: 0.25s;
}

#kt_aside_menu .menu-link:hover {
    background: linear-gradient(90deg, var(--primary-hover), var(--primary));
    transform: translateX(6px);
}

#kt_aside_menu .menu-item-active > .menu-link {
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
}
.aside-menu .menu-nav > .menu-item > .menu-heading .menu-text, .aside-menu .menu-nav > .menu-item > .menu-link .menu-text {
    color: var(--text-sidebar);
}
.aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-heading .menu-text, .aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link .menu-text {
    color: var(--text-sidebar);
}
.aside .aside-menu.ps > .ps__rail-y > .ps__thumb-y:hover, .aside .aside-menu.ps > .ps__rail-y > .ps__thumb-y:focus {
    opacity: 1;
    background:var(--primary--scroll);
}
.aside .aside-menu.ps > .ps__rail-y > .ps__thumb-y {
    background:var(--primary--scroll);
    opacity: 1;
}
/* =========================
   SIDEBAR ICON + TEXT COLORS
========================= */

/* Default state */
#kt_aside_menu .menu-link {
    color: rgba(255,255,255,0.75);
}

#kt_aside_menu .menu-link .menu-icon {
    color: rgba(255,255,255,0.7);
    transition: 0.3s ease;
}

/* Hover state */
#kt_aside_menu .menu-link .menu-text{
        color: var(--text-sidebar);
}
#kt_aside_menu .menu-link:hover {
    color: #ffffff;
}

#kt_aside_menu .menu-link:hover .menu-text {
    color: #ffffff;
}

#kt_aside_menu .menu-link:hover .menu-icon {
    color: var(--accent); /* gold highlight */
}

/* Active / current page */
#kt_aside_menu .menu-item.menu-item-active > .menu-link,
#kt_aside_menu .menu-item.menu-item-here > .menu-link {
    background: linear-gradient(
        135deg,
        var(--primary),
        var(--primary-hover)
    );

    color: #ffffff;
}

/* Active icon + text */
#kt_aside_menu .menu-item-active .menu-icon,
#kt_aside_menu .menu-item-here .menu-icon {
    color: var(--accent); /* gold */
}

#kt_aside_menu .menu-item-active .menu-text,
#kt_aside_menu .menu-item-here .menu-text {
    color: #ffffff;
}
/* =========================
   NAVBAR
========================= */
#kt_header {
    background: #fff;
    border-bottom: 1px solid var(--border);
}

/* =========================
   CARDS
========================= */
.card {
    background: var(--bg-card);
    border-radius: 14px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    border: 1px solid var(--border);
}

.card:hover {
    transform: translateY(-3px);
}

/* =========================
   TABLES
========================= */
.table thead {
    /*background: rgba(182, 91, 100, 0.1);*/
    background: linear-gradient(
  135deg,
  rgba(var(--primary-rgb), 0.8),
  rgba(var(--primary-hover-rgb), 0.4)
);
}

.table-hover tbody tr:hover {
    background: var(--bg-hover);
}

/* =========================
   FORMS
========================= */
input, select, textarea {
    border-radius: 10px;
    border: 1px solid var(--border);
}

/* =========================
   FOOTER
========================= */
.PoweredByoptimum footer {
    color: #e2e8f0;
}

/* =========================
   SCROLLBAR
========================= */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary--scroll);
    border-radius: 10px;
}

/* =========================
   ANIMATION
========================= */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}