/* SIDEBAR WORK START */

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding-left: 75px;
}

#wrapper.toggled {
    padding-left: 265px;
}

#wrapper.toggled #sidebar-wrapper {
    width: 265px;
}

#wrapper.toggled .hamburger {
    transform: rotate(0deg);
}

#wrapper.toggled .sidebar-nav li a span {
    opacity: 1;
}

#wrapper .sidebar-nav li a span {
    opacity: 0;
}

#wrapper .sidebar-nav li.sidebar-heading {
    margin-top: 10px;
}

#wrapper .sidebar-nav li.sidebar-heading a {
    background: transparent;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    padding-bottom: 5px;
    color: var(--greycolor);
}

#sidebar-wrapper {
    position: fixed;
    top: 0;
    z-index: 1000;
    left: 0;
    width: 75px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--whitecolor);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    box-shadow: 0 4px 24px 0 rgb(34 41 47 / 10%);
}

#sidebar-wrapper::-webkit-scrollbar {
    display: none;
}

#page-content-wrapper {
    width: 100%;
}

/*Sidebar nav styles*/

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 265px;
    margin: 0;
    padding: 0px 0px 30px;
    list-style: none;
}

.sidebar-nav li {
    position: relative;
    line-height: 20px;
    display: inline-block;
    width: 100%;
    padding: 0px 15px;
}

.sidebar-nav li a {
    color: inherit;
    text-decoration: none;
    padding: 12px 20px;
    font-size: 14px;
    transition: all 0.3s 0s linear;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-nav li a i {
    margin-top: 1px;
}

.sidebar-nav li.active a,
.sidebar-nav li.active a:hover,
.sidebar-nav li.active a:focus {
    background: #5600ff20;
    color: var(--websitecolor);
    font-weight: 600;
}

.sidebar-nav li.active a i,
.sidebar-nav li.active a:hover i,
.sidebar-nav li.active a:focus i {
    color: var(--websitecolor);
}

.sidebar-nav li a:hover,
.sidebar-nav li a:focus,
.sidebar-nav li.open a:hover,
.sidebar-nav li.open a:focus {
    background: var(--greyrgb);
    color: var(--blackcolor);
}

.sidebar-nav li a:hover i,
.sidebar-nav li a:active i,
.sidebar-nav li a:focus i,
.sidebar-nav li.open a:hover i,
.sidebar-nav li.open a:active i,
.sidebar-nav li.open a:focus i {
    color: var(--websitecolor);
}

.sidebar-nav li a font {
    display: flex;
    align-items: center;
}

.sidebar-nav li a i {
    font-size: 16px;
    margin-right: 10px;
    width: 17px;
    text-align: center;
}

.sidebar-nav li.dropdown a .bx-chevron-right {
    font-size: 16px;
    transform: rotate(0deg);
    transition: all 0.3s 0s linear;
}

.sidebar-nav li.dropdown a.show .bx-chevron-right {
    transform: rotate(90deg);
}

.sidebar-nav li.dropdown a:after {
    display: none;
}

.sidebar-nav > .sidebar-brand {
    padding: 5px 0px;
    margin-bottom: 10px;
}

.sidebar-nav > .sidebar-brand a {
    background: transparent !important;
    font-size: 18px;
    color: var(--websitecolor);
    font-family: var(--headingfont);
    text-transform: uppercase;
}

.sidebar-nav > .sidebar-brand img {
    width: 170px;
    margin-top: 6px;
    margin-right: 5px;
    height: 50px;
    object-fit: contain;
}

.sidebar-nav .dropdown-menu {
    top: 0;
    position: relative;
    width: 100%;
    padding: 0;
    margin-top: 15px;
    margin-bottom: 10px;
    margin-left: 30px !important;
    border-radius: 0;
    border: none;
    border-left: 1px solid #ccc !important;
    background-color: transparent;
    box-shadow: none;
}

.sidebar-nav .dropdown-menu li {
    padding: 0px 0px 0px 15px;
    margin-bottom: 10px;
}

.sidebar-nav .dropdown-menu li:last-child {
    margin-bottom: 0px;
}

.sidebar-nav .dropdown-menu li a {
    background: transparent;
    box-shadow: none;
    color: inherit;
    padding: 5px 15px;
    font-size: 12px;
    transition: all 0.3s 0s linear;
    position: relative;
    display: inline-block;
    width: auto;
}
.sidebar-nav .dropdown-menu li a:hover {
    background-color: #eee;
    color: black;
    box-shadow: none;
}

.sidebar-nav .dropdown-menu li.active a {
    /* padding-left: 30px; */
    color: var(--websitecolor);
    background: #5600ff20;
    box-shadow: none;
}

/* .sidebar-nav .dropdown-menu li a:before {
    content: "";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translate(0, -50%);
    width: 0px;
    height: 4px;
    border-radius: 50px;
    background: var(--greyrgb);
    opacity: 0;
    transition: all 0.3s 0s linear;
} */

/* .sidebar-nav .dropdown-menu li.active a:before,
.sidebar-nav .dropdown-menu li.active a:hover:before {
    background: var(--websitecolor);
    opacity: 1;
    width: 10px;
} */

/* .sidebar-nav .dropdown-menu li a:hover:before {
    opacity: 1;
    width: 10px;
} */

/*Hamburger-Cross*/

.hamburger {
    position: absolute;
    font-size: 22px;
    line-height: 22px;
    top: 32px;
    right: 20px;
    z-index: 999;
    display: block;
    color: var(--websitecolor);
    background: transparent;
    border: none;
    transform: rotate(180deg);
    transition: all 0.3s 0s linear;
    padding: 0;
}

.hamburger:hover,
.hamburger:focus,
.hamburger:active {
    outline: none;
    color: var(--websitecolor);
}

/*Overlay*/

.overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(250, 250, 250, 0.8);
    z-index: 1;
}

/* SIDEBAR WORK END */

/* HEADER WORK START */

#wrapper.toggled .header {
    width: calc(100% - 60px - 265px);
    left: 295px;
}

.header {
    background: var(--whitecolor);
    padding: 10px 20px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    position: fixed;
    width: calc(100% - 60px - 75px);
    z-index: 999;
    transition: all 0.3s 0s linear;
    left: 105px;
    top: 20px;
}

.header .header-nav {
    margin: 0px;
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.header .header-nav .dropdown-toggle::after {
    display: none;
}

.header .header-nav li {
    list-style: none;
}

.header .header-nav li a {
    color: inherit;
    text-decoration: none;
    font-size: 14px;
    padding: 0px 10px;
}

.header .header-nav li a i {
    font-size: 20px;
    line-height: 1.5;
}

.header .header-nav li .dropdown-menu {
    margin-top: 25px !important;
    box-shadow: 0 5px 25px rgb(34 41 47 / 10%);
    border: 1px solid rgba(34, 41, 47, 0.05);
    border-radius: 5px;
    /* right: -2px !important;
  left: inherit !important; */
    color: inherit;
}

.header .header-nav li.lang a img {
    width: 28px;
    height: 15px;
    margin-right: 5px;
}

.header .header-nav li.lang .dropdown-menu li a {
    padding: 10px 15px;
    transition: all 0.3s 0s linear;
}

.header .header-nav li.lang .dropdown-menu li a:hover {
    background: var(--lightgreycolor);
    color: var(--websitecolor);
}

.header .header-nav li.search .dropdown-menu {
    width: 300px;
    padding: 15px;
}

.header .header-nav li.notification a .badge {
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 10px;
    line-height: 20px;
    top: -5px;
}

.header .header-nav li.notification .dropdown-menu {
    width: 300px;
    padding: 0px;
}

.header .header-nav li.notification .dropdown-menu .noti-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid var(--lightgreycolor);
}

.header .header-nav li.notification .dropdown-menu .noti-header .badge {
    background: var(--websitelightcolor);
    color: var(--websitecolor);
    border-radius: 50px;
}

.header .header-nav li.notification .dropdown-menu .noti-body ul {
    margin: 0px;
    padding: 0px;
    height: 250px;
    overflow: auto;
}

.header .header-nav li.notification .dropdown-menu .noti-body ul li {
    list-style: none;
}

.header .header-nav li.notification .dropdown-menu .noti-body ul li a {
    padding: 10px 15px;
    border-bottom: 1px solid var(--lightgreycolor);
    display: flex;
    align-items: center;
}

.header .header-nav li.notification .dropdown-menu .noti-body ul li a img {
    width: 30px;
    height: 30px;
    border-radius: 50px;
    margin-right: 15px;
}

.header .header-nav li.notification .dropdown-menu .noti-body ul li a h6 {
    font-size: 12px;
    margin-bottom: 2px;
}

.header .header-nav li.notification .dropdown-menu .noti-body ul li a p {
    font-size: 10px;
    line-height: 14px;
    margin: 0px;
    opacity: 0.7;
}

.header .header-nav li.notification .dropdown-menu .noti-footer {
    padding: 15px;
    border-top: 1px solid var(--lightgreycolor);
}

.header .header-nav li.notification .dropdown-menu .noti-footer .web-btn {
    padding: 10px 20px;
    color: var(--whitecolor);
}

#chatModal .modal-header {
    padding: 10px 20px;
}

#chatModal .modal-header .btn-close {
    margin: -5px 0px 0px;
    padding: 0px;
}

#chatModal .modal-title {
    font-size: 14px;
    line-height: 20px;
    color: var(--blackcolor);
}

#chatModal .modal-title .status .online-dot {
    width: 10px;
    height: 10px;
    margin-right: 2px;
    border-radius: 50px;
    display: inline-block;
}

#chatModal .modal-title .status {
    font-size: 12px;
    color: var(--greycolor);
}

#chatModal .modal-body {
    height: 450px;
    overflow: auto;
    padding: 15px 20px;
}

#chatModal .modal-body .message .name {
    display: flex;
    align-items: center;
}

#chatModal .modal-body .message .name img {
    width: 40px;
    height: 40px;
    border-radius: 50px;
    margin-right: 10px;
}

#chatModal .modal-body .message .name h6 {
    font-size: 14px;
    margin: 0px;
}

#chatModal .modal-body .message .name p {
    font-size: 12px;
    margin: 0px;
    color: var(--greycolor);
}

#chatModal .modal-body .message .text {
    background: var(--lightgreycolor);
    border-radius: 5px;
    margin-top: 10px;
    padding: 10px 15px;
    display: inline-block;
}

#chatModal .modal-body .message .text p {
    margin: 0px;
    font-size: 12px;
    color: var(--blackcolor);
}

#chatModal .modal-body .message + .message {
    margin-top: 20px;
}

#chatModal .modal-body .message.reply {
    text-align: right;
}

#chatModal .modal-body .message.reply .name {
    justify-content: flex-end;
}

#chatModal .modal-body .message.reply .name img {
    margin-right: 0px;
    margin-left: 10px;
}

#chatModal .modal-body .message.reply .text {
    background: var(--websitelightcolor);
}

#chatModal .modal-footer {
    display: block;
    padding: 10px 5px;
}

.header .header-nav li.user a {
    display: flex;
    align-items: center;
    text-align: right;
}

.header .header-nav li.user a h6 {
    margin: 0px;
    font-size: 14px;
}

.header .header-nav li.user a p {
    margin: 0px;
    font-size: 12px;
    color: var(--greycolor);
}

.header .header-nav li.user a img {
    width: 40px;
    height: 40px;
    border-radius: 50px;
    margin-left: 10px;
}

.header .header-nav li.user .dropdown-menu {
    margin-top: 18px !important;
}

.header .header-nav li.user .dropdown-menu li a {
    padding: 5px 15px;
    transition: all 0.3s 0s linear;
}

.header .header-nav li.user .dropdown-menu li a:hover {
    background: var(--lightgreycolor);
    color: var(--websitecolor);
}

.header .header-nav li.user .dropdown-menu li.divider {
    height: 1px;
    background: var(--inputborder);
    margin: 5px 0px;
}

.header .header-nav li.user .dropdown-menu li a i {
    margin-right: 10px;
}

/* HEADER WORK END */

/* DASHBOARD WORK START */

#generate-reports-chart {
    margin: -65px 0px 0px;
}

.apexcharts-canvas svg {
    border-bottom-left-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
}

.apexcharts-marker {
    filter: drop-shadow(2px 4px 6px #ddd);
}

.apexcharts-svg.apexcharts-zoomable.hovering-zoom {
    cursor: unset !important;
}

.apexcharts-tooltip {
    box-shadow: 0 4px 24px 0 rgb(34 41 47 / 10%) !important;
    border: none !important;
    background: var(--whitecolor) !important;
}

.apexcharts-tooltip .apexcharts-tooltip-title {
    background: transparent !important;
    font-family: var(--headingfont) !important;
    border-bottom: 1px solid #ededed !important;
    padding: 5px 15px;
    margin: 0px;
}

.apexcharts-tooltip .apexcharts-tooltip-series-group {
    padding: 0px 15px 5px;
}

.apexcharts-xaxistooltip {
    border-radius: 5px !important;
    box-shadow: 0 4px 24px 0 rgb(34 41 47 / 10%) !important;
    border: 0 !important;
    background: var(--whitecolor) !important;
}

.apexcharts-xaxistooltip.apexcharts-active {
    opacity: 0.8 !important;
}

.apexcharts-xaxistooltip:after,
.apexcharts-xaxistooltip:before {
    border-bottom: 7px solid var(--whitecolor) !important;
}

.statistics {
    overflow: hidden;
}

.statistics .box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 15px 0px 0px;
}

.statistics .box .icon {
    width: 50px;
    height: 50px;
    line-height: 54px;
    text-align: center;
    font-size: 24px;
    border-radius: 5px;
    display: block;
}

.statistics .box .title {
    width: calc(100% - 63px);
}

.statistics .box .title h6 {
    margin: 0px 0px 2px;
}

.statistics .box .title p {
    font-size: 10px;
    margin: 0px;
    color: var(--greycolor);
}

.activities .task-list {
    margin: 0px;
    padding: 0px;
    position: relative;
}

.activities .task-list:before {
    content: "";
    position: absolute;
    width: 1px;
    height: calc(100% - 30px);
    left: 4.49px;
    top: 5px;
    background: var(--inputborder);
}

.activities .task-list li {
    list-style: none;
    font-size: 12px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 20px;
    position: relative;
}

.activities .task-list li .circle {
    width: 10px;
    height: 10px;
    border-radius: 50px;
    margin-top: 3px;
}

.activities .task-list li p {
    width: calc(100% - 60px);
    margin: 0px;
}

.activities .task-list li p b {
    color: var(--blackcolor);
}

.todo .todo-list {
    margin: 0px;
    padding: 0px;
}

.todo .todo-list li {
    list-style: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

.todo .todo-list li p {
    color: var(--blackcolor);
    width: calc(100% - 80px);
    margin: 0px;
    line-height: 18px;
}

.todo .todo-list li p small {
    color: var(--greycolor);
    font-weight: normal;
}

.sales #sales-chart {
    margin: 0px -10px -25px -18px;
}

.sales img {
    width: calc(100% + 60px);
    margin: 20px -30px 0px;
}

.member-statistics .table tr td img {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    margin-right: 10px;
}

/* DASHBOARD WORK END */

/* FOOTER WORK START */

.footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 30px -30px 0px;
    padding: 15px 30px;
    background: var(--greyrgb);
    font-size: 12px;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.footer p {
    margin: 0px;
}

/* FOOTER WORK END */

/* new-products WORK START */

.new-products .table tr td img {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    margin-right: 10px;
}

/* new-products WORK END */

/* task-overview WORK START */

.task-overview .icon-div {
    background: var(--lightgreycolor) !important;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    border-radius: 5px;
    text-align: center;
    justify-content: center;
}

.task-overview .icon-div i {
    font-size: 20px;
    color: var(--websitecolor) !important;
}

.task-overview .task-list {
    margin: 0px;
    padding: 0px;
}

.task-overview .task-list li {
    list-style: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

.task-overview .task-list li p {
    color: var(--blackcolor);
    width: calc(100% - 65px);
    margin: 0px;
    line-height: 18px;
}

.task-overview .task-list li p small {
    color: var(--greycolor);
    font-weight: normal;
}

.task-overview .task-list .img-div img {
    width: 50px;
    border-radius: 5px;
}

.task-overview .task-badge {
    font-family: var(--headingfont);
    color: grey !important;
    background: var(--lightgreycolor);
}

.task-overview .badge-p-tag {
    width: calc(100% - 120px) !important;
}

.task-overview .task-list .svg-div {
    background: var(--lightgreycolor);
    border-radius: 5px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.task-overview .task-list .svg-div img {
    width: 30px;
}

.task-overview .notification-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--websitebackground);
    padding: 15px;
    border-radius: 5px;
}

.task-overview .notification-box .badge-p-tag {
    font-family: var(--headingfont);
}

.task-overview .notification-box .badge-p-tag small {
    color: var(--bodycolor);
}

.task-overview .notification-box .notification-icon {
    font-size: 20px;
}

.last-task .task-list {
    padding: 0;
    margin: 0;
}

.last-task .task-list .img-div img {
    width: 100px;
    border-radius: 5px;
}

.last-task .task-list li {
    display: flex;
    align-items: center;
    margin-top: 20px;
    justify-content: space-between;
}

.last-task .task-list li .star-clr {
    color: #ffc700;
    font-size: 18px;
    display: inline;
    margin-right: 5px;
}

.last-task .task-list li .btn {
    font-size: 18px;
    padding: 10px !important;
}

.last-task .task-list p {
    padding: 0px 15px;
}

.last-task p {
    margin-bottom: 0 !important;
}

/* task-overview WORK END */

/* Modern Login Page - Complete CSS */

/* Base Styles */
.modern-login-page {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", sans-serif;
    position: relative;
    overflow: hidden;
    padding: 2rem 1rem;
}

/* Background Animated Shapes */
.login-background-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: float 6s ease-in-out infinite;
}

.shape-1 {
    width: 200px;
    height: 200px;
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.shape-2 {
    width: 150px;
    height: 150px;
    top: 70%;
    right: 10%;
    animation-delay: 2s;
}

.shape-3 {
    width: 100px;
    height: 100px;
    bottom: 20%;
    left: 70%;
    animation-delay: 4s;
}

/* Container Positioning */
.container-fluid {
    position: relative;
    z-index: 2;
}

/* Logo Section */
.login-logo-section {
    text-align: center;
    margin-bottom: 2rem;
    animation: slideDown 0.8s ease-out;
}

.logo-container {
    position: relative;
}

.logo-box {
    padding: 20px;
    border-radius: 20px;
    background-color: var(--whitecolor);
    width: 220px;
    height: auto;
    margin: 0 auto 10px;
}

.logo-box img {
    width: 100%;
}

.logo-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    margin: 0.5rem 0 0 0;
    font-weight: 600;
    font-family: var(--headingfont);
}

/* Alert Messages */
.login-alert {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    animation: slideDown 0.5s ease-out;
}

.login-alert-danger {
    color: #dc2626;
    border-left: 4px solid #ef4444;
}

/* Glass Card Container */
.login-glass-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    overflow: hidden;
    animation: slideUp 0.8s ease-out;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.login-glass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 35px 60px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Card Header */
.login-card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.login-card-header::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 70%
    );
    animation: rotate 20s linear infinite;
}

.header-content {
    position: relative;
    z-index: 2;
}

.welcome-title {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.welcome-subtitle {
    color: #f5f5f5 !important;
    margin: 0.5rem 0 0 0;
    font-size: 0.95rem;
}

.header-avatar {
    position: relative;
    z-index: 2;
}

.avatar-container {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    border: 3px solid rgba(255, 255, 255, 0.3);
    /* animation: float 3s ease-in-out infinite; */
}

/* Card Body */
.login-card-body {
    padding: 2.5rem;
}

/* Form Groups */
.login-form-group {
    margin-bottom: 1.75rem;
}

.login-form-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #374151;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.login-form-label i {
    color: #667eea;
    width: 16px;
}

/* Input Container */
.login-input-container {
    position: relative;
}

.login-form-input {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    font-weight: 500;
}

.login-form-input::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

.login-form-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    background: #ffffff;
}

.login-form-input.is-invalid {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

/* Input Icons */
.input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 1rem;
    transition: color 0.3s ease;
    pointer-events: none;
}

.login-form-input:focus + .input-icon {
    color: #667eea;
}

/* Password Toggle */
.password-toggle {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.3s ease;
    outline: none;
    box-shadow: none;
}

.password-toggle:hover {
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
}

/* Error Messages */
.login-error-message {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    font-weight: 500;
}

/* Submit Button */
.login-submit-btn {
    width: 100%;
    padding: 15px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--headingfont);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    margin-top: 1rem;
}

.login-submit-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.6s ease;
}

.login-submit-btn:hover::before {
    left: 100%;
}

.login-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(102, 126, 234, 0.4);
    color: var(--whitecolor);
}

