body{
    margin:0;
    background:#eef2f7;
    font-family:
        Inter,
        Segoe UI,
        sans-serif;
}

.bo-layout{
    display:grid;
    grid-template-columns:
        280px 1fr;
    min-height:100vh;
}

.bo-sidebar{
    background:#111827;
    color:white;
    padding:24px;
}

.bo-brand{
    display:flex;
    align-items:center;
    gap:14px;

    padding:10px 4px 24px;
    margin-bottom:24px;

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

.bo-brand-icon{
    width:58px;
    height:58px;
    border-radius:16px;
    object-fit:cover;

    box-shadow:
        0 16px 34px
        rgba(37,99,235,.32);
}



.bo-brand-text strong{
    display:block;
    font-size:23px;
    font-weight:900;
    color:white;
    line-height:1;
}

.bo-brand-text span{
    display:block;
    color:#94a3b8;
    font-size:12px;
    margin-top:6px;
    font-weight:700;
}
.bo-nav{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.bo-nav button{
    background:transparent;
    color:#cbd5e1;
    border:none;
    text-align:left;
    padding:12px;
    border-radius:12px;
    font-weight:700;
    cursor:pointer;
    transition:all .15s ease;
}

.bo-nav button.active,
.bo-nav button:hover{
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    color:white;
    box-shadow:0 10px 18px rgba(37,99,235,.25);
}

.bo-sidebar-footer{
    margin-top:40px;
}

.bo-main{
    display:flex;
    flex-direction:column;
}

.bo-topbar{
    background:linear-gradient(135deg,#ffffff 0%,#f8fbff 100%);
    border-bottom:1px solid #e5e7eb;
    padding:24px 24px 20px;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:18px;
}

.bo-topbar-copy h1{
    margin:4px 0 6px;
    font-size:28px;
    line-height:1.1;
    color:#0f172a;
}

.bo-topbar-copy p{
    margin:0;
    color:#475569;
}

.bo-eyebrow{
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:11px;
    font-weight:800;
    color:#2563eb;
}

.bo-top-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    margin-left:auto;
}

.bo-light-btn,
.bo-primary-btn{
    border:none;
    border-radius:10px;
    padding:12px 16px;
    font-weight:700;
    cursor:pointer;
    transition:transform .12s ease, box-shadow .18s ease;
}

.bo-light-btn:hover,
.bo-primary-btn:hover{
    transform:translateY(-1px);
}

.bo-primary-btn{
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    color:white;
    box-shadow:0 12px 24px rgba(37,99,235,.25);
}

.bo-light-btn{
    background:#f8fafc;
    color:#0f172a;
    border:1px solid #dbe4f0;
}

.bo-lang-switch{
    display:flex;
    align-items:center;
    gap:8px;
    background:#eff6ff;
    border:1px solid #bfdbfe;
    border-radius:12px;
    padding:8px 10px;
}

.bo-lang-switch select{
    border:none;
    background:transparent;
    color:#1e3a8a;
    font-weight:700;
    font-size:14px;
}

.bo-user-chip{
    display:flex;
    align-items:center;
    gap:10px;
    background:#0f172a;
    color:white;
    border-radius:14px;
    padding:10px 12px;
    box-shadow:0 12px 30px rgba(15,23,42,.18);
}

.bo-user-chip small{
    color:#cbd5e1;
}

.bo-user-dot{
    width:10px;
    height:10px;
    border-radius:999px;
    background:#22c55e;
    box-shadow:0 0 0 4px rgba(34,197,94,.15);
}

.bo-workspace{
    padding:24px;
}

.bo-kpi-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:20px;
    margin-bottom:20px;
}

.bo-kpi-card{
    background:white;
    border-radius:18px;
    padding:20px;
    box-shadow:
        0 4px 20px
        rgba(0,0,0,.08);
}

.bo-kpi-card span{
    color:#64748b;
}

.bo-kpi-card strong{
    display:block;
    font-size:36px;
    margin:10px 0;
}

.bo-panel{
    background:white;
    border-radius:18px;
    padding:24px;
    box-shadow:
        0 4px 20px
        rgba(0,0,0,.08);
}

@media(
max-width:900px
){

.bo-layout{

grid-template-columns:
1fr;

}

}


.bo-panel-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-bottom:18px;
}

.bo-panel-head h2{
    margin:0;
}

.bo-panel-head p{
    color:#64748b;
    margin-top:4px;
}

.bo-table-tools{
    display:flex;
    gap:12px;
    margin-bottom:16px;
}

.bo-table-tools input,
.bo-table-tools select{
    height:44px;
    border:1px solid #d8dee9;
    border-radius:12px;
    padding:0 12px;
    background:white;
}

.bo-table-tools input{
    flex:1;
}

.bo-table-wrap{
    overflow:auto;
    max-width:100%;
    border:1px solid #d8dee9;
    border-radius:16px;
}

.bo-table{
    width:100%;
    border-collapse:collapse;
    background:white;
    min-width:900px;
}

.bo-table th{
    text-align:left;
    background:#f8fafc;
    color:#475569;
    padding:14px;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.04em;
    border-bottom:1px solid #d8dee9;
}

.bo-table td{
    padding:14px;
    border-bottom:1px solid #edf2f7;
    vertical-align:middle;
}

.bo-product-cell{
    display:flex;
    align-items:center;
    gap:12px;
}

.bo-product-cell img{
    width:54px;
    height:54px;
    border-radius:12px;
    object-fit:cover;
    background:#f1f5f9;
}

.bo-product-cell strong{
    display:block;
    color:#111827;
}

.bo-product-cell span{
    display:block;
    color:#64748b;
    font-size:12px;
    margin-top:3px;
}

.bo-status{
    display:inline-flex;
    padding:6px 10px;
    border-radius:999px;
    font-weight:900;
    font-size:12px;
    background:#eef2ff;
    color:#2563eb;
}

.bo-status.inactive{
    background:#fee2e2;
    color:#b91c1c;
}

.bo-status.draft{
    background:#fef3c7;
    color:#92400e;
}

.bo-row-actions{
    display:flex;
    gap:8px;
}

.bo-row-actions button{
    border:none;
    border-radius:10px;
    padding:8px 10px;
    background:#f8fafc;
    color:#111827;
    font-weight:800;
    cursor:pointer;
}

.bo-row-actions button:hover{
    background:#e5e7eb;
}

.bo-row-actions button.danger{
    background:#fee2e2;
    color:#b91c1c;
}

.bo-row-actions button.danger:hover{
    background:#ef4444;
    color:white;
}

.bo-modal{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.65);
    display:grid;
    place-items:center;
    z-index:50000;
    padding:20px;
}

.bo-modal-box{
    width:min(520px,100%);
    max-height:90vh;
    overflow:auto;
    background:white;
    border-radius:20px;
    padding:24px;
    position:relative;
    box-shadow:0 30px 80px rgba(0,0,0,.35);
}

.bo-modal-close{
    position:absolute;
    top:14px;
    right:14px;
    width:34px;
    height:34px;
    border-radius:50%;
    border:none;
    background:#f1f5f9;
    font-weight:900;
    cursor:pointer;
}

.bo-modal-box label{
    display:block;
    margin-top:14px;
    font-weight:800;
    color:#334155;
}

.bo-modal-box input,
.bo-modal-box textarea,
.bo-modal-box select{
    width:100%;
    margin-top:6px;
    border:1px solid #d8dee9;
    border-radius:12px;
    padding:12px;
    font:inherit;
}

.bo-modal-box textarea{
    min-height:110px;
    resize:vertical;
}

.bo-modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:18px;
}

.bo-modal-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:12px;
    margin-top:16px;
}

.bo-checkbox-list{
    display:grid;
    gap:10px;
    margin-top:10px;
    padding:10px;
    border:1px solid #e2e8f0;
    border-radius:14px;
    background:#f8fafc;
}

.bo-checkbox-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:12px;
    background:white;
    cursor:pointer;
    border:1px solid #e2e8f0;
    font-size:14px;
}

.bo-checkbox-item input {
    accent-color:#2563eb;
}

.bo-user-chip{
    height:42px;
    display:flex;
    align-items:center;
    gap:10px;
    background:#f8fafc;
    border:1px solid #d8dee9;
    border-radius:12px;
    padding:0 12px;
}

.bo-user-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 0 4px #dcfce7;
}

.bo-user-chip strong{
    display:block;
    font-size:13px;
    color:#111827;
    line-height:1;
}

.bo-user-chip small{
    display:block;
    margin-top:3px;
    font-size:11px;
    color:#64748b;
}

.bo-kpi-card{
    background:white;
    border-radius:24px;
    padding:26px;
    border:1px solid #e2e8f0;
    box-shadow:
        0 1px 2px rgba(0,0,0,.04);
}

.bo-kpi-card:hover{
    border-color:#d1d5db;
    transform:translateY(-2px);
}

.bo-kpi-card span{
    display:block;
    font-size:12px;
    font-weight:500;
    color:#64748b;
    text-transform:uppercase;
    letter-spacing:.12em;
}

.bo-kpi-card strong{
    display:block;
    margin-top:12px;
    font-size:40px;
    font-weight:600;
    color:#0f172a;
    letter-spacing:-1px;
}

.bo-kpi-card.revenue strong,
.bo-kpi-card.inventory strong{
    font-size:44px;
    font-weight:600;
}

.bo-kpi-actions{
    display:flex;
    gap:6px;
    margin-top:14px;
    flex-wrap:wrap;
}

.bo-kpi-actions button{
    height:28px;
    padding:0 12px;
    border-radius:999px;

    border:1px solid #e5e7eb;
    background:white;

    color:#64748b;
    font-size:11px;
    font-weight:700;

    cursor:pointer;
    transition:.2s;
}

.bo-kpi-actions button:hover{
    background:#111827;
    border-color:#111827;
    color:white;
}

.bo-kpi-actions{
    display:flex;
    gap:6px;
    margin-top:14px;
    flex-wrap:wrap;
}

.bo-kpi-actions button{
    height:28px;
    padding:0 12px;
    border-radius:999px;
    border:1px solid #e5e7eb;
    background:white;
    color:#64748b;
    font-size:11px;
    font-size:11px;
font-weight:500;
letter-spacing:.02em;
    transition:.2s;

}

.bo-kpi-actions button:hover{
    background:#111827;
    border-color:#111827;
    color:white;
}

@media (max-width:768px){

    .bo-kpi-grid{
        grid-template-columns:1fr;
    }

    .bo-kpi-actions{
        justify-content:flex-start;
    }

    .bo-kpi-actions button{
        height:32px;
        padding:0 14px;
        font-size:12px;
    }

}

.bo-report-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:16px;
}

.bo-report-grid button{
    background:white;
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:20px;
    min-height:115px;
    text-align:left;
    cursor:pointer;
    transition:.2s ease;
}

.bo-report-grid button:hover{
    border-color:#2563eb;
    background:#f8fafc;
    transform:translateY(-2px);
}

.bo-report-grid button strong{
    display:block;
    font-size:14px;
    font-weight:600;
    color:#111827;
    margin-bottom:8px;
}

.bo-report-grid button span{
    display:block;
    font-size:13px;
    line-height:1.4;
    color:#64748b;
}

@media (max-width:900px){

    .bo-report-grid{
        grid-template-columns:1fr;
    }

}

/* ===== USERS MODULE PROFESSIONAL UI ===== */

.bo-head-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.bo-users-summary{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:14px;
    margin-bottom:18px;
}

.bo-users-summary div{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:18px;
    padding:18px;
}

.bo-users-summary span{
    display:block;
    color:#64748b;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.bo-users-summary strong{
    display:block;
    margin-top:8px;
    font-size:28px;
    color:#0f172a;
}

.bo-user-toolbar{
    display:grid;
    grid-template-columns:1fr 180px 180px auto;
    gap:12px;
    margin-bottom:18px;
}

.bo-user-toolbar input,
.bo-user-toolbar select{
    height:44px;
    border:1px solid #d8dee9;
    border-radius:12px;
    padding:0 12px;
    background:white;
}

.bo-users-table-wrap{
    border-radius:20px;
}

.bo-users-table{
    min-width:1050px;
}

.bo-user-cell{
    display:flex;
    align-items:center;
    gap:12px;
}

.bo-user-avatar{
    width:46px;
    height:46px;
    border-radius:16px;
    display:grid;
    place-items:center;
    color:white;
    font-weight:900;
    font-size:16px;
    letter-spacing:.03em;
    background:linear-gradient(135deg,#0f172a,#2563eb);
    box-shadow:0 10px 24px rgba(37,99,235,.18);
    flex-shrink:0;
}

.bo-user-avatar.large{
    width:58px;
    height:58px;
    border-radius:20px;
    font-size:22px;
}

.bo-user-cell strong,
.bo-user-modal-head strong{
    display:block;
    color:#0f172a;
}

.bo-user-cell span,
.bo-user-modal-head span{
    display:block;
    color:#64748b;
    font-size:13px;
    margin-top:2px;
}

.bo-user-cell small,
.bo-user-modal-head small{
    display:block;
    color:#94a3b8;
    font-size:12px;
    margin-top:2px;
}

.bo-access-tags{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
}

.bo-access-tags span{
    padding:6px 9px;
    border-radius:999px;
    background:#f1f5f9;
    color:#94a3b8;
    font-size:12px;
    font-weight:900;
}

.bo-access-tags span.on{
    background:#dcfce7;
    color:#15803d;
}

.bo-chip-list{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    max-width:260px;
}

.bo-chip-list span{
    background:#eef2ff;
    color:#2563eb;
    padding:6px 9px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
}

.bo-chip-list.muted span{
    background:#f8fafc;
    color:#475569;
    border:1px solid #e2e8f0;
}

.bo-chip-list em{
    color:#94a3b8;
    font-size:13px;
}

.bo-user-modal-box{
    width:min(760px,100%);
}

.bo-modal-subtitle{
    color:#64748b;
    margin-top:4px;
}

.bo-user-modal-head{
    display:flex;
    gap:14px;
    align-items:center;
    padding:16px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:18px;
    margin:16px 0;
}

.bo-toggle-card{
    display:flex!important;
    align-items:center;
    gap:12px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:16px;
    padding:14px;
    cursor:pointer;
}

.bo-toggle-card input{
    width:18px!important;
    height:18px!important;
    margin:0!important;
    accent-color:#2563eb;
}

.bo-toggle-card strong{
    display:block;
    color:#0f172a;
}

.bo-toggle-card small{
    display:block;
    color:#64748b;
    margin-top:3px;
}

.bo-toggle-card.locked{
    cursor:default;
}

.bo-role-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    margin-top:8px;
}

.bo-role-card{
    display:flex!important;
    gap:12px;
    align-items:center;
    padding:14px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:16px;
    cursor:pointer;
    transition:.2s;
}

.bo-role-card:hover{
    border-color:#2563eb;
}

.bo-role-card.selected{
    background:#eef2ff;
    border-color:#2563eb;
}

.bo-role-card input{
    width:18px!important;
    height:18px!important;
    margin:0!important;
    accent-color:#2563eb;
}

.bo-role-card strong{
    display:block;
    color:#0f172a;
}

.bo-role-card small{
    display:block;
    color:#64748b;
    margin-top:3px;
}

.bo-checkbox-list{
    max-height:260px;
    overflow:auto;
}

.bo-checkbox-item{
    align-items:flex-start;
}

.bo-checkbox-item input{
    width:18px!important;
    height:18px!important;
    margin-top:2px!important;
    flex-shrink:0;
}

.bo-checkbox-item strong{
    display:block;
    color:#0f172a;
}

.bo-checkbox-item small{
    display:block;
    color:#64748b;
    font-size:12px;
    margin-top:2px;
}

.bo-primary-btn:disabled{
    opacity:.65;
    cursor:not-allowed;
}

@media(max-width:900px){
    .bo-users-summary{
        grid-template-columns:repeat(2, 1fr);
    }

    .bo-user-toolbar{
        grid-template-columns:1fr;
    }

    .bo-role-grid{
        grid-template-columns:1fr;
    }

    .bo-modal-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:600px){
    .bo-users-summary{
        grid-template-columns:1fr;
    }

    .bo-head-actions{
        width:100%;
    }

    .bo-head-actions button{
        width:100%;
    }
}


.bo-users-pagination-top,
.bo-users-pagination-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin:14px 0;
    color:#64748b;
    font-size:14px;
    font-weight:700;
}

.bo-page-size{
    display:flex;
    align-items:center;
    gap:8px;
}

.bo-page-size span{
    color:#64748b;
}

.bo-page-size button{
    width:34px;
    height:34px;
    border-radius:10px;
    border:1px solid #e2e8f0;
    background:white;
    font-weight:900;
    cursor:pointer;
}

.bo-page-size button.active{
    background:#2563eb;
    color:white;
    border-color:#2563eb;
}

.bo-users-pagination-bottom button:disabled{
    opacity:.45;
    cursor:not-allowed;
}

@media(max-width:700px){
    .bo-users-pagination-top,
    .bo-users-pagination-bottom{
        flex-direction:column;
        align-items:flex-start;
    }
}


/* ===== CLEAN USER EDIT MODAL ===== */

.bo-modal{
    position:fixed;
    inset:0;
    z-index:50000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(15,23,42,.62);
    backdrop-filter:blur(8px);
}

.bo-user-edit-modal{
    width:min(780px, 96vw);
    max-height:88vh;
    overflow:hidden;
    padding:0!important;
    border-radius:26px!important;
    background:#ffffff;
    box-shadow:0 30px 90px rgba(15,23,42,.34);
    border:1px solid #e2e8f0;
}

.bo-user-edit-header{
    display:flex;
    align-items:center;
    gap:16px;
    padding:26px 66px 22px 28px;
    border-bottom:1px solid #e2e8f0;
    background:linear-gradient(180deg,#ffffff,#f8fafc);
}

.bo-user-edit-header h2{
    margin:0;
    color:#0f172a;
    font-size:24px;
    line-height:1.1;
}

.bo-user-edit-header p{
    margin:6px 0 0;
    color:#64748b;
    font-size:13px;
}

.bo-user-edit-body{
    max-height:calc(88vh - 170px);
    overflow:auto;
    padding:22px 28px;
}

.bo-edit-section{
    margin-bottom:22px;
}

.bo-edit-section h3{
    margin:0 0 12px;
    color:#334155;
    font-size:13px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.bo-user-edit-modal .bo-modal-close{
    position:absolute;
    top:18px;
    right:18px;
    width:38px;
    height:38px;
    border-radius:14px;
    border:1px solid #e2e8f0;
    background:white;
    color:#0f172a;
    font-weight:900;
    cursor:pointer;
    z-index:2;
}

.bo-user-edit-modal .bo-modal-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:12px;
    margin:0;
}

.bo-user-edit-modal .bo-role-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
    margin:0;
}

.bo-user-edit-modal .bo-checkbox-list{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    max-height:230px;
    overflow:auto;
    margin:0;
    padding:12px;
    border-radius:18px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
}

.bo-user-edit-modal .bo-toggle-card,
.bo-user-edit-modal .bo-role-card,
.bo-user-edit-modal .bo-checkbox-item{
    margin:0;
    min-height:auto;
    border-radius:16px;
}

.bo-user-edit-modal .bo-toggle-card{
    min-height:76px;
}

.bo-user-edit-modal .bo-checkbox-item{
    padding:12px;
    background:white;
}

.bo-user-edit-modal .bo-modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    padding:18px 28px;
    margin:0;
    border-top:1px solid #e2e8f0;
    background:#ffffff;
}

.bo-user-edit-modal .bo-modal-actions button{
    min-width:130px;
}

