/* rangordning.css: stil för rangordningen (rangordning.js), i sidans färger.
 * Färgregler: gult (#FFF9C4) bara på inmatningsfält (namnfältet), blått för notering, grönt för markering,
 * rött eller orange för varning, grått för låst.
 * UPPDATERING 2026-11-12: första versionen. Version 1.17.
 */
.rg-kolumner { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; margin: 1rem 0 0.6rem; align-items: start; }
.rg-kolumner--en { grid-template-columns: minmax(0, 560px); }
.rg-ruta { padding: 0.9rem 1rem 1rem; border: 1px solid var(--hair); border-radius: var(--rad); background: var(--bg); }
.rg-ruta--grupp { border-top: 6px solid var(--accent); }
.rg-ruta h3 { margin: 0 0 0.3rem; }
.rg-hint, .rg-meta { margin: 0.35rem 0; color: var(--muted); font-size: 0.92rem; }
.rg-status { min-height: 1.4em; margin: 0.8rem 0 0; color: var(--muted); font-weight: 600; font-size: 0.92rem; }
.rg-status--fel { color: var(--fel-ink); }
.rg-banner { margin: 0 0 0.8rem; padding: 0.55rem 0.8rem; border-left: 5px solid var(--notis-kant); background: var(--notis-bg); border-radius: 6px; font-size: 0.94rem; }
.rg-banner--varning { border-left-color: var(--bolag-ink); background: var(--bolag-bg); }
.rg-namnrad label { display: block; margin: 0.6rem 0 0.25rem; font-weight: 700; font-size: 0.92rem; }
.rg-namnrad input { width: 100%; max-width: 380px; padding: 0.5rem 0.65rem; border: 1px solid #8a8f78; border-radius: 4px; background: #FFF9C4; color: #1d2623; font: inherit; }
.rg-namnrad input:disabled { background: #ececec; }

.rg-lista { margin: 0.7rem 0 0; padding: 0; list-style: none; }
.rg-rad { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.4rem; padding: 0.35rem 0.5rem; border: 1px solid var(--hair); border-radius: 8px; background: var(--panel); transition: background 0.3s, border-color 0.3s; }
.rg-egen .rg-rad { cursor: grab; }
.rg-grepp { color: var(--muted); font-size: 1.1rem; line-height: 1; user-select: none; }
.rg-nr { flex: none; min-width: 1.7em; color: var(--accent-ink); font-weight: 700; text-align: right; }
.rg-titel { flex: 1 1 auto; font-size: 0.95rem; line-height: 1.3; position: relative; }
.rg-titel[tabindex] { cursor: help; }
.rg-titel[tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rg-medel { flex: none; color: var(--muted); font-size: 0.8rem; }
.rg-delta { flex: none; min-width: 3em; color: var(--accent-ink); font-weight: 700; font-size: 0.8rem; text-align: right; }
.rg-pil { flex: none; width: 40px; height: 40px; border: 1px solid var(--accent); border-radius: 8px; color: var(--accent-ink); background: var(--bg); font: inherit; font-weight: 700; font-size: 1.1rem; cursor: pointer; }
.rg-pil:hover:not(:disabled) { background: var(--ok-bg); }
.rg-pil:disabled { color: var(--muted); background: var(--ant-bg); border-color: var(--hair); cursor: not-allowed; }
.rg-pil:focus-visible, .rg-namnrad input:focus-visible, .rg-knapp:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.rg-drar { opacity: 0.45; }
.rg-over, .rg-rad--ny { border-color: var(--accent); background: var(--ok-bg); }
.rg-blink { animation: rg-blink 1.4s ease-out; }
@keyframes rg-blink { 0% { background: var(--ok-bg); border-color: var(--accent); } 100% { background: inherit; } }
.rg-knappar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.rg-knapp { font: inherit; font-size: 0.9rem; padding: 0.35rem 0.8rem; border-radius: 999px; border: 1px solid var(--accent); background: var(--bg); color: var(--accent-ink); cursor: pointer; }
.rg-knapp:hover:not(:disabled) { background: var(--ok-bg); }
.rg-knapp:disabled { color: var(--muted); border-color: var(--hair); cursor: not-allowed; }

/* tabellen */
table .rg-rangcell { color: var(--accent-ink); font-weight: 700; text-align: center; }
table tr.rg-tabellrad--ny td { background: var(--ok-bg); }
table.rg-dold-min .rg-efter-rost { display: none; }
.rg-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* hovringstext (visas vid hovring, fokus och tryck) */
.rg-tip { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: min(360px, 78vw); padding: 0.55rem 0.7rem; border-left: 3px solid var(--notis-kant); border-radius: 6px; background: var(--notis-bg); color: var(--ink); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); font-size: 0.84rem; line-height: 1.45; font-weight: 400; white-space: normal; cursor: default; }
.rg-titel:hover .rg-tip, .rg-titel:focus .rg-tip, .rg-titel:focus-within .rg-tip { display: block; }

/* diskret administratörsknapp */
.rg-adminrad { margin: 0.8rem 0 0; text-align: right; }
.rg-admin { padding: 2px 4px; border: 0; background: none; color: var(--muted); opacity: 0.6; font-size: 0.7rem; cursor: pointer; }
.rg-admin:hover, .rg-admin:focus-visible { opacity: 1; text-decoration: underline; }

@media (max-width: 820px) { .rg-kolumner { grid-template-columns: 1fr; } .rg-medel { display: none; } }
@media (prefers-reduced-motion: reduce) { .rg-blink { animation: none; } .rg-rad { transition: none; } }
@media print { .rg-tip, .rg-pil, .rg-knappar, .rg-adminrad { display: none !important; } table.rg-dold-min .rg-efter-rost { display: table-cell; } }