/**
 * MODÜL: quick-tools — Hızlı Araçlar paneli (filemanager-sync deseni).
 * Kalıcı sağ dock: kapanınca DOM'da kalır, araç state'i yaşar.
 * Sökme = modül klasörü + index.html satırları. Tüm değerler token'lardan.
 */

/* Duvar butonu: tema FAB'ının üstünde (ayna kuralları .ox-tp-fab'dan gelir) */
.ox-qt-fab { bottom: 100px; }

.ox-qt {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(360px, 94vw);
  display: flex;
  flex-direction: column;
  background: var(--ox-surface);
  border-left: 1px solid var(--ox-border);
  box-shadow: var(--ox-shadow-overlay);
  transform: translateX(100%);
  transition: transform var(--ox-transition-slow);
  z-index: var(--ox-z-drawer);
}
.ox-qt.is-open { transform: translateX(0); }

/* Kenar çubuğu sağdayken panel SOLA geçer */
:root[data-nav="sidebar"][data-side="right"] .ox-qt {
  right: auto; left: 0;
  border-left: 0; border-right: 1px solid var(--ox-border);
  transform: translateX(-100%);
}
:root[data-nav="sidebar"][data-side="right"] .ox-qt.is-open { transform: translateX(0); }

.ox-qt__head {
  display: flex;
  align-items: center;
  gap: var(--ox-space-2);
  height: var(--ox-topbar-h);
  padding: 0 var(--ox-space-4);
  border-bottom: 1px solid var(--ox-border);
  flex-shrink: 0;
  font-weight: var(--ox-weight-semibold);
}
.ox-qt__head .ox-icon { color: var(--ox-accent); }
.ox-qt__head strong { flex: 1; }

/* Sekme şeridi: ikon butonları */
.ox-qt__tabs {
  display: flex;
  gap: var(--ox-space-1);
  padding: var(--ox-space-2) var(--ox-space-3);
  border-bottom: 1px solid var(--ox-border);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.ox-qt__tab {
  display: grid;
  place-items: center;
  width: 38px; height: 32px;
  border: 0;
  border-radius: var(--ox-radius-sm);
  background: transparent;
  color: var(--ox-fg-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--ox-transition-fast), color var(--ox-transition-fast);
}
.ox-qt__tab:hover { background: var(--ox-surface-2); color: var(--ox-fg); }
.ox-qt__tab.is-on { background: var(--ox-primary-subtle); color: var(--ox-accent); }
.ox-qt__tab:focus-visible { outline: none; box-shadow: var(--ox-focus-ring); }

.ox-qt__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--ox-space-4);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ox-fg) 16%, transparent) transparent;
}
.ox-qt__pane[hidden] { display: none; }

/* --- Hesap makinesi (v2: yazılabilir ifade + canlı önizleme) --- */
.ox-calc__display { display: flex; flex-direction: column; gap: var(--ox-space-1); }
.ox-calc__expr { font-family: var(--ox-font-mono); font-size: var(--ox-text-md); text-align: right; }
.ox-calc__result {
  min-height: 22px;
  text-align: right;
  font-family: var(--ox-font-mono);
  font-size: var(--ox-text-lg);
  color: var(--ox-accent);
  cursor: pointer;
}
.ox-calc__result.is-error { color: var(--ox-danger); font-size: var(--ox-text-sm); }

.ox-calc__item {
  padding: var(--ox-space-2) var(--ox-space-3);
  border: 1px solid var(--ox-border);
  border-radius: var(--ox-radius-md);
  margin-bottom: var(--ox-space-2);
}
.ox-calc__item-top { display: flex; justify-content: space-between; gap: var(--ox-space-2); }
.ox-calc__item-label { font-size: var(--ox-text-xs); font-weight: var(--ox-weight-semibold); color: var(--ox-accent); }
.ox-calc__item-date { font-size: var(--ox-text-xs); color: var(--ox-fg-faint); margin-left: auto; }
.ox-calc__item-calc {
  display: flex; justify-content: space-between; gap: var(--ox-space-2);
  font-family: var(--ox-font-mono); font-size: var(--ox-text-sm);
  color: var(--ox-fg-muted); margin: 2px 0;
  word-break: break-all;
}
.ox-calc__item-calc b { color: var(--ox-fg); white-space: nowrap; }
.ox-calc__item-acts { display: flex; gap: 2px; justify-content: flex-end; }
.ox-qt__mini.is-on { color: var(--ox-warning); }