.bo-toggle-card.locked{
    cursor:default;
    opacity:.85;
}

@media(max-width:780px){
    .bo-user-edit-modal{
        max-height:92vh;
    }

    .bo-user-edit-body{
        max-height:calc(92vh - 170px);
    }

    .bo-user-edit-modal .bo-modal-grid,
    .bo-user-edit-modal .bo-role-grid,
    .bo-user-edit-modal .bo-checkbox-list{
        grid-template-columns:1fr;
    }
}


/* ===== PROFESSIONAL OPERATIONS DASHBOARD ===== */

.bo-dashboard-hero{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    margin-bottom:24px;
    padding:28px;
    border-radius:26px;
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.18), transparent 34%),
        linear-gradient(135deg,#0f172a,#1e293b);
    color:white;
    box-shadow:0 18px 50px rgba(15,23,42,.22);
}

.bo-dashboard-hero span{
    display:inline-flex;
    margin-bottom:8px;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    color:#bfdbfe;
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.bo-dashboard-hero h2{
    margin:0;
    font-size:32px;
    line-height:1.05;
    letter-spacing:-.04em;
}

.bo-dashboard-hero p{
    max-width:680px;
    margin:10px 0 0;
    color:#cbd5e1;
    line-height:1.55;
}

.bo-dashboard-hero-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.bo-dashboard-hero .bo-light-btn{
    background:rgba(255,255,255,.12);
    color:white;
    border:1px solid rgba(255,255,255,.18);
}

.bo-dashboard-hero .bo-primary-btn{
    background:white;
    color:#0f172a;
}

.bo-dashboard-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:16px;
    margin-bottom:22px;
}

.bo-dashboard-card{
    position:relative;
    overflow:hidden;
    min-height:178px;
    padding:20px;
    border:1px solid #e2e8f0;
    border-radius:22px;
    background:white;
    box-shadow:0 4px 20px rgba(15,23,42,.06);
}

.bo-dashboard-card::after{
    content:"";
    position:absolute;
    right:-28px;
    top:-28px;
    width:86px;
    height:86px;
    border-radius:50%;
    background:#eff6ff;
}

.bo-dashboard-card.revenue::after{
    background:#dcfce7;
}

.bo-dashboard-card.inventory::after{
    background:#e0f2fe;
}

.bo-dashboard-card.warning::after{
    background:#fef3c7;
}

.bo-dashboard-card.danger::after{
    background:#fee2e2;
}

.bo-dashboard-card-head{
    position:relative;
    z-index:2;
}

.bo-dashboard-card-head span{
    display:block;
    color:#64748b;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.bo-dashboard-card-head strong{
    display:block;
    margin-top:10px;
    color:#0f172a;
    font-size:30px;
    font-weight:900;
    line-height:1.05;
    letter-spacing:-.04em;
}

.bo-dashboard-card p{
    position:relative;
    z-index:2;
    margin:12px 0 0;
    color:#64748b;
    font-size:13px;
    line-height:1.45;
}

.bo-card-actions{
    position:relative;
    z-index:2;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:16px;
}

.bo-card-actions button{
    border:none;
    border-radius:999px;
    padding:8px 12px;
    background:#f1f5f9;
    color:#334155;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
}

.bo-card-actions button:hover{
    background:#2563eb;
    color:white;
}

.bo-dashboard-actions{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:12px;
    margin-bottom:22px;
}

.bo-dashboard-actions button{
    text-align:left;
    min-height:96px;
    padding:18px;
    border:1px solid #e2e8f0;
    border-radius:20px;
    background:#ffffff;
    cursor:pointer;
    transition:.18s ease;
}

.bo-dashboard-actions button:hover{
    transform:translateY(-2px);
    border-color:#2563eb;
    box-shadow:0 14px 34px rgba(37,99,235,.12);
}

.bo-dashboard-actions strong{
    display:block;
    color:#0f172a;
    font-size:14px;
    font-weight:900;
}

.bo-dashboard-actions span{
    display:block;
    margin-top:7px;
    color:#64748b;
    font-size:12px;
    line-height:1.35;
}

.bo-dashboard-columns{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
    margin-bottom:20px;
}

.bo-dashboard-list{
    display:grid;
    gap:10px;
}

.bo-dashboard-list-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:14px;
    border:1px solid #e2e8f0;
    border-radius:16px;
    background:#f8fafc;
}

.bo-dashboard-list-item strong{
    display:block;
    color:#0f172a;
    font-size:14px;
}

.bo-dashboard-list-item span{
    display:block;
    margin-top:3px;
    color:#64748b;
    font-size:12px;
}

.bo-dashboard-list-item b{
    display:block;
    color:#0f172a;
    font-size:14px;
    text-align:right;
}

.bo-dashboard-list-item em{
    display:inline-flex;
    margin-top:6px;
    padding:5px 9px;
    border-radius:999px;
    background:#e0e7ff;
    color:#3730a3;
    font-style:normal;
    font-size:11px;
    font-weight:900;
    text-transform:capitalize;
}

.bo-dashboard-list-item em.success{
    background:#dcfce7;
    color:#15803d;
}

.bo-dashboard-list-item em.warning{
    background:#fef3c7;
    color:#92400e;
}

.bo-dashboard-list-item em.danger{
    background:#fee2e2;
    color:#b91c1c;
}

.bo-empty-state.compact{
    padding:20px;
    border:1px dashed #cbd5e1;
    border-radius:18px;
    background:#f8fafc;
}

.bo-empty-state.compact h3{
    margin:0;
    color:#0f172a;
}

.bo-empty-state.compact p{
    margin:6px 0 0;
    color:#64748b;
}

.bo-page-size-control{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:40px;
    padding:0 10px;
    border:1px solid #dbe4f0;
    border-radius:12px;
    background:#fff;
    color:#475569;
    font-size:13px;
    font-weight:800;
}

.bo-page-size-control select{
    min-width:58px;
    height:32px;
    border:1px solid #dbe4f0;
    border-radius:10px;
    background:#f8fafc;
    color:#0f172a;
    font-weight:900;
}

.bo-user-view-modal{
    max-width:760px;
}

.bo-user-profile-card{
    display:grid;
    gap:16px;
}

.bo-user-profile-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    padding:16px;
    border:1px solid #dbe7f7;
    border-radius:16px;
    background:linear-gradient(180deg,#ffffff,#f8fbff);
}

.bo-user-profile-head span:first-child{
    color:#64748b;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
}

.bo-user-profile-head h3{
    margin:4px 0;
    color:#0f172a;
    font-size:24px;
}

.bo-user-profile-head p{
    margin:0;
    color:#64748b;
    font-weight:800;
}

.bo-user-detail-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
}

.bo-user-detail-grid div{
    min-width:0;
    padding:12px;
    border:1px solid #e2e8f0;
    border-radius:12px;
    background:#fff;
}

.bo-user-detail-grid span{
    display:block;
    color:#64748b;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
}

.bo-user-detail-grid strong{
    display:block;
    margin-top:5px;
    color:#0f172a;
    overflow-wrap:anywhere;
}

.bo-user-modal-message{
    min-height:20px;
    margin-top:12px;
    font-size:13px;
    font-weight:800;
}

.bo-user-modal-message.success{
    color:#047857;
}

.bo-user-modal-message.error{
    color:#dc2626;
}

.bo-user-2fa-box{
    margin-top:12px;
    padding:12px;
    border:1px solid #dbe7ff;
    border-radius:12px;
    background:#f8fbff;
}

.hidden{
    display:none!important;
}

.bo-user-2fa-box label{
    display:block;
    margin-bottom:8px;
    color:#0f172a;
    font-size:13px;
    font-weight:900;
}

.bo-user-2fa-row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
    align-items:center;
}

.bo-user-2fa-row input{
    height:44px;
    padding:0 12px;
    border:1px solid #cbd5e1;
    border-radius:10px;
    font-weight:800;
}

.bo-user-profile-extra h4{
    margin:0 0 10px;
    color:#0f172a;
}

@media(max-width:680px){
    .bo-user-profile-head{
        flex-direction:column;
    }

    .bo-user-detail-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:1300px){
    .bo-dashboard-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .bo-dashboard-actions{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media(max-width:900px){
    .bo-dashboard-hero{
        flex-direction:column;
        align-items:flex-start;
    }

    .bo-dashboard-grid,
    .bo-dashboard-columns,
    .bo-dashboard-actions{
        grid-template-columns:1fr;
    }

    .bo-dashboard-hero h2{
        font-size:26px;
    }
}



/* =========================================================
   EZANDOO BACKOFFICE FINAL DELIVERY UI
========================================================= */

.bo-sidebar{
    position:sticky;
    top:0;
    height:100vh;
    overflow:auto;
    scrollbar-width:thin;
}

.bo-nav{
    gap:9px;
}

.bo-nav button{
    display:flex!important;
    align-items:center;
    gap:10px;
    width:100%;
    min-height:46px;
    padding:12px 14px;
    border-radius:14px;
    color:#cbd5e1;
    font-size:14px;
    font-weight:850;
    transition:.18s ease;
}

.bo-nav button span{
    width:22px;
    display:inline-flex;
    justify-content:center;
}

.bo-nav button:hover{
    background:rgba(37,99,235,.18);
    color:white;
    transform:translateX(2px);
}

.bo-nav button.active{
    background:#2563eb;
    color:white;
    box-shadow:0 14px 30px rgba(37,99,235,.22);
}

.bo-sidebar-footer{
    padding-top:20px;
    color:white;
}

.bo-sidebar-footer small{
    display:block;
    color:#94a3b8;
    margin-bottom:4px;
}

.bo-sidebar-footer strong{
    color:white;
    text-transform:capitalize;
}

.bo-final-hero{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    margin-bottom:24px;
    padding:28px;
    border-radius:26px;
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.22), transparent 35%),
        linear-gradient(135deg,#0f172a,#1e293b);
    color:white;
    box-shadow:0 18px 50px rgba(15,23,42,.22);
}

.bo-final-hero span{
    display:inline-flex;
    margin-bottom:8px;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    color:#bfdbfe;
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.bo-final-hero h2{
    margin:0;
    font-size:30px;
    letter-spacing:-.04em;
}

.bo-final-hero p{
    max-width:720px;
    margin:10px 0 0;
    color:#cbd5e1;
    line-height:1.5;
}

.bo-final-hero-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.bo-final-hero .bo-light-btn{
    background:rgba(255,255,255,.12);
    color:white;
    border:1px solid rgba(255,255,255,.2);
}

.bo-final-kpis{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin-bottom:22px;
}

.bo-final-kpi{
    padding:20px;
    border:1px solid #e2e8f0;
    border-radius:22px;
    background:white;
    box-shadow:0 4px 20px rgba(15,23,42,.06);
}

.bo-final-kpi span{
    display:block;
    color:#64748b;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.bo-final-kpi strong{
    display:block;
    margin-top:10px;
    color:#0f172a;
    font-size:28px;
    font-weight:950;
    letter-spacing:-.04em;
}

.bo-final-kpi small{
    display:block;
    margin-top:8px;
    color:#64748b;
    font-size:13px;
}

.bo-final-grid-2{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
    margin-bottom:20px;
}

.bo-final-action-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
}

.bo-final-action-grid.one{
    grid-template-columns:1fr;
}

.bo-final-action-grid button{
    text-align:left;
    min-height:104px;
    padding:18px;
    border:1px solid #e2e8f0;
    border-radius:20px;
    background:#f8fafc;
    cursor:pointer;
    transition:.18s ease;
}

.bo-final-action-grid button:hover{
    transform:translateY(-2px);
    border-color:#2563eb;
    background:white;
    box-shadow:0 14px 34px rgba(37,99,235,.12);
}

.bo-final-action-grid strong{
    display:block;
    color:#0f172a;
    font-size:15px;
    font-weight:900;
}

.bo-final-action-grid span{
    display:block;
    margin-top:7px;
    color:#64748b;
    font-size:13px;
    line-height:1.35;
}

.bo-final-list{
    display:grid;
    gap:10px;
}

.bo-final-list-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    padding:14px;
    border:1px solid #e2e8f0;
    border-radius:16px;
    background:#f8fafc;
}

.bo-final-list-item strong{
    display:block;
    color:#0f172a;
}

.bo-final-list-item span{
    display:block;
    margin-top:3px;
    color:#64748b;
    font-size:13px;
}

.bo-final-list-item em{
    display:inline-flex;
    padding:6px 10px;
    border-radius:999px;
    background:#eef2ff;
    color:#2563eb;
    font-style:normal;
    font-size:12px;
    font-weight:900;
    text-transform:capitalize;
}

.bo-final-list-item em.warning{
    background:#fef3c7;
    color:#92400e;
}

.bo-final-list-item em.danger{
    background:#fee2e2;
    color:#b91c1c;
}

.bo-final-empty{
    padding:22px;
    border:1px dashed #cbd5e1;
    border-radius:18px;
    background:#f8fafc;
}

.bo-final-empty h2,
.bo-final-empty h3{
    margin:0;
    color:#0f172a;
}

.bo-final-empty p{
    margin:8px 0 0;
    color:#64748b;
}

.bo-final-actions{
    display:flex;
    gap:10px;
    margin-top:18px;
    flex-wrap:wrap;
}

.bo-final-detail-list{
    display:grid;
    gap:12px;
}

.bo-final-detail-list div{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    padding:14px;
    border-radius:14px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
}

.bo-final-detail-list span{
    color:#64748b;
    font-size:13px;
    font-weight:800;
}

.bo-final-detail-list strong{
    color:#0f172a;
    font-size:14px;
    text-align:right;
}

.bo-table td span{
    color:#64748b;
    font-size:12px;
}

@media(max-width:1200px){
    .bo-final-kpis{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .bo-final-action-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:900px){
    .bo-layout{
        grid-template-columns:1fr;
    }

    .bo-sidebar{
        position:relative;
        height:auto;
    }

    .bo-final-hero,
    .bo-final-grid-2{
        grid-template-columns:1fr;
        flex-direction:column;
        align-items:flex-start;
    }

    .bo-final-kpis,
    .bo-final-action-grid{
        grid-template-columns:1fr;
    }
}


/* ===== FIX USER MODAL SCROLL AND SAVE BUTTON ===== */

.bo-modal{
    overflow-y:auto;
    align-items:flex-start!important;
    padding-top:32px!important;
    padding-bottom:32px!important;
}

.bo-user-edit-modal{
    max-height:calc(100vh - 64px)!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
}

.bo-user-edit-header{
    flex:0 0 auto;
}

.bo-user-edit-body{
    flex:1 1 auto;
    overflow-y:auto!important;
    max-height:none!important;
    padding-bottom:28px!important;
}

.bo-user-edit-modal .bo-modal-actions{
    flex:0 0 auto;
    position:sticky;
    bottom:0;
    background:#ffffff;
    border-top:1px solid #e2e8f0;
    z-index:5;
}

.bo-user-edit-body::-webkit-scrollbar{
    width:10px;
}

.bo-user-edit-body::-webkit-scrollbar-track{
    background:#f1f5f9;
    border-radius:999px;
}

.bo-user-edit-body::-webkit-scrollbar-thumb{
    background:#94a3b8;
    border-radius:999px;
}

.bo-user-edit-body::-webkit-scrollbar-thumb:hover{
    background:#64748b;
}

.bo-checkbox-item.selected,
.bo-role-card.selected{
    background:#eef2ff!important;
    border-color:#2563eb!important;
}

.bo-toggle-card input,
.bo-role-card input,
.bo-checkbox-item input{
    cursor:pointer;
}


.bo-row-actions button.warning{
    background:#fef3c7;
    color:#92400e;
}

.bo-row-actions button.warning:hover{
    background:#f59e0b;
    color:white;
}


.bo-row-actions .bo-delete-separated{
    margin-left:18px;
    border-left:1px solid #fecaca;
}

.bo-row-actions button.warning{
    background:#fef3c7;
    color:#92400e;
}

.bo-row-actions button.warning:hover{
    background:#f59e0b;
    color:white;
}


.bo-ticket-reference {
    margin: 16px 0;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #f8fafc;
}

.bo-ticket-reference > strong {
    display: block;
    margin-bottom: 12px;
    font-size: 14px;
    color: #111827;
}

.bo-ticket-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.bo-ticket-grid div {
    padding: 12px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #eef2f7;
}

.bo-ticket-grid span {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 4px;
}

.bo-ticket-grid b {
    font-size: 14px;
    color: #0f172a;
}

.bo-ticket-description {
    margin-top: 14px;
    padding: 12px;
    border-radius: 12px;
    background: #ffffff;
    color: #334155;
    line-height: 1.5;
}




.bo-modal {
    z-index: 10000;
}

.bo-modal-box {
    z-index: 10001;
}

#toast.toast,
.toast {
    position: fixed !important;
    top: 28px !important;
    right: 32px !important;
    z-index: 2147483647 !important;

    max-width: 360px;
    min-width: 260px;
    padding: 16px 18px;

    background: #fff7ed;
    color: #7c2d12;
    border: 3px solid #fb923c;
    border-radius: 24px;

    font-size: 14px;
    font-weight: 900;
    line-height: 1.4;

    box-shadow: 0 18px 35px rgba(0,0,0,.25);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-14px) scale(.92);
    transition: .25s ease;

    pointer-events: none;
}

#toast.toast::after,
.toast::after {
    content: "";
    position: absolute;
    right: 34px;
    bottom: -14px;
    width: 24px;
    height: 24px;
    background: #fff7ed;
    border-right: 3px solid #fb923c;
    border-bottom: 3px solid #fb923c;
    transform: rotate(45deg);
}

#toast.toast.show,
.toast.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1);
}



/* ===== PROFESSIONAL ACTION BUBBLE ===== */

.bo-action-bubble-wrap{
    position:relative;
    display:inline-flex;
    align-items:center;
}

.bo-action-bubble{
    position:absolute;
    right:0;
    bottom:calc(100% + 14px);

    width:320px;
    max-width:calc(100vw - 48px);

    padding:14px 16px 14px 44px;

    background:#fff7ed;
    color:#7c2d12;

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

    font-size:13px;
    font-weight:800;
    line-height:1.45;

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

    opacity:0;
    visibility:hidden;
    transform:translateY(8px) scale(.96);

    z-index:2147483647;
    pointer-events:none;

    transition:.22s ease;
}

.bo-action-bubble::before{
    content:"!";
    position:absolute;
    left:14px;
    top:14px;

    width:20px;
    height:20px;

    display:grid;
    place-items:center;

    background:#f97316;
    color:white;

    border-radius:50%;
    font-size:13px;
    font-weight:900;
}

.bo-action-bubble::after{
    content:"";
    position:absolute;
    right:26px;
    bottom:-8px;

    width:16px;
    height:16px;

    background:#fff7ed;
    border-right:1px solid #fed7aa;
    border-bottom:1px solid #fed7aa;

    transform:rotate(45deg);
}

.bo-action-bubble.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
}

.bo-modal{
    overflow-y:auto !important;
}

.bo-modal-box{
    overflow-y:auto !important;
    max-height:90vh !important;
}


/* ===== CREATE DISPUTE MODAL UI ===== */

#boCreateDisputeModal .bo-modal-box{
    width:min(620px, 94vw);
    padding:0;
    border-radius:26px;
    overflow:visible;
    border:1px solid #e2e8f0;
}

#boCreateDisputeModal .bo-modal-box h2{
    margin:0;
    padding:26px 64px 18px 28px;
    border-bottom:1px solid #e2e8f0;
    background:linear-gradient(180deg,#ffffff,#f8fafc);
    color:#0f172a;
    font-size:24px;
}

