/* Newsi8 Vitals Tool v0.46 */
body{font-family:system-ui,sans-serif;max-width:1440px;margin:0 auto;padding:20px;background:#fafafa;line-height:1.6;}
h1,h2{text-align:center;}
h1 small{display:block;font-size:0.6em;color:#666;margin-top:8px;}
.date-picker{text-align:center;margin:30px 0;font-size:1.2em;}
.vitals button{padding:14px 40px;background:#27ae60;color:white;border:none;border-radius:12px;font-weight:bold;font-size:1.1em;}
.vitals{padding:15px;margin-bottom:15px;}
.vitals input{width:70px;padding:8px;font-size:1.1em;}
.entry-list{margin-top:15px;font-size:0.95em;color:#2c3e50;font-weight:500;}
.entry{display:flex;align-items:center;gap:12px;margin:6px 0;padding:6px;background:#f8f9fa;border-radius:8px;justify-content:space-between;}
.entry-info{display:flex;align-items:center;gap:12px;flex:1;}
.entry-time{cursor:pointer;font-weight:600;}
.note-icon{cursor:pointer;color:#8e44ad;font-size:1.2em;transition:opacity 0.2s;}
.note-icon:hover{opacity:0.7;}
.note-icon.has-note{font-weight:bold;color:#9b59b6;}
.new-note{margin:18px 0;padding:14px;background:#f9f3ff;border-radius:12px;}
.new-note textarea{width:100%;height:100px;padding:10px;font-family:inherit;border-radius:8px;border:1px solid #ccc;}
.section{background:white;border-radius:16px;padding:14px;margin-bottom:18px;box-shadow:0 4px 15px rgba(0,0,0,0.06);}
#entryList .entry{padding:8px;gap:8px;font-size:0.9em;}
.symptom-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px;margin:20px 0;text-align:center;padding:20px;background:#fff;border-radius:16px;box-shadow:0 4px 15px rgba(0,0,0,0.06);}
.symptom-card{background:linear-gradient(145deg,#f8f9fa,#e9ecef);border-radius:12px;padding:12px;box-shadow:0 4px 12px rgba(0,0,0,0.08);transition:all 0.2s;cursor:pointer;border:1px solid #dee2e6;}
.symptom-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.12);}
.symptom-card h3{margin:0 0 10px 0;font-size:1.1em;color:#495057;display:flex;justify-content:space-between;align-items:center;}
.symptom-card.collapsed h3::after{content:'▼';}
.symptom-card.expanded h3::after{content:'▲';}
.symptom-sliders{display:none;gap:8px;}
.symptom-card.expanded .symptom-sliders{display:flex;flex-direction:column;}
.symptom-row{display:flex;align-items:center;gap:8px;padding:6px;background:white;border-radius:8px;}
.symptom-row input[type=range]{flex:1;height:6px;}
.symptom-row .value{min-width:28px;font-weight:bold;font-size:1em;color:#2c3e50;}
.value{font-weight:bold;font-size:1.15em;min-width:38px;text-align:right;color:#2c3e50;}
.add-custom{margin:35px 0;text-align:center;}
button{padding:12px 24px;background:#3498db;color:white;border:none;border-radius:12px;cursor:pointer;font-weight:bold;margin:5px;margin-bottom:8px;}
button:hover{opacity:0.9;}
.btnClass{background:#8e44ad;color:white;padding:12px 24px 8px;border-radius:12px;text-decoration:none;font-weight:bold;margin-bottom:8px;}
.charts{display:flex;flex-direction:column;gap:50px;align-items:center;max-width:1000px;margin:50px auto;}
.charts>div{width:100%;max-width:900px;display:flex;flex-direction:column;align-items:center;}
.chart-container{width:100%;max-width:900px;display:flex;flex-direction:column;align-items:center;}
.chart-wrapper{position:relative;width:100%;min-height:300px;}
canvas{max-width:100%!important;width:900px!important;height:300px!important;background:white;border-radius:16px;padding:20px;box-shadow:0 6px 20px rgba(0,0,0,0.1);display:block;margin:0 auto;}
.chart-title{text-align:center;font-size:1.3em;margin-bottom:10px;color:#2c3e50;font-weight:600;}
.no-data-placeholder{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#6c757d;font-size:1.2em;font-weight:500;text-align:center;z-index:10;background:rgba(255,255,255,0.9);padding:20px 40px;border-radius:12px;border:2px dashed #dee2e6;}
.chart-has-data .no-data-placeholder{display:none!important;}
.chart-no-data .no-data-placeholder{display:block!important;}
.chart-no-data canvas{opacity:0.3!important;}
.data-tools{text-align:center;margin:40px 0;padding:20px;background:#fff;border-radius:16px;box-shadow:0 4px 15px rgba(0,0,0,0.06);}
.data-tools button{background:#8e44ad;}
.data-tools input[type=file]{display:none;}
#editModal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:1000;justify-content:center;align-items:center;}
.modal-content{background:white;padding:25px;border-radius:16px;width:90%;max-width:550px;max-height:90%;overflow-y:auto;box-shadow:0 10px 30px rgba(0,0,0,0.3);}
.modal-buttons button{margin:0 10px;padding:10px 20px;}
.delete-btn{background:#e74c3c!important;}
.delete-note-icon{cursor:pointer;color:#e74c3c;font-size:1.1em;margin-left:8px;opacity:0.7;}
.delete-note-icon:hover{opacity:1;}
#saveNoteBtn{border:none;border-radius:8px;color:white;font-weight:bold;cursor:pointer;transition:opacity 0.2s;}
#saveNoteBtn:hover{opacity:0.85;}
.chart-toggle-btn{background:#4CAF50;color:white;border:none;padding:8px 16px;margin:0 5px;border-radius:4px;cursor:pointer;font-size:14px;}
.chart-toggle-btn:hover{background:#45a049;}
#symptomsAllOff{background:#f44336;}
#symptomsAllOff:hover{background:#da190b;}
.html-legend{display:flex;flex-wrap:wrap;gap:12px;margin:25px 0 40px 0;padding:12px;background:#f8f9fa;border-radius:12px;border:1px solid #dee2e6;}
#symptomsChartContainer .chart-wrapper{min-height:500px;}
.legend-item{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:8px;cursor:pointer;transition:all 0.2s;font-size:0.95em;font-weight:500;border:1px solid transparent;}
.legend-item:hover{background:#e3f2fd;border-color:#2196f3;transform:translateX(3px);}
.legend-item.hidden{opacity:0.4;background:#f5f5f5;}
.legend-color{width:16px;height:16px;border-radius:4px;flex-shrink:0;}
.faq-section{max-width:800px;margin:100px auto 40px auto;padding:20px;background:#fff;border-radius:16px;box-shadow:0 6px 25px rgba(0,0,0,0.08);}
.faq-item{margin-bottom:12px;border:1px solid #e9ecef;border-radius:12px;overflow:hidden;background:#fafbfc;}
.faq-question{padding:18px 20px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:1.05em;transition:all 0.2s;background:white;}
.faq-question:hover{background:#f8f9fa;}
.faq-arrow{font-size:0.9em;transition:transform 0.2s;}
.faq-question.active .faq-arrow{transform:rotate(180deg);}
.faq-answer{display:none;padding:20px;background:white;border-top:1px solid #f1f3f4;line-height:1.6;color:#495057;}
.faq-answer.active{display:block;}
.faq-answer ul{margin:12px 0;padding-left:20px;}
.faq-answer small{color:#6c757d;font-style:italic;}
.note-icon{cursor:pointer;padding:5px 10px;border-radius:6px;font-size:1em;margin-left:12px;display:inline-flex;align-items:center;justify-content:center;min-width:28px;}
.note-icon.no-note{color:#999;background:#f8f9fa;border:1px solid #e0e0e0;}
.note-icon.has-note{color:#1565c0;background:#e3f2fd;border:2px solid #1976d2;font-weight:bold;}
.delete-note-icon{margin-left:8px;cursor:pointer;color:#c62828;font-size:1.3em;}
.delete-note-icon:hover{opacity:1;}
#entryControls{padding:24px 28px!important;}
#entryControls>div{display:grid!important;grid-template-columns:1fr auto!important;gap:24px!important;align-items:start!important;}
#entryControls .data-tools{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:12px!important;width:fit-content!important;max-width:420px!important;justify-self:start!important;}
#entryControls .btnClass{padding:12px 16px!important;height:50px!important;width:98%!important;box-sizing:border-box!important;}
@media (max-width:780px){#entryControls>div{grid-template-columns:1fr!important;}#entryControls .data-tools{grid-template-columns:repeat(2,1fr)!important;width:fit-content!important;max-width:420px!important;margin:0 auto!important;}}
#entryControls input[type="date"],#entryControls input[type="time"]{max-width:180px!important;width:180px!important;min-width:160px!important;box-sizing:border-box!important;}
@media (max-width:600px){#entryControls .data-tools{grid-template-columns:1fr!important;width:90%!important;max-width:none!important;}#entryControls input[type="date"],#entryControls input[type="time"]{width:100%!important;margin-left:0!important;margin-top:6px!important;}}
@media (max-width:768px){#saveNoteBtn{padding:12px 20px;font-size:0.95em;min-height:44px;min-width:44px;}.symptom-grid{grid-template-columns:1fr!important;padding:15px;margin:15px 0;}.symptom-card{max-width:100%!important;width:100%!important;margin:0!important;box-sizing:border-box!important;}.faq-section{margin:20px 10px;padding:15px;}.faq-question{padding:16px;font-size:1em;}}
@media (max-width:480px){#saveNoteBtn{padding:10px 16px;font-size:0.9em;}}
@media (max-width:375px){.symptom-grid{padding:12px!important;gap:10px!important;}.symptom-card{min-width:0!important;max-width:100%!important;padding:10px!important;}.symptom-card h3{font-size:1em!important;padding-right:28px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.symptom-sliders{padding:8px!important;gap:6px!important;}.symptom-row{flex-direction:column!important;align-items:stretch!important;gap:4px!important;padding:6px!important;}.symptom-row input[type=range]{width:100%!important;height:8px!important;}.symptom-row .value{text-align:center!important;font-size:0.9em!important;min-width:auto!important;}}
@media (max-width:320px){.symptom-card{padding:8px!important;}.symptom-card h3{font-size:0.95em!important;}}
@media (max-width:480px){.no-data-placeholder{font-size:1em!important;padding:12px 20px!important;}}
@media (max-width:375px){.no-data-placeholder{font-size:0.9em!important;padding:10px 16px!important;}}
@media (max-width:320px){.no-data-placeholder{font-size:0.85em!important;padding:8px 12px!important;}}