/* Nick menüsü: popover (masaüstü) / alttan sheet (mobil). Renkler ortak jetonlardan gelir. */
.nm-layer { position: fixed; inset: 0; z-index: 250; }
.nm-backdrop { position: absolute; inset: 0; background: rgba(2, 6, 23, .4); opacity: 0; transition: opacity .18s; }
.nm-layer.in .nm-backdrop { opacity: 1; }
.nm-card { position: absolute; width: min(360px, calc(100vw - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; background: var(--surface); color: var(--text); border-radius: 18px; box-shadow: var(--shadow), 0 0 0 1px var(--line-strong); opacity: 0; transform: translateY(6px) scale(.98); transition: opacity .16s, transform .16s; }
.nm-layer.in .nm-card { opacity: 1; transform: none; }
.nm-grab { display: none; }
.nm-head { display: flex; gap: 12px; align-items: center; padding: 16px 46px 12px 16px; position: relative; }
.nm-id { min-width: 0; flex: 1; display: grid; gap: 3px; }
.nm-name-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nm-name { margin: 0; font-size: 1.12rem; font-weight: 800; overflow-wrap: anywhere; }
.nm-meta { display: flex; gap: 10px; font-size: .78rem; color: var(--dim); }
.nm-meta .chips { color: var(--accent); font-weight: 700; }
.nm-status { font-size: .76rem; font-weight: 600; color: var(--ok); }
.nm-status.table { color: var(--info); } .nm-status.warn { color: var(--warn); } .nm-status.bad { color: var(--danger); }
.nm-close { position: absolute; top: 10px; right: 10px; }
.nm-notice { margin: 0 16px 10px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--info) 12%, transparent); color: var(--info); font-size: .78rem; text-align: center; }
.nm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 16px 12px; }
.nm-stats div { background: var(--surface-2); border-radius: 12px; padding: 8px 4px; text-align: center; }
.nm-stats b { display: block; font-size: 1.02rem; } .nm-stats small { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); font-weight: 700; }
.nm-body { padding: 0 12px 14px; display: grid; gap: 8px; }
.nm-primary { display: flex; gap: 8px; } .nm-primary .nm-act { flex: 1; justify-content: center; }
.nm-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.nm-grid .nm-act { flex: 1 1 28%; width: auto; min-width: 0; flex-direction: column; gap: 3px; padding: 9px 4px; font-size: .72rem; text-align: center; }
.nm-grid[data-cols="1"] .nm-act { flex-basis: 100%; flex-direction: row; justify-content: center; gap: 8px; }
.nm-grid[data-cols="2"] .nm-act { flex-basis: 45%; }
.nm-grid[data-cols="4"] .nm-act { flex-basis: 22%; }
.nm-safety { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.nm-safety .nm-act { justify-content: center; }
.nm-act { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px; background: var(--surface-2); font-size: .82rem; font-weight: 650; }
.nm-act:hover { background: var(--hover); } .nm-act:active { transform: scale(.98); }
.nm-act.primary { background: var(--accent); color: var(--accent-ink); font-weight: 800; } .nm-act.primary:hover { background: var(--accent); filter: brightness(1.08); }
.nm-act.danger { color: var(--danger); } .nm-safety .nm-act.danger { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.nm-act:disabled { opacity: .45; cursor: not-allowed; }
.nm-mods { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.nm-group { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.nm-group summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; list-style: none; font-size: .8rem; }
.nm-group summary::-webkit-details-marker { display: none; }
.nm-group summary b { flex: 1; font-weight: 750; }
.nm-group summary i { font-style: normal; color: var(--dim); transition: transform .15s; } .nm-group[open] summary i { transform: rotate(180deg); }
.nm-group-body { padding: 0 8px 8px; display: grid; gap: 4px; }
.nm-row { background: transparent; padding: 8px 10px; } .nm-row.open { background: var(--hover); }
.nm-form { display: grid; gap: 8px; padding: 8px 4px 4px; }
.nm-confirm { margin: 0; font-size: .78rem; color: var(--dim); }
.nm-check { display: flex; gap: 8px; align-items: center; font-size: .78rem; color: var(--dim); }
.nm-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.nm-pill { flex: 1; min-width: 56px; padding: 7px 8px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--dim); font-weight: 700; font-size: .76rem; }
.nm-pill.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.nm-form-row { display: flex; gap: 8px; }
.nm-form-row .btn { flex: 1; height: 38px; }
.nm-body { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
.nm-toast { position: sticky; bottom: 8px; margin: 0 12px 10px; padding: 9px 12px; border-radius: 10px; background: var(--ok); color: #052e22; font-size: .8rem; font-weight: 700; text-align: center; }
.nm-toast.bad { background: var(--danger); color: #fff; }
.nm-staff-row { display: grid; grid-template-columns: minmax(80px, 1fr) minmax(120px, 1.4fr); gap: 8px; align-items: center; font-size: .78rem; color: var(--dim); }
.ico { font-size: 1.05rem; line-height: 1; width: 1.3em; text-align: center; }

@media (max-width: 640px) {
  .nm-card { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: 100%; max-height: 88vh; max-height: 88dvh; border-radius: 22px 22px 0 0; transform: translateY(24px); padding-bottom: env(safe-area-inset-bottom); }
  .nm-layer.in .nm-card { transform: none; }
  .nm-grab { display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--line-strong); margin: 8px auto 0; }
  .nm-act, .nm-pill, .nm-form .input, .nm-form-row .btn { min-height: 44px; }
}