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

.delivery-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 9px;
}

.delivery-header h2 {
    font-size: 12px;

    display: flex;

    align-items: center;

    gap: 6px;
}

.active-badge {
    background: var(--purple);

    color: white;

    border-radius: 4px;

    padding: 2px 5px;

    font-size: 6px;
}

.updated {
    font-size: 7px;

    color: #6324bd;
}


/* ==================================
   ORDERS
================================== */

.orders {
    display: flex;

    flex-direction: column;

    gap: 10px;
}

.order-card {
    background: white;

    border: 1px solid #e2e4e9;

    border-radius: 9px;

    padding: 11px 12px;

    box-shadow: 0 2px 8px rgba(0,0,0,.035);
}

.order-card.highlighted {
    border: 1.5px solid #9b54ee;

    box-shadow:
        0 3px 12px rgba(111, 35, 199, .08);
}


/* ORDER TOP */

.order-top {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 10px;
}

.customer {
    display: flex;

    align-items: center;

    gap: 5px;

    font-size: 10px;
}

.customer strong {
    color: #6820c8;
}

.customer b {
    font-weight: 700;
}

.order-info {
    display: flex;

    align-items: center;

    gap: 9px;

    color: #727987;

    font-size: 7px;
}


/* BADGES */

.badge {
    padding: 4px 7px;

    border-radius: 20px;

    font-size: 6px;

    font-weight: 600;
}

.badge.new {
    background: #f1e8ff;
    color: #6b22c7;
}

.badge.preparing {
    background: #fff1d2;
    color: #e89000;
}

.badge.delivery {
    background: #e2edff;
    color: #2571e4;
}

.badge.delivered {
    background: #dcf8ee;
    color: #0ca978;
}


/* PRODUCT */

.product {
    background: #f5f1fc;

    color: #4d2677;

    padding: 8px;

    border-radius: 5px;

    font-size: 8px;

    margin-bottom: 9px;
}


/* ADDRESS */

.address {
    display: flex;

    align-items: center;

    gap: 7px;

    color: #697180;

    font-size: 7px;

    padding-bottom: 9px;

    border-bottom: 1px solid #eceef1;
}


/* PAYMENT */

.payment {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 7px;

    padding: 6px 0;

    font-size: 7px;

    color: #4f5662;
}

.payment strong {
    font-size: 6px;

    color: #10ae7c;
}

.pending-payment {
    color: #9aa0a9 !important;
}


/* ORDER BOTTOM */

.order-bottom {
    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-top: 4px;

    font-size: 7px;

    color: #6c7280;
}

.order-bottom b {
    color: #252a35;

    font-size: 11px;
}


/* BUTTONS */

.btn {
    border: none;

    border-radius: 6px;

    padding: 6px 10px;

    font-size: 7px;

    font-weight: 600;

    cursor: pointer;

    transition: .2s;
}

.purple-btn {
    background: #6822c5;

    color: white;
}

.purple-btn:hover {
    background: #5414a8;
}

.green-btn {
    background: #12b981;

    color: white;
}

.green-btn:hover {
    background: #0d9e6f;
}

.outline-green {
    background: white;

    color: #10ae7c;

    border: 1px solid #12b981;
}

.outline-green:hover {
    background: #eafaf5;
}


/* ==================================
   RESPONSIVE
================================== */

