/*==========================================================
ACP PRINT ERP
Smart ERP for Modern Printing Businesses
Version : 1.0
Developer : ACP IT ZONE
==========================================================*/


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

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


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

:root{

--primary:#0D6EFD;
--primary-hover:#0B5ED7;

--secondary:#2563EB;

--sidebar:#0F172A;
--sidebar-hover:#16213E;
--sidebar-active:#1D4ED8;

--header:#FFFFFF;

--background:#F5F7FB;

--card:#FFFFFF;

--success:#16A34A;
--danger:#DC2626;
--warning:#F59E0B;
--info:#06B6D4;

--text:#1E293B;
--text-light:#64748B;

--border:#E2E8F0;

--shadow:

0 10px 35px rgba(15,23,42,.08);

--radius:16px;

--transition:.30s ease;

--sidebar-width:280px;

--header-height:72px;

}


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

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

background:var(--background);

color:var(--text);

font-size:15px;

overflow:hidden;

}

a{

text-decoration:none;

color:inherit;

transition:var(--transition);

}

img{

max-width:100%;

display:block;

}

button{

border:none;

outline:none;

cursor:pointer;

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

}

input,
select,
textarea{

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

outline:none;

}


/*==========================================================
SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

width:10px;
height:10px;

}

::-webkit-scrollbar-track{

background:#EEF2F7;

}

::-webkit-scrollbar-thumb{

background:#CBD5E1;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#94A3B8;

}


/*==========================================================
MAIN LAYOUT
==========================================================*/

.erp-wrapper{

display:flex;

width:100%;

height:100vh;

overflow:hidden;

}

.main-area{

margin-left:var(--sidebar-width);

width:calc(100% - var(--sidebar-width));

height:100vh;

display:flex;

flex-direction:column;

transition:.3s;

}


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

.page-content{

padding:25px;

overflow-y:auto;

height:calc(100vh - var(--header-height));

background:var(--background);

}


/*==========================================================
COMMON PAGE TITLE
==========================================================*/

.page-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}

.page-title{

font-size:30px;

font-weight:700;

color:var(--text);

}

.page-subtitle{

font-size:15px;

color:var(--text-light);

margin-top:3px;

}


/*==========================================================
COMMON CARD
==========================================================*/

.erp-card{

background:var(--card);

border-radius:var(--radius);

box-shadow:var(--shadow);

padding:25px;

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

margin-bottom:25px;

transition:.25s;

}

.erp-card:hover{

transform:translateY(-2px);

box-shadow:

0 18px 45px rgba(0,0,0,.08);

}


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

.row-flex{

display:flex;

gap:25px;

flex-wrap:wrap;

}

.col{

flex:1;

min-width:280px;

}


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

.btn-primary{

background:var(--primary);

color:#fff;

padding:12px 24px;

border-radius:10px;

font-weight:600;

transition:.3s;

display:inline-flex;

align-items:center;

gap:8px;

}

.btn-primary:hover{

background:var(--primary-hover);

transform:translateY(-2px);

}

.btn-success{

background:var(--success);

color:#fff;

padding:12px 24px;

border-radius:10px;

}

.btn-danger{

background:var(--danger);

color:#fff;

padding:12px 24px;

border-radius:10px;

}

.btn-warning{

background:var(--warning);

color:#fff;

padding:12px 24px;

border-radius:10px;

}


/*==========================================================
FORMS
==========================================================*/

.form-control{

height:48px;

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

border-radius:10px;

padding:0 16px;

font-size:15px;

background:#fff;

transition:.3s;

}

.form-control:focus{

border-color:var(--primary);

box-shadow:

0 0 0 4px rgba(13,110,253,.10);

}

textarea.form-control{

height:auto;

padding:15px;

resize:vertical;

}


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

.erp-table{

width:100%;

border-collapse:collapse;

background:#fff;

}

.erp-table th{

background:#F8FAFC;

padding:15px;

font-weight:600;

font-size:14px;

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

text-align:left;

}

.erp-table td{

padding:15px;

border-bottom:1px solid #EEF2F7;

font-size:14px;

}

.erp-table tbody tr:hover{

background:#F8FBFF;

}


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

.badge-success{

background:#DCFCE7;

color:#15803D;

padding:6px 12px;

border-radius:20px;

font-size:13px;

font-weight:600;

}

.badge-danger{

background:#FEE2E2;

color:#B91C1C;

padding:6px 12px;

border-radius:20px;

font-size:13px;

font-weight:600;

}

.badge-warning{

background:#FEF3C7;

color:#B45309;

padding:6px 12px;

border-radius:20px;

font-size:13px;

font-weight:600;

}


/*==========================================================
UTILITY
==========================================================*/

.mt-20{

margin-top:20px;

}

.mb-20{

margin-bottom:20px;

}

.text-center{

text-align:center;

}

.text-right{

text-align:right;

}

.d-flex{

display:flex;

}

.align-center{

align-items:center;

}

.justify-between{

justify-content:space-between;

}

.gap-10{

gap:10px;

}

.gap-20{

gap:20px;

}


/*==========================================================
FADE ANIMATION
==========================================================*/

.fade-in{

animation:fadeIn .45s ease;

}

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(15px);

}

to{

opacity:1;

transform:translateY(0);

}

}


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

@media(max-width:991px){

.main-area{

margin-left:0;

width:100%;

}

.page-content{

padding:18px;

}

.page-title{

font-size:24px;

}

}


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

