:root {
	--sidebar-w: 240px;
	--topbar-h: 64px;
	--bg:        #f4f5f7;
	--surface:   #ffffff;
	--sidebar-bg:#0f172a;
	--sidebar-hover: rgba(255,255,255,.06);
	--sidebar-active: rgba(99,102,241,.18);
	--accent:    #6366f1;
	--accent-2:  #818cf8;
	--text-main: #1e293b;
	--text-muted:#64748b;
	--border:    #e2e8f0;
	--badge-new: #dcfce7;
	--badge-new-text: #16a34a;
	--badge-proc:#fef9c3;
	--badge-proc-text:#ca8a04;
	--badge-ship:#dbeafe;
	--badge-ship-text:#1d4ed8;
	--badge-done:#f1f5f9;
	--badge-done-text:#475569;
	--badge-hold:#fedfc3;
	--badge-hold-text:#c95a04;
	--badge-cancel:#fee2e2;
	--badge-cancel-text:#dc2626;
	--radius:    10px;
}


body {
	font-family: 'DM Sans', sans-serif;
}

.fw-bold, .fw_bold{font-weight:700}

.fw-light, .fw_light{font-weight:300}

.fs-1{font-size:2.5rem}
.fs-2{font-size:2rem}
.fs-3{font-size:1.75rem}
.fs-4{font-size:1.5rem}
.fs-5{font-size:1.25rem}
.fs-6{font-size:1rem}

.w-10, .w_10{width:10%}
.w-20, .w_20{width:20%}
.w-30, .w_30{width:30%}
.w-40, .w_40{width:40%}
.w-50, .w_50{width:50%}
.w-60, .w_60{width:60%}
.w-70, .w_70{width:70%}
.w-80, .w_80{width:80%}
.w-90, .w_90{width:90%}

.fs_10{font-size:10%}
.fs_20{font-size:20%}
.fs_30{font-size:30%}
.fs_40{font-size:40%}
.fs_50{font-size:50%}
.fs_60{font-size:60%}
.fs_70{font-size:70%}
.fs_80{font-size:80%}
.fs_90{font-size:90%}
.fs_110{font-size:110%}
.fs_120{font-size:120%}
.fs_130{font-size:130%}
.fs_140{font-size:140%}
.fs_150{font-size:150%}
.fs_160{font-size:160%}
.fs_170{font-size:170%}
.fs_180{font-size:180%}
.fs_190{font-size:190%}
.fs_200{font-size:200%}
.fs_210{font-size:210%}
.fs_220{font-size:220%}
.fs_230{font-size:230%}
.fs_240{font-size:240%}
.fs_250{font-size:250%}
.fs_260{font-size:260%}
.fs_270{font-size:270%}
.fs_280{font-size:280%}
.fs_290{font-size:290%}
.fs_300{font-size:300%}
.fs_310{font-size:310%}
.fs_320{font-size:320%}
.fs_330{font-size:330%}
.fs_340{font-size:340%}
.fs_350{font-size:350%}
.fs_360{font-size:360%}
.fs_370{font-size:370%}
.fs_380{font-size:380%}
.fs_390{font-size:390%}
.fs_400{font-size:400%}


.fw-100, .fw_100{
    font-weight: 100 !important;
}
.fw-200, .fw_200{
    font-weight: 200 !important;
}
.fw-300, .fw_300{
    font-weight: 300 !important;
}
.fw-400, .fw_400{
    font-weight: 400 !important;
}
.fw-500, .fw_500{
    font-weight: 500 !important;
}
.fw-600, .fw_600{
    font-weight: 600 !important;
}
.fw-700, .fw_700{
    font-weight: 700 !important;
}
.fw-800, .fw_800{
    font-weight: 800 !important;
}
.fw-900, .fw_900{
    font-weight: 900 !important;
}

/* ── TOOLTIP ─────────────────────────────────── */
.tooltip-wrap { position:relative; display:grid; }
.tooltip-wrap .tooltip-tip {
	position:absolute;
	bottom:calc(100% + 6px);
	left:50%;
	transform:translateX(-50%);
	background:#1e293b;
	color:#fff;
	font-size:11px;
	font-weight:500;
	white-space:nowrap;
	padding:4px 8px;
	border-radius:5px;
	pointer-events:none;
	opacity:0;
	transition:opacity .15s;
	z-index:10;
}
.tooltip-wrap .tooltip-tip::after {
	content:'';
	position:absolute;
	top:100%;left:50%;
	transform:translateX(-50%);
	border:4px solid transparent;
	border-top-color:#1e293b;
}
.tooltip-wrap:hover .tooltip-tip { opacity:1; }