:root
{
    --text: #0f172a;
}
.card-panel
{
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 14px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(13,27,42,0.04);
    margin-bottom: 16px;
}



.table-scroll
{
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.table-scroll::-webkit-scrollbar
{
    width: 10px;
    height: 10px;
}

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

.table-scroll::-webkit-scrollbar-thumb
{
    background-color: #ff7a00;
    border-radius: 10px;
    border: 2px solid #f2f4f7;
    transition: background-color 0.3s ease;
}

.table-scroll::-webkit-scrollbar-thumb:hover
{
    background-color: #002b5b;
}

/* دعم Firefox */
.table-scroll
{
    scrollbar-width: thin;
    scrollbar-color: #ff7a00 #f2f4f7;
}

table.orders-table
{
    /* min-width: 900px; allow horizontal scroll on small screens */
    border-collapse: separate;
    border-spacing: 0; /* width:80%; */
    white-space: nowrap !important;
    vertical-align: middle;
}

table.orders-table thead th
{
    position: sticky;
    top: 0;
    z-index: 2; /* background:#ff7a00;       color: #fff; */
    background-color: var( --soft-bg);
    color: var(--orange);
    font-weight: 700;
    text-align: center;
    padding: 12px 10px;
    border-bottom: 2px solid rgba(13,27,42,0.06);
}

table.orders-table thead th:first-child
{
    border-top-right-radius: 8px;
}
table.orders-table thead th:last-child
{
    border-top-left-radius: 8px;
}

table.orders-table tbody td
{
    /* background:var(--card-bg); */
    padding: 12px 10px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 2px solid rgba(13,27,42,0.04);
    font-size: 14px;
    color: var(--text);
}

table.orders-table tbody tr:nth-child(even)
{
    background-color: var(--soft-bg);
}

table.orders-table tbody tr:nth-child(odd)
{
    background-color: var(--card-bg);
}




/* row hover (soft orange tint) */
table.orders-table tbody tr:hover td
{
    background: rgba(255,122,0,0.04);
    transform: translateZ(0);
}

/* status chips */
.chip
{
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
}
.chip.new
{
    background: #fff7ed;
    color: #92400e;
}
/* light orange bg */
.chip.pending
{
    background: #fff3e0;
    color: #92400e;
}
.chip.intransit
{
    background: #eff6ff;
    color: #1e3a8a;
}
.chip.delivered
{
    background: #ecfdf5;
    color: #166534;
}
.chip.canceled
{
    background: #fff1f2;
    color: #991b1b;
}

/* .bg-primary{ background:var(--navy); }
.bg-success{ background:#16a34a; }
.bg-warning{ background:#f59e0b; }
.bg-danger{ background:#ef4444; }
.bg-muted{ background:#64748b; }
.bg-secondary{ background:#475569; }
.bg-info{ background:#0284c7; }
.bg-orange{ background:var(--orange); } */

/* action icons */
/* .action-icons {
      display:flex;
      gap:10px;
      justify-content:center;
      align-items:center;
    }*/
.action-icons .icon
{
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: transform .12s ease, background-color .12s ease, color .12s ease;
    color: var(--navy);
    background: rgba(13,27,42,0.03);
        text-decoration: none;
}
.action-icons .icon.view:hover
{
    background: rgba(13,27,42,0.08);
    transform: scale(1.08);
    color: var(--orange);
}
.action-icons .icon.edit:hover
{
    background: rgba(13,27,42,0.08);
    transform: scale(1.08);
    color: #0b6bdc;
}
.action-icons .icon.trash:hover
{
    background: rgba(13,27,42,0.08);
    transform: scale(1.08);
    color: #ef4444;
}

/* Pagination style */
.pagination-wrap
{
    padding: 14px;
    display: flex;
    justify-content: center;
    background: transparent;
}
.pagination .page-link
{
    border-radius: 8px;
    border: 1px solid rgba(13,27,42,0.06);
    color: var(--navy);
    font-weight: 600;
    padding: 6px 12px;
}
.pagination .page-item.active .page-link
{
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}
.pagination .page-link:hover
{
    background: var(--orange);
    color: #fff;
    border-color: var(--orange);
}