:root{
    --sb-bg:#F7EEDC; --sb-card:#fff; --sb-ink:#1f2937; --sb-sub:#6b7280; --sb-line:#eee6d3;
    --sb-shadow:0 8px 24px rgba(0,0,0,.08); --sb-radius-lg:20px; --sb-radius-md:16px;
    --sb-inbox:#f59e0b; --sb-product:#7c5dfa; --sb-order:#22c55e;
    --sb-btn-text:#1f2937; --sb-btn-bd:#d6d3c8; --sb-badge:#fff7e6;
}
html,body{background:var(--sb-bg);color:var(--sb-ink);}
.sb-hero{
    background:linear-gradient(180deg,#fffaf0 0%,#fff 70%);
    border-radius:var(--sb-radius-lg); box-shadow:var(--sb-shadow); border:1px solid var(--sb-line);
}
.sb-hero .sb-chip{
    display:inline-block;font-weight:600;letter-spacing:.4px;background:var(--sb-badge);
    color:#a16207;border:1px solid #f1e3c2;padding:6px 10px;border-radius:999px;font-size:.8rem;
}
.sb-card{background:var(--sb-card);border:1px solid var(--sb-line);border-radius:var(--sb-radius-lg);box-shadow:var(--sb-shadow);}
.sb-stat-top{display:flex;align-items:center;gap:12px;}
.sb-ic{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;}
.sb-ic.inbox{background:var(--sb-inbox);} .sb-ic.product{background:var(--sb-product);} .sb-ic.order{background:var(--sb-order);}
.sb-ic.report  { background:#0ea5e9; } .sb-ic.users   { background:#007bff; }
.sb-num{font-size:2rem;font-weight:800;line-height:1;} .sb-sub{color:var(--sb-sub);}
.sb-btn{
    --bs-btn-padding-y:.35rem; --bs-btn-padding-x:.7rem; --bs-btn-border-radius:999px;
    border:1px solid var(--sb-btn-bd); color:var(--sb-btn-text); background:#fff;
}
.sb-btn:hover{background:#fafafa;border-color:#cfcab8;}
.sb-pill{
    border-radius:9999px;border:1px solid #e7e2d8;background:#fff;
    color:var(--sb-btn-text); padding:.35rem 1rem; font-weight:500; line-height:1.2; transition:all .15s ease;
}
.sb-pill:hover{background:#fafafa;border-color:#cfcab8;box-shadow:0 2px 6px rgba(0,0,0,.04);}
.sb-pill--sm{padding:.25rem .6rem;font-size:.875rem;line-height:1.1;}
.sb-pill.sb-danger{border-color:#efb5b2;color:#a11a1a;min-width:auto;}
.sb-pill.sb-danger:hover{background:#fff5f4;border-color:#e7a8a4;}
.sb-ghost{background:#fff;border-color:#e7e2d8;}
.sb-danger{color:#b42318;background:#fff6f6;border-color:#f3c9c9;}
.sb-navbar{position:sticky;top:0;z-index:1040;background:#fffdfa;border-bottom:1px solid var(--sb-line);box-shadow:0 4px 12px rgba(0,0,0,.05);}
.sb-navbar-inner{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 1rem;}
.sb-nav-title{font-weight:600;font-size:1rem;color:var(--sb-ink);display:flex;align-items:center;gap:.4rem;}
.sb-nav-actions{display:flex;gap:.6rem;}
@media (min-width:768px){.sb-nav-title{max-width:none;} .w-md-auto{width:auto!important;}}
@media (max-width:767.98px){
    .sb-navbar .sb-navbar-inner{gap:.5rem;height:auto;padding:.35rem .75rem;}
    .sb-nav-actions{padding:.5rem 0 .25rem;} .sb-nav-actions .btn{padding:.6rem .9rem!important;font-weight:600;}
    .sb-nav-title{display:block;} .navbar-collapse.collapse.show{margin-top:.25rem;}
}
.sb-card.sb-table-card{border-radius:1.4rem;}
.sb-card-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.125rem;border-bottom:1px solid var(--sb-line);}
.sb-empty{display:flex;align-items:center;gap:.75rem;padding:1.25rem 1.125rem;}
.sb-empty-ic{width:2.25rem;height:2.25rem;border-radius:.75rem;display:flex;align-items:center;justify-content:center;background:#fff7e6;}
.sb-table-card{border-radius:var(--sb-radius-lg);overflow:hidden;}
.sb-table-wrap.is-comfy{max-height:none;}
.sb-table{border-collapse:separate;border-spacing:0;width:100%;}
.sb-thead th{background:#fff7ec;color:#5b5346;font-weight:600;border-bottom:1px solid var(--sb-line)!important;}
.sb-table-comfy td,.sb-table-comfy th{padding:.9rem 1rem;border-color:var(--sb-line)!important;vertical-align:middle;}
.sb-table-comfy td:first-child,.sb-table-comfy th:first-child{padding-left:1.25rem;}
.sb-table-comfy td:last-child,.sb-table-comfy th:last-child{padding-right:1.25rem;}
.sb-table tbody tr:nth-child(odd){background:#fffefb;}
.sb-table-hover tbody tr{transition:background .12s ease;}
.sb-table-hover tbody tr:hover{background:#fffdfa;}
.sb-table td,.sb-table th{vertical-align:middle;}
.sb-link{color:#0d6efd;text-decoration:none;} .sb-link:hover{text-decoration:underline;}
.sb-badge{display:inline-block;padding:.25rem .65rem;border-radius:999px;border:1px solid var(--sb-line);font-size:.85rem;line-height:1;background:#fff;color:#6b5d3a;margin-left:.15rem;}
.sb-badge{min-width:80px;text-align:center;}
.sb-badge.is-new{background:#fff7e6;border-color:#f1e1c0;color:#7a5a20;}
.sb-badge-pending{background:#fff3cd;color:#664d03;border:1px solid #ffeeba;}
.sb-badge-cancelled{background:#f8d7da;color:#842029;border:1px solid #f5c2c7;}
.sb-summary{cursor:pointer;max-width:60ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:0;}
.sb-details .sb-summary::before{display:none;}
.sb-details[open] .sb-summary{color:#333;}
.sb-msgbox{margin-top:.6rem;padding:.75rem;max-height:14rem;overflow:auto;white-space:pre-wrap;border:1px solid var(--sb-line);border-radius:.9rem;background:#fff;}
.sb-msgbox,
.sb-card .fw-semibold,
.sb-card .sb-sub,
.sb-card .sb-badge,
.sb-card a.sb-link {
    word-wrap:break-word;
    overflow-wrap:break-word;
    word-break:normal;
    white-space:normal;
}
@media (max-width:48em){
    .sb-card-head{padding:.85rem 1rem;}
    .sb-table-comfy td,.sb-table-comfy th{padding:.75rem .8rem;}
    .sb-summary{max-width:40ch;}
}
.inline-filter{margin:10px 0 14px;padding:.6rem 1.25rem .9rem;}
.filter-row{display:flex;align-items:end;gap:.75rem;flex-wrap:wrap;}
.filter-item{min-width:220px;} .filter-item.grow{flex:1 1 360px;}
.filter-item label{display:block;font-weight:700;color:var(--sb-ink);margin:0 0 .35rem;}
.input-wrap{position:relative;display:flex;align-items:center;background:#fff;border:1px solid var(--sb-btn-bd);border-radius:999px;height:44px;padding:0 .85rem;box-shadow:0 1px 0 rgba(0,0,0,.03);}
.input-wrap i{color:#8b8b8b;margin-right:.5rem;font-size:1rem;}
.input-wrap input,.input-wrap select{border:0;outline:none;background:transparent;width:100%;height:100%;padding:.35rem 0;font-size:1rem;color:var(--sb-ink);appearance:none;}
.input-wrap:focus-within{border-color:#b9b2a0;box-shadow:0 0 0 3px rgba(185,178,160,.22);}
.filter-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto;}
.filter-actions .btn{height:44px;display:inline-flex;align-items:center;}
.sb-filter .btn{height:44px;padding:0 18px;font-size:.95rem;display:inline-flex;align-items:center;}
.sb-filter-compact{padding-top:.25rem;}
.sb-filter-grid{display:grid;grid-template-columns:1fr auto;align-items:end;gap:16px;}
.sb-filter-left{display:grid;grid-template-columns:minmax(280px,1fr) 220px;gap:16px;}
.sb-filter .input-wrap input,.sb-filter .input-wrap select{height:44px;}
@media (max-width:991.98px){.sb-filter-left{grid-template-columns:1fr;}}
@media (max-width:768px){
    .filter-actions{width:100%;margin-left:0;}
    .filter-actions .btn{flex:1 1 auto;justify-content:center;}
    .sb-filter-toggle{padding:.65rem 1rem!important;font-weight:600;background:#fff;border:1px solid var(--sb-btn-bd);border-radius:999px;box-shadow:0 1px 2px rgba(0,0,0,.05);}
    .sb-filter-toggle:focus{outline:none;box-shadow:0 0 0 3px rgba(185,178,160,.25);}
    .inline-filter{padding:.6rem .8rem .8rem;border:1px solid var(--sb-line);border-radius:12px;background:#fff;margin-bottom:1.1rem;}
}
.sb-pager-wrap{padding:10px 1.25rem 14px;}
.sb-pagination{display:flex;gap:.4rem;flex-wrap:wrap;list-style:none;padding:0;margin:0;}
.sb-pagination .page-link{
    display:inline-flex;align-items:center;justify-content:center;padding:.4rem .8rem;border-radius:999px;border:1px solid var(--sb-btn-bd);
    background:#fff;color:var(--sb-ink);text-decoration:none;min-width:34px;line-height:1.1;
}
.sb-pagination .page-link:hover{background:#fafafa;border-color:#cfcab8;}
.sb-pagination .active .page-link{background:#1f2937;color:#fff;border-color:#1f2937;}
.sb-pagination .disabled .page-link{opacity:.5;pointer-events:none;background:#fafafa;}
@media (max-width:40em){
    .sb-pager-wrap{padding:8px 1rem 12px;}
    .sb-pagination{justify-content:center;}
    .sb-pagination .page-link{min-width:42px;padding:.5rem .9rem;}
}
.sb-toasts{position:fixed;top:14px;left:0;right:0;display:flex;justify-content:center;pointer-events:none;}
.sb-toast{
    display:flex;align-items:center;gap:10px;min-width:280px;max-width:480px;padding:12px 14px;border-radius:12px;background:#fff;border-left:6px solid transparent;
    box-shadow:0 8px 30px rgba(0,0,0,.12);transform:translateY(-8px);opacity:0;animation:sb-in .25s ease forwards;font-size:15px;
}
@keyframes sb-in{to{opacity:1;transform:translateY(0)}}
.sb-toast i{font-size:1.2rem;}
.sb-toast .sb-toast-msg{line-height:1.35;}
.sb-toast .sb-toast-close{margin-left:auto;border:0;background:transparent;font-size:20px;line-height:1;cursor:pointer;opacity:.55;}
.sb-toast .sb-toast-close:hover{opacity:.9;}
.sb-toast-success{border-color:#22c55e;} .sb-toast-success i{color:#16a34a;}
.sb-toast-error{border-color:#ef4444;} .sb-toast-error i{color:#dc2626;}
.sb-toast-warning{border-color:#f59e0b;} .sb-toast-warning i{color:#d97706;}
.sb-toast-info{border-color:#3b82f6;} .sb-toast-info i{color:#2563eb;}
.sb-toast.sb-hide{opacity:0;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease;}
@media (max-width:40em){
    .sb-table-wrap{overflow:visible;} .sb-table{border:0;} .sb-thead{display:none;}
    .sb-table tbody tr{display:block;background:#fff;border:1px solid var(--sb-line);border-radius:1rem;box-shadow:var(--sb-shadow);padding:.6rem .8rem;margin:.6rem 0;}
    .sb-table tbody tr:hover{background:#fff;}
    .sb-table-comfy td{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.5rem .2rem;border:0!important;}
    .sb-table-comfy td::before{content:attr(data-label);flex:0 0 auto;font-weight:600;color:#6b5d3a;opacity:.9;max-width:46%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .sb-table-comfy td>*{max-width:54%;}
    td[data-label="Name"]{align-items:flex-start;}
    td[data-label="Image"] img{width:56px;height:56px;border-radius:14px;}
    td[data-label="Actions"]{padding-top:.6rem;}
    td[data-label="Actions"] .sb-nav-actions{display:flex;flex-wrap:wrap;gap:.5rem;}
    td[data-label="Actions"] .sb-nav-actions .btn{flex:1 1 calc(50% - .25rem);text-align:center;padding:.55rem .75rem!important;}
}
@media (max-width:768px){
    .sb-table-wrap{display:none!important;}
    .sb-thead,.sb-table,.sb-table td,.sb-table th{display:table-cell;}
    .sb-mobile-list{padding:0 1rem;}
    .sb-mcard{background:#fff;border:1px solid var(--sb-line);border-radius:16px;box-shadow:var(--sb-shadow);padding:16px 18px;}
    .sb-trunc{max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
    .sb-mhead--stack{padding-bottom:.25rem;}
    .sb-mhead--stack .sb-mtitle{display:flex;flex-direction:column;gap:.35rem;}
    .sb-mname{font-weight:700;line-height:1.25;word-break:break-word;}
    .sb-mtime{font-size:.95rem;color:#6b7078;}
    .sb-mmeta{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;}
    .sb-mthumb img,.sb-mthumb-ph{width:64px;height:64px;border-radius:12px;object-fit:cover;background:#faf7ef;color:#9a8f7a;display:flex;align-items:center;justify-content:center;}
    .sb-mtitle{min-width:0;} .sb-mprice{font-weight:700;white-space:nowrap;margin-left:.3rem;}
    .sb-mgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem .8rem;margin:.65rem 0 .6rem;}
    .sb-mgrid .k{color:#6b5d3a;font-weight:600;margin-right:.35rem;} .sb-mgrid .v{color:var(--sb-ink);}
    .sb-mgrid .full{grid-column:1 / -1;}
    .sb-mactions{display:flex;flex-direction:column;gap:.6rem;border-top:1px solid var(--sb-line);padding-top:.75rem;margin-top:.25rem;}
    .sb-mactions .btn{width:100%!important;padding:.65rem 1rem!important;font-weight:600;}
    @media (min-width:420px) and (max-width:768px){
        .sb-mactions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;}
        .sb-mactions .btn.w-100{grid-column:1 / -1;}
    }
    .sb-pager-wrap{margin-top:1.2rem!important;padding-top:.2rem;}
}
.form-label::after{content:" *";color:red;}
.sb-fields{padding-top:.5rem;border-top:1px solid #eee;margin-top:.5rem;}
.sb-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;}
.sb-label{font-weight:600;color:#6b7078;font-size:.9rem;}
.sb-value{word-break:break-word;}
.sb-msg{white-space:pre-wrap;word-break:break-word;line-height:1.5;font-size:.95rem;}
.sb-mactions .form-select{width:100%;}
.sb-table th:nth-child(5),.sb-table td:nth-child(5){width:120px;}
.sb-table td:nth-child(5) .sb-badge{display:inline-block;width:80px;text-align:center;}
.sb-table td:nth-child(8){white-space:nowrap;}
.sb-nav-actions{
    display:grid; grid-auto-flow:column; grid-template-columns:76px 92px 116px; justify-content:end; gap:.5rem;
}
.sb-nav-actions .btn{width:100%;text-align:center;white-space:nowrap;}
.sb-nav-actions--compact{
    display:grid; grid-auto-flow:column; grid-template-columns:auto auto auto; justify-content:end; gap:.5rem;
}
.sb-nav-actions--compact .sb-pill{padding:.30rem .70rem;font-size:.92rem;}
.sb-nav-actions--compact .sb-pill.sb-danger{padding:.25rem .55rem;min-width:auto;letter-spacing:.1px;}
.table .form-select-sm{min-width:9rem;}
.flash-message .flash-close{position:absolute;top:8px;right:12px;background:none;border:none;font-size:18px;line-height:1;cursor:pointer;color:inherit;}
.sticky-top{top:0;box-shadow:0 1px 0 rgba(0,0,0,.03);}
.sb-form .form-label{font-weight:600}
.sb-form .form-text{font-size:.85rem}
.sb-form .card{border-radius:16px}
.sb-form .card-header{border-top-left-radius:16px;border-top-right-radius:16px}
.sb-form .form-control,.sb-form .form-control:focus{box-shadow:none}
.sb-form .btn.btn-primary{border-radius:12px}
.sb-form .btn{border-radius:12px}


.sb-table .col-actions { width: 260px; text-align: right; white-space: nowrap; }


.sb-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    width: 100%;
}
.sb-actions .btn { margin: 0; }

 .sb-table td, .sb-table th { vertical-align: middle; }
.sb-badge { font-size: .8rem; padding: .3em .6em; border-radius: 10px; }

.sb-badge-placed { background:#fff3e0; color:#8b5e00; }
.sb-badge-paid { background:#e6f6ff; color:#0b6e99; }
.sb-badge-completed { background:#e8f6ed; color:#1b7a38; }
.sb-badge-cancelled { background:#fde8e7; color:#a12222; }
.sb-table td:nth-child(2),
.sb-table th:nth-child(2) {
    text-align: center;
}