:root{
  --bg: #f5f7fb;
  --surface: #ffffff;
  --muted: #666;
  --accent: #2b6cb0;
  --accent-strong: #1e40af;
  --card-shadow: 0 2px 6px rgba(0,0,0,0.08);
  --completed-bg: #e6ffef;
  --completed-border: #48bb78;
  --text: #111;
}

/* THEMES */
body[data-theme="dark"]{
  --bg: #0b1220;
  --surface: #0f1724;
  --muted: #99a3b3;
  --accent: #7dd3fc;
  --accent-strong: #22d3ee;
  --completed-bg: rgba(72,187,120,0.12);
  --completed-border: #16a34a;
  --text: #e6eef8;
}
body[data-theme="blue"]{
  --bg: #eef8ff;
  --surface: #ffffff;
  --muted: #5b6b7a;
  --accent: #0369a1;
  --accent-strong: #014f86;
  --completed-bg: #e6f7ff;
  --completed-border: #0ea5e9;
  --text: #052d4a;
}
body[data-theme="green"]{
  --bg: #f2fbf6;
  --surface: #ffffff;
  --muted: #4b5b4a;
  --accent: #059669;
  --accent-strong: #047857;
  --completed-bg: #e9fff3;
  --completed-border: #10b981;
  --text: #06341f;
}

/* BASE */
*{box-sizing:border-box}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color: var(--text);
  padding: 18px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* TITLE */
h1 {
  margin:0 0 12px 0;
  font-size:20px;
  color:var(--accent-strong);
}

/* TOP LAYOUT */
.top-layout{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:12px;
}

/* DATE BAR */
.date-bar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.left-group {
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.right-group {
  margin-left:auto;
  display:flex;
  align-items:center;
}
.date-bar button {
  padding:7px 14px;
  border-radius:8px;
  cursor:pointer;
  font-weight:500;
  border:none;
  display:flex;
  align-items:center;
  gap:6px;
  background:var(--surface);
  color:var(--text);
  box-shadow:0 1px 0 rgba(0,0,0,0.02);
}
.date-bar button i { font-size:16px; }

.date-label {
  padding:6px 10px;
  background:rgba(255,255,255,0.85);
  border-radius:8px;
  font-weight:600;
}
.theme-label {
  font-size:13px;
  color:var(--muted);
}
.date-bar select {
  padding:6px 10px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.08);
  background:var(--surface);
  color:var(--text);
}

/* BUTTON COLORS */
#prevDay,
#nextDay {
  background: var(--accent);
  color: #ffffff;
}
#todayBtn {
  background: #f59e0b;
  color:#ffffff;
}
#exportPdf {
  background:#dc2626;
  color:#ffffff;
}
#exportCsv {
  background:#2563eb;
  color:#ffffff;
}
#resetDay {
  background:#ef4444;
  color:#ffffff;
}

/* CLOCK */
.clock {
  font-family:"Roboto Mono", monospace;
  background:rgba(0,0,0,0.03);
  padding:6px 10px;
  border-radius:8px;
  font-size:13px;
  color:var(--text);
  margin-left:6px;
  min-width:92px;
  text-align:center;
}

/* SLOT SETTINGS */
.slot-settings{
  background:var(--surface);
  border-radius:12px;
  padding:12px 14px;
  box-shadow:var(--card-shadow);
}
.slot-settings-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
}
.slot-setting{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.slot-setting label{
  font-size:13px;
  color:var(--muted);
}
.slot-duration-input{
  display:flex;
  gap:6px;
}
.slot-duration-input input{
  width:80px;
}
.slot-duration-input select{
  padding:7px 10px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.10);
  background:var(--surface);
  color:var(--text);
}
.slot-settings-hint{
  margin:8px 0 0;
  font-size:12px;
  color:var(--muted);
}
.primary-btn{
  padding:7px 14px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--accent);
  color:#ffffff;
  box-shadow:0 2px 4px rgba(15,23,42,0.18);
}
.invisible-label{
  visibility:hidden;
}

/* SLOTS PANEL */
.slots-panel{
  margin-top:4px;
}

/* CONTAINER / HOUR BOX */
#container { padding-bottom:40px; }
.hour-box {
  background:var(--surface);
  padding:16px;
  margin:20px 0;
  border-radius:12px;
  box-shadow:var(--card-shadow);
  border-left:4px solid transparent;
  transition:transform 120ms ease, box-shadow 120ms ease;
}
.hour-box:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,0.08);
}
.hour-box.done {
  background:var(--completed-bg);
  border-left-color:var(--completed-border);
}
.hour-title {
  font-weight:700;
  margin-bottom:10px;
  color:var(--accent-strong);
  font-size:15px;
}

/* FIELDS */
.field { margin-bottom:8px; }
.field label {
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
}
input[type="text"],
input[type="search"],
input[type="date"],
input[type="time"],
textarea,
.planned,
.done,
.half-detail-input {
  width:100%;
  padding:8px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.10);
  background:transparent;
  color:var(--text);
  font-size:14px;
  outline:none;
}
input:focus, textarea:focus, select:focus {
  box-shadow:0 0 0 3px rgba(59,130,246,0.08);
  border-color:rgba(59,130,246,0.6);
}