.sidebar{

position:fixed;

top:0;

left:0;

width:var(--sidebar-width);

height:100vh;

background:var(--sidebar);

display:flex;

flex-direction:column;

overflow:hidden;

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

z-index:999;

transition:.35s;

}


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

.sidebar-body{

flex:1;

overflow-y:auto;

overflow-x:hidden;

padding-bottom:25px;

scroll-behavior:smooth;

}

.sidebar-body::-webkit-scrollbar{

width:7px;

}

.sidebar-body::-webkit-scrollbar-track{

background:transparent;

}

.sidebar-body::-webkit-scrollbar-thumb{

background:rgba(255,255,255,.18);

border-radius:20px;

}

.sidebar-body::-webkit-scrollbar-thumb:hover{

background:rgba(255,255,255,.32);

}


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

.sidebar-logo{

height:88px;

display:flex;

align-items:center;

padding:18px 22px;

border-bottom:1px solid rgba(255,255,255,.08);

background:#0B1324;

position:sticky;

top:0;

z-index:50;

}

.sidebar-logo img{

width:54px;

height:54px;

border-radius:12px;

background:#ffffff;

padding:4px;

object-fit:contain;

box-shadow:

0 8px 20px rgba(0,0,0,.20);

}

.logo-details{

margin-left:14px;

}

.logo-title{

font-size:19px;

font-weight:700;

color:#ffffff;

line-height:1.2;

}

.logo-tag{

font-size:12px;

color:#94A3B8;

margin-top:3px;

letter-spacing:.3px;

}


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

.sidebar-heading{

padding:22px 22px 10px;

font-size:11px;

font-weight:700;

letter-spacing:1.5px;

text-transform:uppercase;

color:#64748B;

}


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

.sidebar-menu{

list-style:none;

padding:0;

margin:0;

}

.sidebar-menu li{

list-style:none;

position:relative;

}


/*==========================================================
MAIN MENU LINK
==========================================================*/

.sidebar-link{

display:flex;

align-items:center;

justify-content:space-between;

padding:14px 22px;

color:#CBD5E1;

font-size:15px;

font-weight:500;

transition:.25s;

cursor:pointer;

border-left:4px solid transparent;

user-select:none;

}

.sidebar-link:hover{

background:rgba(255,255,255,.05);

color:#ffffff;

border-left:4px solid var(--primary);

}

.sidebar-link-left{

display:flex;

align-items:center;

gap:14px;

}

.sidebar-link i{

width:22px;

text-align:center;

font-size:17px;

}


/*==========================================================
ARROW
==========================================================*/

.sidebar-arrow{

font-size:13px;

transition:.30s;

color:#94A3B8;

}

.sidebar-item.active>.sidebar-link .sidebar-arrow{

transform:rotate(180deg);

color:#ffffff;

}


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

.sidebar-item.active>.sidebar-link{

background:linear-gradient(
90deg,
rgba(37,99,235,.22),
rgba(13,110,253,.08)
);

border-left:4px solid var(--primary);

color:#ffffff;

font-weight:600;

}

.sidebar-item.active>.sidebar-link i{

color:#60A5FA;

}


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

.sidebar-direct{

display:flex;

align-items:center;

gap:14px;

padding:14px 22px;

font-size:15px;

font-weight:500;

color:#CBD5E1;

border-left:4px solid transparent;

transition:.25s;

}

.sidebar-direct i{

width:22px;

text-align:center;

font-size:17px;

}

.sidebar-direct:hover{

background:rgba(255,255,255,.05);

color:#ffffff;

border-left:4px solid var(--primary);

}

.sidebar-direct.active{

background:linear-gradient(
90deg,
rgba(37,99,235,.22),
rgba(13,110,253,.08)
);

border-left:4px solid var(--primary);

color:#ffffff;

font-weight:600;

}


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

.sidebar-divider{

height:1px;

background:rgba(255,255,255,.08);

margin:18px 20px;

}


/*==========================================================
BOTTOM SPACE
==========================================================*/

.sidebar-space{

height:30px;

}

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

.sidebar-submenu{

display:none;

list-style:none;

margin:0;

padding:8px 0 10px;

background:rgba(255,255,255,.025);

border-left:4px solid rgba(255,255,255,.05);

animation:submenuFade .30s ease;

}

.sidebar-item.active>.sidebar-submenu{

display:block;

}

@keyframes submenuFade{

from{

opacity:0;

transform:translateY(-8px);

}

to{

opacity:1;

transform:translateY(0);

}

}


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

.sidebar-submenu li{

list-style:none;

position:relative;

}

.sidebar-submenu li a{

display:flex;

align-items:center;

gap:12px;

padding:11px 22px 11px 62px;

font-size:14px;

font-weight:500;

color:#94A3B8;

transition:all .25s ease;

position:relative;

overflow:hidden;

}

.sidebar-submenu li a i{

font-size:13px;

width:16px;

text-align:center;

color:#64748B;

transition:.25s;

}


/*==========================================================
LEFT INDICATOR
==========================================================*/

.sidebar-submenu li a::before{

content:"";

position:absolute;

left:38px;

top:50%;

width:8px;

height:8px;

border-radius:50%;

background:#475569;

transform:translateY(-50%);

transition:.25s;

}


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

