/* Shell additions for the server-rendered UI: htmx busy states, native dialogs. */

/* Author display rules must never defeat the hidden attribute. */
[hidden]{display:none!important}

/* Busy labels: <span class="when-idle">Save</span><span class="when-busy">Saving…</span>.
   htmx adds .htmx-request to the requesting element (or hx-indicator target). */
.when-busy{display:none}
/* Only the requesting control (or a form's submit button) switches labels, so a
   region refresh never flips every button inside it. */
button.htmx-request .when-idle,form.htmx-request [type=submit] .when-idle,.htmx-request>.when-idle,.htmx-request.when-idle{display:none}
button.htmx-request .when-busy,form.htmx-request [type=submit] .when-busy,.htmx-request>.when-busy,.htmx-request.when-busy{display:inline}
.htmx-indicator{opacity:0;transition:opacity .2s}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{opacity:1}

/* Native <dialog> takes the existing .dialog look; ::backdrop replaces .modal-backdrop. */
dialog.dialog{margin:0;color:var(--text)}
dialog.dialog:not([open]){display:none}
dialog.dialog::backdrop{background:rgba(5,9,7,.72);backdrop-filter:blur(2px)}

/* Confirmation dialog (was ConfirmDialog.svelte). */
.confirm-dialog{z-index:51}
.confirm-body{margin:0 0 14px;font-size:.84rem;color:var(--text-2)}
.confirm-details{display:grid;grid-template-columns:minmax(70px,auto) 1fr;gap:8px 14px;margin:0 0 14px;padding:12px 14px;font-size:.8rem;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--radius-sm);overflow-wrap:anywhere}
.confirm-details dt{color:var(--faint)}
.confirm-details dd{margin:0;color:var(--text);min-width:0}
.confirm-details dd.mono{font-family:var(--code);font-size:.76rem}
.confirm-notes{margin:0;padding-left:1.1rem;color:var(--muted);font-size:.78rem;line-height:1.55}
.confirm-notes li+li{margin-top:4px}
.primary.danger{background:var(--danger);color:var(--accent-ink)}
@media (max-width:520px){
  .confirm-details{grid-template-columns:1fr;gap:2px}
  .confirm-details dd+dt{margin-top:8px}
  .confirm-dialog .dialog-actions{flex-direction:column-reverse}
  .confirm-dialog .dialog-actions button{width:100%;min-height:44px}
}

/* Refresh button (was RefreshButton.svelte): spinning icon while the request runs. */
.refresh{position:relative;display:inline-flex;align-items:center}
.refresh-button{display:inline-flex;align-items:center;gap:8px}
.refresh-icon{width:15px;height:15px;flex:none}
.refresh-button.htmx-request .refresh-icon{animation:refresh-spin .8s linear infinite}
@keyframes refresh-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.refresh-button.htmx-request .refresh-icon{animation:none}}

/* Percent slider (was PercentSlider.svelte). */
.percentage-field{min-width:0;margin-bottom:16px}
.percentage-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.percentage-heading label{margin:0}
.percentage-field output{color:var(--accent);font-family:var(--mono);font-size:.85rem;font-variant-numeric:tabular-nums;flex-shrink:0}
.percentage-field input[type="range"],.dialog .percentage-field input[type="range"]{appearance:none;width:100%;height:36px;padding:0;margin:0;border:0;border-radius:6px;background:transparent;cursor:pointer;accent-color:var(--accent);box-shadow:none}
.percentage-field input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(to right,var(--accent) var(--progress),var(--faint) var(--progress))}
.percentage-field input[type="range"]::-webkit-slider-thumb{appearance:none;width:20px;height:20px;margin-top:-7px;border-radius:50%;background:var(--accent);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--accent)}
.percentage-field input[type="range"]::-moz-range-track{height:6px;border-radius:6px;background:var(--faint)}
.percentage-field input[type="range"]::-moz-range-progress{height:6px;border-radius:6px;background:var(--accent)}
.percentage-field input[type="range"]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--accent)}
.percentage-scale{display:flex;justify-content:space-between;color:var(--faint);font-family:var(--mono);font-size:.65rem}

/* Collapsible sidebar: an icon rail on desktop, remembered in the snf_nav cookie. */
.nav-collapse{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:36px;margin-top:8px;padding:0 12px;border:0;border-radius:8px;background:none;color:var(--faint);font-size:.8rem;text-align:left}
.nav-collapse:hover{background:var(--surface);color:var(--text)}
.nav-collapse svg{width:18px;height:18px;flex:none}
.nav-collapse-chevron{transform-box:fill-box;transform-origin:center;transition:transform .2s}
@media(max-width:820px){.nav-collapse{display:none}}
@media(min-width:821px){
  .app-shell{transition:grid-template-columns .2s ease}
  .app-shell.nav-collapsed{--side-w:68px}
  .nav-collapsed .sidebar{padding:22px 10px}
  .nav-collapsed .side-top{display:flex;justify-content:center;padding:0 0 22px}
  .nav-collapsed .brand>span,.nav-collapsed .nav-count,.nav-collapsed .side-farm,.nav-collapsed .side-health,.nav-collapsed .side-bottom{display:none}
  .nav-collapsed .sidebar nav a,.nav-collapsed .nav-collapse{position:relative;justify-content:center;gap:0;padding:0}
  .nav-collapsed .sidebar nav a:hover:not(.active){transform:none}
  .nav-collapsed .sidebar nav .nav-group{display:block;height:0;margin:12px 8px;padding:0;overflow:hidden;font-size:0;border-top:1px solid var(--line-soft)}
  .nav-collapsed .nav-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav-collapsed .nav-collapse-chevron{transform:rotate(180deg)}
  /* Labels return as tooltips beside the rail. */
  .nav-collapsed .sidebar nav a:is(:hover,:focus-visible)::after,.nav-collapsed .nav-collapse:is(:hover,:focus-visible)::after{content:attr(data-label);position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);z-index:10;padding:5px 9px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface-3);color:var(--text);font-size:.75rem;white-space:nowrap;pointer-events:none}
}
@media(prefers-reduced-motion:reduce){.app-shell,.nav-collapse-chevron{transition:none}}