/* STATUS OPTIONS */
.status-options {
  display:flex;
  flex-direction:row;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
}
.status-option {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:var(--muted);
  white-space:nowrap;
}
.status-option input[type="radio"] {
  width:16px;
  height:16px;
  margin:0;
}

/* HALF DETAIL */
.half-detail-row { margin-top:8px; }
.half-detail-input {
  width:200px;
  padding:8px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.10);
  background:var(--surface);
  color:var(--text);
}

/* ACTION BUTTONS */
.hour-box .action {
  padding:7px 12px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.hour-box .save {
  background:#16a34a;
  color:white;
  border:1px solid rgba(0,0,0,0.04);
}
.hour-box .clear {
  background:transparent;
  color:var(--accent-strong);
  border:1px solid rgba(0,0,0,0.12);
}
.disabled-btn {
  opacity:0.5;
  cursor:not-allowed !important;
}
.save-label {
  display:inline-block;
}

/* SPEECH-TO-TEXT BUTTON */
.input-with-mic {
  display:flex;
  align-items:center;
  gap:8px;
}
.input-with-mic .planned,
.input-with-mic .done {
  flex:1;
}
.voice-btn {
  width:34px;
  height:34px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#ffffff;
  border:1px solid rgba(0,0,0,0.12);
  cursor:pointer;
  font-size:16px;
  color:var(--accent-strong);
  transition:box-shadow .12s ease, transform .08s ease, background .12s ease;
}
.voice-btn:hover {
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
}
.voice-btn.listening {
  background:#ef4444;
  color:#ffffff;
  box-shadow:0 0 0 0 rgba(239,68,68,0.25);
  animation: mic-pulse 1.4s infinite;
}
@keyframes mic-pulse {
  0% { box-shadow:0 0 0 0 rgba(239,68,68,0.25); }
  70% { box-shadow:0 0 0 12px rgba(239,68,68,0); }
  100% { box-shadow:0 0 0 0 rgba(239,68,68,0); }
}

/* TOAST */
#toastContainer {
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:9999;
  pointer-events:none;
}
.toast {
  background:rgba(20,20,20,0.9);
  color:white;
  padding:10px 14px;
  border-radius:8px;
  margin-top:8px;
  opacity:0;
  transform:translateY(6px);
  transition:.18s ease;
  pointer-events:auto;
}
.toast.show {
  opacity:1;
  transform:translateY(0);
}

/* MODAL */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10000;
}
.modal-overlay.hidden{
  display:none;
}
.modal{
  background:var(--surface);
  border-radius:12px;
  padding:16px 18px 14px;
  max-width:320px;
  width:100%;
  box-shadow:0 18px 45px rgba(0,0,0,0.45);
}
.modal-body{
  margin-bottom:14px;
  font-size:14px;
  color:var(--text);
}
.modal-footer{
  display:flex;
  justify-content:flex-end;
}

/* ------- FIX FOR DARK THEME INPUT VISIBILITY ------- */
body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] textarea {
  background: #1e293b !important;    /* dark card */
  color: #f1f5f9 !important;          /* light text */
  border: 1px solid #475569 !important;
}

body[data-theme="dark"] .date-label {
  background: #1e293b !important;
  color: #f1f5f9 !important;
}

body[data-theme="dark"] .hour-box {
  background: #1e293b !important;
  color: #f1f5f9 !important;
}

body[data-theme="dark"] .slot-settings {
  background: #1e293b !important;
  color: #f1f5f9 !important;
}

body[data-theme="dark"] label {
  color: #cbd5e1 !important;
}

/* RESPONSIVE */
@media (max-width:540px){
  .right-group {
    width:100%;
    justify-content:flex-end;
    margin-top:8px;
  }
  .date-label { display:none; }
  .clock {
    min-width:72px;
    font-size:12px;
    padding:5px 8px;
  }
  .voice-btn {
    width:30px;
    height:30px;
    font-size:14px;
  }
}
/* allow unselecting radio buttons by preventing highlight circle staying visible */
.status-option input[type="radio"]:not(:checked) {
  accent-color: var(--muted);
}

.status-option input[type="radio"]:checked {
  accent-color: var(--accent);
}

/* REMOVE browser forced focus ring that prevents unchecking in some devices */
.status-option input[type="radio"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
/* Bigger visible clock box */
.clock {
  font-family:"Roboto Mono", monospace;
  background: var(--surface);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  border: 1px solid rgba(0,0,0,0.15);
  min-width: 110px;
  text-align: center;
}
/* Reduce width of date input so the calendar icon stays close */
#dayPicker {
  width: 140px;           /* adjust between 120–160px depending on your choice */
  padding-right: 6px;     /* reduces empty area before the calendar icon */
}

/* Reduce spacing inside date bar */
.date-bar {
  gap: 6px !important;    /* was 10px – now tighter */
}

/* Small adjustment to calendar icon alignment */
#dayPicker::-webkit-calendar-picker-indicator {
  margin-left: -4px;  /* pull icon closer toward text */
}