.sidebar-submenu li a:hover{

background:rgba(37,99,235,.12);

color:#ffffff;

padding-left:68px;

}

.sidebar-submenu li a:hover i{

color:#60A5FA;

}

.sidebar-submenu li a:hover::before{

background:#60A5FA;

transform:translateY(-50%) scale(1.3);

}


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

.sidebar-submenu li a.active{

background:linear-gradient(
90deg,
rgba(37,99,235,.22),
rgba(37,99,235,.06)
);

color:#ffffff;

font-weight:600;

border-left:3px solid var(--primary);

padding-left:65px;

}

.sidebar-submenu li a.active i{

color:#60A5FA;

}

.sidebar-submenu li a.active::before{

background:#60A5FA;

box-shadow:

0 0 10px rgba(96,165,250,.55);

}


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

.sidebar-submenu li:not(:last-child){

border-bottom:1px solid rgba(255,255,255,.03);

}


/*==========================================================
SMALL LABELS
==========================================================*/

.sidebar-submenu .submenu-label{

display:inline-flex;

align-items:center;

justify-content:center;

margin-left:auto;

padding:2px 8px;

font-size:10px;

font-weight:700;

border-radius:20px;

background:#1D4ED8;

color:#ffffff;

}

.sidebar-submenu .submenu-label.success{

background:#16A34A;

}

.sidebar-submenu .submenu-label.warning{

background:#F59E0B;

color:#111827;

}

.sidebar-submenu .submenu-label.danger{

background:#DC2626;

}


/*==========================================================
INDENT LINE
==========================================================*/

.sidebar-submenu{

position:relative;

}

.sidebar-submenu::before{

content:"";

position:absolute;

left:41px;

top:8px;

bottom:8px;

width:1px;

background:rgba(255,255,255,.08);

}


/*==========================================================
SMOOTH OPEN EFFECT
==========================================================*/

.sidebar-item>.sidebar-submenu{

transition:all .30s ease;

}

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

.sidebar-footer{

margin-top:auto;

padding:18px;

background:#0B1324;

border-top:1px solid rgba(255,255,255,.08);

position:sticky;

bottom:0;

z-index:100;

}


/*==========================================================
LOGOUT BUTTON
==========================================================*/

.sidebar-logout{

display:flex;

align-items:center;

gap:14px;

width:100%;

padding:14px 18px;

border-radius:12px;

background:rgba(220,38,38,.12);

color:#FCA5A5;

font-size:15px;

font-weight:600;

transition:all .30s ease;

border:1px solid rgba(220,38,38,.15);

}

.sidebar-logout i{

width:22px;

text-align:center;

font-size:17px;

}

.sidebar-logout:hover{

background:#DC2626;

color:#ffffff;

transform:translateY(-2px);

box-shadow:0 12px 25px rgba(220,38,38,.28);

}


/*==========================================================
USER INFO
==========================================================*/

.sidebar-user{

display:flex;

align-items:center;

gap:12px;

margin-bottom:15px;

padding-bottom:15px;

border-bottom:1px solid rgba(255,255,255,.08);

}

