/*==================================================
=            QualiRM - Backend Template
=            Part 1 : Layout & Sidebar
==================================================*/

/*==============================
=            GOOGLE FONT
==============================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*==============================
=            VARIABLES
==============================*/

:root{

    --primary:#2563eb;
    --primary-hover:#1d4ed8;

    --sidebar-bg:#081b33;
    --sidebar-bg-light:#0f2747;

    --navbar-bg:#ffffff;

    --body-bg:#f5f7fb;

    --white:#ffffff;

    --text:#1f2937;
    --text-light:#6b7280;

    --border:#e5e7eb;

    --success:#10b981;
    --danger:#ef4444;
    --warning:#f59e0b;

    --shadow:0 8px 25px rgba(0,0,0,.08);

    --radius:14px;

    --transition:.3s ease;

    --sidebar-width:290px;

    --navbar-height:75px;

}


/*==============================
=            RESET
==============================*/

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

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    background:var(--body-bg);

    color:var(--text);

    overflow-x:hidden;

}

/*==============================
=            LINKS
==============================*/

a{

    text-decoration:none;

    transition:var(--transition);

}

ul{

    list-style:none;

}

/*==============================
=            APP LAYOUT
==============================*/

.app {

    display: flex;

    min-height: 100vh;

}

/***************************************************
                GLOBAL SIDEBAR
****************************************************/

/* ==========================================================
                    SIDEBAR
========================================================== */

.global-sidebar{
    position: fixed;
    top: 0;
    left: 0;

    width: 270px;
    flex-shrink: 0;
    height: 100vh;

    background: #1E293B;
    color: #F3F4F6;

    display: flex;
    flex-direction: column;

    border-right: 1px solid #374151;

    z-index: 1000;
}

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

.global-sidebar .logo{

    padding:15px 20px;

    border-bottom:1px solid #374151;

}

.global-sidebar .logo a{

    display:flex;
    align-items:center;

    color:#F9FAFB;

}

.global-sidebar .logo-icon{

    width:55px;
    height:55px;

    border-radius:12px;

    background:#2563EB;

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

    margin-right:15px;

    font-size:24px;

    color:#FFFFFF;

}

.global-sidebar .logo-text h3{

    margin:0;

    font-size:28px;

    font-weight:700;

    color:#F9FAFB;

}

.global-sidebar .logo-text span{

    color:#9CA3AF;

    font-size:12px;

}

/* ==========================================================
   SCROLL
========================================================== */

.global-sidebar .sidebar-scroll{

    flex:1;

    overflow-y:auto;

    overflow-x:hidden;

    padding:5px 0;

}

.global-sidebar .sidebar-scroll::-webkit-scrollbar{

    width:6px;

}

.global-sidebar .sidebar-scroll::-webkit-scrollbar-thumb{

    background:#4B5563;

    border-radius:20px;

}

/* ==========================================================
    MENU
========================================================== */

.global-sidebar .sidebar-menu{

    list-style:none;

    margin-bottom:0;

    padding:0;

    color:#E5E7EB;

}

.global-sidebar .sidebar-menu .global-dashboard{margin: 10px 0;}

.global-sidebar .sidebar-menu .global-dashboard a{font-size: 20px;}


.global-sidebar .sidebar-menu li{

    margin:2px 0;

}

/* ==========================================================
   DIVIDER
========================================================== */

.global-sidebar .menu-divider{

    height:1px;

    background:#374151;

    margin:0px 20px;

}

/* ==========================================================
   LINKS
========================================================== */

.global-sidebar .sidebar-menu a{

    display:flex;

    align-items:center;

    gap:15px;

    color:#CBD5E1;

    text-decoration:none;

    padding:10px 4px;

    transition:.25s;

    border-left:4px solid transparent;

}

.global-sidebar .submenu{padding-left: 10px;}

.global-sidebar .sidebar-menu a i{

    width:22px;

    text-align:center;

    font-size:17px;

    color:#94A3B8;

}

/* ==========================================================
   HOVER
========================================================== */

.global-sidebar .sidebar-menu a:hover{

    background:#334155;

    color:#FFFFFF;

    padding-left:32px;

}

.global-sidebar .sidebar-menu a:hover i{

    color:#FFFFFF;

}

/* ==========================================================
   ACTIVE
========================================================== */

.global-sidebar .sidebar-menu a.active{

    background:#1D4ED8;

    color:#FFFFFF;

    border-left:4px solid #60A5FA;

    box-shadow:0 8px 20px rgba(37,99,235,.25);

}

.global-sidebar .sidebar-menu a.active i{

    color:#FFFFFF;

}

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

.global-sidebar .sidebar-footer{

    border-top:1px solid #374151;

    padding:10px;

}

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

.global-sidebar .sidebar-footer a{

    display:flex;

    align-items:center;

    gap:15px;

    color:#D1D5DB;

    text-decoration:none;

    padding:12px 10px;

    border-radius:8px;

    transition:.25s;

}

.global-sidebar .sidebar-footer a i{

    color:#9CA3AF;

}

.global-sidebar .sidebar-footer a:hover{

    background:#1F2937;

    color:#FFFFFF;

}

.global-sidebar .sidebar-footer a:hover i{

    color:#FFFFFF;

}

.global-sidebar .sidebar-footer .logout{

    color:#F87171;

}

.global-sidebar .sidebar-footer .logout i{

    color:#F87171;

}

.global-sidebar .sidebar-footer .logout:hover{

    background:#EF4444 !important;

    color:#FFFFFF;

}

.global-sidebar .sidebar-footer .logout:hover i{

    color:#FFFFFF;

}

/* ==========================================================
   CONTENT
========================================================== */

.main-content{
    margin-left:280px;
    width:calc(100% - 280px);

    min-height:100vh;

    display:flex;
    flex-direction:column;

    flex:1;
    min-width:0;

    background:#f4f6f9;
}

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

@media(max-width:992px){

    .sidebar{

        width:260px;

    }

    .main-content{

        margin-left:260px;

    }

}

/* ==========================================
   SUBMENU
========================================== */

