/* ─── FORMS ─── */
.form-group{margin-bottom:16px;position:relative}
.form-label{display:block;font-size:.75rem;font-weight:600;color:var(--text-dim);margin-bottom:6px;letter-spacing:.5px}
.form-input{width:100%;padding:13px 16px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:12px;color:var(--text-primary);font-family:inherit;font-size:.88rem;outline:none;transition:border-color .3s,box-shadow .3s}

/* Phone input with sticky +90 prefix on the left */
.phone-input-wrap{
  display:flex;align-items:stretch;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.04);
  overflow:hidden;
  transition:border-color .25s,box-shadow .25s;
}
.phone-input-wrap:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(200,245,49,.12);
}
.phone-prefix{
  display:flex;align-items:center;justify-content:center;
  padding:0 14px;
  background:rgba(255,255,255,.06);
  color:var(--text-secondary);
  font-weight:700;font-size:.88rem;letter-spacing:.5px;
  border-right:1px solid var(--border);
  user-select:none;
  flex-shrink:0;
}
.form-input.phone-with-prefix{
  border:none;border-radius:0;background:transparent;
  flex:1;padding:13px 14px;
}
.form-input.phone-with-prefix:focus{box-shadow:none;border:none}
.form-input:focus{border-color:rgba(200,245,49,.3);box-shadow:0 0 0 3px rgba(200,245,49,.06)}
.form-input::placeholder{color:var(--text-dim)}
.form-input.error{border-color:var(--red);animation:shake .4s ease}
.form-input.valid{border-color:var(--green)}
.form-input:disabled{opacity:.6;cursor:not-allowed}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
.form-error{font-size:.68rem;color:var(--red);margin-top:4px;display:none}
.form-error.show{display:block}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-select{width:100%;padding:12px 14px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;color:var(--text-primary);font-family:inherit;font-size:.88rem;outline:none;appearance:none;cursor:pointer}
.form-textarea{width:100%;padding:12px 14px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;color:var(--text-primary);font-family:inherit;font-size:.88rem;outline:none;resize:vertical;min-height:80px;transition:border-color .3s}

/* ─── TEXTAREA + MIC BUTTON COMPOSITE ─── */
.textarea-with-mic{
  position:relative;
}
.textarea-with-mic .form-textarea{
  /* Right-side padding leaves room for the floating mic button */
  padding-right:48px;
}
.mic-btn{
  position:absolute;
  bottom:10px;
  right:10px;
  width:34px;height:34px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  color:var(--text-secondary);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  outline:none;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s,border-color .15s,color .15s,transform .12s;
  z-index:2;
}
.mic-btn:hover{
  background:rgba(200,245,49,.08);
  border-color:rgba(200,245,49,.3);
  color:var(--accent);
}
.mic-btn:active{transform:scale(.95)}
.mic-btn:focus,.mic-btn:focus-visible{outline:none;box-shadow:none}
.mic-btn svg{width:18px;height:18px;flex-shrink:0}
/* Aktif dinleme durumu — kırmızı pulse animasyonu */
.mic-btn.is-listening{
  background:rgba(255,80,80,.14);
  border-color:rgba(255,80,80,.5);
  color:var(--red,#ff5050);
  animation:micPulse 1.4s ease-in-out infinite;
}
.mic-btn.is-listening:hover{
  background:rgba(255,80,80,.22);
  border-color:rgba(255,80,80,.7);
}
@keyframes micPulse{
  0%,100%{
    box-shadow:0 0 0 0 rgba(255,80,80,.4);
  }
  50%{
    box-shadow:0 0 0 6px rgba(255,80,80,0);
  }
}
.form-textarea.auto-resize{resize:none;overflow:hidden;min-height:60px}
/* Fixed-size textarea — exactly sized for ~300 characters, NO scrollbar */
.form-textarea.fixed-size{resize:none;width:100%;min-height:220px;height:220px;max-height:220px;overflow:hidden;line-height:1.6;font-size:.88rem;padding:14px 16px}
/* Larger fixed textarea — fits 500 characters without scroll */
.form-textarea.fixed-size-lg{resize:none;width:100%;min-height:280px;height:280px;max-height:280px;overflow:hidden;line-height:1.6;font-size:.88rem;padding:14px 16px;transition:none}
.form-textarea.fixed-size-lg:hover,.form-textarea.fixed-size-lg:focus{height:280px!important;max-height:280px!important;min-height:280px!important;transform:none!important;box-shadow:none!important;z-index:auto}

/* Hover-expand note textarea — shrinks to 60px, grows on hover/focus */
.form-textarea.hover-expand{resize:none;overflow:hidden;min-height:60px;height:60px}
.form-textarea.hover-expand.expanded{position:relative;z-index:500;box-shadow:0 20px 60px rgba(0,0,0,.55),0 0 0 1px rgba(200,245,49,.25);border-color:rgba(200,245,49,.4);background:rgba(20,20,24,.98)}
.note-hover-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.22);opacity:0;pointer-events:none;z-index:400}
.note-hover-backdrop.show{opacity:1}