#boCreateDisputeModal .bo-modal-box label{
    margin:18px 28px 6px;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#475569;
}

#boCreateDisputeModal input,
#boCreateDisputeModal select,
#boCreateDisputeModal textarea{
    width:calc(100% - 56px);
    margin:0 28px;
    border-radius:14px;
    border:1px solid #cbd5e1;
    background:#f8fafc;
}

#boCreateDisputeModal input:focus,
#boCreateDisputeModal select:focus,
#boCreateDisputeModal textarea:focus{
    outline:none;
    border-color:#2563eb;
    background:white;
    box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

#boCreateDisputeModal textarea{
    min-height:120px;
}

#boCreateDisputeModal .bo-modal-actions{
    margin:24px 0 0;
    padding:18px 28px;
    border-top:1px solid #e2e8f0;
    background:#ffffff;
    border-radius:0 0 26px 26px;
}

#boCreateDisputeModal .bo-modal-close{
    top:18px;
    right:18px;
    border-radius:14px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
}


/* ===== DISPUTE TICKET MODAL ===== */

#boDisputeDetailModal .bo-modal-box{
    width:min(900px,95vw);
    max-height:90vh;
    padding:0;
    border-radius:28px;
    overflow:hidden;
    border:1px solid #e2e8f0;
}

#boDisputeDetailModal h2{
    margin:0;
    padding:26px 70px 10px 28px;
    font-size:28px;
    font-weight:900;
    color:#0f172a;
}

#boDisputeDetailModal > .bo-modal-box > p{
    margin:0;
    padding:0 28px 20px;
    color:#64748b;
    border-bottom:1px solid #e2e8f0;
}

#boDisputeDetailModal .bo-modal-close{
    top:18px;
    right:18px;
    width:40px;
    height:40px;
    border-radius:14px;
    border:1px solid #e2e8f0;
    background:#f8fafc;
}

#boDisputeDetailModal .bo-ticket-reference{
    margin:22px 28px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:20px;
    padding:20px;
}

#boDisputeDetailModal .bo-ticket-reference strong{
    display:block;
    margin-bottom:14px;
    font-size:15px;
    color:#0f172a;
}

#boDisputeDetailModal .bo-ticket-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

#boDisputeDetailModal .bo-ticket-grid div{
    background:white;
    border:1px solid #e2e8f0;
    border-radius:14px;
    padding:12px;
}

#boDisputeDetailModal .bo-ticket-grid span{
    display:block;
    color:#94a3b8;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
}

#boDisputeDetailModal .bo-ticket-grid b{
    display:block;
    margin-top:6px;
    color:#0f172a;
    font-size:14px;
    font-weight:900;
}

#boDisputeDetailModal .bo-ticket-description{
    margin-top:14px;
    background:white;
    border:1px solid #e2e8f0;
    border-radius:14px;
    padding:14px;
    color:#475569;
}

#boDisputeDetailModal label{
    display:block;
    margin:18px 28px 6px;
    color:#475569;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
}

#boDisputeDetailModal select,
#boDisputeDetailModal textarea{
    width:calc(100% - 56px);
    margin:0 28px;
    border:1px solid #cbd5e1;
    border-radius:14px;
    background:#f8fafc;
}

#boDisputeDetailModal select:focus,
#boDisputeDetailModal textarea:focus{
    outline:none;
    border-color:#2563eb;
    background:white;
    box-shadow:0 0 0 4px rgba(37,99,235,.10);
}

#boDisputeDetailModal textarea{
    min-height:130px;
}

#boDisputeDetailModal .bo-modal-actions{
    padding:20px 28px;
    border-top:1px solid #e2e8f0;
    background:white;
}

#boDisputeDetailModal h3{
    margin:0 28px 14px;
    color:#0f172a;
}

#boDisputeDetailModal h3 + div{
    margin:0 28px 28px;
    border:1px solid #e2e8f0;
    border-radius:16px;
    overflow:hidden;
    background:#f8fafc;
}

#boDisputeDetailModal h3 + div > div{
    padding:14px 16px !important;
    border-bottom:1px solid #e2e8f0 !important;
}

#boDisputeDetailModal h3 + div > div:last-child{
    border-bottom:none !important;
}


.bo-ticket-history{
    margin-top:24px;
}

.bo-ticket-history h3{
    margin:0 0 12px;
    font-size:15px;
    font-weight:700;
}

.bo-ticket-messages{
    max-height:260px;
    overflow-y:auto;

    border:1px solid #e2e8f0;
    border-radius:18px;
    background:#f8fafc;
}

.bo-ticket-message{
    padding:14px 16px;
    border-bottom:1px solid #e2e8f0;
}

.bo-ticket-message:last-child{
    border-bottom:none;
}

.bo-ticket-message strong{
    display:block;
    margin-bottom:4px;
    color:#0f172a;
    font-size:13px;
    font-weight:700;
}

.bo-ticket-message span{
    display:block;
    color:#64748b;
    font-size:13px;
    line-height:1.5;
    word-break:break-word;
}

.bo-ticket-empty{
    padding:20px;
    text-align:center;
    color:#64748b;
}

.bo-ticket-messages::-webkit-scrollbar{
    width:8px;
}

.bo-ticket-messages::-webkit-scrollbar-thumb{
    background:#94a3b8;
    border-radius:999px;
}

.bo-modal-box{
    max-height:90vh;
    overflow-y:auto;
}


#boDisputeDetailModal .bo-modal-box{
    width:min(900px, 96vw);
    max-height:88vh !important;
    overflow-y:auto !important;
    padding:0;
}

#boDisputeDetailModal .bo-modal-box > h2,
#boDisputeDetailModal .bo-modal-box > p{
    padding-left:28px;
    padding-right:28px;
}

#boDisputeDetailModal .bo-modal-box > h2{
    margin-top:28px;
}

#boDisputeDetailModal .bo-modal-box > p{
    margin-bottom:20px;
}

#boDisputeDetailModal .bo-ticket-reference,
#boDisputeDetailModal label,
#boDisputeDetailModal select,
#boDisputeDetailModal textarea,
#boDisputeDetailModal .bo-ticket-history{
    margin-left:28px;
    margin-right:28px;
}

#boDisputeDetailModal .bo-modal-actions{
    position:sticky;
    bottom:0;
    background:white;
    border-top:1px solid #e2e8f0;
    padding:16px 28px;
    z-index:20;
}

#boDisputeDetailModal textarea{
    min-height:120px;
    max-height:160px;
}

#boDisputeDetailModal .bo-ticket-messages{
    max-height:180px;
    overflow-y:auto;
    margin-bottom:24px;
}


.bo-ticket-message-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:6px;
}

.bo-ticket-message-head small{
    color:#64748b;
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
}

/* =========================================================
   EZANDOO BACKOFFICE RESPONSIVE PRODUCTION LAYER
   Drop this block at the end of css/backoffice.css.
   ========================================================= */

:root{
    --bo-page-pad:clamp(14px, 2vw, 28px);
    --bo-gap:clamp(12px, 1.6vw, 22px);
    --bo-sidebar-w:280px;
    --bo-touch:44px;
}

html,body{
    width:100%;
    min-width:0;
    overflow-x:hidden;
}

*,*::before,*::after{
    box-sizing:border-box;
}

img,video,canvas,svg,iframe{
    max-width:100%;
}

button,input,select,textarea{
    min-width:0;
    font:inherit;
}

input,select,textarea{
    font-size:16px;
}

.bo-layout{
    grid-template-columns:var(--bo-sidebar-w) minmax(0, 1fr);
    width:100%;
}

.bo-main,.bo-workspace,.bo-panel,.bo-topbar{
    min-width:0;
}

.bo-topbar{
    gap:var(--bo-gap);
    padding:var(--bo-page-pad);
}

.bo-topbar h1,.bo-topbar p{
    overflow-wrap:anywhere;
}

.bo-top-actions{
    flex-wrap:wrap;
}

.bo-workspace{
    padding:var(--bo-page-pad);
}

.bo-kpi-grid,.bo-dashboard-grid,.bo-modal-grid,.bo-report-grid,.bo-settings-grid{
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap:var(--bo-gap);
}

.bo-panel{
    overflow:hidden;
}

.bo-panel-head,.bo-table-tools,.bo-row-actions,.bo-modal-actions{
    flex-wrap:wrap;
}

.bo-table-tools input,.bo-table-tools select,.bo-table-tools button,
.bo-light-btn,.bo-primary-btn{
    min-height:var(--bo-touch);
}

.bo-table-tools input,.bo-table-tools select{
    flex:1 1 220px;
}

.bo-table-wrap{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

.bo-table{
    min-width:760px;
}

.bo-modal{
    padding:16px;
}

.bo-modal-box{
    width:min(620px, calc(100vw - 32px));
    max-height:calc(100dvh - 32px);
    overflow:auto;
}

/* Pantallas grandes */
@media (min-width:1600px){
    .bo-workspace{
        max-width:1600px;
        width:100%;
    }

    .bo-dashboard-grid{
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }
}

/* Tablets */
@media (max-width:1100px){
    :root{
        --bo-sidebar-w:240px;
    }

    .bo-sidebar{
        padding:18px;
    }

    .bo-brand-icon{
        width:46px;
        height:46px;
    }

    .bo-brand-text strong{
        font-size:19px;
    }

    .bo-nav button{
        padding:11px 10px;
        font-size:14px;
    }
}

/* Tablets pequeñas y móviles horizontales */
@media (max-width:900px){
    .bo-layout{
        display:block;
    }

    .bo-sidebar{
        position:sticky;
        top:0;
        z-index:1000;
        padding:12px;
    }

    .bo-brand{
        margin-bottom:10px;
        padding-bottom:12px;
    }

    .bo-nav{
        display:flex;
        flex-direction:row;
        gap:8px;
        overflow-x:auto;
        padding-bottom:8px;
        -webkit-overflow-scrolling:touch;
    }

    .bo-nav button{
        flex:0 0 auto;
        white-space:nowrap;
    }

    .bo-sidebar-footer{
        display:none;
    }

    .bo-topbar{
        align-items:flex-start;
        flex-direction:column;
    }

    .bo-top-actions{
        width:100%;
        justify-content:flex-start;
    }

    .bo-user-chip{
        flex:1 1 220px;
    }
}

/* Teléfonos */
@media (max-width:640px){
    .bo-topbar h1{
        font-size:clamp(24px, 8vw, 34px);
    }

    .bo-panel,.bo-kpi-card,.bo-dashboard-card{
        border-radius:18px;
        padding:16px;
    }

    .bo-kpi-grid,.bo-dashboard-grid,.bo-modal-grid,.bo-report-grid,.bo-settings-grid{
        grid-template-columns:1fr !important;
    }

    .bo-panel-head,.bo-table-tools,.bo-top-actions,.bo-modal-actions{
        display:flex;
        flex-direction:column;
        align-items:stretch;
    }

    .bo-table-tools input,.bo-table-tools select,.bo-table-tools button,
    .bo-light-btn,.bo-primary-btn,.bo-row-actions button,.bo-modal-actions button{
        width:100%;
    }

    .bo-table{
        min-width:680px;
        font-size:14px;
    }

    .bo-table th,.bo-table td{
        padding:10px;
    }

    .bo-product-cell{
        min-width:220px;
    }

    .bo-modal{
        padding:10px;
    }

    .bo-modal-box{
        width:calc(100vw - 20px);
        border-radius:18px;
        padding:18px;
    }
}

/* Teléfonos muy pequeños */
@media (max-width:380px){
    .bo-brand-text span{
        display:none;
    }

    .bo-nav button{
        font-size:13px;
        padding:10px;
    }

    .bo-table{
        min-width:620px;
    }
}

/* Pantallas bajitas horizontales */
@media (max-height:520px) and (orientation:landscape){
    .bo-sidebar{
        position:relative;
    }

    .bo-modal-box{
        max-height:calc(100dvh - 20px);
    }
}


/* CUSTOMER SERVICE BACKOFFICE */

.bo-cs-hero{
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.16), transparent 38%),
        linear-gradient(135deg,#111827,#1e3a8a);
    color:white;
    border-radius:28px;
    padding:28px;
    margin-bottom:22px;
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:flex-start;
    box-shadow:0 24px 60px rgba(15,23,42,.18);
}

.bo-cs-hero span{
    display:inline-flex;
    background:rgba(255,255,255,.14);
    padding:7px 12px;
    border-radius:999px;
    font-weight:900;
    margin-bottom:10px;
}

.bo-cs-hero h2{
    font-size:clamp(30px, 4vw, 48px);
    line-height:1;
    margin:0;
}

.bo-cs-hero p{
    color:#dbeafe;
    max-width:680px;
    line-height:1.55;
    margin-top:12px;
}

.bo-cs-hero-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.bo-cs-layout{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 260px;
    gap:18px;
}

.bo-cs-ticket-list{
    display:grid;
    gap:14px;
}

.bo-cs-ticket-card{
    border:1px solid #e5e7eb;
    border-radius:22px;
    padding:18px;
    background:white;
    box-shadow:0 10px 28px rgba(15,23,42,.05);
}

.bo-cs-ticket-top{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}

.bo-cs-ticket-top strong{
    font-size:18px;
}

.bo-cs-ticket-top p,
.bo-cs-ticket-desc{
    color:#64748b;
}

.bo-cs-ticket-desc{
    line-height:1.45;
}

.bo-cs-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:14px 0;
}

.bo-cs-meta span{
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:999px;
    padding:7px 10px;
    font-weight:800;
    font-size:12px;
    color:#475569;
}

.bo-cs-side-panel{
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:22px;
    padding:16px;
    height:fit-content;
    position:sticky;
    top:20px;
}

.bo-cs-side-panel h3{
    margin:0 0 12px;
}

.bo-cs-side-panel button{
    width:100%;
    min-height:42px;
    margin-top:8px;
    border-radius:12px;
    background:white;
    border:1px solid #e5e7eb;
    font-weight:900;
    cursor:pointer;
}

.bo-cs-side-panel button:hover{
    background:#2563eb;
    color:white;
}

.bo-muted{
    color:#64748b;
    margin-top:6px;
}

@media(max-width:900px){
    .bo-cs-hero,
    .bo-cs-ticket-top{
        flex-direction:column;
    }

    .bo-cs-layout{
        grid-template-columns:1fr;
    }

    .bo-cs-side-panel{
        position:relative;
        top:auto;
    }

    .bo-cs-hero-actions button{
        width:100%;
    }
}


/* =========================================================
   FRAUD & USER REPORTS CENTER UI
   Pegado al final de css/backoffice.css
   ========================================================= */

.bo-fraud-hero{
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.18), transparent 38%),
        linear-gradient(135deg,#111827,#1e3a8a);
    color:white;
    border-radius:28px;
    padding:28px;
    margin-bottom:22px;
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:flex-start;
    box-shadow:0 24px 60px rgba(15,23,42,.18);
}

.bo-fraud-hero span{
    display:inline-flex;
    background:rgba(255,255,255,.14);
    padding:7px 12px;
    border-radius:999px;
    font-weight:900;
    margin-bottom:10px;
}

.bo-fraud-hero h2{
    font-size:clamp(30px,4vw,48px);
    line-height:1;
    margin:0;
}

.bo-fraud-hero p{
    color:#dbeafe;
    max-width:720px;
    line-height:1.55;
    margin-top:12px;
}

.bo-fraud-hero-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.bo-report-list{
    display:grid;
    gap:16px;
}

.bo-report-card{
    background:white;
    border:1px solid #e5e7eb;
    border-radius:22px;
    padding:18px;
    box-shadow:0 10px 28px rgba(15,23,42,.05);
}

.bo-report-card-top{
    display:flex;
    justify-content:space-between;
    gap:14px;
    margin-bottom:12px;
}

.bo-report-card-top strong{
    font-size:20px;
}

.bo-report-card-top p,
.bo-report-desc{
    color:#64748b;
}

.bo-report-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:14px 0;
}

.bo-report-meta span{
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:999px;
    padding:7px 10px;
    font-size:12px;
    font-weight:800;
    color:#475569;
}

.bo-report-message-preview{
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:14px;
    margin:14px 0;
}

.bo-mini-message{
    background:white;
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:10px;
    margin-top:8px;
}

.bo-mini-message p{
    color:#334155;
    margin-top:4px;
}

.bo-muted{
    color:#64748b;
    margin-top:6px;
}

@media(max-width:900px){
    .bo-fraud-hero,
    .bo-report-card-top{
        flex-direction:column;
    }

    .bo-fraud-hero-actions button{
        width:100%;
    }
}


/* =========================================================
   FRAUD CENTER READ-ONLY UI + PAGINATION
   ========================================================= */

.bo-fraud-readonly-hero{
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.18), transparent 38%),
        linear-gradient(135deg,#111827,#1e3a8a);
    color:white;
    border-radius:28px;
    padding:28px;
    margin-bottom:22px;
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:flex-start;
    box-shadow:0 24px 60px rgba(15,23,42,.18);
}

.bo-fraud-readonly-hero span{
    display:inline-flex;
    background:rgba(255,255,255,.14);
    padding:7px 12px;
    border-radius:999px;
    font-weight:900;
    margin-bottom:10px;
}

.bo-fraud-readonly-hero h2{
    font-size:clamp(30px,4vw,48px);
    line-height:1;
    margin:0;
}

.bo-fraud-readonly-hero p{
    color:#dbeafe;
    max-width:760px;
    line-height:1.55;
    margin-top:12px;
}

.bo-fraud-readonly-actions,
.bo-tab-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.bo-readonly-note{
    display:flex;
    gap:12px;
    align-items:center;
    background:#f8fafc;
    border:1px solid #dbe3f0;
    border-radius:16px;
    padding:12px 14px;
    margin-bottom:16px;
    color:#475569;
}

.bo-readonly-note strong{
    color:#2563eb;
    white-space:nowrap;
}

.bo-report-list{
    display:grid;
    gap:16px;
}

.bo-report-card.readonly{
    background:white;
    border:1px solid #e5e7eb;
    border-radius:22px;
    padding:18px;
    box-shadow:0 10px 28px rgba(15,23,42,.05);
}

.bo-report-card-top{
    display:flex;
    justify-content:space-between;
    gap:14px;
    margin-bottom:12px;
}

.bo-report-card-top strong{
    font-size:20px;
}

.bo-report-card-top p,
.bo-report-desc{
    color:#64748b;
}

.bo-report-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:14px 0;
}

.bo-report-meta span{
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:999px;
    padding:7px 10px;
    font-size:12px;
    font-weight:800;
    color:#475569;
}

.bo-report-message-preview{
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:14px;
    margin:14px 0;
}

.bo-mini-message{
    background:white;
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:10px;
    margin-top:8px;
}

.bo-mini-message p{
    color:#334155;
    margin-top:4px;
}

.bo-mini-message small{
    color:#64748b;
}

.bo-readonly-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    margin-top:12px;
}

.bo-readonly-actions span{
    color:#64748b;
    font-weight:800;
}

.bo-fraud-pagination{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-top:18px;
    padding:14px;
    border:1px solid #e5e7eb;
    border-radius:18px;
    background:#f8fafc;
}

.bo-fraud-pagination span{
    color:#475569;
    font-weight:800;
}

.bo-fraud-pagination div{
    display:flex;
    gap:8px;
}

.bo-fraud-pagination button:disabled{
    opacity:.45;
    cursor:not-allowed;
}

@media(max-width:900px){
    .bo-fraud-readonly-hero,
    .bo-report-card-top,
    .bo-readonly-note,
    .bo-fraud-pagination{
        flex-direction:column;
        align-items:stretch;
    }

    .bo-fraud-readonly-actions button,
    .bo-tab-actions button,
    .bo-fraud-pagination button{
        width:100%;
    }
}

