/* ==========================================================================
   Taha Auto admin: More → Notifications (js/notify.js)
   A grouped list of switches, like the phone's own Settings: each row is one
   44px+ target (the whole row toggles), the option under it shows while it's on.
   The sheet itself is the admin's .modal / .modal__box (swipe down, Back, Close).
   ========================================================================== */
.nfy__box { max-width: 520px; }
.nfy__lead, .nfy__foot { margin: 0; }
.nfy__group { border: 1px solid var(--line-2); border-radius: var(--r); background: var(--card); overflow: hidden; }
.nfy__row + .nfy__row { border-top: 1px solid var(--line); }
.nfy__main { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nfy__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); }
.nfy__ic svg { width: 20px; height: 20px; }
.nfy__txt { display: grid; gap: 3px; min-width: 0; justify-items: start; }
.nfy__txt b { font-size: 16px; font-weight: 650; line-height: 1.3; color: var(--text); }
.nfy__txt small { font-size: 13px; line-height: 1.4; color: var(--text-2); }
/* sound or silent: a word, never colour alone */
.nfy__tag { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.nfy__tag::before { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--nfy-glyph) center / contain no-repeat; mask: var(--nfy-glyph) center / contain no-repeat; }
.nfy__tag--sound { color: var(--accent-text); --nfy-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E"); }
.nfy__tag--silent { --nfy-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='m22 9-6 6M16 9l6 6'/%3E%3C/svg%3E"); }

/* the switch: a checkbox with role="switch" (Space toggles, the label row is the target) */
.nfy__sw { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 51px; height: 31px; margin: 0; border-radius: 999px; background: var(--line-2); border: 1px solid var(--line-3); cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
.nfy__sw::before { content: ""; position: absolute; top: 2px; left: 2px; width: 25px; height: 25px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .35); transition: transform .22s cubic-bezier(.23, 1, .32, 1); }
.nfy__sw:checked { background: var(--accent); border-color: var(--accent); }
.nfy__sw:checked::before { transform: translateX(20px); }
.nfy__sw:focus-visible { outline: 2px solid var(--accent-ui); outline-offset: 3px; }
.nfy__main:active .nfy__sw::before { width: 29px; }
.nfy__main:active .nfy__sw:checked::before { transform: translateX(16px); }

/* the option under a switch that's on */
.nfy__opt { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 0 14px 14px 62px; }
.nfy__opt[hidden] { display: none; }
.nfy__opt label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.nfy__opt .og-input { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
.nfy__err { margin: 0; font-size: 14px; color: var(--danger-text, var(--red-text)); }

body.theme-navy .nfy__group { background: linear-gradient(135deg, #132230, #0F1B27); border-color: #203346; }
body.theme-navy .nfy__row + .nfy__row { border-top-color: #1D2C39; }
body.theme-navy .nfy__ic { background: color-mix(in srgb, var(--accent) 22%, #111E2A); }
body.theme-navy .nfy__sw:not(:checked) { background: #2A3C4F; border-color: var(--line-3); }   /* the Look sheet's switch (calendar-views.css): 3:1 on the card */

@media (max-width: 720px) {
  .nfy__opt { padding-left: 14px; }
  /* Save stays in reach while the list scrolls (flush with the sheet's bottom, over its padding) */
  .nfy__box .modal__actions { position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom)); z-index: 2; margin: 0 -16px calc(-16px - env(safe-area-inset-bottom)); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: inherit; border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .nfy__sw, .nfy__sw::before { transition: none; }
}