.login-submit-btn:active {
    transform: translateY(0);
}

/* Button Loading State */
.btn-loading {
    display: none;
}

.login-submit-btn.loading .btn-text {
    display: none;
}

.login-submit-btn.loading .btn-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.login-submit-btn.loading {
    pointer-events: none;
    opacity: 0.8;
}

/* Animations */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .modern-login-page {
        padding: 1rem;
    }

    .logo-text {
        font-size: 2rem;
    }

    .login-card-header {
        padding: 1.5rem;
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .login-card-body {
        padding: 2rem 1.5rem;
    }

    .avatar-container {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
}

@media (max-width: 576px) {
    .login-card-header {
        padding: 1rem;
    }

    .login-card-body {
        padding: 1.5rem 1rem;
    }

    .logo-text {
        font-size: 1.75rem;
    }

    .welcome-title {
        font-size: 1.25rem;
    }
}

/* Focus and Loading States */
.login-form-input:focus {
    animation: inputFocus 0.3s ease-out;
}

@keyframes inputFocus {
    0% {
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4);
    }
    100% {
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }
}

/* profile-card WORK START */

.profile-card {
    padding: 20px;
}

.profile-card .profile-card-btns .btn {
    width: calc(50% - 5px);
}

.profile-card .user-img-div {
    position: relative;
}

.profile-card .user-img-div img {
    width: 100%;
    border-radius: 5px;
}

.profile-card .user-img-div i {
    color: #50cd89;
    background: var(--whitecolor);
    border-radius: 50%;
    position: absolute;
    top: -6px;
    right: -9px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
}

.profile-card .user-content-div .upper-content-div .bxs-badge-check {
    color: #009ef7;
    font-size: 20px;
}

.profile-card .user-content-div .upper-content-div .user-a-tag {
    color: var(--blackcolor);
    text-decoration: none;
}

.profile-card .user-content-div .upper-content-div .user-a-tag h6 {
    font-size: 20px;
}

.profile-card .user-content-div .upper-content-div .user-details-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.profile-card .user-content-div .upper-content-div .user-details-list li {
    margin-right: 15px;
}

.profile-card .user-content-div .upper-content-div .user-details-list li a {
    color: var(--greycolor);
    text-decoration: none;
}

.profile-card .user-content-div .upper-content-div .user-details-list li a i {
    color: var(--greycolor);
    font-size: 14px;
}

.profile-card .user-content-div .middle-content-div ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
}

.profile-card .user-content-div .middle-content-div ul li {
    background: var(--greyrgb);
    border-radius: 5px;
    width: calc(33% - 7.5px);
    height: 65px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.overview-div .middle-content-div ul li {
    width: calc(25% - 7.5px) !important;
}

.overview-div .btn-div a {
    width: calc(50% - 5px);
}

.profile-card .user-content-div .middle-content-div ul li .profile-icon-1 {
    color: #50cd89;
    font-size: 18px;
}

.profile-card .user-content-div .middle-content-div ul li .profile-icon-2 {
    color: #f1416c;
    font-size: 18px;
}

.profile-card .user-content-div .middle-content-div ul li h6 {
    margin: 0;
    display: inline-block;
    font-size: 18px;
}

.profile-card .user-content-div .middle-content-div ul li p {
    margin: 0;
    color: var(--greycolor);
    font-size: 14px;
}

.profile-card .user-content-div .middle-content-div .progress-p-tag {
    text-align: right;
    font-weight: 600;
}

.profile-card .user-content-div .middle-content-div .progress {
    height: 8px;
    border-radius: 50px;
    background: var(--greyrgb);
    margin-top: 5px;
}

/*
.user-dropdown {
    position: absolute;
    right: 10px;
    top: 14px;
} */

/* profile-card WORK END */

/* comment-box WORK START */

.comment-box .card-body {
    padding: 20px;
}

.comment-box .card-body p {
    font-size: 12px;
}

.comment-box .upper-comment img {
    width: 50px;
    border-radius: 5px;
}

.comment-box .upper-comment .upper-comment-content {
    margin-left: 20px;
}

.comment-box .upper-comment .upper-comment-content a {
    color: var(--blackcolor);
    text-decoration: none;
}

.comment-box .upper-comment .upper-comment-content p {
    font-size: 12px;
    color: var(--greycolor);
}

.comment-box textarea {
    padding: 10px;
}

.comment-box .btn-default {
    font-size: 14px;
    padding: 6px 10px !important;
}

.comment-box .btn-default:hover {
    background: #67f0852b;
    color: #50cd89;
}

.comment-box .btn-danger:hover {
    background: #ff45452b;
    color: #f1416c;
}

.comment-box .reply-box {
    position: relative;
}

.comment-box .reply-icons {
    position: absolute;
    right: 10px;
    top: 8px;
    font-size: 20px;
}

.comment-box .reply-icons i {
    color: var(--greycolor);
    transition: all 0.3s 0s linear;
}

.comment-box .reply-icons a:hover i {
    color: var(--websitecolor);
}

.comment-box input {
    padding-right: 70px;
}

.comment-box .reply-people h6 {
    font-size: 14px !important;
}

.comment-box .reply-people p {
    color: var(--bodycolor) !important;
}

.comment-box .reply-people .d-flex .reply-a-tag {
    color: var(--greycolor) !important;
    transition: all 0.3s 0s linear;
    font-size: 12px;
}

.comment-box .reply-people .d-flex .reply-a-tag:hover {
    color: var(--websitecolor) !important;
}

/* comment-box WORK END */

/* recent-statistics work start */

.recent-statistics #recent-statistics-chart {
    margin: 0px -10px -25px -18px;
}

/* recent-statistics work end */

/* recent-orders work start */

.recent-orders #recent-orders-chart {
    margin: 0px -10px -25px -18px;
}

/* recent-orders work end */

/* recent-transactions work start */

.recent-transactions #recent-transactions-chart {
    margin: 0px -10px -25px -18px;
    cursor: crosshair;
}

/* recent-transactions work end */

/* recent-customers work start */

.recent-customers #recent-customers-chart {
    margin: 0px -10px -25px -18px;
    cursor: crosshair;
}

/* recent-customers work end */

/* recent-customers2 work start */

.recent-customers2 #recent-customers-chart2 {
    margin: 0px -10px -25px -18px;
}

/* recent-customers work end */

/* recent-orders2 work start */

.recent-orders2 #recent-orders-chart2 {
    margin: 0px -10px -25px -18px;
    cursor: crosshair;
}

/* recent-orders2 work end */

/* blog-div WORK START */

.blog-div .card-body {
    padding: 20px;
}

.blog-div img {
    width: 100%;
    border-radius: 5px;
}

.blog-div a {
    text-decoration: none;
    color: var(--blackcolor);
    transition: all 0.3s 0s linear;
}

.blog-div a:hover {
    color: var(--websitecolor);
}

.blog-div h6 {
    margin: 15px 0;
    line-height: 22px;
}

/* blog-div WORK END */

/* single-blog-div WORK START */

.single-blog-div .card-body {
    padding: 20px;
}

.single-blog-div ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
}

.single-blog-div ul li {
    color: var(--greycolor);
    margin-left: 30px;
}

.single-blog-div ul li:first-child {
    margin-left: 0;
}

.single-blog-div .heading-a-tag {
    color: var(--greycolor);
    text-decoration: none;
    padding: 20px 0;
    display: block;
}

.single-blog-div .heading-a-tag:hover h6 {
    color: var(--websitecolor);
}

.single-blog-div .heading-a-tag h6 {
    margin: 0;
    font-size: 18px;
    color: var(--blackcolor);
    transition: all 0.3s 0s linear;
}

.single-blog-div .about-img-div {
    position: relative;
    background-size: cover !important;
    background-position: center !important;
    height: 300px;
    border-radius: 5px;
    overflow: hidden;
}

.single-blog-div .about-img-div:hover .bg {
    opacity: 1;
}

.single-blog-div .about-img-div .bg {
    background: rgba(0, 0, 0, 0.2);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s 0s linear;
}

.single-blog-div .btn-default {
    background: var(--whitecolor);
}

.single-blog-div .btn-default:hover {
    color: var(--blackcolor);
}

.single-blog-div .mini-profile-div {
    background: var(--lightgreycolor);
    margin: 40px 0;
    padding: 20px 30px;
    border-radius: 5px;
}

.single-blog-div .mini-profile-div .mini-img-div {
    text-align: center;
}

.single-blog-div .mini-profile-div .mini-img-div a {
    color: var(--blackcolor);
    text-decoration: none;
}

.single-blog-div .mini-profile-div .mini-img-div a:hover h6 {
    color: var(--websitecolor);
}

.single-blog-div .mini-profile-div .mini-img-div a h6 {
    margin: 10px 0 0;
    font-size: 14px;
    transition: all 0.3s 0s linear;
}

.single-blog-div .mini-profile-div .mini-img-div p {
    font-size: 12px;
}

.single-blog-div .mini-profile-div .mini-img-div img {
    width: 70px !important;
}

.single-blog-div .mini-profile-div .mini-content-div {
    width: calc(100% - 130px);
}

.single-blog-div .mini-profile-div .mini-content-div a {
    color: var(--websitecolor);
    text-decoration: none;
}

/* single-div WORK END */

/* blog-search WORK START */

.blog-search .card-body {
    padding: 20px;
}

.blog-search .search-div {
    position: relative;
}

.blog-search .search-div i {
    position: absolute;
    top: 12px;
    right: 8px;
}

.blog-search ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-search ul li {
    display: flex;
    justify-content: space-between;
    margin: 0 0 10px;
}

.blog-search ul li:last-child {
    margin: 0;
}

.blog-search ul li p {
    margin: 0;
}

.blog-search ul li a {
    color: var(--greycolor);
    text-decoration: none;
    transition: all 0.3s 0s linear;
}

.blog-search ul li a:hover {
    color: var(--websitecolor);
}

.blog-search .post-box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.blog-search .post-box:last-child {
    margin-bottom: 0;
}

.blog-search .post-box img {
    width: 100px;
    height: 60px;
    border-radius: 5px;
    margin-right: 10px;
}

.blog-search .post-box .recent-content a {
    font-size: 14px;
    color: var(--blackcolor);
    text-decoration: none;
    transition: all 0.3s 0s linear;
}

.blog-search .post-box .recent-content a:hover {
    color: var(--websitecolor);
}

.blog-search .post-box .recent-content a h6 {
    font-size: 14px;
}

.blog-search .post-box .recent-content p {
    font-size: 12px;
}

/* blog-search WORK END */

/* price-card WORK START */

.price-card .card-body {
    text-align: center;
}

.price-card h3 {
    text-align: center;
    font-family: var(--headingfont);
    color: var(--blackcolor);
}

.price-card p {
    text-align: center;
}

.price-card p a {
    color: var(--websitecolor);
    text-decoration: none;
}

.price-card .price-pills {
    align-items: center;
    display: flex;
    justify-content: center;
}

.price-card .price-pills .nav-link {
    margin-right: 10px;
}

.price-card .price-pills .nav-link.active {
    background-color: var(--websitecolor);
}

.price-card .price-inner-card {
    background: var(--greyrgb);
    margin: 40px 0 10px;
    padding: 30px;
    border-radius: 5px;
    border: 1px solid #eaeaea;
}

.price-card .price-inner-card.advance-inner-card {
    padding: 50px 30px !important;
    margin-top: 20px;
}

.price-card .price-inner-card h5 {
    font-family: var(--headingfont);
    font-weight: 700;
}

.price-card .price-inner-card p {
    margin: 0;
}

.price-card .price-inner-card .price-p-tag {
    line-height: 30px;
}

.price-card .price-inner-card .price-rate {
    font-size: 40px;
}

.price-card .price-inner-card .checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.price-card .price-inner-card .checklist li {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}

.price-card .price-inner-card .checklist li i {
    font-size: 20px;
}

/* price-card WORK END */

/* statistics work start */

.statistics-box .boximg {
    width: 50px;
    height: 50px;
    background: var(--greyrgb);
    border-radius: 5px;
    padding: 10px;
}

.statistics-box h6 a {
    color: inherit;
    transition: all 0.3s 0s linear;
}

.statistics-box h6 a:hover {
    color: var(--websitecolor);
}

.statistics-box p {
    color: var(--greycolor);
    font-size: 12px;
}

.statistics-box .icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-family: var(--headingfont);
    font-size: 25px;
    background: var(--greyrgb);
    color: var(--websitecolor);
}

.statistics-box.text-white {
    transition: all 0.3s 0s linear;
}

.statistics-box.text-white:hover {
    filter: brightness(0.9);
}

.statistics-box.text-white .icon {
    background: rgba(0, 0, 0, 0.1);
    color: var(--whitecolor);
}

.statistics-box.text-white p {
    color: inherit;
}

.statistics-user-box img {
    width: 80px;
}

.statistics-user-box h6 a {
    color: inherit;
    transition: all 0.3s 0s linear;
}

.statistics-user-box h6 a:hover {
    color: var(--websitecolor);
}

.statistics-user-box p {
    color: var(--greycolor);
    font-size: 12px;
}

.statistics-chart-box .number {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-family: var(--headingfont);
}

.statistics-chart-box .number i {
    font-size: 25px;
}

.statistics-chart-box h6 a {
    color: inherit;
    transition: all 0.3s 0s linear;
}

.statistics-chart-box h6 a:hover {
    color: var(--websitecolor);
}

.statistics-progress-box h6 a {
    color: inherit;
    transition: all 0.3s 0s linear;
}

.statistics-progress-box h6 a:hover {
    color: var(--websitecolor);
}

.statistics-progress-box .icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-family: var(--headingfont);
    font-size: 25px;
    background: var(--greyrgb);
    color: var(--websitecolor);
}

.statistics-progress-box p {
    font-size: 12px;
    color: var(--greycolor);
}

.statistics-progress-box .progress {
    height: 8px;
    border-radius: 50px;
    background: var(--greyrgb);
    margin-top: 5px;
}

/* statistics work end */

/* aboutus-card WORK START */

.aboutus-card .aboutus-img-div {
    position: relative;
    background-size: cover !important;
    background-position: center !important;
    height: 450px;
    border-radius: 5px;
    overflow: hidden;
}

.aboutus-card .aboutus-img-div:hover .bg {
    opacity: 1;
}

.aboutus-card .aboutus-img-div .bg {
    background: rgba(0, 0, 0, 0.2);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s 0s linear;
}

.aboutus-card .btn-default {
    background: var(--whitecolor);
}

.aboutus-card .btn-default:hover {
    color: var(--blackcolor);
}

.aboutus-card .content {
    margin: 30px 0 30px;
}

.aboutus-card .page-heading.publication {
    margin: 0 0 15px;
}

.aboutus-card .aboutus-inner-card {
    margin: 40px 0 0;
    padding: 30px;
    border-radius: 5px;
    background: var(--websitelightcolor);
    text-align: center;
}

.aboutus-card .aboutus-inner-card .about-circle {
    background: var(--whitecolor);
    border-radius: 50%;
    width: 200px;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 7.5px auto;
    box-shadow: 0 4px 24px 0 rgb(34 41 47 / 10%);
}

.aboutus-card .aboutus-inner-card .about-circle img {
    width: 50px;
    margin: 0 0 10px;
}

.aboutus-card .about-blog-div {
    padding: 20px;
    border-radius: 5px;
    background: var(--greyrgb);
    margin-top: 15px;
}

.aboutus-card .about-blog-div .card-body {
    padding: 20px;
}

.aboutus-card .about-blog-div img {
    width: 100%;
    border-radius: 5px;
}

.aboutus-card .about-blog-div a {
    text-decoration: none;
    color: var(--blackcolor);
    transition: all 0.3s 0s linear;
}

.aboutus-card .about-blog-div a:hover {
    color: var(--websitecolor);
}

.aboutus-card .about-blog-div p {
    font-size: 12px;
}

.aboutus-card .about-blog-div h6 {
    margin: 15px 0;
    line-height: 22px;
}

.aboutus-card .team-slider .slider-div {
    text-align: center;
}

.aboutus-card .team-slider .slider-div img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 0 auto;
}

.aboutus-card .owl-nav {
    font-size: 40px;
}

.aboutus-card .owl-nav .owl-prev {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    left: 0;
}

.aboutus-card .owl-nav .owl-next {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    right: 0;
}

/* aboutus-card WORK END */

/* contact-card WORK START */

.contact-card .contact-box {
    background: var(--greyrgb);
    padding: 20px;
    width: 100%;
    height: 200px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.contact-card .contact-box i {
    font-size: 40px;
    color: var(--websitecolor);
}

.contact-card .contact-box:last-child {
    margin-top: 15px;
}

/* contact-card WORK END */

/* sales-summary work start */

.sales-summary .card-heading {
    padding-bottom: 100px;
}

.sales-summary .card-body {
    margin: -75px auto 20px;
    background: white;
    border-radius: 5px;
    width: calc(100% - 40px);
    box-shadow: 0 4px 24px 0 rgb(34 41 47 / 10%);
}

.sales-summary .card-body ul {
    margin: 0px;
    padding: 0px;
}

.sales-summary .card-body ul li {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 15px;
    margin-bottom: 15px;
}

.sales-summary .card-body ul li:last-child {
    margin-bottom: 0px;
}

.sales-summary .card-body ul li > div {
    display: flex;
    align-items: center;
    column-gap: 15px;
}

.sales-summary .card-body ul li .icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: var(--greyrgb);
    color: var(--greycolor);
}

.sales-summary .card-body ul li .icon i {
    font-size: 20px;
}

.sales-summary .card-body ul li .text {
    width: calc(100% - 65px);
}

.sales-summary .card-body ul li i {
    font-size: 16px;
}

.sales-summary .card-body h6 {
    font-size: 14px;
}

.sales-summary .card-body p {
    color: var(--greycolor);
    font-size: 12px;
}

/* sales-summary work end */

/*monthly-subscription work start*/

