@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Jelle', Arial, Helvetica, sans-serif; background-color: #f4f4f4; color: #333; }

.hero-section { background-color: #ffffff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; border-bottom: 3px solid #E21836; box-shadow: 0 4px 6px rgba(0,0,0,0.1); text-align: center; }
.jb-logo-large { height: 90px; width: auto; margin-bottom: 15px; }
.hero-title { font-size: 22px; font-weight: bold; color: #000; margin-bottom: 5px; }
.hero-date { font-size: 14px; color: #888; margin-bottom: 20px; font-weight: bold; }

.search-container { width: 100%; max-width: 400px; margin-bottom: 15px; }
.search-input { width: 100%; padding: 12px 20px; border: 2px solid #ccc; border-radius: 25px; font-size: 16px; outline: none; transition: all 0.3s; text-align: center; font-family: inherit; }
.search-input:focus { border-color: #E21836; box-shadow: 0 0 8px rgba(226,24,54,0.2); }

.btn-toggle { background-color: #E21836; color: white; border: none; padding: 12px 25px; font-size: 15px; font-weight: bold; border-radius: 25px; cursor: pointer; box-shadow: 0 4px 6px rgba(226,24,54,0.3); transition: background 0.3s; margin: 5px; }
.btn-toggle:hover { background-color: #c0142d; }
.btn-settings { background-color: #333; display: none; }
#btnAddCrewSettings { background-color: #007bff; box-shadow: 0 4px 6px rgba(0,123,255,0.3); }
#btnAddCrewSettings:hover { background-color: #0056b3; }
#btnPrintMasterlist { background-color: #6f42c1; box-shadow: 0 4px 6px rgba(111,66,193,0.3); margin-top: 10px; }
#btnPrintMasterlist:hover { background-color: #5a32a3; }

.schedule-wrapper { padding: 15px; padding-bottom: 50px; max-width: 650px; margin: 0 auto; display: none; }
.station { margin-bottom: 15px; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.station-header { background-color: #E21836; color: #ffffff; padding: 10px 15px; font-weight: bold; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; }
.emp-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; border-bottom: 1px solid #eee; }
.emp-row:last-child { border-bottom: none; }
.emp-left { display: flex; flex-direction: column; }
.emp-name-wrapper { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.emp-name { font-size: 15px; font-weight: bold; color: #000; text-transform: uppercase; }
.action-btn { font-size: 13px; cursor: pointer; display: none; background: #eee; padding: 5px 6px; border-radius: 4px; border: 1px solid #ccc; transition: 0.2s; line-height: 1; }
.action-btn:hover { background: #ddd; }
.emp-right { display: flex; align-items: center; gap: 10px; }
.btn-cal { background-color: #fce4e4; color: #E21836; border: 1px solid #E21836; padding: 8px 15px; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 13px; transition: all 0.2s; white-space: nowrap; }
.btn-cal:hover { background-color: #E21836; color: #fff; }
#noResults { display: none; text-align: center; padding: 20px; color: #888; font-style: italic; }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 10000; display: none; justify-content: center; align-items: center; }
.modal-content { background: #f4f4f4; border-radius: 10px; width: 95%; max-width: 500px; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.2); position: relative; }
.prompt-box { background: #fff; border-radius: 15px; width: 90%; max-width: 350px; padding: 25px; text-align: center; box-shadow: 0 10px 20px rgba(0,0,0,0.2); position: relative; }
.prompt-box h3 { margin-bottom: 20px; color: #E21836; }
.settings-input-group { display: flex; flex-direction: column; text-align: left; margin-bottom: 15px; }
.settings-input-group label { font-size: 12px; font-weight: bold; color: #555; margin-bottom: 5px; }
.settings-input-group input, .settings-input-group select { padding: 8px; border: 1px solid #ccc; border-radius: 5px; font-family: inherit; }
.modal-header { background: #E21836; color: #fff; padding: 20px 15px; display: flex; flex-direction: column; align-items: flex-start; position: relative; }
.modal-crew-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.8; margin-bottom: 5px; }
.modal-crew-name { font-weight: bold; font-size: 18px; }
.close-btn { position: absolute; top: 15px; right: 15px; background: none; border: none; color: #fff; font-size: 26px; cursor: pointer; line-height: 1; }
.modal-body { padding: 15px; overflow-y: auto; background: #f4f4f4; }
.modal-footer-hrs { background: #ffffff; padding: 15px; text-align: center; font-size: 16px; font-weight: bold; color: #E21836; border-top: 2px solid #ddd; box-shadow: 0 -2px 5px rgba(0,0,0,0.05); display: flex; flex-direction: column; gap: 10px; align-items: center; }
.cal-list { display: flex; flex-direction: column; gap: 10px; }
.cal-list-item { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 15px; border-radius: 8px; border-left: 4px solid #ddd; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.cal-list-item.active { border-left: 4px solid #E21836; background: #fff9f9; }
.cal-list-date { font-weight: bold; color: #333; font-size: 15px; width: 80px; flex-shrink: 0; }
.cal-list-details { flex-grow: 1; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.active .cal-list-date { color: #E21836; }
.cal-sched-time { font-size: 14px; font-weight: bold; color: #333; }
.cal-list-hrs { font-size: 11px; font-weight: bold; color: #E21836; background: #ffebee; padding: 2px 8px; border-radius: 10px; display: inline-block; }
.pending-sched { font-style: italic; color: #999; font-size: 13px; }
.edit-input { border: 1px solid #ccc; border-radius: 4px; padding: 6px 8px; font-size: 13px; width: 140px; text-align: center; font-family: inherit; }
.edit-hrs { width: 60px; text-align: center; }
.btn-save { background-color: #28a745; color: white; border: none; padding: 10px 20px; font-size: 14px; border-radius: 25px; cursor: pointer; width: 100%; font-weight: bold; transition: background 0.3s; }
.btn-save:hover { background-color: #218838; }
#loadingDb { text-align: center; padding: 10px; color: #E21836; font-weight: bold; font-size: 14px; display: none; }