/* =========================================================
   ADMIN DATA UX - PAGINATION, STATES, SETTINGS, IMPORT
   ========================================================= */

.bo-pagination,
.bo-list-summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}

.bo-pagination{
    padding:12px 14px;
    margin:12px 0;
    border:1px solid #e2e8f0;
    border-radius:14px;
    background:#f8fafc;
}

.bo-list-summary{
    color:#475569;
    font-size:13px;
    font-weight:800;
}

.bo-pagination-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.bo-page-mode{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:4px 9px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    background:#e0f2fe;
    color:#075985;
}

.bo-page-mode.client{
    background:#fff7ed;
    color:#9a3412;
}

.bo-subsection-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:18px 0 10px;
}

.bo-subsection-head h3{
    margin:0;
}

.bo-progress-strip{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:14px 0;
}

.bo-progress-strip span{
    display:inline-flex;
    align-items:center;
    min-height:32px;
    padding:7px 12px;
    border-radius:999px;
    background:#f1f5f9;
    color:#64748b;
    font-size:12px;
    font-weight:900;
}

.bo-progress-strip span.active{
    background:#dbeafe;
    color:#1d4ed8;
}

.bo-pagination button:disabled,
.bo-primary-btn:disabled,
.bo-light-btn:disabled{
    opacity:.45;
    cursor:not-allowed;
    transform:none;
}

.bo-loading-state{
    position:relative;
}

.bo-loading-state::before{
    content:"";
    width:28px;
    height:28px;
    display:block;
    margin:0 auto 12px;
    border-radius:50%;
    border:3px solid #dbeafe;
    border-top-color:#2563eb;
    animation:boSpin .8s linear infinite;
}

.bo-loading-state::after{
    content:"";
    display:block;
    width:min(420px, 90%);
    height:10px;
    margin:14px auto 0;
    border-radius:999px;
    background:linear-gradient(90deg,#e2e8f0,#f8fafc,#e2e8f0);
    background-size:220% 100%;
    animation:boSkeleton 1.2s ease-in-out infinite;
}

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

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

.bo-error-state{
    border-color:#fecaca;
    background:#fff7f7;
}

.bo-error-state h3{
    color:#b91c1c;
}

.bo-primary-btn.danger{
    background:#dc2626;
    box-shadow:0 12px 24px rgba(220,38,38,.22);
}

.bo-confirm-box p{
    color:#475569;
    line-height:1.5;
}

.bo-settings-grid{
    display:grid;
    grid-template-columns:minmax(0, .9fr) minmax(0, 1.4fr);
    gap:18px;
}

.bo-settings-grid .bo-panel:nth-child(3){
    grid-column:1 / -1;
}

.bo-settings-list{
    display:grid;
    gap:10px;
}

.bo-settings-list div,
.bo-permission-grid article{
    padding:14px;
    border:1px solid #e2e8f0;
    border-radius:14px;
    background:#f8fafc;
}

.bo-settings-list span,
.bo-settings-actions span{
    display:block;
    color:#64748b;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.bo-settings-list strong{
    display:block;
    margin-top:6px;
    color:#0f172a;
    overflow-wrap:anywhere;
}

.bo-permission-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}

.bo-permission-grid article > strong{
    display:block;
    margin-bottom:10px;
    color:#0f172a;
}

.bo-settings-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    align-items:flex-end;
}

.bo-settings-actions label{
    min-width:200px;
}

.bo-settings-actions select{
    width:100%;
    height:44px;
    margin-top:8px;
    border:1px solid #d8dee9;
    border-radius:12px;
    padding:0 12px;
    background:white;
}

.bo-import-box{
    display:grid;
    grid-template-columns:minmax(220px, 320px) minmax(0, 1fr);
    gap:18px;
}

.bo-import-drop{
    min-height:190px;
    display:grid;
    place-items:center;
    gap:8px;
    padding:22px;
    border:2px dashed #bfdbfe;
    border-radius:18px;
    background:#eff6ff;
    text-align:center;
    cursor:pointer;
}

.bo-import-drop input{
    display:none;
}

.bo-import-drop strong{
    color:#1d4ed8;
}

.bo-import-drop span{
    max-width:100%;
    color:#475569;
    overflow-wrap:anywhere;
}

.bo-import-preview .bo-table{
    min-width:520px;
}

@media(max-width:900px){
    .bo-settings-grid,
    .bo-import-box,
    .bo-permission-grid{
        grid-template-columns:1fr;
    }

    .bo-pagination,
    .bo-list-summary,
    .bo-pagination-actions,
    .bo-settings-actions{
        align-items:stretch;
        flex-direction:column;
    }

    .bo-pagination-actions button,
    .bo-settings-actions button{
        width:100%;
    }
}

@media(max-width:640px){
    .bo-workspace{
        padding:12px;
    }

    .bo-table-wrap{
        border-radius:12px;
    }

    .bo-table{
        min-width:640px;
    }

    .bo-row-actions{
        flex-wrap:wrap;
    }
}

/* =========================================================
   RESPONSIVE TABLE CARDS + CONSISTENT ADMIN SURFACE
   ========================================================= */

.bo-table td,
.bo-table th{
    overflow-wrap:break-word;
    word-break:normal;
    hyphens:none;
}

.bo-table th,
.bo-table .bo-status,
.bo-table .bo-row-actions button{
    white-space:nowrap;
    overflow-wrap:normal;
    word-break:normal;
}

.bo-table .bo-status{
    flex-shrink:0;
}

.bo-users-table{
    min-width:1120px;
}

.bo-fraud-cases-table{
    min-width:1120px;
}

.bo-logistics-table{
    min-width:1180px;
}

.bo-users-table th:nth-child(3),
.bo-users-table th:nth-child(4),
.bo-users-table th:nth-child(5),
.bo-users-table th:nth-child(6),
.bo-users-table td:nth-child(3),
.bo-users-table td:nth-child(4),
.bo-users-table td:nth-child(5),
.bo-users-table td:nth-child(6),
.bo-fraud-cases-table th:nth-child(1),
.bo-fraud-cases-table th:nth-child(2),
.bo-fraud-cases-table th:nth-child(3),
.bo-fraud-cases-table th:nth-child(4),
.bo-fraud-cases-table th:nth-child(6),
.bo-fraud-cases-table td:nth-child(1),
.bo-fraud-cases-table td:nth-child(2),
.bo-fraud-cases-table td:nth-child(3),
.bo-fraud-cases-table td:nth-child(4),
.bo-fraud-cases-table td:nth-child(6){
    white-space:nowrap;
}

.bo-users-table td:nth-child(1),
.bo-users-table td:nth-child(2){
    min-width:150px;
}

.bo-users-table td:nth-child(8){
    min-width:180px;
}

.bo-users-table .bo-actions-col,
.bo-users-table td:last-child{
    width:205px;
    min-width:205px;
}

.bo-users-table .bo-row-actions{
    gap:6px;
    flex-wrap:nowrap;
    justify-content:flex-start;
}

.bo-users-table .bo-row-actions button{
    padding-left:9px;
    padding-right:9px;
}

.bo-fraud-cases-table td:nth-child(5){
    min-width:260px;
}

.bo-table .bo-row-actions{
    min-width:max-content;
}

.bo-empty-state{
    border:1px dashed #cbd5e1;
    background:#f8fafc;
}

.bo-panel,
.bo-kpi-card,
.bo-dashboard-card,
.bo-report-card,
.bo-cs-ticket-card{
    border-radius:16px;
}

.bo-light-btn,
.bo-primary-btn,
.bo-row-actions button,
.bo-kpi-actions button{
    min-height:40px;
}

@media(max-width:760px){
    .bo-table-wrap{
        overflow:visible;
        border:0;
        background:transparent;
    }

    .bo-table{
        min-width:0!important;
        width:100%;
        display:block;
        background:transparent;
    }

    .bo-table thead{
        display:none;
    }

    .bo-table tbody{
        display:grid;
        gap:12px;
    }

    .bo-table tr{
        display:grid;
        gap:10px;
        padding:14px;
        border:1px solid #dbe4f0;
        border-radius:16px;
        background:#ffffff;
        box-shadow:0 10px 24px rgba(15,23,42,.06);
    }

    .bo-table td{
        display:grid;
        grid-template-columns:minmax(92px, 38%) minmax(0, 1fr);
        gap:10px;
        align-items:start;
        padding:0!important;
        border:0!important;
        min-width:0;
    }

    .bo-table td::before{
        content:attr(data-label);
        color:#64748b;
        font-size:11px;
        font-weight:900;
        text-transform:uppercase;
        letter-spacing:.06em;
    }

    .bo-table td:empty{
        display:none;
    }

    .bo-product-cell,
    .bo-user-cell,
    .bo-person-cell{
        min-width:0!important;
    }

    .bo-row-actions{
        width:100%;
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .bo-row-actions button{
        width:100%;
    }

    .bo-panel-head{
        gap:14px;
    }
}

.bo-density-compact .bo-panel,
.bo-density-compact .bo-kpi-card,
.bo-density-compact .bo-dashboard-card{
    padding:16px!important;
}

.bo-density-compact .bo-table th,
.bo-density-compact .bo-table td{
    padding:9px 10px!important;
}

.bo-density-compact .bo-nav button{
    min-height:40px;
    padding-top:8px;
    padding-bottom:8px;
}

.bo-related-modules{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:16px;
}

.bo-related-modules .active{
    background:#2563eb;
    color:white;
    border-color:#2563eb;
}

.bo-user-filters{
    display:grid;
    grid-template-columns:minmax(220px, 1fr) repeat(3, minmax(140px, .45fr)) minmax(90px, .25fr) auto;
}

.bo-import-box{
    grid-template-columns:minmax(220px, 280px) minmax(220px, 320px) minmax(0, 1fr);
    align-items:start;
}

.bo-import-controls,
.bo-import-actions{
    display:grid;
    gap:12px;
}

.bo-import-actions p{
    color:#64748b;
    font-weight:700;
}

@media(max-width:1100px){
    .bo-user-filters,
    .bo-import-box{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   ADMIN DARK MODE
   ========================================================= */

:root[data-theme="dark"]{
    color-scheme:dark;
    --bo-dark-bg:#0b1120;
    --bo-dark-panel:#111827;
    --bo-dark-panel-2:#0f172a;
    --bo-dark-line:#263449;
    --bo-dark-text:#e5edf8;
    --bo-dark-muted:#9fb0c7;
    --bo-dark-soft:#182235;
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] .backoffice-body{
    background:#0b1120!important;
    color:var(--bo-dark-text)!important;
}

:root[data-theme="dark"] .bo-main,
:root[data-theme="dark"] .bo-workspace{
    background:#0b1120!important;
}

:root[data-theme="dark"] .bo-topbar,
:root[data-theme="dark"] .bo-panel,
:root[data-theme="dark"] .bo-dashboard-card,
:root[data-theme="dark"] .bo-kpi-card,
:root[data-theme="dark"] .bo-modal-box,
:root[data-theme="dark"] .bo-report-card,
:root[data-theme="dark"] .bo-cs-ticket-card,
:root[data-theme="dark"] .bo-settings-list div,
:root[data-theme="dark"] .bo-permission-grid article,
:root[data-theme="dark"] .bo-pagination,
:root[data-theme="dark"] .bo-readonly-note{
    background:var(--bo-dark-panel)!important;
    border-color:var(--bo-dark-line)!important;
    color:var(--bo-dark-text)!important;
    box-shadow:0 16px 40px rgba(0,0,0,.28)!important;
}

:root[data-theme="dark"] .bo-sidebar{
    background:#070d1a!important;
    border-color:#1f2a3d!important;
}

:root[data-theme="dark"] .bo-topbar-copy h1,
:root[data-theme="dark"] .bo-panel h2,
:root[data-theme="dark"] .bo-panel h3,
:root[data-theme="dark"] .bo-dashboard-card strong,
:root[data-theme="dark"] .bo-kpi-card strong,
:root[data-theme="dark"] .bo-table td,
:root[data-theme="dark"] .bo-table strong,
:root[data-theme="dark"] .bo-user-chip strong,
:root[data-theme="dark"] .bo-settings-list strong,
:root[data-theme="dark"] .bo-permission-grid article > strong{
    color:var(--bo-dark-text)!important;
}

:root[data-theme="dark"] .bo-topbar-copy p,
:root[data-theme="dark"] .bo-panel p,
:root[data-theme="dark"] .bo-list-summary,
:root[data-theme="dark"] .bo-table-tools input,
:root[data-theme="dark"] .bo-table-tools select,
:root[data-theme="dark"] .bo-user-chip small,
:root[data-theme="dark"] .bo-empty-state p,
:root[data-theme="dark"] .bo-settings-list span{
    color:var(--bo-dark-muted)!important;
}

:root[data-theme="dark"] .bo-light-btn,
:root[data-theme="dark"] .bo-sidebar-toggle,
:root[data-theme="dark"] .bo-lang-switch,
:root[data-theme="dark"] .bo-user-chip,
:root[data-theme="dark"] .bo-row-actions button,
:root[data-theme="dark"] .bo-table-tools input,
:root[data-theme="dark"] .bo-table-tools select,
:root[data-theme="dark"] .bo-modal-box input,
:root[data-theme="dark"] .bo-modal-box textarea,
:root[data-theme="dark"] .bo-modal-box select,
:root[data-theme="dark"] .bo-settings-actions select{
    background:var(--bo-dark-soft)!important;
    border-color:var(--bo-dark-line)!important;
    color:var(--bo-dark-text)!important;
}

:root[data-theme="dark"] .bo-progress-strip span,
:root[data-theme="dark"] .bo-page-mode.client{
    background:#1e293b!important;
    color:#cbd5e1!important;
}

:root[data-theme="dark"] .bo-progress-strip span.active,
:root[data-theme="dark"] .bo-page-mode{
    background:#1d4ed8!important;
    color:#eff6ff!important;
}

:root[data-theme="dark"] .bo-table{
    background:var(--bo-dark-panel)!important;
}

:root[data-theme="dark"] .bo-table th{
    background:#182235!important;
    color:#c3d0e4!important;
    border-color:var(--bo-dark-line)!important;
}

:root[data-theme="dark"] .bo-table td{
    border-color:#202b3d!important;
}

:root[data-theme="dark"] .bo-empty-state{
    background:#101a2b!important;
    border-color:#334155!important;
}

:root[data-theme="dark"] .bo-error-state{
    background:#2a1114!important;
    border-color:#7f1d1d!important;
}

@media(max-width:760px){
    :root[data-theme="dark"] .bo-table tr{
        background:var(--bo-dark-panel)!important;
        border-color:var(--bo-dark-line)!important;
    }

    :root[data-theme="dark"] .bo-table td::before{
        color:#9fb0c7!important;
    }
}

/* =========================================================
   ADMIN SHELL SIDEBAR - RESPONSIVE FINAL OVERRIDES
   ========================================================= */

:root{
    --bo-sidebar-w:280px;
    --bo-sidebar-compact-w:78px;
    --bo-shell-top:0px;
}

.backoffice-body{
    min-height:100dvh;
    background:#eef2f7;
}

.bo-layout{
    display:block;
    min-height:100dvh;
    width:100%;
}

.bo-sidebar{
    position:fixed;
    inset:0 auto 0 0;
    z-index:3000;
    width:var(--bo-sidebar-w);
    height:100dvh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:22px 18px;
    overflow:hidden;
    overflow-x:hidden;
    background:#0f172a;
    border-right:1px solid rgba(148,163,184,.18);
    box-shadow:18px 0 45px rgba(15,23,42,.16);
    transition:width .2s ease, transform .24s ease;
    scrollbar-width:thin;
    scrollbar-color:#475569 transparent;
}

.bo-sidebar::-webkit-scrollbar{
    width:8px;
}

.bo-sidebar::-webkit-scrollbar-thumb{
    background:#475569;
    border-radius:999px;
}

.bo-brand{
    flex:0 0 auto;
    gap:12px;
    margin:0;
    padding:8px 6px 18px;
    border-bottom:1px solid rgba(148,163,184,.16);
}

.bo-brand-icon{
    width:54px;
    height:54px;
    flex:0 0 54px;
    border-radius:15px;
}

.bo-brand-text{
    min-width:0;
}

.bo-brand-text strong,
.bo-brand-text span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.bo-nav{
    flex:1 1 0;
    display:flex;
    flex-direction:column;
    gap:6px;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding:2px 4px 10px 0;
    scrollbar-width:thin;
    scrollbar-color:#475569 transparent;
}

.bo-nav::-webkit-scrollbar{
    width:6px;
}

.bo-nav::-webkit-scrollbar-thumb{
    background:#475569;
    border-radius:999px;
}

.bo-nav button{
    background:transparent;
    color:#cbd5e1;
    border:none;
    text-align:left;
    padding:12px;
    border-radius:12px;
    font-weight:700;
    cursor:pointer;
    transition:all .15s ease;
}

.bo-nav button.active,
.bo-nav button:hover{
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    color:white;
    box-shadow:0 10px 18px rgba(37,99,235,.25);
}

.bo-sidebar-footer{
    margin-top:40px;
}

.bo-main{
    display:flex;
    flex-direction:column;
}

.bo-topbar{
    background:linear-gradient(135deg,#ffffff 0%,#f8fbff 100%);
    border-bottom:1px solid #e5e7eb;
    padding:24px 24px 20px;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:18px;
}

.bo-topbar-copy h1{
    margin:4px 0 6px;
    font-size:28px;
    line-height:1.1;
    color:#0f172a;
}

.bo-topbar-copy p{
    margin:0;
    color:#475569;
}

.bo-eyebrow{
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:11px;
    font-weight:800;
    color:#2563eb;
}

.bo-top-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    margin-left:auto;
}

.bo-light-btn,
.bo-primary-btn{
    border:none;
    border-radius:10px;
    padding:12px 16px;
    font-weight:700;
    cursor:pointer;
    transition:transform .12s ease, box-shadow .18s ease;
}

.bo-light-btn:hover,
.bo-primary-btn:hover{
    transform:translateY(-1px);
}

.bo-primary-btn{
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    color:white;
    box-shadow:0 12px 24px rgba(37,99,235,.25);
}

.bo-light-btn{
    background:#f8fafc;
    color:#0f172a;
    border:1px solid #dbe4f0;
}

.bo-lang-switch{
    display:flex;
    align-items:center;
    gap:8px;
    background:#eff6ff;
    border:1px solid #bfdbfe;
    border-radius:12px;
    padding:8px 10px;
}

.bo-lang-switch select{
    border:none;
    background:transparent;
    color:#1e3a8a;
    font-weight:700;
    font-size:14px;
}

.bo-user-chip{
    display:flex;
    align-items:center;
    gap:10px;
    background:#0f172a;
    color:white;
    border-radius:14px;
    padding:10px 12px;
    box-shadow:0 12px 30px rgba(15,23,42,.18);
}

.bo-user-chip small{
    color:#cbd5e1;
}

.bo-user-dot{
    width:10px;
    height:10px;
    border-radius:999px;
    background:#22c55e;
    box-shadow:0 0 0 4px rgba(34,197,94,.15);
}

.bo-workspace{
    padding:24px;
}

.bo-kpi-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:20px;
    margin-bottom:20px;
}

.bo-kpi-card{
    background:white;
    border-radius:18px;
    padding:20px;
    box-shadow:
        0 4px 20px
        rgba(0,0,0,.08);
}

.bo-kpi-card span{
    color:#64748b;
}

.bo-kpi-card strong{
    display:block;
    font-size:36px;
    margin:10px 0;
}

.bo-panel{
    background:white;
    border-radius:18px;
    padding:24px;
    box-shadow:
        0 4px 20px
        rgba(0,0,0,.08);
}

@media(
max-width:900px
){

.bo-layout{

grid-template-columns:
1fr;

}

}


.bo-panel-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-bottom:18px;
}

.bo-panel-head h2{
    margin:0;
}

.bo-panel-head p{
    color:#64748b;
    margin-top:4px;
}

.bo-table-tools{
    display:flex;
    gap:12px;
    margin-bottom:16px;
}

.bo-table-tools input,
.bo-table-tools select{
    height:44px;
    border:1px solid #d8dee9;
    border-radius:12px;
    padding:0 12px;
    background:white;
}

.bo-table-tools input{
    flex:1;
}

.bo-table-wrap{
    overflow:auto;
    max-width:100%;
    border:1px solid #d8dee9;
    border-radius:16px;
}

.bo-table{
    width:100%;
    border-collapse:collapse;
    background:white;
    min-width:900px;
}

.bo-table th{
    text-align:left;
    background:#f8fafc;
    color:#475569;
    padding:14px;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.04em;
    border-bottom:1px solid #d8dee9;
}

.bo-table td{
    padding:14px;
    border-bottom:1px solid #edf2f7;
    vertical-align:middle;
}

.bo-product-cell{
    display:flex;
    align-items:center;
    gap:12px;
}

.bo-product-cell img{
    width:54px;
    height:54px;
    border-radius:12px;
    object-fit:cover;
    background:#f1f5f9;
}

.bo-product-cell strong{
    display:block;
    color:#111827;
}

.bo-product-cell span{
    display:block;
    color:#64748b;
    font-size:12px;
    margin-top:3px;
}

.bo-status{
    display:inline-flex;
    padding:6px 10px;
    border-radius:999px;
    font-weight:900;
    font-size:12px;
    background:#eef2ff;
    color:#2563eb;
}

.bo-status.inactive{
    background:#fee2e2;
    color:#b91c1c;
}

.bo-status.draft{
    background:#fef3c7;
    color:#92400e;
}

.bo-row-actions{
    display:flex;
    gap:8px;
}

.bo-row-actions button{
    border:none;
    border-radius:10px;
    padding:8px 10px;
    background:#f8fafc;
    color:#111827;
    font-weight:800;
    cursor:pointer;
}

.bo-row-actions button:hover{
    background:#e5e7eb;
}

.bo-row-actions button.danger{
    background:#fee2e2;
    color:#b91c1c;
}

.bo-row-actions button.danger:hover{
    background:#ef4444;
    color:white;
}

.bo-modal{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.65);
    display:grid;
    place-items:center;
    z-index:50000;
    padding:20px;
}

