/*======================================================
 AUMIS ENTERPRISE UI v2
 PART 1
======================================================*/

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

:root{

--primary:#2563EB;
--primary-dark:#1D4ED8;
--primary-light:#DBEAFE;

--secondary:#38BDF8;

--success:#22C55E;
--warning:#F59E0B;
--danger:#EF4444;

--sidebar:#071B33;
--sidebar-hover:#0B2A4A;

--background:#F5F7FB;

--card:#FFFFFF;

--text:#0F172A;

--muted:#64748B;

--border:#E5E7EB;

--radius:18px;

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

--transition:.28s ease;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

background:var(--background);

color:var(--text);

line-height:1.5;

overflow-x:hidden;

}

a{

text-decoration:none;

color:inherit;

}

img{

max-width:100%;

display:block;

}

button{

font-family:inherit;

}

ul{

list-style:none;

}

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#edf2f7;

}

::-webkit-scrollbar-thumb{

background:#b8c2d1;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#94A3B8;

}
/*======================================================
LAYOUT
======================================================*/

.app-shell{

display:flex;

min-height:100vh;

background:var(--background);

}

.sidebar{

position:fixed;

left:0;

top:0;

width:280px;

height:100vh;

background:linear-gradient(
180deg,
#071B33,
#0A2745
);

overflow-y:auto;

overflow-x:hidden;

box-shadow:

10px 0 35px rgba(0,0,0,.18);

transition:.35s;

z-index:999;

}


margin-left:280px;

width:calc(100% - 280px);

padding:30px;

transition:.35s;

}.content{

margin-left:0;

width:100%;

padding:30px;

transition:.35s;

}

.page-container{

animation:fadePage .45s ease;

}

@keyframes fadePage{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:none;

}

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

.logo{

display:flex;

align-items:center;

gap:18px;

padding:30px 24px;

border-bottom:

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

}

.logo-icon{

width:62px;

height:62px;

border-radius:18px;

background:linear-gradient(
135deg,
#2563EB,
#38BDF8
);

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

color:white;

box-shadow:

0 15px 30px rgba(37,99,235,.30);

}

.logo h2{

font-size:30px;

font-weight:800;

letter-spacing:.5px;

color:white;

}

