/* =====================================================================
   CMS OFFICE — Dr. RMLIMS — CONSOLIDATED SITE STYLESHEET
   Merged from: style.css, stylesheet.css, employee.css, resident.css,
   login.css. Loaded on every page so the whole site now uses a single
   stylesheet.css file.
   NOTE: login.css's page-only global rules (`body`, `body::before`,
   `body::after`) have been scoped to `body.login-page` so they only
   apply on the login screen — login.php's <body> tag now carries a
   `login-page` class for this to work.
===================================================================== */


/* ================================================================
   SHARED / ABOUT PAGE BASE (from style.css)
================================================================ */

/* =========================================================
   CMS OFFICE - COMMON WEBSITE CSS
   Dr. RMLIMS Lucknow
========================================================= */


/* =========================================================
   GLOBAL
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f4f8fc;
    color:#20364f;
    overflow-x:hidden;
}

a{
    text-decoration:none;
    color:inherit;
}

.container{
    width:min(92%,1400px);
    margin:auto;
}


/* =========================================================
   HEADER / NAVBAR
========================================================= */

header{
    width:100%;
    background:#ffffff;
    box-shadow:0 4px 20px rgba(0,0,0,.08);
    position:sticky;
    top:0;
    z-index:1000;
}

.navbar{
    min-height:92px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}


/* =========================================================
   BRAND
========================================================= */

.brand{
    display:flex;
    align-items:center;
    gap:15px;
}

.logo-circle{
    width:65px;
    height:65px;
    border-radius:50%;
    background:white;
    border:3px solid #174b78;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    box-shadow:
        0 5px 15px rgba(0,0,0,.15);
}

.logo-circle img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.logo-placeholder{
    font-size:30px;
    color:#0f4c81;
}

.brand-text h1{
    font-size:26px;
    letter-spacing:1px;
    font-weight:800;
    color:#203a59;
}

.brand-text h3{
    font-size:14px;
    font-weight:600;
}

.brand-text p{
    font-size:12px;
    color:#64748b;
    font-style:italic;
    margin-top:3px;
}


/* =========================================================
   NAVIGATION
========================================================= */

.nav-menu{
    display:flex;
    align-items:center;
    gap:12px;
}

.nav-menu a{
    padding:13px 18px;
    border-radius:10px;

    font-size:14px;
    font-weight:500;

    transition:.3s;

    color:#263b52;
}

.nav-menu a i{
    margin-right:7px;
}

.nav-menu a:hover{
    background:#edf5ff;
    color:#1461b8;
    transform:translateY(-2px);
}

.nav-menu .active{
    color:white;

    background:
        linear-gradient(
            135deg,
            #1465d9,
            #164fa6
        );

    box-shadow:
        0 8px 18px
        rgba(20,101,217,.28);
}

.login-btn{
    background:
        linear-gradient(
            135deg,
            #0d3e69,
            #16395d
        ) !important;

    color:white !important;

    box-shadow:
        0 8px 18px
        rgba(0,0,0,.15);
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.mobile-btn{
    display:none;
    font-size:25px;
    cursor:pointer;
}


/* =========================================================
   HOME HERO
========================================================= */

.hero{
    min-height:430px;

    position:relative;

    display:flex;
    align-items:center;

    background:
        linear-gradient(
            90deg,
            rgba(5,30,58,.92) 0%,
            rgba(5,45,82,.78) 35%,
            rgba(0,0,0,.08) 75%
        ),

      /* url("https://images.unsplash.com/photo-1586773860418-d37222d8fce3?auto=format&fit=crop&w=1800&q=90"); */
        url(./image/cmsoffice.jpg");
        
        

    background-size:cover;
    background-position:center;
}

.hero::after{
    content:"";

    position:absolute;

    bottom:-1px;
    left:0;

    width:100%;
    height:70px;

    background:#f4f8fc;

    clip-path:
        polygon(
            0 65%,
            20% 100%,
            50% 70%,
            75% 100%,
            100% 50%,
            100% 100%,
            0 100%
        );
}

.hero-content{
    position:relative;
    z-index:2;

    color:white;

    max-width:700px;

    padding:60px 0 100px;
}

.welcome{
    font-size:16px;
    margin-bottom:10px;
}

.welcome span{
    display:inline-block;

    width:50px;
    height:2px;

    background:#72c5ff;

    margin-left:10px;

    vertical-align:middle;
}

.hero h1{
    font-size:54px;
    font-weight:800;
    line-height:1.1;
    margin-bottom:10px;
}

.hero h2{
    font-size:20px;
    font-weight:600;
    margin-bottom:10px;
}

.hero .hindi{
    font-size:16px;
    margin-bottom:18px;
}

.hero p{
    max-width:620px;

    line-height:1.8;
    font-size:15px;

    color:#e2edf8;

    margin-bottom:25px;
}

.hero-btn{
    display:inline-flex;

    align-items:center;
    gap:10px;

    padding:15px 25px;

    background:
        linear-gradient(
            135deg,
            #1e75ec,
            #1457c5
        );

    color:white;

    border-radius:12px;

    font-weight:600;

    box-shadow:
        0 10px 25px rgba(0,0,0,.25);

    transition:.3s;
}

.hero-btn:hover{
    transform:translateY(-4px);
}

.hero-slogan{
    position:absolute;

    right:6%;
    bottom:105px;

    color:white;

    font-size:24px;

    font-style:italic;

    font-family:cursive;

    text-align:center;

    transform:rotate(-5deg);
}


/* =========================================================
   COMMON SECTION
========================================================= */

.section{
    padding:55px 0;
}


/* =========================================================
   SECTION TITLE
========================================================= */

.section-title{
    text-align:center;
    margin-bottom:30px;
}

.section-title small{
    display:block;

    color:#325d8e;

    letter-spacing:1px;

    font-size:12px;
}

.section-title h2{
    font-size:28px;
    color:#243d5a;
}

.section-title h2::before,
.section-title h2::after{

    content:"";

    display:inline-block;

    width:45px;
    height:2px;

    background:#3476bd;

    vertical-align:middle;

    margin:0 12px;
}


/* =========================================================
   SERVICES
========================================================= */

.services{
    display:grid;

    grid-template-columns:
        repeat(5,1fr);

    gap:22px;
}

.service-card{

    min-height:128px;

    border-radius:15px;

    padding:25px;

    color:white;

    position:relative;

    overflow:hidden;

    box-shadow:
        0 12px 25px rgba(0,0,0,.13);

    transition:.35s;
}

.service-card:hover{
    transform:
        translateY(-8px)
        scale(1.02);
}

.service-card i.main-icon{

    font-size:38px;

    position:absolute;

    top:25px;
    left:25px;

    opacity:.95;
}

.service-info{
    margin-left:65px;
}

.service-card h3{
    font-size:17px;
    margin-bottom:8px;
}

.service-card p{
    font-size:11px;
    line-height:1.6;
}

.arrow{

    position:absolute;

    right:15px;
    bottom:12px;

    width:28px;
    height:28px;

    background:white;

    color:#3267a0;

    border-radius:50%;

    display:flex;

    align-items:center;
    justify-content:center;
}

.employee{
    background:
        linear-gradient(
            135deg,
            #6474d7,
            #3978b8
        );
}

.resident{
    background:
        linear-gradient(
            135deg,
            #28a7a1,
            #087c7a
        );
}

.dak{
    background:
        linear-gradient(
            135deg,
            #f5a83a,
            #ff8b1e
        );
}

.about{
    background:
        linear-gradient(
            135deg,
            #9858d7,
            #6633af
        );
}

.login{
    background:
        linear-gradient(
            135deg,
            #df3b83,
            #bf1465
        );
}


/* =========================================================
   INFORMATION GRID
========================================================= */

.info-grid{

    display:grid;

    grid-template-columns:
        1.15fr 1.1fr 1.15fr;

    gap:20px;

    margin-top:28px;
}

.panel{

    background:white;

    border-radius:15px;

    padding:16px;

    box-shadow:
        0 10px 30px rgba(30,70,110,.09);
}

.panel h3{
    margin-bottom:10px;
    color:#243d5a;
}

.panel p{
    font-size:13px;

    line-height:1.55;

    color:#3e536b;
}


/* =========================================================
   ABOUT IMAGE
========================================================= */

.about-image{

    width:100%;

    height:120px;

    border-radius:10px;

    object-fit:cover;

    margin-bottom:10px;
}

.small-btn{

    display:inline-block;

    margin-top:12px;

    padding:8px 16px;

    border:1px solid #2c6db5;

    color:#2c6db5;

    border-radius:20px;

    font-size:12px;

    font-weight:600;
}


/* =========================================================
   ABOUT PAGE HERO
========================================================= */

.about-hero{

    min-height:420px;

    position:relative;

    display:flex;

    align-items:center;

    background:

        linear-gradient(
            90deg,
            rgba(5,30,58,.95) 0%,
            rgba(8,48,85,.82) 35%,
            rgba(0,0,0,.10) 75%
        );

        url("./image/cmsoffice_employee.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;
}

.about-hero::after{

    content:"";

    position:absolute;

    bottom:-1px;
    left:0;

    width:100%;
    height:80px;

    background:#f4f8fc;

    clip-path:
        polygon(
            0 60%,
            20% 100%,
            45% 70%,
            70% 100%,
            100% 55%,
            100% 100%,
            0 100%
        );
}

.about-hero-content{

    position:relative;

    z-index:2;

    color:white;

    max-width:620px;

    padding:50px 0 100px;
}

.breadcrumb{

    font-size:14px;

    margin-bottom:22px;

    color:#dcecff;
}

.breadcrumb i{
    margin-right:8px;
}

.breadcrumb span{
    margin:0 8px;
    opacity:.7;
}

.about-hero h1{

    font-size:52px;

    font-weight:800;

    margin-bottom:10px;
}

.about-hero h2{

    font-size:21px;

    line-height:1.4;

    margin-bottom:18px;
}

.hero-line{

    width:70px;

    height:3px;

    background:#56b4ff;

    margin-bottom:18px;
}

.about-hero p{

    font-size:15px;

    line-height:1.8;

    color:#e3edf8;
}


/* =========================================================
   ABOUT INTRO
========================================================= */

.about-intro{

    display:grid;

    grid-template-columns:
        1fr 1.35fr;

    gap:40px;

    align-items:center;
}

.section-heading{
    margin-bottom:30px;
}

.section-heading small{

    display:block;

    color:#28639e;

    letter-spacing:2px;

    font-weight:600;

    margin-bottom:8px;
}

.section-heading h2{

    font-size:30px;

    color:#233e5c;

    line-height:1.35;
}

.about-content p{

    font-size:14px;

    line-height:1.85;

    color:#42576e;

    margin-bottom:16px;
}

.know-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:10px;

    padding:13px 22px;

    background:
        linear-gradient(
            135deg,
            #2478dc,
            #174fa8
        );

    color:white;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

    box-shadow:
        0 10px 25px
        rgba(20,90,180,.25);

    transition:.3s;
}

.know-btn:hover{
    transform:translateY(-4px);
}

.about-main-image{

    width:100%;

    height:360px;

    object-fit:cover;

    border-radius:18px;

    box-shadow:
        0 15px 35px
        rgba(25,70,110,.18);

    transition:.4s;
}

.about-main-image:hover{
    transform:scale(1.02);
}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.highlights-box{

    background:
        linear-gradient(
            135deg,
            #edf6ff,
            #e5eff8
        );

    border-radius:20px;

    padding:30px;

    margin-top:20px;

    box-shadow:
        0 10px 30px
        rgba(30,70,110,.08);
}

.highlight-title{

    text-align:center;

    margin-bottom:25px;
}

.highlight-title small{

    color:#326da7;

    font-weight:600;

    letter-spacing:2px;
}

.highlight-title h2{

    font-size:28px;

    color:#263e59;
}

.highlight-grid{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);
}

.highlight{

    text-align:center;

    padding:20px;

    border-right:
        1px solid #bfd1e2;
}

.highlight:last-child{
    border-right:none;
}

.highlight-icon{

    width:58px;
    height:58px;

    border-radius:50%;

    display:flex;

    align-items:center;
    justify-content:center;

    margin:
        auto
        auto
        15px;

    font-size:25px;

    color:white;

    box-shadow:
        0 8px 18px
        rgba(0,0,0,.15);
}

.icon-blue{
    background:
        linear-gradient(
            135deg,
            #3979d3,
            #1853a4
        );
}

.icon-green{
    background:
        linear-gradient(
            135deg,
            #28a8a0,
            #087b79
        );
}

.icon-purple{
    background:
        linear-gradient(
            135deg,
            #985bd6,
            #6636ae
        );
}

.icon-orange{
    background:
        linear-gradient(
            135deg,
            #f8b233,
            #ed8c00
        );
}

.highlight h2{

    font-size:23px;

    color:#2a405b;
}

.highlight h3{

    font-size:14px;

    margin:5px 0;
}

.highlight p{

    font-size:11px;

    color:#61758b;

    line-height:1.6;
}


/* =========================================================
   VISION MISSION VALUES
========================================================= */

.vmv-grid{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:25px;

    margin-top:25px;
}

.vmv-card{

    background:white;

    padding:30px;

    border-radius:18px;

    border:
        1px solid #dbe7f1;

    box-shadow:
        0 10px 30px
        rgba(30,70,110,.08);

    transition:.3s;
}

.vmv-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 18px 35px
        rgba(30,70,110,.15);
}

