@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
body { font-family: 'Inter', 'Noto Sans JP', sans-serif; user-select: none; -webkit-user-select: none; overflow-x: hidden; overscroll-behavior-y: none; }
#app-container { transform-origin: top center; transition: transform 0.2s ease, width 0.2s ease; }
#whiteboard { position: relative; width: 100%; height: 950px; border: 2px solid #e2e8f0; background-color: #f8fafc; border-radius: 8px; overflow: hidden; touch-action: none; }
.zone { position: absolute; border: 2px dashed #cbd5e1; border-radius: 8px; z-index: 1; }
.zone-title { position: absolute; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; font-size: clamp(11px, 1.3vw, 16px); font-weight: 600; color: #334155; z-index: 2; white-space: normal; word-wrap: break-word; line-height: 1.1; text-align: center; padding: 2px; }
.zone-magnet { width: 94%; padding: 4px 2px; background-color: white; border: 2px solid #cbd5e1; border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); cursor: grab; font-weight: bold; color: #1e293b; margin-bottom: 4px; pointer-events: auto; transition: transform 0.1s, box-shadow 0.1s; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-sizing: border-box; font-size: clamp(10px, 1.1vw, 14px); line-height: 1.2; word-wrap: break-word; text-align: center; }
.zone-magnet.dragging { cursor: grabbing; transform: scale(1.05); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.2), 0 4px 6px -4px rgba(0,0,0,0.1); z-index: 100 !important; position: absolute; }
#zone-unassigned { background-color: #f1f5f9; border-color: #94a3b8; }
#title-unassigned { flex-direction: row; justify-content: center; align-items: center; font-size: 1rem; color: #475569; }
.driver-select { width: 96%; font-size: 0.85rem; padding: 4px 2px; border: 1px solid #93c5fd; border-radius: 4px; background-color: #eff6ff; color: #1e40af; font-weight: 700; cursor: pointer; outline: none; pointer-events: auto; box-sizing: border-box; }
.driver-select:focus { ring: 2px solid #3b82f6; }
.magnet { position: absolute; width: 140px; padding: 4px 4px 4px 4px; border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); cursor: grab; font-weight: 500; color: #1e293b; z-index: 10; transition: box-shadow 0.2s ease, transform 0.2s ease; display: flex; align-items: center; justify-content: flex-start; gap: 4px; background-color: white; border: 1px solid #e2e8f0; }
.magnet.dragging { cursor: grabbing; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); transform: scale(1.05); z-index: 20; }
body.resizing .magnet { transition: none !important; }
.zone-divider { position: absolute; width: 100%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: #94a3b8; font-weight: bold; z-index: 5; pointer-events: none; }
.zone-divider span { background-color: #f1f5f9; padding: 2px 8px; border-radius: 9999px; border: 1px solid #e2e8f0; }
.magnet-menu-btn { margin-left: auto; padding: 2px 6px; color: #94a3b8; border-radius: 4px; cursor: pointer; font-size: 1.1rem; line-height: 1; transition: background-color 0.2s, color 0.2s; align-self: flex-start; }
.magnet-menu-btn:hover { background-color: #f1f5f9; color: #475569; }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 100; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
.modal-content { background-color: white; padding: 24px; border-radius: 8px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); width: 90%; max-width: 600px; transform: scale(0.95); transition: transform 0.3s; max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.modal-overlay:not(.modal-hidden) { opacity: 1; visibility: visible; }
.modal-overlay:not(.modal-hidden) .modal-content { transform: scale(1); }
.modal-hidden { display: none; }
#context-menu { position: fixed; z-index: 200; width: 240px; background: white; border-radius: 8px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); border: 1px solid #e2e8f0; display: none; flex-direction: column; padding: 4px 0; }
#context-menu button { text-align: left; padding: 8px 16px; font-size: 0.9rem; color: #334155; transition: background-color 0.1s; }
#context-menu button:hover { background-color: #f1f5f9; }
#context-menu .menu-header { padding: 8px 16px; font-size: 0.8rem; font-weight: bold; color: #64748b; border-bottom: 1px solid #e2e8f0; margin-bottom: 4px; }
#context-menu .menu-divider { height: 1px; background-color: #e2e8f0; margin: 4px 0; }
.menu-trip-selector { display: flex; padding: 4px 16px 8px 16px; gap: 4px; }
.menu-trip-btn { flex: 1; text-align: center !important; padding: 4px !important; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 0.8rem !important; background-color: #f8fafc; }
.menu-trip-btn.active { background-color: #eff6ff; border-color: #3b82f6; color: #1d4ed8 !important; font-weight: bold; }
.menu-order-btn.active { background-color: #eff6ff; border-color: #3b82f6; color: #1d4ed8 !important; font-weight: bold; }
.settings-btn { position: absolute; top: 0; right: 16px; padding: 8px; background-color: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 9999px; color: #475569; line-height: 1; transition: all 0.2s; z-index: 100; cursor: pointer; pointer-events: auto; }
.settings-btn:hover { background-color: #e2e8f0; }
.delete-btn { padding: 4px; background-color: #f1f5f9; color: #64748b; border-radius: 9999px; line-height: 1; transition: all 0.2s; cursor: pointer; }
.delete-btn:hover { background-color: #fee2e2; color: #dc2626; }
.delete-btn svg { width: 20px; height: 20px; }
.action-btn { padding: 8px 16px; background-color: #ffffff; border: 1px solid #d1d5db; color: #374151; border-radius: 6px; font-weight: 500; display: flex; align-items: center; gap: 8px; transition: all 0.2s; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.action-btn:hover { background-color: #f9fafb; }
#import-btn-magnet { padding: 6px 16px; background-color: #fff7ed; border: 1px solid #fdba74; color: #9a3412; border-radius: 8px; font-size: 0.875rem; font-weight: 600; display: flex; align-items: center; gap: 6px; transition: all 0.2s; cursor: pointer; white-space: nowrap; }
#import-btn-magnet:hover { background-color: #ffedd5; }
.period-toggle { display: flex; background-color: #e2e8f0; border-radius: 8px; padding: 2px; margin-left: 8px; }
.period-btn { padding: 4px 12px; border-radius: 6px; font-size: 0.875rem; font-weight: 500; color: #64748b; transition: all 0.2s; }
.period-btn.active { background-color: white; color: #3b82f6; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.magnet-input-row-multi { border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; background-color: #f8fafc; }
.day-checkbox-group { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid #e2e8f0; margin-top: 12px; }
.day-checkbox-label { display: flex; align-items: center; padding: 6px 10px; border-radius: 6px; background-color: #f1f5f9; cursor: pointer; transition: background-color 0.2s; }
.day-checkbox-label input { margin-right: 6px; }
.day-checkbox-label:hover { background-color: #e2e8f0; }
.day-checkbox-label.all-checkbox { font-weight: 600; color: #2563eb; border-bottom: 1px solid #e2e8f0; width: 100%; padding-bottom: 8px; margin-bottom: 8px; }
.period-checkbox-group { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #f1f5f9; }
.period-label { font-size: 0.875rem; color: #64748b; font-weight: 500; margin-right: 4px; }
.schedule-details-container { margin-top: 16px; border: 1px solid #cbd5e1; border-radius: 6px; overflow: hidden; }
.schedule-details-header { padding: 10px; background-color: #f1f5f9; font-size: 0.875rem; font-weight: 600; color: #475569; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.schedule-details-header:hover { background-color: #e2e8f0; }
.schedule-table-wrapper { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.schedule-table-wrapper.open { max-height: 500px; overflow-y: auto; }
.schedule-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.schedule-table th, .schedule-table td { border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; padding: 8px; text-align: center; }
.schedule-table th { background-color: #f8fafc; color: #64748b; font-weight: 600; width: 20%; }
.schedule-select { width: 100%; border: 1px solid #cbd5e1; border-radius: 4px; padding: 4px; font-size: 0.75rem; background-color: white; outline: none; }
.schedule-select:focus { border-color: #3b82f6; ring: 1px solid #3b82f6; }
.toggle-checkbox:checked { right: 0; border-color: #68D391; }
.toggle-checkbox:checked + .toggle-label { background-color: #68D391; }
#loading-overlay { position: fixed; inset: 0; background-color: rgba(255,255,255,0.8); z-index: 1000; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; }
.spinner { width: 40px; height: 40px; border: 4px solid #e2e8f0; border-top-color: #3b82f6; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.restriction-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; margin-bottom: 8px; }
.restriction-label { display: flex; align-items: center; font-size: 0.8rem; color: #334155; cursor: pointer; }
.restriction-label input { margin-right: 4px; }
#lock-screen { position: fixed; inset: 0; background-color: #f8fafc; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#lock-screen.hidden { display: none; }
.lock-container { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); text-align: center; width: 90%; max-width: 320px; }
.version-tag { position: fixed; bottom: 5px; left: 5px; font-size: 10px; color: #94a3b8; z-index: 0; pointer-events: none; }
.transfer-badge { position: absolute; top: -6px; right: -6px; background-color: #f97316; color: white; font-size: 0.6rem; padding: 1px 4px; border-radius: 4px; font-weight: bold; z-index: 15; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.transfer-list-item { display: flex; align-items: center; padding: 8px; border-bottom: 1px solid #f1f5f9; }
.transfer-list-item:hover { background-color: #f8fafc; }
#missing-check-list { max-height: 300px; overflow-y: auto; border: 1px solid #e2e8f0; border-radius: 6px; padding: 8px; background-color: #f8fafc; }
.missing-item { display: flex; justify-content: space-between; align-items: center; padding: 8px; border-bottom: 1px solid #e2e8f0; background-color: white; }
.missing-item:last-child { border-bottom: none; }
.missing-name { font-weight: 600; color: #334155; }
.missing-days { font-size: 0.75rem; color: #64748b; margin-left: 8px; }
.order-badge { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background-color: #cbd5e1; color: #1e293b; font-size: 9px; font-weight: 700; margin-left: -2px; margin-right: 0px; flex-shrink: 0; line-height: 1; align-self: flex-start; margin-top: 2px;}
.info-group-title { font-size: 0.85rem; font-weight: bold; color: #475569; border-bottom: 1px solid #e2e8f0; padding-bottom: 4px; margin-bottom: 8px; margin-top: 16px; }
.input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .input-grid { grid-template-columns: 1fr; } }