body{
    background:var(--bg);
    color:var(--text);
}

/* OVERLAY */
.overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.55);
    z-index:990;
    display:none;
}

.overlay.active{
    display:block;
}

/* SIDEBAR DEFAULT HIDDEN */
.sidebar{
    position:fixed;
    top:0;
    left:-280px;
    width:280px;
    height:100vh;
    background:linear-gradient(180deg,var(--sidebar),var(--sidebar-2));
    color:#fff;
    z-index:1000;
    transition:.3s ease;
    display:flex;
    flex-direction:column;
}

.sidebar.active{
    left:0;
}

.logo-area{
    height:80px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 22px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.logo-icon{
    width:45px;
    height:45px;
    border-radius:15px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}

.logo-text h3{
    font-size:18px;
}

.logo-text span{
    font-size:12px;
    color:var(--muted);
}

.sidebar-menu{
    flex:1;
    padding:18px 14px;
    overflow-y:auto;
}

.menu-label{
    font-size:12px;
    color:var(--muted);
    padding:14px 12px 8px;
    text-transform:uppercase;
}

.menu-link,
.submenu-btn{
    width:100%;
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 14px;
    color:#cbd5e1;
    text-decoration:none;
    border-radius:15px;
    margin-bottom:6px;
    transition:.25s;
    font-size:15px;
    border:0;
    background:transparent;
    cursor:pointer;
    text-align:left;
}

.menu-link i,
.submenu-btn i:first-child{
    width:22px;
    text-align:center;
}

.menu-link:hover,
.menu-link.active,
.submenu-btn:hover,
.submenu-btn.active{
    color:#fff;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    box-shadow:0 8px 22px rgba(99,102,241,.35);
}

.submenu-btn span{
    flex:1;
}

.arrow{
    font-size:12px;
    transition:.3s;
}

.submenu-btn.active .arrow{
    transform:rotate(180deg);
}

.submenu{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
    padding-left:12px;
}

.submenu.open{
    max-height:500px;
}

.submenu a{
    display:flex;
    align-items:center;
    padding:11px 14px 11px 36px;
    color:#94a3b8;
    text-decoration:none;
    border-radius:13px;
    font-size:14px;
    margin-bottom:5px;
    position:relative;
}

.submenu a:before{
    content:"";
    position:absolute;
    left:18px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#475569;
}

.submenu a:hover,
.submenu a.active{
    background:rgba(255,255,255,.08);
    color:#fff;
}

.sidebar-footer{
    padding:18px;
    border-top:1px solid rgba(255,255,255,.08);
}

.footer-card{
    background:rgba(255,255,255,.08);
    border-radius:18px;
    padding:15px;
}

.footer-card h4{
    font-size:15px;
    margin-bottom:5px;
}

.footer-card p{
    font-size:12px;
    color:#cbd5e1;
    margin-bottom:12px;
}

.logout-btn{
    width:100%;
    border:none;
    padding:10px;
    border-radius:12px;
    background:var(--danger);
    color:#fff;
    cursor:pointer;
}

/* HEADER */
.header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:70px;
    background:var(--white);
    box-shadow:var(--shadow);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 25px;
    z-index:900;
}

.header-left,
.header-right{
    display:flex;
    align-items:center;
    gap:15px;
}

.menu-btn{
    width:42px;
    height:42px;
    border:none;
    border-radius:13px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
    font-size:18px;
    cursor:pointer;
    display:block;
}

.header-title h2{
    font-size:20px;
    color:#0f172a;
}

.header-title span{
    font-size:13px;
    color:var(--muted);
}

.header-icon{
    width:44px;
    height:44px;
    border:none;
    border-radius:16px;
    background:#f1f5f9;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#475569;
    position:relative;
    cursor:pointer;
    transition:.25s;
}

.header-icon:hover{
    background:#e0e7ff;
    color:var(--primary);
}

.notify-count{
    position:absolute;
    top:-5px;
    right:-5px;
    min-width:20px;
    height:20px;
    padding:0 5px;
    background:var(--danger);
    color:#fff;
    border-radius:999px;
    font-size:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid #fff;
}

.user-box{
    display:flex;
    align-items:center;
    gap:10px;
}

.user-box img{
    width:42px;
    height:42px;
    border-radius:50%;
}

/* CONTENT */
.main-content{
    margin-left:0;
    padding:95px 25px 25px;
}

.content-card{
    background:#fff;
    color:var(--text-color);
    padding:25px;
    border-radius:24px;
    box-shadow:var(--shadow);
}

/* NOTIFICATION DRAWER */
.notification-backdrop{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.45);
    backdrop-filter:blur(3px);
    z-index:1190;
    opacity:0;
    visibility:hidden;
    transition:.25s ease;
}

.notification-backdrop.active{
    opacity:1;
    visibility:visible;
}

