.auth-left {
background:
linear-gradient(135deg,
#6259ca,
#7c71ff);
border-radius: 0px 40px 40px 0px;

color: #fff;

position: relative;

overflow: hidden;
}

.auth-left::before {

content: "";

position: absolute;

width: 500px;
height: 500px;

border-radius: 50%;

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

top: -150px;
right: -150px;
}

.auth-left::after {

content: "";

position: absolute;

width: 400px;
height: 400px;

border-radius: 50%;

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

bottom: -150px;
left: -100px;
}

.auth-content {

max-width: 700px;

padding: 60px;

position: relative;

z-index: 2;
}

.auth-badge {

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

border: 1px solid rgba(255, 255, 255, .2);

color: #fff;

padding: 10px 18px;

font-size: 13px;
}

.auth-title {

font-size: 52px;

font-weight: 800;

line-height: 1.2;
}

.auth-title span {

display: block;

color: #ffd54f;
}

.auth-subtitle {

margin-top: 20px;

font-size: 18px;

opacity: .9;
}

.feature-box {

display: flex;

align-items: center;

gap: 15px;

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

border: 1px solid rgba(255, 255, 255, .12);

padding: 16px;

border-radius: 15px;
}

.feature-box h6 {

margin-bottom: 4px;
color: #fff;
}

.feature-box p {

margin: 0;
font-size: 13px;
color: #e5e7eb;
}

.feature-icon {

width: 50px;
height: 50px;

border-radius: 12px;

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

display: flex;
align-items: center;
justify-content: center;

font-size: 20px;
}

.auth-illustration {

max-height: 340px;

margin-top: 40px;
}

.auth-right {

background: #f5f7fb;
}

.login-card {

width: 100%;
max-width: 480px;

background: #fff;

padding: 45px;

border-radius: 20px;

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

.auth-input {

height: 52px;

border-radius: 12px;

border-color: #e5e7eb;
}

.auth-input:focus {

box-shadow: none;

border-color: #6259ca;
}

.btn-auth {

height: 52px;

border-radius: 12px;

font-weight: 600;

background: #6259ca;

border: none;
}

.btn-auth:hover {

background: #564dc2;
}

.forgot-link {

text-decoration: none;

color: #6259ca;
}

@media(max-width:991px) {

.login-card {

margin: 25px;
}
}

.brand-logo {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
text-decoration: none;
}

.brand-icon {

width: 56px;
height: 56px;

border-radius: 16px;

background:
linear-gradient(135deg,
#4f46e5,
#7c3aed);

display: flex;
align-items: center;
justify-content: center;

color: #fff;
font-size: 28px;

box-shadow:
0 10px 25px rgba(79, 70, 229, .25);
}

.brand-text {
display: flex;
flex-direction: column;
align-items: flex-start;
}

.brand-name {

font-size: 28px;
font-weight: 800;
letter-spacing: -0.03em;
color: #0f172a;
line-height: 1;
}

.brand-tagline {

font-size: 12px;
font-weight: 500;
color: #64748b;
margin-top: 4px;
letter-spacing: .5px;
}

.login-wrapper-inner {

width: 100%;
max-width: 480px;

display: flex;
flex-direction: column;
}

.brand-logo {

display: flex;
align-items: center;
gap: 12px;

text-decoration: none;

margin-bottom: 20px;
}

.auth-right {

padding: 40px;
}
.password-toggle{

position:absolute;

top:50%;

right:15px;

transform:translateY(-50%);

width:36px;
height:36px;

border:none;

background:transparent;

color:#6259ca !important;

display:flex;

align-items:center;

justify-content:center;

border-radius:8px;

transition:all .2s ease;
}

.password-toggle:hover{

background:#f1f5f9;

color:#6259ca;
}

.password-toggle:focus{

outline:none;

box-shadow:none;
}

.password-toggle i{

font-size:20px;
}
#preloader{
position:fixed;
inset:0;
z-index:999999;
background:rgba(255,255,255,.85);
backdrop-filter:blur(2px);

display:flex;
align-items:center;
justify-content:center;
}

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

.loader-icon{
width:70px;
height:70px;
margin:auto;
border-radius:50%;
background:#6259ca15;

display:flex;
align-items:center;
justify-content:center;
}

.loader-icon i{
font-size:32px;
color:#6259ca;
}

.loader-content h5{
margin:15px 0 5px;
color:#6259ca;
font-weight:600;
}

.loader-content p{
margin:0 0 15px;
color:#6c757d;
font-size:13px;
}

.loader-dots{
display:flex;
justify-content:center;
gap:6px;
}

.loader-dots span{
width:8px;
height:8px;
border-radius:50%;
background:#6259ca;
animation:bounce 1.2s infinite;
}

.loader-dots span:nth-child(2){
animation-delay:.2s;
}

.loader-dots span:nth-child(3){
animation-delay:.4s;
}

@keyframes bounce{
0%,80%,100%{
transform:scale(.5);
opacity:.5;
}
40%{
transform:scale(1);
opacity:1;
}
}

.form-section{
border:1px solid #e5e7eb;
border-radius:12px;
padding:20px;
margin-bottom:25px;
background:#fff;
}

.form-section legend{
float:none;
width:auto;
padding:0 10px;
margin-bottom:0;
font-size:12px !important;
font-weight:600;
color:#6259ca;
}


.vendor-preview-icon{

width:80px;
height:80px;

border-radius:20px;

background:#6259ca;

color:#fff;

margin:auto;

display:flex;
align-items:center;
justify-content:center;

font-size:32px;
}

.timeline-item{

position:relative;

padding-left:30px;

margin-bottom:25px;
}

.timeline-item::before{

content:"";

width:12px;
height:12px;

background:#6259ca;

border-radius:50%;

position:absolute;

left:0;
top:6px;
}


/* Edit Delete Button css */
.action-btn{
width:34px;
height:34px;
display:inline-flex;
align-items:center;
justify-content:center;
border:none;
border-radius:6px;
background:#f8f9fa;
color:#6c757d;
transition:.2s;
}

.editUrl:hover{
background:#e7f1ff;
color:#0d6efd;
}

.deleteBtn:hover{
background:#fdeaea;
color:#dc3545;
}
.action-badge{
border:none;
border-radius:6px;
padding:6px 8px;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:.2s ease;
}

.edit-badge{
background:#e8f1ff;
color:#0d6efd;
}

.edit-badge:hover{
background:#d7e8ff;
color:#0a58ca;
}

.delete-badge{
background:#fdeaea;
color:#dc3545;
}

.delete-badge:hover{
background:#f9d7d9;
color:#b02a37;
}

.show-badge{
background:#e0f7fa;
color:#00acc1;
}

.show-badge:hover{
background:#b2ebf2;
color:#00838f;
}


.custom-delete-popup {
border-radius: 16px;
}

.swal-action-buttons {
gap: 12px;
margin-top: 20px;
}

.delete-confirm-btn,
.delete-cancel-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 140px;
height: 44px;
border-radius: 10px;
font-weight: 600;
font-size: 14px;
transition: all .2s ease;
}

.delete-confirm-btn {
background: #dc3545;
color: #fff;
border: none;
}

.delete-confirm-btn:hover {
transform: translateY(-1px);
}

.delete-cancel-btn {
background: #f8f9fa;
color: #495057;
border: 1px solid #dee2e6;
}

.delete-cancel-btn:hover {
background: #e9ecef;
}

.btn-content {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1;
}

.btn-content i {
font-size: 18px;
}
.swal2-actions{
display: flex;
gap: 20px !important;
}
.view-badge {
color: #0d6efd;
background: rgba(13, 110, 253, 0.12);
}
/* Primary */
.primary-badge {
color: #0d6efd;
background: rgba(13, 110, 253, 0.12);
}

/* Success */
.success-badge {
color: #198754;
background: rgba(25, 135, 84, 0.12);
}

/* Danger */
.danger-badge {
color: #dc3545;
background: rgba(220, 53, 69, 0.12);
}

/* Warning */
.warning-badge {
color: #fd7e14;
background: rgba(253, 126, 20, 0.12);
}

/* Info */
.info-badge {
color: #0dcaf0;
background: rgba(13, 202, 240, 0.12);
}

/* Purple */
.purple-badge {
color: #6f42c1;
background: rgba(111, 66, 193, 0.12);
}

/* Dark */
.dark-badge {
color: #212529;
background: rgba(33, 37, 41, 0.08);
}

.view-badge:hover {
color: #fff;
background: #0d6efd;
}.back-icon{
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 100px !important;
color: #6c757d;
text-decoration: none;
}
.back-icon i{
font-size: 25px;
font-weight: bolder;
}

.back-icon i{
transition: all .3s ease;
}

.back-icon:hover i{
transform: translateX(-6px);
}

/* Interactive Dashboard Cards */
.custom-card {
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}



.custom-card .rounded-3, .custom-card .rounded-circle {
transition: all 0.3s ease;
}


.list-group-item-action {
transition: all 0.2s ease;
}

.list-group-item-action:hover {
transform: translateX(5px);
background-color: rgba(var(--bs-primary-rgb), 0.05) !important;
}

.tracking-wider {
letter-spacing: 0.05em;
}

.fs-14 {
font-size: 14px;
}
.section-title {
font-size: 1.1rem;
font-weight: 700;
color: #334155;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.section-title i {
color: #6B62DD;
}
.form-section-card {
border: none;
border-radius: 10px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
margin-bottom: 2rem;
transition: transform 0.2s ease;
}
.form-section-card:hover {
transform: translateY(-2px);
}
.media-upload-wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.image-upload-box {
position: relative;
aspect-ratio: 1;
border: 2px dashed #e2e8f0;
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
background: #f8fafc;
overflow: hidden;
}
.image-upload-box:hover {
border-color: #6B62DD;
background: #f1f5f9;
}
.image-upload-box i {
font-size: 2rem;
color: #94a3b8;
margin-bottom: 0.5rem;
}
.image-upload-box span {
font-size: 0.75rem;
color: #64748b;
font-weight: 500;
}
.preview-item {
position: relative;
aspect-ratio: 1;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.preview-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.remove-preview {
position: absolute;
top: 5px;
right: 5px;
background: rgba(239, 44, 44, 0.9);
color: white;
border: none;
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 12px;
transition: scale 0.2s ease;
}
.remove-preview:hover {
scale: 1.1;
}
.upload-animation {
position: absolute;
bottom: 0;
left: 0;
height: 4px;
background: #6B62DD;
width: 0%;
transition: width 0.4s ease;
}
.btn-sm-right {
float: right;
padding: 0.4rem 1rem;
font-size: 0.75rem;
font-weight: 600;
}
.variant-table-container {
border-radius: 12px;
overflow: hidden;
border: 1px solid #e2e8f0;
}
.variant-table-container thead {
background: #f8fafc;
}
.section-title {
font-size: 1.1rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.section-title i {
color: #6B62DD;
font-size: 1.1rem;
}
.form-section-card {
border: 1px solid #e2e8f0;
border-radius: 8px;
box-shadow: none;
margin-bottom: 1.5rem;
background: #ffffff;
.card-header {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
border-bottom: 1px solid #e2e8f0 !important;
border-radius: 12px 12px 0 0 !important;
padding: 18px 24px !important;
position: relative;
overflow: hidden;
}

/* Accent Line */
.card-header::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 5px;
height: 100%;
background: linear-gradient(180deg, #2563eb, #3b82f6);
}

/* Title */
.card-header .card-title {
margin: 0;
font-size: 18px;
font-weight: 700;
color: #0f172a;
letter-spacing: -.3px;
}

/* Subtitle */
.card-header .card-subtitle {
margin: 6px 0 0;
font-size: 13px;
color: #64748b;
font-weight: 500;
} }

.form-label {
font-size: 0.85rem;
color: #475569;
font-weight: 600;
margin-bottom: 0.4rem;
}
.form-control, .form-select {
border-radius: 6px;
border: 1px solid #cbd5e1;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
}
.form-control:focus, .form-select:focus {
border-color: #6B62DD;
box-shadow: none;
}
.media-upload-wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 1rem;
}
.image-upload-box {
position: relative;
aspect-ratio: 1;
border: 2px dashed #cbd5e1;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
background: #f8fafc;
overflow: hidden;
}
.image-upload-box i {
font-size: 1.5rem;
color: #94a3b8;
margin-bottom: 0.25rem;
}
.image-upload-box span {
font-size: 0.7rem;
color: #64748b;
font-weight: 500;
}
.preview-item {
position: relative;
aspect-ratio: 1;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e2e8f0;
}
.preview-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.remove-preview {
position: absolute;
top: 4px;
right: 4px;
background: rgba(220, 38, 38, 0.9);
color: white;
border: none;
border-radius: 4px;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 10px;
}
.upload-animation {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
background: #6B62DD;
width: 0%;
transition: width 0.3s ease;
}
.btn-sm-right {
padding: 0.35rem 0.75rem;
font-size: 0.75rem;
font-weight: 500;
border-radius: 6px;
}
/* ==============================
      Premium Variant Table
================================ */

.variant-table-container{
    border:1px solid #e5e7eb;
    border-radius:12px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 4px 16px rgba(15,23,42,.05);
}

.variant-table-container table{
    width:100%;
    table-layout:fixed;          /* Equal column width */
    border-collapse:collapse;
}

.variant-table-container thead{
    background:#f8fafc;
}

.variant-table-container th{

    padding:14px 12px;

    text-align:center;

    font-size:12px;
    font-weight:600;

    color:#475569;
    text-transform:uppercase;
    letter-spacing:.4px;

    border-bottom:1px solid #e5e7eb;
    border-right:1px solid #eef2f7;

    white-space:nowrap;
}

.variant-table-container th:last-child{
    border-right:none;
}

.variant-table-container td{

    padding:12px;

    vertical-align:middle;

    border-bottom:1px solid #f1f5f9;
    border-right:1px solid #f1f5f9;

    text-align:center;
}

.variant-table-container td:last-child{
    border-right:none;
}

.variant-table-container tbody tr{

    transition:.2s;
}

.variant-table-container tbody tr:hover{

    background:#f8fafc;
}

/* Inputs */

.variant-row .form-control,
.variant-row .form-select{

    width:100%;

    height:38px;

    border:1px solid #dbe3ec;
    border-radius:8px;

    background:#fff;

    font-size:14px;

    box-shadow:none;

    transition:.2s;
}

.variant-row .form-control:focus,
.variant-row .form-select:focus{

    border-color:#3b82f6;

    box-shadow:0 0 0 3px rgba(59,130,246,.12);
}

/* Action Buttons */

.variant-action-group{

    display:inline-flex;

    align-items:center;

    gap:4px;

    padding:4px;

    background:#f8fafc;

    border:1px solid #e2e8f0;

    border-radius:10px;
}

.btn-variant{

    width:32px;
    height:32px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:none;

    border-radius:8px;

    cursor:pointer;

    transition:.2s;

    font-size:16px;
}

.btn-variant-primary{

    background:#eff6ff;

    color:#2563eb;
}

.btn-variant-primary:hover{

    background:#2563eb;

    color:#fff;
}

.btn-variant-danger{

    background:#fef2f2;

    color:#dc2626;
}

.btn-variant-danger:hover{

    background:#dc2626;

    color:#fff;
}
.variant-table-container th:last-child,
.variant-table-container td:last-child{
    width:90px;
}
.variant-table-container th:nth-child(1),
.variant-table-container td:nth-child(1){
    width:90px;
}

.variant-table-container th:last-child,
.variant-table-container td:last-child{
    width:90px;
}
.bell-shake {
animation: bellShake 0.8s ease;
}

@keyframes bellShake {

0% { transform: rotate(0deg); }

20% { transform: rotate(15deg); }

40% { transform: rotate(-15deg); }

60% { transform: rotate(10deg); }

80% { transform: rotate(-10deg); }

100% { transform: rotate(0deg); }
}
/* =========================
TOAST CONTAINER
========================= */
#custom-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

/* =========================
TOAST CARD
========================= */
.custom-toast {
    position: relative !important;
    width: 350px;
    padding: 16px !important;
    border-radius: 16px !important;
    overflow: visible !important;
    pointer-events: auto;
    backdrop-filter: blur(12px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important;
    opacity: 0;
    transform: translateX(120px) scale(.95);
    transition: all .35s cubic-bezier(.4, 0, .2, 1);
    border: none !important;
    color: #fff !important;
}

.custom-toast.show {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.custom-toast.hide {
    opacity: 0;
    transform: translateX(120px) scale(.95);
}

/* =========================
CLOSE BUTTON (TOP RIGHT)
========================= */
.toast-close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    background: transparent !important;
    border: none !important;
    color: rgba(255,255,255,0.7) !important;
    cursor: pointer !important;
    font-size: 16px !important;
    z-index: 10 !important;
    transition: all 0.2s ease !important;
    line-height: 1 !important;
}

.toast-close:hover {
    color: #fff !important;
    transform: scale(1.2) !important;
}

/* =========================
CONTENT LAYOUT
========================= */
.toast-content {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    width: 100% !important;
    padding-right: 20px !important;
}

.toast-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,0.2) !important;
    color: #fff !important;
    font-size: 16px !important;
    margin-top: 2px !important;
    box-shadow: none !important;
}

.toast-text {
    flex: 1 !important;
    color: #fff !important;
}

.toast-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin-bottom: 2px !important;
}

