/* Deviled Egg Co. CRM - Custom Styles */

/* Status badge colors */
.badge-processing { background-color: #206bc4; color: #fff; }
.badge-on-hold { background-color: #f59f00; color: #fff; }
.badge-completed { background-color: #2fb344; color: #fff; }
.badge-cancelled { background-color: #d63939; color: #fff; }
.badge-refunded { background-color: #ae3ec9; color: #fff; }
.badge-failed { background-color: #d63939; color: #fff; }
.badge-preparing { background-color: #f76707; color: #fff; }
.badge-ready-for-pickup { background-color: #0ca678; color: #fff; }
.badge-label-printed { background-color: #0ca678; color: #fff; }
.badge-shipped-in-transit { background-color: #4263eb; color: #fff; }

.navbar-vertical .nav-item.active > .nav-link { font-weight: 600; }

.widget-card { transition: transform 0.2s ease; }
.widget-card:hover { transform: translateY(-2px); }

/* =========================================================================
   Full Control Table
   ========================================================================= */

.table-full-control { font-size: 0.8125rem; }
.table-full-control thead th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    border-bottom: 2px solid #e6e7e9;
}
.table-full-control .order-row { transition: background-color 0.15s ease; }
.table-full-control .order-row:hover { background-color: rgba(32, 107, 196, 0.03); }
.table-full-control td { vertical-align: top; padding: 0.5rem 0.4rem; }

/* Items list */
.items-list .item-line { line-height: 1.4; margin-bottom: 2px; }
.item-qty { display: inline-block; font-weight: 700; color: #206bc4; min-width: 24px; }
.item-name { font-size: 0.8125rem; }
.item-sku { font-size: 0.6875rem; color: #6c757d; margin-left: 4px; }

/* Item attributes (flavors, toppings, variations) */
.item-attributes { padding-left: 28px; margin-top: 1px; margin-bottom: 4px; }
.item-attr { font-size: 0.75rem; line-height: 1.4; color: #666; }
.item-attr-label { font-weight: 600; color: #555; }
.item-attr-value { color: #888; }

/* Item with labels (shipping) */
.item-with-labels {
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px dashed #e6e7e9;
}
.item-with-labels:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

/* Label buttons */
.label-buttons { display: flex; flex-wrap: wrap; gap: 4px; }
.label-buttons .btn { font-size: 0.6875rem; padding: 0.15rem 0.5rem; line-height: 1.4; }
.label-done-btn { font-size: 0.6875rem !important; padding: 0.15rem 0.5rem !important; }

/* Customer note */
.customer-note {
    background: #fff8e1;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 0.75rem;
}

/* Items & Labels cell */
.items-labels-cell { min-width: 220px; max-width: 320px; }

/* Status select in table */
.status-select { min-width: 140px; font-size: 0.8125rem; padding: 0.2rem 0.5rem; }

/* =========================================================================
   Notes Modal
   ========================================================================= */

#notesModalBody {
    max-height: 400px;
    overflow-y: auto;
}

.note-modal-entry {
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.875rem;
}
.note-modal-entry:last-child { border-bottom: none; }
.note-modal-entry:hover { background-color: #f8f9fb; }
.note-modal-text {
    color: #333;
    line-height: 1.4;
    word-break: break-word;
}

/* =========================================================================
   Label Modal & Rate Quotes
   ========================================================================= */

#labelModal .modal-body { font-size: 0.875rem; }

/* Rate option list */
.rate-option { transition: background-color 0.15s ease, border-color 0.15s ease; padding: 0.75rem 1rem !important; }
.rate-option:hover { background-color: rgba(32, 107, 196, 0.04); }
.rate-option.active { background-color: rgba(32, 107, 196, 0.08) !important; border-color: #206bc4 !important; }
.rate-radio { cursor: pointer; }
#ratesListGroup { border-radius: 8px; overflow: hidden; }

/* Purple button (for refund) */
.btn-outline-purple {
    color: #ae3ec9;
    border-color: #ae3ec9;
}
.btn-outline-purple:hover {
    color: #fff;
    background-color: #ae3ec9;
    border-color: #ae3ec9;
}
.btn-purple {
    color: #fff;
    background-color: #ae3ec9;
    border-color: #ae3ec9;
}
.btn-purple:hover {
    color: #fff;
    background-color: #9a35b0;
    border-color: #9a35b0;
}
.bg-purple { background-color: #ae3ec9 !important; }

/* =========================================================================
   Shared / Legacy
   ========================================================================= */

.table-orders tbody tr { cursor: pointer; transition: background-color 0.15s ease; }
.table-orders tbody tr:hover { background-color: rgba(32, 107, 196, 0.04); }

.badge-blink { animation: blink 1s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.notification-item { border-left: 3px solid transparent; transition: background-color 0.15s ease; }
.notification-item.unread { border-left-color: #206bc4; background-color: rgba(32, 107, 196, 0.04); }

.timeline-item { position: relative; padding-left: 2rem; padding-bottom: 1rem; border-left: 2px solid #e6e7e9; margin-left: 0.5rem; }
.timeline-item:last-child { border-left: 2px solid transparent; }
.timeline-item::before { content: ''; position: absolute; left: -5px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: #206bc4; }

.filter-bar { background: #fff; border: 1px solid rgba(98, 105, 118, 0.16); border-radius: 4px; padding: 1rem; margin-bottom: 1rem; }

/* Spinner */
.ti-spin { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@media (max-width: 768px) {
    .filter-bar { flex-direction: column; }
    .filter-bar .form-group { margin-bottom: 0.5rem; }
    .status-select { min-width: 120px; }
    .items-labels-cell { min-width: 180px; max-width: 240px; }
    #aiChatDrawer { width: 100vw !important; right: -24px !important; bottom: 60px !important; max-height: 70vh !important; border-radius: 12px 12px 0 0 !important; }
}

/* =========================================================================
   AI Assistant Chat Widget
   ========================================================================= */

.ai-response-content table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 0.8rem; }
.ai-response-content table th,
.ai-response-content table td { border: 1px solid #d1d5db; padding: 4px 8px; text-align: left; }
.ai-response-content table th { background: #f3f4f6; font-weight: 600; }
.ai-response-content ul,
.ai-response-content ol { padding-left: 1.2em; margin: 4px 0; }
.ai-response-content p { margin: 4px 0; }
.ai-response-content code { background: #e5e7eb; padding: 1px 4px; border-radius: 3px; font-size: 0.8em; }
.ai-response-content pre { background: #1f2937; color: #e5e7eb; padding: 10px; border-radius: 6px; overflow-x: auto; font-size: 0.8em; }
.ai-response-content strong { color: #6c5ce7; }

.border-purple { border-color: #ae3ec9 !important; }
.text-purple { color: #ae3ec9 !important; }
.border-warning { border-color: #f59e0b !important; }
.text-warning { color: #f59e0b !important; }