/* ==========================================================
   COMPONENTS
   Buttons
========================================================== */

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
height:40px;
padding:0 18px;
border:none;
border-radius:var(--radius-md);
font-size:14px;
font-weight:600;
font-family:var(--font-family);
cursor:pointer;
transition:all var(--transition);
user-select:none;
white-space:nowrap;
}

.btn:disabled{
opacity:.55;
cursor:not-allowed;
pointer-events:none;
}

.btn i{
font-size:16px;
}

.btn-primary{
background:var(--primary);
color:#fff;
}

.btn-primary:hover{
background:var(--primary-light);
box-shadow:var(--shadow-sm);
transform:translateY(-1px);
}

.btn-secondary{
background:var(--btn-secondary);
color:var(--text);
border:1px solid var(--border);
}

.btn-secondary:hover{
background:#E4E9EF;
}

.btn-success{
background:var(--success);
color:#fff;
}

.btn-success:hover{
filter:brightness(1.1);
}

.btn-warning{
background:var(--warning);
color:#fff;
}

.btn-warning:hover{
filter:brightness(1.1);
}

.btn-danger{
background:var(--danger);
color:#fff;
}

.btn-danger:hover{
filter:brightness(1.1);
}

.btn-outline{
background:#fff;
border:1px solid var(--primary);
color:var(--primary);
}

.btn-outline:hover{
background:var(--primary);
color:#fff;
}

.btn-text{
background:none;
padding:0 8px;
height:auto;
color:var(--primary);
}

.btn-text:hover{
text-decoration:underline;
}

.btn-sm{
height:34px;
padding:0 14px;
font-size:13px;
}

.btn-lg{
height:46px;
padding:0 24px;
font-size:15px;
}

.btn-block{
display:flex;
width:100%;
}

/* ==========================================================
   Form Group
========================================================== */

.form-group{
margin-bottom:18px;
}

.form-group label{
display:block;
margin-bottom:8px;
font-size:13px;
font-weight:600;
color:var(--text);
}

/* ==========================================================
   Input
========================================================== */

.input,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="date"],
input[type="datetime-local"],
textarea,
select{

width:100%;
height:42px;

padding:0 14px;

font-size:14px;

font-family:var(--font-family);

background:#fff;

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

border-radius:var(--radius-md);

transition:all var(--transition);

outline:none;

box-sizing:border-box;

}

textarea{

height:120px;

padding:12px 14px;

resize:vertical;

line-height:1.6;

}

.input:hover,
input:hover,
textarea:hover,
select:hover{

border-color:#B8C4D2;

}

.input:focus,
input:focus,
textarea:focus,
select:focus{

border-color:var(--primary);

box-shadow:0 0 0 4px rgba(22,58,95,.08);

}

input::placeholder,
textarea::placeholder{

color:var(--text-placeholder);

}

input:disabled,
textarea:disabled,
select:disabled{

background:#F6F7F9;

cursor:not-allowed;

opacity:.7;

}

/* ==========================================================
   Input Group
========================================================== */

.input-group{

display:flex;

align-items:center;

}

.input-group .input{

border-radius:var(--radius-md) 0 0 var(--radius-md);

}

.input-group .btn{

border-radius:0 var(--radius-md) var(--radius-md) 0;

margin-left:-1px;

}

/* ==========================================================
   Select
========================================================== */

select{

appearance:none;

-webkit-appearance:none;

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%236B7280' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 5.5L8 10.3l4.8-4.8' stroke='%236B7280' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

background-repeat:no-repeat;

background-position:right 12px center;

padding-right:40px;

}

/* ==========================================================
   Search Box
========================================================== */

.search-box{

position:relative;

width:100%;

}

.search-box input{

padding-left:42px;

}

.search-box svg{

position:absolute;

left:14px;

top:50%;

transform:translateY(-50%);

width:18px;

height:18px;

fill:#94A3B8;

pointer-events:none;

}

/* ==========================================================
   Checkbox
========================================================== */

.checkbox{

display:flex;

align-items:center;

gap:10px;

cursor:pointer;

user-select:none;

font-size:14px;

}

.checkbox input{

width:18px;

height:18px;

accent-color:var(--primary);

cursor:pointer;

}

/* ==========================================================
   Radio
========================================================== */

.radio{

display:flex;

align-items:center;

gap:10px;

cursor:pointer;

font-size:14px;

}

.radio input{

width:18px;

height:18px;

accent-color:var(--primary);

}

/* ==========================================================
   Switch
========================================================== */

.switch{

position:relative;

display:inline-block;

width:50px;

height:28px;

}

.switch input{

opacity:0;

width:0;

height:0;

}

.switch-slider{

position:absolute;

left:0;

top:0;

right:0;

bottom:0;

background:#CBD5E1;

border-radius:999px;

cursor:pointer;

transition:var(--transition);

}

