/* ===== Layout ===== */
.app-container { max-width: 28rem; margin: 0 auto; padding: 1rem 0.5rem; }
.stack-2 > * + * { margin-top: 0.5rem; }
.stack-3 > * + * { margin-top: 0.75rem; }
.stack-4 > * + * { margin-top: 1rem; }
.pt-2 { padding-top: 0.5rem; }
.mb-2 { margin-bottom: 0.5rem; }

/* ===== Cards ===== */
.card {
    background: #ffffff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
}
.dark .card { background: #111827; border-color: #1f2937; }
.card-center { text-align: center; }

.detail-card {
    background: #ffffff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    padding: 1.25rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
}
.dark .detail-card { background: #111827; border-color: #1f2937; }

/* ===== Icon circles ===== */
.icon-circle {
    width: 4rem; height: 4rem;
    border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem auto;
}
.icon-circle-blue { background: #eff6ff; color: #2563eb; }
.dark .icon-circle-blue { background: #172554; color: #60a5fa; }
.icon-circle-success { background: #ecfdf5; color: #16a34a; }
.dark .icon-circle-success { background: #052e1c; color: #4ade80; }

/* ===== Text ===== */
.card-title { font-size: 1.25rem; font-weight: 700; color: #111827; margin-bottom: 0.5rem; }
.dark .card-title { color: #ffffff; }
.card-subtitle { font-size: 0.875rem; color: #6b7280; margin-bottom: 1.5rem; }
.dark .card-subtitle { color: #9ca3af; }
.field-label { font-size: 0.75rem; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; }
.field-label-form { display: block; font-size: 0.75rem; font-weight: 700; color: #6b7280; margin-bottom: 0.25rem; }

/* ===== Empty state ===== */
.empty-state {
    background: #f9fafb;
    border-radius: 0.75rem;
    padding: 1rem;
    font-size: 0.875rem;
    color: #6b7280;
}
.dark .empty-state { background: #1f2937; color: #9ca3af; }

/* ===== Session buttons ===== */
.btn-session {
    width: 100%;
    background: #4f46e5;
    color: #ffffff;
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    display: flex; align-items: center; justify-content: space-between;
    border: none; cursor: pointer;
    transition: background 0.2s;
}
.btn-session:hover { background: #4338ca; }
.text-left { text-align: left; }
.session-date { display: block; font-size: 0.875rem; font-weight: 700; }
.session-time { display: block; font-size: 0.75rem; color: #c7d2fe; }
.session-badge { background: #6366f1; padding: 0.25rem 0.75rem; border-radius: 0.5rem; font-size: 0.75rem; }

/* ===== Full-width success button ===== */
.btn-success-full {
    width: 100%;
    background: #16a34a;
    color: #ffffff;
    font-weight: 700;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    border: none; cursor: pointer;
    transition: background 0.2s;
}
.btn-success-full:hover { background: #15803d; }

/* ===== Stop header bar ===== */
.stop-header {
    display: flex; align-items: center; justify-content: space-between;
    background: #ffffff;
    border: 1px solid #f3f4f6;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.dark .stop-header { background: #111827; border-color: #1f2937; }
.stop-number { font-size: 0.875rem; font-weight: 700; color: #4f46e5; }
.dark .stop-number { color: #818cf8; }
.stop-eta-label { font-size: 0.75rem; color: #6b7280; }
.dark .stop-eta-label { color: #9ca3af; }
.stop-eta-value { font-weight: 600; color: #1f2937; }
.dark .stop-eta-value { color: #e5e7eb; }

/* ===== Customer / phone ===== */
.customer-name { font-size: 1.125rem; font-weight: 700; color: #111827; margin-top: 0.125rem; }
.dark .customer-name { color: #ffffff; }
.phone-link {
    display: inline-flex; align-items: center;
    font-size: 0.875rem; color: #4f46e5; font-weight: 600;
    margin-top: 0.25rem; text-decoration: none;
}
.phone-link:hover { text-decoration: underline; }
.dark .phone-link { color: #818cf8; }
.icon-xs { width: 1rem; height: 1rem; margin-right: 0.25rem; }
.icon-md { width: 1.25rem; height: 1.25rem; margin-right: 0.375rem; }

/* ===== Divider ===== */
.divider { border: none; border-top: 1px solid #f3f4f6; margin: 0; }
.dark .divider { border-top-color: #1f2937; }

/* ===== Address ===== */
.address-text { font-size: 0.875rem; color: #1f2937; margin-top: 0.25rem; font-weight: 500; }
.dark .address-text { color: #e5e7eb; }

/* ===== Navigate button ===== */
.btn-navigate {
    margin-top: 0.75rem;
    width: 100%;
    background: #eff6ff;
    color: #2563eb;
    font-weight: 700;
    padding: 0.625rem 1rem;
    border-radius: 0.75rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.875rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    text-decoration: none;
    transition: background 0.15s;
}
.btn-navigate:hover { background: #dbeafe; }
.dark .btn-navigate { background: #172554; color: #60a5fa; }
.dark .btn-navigate:hover { background: #1e3a8a; }

/* ===== Order items ===== */
.item-row {
    display: flex; justify-content: space-between; align-items: center;
    background: #f9fafb;
    padding: 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}
.dark .item-row { background: rgba(31,41,55,0.5); }
.item-name { font-weight: 500; color: #111827; }
.dark .item-name { color: #ffffff; }
.item-qty-badge {
    font-size: 0.75rem; font-weight: 700;
    background: #e0e7ff; color: #4f46e5;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
}
.dark .item-qty-badge { background: #1e1b4b; color: #818cf8; }

/* ===== Notes ===== */
.notes-text { font-size: 0.875rem; color: #374151; margin-top: 0.25rem; font-style: italic; }
.dark .notes-text { color: #d1d5db; }

/* ===== Action buttons ===== */
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.btn-fail {
    background: #fef2f2; color: #dc2626;
    font-weight: 700; padding: 0.875rem 1rem;
    border-radius: 0.75rem; text-align: center; font-size: 0.875rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    border: none; cursor: pointer;
    transition: background 0.15s;
}
.btn-fail:hover { background: #fee2e2; }
.dark .btn-fail { background: #450a0a; color: #f87171; }
.dark .btn-fail:hover { background: #7f1d1d; }

.btn-deliver {
    background: #16a34a; color: #ffffff;
    font-weight: 700; padding: 0.875rem 1rem;
    border-radius: 0.75rem; text-align: center; font-size: 0.875rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    border: none; cursor: pointer;
    transition: background 0.15s;
}
.btn-deliver:hover { background: #15803d; }

/* ===== Modal ===== */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(3,7,18,0.7);
    backdrop-filter: blur(4px);
    z-index: 50;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.modal-box {
    background: #ffffff;
    border-radius: 1rem;
    max-width: 28rem; width: 100%;
    padding: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}
.dark .modal-box { background: #111827; }
.modal-title { font-size: 1.125rem; font-weight: 700; color: #111827; }
.dark .modal-title { color: #ffffff; }

.compliance-box { background: #f9fafb; padding: 1rem; border-radius: 0.75rem; }
.dark .compliance-box { background: #1f2937; }
.checkbox-label { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; }
.checkbox-input { width: 1.25rem; height: 1.25rem; border-radius: 0.25rem; border: 1px solid #d1d5db; accent-color: #4f46e5; }
.dark .checkbox-input { border-color: #374151; }
.checkbox-text { font-size: 0.875rem; font-weight: 600; color: #374151; }
.dark .checkbox-text { color: #d1d5db; }

.form-input {
    display: block; width: 100%;
    border-radius: 0.5rem;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #111827;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
}
.form-input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.2); }
.dark .form-input { border-color: #374151; background: #111827; color: #ffffff; }

.file-input {
    display: block; width: 100%;
    font-size: 0.75rem; color: #6b7280;
}
.file-input::file-selector-button {
    margin-right: 1rem; padding: 0.5rem 1rem;
    border-radius: 0.5rem; border: none;
    font-size: 0.75rem; font-weight: 600;
    background: #eef2ff; color: #4338ca;
    cursor: pointer;
}
.dark .file-input::file-selector-button { background: #1e1b4b; color: #818cf8; }
.upload-status { font-size: 0.75rem; color: #6b7280; margin-top: 0.25rem; }

.modal-actions { display: flex; gap: 0.75rem; padding-top: 0.5rem; }
.btn-cancel {
    width: 50%;
    background: #f3f4f6; color: #374151;
    font-weight: 700; padding: 0.625rem 1rem;
    border-radius: 0.75rem; font-size: 0.875rem;
    border: none; cursor: pointer;
    transition: background 0.15s;
}
.btn-cancel:hover { background: #e5e7eb; }
.dark .btn-cancel { background: #1f2937; color: #d1d5db; }
.dark .btn-cancel:hover { background: #374151; }

.btn-submit {
    width: 50%;
    background: #16a34a; color: #ffffff;
    font-weight: 700; padding: 0.625rem 1rem;
    border-radius: 0.75rem; font-size: 0.875rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    border: none; cursor: pointer;
    transition: background 0.15s;
}
.btn-submit:hover { background: #15803d; }

.btn-confirm-fail {
    width: 50%;
    background: #dc2626; color: #ffffff;
    font-weight: 700; padding: 0.625rem 1rem;
    border-radius: 0.75rem; font-size: 0.875rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    border: none; cursor: pointer;
    transition: background 0.15s;
}
.btn-confirm-fail:hover { background: #b91c1c; }

.error-text { font-size: 0.75rem; color: #ef4444; margin-top: 0.25rem; display: block; }