.toast-message {
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: rgba(255,255,255,0.9) !important;
}

.toast-link {
    display: block !important;
    margin-top: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-decoration: underline !important;
}

/* =========================
THEMES (Vibrant Gradients)
========================= */
.custom-toast-success {
    background: linear-gradient(135deg, #10b981, #059669) !important;
}

.custom-toast-info {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
}

.custom-toast-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
}

.custom-toast-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
}

/* Progress Bar */
.toast-progress {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 3px !important;
    width: 100% !important;
    background: rgba(255,255,255,0.3) !important;
    animation: toastProgress 7s linear forwards !important;
}

@keyframes toastProgress {
    from { width: 100%; }
    to { width: 0%; }
}

.toast-unread-dot {
    display: none !important; /* Remove duplicate dot if using premium layout */
}
.action-badge{
border:none;
border-radius:10px;
padding:6px 10px;
}

.dropdown-menu{
min-width:220px;
border-radius:14px;
padding:8px;
}

.dropdown-item{
border-radius:10px;
padding:10px 12px;

display:flex;
align-items:center;

font-size:14px;
font-weight:500;
}

.dropdown-item:hover{
background:#f8fafc;
}

.dropdown-item i{
font-size:16px;
}

.dropdown-toggle::after{
display:none;
}
.pa-filter-bar{
padding: 5px;
}