.has-submenu > a{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.menu-item{

    display:flex;

    align-items:center;

    gap:15px;

}

.submenu{

    display:none;

    list-style:none;

    padding:0;

    margin:8px 0;

}

.submenu li{

    margin:0;

}

.submenu a{

    display:block;

    padding:10px 24px 10px 62px;

    font-size:14px;

    color:#aeb8c7;

    text-decoration:none;

    transition:.25s;

    border-left:none;

    background:none;

}

.submenu a:hover{

    color:#fff;

    background:#273548;

}

.arrow{

    transition:.3s;

    font-size:12px;

    color:#94a3b8;

}

.has-submenu.open>.submenu{

    display:block;

}

.has-submenu.open>.sidebar-link .arrow{

    transform:rotate(180deg);

}





/*==================================================
=            QualiRM - Backend Template
=            Part 2 : Navbar
==================================================*/

/* ==========================
   Navbar
========================== */

.top-navbar{

    height:72px;

    width:calc(100% - 280px);

    margin-left:280px;

    background:#fff;

    border-bottom:1px solid #edf2f7;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 28px;

}

/* Left */

.navbar-left{

    display:flex;

    align-items:center;

    gap:18px;

}

.page-title{

    font-size:24px;

    font-weight:700;

    color:#0f172a;

}

/* Right */

.navbar-right{

    display:flex;

    align-items:center;

    gap:10px;

}

/* Icons */

.icon-btn{

    width:42px;

    height:42px;

    border:none;

    background:transparent;

    border-radius:10px;

    cursor:pointer;

    transition:.25s;

    display:flex;

    justify-content:center;

    align-items:center;

}

.icon-btn i{

    font-size:19px;

    color:#475569;

}

.icon-btn:hover{

    background:#f1f5f9;

}

.language-dropdown{
    position: relative;
}

.language-menu{

    position: absolute;

    top: calc(100% + 12px);
    right: 0;

    width: 180px;

    background: #fff;

    border: 1px solid #e5e7eb;

    border-radius: 14px;

    box-shadow: 0 15px 35px rgba(15,23,42,.12);

    padding: 8px 0;

    opacity: 0;
    visibility: hidden;

    transform: translateY(10px);

    transition: .25s ease;

    z-index: 1000;

}

.language-dropdown.active .language-menu{

    opacity: 1;
    visibility: visible;
    transform: translateY(0);

}

.language-menu a{

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 12px 18px;

    color: #334155;

    text-decoration: none;

    transition: .2s;

}

.language-menu a:hover{

    background: #f8fafc;

    color: #2563eb;

}

/* Notification */

.notification-btn{

    position:relative;

}



/* User */

.user-dropdown{

    display:flex;

    align-items:center;

    gap:12px;

    padding:6px 8px;

    padding-right:14px;

    border-radius:14px;

    transition:.25s;

    cursor:pointer;

}

.user-dropdown:hover{

    background:#f8fafc;

}

.avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#2563eb,#4f46e5);
    color:#fff;
    font-weight:700;
    flex-shrink:0;
}

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

.user-text{

    display:flex;

    flex-direction:column;

}

.user-text span{

    font-size:14px;

    font-weight:600;

    color:#0f172a;

}

.user-text small{

    color:#64748b;

    font-size:12px;

}

.user-dropdown .fa-chevron-down{

    color:#94a3b8;

    font-size:11px;

}

.user-dropdown{
    position: relative;
}

.user-trigger{
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.user-menu{
    position: absolute;
    top: calc(100% + 12px);
    right: 0;

    width: 250px;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 15px 35px rgba(15,23,42,.12);

    padding: 8px 0;

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);

    transition: .25s ease;

    z-index: 1000;
}

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

.user-menu a{
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 12px 18px;

    color: #334155;
    text-decoration: none;
    transition: .2s;
}

.user-menu a:hover{
    background: #f8fafc;
    color: #2563eb;
}

.user-menu i{
    width: 18px;
    text-align: center;
}

.menu-divider{
    height: 1px;
    background: #e5e7eb;
    margin: 8px 0;
}

.logout{
    color: #dc2626;
}

.logout:hover{
    background: #fef2f2 !important;
    color: #dc2626;
}







/*=========================================
        Dashboard Header
=========================================*/

.dashboard-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:5px;

    padding:10px 5px;

}

.dashboard-header-left h2{

    font-size:32px;

    font-weight:700;

    color:var(--text);

    margin-bottom:8px;

}

.dashboard-header-left h2 span{

    color:var(--primary);

}

.dashboard-header-left p{

    color:var(--text-light);

    font-size:15px;

    margin:0;

}

.dashboard-header-right{

    text-align:right;

}

.dashboard-header-right #currentDate{

    font-size:17px;

    font-weight:600;

    color:var(--text);

}

.dashboard-header-right #currentTime{

    margin-top:6px;

    font-size:26px;

    font-weight:700;

    color:var(--primary);

    letter-spacing:1px;

}


/* ===================================
   DASHBOARD COMPANY ADMIN
=================================== */
/*==================================================
=         COMPANY ADMIN DASHBOARD
==================================================*/

.Company-Admin-Dashboard-container-fluid{
    padding:30px;
    background:#f5f7fb;
    min-height:100vh;
}

/*=========================================
    Dashboard Statistics Cards
=========================================*/

.row.mt-1 .card{
    position: relative;
    border: none !important;
    border-radius: 18px;
    background: #ffffff;
    overflow: hidden;
    transition: all .3s ease;
    box-shadow: 0 8px 20px rgba(0,0,0,.06);
}

.row.mt-1 .card:hover{
    transform: translateY(-8px);
    box-shadow: 0 18px 35px rgba(0,0,0,.12);
}

/* Colored Top Border */

.row.mt-1 .col-lg-3:nth-child(1) .card{
    border-top:5px solid #17a2b8 !important;
}

.row.mt-1 .col-lg-3:nth-child(2) .card{
    border-top:5px solid #dc3545 !important;
}

.row.mt-1 .col-lg-3:nth-child(3) .card{
    border-top:5px solid #6c757d !important;
}

.row.mt-1 .col-lg-3:nth-child(4) .card{
    border-top:5px solid #28a745 !important;
}

/* Card Body */

.row.mt-1 .card-body{
    padding:25px;
}

/* Title */

.row.mt-1 small{
    display:block;
    font-size:13px;
    font-weight:600;
    color:#8b95a5 !important;
    letter-spacing:.5px;
    text-transform:uppercase;
}

/* Number */

.row.mt-1 h2{
    margin-top:12px;
    margin-bottom:0;
    font-size:38px;
    font-weight:700;
    color:#2c3e50;
}

/* Icon */

.row.mt-1 .fs-1{

    width:65px;
    height:65px;

    border-radius:16px;

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

    font-size:26px;

    color:#fff;

}

/* Icon Backgrounds */

.row.mt-1 .text-info{
    background:#17a2b8;
}

.row.mt-1 .text-danger{
    background:#dc3545;
}

.row.mt-1 .text-secondary{
    background:#6c757d;
}

.row.mt-1 .text-success{
    background:#28a745;
}

/* Hover Animation */

.row.mt-1 .card:hover .fs-1{
    transform: rotate(10deg) scale(1.08);
    transition:.3s;
}



/*==============================
=        Recent Activity
==============================*/

.Company-Admin-Dashboard-container-fluid table{

    margin-bottom:0;

}

.Company-Admin-Dashboard-container-fluid table th{

    background:#f7f8fa;

    border:none;

    color:#666;

    font-weight:600;

    padding:15px;

}

.Company-Admin-Dashboard-container-fluid table td{

    padding:16px;

    border-top:1px solid #f1f1f1;

    vertical-align:middle;

}

.Company-Admin-Dashboard-container-fluid table tbody tr{

    transition:.25s;

}

.Company-Admin-Dashboard-container-fluid table tbody tr:hover{

    background:#f8fbff;

}

/*==============================
=        Quick Actions
==============================*/

.Company-Admin-Dashboard-container-fluid .list-group-item{

    border:none;

    padding:18px 22px;

    font-size:15px;

    transition:.25s;

}

.Company-Admin-Dashboard-container-fluid .list-group-item:hover{

    background:#0d6efd;

    color:#fff;

    padding-left:35px;

}

/*==============================
=        Responsive
==============================*/

