/* ============================================
   GLOBAL LAYOUT
============================================ */
* {
  background: #1C1526;
  color: #b0b0b0;
}

input,
textarea {
  background: #1C1526;
}

input:focus,
textarea:focus {
  background: #1C1526;
}


/* ============================================
   ADMIN PANEL LAYOUT
============================================ */

.admin-container {
    display: flex;
    flex-direction: row;
    max-width: 1400px;
    margin: 0px auto;
    border: 1px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
    background: #1C1526;;
}

/* ============================================
   LEFT SIDE — ORDER LIST
============================================ */

.admin-left {
    width: 32%;
    max-width: 420px;
    background: #1C1526;;
    border-right: 1px solid #ddd;
    overflow-y: auto;
    padding: 0;
}

/* Order list items */
.order-item {
    padding: 15px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    transition: background 0.2s ease;
    font-size: 15px;
}

.order-item:hover {
    background: #1C1526;;
}

.order-item.active {
    background: #1C1526;;
    font-weight: bold;
}


#purchase-label-btn.loading {
    position: relative;
    opacity: 0.7;
    cursor: wait;
}

#purchase-label-btn.loading::before {
    content: "";
    position: absolute;
    left: -25px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 3px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}


#purchase-label-btn {
    margin-top: 20px;
}

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


/* ============================================
   RIGHT SIDE — ORDER DETAILS
============================================ */

.admin-right {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: #1C1526;;
}


/* ============================================
   Two-column layout inside right panel
============================================ */
.order-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 25px;
}

.order-info-left,
.order-info-right {
    background: #1C1526;;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

/* Make the header tighter */
.order-header h2 {
    margin-bottom: 10px;
}


/* ============================================
   TABLES
============================================ */

.admin-right table,
.admin-items-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.admin-right th,
.admin-right td,
.admin-items-table th,
.admin-items-table td {
    padding: 8px;
    border: 1px solid #ccc;
    font-size: 14px;
}

.admin-right th,
.admin-items-table th {
    background: #1C1526;;
    font-weight: bold;
}

/* ============================================
   STATUS BADGES
============================================ */

.status-badge {
    padding: 4px 8px;
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
}

.status-badge.paid       { background: #007bff; }
.status-badge.processing { background: #ff9800; }
.status-badge.shipped    { background: #4caf50; }
.status-badge.completed  { background: #2e7d32; }
.status-badge.cancelled  { background: #d32f2f; }

/* ============================================
   TOTAL BOX
============================================ */

.total-box {
    margin-top: 20px;
    padding: 15px;
    background: #1C1526;;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 18px;
    text-align: right;
}

/* ============================================
   STATUS DROPDOWN
============================================ */

.status-form select {
    padding: 5px 8px;
    font-size: 14px;
    margin-left: 10px;
}

.status-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px; /* spacing before "Select Shipping Rate" */
}

#status-select {
    margin-left: 10px;
}


/* ============================================
   BUTTON STYLE
============================================ */

.admin_btn {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 6px;
    background: #3a2f4f;
    color: #fff;
    border: 1px solid #6a5a87;
    cursor: pointer;
    font-size: 14px;
}

.admin_btn:hover {
    background: #4a3f63;
}

/* ============================================
   MOBILE LAYOUT — STACK LEFT & RIGHT
============================================ */
@media (max-width: 480px) {

    .admin-container {
        flex-direction: column;
    }

    .admin-left,
    .admin-right {
        width: 100%;              /* full width */
    }

    .admin-right {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;   /* prevents horizontal escape */
        box-sizing: border-box;
    }

    #order-details {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Collapse the two-column grid */
    .order-info-grid {
        grid-template-columns: 1fr;
    }

    /* Make tables fit inside the screen */
    .admin-items-table,
    .admin-items-table table {
        width: 100%;
        max-width: 100%;
        display: block;
        overflow-x: auto;     /* allows scrolling instead of overflow */
    }

    .admin-items-table th,
    .admin-items-table td {
        white-space: nowrap;  /* prevents text from stretching columns */
    }

]