.pa-filter-label{
font-size:12px;
font-weight:600;
color:#64748b;
text-transform:uppercase;
letter-spacing:.5px;
}

.pa-btn-filter{
height:42px;
border:none;
border-radius:12px;

background:
linear-gradient(
135deg,
#6259ca,
#7c71ff
);

color:#fff;
font-weight:600;

box-shadow:
0 8px 20px rgba(98,89,202,.25);
}

.pa-btn-filter:hover{
color:#fff;

background:
linear-gradient(
135deg,
#564dc2,
#6e63ff
);
}

.pa-btn-reset{
width:42px;
height:42px;

border-radius:12px;

display:flex;
align-items:center;
justify-content:center;
}

.pa-btn-reset:hover{
background:#f8fafc;
}

.form-select,
.form-control{
height:42px;
border-radius:12px;
}

.input-group-text{
border-radius:12px 0 0 12px;
}

.input-group .form-control{
border-radius:0 12px 12px 0;
}


/* Hero */
.pd-hero {
    background: #f8f7ff;
    border: 0.5px solid rgba(83,74,183,.15);
    border-radius: 16px;
    padding: 1.5rem 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.pd-hero-left { display: flex; align-items: center; gap: 1.1rem; }
.pd-thumb {
    width: 72px; height: 72px;
    border-radius: 14px;
    background: #fff;
    border: 0.5px solid rgba(0,0,0,.08);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumb-placeholder { font-size: 30px; color: #aaa; }
.pd-hero-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
    line-height: 1.2;
}
.pd-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pd-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 11px;
    border-radius: 50px;
    font-size: 11.5px;
    font-weight: 600;
}
.pd-pill-purple { background: #EEEDFE; color: #3C3489; }
.pd-pill-blue   { background: #E6F1FB; color: #0C447C; }
.pd-pill-green  { background: #EAF3DE; color: #27500A; }
.pd-pill-amber  { background: #FAEEDA; color: #633806; }
.pd-pill-red    { background: #FCEBEB; color: #791F1F; }
.pd-pill-gray   { background: #F1EFE8; color: #444441; }

/* KPI strip */
.pd-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 1rem;
}
.pd-kpi {
    background: #fff;
    border: 0.5px solid rgba(0,0,0,.07);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 14px;
}
.pd-kpi-icon {
    width: 44px; height: 44px;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.kpi-purple { background: #EEEDFE; color: #3C3489; }
.kpi-blue   { background: #E6F1FB; color: #0C447C; }
.kpi-red    { background: #FCEBEB; color: #791F1F; }
.pd-kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: #888; font-weight: 600; }
.pd-kpi-value { font-size: 1.5rem; font-weight: 700; color: #0f172a; line-height: 1.1; margin-top: 2px; }

/* Sections */
.pd-section {
    background: #fff;
    border: 0.5px solid rgba(0,0,0,.07);
    border-radius: 14px;

    overflow: hidden;
}
.pd-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: .9rem 1.4rem;
    border-bottom: 0.5px solid rgba(0,0,0,.06);
}
.pd-section-title { font-size: .875rem; font-weight: 700; color: #0f172a; }
.pd-section-icon  { font-size: 16px; color: #888; }
.pd-section-body  { padding: 1.25rem 1.4rem; }

/* Two-col layout */
.pd-two-col {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

/* Image frame */
.pd-img-frame {
    aspect-ratio: 3/4;
    border-radius: 10px;
    background: #f8f7ff;
    border: 0.5px solid rgba(0,0,0,.07);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 8px;
}
.pd-img-frame img { width: 100%; height: 100%; object-fit: contain; }

/* Meta grid */
.pd-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
}
.pd-meta {
    background: #f8f8fa;
    border-radius: 10px;
    padding: .7rem .9rem;
}
.pd-meta-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #888;
    font-weight: 600;
    margin-bottom: 4px;
}
.pd-meta-val { font-size: .84rem; font-weight: 600; color: #0f172a; }

/* Description */
.pd-desc {
    background: #f8f8fa;
    border-radius: 10px;
    padding: .85rem 1rem;
    font-size: .83rem;
    line-height: 1.7;
    color: #475569;
}

/* Timeline */
.pd-tl { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.pd-tl-item { display: flex; gap: 14px; padding-bottom: 16px; position: relative; }
.pd-tl-item:last-child { padding-bottom: 0; }
.pd-tl-left { display: flex; flex-direction: column; align-items: center; width: 28px; flex-shrink: 0; }
.pd-tl-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.pd-tl-line { width: 1.5px; flex: 1; background: #e2e8f0; margin-top: 5px; }
.pd-tl-item:last-child .pd-tl-line { display: none; }
.tl-approved    { background: #639922; }
.tl-rejected    { background: #E24B4A; }
.tl-pending     { background: #EF9F27; }
.tl-resubmitted { background: #378ADD; }
.pd-tl-label { font-size: .83rem; font-weight: 700; color: #0f172a; margin-bottom: 2px; }
.pd-tl-sub   { font-size: .75rem; color: #64748b; line-height: 1.5; }

/* Table */
.pd-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.pd-table th {
    padding: 8px 10px;
    text-align: left;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #888;
    font-weight: 600;
    border-bottom: 0.5px solid rgba(0,0,0,.07);
}
.pd-table td {
    padding: 9px 10px;
    border-bottom: 0.5px solid rgba(0,0,0,.05);
    color: #334155;
    vertical-align: middle;
}
.pd-table tbody tr:last-child td { border-bottom: none; }
.pd-table tbody tr:hover { background: #fafafa; }
.text-positive { color: #3B6D11; font-weight: 600; }
.text-negative { color: #A32D2D; font-weight: 600; }

/* Accordion */
.pd-accordion-item { border-bottom: 0.5px solid rgba(0,0,0,.06); }
.pd-accordion-item:last-child { border-bottom: none; }
.pd-accordion-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: .85rem 1.4rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: .83rem;
    font-weight: 600;
    color: #0f172a;
    text-align: left;
}
.pd-accordion-btn .chevron {
    margin-left: auto;
    font-size: 15px;
    color: #94a3b8;
    transition: transform .2s ease;
    flex-shrink: 0;
}
.pd-accordion-btn[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.pd-accordion-body { padding: 0 1.4rem 1rem; display: none; }
.pd-accordion-body.show { display: block; }


    /* ── Icon header ── */
    .bcs-icon {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        background: #EEEDFE;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: #534AB7;
        flex-shrink: 0;
    }

    /* ── Back button ── */
    .bcs-back-btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 12px;
        color: #6c757d;
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 20px;
        padding: 6px 14px;
        text-decoration: none;
        transition: background 0.15s;
    }
    .bcs-back-btn:hover { background: #e9ecef; color: #495057; }

    /* ── Section card ── */
    .bcs-section {
        background: #ffffff;
        border: 1px solid #e9ecef;
        border-radius: 12px;
        padding: 20px 22px;
    }
    .bcs-sec-label {
        font-size: 11px;
        font-weight: 600;
        color: #adb5bd;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        margin-bottom: 14px;
    }

    /* ── Error box ── */
    .bcs-error-box {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        background: #fff5f5;
        border: 1px solid #ffc9c9;
        border-radius: 10px;
        padding: 14px 16px;
        font-size: 13px;
        color: #c92a2a;
    }
    .bcs-error-title { font-weight: 600; margin-bottom: 4px; }
    .bcs-error-box ul { padding-left: 16px; margin: 0; }

    /* ── Select ── */
    .bcs-field-label {
        display: block;
        font-size: 13px;
        color: #495057;
        margin-bottom: 6px;
    }
    .bcs-select {
        width: 100%;
        height: 40px;
        border: 1px solid #ced4da;
        border-radius: 8px;
        background: #fff;
        color: #212529;
        font-size: 13px;
        padding: 0 12px;
        outline: none;
        transition: border-color 0.15s;
    }
    .bcs-select:focus { border-color: #534AB7; box-shadow: 0 0 0 3px rgba(83,74,183,0.1); }
    .bcs-select-error { border-color: #E24B4A; }

    /* ── Toggle ── */
    .bcs-toggle-box {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 10px 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 40px;
    }
    .bcs-toggle-label { font-size: 11px; color: #adb5bd; line-height: 1; }
    .bcs-toggle-status { font-size: 12px; font-weight: 600; color: #3B6D11; line-height: 1; margin-top: 2px; }
    .bcs-toggle-status.inactive { color: #adb5bd; }
    .bcs-toggle { position: relative; width: 36px; height: 20px; flex-shrink: 0; }
    .bcs-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
    .bcs-toggle-track {
        position: absolute;
        inset: 0;
        background: #C0DD97;
        border-radius: 20px;
        cursor: pointer;
        transition: background 0.2s;
    }
    .bcs-toggle input:checked ~ .bcs-toggle-track { background: #639922; }
    .bcs-toggle-thumb {
        position: absolute;
        top: 3px; left: 3px;
        width: 14px; height: 14px;
        background: #fff;
        border-radius: 50%;
        transition: transform 0.2s;
        pointer-events: none;
    }
    .bcs-toggle input:checked ~ .bcs-toggle-track .bcs-toggle-thumb { transform: translateX(16px); }

    /* ── Count pill ── */
    .bcs-count-pill {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        font-weight: 500;
        color: #534AB7;
        background: #EEEDFE;
        border: 1px solid #AFA9EC;
        border-radius: 20px;
        padding: 2px 10px;
    }

    /* ── Add button ── */
    .bcs-add-btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 12px;
        font-weight: 500;
        color: #534AB7;
        background: #EEEDFE;
        border: 1px solid #AFA9EC;
        border-radius: 20px;
        padding: 6px 14px;
        cursor: pointer;
        transition: background 0.15s;
    }
    .bcs-add-btn:hover { background: #CECBF6; }

    /* ── Class input row ── */
    .bcs-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        margin-bottom: 8px;
        transition: border-color 0.15s;
    }
    .bcs-row:hover { border-color: #ced4da; }
    .bcs-row:focus-within { border-color: #534AB7; background: #fff; box-shadow: 0 0 0 3px rgba(83,74,183,0.06); }
    .bcs-row-num {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: #EEEDFE;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 600;
        color: #534AB7;
        flex-shrink: 0;
    }
    .bcs-row-input {
        flex: 1;
        border: none;
        background: transparent;
        font-size: 13px;
        color: #212529;
        outline: none;
    }
    .bcs-row-input::placeholder { color: #adb5bd; }
    .bcs-del-btn {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        border: 1px solid #e9ecef;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #adb5bd;
        font-size: 14px;
        flex-shrink: 0;
        padding: 0;
        transition: all 0.15s;
    }
    .bcs-del-btn:hover:not(:disabled) { background: #fff5f5; border-color: #ffc9c9; color: #c92a2a; }
    .bcs-del-btn:disabled { opacity: 0.3; cursor: not-allowed; }

    /* ── Footer ── */
    .bcs-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 16px;
        border-top: 1px solid #e9ecef;
    }
    .bcs-footer-hint {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 12px;
        color: #adb5bd;
    }
    .bcs-footer-hint i { color: #534AB7; font-size: 14px; }
    .bcs-cancel-btn {
        font-size: 13px;
        color: #6c757d;
        text-decoration: none;
        padding: 8px 14px;
        border-radius: 8px;
        transition: color 0.15s;
    }
    .bcs-cancel-btn:hover { color: #212529; }
    .bcs-save-btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 13px;
        font-weight: 600;
        color: #fff;
        background: #534AB7;
        border: none;
        border-radius: 20px;
        padding: 9px 22px;
        cursor: pointer;
        transition: background 0.15s;
    }
    .bcs-save-btn:hover { background: #3C3489; }
    .carousel-control-prev,
.carousel-control-next{
    width:40px;
    height:40px;
    top:50%;
    transform:translateY(-50%);
    background:rgba(0,0,0,.45);
    border-radius:50%;
}

.carousel-indicators button{
    width:10px;
    height:10px;
    border-radius:50%;
}
/* ═══════════════════════════════════════════════
   RESET & ROOT
═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --c-blue:       #2a78d6;
    --c-green:      #1baf7a;
    --c-violet:     #6259ca;
    --c-amber:      #eda100;
    --c-red:        #e34948;
    --c-gray:       #64748b;

    --c-blue-bg:    rgba(42,120,214,.09);
    --c-green-bg:   rgba(27,175,122,.09);
    --c-violet-bg:  rgba(98,89,202,.09);
    --c-amber-bg:   rgba(237,161,0,.09);
    --c-red-bg:     rgba(227,73,72,.09);
    --c-gray-bg:    rgba(100,116,139,.09);

    --page-bg:      #f4f6fb;
    --card-bg:      #ffffff;
    --card-border:  #e8edf5;
    --text-1:       #1a2332;
    --text-2:       #4a5568;
    --text-3:       #94a3b8;
    --divider:      #edf2f7;

    --radius-card:  14px;
    --radius-icon:  10px;
    --radius-pill:  20px;
    --radius-sm:    6px;

    --transition:   .18s ease;
}

/* ═══════════════════════════════════════════════
   LAYOUT ROOT
═══════════════════════════════════════════════ */
.db-root {
    background: var(--page-bg);
    color: var(--text-1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding: 0 0 2.5rem;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════
   SECTION LABEL
═══════════════════════════════════════════════ */
.sec-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text-3);
    margin: 1.5rem 0 .65rem;
}
.sec-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--divider);
}

/* ═══════════════════════════════════════════════
   CUSTOM CARD  (the user's existing class)
═══════════════════════════════════════════════ */
.custom-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    padding: 18px 20px;
    transition: border-color var(--transition), transform var(--transition);
}
.custom-card:hover {
    border-color: var(--c-violet);
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════
   KPI GRID
═══════════════════════════════════════════════ */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 12px;
    margin-bottom: .5rem;
}

.kpi-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    padding: 16px 18px;
    transition: border-color var(--transition), transform var(--transition);
    position: relative;
    overflow: hidden;
}
.kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    background: var(--kpi-accent, var(--c-blue));
    opacity: 0;
    transition: opacity var(--transition);
}

.kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.kpi-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-3);
}
.kpi-icon {
    width: 36px; height: 36px;
    border-radius: var(--radius-icon);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.kpi-value {
    font-size: 30px;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1;
    letter-spacing: -1px;
}
.kpi-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}
.kpi-sub {
    font-size: 11.5px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-3);
}
.kpi-sub i { font-size: 12px; }
.kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: var(--radius-pill);
}
.trend-up   { background: rgba(27,175,122,.12); color: #0f7a55; }
.trend-down { background: rgba(227,73,72,.10);  color: #a32d2d; }
.trend-flat { background: rgba(100,116,139,.10); color: #4a5568; }

/* icon color helpers */
.i-blue   { background: var(--c-blue-bg);   color: var(--c-blue);   }
.i-green  { background: var(--c-green-bg);  color: var(--c-green);  }
.i-violet { background: var(--c-violet-bg); color: var(--c-violet); }
.i-amber  { background: var(--c-amber-bg);  color: var(--c-amber);  }
.i-red    { background: var(--c-red-bg);    color: var(--c-red);    }
.i-gray   { background: var(--c-gray-bg);   color: var(--c-gray);   }

.text-ok   { color: var(--c-green); }
.text-warn { color: var(--c-amber); }
.text-err  { color: var(--c-red);   }
.text-mute { color: var(--text-3);  }

/* ═══════════════════════════════════════════════
   PANEL TITLE
═══════════════════════════════════════════════ */
.panel-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-1);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--divider);
}
.panel-title i { font-size: 16px; }
.panel-title .title-right {
    margin-left: auto;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-3);
}
.badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    margin-left: auto;
}
.badge-blue   { background: var(--c-blue-bg);   color: #185fa5; }
.badge-green  { background: var(--c-green-bg);  color: #0f7a55; }
.badge-amber  { background: var(--c-amber-bg);  color: #854f0b; }
.badge-violet { background: var(--c-violet-bg); color: #4340a0; }

/* ═══════════════════════════════════════════════
   GRID LAYOUTS
═══════════════════════════════════════════════ */
.g2  { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.g3  { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.g3l { display: grid; grid-template-columns: 2fr 1fr 1fr;              gap: 12px; }
.g4  { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }

@media (max-width: 1050px) { .g3l { grid-template-columns: 1fr 1fr; } .g3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .g2,.g3,.g3l,.g4 { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════
   DONUT RING LEGEND
═══════════════════════════════════════════════ */
.ring-wrap   { display: flex; align-items: center; gap: 16px; }
.ring-legend { display: flex; flex-direction: column; gap: 9px; flex: 1; }
.rli { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.rld { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-right: 7px; }
.rll { display: flex; align-items: center; color: var(--text-2); flex: 1; }
.rlv { font-weight: 700; color: var(--text-1); font-size: 13px; }

/* ═══════════════════════════════════════════════
   STOCK HEALTH
═══════════════════════════════════════════════ */
.stat-big {
    font-size: 38px;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1;
    letter-spacing: -1.5px;
}
.stat-sub { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }
.divider  { height: 1px; background: var(--divider); margin: 14px 0; }

.prog-list { display: flex; flex-direction: column; gap: 11px; }
.prog-head {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    color: var(--text-2);
    margin-bottom: 5px;
}
.prog-head b { font-weight: 700; color: var(--text-1); }
.prog-bar  { height: 6px; background: #f1f5f9; border-radius: 3px; overflow: hidden; }
.prog-fill { height: 100%; border-radius: 3px; transition: width .6s ease; }

/* ═══════════════════════════════════════════════
   LEGEND ROW
═══════════════════════════════════════════════ */
.leg-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.leg     { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-2); }
.leg-sq  { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════
   BOARD BREAKDOWN — mini stat counters
═══════════════════════════════════════════════ */
.board-mini-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 14px;
}
.board-mini {
    background: #f8fafc;
    border: 1px solid var(--divider);
    border-radius: 10px;
    padding: 10px 12px;
}
.bm-val  { font-size: 20px; font-weight: 700; line-height: 1; }
.bm-lbl  { font-size: 10px; color: var(--text-3); margin-top: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }

/* ═══════════════════════════════════════════════
   ACTIVITY FEED
═══════════════════════════════════════════════ */
.activity-list { display: flex; flex-direction: column; }
.act-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 0;
    border-bottom: 1px solid var(--divider);
}
.act-row:last-child { border-bottom: none; }

.act-avatar {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; flex-shrink: 0;
}
.act-body  { flex: 1; }
.act-name  { font-size: 12.5px; color: var(--text-1); font-weight: 500; }
.act-meta  { font-size: 11px; color: var(--text-3); margin-top: 1px; }
.act-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════
   QUICK STATS (approval rate card mini row)
═══════════════════════════════════════════════ */
.qs-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.qs-box {
    background: #f8fafc;
    border: 1px solid var(--divider);
    border-radius: 10px;
    padding: 10px 12px;
    text-align: center;
}
.qs-val { font-size: 22px; font-weight: 700; color: var(--text-1); line-height: 1; }
.qs-lbl { font-size: 10px; color: var(--text-3); margin-top: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }

/* ═══════════════════════════════════════════════
   APEX CHART wrapper — remove default margins
═══════════════════════════════════════════════ */
    /* ── Quick Actions ── */
    .quick-actions-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .action-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 20px;
        border-radius: var(--radius-md);
        background: var(--surface-soft);
        border: 1px solid var(--line);
        text-decoration: none;
        color: var(--ink);
        font-size: 12px;
        font-weight: 600;
        text-align: center;
        transition: all .2s ease;
    }
.dashboard-greeting {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 28px 32px;
    margin-bottom: 30px;
    border-radius: 20px;
    background: linear-gradient(135deg, #4F46E5 0%, #2563EB 100%);
    color: #fff;
    overflow: hidden;
    position: relative;
    box-shadow: 0 15px 35px rgba(37, 99, 235, .15);
}

.dashboard-greeting::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
}

.dashboard-greeting::after {
    content: "";
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
}

.greeting-content,
.greeting-date{
    position: relative;
    z-index: 2;
}

.greeting-content h1{
    margin:0;
    font-size:30px;
    font-weight:700;
    line-height:1.3;
}

.greeting-content p{
    margin-top:10px;
    margin-bottom:0;
    font-size:15px;
    color:rgba(255,255,255,.85);
}

.greeting-date{
    text-align:right;
    min-width:180px;
}

.greeting-date div{
    font-size:18px;
    font-weight:600;
}

.greeting-date span{
    font-size:14px;
    color:rgba(255,255,255,.8);
}

@media(max-width:768px){

    .dashboard-greeting{
        flex-direction:column;
        align-items:flex-start;
        padding:24px;
    }

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

    .greeting-content h1{
        font-size:24px;
    }
}
.dashboard-card{
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:14px;
    padding:20px;
    height:100%;
    transition:.2s;
}

.dashboard-card:hover{
    border-color:#d7dee8;
}

.card-header-info{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
}

.card-header-info span{
    font-size:15px;
    font-weight:600;
    color:#334155;
}

.dashboard-card h2{
    margin:0;
    font-size:20px;
    font-weight:700;
    color:#37393d;
}

.card-icon{
    width:40px;
    height:40px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
}

/* Soft Backgrounds */

.success{
    background:#ecfdf3;
    color:#16a34a;
}

.primary{
    background:#eff6ff;
    color:#2563eb;
}

.warning{
    background:#fff7ed;
    color:#d97706;
}

.info{
    background:#ecfeff;
    color:#0891b2;
}

.danger{
    background:#fef2f2;
    color:#dc2626;
}

.purple{
    background:#f5f3ff;
    color:#7c3aed;
}
.quick-action-list{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.quick-action-list a{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 16px;

    border-radius:12px;

    background:#f8fafc;

    color:#334155;

    text-decoration:none;

    transition:.3s;

}

.quick-action-list a:hover{

    background:#4f46e5;

    color:#fff;

}

.quick-action-list i{

    font-size:22px;

}.custom-card-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.custom-revenue-stats {
    display: flex;
    align-items: center;
}

.custom-revenue-item {
    flex: 1;
}

.custom-revenue-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #7a7e86;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.custom-revenue-item h4 {
    font-size: 20px;
    font-weight: 700;
    color: #1c1e21;
    margin: 0;
    letter-spacing: -0.01em;
}

.custom-revenue-divider {
    width: 1px;
    height: 34px;
    background: #ececef;
    margin: 0 16px;
}

.recent-orders-body{
    max-height: 430px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Nice Scrollbar */
.recent-orders-body::-webkit-scrollbar{
    width: 6px;
}

.recent-orders-body::-webkit-scrollbar-thumb{
    background: #d1d5db;
    border-radius: 10px;
}

.recent-orders-body::-webkit-scrollbar-thumb:hover{
    background: #9ca3af;
}

.recent-orders-body::-webkit-scrollbar-track{
    background: transparent;
}
.status-card{
    border:1px solid #eef2f7;
    border-radius:14px;
    padding:14px;
    text-align:center;
    transition:.25s;
    background:#fff;
}

.status-card:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 24px rgba(0,0,0,.06);
}

.status-value{
    font-size:22px;
    font-weight:700;
    color:#111827;
    line-height:1;
    margin-bottom:8px;
}

.status-label{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;
    font-size:13px;
    color:#6b7280;
}

.status-dot{
    width:10px;
    height:10px;
    border-radius:50%;
}

.success .status-dot{
    background:#22c55e;
}

.warning .status-dot{
    background:#f59e0b;
}

.danger .status-dot{
    background:#ef4444;
}
/* ==========================
   Registration Summary
========================== */

.mini-stat{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:18px;
    margin-bottom:14px;

    border:1px solid #eef2f7;
    border-radius:16px;

    background:#fff;

    transition:.25s ease;
}

.mini-stat:last-child{
    margin-bottom:0;
}

.mini-stat:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 30px rgba(15,23,42,.08);
}

.mini-stat small{
    display:block;
    color:#64748b;
    font-size:13px;
    margin-bottom:6px;
    font-weight:500;
}

.mini-stat h5{
    margin:0;
    font-size:24px;
    font-weight:700;
    color:#0f172a;
}

.mini-stat i{
    width:52px;
    height:52px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:14px;

    font-size:24px;
}


/* Green */
.mini-stat.success i{
    color:#10b981;
    background:#ecfdf5;
}

/* Blue */
.mini-stat.primary i{
    color:#2563eb;
    background:#eff6ff;
}

/* Amber */
.mini-stat.warning i{
    color:#f59e0b;
    background:#fffbeb;
}


/* Total Count */

.registration-total{
    text-align:center;
    padding:10px 0 28px;
    border-bottom:1px solid #eef2f7;
    margin-bottom:24px;
}

.registration-total h2{
    font-size:42px;
    font-weight:800;
    color:#111827;
    margin-bottom:6px;
}

.registration-total span{
    color:#64748b;
    font-size:14px;
}
.vendor-card{

    display:flex;
    align-items:center;
    gap:14px;

    padding:14px 0;

    border-bottom:1px solid #eef2f7;
}

.vendor-card:last-child{
    border-bottom:none;
}

.vendor-rank{

    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:12px;

    background:#eef2ff;

    color:#4338ca;

    font-weight:700;
}

.vendor-content{

    flex:1;

}

.vendor-header{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:10px;
}

.vendor-name{

    font-size:14px;
    font-weight:600;

    color:#111827;
}

.vendor-count{

    font-size:15px;
    font-weight:700;

    color:#4338ca;
}

.vendor-progress{

    height:8px;

    border-radius:10px;

    background:#edf2f7;

    overflow:hidden;
}

.vendor-progress-fill{

    height:100%;

    border-radius:10px;

    background:linear-gradient(
        90deg,
        #4f46e5,
        #3b82f6
    );
}
.vendor-scroll{
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
}

/* Custom Scrollbar */
.vendor-scroll::-webkit-scrollbar{
    width: 6px;
}

.vendor-scroll::-webkit-scrollbar-track{
    background: #f3f4f6;
    border-radius: 10px;
}

.vendor-scroll::-webkit-scrollbar-thumb{
    background: #cbd5e1;
    border-radius: 10px;
}

.vendor-scroll::-webkit-scrollbar-thumb:hover{
    background: #94a3b8;
}
.vendor-scroll{
    max-height: 350px;
    overflow-y: auto;
}

/* ==========================================
   OPERATIONS PANEL
========================================== */

.custom-panel{
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:18px;
    overflow:hidden;
    transition:all .3s ease;
    box-shadow:0 2px 8px rgba(15,23,42,.03);
}

.custom-panel:hover{
    border-color:#d6dce5;
    box-shadow:0 14px 32px rgba(15,23,42,.06);
}


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

.custom-panel-header{

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:20px 24px;

    border-bottom:1px solid #eef2f6;

    background:#fcfcfd;
}

.custom-panel-title{

    display:flex;
    align-items:center;
    gap:14px;
}

.custom-panel-icon{

    width:40px;
    height:40px;

    border-radius:14px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#f4f6fb;

    color:#4f46e5;

    font-size:20px;

    transition:.3s;
}

.custom-panel:hover .custom-panel-icon{

    background:#eef2ff;

    transform:rotate(-8deg);
}

.custom-panel-title h5{

    margin:0;

    font-size:16px;

    font-weight:700;

    color:#111827;
}

.custom-panel-title small{

    display:block;

    color:#6b7280;

    margin-top:3px;

    font-size:12px;
}


/* ==========================================
   VIEW ALL
========================================== */

.custom-panel-link{

    display:flex;
    align-items:center;
    gap:6px;

    color:#6b7280;

    text-decoration:none;

    font-size:13px;

    font-weight:600;

    transition:.3s;
}

.custom-panel-link i{

    transition:.3s;
}

.custom-panel-link:hover{

    color:#111827;
}

.custom-panel-link:hover i{

    transform:translateX(4px);
}


/* ==========================================
   BODY
========================================== */

.custom-panel-body{

    max-height:430px;

    overflow-y:auto;
}

.custom-panel-body::-webkit-scrollbar{

    width:6px;
}

.custom-panel-body::-webkit-scrollbar-thumb{

    background:#d1d5db;

    border-radius:50px;
}

.custom-panel-body::-webkit-scrollbar-thumb:hover{

    background:#9ca3af;
}


/* ==========================================
   ORDER ITEM
========================================== */

.order-item{

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:16px;

    padding:18px 22px;

    border-left:3px solid transparent;

    transition:all .25s ease;
}

.order-item:not(:last-child){

    border-bottom:1px solid #f3f4f6;
}

.order-item:hover{

    background:#fafbfc;

    border-left-color:#4f46e5;

    padding-left:28px;
}

.order-left{

    display:flex;
    align-items:center;
    gap:14px;

    min-width:0;
}

.order-avatar{

    width:40px;
    height:40px;

    border-radius:5px;

    background:#f5f6fb;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#4f46e5;

    font-size:20px;

    flex-shrink:0;

    transition:.3s;
}

.order-item:hover .order-avatar{

    background:#eef2ff;

    transform:scale(1.08);
}

.order-title{

    font-size:14px;

    font-weight:700;

    color:#111827;
}

.order-subtitle{

    font-size:13px;

    color:#6b7280;

    margin-top:3px;
}

.order-right{

    text-align:right;
}

.order-price{

    font-size:15px;

    font-weight:700;

    color:#111827;

    margin-bottom:8px;
}


/* ==========================================
   APPROVAL ITEM
========================================== */

.approval-item{

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:16px;

    padding:18px 22px;

    border-left:3px solid transparent;

    transition:.25s;
}

.approval-item:not(:last-child){

    border-bottom:1px solid #f3f4f6;
}

.approval-item:hover{

    background:#fafbfc;

    border-left-color:#f59e0b;

    padding-left:28px;
}

.approval-left{

    display:flex;
    align-items:center;
    gap:14px;
}

.approval-avatar{

    width:46px;
    height:46px;

    border-radius:14px;

    background:#f8f7f3;

    color:#d97706;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:20px;

    transition:.3s;
}

.approval-item:hover .approval-avatar{

    background:#fef3c7;

    transform:scale(1.08);
}

.approval-title{

    font-size:14px;

    font-weight:700;

    color:#111827;
}

.approval-subtitle{

    font-size:13px;

    color:#6b7280;

    margin-top:3px;
}

.approval-right{

    text-align:right;
}

.approval-price{

    font-size:15px;

    font-weight:700;

    color:#111827;

    margin-bottom:8px;
}


/* ==========================================
   REVIEW BUTTON
========================================== */

.btn-review{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    height:34px;

    padding:0 16px;

    border-radius:10px;

    background:#111827;

    color:#fff;

    text-decoration:none;

    font-size:12px;

    font-weight:600;

    transition:.25s;
}

.btn-review:hover{

    background:#312e81;

    color:#fff;

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(79,70,229,.15);
}


/* ==========================================
   STATUS PILLS
========================================== */

.status-pill{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:5px 12px;

    border-radius:30px;

    font-size:11px;

    font-weight:600;

    text-transform:capitalize;
}

.status-warning{

    background:#fff7ed;

    color:#c2410c;
}

.status-primary{

    background:#eef2ff;

    color:#4338ca;
}

.status-info{

    background:#eff6ff;

    color:#2563eb;
}

.status-secondary{

    background:#f5f3ff;

    color:#7c3aed;
}

.status-dark{

    background:#f3f4f6;

    color:#374151;
}

.status-success{

    background:#ecfdf5;

    color:#15803d;
}

.status-danger{

    background:#fef2f2;

    color:#dc2626;
}

.status-light{

    background:#f3f4f6;

    color:#6b7280;
}


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

.empty-state{

    padding:60px 30px;

    text-align:center;
}

.empty-icon{

    width:70px;
    height:70px;

    border-radius:18px;

    margin:auto auto 20px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#f4f4f5;

    color:#9ca3af;

    font-size:28px;
}

.empty-state h6{

    font-size:16px;

    font-weight:700;

    color:#111827;

    margin-bottom:6px;
}

.empty-state p{

    font-size:13px;

    color:#6b7280;

    margin:0;
}


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

@media(max-width:768px){

    .order-item,
    .approval-item{

        padding:16px;
    }

    .custom-panel-header{

        padding:16px;
    }

    .custom-panel-title h5{

        font-size:15px;
    }

}
.vendor-item,
.return-item{

display:flex;
justify-content:space-between;
align-items:center;

padding:18px 22px;

transition:.25s;

border-left:3px solid transparent;
}

.vendor-item:not(:last-child),
.return-item:not(:last-child){

border-bottom:1px solid #f3f4f6;
}

.vendor-item:hover{

background:#fafbfc;

border-left-color:#10b981;

padding-left:28px;
}

.return-item:hover{

background:#fafbfc;

border-left-color:#f59e0b;

padding-left:28px;
}

.vendor-left,
.return-left{

display:flex;
align-items:center;

gap:14px;
}

.vendor-avatar,
.return-avatar{

width:46px;
height:46px;

border-radius:14px;

display:flex;
align-items:center;
justify-content:center;

font-weight:700;

background:#f5f6fb;

color:#4f46e5;

transition:.25s;
}

.vendor-item:hover .vendor-avatar,
.return-item:hover .return-avatar{

transform:scale(1.08);
}

.vendor-name,
.return-title{

font-weight:700;

color:#111827;
}

.vendor-phone,
.return-subtitle,
.return-reason{

font-size:13px;

color:#6b7280;

margin-top:3px;
}
.stock-item,
.top-product-item{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:18px 22px;

    transition:.25s;

    border-left:3px solid transparent;
}

.stock-item:not(:last-child),
.top-product-item:not(:last-child){

    border-bottom:1px solid #f3f4f6;
}

.stock-item:hover{

    background:#fafbfc;

    border-left-color:#ef4444;

    padding-left:28px;
}

.top-product-item:hover{

    background:#fafbfc;

    border-left-color:#10b981;

    padding-left:28px;
}

.stock-left,
.top-product-left{

    display:flex;
    align-items:center;
    gap:14px;
}

.stock-avatar,
.top-product-rank{

    width:46px;
    height:46px;

    border-radius:14px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;

    transition:.25s;
}

.stock-avatar{

    background:#fef2f2;
    color:#dc2626;
    font-size:20px;
}

.stock-item:hover .stock-avatar{

    transform:scale(1.08);
}

.top-product-rank{

    background:#ecfdf5;
    color:#16a34a;
    font-weight:700;
}

.top-product-item:hover .top-product-rank{

    transform:scale(1.08);
}

.stock-title,
.top-product-title{

    font-size:14px;
    font-weight:700;
    color:#111827;
}

.stock-subtitle,
.top-product-subtitle{

    font-size:13px;
    color:#6b7280;
    margin-top:3px;
}

.stock-right{

    text-align:right;
}

.stock-count{

    font-size:18px;
    font-weight:700;
    color:#dc2626;
    margin-bottom:6px;
}

.top-product-badge{

    width:36px;
    height:36px;

    border-radius:50%;

    background:#ecfdf5;

    color:#16a34a;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:13px;
    font-weight:700;
}
.dropdown-menu.show {
    z-index: 99999 !important;
}
.dropdown-menu {
    z-index: 99999 !important;
}
.dropdown-menu .dropdown-menu-end .show {
    z-index: 99999 !important;
}
.recent-order-item{

display:flex;
justify-content:space-between;
align-items:center;

padding:18px 22px;

transition:.25s;

border-bottom:1px solid #f1f5f9;

}

.recent-order-item:last-child{

border-bottom:none;

}

.recent-order-item:hover{

background:#f8fbff;

}

.order-left{

display:flex;
align-items:center;

gap:15px;

}

.order-avatar{

width:48px;
height:48px;

border-radius:14px;

background:linear-gradient(135deg,#4f46e5,#2563eb);

color:#fff;

display:flex;
align-items:center;
justify-content:center;

font-weight:700;

font-size:18px;

}

.order-content h6{

margin:0;

font-size:.95rem;

font-weight:600;

}

.order-content p{

margin:3px 0;

font-size:.82rem;

color:#64748b;

}

.order-meta{

font-size:12px;

color:#94a3b8;

}

.order-id{

margin-left:8px;

font-size:12px;

color:#2563eb;

font-weight:600;

}

.order-right{

text-align:right;

}

.order-price{

font-size:18px;

font-weight:700;

color:#2563eb;

margin-bottom:8px;

}

.status{

padding:5px 12px;

border-radius:30px;

font-size:11px;

font-weight:600;

display:inline-flex;

align-items:center;

gap:6px;

}

.status::before{

content:'';

width:8px;

height:8px;

border-radius:50%;

}

.status-pending{

background:#fff7ed;
color:#ea580c;

}

.status-pending::before{

background:#ea580c;

}

.status-confirmed{

background:#ecfeff;
color:#0891b2;

}

.status-confirmed::before{

background:#0891b2;

}

.status-processing{

background:#eef2ff;
color:#4f46e5;

}

.status-processing::before{

background:#4f46e5;

}

.status-packed{

background:#f5f3ff;
color:#7c3aed;

}

.status-packed::before{

background:#7c3aed;

}

.status-shipped{

background:#eff6ff;
color:#2563eb;

}

.status-shipped::before{

background:#2563eb;

}

.status-delivered{

background:#ecfdf5;
color:#16a34a;

}

.status-delivered::before{

background:#16a34a;

}

.status-cancelled{

background:#fef2f2;
color:#dc2626;

}

.status-cancelled::before{

background:#dc2626;

}
.recent-orders-body {
    height: 395px;
    overflow-y: auto;
    scrollbar-width: none;
}

.recent-orders-body::-webkit-scrollbar {
    width: 0;
}

.recent-orders-body.scrolling {
    scrollbar-width: thin;
}

.recent-orders-body.scrolling::-webkit-scrollbar {
    width: 6px;
}

.recent-orders-body.scrolling::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 10px;
}

    .g-root, .g-root * {
        box-sizing: border-box;
    }

    .g-root {
        --bg: #f4f5fb;
        --surface: #ffffff;
        --surface-soft: #fafaff;
        --ink: #1a1a2e;
        --ink-soft: #6b6b85;
        --ink-faint: #9a9ab0;
        --line: #eaeaf3;

        --primary: #4338ca;
        --primary-ink: #372e8a;
        --primary-soft: #edecfd;

        --amber: #dc8a00;
        --amber-soft: #fdf1dd;
        --green: #158f63;
        --green-soft: #e4f6ee;
        --red: #d64545;
        --red-soft: #fce9e9;
        --teal: #0e829b;
        --teal-soft: #e3f4f8;
        --violet: #6f4ff2;
        --violet-soft: #efeafe;
        --gray-soft: #f1f1f7;

        --radius-lg: 18px;
        --radius-md: 12px;
        --radius-sm: 8px;
        --shadow-card: 0 1px 2px rgba(26,26,46,.04), 0 10px 24px -18px rgba(26,26,46,.18);

        color: var(--ink);
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       
        border-radius: 20px;
    }

    .g-root h1, .g-root h2, .g-root h3,
    .g-root .kpi-value, .g-root .stat-big, .g-root .panel-title, .g-root .bm-val {
        font-family: 'Sora', 'Inter', sans-serif;
    }

    .g-root .mono { font-family: 'JetBrains Mono', monospace; }

    /* ── Eyebrow / section labels ── */
    .section-label, .sec-label {
        position: relative;
        font-size: 11.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .6px;
        color: var(--ink-soft);
        margin: 28px 0 12px;
        padding-left: 14px;
    }

    .section-label:first-child, .sec-label:first-child { margin-top: 0; }

    .section-label::before, .sec-label::before {
        content: '';
        position: absolute;
        left: 0;
        top: 2px;
        width: 4px;
        height: 12px;
        border-radius: 2px;
        background: linear-gradient(180deg, var(--primary), var(--violet));
    }

    /* ── KPI Grid ── */
    .kpi-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 12px;
        margin-bottom: 8px;
    }

    .kpi-card {
        position: relative;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        padding: 16px 18px 14px;
        box-shadow: var(--shadow-card);
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
        overflow: hidden;
    }

    .kpi-card::after {
        content: '';
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 3px;
        background: var(--bar-color, var(--primary));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .25s ease;
    }

    .kpi-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 30px -18px rgba(26,26,46,.28);
    }

    .kpi-card:hover::after { transform: scaleX(1); }

    .kpi-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
    }

    .kpi-label {
        font-size: 11px;
        color: var(--ink-soft);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .4px;
    }

    .kpi-icon {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        flex-shrink: 0;
    }

    .kpi-value {
        font-size: 25px;
        font-weight: 700;
        color: var(--ink);
        line-height: 1;
        letter-spacing: -.2px;
    }

    .kpi-sub {
        font-size: 11.5px;
        margin-top: 8px;
        display: flex;
        align-items: center;
        gap: 4px;
        color: var(--ink-faint);
    }

    .icon-green { background: var(--green-soft); color: var(--green); }
    .icon-blue { background: var(--primary-soft); color: var(--primary); }
    .icon-teal { background: var(--teal-soft); color: var(--teal); }
    .icon-amber { background: var(--amber-soft); color: var(--amber); }
    .icon-red { background: var(--red-soft); color: var(--red); }
    .icon-violet { background: var(--violet-soft); color: var(--violet); }
    .icon-gray { background: var(--gray-soft); color: var(--ink-soft); }

    .text-ok { color: var(--green); }
    .text-warn { color: var(--amber); }
    .text-err { color: var(--red); }
    .text-mute { color: var(--ink-faint); }

    /* ── Panels / cards ── */
    .panel, .custom-card {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        padding: 18px 20px 20px;
        margin-bottom: 12px;
        box-shadow: var(--shadow-card);
    }

    .panel-title {
        font-size: 13.5px;
        font-weight: 700;
        color: var(--ink);
        display: flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--line);
    }

    .panel-title i {
        font-size: 16px;
    }

    .panel-title .title-right {
        margin-left: auto;
        font-size: 11px;
        font-weight: 500;
        color: var(--ink-faint);
        background: var(--surface-soft);
        border: 1px solid var(--line);
        padding: 3px 9px;
        border-radius: 20px;
    }

    .badge {
        font-size: 10.5px;
        font-weight: 700;
        padding: 3px 9px;
        border-radius: 20px;
        text-transform: uppercase;
        letter-spacing: .3px;
    }

    .badge-green { background: var(--green-soft); color: var(--green); }
    .badge-sm { background: var(--gray-soft); color: var(--ink-soft); font-weight: 600; }

    /* ── Layout grids ── */
    .charts-2col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .charts-3col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .g-main-grid {
        display: grid;
        grid-template-columns: 2.15fr 1fr;
        gap: 12px;
        align-items: start;
    }

    .g-side-col .panel:last-child { margin-bottom: 0; }

    .g2 {
        display: grid;
        grid-template-columns: 1.3fr 1fr;
        gap: 12px;
    }

    @media (max-width: 1100px) {
        .g-main-grid, .g2 { grid-template-columns: 1fr; }
    }

    @media (max-width: 992px) {
        .charts-2col { grid-template-columns: 1fr; }
        .charts-3col { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 600px) {
        .charts-3col { grid-template-columns: 1fr; }
        .g-root { padding: 12px; }
    }

    .ch {
        position: relative;
        width: 100%;
    }

    /* ── Legend ── */
    .legend-row {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-bottom: 10px;
    }

    .leg {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 11px;
        color: var(--ink-soft);
    }

    .leg-sq {
        width: 9px;
        height: 9px;
        border-radius: 2px;
        flex-shrink: 0;
    }

    /* ── Stock health ── */
    .stat-big {
        font-size: 38px;
        font-weight: 800;
        color: var(--ink);
        line-height: 1;
        margin-bottom: 3px;
        letter-spacing: -.5px;
    }

    .stat-sub {
        font-size: 11.5px;
        color: var(--ink-faint);
    }

    .divider {
        width: 100%;
        height: 1px;
        background: var(--line);
        margin: 14px 0;
    }

    .progress-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .prog-header {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: var(--ink-soft);
        margin-bottom: 5px;
    }

    .prog-header span:last-child {
        font-weight: 700;
        color: var(--ink);
    }

    .prog-bar {
        height: 6px;
        background: var(--gray-soft);
        border-radius: 3px;
        overflow: hidden;
    }

    .prog-fill {
        height: 100%;
        border-radius: 3px;
    }

    /* ── Donut ring ── */
    .ring-wrap {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .ring-legend {
        display: flex;
        flex-direction: column;
        gap: 9px;
        flex: 1;
    }

    .ring-leg-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
    }

    .ring-leg-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
        margin-right: 6px;
    }

    .ring-leg-label {
        display: flex;
        align-items: center;
        color: var(--ink-soft);
        flex: 1;
    }

    .ring-leg-val {
        font-weight: 700;
        color: var(--ink);
    }

    /* ── Board mini stats ── */
    .board-mini-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
        gap: 10px;
        margin-top: 14px;
    }

    .board-mini {
        background: var(--surface-soft);
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        padding: 10px 10px 9px;
        text-align: center;
    }

    .bm-val {
        font-size: 17px;
        font-weight: 700;
        line-height: 1.1;
    }

    .bm-lbl {
        font-size: 10px;
        color: var(--ink-faint);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .3px;
        margin-top: 3px;
    }

    /* ── Recent activity feed ── */
    .activity-list {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .act-row {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 10px 6px;
        border-radius: var(--radius-sm);
        transition: background .15s ease;
    }

    a.act-row:hover { background: var(--surface-soft); }

    .act-avatar {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        flex-shrink: 0;
    }

    .act-body {
        flex: 1;
        min-width: 0;
    }

    .act-name {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .act-meta {
        font-size: 11px;
        color: var(--ink-faint);
        margin-top: 1px;
    }

    .act-badge {
        font-size: 10px;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 20px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* ── Tables ── */
    .g-root .table-responsive { margin: 0 -2px; }

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

    .g-root table.table thead th {
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: var(--ink-faint);
        text-align: left;
        padding: 0 8px 9px;
        border-bottom: 1px solid var(--line);
    }

    .g-root table.table tbody td {
        padding: 10px 8px;
        border-bottom: 1px solid var(--line);
        color: var(--ink);
        vertical-align: middle;
    }

    .g-root table.table tbody tr:last-child td { border-bottom: none; }
    .g-root table.table tbody tr:hover td { background: var(--surface-soft); }

    .g-root .btn-xs {
        font-size: 11px;
        font-weight: 600;
        padding: 4px 11px;
        border-radius: 20px;
        border: none;
        text-decoration: none;
        display: inline-block;
    }

    .g-root .btn-primary {
        background: var(--primary-soft);
        color: var(--primary);
    }

    .g-root .btn-primary:hover { background: var(--primary); color: #fff; }
        .panel-select {
        font-size: 12px;
        font-weight: 500;
        color: var(--ink-soft);
        background: var(--surface-soft);
        border: 1px solid var(--line);
        border-radius: 20px;
        padding: 6px 14px;
    }

    /* ── Tables ── */
    .g-root table.premium-table {
        width: 100%;
        border-collapse: collapse;
    }

    .g-root table.premium-table thead th {
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: var(--ink-faint);
        text-align: left;
        padding: 0 8px 10px;
        border-bottom: 1px solid var(--line);
    }

    .g-root table.premium-table tbody td {
        padding: 12px 8px;
        border-bottom: 1px solid var(--line);
        color: var(--ink);
        vertical-align: middle;
        font-size: 13px;
    }

    .g-root table.premium-table tbody tr:last-child td { border-bottom: none; }
    .g-root table.premium-table tbody tr:hover td { background: var(--surface-soft); }

    /* ── AI Insights ── */
    .insight-card {
        padding: 14px 16px;
        border-radius: var(--radius-md);
        margin-bottom: 10px;
        display: flex;
        gap: 13px;
        align-items: center;
        border: 1px solid transparent;
    }

    .insight-card:last-child { margin-bottom: 0; }

    .insight-positive { background: var(--green-soft); border-color: rgba(21,143,99,.18); }
    .insight-warning { background: var(--amber-soft); border-color: rgba(220,138,0,.18); }
    .insight-info { background: var(--primary-soft); border-color: rgba(67,56,202,.18); }

    .insight-icon {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        flex-shrink: 0;
        box-shadow: 0 2px 6px rgba(26,26,46,.08);
    }

    .insight-text { font-size: 12.5px; font-weight: 500; color: var(--ink); margin-bottom: 2px; }

    .insight-action {
        text-decoration: none;
        font-weight: 700;
        font-size: 11px;
        color: var(--ink);
        display: inline-flex;
        align-items: center;
        gap: 3px;
    }

    /* ── Tasks ── */
    .task-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 0;
        border-bottom: 1px solid var(--line);
    }

    .task-item:last-child { border-bottom: none; padding-bottom: 0; }
    .task-item:first-child { padding-top: 0; }

    .task-checkbox {
        width: 19px;
        height: 19px;
        border-radius: 6px;
        border: 2px solid var(--line);
        cursor: pointer;
        flex-shrink: 0;
        position: relative;
    }

    .task-checkbox.checked {
        background: var(--primary);
        border-color: var(--primary);
    }

    .task-checkbox.checked::after {
        content: '✓';
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .task-name {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--ink);
        margin-bottom: 4px;
    }

    .task-name.done {
        text-decoration: line-through;
        color: var(--ink-faint);
    }

    .priority-pill {
        font-size: 9.5px;
        padding: 3px 9px;
        border-radius: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .3px;
    }

    .p-high { background: var(--red-soft); color: var(--red); }
    .p-medium { background: var(--amber-soft); color: var(--amber); }
    .p-low { background: var(--green-soft); color: var(--green); }

    /* ── Payment Summary ── */
    .payment-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid var(--line);
        font-size: 13px;
    }

    .payment-row .lbl { color: var(--ink-soft); }
    .payment-row .val { font-weight: 600; color: var(--ink); }
    .payment-row .val.neg { color: var(--red); }

    .payment-row.total {
        border-bottom: none;
        margin-top: 6px;
        padding-top: 18px;
        font-weight: 700;
        font-size: 19px;
        color: var(--primary);
        font-family: 'Sora', sans-serif;
    }

    .payment-row.total .lbl { color: var(--ink); font-size: 13px; font-weight: 600; font-family: 'Inter', sans-serif; }

  .qu-pipeline-board {
        display: flex;
        flex-wrap: nowrap;
        gap: 16px;
        overflow-x: auto;
        padding-bottom: 12px;
    }

    .qu-pipeline-col {
        flex: 0 0 300px;
        background: #f7f7f8;
        border: 1px solid #e2e2e5;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        max-height: 78vh;
    }

    .qu-pipeline-col__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px 12px;
        border-bottom: 1px solid #e6e6e9;
    }

    .qu-pipeline-col__title {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.3px;
        text-transform: uppercase;
        color: #1a1a1a;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .qu-pipeline-col__title .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
    }

    /* Progress-tinted accent dots — monochrome, deepening per stage */
    .qu-pipeline-col--ready .dot            { background: #c7c7cc; }
    .qu-pipeline-col--shipment_created .dot { background: #8e8e93; }
    .qu-pipeline-col--transit .dot          { background: #4a4a4f; }
    .qu-pipeline-col--delivered .dot        { background: #111113; }

    .qu-pipeline-col__count {
        font-size: 11px;
        font-weight: 700;
        background: #1a1a1a;
        color: #fff;
        border-radius: 999px;
        padding: 2px 9px;
        min-width: 22px;
        text-align: center;
    }

    .qu-pipeline-col__body {
        padding: 12px;
        overflow-y: auto;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .qu-pipeline-col__body::-webkit-scrollbar { width: 6px; }
    .qu-pipeline-col__body::-webkit-scrollbar-thumb {
        background: #d5d5d9;
        border-radius: 3px;
    }

    .qu-pipeline-card {
        background: #fff;
        border: 1px solid #e6e6e9;
        border-left: 3px solid #1a1a1a;
        border-radius: 8px;
        padding: 12px 14px;
        cursor: pointer;
        transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
    }

    .qu-pipeline-col--ready .qu-pipeline-card            { border-left-color: #c7c7cc; }
    .qu-pipeline-col--shipment_created .qu-pipeline-card { border-left-color: #8e8e93; }
    .qu-pipeline-col--transit .qu-pipeline-card          { border-left-color: #4a4a4f; }
    .qu-pipeline-col--delivered .qu-pipeline-card        { border-left-color: #111113; }

    .qu-pipeline-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 14px rgba(0,0,0,0.08);
        border-color: #d0d0d4;
    }

    .qu-pipeline-card__id {
        font-size: 13.5px;
        font-weight: 700;
        color: #111;
        margin-bottom: 6px;
        font-family: 'DejaVu Sans Mono', monospace;
        letter-spacing: 0.2px;
    }

    .qu-pipeline-card__meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .qu-pipeline-card__priority {
        font-size: 10.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: #8a8a8f;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .qu-pipeline-card__priority::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #8a8a8f;
        display: inline-block;
    }

    .qu-pipeline-card__arrow {
        color: #c7c7cc;
        font-size: 14px;
    }

    .qu-pipeline-col__empty {
        text-align: center;
        padding: 28px 10px;
        color: #a7a7ac;
        font-size: 12px;
    }

    .qu-pipeline-col__empty i {
        display: block;
        font-size: 22px;
        margin-bottom: 6px;
        color: #d0d0d4;
    }