@media(max-width:991px){

.Company-Admin-Dashboard-container-fluid{

    padding:20px;

}

.Company-Admin-Dashboard-container-fluid h2{

    font-size:28px;

}

.Company-Admin-Dashboard-container-fluid .fs-1{

    width:60px;
    height:60px;
    font-size:24px;

}

}

@media(max-width:768px){

.Company-Admin-Dashboard-container-fluid{

    padding:15px;

}

.Company-Admin-Dashboard-container-fluid .card{

    margin-bottom:20px;

}

.Company-Admin-Dashboard-container-fluid h2{

    font-size:24px;

}

}


/*==================================================
=            STANDARD USER DASHBOARD
==================================================*/

.standard-dashboard{
    padding:30px;
    background:#f5f7fa;
    min-height:100vh;
}

/*=====================================
=            Dashboard Cards
=====================================*/

.dashboard-card{
    border:none;
    border-radius:18px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    transition:.3s;
}

.dashboard-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.dashboard-card .card-body{
    padding:25px;
}

.dashboard-card small{
    color:#8a8f98;
    font-size:14px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
}

.dashboard-card h2{
    margin-top:10px;
    margin-bottom:0;
    font-size:38px;
    font-weight:700;
    color:#2d3748;
}

/*=====================================
=            Icons
=====================================*/

.icon{
    width:65px;
    height:65px;

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

    border-radius:18px;

    color:#fff;
    font-size:28px;

    transition:.3s;
}

.dashboard-card:hover .icon{
    transform:rotate(8deg) scale(1.1);
}

/*=====================================
=        Bootstrap Colors
=====================================*/

.bg-primary{
    background:#0d6efd !important;
}

.bg-success{
    background:#198754 !important;
}

.bg-warning{
    background:#ffc107 !important;
    color:#333 !important;
}

.bg-danger{
    background:#dc3545 !important;
}

/*=====================================
=            General Cards
=====================================*/

.standard-dashboard .card{
    border:none;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.standard-dashboard .card-header{
    background:#fff;
    border-bottom:1px solid #ececec;
    padding:18px 25px;
}

.standard-dashboard .card-header h5{
    margin:0;
    font-size:18px;
    font-weight:600;
    color:#2d3748;
}

/*=====================================
=            Table
=====================================*/

.standard-dashboard table{
    margin-bottom:0;
}

.standard-dashboard table thead{
    background:#f8f9fb;
}

.standard-dashboard table th{
    border:none;
    color:#6c757d;
    font-weight:600;
    padding:15px;
}

.standard-dashboard table td{
    padding:15px;
    vertical-align:middle;
    border-top:1px solid #f0f0f0;
}

.standard-dashboard tbody tr{
    transition:.3s;
}

.standard-dashboard tbody tr:hover{
    background:#f8fbff;
}

/*=====================================
=            Badges
=====================================*/

.badge{
    padding:7px 12px;
    border-radius:30px;
    font-size:12px;
    font-weight:600;
}

/*=====================================
=        Quick Actions
=====================================*/

.list-group-item{
    border:none;
    padding:18px 25px;
    transition:.3s;
    font-weight:500;
}

.list-group-item i{
    width:25px;
    text-align:center;
}

.list-group-item:hover{
    background:#0d6efd;
    color:#fff;
    padding-left:35px;
}

.list-group-item:hover i{
    color:#fff;
}

/*=====================================
=        Recent Activity
=====================================*/

.standard-dashboard .list-group-flush .list-group-item{
    border-bottom:1px solid #f1f1f1;
}

.standard-dashboard .list-group-flush .list-group-item:last-child{
    border-bottom:none;
}

/*=====================================
=            Responsive
=====================================*/

@media(max-width:992px){

.standard-dashboard{
    padding:20px;
}

.dashboard-card h2{
    font-size:30px;
}

.icon{
    width:55px;
    height:55px;
    font-size:22px;
}

}

@media(max-width:768px){

.standard-dashboard{
    padding:15px;
}

.dashboard-card{
    margin-bottom:20px;
}

.card{
    margin-bottom:20px;
}

}


/*==========================================
        MANAGER DASHBOARD
==========================================*/

.manager-dashboard{
    padding:30px;
    background:#f4f7fc;
    min-height:100vh;
}

/*==========================================
            Dashboard Cards
==========================================*/

.manager-dashboard .dashboard-card{
    border:none;
    border-radius:18px;
    background:#fff;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    transition:all .3s ease;
    overflow:hidden;
    position:relative;
}

.manager-dashboard .dashboard-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
    background:#0d6efd;
}

.manager-dashboard .dashboard-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 35px rgba(0,0,0,.15);
}

.manager-dashboard .card-body{
    padding:25px;
}

/*==========================================
            Text
==========================================*/

.manager-dashboard small{
    display:block;
    font-size:13px;
    color:#8b95a5;
    text-transform:uppercase;
    letter-spacing:1px;
    font-weight:600;
}

.manager-dashboard h2{
    margin:10px 0 0;
    font-size:38px;
    font-weight:700;
    color:#2c3e50;
}

/*==========================================
            Icons
==========================================*/

.manager-dashboard .icon{

    width:65px;
    height:65px;

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

    border-radius:16px;

    color:#fff;

    font-size:28px;

    transition:.3s;

}

.manager-dashboard .dashboard-card:hover .icon{
    transform:rotate(8deg) scale(1.08);
}

/*==========================================
        Bootstrap Background Colors
==========================================*/

.manager-dashboard .bg-primary{
    background:#0d6efd !important;
}

.manager-dashboard .bg-success{
    background:#198754 !important;
}

.manager-dashboard .bg-warning{
    background:#ffc107 !important;
    color:#222 !important;
}

.manager-dashboard .bg-danger{
    background:#dc3545 !important;
}

/*==========================================
            Content Cards
==========================================*/

.manager-dashboard .card{
    border:none;
    border-radius:18px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    overflow:hidden;
}

.manager-dashboard .card-header{
    background:#fff;
    border-bottom:1px solid #ececec;
    padding:18px 25px;
}

.manager-dashboard .card-header h5{
    margin:0;
    font-size:18px;
    font-weight:600;
    color:#2d3748;
}

/*==========================================
            Table
==========================================*/

.manager-dashboard table{
    margin-bottom:0;
}

.manager-dashboard table thead{
    background:#f8f9fb;
}

.manager-dashboard table th{
    border:none;
    padding:15px;
    color:#6c757d;
    font-weight:600;
}

.manager-dashboard table td{
    padding:16px;
    vertical-align:middle;
    border-top:1px solid #edf0f5;
}

.manager-dashboard tbody tr{
    transition:.25s;
}

.manager-dashboard tbody tr:hover{
    background:#f5f9ff;
}

/*==========================================
            Badges
==========================================*/

.manager-dashboard .badge{
    padding:8px 14px;
    border-radius:30px;
    font-size:12px;
    font-weight:600;
}

/*==========================================
        Quick Actions
==========================================*/

.manager-dashboard .list-group-item{
    border:none;
    padding:18px 22px;
    transition:.3s;
    font-weight:500;
}

.manager-dashboard .list-group-item i{
    width:28px;
    text-align:center;
    color:#0d6efd;
}

.manager-dashboard .list-group-item:hover{
    background:#0d6efd;
    color:#fff;
    padding-left:32px;
}

.manager-dashboard .list-group-item:hover i{
    color:#fff;
}