/* --- Renk aracı (v2) --- */
.ox-qt__native {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--ox-border-strong);
  border-radius: var(--ox-radius-sm);
  overflow: hidden;
  cursor: pointer;
  background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
}
.ox-qt__native input { position: absolute; inset: -4px; opacity: 0; cursor: pointer; }
.ox-qt__fk {
  display: inline-block;
  min-width: 52px;
  font-family: var(--ox-font-sans);
  font-size: var(--ox-text-xs);
  font-weight: var(--ox-weight-semibold);
  color: var(--ox-fg-faint);
}
.ox-qt__con {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--ox-space-3);
  border: 1px solid var(--ox-border);
  border-radius: var(--ox-radius-md);
}
.ox-qt__con span { font-weight: var(--ox-weight-semibold); }
.ox-qt__con b { font-size: var(--ox-text-xs); color: var(--ox-fg-muted); background: var(--ox-surface); padding: 1px 6px; border-radius: var(--ox-radius-xs); }
.ox-qt__pal {
  width: 26px; height: 26px;
  border: 2px solid var(--ox-border);
  border-radius: var(--ox-radius-sm);
  cursor: pointer;
  padding: 0;
}
.ox-qt__pal:hover, .ox-qt__pal.is-sel { border-color: var(--ox-fg); }

/* --- Hesap makinesi (eski ekran stili — geriye dönük) --- */
.ox-calc__screen {
  min-height: 64px;
  padding: var(--ox-space-3) var(--ox-space-4);
  border: 1px solid var(--ox-border);
  border-radius: var(--ox-radius-md);
  background: var(--ox-surface-2);
  font-family: var(--ox-font-mono);
  font-size: var(--ox-text-lg);
  text-align: right;
  word-break: break-all;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ox-calc__screen small { font-size: var(--ox-text-xs); color: var(--ox-fg-faint); }
.ox-calc__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ox-space-2);
  margin-top: var(--ox-space-3);
}
.ox-calc__key {
  height: 42px;
  border: 1px solid var(--ox-border);
  border-radius: var(--ox-radius-md);
  background: var(--ox-surface);
  font-family: var(--ox-font-mono);
  font-size: var(--ox-text-md);
  color: var(--ox-fg);
  cursor: pointer;
  transition: background-color var(--ox-transition-fast);
}
.ox-calc__key:hover { background: var(--ox-surface-2); }
.ox-calc__key--op { color: var(--ox-accent); }
.ox-calc__key--eq {
  grid-column: span 2;
  background: var(--ox-primary);
  border-color: var(--ox-primary);
  color: var(--ox-primary-fg);
}
.ox-calc__key--eq:hover { background: var(--ox-primary-hover); }

.ox-qt__subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--ox-space-5) 0 var(--ox-space-2);
  font-size: var(--ox-text-xs);
  font-weight: var(--ox-weight-semibold);
  letter-spacing: var(--ox-tracking-label);
  text-transform: uppercase;
  color: var(--ox-fg-faint);
}
.ox-calc__hist { display: flex; flex-direction: column; gap: 2px; }
.ox-calc__hist button {
  display: flex;
  justify-content: space-between;
  gap: var(--ox-space-2);
  padding: 6px 8px;
  border: 0;
  border-radius: var(--ox-radius-sm);
  background: transparent;
  font-family: var(--ox-font-mono);
  font-size: var(--ox-text-sm);
  color: var(--ox-fg-muted);
  cursor: pointer;
  text-align: left;
}
.ox-calc__hist button:hover { background: var(--ox-surface-2); }
.ox-calc__hist b { color: var(--ox-fg); font-weight: var(--ox-weight-medium); }
.ox-qt__empty { font-size: var(--ox-text-sm); color: var(--ox-fg-faint); }

/* --- Ortak araç parçaları --- */
.ox-qt__row { display: flex; gap: var(--ox-space-2); align-items: center; }
.ox-qt__row .ox-input, .ox-qt__row .ox-select { flex: 1; min-width: 0; }

.ox-qt__out {
  flex: 1;
  min-height: var(--ox-control-h-md);
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--ox-border);
  border-radius: var(--ox-radius-md);
  background: var(--ox-surface-2);
  font-family: var(--ox-font-mono);
  cursor: pointer;
}

