/* --- WebApp Booking v2.3 Stylesheet --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
:root {
    --bg-main: #F8F9FA; --bg-card: #FFFFFF; --text-primary: #212529; --text-secondary: #495057;
    --border-color: #DEE2E6; --primary-500: #4C6EF5; --primary-600: #4263EB;
    --success-100: #D1FAE5; --success-700: #047857; --error-100: #FEE2E2; --error-700: #B91C1C;
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --font-family: 'Inter', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-family); background-color: var(--bg-main); color: var(--text-primary); line-height: 1.6; }
.container { max-width: 900px; margin: 2rem auto; padding: 0 1rem; }
.card { background-color: var(--bg-card); border-radius: 0.75rem; padding: 2rem; box-shadow: var(--shadow); border: 1px solid var(--border-color); }
.header { text-align: center; margin-bottom: 2.5rem; }
.header h1 { font-size: 1.5rem; line-height: 1.4; font-weight: 700; margin-bottom: 0.5rem; }
.header p { color: var(--text-secondary); font-size: 1rem; }
.nav-button { display: inline-block; background-color: var(--primary-500); color: white; padding: 0.6rem 1.2rem; border-radius: 0.5rem; text-decoration: none; transition: background-color 0.2s; font-weight: 500; }
.nav-button:hover { background-color: var(--primary-600); }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .form-grid { grid-template-columns: 1fr 1fr; } .grid-col-span-2 { grid-column: span 2; } }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--text-secondary); }
.form-group input, .form-group select, .form-group textarea { width: 100%; background-color: #fff; color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 0.5rem; padding: 0.75rem; font-size: 1rem; transition: all 0.2s; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(76, 110, 245, 0.2); }
textarea { resize: vertical; min-height: 120px; }
.form-actions { display: flex; gap: 1rem; margin-top: 1.5rem; grid-column: 1 / -1; }
.button { padding: 0.75rem 1.5rem; border-radius: 0.5rem; border: none; font-weight: 700; cursor: pointer; transition: all 0.2s; font-size: 1rem; }
.button-primary { background-color: var(--primary-500); color: white; }
.button-primary:hover:not(:disabled) { background-color: var(--primary-600); }
.button-primary:disabled { background-color: #A5B4FC; cursor: not-allowed; }
.button-secondary { background-color: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border-color); }
.button-secondary:hover { background-color: var(--bg-main); }
.status-message { margin-top: 1.5rem; padding: 1rem; border-radius: 0.5rem; text-align: center; font-weight: 500; display:none;}
.status-message.success { background-color: var(--success-100); color: var(--success-700); }
.status-message.error { background-color: var(--error-100); color: var(--error-700); }
#map { height: 300px; width: 100%; border-radius: 0.5rem; border: 1px solid var(--border-color); margin-top: 0.5rem; z-index: 0;}
/* Schedule Page Specific */
.filters { display: flex; gap: 1rem; margin-bottom: 1.5rem; align-items: center; flex-wrap: wrap; padding: 1rem; background-color: var(--bg-main); border-radius: 0.5rem;}
.filters label { font-weight: 500; }
.filters input { background-color: #fff; color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 0.5rem; padding: 0.5rem; }
.table-container { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--border-color); text-align: left; font-size: 0.9rem; vertical-align: top; }
th { color: var(--text-secondary); font-weight: 700; white-space: nowrap;}
.status-chip { padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;}
.status-Pending { background-color: #FEF3C7; color: #92400E; }
.status-Ditugaskan { background-color: #DBEAFE; color: #1E40AF; }
.status-Selesai { background-color: #D1FAE5; color: #065F46; }
.status-Dibatalkan { background-color: #FEE2E2; color: #991B1B; }
.status-Dalam-Perjalanan { background-color: #E0E7FF; color: #3730A3; }
.status-Belum-Bisa-Diakomodir { background-color: #F3F4F6; color: #4B5563; }
.actions select, .actions button { display: block; width: 100%; max-width: 150px; background-color: #fff; color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: 0.375rem; padding: 0.3rem 0.6rem; margin-bottom: 0.3rem; font-size: 0.8rem;}
.actions button { background-color: var(--text-secondary); color: white; cursor: pointer; }
.no-data, .loader { text-align: center; padding: 2rem; color: var(--text-secondary); }
#auth-container { margin-top: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.notes-cell { font-style: italic; color: var(--text-secondary); font-size: 0.85rem; max-width: 250px; }
.notes-cell button { margin-left: 8px; padding: 2px 6px; font-size: 0.7rem; }

/* === REMINDER STYLES (BARU) === */
.reminder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.reminder-card {
    background: #fff;
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border-left: 4px solid #ccc;
    animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* Priority Colors */
.reminder-high { border-left-color: #EF4444; background-color: #FEF2F2; } /* Merah */
.reminder-medium { border-left-color: #F59E0B; background-color: #FFFBEB; } /* Kuning */

.reminder-icon {
    background-color: rgba(255,255,255,0.7);
    padding: 0.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.reminder-high .reminder-icon { color: #DC2626; }
.reminder-medium .reminder-icon { color: #D97706; }

.reminder-content { flex: 1; }
.reminder-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.25rem; color: var(--text-primary); }
.reminder-msg { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.4; }

/* === Action Links (WA & Maps) === */
.action-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

/* Link Google Maps */
.map-link {
    color: var(--primary-600);
    font-weight: 500;
    border-bottom: 1px dotted var(--primary-600);
}
.map-link:hover {
    color: var(--primary-500);
    border-bottom: 1px solid var(--primary-500);
}

/* Link WhatsApp (Tombol Kecil) */
.wa-link {
    background-color: #25D366;
    color: white;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    font-weight: 600;
}
.wa-link:hover {
    background-color: #128C7E;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.wa-link svg {
    width: 12px;
    height: 12px;
}