/*==========================================
        Responsive
==========================================*/

@media(max-width:992px){

.manager-dashboard{
    padding:20px;
}

.manager-dashboard h2{
    font-size:30px;
}

.manager-dashboard .icon{
    width:55px;
    height:55px;
    font-size:22px;
}

}

@media(max-width:768px){

.manager-dashboard{
    padding:15px;
}

.manager-dashboard .dashboard-card{
    margin-bottom:20px;
}

.manager-dashboard .card{
    margin-bottom:20px;
}

}














/* ===================================
   DASHBOARD SUPER ADMIN
=================================== */

/* ===================================
   VARIABLES
=================================== */

:root{

    --sidebar-width:270px;

    --primary:#2563eb;
    --primary-hover:#1d4ed8;

    --success:#16a34a;
    --warning:#f59e0b;
    --danger:#dc2626;

    --white:#ffffff;

    --body:#f4f7fc;

    --card:#ffffff;

    --border:#e5e7eb;

    --text:#1f2937;

    --text-light:#6b7280;

    --shadow:0 10px 30px rgba(0,0,0,.05);

    --radius:14px;

    --transition:.25s;
}

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

body{

    background:var(--body);

    font-family:'Poppins',sans-serif;

    color:var(--text);

}

a{

    text-decoration:none;

    color:inherit;

}

img{

    max-width:100%;

}

table{

    width:100%;

    border-collapse:collapse;

}

.dashboard{

    padding:30px;

}

.welcome-card{

    background:var(--card);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:25px 30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.welcome-card h2{

    font-size:28px;

    margin-bottom:8px;

}

.welcome-card p{

    color:var(--text-light);

}

.date-time{

    text-align:right;

    font-weight:600;

}

#currentDate{

    margin-bottom:5px;

}
.stats-grid{

    display:grid;

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

    gap:20px;

    margin-bottom:30px;

}
.stat-card{

    background:var(--card);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:25px;

    transition:var(--transition);

    cursor:pointer;

}

.stat-card:hover{

    transform:translateY(-6px);

}

.stat-card i{

    font-size:28px;

    color:var(--primary);

    margin-bottom:20px;

}

.stat-card h3{

    font-size:15px;

    color:var(--text-light);

    margin-bottom:10px;

}

.stat-card span{

    font-size:32px;

    font-weight:700;

}

.dashboard-grid{

    display:grid;

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

    gap:25px;

}
.card{

    background:var(--card);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:25px;

}

.card-header{

    font-size:18px;

    font-weight:600;

    margin-bottom:20px;

}
table thead{

    background:#f9fafb;

}

table th{

    padding:14px;

    text-align:left;

    font-size:14px;

}

table td{

    padding:14px;

    border-top:1px solid var(--border);

}
.badge{

    padding:6px 12px;

    border-radius:50px;

    font-size:13px;

    font-weight:600;

}

.success{

    background:#dcfce7;

    color:#166534;

}

.danger{

    background:#fee2e2;

    color:#991b1b;

}
.quick-actions{

    display:grid;

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

    gap:15px;

}

.btn-action{

    background:var(--primary);

    color:white;

    padding:15px;

    border-radius:10px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    transition:var(--transition);

}

.btn-action:hover{

    background:var(--primary-hover);

}
.status-list{

    list-style:none;

}

.status-list li{

    display:flex;

    justify-content:space-between;

    padding:14px 0;

    border-bottom:1px solid var(--border);

}
.chart-card{

    min-height:340px;

}

.coming-soon{

    display:flex;

    justify-content:center;

    align-items:center;

    height:260px;

    color:var(--text-light);

    font-size:22px;

}
@media(max-width:1200px){

    .stats-grid{

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

    }

}

@media(max-width:900px){

    .dashboard-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .welcome-card{

        flex-direction:column;

        align-items:flex-start;

        gap:20px;

    }

    .stats-grid{

        grid-template-columns:1fr;

    }

    .quick-actions{

        grid-template-columns:1fr;

    }

}

/*   01 Variables
02 Reset
03 Typography
04 Layout
05 Sidebar
06 Navbar
07 Dashboard
08 Cards
09 Page Header
10 Buttons
11 Forms
12 Tables
13 Badges
14 Alerts
15 Modals
16 Pagination
17 Utilities
18 Responsive        */

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

.page-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.page-title{

    font-size:32px;

    font-weight:700;

    margin-bottom:8px;

}

.breadcrumb{

    display:flex;

    gap:10px;

    list-style:none;

    color:var(--text-light);

}

.breadcrumb li:not(:last-child)::after{

    content:"/";

    margin-left:10px;

}
.btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    border:none;

    cursor:pointer;

    padding:12px 22px;

    border-radius:10px;

    font-size:15px;

    font-weight:600;

    transition:.25s;

}

.btn-primary{

    background:var(--primary);

    color:white;

}

.btn-primary:hover{

    background:var(--primary-hover);

}
.btn-success{

    background:var(--success);

    color:white;

}
.btn-danger{

    background:var(--danger);

    color:white;

}
.btn-warning{

    background:var(--warning);

    color:white;

}
.btn-outline{

    background:white;

    border:1px solid var(--border);

}
.btn-sm{

    padding:8px 14px;

    font-size:13px;

}
.btn-lg{

    padding:15px 28px;

}

.form-group{

    margin-bottom:22px;

}
.form-label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

}
.form-control{

    width:100%;

    height:50px;

    padding:0 15px;

    border:1px solid var(--border);

    border-radius:10px;

    transition:.25s;

    font-size:15px;

}
.form-control:focus{

    outline:none;

    border-color:var(--primary);

}
.form-select{

    width:100%;

    height:50px;

    border:1px solid var(--border);

    border-radius:10px;

    padding:0 15px;

}
textarea.form-control{

    height:160px;

    padding:15px;

    resize:vertical;

}
.is-valid{

    border-color:var(--success);

}

.is-invalid{

    border-color:var(--danger);

}
.invalid-feedback{

    color:var(--danger);

    margin-top:6px;

    font-size:13px;

}
.table-card{

    background:white;

    border-radius:14px;

    box-shadow:var(--shadow);

    overflow:hidden;

}
.table-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px;

    border-bottom:1px solid var(--border);

}
.table-search{

    width:320px;

    height:45px;

    border:1px solid var(--border);

    border-radius:10px;

    padding:0 15px;

}
.custom-table{

    width:100%;

    border-collapse:collapse;

}
.custom-table thead{

    background:#f8fafc;

}
.custom-table th,
.custom-table td{

    padding:16px;

    text-align:left;

}
.custom-table tbody tr:hover{

    background:#f9fafb;

}
.empty-state{

    padding:80px 20px;

    text-align:center;

}

.empty-state i{

    font-size:60px;

    color:#d1d5db;

    margin-bottom:20px;

}

.empty-state h3{

    margin-bottom:10px;

}

.empty-state p{

    color:var(--text-light);

}
.pagination{

    display:flex;

    justify-content:flex-end;

    gap:8px;

    padding:20px;

}

.pagination a{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:8px;

    border:1px solid var(--border);

}

.pagination a.active{

    background:var(--primary);

    color:white;

}

/****************************
**Start users.php 
*****************************/
.users-toolbar {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.users-toolbar .search-box {
    position: relative;
    flex: 1;
    min-width: 300px;
}

.users-toolbar .search-box i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}