.bo-modal-box{
    width:min(520px,100%);
    max-height:90vh;
    overflow:auto;
    background:white;
    border-radius:20px;
    padding:24px;
    position:relative;
    box-shadow:0 30px 80px rgba(0,0,0,.35);
}

.bo-modal-close{
    position:absolute;
    top:14px;
    right:14px;
    width:34px;
    height:34px;
    border-radius:50%;
    border:none;
    background:#f1f5f9;
    font-weight:900;
    cursor:pointer;
}

.bo-modal-box label{
    display:block;
    margin-top:14px;
    font-weight:800;
    color:#334155;
}

.bo-modal-box input,
.bo-modal-box textarea,
.bo-modal-box select{
    width:100%;
    margin-top:6px;
    border:1px solid #d8dee9;
    border-radius:12px;
    padding:12px;
    font:inherit;
}

.bo-modal-box textarea{
    min-height:110px;
    resize:vertical;
}

.bo-modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:18px;
}

.bo-modal-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:12px;
    margin-top:16px;
}

.bo-checkbox-list{
    display:grid;
    gap:10px;
    margin-top:10px;
    padding:10px;
    border:1px solid #e2e8f0;
    border-radius:14px;
    background:#f8fafc;
}

.bo-checkbox-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:12px;
    background:white;
    cursor:pointer;
    border:1px solid #e2e8f0;
    font-size:14px;
}

.bo-checkbox-item input {
    accent-color:#2563eb;
}

.bo-user-chip{
    height:42px;
    display:flex;
    align-items:center;
    gap:10px;
    background:#f8fafc;
    border:1px solid #d8dee9;
    border-radius:12px;
    padding:0 12px;
}

.bo-user-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 0 4px #dcfce7;
}

.bo-user-chip strong{
    display:block;
    font-size:13px;
    color:#111827;
    line-height:1;
}

.bo-user-chip small{
    display:block;
    margin-top:3px;
    font-size:11px;
    color:#64748b;
}

.bo-kpi-card{
    background:white;
    border-radius:24px;
    padding:26px;
    border:1px solid #e2e8f0;
    box-shadow:
        0 1px 2px rgba(0,0,0,.04);
}

.bo-kpi-card:hover{
    border-color:#d1d5db;
    transform:translateY(-2px);
}

.bo-kpi-card span{
    display:block;
    font-size:12px;
    font-weight:500;
    color:#64748b;
    text-transform:uppercase;
    letter-spacing:.12em;
}

.bo-kpi-card strong{
    display:block;
    margin-top:12px;
    font-size:40px;
    font-weight:600;
    color:#0f172a;
    letter-spacing:-1px;
}

.bo-kpi-card.revenue strong,
.bo-kpi-card.inventory strong{
    font-size:44px;
    font-weight:600;
}

.bo-kpi-actions{
    display:flex;
    gap:6px;
    margin-top:14px;
    flex-wrap:wrap;
}

.bo-kpi-actions button{
    height:28px;
    padding:0 12px;
    border-radius:999px;

    border:1px solid #e5e7eb;
    background:white;

    color:#64748b;
    font-size:11px;
    font-weight:700;

    cursor:pointer;
    transition:.2s;
}

.bo-kpi-actions button:hover{
    background:#111827;
    border-color:#111827;
    color:white;
}

.bo-kpi-actions{
    display:flex;
    gap:6px;
    margin-top:14px;
    flex-wrap:wrap;
}

.bo-kpi-actions button{
    height:28px;
    padding:0 12px;
    border-radius:999px;
    border:1px solid #e5e7eb;
    background:white;
    color:#64748b;
    font-size:11px;
    font-size:11px;
font-weight:500;
letter-spacing:.02em;
    transition:.2s;

}

.bo-kpi-actions button:hover{
    background:#111827;
    border-color:#111827;
    color:white;
}

@media (max-width:768px){

    .bo-kpi-grid{
        grid-template-columns:1fr;
    }

    .bo-kpi-actions{
        justify-content:flex-start;
    }

    .bo-kpi-actions button{
        height:32px;
        padding:0 14px;
        font-size:12px;
    }

}

.bo-report-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:16px;
}

.bo-report-grid button{
    background:white;
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:20px;
    min-height:115px;
    text-align:left;
    cursor:pointer;
    transition:.2s ease;
}

.bo-report-grid button:hover{
    border-color:#2563eb;
    background:#f8fafc;
    transform:translateY(-2px);
}

.bo-report-grid button strong{
    display:block;
    font-size:14px;
    font-weight:600;
    color:#111827;
    margin-bottom:8px;
}

.bo-report-grid button span{
    display:block;
    font-size:13px;
    line-height:1.4;
    color:#64748b;
}

@media (max-width:900px){

    .bo-report-grid{
        grid-template-columns:1fr;
    }

}

/* ===== USERS MODULE PROFESSIONAL UI ===== */

.bo-head-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.bo-users-summary{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:14px;
    margin-bottom:18px;
}

.bo-users-summary div{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:18px;
    padding:18px;
}

.bo-users-summary span{
    display:block;
    color:#64748b;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.bo-users-summary strong{
    display:block;
    margin-top:8px;
    font-size:28px;
    color:#0f172a;
}

.bo-user-toolbar{
    display:grid;
    grid-template-columns:1fr 180px 180px auto;
    gap:12px;
    margin-bottom:18px;
}

.bo-user-toolbar input,
.bo-user-toolbar select{
    height:44px;
    border:1px solid #d8dee9;
    border-radius:12px;
    padding:0 12px;
    background:white;
}

.bo-users-table-wrap{
    border-radius:20px;
}

.bo-users-table{
    min-width:1050px;
}

.bo-user-cell{
    display:flex;
    align-items:center;
    gap:12px;
}

.bo-user-avatar{
    width:46px;
    height:46px;
    border-radius:16px;
    display:grid;
    place-items:center;
    color:white;
    font-weight:900;
    font-size:16px;
    letter-spacing:.03em;
    background:linear-gradient(135deg,#0f172a,#2563eb);
    box-shadow:0 10px 24px rgba(37,99,235,.18);
    flex-shrink:0;
}

.bo-user-avatar.large{
    width:58px;
    height:58px;
    border-radius:20px;
    font-size:22px;
}

.bo-user-cell strong,
.bo-user-modal-head strong{
    display:block;
    color:#0f172a;
}

.bo-user-cell span,
.bo-user-modal-head span{
    display:block;
    color:#64748b;
    font-size:13px;
    margin-top:2px;
}

.bo-user-cell small,
.bo-user-modal-head small{
    display:block;
    color:#94a3b8;
    font-size:12px;
    margin-top:2px;
}

.bo-access-tags{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
}

.bo-access-tags span{
    padding:6px 9px;
    border-radius:999px;
    background:#f1f5f9;
    color:#94a3b8;
    font-size:12px;
    font-weight:900;
}

.bo-access-tags span.on{
    background:#dcfce7;
    color:#15803d;
}

.bo-chip-list{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    max-width:260px;
}

.bo-chip-list span{
    background:#eef2ff;
    color:#2563eb;
    padding:6px 9px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
}

.bo-chip-list.muted span{
    background:#f8fafc;
    color:#475569;
    border:1px solid #e2e8f0;
}

.bo-chip-list em{
    color:#94a3b8;
    font-size:13px;
}

.bo-user-modal-box{
    width:min(760px,100%);
}

.bo-modal-subtitle{
    color:#64748b;
    margin-top:4px;
}

.bo-user-modal-head{
    display:flex;
    gap:14px;
    align-items:center;
    padding:16px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:18px;
    margin:16px 0;
}

.bo-toggle-card{
    display:flex!important;
    align-items:center;
    gap:12px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:16px;
    padding:14px;
    cursor:pointer;
}

.bo-toggle-card input{
    width:18px!important;
    height:18px!important;
    margin:0!important;
    accent-color:#2563eb;
}

.bo-toggle-card strong{
    display:block;
    color:#0f172a;
}

.bo-toggle-card small{
    display:block;
    color:#64748b;
    margin-top:3px;
}

.bo-toggle-card.locked{
    cursor:default;
}

.bo-role-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    margin-top:8px;
}

.bo-role-card{
    display:flex!important;
    gap:12px;
    align-items:center;
    padding:14px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:16px;
    cursor:pointer;
    transition:.2s;
}

.bo-role-card:hover{
    border-color:#2563eb;
}

.bo-role-card.selected{
    background:#eef2ff;
    border-color:#2563eb;
}

.bo-role-card input{
    width:18px!important;
    height:18px!important;
    margin:0!important;
    accent-color:#2563eb;
}

.bo-role-card strong{
    display:block;
    color:#0f172a;
}

.bo-role-card small{
    display:block;
    color:#64748b;
    margin-top:3px;
}

.bo-checkbox-list{
    max-height:260px;
    overflow:auto;
}

.bo-checkbox-item{
    align-items:flex-start;
}

.bo-checkbox-item input{
    width:18px!important;
    height:18px!important;
    margin-top:2px!important;
    flex-shrink:0;
}

.bo-checkbox-item strong{
    display:block;
    color:#0f172a;
}

.bo-checkbox-item small{
    display:block;
    color:#64748b;
    font-size:12px;
    margin-top:2px;
}

.bo-primary-btn:disabled{
    opacity:.65;
    cursor:not-allowed;
}

@media(max-width:900px){
    .bo-users-summary{
        grid-template-columns:repeat(2, 1fr);
    }

    .bo-user-toolbar{
        grid-template-columns:1fr;
    }

    .bo-role-grid{
        grid-template-columns:1fr;
    }

    .bo-modal-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:600px){
    .bo-users-summary{
        grid-template-columns:1fr;
    }

    .bo-head-actions{
        width:100%;
    }

    .bo-head-actions button{
        width:100%;
    }
}


.bo-users-pagination-top,
.bo-users-pagination-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin:14px 0;
    color:#64748b;
    font-size:14px;
    font-weight:700;
}

.bo-page-size{
    display:flex;
    align-items:center;
    gap:8px;
}

.bo-page-size span{
    color:#64748b;
}

.bo-page-size button{
    width:34px;
    height:34px;
    border-radius:10px;
    border:1px solid #e2e8f0;
    background:white;
    font-weight:900;
    cursor:pointer;
}

.bo-page-size button.active{
    background:#2563eb;
    color:white;
    border-color:#2563eb;
}

.bo-users-pagination-bottom button:disabled{
    opacity:.45;
    cursor:not-allowed;
}

@media(max-width:700px){
    .bo-users-pagination-top,
    .bo-users-pagination-bottom{
        flex-direction:column;
        align-items:flex-start;
    }
}


/* ===== CLEAN USER EDIT MODAL ===== */

.bo-modal{
    position:fixed;
    inset:0;
    z-index:50000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(15,23,42,.62);
    backdrop-filter:blur(8px);
}

.bo-user-edit-modal{
    width:min(780px, 96vw);
    max-height:88vh;
    overflow:hidden;
    padding:0!important;
    border-radius:26px!important;
    background:#ffffff;
    box-shadow:0 30px 90px rgba(15,23,42,.34);
    border:1px solid #e2e8f0;
}

.bo-user-edit-header{
    display:flex;
    align-items:center;
    gap:16px;
    padding:26px 66px 22px 28px;
    border-bottom:1px solid #e2e8f0;
    background:linear-gradient(180deg,#ffffff,#f8fafc);
}

.bo-user-edit-header h2{
    margin:0;
    color:#0f172a;
    font-size:24px;
    line-height:1.1;
}

.bo-user-edit-header p{
    margin:6px 0 0;
    color:#64748b;
    font-size:13px;
}

.bo-user-edit-body{
    max-height:calc(88vh - 170px);
    overflow:auto;
    padding:22px 28px;
}

.bo-edit-section{
    margin-bottom:22px;
}

.bo-edit-section h3{
    margin:0 0 12px;
    color:#334155;
    font-size:13px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.bo-user-edit-modal .bo-modal-close{
    position:absolute;
    top:18px;
    right:18px;
    width:38px;
    height:38px;
    border-radius:14px;
    border:1px solid #e2e8f0;
    background:white;
    color:#0f172a;
    font-weight:900;
    cursor:pointer;
    z-index:2;
}

.bo-user-edit-modal .bo-modal-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:12px;
    margin:0;
}

.bo-user-edit-modal .bo-role-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
    margin:0;
}

.bo-user-edit-modal .bo-checkbox-list{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    max-height:230px;
    overflow:auto;
    margin:0;
    padding:12px;
    border-radius:18px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
}

.bo-user-edit-modal .bo-toggle-card,
.bo-user-edit-modal .bo-role-card,
.bo-user-edit-modal .bo-checkbox-item{
    margin:0;
    min-height:auto;
    border-radius:16px;
}

.bo-user-edit-modal .bo-toggle-card{
    min-height:76px;
}

.bo-user-edit-modal .bo-checkbox-item{
    padding:12px;
    background:white;
}

.bo-user-edit-modal .bo-modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    padding:18px 28px;
    margin:0;
    border-top:1px solid #e2e8f0;
    background:#ffffff;
}

.bo-user-edit-modal .bo-modal-actions button{
    min-width:130px;
}

.bo-toggle-card.locked{
    cursor:default;
    opacity:.85;
}

@media(max-width:780px){
    .bo-user-edit-modal{
        max-height:92vh;
    }

    .bo-user-edit-body{
        max-height:calc(92vh - 170px);
    }

    .bo-user-edit-modal .bo-modal-grid,
    .bo-user-edit-modal .bo-role-grid,
    .bo-user-edit-modal .bo-checkbox-list{
        grid-template-columns:1fr;
    }
}


/* ===== PROFESSIONAL OPERATIONS DASHBOARD ===== */

.bo-dashboard-hero{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    margin-bottom:24px;
    padding:28px;
    border-radius:26px;
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.18), transparent 34%),
        linear-gradient(135deg,#0f172a,#1e293b);
    color:white;
    box-shadow:0 18px 50px rgba(15,23,42,.22);
}

.bo-dashboard-hero span{
    display:inline-flex;
    margin-bottom:8px;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    color:#bfdbfe;
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.bo-dashboard-hero h2{
    margin:0;
    font-size:32px;
    line-height:1.05;
    letter-spacing:-.04em;
}

.bo-dashboard-hero p{
    max-width:680px;
    margin:10px 0 0;
    color:#cbd5e1;
}

.bo-sidebar-footer small,
.bo-sidebar-footer strong{
    display:block;
    overflow:hidden;
    border:1px solid #e2e8f0;
}

#boDisputeDetailModal h2{
    margin:0;
    padding:26px 70px 10px 28px;
    font-size:28px;
    font-weight:900;
    color:#0f172a;
}

#boDisputeDetailModal > .bo-modal-box > p{
    margin:0;
    padding:0 28px 20px;
    color:#64748b;
    border-bottom:1px solid #e2e8f0;
}

#boDisputeDetailModal .bo-modal-close{
    top:18px;
    right:18px;
    width:40px;
    height:40px;
    border-radius:14px;
    border:1px solid #e2e8f0;
    background:#f8fafc;
}

#boDisputeDetailModal .bo-ticket-reference{
    margin:22px 28px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:20px;
    padding:20px;
}

#boDisputeDetailModal .bo-ticket-reference strong{
    display:block;
    margin-bottom:14px;
    font-size:15px;
    color:#0f172a;
}

#boDisputeDetailModal .bo-ticket-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

#boDisputeDetailModal .bo-ticket-grid div{
    background:white;
    border:1px solid #e2e8f0;
    border-radius:14px;
    padding:12px;
}

#boDisputeDetailModal .bo-ticket-grid span{
    display:block;
    color:#94a3b8;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
}

#boDisputeDetailModal .bo-ticket-grid b{
    display:block;
    margin-top:6px;
    color:#0f172a;
    font-size:14px;
    font-weight:900;
}

#boDisputeDetailModal .bo-ticket-description{
    margin-top:14px;
    background:white;
    border:1px solid #e2e8f0;
    border-radius:14px;
    padding:14px;
    color:#475569;
}

#boDisputeDetailModal label{
    display:block;
    margin:18px 28px 6px;
    color:#475569;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
}

#boDisputeDetailModal select,
#boDisputeDetailModal textarea{
    width:calc(100% - 56px);
    margin:0 28px;
    border:1px solid #cbd5e1;
    border-radius:14px;
    background:#f8fafc;
}

#boDisputeDetailModal select:focus,
#boDisputeDetailModal textarea:focus{
    outline:none;
    border-color:#2563eb;
    background:white;
    box-shadow:0 0 0 4px rgba(37,99,235,.10);
}

#boDisputeDetailModal textarea{
    min-height:130px;
}

#boDisputeDetailModal .bo-modal-actions{
    padding:20px 28px;
    border-top:1px solid #e2e8f0;
    background:white;
}

