/* nitaimaarek global theme — https://profiles.nitaimaarek.com/theme.css
   Mirrors the files.nitaimaarek.com look: monospace, thin borders, transparent
   surfaces. Monochrome — the only "accent" is near-black (light) / near-white
   (dark). Checkboxes use the virtual.nitaimaarek.com square style. */
:root{
  color-scheme: light dark;
  --bg:#fff; --fg:#1a1a1a;
  --bd:#00000022; --bd-soft:#00000011; --bd-strong:#00000055;
  --muted:#888; --danger:#c33;
  --accent:#1a1a1a;          /* monochrome: hover/focus borders go solid black */
  --field:#fff;
  --row-hover:#00000008; --panel-bg:transparent; --code-bg:#00000008;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
:root[data-theme="light"]{ color-scheme: light; }
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#181818; --fg:#e8e8e8;
  --bd:#ffffff22; --bd-soft:#ffffff11; --bd-strong:#ffffff66;
  --muted:#888; --danger:#e07070;
  --accent:#e8e8e8;          /* near-white in the dark */
  --field:#202020;
  --row-hover:#ffffff0a; --code-bg:#ffffff0a;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#181818; --fg:#e8e8e8;
    --bd:#ffffff22; --bd-soft:#ffffff11; --bd-strong:#ffffff66;
    --muted:#888; --danger:#e07070;
    --accent:#e8e8e8;
    --field:#202020;
    --row-hover:#ffffff0a; --code-bg:#ffffff0a;
  }
}

*{ box-sizing:border-box; }
html,body{ background:var(--bg); color:var(--fg); }
body{
  font-family:var(--mono);
  max-width:1040px; margin:2rem auto; padding:0 1rem;
  line-height:1.45;
}
h1,h2,h3{ letter-spacing:.02em; }
h1{ font-size:1.1rem; margin:0 0 1rem; }
h2{ font-size:.95rem; font-weight:600; margin:0 0 .6rem; }
p{ margin:.5rem 0; }
a{ color:inherit; text-decoration:none; border-bottom:1px dotted transparent; }
a:hover{ border-bottom-color:var(--accent); }
.muted{ color:var(--muted); font-size:.8rem; font-weight:normal; }
.grow{ flex:1; }
hr{ border:0; border-top:1px solid var(--bd-soft); margin:1rem 0; }
code{ font-family:var(--mono); background:var(--code-bg); border-radius:6px; padding:.1em .35em; font-size:.9em; }
pre{ font-family:var(--mono); background:var(--code-bg); border-radius:6px; padding:.55rem .7rem; overflow:auto; white-space:pre-wrap; }