.users-toolbar .search-box input {
    padding-left: 42px;
}

.users-toolbar select {
    min-width: 180px;
}
.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}
.user-avatar {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.user-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}
.avatar-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #eef2ff;
    color: #4f46e5;

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

    font-size: 18px;
}
.user-details {
    display: flex;
    flex-direction: column;
}
.user-name {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}
.user-email {
    font-size: 13px;
    color: #6b7280;
}
.users-table {
    margin-bottom: 0;
}

.users-table thead th {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 1px solid #e5e7eb;
}

.users-table tbody td {
    vertical-align: middle;
    padding: 18px 16px;
}
.users-table tbody tr {
    transition: .25s;
}

.users-table tbody tr:hover {
    background: #f8fafc;
}
.card {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15,23,42,.05);
}
.card-header {
    background: #fff;
    border-bottom: 1px solid #edf2f7;
    font-weight: 600;
    padding: 18px 22px;
}
.status-active,
.status-inactive {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
}
.status-active {
    background: #dcfce7;
    color: #166534;
}
.status-inactive {
    background: #fee2e2;
    color: #991b1b;
}
.action-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: none;
    background: transparent;
}

.action-btn:hover {
    background: #f1f5f9;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-weight: 600;
    margin-bottom: 8px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 25px;
}

.card-header i {
    color: var(--main-color);
}

@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}
.full-width{
    grid-column:1 / -1;
}

/* ==========================
   Platform Modules
========================== */

.modules-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:15px;
}

.module-link{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:22px 15px;
    transition:.3s;
    color:#374151;
}

.module-link:hover{
    transform:translateY(-4px);
    border-color:#2563eb;
    box-shadow:0 10px 20px rgba(0,0,0,.08);
    color:#2563eb;
}

.module-link i{
    font-size:28px;
    margin-bottom:12px;
}

.module-link span{
    font-size:14px;
    font-weight:600;
    text-align:center;
}



/*************************************
**************************************
*Super admin dashboard and sidebar style 
**************************************
**************************************/
/* ==========================================
   Dashboard Layout
========================================== */

.dashboard-layout {
    display: flex;
    min-height: 100vh;
    background: #f8fafc;
}


/* ==========================================
   Sidebar
========================================== */

.dashboard-sidebar {
    width: 270px;
    min-width: 270px;
    background: #ffffff;
    border-right: 1px solid #e5e7eb;
    padding: 24px 18px;
    overflow-y: auto;
}


/* ==========================================
   Brand
========================================== */

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;

    padding-bottom: 20px;
    margin-bottom: 25px;

    border-bottom: 1px solid #e5e7eb;

    color: #0f172a;
    font-size: 22px;
    font-weight: 700;
}

.sidebar-brand i {
    width: 42px;
    height: 42px;

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

    border-radius: 12px;

    background: #2563eb;
    color: #ffffff;
}


/* ==========================================
   Menu
========================================== */

.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-menu li {
    margin-bottom: 6px;
}

.sidebar-menu li a {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 13px 16px;

    border-radius: 12px;

    color: #475569;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;

    transition: all .25s ease;
}

.sidebar-menu li a i {
    width: 22px;
    text-align: center;
    font-size: 17px;
}


/* Hover */

.sidebar-menu li a:hover {
    background: #eff6ff;
    color: #2563eb;
}


/* Active */

.sidebar-menu li.active a {
    background: #2563eb;
    color: #ffffff;
}

.sidebar-menu li.active a i {
    color: #ffffff;
}


/* Logout */

.sidebar-menu li:last-child {
    margin-top: 30px;
}

.sidebar-menu li a.logout {
    color: #dc2626;
}

.sidebar-menu li a.logout:hover {
    background: #fef2f2;
}


/* ==========================================
   Dashboard Content
========================================== */

.dashboard-content {
    flex: 1;
    padding: 30px;
    overflow-x: auto;
}


/* ==========================================
   Scrollbar
========================================== */

.dashboard-sidebar::-webkit-scrollbar {
    width: 6px;
}

.dashboard-sidebar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

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




/*==========================================
        START COMPANY ADMIN MODULES
==========================================*/

/*==========================================
        CATEGORIES MODULE
==========================================*/

.categories-page-content-wrapper {
    width: calc(100% - 280px);
    margin-left: 280px;
    padding: 10px;
}

.categories-page-content-wrapper .stats-icon {
    width: 55px;
    height: 55px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*==========================================
        DOCUMENTS MODULE
==========================================*/

.categories-page-content-wrapper .dashboard-card {
    border-radius: 15px;
    transition: all 0.3s ease;
}

.categories-page-content-wrapper .dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
}

.categories-page-content-wrapper .stats-icon {
    width: 55px;
    height: 55px;
    border-radius: 14px;

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

    font-size: 1.4rem;
}



/*==========================================
    COMPANY ADMIN DASHBOARD DOCUMENT CONTROL
==========================================*/
.categories-page-content-wrapper .dashboard-card{
    border-radius:15px;
    transition:.3s;
}

.categories-page-content-wrapper .dashboard-card:hover{
    transform:translateY(-6px);
    box-shadow:0 .75rem 1.5rem rgba(0,0,0,.12)!important;
}