.ox-qt__chip {
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--ox-border);
  border-radius: var(--ox-radius-full);
  background: var(--ox-surface);
  font-family: var(--ox-font-sans);
  font-size: var(--ox-text-xs);
  color: var(--ox-fg-muted);
  cursor: pointer;
}
.ox-qt__chip:hover { border-color: var(--ox-accent); color: var(--ox-accent); }

.ox-qt__mini {
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: var(--ox-radius-sm);
  color: var(--ox-fg-faint);
  cursor: pointer;
}
.ox-qt__mini:hover { background: var(--ox-surface-2); color: var(--ox-fg); }
.ox-qt__mini.is-on { color: var(--ox-accent); }

/* Kronometre */
.ox-qt__clock {
  font-family: var(--ox-font-mono);
  font-size: var(--ox-text-3xl);
  font-weight: var(--ox-weight-semibold);
  text-align: center;
  padding: var(--ox-space-4) 0;
}
.ox-qt__lap {
  display: flex;
  justify-content: space-between;
  gap: var(--ox-space-2);
  padding: 4px 6px;
  font-family: var(--ox-font-mono);
  font-size: var(--ox-text-sm);
  color: var(--ox-fg-muted);
  border-bottom: 1px dashed var(--ox-border);
}
.ox-qt__lap b { color: var(--ox-fg); font-weight: var(--ox-weight-medium); }

/* Notlar */
.ox-qt__note {
  padding: var(--ox-space-3);
  border: 1px solid var(--ox-border);
  border-radius: var(--ox-radius-md);
  background: var(--ox-surface);
}
.ox-qt__note b { font-size: var(--ox-text-sm); }
.ox-qt__note p {
  margin: 4px 0;
  font-size: var(--ox-text-sm);
  color: var(--ox-fg-muted);
  white-space: pre-wrap;
  word-break: break-word;
}
.ox-qt__note small { color: var(--ox-fg-faint); font-size: var(--ox-text-xs); }

/* Dünya saatleri */
.ox-qt__wrow {
  display: flex;
  align-items: center;
  gap: var(--ox-space-2);
  padding: var(--ox-space-2) var(--ox-space-3);
  border: 1px solid var(--ox-border);
  border-radius: var(--ox-radius-md);
}
.ox-qt__wmeta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ox-qt__wmeta b { font-size: var(--ox-text-sm); font-weight: var(--ox-weight-medium); }
.ox-qt__wmeta small { font-size: var(--ox-text-xs); color: var(--ox-fg-faint); }
.ox-qt__wtime { font-family: var(--ox-font-mono); font-size: var(--ox-text-md); }

/* Renk aracı */
.ox-qt__cprev {
  position: relative;
  width: 84px;
  border: 1px solid var(--ox-border);
  border-radius: var(--ox-radius-md);
  cursor: pointer;
  overflow: hidden;
}
.ox-qt__cprev input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ox-qt__cline {
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: 1px solid var(--ox-border);
  border-radius: var(--ox-radius-sm);
  background: var(--ox-surface);
  font-family: var(--ox-font-mono);
  font-size: var(--ox-text-sm);
  color: var(--ox-fg);
  cursor: pointer;
}
.ox-qt__cline:hover { background: var(--ox-surface-2); }
.ox-qt__swdel {
  position: absolute;
  top: -4px; right: -4px;
  display: grid; place-items: center;
  width: 15px; height: 15px;
  border-radius: var(--ox-radius-full);
  background: var(--ox-danger);
  color: #fff;
  opacity: 0;
}
.ox-tp__swatch:hover .ox-qt__swdel { opacity: 1; }

/* Kronometre geçmiş satırları (calc geçmişiyle aynı iskelet) */
.ox-calc__hist [data-noop] { cursor: default; }

