/* Tekir app.css — the app's own additions to the Design System stylesheets.

   Load order in base.html: tokens.css → wire.css → web.css → this file. tokens / wire / web are
   copies of the canvas files and are never edited here (Decision 215); everything the canvas could
   not express because it is a static prototype — real form controls, buttons, <dialog> sheets,
   Django messages — lives in this file. Geometry and colours still come from the tokens. */

/* ---------- document ---------- */
/* The wireframe is light-only and the shell paints its own surface, so the document is pinned to it. */
html { background: var(--surface); color-scheme: light; }
html, body { margin: 0; padding: 0; }
/* Links: the boards wrap every tappable element in an unstyled a.go; stray links in new templates
   inherit the text colour instead of turning blue. */
.web a { color: inherit; text-decoration: none; }

/* ---------- top bar ---------- */
/* The avatar link is the only thing after the title; web.css gives the title flex:1 so it sits right. */
.topbar a.avatar-link { display: flex; flex: none; }
.topbar .act .btn { height: 32px; }

/* ---------- Django messages as the design's info box (SmallParts .notice) ---------- */
.notices { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.notices .notice { color: var(--ink); }

/* ---------- form controls as the FormField box (Decision 200: native widgets) ---------- */
/* wire.css draws the box as a div (.field .in). The same geometry on the real controls: 44 px, 1 px
   line, radius 8, 12 px inset, 15 px text. Date / time inputs keep their native appearance so the OS
   picker still opens; text-like inputs and selects drop the platform chrome. */
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
.field select,
.field textarea {
  display: block; width: 100%; box-sizing: border-box; height: 44px; margin: 0;
  border: 1px solid var(--line); border-radius: 8px; padding: 0 12px;
  font: inherit; font-size: 15px; line-height: 1.3; color: var(--ink); background: var(--surface);
}
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="date"]):not([type="time"]):not([type="datetime-local"]),
.field select { -webkit-appearance: none; appearance: none; }
/* Select keeps the › of the drawn box (wire.css .field .in .chev), as a background glyph in mid. */
.field select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%239a9a9a' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
/* Multi-line box: the drawn height (min 88), text scrolls inside instead of growing over the field
   below (designer rule, Kodlama_Rehberi § 4). */
.field textarea { height: 88px; min-height: 88px; padding: 10px 12px; resize: vertical; }
.field ::placeholder { color: var(--mid); opacity: 1; }
/* Focus = the open-box look of the Dropdown rule (1.5 px ink) without a layout shift. */
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 0.5px var(--ink);
}
.field input[type="file"] { font: inherit; font-size: 13px; color: var(--ink); }
/* Checkbox / radio inside a field: a plain choice row until the screen tasks draw the CSS-only
   segments and pills (Decision 200). */
.field .choice { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; }
.field .choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
/* Django's password-validator help arrives as a <ul>; keep it a plain hint list. */
.field .hint ul { margin: 0; padding-left: 14px; }
/* Field error (W96): "Bu alan gerekli" under the box, text not colour (W5). */
.field .err { font-size: 11px; color: var(--ink); font-weight: 600; }
.field .err + .err { margin-top: 2px; }
/* Non-field errors read like the info box. */
.form .nonfield { margin: 0 0 12px; }

/* ---------- form page (W44 form template) ---------- */
/* On the phone the form bar sits where the tab bar would be, even when the fields do not fill the
   screen: the content column stretches and the bar takes the free space above it. web.css already
   pins it with position:sticky once the page scrolls; from 768 up the bar is a right-aligned Kaydet
   under the fields (web.css), so this is phone-only. */
@media (max-width: 767.98px) {
  .content:has(.formbar) { display: flex; flex-direction: column; }
  .content:has(.formbar) > .body,
  .content:has(.formbar) form.form { flex: 1 1 auto; display: flex; flex-direction: column; }
  .content .formbar { margin-top: auto; }
  .form > :has(+ .formbar) { margin-bottom: 16px; }
}

/* ---------- buttons ---------- */
/* wire.css styles .btn for divs and anchors; a real <button> needs the UA chrome taken off. */
button.btn { font: inherit; font-size: 12px; background: var(--surface); color: var(--ink); cursor: pointer; }
button.btn.primary { background: var(--ink); color: #fff; }
.btn { cursor: pointer; }
.btn:disabled { opacity: 0.5; cursor: default; }
/* A link styled as a wide button keeps the DS centring (a.btn.wide is display:flex in wire.css). */

/* ---------- sheet as <dialog> (Decision 215) ---------- */
/* wire.css positions .sheet inside the 390 px frame; in the app the sheet is a modal <dialog> in the
   top layer, so it sits on the viewport and the UA backdrop is the 30 % ink scrim (wire.css .scrim).
   From 768 up web.css turns the same .sheet into a centred 440 px window. */
dialog.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-width: none; max-height: 90vh;
  margin: 0; border: 0; box-sizing: border-box; color: var(--ink); font: inherit; overflow: auto;
}
dialog.sheet:not([open]) { display: none; }
dialog.sheet::backdrop { background: var(--ink); opacity: 0.3; }
/* Sheet options and the cancel row are buttons or links; both read as rows. */
.sheet button.opt, .sheet a.opt { width: 100%; background: none; border: 0; border-top: 1px solid var(--box2); padding: 0; font: inherit; text-align: left; cursor: pointer; }
.sheet .opt:first-of-type { border-top: 0; }
/* The board's in-place options (Yapıldı / Geri al, Decision 202) are a <button>
   inside a <form> so they still post without JavaScript; the form must not add
   height around the 48 px option row. */