.categories-page-content-wrapper .dashboard-icon{
    width:70px;
    height:70px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.categories-page-content-wrapper .dashboard-card h2{
    font-size:2rem;
    font-weight:700;
}

.categories-page-content-wrapper .dashboard-card p{
    font-weight:600;
}

.categories-page-content-wrapper .action-card{
    transition:all .3s ease;
    border-width:2px;
}

.categories-page-content-wrapper .action-card:hover{

    transform:translateY(-8px);

    box-shadow:0 1rem 2rem rgba(0,0,0,.15);

}

.categories-page-content-wrapper .action-card i{

    transition:.3s;

}

.categories-page-content-wrapper .action-card:hover i{

    transform:scale(1.15);

}


/*==========================================
    MANAGER DASHBOARD DOCUMENT CONTROL
==========================================*/

.categories-page-content-wrapper .dashboard-action{
    transition:.25s;
    cursor:pointer;
}

.categories-page-content-wrapper .dashboard-action:hover{
    transform:translateY(-6px);
    box-shadow:0 .75rem 1.5rem rgba(0,0,0,.12)!important;
}

.categories-page-content-wrapper .dashboard-action-icon{
    width:70px;
    height:70px;
    margin:auto;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
}

/*==========================================
    CONTRUBITOR DASHBOARD DOCUMENT CONTROL
==========================================*/

.categories-page-content-wrapper .dashboard-card{
    border-radius:15px;
    transition:.3s;
}

.categories-page-content-wrapper .dashboard-card:hover{
    transform:translateY(-6px);
    box-shadow:0 .75rem 1.5rem rgba(0,0,0,.12)!important;
}

.categories-page-content-wrapper .dashboard-icon{
    width:65px;
    height:65px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:24px;
}

.categories-page-content-wrapper .dashboard-timeline-icon{

    width:50px;

    height:50px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:18px;

}
/* ==========================================
   DASHBOARD QUICK ACTIONS
========================================== */

.categories-page-content-wrapper .dashboard-action{

    display:block;
    text-align:center;
    background:#fff;
    padding:30px 20px;
    border-radius:15px;
    transition:.3s;
    border:1px solid #e9ecef;
    color:#212529;

}

.categories-page-content-wrapper .dashboard-action:hover{

    transform:translateY(-6px);
    box-shadow:0 .75rem 1.5rem rgba(0,0,0,.12);
    color:#0d6efd;

}

.categories-page-content-wrapper .dashboard-action-icon{

    width:70px;
    height:70px;
    border-radius:50%;
    margin:auto;

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

    color:#fff;
    font-size:28px;

}


/* ==========================================
    NAVBAR NOTIFICATIONS 
========================================== */

.container-notifications {width: calc(100% - 280px);
    margin-left: 280px;
    padding: 10px;}

.notification-dropdown{
    position:relative;
}

.notification-menu{

    position:absolute;

    top:55px;

    right:0;

    width:380px;

    background:#fff;

    border-radius:12px;

    box-shadow:0 12px 35px rgba(0,0,0,.15);

    display:none;

    overflow:hidden;

    z-index:9999;

}

.notification-menu{
    display:none;
}

.notification-menu.show{
    display:block;
}

.notification-header{

    padding:15px 18px;

    border-bottom:1px solid #ececec;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.notification-header h6{

    margin:0;

    font-weight:600;

}

.notification-list{

    max-height:450px;

    overflow-y:auto;

}

.notification-item{

    display:flex;

    gap:15px;

    padding:15px 18px;

    text-decoration:none;

    color:#333;

    border-bottom:1px solid #f3f3f3;

}

.notification-item:hover{

    background:#f8f9fa;

}

.notification-icon{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#eef4ff;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#2563eb;

    flex-shrink:0;

}

.notification-content{

    flex:1;

}

.notification-content strong{

    display:block;

    margin-bottom:4px;

}

.notification-content p{

    margin:0;

    color:#666;

    font-size:13px;

}

.notification-content small{

    color:#999;

}

.notification-dot{

    width:10px;

    height:10px;

    background:#2563eb;

    border-radius:50%;

    margin-top:6px;

}

.notification-empty{

    text-align:center;

    padding:40px;

    color:#888;

}




/*Notification page */





.notification-page{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.notification-card{

    display:flex;

    gap:20px;

    background:#fff;

    border-radius:12px;

    padding:20px;

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

    transition:.25s;

    border-left:4px solid transparent;

}

.notification-card:hover{

    transform:translateY(-2px);

}

.notification-card.unread{

    border-left:4px solid #0d6efd;

    background:#f8fbff;

}

.notification-icon{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:18px;

    flex-shrink:0;

}

.notification-icon.success{

    background:#d1fae5;

    color:#059669;

}

.notification-icon.info{

    background:#dbeafe;

    color:#2563eb;

}

.notification-icon.warning{

    background:#fef3c7;

    color:#d97706;

}

.notification-icon.danger{

    background:#fee2e2;

    color:#dc2626;

}

.notification-icon.error{

    background:#fce7f3;

    color:#be185d;

}

.notification-body{

    flex:1;

}

.notification-title{

    font-size:17px;

    font-weight:600;

    margin-bottom:6px;

}

.notification-message{

    color:#666;

    margin-bottom:15px;

}

.notification-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:13px;

    color:#999;

}

/* ==========================================
   NAVBAR NOTIFICATION BADGE
========================================== */

.notification-btn {
    position: relative;
}

.notification-btn .badge {

    position: absolute;

    top: -5px;
    right: -5px;

    min-width: 18px;
    height: 18px;

    padding: 0 5px;

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

    background: #dc3545;
    color: #fff;

    border-radius: 50%;

    border: 2px solid #fff;

    font-size: 10px;
    font-weight: 700;

    line-height: 1;

    z-index: 2;
}





/*==========================================
        AUDITS MODULE
==========================================*/

.audit-page {
    width: calc(100% - 280px);
    margin-left: 280px;
    padding: 10px;
}







/*==========================================
        CAPA MODULE
==========================================*/

.capa-page {
    width: calc(100% - 280px);
    margin-left: 280px;
    padding: 10px;
}






/*==========================================
        CAPA MODULE
==========================================*/

.risk-page {
    width: calc(100% - 280px);
    margin-left: 280px;
    padding: 10px;
}

/*=========================================
=            RISK MATRIX
=========================================*/

.risk-page .bg-orange{

    background:#fd7e14 !important;

    color:#fff;

}

.risk-page .risk-matrix td{

    transition:.25s;

}

.risk-page .risk-matrix td:hover{

    transform:scale(1.05);

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

}









/*==========================================
        SAFETY MODULE
==========================================*/

.safety-page {
    width: calc(100% - 280px);
    margin-left: 280px;
    padding: 10px;
}

/* ==========================================================
   QualiRM - Large Form Modal Scrolling
   ========================================================== */

#addIncidentModal .modal-dialog {
    max-height: calc(100vh - 30px);
}

#addIncidentModal .modal-content {
    max-height: calc(100vh - 30px);
}

#addIncidentModal .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 180px);
}
/* ==========================================================
   EDIT INCIDENT MODAL
   ========================================================== */

#editIncidentModal .modal-dialog {
    max-height: calc(100vh - 30px);
}

#editIncidentModal .modal-content {
    max-height: calc(100vh - 30px);
}

#editIncidentModal .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 180px);
}
/* ==========================================================
   INVESTIGATE INCIDENT MODAL
   ========================================================== */

#investigateIncidentModal .modal-dialog {
    max-height: calc(100vh - 30px);
}

#investigateIncidentModal .modal-content {
    max-height: calc(100vh - 30px);
}

#investigateIncidentModal .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 180px);
}

/* ==============================================================
   ADD NEAR MISS MODAL — SCROLLING
   ============================================================== */

#addNearMissModal .modal-dialog {
    max-height: calc(100vh - 30px);
}

#addNearMissModal .modal-content {
    max-height: calc(100vh - 30px);
}

#addNearMissModal .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 180px);
}

/* ==============================================================
   VIEW NEAR MISS MODAL — SCROLLING
   ============================================================== */

[id^="viewNearMissModal"] .modal-dialog {
    max-height: calc(100vh - 30px);
}

[id^="viewNearMissModal"] .modal-content {
    max-height: calc(100vh - 30px);
}

[id^="viewNearMissModal"] .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 180px);
}

/* ==============================================================
   EDIT NEAR MISS MODAL — SCROLLING
   ============================================================== */

#editNearMissModal .modal-dialog {
    max-height: calc(100vh - 30px);
}

#editNearMissModal .modal-content {
    max-height: calc(100vh - 30px);
}

#editNearMissModal .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 180px);
}

/* ==============================================================
   ADD HAZARD MODAL — SCROLLING
   ============================================================== */

#addHazardModal .modal-dialog {
    max-height: calc(100vh - 30px);
}


#addHazardModal .modal-content {
    max-height: calc(100vh - 30px);
}


#addHazardModal .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 180px);
}


/* ==============================================================
   VIEW HAZARD MODAL — SCROLLING
   ============================================================== */

[id^="viewHazardModal"] .modal-dialog {
    max-height: calc(100vh - 30px);
}


[id^="viewHazardModal"] .modal-content {
    max-height: calc(100vh - 30px);
}