/* Task Tooltip — Calendar task hover */
.task-tooltip{position:fixed;z-index:800;background:rgba(15,15,20,.98);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:14px 18px;max-width:320px;box-shadow:none;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .18s,transform .18s;font-size:.82rem;line-height:1.55}
.task-tooltip.show{opacity:1;transform:translateY(0)}
.task-tooltip-head{font-size:.72rem;font-weight:800;letter-spacing:.5px;margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.06)}
.task-tooltip-body{color:var(--text-secondary);white-space:pre-wrap;word-break:break-word}
.task-tooltip::after{content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);width:12px;height:12px;background:inherit;border-right:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);clip-path:polygon(100% 0,100% 100%,0 100%)}

/* Exercise Note Button (program day) — replaces inline textarea */
.ex-note-row{margin-top:6px;margin-bottom:10px;padding-right:40px;display:flex;justify-content:flex-end}
.day-note-row{margin-top:12px;padding-top:12px;border-top:1px dashed var(--border);display:flex;justify-content:flex-start}
.ex-note-btn{padding:6px 12px;border:1px dashed var(--border);background:transparent;color:var(--text-dim);border-radius:8px;font-size:.72rem;font-weight:600;font-family:inherit;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.ex-note-btn:hover{border-color:rgba(200,245,49,.35);color:var(--accent);background:rgba(200,245,49,.04)}
.ex-note-btn.has-note{border-style:solid;border-color:rgba(200,245,49,.25);background:rgba(200,245,49,.05);color:var(--accent)}
.ex-note-btn.has-note:hover{background:rgba(200,245,49,.1);border-color:rgba(200,245,49,.5)}
.ex-note-preview{position:fixed;z-index:800;background:linear-gradient(135deg,rgba(22,22,28,.99),rgba(12,12,18,.99));border:1px solid rgba(200,245,49,.22);border-radius:14px;padding:16px 20px;max-width:320px;box-shadow:0 24px 70px rgba(0,0,0,.7),0 0 0 1px rgba(200,245,49,.08),inset 0 1px 0 rgba(255,255,255,.04);pointer-events:none;opacity:0;transform:translateX(6px) scale(.98);transition:opacity .2s,transform .2s;font-size:.85rem;line-height:1.7;color:var(--text-primary);white-space:pre-wrap;word-break:break-word}
.ex-note-preview::before{content:'📝';position:absolute;top:-10px;left:14px;background:var(--accent);color:#FFFFFF;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;box-shadow:0 4px 12px rgba(200,245,49,.35)}
.ex-note-preview.show{opacity:1;transform:translateX(0) scale(1)}

/* Program Add Dropdown */
.program-add-wrap{position:relative;display:inline-block}
/* DEPRECATED: program-add-floating eski "sticky float fab" yapısıydı —
   ay daraltılınca Programı Sil butonuyla bindiriyordu. Yerine .program-add-stacked
   ve .program-actions-stack kullanılıyor. Eski class korunuyor (varsa eski state). */
.program-add-floating{position:sticky;bottom:20px;float:right;margin-top:-52px;margin-right:4px;margin-bottom:8px;z-index:50;pointer-events:auto}
.program-add-fab{padding:12px 22px !important;font-size:.88rem !important;font-weight:800 !important;border-radius:999px !important;box-shadow:0 10px 28px rgba(200,245,49,.35),0 4px 12px rgba(0,0,0,.4);letter-spacing:.5px}