.switch-slider:before{

content:"";

position:absolute;

width:22px;

height:22px;

left:3px;

top:3px;

background:#fff;

border-radius:50%;

transition:var(--transition);

box-shadow:var(--shadow-xs);

}

.switch input:checked + .switch-slider{

background:var(--primary);

}

.switch input:checked + .switch-slider:before{

transform:translateX(22px);

}

/* ==========================================================
   Form Row
========================================================== */

.form-row{

display:grid;

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

gap:18px;

}

/* ==========================================================
   Divider
========================================================== */

.divider{

height:1px;

background:var(--border-light);

margin:24px 0;

}

/* ==========================================================
   Section Title
========================================================== */

.section-title{

font-size:18px;

font-weight:600;

margin-bottom:18px;

color:var(--text-title);

}

/* ==========================================================
   Badge
========================================================== */

.badge{
display:inline-flex;
align-items:center;
justify-content:center;
height:24px;
padding:0 10px;
border-radius:999px;
font-size:12px;
font-weight:600;
white-space:nowrap;
}

.badge-primary{
background:#E8F0F8;
color:var(--primary);
}

.badge-success{
background:var(--status-green-bg);
color:var(--status-green-text);
}

.badge-warning{
background:var(--status-yellow-bg);
color:var(--status-yellow-text);
}

.badge-danger{
background:var(--status-red-bg);
color:var(--status-red-text);
}

.badge-info{
background:var(--status-blue-bg);
color:var(--status-blue-text);
}

/* ==========================================================
   Status
========================================================== */

.status{
display:inline-flex;
align-items:center;
gap:8px;
font-size:13px;
font-weight:600;
}

.status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
}

.status-success::before{
background:var(--success);
}

.status-warning::before{
background:var(--warning);
}

.status-danger::before{
background:var(--danger);
}

.status-info::before{
background:#2196F3;
}

/* ==========================================================
   Card
========================================================== */

.card{
background:var(--bg-card);
border:1px solid var(--border-light);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-sm);
overflow:hidden;
}

.card-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 24px;
border-bottom:1px solid var(--border-light);
}

.card-title{
font-size:18px;
font-weight:600;
color:var(--text-title);
}

.card-subtitle{
font-size:13px;
color:var(--text-light);
margin-top:4px;
}

.card-body{
padding:24px;
}

.card-footer{
padding:18px 24px;
border-top:1px solid var(--border-light);
background:#FCFCFD;
}

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

.table-wrapper{
background:#fff;
border:1px solid var(--border-light);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-sm);
overflow:hidden;
}

.table-toolbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 20px;
border-bottom:1px solid var(--border-light);
gap:16px;
flex-wrap:wrap;
}

.table-actions{
display:flex;
align-items:center;
gap:12px;
}

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

.table{
width:100%;
border-collapse:collapse;
font-size:13px;
}

.table thead{
background:var(--table-header);
}

.table thead th{
padding:14px 16px;
text-align:left;
font-weight:600;
color:var(--text-title);
border-bottom:1px solid var(--border);
white-space:nowrap;
}

.table tbody td{
padding:14px 16px;
border-bottom:1px solid var(--border-light);
vertical-align:middle;
}

.table tbody tr{
transition:background var(--transition-fast);
}

.table tbody tr:hover{
background:var(--table-hover);
}

.table tbody tr:nth-child(even){
background:var(--table-stripe);
}

.table tbody tr:nth-child(even):hover{
background:var(--table-hover);
}

.table .number{
text-align:right;
font-variant-numeric:tabular-nums;
}

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

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

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

.table .primary{
color:var(--primary);
font-weight:600;
}

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

.table-compact thead th{
padding:10px 14px;
}

.table-compact tbody td{
padding:10px 14px;
}

/* ==========================================================
   Table Sticky Header
========================================================== */

.table-sticky{
max-height:600px;
overflow:auto;
}

.table-sticky table thead th{
position:sticky;
top:0;
z-index:2;
background:var(--table-header);
}

/* ==========================================================
   Pagination
========================================================== */

.pagination{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 20px;
border-top:1px solid var(--border-light);
background:#fff;
}

.pagination-info{
font-size:13px;
color:var(--text-light);
}

.pagination-pages{
display:flex;
align-items:center;
gap:8px;
}

.page-btn{
display:flex;
align-items:center;
justify-content:center;
min-width:36px;
height:36px;
padding:0 10px;
border:1px solid var(--border);
border-radius:var(--radius-sm);
background:#fff;
font-size:13px;
cursor:pointer;
transition:var(--transition);
}

.page-btn:hover{
background:#F5F7FA;
border-color:#C7D0DB;
}

.page-btn.active{
background:var(--primary);
border-color:var(--primary);
color:#fff;
}