[id^="viewHazardModal"] .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 180px);
}


/* ==============================================================
   EDIT HAZARD MODAL — SCROLLING
   ============================================================== */

[id^="editHazardModal"] .modal-dialog {
    max-height: calc(100vh - 30px);
}


[id^="editHazardModal"] .modal-content {
    max-height: calc(100vh - 30px);
}


[id^="editHazardModal"] .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 180px);
}


/* ==============================================================
   ASSIGN HAZARD OWNER MODAL — SCROLLING
   ============================================================== */

[id^="assignHazardOwnerModal"] .modal-dialog {
    max-height: calc(100vh - 30px);
}


[id^="assignHazardOwnerModal"] .modal-content {
    max-height: calc(100vh - 30px);
}


[id^="assignHazardOwnerModal"] .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 180px);
}


/* ==============================================================
   VERIFY HAZARD MODAL — SCROLLING
   ============================================================== */

[id^="verifyHazardModal"] .modal-dialog {
    max-height: calc(100vh - 30px);
}


[id^="verifyHazardModal"] .modal-content {
    max-height: calc(100vh - 30px);
}


[id^="verifyHazardModal"] .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 180px);
}


/* ==============================================================
   DELETE HAZARD MODAL — SCROLLING
   ============================================================== */

[id^="deleteHazardModal"] .modal-dialog {
    max-height: calc(100vh - 30px);
}


[id^="deleteHazardModal"] .modal-content {
    max-height: calc(100vh - 30px);
}


[id^="deleteHazardModal"] .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 180px);
}

/* ==============================================================
   ADD EMERGENCY PLAN MODAL — SCROLLING
   ============================================================== */

#addEmergencyPlanModal .modal-dialog {
    max-height: calc(100vh - 30px);
}

#addEmergencyPlanModal .modal-content {
    max-height: calc(100vh - 30px);
}

#addEmergencyPlanModal .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 180px);
}


/* ==============================================================
   VIEW EMERGENCY PLAN MODALS — SCROLLING
   ============================================================== */

[id^="viewEmergencyPlanModal"] .modal-dialog {
    max-height: calc(100vh - 30px);
}

[id^="viewEmergencyPlanModal"] .modal-content {
    max-height: calc(100vh - 30px);
}

[id^="viewEmergencyPlanModal"] .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 180px);
}


/* ==============================================================
   EDIT EMERGENCY PLAN MODALS — SCROLLING
   ============================================================== */

[id^="editEmergencyPlanModal"] .modal-dialog {
    max-height: calc(100vh - 30px);
}

[id^="editEmergencyPlanModal"] .modal-content {
    max-height: calc(100vh - 30px);
}

[id^="editEmergencyPlanModal"] .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 180px);
}


/* ==============================================================
   DELETE EMERGENCY PLAN MODALS
   ============================================================== */

[id^="deleteEmergencyPlanModal"] .modal-dialog {
    max-height: calc(100vh - 30px);
}

[id^="deleteEmergencyPlanModal"] .modal-content {
    max-height: calc(100vh - 30px);
}

[id^="deleteEmergencyPlanModal"] .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 180px);
}


/* ==============================================================
   GENERAL RECORD EMERGENCY DRILL MODAL — SCROLLING
   ============================================================== */

#recordEmergencyDrillModal .modal-dialog {
    max-height: calc(100vh - 30px);
}

#recordEmergencyDrillModal .modal-content {
    max-height: calc(100vh - 30px);
}

#recordEmergencyDrillModal .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 180px);
}


/* ==============================================================
   PLAN-SPECIFIC RECORD EMERGENCY DRILL MODALS — SCROLLING
   ============================================================== */

[id^="recordEmergencyDrillModal"] .modal-dialog {
    max-height: calc(100vh - 30px);
}

[id^="recordEmergencyDrillModal"] .modal-content {
    max-height: calc(100vh - 30px);
}

[id^="recordEmergencyDrillModal"] .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 180px);
}

/* ==============================================================
   ADD PPE MODAL — SCROLLING
   ============================================================== */


#addPPEModal .modal-dialog {
    max-height: calc(100vh - 30px);
}


#addPPEModal .modal-content {
    max-height: calc(100vh - 30px);
}


#addPPEModal .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 180px);
}



/* ==============================================================
   VIEW PPE MODALS — SCROLLING
   ============================================================== */


[id^="viewPPEModal"] .modal-dialog {
    max-height: calc(100vh - 30px);
}


[id^="viewPPEModal"] .modal-content {
    max-height: calc(100vh - 30px);
}


[id^="viewPPEModal"] .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 180px);
}



/* ==============================================================
   EDIT PPE MODALS — SCROLLING
   ============================================================== */


[id^="editPPEModal"] .modal-dialog {
    max-height: calc(100vh - 30px);
}


[id^="editPPEModal"] .modal-content {
    max-height: calc(100vh - 30px);
}


[id^="editPPEModal"] .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 180px);
}



/* ==============================================================
   DELETE PPE MODALS
   ============================================================== */


[id^="deletePPEModal"] .modal-dialog {
    max-height: calc(100vh - 30px);
}


[id^="deletePPEModal"] .modal-content {
    max-height: calc(100vh - 30px);
}


[id^="deletePPEModal"] .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 180px);
}


/*
|--------------------------------------------------------------------------
| ADD TRAINING MODAL
|--------------------------------------------------------------------------
*/

#addTrainingModal .modal-dialog {

    max-height: calc(100vh - 30px);

}


#addTrainingModal .modal-content {

    max-height: calc(100vh - 30px);

}


#addTrainingModal .modal-body {

    overflow-y: auto;

    max-height: calc(100vh - 180px);

}


/*
|--------------------------------------------------------------------------
| VIEW TRAINING MODALS
|--------------------------------------------------------------------------
*/

[id^="viewTrainingModal"] .modal-dialog {

    max-height: calc(100vh - 30px);

}


[id^="viewTrainingModal"] .modal-content {

    max-height: calc(100vh - 30px);

}


[id^="viewTrainingModal"] .modal-body {

    overflow-y: auto;

    max-height: calc(100vh - 180px);

}


/*
|--------------------------------------------------------------------------
| EDIT TRAINING MODALS
|--------------------------------------------------------------------------
*/

[id^="editTrainingModal"] .modal-dialog {

    max-height: calc(100vh - 30px);

}


[id^="editTrainingModal"] .modal-content {

    max-height: calc(100vh - 30px);

}


[id^="editTrainingModal"] .modal-body {

    overflow-y: auto;

    max-height: calc(100vh - 180px);

}


/*
|--------------------------------------------------------------------------
| DELETE TRAINING MODALS
|--------------------------------------------------------------------------
*/

[id^="deleteTrainingModal"] .modal-dialog {

    max-height: calc(100vh - 30px);

}


[id^="deleteTrainingModal"] .modal-content {

    max-height: calc(100vh - 30px);

}


[id^="deleteTrainingModal"] .modal-body {

    overflow-y: auto;

    max-height: calc(100vh - 180px);

}



/*==========================================
        SAPPLIERS MODULE
==========================================*/

.supplier-page {
    width: calc(100% - 280px);
    margin-left: 280px;
    padding: 10px;
}