.vmv-icon{

    font-size:45px;

    margin-bottom:15px;
}

.vision-icon{
    color:#2474c5;
}

.mission-icon{
    color:#15998c;
}

.values-icon{
    color:#814ac5;
}

.vmv-card h2{

    font-size:20px;

    margin-bottom:12px;

    color:#263e59;
}

.vmv-card p{

    font-size:13px;

    color:#52677c;

    line-height:1.8;
}

.vmv-card ul{
    list-style:none;
}

.vmv-card ul li{

    font-size:13px;

    color:#52677c;

    margin-bottom:10px;

    padding-left:18px;

    position:relative;
}

.vmv-card ul li::before{

    content:"";

    position:absolute;

    width:7px;
    height:7px;

    border-radius:50%;

    background:#16978c;

    left:0;
    top:7px;
}


/* =========================================================
   FEATURE BAR
========================================================= */

.feature-bar{

    background:
        linear-gradient(
            90deg,
            #125388,
            #083f6d
        );

    padding:20px 0;

    color:white;
}

.features{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);
}

.feature{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:13px;

    border-right:
        1px solid
        rgba(255,255,255,.2);
}

.feature:last-child{
    border:none;
}

.feature i{
    font-size:27px;
}

.feature h4{
    font-size:12px;
}

.feature p{
    font-size:10px;
    opacity:.8;
}


/* =========================================================
   FOOTER
========================================================= */

footer{

    background:#092845;

    color:white;

    padding:18px 0;
}

.footer-content{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;
}

footer p{

    font-size:11px;

    opacity:.85;
}

.footer-links{

    display:flex;

    gap:15px;
}

.footer-links a{

    font-size:11px;

    opacity:.9;
}

.footer-links a:hover{
    color:#69b7ff;
}