/* --- Yapışkan notlar (panel üstü, modal altı katman) --- */
.ox-sticky-layer {
  position: fixed;
  inset: 0;
  z-index: calc(var(--ox-z-drawer) + 5); /* drawer üstü, modal altı */
  pointer-events: none; /* katman uygulamayı kilitlemez */
}
.ox-sticky {
  position: absolute;
  width: 240px;
  min-width: 180px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  background: var(--ox-warning-subtle, #fbf0dd);
  border: 1px solid var(--ox-warning);
  border-radius: var(--ox-radius-md);
  box-shadow: var(--ox-shadow-lg);
  pointer-events: auto;
  resize: both;
  overflow: hidden;
}
.ox-sticky__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--ox-warning) 35%, transparent);
  cursor: grab;
  color: var(--ox-warning);
  flex-shrink: 0;
  touch-action: none;
}
.ox-sticky__head:active { cursor: grabbing; }
.ox-sticky__title {
  flex: 1;
  min-width: 0;
  font-size: var(--ox-text-sm);
  font-weight: var(--ox-weight-semibold);
  color: var(--ox-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ox-sticky__body {
  flex: 1;
  border: 0;
  outline: none;
  resize: none;
  padding: var(--ox-space-2) var(--ox-space-3);
  background: transparent;
  font-family: var(--ox-font-sans);
  font-size: var(--ox-text-sm);
  color: var(--ox-fg);
}
.ox-sticky.is-min { height: auto !important; min-height: 0; resize: none; }
.ox-sticky.is-min .ox-sticky__body { display: none; }

/* --- Takvim dock'u (alt) --- */
.ox-qt__dock {
  border-top: 1px solid var(--ox-border);
  padding: var(--ox-space-3) var(--ox-space-4);
  flex-shrink: 0;
}
.ox-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ox-space-2);
  font-size: var(--ox-text-sm);
  font-weight: var(--ox-weight-semibold);
}
.ox-cal__nav {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border: 0; border-radius: var(--ox-radius-sm);
  background: transparent; color: var(--ox-fg-muted); cursor: pointer;
}
.ox-cal__nav:hover { background: var(--ox-surface-2); color: var(--ox-fg); }
.ox-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
  font-size: var(--ox-text-xs);
}
.ox-cal__dow { color: var(--ox-fg-faint); padding: 2px 0; font-weight: var(--ox-weight-semibold); }
.ox-cal__day { padding: 4px 0; border-radius: var(--ox-radius-sm); color: var(--ox-fg-muted); }
.ox-cal__day--out { opacity: 0.35; }
.ox-cal__day--today {
  outline: 2px solid var(--ox-primary);
  outline-offset: -2px;
  color: var(--ox-fg);
  font-weight: var(--ox-weight-semibold);
}
.ox-cal__day { position: relative; border: 0; background: transparent; cursor: pointer; font-family: var(--ox-font-sans); font-size: var(--ox-text-xs); }
.ox-cal__day:hover { outline: 1px solid var(--ox-border-strong); outline-offset: -1px; }
.ox-cal__dow.is-we, .ox-cal__day.is-we { color: var(--ox-danger); }
.ox-cal__slots {
  position: absolute;
  left: 4px; right: 4px; bottom: 2px;
  display: flex; gap: 1px; height: 3px;
}
.ox-cal__slots i { flex: 1; border-radius: 1px; }

/* Vardiya çipleri */
.ox-cal__shifts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--ox-space-2); }
.ox-cal__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--ox-border);
  border-radius: var(--ox-radius-full);
  background: var(--ox-surface);
  font-family: var(--ox-font-sans);
  font-size: var(--ox-text-xs);
  color: var(--ox-fg-muted);
  cursor: pointer;
}
.ox-cal__chip i { width: 9px; height: 9px; border-radius: var(--ox-radius-full); background: var(--shift-c, var(--ox-border)); }
.ox-cal__chip.is-active { border-color: var(--shift-c); color: var(--ox-fg); box-shadow: 0 0 0 1px var(--shift-c); }
.ox-cal__chip--add { border-style: dashed; }
.ox-cal__seqbox {
  display: flex; flex-wrap: wrap; gap: 4px;
  min-height: 34px;
  padding: 5px;
  border: 1px dashed var(--ox-border);
  border-radius: var(--ox-radius-md);
  margin-bottom: var(--ox-space-2);
}

/* Üst bar ek düğmeleri */
.ox-cal__we { font-size: 10px; font-family: var(--ox-font-mono); width: auto; padding: 0 6px; }
.ox-cal__nav.is-on { color: var(--ox-accent); }
.ox-cal__title { border: 0; background: transparent; cursor: pointer; font: inherit; font-weight: var(--ox-weight-semibold); color: var(--ox-fg); }
.ox-cal__title:hover { color: var(--ox-accent); }

/* Katlanmış dock: yalnız başlık satırı kalır */
.ox-qt__dock.is-collapsed .ox-cal__body { display: none; }