.monthly-subscription .card-body .icon {
    background: var(--greyrgb);
    border-radius: 5px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.monthly-subscription .card-body .text {
    width: calc(100% - 114px);
}

.monthly-subscription .card-body p {
    font-size: 12px;
    color: var(--greycolor);
}

.monthly-subscription .card-body p b {
    color: var(--bodycolor);
}

.monthly-subscription .card-body .teamimages img {
    width: 40px;
    height: 40px;
    border-radius: 5px;
}

/*monthly-subscription work end*/

/* team-card WORK START */

.team-card .team-img-div {
    position: relative;
    background-size: cover !important;
    background-position: center !important;
    height: 450px;
    border-radius: 5px;
    overflow: hidden;
}

.team-card .team-img-div:hover .bg {
    opacity: 1;
}

.team-card .team-img-div .bg {
    background: rgba(0, 0, 0, 0.2);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s 0s linear;
}

.team-card .btn-default {
    background: var(--whitecolor);
}

.team-card .btn-default:hover {
    color: var(--blackcolor);
}

.team-card .content {
    margin: 0 0 30px;
}

.team-card .team-box {
    text-align: center;
    margin-top: 30px;
}

.team-card .team-box img {
    width: 70%;
    border-radius: 50%;
    margin-bottom: 15px;
}

/* team-card WORK END */

/* overview-detail WORK START */

.overview-detail .overview-warning {
    border: 1px dashed #ffc700;
    border-radius: 5px;
    padding: 20px;
    background: #fff93040;
}

.overview-detail .overview-warning .sign-div {
    background: #ffc700;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--whitecolor);
    margin-right: 15px;
}

.overview-detail .overview-warning .sign-div i {
    font-size: 18px;
}

.overview-detail .overview-warning .content {
    width: calc(100% - 55px);
}

.overview-detail .overview-detail-list {
    margin: 0px;
    padding: 0px;
}

.overview-detail .overview-detail-list li:first-child {
    border: none;
    padding-top: 0px;
}

.overview-detail .overview-detail-list li:last-child {
    padding-bottom: 0px;
}

.overview-detail .overview-detail-list li {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px dashed var(--inputborder);
    padding: 15px 0px;
}

.overview-detail .overview-detail-list li p {
    margin: 0px;
}

/* overview-detail WORK END */

/* product-card WORK START */

.product-card .card-body {
    padding-bottom: 0px;
}

.product-card p {
    font-size: 12px;
}

.product-card .product-div {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 415px;
    margin-bottom: 10px;
    margin-top: 15px;
    padding-right: 7px;
    width: calc(100% + 13px);
}

.product-card .product-div .small-product-div {
    background: var(--lightgreycolor);
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 10px;
}

.product-card .product-div .small-product-div img {
    width: 50px;
}

.product-card .product-div .small-product-div .product-content {
    width: calc(100% - 65px);
}

.product-card .product-div .small-product-div .product-content a p {
    font-size: 14px;
    font-weight: bold;
}

/* product-card WORK END */

/* sign-card WORK START */

.sign-card .email-div {
    border-bottom: 1px dashed var(--inputborder);
    padding-bottom: 15px;
}

.sign-card .email-div h6 {
    font-size: 14px;
}

.sign-card .email-div p {
    font-size: 12px;
}

.sign-card .password-div {
    margin: 15px 0;
}

.sign-card .password-div h6 {
    font-size: 14px;
}

.sign-card .password-div p {
    font-size: 12px;
}

.sign-card .warning-div {
    border: 1px dashed #39d1ea;
    border-radius: 5px;
    padding: 20px;
    background: #67d7f02b;
}

.sign-card .warning-div > div {
    width: 100%;
}

.sign-card .warning-div .sign-div {
    background: #39d1ea;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--whitecolor);
}

.sign-card .warning-div .sign-div i {
    font-size: 24px;
}

.sign-card .warning-div .content {
    width: calc(100% - 70px);
    margin-left: 15px;
}

.sign-card .warning-div .content p {
    font-size: 12px;
}

/* sign-card WORK END */

/* connect-card WORK START */

.connect-card .warning-div {
    border: 1px dashed #39d1ea;
    border-radius: 5px;
    padding: 20px;
    background: #67d7f02b;
}

.connect-card .warning-div .sign-div {
    background: #39d1ea;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--whitecolor);
}

.connect-card .warning-div .content {
    width: calc(100% - 55px);
    margin-left: 15px;
}

.connect-card .warning-div .sign-div i {
    font-size: 24px;
}

.connect-card .connections-div {
    border-bottom: 1px dashed var(--inputborder);
    padding-bottom: 15px;
    margin-top: 15px;
}

.connect-card .connections-div img {
    width: 30px;
}

.connect-card .connections-div h6 {
    font-size: 14px;
}

.connect-card .warning-div .content p {
    font-size: 12px;
}

/* connect-card WORK END */

/* email-card WORK START */

.email-card .email-box {
    border-bottom: 1px dashed var(--inputborder);
    padding-bottom: 15px;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.email-card .email-box:first-child {
    margin: 0;
}

.email-card .email-box .content {
    width: calc(100% - 35px);
}

.email-card h6 {
    font-size: 14px;
}

/* email-card WORK END */

/* notification-card WORK START */

.notification-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.notification-card table tr td.small-td {
    width: 100px;
}

.notification-card table tr td {
    border-bottom-color: var(--inputborder);
}

/* notification-card WORK END */

/* account-card WORK START */

.account-card .warning-div {
    border: 1px dashed #ffc700;
    border-radius: 5px;
    padding: 20px;
    background: #fff93040;
}

.account-card .warning-div > div {
    width: 100%;
}

.account-card .warning-div .sign-div {
    background: #ffc700;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--whitecolor);
}

.account-card .warning-div .sign-div i {
    font-size: 24px;
}

.account-card .warning-div .content {
    width: calc(100% - 70px);
    margin-left: 15px;
}

.account-card .warning-div .content p {
    font-size: 12px;
}

/* account-card WORK END */

/* upgrade-card WORK START */

.upgrade-card .bill-warning {
    border: 1px dashed #ffc700;
    border-radius: 5px;
    padding: 20px;
    background: #fff93040;
}

.upgrade-card .bill-warning > div {
    width: 100%;
}

.upgrade-card .bill-warning .sign-div {
    background: #ffc700;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--whitecolor);
}

.upgrade-card .bill-warning .sign-div i {
    font-size: 24px;
}

.upgrade-card .bill-warning .content {
    width: calc(100% - 70px);
    margin-left: 15px;
}

.upgrade-card .bill-warning .content p {
    font-size: 12px;
}

.upgrade-card h6 span {
    font-size: 14px;
    font-weight: normal;
    color: var(--greycolor);
}

/* email-generator work start */

.email-generator .card-body .icon {
    background: var(--greyrgb);
    border-radius: 5px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.email-generator .card-body .teamimages img {
    width: 40px;
    height: 40px;
    border-radius: 5px;
}

.email-generator .card-body p {
    font-size: 12px;
}

/* email-generator work end */

/*sales-overview work start*/

.sales-overview .sales-overview-list {
    margin: 0px;
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.sales-overview .sales-overview-list li {
    width: calc(50% - 7.5px);
    list-style: none;
    margin-top: 15px;
}

.sales-overview .sales-overview-list li p {
    margin: 0px;
    color: var(--greycolor);
    font-size: 12px;
}

.sales-overview .sales-overview-list li h6 {
    margin: 0px;
}

/*sales-overview work end*/

/* latest-trends work start */

.latest-trends .trends-list {
    margin: 0px;
    padding: 0px;
}

.latest-trends .trends-list li {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 15px;
    margin-top: 15px;
}

.latest-trends .trends-list li > div {
    display: flex;
    align-items: center;
    column-gap: 15px;
}

.latest-trends .trends-list li .icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: var(--greyrgb);
    color: var(--greycolor);
    padding: 10px;
}

.latest-trends .trends-list li .text {
    width: calc(100% - 80px);
}

.latest-trends .trends-list li .text h6 {
    font-size: 14px;
}

.latest-trends .trends-list li .text p {
    color: var(--greycolor);
    font-size: 12px;
    line-height: 16px;
}

.latest-trends .trends-list li .badge {
    background: var(--greyrgb);
    color: var(--bodycolor);
}

/* latest-trends work end */

/* payment-card WORK START */

.payment-card .payment-box {
    border: 1px dashed var(--inputborder);
    padding: 20px;
    border-radius: 5px;
    margin-top: 15px;
}

.payment-card .payment-box.last-box {
    background: var(--websitelightcolor);
    border: 1px dashed var(--websitecolor);
    padding: 20px;
    border-radius: 5px;
    margin-top: 15px;
}

.payment-card .payment-box img {
    width: 60px;
}

.payment-card .payment-box .content {
    margin-left: 15px;
}

.payment-card .payment-box .content p {
    font-size: 12px;
}

.payment-card .payment-box a {
    width: calc(50% - 7.5px);
}

/* payment-card WORK END */

/* billing-table WORK START */

.billing-table p {
    font-size: 14px !important;
}

.billing-table .btn-default {
    background: var(--greyrgb);
    color: var(--bodycolor);
    font-size: 14px !important;
    padding: 8px 30px !important;
    transition: all 0.3s 0s linear;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.billing-table .btn-default:hover {
    background: var(--websitecolor);
}

/* billing-table WORK END */

/* editmodel WORK START */

#editModal .bill-warning {
    border: 1px dashed #ffc700;
    border-radius: 5px;
    padding: 20px;
    background: #fff93040;
}

#editModal .bill-warning > div {
    width: 100%;
}

#editModal .bill-warning .sign-div {
    background: #ffc700;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--whitecolor);
}

#editModal .bill-warning .sign-div i {
    font-size: 24px;
}

#editModal .bill-warning .content {
    width: calc(100% - 70px);
    margin-left: 15px;
}

#editModal .bill-warning .content p {
    font-size: 12px;
}

#editModal .switch-p-tag {
    font-size: 12px;
    color: var(--greycolor);
}

#editModal .modal-body {
    height: 400px;
    overflow-x: hidden;
    overflow-y: scroll;
}

/* editModal WORK END */

/* cardModal WORK START */

#cardModal .switch-p-tag {
    font-size: 12px;
    color: var(--greycolor);
}

/* cardModal WORK END */

/* earning-card WORK START */

.earning-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.earning-card ul li {
    background: var(--greyrgb);
    border-radius: 5px;
    width: 150px;
    height: 60px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-right: 15px;
}

/* earning-card WORK END */

/* statement-table WORK START */

.statement-table p {
    font-size: 14px !important;
}

.statement-table .btn-default {
    background: var(--greyrgb);
    color: var(--bodycolor);
    font-size: 14px !important;
    padding: 8px 50px !important;
    transition: all 0.3s 0s linear;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.statement-table .btn-default:hover {
    background: var(--websitecolor);
}

/* statement-table WORK END */

/* summary-card WORK START */

.summary-card .summary-list ul {
    list-style: none;
    padding: 0;
    margin: 15px 0px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.summary-card .summary-list ul li {
    background: var(--greyrgb);
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    width: calc(33% - 7.5px);
}

.summary-card .nav-pills .security-link.active {
    background: transparent;
    color: var(--websitecolor);
    border-bottom: 3px solid var(--inputborder);
    border-radius: 0;
}

.summary-card .nav-pills .security-link {
    color: var(--bodycolor);
}

.summary-card .nav-pills .security-link.active:focus {
    border-radius: 0;
}

/* summary-card WORK END */

/* alert-card WORK START */

.alert-card p {
    font-size: 12px;
}

.alert-card .content {
    height: 120px;
}

.alert-card .slider-div {
    border: 1px dashed var(--inputborder);
    border-radius: 5px;
    margin-right: 15px;
    padding: 20px;
}

/* alert-card WORK END */

/* login-card WORK START */

.login-card .header-btn {
    margin-left: 15px;
}

/* login-card WORK end */

/* user-base work start */

.user-base {
    position: relative;
}

.user-base .card-body {
    padding: 20px 20px 72px 20px;
}

.user-base #user-base-chart {
    margin-bottom: -75px;
}

.user-base .card-bottom-list {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    margin: 0px;
    padding: 15px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--inputborder);
}

.user-base .card-bottom-list li {
    margin: 0px 15px;
    list-style: none;
    text-align: center;
}

/* user-base work end */

/* program-card WORK START */

.program-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.program-card ul li {
    background: var(--greyrgb);
    border-radius: 5px;
    width: calc(25% - 7.5px);
    height: 90px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.program-card .warning-div {
    border: 1px dashed #39d1ea;
    border-radius: 5px;
    padding: 20px;
    background: #67d7f02b;
}

.program-card .warning-div > div {
    width: 85%;
}

.program-card .warning-div .sign-div {
    background: #39d1ea;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--whitecolor);
}

.program-card .warning-div .sign-div i {
    font-size: 24px;
}

.program-card .warning-div .content {
    width: calc(100% - 70px);
    margin-left: 15px;
}

.program-card .warning-div .content p {
    font-size: 12px;
}

/* program-card WORK END */

/* career-card WORK START */

.career-card .career-img {
    width: 100%;
    border-radius: 5px;
    background-position: center !important;
    background-size: cover !important;
}

.career-card .career-img .bg {
    padding: 200px 30px 20px;
    color: var(--whitecolor);
    background: rgba(0, 0, 0, 0.4);
    border-radius: 5px;
}

.career-card ul li:first-child {
    margin-top: 0;
}

.career-card ul li {
    margin-top: 5px;
}

.career-card .list-p-tag {
    font-family: var(--headingfont);
}

.career-card .about-blog-div {
    padding: 20px;
    border-radius: 5px;
    background: var(--greyrgb);
    margin-top: 15px;
}

.career-card .about-blog-div .card-body {
    padding: 20px;
}

.career-card .about-blog-div img {
    width: 100%;
    border-radius: 5px;
}

.career-card .about-blog-div a {
    text-decoration: none;
    color: var(--blackcolor);
    transition: all 0.3s 0s linear;
}

.career-card .about-blog-div a:hover {
    color: var(--websitecolor);
}

.career-card .about-blog-div p {
    font-size: 12px;
}

.career-card .about-blog-div h6 {
    margin: 15px 0;
    line-height: 22px;
}

/* career-card WORK END */

/* faq-card WORK START */

.faq-card .about-blog-div {
    padding: 20px;
    border-radius: 5px;
    background: var(--greyrgb);
    margin-top: 15px;
}

.faq-card .about-blog-div .card-body {
    padding: 20px;
}

.faq-card .about-blog-div img {
    width: 100%;
    border-radius: 5px;
}

.faq-card .about-blog-div a {
    text-decoration: none;
    color: var(--blackcolor);
    transition: all 0.3s 0s linear;
}

.faq-card .about-blog-div a:hover {
    color: var(--websitecolor);
}

.faq-card .about-blog-div p {
    font-size: 12px;
}

.faq-card .about-blog-div h6 {
    margin: 15px 0;
    line-height: 22px;
}

.web-btn {
    background-color: var(--websitebackground);
}

/* Pagignation Work Start */
.pagination-all {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
.pagination-all .border {
    width: 40px !important;
    height: 40px;
    padding: 0px !important;
    border-radius: 50px;
    border: none !important;
}
.pagination-all svg.w-5.h-5 {
    width: 40px !important;
    height: 40px;
    background: var(--bodycolor);
    border: none !important;
    color: var(--whitecolor);
    padding: 9px;
    border-radius: 50px;
}
.pagination-all div:first-child {
    display: none !important;
}
.pagination-all .rounded-md {
    border: none !important;
    box-shadow: none !important;
    display: flex;
    height: auto;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.pagination-all .rounded-md span[aria-current="page"] span {
    background-color: var(--websitecolor) !important;
    color: white;
}
.pagination-all .rounded-md a {
    background-color: #eee !important;
    color: var(--bodycolor);
}
.pagination-all .rounded-md span,
.pagination-all .rounded-md a {
    width: 40px !important;
    height: 40px;
    display: inline-flex;
    padding: 0px !important;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    font-weight: bold;
}
/* admin-dash work start */

/* .admin-dash .card {
    min-height: 140.1px;
} */

/* .admin-dash .card h5 {
    font-size: 19px;
    margin-bottom: 15px;
}

.admin-dash .card i {
    font-size: 20px;
    color: white;
}

.admin-dash .icon-div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--websitecolor);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 10%);
    margin: 0 auto 15px;
} */

/* admin-dash work end */

tr.hide-table-padding td {
    padding: 0;
}

.expand-button {
    position: relative;
}

.accordion-toggle .expand-button:after {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translate(0, -50%);
    content: "-";
}

.accordion-toggle.collapsed .expand-button:after {
    content: "+";
}

.dataTables_filter {
    margin-bottom: 15px;
}

.dataTables_filter input {
    background-color: #f5f5f5 !important;
    border: 1px solid #eee;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 10%);
}

.table .dtr-details {
    width: 100%;
    padding-left: 0;
}

.table .child {
    padding-left: 15px !important;
}

.table th {
    background-color: #eee !important;
}

.table .dtr-data {
    white-space: break-spaces;
}
.dataTables_length {
    display: none;
}

.dataTables_info {
    display: none;
}

.dataTables_paginate {
    display: none;
}

.table-action-btns {
    white-space: nowrap;
}

.table-action-btns a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.table .table-id {
    width: 30px;
}

.note-editor.note-airframe.fullscreen,
.note-editor.note-frame.fullscreen {
    background-color: white !important;
}

/* Text Editor */
.tox-notifications-container,
.tox-statusbar {
    display: none !important;
}
/* Text Editor */

.btn-custom {
    width: auto !important;
    padding: 5px 10px !important;
    font-size: 14px !important;
    height: 30px !important;
}

#input-group-quotation .input-group-text {
    width: 60px;
    border-radius: 7px 0 0 7px;
    text-align: center;
    height: 45px;
    font-size: 14px;
    font-weight: 700;
}

.statistics {
    overflow: hidden;
}

.statistics .box {
    display: flex;
    align-items: center;
    margin: 15px 0px 0px;
    gap: 20px;
    padding: 20px;
    border-radius: 10px;
}
.statistics .box * {
    color: #fff !important;
}
.box-icons-color1 {
    background: linear-gradient(118deg, #39d1ea, #147685) !important;
}
.box-icons-color2 {
    background: linear-gradient(118deg, #50cd89, #249c5a) !important;
}
.box-icons-color3 {
    background: linear-gradient(118deg, #f1416c, #b8123c) !important;
}
.box-icons-color4 {
    background: linear-gradient(118deg, #6c757d, #34414d) !important ;
}

.statistics .box .icon {
    width: 80px;
    height: 80px;
    line-height: 86px;
    text-align: center;
    font-size: 42px;
    border-radius: 5px;
    display: block;
}

.statistics .box .title {
    width: calc(100% - 100px);
}

.statistics .box .title h6 {
    margin: 0px 0px 2px;
    font-size: 22px;
}

.statistics .box .title p {
    font-size: 16px;
    margin: 0px;
    color: var(--greycolor);
}

/* Enhanced Dashboard Styles */
.enhanced-dashboard {
    padding: 30px 0;
}

/* Welcome Section */
.welcome-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 24px;
    padding: 40px;
    margin-bottom: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.2);
}

.welcome-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 8px;
    background: linear-gradient(45deg, #fff 0%, #e0e6ff 100%);
    -webkit-background-clip: text;
    /* -webkit-text-fill-color: transparent; */
    background-clip: text;
    color: #fff !important;
}

.welcome-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    margin: 0;
}

.welcome-actions {
    display: flex;
    gap: 16px;
}
/* Modern Buttons Updated Colors */
.btn-modern {
    padding: 12px 24px;
    border-radius: 16px;
    border: none;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none;
}

.btn-primary-modern {
    background-color: #5600ff;
    color: white;
    box-shadow: 0 8px 25px rgba(86, 0, 255, 0.3);
    border: none;
}

.btn-primary-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(86, 0, 255, 0.4);
    color: white;
}

.btn-outline-modern {
    background: transparent;
    color: #f1416c;
    border: 2px solid #f1416c;
    backdrop-filter: none;
}

.btn-outline-modern:hover {
    background: #f1416c;
    color: white;
    transform: translateY(-2px);
}

.btn-sm-modern {
    padding: 8px 16px;
    font-size: 12px;
    background: #5600ff;
    color: white;
    border: none;
}

.btn-sm-modern:hover {
    transform: translateY(-1px);
    color: white;
}

/* Additional Button Variants */
.btn-success-modern {
    background-color: #50cd89;
    color: white;
    box-shadow: 0 8px 25px rgba(80, 205, 137, 0.3);
    border: none;
}

.btn-success-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(80, 205, 137, 0.4);
    color: white;
}

.btn-danger-modern {
    background-color: #f1416c;
    color: white;
    box-shadow: 0 8px 25px rgba(241, 65, 108, 0.3);
    border: none;
}

.btn-danger-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(241, 65, 108, 0.4);
    color: white;
}

.btn-warning-modern {
    background-color: #ffc700;
    color: #1a202c;
    box-shadow: 0 8px 25px rgba(255, 199, 0, 0.3);
    border: none;
}

.btn-warning-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(255, 199, 0, 0.4);
    color: #1a202c;
}

/* Statistics Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.stat-card {
    background: white;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--card-gradient);
}

.stat-card-primary {
    --card-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-card-success {
    --card-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.stat-card-info {
    --card-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.stat-card-warning {
    --card-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-card-danger {
    --card-gradient: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
}

.stat-icon {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    background: var(--card-gradient);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.stat-content {
    flex: 1;
}

.stat-number {
    font-size: 24px;
    font-weight: 800 !important;
    margin: 0 0 8px 0;
    color: #1a202c;
}

.stat-label {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0;
    font-weight: 500;
}

.stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.stat-trend.positive {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.stat-trend.negative {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* Enhanced Cards */
.enhanced-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

.enhanced-card:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.card-header-modern {
    padding: 24px 32px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-content h3 {
    font-size: 1.5rem;
    font-weight: 800 !important;
    color: #1a202c;
    margin: 0 0 4px 0;
}

.header-content p {
    font-size: 1rem;
    color: #64748b;
    margin: 0 !important;
}

.card-body-modern {
    padding: 32px;
}

/* Main Content Grid */
.main-content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
}

/* Modern Select */
.modern-select {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px 16px;
    font-size: 0.9rem;
    color: #475569;
    outline: none;
    transition: all 0.2s ease;
}

.modern-select:focus {
    border-color: #667eea;
    background: white;
}

/* Activity List */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 16px;
    background: #f8fafc;
    transition: all 0.2s ease;
}

.activity-item:hover {
    background: #f1f5f9;
}

.activity-avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    border-radius: 14px;
}

.avatar-placeholder.primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.avatar-placeholder.success {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}
.avatar-placeholder.info {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}
.avatar-placeholder.warning {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.avatar-placeholder.danger {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
}

.activity-content {
    flex: 1;
}

.activity-content p {
    margin: 0 0 4px 0;
    color: #374151;
    font-size: 0.9rem;
}

.activity-time {
    font-size: 0.8rem;
    color: #9ca3af;
}

.activity-status {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.activity-status.success {
    background: #10b981;
}
.activity-status.warning {
    background: #f59e0b;
}
.activity-status.info {
    background: #3b82f6;
}

/* Quotations Section */
.quotations-section {
    margin-bottom: 32px;
}

.quotations-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.quotation-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border-radius: 16px;
    background: #f8fafc;
    transition: all 0.2s ease;
}

.quotation-item:hover {
    background: #f1f5f9;
}

.quotation-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.quotation-content {
    flex: 1;
}

.quotation-content h4 {
    margin: 0 0 6px 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1a202c;
}

.quotation-content p {
    margin: 0 0 12px 0;
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
}

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

.quotation-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #9ca3af;
}