/* layout helpers */
.appbar{ display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; }
.appbar h1{ margin:0; }
.panel,.card{ border:1px solid var(--bd); border-radius:10px; padding:1rem 1.1rem; margin-bottom:1rem; background:var(--panel-bg); }
.panel>:first-child,.card>:first-child{ margin-top:0; }
.formrow{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.field{ display:flex; flex-direction:column; gap:.3rem; margin-bottom:.7rem; }
.field > label{ color:var(--muted); font-size:.8rem; }

/* inputs + buttons (files style) */
input,button,select,textarea{
  font:inherit; padding:.3rem .55rem;
  border:1px solid var(--bd); border-radius:6px;
  background:transparent; color:inherit;
}
textarea{ width:100%; }
input[type=text],input[type=url],input[type=email],input[type=search],input[type=password],input[type=date],input[type=file]{ min-width:0; }
input:focus,textarea:focus,select:focus{ outline:none; border-color:var(--accent); }
input::placeholder,textarea::placeholder{ color:var(--muted); }
/* native select + its option popup are platform-styled; force theme tokens so
   they don't render white inside a dark layout (and vice versa). The closed
   select itself uses --field for contrast against transparent panels; the
   options inherit the same so the popup matches. */
select{ background:var(--field); color:var(--fg); }
select option{ background:var(--field); color:var(--fg); }
button{ cursor:pointer; }
button:hover{ border-color:var(--accent); }
button:disabled{ opacity:.45; cursor:not-allowed; }
button.danger,.danger{ color:var(--danger); }
button.danger:hover{ border-color:var(--danger); }
.iconlink{
  background:transparent; border:1px solid var(--bd); border-radius:6px;
  padding:.15rem .55rem; color:inherit; text-decoration:none; font-size:.85rem;
  cursor:pointer; line-height:1.4; display:inline-block;
}
.iconlink:hover{ border-color:var(--accent); }
.iconlink.danger:hover{ border-color:var(--danger); }
.pickerbtn{ display:inline-block; border:1px solid var(--bd); border-radius:6px; padding:.3rem .7rem; cursor:pointer; }
.pickerbtn:hover{ border-color:var(--accent); }

/* Global breathing room: whenever two interactive controls sit directly next
   to each other (or a hidden-style <form> wraps one), give them a little gap
   so they don't visually collide. Named flex rows (.appbar / .formrow /
   .crumb / .modal-head) already manage their own spacing with `gap:` and zero
   this margin out so we don't double-space them. */
button + button, button + .iconlink, .iconlink + button, .iconlink + .iconlink,
button + form, form + button, .iconlink + form, form + .iconlink, form + form,
button + a, a + button, .iconlink + a, a + .iconlink,
button + input, input + button, .iconlink + input, input + .iconlink,
button + select, select + button, .iconlink + select, select + .iconlink{
  margin-left:.35rem;
}
.appbar > * + *, .formrow > * + *, .crumb > * + *, .modal-head > * + *{ margin-left:0; }
/* No custom ::selection — let the browser draw its native highlight so users
   get the OS / accessibility default instead of our monochrome accent. */

/* checkbox + radio — virtual.nitaimaarek.com square style, monochrome.
   Native inputs are restyled so any <input type=checkbox> just works. */
input[type=checkbox],input[type=radio]{
  -webkit-appearance:none; appearance:none; margin:0; padding:0;
  width:16px; height:16px; flex:0 0 auto; vertical-align:-3px;
  border:1px solid var(--bd-strong); background:var(--field);
  position:relative; cursor:pointer; transition:background .1s, border-color .1s;
}
input[type=checkbox]{ border-radius:0; }
input[type=radio]{ border-radius:50%; }
input[type=checkbox]::after{
  content:""; position:absolute; left:4px; top:1px; width:4px; height:8px;
  border:solid var(--bg); border-width:0 2px 2px 0; transform:rotate(45deg); opacity:0;
}
input[type=radio]::after{
  content:""; position:absolute; inset:3px; border-radius:50%; background:var(--bg); opacity:0;
}
input[type=checkbox]:hover,input[type=radio]:hover{ border-color:var(--accent); }
input[type=checkbox]:checked,input[type=radio]:checked{ background:var(--fg); border-color:var(--fg); }
input[type=checkbox]:checked::after,input[type=radio]:checked::after{ opacity:1; }
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{ outline:1px solid var(--accent); outline-offset:2px; }
/* label wrapper to put text beside the box */
.check{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none; font-size:13px; color:var(--muted); }

/* tables (files style) */
table{ width:100%; border-collapse:collapse; }
th,td{ text-align:left; padding:.45rem .5rem; border-bottom:1px solid var(--bd-soft); vertical-align:middle; }
th{ color:var(--muted); font-weight:500; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; }
.row{ transition:background .12s ease; }
.row:hover,tbody tr:hover{ background:var(--row-hover); }

/* breadcrumb */
.crumb{ display:flex; align-items:center; gap:.5rem; margin-bottom:1rem; flex-wrap:wrap; }
.crumb a{ border-bottom:0; padding:.15rem .35rem; border-radius:4px; }
.crumb a:hover{ background:var(--row-hover); }

/* modal (files style) */
.modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:1000; display:flex; align-items:center; justify-content:center; padding:2rem; }
.modal{ background:var(--bg); color:var(--fg); border:1px solid var(--bd); border-radius:12px; width:100%; max-width:1100px; max-height:90vh; display:flex; flex-direction:column; overflow:hidden; }
.modal-head{ display:flex; align-items:center; gap:.5rem; padding:.8rem 1rem; border-bottom:1px solid var(--bd-soft); }
.modal-head h3{ margin:0; font-size:1rem; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.modal-body{ flex:1; overflow:auto; padding:1rem; min-height:0; }