.notification-panel{
    position:fixed;
    top:18px;
    right:18px;
    width:520px;
    max-width:calc(100% - 36px);
    height:calc(100vh - 36px);
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.7);
    border-radius:28px;
    box-shadow:0 25px 70px rgba(15,23,42,.25);
    z-index:1200;
    transform:translateX(110%);
    opacity:0;
    transition:.35s ease;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.notification-panel.active{
    transform:translateX(0);
    opacity:1;
}

.notify-head{
    padding:22px;
    background:
        radial-gradient(circle at top left, rgba(99,102,241,.20), transparent 35%),
        linear-gradient(135deg,#ffffff,#f8fafc);
    border-bottom:1px solid #e5e7eb;
}

.notify-head-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.notify-title{
    display:flex;
    align-items:center;
    gap:12px;
}

.notify-title-icon{
    width:46px;
    height:46px;
    border-radius:16px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 12px 25px rgba(99,102,241,.25);
}

.notify-title h3{
    font-size:19px;
    color:#0f172a;
}

.notify-title p{
    font-size:12px;
    color:#64748b;
    margin-top:2px;
}

.notify-close{
    width:38px;
    height:38px;
    border:none;
    border-radius:14px;
    background:#f1f5f9;
    cursor:pointer;
    color:#475569;
}

.notify-tabs{
    display:flex;
    gap:8px;
    margin-top:18px;
    overflow-x:auto;
}

.notify-tab{
    border:none;
    padding:9px 13px;
    border-radius:999px;
    background:#f1f5f9;
    color:#475569;
    font-size:13px;
    cursor:pointer;
    white-space:nowrap;
}

.notify-tab.active{
    background:#0f172a;
    color:#fff;
}

.notify-body{
    flex:1;
    overflow-y:auto;
    padding:16px;
}

.notify-loading,
.notify-empty{
    padding:35px 18px;
    text-align:center;
    color:#64748b;
}

.notify-loading i{
    font-size:28px;
    color:var(--primary);
    margin-bottom:12px;
}

/* NOTIFICATION TABLE ROW DESIGN */
.notify-table-wrap{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    border:1px solid #e5e7eb;
}

.notify-table{
    width:100%;
    border-collapse:collapse;
}

.notify-table tr{
    transition:.22s ease;
    cursor:pointer;
    border-bottom:1px solid #eef2f7;
}

.notify-table tr:last-child{
    border-bottom:none;
}

.notify-table tr:hover{
    background:#f8faff;
    transform:scale(.99);
}

.notify-table tr.unread{
    background:#f8faff;
}

.notify-table td{
    padding:14px 10px;
    vertical-align:middle;
}

.notify-mini-icon{
    width:42px;
    height:42px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
}

.type-sale{background:linear-gradient(135deg,#22c55e,#16a34a);}
.type-purchase{background:linear-gradient(135deg,#f59e0b,#d97706);}
.type-payment{background:linear-gradient(135deg,#0ea5e9,#0284c7);}
.type-system{background:linear-gradient(135deg,#6366f1,#4f46e5);}

.notify-table-title{
    font-size:14px;
    font-weight:700;
    color:#0f172a;
}

.notify-table-message{
    font-size:12px;
    color:#64748b;
    margin-top:3px;
    line-height:1.4;
}

.notify-table-time{
    font-size:11px;
    color:#94a3b8;
    white-space:nowrap;
}

.notify-open-btn{
    padding:7px 10px;
    border-radius:10px;
    background:#eef2ff;
    color:#4f46e5;
    text-decoration:none;
    font-size:12px;
    font-weight:700;
}

.notify-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#ef4444;
    display:inline-block;
}

.notify-read-dot{
    background:#cbd5e1;
}

.notify-footer{
    padding:14px 16px;
    border-top:1px solid #e5e7eb;
    background:#fff;
    display:flex;
    gap:10px;
}

.notify-footer button{
    flex:1;
    border:none;
    border-radius:15px;
    padding:12px;
    cursor:pointer;
    font-weight:700;
}

.mark-read-btn{
    background:#eef2ff;
    color:var(--primary);
}

.view-all-btn{
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#fff;
}

/* RIGHT CONTACT */
.right-contact{
    position:fixed;
    right:20px;
    top:50%;
    transform:translateY(-50%);
    z-index:950;
}

.right-contact a{
    width:55px;
    height:55px;
    border-radius:18px;
    background:linear-gradient(135deg,#22c55e,#16a34a);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:24px;
    box-shadow:0 10px 25px rgba(34,197,94,.35);
}

/* QUICK ACTION */
.quick-action-wrapper{
    position:fixed;
    right:20px;
    top:90px;
    z-index:950;
}

.quick-action-btn{
    width:58px;
    height:58px;
    border:none;
    border-radius:18px;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#fff;
    font-size:22px;
    cursor:pointer;
    box-shadow:0 12px 30px rgba(99,102,241,.35);
    transition:.3s;
}

.quick-action-btn.open{
    transform:rotate(45deg);
}

.quick-action-menu{
    position:absolute;
    top:72px;
    right:0;
    width:230px;
    background:#fff;
    border-radius:22px;
    padding:14px;
    box-shadow:0 15px 40px rgba(15,23,42,.18);
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:.25s ease;
}

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

.quick-item{
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
    color:#334155;
    padding:14px;
    border-radius:16px;
    margin-bottom:8px;
}

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

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

.quick-item i{
    width:42px;
    height:42px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
}

.quick-item:nth-child(1) i{background:#22c55e;}
.quick-item:nth-child(2) i{background:#f59e0b;}
.quick-item:nth-child(3) i{background:#0ea5e9;}

.quick-item span{
    font-size:15px;
    font-weight:600;
}

@media(max-width:576px){
    .header{
        padding:0 14px;
    }

    .header-title h2{
        font-size:16px;
    }

    .header-title span,
    .user-box span{
        display:none;
    }

    .notification-panel{
        top:0;
        right:0;
        width:100%;
        max-width:100%;
        height:100vh;
        border-radius:0;
    }

    .quick-action-wrapper{
        right:15px;
        top:85px;
    }

    .right-contact{
        right:15px;
    }

    .quick-action-btn,
    .right-contact a{
        width:50px;
        height:50px;
        border-radius:16px;
    }

    .notify-table td{
        padding:12px 7px;
    }

    .notify-table-time{
        display:none;
    }
}



/*select 2 cs */


/* Select2 Fix */
.select2-container{
    width:100% !important;
}

.select2-container--default .select2-selection--single{
    height:48px !important;
    border-radius:15px !important;
    border:1px solid #dbe3ef !important;
    background:#fff !important;
    display:flex !important;
    align-items:center !important;
    padding:0 12px !important;
}

.select2-container--default
.select2-selection--single
.select2-selection__rendered{
    color:#111827 !important;
    line-height:48px !important;
    font-weight:600;
}

.select2-container--default
.select2-selection--single
.select2-selection__placeholder{
    color:#94a3b8 !important;
}

.select2-dropdown{
    border-radius:14px !important;
    overflow:hidden;
    border:1px solid #dbe3ef !important;
}

.select2-search__field{
    border-radius:10px !important;
    border:1px solid #dbe3ef !important;
    padding:8px 10px !important;
}

.select2-results__option{
    color:#111827 !important;
    background:#fff !important;
    padding:10px 14px !important;
}

.select2-results__option--highlighted{
    background:#2563eb !important;
    color:#fff !important;
}



.notify-body {
    padding: 14px;
    background: #f8fafc;
}

.notify-item {
    display: flex;
    gap: 12px;
    padding: 14px;
    margin-bottom: 12px;
    background: #ffffff;
    border: 1px solid #eef2f7;
    border-radius: 18px;
    text-decoration: none;
    color: #0f172a;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    transition: 0.2s ease;
}

.notify-item:hover {
    transform: translateY(-2px);
    border-color: #dbeafe;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.10);
}

.notify-item.unread {
    border-color: #c7d2fe;
    background: linear-gradient(135deg, #ffffff 0%, #f5f7ff 100%);
}

.notify-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 18px;
}

.notify-type-subscription_invoice .notify-avatar {
    background: #eef2ff;
    color: #4f46e5;
}

.notify-type-subscription_payment_approval .notify-avatar,
.notify-type-approval .notify-avatar {
    background: #fff7ed;
    color: #f97316;
}

.notify-type-payment .notify-avatar {
    background: #ecfdf5;
    color: #10b981;
}

.notify-content {
    flex: 1;
    min-width: 0;
}

.notify-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.notify-row h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
}

.notify-content p {
    margin: 6px 0 10px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}

.notify-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: #94a3b8;
}

.notify-action-text {
    font-weight: 700;
    color: #4f46e5;
}

.notify-new {
    padding: 4px 8px;
    border-radius: 999px;
    background: #ef4444;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
}

.notify-empty {
    padding: 40px 20px;
    text-align: center;
    color: #64748b;
}

.notify-empty i {
    font-size: 34px;
    margin-bottom: 12px;
    color: #94a3b8;
}


.notify-item {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #334155;
    cursor: pointer;
    text-decoration: none;
    transition: all .2s ease;
}

.notify-item:hover {
    background: #f8fafc;
    transform: translateY(-1px);
}

.notify-item.unread {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #111827;
    box-shadow: 0 8px 22px rgba(79, 70, 229, .10);
}

.notify-item.unread .notify-content h4 {
    color: #111827;
    font-weight: 900;
}

.notify-item:not(.unread) {
    opacity: .78;
}

.notify-item:not(.unread) .notify-content h4 {
    color: #475569;
    font-weight: 700;
}

.notify-new {
    background: #ef4444;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 999px;
}

.notify-item:not(.unread) .notify-new {
    display: none;
}