.quotation-status {
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.quotation-status.pending {
    background: rgba(249, 115, 22, 0.1);
    color: #ea580c;
}

.quotation-status.approved {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.quotation-actions {
    display: flex;
    gap: 8px;
}

/* Chart Styles */
.modern-chart {
    height: 280px;
    border-radius: 12px;
}

/* Override ApexCharts default styling */
#generate-reports-chart {
    margin: 0 !important;
}

/* Icon Button */
.btn-icon-modern {
    width: 40px;
    height: 40px;
    border: none;
    background: #f8fafc;
    color: #64748b;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-icon-modern:hover {
    background: #f1f5f9;
    color: #374151;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .main-content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .enhanced-dashboard {
        padding: 16px 0;
    }

    .welcome-section {
        flex-direction: column;
        gap: 24px;
        text-align: center;
        padding: 32px 24px;
    }

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

    .stat-card {
        padding: 24px;
    }

    .welcome-title {
        font-size: 2rem;
    }

    .card-header-modern,
    .card-body-modern {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .welcome-section {
        padding: 24px 20px;
    }

    .quotation-item {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .quotation-actions {
        align-self: stretch;
        justify-content: flex-end;
    }
}

/* Form Groups */
.password-fields-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 32px;
}

.form-group-modern {
    position: relative;
}

.form-label-modern {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.form-control-modern {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: #f9fafb;
}

.form-control-modern:focus {
    outline: none;
    border-color: #667eea;
    background: white;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-control-modern.is-invalid {
    border-color: #ef4444;
    background: #fef2f2;
}

.form-control-modern.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Error Feedback */
.error-feedback {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ef4444;
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 8px;
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    align-items: center;
}

/* Responsive Design */
@media (max-width: 768px) {
    .form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .form-actions .btn-modern {
        width: 100%;
        justify-content: center;
    }
}

/* Quotation Page Specific Styles - Complete */

/* Quotation Header Stats */
.quotation-header-stats {
    display: flex;
    gap: 12px;
}

/* Quotation Filters Section */
.quotation-filters-section {
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
    border: 1px solid #e5e7eb;
}

.quotation-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    align-items: end;
}

.quotation-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quotation-filter-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.quotation-form-select {
    padding: 10px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    background: white;
    color: #374151;
}

.quotation-form-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.quotation-filter-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.quotation-filter-actions .btn-modern {
    min-width: 100px;
}

/* Quotation Table Section */
.quotation-table-section {
    background: white;
    border-radius: 16px;
    overflow: hidden;
}

.quotation-table-wrapper {
    overflow-x: auto;
}

.quotation-table-modern {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.quotation-table-modern thead {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.quotation-table-modern th {
    padding: 16px 20px;
    font-weight: 600;
    color: #374151;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
    text-align: center;
}

.quotation-table-modern th i {
    margin-right: 8px;
}

.quotation-table-modern td {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    /* vertical-align: middle; */
    /* text-align: center; */
}

.quotation-table-row {
    transition: all 0.2s ease;
}

.quotation-table-row:hover {
    background: #f8fafc;
}

.quotation-table-id-col {
    width: 60px;
}

.quotation-table-actions-col {
    width: 120px;
}

.quotation-table-id {
    font-weight: 600;
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

/* Quotation Vendor Info */
.quotation-vendor-info {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.quotation-vendor-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.quotation-vendor-name {
    font-weight: 600;
    color: #374151;
}

/* Quotation Category Badge */
.quotation-category-badge {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Quotation Event Title */
.quotation-event-title {
    font-weight: 500;
    color: #374151;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 auto;
}

/* Quotation Status Badges */
.quotation-status-badge {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: capitalize;
}

.quotation-status-badge i {
    font-size: 8px;
}

.quotation-status-pending {
    background: rgba(249, 115, 22, 0.1);
    color: #ea580c;
}

.quotation-status-approved {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.quotation-status-declined {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* Quotation Action Buttons */
.quotation-action-buttons {
    display: inline-flex;
    gap: 8px;
}

.quotation-btn-action {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
    text-decoration: none;
    cursor: pointer;
}

.quotation-btn-action-view {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
}

.quotation-btn-action-view:hover {
    background: #667eea;
    color: white;
    transform: translateY(-1px);
}

.quotation-btn-action-edit {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.quotation-btn-action-edit:hover {
    background: #3b82f6;
    color: white;
    transform: translateY(-1px);
}

/* Quotation Empty State */
.quotation-empty-state {
    text-align: center;
    padding: 60px 20px;
}

.quotation-empty-content {
    color: #9ca3af;
}

.quotation-empty-content i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.quotation-empty-content h4 {
    margin: 0 0 8px 0;
    color: #6b7280;
}

.quotation-empty-content p {
    margin: 0;
    font-size: 0.9rem;
}

/* Responsive Design for Quotation Page */
@media (max-width: 1200px) {
    .quotation-filters-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .quotation-filter-actions {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .quotation-filters-grid {
        grid-template-columns: 1fr;
    }

    .quotation-filter-actions {
        grid-column: span 1;
        flex-direction: column;
    }

    .quotation-filter-actions .btn-modern {
        width: 100%;
        justify-content: center;
    }

    .quotation-table-modern th,
    .quotation-table-modern td {
        padding: 12px 16px;
    }

    .quotation-vendor-info {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .quotation-event-title {
        max-width: 150px;
    }

    .quotation-action-buttons {
        flex-direction: column;
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .quotation-filters-section {
        padding: 16px;
    }

    .quotation-table-modern th,
    .quotation-table-modern td {
        padding: 10px 12px;
    }
}

/* Quotation Details Page - Complete CSS */

/* Quotation Details Page Specific Styles */

/* Breadcrumb */
.quotation-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.quotation-breadcrumb-link {
    color: #667eea;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.quotation-breadcrumb-link:hover {
    color: #5600ff;
}

.quotation-breadcrumb i.fa-chevron-right {
    color: #9ca3af;
    font-size: 12px;
}

.quotation-breadcrumb-current {
    color: #6b7280;
}

/* Detail Stats */
.quotation-detail-stats {
    display: flex;
    gap: 12px;
}

.quotation-detail-badge {
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.quotation-detail-badge i {
    font-size: 8px;
}

.quotation-detail-badge.quotation-status-pending {
    background: rgba(249, 115, 22, 0.1);
    color: #ea580c;
}

.quotation-detail-badge.quotation-status-approved {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.quotation-detail-badge.quotation-status-declined {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* Info Section */
.quotation-info-section {
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
    border: 1px solid #e5e7eb;
}

.quotation-details-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.quotation-detail-label {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    padding: 14px 20px;
    font-weight: 600;
    color: #374151;
    border: 1px solid #e5e7eb;
    width: 180px;
    white-space: nowrap;
}

.quotation-detail-label i {
    margin-right: 8px;
    color: #667eea;
}

.quotation-detail-value {
    padding: 14px 20px;
    border: 1px solid #e5e7eb;
    color: #1f2937;
    background: white;
}

.quotation-event-title-full {
    font-weight: 600;
    color: #111827;
}

.quotation-description {
    line-height: 1.6;
    color: #4b5563;
}

.quotation-time {
    color: #9ca3af;
    font-size: 0.85rem;
}

/* Update Section */
.quotation-update-section {
    background: white;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    margin-top: 24px;
}

.quotation-update-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
}

.quotation-update-header h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #374151;
    margin: 0;
}

.quotation-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.quotation-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

.quotation-form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.quotation-form-select {
    padding: 10px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    background: white;
    color: #374151;
}

.quotation-form-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.quotation-file-input {
    padding: 10px 14px;
    border: 2px dashed #e5e7eb;
    border-radius: 12px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    background: #f9fafb;
    color: #374151;
}

.quotation-file-input:focus {
    outline: none;
    border-color: #667eea;
    background: white;
}

.quotation-file-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #667eea;
    text-decoration: none;
    font-size: 0.85rem;
    margin-top: 8px;
    transition: all 0.2s ease;
}

.quotation-file-link:hover {
    color: #5600ff;
}

.quotation-textarea {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    background: white;
    color: #374151;
    resize: vertical;
    min-height: 100px;
}

.quotation-textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.quotation-form-actions {
    display: flex;
    justify-content: center;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

/* Services Section */
.quotation-services-section {
    border-top: 1px solid #f1f5f9;
}

.quotation-services-header {
    margin-bottom: 24px;
}

.quotation-services-header h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #374151;
    margin: 0 0 8px 0;
}

.quotation-services-header p {
    color: #6b7280;
    margin: 0;
    font-size: 0.9rem;
}

/* Service Pricing Section */
.service-pricing-wrapper {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* Enhanced Service Pricing Table */
.service-pricing-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    margin: 0;
}

.service-pricing-table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.service-pricing-table th {
    padding: 20px;
    font-weight: 700;
    text-align: center;
    border: none;
    font-size: 0.95rem;
}

.service-pricing-table th i {
    margin-right: 8px;
    font-size: 16px;
}

.service-pricing-table td {
    padding: 18px 20px;
    border-bottom: 1px solid #f1f5f9;
    text-align: center;
    color: #374151;
    vertical-align: middle;
}

.service-pricing-row:hover {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.service-pricing-row:nth-child(even) {
    background: #fafbfc;
}

.service-pricing-row:nth-child(even):hover {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

/* Service Number Badge */
.service-number-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

/* Service Info */
.service-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 600;
}

.service-icon {
    color: #667eea;
    font-size: 16px;
}

/* Service Price Input Group */
.service-price-input-group {
    display: inline-flex;
    align-items: center;
    background: #f8fafc;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.service-price-input-group:focus-within {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.price-currency {
    background: #667eea;
    color: white;
    padding: 10px 12px;
    font-weight: 700;
    font-size: 0.9rem;
}

.service-pricing-input {
    border: none;
    padding: 10px 12px;
    width: 100px;
    text-align: right;
    font-weight: 600;
    color: #1a202c;
    background: transparent;
    outline: none;
}

.service-pricing-input:focus {
    background: white;
}

/* Update Date Info */
.update-date-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #6b7280;
}

.update-date-info i {
    color: #10b981;
}

/* Service Pricing Footer */
.service-pricing-footer {
    background: #f8fafc;
    padding: 24px;
    text-align: center;
    border-top: 1px solid #e5e7eb;
}

/* Custom Update Price Button */
.btn-update-price {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 700;
    padding: 14px 40px;
    border-radius: 24px;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.btn-update-price:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6c4ac9 100%);
    box-shadow: 0 12px 35px rgba(86, 103, 216, 0.4);
    transform: translateY(-2px);
    color: white;
}

.btn-update-price:active {
    transform: translateY(0);
}

.btn-update-price .btn-loading {
    margin-left: 8px;
}

/* Additional Button Variants */
.btn-success-modern {
    background-color: #50cd89;
    color: white;
    box-shadow: 0 8px 25px rgba(80, 205, 137, 0.3);
    border: none;
}

.btn-success-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(80, 205, 137, 0.4);
    color: white;
}

.btn-danger-modern {
    background-color: #f1416c;
    color: white;
    box-shadow: 0 8px 25px rgba(241, 65, 108, 0.3);
    border: none;
}

.btn-danger-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(241, 65, 108, 0.4);
    color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
    .quotation-form-grid {
        grid-template-columns: 1fr;
    }

    .quotation-form-full {
        grid-column: span 1;
    }

    .quotation-detail-label,
    .quotation-detail-value {
        padding: 12px 16px;
    }

    .quotation-info-section,
    .quotation-update-section {
        padding: 16px 0;
    }

    .service-pricing-table th,
    .service-pricing-table td {
        padding: 12px 16px;
        font-size: 0.85rem;
    }

    .service-info {
        flex-direction: column;
        gap: 6px;
    }

    .service-price-input-group {
        width: 100%;
        max-width: 140px;
    }

    .service-pricing-input {
        width: 80px;
    }
}

@media (max-width: 480px) {
    .service-pricing-table th,
    .service-pricing-table td {
        padding: 10px 12px;
    }

    .service-pricing-footer {
        padding: 16px 0;
    }
}

/* Vendor Add Page - Complete CSS */

.vendor-form-badge {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Form Sections */
.vendor-form-section {
    margin-bottom: 40px;
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e5e7eb;
}

.vendor-section-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.vendor-section-header h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #374151;
    margin: 0 0 8px 0;
    font-size: 1.1rem;
}

.vendor-section-note {
    color: #6b7280;
    font-size: 0.85rem;
    margin: 0;
    font-style: italic;
}

/* Form Grid */
.vendor-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.vendor-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vendor-form-full {
    grid-column: 1 / -1;
}

/* Form Labels */
.vendor-form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.vendor-form-label i {
    color: #667eea;
    width: 16px;
}

/* Form Inputs */
.vendor-form-input,
.vendor-form-select {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: white;
    color: #374151;
}

.vendor-form-input:focus,
.vendor-form-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.vendor-form-input.is-invalid,
.vendor-form-select.is-invalid {
    border-color: #ef4444;
    background: #fef2f2;
}

.vendor-form-input.is-invalid:focus,
.vendor-form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Error Messages */
.vendor-error-message {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ef4444;
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 4px;
}

/* Map Container */
.vendor-map-container {
    width: 100%;
    height: 400px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #e5e7eb;
}

/* File Upload Section */
.vendor-file-upload {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vendor-file-input {
    padding: 12px 16px;
    border: 2px dashed #e5e7eb;
    border-radius: 12px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    background: #f9fafb;
    color: #374151;
}

.vendor-file-input:focus {
    outline: none;
    border-color: #667eea;
    background: white;
}

.vendor-file-info {
    margin-top: 4px;
}

.vendor-file-note {
    color: #ef4444;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.vendor-image-preview {
    display: flex;
    justify-content: center;
}

.vendor-preview-img {
    max-width: 120px;
    height: auto;
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    background: #f9fafb;
}

/* Form Actions */
.vendor-form-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0 !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    /* .vendor-form-grid {
        grid-template-columns: 1fr;
    } */

    .vendor-form-section {
        padding: 16px;
    }

    .card-body-modern {
        padding: 20px;
    }

    .vendor-form-actions {
        flex-direction: column;
    }

    .vendor-form-actions .btn-modern {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .vendor-form-input,
    .vendor-form-select {
        padding: 10px 14px;
        font-size: 0.9rem;
    }

    .vendor-section-header h4 {
        font-size: 1rem;
    }
}

/* Vendors List Page - Complete CSS */

/* Header Stats */
.vendors-header-stats {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Filters Section */
.vendors-filters-section {
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
    border: 1px solid #e5e7eb;
}

.vendors-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    align-items: end;
}

.vendors-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vendors-filter-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.vendors-form-input,
.vendors-form-select {
    padding: 10px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    background: white;
    color: #374151;
}

.vendors-form-input:focus,
.vendors-form-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.vendors-filter-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Table Section */
.vendors-table-section {
    background: white;
    border-radius: 16px;
    overflow: hidden;
}

.vendors-table-wrapper {
    overflow-x: auto;
}

.vendors-table-modern {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.vendors-table-modern thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.vendors-table-modern th {
    padding: 16px 20px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.vendors-table-modern th i {
    margin-right: 8px;
}

.vendors-table-modern td {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    /* vertical-align: middle; */
    /* text-align: center; */
}

.service-table-modern td {
    vertical-align: middle;
    text-align: center;
}

.vendors-table-row {
    transition: all 0.2s ease;
}

.vendors-table-row:hover {
    background: #f8fafc;
}

.vendors-table-id-col {
    width: 60px;
}

.vendors-table-actions-col {
    width: 150px;
}

.vendors-table-id {
    font-weight: 600;
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

/* Business Info */
.vendors-business-info {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    gap: 4px;
}

.vendors-business-name {
    font-weight: 600;
    color: #374151;
}

/* Vendor Info */
.vendors-vendor-info {
    display: flex;
    align-items: center;
    /* justify-content: center; */
    gap: 10px;
}

.vendors-vendor-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.vendors-vendor-name {
    font-weight: 500;
    color: #374151;
}

/* Contact Info */
.vendors-contact-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.vendors-email,
.vendors-phone {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #6b7280;
}

.vendors-email i {
    color: #3b82f6;
}

.vendors-phone i {
    color: #10b981;
}

/* Coins Display */
.vendors-coins-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 600;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    padding: 8px 12px;
    border-radius: 8px;
}

/* Date Info */
.vendors-date-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.vendors-date,
.vendors-time {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: #6b7280;
}

.vendors-date {
    font-weight: 500;
    color: #374151;
}

/* QR Code */
.vendors-qr-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.vendors-qr-available {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.vendors-qr-available:hover {
    background: #3b82f6;
    color: white;
}

.vendors-qr-not-available {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #9ca3af;
    font-size: 0.85rem;
}

/* Status Badges */
.vendors-status-badge {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: capitalize;
}

.vendors-status-badge i {
    font-size: 8px;
}

.vendors-status-active {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.vendors-status-inactive {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* Action Buttons */
.vendors-action-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.vendors-btn-action {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
    text-decoration: none;
    cursor: pointer;
}

.vendors-btn-download {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.vendors-btn-download:hover {
    background: #10b981;
    color: white;
    transform: translateY(-1px);
}

.vendors-btn-edit {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.vendors-btn-edit:hover {
    background: #3b82f6;
    color: white;
    transform: translateY(-1px);
}

.vendors-btn-delete {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.vendors-btn-delete:hover {
    background: #ef4444;
    color: white;
    transform: translateY(-1px);
}

/* Empty State */
.vendors-empty-state {
    text-align: center;
    padding: 60px 20px;
}

.vendors-empty-content {
    color: #9ca3af;
}

.vendors-empty-content i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.vendors-empty-content h4 {
    margin: 0 0 8px 0;
    color: #6b7280;
}

.vendors-empty-content p {
    margin: 0;
    font-size: 0.9rem;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .vendors-filters-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vendors-filter-actions {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .vendors-header-stats {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .vendors-filters-grid {
        grid-template-columns: 1fr;
    }

    .vendors-filter-actions {
        grid-column: span 1;
        flex-direction: column;
    }

    .vendors-table-modern th,
    .vendors-table-modern td {
        padding: 12px 16px;
    }

    .vendors-vendor-info,
    .vendors-contact-info,
    .vendors-date-info {
        flex-direction: column;
        gap: 4px;
    }

    .vendors-action-buttons {
        flex-direction: column;
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .vendors-filters-section {
        padding: 16px;
    }

    .vendors-filters-section .btn-modern {
        justify-content: center;
    }

    .vendors-table-modern th,
    .vendors-table-modern td {
        padding: 10px 12px;
        font-size: 0.8rem;
    }

    .card-header-modern {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}

/* Edit Vendor Page Specific Styles */

/* Breadcrumb */
.vendor-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.vendor-breadcrumb-link {
    color: #667eea;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.vendor-breadcrumb-link:hover {
    color: #5600ff;
}

.vendor-breadcrumb i.fa-chevron-right {
    color: #9ca3af;
    font-size: 12px;
}

.vendor-breadcrumb-current {
    color: #6b7280;
}

/* Password Note */
.vendor-password-note {
    color: #6b7280;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

/* Existing logo preview styling */
.vendor-preview-img {
    max-width: 120px;
    height: auto;
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    background: #f9fafb;
}

/* Vendors Documents Page - Complete CSS */

/* Header Stats */
.documents-header-stats {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Filters Section */
.documents-filters-section {
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
    border: 1px solid #e5e7eb;
}

.documents-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    align-items: end;
}

.documents-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.documents-filter-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.documents-form-input,
.documents-form-select {
    padding: 10px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    background: white;
    color: #374151;
}

.documents-form-input:focus,
.documents-form-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.documents-filter-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Table Section */
.documents-table-section {
    background: white;
    border-radius: 16px;
    overflow: hidden;
}

.documents-table-wrapper {
    overflow-x: auto;
}

.documents-table-modern {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.documents-table-modern thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.documents-table-modern th {
    padding: 16px 20px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.documents-table-modern th i {
    margin-right: 8px;
}

.documents-table-modern td {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    /* vertical-align: middle; */
    /* text-align: center; */
}

.documents-table-row {
    transition: all 0.2s ease;
}

.documents-table-row:hover {
    background: #f8fafc;
}

.documents-table-id-col {
    width: 60px;
}

.documents-table-actions-col {
    width: 100px;
}

.documents-table-id {
    font-weight: 600;
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

/* Business Info */
.documents-business-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.documents-business-name {
    font-weight: 600;
    color: #374151;
}

/* Vendor Info */
.documents-vendor-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.documents-vendor-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.documents-vendor-name {
    font-weight: 500;
    color: #374151;
}

/* Contact Info */
.documents-contact-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.documents-email,
.documents-phone {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #6b7280;
}

.documents-email i {
    color: #3b82f6;
}

.documents-phone i {
    color: #10b981;
}

/* Address */
.documents-address {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #6b7280;
    max-width: 150px;
}

.documents-address i {
    color: #ef4444;
}

/* Title */
.documents-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 500;
    color: #374151;
}

.documents-title i {
    color: #8b5cf6;
}

/* File Preview */
.documents-file-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.documents-image-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.documents-preview-img {
    max-width: 80px;
    max-height: 60px;
    border-radius: 8px;
    border: 2px solid #e5e7eb;
    cursor: pointer;
    transition: all 0.2s ease;
}

.documents-preview-img:hover {
    transform: scale(1.05);
    border-color: #667eea;
}

.documents-file-type {
    font-size: 0.8rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 4px;
}

.documents-file-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.documents-pdf-btn {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.documents-pdf-btn:hover {
    background: #ef4444;
    color: white;
}

.documents-download-btn {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.documents-download-btn:hover {
    background: #3b82f6;
    color: white;
}

/* Status Badges */
.documents-status-badge {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: capitalize;
}

.documents-status-badge i {
    font-size: 8px;
}

.documents-status-pending {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.documents-status-completed,
.documents-status-approved {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.documents-status-rejected {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* Action Buttons */
.documents-action-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.documents-btn-action {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.documents-btn-update-status {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.documents-btn-update-status:hover {
    background: #d97706;
    color: white;
    transform: translateY(-1px);
}

/* Empty State */
.documents-empty-state {
    text-align: center;
    padding: 60px 20px;
}

.documents-empty-content {
    color: #9ca3af;
}

.documents-empty-content i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.documents-empty-content h4 {
    margin: 0 0 8px 0;
    color: #6b7280;
}

.documents-empty-content p {
    margin: 0;
    font-size: 0.9rem;
}

/* SweetAlert2 Custom Styles */
.swal-approve-btn {
    background-color: #10b981 !important;
}

.swal-reject-btn {
    background-color: #ef4444 !important;
}
/* Updated Responsive Design - Following Add Vendor Page Pattern */
@media (max-width: 1200px) {
    .documents-filters-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .documents-filter-actions {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .documents-header-stats {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .documents-filters-grid {
        grid-template-columns: 1fr;
    }

    .documents-filters-section {
        padding: 16px;
    }

    .card-body-modern {
        padding: 20px;
    }

    .documents-filter-actions {
        grid-column: span 1;
        flex-direction: column;
    }

    .documents-filter-actions .btn-modern {
        width: 100%;
        justify-content: center;
    }

    .documents-table-modern th,
    .documents-table-modern td {
        padding: 12px 16px;
    }

    .documents-vendor-info,
    .documents-contact-info {
        flex-direction: column;
        gap: 4px;
    }
}

@media (max-width: 480px) {
    .documents-filters-section {
        padding: 16px;
    }

    .documents-table-modern th,
    .documents-table-modern td {
        padding: 10px 12px;
        font-size: 0.8rem;
    }

    .documents-filter-actions .btn-modern {
        width: 100%;
        justify-content: center;
    }
}

/* Add User Page - Complete CSS */

.user-form-badge {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Form Sections */
.user-form-section {
    margin-bottom: 40px;
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e5e7eb;
}

.user-section-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.user-section-header h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #374151;
    margin: 0 0 8px 0;
    font-size: 1.1rem;
}

/* Form Grid */
.user-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.user-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Form Labels */
.user-form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.user-form-label i {
    color: #667eea;
    width: 16px;
}

/* Form Inputs */
.user-form-input,
.user-form-select {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: white;
    color: #374151;
}

.user-form-input:focus,
.user-form-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.user-form-input.is-invalid,
.user-form-select.is-invalid {
    border-color: #ef4444;
    background: #fef2f2;
}

.user-form-input.is-invalid:focus,
.user-form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Error Messages */
.user-error-message {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ef4444;
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 4px;
}

/* File Upload Section */
.user-file-upload {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.user-file-input {
    padding: 12px 16px;
    border: 2px dashed #e5e7eb;
    border-radius: 12px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    background: #f9fafb;
    color: #374151;
}

.user-file-input:focus {
    outline: none;
    border-color: #667eea;
    background: white;
}

.user-file-info {
    margin-top: 4px;
}

.user-file-note {
    color: #6b7280;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.user-image-preview {
    display: flex;
    justify-content: center;
}

.user-preview-img {
    max-width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #e5e7eb;
    background: #f9fafb;
}

/* Form Actions */
.user-form-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

/* Responsive Design - Following Add Vendor Pattern */
@media (max-width: 768px) {
    .user-form-section {
        padding: 16px;
    }

    .card-body-modern {
        padding: 20px;
    }

    .user-form-actions {
        flex-direction: column;
    }

    .user-form-actions .btn-modern {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .user-form-input,
    .user-form-select {
        padding: 10px 14px;
        font-size: 0.9rem;
    }

    .user-section-header h4 {
        font-size: 1rem;
    }
}

/* Default User Icon Styling */
.user-default-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 36px;
    border: 2px solid #e5e7eb;
    transition: all 0.2s ease;
}

/* Updated Image Preview Styling */
.user-preview-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e5e7eb;
    display: none;
}

/* Show preview image when loaded */
.user-preview-img.loaded {
    display: block;
}

/* Users List Page - Complete CSS */

/* Header Stats */
.users-header-stats {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Filters Section */
.users-filters-section {
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
    border: 1px solid #e5e7eb;
}

.users-filters-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: end;
}

.users-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.users-filter-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.users-form-input {
    padding: 10px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    background: white;
    color: #374151;
}

.users-form-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.users-filter-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Table Section */
.users-table-section {
    background: white;
    border-radius: 16px;
    overflow: hidden;
}

.users-table-wrapper {
    overflow-x: auto;
}

.users-table-modern {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.users-table-modern thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.users-table-modern th {
    padding: 16px 20px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.users-table-modern th i {
    margin-right: 8px;
}

.users-table-modern td {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    /* vertical-align: middle; */
    /* text-align: center; */
}

.users-table-row {
    transition: all 0.2s ease;
}

.users-table-row:hover {
    background: #f8fafc;
}

.users-table-id-col {
    width: 60px;
}

.users-table-actions-col {
    width: 150px;
}

.users-table-id {
    font-weight: 600;
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

/* User Info */
.users-user-info {
    display: flex;
    align-items: center;
    /* justify-content: center; */
    gap: 10px;
}

.users-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.users-user-name {
    font-weight: 500;
    color: #374151;
}

/* DOB */
.users-dob {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #6b7280;
    font-size: 0.85rem;
}

.users-dob i {
    color: #ec4899;
}

.users-not-found {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #9ca3af;
    font-style: italic;
}

/* Email */
.users-email {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #6b7280;
    font-size: 0.85rem;
    word-break: break-word;
}

.users-email i {
    color: #3b82f6;
}

/* Contact */
.users-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #6b7280;
    font-size: 0.85rem;
}

.users-contact i {
    color: #10b981;
}

/* Date Info */
.users-date-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.users-date,
.users-time {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: #6b7280;
}

.users-date {
    font-weight: 500;
    color: #374151;
}

/* Action Buttons */
.users-action-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.users-btn-action {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
    text-decoration: none;
    cursor: pointer;
}

.users-btn-edit {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.users-btn-edit:hover {
    background: #3b82f6;
    color: white;
    transform: translateY(-1px);
}

.users-btn-view {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
}

.users-btn-view:hover {
    background: #667eea;
    color: white;
    transform: translateY(-1px);
}

.users-btn-delete {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.users-btn-delete:hover {
    background: #ef4444;
    color: white;
    transform: translateY(-1px);
}

/* Empty State */
.users-empty-state {
    text-align: center;
    padding: 60px 20px;
}

.users-empty-content {
    color: #9ca3af;
}

.users-empty-content i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.users-empty-content h4 {
    margin: 0 0 8px 0;
    color: #6b7280;
}

.users-empty-content p {
    margin: 0;
    font-size: 0.9rem;
}

/* Responsive Design - Following Your Preferred Pattern */
@media (max-width: 1200px) {
    .users-filters-grid {
        grid-template-columns: 1fr;
    }

    .users-filter-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .users-header-stats {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    /* Keep natural grid behavior - don't force single column */
    .users-filters-grid {
        grid-template-columns: 1fr;
    }

    .users-filters-section {
        padding: 16px;
    }

    .card-body-modern {
        padding: 20px;
    }

    .users-filter-actions {
        flex-direction: column;
    }

    .users-filter-actions .btn-modern {
        width: 100%;
        justify-content: center;
    }

    .users-table-modern th,
    .users-table-modern td {
        padding: 12px 16px;
    }

    .users-user-info {
        flex-direction: column;
        gap: 6px;
    }

    .users-action-buttons {
        flex-direction: column;
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .users-filters-section {
        padding: 16px;
    }

    .users-table-modern th,
    .users-table-modern td {
        padding: 10px 12px;
        font-size: 0.8rem;
    }
}

/* Edit User Page - Complete CSS */

.user-edit-form-badge {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Breadcrumb */
.user-edit-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.user-edit-breadcrumb-link {
    color: #667eea;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.user-edit-breadcrumb-link:hover {
    color: #5600ff;
}

.user-edit-breadcrumb i.fa-chevron-right {
    color: #9ca3af;
    font-size: 12px;
}

.user-edit-breadcrumb-current {
    color: #6b7280;
}

/* Form Sections */
.user-edit-form-section {
    margin-bottom: 40px;
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e5e7eb;
}

.user-edit-section-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.user-edit-section-header h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #374151;
    margin: 0 0 8px 0;
    font-size: 1.1rem;
}

.user-edit-section-note {
    color: #6b7280;
    font-size: 0.85rem;
    margin: 0;
    font-style: italic;
}

/* Form Grid */
.user-edit-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.user-edit-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Form Labels */
.user-edit-form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.user-edit-form-label i {
    color: #667eea;
    width: 16px;
}

/* Form Inputs */
.user-edit-form-input,
.user-edit-form-select {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: white;
    color: #374151;
}

.user-edit-form-input:focus,
.user-edit-form-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.user-edit-form-input:disabled,
.user-edit-form-select:disabled {
    background: #eee;
    cursor: not-allowed;
}

.user-edit-form-input.is-invalid,
.user-edit-form-select.is-invalid {
    border-color: #ef4444;
    background: #fef2f2;
}

.user-edit-form-input.is-invalid:focus,
.user-edit-form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Error Messages */
.user-edit-error-message {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ef4444;
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 4px;
}

/* Password Note */
.user-edit-password-note {
    color: #6b7280;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

/* File Upload Section */
.user-edit-file-upload {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.user-edit-file-input {
    padding: 12px 16px;
    border: 2px dashed #e5e7eb;
    border-radius: 12px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    background: #f9fafb;
    color: #374151;
}

.user-edit-file-input:focus {
    outline: none;
    border-color: #667eea;
    background: white;
}

.user-edit-file-info {
    margin-top: 4px;
}

.user-edit-file-note {
    color: #6b7280;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.user-edit-image-preview {
    display: flex;
    justify-content: center;
}

.user-edit-preview-img {
    max-width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #e5e7eb;
    background: #f9fafb;
}

/* Form Actions */
.user-edit-form-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0 !important;
    display: block;
}

/* Responsive Design - Following Your Preferred Pattern */
@media (max-width: 768px) {
    .user-edit-form-section {
        padding: 16px;
    }

    .card-body-modern {
        padding: 20px;
    }

    .user-edit-form-actions {
        flex-direction: column;
    }

    .user-edit-form-actions .btn-modern {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .user-edit-form-input,
    .user-edit-form-select {
        padding: 10px 14px;
        font-size: 0.9rem;
    }

    .user-edit-section-header h4 {
        font-size: 1rem;
    }
}

/* User Details Page - Complete CSS */

.user-details-badge {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Breadcrumb */
.user-details-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.user-details-breadcrumb-link {
    color: #667eea;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.user-details-breadcrumb-link:hover {
    color: #5600ff;
}

.user-details-breadcrumb i.fa-chevron-right {
    color: #9ca3af;
    font-size: 12px;
}

.user-details-breadcrumb-current {
    color: #6b7280;
}

/* Profile Overview Section */
.user-details-profile-section {
    margin-bottom: 32px;
}

.user-details-profile-card {
    background-color: #f8fafc;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    color: var(--blackcolor);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

.user-details-avatar {
    position: relative;
}

.user-details-avatar-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
    display: block;
}

.user-details-avatar-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: white;
    border: 3px solid white;
}

.user-details-profile-info h4.user-details-name {
    margin: 0 0 8px 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.user-details-profile-info p.user-details-email {
    margin: 0 0 12px 0;
    opacity: 0.9;
    font-size: 1rem;
}

/* Sections */
.user-details-section {
    margin-bottom: 32px;
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e5e7eb;
}

.user-details-section-header {
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.user-details-section-header h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #374151;
    margin: 0;
    font-size: 1.1rem;
}

/* Grid Layout */
.user-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.user-details-item {
    background: white;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.user-details-full {
    grid-column: 1 / -1;
}

.user-details-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.user-details-label i {
    color: #667eea;
    width: 16px;
}

.user-details-value {
    color: #6b7280;
    font-size: 0.95rem;
    line-height: 1.5;
    word-break: break-word;
}

/* Status Badges */
.user-details-status-badge {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.user-details-status-badge i {
    font-size: 8px;
}

.user-details-status-badge.active {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.user-details-status-badge.inactive {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* Document Image */
.user-details-document {
    margin-top: 8px;
}

.user-details-document-img {
    max-width: 150px;
    height: auto;
    border-radius: 8px;
    border: 2px solid #e5e7eb;
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-details-document-img:hover {
    transform: scale(1.05);
    border-color: #667eea;
}

/* Status Management Section */
.user-details-actions-section {
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    margin-bottom: 32px;
}

.user-details-status-management {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: white;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.user-details-current-status {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-details-status-form {
    margin: 0;
}

/* Navigation */
.user-details-navigation {
    display: flex;
    gap: 16px;
    justify-content: center;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

/* Responsive Design - Following Your Preferred Pattern */
@media (max-width: 768px) {
    .user-details-section {
        padding: 16px;
    }

    .card-body-modern {
        padding: 20px;
    }

    .user-details-profile-card {
        flex-direction: column;
        text-align: center;
    }

    .user-details-status-management {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .user-details-navigation {
        flex-direction: column;
    }

    .user-details-navigation .btn-modern {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .user-details-section {
        padding: 16px;
    }

    .user-details-item {
        padding: 12px;
    }

    .user-details-section-header h4 {
        font-size: 1rem;
    }
}

/* Contact Requests Page - Complete CSS */

/* Header Stats */
.contacts-header-stats {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Table Section */
.contacts-table-section {
    background: white;
    border-radius: 16px;
    overflow: hidden;
}

.contacts-table-wrapper {
    overflow-x: auto;
}

.contacts-table-modern {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.contacts-table-modern thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.contacts-table-modern th {
    padding: 16px 20px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.contacts-table-modern th i {
    margin-right: 8px;
}

.contacts-table-modern td {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    text-align: center;
}

.contacts-table-row {
    transition: all 0.2s ease;
}

.contacts-table-row:hover {
    background: #f8fafc;
}

.contacts-table-id-col {
    width: 60px;
}

.contacts-table-actions-col {
    width: 120px;
}

.contacts-table-id {
    font-weight: 600;
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

/* Name Info */
.contacts-name-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.contacts-name-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.contacts-name {
    font-weight: 500;
    color: #374151;
}

/* Email */
.contacts-email {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #6b7280;
    font-size: 0.85rem;
    word-break: break-word;
}

.contacts-email i {
    color: #3b82f6;
}

/* Phone */
.contacts-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #6b7280;
    font-size: 0.85rem;
}

.contacts-phone i {
    color: #10b981;
}

/* Date */
.contacts-date {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #6b7280;
    font-size: 0.85rem;
}

.contacts-date i {
    color: #8b5cf6;
}

/* Action Buttons */
.contacts-action-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.contacts-btn-action {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
}

.contacts-btn-view {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.contacts-btn-view:hover {
    background: #3b82f6;
    color: white;
    transform: translateY(-1px);
}

.contacts-btn-delete {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.contacts-btn-delete:hover {
    background: #ef4444;
    color: white;
    transform: translateY(-1px);
}

/* Empty State */
.contacts-empty-state {
    text-align: center;
    padding: 60px 20px;
}

.contacts-empty-content {
    color: #9ca3af;
}

.contacts-empty-content i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.contacts-empty-content h4 {
    margin: 0 0 8px 0;
    color: #6b7280;
}

.contacts-empty-content p {
    margin: 0;
    font-size: 0.9rem;
}

/* Modal Styles */
.contacts-modal .modal-content {
    border-radius: 16px;
    border: none;
}

.contacts-modal .modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 16px 16px 0 0;
    padding: 20px 24px;
}

.contacts-modal .modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.contacts-modal .modal-body {
    padding: 24px;
}

.contacts-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.contacts-modal-item {
    background: #f8fafc;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.contacts-modal-full {
    grid-column: 1 / -1;
}

.contacts-modal-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.contacts-modal-label i {
    color: #667eea;
    width: 16px;
}

.contacts-modal-value {
    color: #6b7280;
    font-size: 0.95rem;
    line-height: 1.5;
    word-break: break-word;
}

.contacts-modal-message {
    color: #6b7280;
    font-size: 0.95rem;
    line-height: 1.6;
    background: white;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    max-height: 200px;
    overflow-y: auto;
}

.contacts-modal .modal-footer {
    padding: 20px 24px;
    border-top: 1px solid #e5e7eb;
    justify-content: center;
}

/* Responsive Design - Following Your Preferred Pattern */
@media (max-width: 768px) {
    .card-body-modern {
        padding: 20px;
    }

    .contacts-table-modern th,
    .contacts-table-modern td {
        padding: 12px 16px;
    }

    .contacts-name-info {
        flex-direction: column;
        gap: 6px;
    }

    .contacts-action-buttons {
        flex-direction: column;
        gap: 6px;
    }

    .contacts-modal .modal-body {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .contacts-table-modern th,
    .contacts-table-modern td {
        padding: 10px 12px;
        font-size: 0.8rem;
    }

    .contacts-modal .modal-body {
        padding: 16px;
    }

    .contacts-modal-item {
        padding: 12px;
    }
}

/* Promotions Request Page - Complete CSS */

/* Header Stats */
.promotions-header-stats {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Table Section */
.promotions-table-section {
    background: white;
    border-radius: 16px;
    overflow: hidden;
}

.promotions-table-wrapper {
    overflow-x: auto;
}

.promotions-table-modern {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.promotions-table-modern thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.promotions-table-modern th {
    padding: 16px 20px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.promotions-table-modern th i {
    margin-right: 8px;
}

.promotions-table-modern td {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    text-align: center;
}

.promotions-table-row {
    transition: all 0.2s ease;
}

.promotions-table-row:hover {
    background: #f8fafc;
}

.promotions-table-id-col {
    width: 60px;
}

.promotions-table-actions-col {
    width: 100px;
}

.promotions-table-id {
    font-weight: 600;
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

/* Vendor Info */
.promotions-vendor-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.promotions-vendor-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.promotions-vendor-name {
    font-weight: 500;
    color: #374151;
}

/* Service */
.promotions-service {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #6b7280;
    font-size: 0.85rem;
}

.promotions-service i {
    color: #8b5cf6;
}

/* Amount */
.promotions-amount {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #059669;
    font-size: 0.9rem;
    font-weight: 600;
}

.promotions-amount i {
    color: #10b981;
}

/* Payment Status Badges */
.promotions-payment-badge {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: capitalize;
}

.promotions-payment-badge i {
    font-size: 8px;
}

.promotions-payment-paid {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.promotions-payment-pending {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.promotions-payment-failed {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* Status Badges */
.promotions-status-badge {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: capitalize;
}

.promotions-status-badge i {
    font-size: 8px;
}

.promotions-status-pending {
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
}

.promotions-status-approved {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.promotions-status-rejected {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* Action Buttons */
.promotions-action-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.promotions-btn-action {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.promotions-btn-edit {
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
}

.promotions-btn-edit:hover {
    background: #4f46e5;
    color: white;
    transform: translateY(-1px);
}

.promotions-btn-locked {
    background: rgba(156, 163, 175, 0.1);
    color: #9ca3af;
    cursor: not-allowed;
}

/* Empty State */
.promotions-empty-state {
    text-align: center;
    padding: 60px 20px;
}

.promotions-empty-content {
    color: #9ca3af;
}

.promotions-empty-content i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.promotions-empty-content h4 {
    margin: 0 0 8px 0;
    color: #6b7280;
}

.promotions-empty-content p {
    margin: 0;
    font-size: 0.9rem;
}

/* Responsive Design - Following Your Preferred Pattern */
@media (max-width: 768px) {
    /* Keep natural grid behavior - don't force single column */

    .card-body-modern {
        padding: 20px;
    }

    .promotions-table-modern th,
    .promotions-table-modern td {
        padding: 12px 16px;
    }

    .promotions-vendor-info {
        flex-direction: column;
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .promotions-table-modern th,
    .promotions-table-modern td {
        padding: 10px 12px;
        font-size: 0.8rem;
    }
}

/* Add Category Page - Complete CSS */

.category-form-badge {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Form Sections */
.category-form-section {
    margin-bottom: 40px;
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e5e7eb;
}

.category-section-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.category-section-header h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #374151;
    margin: 0 0 8px 0;
    font-size: 1.1rem;
}

/* Form Grid */
.category-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.category-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Form Labels */
.category-form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.category-form-label i {
    color: #667eea;
    width: 16px;
}

/* Form Inputs */
.category-form-input,
.category-form-select {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: white;
    color: #374151;
}

.category-form-input:focus,
.category-form-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.category-form-input.is-invalid,
.category-form-select.is-invalid {
    border-color: #ef4444;
    background: #fef2f2;
}

.category-form-input.is-invalid:focus,
.category-form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Error Messages */
.category-error-message {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ef4444;
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 4px;
}

/* File Upload Section */
.category-file-upload {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.category-file-input {
    padding: 12px 16px;
    border: 2px dashed #e5e7eb;
    border-radius: 12px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    background: #f9fafb;
    color: #374151;
}

.category-file-input:focus {
    outline: none;
    border-color: #667eea;
    background: white;
}

.category-file-info {
    margin-top: 4px;
}

.category-file-note {
    color: #ef4444;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.category-image-preview {
    display: flex;
    justify-content: center;
}

/* Default Category Icon */
.category-default-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 32px;
    border: 2px solid #e5e7eb;
    transition: all 0.2s ease;
}

/* Image Preview Styling */
.category-preview-img {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid #e5e7eb;
    display: none;
}

/* Show preview image when loaded */
.category-preview-img.loaded {
    display: block;
}

/* Form Actions */
.category-form-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

/* Responsive Design - Following Your Preferred Pattern */
@media (max-width: 768px) {
    .category-form-section {
        padding: 16px;
    }

    .card-body-modern {
        padding: 20px;
    }

    .category-form-actions {
        flex-direction: column;
    }

    .category-form-actions .btn-modern {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .category-form-input,
    .category-form-select {
        padding: 10px 14px;
        font-size: 0.9rem;
    }

    .category-section-header h4 {
        font-size: 1rem;
    }
}

/* Edit Category Page - Complete CSS */

.category-edit-form-badge {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Breadcrumb */
.category-edit-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.category-edit-breadcrumb-link {
    color: #667eea;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.category-edit-breadcrumb-link:hover {
    color: #5600ff;
}

.category-edit-breadcrumb i.fa-chevron-right {
    color: #9ca3af;
    font-size: 12px;
}

.category-edit-breadcrumb-current {
    color: #6b7280;
}

/* Form Sections */
.category-edit-form-section {
    margin-bottom: 40px;
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e5e7eb;
}

.category-edit-section-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.category-edit-section-header h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #374151;
    margin: 0 0 8px 0;
    font-size: 1.1rem;
}

/* Form Grid */
.category-edit-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.category-edit-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Form Labels */
.category-edit-form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.category-edit-form-label i {
    color: #667eea;
    width: 16px;
}

/* Form Inputs */
.category-edit-form-input,
.category-edit-form-select {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: white;
    color: #374151;
}

.category-edit-form-input:focus,
.category-edit-form-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.category-edit-form-input.is-invalid,
.category-edit-form-select.is-invalid {
    border-color: #ef4444;
    background: #fef2f2;
}

.category-edit-form-input.is-invalid:focus,
.category-edit-form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Error Messages */
.category-edit-error-message {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ef4444;
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 4px;
}

/* File Upload Section */
.category-edit-file-upload {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.category-edit-file-input {
    padding: 12px 16px;
    border: 2px dashed #e5e7eb;
    border-radius: 12px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    background: #f9fafb;
    color: #374151;
}

.category-edit-file-input:focus {
    outline: none;
    border-color: #667eea;
    background: white;
}

.category-edit-file-info {
    margin-top: 4px;
}

.category-edit-file-note {
    color: #ef4444;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.category-edit-image-preview {
    display: flex;
    justify-content: center;
}

.category-edit-preview-img {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid #e5e7eb;
    background: #f9fafb;
}

/* Form Actions */
.category-edit-form-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

/* Responsive Design - Following Your Preferred Pattern */
@media (max-width: 768px) {
    .category-edit-form-section {
        padding: 16px;
    }

    .card-body-modern {
        padding: 20px;
    }

    .category-edit-form-actions {
        flex-direction: column;
    }

    .category-edit-form-actions .btn-modern {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .category-edit-form-input,
    .category-edit-form-select {
        padding: 10px 14px;
        font-size: 0.9rem;
    }

    .category-edit-section-header h4 {
        font-size: 1rem;
    }
}

/* Category List Page - Complete CSS */

/* Header Stats */
.categories-header-stats {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Table Section */
.categories-table-section {
    background: white;
    border-radius: 16px;
    overflow: hidden;
}

.categories-table-wrapper {
    overflow-x: auto;
}

.categories-table-modern {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.categories-table-modern thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.categories-table-modern th {
    padding: 16px 20px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.categories-table-modern th i {
    margin-right: 8px;
}

.categories-table-modern td {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    text-align: center;
}

.categories-table-row {
    transition: all 0.2s ease;
}

.categories-table-row:hover {
    background: #f8fafc;
}

.categories-table-id-col {
    width: 60px;
}

.categories-table-actions-col {
    width: 120px;
}

.categories-table-id {
    font-weight: 600;
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

/* Category Image */
.categories-image-container {
    display: flex;
    justify-content: center;
}

.categories-image {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid #e5e7eb;
    transition: all 0.2s ease;
}

.categories-image:hover {
    transform: scale(1.1);
    border-color: #667eea;
}

/* Category Name Info */
.categories-name-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.categories-name-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.categories-name {
    font-weight: 500;
    color: #374151;
}

/* Front Display Badges */
.categories-front-badge {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.categories-front-badge i {
    font-size: 8px;
}

.categories-front-yes {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.categories-front-no {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* Action Buttons */
.categories-action-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.categories-btn-action {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
}

.categories-btn-edit {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.categories-btn-edit:hover {
    background: #3b82f6;
    color: white;
    transform: translateY(-1px);
}

.categories-btn-delete {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.categories-btn-delete:hover {
    background: #ef4444;
    color: white;
    transform: translateY(-1px);
}

/* Empty State */
.categories-empty-state {
    text-align: center;
    padding: 60px 20px;
}

.categories-empty-content {
    color: #9ca3af;
}

.categories-empty-content i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.categories-empty-content h4 {
    margin: 0 0 8px 0;
    color: #6b7280;
}

.categories-empty-content p {
    margin: 0 0 20px 0;
    font-size: 0.9rem;
}

/* Responsive Design - Following Your Preferred Pattern */
@media (max-width: 768px) {
    .categories-header-stats {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    /* Keep natural table behavior - don't force single column */

    .card-body-modern {
        padding: 20px;
    }

    .categories-table-modern th,
    .categories-table-modern td {
        padding: 12px 16px;
    }

    .categories-name-info {
        flex-direction: column;
        gap: 6px;
    }

    .categories-action-buttons {
        flex-direction: column;
        gap: 6px;
    }

    .categories-image {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    .categories-table-modern th,
    .categories-table-modern td {
        padding: 10px 12px;
        font-size: 0.8rem;
    }

    .categories-image {
        width: 40px;
        height: 40px;
    }
}

/* Customer Reviews Page - Complete CSS */

/* Header Stats */
.reviews-header-stats {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Table Section */
.reviews-table-section {
    background: white;
    border-radius: 16px;
    overflow: hidden;
}

.reviews-table-wrapper {
    overflow-x: auto;
}

.reviews-table-modern {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.reviews-table-modern thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.reviews-table-modern th {
    padding: 16px 20px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.reviews-table-modern th i {
    margin-right: 8px;
}

.reviews-table-modern td {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    text-align: center;
}

.reviews-table-row {
    transition: all 0.2s ease;
}

.reviews-table-row:hover {
    background: #f8fafc;
}

.reviews-table-id-col {
    width: 60px;
}

.reviews-table-actions-col {
    width: 120px;
}

.reviews-table-id {
    font-weight: 600;
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

/* User Info */
.reviews-user-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.reviews-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.reviews-user-name {
    font-weight: 500;
    color: #374151;
}

/* Contact */
.reviews-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #6b7280;
    font-size: 0.85rem;
}

.reviews-contact i {
    color: #10b981;
}

/* Rating Stars */
.reviews-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.reviews-star-filled {
    color: #fbbf24;
}

.reviews-star-empty {
    color: #d1d5db;
}

.reviews-rating-text {
    margin-left: 8px;
    color: #6b7280;
    font-size: 0.85rem;
}

/* Date */
.reviews-date {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #6b7280;
    font-size: 0.85rem;
}

.reviews-date i {
    color: #8b5cf6;
}

/* Status Select */
.reviews-status-select {
    padding: 6px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.85rem;
    background: white;
    color: #374151;
    transition: all 0.2s ease;
}

.reviews-status-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.reviews-status-select option[value="pending"] {
    color: #d97706;
}

.reviews-status-select option[value="accepted"] {
    color: #16a34a;
}

.reviews-status-select option[value="rejected"] {
    color: #dc2626;
}

/* Action Buttons */
.reviews-action-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.reviews-btn-action {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
}

.reviews-btn-view {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.reviews-btn-view:hover {
    background: #3b82f6;
    color: white;
    transform: translateY(-1px);
}

.reviews-btn-delete {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.reviews-btn-delete:hover {
    background: #ef4444;
    color: white;
    transform: translateY(-1px);
}

/* Empty State */
.reviews-empty-state {
    text-align: center;
    padding: 60px 20px;
}

.reviews-empty-content {
    color: #9ca3af;
}

.reviews-empty-content i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.reviews-empty-content h4 {
    margin: 0 0 8px 0;
    color: #6b7280;
}

.reviews-empty-content p {
    margin: 0;
    font-size: 0.9rem;
}

/* Modal Styles */
.reviews-modal .modal-content {
    border-radius: 16px;
    border: none;
}

.reviews-modal .modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 16px 16px 0 0;
    padding: 20px 24px;
}

.reviews-modal .modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.reviews-modal .modal-body {
    padding: 24px;
}

.reviews-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.reviews-modal-item {
    background: #f8fafc;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.reviews-modal-full {
    grid-column: 1 / -1;
}

.reviews-modal-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.reviews-modal-label i {
    color: #667eea;
    width: 16px;
}

.reviews-modal-value {
    color: #6b7280;
    font-size: 0.95rem;
    line-height: 1.5;
    word-break: break-word;
}

.reviews-modal-message {
    color: #6b7280;
    font-size: 0.95rem;
    line-height: 1.6;
    background: white;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    max-height: 200px;
    overflow-y: auto;
}

.reviews-modal .modal-footer {
    padding: 20px 24px;
    border-top: 1px solid #e5e7eb;
    justify-content: center;
}

/* Responsive Design - Following Your Preferred Pattern */
@media (max-width: 768px) {
    /* Keep natural table behavior - don't force single column */

    .card-body-modern {
        padding: 20px;
    }

    .reviews-table-modern th,
    .reviews-table-modern td {
        padding: 12px 16px;
    }

    .reviews-user-info {
        flex-direction: column;
        gap: 6px;
    }

    .reviews-action-buttons {
        flex-direction: column;
        gap: 6px;
    }

    .reviews-modal .modal-body {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .reviews-table-modern th,
    .reviews-table-modern td {
        padding: 10px 12px;
        font-size: 0.8rem;
    }

    .reviews-modal .modal-body {
        padding: 16px;
    }

    .reviews-modal-item {
        padding: 12px;
    }
}

/* Add Vendor Service Page - Complete CSS */

.vendor-service-form-badge {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Form Sections */
.vendor-service-form-section {
    margin-bottom: 40px;
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e5e7eb;
}

.vendor-service-section-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.vendor-service-section-header h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #374151;
    margin: 0 0 8px 0;
    font-size: 1.1rem;
}

/* Form Grid */
.vendor-service-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.vendor-service-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vendor-service-form-full {
    grid-column: 1 / -1;
}

/* Form Labels */
.vendor-service-form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.vendor-service-form-label i {
    color: #667eea;
    width: 16px;
}

/* Form Inputs */
.vendor-service-form-input,
.vendor-service-form-select,
.vendor-service-form-textarea {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: white;
    color: #374151;
}

.vendor-service-form-input:focus,
.vendor-service-form-select:focus,
.vendor-service-form-textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.vendor-service-form-input.is-invalid,
.vendor-service-form-select.is-invalid,
.vendor-service-form-textarea.is-invalid {
    border-color: #ef4444;
    background: #fef2f2;
}

.vendor-service-form-input.is-invalid:focus,
.vendor-service-form-select.is-invalid:focus,
.vendor-service-form-textarea.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Error Messages */
.vendor-service-error-message {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ef4444;
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 4px;
}

/* File Upload Section */
.vendor-service-file-upload {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vendor-service-file-input {
    padding: 12px 16px;
    border: 2px dashed #e5e7eb;
    border-radius: 12px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    background: #f9fafb;
    color: #374151;
}

.vendor-service-file-input:focus {
    outline: none;
    border-color: #667eea;
    background: white;
}

.vendor-service-file-info {
    margin-top: 4px;
}

.vendor-service-file-note {
    color: #ef4444;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.vendor-service-image-preview {
    display: flex;
    justify-content: center;
}

/* Default Service Icon */
.vendor-service-default-icon {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 48px;
    border: 2px solid #e5e7eb;
    transition: all 0.2s ease;
}

/* Image Preview Styling */
.vendor-service-preview-img {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid #e5e7eb;
    display: none;
}

/* Show preview image when loaded */
.vendor-service-preview-img.loaded {
    display: block;
}

/* Service Names Section */
.vendor-service-names-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vendor-service-name-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vendor-service-name-input-group {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: start;
}

.vendor-service-additional-names {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vendor-service-additional-name-group {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: start;
}

/* Form Actions */
.vendor-service-form-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

/* Responsive Design - Following Your Preferred Pattern */
@media (max-width: 768px) {
    .vendor-service-form-section {
        padding: 16px;
    }

    .card-body-modern {
        padding: 20px;
    }

    .vendor-service-name-input-group,
    .vendor-service-additional-name-group {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .vendor-service-form-actions {
        flex-direction: column;
    }

    .vendor-service-form-actions .btn-modern {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .vendor-service-form-input,
    .vendor-service-form-select,
    .vendor-service-form-textarea {
        padding: 10px 14px;
        font-size: 0.9rem;
    }

    .vendor-service-section-header h4 {
        font-size: 1rem;
    }
}

/* Edit Vendor Service Page - Complete CSS */

.vendor-service-edit-form-badge {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Breadcrumb */
.vendor-service-edit-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.vendor-service-edit-breadcrumb-link {
    color: #667eea;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.vendor-service-edit-breadcrumb-link:hover {
    color: #5600ff;
}

.vendor-service-edit-breadcrumb i.fa-chevron-right {
    color: #9ca3af;
    font-size: 12px;
}

.vendor-service-edit-breadcrumb-current {
    color: #6b7280;
}

/* Form Sections */
.vendor-service-edit-form-section {
    margin-bottom: 40px;
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e5e7eb;
}

.vendor-service-edit-section-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.vendor-service-edit-section-header h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #374151;
    margin: 0 0 8px 0;
    font-size: 1.1rem;
}

/* Form Grid */
.vendor-service-edit-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.vendor-service-edit-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vendor-service-edit-form-full {
    grid-column: 1 / -1;
}

/* Form Labels */
.vendor-service-edit-form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.vendor-service-edit-form-label i {
    color: #667eea;
    width: 16px;
}

/* Form Inputs */
.vendor-service-edit-form-input,
.vendor-service-edit-form-select,
.vendor-service-edit-form-textarea {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: white;
    color: #374151;
}

.vendor-service-edit-form-input:focus,
.vendor-service-edit-form-select:focus,
.vendor-service-edit-form-textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.vendor-service-edit-form-input.is-invalid,
.vendor-service-edit-form-select.is-invalid,
.vendor-service-edit-form-textarea.is-invalid {
    border-color: #ef4444;
    background: #fef2f2;
}

.vendor-service-edit-form-input.is-invalid:focus,
.vendor-service-edit-form-select.is-invalid:focus,
.vendor-service-edit-form-textarea.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Error Messages */
.vendor-service-edit-error-message {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ef4444;
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 4px;
}

/* File Upload Section */
.vendor-service-edit-file-upload {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vendor-service-edit-file-input {
    padding: 12px 16px;
    border: 2px dashed #e5e7eb;
    border-radius: 12px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    background: #f9fafb;
    color: #374151;
}

.vendor-service-edit-file-input:focus {
    outline: none;
    border-color: #667eea;
    background: white;
}

.vendor-service-edit-file-info {
    margin-top: 4px;
}

.vendor-service-edit-file-note {
    color: #ef4444;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.vendor-service-edit-image-preview {
    display: flex;
    justify-content: center;
}

.vendor-service-edit-preview-img {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid #e5e7eb;
    background: #f9fafb;
}

/* Service Names Section */
.vendor-service-edit-names-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vendor-service-edit-name-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vendor-service-edit-name-input-group {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: start;
}

.vendor-service-edit-additional-names {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vendor-service-edit-additional-name-group {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: start;
}

/* Form Actions */
.vendor-service-edit-form-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

/* Responsive Design - Following Your Preferred Pattern */
@media (max-width: 768px) {
    .vendor-service-edit-form-section {
        padding: 16px;
    }

    .card-body-modern {
        padding: 20px;
    }

    .vendor-service-edit-name-input-group,
    .vendor-service-edit-additional-name-group {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .vendor-service-edit-form-actions {
        flex-direction: column;
    }

    .vendor-service-edit-form-actions .btn-modern {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .vendor-service-edit-form-input,
    .vendor-service-edit-form-select,
    .vendor-service-edit-form-textarea {
        padding: 10px 14px;
        font-size: 0.9rem;
    }

    .vendor-service-edit-section-header h4 {
        font-size: 1rem;
    }
}

/* Vendor Services List Page - Complete CSS */

/* Header Stats */
.vendor-services-header-stats {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Filters Section */
.vendor-services-filters-section {
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
    border: 1px solid #e5e7eb;
}

.vendor-services-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    align-items: end;
}

.vendor-services-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vendor-services-filter-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.vendor-services-form-input,
.vendor-services-form-select {
    padding: 10px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    background: white;
    color: #374151;
}

.vendor-services-form-input:focus,
.vendor-services-form-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.vendor-services-filter-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Table Section */
.vendor-services-table-section {
    background: white;
    border-radius: 16px;
    overflow: hidden;
}

.vendor-services-table-wrapper {
    overflow-x: auto;
}

.vendor-services-table-modern {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.vendor-services-table-modern thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.vendor-services-table-modern th {
    padding: 16px 20px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.vendor-services-table-modern th i {
    margin-right: 8px;
}

.vendor-services-table-modern td {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    text-align: center;
}

.vendor-services-table-row {
    transition: all 0.2s ease;
}

.vendor-services-table-row:hover {
    background: #f8fafc;
}

.vendor-services-table-id-col {
    width: 60px;
}

.vendor-services-table-actions-col {
    width: 120px;
}

.vendor-services-table-id {
    font-weight: 600;
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

/* Service Image */
.vendor-services-image-container {
    display: flex;
    justify-content: center;
}

.vendor-services-image {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid #e5e7eb;
    transition: all 0.2s ease;
}

.vendor-services-image:hover {
    transform: scale(1.1);
    border-color: #667eea;
}

/* Vendor Info */
.vendor-services-vendor-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.vendor-services-vendor-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.vendor-services-vendor-name {
    font-weight: 500;
    color: #374151;
}

/* Category */
.vendor-services-category {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #6b7280;
    font-size: 0.85rem;
}

.vendor-services-category i {
    color: #8b5cf6;
}

/* Service Name */
.vendor-services-service-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #374151;
    font-weight: 500;
    font-size: 0.9rem;
}

.vendor-services-service-name i {
    color: #667eea;
}

/* Price */
.vendor-services-price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #059669;
    font-size: 0.9rem;
    font-weight: 600;
}

.vendor-services-price i {
    color: #10b981;
}

/* Time */
.vendor-services-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #6b7280;
    font-size: 0.85rem;
}

.vendor-services-time i {
    color: #f59e0b;
}

/* Date Info */
.vendor-services-date-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.vendor-services-date,
.vendor-services-time-stamp {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: #6b7280;
}

.vendor-services-date {
    font-weight: 500;
    color: #374151;
}

/* Action Buttons */
.vendor-services-action-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.vendor-services-btn-action {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
}

.vendor-services-btn-edit {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.vendor-services-btn-edit:hover {
    background: #3b82f6;
    color: white;
    transform: translateY(-1px);
}

.vendor-services-btn-delete {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.vendor-services-btn-delete:hover {
    background: #ef4444;
    color: white;
    transform: translateY(-1px);
}

/* Empty State */
.vendor-services-empty-state {
    text-align: center;
    padding: 60px 20px;
}

.vendor-services-empty-content {
    color: #9ca3af;
}

.vendor-services-empty-content .empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.vendor-services-empty-content h4 {
    margin: 0 0 8px 0;
    color: #6b7280;
}

.vendor-services-empty-content p {
    margin: 0 0 20px 0;
    font-size: 0.9rem;
}

/* Responsive Design - Following Your Preferred Pattern */
@media (max-width: 1200px) {
    .vendor-services-filters-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 768px) {
    .vendor-services-header-stats {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    /* Keep natural table behavior - don't force single column */

    .card-body-modern {
        padding: 20px;
    }

    .vendor-services-filters-section {
        padding: 16px;
    }

    .vendor-services-filter-actions {
        flex-direction: column;
    }

    .vendor-services-filter-actions .btn-modern {
        width: 100%;
        justify-content: center;
    }

    .vendor-services-table-modern th,
    .vendor-services-table-modern td {
        padding: 12px 16px;
    }

    .vendor-services-vendor-info {
        flex-direction: column;
        gap: 6px;
    }

    .vendor-services-action-buttons {
        flex-direction: column;
        gap: 6px;
    }

    .vendor-services-image {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    .vendor-services-table-modern th,
    .vendor-services-table-modern td {
        padding: 10px 12px;
        font-size: 0.8rem;
    }

    .vendor-services-image {
        width: 40px;
        height: 40px;
    }
}

/* Vendor Deals List Page - Complete CSS */

/* Header Stats */
.vendor-deals-header-stats {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Table Section */
.vendor-deals-table-section {
    background: white;
    border-radius: 16px;
    overflow: hidden;
}

.vendor-deals-table-wrapper {
    overflow-x: auto;
}

.vendor-deals-table-modern {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.vendor-deals-table-modern thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.vendor-deals-table-modern th {
    padding: 16px 20px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.vendor-deals-table-modern th i {
    margin-right: 8px;
}

.vendor-deals-table-modern td {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    text-align: center;
}

.vendor-deals-table-row {
    transition: all 0.2s ease;
}

.vendor-deals-table-row:hover {
    background: #f8fafc;
}

.vendor-deals-table-id-col {
    width: 60px;
}

.vendor-deals-table-actions-col {
    width: 80px;
}

.vendor-deals-table-id {
    font-weight: 600;
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

/* Vendor Info */
.vendor-deals-vendor-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.vendor-deals-vendor-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.vendor-deals-vendor-name {
    font-weight: 500;
    color: #374151;
}

/* Deal Image */
.vendor-deals-image-container {
    display: flex;
    justify-content: center;
}

.vendor-deals-image {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid #e5e7eb;
    transition: all 0.2s ease;
}

.vendor-deals-image:hover {
    transform: scale(1.1);
    border-color: #667eea;
}

/* Title */
.vendor-deals-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #374151;
    font-weight: 500;
    font-size: 0.9rem;
}

.vendor-deals-title i {
    color: #ec4899;
}

/* Duration */
.vendor-deals-duration {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #6b7280;
    font-size: 0.85rem;
}

.vendor-deals-duration i {
    color: #f59e0b;
}

/* Capacity */
.vendor-deals-capacity {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #6b7280;
    font-size: 0.85rem;
}

.vendor-deals-capacity i {
    color: #6366f1;
}

/* Booking Notice */
.vendor-deals-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #6b7280;
    font-size: 0.85rem;
}

.vendor-deals-notice i {
    color: #8b5cf6;
}

/* Price */
.vendor-deals-price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #059669;
    font-size: 0.9rem;
    font-weight: 600;
}

.vendor-deals-price i {
    color: #10b981;
}

/* Front Display Badges */
.vendor-deals-front-badge {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.vendor-deals-front-badge i {
    font-size: 8px;
}

.vendor-deals-front-yes {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.vendor-deals-front-no {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* Action Buttons */
.vendor-deals-action-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.vendor-deals-btn-action {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
}

.vendor-deals-btn-edit {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.vendor-deals-btn-edit:hover {
    background: #3b82f6;
    color: white;
    transform: translateY(-1px);
}

/* Empty State */
.vendor-deals-empty-state {
    text-align: center;
    padding: 60px 20px;
}

.vendor-deals-empty-content {
    color: #9ca3af;
}

.vendor-deals-empty-content i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.vendor-deals-empty-content h4 {
    margin: 0 0 8px 0;
    color: #6b7280;
}

.vendor-deals-empty-content p {
    margin: 0 0 20px 0;
    font-size: 0.9rem;
}

/* Responsive Design - Following Your Preferred Pattern */
@media (max-width: 768px) {
    .vendor-deals-header-stats {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    /* Keep natural table behavior - don't force single column */

    .card-body-modern {
        padding: 20px;
    }

    .vendor-deals-table-modern th,
    .vendor-deals-table-modern td {
        padding: 12px 16px;
    }

    .vendor-deals-vendor-info {
        flex-direction: column;
        gap: 6px;
    }

    .vendor-deals-image {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    .vendor-deals-table-modern th,
    .vendor-deals-table-modern td {
        padding: 10px 12px;
        font-size: 0.8rem;
    }

    .vendor-deals-image {
        width: 40px;
        height: 40px;
    }
}

/* Add Vendor Category Page - Complete CSS */

.vendor-category-form-badge {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Form Sections */
.vendor-category-form-section {
    margin-bottom: 40px;
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e5e7eb;
}

.vendor-category-section-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.vendor-category-section-header h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #374151;
    margin: 0 0 8px 0;
    font-size: 1.1rem;
}

/* Form Grid */
.vendor-category-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.vendor-category-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Form Labels */
.vendor-category-form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.vendor-category-form-label i {
    color: #667eea;
    width: 16px;
}

/* Form Inputs */
.vendor-category-form-input {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: white;
    color: #374151;
}

.vendor-category-form-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.vendor-category-form-input.is-invalid {
    border-color: #ef4444;
    background: #fef2f2;
}

.vendor-category-form-input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Error Messages */
.vendor-category-error-message {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ef4444;
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 4px;
}

/* Form Actions */
.vendor-category-form-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

/* Responsive Design - Following Your Preferred Pattern */
@media (max-width: 768px) {
    .vendor-category-form-section {
        padding: 16px;
    }

    .card-body-modern {
        padding: 20px;
    }

    .vendor-category-form-actions {
        flex-direction: column;
    }

    .vendor-category-form-actions .btn-modern {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .vendor-category-form-input {
        padding: 10px 14px;
        font-size: 0.9rem;
    }

    .vendor-category-section-header h4 {
        font-size: 1rem;
    }
}

/* Vendor Category List Page - Complete CSS */

/* Header Stats */
.vendor-categories-header-stats {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Table Section */
.vendor-categories-table-section {
    background: white;
    border-radius: 16px;
    overflow: hidden;
}

.vendor-categories-table-wrapper {
    overflow-x: auto;
}

.vendor-categories-table-modern {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.vendor-categories-table-modern thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.vendor-categories-table-modern th {
    padding: 16px 20px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.vendor-categories-table-modern th i {
    margin-right: 8px;
}

.vendor-categories-table-modern td {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    text-align: center;
}

.vendor-categories-table-row {
    transition: all 0.2s ease;
}

.vendor-categories-table-row:hover {
    background: #f8fafc;
}

.vendor-categories-table-id-col {
    width: 60px;
}

.vendor-categories-table-actions-col {
    width: 140px;
}

.vendor-categories-table-id {
    font-weight: 600;
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

/* Category Name Info */
.vendor-categories-name-info {
    display: flex;
    align-items: center;
    /* justify-content: center; */
    gap: 10px;
}

.vendor-categories-name-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.vendor-categories-name {
    font-weight: 500;
    color: #374151;
}

/* Category Order */
.vendor-categories-order {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 600;
}

.vendor-categories-order i {
    color: #f59e0b;
}

/* Vendor Count */
.vendor-categories-count {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #059669;
    font-size: 0.9rem;
    font-weight: 600;
}

.vendor-categories-count i {
    color: #10b981;
}

/* Action Buttons */
.vendor-categories-action-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.vendor-categories-btn-action {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
}

.vendor-categories-btn-assign {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.vendor-categories-btn-assign:hover {
    background: #16a34a;
    color: white;
    transform: translateY(-1px);
}

.vendor-categories-btn-edit {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.vendor-categories-btn-edit:hover {
    background: #d97706;
    color: white;
    transform: translateY(-1px);
}

.vendor-categories-btn-delete {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.vendor-categories-btn-delete:hover {
    background: #ef4444;
    color: white;
    transform: translateY(-1px);
}

/* Empty State */
.vendor-categories-empty-state {
    text-align: center;
    padding: 60px 20px;
}

.vendor-categories-empty-content {
    color: #9ca3af;
}

.vendor-categories-empty-content i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.vendor-categories-empty-content h4 {
    margin: 0 0 8px 0;
    color: #6b7280;
}

.vendor-categories-empty-content p {
    margin: 0;
    font-size: 0.9rem;
}

/* Responsive Design - Following Your Preferred Pattern */
@media (max-width: 768px) {
    .card-body-modern {
        padding: 20px;
    }

    .vendor-categories-table-modern th,
    .vendor-categories-table-modern td {
        padding: 12px 16px;
    }

    .vendor-categories-name-info {
        flex-direction: column;
        gap: 6px;
    }

    .vendor-categories-action-buttons {
        flex-direction: column;
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .vendor-categories-table-modern th,
    .vendor-categories-table-modern td {
        padding: 10px 12px;
        font-size: 0.8rem;
    }
}

/* Vendor Category Assignment Page - Complete CSS */

.vendor-assign-form-badge,
.vendor-assigned-header-stats {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Breadcrumb */
.vendor-assign-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.vendor-assign-breadcrumb-link {
    color: #667eea;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.vendor-assign-breadcrumb-link:hover {
    color: #5600ff;
}

.vendor-assign-breadcrumb i.fa-chevron-right {
    color: #9ca3af;
    font-size: 12px;
}

.vendor-assign-breadcrumb-current {
    color: #6b7280;
}

/* Assignment Form Sections */
.vendor-assign-form-section {
    margin-bottom: 40px;
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e5e7eb;
}

.vendor-assign-section-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.vendor-assign-section-header h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #374151;
    margin: 0 0 8px 0;
    font-size: 1.1rem;
}

/* Form Grid */
.vendor-assign-form-grid {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    gap: 24px;
    align-items: end;
}

.vendor-assign-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Form Labels */
.vendor-assign-form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.vendor-assign-form-label i {
    color: #667eea;
    width: 16px;
}

/* Form Inputs */
.vendor-assign-form-input,
.vendor-assign-form-select {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: white;
    color: #374151;
}

.vendor-assign-form-input:focus,
.vendor-assign-form-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.vendor-assign-form-input[readonly] {
    background: #f9fafb;
    cursor: not-allowed;
}

/* Table Section */
.vendor-assigned-table-section {
    background: white;
    border-radius: 16px;
    overflow: hidden;
}

.vendor-assigned-table-wrapper {
    overflow-x: auto;
}

.vendor-assigned-table-modern {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.vendor-assigned-table-modern thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.vendor-assigned-table-modern th {
    padding: 16px 20px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.vendor-assigned-table-modern th i {
    margin-right: 8px;
}

.vendor-assigned-table-modern td {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    text-align: center;
}

.vendor-assigned-table-row {
    transition: all 0.2s ease;
}

.vendor-assigned-table-row:hover {
    background: #f8fafc;
}

.vendor-assigned-table-id-col {
    width: 60px;
}

.vendor-assigned-table-actions-col {
    width: 80px;
}

.vendor-assigned-table-id {
    font-weight: 600;
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

/* Vendor Info */
.vendor-assigned-vendor-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.vendor-assigned-vendor-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.vendor-assigned-vendor-name {
    font-weight: 500;
    color: #374151;
}

/* Order Input */
.vendor-assigned-order-container {
    display: flex;
    justify-content: center;
}

.vendor-assigned-order-input {
    width: 80px;
    padding: 8px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9rem;
    text-align: center;
    transition: all 0.2s ease;
}

.vendor-assigned-order-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Date Info */
.vendor-assigned-date-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.vendor-assigned-date,
.vendor-assigned-time {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: #6b7280;
}

.vendor-assigned-date {
    font-weight: 500;
    color: #374151;
}

/* Action Buttons */
.vendor-assigned-action-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.vendor-assigned-btn-action {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
}

.vendor-assigned-btn-delete {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.vendor-assigned-btn-delete:hover {
    background: #ef4444;
    color: white;
    transform: translateY(-1px);
}

/* Empty State */
.vendor-assigned-empty-state {
    text-align: center;
    padding: 60px 20px;
}

.vendor-assigned-empty-content {
    color: #9ca3af;
}

.vendor-assigned-empty-content i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.vendor-assigned-empty-content h4 {
    margin: 0 0 8px 0;
    color: #6b7280;
}

.vendor-assigned-empty-content p {
    margin: 0;
    font-size: 0.9rem;
}

/* Responsive Design - Following Your Preferred Pattern */
@media (max-width: 768px) {
    .vendor-assign-form-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .vendor-assign-form-actions .btn-modern {
        width: 100%;
        justify-content: center;
    }

    .card-body-modern {
        padding: 20px;
    }

    .vendor-assign-form-section {
        padding: 16px;
    }

    .vendor-assigned-table-modern th,
    .vendor-assigned-table-modern td {
        padding: 12px 16px;
    }

    .vendor-assigned-vendor-info {
        flex-direction: column;
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .vendor-assigned-table-modern th,
    .vendor-assigned-table-modern td {
        padding: 10px 12px;
        font-size: 0.8rem;
    }

    .vendor-assigned-order-input {
        width: 60px;
    }
}

/* Edit Vendor Category Page - Complete CSS */

.vendor-category-edit-form-badge {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Breadcrumb */
.vendor-category-edit-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.vendor-category-edit-breadcrumb-link {
    color: #667eea;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.vendor-category-edit-breadcrumb-link:hover {
    color: #5600ff;
}

.vendor-category-edit-breadcrumb i.fa-chevron-right {
    color: #9ca3af;
    font-size: 12px;
}

.vendor-category-edit-breadcrumb-current {
    color: #6b7280;
}

/* Form Sections */
.vendor-category-edit-form-section {
    margin-bottom: 40px;
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e5e7eb;
}

.vendor-category-edit-section-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.vendor-category-edit-section-header h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #374151;
    margin: 0 0 8px 0;
    font-size: 1.1rem;
}

/* Form Grid */
.vendor-category-edit-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.vendor-category-edit-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Form Labels */
.vendor-category-edit-form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.vendor-category-edit-form-label i {
    color: #667eea;
    width: 16px;
}

/* Form Inputs */
.vendor-category-edit-form-input {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: white;
    color: #374151;
}

.vendor-category-edit-form-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.vendor-category-edit-form-input.is-invalid {
    border-color: #ef4444;
    background: #fef2f2;
}

.vendor-category-edit-form-input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Error Messages */
.vendor-category-edit-error-message {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ef4444;
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 4px;
}

/* Form Actions */
.vendor-category-edit-form-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

/* Responsive Design - Following Your Preferred Pattern */
@media (max-width: 768px) {
    /* Keep natural grid behavior - don't force single column */
    /* .vendor-category-edit-form-grid {
        grid-template-columns: 1fr;
    } */

    .vendor-category-edit-form-section {
        padding: 16px;
    }

    .card-body-modern {
        padding: 20px;
    }

    .vendor-category-edit-form-actions {
        flex-direction: column;
    }

    .vendor-category-edit-form-actions .btn-modern {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .vendor-category-edit-form-input {
        padding: 10px 14px;
        font-size: 0.9rem;
    }

    .vendor-category-edit-section-header h4 {
        font-size: 1rem;
    }
}

/* Banner Management Page - Complete CSS */

.banner-form-badge,
.banner-list-header-stats {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Form Sections */
.banner-form-section {
    margin-bottom: 40px;
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e5e7eb;
}

.banner-section-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.banner-section-header h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #374151;
    margin: 0 0 8px 0;
    font-size: 1.1rem;
}

/* Form Grid */
.banner-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 24px;
    align-items: start;
}

.banner-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Form Labels */
.banner-form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.banner-form-label i {
    color: #667eea;
    width: 16px;
}

/* Form Inputs */
.banner-form-input {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: white;
    color: #374151;
}

.banner-form-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* File Input */
.banner-file-input {
    padding: 12px 16px;
    border: 2px dashed #e5e7eb;
    border-radius: 12px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    background: #f9fafb;
    color: #374151;
}

.banner-file-input:focus {
    outline: none;
    border-color: #667eea;
    background: white;
}

.banner-file-info {
    margin-top: 4px;
}

.banner-file-note {
    color: #ef4444;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Image Preview */
.banner-image-preview {
    display: flex;
    justify-content: center;
}

.banner-preview-img {
    width: 120px;
    height: 80px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid #e5e7eb;
    background: #f9fafb;
}

/* Form Actions */
.banner-form-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

/* Table Section */
.banner-list-table-section {
    background: white;
    border-radius: 16px;
    overflow: hidden;
}

.banner-list-table-wrapper {
    overflow-x: auto;
}

.banner-list-table-modern {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.banner-list-table-modern thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.banner-list-table-modern th {
    padding: 16px 20px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.banner-list-table-modern th i {
    margin-right: 8px;
}

.banner-list-table-modern td {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    text-align: center;
}

.banner-list-table-row {
    transition: all 0.2s ease;
}

.banner-list-table-row:hover {
    background: #f8fafc;
}

.banner-list-table-id-col {
    width: 60px;
}

.banner-list-table-actions-col {
    width: 120px;
}

.banner-list-table-id {
    font-weight: 600;
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

/* Banner Title Info */
.banner-list-title-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.banner-list-title-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.banner-list-title {
    font-weight: 500;
    color: #374151;
}

/* Banner Image */
.banner-list-image-container {
    display: flex;
    justify-content: center;
}

.banner-list-image {
    width: 100px;
    height: 60px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid #e5e7eb;
    transition: all 0.2s ease;
}

.banner-list-image:hover {
    transform: scale(1.05);
    border-color: #667eea;
}

/* Action Buttons */
.banner-list-action-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.banner-list-btn-action {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
}

.banner-list-btn-edit {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.banner-list-btn-edit:hover {
    background: #3b82f6;
    color: white;
    transform: translateY(-1px);
}

.banner-list-btn-delete {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.banner-list-btn-delete:hover {
    background: #ef4444;
    color: white;
    transform: translateY(-1px);
}

/* Empty State */
.banner-list-empty-state {
    text-align: center;
    padding: 60px 20px;
}

.banner-list-empty-content {
    color: #9ca3af;
}

.banner-list-empty-content i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.banner-list-empty-content h4 {
    margin: 0 0 8px 0;
    color: #6b7280;
}

.banner-list-empty-content p {
    margin: 0;
    font-size: 0.9rem;
}

/* Responsive Design - Following Your Preferred Pattern */
@media (max-width: 768px) {
    .banner-form-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .banner-form-actions,
    .banner-list-action-buttons {
        flex-direction: column;
    }

    .banner-form-actions .btn-modern {
        width: 100%;
        justify-content: center;
    }

    .card-body-modern {
        padding: 20px;
    }

    .banner-form-section {
        padding: 16px;
    }

    .banner-list-table-modern th,
    .banner-list-table-modern td {
        padding: 12px 16px;
    }

    .banner-list-title-info {
        flex-direction: column;
        gap: 6px;
    }

    .banner-list-image {
        width: 80px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    .banner-list-table-modern th,
    .banner-list-table-modern td {
        padding: 10px 12px;
        font-size: 0.8rem;
    }

    .banner-list-image {
        width: 60px;
        height: 40px;
    }
}

/* Vendor admin panel work start */

/* Vendor Dashboard Specific Styles */

/* Address Warning Alert */
.vendor-alert-warning {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    position: relative;
    animation: slideDown 0.5s ease-out;
}

.vendor-alert-warning .alert-icon {
    color: #d97706;
    font-size: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

.vendor-alert-warning .alert-content h6 {
    color: #92400e;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.vendor-alert-warning .alert-content p {
    color: #a16207;
    margin: 0;
    line-height: 1.5;
}

.vendor-alert-warning .alert-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: #a16207;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.vendor-alert-warning .alert-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #92400e;
}

/* Dashboard Statistics Grid */
.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.dashboard-stat-card {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.dashboard-stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dashboard-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

.dashboard-stat-card:hover::before {
    opacity: 1;
}

.services-card {
    border-color: #3b82f6;
}

.services-card .stat-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.quotations-card {
    border-color: #10b981;
}

.quotations-card .stat-icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    flex-shrink: 0;
}

.stat-content {
    flex: 1;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1;
}

.stat-label {
    color: #6b7280;
    font-size: 0.9rem;
    margin-top: 4px;
}

.stat-arrow {
    color: #9ca3af;
    font-size: 18px;
    transition: all 0.3s ease;
}

.dashboard-stat-card:hover .stat-arrow {
    color: #667eea;
    transform: translateX(4px);
}

/* QR Code Section */
.vendor-qr-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.qr-code-container {
    background: white;
    padding: 16px;
    border-radius: 16px;
    border: 2px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.vendor-qr-image {
    width: 160px;
    height: 160px;
    border-radius: 8px;
}

.qr-download-btn {
    min-width: 180px;
    justify-content: center;
}

.qr-empty-state {
    padding: 40px 20px;
    color: #9ca3af;
}

.qr-empty-state i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.qr-empty-state h6 {
    margin: 0 0 8px 0;
    color: #6b7280;
}

.qr-empty-state p {
    margin: 0;
    font-size: 0.9rem;
}

/* Calendar Container */
.calendar-container {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e5e7eb;
}

/* Modern Modal Enhancements */
.modern-modal {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.modern-modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom: none;
    padding: 24px;
}

.modal-title-section h5 {
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-subtitle {
    margin: 0;
    opacity: 0.9;
    font-size: 0.9rem;
}

.modern-btn-close {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px;
    opacity: 1;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--whitecolor);
}

.modern-btn-close:hover {
    background: rgba(255, 255, 255, 0.3);
    color: var(--whitecolor);
}

.modern-modal-body {
    padding: 24px;
}

/* Form Grid Variations */
.form-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .dashboard-stats-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .form-grid-2col {
        grid-template-columns: 1fr;
    }

    .vendor-qr-image {
        width: 120px;
        height: 120px;
    }

    .vendor-alert-warning {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .dashboard-stat-card {
        padding: 16px;
    }

    .stat-number {
        font-size: 1.5rem;
    }

    .modern-modal-header,
    .modern-modal-body {
        padding: 16px;
    }
}

/* Event Modal Form Specific Styles */

/* Modal Container */
.modern-modal {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.modern-modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom: none;
    padding: 24px;
    position: relative;
}

.modal-title-section h5 {
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    font-weight: 700;
}

.modal-subtitle {
    margin: 0;
    opacity: 0.9;
    font-size: 0.9rem;
    font-weight: 400;
}

.modern-btn-close {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px;
    opacity: 1;
    transition: all 0.2s ease;
    border: none;
}

.modern-btn-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

/* Modal Body */
.modern-modal-body {
    padding: 32px;
    background: #f8fafc;
}

/* Event Form Sections */
.event-form-section {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid #e5e7eb;
}

.event-form-section:last-of-type {
    margin-bottom: 32px;
}

.event-section-header {
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.event-section-header h6 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #374151;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.event-section-header i {
    color: #667eea;
    width: 16px;
}

/* Form Grid */
.event-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.event-date-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.event-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Form Labels */
.event-form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.event-form-label i {
    color: #667eea;
    width: 16px;
    font-size: 14px;
}

/* Form Inputs */
.event-form-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: white;
    color: #374151;
    font-family: inherit;
}

.event-form-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    background: white;
}

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

.event-form-input.is-invalid {
    border-color: #ef4444;
    background: #fef2f2;
}

/* Date Input Specific */
.event-date-input {
    position: relative;
    color: #374151;
}

.event-date-input::-webkit-calendar-picker-indicator {
    color: #667eea;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.event-date-input::-webkit-calendar-picker-indicator:hover {
    background: rgba(102, 126, 234, 0.1);
}

/* Form Actions */
.event-form-actions {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
    margin-top: 8px;
}

/* Button Styles (using existing classes but enhanced for modal) */
.event-form-actions .btn-modern {
    min-width: 120px;
    padding: 12px 24px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Validation States */
.event-form-input:valid {
    border-color: #10b981;
}

.event-form-input:invalid:not(:focus):not(:placeholder-shown) {
    border-color: #ef4444;
}

/* Error Messages */
.event-error-message {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ef4444;
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 4px;
}

/* Loading State for Form */
.event-form.loading .event-form-input {
    opacity: 0.7;
    pointer-events: none;
}

.event-form.loading .btn-primary-modern {
    opacity: 0.8;
    pointer-events: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 1rem;
    }

    .modern-modal-body {
        padding: 20px;
    }

    .event-form-section {
        padding: 16px;
        margin-bottom: 16px;
    }

    .event-date-grid {
        grid-template-columns: 1fr;
    }

    .event-form-actions {
        flex-direction: column;
    }

    .event-form-actions .btn-modern {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .modern-modal-header {
        padding: 16px;
    }

    .modern-modal-body {
        padding: 16px;
    }

    .event-form-section {
        padding: 12px;
    }

    .modal-title-section h5 {
        font-size: 1.1rem;
    }
}

/* Animation for Modal Appearance */
.modal.fade .modal-dialog {
    transform: translateY(-50px);
    transition: transform 0.3s ease-out;
}

.modal.show .modal-dialog {
    transform: translateY(0);
}

/* Focus Ring for Accessibility */
.event-form-input:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

.btn-modern:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* Document Management Page - Complete CSS */

/* Document Form Section */
.document-form-section {
    margin-bottom: 32px;
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e5e7eb;
}

.document-section-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.document-section-header h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #374151;
    margin: 0;
    font-size: 1.1rem;
}

.document-section-header i {
    color: #667eea;
}

/* Document Form Grid */
.document-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 24px;
    align-items: start;
}

.document-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Form Labels */
.document-form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.document-form-label i {
    color: #667eea;
    width: 16px;
}

/* Form Inputs */
.document-form-input {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: white;
    color: #374151;
}

.document-form-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.document-form-input.is-invalid {
    border-color: #ef4444;
    background: #fef2f2;
}

/* File Upload Area */
.document-upload-container {
    position: relative;
}

.document-file-input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
}

.file-upload-area {
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.file-upload-area:hover {
    border-color: #667eea;
    background: #f8fafc;
}

.file-upload-area.dragover {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.05);
    transform: scale(1.02);
}

.upload-icon {
    font-size: 32px;
    color: #9ca3af;
    margin-bottom: 12px;
}

.file-upload-area:hover .upload-icon {
    color: #667eea;
}

.upload-text h6 {
    margin: 0 0 4px 0;
    color: #374151;
    font-weight: 600;
}

.upload-text p {
    margin: 0;
    color: #6b7280;
    font-size: 0.85rem;
}

/* Document Preview */
.document-preview-container {
    min-height: 120px;
}

.preview-area {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: white;
}

.document-preview-image {
    max-width: 100px;
    max-height: 100px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #e5e7eb;
}

.file-preview-btn {
    min-width: 120px;
    justify-content: center;
}

.preview-placeholder {
    text-align: center;
    color: #9ca3af;
    padding: 20px;
}

.preview-placeholder i {
    font-size: 24px;
    margin-bottom: 8px;
    opacity: 0.5;
}

.preview-placeholder p {
    margin: 0;
    font-size: 0.85rem;
}

/* Error Messages */
.document-error-message {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ef4444;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Form Actions */
.document-form-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

/* Documents Table */
.documents-table-section {
    background: white;
    border-radius: 16px;
    overflow: hidden;
}

.table-wrapper {
    overflow-x: auto;
}

.documents-table-modern {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.documents-table-modern thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.documents-table-modern th {
    padding: 16px 20px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.documents-table-modern th i {
    margin-right: 8px;
}

.documents-table-modern td {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.document-row {
    transition: all 0.2s ease;
}

.document-row:hover {
    background: #f8fafc;
}

.document-id {
    font-weight: 600;
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

/* Document Name Cell */
.document-name-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.document-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.document-icon .fa-image {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.document-icon .fa-file-pdf {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.document-icon .fa-file {
    color: #6b7280;
    background: rgba(107, 114, 128, 0.1);
}

.document-title {
    font-weight: 500;
    color: #374151;
}

/* Document File Cell */
.document-file-cell {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.image-preview-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.document-thumbnail {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid #e5e7eb;
    transition: all 0.3s ease;
}

.document-thumbnail:hover {
    transform: scale(1.05);
    border-color: #667eea;
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-preview-container:hover .image-overlay {
    opacity: 1;
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-pending {
    background: rgba(251, 191, 36, 0.1);
    color: #d97706;
}

.status-approved {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.status-rejected {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* Upload Date */
.upload-date {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    font-size: 0.85rem;
}

/* Empty State */
.empty-state-documents {
    padding: 60px 20px;
    color: #9ca3af;
}

.empty-state-documents i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state-documents h4 {
    margin: 0 0 8px 0;
    color: #6b7280;
}

.empty-state-documents p {
    margin: 0;
    font-size: 0.9rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .document-form-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .document-form-actions {
        flex-direction: column;
    }

    .document-form-actions .btn-modern {
        width: 100%;
        justify-content: center;
    }

    .file-upload-area {
        padding: 16px;
    }

    .upload-icon {
        font-size: 24px;
    }

    .documents-table-modern th,
    .documents-table-modern td {
        padding: 12px 16px;
    }

    .document-name-cell {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

@media (max-width: 576px) {
    .documents-table-modern th,
    .documents-table-modern td {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .document-thumbnail {
        width: 40px;
        height: 40px;
    }
}

/* Staff Management Page - Complete CSS */

/* Staff Form Sections */
.staff-form-section {
    margin-bottom: 32px;
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e5e7eb;
}

.staff-section-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.staff-section-header h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #374151;
    margin: 0 0 8px 0;
    font-size: 1.1rem;
}

.staff-section-header i {
    color: #667eea;
}

.section-note {
    color: #6b7280;
    font-size: 0.85rem;
    margin: 0;
    font-style: italic;
}

/* Form Grids */
.staff-form-grid-3col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.staff-form-grid-2col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.staff-documents-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

.staff-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Form Labels */
.staff-form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.staff-form-label i {
    color: #667eea;
    width: 16px;
}

/* Form Inputs */
.staff-form-input {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: white;
    color: #374151;
}

.staff-form-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.staff-form-input.is-invalid {
    border-color: #ef4444;
    background: #fef2f2;
}

/* Date Input */
.staff-date-input {
    color: #374151;
}

.staff-date-input::-webkit-calendar-picker-indicator {
    color: #667eea;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.staff-date-input::-webkit-calendar-picker-indicator:hover {
    background: rgba(102, 126, 234, 0.1);
}

/* Password Container */
.staff-password-container {
    position: relative;
}

.password-toggle-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.password-toggle-btn:hover {
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
}

/* File Upload Areas */
.staff-file-upload-container {
    position: relative;
}

.staff-file-input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
}

.staff-file-upload-area {
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.staff-file-upload-area:hover {
    border-color: #667eea;
    background: #f8fafc;
}

.upload-icon {
    font-size: 24px;
    color: #9ca3af;
    margin-bottom: 8px;
}

.staff-file-upload-area:hover .upload-icon {
    color: #667eea;
}

.upload-text h6 {
    margin: 0 0 4px 0;
    color: #374151;
    font-weight: 600;
    font-size: 0.9rem;
}

.upload-text p {
    margin: 0;
    color: #6b7280;
    font-size: 0.8rem;
}

.existing-file-info {
    margin-top: 12px;
    padding: 8px 12px;
    background: #e0f2fe;
    border: 1px solid #b3e5fc;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #0277bd;
}

.existing-file-info i {
    margin-right: 6px;
}

.existing-file-info a {
    color: #0277bd;
    text-decoration: none;
}

.existing-file-info a:hover {
    text-decoration: underline;
}

/* File Preview */
.file-preview-area {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    text-align: center;
}

/* Profile Image Section */
.staff-image-upload-container {
    display: flex;
    justify-content: center;
}

.profile-image-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.profile-image-preview {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #e5e7eb;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

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

.profile-placeholder {
    text-align: center;
    color: #9ca3af;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.profile-placeholder i {
    font-size: 32px;
    opacity: 0.5;
}

.profile-placeholder p {
    margin: 0;
    font-size: 0.8rem;
}

.profile-image-actions {
    display: flex;
    gap: 8px;
}

/* Error Messages */
.staff-error-message {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ef4444;
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 4px;
}

/* Header Elements */
.header-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.breadcrumb-link {
    color: #667eea;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.breadcrumb-link:hover {
    background: rgba(102, 126, 234, 0.1);
    color: #5a67d8;
}

.breadcrumb-separator {
    color: #9ca3af;
}

/* Form Actions */
.staff-form-actions {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

/* Loading State */
.staff-form.loading .staff-form-input {
    opacity: 0.7;
    pointer-events: none;
}

.staff-form.loading .btn-primary-modern {
    opacity: 0.8;
    pointer-events: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .staff-form-grid-3col,
    .staff-form-grid-2col {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .staff-documents-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .staff-form-actions {
        flex-direction: column-reverse;
    }

    .staff-form-actions .btn-modern {
        width: 100%;
        justify-content: center;
    }

    .header-breadcrumb {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .breadcrumb-separator {
        display: none;
    }
}

@media (max-width: 576px) {
    .staff-form-section {
        padding: 16px;
    }

    .profile-image-preview {
        width: 100px;
        height: 100px;
    }

    .profile-image-actions {
        flex-direction: column;
        width: 100%;
    }

    .profile-image-actions .btn-modern {
        justify-content: center;
    }
}

.check-box-inner {
    display: flex;
    align-items: center;
    gap: 6px; /* spacing between box and label */
}

.is-closed-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--website-primary, #3b82f6); /* uses your theme color */
}

.checkbox-label {
    font-size: 14px;
    color: var(--text-color, #333);
    cursor: pointer;
}

.user-edit-logo-grid {
    display: flex;
    gap: 20px;
}

.social-media-list tr td {
    text-align: center;
}

.logout-btn,
.logout-btn:hover,
.logout-btn:focus {
    background: #d1000015 !important;
    color: #d10000 !important;
}

.logout-btn i,
.logout-btn:hover i,
.logout-btn:focus i {
    color: #d10000 !important;
}

/* vendor dashboard new designs start */

/* .vendor-dash-box {
    min-height: 411px;
} */

.vendor-dash-box #apexcharts-radialbarTrack-0 {
    opacity: 0.3 !important;
}

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

.subscription-flex .subscription-content {
    text-align: left;
    padding-left: 15px;
    width: 85%;
}

.subscription-flex .subscription-content .subscription-title {
    font-size: 20px;
    font-weight: 900;
    color: var(--websitecolor);
    margin-bottom: 10px;
}

.subscription-flex .subscription-content .subscription-list {
    padding: 0;
    list-style: none;
    margin-bottom: 15px;
}

.subscription-flex .subscription-content .subscription-list li {
    position: relative;
    font-size: 15px;
    margin-bottom: 5px;
}

.subscription-flex .subscription-content .subscription-list li:last-child {
    margin-bottom: 0px;
}

.subscription-flex .subscription-content .subscription-list li b {
    font-weight: 600;
    color: var(--blackcolor);
}

/* vendor dashboard new designs end */

/* Upload field wrapper */

/* Label */
.upload-label-modern {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 8px;
}

.upload-label-hint {
    font-weight: 400;
    font-size: 11px;
    color: #6b7280;
    margin-left: 4px;
}

/* Dropzone */
.upload-dropzone {
    position: relative;
    border-radius: 10px;
    border: 1px dashed rgba(148, 163, 184, 0.8);
    background: rgba(255, 255, 255, 0.9);
    padding: 18px 14px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease,
        box-shadow 0.15s ease, transform 0.08s ease;
}

/* Hidden actual input */
.upload-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* Inner content */
.upload-dropzone-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    pointer-events: none;
}

.upload-icon {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}

.upload-icon i {
    font-size: 18px;
    color: #2563eb;
}

.upload-text-main {
    font-size: 13px;
    color: #111827;
    margin-bottom: 4px;
}

.upload-text-main span {
    font-weight: 600;
    color: #2563eb;
}

.upload-text-sub {
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 6px;
}

.upload-file-name {
    font-size: 11px;
    color: #4b5563;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* Hover & states */
.upload-dropzone:hover {
    border-color: #2563eb;
    background: rgba(248, 250, 252, 0.95);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.upload-dropzone.is-dragover {
    border-color: #2563eb;
    background: rgba(219, 234, 254, 0.9);
}

.upload-dropzone.has-file {
    border-color: #16a34a;
}

/* Ticket */
.ticket-card {
    background-color: var(--whitecolor);
    box-shadow: 0 8px 25px rgba(86, 0, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 5px;
}
.ticket-card .ticket-header {
    padding: 5px;
    text-align: center;
    background-color: var(--greyrgb);
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.ticket-card .ticket-body {
    padding: 10px 15px;
    display: flex;
    gap: 15px;
}
.ticket-card .ticket-body i {
    font-size: 12px;
    color: var(--whitecolor);
    width: 30px;
    height: 30px;
    background-color: var(--websitecolor);
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ticket-card .ticket-body .ticket-des {
    width: calc(100% - 40px);
}
.ticket-card .ticket-body .badge {
    background-color: var(--greyrgb);
    color: var(--bodycolor);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 1.5px;
    margin-bottom: 0px;
    padding: 5px;
    text-transform: uppercase;
}
.ticket-card .ticket-body .title {
    font-size: 14px;
    color: var(--blackcolor);
    margin-bottom: 2px;
}
.ticket-card .ticket-body p {
    margin-bottom: 3px;
    font-size: 12px;
}

.stat-badge {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.stat-badge.warning-clr {
    background: rgb(223 200 21 / 10%);
    color: #edcb15;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Enhanced Modal */
.enhanced-modal .enhanced-modal-dialog {
    max-width: 800px;
}

.enhanced-modal .modal-content.enhanced-card {
    border-radius: 20px;
    border: none;
    overflow: hidden;
}

/* Header */
.modal-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--whitecolor);
    padding: 20px 25px;
    border-bottom: 1px solid var(--lightgreycolor);
}

.modal-header-modern .modal-title {
    font-size: 20px;
    font-weight: 700;
}

.modal-close-modern {
    border: none;
    background: transparent;
    padding: 8px 12px;
    cursor: pointer;
}

.modal-close-modern i {
    font-size: 20px;
}

/* Body */
.modal-body-modern {
    padding: 0 !important;
    background: var(--whitecolor);
}

/* Chat Shell Enhanced */
.chat-shell-enhanced {
    height: 450px;
    overflow-y: auto;
    padding: 20px;
    background: var(--lightgreycolor);
}

.chat-messages-enhanced {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* (Optional) Scrollbar styling */
.chat-shell-enhanced::-webkit-scrollbar {
    width: 8px;
}

.chat-shell-enhanced::-webkit-scrollbar-thumb {
    background: var(--greyrgb);
    border-radius: 10px;
}

.chat-shell-enhanced::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* ==============================
   ENHANCED EVENT MODAL
============================== */

.enhanced-modal .modal-dialog {
    max-width: 520px;
}

.enhanced-modal .modal-content.enhanced-card {
    border-radius: 22px;
    border: none;
    overflow: hidden;
}

/* Header */
.modal-header-modern {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 26px !important;
    border-bottom: 1px solid #eee;
    background: var(--whitecolor);
}

.modal-header-modern h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.modal-header-modern p {
    font-size: 13px;
    color: #777;
    margin: 2px 0 0;
}

/* Body */
.modal-body-modern {
    padding: 26px !important;
    background: var(--whitecolor);
}

/* Detail Layout */
.event-detail-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.event-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fb;
    padding: 14px 18px;
    border-radius: 14px;
}

.event-detail-label {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    display: flex;
    align-items: center;
    gap: 8px;
}

.event-detail-value {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    text-align: right;
    max-width: 55%;
    word-break: break-word;
}

/* Close Button */
.modal-close-modern {
    border: none;
    background: transparent;
    padding: 6px 10px;
}

.modal-close-modern i {
    font-size: 18px;
}

.checkbox-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.checkbox-wrapper .form-check {
    padding: 0;
    margin: 0;
}

.checkbox-wrapper .form-check label {
    padding: 5px 12px;
    border-radius: 50px;
    background-color: #f5f5f5;
    border: 2px dashed #ddd;
    font-size: 15px;
    font-weight: 500;
    color: #222;
}

.checkbox-wrapper .form-check input:checked ~ label {
    padding: 5px 12px;
    border-radius: 50px;
    background-color: #5600ff15;
    border-color: #5600ff;
}