.footer-slogan{

    font-size:12px;

    font-style:italic;

    font-family:cursive;
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media(max-width:1150px){

    .services{
        grid-template-columns:
            repeat(3,1fr);
    }

    .info-grid{
        grid-template-columns:1fr;
    }

    .about-intro{
        grid-template-columns:1fr;
    }

    .highlight-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

    .highlight{
        border-bottom:
            1px solid #bfd1e2;
    }

    .highlight:nth-child(2){
        border-right:none;
    }

    .vmv-grid{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   RESPONSIVE - MOBILE NAVBAR
========================================================= */

@media(max-width:850px){

    .nav-menu{

        display:none;

        position:absolute;

        top:92px;
        left:0;

        width:100%;

        background:white;

        flex-direction:column;

        padding:20px;

        box-shadow:
            0 10px 25px
            rgba(0,0,0,.12);
    }

    .nav-menu.show{
        display:flex;
    }

    .nav-menu a{
        width:100%;
    }

    .mobile-btn{
        display:block;
    }

    .hero h1{
        font-size:42px;
    }

    .hero-slogan{
        display:none;
    }

    .about-hero h1{
        font-size:42px;
    }
}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media(max-width:650px){

    .navbar{
        min-height:75px;
    }

    .logo-circle{

        width:55px;
        height:55px;
    }

    .brand-text h1{
        font-size:18px;
    }

    .brand-text h3{
        font-size:10px;
    }

    .brand-text p{
        display:none;
    }

    .nav-menu{
        top:75px;
    }

    .hero{
        min-height:450px;
    }

    .hero h1{
        font-size:35px;
    }

    .hero h2{
        font-size:16px;
    }

    .hero-content{
        padding-bottom:100px;
    }

    .services{
        grid-template-columns:1fr;
    }

    .about-hero{
        min-height:400px;
    }

    .about-hero h1{
        font-size:37px;
    }

    .about-hero h2{
        font-size:17px;
    }

    .highlight-grid{
        grid-template-columns:1fr;
    }

    .highlight{
        border-right:none;
    }

    .features{
        grid-template-columns:
            1fr 1fr;

        gap:25px;
    }

    .feature{
        border:none;
    }

    .footer-content{

        flex-direction:column;

        text-align:center;
    }

    .footer-links{

        flex-wrap:wrap;

        justify-content:center;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:400px){

    .features{
        grid-template-columns:1fr;
    }

    .brand-text h1{
        font-size:16px;
    }

    .brand-text h3{
        font-size:9px;
    }
}

/* ================================================================
   COMMON SITE BASE (from stylesheet.css — wins over the block above where they overlap)
================================================================ */

/* =========================================
   GLOBAL
========================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f4f8fc;
    color:#20364f;
    overflow-x:hidden;
}

a{
    text-decoration:none;
    color:inherit;
}

.container{
    width:min(92%,1400px);
    margin:auto;
}

/* =========================================
   HEADER
========================================= */

header{
    width:100%;
    background:#ffffff;
    box-shadow:0 4px 20px rgba(0,0,0,.08);
    position:sticky;
    top:0;
    z-index:1000;
}

.navbar{
    min-height:92px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

/* LOGO */

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

.logo-circle{
    width:auto;
    height:auto;
    border-radius:0;
    background:transparent;
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:visible;
    box-shadow:none;
}

.logo-placeholder{
    display:flex;
    align-items:center;
    justify-content:center;
}

.logo-placeholder img,
.logo-circle img{
    width:72px;
    height:72px;
    object-fit:contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.12));
    transition: transform 0.3s ease;
}

.logo-placeholder img:hover,
.logo-circle img:hover{
    transform: scale(1.05);
}

.brand-text h1{
    font-size:28px;
    letter-spacing:1px;
    font-weight:800;
    color:#203a59;
}

.brand-text h3{
    font-size:14px;
    font-weight:600;
}

.brand-text p{
    font-size:12px;
    color:#64748b;
    font-style:italic;
    margin-top:3px;
}

/* NAVIGATION */

.nav-menu{
    display:flex;
    align-items:center;
    gap:12px;
}

.nav-menu a{
    padding:13px 18px;
    border-radius:10px;
    font-size:14px;
    font-weight:500;
    transition:.3s;
    color:#263b52;
}

.nav-menu a i{
    margin-right:7px;
}

.nav-menu a:hover{
    background:#edf5ff;
    color:#1461b8;
    transform:translateY(-2px);
}

.nav-menu .active{
    color:white;
    background:linear-gradient(135deg,#1465d9,#164fa6);
    box-shadow:0 8px 18px rgba(20,101,217,.28);
}

.login-btn{
    background:linear-gradient(135deg,#0d3e69,#16395d) !important;
    color:white !important;
    box-shadow:0 8px 18px rgba(0,0,0,.15);
}

.mobile-btn{
    display:none;
    font-size:25px;
    cursor:pointer;
}

/* =========================================
   HERO
========================================= */

.hero{
    min-height:430px;
    position:relative;
    display:flex;
    align-items:center;

    background:
    linear-gradient(90deg,
    rgba(5,30,58,.92) 0%,
    rgba(5,45,82,.78) 35%,
    rgba(0,0,0,.08) 75%),

   /* url("https://images.unsplash.com/photo-1586773860418-d37222d8fce3?auto=format&fit=crop&w=1800&q=90"); */
        url("../image/rmlacademic.jpg");

    background-size:cover;
    background-position:center;
}

.hero::after{
    content:"";
    position:absolute;
    bottom:-1px;
    left:0;
    width:100%;
    height:70px;
    background:#f4f8fc;
    clip-path:polygon(0 65%,20% 100%,50% 70%,75% 100%,100% 50%,100% 100%,0 100%);
}

.hero-content{
    position:relative;
    z-index:2;
    color:white;
    max-width:700px;
    padding:60px 0 100px;
}

.welcome{
    font-size:16px;
    margin-bottom:10px;
    opacity:.95;
}

.welcome span{
    display:inline-block;
    width:50px;
    height:2px;
    background:#72c5ff;
    margin-left:10px;
    vertical-align:middle;
}

.hero h1{
    font-size:54px;
    font-weight:800;
    line-height:1.1;
    margin-bottom:10px;
}

.hero h2{
    font-size:20px;
    font-weight:600;
    margin-bottom:10px;
}

.hero .hindi{
    font-size:16px;
    margin-bottom:18px;
    opacity:.95;
}

.hero p{
    max-width:620px;
    line-height:1.8;
    font-size:15px;
    color:#e2edf8;
    margin-bottom:25px;
}

.hero-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:15px 25px;
    background:linear-gradient(135deg,#1e75ec,#1457c5);
    color:white;
    border-radius:12px;
    font-weight:600;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
    transition:.3s;
}

.hero-btn:hover{
    transform:translateY(-4px);
}

.hero-slogan{
    position:absolute;
    right:6%;
    bottom:105px;
    color:white;
    font-size:24px;
    font-style:italic;
    font-family:cursive;
    text-align:center;
    transform:rotate(-5deg);
}

/* =========================================
   SECTION TITLE
========================================= */

.section{
    padding:30px 0 50px;
}

.section-title{
    text-align:center;
    margin-bottom:30px;
}

.section-title small{
    display:block;
    color:#325d8e;
    letter-spacing:1px;
    font-size:12px;
}

.section-title h2{
    font-size:28px;
    color:#243d5a;
}

.section-title h2::before,
.section-title h2::after{
    content:"";
    display:inline-block;
    width:45px;
    height:2px;
    background:#3476bd;
    vertical-align:middle;
    margin:0 12px;
}

/* =========================================
   SERVICE CARDS
========================================= */

.services{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:22px;
}

.service-card{
    min-height:128px;
    border-radius:15px;
    padding:25px;
    color:white;
    position:relative;
    overflow:hidden;
    box-shadow:0 12px 25px rgba(0,0,0,.13);
    transition:.35s;
}

.service-card:hover{
    transform:translateY(-8px) scale(1.02);
}

.service-card i.main-icon{
    font-size:38px;
    position:absolute;
    top:25px;
    left:25px;
    opacity:.95;
}

.service-info{
    margin-left:65px;
}

.service-card h3{
    font-size:17px;
    margin-bottom:8px;
}

.service-card p{
    font-size:11px;
    line-height:1.6;
}

.arrow{
    position:absolute;
    right:15px;
    bottom:12px;
    width:28px;
    height:28px;
    background:white;
    color:#3267a0;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.employee{
    background:linear-gradient(135deg,#6474d7,#3978b8);
}

.resident{
    background:linear-gradient(135deg,#28a7a1,#087c7a);
}

.dak{
    background:linear-gradient(135deg,#f5a83a,#ff8b1e);
}

.about{
    background:linear-gradient(135deg,#9858d7,#6633af);
}

.login{
    background:linear-gradient(135deg,#df3b83,#bf1465);
}

/* =========================================
   INFORMATION GRID
========================================= */

.info-grid{
    display:grid;
    grid-template-columns:1.15fr 1.1fr 1.15fr;
    gap:20px;
    margin-top:28px;
}

.panel{
    background:white;
    border-radius:15px;
    padding:16px;
    box-shadow:0 10px 30px rgba(30,70,110,.09);
}

/* ABOUT PANEL */

.about-image{
    width:100%;
    height:120px;
    border-radius:10px;
    object-fit:cover;
    margin-bottom:10px;
}

.panel h3{
    margin-bottom:10px;
    color:#243d5a;
}

.panel p{
    font-size:13px;
    line-height:1.55;
    color:#3e536b;
}

.small-btn{
    display:inline-block;
    margin-top:12px;
    padding:8px 16px;
    border:1px solid #2c6db5;
    color:#2c6db5;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

/* HIGHLIGHTS */

.highlight-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
}

.highlight{
    text-align:center;
    padding:20px 10px;
    border-bottom:1px solid #dce6f0;
}

.highlight:nth-child(odd){
    border-right:1px solid #dce6f0;
}

.highlight:nth-child(3),
.highlight:nth-child(4){
    border-bottom:none;
}

.highlight i{
    font-size:25px;
    color:#174a79;
    margin-bottom:8px;
}

.highlight h2{
    font-size:21px;
}

.highlight p{
    font-size:12px;
}

/* =========================================
   NOTICES
========================================= */

.notice-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}

.notice-header a{
    color:#17569a;
    font-size:12px;
}

.notice{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 0;
    border-bottom:1px solid #e4ebf2;
}

.notice:last-child{
    border:none;
}

.date-box{
    width:52px;
    min-width:52px;
    text-align:center;
    color:white;
    border-radius:8px;
    padding:5px;
    font-size:11px;
    font-weight:600;
}

.blue{background:#2768ba;}
.green{background:#168b75;}
.orange{background:#e58b1b;}
.purple{background:#7847c7;}

.notice-content{
    flex:1;
}

.notice-content h4{
    font-size:13px;
}

.notice-content p{
    font-size:10px;
    color:#718096;
}

.notice-arrow{
    color:#1c568d;
}

/* =========================================
   FEATURE BAR
========================================= */

.feature-bar{
    background:linear-gradient(90deg,#125388,#083f6d);
    padding:18px 0;
    color:white;
}

.features{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.feature{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    border-right:1px solid rgba(255,255,255,.2);
}

.feature:last-child{
    border:none;
}

.feature i{
    font-size:27px;
}

.feature h4{
    font-size:12px;
}

.feature p{
    font-size:10px;
    opacity:.8;
}

/* =========================================
   FOOTER
========================================= */

footer{
    background:#092845;
    color:white;
    padding:18px 0;
}

.footer-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

footer p{
    font-size:11px;
    opacity:.85;
}

.footer-links{
    display:flex;
    gap:15px;
}

.footer-links a{
    font-size:11px;
    opacity:.9;
}

.footer-slogan{
    font-size:12px;
    font-style:italic;
    font-family:cursive;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:1150px){

    .services{
        grid-template-columns:repeat(3,1fr);
    }

    .info-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:850px){

    .nav-menu{
        display:none;
        position:absolute;
        top:92px;
        left:0;
        width:100%;
        background:white;
        flex-direction:column;
        padding:20px;
        box-shadow:0 10px 20px rgba(0,0,0,.1);
    }

    .nav-menu.show{
        display:flex;
    }

    .nav-menu a{
        width:100%;
    }

    .mobile-btn{
        display:block;
    }

    .hero h1{
        font-size:42px;
    }

    .hero-slogan{
        display:none;
    }

    .brand-text h1{
        font-size:20px;
    }

}

@media(max-width:650px){

    .navbar{
        min-height:75px;
    }

    .logo-circle{
        width:55px;
        height:55px;
    }

    .brand-text h1{
        font-size:17px;
    }

    .brand-text h3{
        font-size:10px;
    }

    .brand-text p{
        display:none;
    }

    .nav-menu{
        top:75px;
    }

    .hero{
        min-height:450px;
    }

    .hero h1{
        font-size:35px;
    }

    .hero h2{
        font-size:16px;
    }

    .hero-content{
        padding-bottom:100px;
    }

    .services{
        grid-template-columns:1fr;
    }

    .features{
        grid-template-columns:1fr 1fr;
        gap:20px;
    }

    .feature{
        border-right:none;
    }

    .footer-content{
        flex-direction:column;
        text-align:center;
    }

    .footer-links{
        flex-wrap:wrap;
        justify-content:center;
    }

}

@media(max-width:400px){

    .features{
        grid-template-columns:1fr;
    }

}

/* =========================================
   THEME TOGGLE BUTTON & DARK MODE
========================================= */

.theme-toggle-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #d0dbe7;
    background: #ffffff;
    color: #20364f;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 17px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

.theme-toggle-btn:hover {
    transform: rotate(20deg) scale(1.08);
    background: #edf5ff;
    color: #1461b8;
}

body.dark-mode {
    background: #0b1523;
    color: #e2e8f0;
}

body.dark-mode header {
    background: #0f1f33;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35);
}

body.dark-mode .brand-text h1 {
    color: #e2e8f0;
}

body.dark-mode .brand-text h3 {
    color: #94a3b8;
}

body.dark-mode .nav-menu a {
    color: #cbd5e1;
}

body.dark-mode .nav-menu a:hover {
    background: #1a2f4a;
    color: #60a5fa;
}

body.dark-mode .theme-toggle-btn {
    background: #172c47;
    border-color: #2b4568;
    color: #f6ad55;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

body.dark-mode .panel,
body.dark-mode .service-card {
    box-shadow: 0 10px 25px rgba(0,0,0,0.35);
}

body.dark-mode .panel {
    background: #13243a;
    color: #e2e8f0;
}

body.dark-mode .panel h3 {
    color: #f1f5f9;
}

body.dark-mode .panel p {
    color: #94a3b8;
}

body.dark-mode .highlight {
    border-color: #1e3552;
}

body.dark-mode .highlight i {
    color: #60a5fa;
}

body.dark-mode .notice {
    border-color: #1e3552;
}

body.dark-mode .notice-content h4 {
    color: #f1f5f9;
}

body.dark-mode footer {
    background: #060e18;
    border-top: 1px solid #142438;
}


/* ================================================================
   EMPLOYEE MODULE (from employee.css)
================================================================ */

/* =========================================
   EMPLOYEE MODULE CSS
   Works with stylesheet.css (homepage styles)
========================================= */


/* =========================================
   SUB-NAVIGATION BAR
========================================= */

.emp-subnav {
    background: #0e2a47;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    position: sticky;
    top: 92px;
    z-index: 999;
}

.emp-subnav-inner {
    width: min(92%, 1400px);
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.emp-subnav-tabs {
    display: flex;
    align-items: center;
    gap: 0;
}

.emp-subnav-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    color: #a0b4cc;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all .25s;
    border-bottom: 3px solid transparent;
    position: relative;
    text-decoration: none;
}

.emp-subnav-tab:hover {
    color: #ffffff;
    background: rgba(255,255,255,.06);
}

.emp-subnav-tab.active {
    color: #ffffff;
    background: rgba(255,255,255,.08);
    border-bottom-color: #e8a020;
}

.emp-subnav-tab i {
    font-size: 15px;
    width: 18px;
    text-align: center;
}

.emp-subnav-divider {
    color: #4a6580;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 0 15px;
    font-weight: 600;
}

.emp-subnav-right {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 5px;
}


/* =========================================
   MAIN CONTENT AREA
========================================= */

.emp-content-area {
    width: min(92%, 1400px);
    margin: auto;
    padding: 25px 0 50px;
}


/* =========================================
   PAGE SECTIONS (Tab Views)
========================================= */

.emp-page {
    display: none;
    animation: empFadeIn .3s ease;
}

.emp-page.active {
    display: block;
}

@keyframes empFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* =========================================
   TOP BAR (Per-Page Header)
========================================= */

.emp-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 25px;
}

.emp-title h1 {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
}

.emp-title p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}

.emp-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.emp-avatar-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #64748b;
    font-size: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
}


/* =========================================
   BUTTONS
========================================= */

.emp-btn {
    padding: 9px 18px;
    border: none;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: .2s;
    text-decoration: none;
}

.emp-btn-green {
    background: linear-gradient(135deg, #0da85e, #0a8a4d);
    color: white;
    box-shadow: 0 4px 12px rgba(13,168,94,.25);
}
.emp-btn-green:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(13,168,94,.35);
}

.emp-btn-red {
    background: linear-gradient(135deg, #e04040, #c93636);
    color: white;
    box-shadow: 0 4px 12px rgba(224,64,64,.25);
}
.emp-btn-red:hover {
    transform: translateY(-2px);
}

.emp-btn-outline {
    background: white;
    color: #4a5568;
    border: 1px solid #d1d5db;
}
.emp-btn-outline:hover {
    background: #f7fafc;
    border-color: #94a3b8;
}


/* =========================================
   DASHBOARD STAT CARDS
========================================= */

.emp-stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
    margin-bottom: 25px;
}

.emp-stat-card {
    background: white;
    border-radius: 12px;
    padding: 18px 20px;
    border: 1px solid #e8eef4;
    border-left: 4px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(30,70,110,.06);
    position: relative;
    transition: .3s;
}

.emp-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(30,70,110,.1);
}

.emp-stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.emp-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.emp-stat-icon {
    font-size: 18px;
    opacity: .7;
}

.emp-stat-value {
    font-size: 30px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.1;
}


/* =========================================
   CHART CARDS
========================================= */

.emp-chart-row-1 {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 20px;
    margin-bottom: 20px;
}

.emp-chart-row-2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.emp-chart-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e8eef4;
    box-shadow: 0 2px 8px rgba(30,70,110,.06);
}

.emp-chart-card h3 {
    margin: 0 0 18px;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.emp-chart-card h3::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e8a020;
}

.emp-chart-container {
    position: relative;
    height: 260px;
    width: 100%;
}


/* =========================================
   EMPLOYEE LIST — FILTER BAR
========================================= */

.emp-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
    background: white;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid #e8eef4;
    box-shadow: 0 2px 8px rgba(30,70,110,.06);
    align-items: center;
}

.emp-search-box {
    position: relative;
    flex: 1;
    min-width: 250px;
}

.emp-search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 14px;
}

.emp-search-box input {
    width: 100%;
    padding: 9px 14px 9px 36px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
    transition: border-color .2s;
}

.emp-search-box input:focus {
    border-color: #3476bd;
}

.emp-filter-select {
    padding: 9px 32px 9px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: white;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #4a5568;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 20px;
    outline: none;
    cursor: pointer;
}

.emp-filter-select:focus {
    border-color: #3476bd;
}

.emp-filter-spacer {
    flex: 1;
}


/* =========================================
   DATA TABLE
========================================= */

.emp-table-wrapper {
    background: white;
    border: 1px solid #e8eef4;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(30,70,110,.06);
}

.emp-table-scroll {
    overflow-x: visible;
}

.emp-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    white-space: normal;
    min-width: 0;
}

.emp-table th,
.emp-table td {
    padding: 10px 10px;
    text-align: left;
    border-bottom: 1px solid #edf2f7;
    font-size: 13px;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    vertical-align: top;
}

.emp-table thead th {
    background: #0e2a47;
    color: white;
    font-weight: 500;
    position: sticky;
    top: 0;
    z-index: 10;
    font-size: 12px;
    letter-spacing: .3px;
}

.emp-table thead th:first-child {
    border-radius: 0;
}

.emp-table thead th:last-child {
    border-radius: 0;
}

.emp-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.emp-table tbody tr:nth-child(even) {
    background: #f8fafc;
}

.emp-table tbody tr:hover {
    background: #edf5ff;
}

.emp-table tbody td {
    color: #374151;
}

.emp-table input[type="checkbox"] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: #0e2a47;
}


/* =========================================
   BADGES
========================================= */

.emp-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    letter-spacing: .3px;
}

/* Category */
.emp-badge-obc  { background: #fef3c7; color: #b87c14; }
.emp-badge-sc   { background: #fce7f3; color: #c03050; }
.emp-badge-ur   { background: #dbeafe; color: #1d4ed8; }
.emp-badge-ews  { background: #d1fae5; color: #047857; }
.emp-badge-st   { background: #ede9fe; color: #6d28d9; }

/* Status */
.emp-badge-permanent { background: #d1fae5; color: #047857; }
.emp-badge-probation { background: #fef3c7; color: #b87c14; }
.emp-badge-serving   { background: #dbeafe; color: #1d4ed8; }


/* =========================================
   TABLE FOOTER
========================================= */

.emp-table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    background: #f8fafc;
    border-top: 1px solid #edf2f7;
    font-size: 13px;
    color: #64748b;
}

.emp-table-footer span:last-child {
    font-style: italic;
    font-size: 12px;
}


/* =========================================
   ACTIVITY LOG — TIMELINE
========================================= */

.emp-activity-filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.emp-timeline {
    background: white;
    border-radius: 12px;
    padding: 25px 30px;
    border: 1px solid #e8eef4;
    box-shadow: 0 2px 8px rgba(30,70,110,.06);
    position: relative;
}

.emp-timeline-item {
    position: relative;
    padding-left: 48px;
    margin-bottom: 28px;
}

.emp-timeline-item:last-child {
    margin-bottom: 0;
}

.emp-timeline-item::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 34px;
    bottom: -28px;
    width: 2px;
    background: #e2e8f0;
}

.emp-timeline-item:last-child::before {
    display: none;
}

.emp-timeline-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 13px;
    z-index: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

.emp-timeline-content {
    background: #f8fafc;
    padding: 14px 18px;
    border-radius: 10px;
    border: 1px solid #e8eef4;
}

.emp-timeline-text {
    margin: 0 0 4px;
    font-size: 14px;
    color: #374151;
    line-height: 1.5;
}

.emp-timeline-time {
    margin: 0;
    font-size: 12px;
    color: #94a3b8;
}


/* =========================================
   REPORTS GRID
========================================= */

.emp-reports-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.emp-report-card {
    background: white;
    padding: 22px;
    border-radius: 12px;
    border: 1px solid #e8eef4;
    box-shadow: 0 2px 8px rgba(30,70,110,.06);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: .3s;
}

.emp-report-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(30,70,110,.1);
}

.emp-report-card h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

.emp-report-card p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    flex: 1;
}


/* =========================================
   LOGIN / LOGOUT BUTTON OVERRIDES
========================================= */

.nav-menu .logout-btn {
    background: linear-gradient(135deg, #e04040, #bf1435) !important;
    color: white !important;
    box-shadow: 0 8px 18px rgba(224,64,64,.2);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1200px) {
    .emp-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .emp-chart-row-1,
    .emp-chart-row-2 {
        grid-template-columns: 1fr;
    }

    .emp-subnav-tabs {
        overflow-x: auto;
    }

    .emp-subnav-divider {
        display: none;
    }
}

@media (max-width: 850px) {
    .emp-subnav {
        top: 0;
        position: relative;
    }

    .emp-subnav-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .emp-subnav-tab {
        padding: 12px 16px;
        font-size: 13px;
        white-space: nowrap;
    }

    .emp-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .emp-topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .emp-filter-bar {
        flex-direction: column;
    }

    .emp-search-box {
        min-width: 100%;
    }

    .emp-reports-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .emp-subnav-tab span {
        display: none;
    }

    .emp-subnav-tab i {
        margin: 0;
        font-size: 18px;
    }

    .emp-subnav-tab {
        padding: 14px 18px;
    }

    .emp-stats-grid {
        grid-template-columns: 1fr;
    }

    .emp-content-area {
        padding: 15px 0 30px;
    }

    .emp-table-wrapper {
        border-radius: 8px;
    }
}

/* =========================================
   DARK MODE FOR EMPLOYEE PAGE
========================================= */

body.dark-mode .emp-subnav {
    background: #081626;
    border-bottom: 1px solid #13273e;
}

body.dark-mode .emp-title h1 {
    color: #f1f5f9;
}

body.dark-mode .emp-title p {
    color: #94a3b8;
}

body.dark-mode .emp-stat-card,
body.dark-mode .emp-chart-card,
body.dark-mode .emp-filter-bar,
body.dark-mode .emp-table-wrapper,
body.dark-mode .emp-timeline,
body.dark-mode .emp-report-card {
    background: #112034;
    border-color: #1e3552;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}

body.dark-mode .emp-stat-value {
    color: #f8fafc;
}

body.dark-mode .emp-chart-card h3,
body.dark-mode .emp-report-card h3 {
    color: #f1f5f9;
}

body.dark-mode .emp-search-box input,
body.dark-mode .emp-filter-select {
    background-color: #0b1726;
    border-color: #233e60;
    color: #e2e8f0;
}

body.dark-mode .emp-btn-outline {
    background-color: #162a42;
    border-color: #2b4970;
    color: #cbd5e1;
}

body.dark-mode .emp-btn-outline:hover {
    background-color: #203a5c;
    color: #ffffff;
}

body.dark-mode .emp-table tbody tr:nth-child(even) {
    background: #0d1a2b;
}

body.dark-mode .emp-table tbody tr:hover {
    background: #162c47;
}

body.dark-mode .emp-table tbody td {
    color: #cbd5e1;
    border-bottom-color: #1a304a;
}

body.dark-mode .emp-table-footer {
    background: #0c1827;
    border-top-color: #1a304a;
    color: #94a3b8;
}

body.dark-mode .emp-timeline-content {
    background: #0c1827;
    border-color: #1d334d;
}

body.dark-mode .emp-timeline-text {
    color: #cbd5e1;
}



/* ================================================================
   RESIDENT MODULE (from resident.css)
================================================================ */

/* ========================================================
   RESIDENT MODULE CSS - 3D Dashboard, Cards, Tables, Modals
   ======================================================== */

/* Perspective container for 3D cards */
.res-3d-perspective {
    perspective: 1200px;
}

/* Sub-nav bar for resident */
.res-subnav {
    background: #0d2642;
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
    position: sticky;
    top: 92px;
    z-index: 999;
    border-bottom: 2px solid rgba(232, 160, 32, 0.2);
}

.res-subnav-inner {
    width: min(92%, 1400px);
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.res-subnav-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
}

.res-subnav-tab {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 22px;
    color: #9cb4ce;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    border-bottom: 3px solid transparent;
    text-decoration: none;
    white-space: nowrap;
}

.res-subnav-tab:hover {
    color: #ffffff;
    background: rgba(255,255,255,0.06);
}

.res-subnav-tab.active {
    color: #ffffff;
    background: rgba(255,255,255,0.08);
    border-bottom-color: #e8a020;
}

.res-subnav-user {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d1e2f5;
    font-size: 13px;
    font-weight: 500;
}

/* 3D Dashboard Banner & Stat Cards */
.res-hero-banner {
    background: linear-gradient(135deg, #0e2a47 0%, #164673 50%, #0c3358 100%);
    border-radius: 16px;
    padding: 24px 30px;
    color: white;
    margin-bottom: 25px;
    box-shadow: 0 12px 28px rgba(14, 42, 71, 0.25);
    position: relative;
    overflow: hidden;
}

.res-hero-banner::after {
    content: '';
    position: absolute;
    right: -40px;
    bottom: -50px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232,160,32,0.2) 0%, rgba(255,255,255,0) 70%);
}

.res-notice-pill {
    background: rgba(232, 160, 32, 0.15);
    border: 1px solid rgba(232, 160, 32, 0.4);
    color: #f7b731;
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 12.5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

/* 3D Stat Cards Grid */
.res-3d-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 25px;
}

.res-3d-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 22px;
    border: 1px solid #e2eaf2;
    box-shadow: 0 8px 20px rgba(22, 60, 95, 0.08);
    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
    position: relative;
    overflow: hidden;
}

.res-3d-card:hover {
    transform: translateY(-8px) rotateX(4deg) rotateY(-2deg);
    box-shadow: 0 18px 36px rgba(22, 60, 95, 0.16);
    border-color: #cbdbee;
}

.res-card-shine {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #1672c8, #0da85e, #e8a020);
}

.res-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.res-card-title {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.res-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.res-icon-sr { background: rgba(32, 112, 192, 0.12); color: #2070c0; }
.res-icon-jr { background: rgba(13, 168, 94, 0.12); color: #0da85e; }
.res-icon-vacant { background: rgba(224, 80, 80, 0.12); color: #e05050; }
.res-icon-dept { background: rgba(128, 80, 192, 0.12); color: #8050c0; }

.res-3d-value {
    font-size: 34px;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 6px 0;
    line-height: 1;
}

.res-card-subtext {
    font-size: 12.5px;
    color: #64748b;
    display: flex;
    gap: 12px;
}

.res-tag-filled { color: #0da85e; font-weight: 600; }
.res-tag-vacant { color: #e05050; font-weight: 600; }

/* 3D Charts Grid */
.res-charts-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 22px;
    margin-bottom: 25px;
}

.res-chart-card-3d {
    background: #ffffff;
    border-radius: 14px;
    padding: 22px;
    border: 1px solid #e2eaf2;
    box-shadow: 0 8px 22px rgba(22, 60, 95, 0.08);
    transition: transform 0.3s ease;
}

.res-chart-card-3d:hover {
    box-shadow: 0 12px 28px rgba(22, 60, 95, 0.12);
}

.res-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid #edf2f7;
}

.res-chart-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 9px;
}

/* Master Filter Bar */
.res-filter-bar {
    background: #ffffff;
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid #e2eaf2;
    box-shadow: 0 4px 14px rgba(22, 60, 95, 0.06);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 20px;
}

.res-search-input {
    flex: 1;
    min-width: 260px;
    padding: 9px 14px 9px 36px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

.res-search-input:focus {
    border-color: #2070c0;
}

.res-select {
    padding: 9px 32px 9px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #334155;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 18px;
}

.res-select:focus {
    border-color: #2070c0;
}

/* Resident Table with PDF styling */
.res-table-wrapper {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #e2eaf2;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(22, 60, 95, 0.07);
    margin-bottom: 25px;
}

.res-table-scroll {
    overflow-x: auto;
    overflow-y: auto;
    max-height: min(70vh, 650px);
    -webkit-overflow-scrolling: touch;
}

.res-table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    table-layout: fixed;
    white-space: normal;
    font-size: 13px;
}
.res-table th,
.res-table td {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    vertical-align: top;
}

.res-table thead th {
    background: #0e2a47;
    color: #ffffff;
    padding: 13px 15px;
    font-weight: 600;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 5;
    letter-spacing: 0.3px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.res-table thead th:last-child {
    border-right: none;
}

.res-table tbody tr {
    transition: background-color 0.15s;
}

.res-table tbody tr:nth-child(even) {
    background: #f8fafc;
}

.res-table tbody tr:hover {
    background: #edf5ff;
}

.res-table tbody td {
    padding: 11px 15px;
    border-bottom: 1px solid #edf2f7;
    color: #334155;
    border-right: 1px solid #f1f5f9;
}

/* Badges for Appointment & Status */
.res-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    display: inline-block;
}

.res-badge-bond { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.res-badge-89days { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.res-badge-serving { background: #e0f2fe; color: #0369a1; }
.res-badge-completed { background: #f1f5f9; color: #64748b; }

.res-btn-action {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    transition: all 0.2s;
    margin-right: 4px;
}

.res-btn-action:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.res-btn-delete {
    color: #e05050;
    border-color: #fca5a5;
    background: #fff5f5;
}

.res-btn-delete:hover {
    background: #e05050;
    color: white;
}

/* Seat Register Grid Style from Screenshot */
.res-seat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    text-align: center;
}

.res-seat-table th, .res-seat-table td {
    border: 1px solid #e2e8f0;
    padding: 8px 6px;
}

.res-seat-table thead th {
    background: #123960;
    color: white;
    font-weight: 600;
}

.res-seat-table thead tr.sub-head th {
    background: #1e4975;
    font-size: 11px;
    font-weight: 500;
}

.res-seat-table tbody td:first-child {
    text-align: left;
    font-weight: 600;
    padding-left: 12px;
    background: #f8fafc;
}

/* Modal Styling */
.res-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(14, 42, 71, 0.6);
    backdrop-filter: blur(4px);
    display: none;
    align-items: flex-start;
    justify-content: center;
    z-index: 2000;
    overflow-y: auto;
    padding: 24px 12px 40px;
    box-sizing: border-box;
}

.res-modal-overlay.active {
    display: flex;
}

.res-modal-box {
    background: #ffffff;
    border-radius: 16px;
    width: min(96%, 650px);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 24px 22px 20px;
    margin: 0 auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    position: relative;
    animation: modalPop 0.25s ease-out;
}

@keyframes modalPop {
    from { transform: scale(0.9) translateY(20px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.res-modal-close {
    position: absolute;
    right: 20px;
    top: 20px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #64748b;
}

.res-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 15px;
}

.res-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.res-form-group.full {
    grid-column: span 2;
}

.res-form-group label {
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
}

.res-form-group input,
.res-form-group select {
    padding: 9px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    outline: none;
}

.res-form-group input:focus,
.res-form-group select:focus {
    border-color: #2070c0;
}

/* =========================================
   DARK MODE FOR RESIDENT MODULE
========================================= */

body.dark-mode .res-subnav {
    background: #091728;
    border-bottom-color: #1a324d;
}

body.dark-mode .res-hero-banner {
    background: linear-gradient(135deg, #091a2e 0%, #102d4d 100%);
    box-shadow: 0 12px 28px rgba(0,0,0,0.5);
}

body.dark-mode .res-3d-card,
body.dark-mode .res-chart-card-3d,
body.dark-mode .res-filter-bar,
body.dark-mode .res-table-wrapper,
body.dark-mode .res-modal-box {
    background: #112034;
    border-color: #1d3652;
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}

body.dark-mode .res-3d-value {
    color: #f1f5f9;
}

body.dark-mode .res-chart-header h3 {
    color: #f1f5f9;
}

body.dark-mode .res-search-input,
body.dark-mode .res-select,
body.dark-mode .res-form-group input,
body.dark-mode .res-form-group select {
    background: #0a1727;
    border-color: #203c5d;
    color: #e2e8f0;
}

body.dark-mode .res-table tbody tr:nth-child(even) {
    background: #0d1a2a;
}

body.dark-mode .res-table tbody tr:hover {
    background: #142a44;
}

body.dark-mode .res-table tbody td {
    color: #cbd5e1;
    border-bottom-color: #172c44;
    border-right-color: #14263b;
}

body.dark-mode .res-seat-table th, 
body.dark-mode .res-seat-table td {
    border-color: #1e3857;
}

body.dark-mode .res-seat-table tbody td:first-child {
    background: #0e1d30;
    color: #e2e8f0;
}

/* Responsive */
@media (max-width: 1150px) {
    .res-3d-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .res-charts-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .res-3d-stats-grid {
        grid-template-columns: 1fr;
    }
    .res-form-grid {
        grid-template-columns: 1fr;
    }
    .res-form-group.full {
        grid-column: span 1;
    }
}


/* ================================================================
   LOGIN PAGE (from login.css — scoped under body.login-page)
================================================================ */


body.login-page{
    font-family:'Poppins',sans-serif;

    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    overflow:hidden;

    background:
    radial-gradient(circle at 20% 20%, #274b7a 0%, transparent 35%),
    radial-gradient(circle at 80% 80%, #12345b 0%, transparent 40%),
    linear-gradient(135deg,#071b35,#0d2b50,#06182e);

    position:relative;
}


/* ==============================
   ANIMATED BACKGROUND
================================ */

body.login-page::before,
body.login-page::after{

    content:"";

    position:absolute;

    width:300px;
    height:300px;

    border-radius:50%;

    filter:blur(40px);

    opacity:.35;

    animation:float 8s infinite alternate ease-in-out;
}


body.login-page::before{

    background:#1e88e5;

    top:-80px;
    left:-80px;

}


body.login-page::after{

    background:#00c6ff;

    bottom:-100px;
    right:-100px;

    animation-delay:2s;

}


@keyframes float{

    from{

        transform:
        translateY(0px)
        translateX(0px);

    }

    to{

        transform:
        translateY(50px)
        translateX(40px);

    }

}


/* ==============================
   LOGIN WRAPPER
================================ */

.login-container{

    width:100%;

    max-width:460px;

    padding:20px;

    position:relative;

    z-index:5;

}


/* ==============================
   3D LOGIN CARD
================================ */

.login-card{

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.98),
        rgba(235,240,248,.95)
    );

    border-radius:28px;

    padding:45px 40px;

    text-align:center;

    box-shadow:

        0 30px 60px rgba(0,0,0,.45),

        inset 0 1px 1px rgba(255,255,255,.9),

        inset 0 -3px 8px rgba(0,0,0,.05);

    border:

        1px solid rgba(255,255,255,.8);

    transform:

        perspective(1000px)
        rotateX(2deg);

    transition:.4s;

}


.login-card:hover{

    transform:

        perspective(1000px)
        rotateX(0deg)
        translateY(-8px);

}


/* ==============================
   LOGO
================================ */

.logo-box{

    width:95px;
    height:95px;

    margin:auto;

    border-radius:50%;

    background:white;

    display:flex;

    justify-content:center;
    align-items:center;

    box-shadow:

        0 10px 25px rgba(0,0,0,.18),

        inset 0 2px 5px rgba(0,0,0,.1);

    margin-bottom:18px;

}


.logo-box img{

    width:80px;

    height:80px;

    object-fit:contain;

}


/* ==============================
   TEXT
================================ */

.login-card h1{

    font-size:36px;

    color:#132a49;

    margin-bottom:15px;

    font-weight:700;

}


.institute{

    font-size:17px;

    color:#667085;

    line-height:1.6;

    margin-bottom:20px;

}


.subtitle{

    color:#718096;

    font-size:16px;

    margin-bottom:35px;

}


/* ==============================
   FORM
================================ */

.form-group{

    text-align:left;

    margin-bottom:22px;

}


.form-group label{

    display:block;

    margin-bottom:8px;

    font-size:17px;

    font-weight:600;

    color:#263b55;

}


/* ==============================
   INPUT
================================ */

.input-box{

    position:relative;

}


.input-box input{

    width:100%;

    height:62px;

    padding:0 20px;

    border-radius:16px;

    border:2px solid #d6dee8;

    outline:none;

    font-size:17px;

    font-family:'Poppins';

    background:

        linear-gradient(
        145deg,
        #ffffff,
        #edf1f6
        );

    box-shadow:

        inset 3px 3px 6px #d8dce1,

        inset -3px -3px 6px #ffffff;

    transition:.3s;

}


.input-box input:focus{

    border-color:#2878c8;

    background:white;

    box-shadow:

        0 0 0 4px rgba(40,120,200,.12),

        0 10px 25px rgba(40,120,200,.15);

}


/* ==============================
   LOGIN BUTTON
================================ */

.login-submit-btn{

    width:100%;

    height:64px;

    border:none;

    border-radius:16px;

    cursor:pointer;

    font-size:20px;

    font-weight:600;

    color:white;

    font-family:'Poppins';

    background:

    linear-gradient(
        145deg,
        #254d7b,
        #102846
    );

    box-shadow:

        0 10px 0 #07182c,

        0 18px 30px rgba(0,0,0,.3);

    transition:.2s;

    margin-top:8px;

}


.login-submit-btn:hover{

    transform:

        translateY(-3px);

    box-shadow:

        0 13px 0 #07182c,

        0 23px 35px rgba(0,0,0,.35);

}


.login-submit-btn:active{

    transform:

        translateY(7px);

    box-shadow:

        0 3px 0 #07182c,

        0 8px 15px rgba(0,0,0,.2);

}


/* ==============================
   BACK HOME
================================ */

.back-home{

    margin-top:30px;

}


.back-home a{

    text-decoration:none;

    color:#667085;

    font-size:18px;

    transition:.3s;

}


.back-home a:hover{

    color:#174b7c;

}


/* ==============================
   FOOTER
================================ */

.footer-text{

    margin-top:28px;

    font-size:12px;

    color:#8b96a5;

}


/* ==============================
   RESPONSIVE
================================ */

@media(max-width:600px){

    body.login-page{

        align-items:flex-start;

        padding-top:40px;

        overflow:auto;

    }


    .login-container{

        padding:15px;

    }


    .login-card{

        padding:35px 25px;

        border-radius:25px;

    }


    .logo-box{

        width:85px;
        height:85px;

    }


    .logo-box img{

        width:70px;
        height:70px;

    }


    .login-card h1{

        font-size:30px;

    }


    .institute{

        font-size:16px;

    }


    .subtitle{

        font-size:15px;

        margin-bottom:28px;

    }


    .form-group label{

        font-size:16px;

    }


    .input-box input{

        height:58px;

    }


    .login-submit-btn{

        height:60px;

        font-size:18px;

    }

}


@media(max-width:380px){

    .login-card{

        padding:30px 20px;

    }


    .login-card h1{

        font-size:26px;

    }


    .institute{

        font-size:14px;

    }


    .subtitle{

        font-size:14px;

    }

}

/* =========================================================
   NAV USER DROPDOWN (My Account + Logout combined)
========================================================= */

.nav-user-dropdown{
    position:relative;
    display:inline-flex;
}

.nav-user-btn{
    display:flex;
    align-items:center;
    gap:8px;
    padding:11px 16px;
    border:none;
    border-radius:10px;
    cursor:pointer;
    font-family:'Poppins',sans-serif;
    font-size:14px;
    font-weight:500;
    color:white;
    background:linear-gradient(135deg,#0d3e69,#16395d);
    box-shadow:0 8px 18px rgba(0,0,0,.15);
    transition:.25s;
}

.nav-user-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(0,0,0,.2);
}

.nav-user-caret{
    font-size:11px;
    transition:transform .2s;
}

.nav-user-dropdown.open .nav-user-caret{
    transform:rotate(180deg);
}

.nav-user-menu{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    min-width:200px;
    background:#ffffff;
    border-radius:12px;
    box-shadow:0 15px 35px rgba(20,40,70,.18);
    padding:8px;
    display:flex;
    flex-direction:column;
    gap:2px;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:.18s;
    z-index:500;
}

.nav-user-dropdown.open .nav-user-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.nav-user-menu a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:8px;
    font-size:14px;
    font-weight:500;
    color:#263b52;
    transition:.15s;
}

.nav-user-menu a i{
    width:16px;
    text-align:center;
    color:#5c7a9c;
}

.nav-user-menu a:hover{
    background:#edf5ff;
    color:#1461b8;
}

.nav-user-menu a.nav-user-logout{
    color:#c81f3f;
}

.nav-user-menu a.nav-user-logout i{
    color:#c81f3f;
}

.nav-user-menu a.nav-user-logout:hover{
    background:#fdeaec;
    color:#a3122c;
}

.nav-user-menu-divider{
    height:1px;
    background:#e7edf3;
    margin:4px 2px;
}

body.dark-mode .nav-user-menu{
    background:#152a41;
    box-shadow:0 15px 35px rgba(0,0,0,.4);
}

body.dark-mode .nav-user-menu a{
    color:#dce8f5;
}

body.dark-mode .nav-user-menu a i{
    color:#8fb3d9;
}

body.dark-mode .nav-user-menu a:hover{
    background:#1d3c5c;
    color:#ffffff;
}

body.dark-mode .nav-user-menu-divider{
    background:#264a6f;
}

@media (max-width: 900px){
    .nav-user-menu{
        right:auto;
        left:0;
    }
}


/* Desktop: wrap text inside columns (no horizontal scroll) */
#empTable, #incrementTable, #residentTable,
#contactTable, #promoTable, #ofrTable {
    table-layout: fixed;
    white-space: normal;
    min-width: 0;
    width: 100%;
}
#empTable th, #incrementTable th, #residentTable th,
#contactTable th, #promoTable th,
#empTable td, #incrementTable td, #residentTable td,
#contactTable td, #promoTable td {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    vertical-align: top;
    font-size: 13px;
    padding: 10px 10px;
}
#empTable th:first-child, #empTable td:first-child { width: 40px; text-align: center; }
#empTable th:last-child, #empTable td:last-child,
#incrementTable th:last-child, #incrementTable td:last-child,
#residentTable th:last-child, #residentTable td:last-child { width: 80px; text-align: center; }

/* Mobile only: swipe / horizontal scroll, no letter-break */
@media (max-width: 900px) {
    .emp-table-wrapper, .res-table-wrapper {
        overflow: hidden;
        border-radius: 10px;
    }
    .emp-table-scroll, .res-table-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .emp-table,
    #empTable, #incrementTable, #residentTable,
    #contactTable, #promoTable, #ofrTable,
    .res-table {
        table-layout: auto !important;
        white-space: nowrap !important;
        min-width: 720px !important;
    }
    .emp-table th, .emp-table td,
    #empTable th, #empTable td,
    #incrementTable th, #incrementTable td,
    #residentTable th, #residentTable td,
    #contactTable th, #contactTable td,
    #promoTable th, #promoTable td,
    .res-table th, .res-table td {
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        vertical-align: middle;
    }
    .emp-filter-bar {
        flex-wrap: wrap;
        gap: 8px;
    }
    .emp-subnav-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .emp-topbar {
        flex-direction: column;
        align-items: stretch;
    }
    .emp-topbar-right {
        width: 100%;
        flex-wrap: wrap;
    }
    .att-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .att-table {
        table-layout: auto !important;
        min-width: 900px !important;
        white-space: nowrap !important;
    }
    .att-table th, .att-table td {
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }
}

/* =========================================================
   PAGINATION CONTROLS (Employee Master, Pay & Increment Register)
========================================================= */
.emp-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 12px 0;
}

.emp-pagination-info {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

body.dark-mode .emp-pagination-info {
    color: #9db4cc;
}

/* =========================================================
   MONTHLY ATTENDANCE REPORT (attendance.php)
========================================================= */
.att-tabs {
    display: flex;
    gap: 8px;
    margin: 16px 0 12px;
    flex-wrap: wrap;
}
.att-tab {
    padding: 10px 20px;
    border-radius: 9px;
    border: 0;
    text-decoration: none;
    font-weight: 600;
    background: #e8eef8;
    color: #334155;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    transition: background .15s, color .15s;
}
.att-tab:hover { background: #dbe7ff; color: #1e3a8a; }
.att-tab.active {
    background: #174ea6;
    color: #fff;
}
.att-toolbar {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
    box-shadow: 0 4px 15px rgba(15, 23, 42, .04);
    margin-bottom: 16px;
}
.att-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.att-field label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    letter-spacing: .02em;
}
.att-field select,
.att-field input {
    height: 40px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0 11px;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    min-width: 140px;
    color: #172033;
}
.att-field select:focus,
.att-field input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.att-toolbar .emp-btn {
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.att-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 0 0 16px;
}
.att-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .03);
}
.att-card .label {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}
.att-card .value {
    font-size: 26px;
    font-weight: 700;
    margin-top: 4px;
    color: #172033;
}
.att-table-wrap {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 4px 15px rgba(15, 23, 42, .04);
}
.att-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    min-width: 0;
}
.att-table th,
.att-table td {
    border-bottom: 1px solid #e2e8f0;
    padding: 8px 8px;
    text-align: left;
    font-size: 12px;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    color: #172033;
    vertical-align: top;
}
.att-table th {
    line-height: 1.25;
}
.att-table th {
    background: #eff5ff;
    color: #1e3a8a;
    font-weight: 700;
    position: sticky;
    top: 0;
    z-index: 1;
}
.att-table tbody tr:hover { background: #f8fbff; }
.att-table .num { text-align: center; }
.att-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 700;
    background: #dcfce7;
    color: #166534;
}
.att-badge.pending {
    background: #fef3c7;
    color: #92400e;
}
.leave-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.leave-row input[type="date"] {
    height: 36px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0 10px;
    font-family: inherit;
}
.att-page-wrap {
    max-width: 1500px;
    margin: 20px auto;
    padding: 0 18px;
}
.att-footer-note {
    text-align: center;
    color: #64748b;
    font-size: 11px;
    margin: 18px 0;
}
.report-head { display: none; }

@media (max-width: 900px) {
    .att-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .att-cards { grid-template-columns: 1fr; }
    .att-field,
    .att-field select,
    .att-field input { width: 100%; min-width: 0; }
}

@media print {
    body { background: #fff !important; }
    header,
    .att-tabs,
    .att-toolbar,
    .att-cards,
    .emp-btn,
    .res-modal-overlay,
    .no-print,
    .nav-user-dropdown,
    .mobile-btn,
    .office-switcher-bar { display: none !important; }
    .att-table-wrap { border: 0; box-shadow: none; overflow: visible; }
    .att-table { min-width: 0; }
    .att-table th,
    .att-table td {
        font-size: 8px;
        padding: 4px;
        white-space: normal;
    }
    .att-table th { position: static; }
    .report-head {
        display: block;
        text-align: center;
        margin-bottom: 12px;
    }
    .report-head h2 { margin: 0; font-size: 16px; }
    .report-head p { margin: 3px; font-size: 11px; }
    .att-page-wrap,
    .container { max-width: 100%; padding: 0; margin: 0; }
}

body.dark-mode .att-tab { background: #1e293b; color: #cbd5e1; }
body.dark-mode .att-tab.active { background: #2563eb; color: #fff; }
body.dark-mode .att-toolbar,
body.dark-mode .att-card,
body.dark-mode .att-table-wrap {
    background: #0f172a;
    border-color: #1e293b;
}
body.dark-mode .att-table th { background: #1e293b; color: #93c5fd; }
body.dark-mode .att-table td { color: #e2e8f0; border-color: #1e293b; }
body.dark-mode .att-table tbody tr:hover { background: #1e293b; }
body.dark-mode .att-field select,
body.dark-mode .att-field input {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}


/* DD-MM-YYYY date fields */
input.date-dmy {
  min-width: 120px;
  font-variant-numeric: tabular-nums;
}


/* ---- Date field + calendar picker ---- */
.date-dmy-wrap {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  vertical-align: middle;
  box-sizing: border-box;
}
.date-dmy-wrap > input.date-dmy {
  width: 100%;
  padding-right: 38px !important;
  box-sizing: border-box;
  margin: 0;
}
.date-dmy-btn {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid transparent;
  background: #f1f5f9;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 5px 7px;
  border-radius: 6px;
  z-index: 3;
  opacity: 0.95;
}
.date-dmy-btn:hover {
  background: #dbeafe;
  border-color: #93c5fd;
}
/* Fully hide native picker input — only used programmatically */
.date-dmy-native {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 1px !important;
  z-index: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
}
.emp-filter-bar .date-dmy-wrap {
  width: auto;
  min-width: 140px;
  display: inline-block;
}
.emp-filter-select.date-dmy {
  min-width: 120px;
}
td .date-dmy-wrap, th .date-dmy-wrap {
  min-width: 130px;
}