.page-btn.disabled{
opacity:.45;
pointer-events:none;
}

/* ==========================================================
   Toolbar
========================================================== */

.toolbar{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
margin-bottom:20px;
flex-wrap:wrap;
}

.toolbar-left,
.toolbar-right{
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
}

/* ==========================================================
   Filter Bar
========================================================== */

.filter-bar{
display:flex;
align-items:center;
gap:14px;
flex-wrap:wrap;
padding:18px;
background:#fff;
border:1px solid var(--border-light);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-xs);
margin-bottom:20px;
}

.filter-bar .form-group{
margin-bottom:0;
min-width:180px;
flex:1;
}

/* ==========================================================
   Data Empty
========================================================== */

.empty{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:60px 20px;
text-align:center;
}

.empty svg{
width:72px;
height:72px;
margin-bottom:20px;
fill:#CBD5E1;
}

.empty-title{
font-size:18px;
font-weight:600;
margin-bottom:8px;
color:var(--text-title);
}

.empty-text{
font-size:14px;
color:var(--text-light);
max-width:420px;
line-height:1.7;
}

/* ==========================================================
   Modal
========================================================== */

.modal{
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
display:none;
align-items:center;
justify-content:center;
background:rgba(15,23,42,.45);
backdrop-filter:blur(4px);
z-index:1000;
}

.modal.show{
display:flex;
animation:fadeIn .2s ease;
}

.modal-dialog{
width:600px;
max-width:92vw;
background:#fff;
border-radius:var(--radius-lg);
box-shadow:var(--shadow-xl);
overflow:hidden;
animation:modalUp .25s ease;
max-height:90vh;
display:flex;
flex-direction:column;
}

.modal-sm{
width:420px;
}

.modal-lg{
width:900px;
}

.modal-xl{
width:1200px;
}

.modal-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:20px 24px;
border-bottom:1px solid var(--border-light);
flex-shrink:0;
}

.modal-title{
font-size:18px;
font-weight:600;
color:var(--text-title);
}

.modal-close{
width:36px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
border:none;
background:transparent;
border-radius:50%;
cursor:pointer;
font-size:20px;
transition:all .2s;
color:var(--text-light);
}

.modal-close:hover{
background:#F3F4F6;
color:var(--text);
}

.modal-body{
padding:24px;
max-height:65vh;
overflow-y:auto;
flex:1;
}

.modal-footer{
display:flex;
justify-content:flex-end;
gap:12px;
padding:18px 24px;
border-top:1px solid var(--border-light);
background:#FCFCFD;
flex-shrink:0;
}

/* ==========================================================
   Drawer
========================================================== */

.drawer{
position:fixed;
top:0;
right:-460px;
width:460px;
height:100%;
background:#fff;
box-shadow:var(--shadow-xl);
transition:right var(--transition);
z-index:1100;
display:flex;
flex-direction:column;
}

.drawer.show{
right:0;
}

.drawer-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:20px 24px;
border-bottom:1px solid var(--border-light);
flex-shrink:0;
}

.drawer-title{
font-size:18px;
font-weight:600;
color:var(--text-title);
}

.drawer-body{
flex:1;
overflow-y:auto;
padding:24px;
}

.drawer-footer{
padding:18px 24px;
border-top:1px solid var(--border-light);
display:flex;
justify-content:flex-end;
gap:12px;
flex-shrink:0;
}

.drawer-backdrop{
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(15,23,42,.35);
z-index:1050;
display:none;
}

.drawer-backdrop.show{
display:block;
}

/* ==========================================================
   Toast
========================================================== */

.toast-container{
position:fixed;
top:20px;
right:20px;
display:flex;
flex-direction:column;
gap:14px;
z-index:2000;
pointer-events:none;
}

.toast{
display:flex;
align-items:center;
gap:14px;
min-width:320px;
max-width:480px;
padding:16px 18px;
background:#fff;
border-radius:var(--radius-md);
box-shadow:var(--shadow-lg);
border-left:4px solid var(--primary);
animation:toastIn .25s ease;
pointer-events:all;
}

.toast-success{
border-left-color:var(--success);
}

.toast-warning{
border-left-color:var(--warning);
}

.toast-danger{
border-left-color:var(--danger);
}

.toast-icon{
font-size:20px;
flex-shrink:0;
}

.toast-content{
flex:1;
}

.toast-title{
font-size:14px;
font-weight:600;
margin-bottom:3px;
}

.toast-message{
font-size:13px;
color:var(--text-light);
line-height:1.5;
}

.toast-close{
background:none;
border:none;
cursor:pointer;
font-size:18px;
color:var(--text-light);
padding:4px;
flex-shrink:0;
}

/* ==========================================================
   Alert
========================================================== */