@media (max-width: 900px) {

    .sidebar {
        width: 150px;
        min-width: 150px;
    }

    .stats {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 650px) {

    .sidebar {
        width: 65px;
        min-width: 65px;

        padding: 12px 7px;
    }

    .logo-text,
    .menu-item span:not(.icon) {
        display: none;
    }

    .menu-item {
        justify-content: center;
    }

    .main {
        padding: 14px 10px;
    }

    .header-right .date {
        display: none;
    }

    .stats {
        grid-template-columns: 1fr 1fr;
    }

    .order-top {
        align-items: flex-start;
    }

    .order-info {
        flex-direction: column;
        gap: 3px;
    }

}

/* =====================================================
   BOTÃO NOVO PEDIDO
===================================================== */

.new-order-button {
    height: 32px;

    padding: 0 13px;

    border: none;

    border-radius: 6px;

    background: #6822c5;

    color: white;

    font-family: inherit;

    font-size: 8px;

    font-weight: 700;

    cursor: pointer;

    transition: .2s;
}


.new-order-button:hover {
    background: #5414a8;

    transform: translateY(-1px);

    box-shadow:
        0 5px 15px rgba(104, 34, 197, .20);
}


/* =====================================================
   MODAL
===================================================== */

.modal-overlay {
    position: fixed;

    inset: 0;

    z-index: 1000;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background:
        rgba(27, 17, 40, .55);

    backdrop-filter: blur(3px);
}


.modal-overlay.show {
    display: flex;
}


.order-modal {
    width: 100%;
    max-width: 720px;
    max-height: 92vh;
    overflow-y: auto;
    background: white;
    border-radius: 12px;
    box-shadow:
        0 20px 70px rgba(0, 0, 0, .20);
    animation: modalOpen .2s ease;
}


@keyframes modalOpen {

    from {
        opacity: 0;
        transform: translateY(15px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}


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

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    border-bottom: 1px solid #eceef1;
}

.modal-header h2 {
    margin: 0;
    font-size: 18px;
    color: #252934;
}


.modal-header span {
    display: block;
    margin-top: 4px;
    color: #858b97;
    font-size: 10px;
}


.close-modal {
    width: 28px;

    height: 28px;

    border: none;

    border-radius: 50%;

    background: #f5f5f7;

    color: #686e79;

    font-size: 18px;

    cursor: pointer;

    line-height: 1;
}


.close-modal:hover {
    background: #ffe9f2;

    color: #ef4f91;
}


/* =====================================================
   FORM
===================================================== */

#orderForm {
    padding: 22px;
}


.form-section h3 {
    margin: 0 0 14px;
    color: #6421c5;
    font-size: 12px;
    font-weight: 700;
}


.form-section:last-of-type {
    border-bottom: none;

    margin-bottom: 0;
}


.form-section h3 {
    margin: 0 0 14px;

    color: #6421c5;

    font-size: 10px;

    font-weight: 700;
}


.form-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;
}


.form-group {
    margin-bottom: 12px;
}


.form-group:last-child {
    margin-bottom: 0;
}


.form-group label {
    display: block;
    margin-bottom: 6px;
    color: #444a57;
    font-size: 10px;
    font-weight: 600;
}


.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    border: 1px solid #dfe2e7;
    border-radius: 6px;
    outline: none;
    padding: 9px 10px;
    background: white;
    color: #282d38;
    font-family: inherit;
    font-size: 9px;
    transition: .2s;
}


.form-group input,
.form-group select {
    height: 40px;
}


.form-group textarea {
    resize: vertical;

    min-height: 75px;
}


.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: #7b32d0;

    box-shadow:
        0 0 0 3px rgba(123, 50, 208, .08);
}


.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #a2a6ae;
}


/* =====================================================
   MODAL FOOTER
===================================================== */

.modal-footer {
    display: flex;

    justify-content: flex-end;

    gap: 8px;

    padding-top: 18px;

    border-top: 1px solid #eceef1;
}


.cancel-button,
.save-order-button {
    height: 40px;
    border-radius: 6px;
    padding: 0 16px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}


.cancel-button {
    background: white;

    border: 1px solid #dfe2e7;

    color: #6e7480;
}


.cancel-button:hover {
    background: #f6f7f9;
}


.save-order-button {
    background: #6822c5;

    border: none;

    color: white;
}


.save-order-button:hover {
    background: #5414a8;
}


/* =====================================================
   PEDIDO DINÂMICO
===================================================== */

.dynamic-order {
    animation: newOrder .3s ease;
}