.sheet form.opt-form { margin: 0; }
.sheet form.opt-form + .opt, .sheet form.opt-form + form.opt-form button.opt { border-top: 1px solid var(--box2); }
/* Read-only sheet: the completion photo as a tappable 96 px thumbnail (its URL
   is data, so the background-image is set inline on the element). */
.sheet a.pic { display: block; background-size: cover; background-position: center; }

/* ---------- photo-proof box as a label (w45, Decision 200) ---------- */
/* wire.css draws .photobox.big as the dashed drop zone; a <label for> turns it
   into the trigger for the native file input kept just below it. */
.field label.photobox { cursor: pointer; }
.field label.photobox + input[type="file"] { margin-top: 8px; }

/* ---------- FAB as a link ---------- */
/* web.css fixes .fab to the viewport; a.fab keeps the white label (wire.css .go.fab rule). */
a.fab { color: #fff; display: flex; }

/* ---------- home-management tabs (task 8.11) ---------- */
/* Settings toggle (W38): the native checkbox IS the .tg switch — appearance:none turns it into a
   plain box so its ::after can be the knob, mirroring wire.css .tg / .tg.on (Decision 200 / 216). */
.toggle { cursor: pointer; }
.toggle input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0; cursor: pointer;
  width: 44px; height: 24px; border-radius: 12px; border: 1.5px solid var(--ink);
  background: var(--surface); position: relative;
}
.toggle input[type="checkbox"]::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px;
  border-radius: 50%; background: var(--ink);
}
.toggle input[type="checkbox"]:checked { background: var(--ink); }
.toggle input[type="checkbox"]:checked::after { left: auto; right: 3px; background: #fff; }
.toggle input[type="checkbox"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Kişi sayfası (w15, task 8.12): the permission block is a form around the h2, the list and the
   hint; the form adds no spacing of its own. A form used as the .btnrow (w18 "Yeni bağlantı
   oluştur") keeps the row's right-aligned button. The read-only link field (w18) is the same
   44 px box as any field input (.field input above). */
#person-permissions form { margin: 0; }
form.btnrow { margin: 0 0 12px; }

/* ---------- HTMX ---------- */
/* A row being swapped should not jump; HTMX adds this class during the request. */
.htmx-request { opacity: 0.6; }

/* ---- task 8.17: the note's active / passive switch (w25, W108) ---- */
/* wire.css draws .tg as a div; here it is a <button> inside a form at the entry's end. Only the
   switch is the touch target (the entry text opens nothing); it sits level with the entry's top. */
.entry form.tgf { margin: 0; flex: none; align-self: flex-start; }
.entry button.tg { appearance: none; -webkit-appearance: none; display: block; padding: 0; margin: 0; background: var(--surface); cursor: pointer; }
.entry button.tg.on { background: var(--ink); }
.entry button.tg:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* ---- end task 8.17 ---- */

/* ---------- Task row box as a control (task 8.8, Decision 202) ---------- */
/* wire.css draws the 24 px box as a div (.row .cb). The same box on the real controls: the one-click
   box is a <button> in a <form>, the photo box (W6) a link. `.done .row .cb` (wire.css) still fills it. */
.row form.cbf { display: flex; margin: 0; }
.row button.cb { appearance: none; padding: 0; margin: 0; background: transparent; cursor: pointer; font: inherit; }
.row a.cb { display: block; }
/* The box is 24 px; a finger needs 44 (W15): the hit area grows without moving the box. */
.row .cb { position: relative; }
.row button.cb::before, .row a.cb::before { content: ""; position: absolute; inset: -10px; }
/* An Evlerim card is a link around a flex:none card; keep it from shrinking in the scroller. */
.hscroll > a.go { flex: none; }

/* ---------- Pet profile tabs (task 8.13) ---------- */
/* Özet (w22) puts a band after each section of its column; the last one would trail the page. */
.two > div > .band:last-child { display: none; }
/* Sağlık (w24) "Geçmiş durumlar n ›": a <details> whose summary reads as the W25 link row. */
details.fold > summary { list-style: none; cursor: pointer; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold[open] > summary .chev { transform: rotate(90deg); }
/* Görevler care history: a completion's photo as a 56 px thumbnail under its line (PRD story 37). */
.sitem .thumb { display: block; width: 56px; height: 56px; border-radius: 8px; object-fit: cover; margin-top: 8px; }

/* ---------- sitting pages (task 8.15) ---------- */
/* The round select mark (.mark, wire.css) as real controls: the w40 day mark is a <button> in a
   <form> (take / release a day in place, Decision 202), the w38 sitter checklist a native checkbox
   inside a <label class="sitem">. Both keep the drawn 24 px ring; the hit area grows to 44 (W15). */
.prow form.markf { display: flex; margin: 0; flex: none; }
.prow button.mark { appearance: none; -webkit-appearance: none; padding: 0; margin: 0; background: transparent; cursor: pointer; position: relative; }
.prow button.mark.on { background: var(--ink); }
.prow button.mark::before { content: ""; position: absolute; inset: -10px; }
label.sitem { cursor: pointer; }
input[type="checkbox"].mark { appearance: none; -webkit-appearance: none; margin: 0; background: transparent; cursor: pointer; }
input[type="checkbox"].mark:checked { background: var(--ink); }
input[type="checkbox"].mark:focus-visible, .prow button.mark:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* The floating "Katıl" posts, so it is a <button class="fab"> in a form. */
button.fab { border: 0; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
/* "Ara" in the Acil list is a tel: link drawn as the small button. */
.sitem > a.btn { flex: none; }

/* ---------- schedule block (task 8.19, includes/_schedule_block.html; W71, W105) ---------- */
/* wire.css draws the segment cells and the day pills as <span>s; here each one is a <label> around a
   real radio / checkbox that is visually hidden but stays focusable, and the chosen state is the
   input's :checked (the drawn .on look). CSS-only, as Decision 200 asks. */
.schedule [hidden] { display: none !important; }
.segc label, .picks label { position: relative; display: flex; flex: 1; margin: 0; min-width: 0; cursor: pointer; color: var(--ink); }
.segc input, .picks input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
.segc label span, .picks label span { flex: 1; text-align: center; min-width: 0; }
.segc label + label span { border-left: 1.5px solid var(--ink); }
.segc label:first-child span { border-left: 0; }
.segc input:checked + span { background: var(--ink); color: #fff; font-weight: 600; }
.picks input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }
.segc input:focus-visible + span, .picks input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
/* The pills sit directly under the segment (wire.css .segc + .picks) — here one wrapper apart. */
[data-rule] .picks { margin-top: 0; }
/* "+ Saat ekle" is a button drawn as the dashed .in.add box. */
button.in.add { width: 100%; background: none; font: inherit; font-size: 15px; cursor: pointer; }

/* ---------- pet photo picker (w13) ---------- */
/* wire.css .photo-pick draws the round; the round and the caption are <label>s of the native file
   input kept just below (as the w45 photo box), so the picker works without JavaScript. */
.photo-pick label.ph { cursor: pointer; background-size: cover; background-position: center; display: block; }
.photo-pick label.cap { cursor: pointer; text-decoration: underline; }
.photo-pick input[type="file"] { font: inherit; font-size: 13px; max-width: 100%; }
.photo-pick .choice { display: flex; align-items: center; gap: 8px; font-size: 13px; }

/* ---------- supply status sheet as a page (task 8.18) ---------- */
/* The no-JavaScript fallback of the w52 sheet draws the same rows without the overlay: the .sheet
   box turns into plain content (web.css positions .sheet as a window from 768 up, so the selector
   is as specific as that rule). The option rows keep the .sheet .opt rules above. */
.sheet.inline, .web .sheet.inline {
  position: static; transform: none; width: auto; padding: 0; border-radius: 0; box-shadow: none; z-index: auto;
}
.sheet.inline .p { margin-bottom: 16px; }
.sheet.inline a.opt.cancel { margin-top: 8px; }

/* ---------- health forms and condition timeline (task 8.16) ---------- */
/* The radio segment itself (.segc, W69) is the one from the schedule block above; the health forms
   (w27 Şiddet 1–5, w32 Alerji Şiddet, the entry's trend) draw it through includes/_radio_segment.html. */
/* The report photo on a timeline entry is a real image (wire.css draws .thumb as a grey box). */
.entry a.thumb-link { display: block; width: 56px; margin-top: 8px; }
.entry img.thumb { display: block; object-fit: cover; margin-top: 0; }
/* The small optional photo box (w27, W69) as a label, like the big one above. */
.field label.photobox.small { cursor: pointer; }

/* ---------- Ayarlar (w50, task 8.20) ---------- */
/* A preference row is a <form class="sitem pref">: the title on the left, the native select as the
   field box on the right (Decision 200). The box keeps the 44 px field geometry; the row grows to it. */
.sitem.pref .side { flex: 0 1 220px; max-width: 55%; align-items: stretch; font-size: inherit; color: inherit; }
.sitem.pref .field { margin: 0; }
.sitem.pref label.l1 { cursor: pointer; }
.sitem.pref noscript { flex: none; }
/* The Bildirimler switch is a <button class="tg"> at the row's end, as the note switch (8.17). */
form.sitem { margin: 0; }
.sitem button.tg { appearance: none; -webkit-appearance: none; display: block; padding: 0; margin: 0; background: var(--surface); cursor: pointer; }
.sitem button.tg.on { background: var(--ink); }
.sitem button.tg:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* The in-place saved / verification notice sits between the heading and the rows. */
#settings-account .notice { margin-bottom: 8px; }