/* Custom styles for Fibre Installation Notes V2 */
body {
    font-family: 'Inter', sans-serif;
}

/* Status message styles */
.status-success {
    @apply bg-green-100 border border-green-400 text-green-700;
}

.status-error {
    @apply bg-red-100 border border-red-400 text-red-700;
}

.status-info {
    @apply bg-blue-100 border border-blue-400 text-blue-700;
}

/* Form input animations */
.form-input {
    transition: all 0.2s ease-in-out;
}

.form-input:focus {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Modal animations */
.modal-enter {
    animation: modalEnter 0.3s ease-out;
}

.modal-exit {
    animation: modalExit 0.3s ease-in;
}

@keyframes modalEnter {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes modalExit {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* Button hover effects */
.btn-hover {
    transition: all 0.2s ease-in-out;
}

.btn-hover:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Loading spinner */
.spinner {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Auto-save indicator */
.auto-save-indicator {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease-in-out;
    opacity: 0;
    transform: translateY(-10px);
}

.auto-save-indicator.show {
    opacity: 1;
    transform: translateY(0);
}

.auto-save-indicator.saving {
    @apply bg-yellow-100 border border-yellow-400 text-yellow-700;
}

.auto-save-indicator.saved {
    @apply bg-green-100 border border-green-400 text-green-700;
}

.auto-save-indicator.error {
    @apply bg-red-100 border border-red-400 text-red-700;
}

/* Material usage chart styles */
.usage-chart {
    height: 200px;
    margin: 20px 0;
}

.usage-bar {
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.usage-bar:hover {
    opacity: 0.8;
}

/* Table styles for inventory */
.inventory-table {
    @apply w-full border-collapse border border-gray-300;
}

.inventory-table th,
.inventory-table td {
    @apply border border-gray-300 px-4 py-2 text-left;
}

.inventory-table th {
    @apply bg-gray-50 font-semibold;
}

.inventory-table tr:nth-child(even) {
    @apply bg-gray-50;
}

.inventory-table tr:hover {
    @apply bg-blue-50;
}

/* Card styles */
.material-card {
    @apply bg-white rounded-lg shadow-md p-4 mb-4 border-l-4 border-blue-500;
    transition: all 0.2s ease-in-out;
}

.material-card:hover {
    @apply shadow-lg;
    transform: translateY(-2px);
}

.material-card.low-stock {
    @apply border-red-500 bg-red-50;
}

.material-card.medium-stock {
    @apply border-yellow-500 bg-yellow-50;
}

.material-card.high-stock {
    @apply border-green-500 bg-green-50;
}

/* Progress bars */
.progress-bar {
    @apply w-full bg-gray-200 rounded-full h-2;
}

.progress-fill {
    @apply h-2 rounded-full transition-all duration-300 ease-in-out;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .auto-save-indicator {
        top: 10px;
        right: 10px;
        font-size: 12px;
        padding: 6px 12px;
    }
    
    .material-card {
        @apply p-3 mb-3;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-only {
        display: block !important;
    }
}

/* ------------------------------------------------------------------ *
 * Mobile / installed-PWA safety net.
 *
 * Every user of this app is on a phone in the field, so these are not
 * cosmetic. Added 2026-08-04 after measuring the live layout at 375px.
 * ------------------------------------------------------------------ */

/* Nothing may ever scroll the page sideways. At 375px the header button row
 * was 745px wide, so the whole document scrolled horizontally and four
 * buttons - including the only route to the Job Planner - sat off-screen.
 * The markup fix is the real one; this is the guard that stops any future
 * wide element (a long ONT serial, a table) reintroducing it silently. */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Long unbroken strings - ONT serials, postcodes, addresses pasted from a
 * work order - must wrap rather than force the layout wide. */
input, textarea, select, p, h1, h2, h3, li, td {
    overflow-wrap: break-word;
}

/* Keep content clear of the notch and the home indicator once the app is
 * launched from the home screen. Requires viewport-fit=cover in the
 * viewport meta, which index.html now sets. Applied only in standalone mode
 * so the in-browser layout is unchanged. */
@media (display-mode: standalone) {
    body {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
        padding-top: max(1rem, env(safe-area-inset-top));
    }
}

/* Toasts are position:fixed and were anchored hard to the viewport edge, so
 * on a notched phone they can sit under the rounded corner. */
@media (display-mode: standalone) {
    .notification, .toast, #saveIndicator {
        top: max(1rem, env(safe-area-inset-top)) !important;
        right: max(1rem, env(safe-area-inset-right)) !important;
    }
}