#boDisputeDetailModal h3{
    margin:0 28px 14px;
    color:#0f172a;
}

#boDisputeDetailModal h3 + div{
    margin:0 28px 28px;
    border:1px solid #e2e8f0;
    border-radius:16px;
    overflow:hidden;
    background:#f8fafc;
}

#boDisputeDetailModal h3 + div > div{
    padding:14px 16px !important;
    border-bottom:1px solid #e2e8f0 !important;
}

#boDisputeDetailModal h3 + div > div:last-child{
    border-bottom:none !important;
}


.bo-ticket-history{
    margin-top:24px;
}

.bo-ticket-history h3{
    margin:0 0 12px;
    font-size:15px;
    font-weight:700;
}

.bo-ticket-messages{
    max-height:260px;
    overflow-y:auto;

    border:1px solid #e2e8f0;
    border-radius:18px;
    background:#f8fafc;
}

.bo-ticket-message{
    padding:14px 16px;
    border-bottom:1px solid #e2e8f0;
}

.bo-ticket-message:last-child{
    border-bottom:none;
}

.bo-ticket-message strong{
    display:block;
    margin-bottom:4px;
    color:#0f172a;
    font-size:13px;
    font-weight:700;
}

.bo-ticket-message span{
    display:block;
    color:#64748b;
    font-size:13px;
    line-height:1.5;
    word-break:break-word;
}

.bo-ticket-empty{
    padding:20px;
    text-align:center;
    color:#64748b;
}

.bo-ticket-messages::-webkit-scrollbar{
    width:8px;
}

.bo-ticket-messages::-webkit-scrollbar-thumb{
    background:#94a3b8;
    border-radius:999px;
}

/* Fraud case ticket modal */
#boFraudCaseTicketModal .bo-modal-box{
    width:min(880px, 96vw);
    padding:0;
    border-radius:24px;
    overflow:hidden;
}

#boFraudCaseTicketModal h2{
    margin:0;
    padding:26px 64px 8px 28px;
    font-size:26px;
}

#boFraudCaseTicketModal .bo-modal-subtitle{
    margin:0;
    padding:0 28px 20px;
    border-bottom:1px solid #e2e8f0;
}

#boFraudCaseTicketModal .bo-modal-close{
    top:18px;
    right:18px;
}

.bo-fraud-ticket-summary{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
    margin:22px 28px;
}

.bo-fraud-ticket-summary div{
    padding:12px;
    border:1px solid #e2e8f0;
    border-radius:14px;
    background:#f8fafc;
}

.bo-fraud-ticket-summary span{
    display:block;
    color:#64748b;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.bo-fraud-ticket-summary strong{
    display:block;
    margin-top:6px;
    color:#0f172a;
    font-size:14px;
    overflow-wrap:anywhere;
}

.bo-fraud-ticket-comments,
.bo-fraud-ticket-form{
    margin:0 28px 22px;
}

.bo-fraud-ticket-comments h3{
    margin:0 0 12px;
    font-size:16px;
}

.bo-fraud-ticket-comments article{
    padding:14px;
    border:1px solid #e2e8f0;
    border-radius:14px;
    background:#ffffff;
    margin-bottom:10px;
}

.bo-fraud-ticket-comments article > div{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
}

.bo-fraud-ticket-comments article strong{
    color:#0f172a;
}

.bo-fraud-ticket-comments article span{
    color:#64748b;
    font-size:13px;
}

.bo-fraud-ticket-comments article p{
    margin:0;
    color:#334155;
    line-height:1.5;
    white-space:pre-wrap;
}

.bo-fraud-ticket-form{
    padding:16px;
    border:1px solid #dbeafe;
    border-radius:18px;
    background:#f8fbff;
}

.bo-fraud-ticket-form label{
    margin-top:0;
}

.bo-fraud-resolution-meta{
    display:grid;
    grid-template-columns:auto 1fr auto 1fr;
    gap:8px 12px;
    margin-top:12px;
    padding:12px;
    border-radius:14px;
    background:white;
    border:1px solid #e2e8f0;
}

.bo-fraud-resolution-meta span{
    color:#64748b;
    font-weight:800;
}

#boFraudCaseTicketModal .bo-modal-actions{
    position:sticky;
    bottom:0;
    margin:0;
    padding:16px 28px;
    border-top:1px solid #e2e8f0;
    background:white;
}

.bo-fraud-cases-table td[data-label="Status"],
.bo-fraud-cases-table th:nth-child(4){
    min-width:120px;
    white-space:normal;
    overflow-wrap:anywhere;
}

.bo-fraud-cases-table .bo-row-actions{
    min-width:420px;
    gap:8px;
}

@media(max-width:780px){
    .bo-fraud-ticket-summary{
        grid-template-columns:1fr 1fr;
        margin:18px;
    }

    .bo-fraud-ticket-comments,
    .bo-fraud-ticket-form{
        margin-left:18px;
        margin-right:18px;
    }

    .bo-fraud-resolution-meta{
        grid-template-columns:1fr;
    }
}

.bo-modal-box{
    max-height:90vh;
    overflow-y:auto;
}


#boDisputeDetailModal .bo-modal-box{
    width:min(900px, 96vw);
    max-height:88vh !important;
    overflow-y:auto !important;
    padding:0;
}

#boDisputeDetailModal .bo-modal-box > h2,
#boDisputeDetailModal .bo-modal-box > p{
    padding-left:28px;
    padding-right:28px;
}

#boDisputeDetailModal .bo-modal-box > h2{
    margin-top:28px;
}

#boDisputeDetailModal .bo-modal-box > p{
    margin-bottom:20px;
}

#boDisputeDetailModal .bo-ticket-reference,
#boDisputeDetailModal label,
#boDisputeDetailModal select,
#boDisputeDetailModal textarea,
#boDisputeDetailModal .bo-ticket-history{
    margin-left:28px;
    margin-right:28px;
}

#boDisputeDetailModal .bo-modal-actions{
    position:sticky;
    bottom:0;
    background:white;
    border-top:1px solid #e2e8f0;
    padding:16px 28px;
    z-index:20;
}

#boDisputeDetailModal textarea{
    min-height:120px;
    max-height:160px;
}

#boDisputeDetailModal .bo-ticket-messages{
    max-height:180px;
    overflow-y:auto;
    margin-bottom:24px;
}


.bo-ticket-message-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:6px;
}

.bo-ticket-message-head small{
    color:#64748b;
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
}

.bo-main{
    min-height:100dvh;
    margin-left:var(--bo-sidebar-w);
    transition:margin-left .2s ease;
}

.bo-topbar{
    position:sticky;
    top:0;
    z-index:1500;
    display:flex;
    align-items:flex-start;
    gap:16px;
    padding:18px clamp(14px,2vw,24px);
}

.bo-sidebar-toggle{
    width:44px;
    height:44px;
    flex:0 0 44px;
    display:inline-grid;
    place-items:center;
    border:1px solid #dbe4f0;
    border-radius:8px;
    background:white;
    color:#0f172a;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(15,23,42,.08);
}

.bo-sidebar-toggle-lines,
.bo-sidebar-toggle-lines::before,
.bo-sidebar-toggle-lines::after{
    width:20px;
    height:2px;
    display:block;
    border-radius:999px;
    background:currentColor;
    content:"";
}

.bo-sidebar-toggle-lines{
    position:relative;
}

.bo-sidebar-toggle-lines::before,
.bo-sidebar-toggle-lines::after{
    position:absolute;
    left:0;
}

.bo-sidebar-toggle-lines::before{
    top:-6px;
}

.bo-sidebar-toggle-lines::after{
    top:6px;
}

.bo-topbar-copy{
    min-width:0;
    flex:1 1 360px;
}

.bo-top-actions{
    min-width:0;
    flex:1 1 360px;
}

.bo-sidebar-backdrop{
    position:fixed;
    inset:0;
    z-index:2500;
    display:none;
    background:rgba(15,23,42,.48);
    backdrop-filter:blur(3px);
}

.bo-sidebar-collapsed .bo-sidebar{
    width:var(--bo-sidebar-compact-w);
    padding-left:12px;
    padding-right:12px;
}

.bo-sidebar-collapsed .bo-main{
    margin-left:var(--bo-sidebar-compact-w);
}

.bo-sidebar-collapsed .bo-brand{
    justify-content:center;
    padding-left:0;
    padding-right:0;
}

.bo-sidebar-collapsed .bo-brand-icon{
    width:46px;
    height:46px;
    flex-basis:46px;
}

.bo-sidebar-collapsed .bo-brand-text,
.bo-sidebar-collapsed .bo-nav button > span:last-child,
.bo-sidebar-collapsed .bo-sidebar-footer{
    display:none;
}

.bo-sidebar-collapsed .bo-nav button{
    justify-content:center;
    padding:11px 0;
}

@media (max-height:760px) and (min-width:901px){
    .bo-sidebar{
        gap:10px;
        padding:16px 14px;
    }

    .bo-brand{
        padding:6px 4px 14px;
    }

    .bo-brand-icon{
        width:48px;
        height:48px;
        flex-basis:48px;
    }

    .bo-brand-text strong{
        font-size:20px;
    }

    .bo-brand-text span{
        margin-top:4px;
    }

    .bo-nav{
        gap:4px;
    }

    .bo-nav button{
        min-height:40px;
        padding:9px 10px;
        font-size:14px;
    }

    .bo-sidebar-footer{
        padding-top:10px;
    }
}

@media (max-width:1200px){
    :root{
        --bo-sidebar-w:248px;
    }

    .bo-nav button{
        font-size:14px;
    }

    .bo-topbar{
        flex-wrap:wrap;
    }

    .bo-top-actions{
        justify-content:flex-start;
    }
}

@media (max-width:900px){
    .bo-sidebar{
        width:min(86vw, 320px);
        max-width:320px;
        transform:translateX(-105%);
        padding:18px 16px;
    }

    .bo-sidebar-open .bo-sidebar{
        transform:translateX(0);
    }

    .bo-sidebar-open .bo-sidebar-backdrop{
        display:block;
    }

    .bo-main,
    .bo-sidebar-collapsed .bo-main{
        margin-left:0;
    }

    .bo-topbar{
        flex-direction:row;
        align-items:flex-start;
    }

    .bo-topbar-copy,
    .bo-top-actions{
        flex:1 1 100%;
    }

    .bo-nav{
        flex-direction:column;
        overflow-y:auto;
        overflow-x:hidden;
        padding-bottom:10px;
    }

    .bo-nav button{
        flex:0 0 auto;
        white-space:normal;
    }

    .bo-sidebar-footer{
        display:block;
    }
}

@media (max-width:640px){
    .bo-topbar{
        padding:12px;
        gap:10px;
    }

    .bo-sidebar-toggle{
        width:42px;
        height:42px;
        flex-basis:42px;
    }

    .bo-topbar-copy h1{
        font-size:24px;
    }

    .bo-top-actions{
        display:grid;
        grid-template-columns:1fr;
        width:100%;
    }

    .bo-lang-switch,
    .bo-user-chip,
    .bo-light-btn,
    .bo-primary-btn{
        width:100%;
    }
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
    outline:3px solid rgba(37,99,235,.42);
    outline-offset:2px;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled{
    cursor:not-allowed;
    opacity:.58;
}

.bo-fulfillment-actions{
    margin-top:18px;
    display:grid;
    gap:14px;
}

.bo-fulfillment-card{
    border:1px solid #dbe4f0;
    border-radius:16px;
    background:#f8fbff;
    padding:14px;
    display:grid;
    gap:14px;
}

.bo-fulfillment-product{
    display:grid;
    grid-template-columns:74px minmax(0, 1fr);
    gap:14px;
    align-items:center;
    padding:12px;
    border-radius:14px;
    background:#ffffff;
    border:1px solid #e5edf7;
}

.bo-fulfillment-product img{
    width:74px;
    height:74px;
    object-fit:cover;
    border-radius:12px;
    background:#eef2f7;
}

.bo-fulfillment-product span,
.bo-fulfillment-step label{
    color:#475569;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.bo-fulfillment-product strong{
    display:block;
    margin:4px 0;
    font-size:18px;
    color:#0f172a;
}

.bo-fulfillment-product small{
    display:block;
    color:#64748b;
    font-weight:700;
    overflow-wrap:anywhere;
}

.bo-fulfillment-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(220px, 1fr));
    gap:12px;
}

.bo-item-timeline{
    margin:14px 0;
    border:1px solid #dbe4f0;
    border-radius:14px;
    background:#fff;
    padding:12px;
}

.bo-item-timeline-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}

.bo-item-timeline-head strong{
    color:#0f172a;
    font-size:14px;
}

.bo-item-timeline-list{
    display:grid;
    gap:8px;
}

.bo-item-timeline-list article{
    display:grid;
    grid-template-columns:minmax(120px, .8fr) minmax(120px, .7fr) minmax(0, 1fr);
    gap:10px;
    align-items:start;
    padding:10px;
    border:1px solid #e2e8f0;
    border-radius:12px;
    background:#f8fafc;
}

.bo-item-timeline-list strong{
    color:#1d4ed8;
}

.bo-item-timeline-list span,
.bo-item-timeline-list p,
.bo-timeline-empty{
    color:#64748b;
    font-size:13px;
}

.bo-item-timeline-list p{
    margin:0;
    overflow-wrap:anywhere;
}

.bo-timeline-empty{
    padding:10px;
    border:1px dashed #cbd5e1;
    border-radius:12px;
    background:#f8fafc;
}

@media (max-width:760px){
    .bo-item-timeline-head{
        align-items:stretch;
        flex-direction:column;
    }

    .bo-item-timeline-list article{
        grid-template-columns:1fr;
    }
}

.bo-fulfillment-step{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
    padding:12px;
    border-radius:14px;
    background:#ffffff;
    border:1px solid #e5edf7;
}

.bo-fulfillment-step h4{
    margin:0 0 4px;
    color:#0f172a;
}

.bo-fulfillment-step input,
.bo-fulfillment-step select,
.bo-fulfillment-step textarea{
    width:100%;
    min-width:0;
    border:1px solid #d8dee9;
    border-radius:12px;
    padding:10px 12px;
    font:inherit;
}

.bo-fulfillment-step textarea{
    min-height:82px;
    resize:vertical;
}

.bo-fulfillment-step input[readonly]{
    background:#f3f6fa;
    color:#475569;
    cursor:default;
}

.bo-fulfillment-step button{
    margin-top:auto;
}

.bo-backend-api-list{
    display:grid;
    gap:8px;
    margin:12px 0;
}

.bo-list-summary .bo-backend-api-todo{
    flex:1 1 100%;
}

.bo-backend-api-todo{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:12px 14px;
    border:1px solid #fca5a5;
    border-radius:12px;
    background:#fef2f2;
    color:#7f1d1d;
    font-size:13px;
    line-height:1.35;
}

.bo-backend-api-todo strong{
    flex:0 0 auto;
    color:#b91c1c;
}

.bo-backend-api-todo span,
.bo-backend-api-todo small{
    color:#7f1d1d;
}

.bo-backend-api-todo small{
    display:block;
    margin-top:2px;
}

.bo-backend-api-pill{
    display:inline-flex;
    align-items:center;
    min-height:40px;
    padding:0 14px;
    border:1px solid #fca5a5;
    border-radius:12px;
    background:#fef2f2;
    color:#b91c1c;
    font-size:13px;
    font-weight:900;
}

@media(max-width:1300px){
    .bo-fulfillment-grid{
        grid-template-columns:repeat(2, minmax(220px, 1fr));
    }
}

@media(max-width:700px){
    .bo-fulfillment-grid,
    .bo-fulfillment-product{
        grid-template-columns:1fr;
    }

    .bo-fulfillment-product img{
        width:100%;
        height:auto;
        aspect-ratio:1 / 1;
    }
}

:root[data-theme="dark"] .bo-fulfillment-card{
    background:#0f172a!important;
    border-color:#263449!important;
}

:root[data-theme="dark"] .bo-fulfillment-product,
:root[data-theme="dark"] .bo-fulfillment-step{
    background:#111827!important;
    border-color:#263449!important;
}

:root[data-theme="dark"] .bo-fulfillment-product strong,
:root[data-theme="dark"] .bo-fulfillment-step h4{
    color:#f8fafc!important;
}

:root[data-theme="dark"] .bo-fulfillment-product span,
:root[data-theme="dark"] .bo-fulfillment-product small,
:root[data-theme="dark"] .bo-fulfillment-step label{
    color:#9fb0c7!important;
}

:root[data-theme="dark"] .bo-fulfillment-step input[readonly]{
    background:#1e293b!important;
    color:#cbd5e1!important;
}

:root[data-theme="dark"] .bo-item-timeline{
    background:#111827!important;
    border-color:#263449!important;
}

:root[data-theme="dark"] .bo-item-timeline-head strong{
    color:#f8fafc!important;
}

:root[data-theme="dark"] .bo-item-timeline-list article,
:root[data-theme="dark"] .bo-timeline-empty{
    background:#0f172a!important;
    border-color:#263449!important;
}

:root[data-theme="dark"] .bo-item-timeline-list span,
:root[data-theme="dark"] .bo-item-timeline-list p,
:root[data-theme="dark"] .bo-timeline-empty{
    color:#9fb0c7!important;
}

:root[data-theme="dark"] .bo-backend-api-todo,
:root[data-theme="dark"] .bo-backend-api-pill{
    background:#3f1118!important;
    border-color:#ef4444!important;
    color:#fecaca!important;
}

:root[data-theme="dark"] .bo-backend-api-todo strong,
:root[data-theme="dark"] .bo-backend-api-todo span,
:root[data-theme="dark"] .bo-backend-api-todo small{
    color:#fecaca!important;
}

/* =========================================================
   FINAL RESPONSIVE PASS: ADMIN SHELL + MODULES
   ========================================================= */

html,
body,
.backoffice-body{
    max-width:100%;
    overflow-x:hidden;
}

.bo-main,
.bo-workspace,
.bo-panel,
.bo-dashboard-card,
.bo-kpi-card,
.bo-table-wrap,
.bo-table,
.bo-modal-box,
.bo-topbar,
.bo-top-actions,
.bo-table-tools,
.bo-user-filters,
.bo-import-box{
    min-width:0;
}

.bo-topbar-copy h1,
.bo-topbar-copy p,
.bo-panel h2,
.bo-panel h3,
.bo-panel p,
.bo-table td,
.bo-empty-state,
.bo-readonly-note{
    overflow-wrap:anywhere;
}

.bo-readonly-note strong{
    color:#2563eb;
    white-space:nowrap;
}

.bo-notification-modal{
    width:min(980px, calc(100vw - 28px));
    max-height:calc(100vh - 42px);
    overflow:auto;
}

.bo-notification-detail{
    display:grid;
    gap:16px;
    margin-top:18px;
}

.bo-notification-summary{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
}

.bo-notification-summary div,
.bo-notification-contact{
    border:1px solid #e2e8f0;
    border-radius:16px;
    background:#f8fafc;
    padding:14px;
}

.bo-notification-summary span,
.bo-notification-contact span{
    display:block;
    color:#64748b;
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.bo-notification-summary strong,
.bo-notification-contact strong{
    display:block;
    margin-top:7px;
    color:#0f172a;
    font-size:18px;
}

.bo-notification-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}

.bo-notification-contact small{
    display:block;
    margin-top:4px;
    color:#64748b;
    font-weight:800;
}

.bo-notification-contact p{
    margin-top:10px;
    color:#475569;
}

.bo-notification-contact-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
}