.logo small{

display:block;

margin-top:5px;

color:#A5C8FF;

font-size:13px;

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

.sidebar nav{

padding:20px 18px;

}

.menu-title{

font-size:11px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

padding:18px 16px 10px;

color:#7EA8DD;

}

.sidebar li{

margin-bottom:6px;

}

.sidebar a{

display:flex;

align-items:center;

gap:15px;

padding:15px 18px;

border-radius:14px;

font-size:15px;

font-weight:600;

color:#D8E7FF;

transition:.25s;

}

.sidebar a i{

font-size:18px;

width:22px;

text-align:center;

}

.sidebar a:hover{

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

color:white;

transform:translateX(5px);

}

.sidebar a.active{

background:linear-gradient(
90deg,
#2563EB,
#1D4ED8
);

color:white;

box-shadow:

0 10px 25px rgba(37,99,235,.30);

}
/*======================================================
TOPBAR
======================================================*/

.topbar{

height:82px;

background:white;

border-radius:20px;

padding:0 26px;

display:flex;

align-items:center;

justify-content:space-between;

box-shadow:var(--shadow);

margin-bottom:30px;

}

.topbar-left strong{

display:block;

font-size:23px;

font-weight:800;

color:#0F172A;

}

.topbar-left small{

color:#64748B;

}

.topbar-center{

flex:1;

display:flex;

justify-content:center;

}

.search-box{

width:420px;

position:relative;

}

.search-box input{

width:100%;

height:48px;

padding:0 20px;

border-radius:50px;

border:1px solid #E5E7EB;

background:#F8FAFC;

font-size:15px;

transition:.25s;

}

.search-box input:focus{

outline:none;

border-color:#2563EB;

background:white;

box-shadow:

0 0 0 4px rgba(37,99,235,.12);

}

.topbar-right{

display:flex;

align-items:center;

gap:18px;

}
/*======================================================
TOPBAR ICONS
======================================================*/

.icon-btn{

width:46px;

height:46px;

border:none;

border-radius:50%;

background:#F3F7FC;

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

font-size:18px;

color:#0F172A;

transition:.25s;

}

.icon-btn:hover{

background:#2563EB;

color:white;

transform:translateY(-3px);

}

.user-menu{

display:flex;

align-items:center;

gap:14px;

padding:8px 18px;

border-radius:50px;

background:#F8FAFC;

cursor:pointer;

transition:.25s;

}

.user-menu:hover{

background:#EEF5FF;

}

.user-avatar{

width:48px;

height:48px;

border-radius:50%;

background:linear-gradient(
135deg,
#2563EB,
#38BDF8
);

display:flex;

align-items:center;

justify-content:center;

color:white;

font-weight:800;

font-size:18px;

box-shadow:

0 12px 25px rgba(37,99,235,.25);

}

.user-menu strong{

display:block;

font-size:15px;

}

.user-menu small{

color:#64748B;

}
/*======================================================
LAYOUT
======================================================*/

.app-shell{

display:flex;

min-height:100vh;

background:var(--background);

}

.sidebar{

position:fixed;

left:0;

top:0;

width:280px;

height:100vh;

background:linear-gradient(
180deg,
#071B33,
#0A2745
);

overflow-y:auto;

overflow-x:hidden;

box-shadow:

10px 0 35px rgba(0,0,0,.18);

transition:.35s;

z-index:999;

}

.content{

margin-left:280px;

width:calc(100% - 280px);

padding:30px;

transition:.35s;

}

.page-container{

animation:fadePage .45s ease;

}

@keyframes fadePage{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:none;

}

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

.logo{

display:flex;

align-items:center;

gap:18px;

padding:30px 24px;

border-bottom:

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

}

.logo-icon{

width:62px;

height:62px;

border-radius:18px;

background:linear-gradient(
135deg,
#2563EB,
#38BDF8
);

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

color:white;

box-shadow:

0 15px 30px rgba(37,99,235,.30);

}

.logo h2{

font-size:30px;

font-weight:800;

letter-spacing:.5px;

color:white;

}

.logo small{

display:block;

margin-top:5px;

color:#A5C8FF;

font-size:13px;

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

.sidebar nav{

padding:20px 18px;

}

.menu-title{

font-size:11px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

padding:18px 16px 10px;

color:#7EA8DD;

}

.sidebar li{

margin-bottom:6px;

}

.sidebar a{

display:flex;

align-items:center;

gap:15px;

padding:15px 18px;

border-radius:14px;

font-size:15px;

font-weight:600;

color:#D8E7FF;

transition:.25s;

}

.sidebar a i{

font-size:18px;

width:22px;

text-align:center;

}

.sidebar a:hover{

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

color:white;

transform:translateX(5px);

}

.sidebar a.active{

background:linear-gradient(
90deg,
#2563EB,
#1D4ED8
);

color:white;

box-shadow:

0 10px 25px rgba(37,99,235,.30);

}
/*======================================================
TOPBAR
======================================================*/

.topbar{

height:82px;

background:white;

border-radius:20px;

padding:0 26px;

display:flex;

align-items:center;

justify-content:space-between;

box-shadow:var(--shadow);

margin-bottom:30px;

}

.topbar-left strong{

display:block;

font-size:23px;

font-weight:800;

color:#0F172A;

}

.topbar-left small{

color:#64748B;

}

.topbar-center{

flex:1;

display:flex;

justify-content:center;

}

.search-box{

width:420px;

position:relative;

}

.search-box input{

width:100%;

height:48px;

padding:0 20px;

border-radius:50px;

border:1px solid #E5E7EB;

background:#F8FAFC;

font-size:15px;

transition:.25s;

}

.search-box input:focus{

outline:none;

border-color:#2563EB;

background:white;

box-shadow:

0 0 0 4px rgba(37,99,235,.12);

}

.topbar-right{

display:flex;

align-items:center;

gap:18px;

}
/*======================================================
TOPBAR ICONS
======================================================*/

.icon-btn{

width:46px;

height:46px;

border:none;

border-radius:50%;

background:#F3F7FC;

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

font-size:18px;

color:#0F172A;

transition:.25s;

}

.icon-btn:hover{

background:#2563EB;

color:white;

transform:translateY(-3px);

}

.user-menu{

display:flex;

align-items:center;

gap:14px;

padding:8px 18px;

border-radius:50px;

background:#F8FAFC;

cursor:pointer;

transition:.25s;

}

.user-menu:hover{

background:#EEF5FF;

}

.user-avatar{

width:48px;

height:48px;

border-radius:50%;

background:linear-gradient(
135deg,
#2563EB,
#38BDF8
);

display:flex;

align-items:center;

justify-content:center;

color:white;

font-weight:800;

font-size:18px;

box-shadow:

0 12px 25px rgba(37,99,235,.25);

}

.user-menu strong{

display:block;

font-size:15px;

}

.user-menu small{

color:#64748B;

}
/*======================================================
AUMIS ENTERPRISE UI v2
PART 2
CARDS • PANELS • DASHBOARD
======================================================*/

.page-header{

display:flex;

justify-content:space-between;

align-items:center;

background:linear-gradient(135deg,#2563EB,#38BDF8);

padding:35px;

border-radius:22px;

color:#fff;

margin-bottom:28px;

box-shadow:

0 20px 40px rgba(37,99,235,.28);

}

.page-header h1{

font-size:34px;

font-weight:800;

margin-bottom:8px;

}

.page-header p{

opacity:.95;

font-size:15px;

}

.page-header .header-buttons{

display:flex;

gap:15px;

}

.panel{

background:#fff;

border-radius:22px;

padding:30px;

margin-bottom:28px;

box-shadow:

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

border:1px solid #eef2f7;

transition:.30s;

}

.panel:hover{

transform:translateY(-3px);

box-shadow:

0 22px 45px rgba(15,23,42,.10);

}

.dashboard-grid{

display:grid;

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

gap:24px;

margin-bottom:28px;

}

.dashboard-card{

position:relative;

overflow:hidden;

padding:28px;

background:#fff;

border-radius:22px;

box-shadow:

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

border:1px solid #eef2f7;

transition:.30s;

}

.dashboard-card:hover{

transform:translateY(-8px);

box-shadow:

0 22px 45px rgba(15,23,42,.14);

}

.dashboard-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:linear-gradient(
90deg,
#2563EB,
#38BDF8
);

}

.dashboard-icon{

width:68px;

height:68px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

background:linear-gradient(
135deg,
#2563EB,
#38BDF8
);

color:white;

margin-bottom:22px;

box-shadow:

0 15px 30px rgba(37,99,235,.30);

}

.dashboard-card h2{

font-size:52px;

font-weight:800;

color:#2563EB;

margin-bottom:10px;

}

.dashboard-card h3{

font-size:18px;

font-weight:700;

margin-bottom:6px;

}

.dashboard-card p{

color:#64748B;

font-size:14px;

}

.dashboard-footer{

margin-top:22px;

display:flex;

justify-content:space-between;

align-items:center;

font-size:13px;

color:#94A3B8;

}

.dashboard-footer strong{

color:#22C55E;

}
/*======================================================
QUICK MENU
======================================================*/

.quick-grid{

display:grid;

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

gap:22px;

margin-top:25px;

}

.quick-card{

display:flex;

flex-direction:column;

justify-content:space-between;

background:white;

padding:28px;

border-radius:22px;

text-decoration:none;

color:#0F172A;

border:1px solid #EEF2F7;

box-shadow:

0 12px 28px rgba(15,23,42,.06);

transition:.30s;

min-height:190px;

}

.quick-card:hover{

transform:translateY(-8px);

border-color:#2563EB;

box-shadow:

0 22px 45px rgba(37,99,235,.18);

}

.quick-card .icon{

width:62px;

height:62px;

border-radius:16px;

display:flex;

align-items:center;

justify-content:center;

background:#EEF5FF;

font-size:28px;

color:#2563EB;

margin-bottom:22px;

}

.quick-card h3{

font-size:20px;

font-weight:700;

margin-bottom:8px;

}

.quick-card p{

font-size:14px;

color:#64748B;

margin-bottom:20px;

line-height:1.6;

}

.quick-card span{

font-weight:700;

color:#2563EB;

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

.btn,

button{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:13px 24px;

border:none;

border-radius:14px;

cursor:pointer;

font-size:15px;

font-weight:700;

transition:.25s;

text-decoration:none;

}

.btn-primary,

button{

background:linear-gradient(
135deg,
#2563EB,
#1D4ED8
);

color:white;

}

.btn-primary:hover,

button:hover{

transform:translateY(-3px);

box-shadow:

0 16px 30px rgba(37,99,235,.35);

}

.btn-success{

background:linear-gradient(
135deg,
#22C55E,
#16A34A
);

color:white;

}

.btn-warning{

background:linear-gradient(
135deg,
#F59E0B,
#D97706
);

color:white;

}

.btn-danger{

background:linear-gradient(
135deg,
#EF4444,
#DC2626
);

color:white;

}

.btn-outline{

background:white;

border:2px solid #2563EB;

color:#2563EB;

}

.btn-outline:hover{

background:#2563EB;

color:white;

}
/*======================================================
AUMIS ENTERPRISE UI v2
PART 3
TABLES
======================================================*/

.table-responsive{

width:100%;

overflow-x:auto;

border-radius:20px;

}

table{

width:100%;

border-collapse:separate;

border-spacing:0;

background:#fff;

border-radius:20px;

overflow:hidden;

box-shadow:

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

}

thead{

background:linear-gradient(
135deg,
#071B33,
#0B2A4A
);

}

thead th{

padding:18px;

font-size:13px;

font-weight:700;

letter-spacing:.6px;

text-transform:uppercase;

color:white;

white-space:nowrap;

}

tbody td{

padding:18px;

border-bottom:1px solid #EEF2F7;

font-size:15px;

color:#334155;

}

tbody tr{

transition:.25s;

}

tbody tr:hover{

background:#F8FBFF;

}

tbody tr:last-child td{

border-bottom:none;

}

tbody td strong{

color:#0F172A;

}

.badge{

display:inline-block;

padding:6px 12px;

border-radius:50px;

font-size:12px;

font-weight:700;

}

.badge-success{

background:#DCFCE7;

color:#166534;

}

.badge-warning{

background:#FEF3C7;

color:#92400E;

}

.badge-danger{

background:#FEE2E2;

color:#991B1B;

}

.badge-primary{

background:#DBEAFE;

color:#1D4ED8;

}
/*======================================================
TABLE ACTION BUTTONS
======================================================*/

.table-actions{

display:flex;

gap:8px;

flex-wrap:wrap;

}

.table-btn{

width:38px;

height:38px;

display:flex;

align-items:center;

justify-content:center;

border-radius:10px;

background:#EEF5FF;

color:#2563EB;

transition:.25s;

}

.table-btn:hover{

background:#2563EB;

color:white;

transform:translateY(-2px);

}

.table-btn.delete{

background:#FEE2E2;

color:#DC2626;

}

.table-btn.delete:hover{

background:#DC2626;

color:white;

}

.table-btn.edit{

background:#EEF5FF;

color:#2563EB;

}

.table-btn.edit:hover{

background:#2563EB;

color:white;

}

.table-btn.view{

background:#ECFDF5;

color:#16A34A;

}

.table-btn.view:hover{

background:#16A34A;

color:white;

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

form{

width:100%;

}

.form-grid{

display:grid;

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

gap:24px;

}

.form-full{

grid-column:1/-1;

}

.form-group{

display:flex;

flex-direction:column;

}

label{

margin-bottom:8px;

font-size:14px;

font-weight:700;

color:#334155;

}

input,

select,

textarea{

width:100%;

padding:15px 18px;

border:1px solid #E2E8F0;

border-radius:14px;

font-size:15px;

background:white;

transition:.25s;

}

textarea{

min-height:150px;

resize:vertical;

}

input:focus,

select:focus,

textarea:focus{

outline:none;

border-color:#2563EB;

box-shadow:

0 0 0 4px rgba(37,99,235,.12);

}

input::placeholder,

textarea::placeholder{

color:#94A3B8;

}
/*======================================================
PROFILE
======================================================*/

.profile-header{

display:flex;

align-items:center;

gap:28px;

margin-bottom:30px;

}

.profile-avatar{

width:120px;

height:120px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(
135deg,
#2563EB,
#38BDF8
);

font-size:50px;

font-weight:800;

color:white;

box-shadow:

0 20px 40px rgba(37,99,235,.35);

}

.profile-info h2{

font-size:34px;

font-weight:800;

margin-bottom:6px;

}

.profile-info p{

font-size:15px;

color:#64748B;

margin-bottom:4px;

}

.profile-details{

display:grid;

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

gap:22px;

margin-top:30px;

}

.detail-card{

background:white;

border-radius:18px;

padding:24px;

border:1px solid #EEF2F7;

box-shadow:

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

}

.detail-card h4{

margin-bottom:12px;

font-size:16px;

font-weight:700;

color:#0F172A;

}

.detail-card p{

color:#64748B;

line-height:1.7;

}
/*======================================================
AUMIS ENTERPRISE UI v2
PART 4
LOGIN • ALERTS • STATS • WIDGETS
======================================================*/


/******************************************************
LOGIN PAGE
******************************************************/

.login-page{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

background:
linear-gradient(135deg,#071B33,#0A4D8C);

padding:40px;

}

.login-card{

width:450px;

background:white;

border-radius:28px;

padding:45px;

box-shadow:
0 35px 80px rgba(0,0,0,.28);

animation:loginFade .6s ease;

}

@keyframes loginFade{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:none;

}

}

.login-logo{

width:90px;

height:90px;

margin:0 auto 25px;

border-radius:24px;

background:linear-gradient(
135deg,
#2563EB,
#38BDF8
);

display:flex;

align-items:center;

justify-content:center;

font-size:42px;

color:white;

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

}

.login-card h1{

text-align:center;

font-size:36px;

font-weight:800;

margin-bottom:10px;

}

.login-card p{

text-align:center;

color:#64748B;

margin-bottom:30px;

}

.login-card button{

width:100%;

height:54px;

font-size:16px;

margin-top:10px;

}


/******************************************************
ALERTS
******************************************************/

.alert{

padding:18px 22px;

border-radius:16px;

margin-bottom:22px;

font-weight:600;

display:flex;

align-items:center;

gap:15px;

}

.alert-success{

background:#DCFCE7;

color:#166534;

border-left:6px solid #22C55E;

}

.alert-danger{

background:#FEE2E2;

color:#991B1B;

border-left:6px solid #EF4444;

}

.alert-warning{

background:#FEF3C7;

color:#92400E;

border-left:6px solid #F59E0B;

}

.alert-info{

background:#DBEAFE;

color:#1D4ED8;

border-left:6px solid #2563EB;

}


/******************************************************
STATISTICS
******************************************************/

.stats-grid{

display:grid;

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

gap:24px;

margin-bottom:28px;

}

.stat-card{

background:white;

border-radius:20px;

padding:28px;

display:flex;

justify-content:space-between;

align-items:center;

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

transition:.30s;

}

.stat-card:hover{

transform:translateY(-6px);

}

.stat-card h2{

font-size:42px;

font-weight:800;

margin-top:6px;

}

.stat-card p{

color:#64748B;

font-size:14px;

}

.stat-icon{

width:70px;

height:70px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

background:#EEF5FF;

color:#2563EB;

}


/******************************************************
ACTIVITY WIDGET
******************************************************/

.activity{

background:white;

border-radius:22px;

padding:28px;

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

}

.activity h3{

margin-bottom:25px;

font-size:22px;

}

.timeline{

position:relative;

padding-left:30px;

}

.timeline::before{

content:"";

position:absolute;

left:8px;

top:0;

bottom:0;

width:3px;

background:#DBEAFE;

}

.timeline-item{

position:relative;

margin-bottom:28px;

}

.timeline-item::before{

content:"";

position:absolute;

left:-28px;

top:5px;

width:16px;

height:16px;

border-radius:50%;

background:#2563EB;

}

.timeline-item h4{

margin-bottom:6px;

font-size:16px;

}

.timeline-item p{

color:#64748B;

font-size:14px;

line-height:1.6;

}
/*======================================================
PART 4 CONTINUED
PROGRESS BARS
======================================================*/

.progress{

height:12px;

background:#E5E7EB;

border-radius:50px;

overflow:hidden;

margin-top:10px;

}

.progress-bar{

height:100%;

border-radius:50px;

background:
linear-gradient(
90deg,
#2563EB,
#38BDF8
);

}


/******************************************************
LIST GROUP
******************************************************/

.list-group{

display:flex;

flex-direction:column;

gap:16px;

}

.list-item{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px;

background:white;

border-radius:16px;

border:1px solid #EEF2F7;

transition:.25s;

}

.list-item:hover{

transform:translateX(5px);

border-color:#2563EB;

}

.list-item h4{

font-size:16px;

margin-bottom:4px;

}

.list-item small{

color:#64748B;

}


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

.empty{

padding:80px 30px;

text-align:center;

}

.empty i{

font-size:70px;

color:#CBD5E1;

margin-bottom:20px;

}

.empty h2{

font-size:30px;

margin-bottom:12px;

}

.empty p{

color:#64748B;

max-width:500px;

margin:auto;

line-height:1.7;

}
/*======================================================
AUMIS ENTERPRISE UI v2
PART 5
MODALS • DROPDOWNS • PAGINATION • TABS • BADGES
======================================================*/


/******************************************************
MODAL
******************************************************/

.modal-overlay{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

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

display:none;

align-items:center;

justify-content:center;

z-index:9999;

backdrop-filter:blur(4px);

}

.modal{

width:700px;

max-width:95%;

background:white;

border-radius:24px;

box-shadow:

0 30px 70px rgba(0,0,0,.25);

animation:modalOpen .30s ease;

overflow:hidden;

}

@keyframes modalOpen{

from{

opacity:0;

transform:scale(.9);

}

to{

opacity:1;

transform:scale(1);

}

}

.modal-header{

padding:24px 30px;

display:flex;

justify-content:space-between;

align-items:center;

border-bottom:1px solid #EEF2F7;

}

.modal-header h2{

font-size:24px;

font-weight:800;

}

.modal-body{

padding:30px;

}

.modal-footer{

padding:20px 30px;

display:flex;

justify-content:flex-end;

gap:15px;

border-top:1px solid #EEF2F7;

}


/******************************************************
DROPDOWN
******************************************************/

.dropdown{

position:relative;

display:inline-block;

}

.dropdown-menu{

position:absolute;

top:110%;

right:0;

width:240px;

background:white;

border-radius:18px;

box-shadow:

0 18px 40px rgba(15,23,42,.15);

padding:10px;

display:none;

z-index:999;

}

.dropdown-menu a{

display:flex;

align-items:center;

gap:12px;

padding:14px;

border-radius:12px;

font-weight:600;

transition:.25s;

}

.dropdown-menu a:hover{

background:#EEF5FF;

color:#2563EB;

}

.dropdown:hover .dropdown-menu{

display:block;

}


/******************************************************
PAGINATION
******************************************************/

.pagination{

display:flex;

justify-content:center;

gap:10px;

margin-top:30px;

}

.pagination a{

width:42px;

height:42px;

display:flex;

align-items:center;

justify-content:center;

border-radius:12px;

background:white;

border:1px solid #E5E7EB;

font-weight:700;

transition:.25s;

}

.pagination a:hover{

background:#2563EB;

color:white;

}

.pagination a.active{

background:#2563EB;

color:white;

}


/******************************************************
TABS
******************************************************/

.tabs{

display:flex;

gap:15px;

margin-bottom:25px;

border-bottom:1px solid #E5E7EB;

}

.tab{

padding:15px 20px;

font-weight:700;

cursor:pointer;

border-bottom:3px solid transparent;

transition:.25s;

}

.tab:hover{

color:#2563EB;

}

.tab.active{

color:#2563EB;

border-color:#2563EB;

}


/******************************************************
BADGES
******************************************************/

.badge{

display:inline-flex;

align-items:center;

justify-content:center;

padding:8px 14px;

border-radius:50px;

font-size:12px;

font-weight:700;

}

.badge-blue{

background:#DBEAFE;

color:#1D4ED8;

}

.badge-green{

background:#DCFCE7;

color:#166534;

}

.badge-orange{

background:#FEF3C7;

color:#92400E;

}

.badge-red{

background:#FEE2E2;

color:#991B1B;

}


/******************************************************
LOADER
******************************************************/

.loader{

width:42px;

height:42px;

border:5px solid #E5E7EB;

border-top:5px solid #2563EB;

border-radius:50%;

animation:spin 1s linear infinite;

margin:auto;

}

@keyframes spin{

0%{

transform:rotate(0deg);

}

100%{

transform:rotate(360deg);

}

}


/******************************************************
TOOLTIP
******************************************************/

.tooltip{

position:relative;

cursor:pointer;

}

.tooltip::after{

content:attr(data-title);

position:absolute;

bottom:120%;

left:50%;

transform:translateX(-50%);

background:#071B33;

color:white;

padding:8px 12px;

border-radius:8px;

font-size:12px;

white-space:nowrap;

opacity:0;

pointer-events:none;

transition:.25s;

}

.tooltip:hover::after{

opacity:1;

}
/*======================================================
AUMIS ENTERPRISE UI v2
PART 6
RESPONSIVE • PRINT • UTILITIES • DARK MODE READY
======================================================*/


/******************************************************
UTILITY CLASSES
******************************************************/

.mt-0{margin-top:0!important;}
.mt-1{margin-top:10px!important;}
.mt-2{margin-top:20px!important;}
.mt-3{margin-top:30px!important;}
.mt-4{margin-top:40px!important;}
.mt-5{margin-top:50px!important;}

.mb-0{margin-bottom:0!important;}
.mb-1{margin-bottom:10px!important;}
.mb-2{margin-bottom:20px!important;}
.mb-3{margin-bottom:30px!important;}
.mb-4{margin-bottom:40px!important;}
.mb-5{margin-bottom:50px!important;}

.ml-auto{
margin-left:auto;
}

.text-center{
text-align:center;
}

.text-right{
text-align:right;
}

.text-left{
text-align:left;
}

.text-primary{
color:#2563EB;
}

.text-success{
color:#22C55E;
}

.text-danger{
color:#EF4444;
}

.text-warning{
color:#F59E0B;
}

.text-muted{
color:#64748B;
}

.d-flex{
display:flex;
}

.align-center{
align-items:center;
}

.justify-between{
justify-content:space-between;
}

.justify-center{
justify-content:center;
}

.gap-10{
gap:10px;
}

.gap-15{
gap:15px;
}

.gap-20{
gap:20px;
}

.w-100{
width:100%;
}


/******************************************************
CARDS
******************************************************/

.card{

background:#fff;

border-radius:20px;

padding:28px;

border:1px solid #EEF2F7;

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

transition:.3s;

}

.card:hover{

transform:translateY(-5px);

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

}


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

.section-title{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}

.section-title h2{

font-size:28px;

font-weight:800;

color:#0F172A;

}

.section-title p{

color:#64748B;

margin-top:5px;

}


/******************************************************
DIVIDERS
******************************************************/

hr{

border:none;

height:1px;

background:#E5E7EB;

margin:30px 0;

}


/******************************************************
FOOTER
******************************************************/

.footer{

margin-top:40px;

padding:20px;

text-align:center;

color:#64748B;

font-size:14px;

}


/******************************************************
PRINT
******************************************************/

@media print{

.sidebar,
.topbar,
.no-print{

display:none!important;

}

.content{

margin-left:0!important;

width:100%!important;

padding:0!important;

}

body{

background:white!important;

}

.panel,
.card{

box-shadow:none!important;

border:1px solid #ccc!important;

}

button,
.btn,
a{

display:none!important;

}

}


/******************************************************
TABLET
******************************************************/

@media(max-width:1200px){

.dashboard-grid{

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

}

.quick-grid{

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

}

.stats-grid{

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

}

}


/******************************************************
MOBILE SIDEBAR
******************************************************/

@media(max-width:992px){

.sidebar{

left:-280px;

}

.sidebar.show{

left:0;

}

.content{

margin-left:0;

width:100%;

padding:20px;

}

.topbar{

flex-wrap:wrap;

height:auto;

padding:20px;

gap:20px;

}

.topbar-center{

width:100%;

order:3;

}

.search-box{

width:100%;

}

.dashboard-grid{

grid-template-columns:1fr;

}

.quick-grid{

grid-template-columns:1fr;

}

.stats-grid{

grid-template-columns:1fr;

}

.form-grid{

grid-template-columns:1fr;

}

.profile-header{

flex-direction:column;

text-align:center;

}

.profile-details{

grid-template-columns:1fr;

}

}


/******************************************************
SMALL MOBILE
******************************************************/

@media(max-width:576px){

.page-header{

padding:25px;

}

.page-header h1{

font-size:28px;

}

.panel{

padding:20px;

}

.card{

padding:20px;

}

.dashboard-card{

padding:22px;

}

.dashboard-card h2{

font-size:40px;

}

.quick-card{

padding:20px;

}

.topbar{

border-radius:16px;

}

.logo{

padding:22px;

}

.logo h2{

font-size:24px;

}

.logo-icon{

width:54px;

height:54px;

font-size:24px;

}

.user-menu{

padding:8px 12px;

}

.user-avatar{

width:42px;

height:42px;

}

.modal{

width:95%;

}

}


/******************************************************
DARK MODE READY
******************************************************/

.dark{

--background:#0F172A;

--card:#1E293B;

--text:#F8FAFC;

--muted:#CBD5E1;

--border:#334155;

}

.dark body{

background:var(--background);

color:var(--text);

}

.dark .panel,
.dark .card,
.dark table,
.dark .topbar,
.dark .dashboard-card,
.dark .quick-card{

background:var(--card);

color:var(--text);

border-color:var(--border);

}

.dark input,
.dark select,
.dark textarea{

background:#0F172A;

color:white;

border-color:#334155;

}

.dark thead{

background:#020617;

}


/******************************************************
END OF STYLE.CSS
VERSION 2.0
******************************************************/



/*======================================================
AUMIS AUTHENTICATION LAYOUT
======================================================*/

.auth-page{
    min-height:100vh;
    margin:0;
    overflow-x:hidden;
    background:#f4f7fc;
}

.auth-shell{
    display:grid;
    grid-template-columns:minmax(420px, 1.05fr) minmax(480px, .95fr);
    min-height:100vh;
}

.auth-brand-panel{
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:64px clamp(42px, 6vw, 100px) 38px;
    color:#fff;
    background:
        radial-gradient(
            circle at 12% 16%,
            rgba(56,189,248,.32),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(37,99,235,.35),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #061a31 0%,
            #082b50 48%,
            #0b4f8f 100%
        );
}

.auth-brand-panel::before,
.auth-brand-panel::after{
    content:"";
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.1);
}

.auth-brand-panel::before{
    width:420px;
    height:420px;
    right:-170px;
    top:-170px;
}

.auth-brand-panel::after{
    width:560px;
    height:560px;
    left:-310px;
    bottom:-310px;
}

.auth-brand-content{
    position:relative;
    z-index:2;
    max-width:680px;
    margin:auto 0;
}

.auth-logo{
    width:76px;
    height:76px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:36px;
    border-radius:22px;
    font-size:34px;
    color:#fff;
    background:linear-gradient(135deg,#38bdf8,#2563eb);
    box-shadow:0 22px 50px rgba(0,0,0,.24);
}

.auth-eyebrow{
    display:inline-block;
    margin-bottom:16px;
    color:#bae6fd;
    font-size:13px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
}

.auth-brand-content h1{
    max-width:700px;
    margin:0 0 22px;
    color:#fff;
    font-size:clamp(38px,4vw,62px);
    line-height:1.08;
    letter-spacing:-2px;
}

.auth-brand-content > p{
    max-width:620px;
    margin:0;
    color:#dbeafe;
    font-size:17px;
    line-height:1.8;
}

.auth-features{
    display:grid;
    gap:18px;
    margin-top:46px;
}

.auth-features > div{
    display:flex;
    align-items:center;
    gap:16px;
}

.auth-features i{
    width:48px;
    height:48px;
    flex:0 0 48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.14);
    border-radius:15px;
    color:#7dd3fc;
    font-size:20px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(10px);
}

.auth-features span{
    color:#bfdbfe;
    font-size:14px;
    line-height:1.5;
}

.auth-features strong{
    display:block;
    margin-bottom:3px;
    color:#fff;
    font-size:15px;
}

.auth-brand-footer{
    position:relative;
    z-index:2;
    color:#93c5fd;
    font-size:13px;
}

.auth-form-panel{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:48px;
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(37,99,235,.08),
            transparent 25%
        ),
        #f6f8fc;
}

.auth-content{
    width:100%;
    max-width:520px;
}

.auth-form-card{
    padding:44px;
    border:1px solid rgba(226,232,240,.9);
    border-radius:28px;
    background:rgba(255,255,255,.96);
    box-shadow:0 30px 80px rgba(15,23,42,.13);
}

.auth-form-header{
    display:flex;
    align-items:flex-start;
    gap:18px;
    margin-bottom:32px;
}

.auth-form-icon{
    width:58px;
    height:58px;
    flex:0 0 58px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:17px;
    color:#fff;
    font-size:24px;
    background:linear-gradient(135deg,#2563eb,#38bdf8);
    box-shadow:0 15px 32px rgba(37,99,235,.28);
}

.auth-welcome{
    display:block;
    margin-bottom:4px;
    color:#2563eb;
    font-size:12px;
    font-weight:800;
    letter-spacing:1.6px;
    text-transform:uppercase;
}

.auth-form-header h2{
    margin:0 0 7px;
    color:#0f172a;
    font-size:29px;
    letter-spacing:-.6px;
}

.auth-form-header p{
    margin:0;
    color:#64748b;
    font-size:14px;
    line-height:1.6;
}

.auth-form{
    display:grid;
    gap:22px;
}

.auth-field label{
    display:block;
    margin-bottom:9px;
    color:#334155;
    font-size:13px;
    font-weight:750;
}

.auth-label-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.auth-input-group{
    position:relative;
}

.auth-input-group > i{
    position:absolute;
    left:17px;
    top:50%;
    z-index:2;
    color:#94a3b8;
    font-size:17px;
    transform:translateY(-50%);
}

.auth-input-group input{
    width:100%;
    height:54px;
    margin:0;
    padding:0 50px 0 48px;
    border:1px solid #dbe3ee;
    border-radius:15px;
    color:#0f172a;
    font-size:14px;
    background:#f8fafc;
    transition:.22s ease;
}

.auth-input-group input:focus{
    border-color:#2563eb;
    background:#fff;
    box-shadow:0 0 0 4px rgba(37,99,235,.11);
}

.auth-input-group:focus-within > i{
    color:#2563eb;
}

.auth-password-toggle{
    position:absolute;
    right:8px;
    top:50%;
    width:40px;
    height:40px;
    padding:0;
    border:0;
    border-radius:11px;
    color:#64748b !important;
    background:transparent !important;
    box-shadow:none !important;
    transform:translateY(-50%);
}

.auth-password-toggle:hover{
    color:#2563eb !important;
    background:#eaf2ff !important;
    transform:translateY(-50%) !important;
}

.auth-options{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:-4px;
}

.auth-checkbox{
    display:flex !important;
    align-items:center;
    gap:9px;
    margin:0 !important;
    color:#64748b !important;
    font-size:13px !important;
    cursor:pointer;
}

.auth-checkbox input{
    width:17px;
    height:17px;
    margin:0;
    accent-color:#2563eb;
}

.auth-submit{
    width:100%;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin:2px 0 0;
    border-radius:15px !important;
    font-size:15px;
    background:linear-gradient(135deg,#2563eb,#1d4ed8) !important;
    box-shadow:0 16px 32px rgba(37,99,235,.25);
}

.auth-submit i{
    transition:transform .2s ease;
}

.auth-submit:hover i{
    transform:translateX(4px);
}

.auth-alert{
    display:flex;
    align-items:flex-start;
    gap:11px;
    padding:14px 16px;
    margin-bottom:22px;
    border-radius:14px;
    font-size:13px;
    font-weight:600;
}

.auth-alert-danger{
    border:1px solid #fecaca;
    color:#991b1b;
    background:#fef2f2;
}

.auth-security-note{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    margin-top:25px;
    color:#94a3b8;
    font-size:12px;
    text-align:center;
}

.auth-security-note i{
    color:#16a34a;
}

.auth-mobile-brand{
    display:none;
}

@media(max-width:1050px){
    .auth-shell{
        grid-template-columns:1fr;
    }

    .auth-brand-panel{
        display:none;
    }

    .auth-form-panel{
        min-height:100vh;
        padding:32px 20px;
    }

    .auth-mobile-brand{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:13px;
        margin-bottom:25px;
    }

    .auth-mobile-logo{
        width:52px;
        height:52px;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:15px;
        color:#fff;
        font-size:23px;
        background:linear-gradient(135deg,#2563eb,#38bdf8);
    }

    .auth-mobile-brand strong,
    .auth-mobile-brand small{
        display:block;
    }

    .auth-mobile-brand strong{
        color:#0f172a;
        font-size:22px;
    }

    .auth-mobile-brand small{
        color:#64748b;
        font-size:12px;
    }
}

@media(max-width:576px){
    .auth-form-panel{
        align-items:flex-start;
        padding:25px 14px;
    }

    .auth-content{
        max-width:none;
    }

    .auth-form-card{
        padding:27px 21px;
        border-radius:22px;
    }

    .auth-form-header{
        gap:13px;
    }

    .auth-form-icon{
        width:50px;
        height:50px;
        flex-basis:50px;
        font-size:21px;
    }

    .auth-form-header h2{
        font-size:24px;
    }
}

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

.logo{
    display:flex;
    align-items:center;
    gap:15px;
    padding:20px 15px;
}

.sidebar-logo{
    width:58px;
    height:58px;
    object-fit:contain;
    border-radius:12px;
    background:#ffffff;
    padding:4px;
    box-shadow:0 4px 10px rgba(0,0,0,.15);
}

.logo-text h2{
    margin:0;
    color:#fff;
    font-size:22px;
    font-weight:700;
}

.logo-text small{
    color:rgba(255,255,255,.8);
    font-size:13px;
}


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

.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:20px;
    margin-bottom:30px;
}

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

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

.card-icon{
    width:60px;
    height:60px;
    border-radius:14px;
    background:#eef4ff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    margin-bottom:15px;
}

.dashboard-card h2{
    margin:0;
    font-size:34px;
    color:#0b2341;
}

.dashboard-card p{
    margin-top:8px;
    color:#666;
    font-size:15px;
}

.dashboard-two-column{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:25px;
    margin-bottom:30px;
}

.panel{
    background:#fff;
    border-radius:16px;
    padding:25px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.panel h2{
    margin-bottom:20px;
    color:#0b2341;
}

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

.quick-card{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:70px;
    background:#0b2341;
    color:#fff;
    border-radius:12px;
    text-decoration:none;
    font-weight:600;
    transition:.25s;
}

.quick-card:hover{
    background:#15457b;
    transform:translateY(-3px);
}

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

.dashboard-table td{
    padding:14px 10px;
    border-bottom:1px solid #eee;
}

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

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

.announcement-list li{
    padding:14px 0;
    border-bottom:1px solid #eee;
    font-size:15px;
}

.announcement-list li:last-child{
    border-bottom:none;
}

@media(max-width:992px){

.dashboard-two-column{
    grid-template-columns:1fr;
}

}

/* Dashboard chart sizing */

.chart-card{
    position:relative;
    min-height:330px;
}

.chart-card h3{
    margin-bottom:20px;
}

.chart-card canvas{
    width:100% !important;
    height:250px !important;
    max-height:250px;
}


/* =========================================================
   Dashboard secondary analytics
   ========================================================= */

.dashboard-secondary-charts{
    margin-top:24px;
}

.chart-card-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:18px;
}

.chart-card-header h3{
    margin:0 0 5px;
    color:#10233f;
    font-size:18px;
    font-weight:700;
}

.chart-card-header p{
    margin:0;
    color:#7a8799;
    font-size:13px;
}

.chart-header-icon{
    width:42px;
    height:42px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:#eef4ff;
    color:#2563eb;
    font-size:19px;
}

.dashboard-placeholder{
    min-height:250px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:25px;
    border:1px dashed #cfd9e7;
    border-radius:14px;
    background:#f8fafc;
    color:#748196;
}

.dashboard-placeholder i{
    margin-bottom:14px;
    color:#2563eb;
    font-size:46px;
}

.dashboard-placeholder strong{
    margin-bottom:6px;
    color:#263b58;
    font-size:15px;
}

.dashboard-placeholder span{
    max-width:300px;
    font-size:13px;
    line-height:1.6;
}

.dashboard-secondary-charts .chart-card{
    min-height:350px;
}

.dashboard-secondary-charts canvas{
    width:100% !important;
    height:255px !important;
    max-height:255px;
}

@media (max-width:768px){

    .chart-card-header{
        gap:12px;
    }

    .chart-card-header h3{
        font-size:16px;
    }

    .dashboard-secondary-charts .chart-card{
        min-height:330px;
    }
}
.coming-soon{

    height:250px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    color:#6c757d;

}

.coming-soon i{

    font-size:55px;

    margin-bottom:15px;

}