.alert{
display:flex;
align-items:flex-start;
gap:14px;
padding:16px 18px;
border-radius:var(--radius-md);
margin-bottom:18px;
font-size:14px;
line-height:1.5;
}

.alert-success{
background:var(--status-green-bg);
color:var(--status-green-text);
}

.alert-warning{
background:var(--status-yellow-bg);
color:var(--status-yellow-text);
}

.alert-danger{
background:var(--status-red-bg);
color:var(--status-red-text);
}

.alert-info{
background:var(--status-blue-bg);
color:var(--status-blue-text);
}

/* ==========================================================
   Progress
========================================================== */

.progress{
width:100%;
height:8px;
background:#E5E7EB;
border-radius:999px;
overflow:hidden;
}

.progress-bar{
height:100%;
width:0%;
background:var(--primary);
transition:width .35s ease;
border-radius:999px;
}

.progress-bar.progress-success{
background:var(--success);
}

.progress-bar.progress-warning{
background:var(--warning);
}

.progress-bar.progress-danger{
background:var(--danger);
}

/* ==========================================================
   Spinner
========================================================== */

.spinner{
width:34px;
height:34px;
border:3px solid #E5E7EB;
border-top-color:var(--primary);
border-radius:50%;
animation:spin .8s linear infinite;
}

.spinner-sm{
width:20px;
height:20px;
border-width:2px;
}

.spinner-lg{
width:48px;
height:48px;
border-width:4px;
}

.loading{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:60px 20px;
gap:16px;
}

.loading-text{
font-size:14px;
color:var(--text-light);
}

/* ==========================================================
   Skeleton
========================================================== */

.skeleton{
background:linear-gradient(
90deg,
#F3F4F6 25%,
#E5E7EB 50%,
#F3F4F6 75%
);
background-size:400% 100%;
animation:skeleton 1.4s ease infinite;
border-radius:var(--radius-sm);
}

.skeleton-text{
height:14px;
margin-bottom:10px;
width:100%;
}

.skeleton-text:last-child{
width:60%;
}

.skeleton-title{
height:22px;
width:60%;
margin-bottom:18px;
}

.skeleton-avatar{
width:56px;
height:56px;
border-radius:50%;
}

.skeleton-card{
height:180px;
border-radius:var(--radius-lg);
}

/* ==========================================================
   Tooltip
========================================================== */

.tooltip{
position:absolute;
padding:8px 12px;
background:#111827;
color:#fff;
font-size:12px;
border-radius:6px;
white-space:nowrap;
opacity:0;
pointer-events:none;
transition:opacity .2s;
z-index:9999;
}

.tooltip.show{
opacity:1;
}

/* ==========================================================
   Tag / Chip
========================================================== */

.tag{
display:inline-flex;
align-items:center;
gap:6px;
height:28px;
padding:0 12px;
background:#F3F4F6;
border-radius:var(--radius-sm);
font-size:12px;
font-weight:500;
color:var(--text);
}

.tag-removable{
padding-right:8px;
}

.tag-remove{
display:flex;
align-items:center;
justify-content:center;
width:16px;
height:16px;
border-radius:50%;
background:#CBD5E1;
color:#fff;
font-size:10px;
cursor:pointer;
}

.tag-remove:hover{
background:var(--danger);
}

/* ==========================================================
   Tabs
========================================================== */

.tabs{
display:flex;
border-bottom:1px solid var(--border);
margin-bottom:20px;
}

.tab{
padding:12px 20px;
font-size:14px;
font-weight:500;
color:var(--text-light);
cursor:pointer;
border-bottom:2px solid transparent;
transition:all var(--transition);
}

.tab:hover{
color:var(--text);
}

.tab.active{
color:var(--primary);
border-bottom-color:var(--primary);
font-weight:600;
}

/* ==========================================================
   Avatar
========================================================== */

.avatar-img{
width:40px;
height:40px;
border-radius:50%;
object-fit:cover;
}

.avatar-sm{
width:32px;
height:32px;
font-size:14px;
}

.avatar-lg{
width:56px;
height:56px;
font-size:24px;
}

.avatar-group{
display:flex;
}

.avatar-group .avatar-img,
.avatar-group .avatar{
margin-left:-8px;
border:2px solid #fff;
}

.avatar-group .avatar-img:first-child,
.avatar-group .avatar:first-child{
margin-left:0;
}

/* ==========================================================
   Animations
========================================================== */

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

@keyframes fadeIn{
from{
opacity:0;
}
to{
opacity:1;
}
}

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

@keyframes toastIn{
from{
opacity:0;
transform:translateX(40px);
}
to{
opacity:1;
transform:translateX(0);
}
}

@keyframes skeleton{
0%{
background-position:100% 0;
}
100%{
background-position:-100% 0;
}
}