.bo-notification-contact-actions a,
.bo-notification-contact-actions em{
    border:1px solid #dbe3f0;
    border-radius:999px;
    background:white;
    color:#2563eb;
    padding:7px 10px;
    font-size:12px;
    font-style:normal;
    font-weight:900;
    text-decoration:none;
}

.bo-notification-contact-actions em{
    color:#94a3b8;
}

@media (max-width: 820px){
    .bo-notification-summary,
    .bo-notification-grid{
        grid-template-columns:1fr;
    }

    .bo-notification-modal{
        width:calc(100vw - 18px);
        padding:20px;
    }
}

.bo-report-list{
    display:grid;
    gap:16px;
}

.bo-report-card.readonly{
    background:white;
    border:1px solid #e5e7eb;
    border-radius:22px;
    padding:18px;
    box-shadow:0 10px 28px rgba(15,23,42,.05);
}

.bo-report-card-top{
    display:flex;
    justify-content:space-between;
    gap:14px;
    margin-bottom:12px;
}

.bo-report-card-top strong{
    font-size:20px;
}

.bo-report-card-top p,
.bo-report-desc{
    color:#64748b;
}

.bo-report-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:14px 0;
}

.bo-report-meta span{
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:999px;
    padding:7px 10px;
    font-size:12px;
    font-weight:800;
    color:#475569;
}

.bo-report-message-preview{
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:14px;
    margin:14px 0;
}

.bo-mini-message{
    background:white;
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:10px;
    margin-top:8px;
}

.bo-mini-message p{
    color:#334155;
    margin-top:4px;
}

.bo-mini-message small{
    color:#64748b;
}

.bo-readonly-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
}

.bo-modal{
    padding:16px;
}

.bo-modal-box{
    width:min(720px, calc(100vw - 28px));
    max-height:calc(100dvh - 32px);
    overflow:auto;
}

.bo-row-actions{
    min-width:0!important;
    max-width:100%;
}

.bo-row-actions button{
    min-width:0;
    overflow-wrap:anywhere;
}

@media(max-width:900px){
    .bo-main{
        margin-left:0!important;
    }

    .bo-workspace{
        width:100%;
    }
}

/* =========================================================
   ADMIN DATA UX - PAGINATION, STATES, SETTINGS, IMPORT
   ========================================================= */

.bo-pagination,
.bo-list-summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}

.bo-pagination{
    padding:12px 14px;
    margin:12px 0;
    border:1px solid #e2e8f0;
    border-radius:14px;
    background:#f8fafc;
}

.bo-list-summary{
    color:#475569;
    font-size:13px;
    font-weight:800;
}

.bo-pagination-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.bo-page-mode{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:4px 9px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    background:#e0f2fe;
    color:#075985;
}

.bo-page-mode.client{
    background:#fff7ed;
    color:#9a3412;
}

.bo-subsection-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:18px 0 10px;
}

.bo-subsection-head h3{
    margin:0;
}

.bo-progress-strip{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:14px 0;
}

.bo-progress-strip span{
    display:inline-flex;
    align-items:center;
    min-height:32px;
    padding:7px 12px;
    border-radius:999px;
    background:#f1f5f9;
    color:#64748b;
    font-size:12px;
    font-weight:900;
}

.bo-progress-strip span.active{
    background:#dbeafe;
    color:#1d4ed8;
}

.bo-pagination button:disabled,
.bo-primary-btn:disabled,
.bo-light-btn:disabled{
    opacity:.45;
    cursor:not-allowed;
    transform:none;
}

.bo-loading-state{
    position:relative;
}

.bo-loading-state::before{
    content:"";
    width:28px;
    height:28px;
    display:block;
    margin:0 auto 12px;
    border-radius:50%;
    border:3px solid #dbeafe;
    border-top-color:#2563eb;
    animation:boSpin .8s linear infinite;
}

.bo-loading-state::after{
    content:"";
    display:block;
    width:min(420px, 90%);
    height:10px;
    margin:14px auto 0;
    border-radius:999px;
    background:linear-gradient(90deg,#e2e8f0,#f8fafc,#e2e8f0);
    background-size:220% 100%;
    animation:boSkeleton 1.2s ease-in-out infinite;
}

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

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

.bo-error-state{
    border-color:#fecaca;
    background:#fff7f7;
}

.bo-error-state h3{
    color:#b91c1c;
}

.bo-soft-state{
    border-color:#dbeafe;
    background:#f8fbff;
}

.bo-soft-state h3{
    color:#1d4ed8;
}

.bo-primary-btn.danger{
    background:#dc2626;
    box-shadow:0 12px 24px rgba(220,38,38,.22);
}

.bo-confirm-box p{
    color:#475569;
    line-height:1.5;
}

.bo-settings-grid{
    display:grid;
    grid-template-columns:minmax(0, .9fr) minmax(0, 1.4fr);
    gap:18px;
}

.bo-settings-grid .bo-panel:nth-child(3){
    grid-column:1 / -1;
}

.bo-settings-list{
    display:grid;
    gap:10px;
}

.bo-settings-list div,
.bo-permission-grid article{
    padding:14px;
    border:1px solid #e2e8f0;
    border-radius:14px;
    background:#f8fafc;
}

.bo-settings-list span,
.bo-settings-actions span{
    display:block;
    color:#64748b;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.bo-settings-list strong{
    display:block;
    margin-top:6px;
    color:#0f172a;
    overflow-wrap:anywhere;
}

.bo-permission-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}

.bo-permission-grid article > strong{
    display:block;
    margin-bottom:10px;
    color:#0f172a;
}

.bo-settings-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    align-items:flex-end;
}

.bo-settings-actions label{
    min-width:200px;
}

.bo-settings-actions select{
    width:100%;
    height:44px;
    margin-top:8px;
    border:1px solid #d8dee9;
    border-radius:12px;
    padding:0 12px;
    background:white;
}

.bo-import-box{
    display:grid;
    grid-template-columns:minmax(220px, 320px) minmax(0, 1fr);
    gap:18px;
}

.bo-import-drop{
    min-height:190px;
    display:grid;
    place-items:center;
    gap:8px;
    padding:22px;
    border:2px dashed #bfdbfe;
    border-radius:18px;
    background:#eff6ff;
    text-align:center;
    cursor:pointer;
}

.bo-import-drop input{
    display:none;
}

.bo-import-drop strong{
    color:#1d4ed8;
}

.bo-import-drop span{
    max-width:100%;
    color:#475569;
    overflow-wrap:anywhere;
}

.bo-import-preview .bo-table{
    min-width:520px;
}

@media(max-width:900px){
    .bo-settings-grid,
    .bo-import-box,
    .bo-permission-grid{
        grid-template-columns:1fr;
    }

    .bo-pagination,
    .bo-list-summary,
    .bo-pagination-actions,
    .bo-settings-actions{
        align-items:stretch;
        flex-direction:column;
    }

    .bo-pagination-actions button,
    .bo-settings-actions button{
        width:100%;
    }
}

@media(max-width:640px){
    .bo-workspace{
        padding:12px;
    }

    .bo-table-wrap{
        border-radius:12px;
    }

    .bo-table{
        min-width:640px;
    }

    .bo-row-actions{
        flex-wrap:wrap;
    }
}

/* =========================================================
   RESPONSIVE TABLE CARDS + CONSISTENT ADMIN SURFACE
   ========================================================= */

.bo-table td,
.bo-table th{
    overflow-wrap:break-word;
    word-break:normal;
    hyphens:none;
}

.bo-table th,
.bo-table .bo-status,
.bo-table .bo-row-actions button{
    white-space:nowrap;
    overflow-wrap:normal;
    word-break:normal;
}

.bo-table .bo-status{
    flex-shrink:0;
}

.bo-users-table{
    min-width:1120px;
}

.bo-fraud-cases-table{
    min-width:1120px;
}

.bo-logistics-table{
    min-width:1180px;
}

.bo-users-table th:nth-child(3),
.bo-users-table th:nth-child(4),
.bo-users-table th:nth-child(5),
.bo-users-table th:nth-child(6),
.bo-users-table td:nth-child(3),
.bo-users-table td:nth-child(4),
.bo-users-table td:nth-child(5),
.bo-users-table td:nth-child(6),
.bo-fraud-cases-table th:nth-child(1),
.bo-fraud-cases-table th:nth-child(2),
.bo-fraud-cases-table th:nth-child(3),
.bo-fraud-cases-table th:nth-child(4),
.bo-fraud-cases-table th:nth-child(6),
.bo-fraud-cases-table td:nth-child(1),
.bo-fraud-cases-table td:nth-child(2),
.bo-fraud-cases-table td:nth-child(3),
.bo-fraud-cases-table td:nth-child(4),
.bo-fraud-cases-table td:nth-child(6){
    white-space:nowrap;
}

.bo-users-table td:nth-child(1),
.bo-users-table td:nth-child(2){
    min-width:150px;
}

.bo-users-table td:nth-child(8){
    min-width:180px;
}

.bo-users-table .bo-actions-col,
.bo-users-table td:last-child{
    width:205px;
    min-width:205px;
}

.bo-users-table .bo-row-actions{
    gap:6px;
    flex-wrap:nowrap;
    justify-content:flex-start;
}

.bo-users-table .bo-row-actions button{
    padding-left:9px;
    padding-right:9px;
}

.bo-fraud-cases-table td:nth-child(5){
    min-width:260px;
}

.bo-table .bo-row-actions{
    min-width:max-content;
}

.bo-empty-state{
    border:1px dashed #cbd5e1;
    background:#f8fafc;
}

.bo-panel,
.bo-kpi-card,
.bo-dashboard-card,
.bo-report-card,
.bo-cs-ticket-card{
    border-radius:16px;
}

.bo-light-btn,
.bo-primary-btn,
.bo-row-actions button,
.bo-kpi-actions button{
    min-height:40px;
}