@keyframes newOrder {

    from {
        opacity: 0;

        transform: translateY(-10px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


.order-actions {
    display: flex;

    align-items: center;

    gap: 7px;
}


.delete-order {
    width: 25px;

    height: 25px;

    border: 1px solid #ffd4df;

    border-radius: 5px;

    background: white;

    color: #e34c70;

    cursor: pointer;

    font-size: 10px;
}


.delete-order:hover {
    background: #fff0f4;
}


/* =====================================================
   RESPONSIVO
===================================================== */

@media (max-width: 650px) {

    .new-order-button {
        font-size: 0;

        width: 32px;

        padding: 0;
    }


    .new-order-button::before {
        content: "+";

        font-size: 16px;
    }


    .form-grid {
        grid-template-columns: 1fr;
    }


    .order-modal {
        max-height: 95vh;
    }


    #orderForm {
        padding: 15px;
    }

}

/* =====================================================
   SELETOR DE STATUS
===================================================== */

.status-selector {
    position: relative;
}


.status-button {
    min-width: 85px;

    height: 22px;

    padding: 0 7px;

    border: none;

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    font-family: inherit;

    font-size: 6px;

    font-weight: 700;

    cursor: pointer;

    transition: .2s;
}


.status-button:hover {
    filter: brightness(.96);

    transform: translateY(-1px);
}


.status-button.new {
    background: #f1e8ff;

    color: #6b22c7;
}


.status-button.preparing {
    background: #fff1d2;

    color: #e89000;
}


.status-button.delivery {
    background: #e2edff;

    color: #2571e4;
}


.status-button.delivered {
    background: #dcf8ee;

    color: #0ca978;
}


.status-button.cancelled {
    background: #ffe5eb;

    color: #d9385d;
}


.status-dot-small {
    width: 5px;

    height: 5px;

    border-radius: 50%;

    background: currentColor;
}


.status-arrow {
    margin-left: 2px;

    font-size: 7px;
}



/* =====================================================
   MENU DE STATUS
===================================================== */

.status-menu {
    position: absolute;

    top: calc(100% + 5px);

    right: 0;

    z-index: 50;

    width: 155px;

    padding: 5px;

    background: white;

    border: 1px solid #e1e3e8;

    border-radius: 8px;

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

    display: none;

    animation: statusMenuOpen .15s ease;
}


.status-menu.show {
    display: block;
}


@keyframes statusMenuOpen {

    from {
        opacity: 0;

        transform: translateY(-5px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


.status-menu button {
    width: 100%;

    height: 29px;

    border: none;

    background: transparent;

    border-radius: 5px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 0 8px;

    color: #555b67;

    font-family: inherit;

    font-size: 8px;

    text-align: left;

    cursor: pointer;
}


.status-menu button:hover {
    background: #f5f3f8;

    color: #6421c5;
}


.status-menu-divider {
    height: 1px;

    margin: 4px 5px;

    background: #eceef1;
}


.status-menu-dot {
    width: 7px;

    height: 7px;

    border-radius: 50%;
}


.new-dot {
    background: #8b45d8;
}


.preparing-dot {
    background: #f2a900;
}


.delivery-dot {
    background: #327ee7;
}


.delivered-dot {
    background: #12b981;
}


.cancelled-dot {
    background: #e34c70;
}


.cancel-status-option {
    color: #d9385d !important;
}


.cancel-status-option:hover {
    background: #fff0f4 !important;
}



/* =====================================================
   PEDIDO CANCELADO
===================================================== */

.order-card.cancelled-order {
    opacity: .72;

    border-color: #f1cbd3;

    background: #fffafb;
}


.order-card.cancelled-order .product {
    background: #fff0f3;

    color: #884053;
}


.completed-label {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding: 6px 9px;

    border-radius: 6px;

    background: #e4f9f2;

    color: #0ca978;

    font-size: 7px;

    font-weight: 700;
}


.cancelled-label {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding: 6px 9px;

    border-radius: 6px;

    background: #ffe9ee;

    color: #d9385d;

    font-size: 7px;

    font-weight: 700;
}



/* =====================================================
   OBSERVAÇÃO
===================================================== */

.order-observation {
    margin-top: 7px;

    padding-top: 7px;

    border-top: 1px solid rgba(100, 33, 197, .10);

    font-size: 7px;

    color: #6e6579;
}


.order-observation strong {
    color: #6421c5;
}



/* =====================================================
   HISTÓRICO DE ALTERAÇÃO
===================================================== */

.status-history {
    margin-top: 8px;

    padding-top: 6px;

    border-top: 1px dashed #e5e7eb;

    color: #9a9faa;

    font-size: 6px;

    text-align: right;
}



/* =====================================================
   TOAST
===================================================== */

.status-toast {
    position: fixed;

    right: 20px;

    bottom: 20px;

    z-index: 2000;

    min-width: 220px;

    padding: 11px 13px;

    background: white;

    border: 1px solid #e1e3e8;

    border-left: 3px solid #12b981;

    border-radius: 8px;

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

    display: flex;

    align-items: center;

    gap: 9px;

    animation: toastIn .25s ease;
}


@keyframes toastIn {

    from {
        opacity: 0;

        transform: translateX(20px);
    }

    to {
        opacity: 1;

        transform: translateX(0);
    }

}


.status-toast.hide {
    animation: toastOut .3s ease forwards;
}


@keyframes toastOut {

    from {
        opacity: 1;

        transform: translateX(0);
    }

    to {
        opacity: 0;

        transform: translateX(20px);
    }

}


.toast-icon {
    width: 25px;

    height: 25px;

    border-radius: 50%;

    background: #e4f9f2;

    color: #12b981;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 11px;

    font-weight: 800;
}


.status-toast strong {
    display: block;

    color: #333844;

    font-size: 8px;

    margin-bottom: 2px;
}


.status-toast span {
    display: block;

    color: #858b97;

    font-size: 7px;
}