/* DLP Tracker — App Styles */

/* Alpine.js: hide elements until component initializes */
[x-cloak] { display: none !important; }

/* Truncate multi-line text (mobile cards) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ─── Loading Spinner ─── */
.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e5e7eb;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
.spinner-sm {
    width: 18px;
    height: 18px;
    border-width: 2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    padding: 48px 20px;
}

/* ─── Toast Notifications ─── */
.toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    font-size: 13px;
    max-width: 380px;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: toastIn 0.3s ease-out;
}
.toast-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.toast-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.toast-warning { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.toast-info    { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }

@keyframes toastIn {
    from { opacity: 0; transform: translateX(100%); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ─── Confirmation Modal ─── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}
.modal-panel {
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    max-width: 440px;
    width: 100%;
    animation: modalUp 0.2s ease-out;
}
.modal-panel-header {
    padding: 18px 20px;
    border-bottom: 1px solid #e5e7eb;
}
.modal-panel-body {
    padding: 20px;
}
.modal-panel-footer {
    padding: 14px 20px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@keyframes modalUp {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── Print ─── */
@media print {
    nav, button, .no-print, .toast-container { display: none !important; }
    .bg-white, [class*="bg-white"] { box-shadow: none !important; border: 1px solid #e5e7eb !important; }
}