/*
|--------------------------------------------------------------------------
| SUPPLIER COMPLAINT MODALS
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| ADD COMPLAINT MODAL
|--------------------------------------------------------------------------
*/

#addComplaintModal .modal-dialog {

    max-height: calc(100vh - 30px);

}


#addComplaintModal .modal-content {

    max-height: calc(100vh - 30px);

}


#addComplaintModal .modal-body {

    overflow-y: auto;

    max-height: calc(100vh - 180px);

}


/*
|--------------------------------------------------------------------------
| EDIT COMPLAINT MODALS
|--------------------------------------------------------------------------
*/

[id^="editComplaintModal"] .modal-dialog {

    max-height: calc(100vh - 30px);

}


[id^="editComplaintModal"] .modal-content {

    max-height: calc(100vh - 30px);

}


[id^="editComplaintModal"] .modal-body {

    overflow-y: auto;

    max-height: calc(100vh - 180px);

}


/*
|--------------------------------------------------------------------------
| VIEW COMPLAINT MODALS
|--------------------------------------------------------------------------
*/

[id^="viewComplaintModal"] .modal-dialog {

    max-height: calc(100vh - 30px);

}


[id^="viewComplaintModal"] .modal-content {

    max-height: calc(100vh - 30px);

}


[id^="viewComplaintModal"] .modal-body {

    overflow-y: auto;

    max-height: calc(100vh - 180px);

}


/*
|--------------------------------------------------------------------------
| CLOSE COMPLAINT MODALS
|--------------------------------------------------------------------------
*/

[id^="closeComplaintModal"] .modal-dialog {

    max-height: calc(100vh - 30px);

}


[id^="closeComplaintModal"] .modal-content {

    max-height: calc(100vh - 30px);

}


[id^="closeComplaintModal"] .modal-body {

    overflow-y: auto;

    max-height: calc(100vh - 180px);

}


/*
|--------------------------------------------------------------------------
| DELETE COMPLAINT MODALS
|--------------------------------------------------------------------------
*/

[id^="deleteComplaintModal"] .modal-dialog {

    max-height: calc(100vh - 30px);

}


[id^="deleteComplaintModal"] .modal-content {

    max-height: calc(100vh - 30px);

}


[id^="deleteComplaintModal"] .modal-body {

    overflow-y: auto;

    max-height: calc(100vh - 180px);

}

/*
|--------------------------------------------------------------------------
| ADD SUPPLIER DOCUMENT MODAL
|--------------------------------------------------------------------------
*/

#addSupplierDocumentModal .modal-dialog {

    max-height: calc(100vh - 30px);

}


#addSupplierDocumentModal .modal-content {

    max-height: calc(100vh - 30px);

}


#addSupplierDocumentModal .modal-body {

    overflow-y: auto;

    max-height: calc(100vh - 180px);

}


/*
|--------------------------------------------------------------------------
| VIEW SUPPLIER DOCUMENT MODALS
|--------------------------------------------------------------------------
*/

[id^="viewSupplierDocumentModal"] .modal-dialog {

    max-height: calc(100vh - 30px);

}


[id^="viewSupplierDocumentModal"] .modal-content {

    max-height: calc(100vh - 30px);

}


[id^="viewSupplierDocumentModal"] .modal-body {

    overflow-y: auto;

    max-height: calc(100vh - 180px);

}


/*
|--------------------------------------------------------------------------
| EDIT SUPPLIER DOCUMENT MODALS
|--------------------------------------------------------------------------
*/

[id^="editSupplierDocumentModal"] .modal-dialog {

    max-height: calc(100vh - 30px);

}


[id^="editSupplierDocumentModal"] .modal-content {

    max-height: calc(100vh - 30px);

}


[id^="editSupplierDocumentModal"] .modal-body {

    overflow-y: auto;

    max-height: calc(100vh - 180px);

}


/*
|--------------------------------------------------------------------------
| DELETE SUPPLIER DOCUMENT MODALS
|--------------------------------------------------------------------------
*/

[id^="deleteSupplierDocumentModal"] .modal-dialog {

    max-height: calc(100vh - 30px);

}


[id^="deleteSupplierDocumentModal"] .modal-content {

    max-height: calc(100vh - 30px);

}


[id^="deleteSupplierDocumentModal"] .modal-body {

    overflow-y: auto;

    max-height: calc(100vh - 180px);

}

/* ==========================================================
   Risk Notification - Row Highlight
   ========================================================== */

.risk-notification-highlight {
    animation: riskNotificationHighlight 4s ease-in-out;
}

@keyframes riskNotificationHighlight {

    0% {
        background-color: #fff3cd;
        box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.35);
    }

    70% {
        background-color: #fff3cd;
        box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.35);
    }

    100% {
        background-color: transparent;
        box-shadow: none;
    }

}


/* =========================================================
   NOTIFICATION ROW HIGHLIGHT
   ========================================================= */

.notification-highlight {

    background: #fff3cd !important;

    box-shadow:
        0 0 0 3px rgba(255, 193, 7, 0.35);

    transition:
        background 0.3s ease,
        box-shadow 0.3s ease;

}










/* =========================================================
   QualiRM Department Multi Select
========================================================= */

.qualirm-department-select {
    position: relative;
    width: 100%;
    z-index: 1000;
}


/*
|--------------------------------------------------------------------------
| Dropdown Button
|--------------------------------------------------------------------------
*/

.qualirm-department-select > button {
    width: 100%;
    min-height: 38px;

    background-color: #fff;
    border: 1px solid #ced4da;

    color: #212529;
    cursor: pointer;

    position: relative;
    z-index: 1001;
}


/*
|--------------------------------------------------------------------------
| Dropdown Menu
|--------------------------------------------------------------------------
*/

.qualirm-department-menu {
    display: none;

    position: absolute;

    top: calc(100% + 4px);
    left: 0;
    right: 0;

    width: 100%;

    background: #fff;

    border: 1px solid #dee2e6;
    border-radius: 6px;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.15);

    z-index: 99999;

    max-height: 250px;

    overflow-y: auto;

    padding: 6px 0;
}


/*
|--------------------------------------------------------------------------
| Show Menu
|--------------------------------------------------------------------------
*/

.qualirm-department-menu.show {
    display: block;
}


/*
|--------------------------------------------------------------------------
| Department Option
|--------------------------------------------------------------------------
*/

.qualirm-department-option {
    display: flex;

    align-items: center;

    gap: 10px;

    width: 100%;

    padding: 9px 14px;

    margin: 0;

    cursor: pointer;

    font-weight: 400;

    background: #fff;

    transition:
        background-color 0.15s ease;
}


.qualirm-department-option:hover {
    background-color: #f8f9fa;
}


/*
|--------------------------------------------------------------------------
| Checkbox
|--------------------------------------------------------------------------
*/

.qualirm-department-option .form-check-input {
    margin: 0;

    flex-shrink: 0;

    cursor: pointer;
}


/*
|--------------------------------------------------------------------------
| Department Name
|--------------------------------------------------------------------------
*/

.qualirm-department-option span {
    flex: 1;

    cursor: pointer;
}


/*
|--------------------------------------------------------------------------
| Important: allow dropdown to escape containers
|--------------------------------------------------------------------------
*/

.card,
.card-body,
.form-grid,
.form-group {
    overflow: visible;
}