@media(max-width:760px){
    .bo-table-wrap{
        overflow:visible;
        border:0;
        background:transparent;
    }

    .bo-table{
        min-width:0!important;
        width:100%;
        display:block;
        background:transparent;
    }

    .bo-table thead{
        display:none;
    }

    .bo-table tbody{
        display:grid;
        gap:12px;
    }

    .bo-table tr{
        display:grid;
        gap:10px;
        padding:14px;
        border:1px solid #dbe4f0;
        border-radius:16px;
        background:#ffffff;
        box-shadow:0 10px 24px rgba(15,23,42,.06);
    }

    .bo-table td{
        display:grid;
        grid-template-columns:minmax(92px, 38%) minmax(0, 1fr);
        gap:10px;
        align-items:start;
        padding:0!important;
        border:0!important;
        min-width:0;
    }

    .bo-table td::before{
        content:attr(data-label);
        color:#64748b;
        font-size:11px;
        font-weight:900;
        text-transform:uppercase;
        letter-spacing:.06em;
    }

    .bo-table td:empty{
        display:none;
    }

    .bo-product-cell,
    .bo-user-cell,
    .bo-person-cell{
        min-width:0!important;
    }

    .bo-row-actions{
        width:100%;
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .bo-row-actions button{
        width:100%;
    }

    .bo-panel-head{
        gap:14px;
    }
}

.bo-density-compact .bo-panel,
.bo-density-compact .bo-kpi-card,
.bo-density-compact .bo-dashboard-card{
    padding:16px!important;
}

.bo-density-compact .bo-table th,
.bo-density-compact .bo-table td{
    padding:9px 10px!important;
}

.bo-density-compact .bo-nav button{
    min-height:40px;
    padding-top:8px;
    padding-bottom:8px;
}

.bo-related-modules{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:16px;
}

.bo-related-modules .active{
    background:#2563eb;
    color:white;
    border-color:#2563eb;
}

.bo-user-filters{
    display:grid;
    grid-template-columns:minmax(220px, 1fr) repeat(3, minmax(140px, .45fr)) minmax(90px, .25fr) auto;
}

.bo-import-box{
    grid-template-columns:minmax(220px, 280px) minmax(220px, 320px) minmax(0, 1fr);
    align-items:start;
}

.bo-import-controls,
.bo-import-actions{
    display:grid;
    gap:12px;
}

.bo-import-actions p{
    color:#64748b;
    font-weight:700;
}

@media(max-width:1100px){
    .bo-user-filters,
    .bo-import-box{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   ADMIN DARK MODE
   ========================================================= */

:root[data-theme="dark"]{
    color-scheme:dark;
    --bo-dark-bg:#0b1120;
    --bo-dark-panel:#111827;
    --bo-dark-panel-2:#0f172a;
    --bo-dark-line:#263449;
    --bo-dark-text:#e5edf8;
    --bo-dark-muted:#9fb0c7;
    --bo-dark-soft:#182235;
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] .backoffice-body{
    background:#0b1120!important;
    color:var(--bo-dark-text)!important;
}

:root[data-theme="dark"] .bo-main,
:root[data-theme="dark"] .bo-workspace{
    background:#0b1120!important;
}

:root[data-theme="dark"] .bo-topbar,
:root[data-theme="dark"] .bo-panel,
:root[data-theme="dark"] .bo-dashboard-card,
:root[data-theme="dark"] .bo-kpi-card,
:root[data-theme="dark"] .bo-modal-box,
:root[data-theme="dark"] .bo-report-card,
:root[data-theme="dark"] .bo-cs-ticket-card,
:root[data-theme="dark"] .bo-settings-list div,
:root[data-theme="dark"] .bo-permission-grid article,
:root[data-theme="dark"] .bo-pagination,
:root[data-theme="dark"] .bo-readonly-note{
    background:var(--bo-dark-panel)!important;
    border-color:var(--bo-dark-line)!important;
    color:var(--bo-dark-text)!important;
    box-shadow:0 16px 40px rgba(0,0,0,.28)!important;
}

:root[data-theme="dark"] .bo-sidebar{
    background:#070d1a!important;
    border-color:#1f2a3d!important;
}

:root[data-theme="dark"] .bo-topbar-copy h1,
:root[data-theme="dark"] .bo-panel h2,
:root[data-theme="dark"] .bo-panel h3,
:root[data-theme="dark"] .bo-dashboard-card strong,
:root[data-theme="dark"] .bo-kpi-card strong,
:root[data-theme="dark"] .bo-table td,
:root[data-theme="dark"] .bo-table strong,
:root[data-theme="dark"] .bo-user-chip strong,
:root[data-theme="dark"] .bo-settings-list strong,
:root[data-theme="dark"] .bo-permission-grid article > strong{
    color:var(--bo-dark-text)!important;
}

:root[data-theme="dark"] .bo-topbar-copy p,
:root[data-theme="dark"] .bo-panel p,
:root[data-theme="dark"] .bo-list-summary,
:root[data-theme="dark"] .bo-table-tools input,
:root[data-theme="dark"] .bo-table-tools select,
:root[data-theme="dark"] .bo-user-chip small,
:root[data-theme="dark"] .bo-empty-state p,
:root[data-theme="dark"] .bo-settings-list span{
    color:var(--bo-dark-muted)!important;
}

:root[data-theme="dark"] .bo-light-btn,
:root[data-theme="dark"] .bo-sidebar-toggle,
:root[data-theme="dark"] .bo-lang-switch,
:root[data-theme="dark"] .bo-user-chip,
:root[data-theme="dark"] .bo-row-actions button,
:root[data-theme="dark"] .bo-table-tools input,
:root[data-theme="dark"] .bo-table-tools select,
:root[data-theme="dark"] .bo-modal-box input,
:root[data-theme="dark"] .bo-modal-box textarea,
:root[data-theme="dark"] .bo-modal-box select,
:root[data-theme="dark"] .bo-settings-actions select{
    background:var(--bo-dark-soft)!important;
    border-color:var(--bo-dark-line)!important;
    color:var(--bo-dark-text)!important;
}

:root[data-theme="dark"] .bo-progress-strip span,
:root[data-theme="dark"] .bo-page-mode.client{
    background:#1e293b!important;
    color:#cbd5e1!important;
}

:root[data-theme="dark"] .bo-progress-strip span.active,
:root[data-theme="dark"] .bo-page-mode{
    background:#1d4ed8!important;
    color:#eff6ff!important;
}

:root[data-theme="dark"] .bo-table{
    background:var(--bo-dark-panel)!important;
}

:root[data-theme="dark"] .bo-table th{
    background:#182235!important;
    color:#c3d0e4!important;
    border-color:var(--bo-dark-line)!important;
}

:root[data-theme="dark"] .bo-table td{
    border-color:#202b3d!important;
}

:root[data-theme="dark"] .bo-empty-state{
    background:#101a2b!important;
    border-color:#334155!important;
}

:root[data-theme="dark"] .bo-error-state{
    background:#2a1114!important;
    border-color:#7f1d1d!important;
}

:root[data-theme="dark"] .bo-soft-state{
    background:#0f172a!important;
    border-color:#1e3a8a!important;
}

:root[data-theme="dark"] .bo-soft-state h3{
    color:#93c5fd!important;
}

@media(max-width:760px){
    :root[data-theme="dark"] .bo-table tr{
        background:var(--bo-dark-panel)!important;
        border-color:var(--bo-dark-line)!important;
    }

    :root[data-theme="dark"] .bo-table td::before{
        color:#9fb0c7!important;
    }
}

/* =========================================================
   ADMIN SHELL SIDEBAR - RESPONSIVE FINAL OVERRIDES
   ========================================================= */

:root{
    --bo-sidebar-w:280px;
    --bo-sidebar-compact-w:78px;
    --bo-shell-top:0px;
}

.backoffice-body{
    min-height:100dvh;
    background:#eef2f7;
}

.bo-layout{
    display:block;
    min-height:100dvh;
    width:100%;
}

.bo-sidebar{
    position:fixed;
    inset:0 auto 0 0;
    z-index:3000;
    width:var(--bo-sidebar-w);
    height:100dvh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:22px 18px;
    overflow:hidden;
    overflow-x:hidden;
    background:#0f172a;
    border-right:1px solid rgba(148,163,184,.18);
    box-shadow:18px 0 45px rgba(15,23,42,.16);
    transition:width .2s ease, transform .24s ease;
    scrollbar-width:thin;
    scrollbar-color:#475569 transparent;
}

.bo-sidebar::-webkit-scrollbar{
    width:8px;
}

.bo-sidebar::-webkit-scrollbar-thumb{
    background:#475569;
    border-radius:999px;
}

.bo-brand{
    flex:0 0 auto;
    gap:12px;
    margin:0;
    padding:8px 6px 18px;
    border-bottom:1px solid rgba(148,163,184,.16);
}

.bo-brand-icon{
    width:54px;
    height:54px;
    flex:0 0 54px;
    border-radius:15px;
}

.bo-brand-text{
    min-width:0;
}

.bo-brand-text strong,
.bo-brand-text span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.bo-nav{
    flex:1 1 0;
    display:flex;
    flex-direction:column;
    gap:6px;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding:2px 4px 10px 0;
    scrollbar-width:thin;
    scrollbar-color:#475569 transparent;
}

.bo-nav::-webkit-scrollbar{
    width:6px;
}

.bo-nav::-webkit-scrollbar-thumb{
    background:#475569;
    border-radius:999px;
}

.bo-nav button{
    width:100%;
    min-height:46px;
    display:flex!important;
    align-items:center;
    gap:12px;
    padding:11px 12px;
    border-radius:8px;
    color:#dbeafe;
    line-height:1.25;
    white-space:normal;
    overflow:hidden;
    flex:0 0 auto;
}

.bo-nav button > span:first-child{
    width:24px!important;
    min-width:24px!important;
    max-width:24px;
    flex:0 0 24px;
    display:inline-grid;
    place-items:center;
    font-size:0;
    line-height:1;
}

.bo-nav button > span:first-child::before{
    font-size:18px;
    line-height:1;
}

.bo-nav button[data-module="dashboard"] > span:first-child::before{content:"📊";}
.bo-nav button[data-module="customerService"] > span:first-child::before{content:"🎧";}
.bo-nav button[data-module="users"] > span:first-child::before{content:"👥";}
.bo-nav button[data-module="marketplace"] > span:first-child::before{content:"🛒";}
.bo-nav button[data-module="categories"] > span:first-child::before{content:"🏷";}
.bo-nav button[data-module="logistics"] > span:first-child::before{content:"🚚";}
.bo-nav button[data-module="warehouse"] > span:first-child::before{content:"🏢";}
.bo-nav button[data-module="inventory"] > span:first-child::before{content:"📦";}
.bo-nav button[data-module="payments"] > span:first-child::before{content:"💳";}
.bo-nav button[data-module="disputes"] > span:first-child::before{content:"⚖";}
.bo-nav button[data-module="fraud"] > span:first-child::before{content:"🛡";}
.bo-nav button[data-module="notifications"] > span:first-child::before{content:"🔔";}
.bo-nav button[data-module="reports"] > span:first-child::before{content:"📈";}
.bo-nav button[data-module="importExport"] > span:first-child::before{content:"📁";}
.bo-nav button[data-module="settings"] > span:first-child::before{content:"⚙";}

.bo-nav button > span:last-child{
    width:auto!important;
    min-width:0;
    max-width:none;
    flex:1 1 auto;
    display:block;
    white-space:normal;
    word-break:normal;
    overflow-wrap:normal;
}

.bo-nav button.active,
.bo-nav button:hover{
    background:#2563eb;
    box-shadow:0 10px 24px rgba(37,99,235,.24);
}

.bo-sidebar-footer{
    flex:0 0 auto;
    margin-top:0;
    padding:12px 6px 2px;
    border-top:1px solid rgba(148,163,184,.16);
    color:#cbd5e1;
}

.bo-sidebar-footer small,
.bo-sidebar-footer strong{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.bo-main{
    min-height:100dvh;
    margin-left:var(--bo-sidebar-w);
    transition:margin-left .2s ease;
}

.bo-topbar{
    position:sticky;
    top:0;
    z-index:1500;
    display:flex;
    align-items:flex-start;
    gap:16px;
    padding:18px clamp(14px,2vw,24px);
}

.bo-sidebar-toggle{
    width:44px;
    height:44px;
    flex:0 0 44px;
    display:inline-grid;
    place-items:center;
    border:1px solid #dbe4f0;
    border-radius:8px;
    background:white;
    color:#0f172a;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(15,23,42,.08);
}

.bo-sidebar-toggle-lines,
.bo-sidebar-toggle-lines::before,
.bo-sidebar-toggle-lines::after{
    width:20px;
    height:2px;
    display:block;
    border-radius:999px;
    background:currentColor;
    content:"";
}

.bo-sidebar-toggle-lines{
    position:relative;
}

.bo-sidebar-toggle-lines::before,
.bo-sidebar-toggle-lines::after{
    position:absolute;
    left:0;
}

.bo-sidebar-toggle-lines::before{
    top:-6px;
}

.bo-sidebar-toggle-lines::after{
    top:6px;
}

.bo-topbar-copy{
    min-width:0;
    flex:1 1 360px;
}

.bo-top-actions{
    min-width:0;
    flex:1 1 360px;
}

.bo-sidebar-backdrop{
    position:fixed;
    inset:0;
    z-index:2500;
    display:none;
    background:rgba(15,23,42,.48);
    backdrop-filter:blur(3px);
}

.bo-sidebar-collapsed .bo-sidebar{
    width:var(--bo-sidebar-compact-w);
    padding-left:12px;
    padding-right:12px;
}

.bo-sidebar-collapsed .bo-main{
    margin-left:var(--bo-sidebar-compact-w);
}

.bo-sidebar-collapsed .bo-brand{
    justify-content:center;
    padding-left:0;
    padding-right:0;
}

.bo-sidebar-collapsed .bo-brand-icon{
    width:46px;
    height:46px;
    flex-basis:46px;
}

.bo-sidebar-collapsed .bo-brand-text,
.bo-sidebar-collapsed .bo-nav button > span:last-child,
.bo-sidebar-collapsed .bo-sidebar-footer{
    display:none;
}

.bo-sidebar-collapsed .bo-nav button{
    justify-content:center;
    padding:11px 0;
}

@media (max-height:760px) and (min-width:901px){
    .bo-sidebar{
        gap:10px;
        padding:16px 14px;
    }

    .bo-brand{
        padding:6px 4px 14px;
    }

    .bo-brand-icon{
        width:48px;
        height:48px;
        flex-basis:48px;
    }

    .bo-brand-text strong{
        font-size:20px;
    }

    .bo-brand-text span{
        margin-top:4px;
    }

    .bo-nav{
        gap:4px;
    }

    .bo-nav button{
        min-height:40px;
        padding:9px 10px;
        font-size:14px;
    }

    .bo-sidebar-footer{
        padding-top:10px;
    }
}

@media (max-width:1200px){
    :root{
        --bo-sidebar-w:248px;
    }

    .bo-nav button{
        font-size:14px;
    }

    .bo-topbar{
        flex-wrap:wrap;
    }

    .bo-top-actions{
        justify-content:flex-start;
    }
}

@media (max-width:900px){
    .bo-sidebar{
        width:min(86vw, 320px);
        max-width:320px;
        transform:translateX(-105%);
        padding:18px 16px;
    }

    .bo-sidebar-open .bo-sidebar{
        transform:translateX(0);
    }

    .bo-sidebar-open .bo-sidebar-backdrop{
        display:block;
    }

    .bo-main,
    .bo-sidebar-collapsed .bo-main{
        margin-left:0;
    }

    .bo-topbar{
        flex-direction:row;
        align-items:flex-start;
    }

    .bo-topbar-copy,
    .bo-top-actions{
        flex:1 1 100%;
    }

    .bo-nav{
        flex-direction:column;
        overflow-y:auto;
        overflow-x:hidden;
        padding-bottom:10px;
    }

    .bo-nav button{
        flex:0 0 auto;
        white-space:normal;
    }

    .bo-sidebar-footer{
        display:block;
    }
}

@media (max-width:640px){
    .bo-topbar{
        padding:12px;
        gap:10px;
    }

    .bo-sidebar-toggle{
        width:42px;
        height:42px;
        flex-basis:42px;
    }

    .bo-topbar-copy h1{
        font-size:24px;
    }

    .bo-top-actions{
        display:grid;
        grid-template-columns:1fr;
        width:100%;
    }

    .bo-lang-switch,
    .bo-user-chip,
    .bo-light-btn,
    .bo-primary-btn{
        width:100%;
    }
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
    outline:3px solid rgba(37,99,235,.42);
    outline-offset:2px;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled{
    cursor:not-allowed;
    opacity:.58;
}

.bo-fulfillment-actions{
    margin-top:18px;
    display:grid;
    gap:14px;
}

.bo-fulfillment-card{
    border:1px solid #dbe4f0;
    border-radius:16px;
    background:#f8fbff;
    padding:14px;
    display:grid;
    gap:14px;
}

.bo-fulfillment-product{
    display:grid;
    grid-template-columns:74px minmax(0, 1fr);
    gap:14px;
    align-items:center;
    padding:12px;
    border-radius:14px;
    background:#ffffff;
    border:1px solid #e5edf7;
}

.bo-fulfillment-product img{
    width:74px;
    height:74px;
    object-fit:cover;
    border-radius:12px;
    background:#eef2f7;
}

.bo-fulfillment-product span,
.bo-fulfillment-step label{
    color:#475569;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.bo-fulfillment-product strong{
    display:block;
    margin:4px 0;
    font-size:18px;
    color:#0f172a;
}

.bo-fulfillment-product small{
    display:block;
    color:#64748b;
    font-weight:700;
    overflow-wrap:anywhere;
}

.bo-fulfillment-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(220px, 1fr));
    gap:12px;
}

.bo-fulfillment-step{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
    padding:12px;
    border-radius:14px;
    background:#ffffff;
    border:1px solid #e5edf7;
}

.bo-fulfillment-step h4{
    margin:0 0 4px;
    color:#0f172a;
}

.bo-fulfillment-step input,
.bo-fulfillment-step select,
.bo-fulfillment-step textarea{
    width:100%;
    min-width:0;
    border:1px solid #d8dee9;
    border-radius:12px;
    padding:10px 12px;
    font:inherit;
}

.bo-fulfillment-step textarea{
    min-height:82px;
    resize:vertical;
}

.bo-fulfillment-step input[readonly]{
    background:#f3f6fa;
    color:#475569;
    cursor:default;
}

.bo-fulfillment-step button{
    margin-top:auto;
}

.bo-backend-api-list{
    display:grid;
    gap:8px;
    margin:12px 0;
}

.bo-list-summary .bo-backend-api-todo{
    flex:1 1 100%;
}

.bo-backend-api-todo{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:12px 14px;
    border:1px solid #dbe4f0;
    border-radius:12px;
    background:#f8fafc;
    color:#475569;
    font-size:13px;
    line-height:1.35;
}

.bo-backend-api-todo strong{
    flex:0 0 auto;
    color:#2563eb;
}

.bo-backend-api-todo span,
.bo-backend-api-todo small{
    color:#475569;
}

.bo-backend-api-todo small{
    display:block;
    margin-top:2px;
}

.bo-backend-api-pill{
    display:inline-flex;
    align-items:center;
    min-height:40px;
    padding:0 14px;
    border:1px solid #dbe4f0;
    border-radius:12px;
    background:#f8fafc;
    color:#2563eb;
    font-size:13px;
    font-weight:900;
}

@media(max-width:1300px){
    .bo-fulfillment-grid{
        grid-template-columns:repeat(2, minmax(220px, 1fr));
    }
}

@media(max-width:700px){
    .bo-fulfillment-grid,
    .bo-fulfillment-product{
        grid-template-columns:1fr;
    }

    .bo-fulfillment-product img{
        width:100%;
        height:auto;
        aspect-ratio:1 / 1;
    }
}

:root[data-theme="dark"] .bo-fulfillment-card{
    background:#0f172a!important;
    border-color:#263449!important;
}

:root[data-theme="dark"] .bo-fulfillment-product,
:root[data-theme="dark"] .bo-fulfillment-step{
    background:#111827!important;
    border-color:#263449!important;
}

:root[data-theme="dark"] .bo-fulfillment-product strong,
:root[data-theme="dark"] .bo-fulfillment-step h4{
    color:#f8fafc!important;
}

:root[data-theme="dark"] .bo-fulfillment-product span,
:root[data-theme="dark"] .bo-fulfillment-product small,
:root[data-theme="dark"] .bo-fulfillment-step label{
    color:#9fb0c7!important;
}

:root[data-theme="dark"] .bo-fulfillment-step input[readonly]{
    background:#1e293b!important;
    color:#cbd5e1!important;
}

:root[data-theme="dark"] .bo-backend-api-todo,
:root[data-theme="dark"] .bo-backend-api-pill{
    background:#111827!important;
    border-color:#334155!important;
    color:#cbd5e1!important;
}

:root[data-theme="dark"] .bo-backend-api-todo strong,
:root[data-theme="dark"] .bo-backend-api-todo span,
:root[data-theme="dark"] .bo-backend-api-todo small{
    color:#cbd5e1!important;
}

:root[data-theme="dark"] .bo-backend-api-todo strong,
:root[data-theme="dark"] .bo-backend-api-pill{
    color:#93c5fd!important;
}

/* =========================================================
   FINAL RESPONSIVE PASS: ADMIN SHELL + MODULES
   ========================================================= */

html,
body,
.backoffice-body{
    max-width:100%;
    overflow-x:hidden;
}

.bo-main,
.bo-workspace,
.bo-panel,
.bo-dashboard-card,
.bo-kpi-card,
.bo-table-wrap,
.bo-table,
.bo-modal-box,
.bo-topbar,
.bo-top-actions,
.bo-table-tools,
.bo-user-filters,
.bo-import-box{
    min-width:0;
}

.bo-topbar-copy h1,
.bo-topbar-copy p,
.bo-panel h2,
.bo-panel h3,
.bo-panel p,
.bo-table td,
.bo-empty-state,
.bo-readonly-note{
    overflow-wrap:anywhere;
}

.bo-top-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
}

.bo-modal{
    padding:16px;
}

.bo-modal-box{
    width:min(720px, calc(100vw - 28px));
    max-height:calc(100dvh - 32px);
    overflow:auto;
}

.bo-row-actions{
    min-width:0!important;
    max-width:100%;
}

.bo-row-actions button{
    min-width:0;
    overflow-wrap:anywhere;
}

@media(max-width:900px){
    .bo-main{
        margin-left:0!important;
    }

    .bo-workspace{
        width:100%;
    }

    .bo-topbar{
        position:sticky;
        top:0;
        z-index:50;
    }

    .bo-top-actions,
    .bo-table-tools,
    .bo-panel-head > div:last-child{
        width:100%;
    }

    .bo-top-actions > *,
    .bo-table-tools > *,
    .bo-panel-head > div:last-child > *{
        flex:1 1 180px;
    }

    .bo-sidebar{
        box-shadow:24px 0 60px rgba(15,23,42,.28);
    }
}

@media(max-width:760px){
    .bo-workspace{
        padding:12px!important;
    }

    .bo-topbar{
        padding:12px!important;
    }

    .bo-panel,
    .bo-dashboard-card,
    .bo-kpi-card{
        padding:14px!important;
        border-radius:16px!important;
    }

    .bo-panel-head,
    .bo-table-tools,
    .bo-top-actions,
    .bo-modal-actions{
        display:flex!important;
        flex-direction:column!important;
        align-items:stretch!important;
    }

    .bo-table-tools input,
    .bo-table-tools select,
    .bo-table-tools button,
    .bo-top-actions button,
    .bo-top-actions a,
    .bo-panel-head button,
    .bo-row-actions button,
    .bo-modal-actions button{
        width:100%!important;
        min-height:44px;
    }

    .bo-table tbody,
    .bo-table tr{
        width:100%;
    }

    .bo-table td{
        grid-template-columns:minmax(82px, 34%) minmax(0, 1fr)!important;
        word-break:normal;
    }

    .bo-table td::before{
        min-width:0;
        overflow-wrap:anywhere;
    }

    .bo-row-actions{
        grid-template-columns:1fr!important;
    }

    .bo-status{
        max-width:100%;
        white-space:normal!important;
        text-align:center;
    }
}

@media(max-width:420px){
    .bo-sidebar{
        width:100vw!important;
        max-width:100vw!important;
    }

    .bo-table td{
        grid-template-columns:1fr!important;
        gap:4px!important;
    }

    .bo-table td::before{
        display:block;
    }

    .bo-modal{
        padding:8px;
    }

    .bo-modal-box{
        width:calc(100vw - 16px)!important;
        max-height:calc(100dvh - 16px)!important;
        border-radius:16px!important;
        padding:16px!important;
    }
}

/* Backoffice language control */
.bo-lang-switch{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:0 12px;
    border:1px solid #dbe7fb;
    border-radius:12px;
    background:#f8fbff;
    box-shadow:0 10px 24px rgba(15,23,42,.05);
    cursor:pointer;
}

.bo-lang-icon{
    position:relative;
    width:22px;
    height:22px;
    flex:0 0 22px;
    border:2px solid #2563eb;
    border-radius:50%;
    display:inline-block;
    cursor:pointer;
}

.bo-lang-icon::before,
.bo-lang-icon::after{
    content:"";
    position:absolute;
    inset:3px;
    border-radius:50%;
    pointer-events:none;
}

.bo-lang-icon::before{
    border-left:2px solid #2563eb;
    border-right:2px solid #2563eb;
}

.bo-lang-icon::after{
    top:8px;
    right:2px;
    bottom:auto;
    left:2px;
    height:2px;
    background:#2563eb;
    box-shadow:0 -5px 0 rgba(37,99,235,.55), 0 5px 0 rgba(37,99,235,.55);
}

.bo-lang-switch select{
    min-width:82px;
    height:34px;
    padding:0 22px 0 0;
    border:0!important;
    outline:0;
    background:transparent;
    color:#1d4ed8;
    font-size:14px;
    font-weight:900;
    cursor:pointer;
}

.bo-lang-switch:focus-within{
    border-color:#93c5fd;
    box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

:root[data-theme="dark"] .bo-lang-switch{
    background:#111827;
    border-color:#1f2a3d;
    box-shadow:none;
}

:root[data-theme="dark"] .bo-lang-icon{
    border-color:#93c5fd;
}

:root[data-theme="dark"] .bo-lang-icon::before{
    border-left-color:#93c5fd;
    border-right-color:#93c5fd;
}

:root[data-theme="dark"] .bo-lang-icon::after{
    background:#93c5fd;
    box-shadow:0 -5px 0 rgba(147,197,253,.55), 0 5px 0 rgba(147,197,253,.55);
}

:root[data-theme="dark"] .bo-lang-switch select{
    color:#bfdbfe;
}


/* Final fraud case table polish */
.bo-fraud-cases-table td[data-label="Status"],
.bo-fraud-cases-table td:nth-child(4){
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    min-width:120px;
}

.bo-fraud-cases-table .bo-row-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    min-width:360px;
}

.bo-fraud-cases-table .bo-row-actions button{
    white-space:nowrap;
}

/* Professional visual consistency */
.bo-light-btn,
.bo-primary-btn,
.bo-row-actions button,
.bo-modal-actions button{
    min-height:40px;
    padding:0 14px;
    border-radius:10px;
    font-size:14px;
    font-weight:800;
    line-height:1.2;
    letter-spacing:0;
    text-transform:none;
}

.bo-table th{
    font-size:12px;
    line-height:1.3;
    letter-spacing:.025em;
}

.bo-table td{
    padding-top:13px;
    padding-bottom:13px;
    vertical-align:middle;
}

.bo-status{
    min-height:26px;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    line-height:1.2;
    letter-spacing:0;
    text-transform:none;
}

.bo-status.active,
.bo-status.success,
.bo-status.paid,
.bo-status.delivered,
.bo-status.approved{
    color:#166534;
    background:#dcfce7;
}

.bo-status.pending,
.bo-status.warning,
.bo-status.preparing,
.bo-status.draft{
    color:#92400e;
    background:#fef3c7;
}

.bo-status.inactive,
.bo-status.failed,
.bo-status.cancelled,
.bo-status.danger,
.bo-status.rejected{
    color:#b91c1c;
    background:#fee2e2;
}

.bo-status.shipped,
.bo-status.processing,
.bo-status.office,
.bo-status.warehouse{
    color:#1d4ed8;
    background:#dbeafe;
}

.bo-modal-box{
    border-radius:18px;
}

.bo-modal-actions{
    gap:10px;
}

@media(max-width:760px){
    .bo-table tr{
        gap:0;
    }

    .bo-table td{
        padding:9px 0!important;
        border-bottom:1px solid #edf2f7!important;
        text-align:right;
    }

    .bo-table td:last-child{
        border-bottom:0!important;
    }

    .bo-table td::before{
        text-align:left;
    }

    .bo-table td > *{
        justify-self:end;
        max-width:100%;
    }

    .bo-table .bo-row-actions{
        justify-self:stretch;
    }
}

.bo-suspend-product-btn{
    color:#a83b32;
    border-color:#efc3bd;
    background:#fff8f7;
    white-space:nowrap;
}

.bo-suspend-product-btn:hover{
    color:#8f2f28;
    border-color:#e7a59c;
    background:#fff1ef;
}