.sidebar-user-avatar{

width:46px;

height:46px;

border-radius:50%;

background:linear-gradient(135deg,#2563EB,#0D6EFD);

display:flex;

align-items:center;

justify-content:center;

font-size:18px;

font-weight:700;

color:#ffffff;

flex-shrink:0;

}

.sidebar-user-info h5{

margin:0;

font-size:15px;

font-weight:600;

color:#ffffff;

}

.sidebar-user-info span{

display:block;

font-size:12px;

color:#94A3B8;

margin-top:2px;

}


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

.sidebar-overlay{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(15,23,42,.55);

backdrop-filter:blur(3px);

opacity:0;

visibility:hidden;

transition:.30s;

z-index:998;

}

.sidebar-overlay.active{

opacity:1;

visibility:visible;

}


/*==========================================================
SIDEBAR TOGGLE BUTTON
==========================================================*/

.sidebar-toggle{

width:44px;

height:44px;

border-radius:10px;

background:#ffffff;

display:flex;

align-items:center;

justify-content:center;

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

cursor:pointer;

transition:.30s;

}

.sidebar-toggle:hover{

background:var(--primary);

color:#ffffff;

transform:rotate(90deg);

}


/*==========================================================
MOBILE
==========================================================*/

@media(max-width:991px){

.sidebar{

left:-100%;

width:290px;

transition:.35s;

}

.sidebar.show{

left:0;

}

.main-area{

margin-left:0;

width:100%;

}

.sidebar-footer{

position:relative;

}

}


/*==========================================================
SMALL DEVICES
==========================================================*/

@media(max-width:576px){

.sidebar{

width:100%;

max-width:320px;

}

.sidebar-logo{

padding:16px;

height:82px;

}

.logo-title{

font-size:18px;

}

.logo-tag{

font-size:11px;

}

.sidebar-link{

padding:13px 18px;

font-size:14px;

}

.sidebar-submenu li a{

padding:10px 18px 10px 56px;

font-size:13px;

}

.sidebar-submenu::before{

left:35px;

}

.sidebar-submenu li a::before{

left:32px;

}

}


/*==========================================================
FUTURE COLLAPSED SIDEBAR SUPPORT
==========================================================*/

.sidebar.collapsed{

width:90px;

}

.sidebar.collapsed .logo-details,

.sidebar.collapsed .sidebar-heading,

.sidebar.collapsed .sidebar-arrow,

.sidebar.collapsed .sidebar-link span,

.sidebar.collapsed .sidebar-direct span,

.sidebar.collapsed .sidebar-submenu,

.sidebar.collapsed .sidebar-user-info{

display:none;

}

.sidebar.collapsed .sidebar-link,

.sidebar.collapsed .sidebar-direct{

justify-content:center;

padding:16px;

}

.sidebar.collapsed .sidebar-link-left{

gap:0;

}

.sidebar.collapsed + .main-area{

margin-left:90px;

width:calc(100% - 90px);

}


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

.erp-header{

position:sticky;

top:0;

left:0;

height:var(--header-height);

background:var(--header);

display:flex;

justify-content:space-between;

align-items:center;

padding:0 28px;

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

box-shadow:0 8px 20px rgba(15,23,42,.05);

z-index:500;

}


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

.header-left{

display:flex;

align-items:center;

gap:20px;

}

.header-title h2{

font-size:28px;

font-weight:700;

color:var(--text);

margin:0;

}

.breadcrumb-area{

display:flex;

align-items:center;

gap:8px;

margin-top:4px;

font-size:13px;

color:var(--text-light);

}

.breadcrumb-area a{

color:var(--primary);

font-weight:600;

}

.breadcrumb-area span{

color:#94A3B8;

}


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

.sidebar-toggle{

width:48px;

height:48px;

border-radius:14px;

background:#F8FAFC;

display:flex;

justify-content:center;

align-items:center;

font-size:18px;

color:var(--text);

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

transition:.30s;

cursor:pointer;

}

.sidebar-toggle:hover{

background:var(--primary);

color:#ffffff;

transform:rotate(90deg);

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

}


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

.header-right{

display:flex;

align-items:center;

gap:18px;

}


/*==========================================================
SEARCH BOX
==========================================================*/

.header-search{

width:330px;

height:48px;

background:#F8FAFC;

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

border-radius:14px;

display:flex;

align-items:center;

padding:0 18px;

transition:.30s;

}

.header-search:hover{

background:#ffffff;

}

.header-search:focus-within{

border-color:var(--primary);

box-shadow:0 0 0 4px rgba(13,110,253,.10);

background:#ffffff;

}

.header-search i{

color:#94A3B8;

margin-right:12px;

font-size:15px;

}

.header-search input{

flex:1;

border:none;

background:transparent;

outline:none;

font-size:15px;

color:var(--text);

}

.header-search input::placeholder{

color:#94A3B8;

}


/*==========================================================
DATE & TIME
==========================================================*/

.header-date,
.header-time{

height:46px;

padding:0 16px;

background:#F8FAFC;

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

border-radius:12px;

display:flex;

align-items:center;

gap:10px;

font-size:14px;

font-weight:600;

color:var(--text);

transition:.30s;

}

.header-date:hover,
.header-time:hover{

background:#ffffff;

box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.header-date i,
.header-time i{

color:var(--primary);

font-size:16px;

}


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

.header-icon{

width:48px;

height:48px;

border-radius:14px;

background:#F8FAFC;

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

display:flex;

justify-content:center;

align-items:center;

position:relative;

cursor:pointer;

transition:.30s;

font-size:18px;

color:var(--text);

}

.header-icon:hover{

background:var(--primary);

color:#ffffff;

transform:translateY(-2px);

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

}

.notify-badge{

position:absolute;

top:-5px;

right:-5px;

width:22px;

height:22px;

border-radius:50%;

background:#EF4444;

display:flex;

justify-content:center;

align-items:center;

font-size:11px;

font-weight:700;

color:#ffffff;

border:2px solid #ffffff;

}

/*==========================================================
PROFILE DROPDOWN
==========================================================*/

.profile-dropdown{

position:relative;

display:flex;

align-items:center;

}

.profile-btn{

display:flex;

align-items:center;

gap:14px;

background:#ffffff;

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

border-radius:16px;

padding:8px 14px;

cursor:pointer;

transition:.30s;

box-shadow:0 5px 18px rgba(15,23,42,.04);

}

.profile-btn:hover{

border-color:var(--primary);

box-shadow:0 12px 30px rgba(13,110,253,.12);

transform:translateY(-2px);

}

/*==========================================================
PROFILE BUTTON
==========================================================*/

.profile-avatar{

width:48px;

height:48px;

border-radius:50%;

background:linear-gradient(135deg,#2563EB,#0D6EFD);

display:flex;

justify-content:center;

align-items:center;

font-size:18px;

font-weight:700;

color:#ffffff;

box-shadow:

0 10px 25px rgba(13,110,253,.20);

flex-shrink:0;

}

.profile-details{

display:flex;

flex-direction:column;

justify-content:center;

}

.profile-details h5{

margin:0;

font-size:15px;

font-weight:700;

color:var(--text);

line-height:1.2;

}

.profile-details span{

margin-top:2px;

font-size:12px;

font-weight:500;

color:var(--text-light);

}

.profile-btn .fa-angle-down{

font-size:13px;

color:#94A3B8;

transition:.30s;

margin-left:4px;

}

.profile-dropdown:hover .fa-angle-down{

transform:rotate(180deg);

color:var(--primary);

}


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

.profile-menu{

position:absolute;

top:70px;

right:0;

width:270px;

background:#ffffff;

border-radius:18px;

box-shadow:

0 25px 60px rgba(15,23,42,.15);

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

padding:14px 0;

opacity:0;

visibility:hidden;

transform:translateY(15px);

transition:.30s;

z-index:9999;

}

.profile-menu.show{

opacity:1;

visibility:visible;

transform:translateY(0);

}


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

.profile-header{

padding:18px 22px;

display:flex;

align-items:center;

gap:15px;

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

margin-bottom:8px;

}

.profile-header .profile-avatar{

width:56px;

height:56px;

font-size:20px;

}

.profile-header h4{

font-size:17px;

font-weight:700;

margin:0;

color:var(--text);

}

.profile-header p{

margin:3px 0 0;

font-size:13px;

color:var(--text-light);

}


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

.profile-menu a{

display:flex;

align-items:center;

gap:14px;

padding:14px 22px;

font-size:14px;

font-weight:500;

color:var(--text);

transition:.25s;

}

.profile-menu a i{

width:20px;

text-align:center;

font-size:16px;

color:#64748B;

transition:.25s;

}

.profile-menu a:hover{

background:#EEF5FF;

color:var(--primary);

padding-left:28px;

}

.profile-menu a:hover i{

color:var(--primary);

}


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

.profile-menu hr{

border:none;

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

margin:8px 0;

}


/*==========================================================
LOGOUT LINK
==========================================================*/

.logout-link{

color:#DC2626 !important;

font-weight:600 !important;

}

.logout-link i{

color:#DC2626 !important;

}

.logout-link:hover{

background:#FEE2E2 !important;

color:#B91C1C !important;

}

.logout-link:hover i{

color:#B91C1C !important;

}


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

@keyframes dropdownFade{

from{

opacity:0;

transform:translateY(15px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.profile-menu.show{

animation:dropdownFade .30s ease;

}


/*==========================================================
SMALL SHADOW
==========================================================*/

.profile-btn:hover .profile-avatar{

transform:scale(1.06);

transition:.30s;

}

.profile-avatar{

transition:.30s;

}

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

@media(max-width:1400px){

.header-search{

width:260px;

}

.header-date,
.header-time{

padding:0 12px;

font-size:13px;

}

.profile-details{

display:none;

}

.profile-btn{

padding:8px 10px;

}

}


@media(max-width:1200px){

.header-search{

width:220px;

}

.header-date{

display:none;

}

}


@media(max-width:991px){

.erp-header{

padding:0 18px;

height:68px;

}

.header-title h2{

font-size:24px;

}

.breadcrumb-area{

display:none;

}

.header-search{

flex:1;

max-width:280px;

}

.header-time{

display:none;

}

.profile-menu{

right:0;

width:250px;

}

}


@media(max-width:768px){

.erp-header{

padding:0 15px;

}

.header-search{

display:none;

}

.header-right{

gap:12px;

}

.header-icon{

width:44px;

height:44px;

font-size:16px;

}

.profile-avatar{

width:42px;

height:42px;

font-size:16px;

}

.profile-menu{

width:240px;

top:64px;

}

}


@media(max-width:576px){

.erp-header{

padding:0 12px;

}

.header-left{

gap:12px;

}

.header-title h2{

font-size:20px;

}

.sidebar-toggle{

width:42px;

height:42px;

font-size:16px;

}

.profile-btn{

padding:5px;

border:none;

background:transparent;

box-shadow:none;

}

.profile-menu{

width:220px;

}

.notify-badge{

width:18px;

height:18px;

font-size:10px;

}

}


/*==========================================================
HEADER HOVER EFFECTS
==========================================================*/

.header-search,
.header-date,
.header-time,
.header-icon,
.profile-btn{

transition:all .30s ease;

}

.header-search:hover,
.header-date:hover,
.header-time:hover{

transform:translateY(-2px);

}

.header-icon:hover{

transform:translateY(-3px) rotate(8deg);

}

.profile-btn:hover{

transform:translateY(-2px);

}


/*==========================================================
HEADER GLASS EFFECT
==========================================================*/

.erp-header{

backdrop-filter:blur(14px);

-webkit-backdrop-filter:blur(14px);

}


/*==========================================================
SMOOTH TRANSITIONS
==========================================================*/

.erp-header *{

transition:

background .25s ease,

color .25s ease,

border-color .25s ease,

box-shadow .25s ease,

transform .25s ease;

}


/*==========================================================
FOCUS STATES
==========================================================*/

.header-search input:focus{

outline:none;

}

.profile-menu a:focus{

background:#EEF5FF;

outline:none;

}


/*==========================================================
HEADER LOADING ANIMATION
==========================================================*/

.erp-header{

animation:headerFade .45s ease;

}

@keyframes headerFade{

from{

opacity:0;

transform:translateY(-10px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/*==========================================================
NOTIFICATION PULSE
==========================================================*/

.notify-badge{

animation:notifyPulse 2s infinite;

}

@keyframes notifyPulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.12);

}

100%{

transform:scale(1);

}

}


/*==========================================================
PROFILE MENU SHADOW
==========================================================*/

.profile-menu{

box-shadow:

0 20px 45px rgba(15,23,42,.15),

0 5px 15px rgba(15,23,42,.08);

}


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


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


/*==========================================================
WELCOME BANNER
==========================================================*/

.welcome-banner{

display:flex;

justify-content:space-between;

align-items:center;

background:linear-gradient(135deg,#2563EB,#0D6EFD);

padding:45px;

border-radius:22px;

overflow:hidden;

position:relative;

margin-bottom:30px;

color:#ffffff;

box-shadow:
0 20px 45px rgba(13,110,253,.22);

}

.welcome-banner::before{

content:"";

position:absolute;

width:320px;

height:320px;

background:rgba(255,255,255,.08);

border-radius:50%;

top:-120px;

right:-90px;

}

.welcome-banner::after{

content:"";

position:absolute;

width:220px;

height:220px;

background:rgba(255,255,255,.05);

border-radius:50%;

bottom:-80px;

left:-70px;

}

.welcome-left{

position:relative;

z-index:2;

}

.welcome-tag{

display:inline-block;

padding:8px 18px;

background:rgba(255,255,255,.16);

border-radius:50px;

font-size:13px;

font-weight:600;

margin-bottom:18px;

backdrop-filter:blur(10px);

}

.welcome-left h1{

font-size:40px;

font-weight:700;

margin-bottom:15px;

color:#ffffff;

}

.welcome-left p{

font-size:17px;

line-height:30px;

margin:0;

color:rgba(255,255,255,.92);

}

.welcome-left strong{

font-weight:700;

color:#ffffff;

}

.welcome-right{

position:relative;

z-index:2;

}

.welcome-right img{

width:180px;

background:#ffffff;

padding:16px;

border-radius:22px;

box-shadow:
0 20px 40px rgba(0,0,0,.15);

transition:.35s;

}

.welcome-right img:hover{

transform:scale(1.05) rotate(3deg);

}


/*==========================================================
DASHBOARD GRID
==========================================================*/

.dashboard-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:24px;

margin-bottom:30px;

}


/*==========================================================
KPI CARD
==========================================================*/

.dashboard-card{

position:relative;

display:flex;

align-items:center;

background:#ffffff;

padding:26px;

border-radius:18px;

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

box-shadow:var(--shadow);

overflow:hidden;

transition:.35s;

}

.dashboard-card:hover{

transform:translateY(-8px);

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

}

.dashboard-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:5px;

height:100%;

background:var(--primary);

}


/*==========================================================
CARD ICON
==========================================================*/

.card-icon{

width:72px;

height:72px;

border-radius:18px;

display:flex;

justify-content:center;

align-items:center;

font-size:28px;

margin-right:20px;

flex-shrink:0;

transition:.35s;

}

.dashboard-card:hover .card-icon{

transform:rotate(8deg) scale(1.08);

}


/*==========================================================
ICON COLORS
==========================================================*/

.purchase{

background:#E0F2FE;

color:#0284C7;

}

.inventory{

background:#ECFDF5;

color:#16A34A;

}

.sales{

background:#EEF2FF;

color:#4F46E5;

}

.estimate{

background:#FEF3C7;

color:#D97706;

}

.accounts{

background:#FCE7F3;

color:#DB2777;

}

.reports{

background:#F3E8FF;

color:#7C3AED;

}


/*==========================================================
CARD DETAILS
==========================================================*/

.card-details{

flex:1;

}

.card-details h5{

font-size:15px;

font-weight:600;

margin-bottom:8px;

color:var(--text-light);

}

.card-details h2{

font-size:34px;

font-weight:700;

margin-bottom:6px;

color:var(--text);

}

.card-details span{

font-size:14px;

color:var(--text-light);

}


/*==========================================================
ARROW
==========================================================*/

.card-arrow{

width:46px;

height:46px;

border-radius:50%;

background:#F8FAFC;

display:flex;

justify-content:center;

align-items:center;

font-size:17px;

color:var(--primary);

transition:.35s;

flex-shrink:0;

}

.dashboard-card:hover .card-arrow{

background:var(--primary);

color:#ffffff;

transform:translateX(5px);

}


/*==========================================================
CARD SHINE EFFECT
==========================================================*/

.dashboard-card::after{

content:"";

position:absolute;

left:-120px;

top:0;

width:80px;

height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.55),
transparent
);

transform:skewX(-25deg);

transition:.8s;

}

.dashboard-card:hover::after{

left:120%;

}


/*==========================================================
KPI ANIMATION
==========================================================*/

.dashboard-card{

animation:fadeUp .45s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}


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

@media(max-width:991px){

.welcome-banner{

padding:35px;

flex-direction:column;

text-align:center;

}

.welcome-right{

margin-top:30px;

}

.welcome-left h1{

font-size:34px;

}

.dashboard-grid{

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

}

}

@media(max-width:768px){

.dashboard-grid{

grid-template-columns:1fr;

}

.welcome-banner{

padding:28px;

}

.welcome-left h1{

font-size:30px;

}

.welcome-right img{

width:140px;

}

.card-details h2{

font-size:28px;

}

}

@media(max-width:576px){

.dashboard-card{

padding:20px;

}

.card-icon{

width:60px;

height:60px;

font-size:24px;

margin-right:15px;

}

.welcome-tag{

font-size:12px;

}

.welcome-left p{

font-size:15px;

line-height:26px;

}

}

/*==========================================================
QUICK ACTIONS
==========================================================*/

.quick-actions{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

gap:20px;

margin-top:10px;

}

.quick-btn{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

padding:28px 20px;

background:#ffffff;

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

border-radius:18px;

transition:.35s;

position:relative;

overflow:hidden;

box-shadow:0 8px 20px rgba(15,23,42,.05);

}

.quick-btn::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:4px;

background:linear-gradient(
90deg,
#2563EB,
#0D6EFD
);

transform:scaleX(0);

transition:.35s;

}

.quick-btn:hover::before{

transform:scaleX(1);

}

.quick-btn:hover{

transform:translateY(-8px);

box-shadow:

0 20px 45px rgba(13,110,253,.15);

border-color:#C7D2FE;

}

.quick-btn i{

width:70px;

height:70px;

border-radius:18px;

display:flex;

justify-content:center;

align-items:center;

font-size:28px;

background:#EEF4FF;

color:var(--primary);

margin-bottom:18px;

transition:.35s;

}

.quick-btn:hover i{

background:var(--primary);

color:#ffffff;

transform:rotate(8deg);

}

.quick-btn span{

font-size:15px;

font-weight:600;

color:var(--text);

text-align:center;

}



/*==========================================================
RECENT ACTIVITY
==========================================================*/

.activity-list{

display:flex;

flex-direction:column;

gap:18px;

margin-top:10px;

}

.activity-item{

display:flex;

align-items:center;

padding:18px;

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

border-radius:16px;

transition:.30s;

background:#ffffff;

}

.activity-item:hover{

background:#F8FBFF;

border-color:#BFDBFE;

transform:translateX(6px);

}

.activity-icon{

width:56px;

height:56px;

border-radius:16px;

display:flex;

justify-content:center;

align-items:center;

font-size:22px;

margin-right:18px;

flex-shrink:0;

}

.activity-content{

flex:1;

}

.activity-content h5{

margin:0;

font-size:16px;

font-weight:600;

color:var(--text);

}

.activity-content p{

margin-top:4px;

margin-bottom:0;

font-size:13px;

color:var(--text-light);

}

.activity-item span{

font-size:12px;

font-weight:600;

color:#94A3B8;

white-space:nowrap;

}



/*==========================================================
ACTIVITY TIMELINE EFFECT
==========================================================*/

.activity-item{

position:relative;

}

.activity-item::before{

content:"";

position:absolute;

left:-10px;

top:50%;

width:5px;

height:5px;

background:var(--primary);

border-radius:50%;

transform:translateY(-50%);

opacity:0;

transition:.30s;

}

.activity-item:hover::before{

opacity:1;

left:-2px;

}



/*==========================================================
QUICK ACTION ANIMATION
==========================================================*/

.quick-btn{

animation:quickFade .45s ease;

}

@keyframes quickFade{

from{

opacity:0;

transform:translateY(18px);

}

to{

opacity:1;

transform:translateY(0);

}

}



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

@media(max-width:992px){

.quick-actions{

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

}

}

@media(max-width:768px){

.quick-actions{

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

}

.activity-item{

flex-wrap:wrap;

}

.activity-item span{

margin-left:74px;

margin-top:8px;

}

}

@media(max-width:576px){

.quick-actions{

grid-template-columns:1fr;

}

.quick-btn{

padding:22px;

}

.quick-btn i{

width:60px;

height:60px;

font-size:24px;

}

.activity-item{

padding:15px;

}

.activity-icon{

width:48px;

height:48px;

font-size:18px;

margin-right:14px;

}

.activity-content h5{

font-size:15px;

}

}

/*==========================================================
SYSTEM OVERVIEW
==========================================================*/

.overview-box{

display:flex;

flex-direction:column;

gap:16px;

margin-top:10px;

}

.overview-item{

display:flex;

justify-content:space-between;

align-items:center;

padding:16px 18px;

background:#ffffff;

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

border-radius:14px;

transition:.30s;

}

.overview-item:hover{

background:#F8FBFF;

border-color:#BFDBFE;

transform:translateX(5px);

box-shadow:0 10px 25px rgba(13,110,253,.08);

}

.overview-item span{

font-size:15px;

font-weight:500;

color:var(--text);

}


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

.overview-item .badge-success,
.overview-item .badge-warning,
.overview-item .badge-danger{

min-width:120px;

text-align:center;

padding:8px 15px;

border-radius:30px;

font-size:12px;

font-weight:700;

letter-spacing:.3px;

}


/*==========================================================
LOW STOCK PANEL
==========================================================*/

.low-stock-list{

display:flex;

flex-direction:column;

gap:15px;

margin-top:10px;

}

.low-stock-item{

display:flex;

align-items:center;

justify-content:space-between;

padding:16px;

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

border-radius:15px;

background:#ffffff;

transition:.30s;

}

.low-stock-item:hover{

transform:translateY(-3px);

border-color:#FCA5A5;

box-shadow:0 12px 28px rgba(220,38,38,.10);

}

.low-stock-left{

display:flex;

align-items:center;

gap:15px;

}

.low-stock-icon{

width:52px;

height:52px;

border-radius:14px;

background:#FEF2F2;

display:flex;

justify-content:center;

align-items:center;

font-size:20px;

color:#DC2626;

}

.low-stock-info h5{

margin:0;

font-size:15px;

font-weight:600;

color:var(--text);

}

.low-stock-info p{

margin:4px 0 0;

font-size:13px;

color:var(--text-light);

}

.stock-count{

padding:8px 14px;

border-radius:25px;

background:#FEE2E2;

color:#B91C1C;

font-size:13px;

font-weight:700;

}


/*==========================================================
EMPTY STATE
==========================================================*/

.empty-box{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

padding:55px 20px;

border:2px dashed #D6E4F7;

border-radius:18px;

background:#FBFDFF;

transition:.30s;

}

.empty-box:hover{

border-color:var(--primary);

background:#F5FAFF;

}

.empty-box i{

font-size:60px;

color:#CBD5E1;

margin-bottom:18px;

transition:.30s;

}

.empty-box:hover i{

color:var(--primary);

transform:scale(1.08);

}

.empty-box h3{

margin-bottom:12px;

font-size:22px;

font-weight:700;

color:var(--text);

}

.empty-box p{

margin:0;

font-size:15px;

color:var(--text-light);

line-height:26px;

max-width:320px;

}


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

.overview-box,
.low-stock-list,
.empty-box{

animation:fadeUp .45s ease;

}


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

@media(max-width:992px){

.overview-item{

padding:14px 16px;

}

.low-stock-item{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

.stock-count{

align-self:flex-end;

}

}

@media(max-width:576px){

.overview-item{

flex-direction:column;

align-items:flex-start;

gap:10px;

}

.overview-item .badge-success,
.overview-item .badge-warning,
.overview-item .badge-danger{

width:100%;

}

.empty-box{

padding:40px 15px;

}

.empty-box i{

font-size:48px;

}

.empty-box h3{

font-size:18px;

}

}

/*==========================================================
CHART PLACEHOLDER
==========================================================*/

.chart-placeholder{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

min-height:320px;

border:2px dashed #D7E3F5;

border-radius:20px;

background:linear-gradient(180deg,#FBFDFF,#F6F9FF);

transition:.35s;

overflow:hidden;

position:relative;

}

.chart-placeholder:hover{

border-color:var(--primary);

background:#ffffff;

transform:translateY(-4px);

box-shadow:0 18px 40px rgba(13,110,253,.08);

}

.chart-placeholder::before{

content:"";

position:absolute;

width:220px;

height:220px;

border-radius:50%;

background:rgba(37,99,235,.04);

top:-90px;

right:-70px;

}

.chart-placeholder::after{

content:"";

position:absolute;

width:150px;

height:150px;

border-radius:50%;

background:rgba(37,99,235,.05);

bottom:-60px;

left:-50px;

}

.chart-placeholder i{

font-size:72px;

color:#B6C8E6;

margin-bottom:18px;

position:relative;

z-index:2;

transition:.35s;

}

.chart-placeholder:hover i{

color:var(--primary);

transform:scale(1.08);

}

.chart-placeholder h3{

font-size:24px;

font-weight:700;

margin-bottom:10px;

color:var(--text);

position:relative;

z-index:2;

}

.chart-placeholder p{

max-width:300px;

font-size:15px;

line-height:28px;

color:var(--text-light);

position:relative;

z-index:2;

}



/*==========================================================
REVENUE SUMMARY
==========================================================*/

.summary-grid{

display:grid;

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

gap:18px;

margin-top:12px;

}

.summary-item{

background:#ffffff;

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

border-radius:16px;

padding:22px;

transition:.30s;

box-shadow:0 5px 15px rgba(15,23,42,.04);

}

.summary-item:hover{

transform:translateY(-5px);

border-color:#BFDBFE;

box-shadow:0 18px 40px rgba(13,110,253,.08);

}

.summary-item h5{

margin-bottom:10px;

font-size:14px;

font-weight:600;

color:var(--text-light);

}

.summary-item h2{

font-size:28px;

font-weight:700;

color:var(--text);

margin:0;

}

.text-success{

color:#16A34A !important;

}



/*==========================================================
FOOTER INFO CARD
==========================================================*/

.erp-card p{

line-height:30px;

font-size:15px;

color:var(--text-light);

}

.erp-card .page-title{

font-size:28px;

}

.erp-card .page-subtitle{

margin-top:5px;

}



/*==========================================================
DASHBOARD POLISH
==========================================================*/

.dashboard-content{

animation:dashboardFade .45s ease;

}

@keyframes dashboardFade{

from{

opacity:0;

transform:translateY(18px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.erp-card{

overflow:hidden;

position:relative;

}

.erp-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:4px;

background:linear-gradient(
90deg,
#2563EB,
#0D6EFD
);

transform:scaleX(0);

transform-origin:left;

transition:.35s;

}

.erp-card:hover::before{

transform:scaleX(1);

}



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

@media(max-width:992px){

.summary-grid{

grid-template-columns:1fr;

}

.chart-placeholder{

min-height:260px;

}

}

@media(max-width:768px){

.chart-placeholder{

min-height:220px;

padding:25px;

}

.chart-placeholder i{

font-size:56px;

}

.chart-placeholder h3{

font-size:20px;

}

.summary-item{

padding:18px;

}

.summary-item h2{

font-size:24px;

}

}

@media(max-width:576px){

.chart-placeholder{

padding:20px;

}

.chart-placeholder i{

font-size:48px;

}

.chart-placeholder h3{

font-size:18px;

}

.chart-placeholder p{

font-size:14px;

line-height:24px;

}

.summary-item{

padding:16px;

}

.erp-card .page-title{

font-size:22px;

}

.erp-card p{

font-size:14px;

line-height:26px;

}

}



/*==========================================================
END OF DASHBOARD CSS
==========================================================*/