/* ===== SetuFlow design system — component layer =====
 * Built on tokens in app.css. Velzon-inspired (Pixelforest) admin language,
 * mobile-first. New screens should compose pages from these primitives instead
 * of hand-rolled HTML. See docs/GALLABOX_FEATURE_PARITY_SPEC.md §1.3.
 *
 * Naming: `.sf-<component>` block, `.sf-<component>__<element>` element,
 * `.sf-<component>--<modifier>` modifier (BEM-ish to match existing sf-bottom-nav).
 */

/* ---------- SfCard ---------- */
.sf-card {
    background: var(--sf-card-bg);
    border: 1px solid var(--sf-card-border);
    border-radius: var(--sf-card-radius);
    box-shadow: var(--sf-card-shadow);
    overflow: hidden;
    transition: box-shadow var(--sf-transition);
}

    .sf-card:hover {
        box-shadow: var(--sf-card-shadow-hover);
    }

.sf-card--flat {
    box-shadow: none;
}

.sf-card--elevated {
    box-shadow: var(--sf-card-shadow-lg);
}

.sf-card__header,
.sf-card__body,
.sf-card__footer {
    padding: var(--sf-space-lg);
}

.sf-card__header {
    border-bottom: 1px solid var(--sf-border-light);
    display: flex;
    align-items: center;
    gap: var(--sf-space-md);
    min-height: 56px;
}

.sf-card__footer {
    border-top: 1px solid var(--sf-border-light);
    background: var(--sf-surface-hover);
    display: flex;
    justify-content: flex-end;
    gap: var(--sf-space-sm);
}

.sf-card__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sf-text);
    margin: 0;
    line-height: 1.3;
    flex: 1 1 auto;
}

.sf-card__subtitle {
    font-size: 0.8125rem;
    color: var(--sf-text-muted);
    margin: 0;
}

@media (min-width: 768px) {
    .sf-card {
        border-radius: var(--sf-card-radius-lg);
    }

    .sf-card__header,
    .sf-card__body,
    .sf-card__footer {
        padding: var(--sf-space-xl);
    }
}

/* ---------- SfButton ---------- */
/* Layered ON TOP of Bootstrap's .btn so we benefit from Bootstrap's base sizing
 * + focus ring, then re-skin to Velzon palette. */
.sf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sf-space-sm);
    min-height: var(--sf-touch-min);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    border-radius: var(--sf-radius);
    border: 1px solid transparent;
    background: transparent;
    color: var(--sf-text);
    cursor: pointer;
    transition: background-color var(--sf-transition-fast),
                color var(--sf-transition-fast),
                border-color var(--sf-transition-fast),
                box-shadow var(--sf-transition-fast),
                transform var(--sf-transition-fast);
    user-select: none;
    text-decoration: none;
    white-space: nowrap;
}

    .sf-btn:focus-visible {
        outline: none;
        box-shadow: var(--sf-focus-ring);
    }

    .sf-btn:active:not(:disabled) {
        transform: scale(0.98);
    }

    .sf-btn:disabled,
    .sf-btn[aria-disabled="true"] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.sf-btn--primary {
    background: var(--sf-primary);
    color: var(--sf-primary-contrast);
    border-color: var(--sf-primary);
}

    .sf-btn--primary:hover:not(:disabled) {
        background: var(--sf-primary-hover);
        border-color: var(--sf-primary-hover);
        color: var(--sf-primary-contrast);
    }

.sf-btn--soft {
    background: var(--sf-primary-light);
    color: var(--sf-primary);
    border-color: transparent;
}

    .sf-btn--soft:hover:not(:disabled) {
        background: var(--sf-primary);
        color: var(--sf-primary-contrast);
    }

.sf-btn--ghost {
    background: transparent;
    color: var(--sf-text);
    border-color: var(--sf-border);
}

    .sf-btn--ghost:hover:not(:disabled) {
        background: var(--sf-surface-hover);
        border-color: var(--sf-border);
    }

.sf-btn--danger {
    background: var(--sf-danger);
    color: #fff;
    border-color: var(--sf-danger);
}

    .sf-btn--danger:hover:not(:disabled) {
        background: #d75636;
        border-color: #d75636;
    }

.sf-btn--link {
    background: transparent;
    color: var(--sf-secondary);
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
    min-height: 0;
}

    .sf-btn--link:hover:not(:disabled) {
        color: var(--sf-secondary-hover);
        text-decoration: underline;
    }

.sf-btn--sm {
    min-height: 32px;
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
    border-radius: var(--sf-radius-sm);
}

.sf-btn--lg {
    min-height: 48px;
    padding: 0.6875rem 1.25rem;
    font-size: 0.9375rem;
    border-radius: var(--sf-radius-lg);
}

.sf-btn--icon {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    min-width: var(--sf-touch-min);
}

.sf-btn--block {
    width: 100%;
}

/* ---------- SfChip ---------- */
.sf-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--sf-surface-hover);
    color: var(--sf-text-muted);
    border-radius: var(--sf-radius-pill);
    border: 1px solid var(--sf-border-light);
    line-height: 1.1;
}

.sf-chip--primary { background: var(--sf-primary-light); color: var(--sf-primary); border-color: transparent; }
.sf-chip--success { background: var(--sf-success-light); color: var(--sf-success); border-color: transparent; }
.sf-chip--info { background: var(--sf-info-light); color: var(--sf-info); border-color: transparent; }
.sf-chip--warning { background: var(--sf-warning-light); color: #b07a26; border-color: transparent; }
.sf-chip--danger { background: var(--sf-danger-light); color: var(--sf-danger); border-color: transparent; }

.sf-chip__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* ---------- SfDrawer (right-side slide-over panel) ---------- */
.sf-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(33, 37, 41, 0.4);
    z-index: var(--sf-z-drawer);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--sf-transition);
}

.sf-drawer-backdrop--open {
    opacity: 1;
    pointer-events: auto;
}

.sf-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100vw);
    background: var(--sf-surface);
    box-shadow: -8px 0 24px rgba(56, 65, 74, 0.18);
    z-index: calc(var(--sf-z-drawer) + 1);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--sf-transition-slow);
}

.sf-drawer--open {
    transform: translateX(0);
}

.sf-drawer--left {
    right: auto;
    left: 0;
    transform: translateX(-100%);
    box-shadow: 8px 0 24px rgba(56, 65, 74, 0.18);
}

    .sf-drawer--left.sf-drawer--open {
        transform: translateX(0);
    }

.sf-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sf-space-md) var(--sf-space-lg);
    border-bottom: 1px solid var(--sf-border-light);
    min-height: 56px;
    flex-shrink: 0;
}

.sf-drawer__title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
}

.sf-drawer__close {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: var(--sf-radius);
    color: var(--sf-text-muted);
    cursor: pointer;
}

    .sf-drawer__close:hover {
        background: var(--sf-surface-hover);
        color: var(--sf-text);
    }

.sf-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--sf-space-lg);
    -webkit-overflow-scrolling: touch;
}

.sf-drawer__footer {
    border-top: 1px solid var(--sf-border-light);
    padding: var(--sf-space-md) var(--sf-space-lg);
    display: flex;
    justify-content: flex-end;
    gap: var(--sf-space-sm);
    flex-shrink: 0;
    background: var(--sf-surface);
}

@media (max-width: 575.98px) {
    .sf-drawer {
        width: 100vw;
        max-width: 100vw;
    }
}

/* ---------- SfBottomSheet (mobile-first; popover on desktop) ---------- */
.sf-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(33, 37, 41, 0.45);
    z-index: var(--sf-z-sheet);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--sf-transition);
}

.sf-sheet-backdrop--open {
    opacity: 1;
    pointer-events: auto;
}

.sf-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--sf-surface);
    border-top-left-radius: var(--sf-radius-xl);
    border-top-right-radius: var(--sf-radius-xl);
    box-shadow: 0 -10px 32px rgba(56, 65, 74, 0.18);
    z-index: calc(var(--sf-z-sheet) + 1);
    transform: translateY(100%);
    transition: transform var(--sf-transition-slow);
    max-height: 95vh;
    display: flex;
    flex-direction: column;
}

.sf-sheet--open {
    transform: translateY(0);
}

.sf-sheet__handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--sf-border);
    margin: 8px auto 4px;
    flex-shrink: 0;
}

.sf-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px var(--sf-space-lg) var(--sf-space-sm);
    flex-shrink: 0;
}

.sf-sheet__title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.sf-sheet__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--sf-space-md) var(--sf-space-lg) calc(var(--sf-space-lg) + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
}

/* ---------- SfFab (floating action button) ---------- */
.sf-fab {
    position: fixed;
    right: calc(var(--sf-space-lg) + env(safe-area-inset-right));
    bottom: calc(72px + var(--sf-space-md) + env(safe-area-inset-bottom));
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--sf-primary);
    color: var(--sf-primary-contrast);
    border: 0;
    box-shadow: 0 6px 16px rgba(64, 81, 137, 0.40);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    z-index: calc(var(--sf-z-bottomnav) - 1);
    cursor: pointer;
    transition: transform var(--sf-transition-fast), box-shadow var(--sf-transition-fast);
}

    .sf-fab:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(64, 81, 137, 0.45);
    }

    .sf-fab:active {
        transform: scale(0.95);
    }

@media (min-width: 768px) {
    .sf-fab {
        bottom: calc(var(--sf-space-xl) + env(safe-area-inset-bottom));
    }
}

/* ---------- SfSkeleton (loading placeholder) ---------- */
.sf-skel {
    display: block;
    background: linear-gradient(90deg,
        var(--sf-surface-hover) 0%,
        var(--sf-border-light) 50%,
        var(--sf-surface-hover) 100%);
    background-size: 200% 100%;
    border-radius: var(--sf-radius);
    animation: sfSkelPulse 1.6s ease-in-out infinite;
    height: 1rem;
    width: 100%;
}

.sf-skel--text {
    height: 0.875rem;
    margin: 0.25rem 0;
}

.sf-skel--title {
    height: 1.25rem;
}

.sf-skel--avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.sf-skel--block {
    height: 96px;
    border-radius: var(--sf-card-radius);
}

@keyframes sfSkelPulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sf-skel {
        animation: none;
        opacity: 0.7;
    }
}

/* ---------- SfTopbar additions (channel switcher / credits / bell / profile) ---------- */
.sf-topbar-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.625rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--sf-text);
    background: var(--sf-surface-hover);
    border: 1px solid var(--sf-border-light);
    border-radius: var(--sf-radius);
    cursor: pointer;
    transition: background-color var(--sf-transition-fast), border-color var(--sf-transition-fast);
    min-height: 36px;
    white-space: nowrap;
}

    .sf-topbar-chip:hover:not(:disabled) {
        background: var(--sf-surface);
        border-color: var(--sf-primary-border);
        color: var(--sf-text);
    }

.sf-topbar-chip__icon {
    font-size: 0.875rem;
    color: var(--sf-text-muted);
}

.sf-topbar-chip__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sf-topbar-chip__dot--green { background: var(--sf-success); }
.sf-topbar-chip__dot--yellow { background: var(--sf-warning); }
.sf-topbar-chip__dot--red { background: var(--sf-danger); }
.sf-topbar-chip__dot--grey { background: var(--sf-text-subtle); }

/* Icon button used in topbar (bell, etc.) */
.sf-topbar-iconbtn {
    position: relative;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--sf-radius);
    color: var(--sf-text-muted);
    cursor: pointer;
    transition: background-color var(--sf-transition-fast), color var(--sf-transition-fast);
}

    .sf-topbar-iconbtn:hover {
        background: var(--sf-surface-hover);
        color: var(--sf-text);
    }

    .sf-topbar-iconbtn:focus-visible {
        outline: none;
        box-shadow: var(--sf-focus-ring);
    }

.sf-topbar-iconbtn__badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--sf-danger);
    color: #fff;
    border-radius: var(--sf-radius-pill);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--sf-surface);
}

/* Profile menu (anchored popover) */
.sf-profile-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 240px;
    background: var(--sf-surface);
    border: 1px solid var(--sf-border-light);
    border-radius: var(--sf-radius-lg);
    box-shadow: var(--sf-card-shadow-lg);
    z-index: var(--sf-z-modal);
    overflow: hidden;
}

.sf-profile-menu__head {
    padding: var(--sf-space-md) var(--sf-space-lg);
    border-bottom: 1px solid var(--sf-border-light);
    display: flex;
    align-items: center;
    gap: var(--sf-space-md);
}

.sf-profile-menu__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--sf-primary);
    color: var(--sf-primary-contrast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.sf-profile-menu__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sf-text);
    margin: 0;
    line-height: 1.2;
}

.sf-profile-menu__email {
    font-size: 0.75rem;
    color: var(--sf-text-muted);
    margin: 2px 0 0;
    word-break: break-all;
}

.sf-profile-menu__section {
    padding: var(--sf-space-xs) 0;
    border-top: 1px solid var(--sf-border-light);
}

    .sf-profile-menu__section:first-of-type {
        border-top: 0;
    }

.sf-profile-menu__item {
    display: flex;
    align-items: center;
    gap: var(--sf-space-md);
    padding: 0.5rem var(--sf-space-lg);
    background: transparent;
    border: 0;
    color: var(--sf-text);
    font-size: 0.8125rem;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--sf-transition-fast);
    text-decoration: none;
}

    .sf-profile-menu__item:hover {
        background: var(--sf-surface-hover);
        color: var(--sf-text);
    }

    .sf-profile-menu__item i {
        font-size: 0.9375rem;
        color: var(--sf-text-muted);
        width: 18px;
    }

.sf-profile-menu__item--danger {
    color: var(--sf-danger);
}

    .sf-profile-menu__item--danger i {
        color: var(--sf-danger);
    }

.sf-profile-menu__status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: auto;
}

/* Status colors used by profile menu + presence indicators */
.sf-status-available { background: var(--sf-success); }
.sf-status-away { background: var(--sf-warning); }
.sf-status-busy { background: var(--sf-danger); }
.sf-status-offline { background: var(--sf-text-subtle); }

/* ---------- Bottom nav refresh (5-cell + center FAB) ----------
   New BottomNav.razor uses `.sf-bn-link` cells and a `.sf-bn-fab` middle cell.
   The base `.sf-bottom-nav` rail layout lives in app.css; these rules just
   restyle the link cells and add the raised FAB cell. */

.sf-bottom-nav__rail {
    list-style: none;
    padding-left: 0;
}

.sf-bn-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    height: 100%;
    min-height: 56px;
    padding: 6px 4px;
    color: var(--sf-text-muted);
    text-decoration: none;
    border-radius: 12px;
    transition: color var(--sf-transition-fast), background-color var(--sf-transition-fast);
}

    .sf-bn-link:hover {
        color: var(--sf-text);
        background: var(--sf-surface-hover);
    }

    .sf-bn-link.is-active {
        color: var(--sf-primary);
    }

.sf-bn-link__icon {
    font-size: 1.125rem;
    line-height: 1;
}

.sf-bn-link__label {
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

@media (max-width: 380px) {
    .sf-bn-link__label {
        display: none;
    }
}

/* Center FAB cell: raised circular button that pokes above the rail */
.sf-bottom-nav__cell--fab {
    flex: 0 0 auto;
    position: relative;
    width: 64px;
    min-width: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sf-bn-fab {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--sf-primary);
    color: var(--sf-primary-contrast);
    border: 0;
    box-shadow: 0 6px 16px rgba(64, 81, 137, 0.40);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
    transform: translateY(-14px);
    transition: transform var(--sf-transition-fast), box-shadow var(--sf-transition-fast);
}

    .sf-bn-fab:hover {
        transform: translateY(-16px);
        box-shadow: 0 10px 22px rgba(64, 81, 137, 0.45);
    }

    .sf-bn-fab:active {
        transform: translateY(-12px) scale(0.95);
    }

@media (min-width: 768px) {
    .sf-bn-fab {
        width: 56px;
        height: 56px;
        font-size: 1.375rem;
        transform: translateY(-16px);
    }
}

/* ---------- Quick action rows (used inside the FAB bottom sheet + similar lists) ---------- */
.sf-quick-action {
    display: flex;
    align-items: center;
    gap: var(--sf-space-md);
    width: 100%;
    padding: var(--sf-space-md);
    margin-bottom: var(--sf-space-sm);
    background: var(--sf-surface);
    border: 1px solid var(--sf-border-light);
    border-radius: var(--sf-card-radius);
    color: var(--sf-text);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--sf-transition-fast), border-color var(--sf-transition-fast);
}

    .sf-quick-action:hover {
        background: var(--sf-surface-hover);
        border-color: var(--sf-primary-border);
    }

    .sf-quick-action > i:first-child {
        font-size: 1.125rem;
        color: var(--sf-primary);
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--sf-primary-light);
        border-radius: 8px;
        flex-shrink: 0;
    }

    .sf-quick-action > div {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        line-height: 1.3;
    }

        .sf-quick-action > div strong {
            font-weight: 600;
            font-size: 0.875rem;
            color: var(--sf-text);
        }

        .sf-quick-action > div span {
            font-size: 0.75rem;
            color: var(--sf-text-muted);
        }

.sf-quick-action__chev {
    color: var(--sf-text-subtle);
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* ---------- Inbox mobile pane navigation (spec §4.3.1) ----------
   On viewports <768px the three Inbox columns (list / thread / contact) are
   shown one at a time, driven by `data-mobile-view` on `.wa-inbox-row`. The
   matching `.wa-pane--{list|thread|contact}` is shown full-width and the
   others are hidden. On ≥768px the rule is a no-op and the columns lay out
   side-by-side normally. */

@media (max-width: 767.98px) {
    .wa-inbox-row .wa-pane {
        display: none !important;
    }

    .wa-inbox-row[data-mobile-view="list"] .wa-pane--list {
        display: flex !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .wa-inbox-row[data-mobile-view="thread"] .wa-pane--thread {
        display: flex !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .wa-inbox-row[data-mobile-view="contact"] .wa-pane--contact {
        display: flex !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Back-arrow + show-contact tap targets in the thread/contact headers
       are 44 px minimum to clear iOS hit-area guidance. */
    .wa-pane__back {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* ---------- SfSwipeRow (spec §4.3.3, §21.4) ----------
   Foreground row sits over two absolutely-positioned action layers. JS sets
   `transform: translateX(...)` on `.sf-swipe-row__fg` during drag; CSS toggles
   `--left` / `--right` modifier classes on the wrapper so the correct action
   layer fades in. The action layers themselves are NOT animated — they're
   always present in the DOM, just hidden behind the foreground until dragged. */

.sf-swipe-row {
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
    user-select: none;
}

.sf-swipe-row__fg {
    position: relative;
    z-index: 2;
    background: var(--sf-surface);
    will-change: transform;
}

.sf-swipe-row--dragging .sf-swipe-row__fg {
    cursor: grabbing;
}

.sf-swipe-row__action {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    opacity: 0;
    transition: opacity 120ms ease;
    pointer-events: none;
}

.sf-swipe-row__action--right {
    left: 0;
    right: 50%;
    justify-content: flex-start;
}

.sf-swipe-row__action--left {
    right: 0;
    left: 50%;
    justify-content: flex-end;
}

.sf-swipe-row--left .sf-swipe-row__action--right { opacity: 1; }
.sf-swipe-row--right .sf-swipe-row__action--left { opacity: 1; }

.sf-swipe-row__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.sf-swipe-row__action--primary { background: var(--sf-primary); }
.sf-swipe-row__action--secondary { background: var(--sf-secondary); }
.sf-swipe-row__action--success { background: var(--sf-success); }
.sf-swipe-row__action--info { background: var(--sf-info); }
.sf-swipe-row__action--warning { background: var(--sf-warning); color: #211b04; }
.sf-swipe-row__action--danger { background: var(--sf-danger); }
.sf-swipe-row__action--muted { background: var(--sf-text-subtle); }

@media (prefers-reduced-motion: reduce) {
    .sf-swipe-row__action { transition: none; }
}

/* ---------- Link tile + compact quick action (Inbox contact pane) ---------- */
.sf-link-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.625rem 0.5rem;
    background: var(--sf-surface);
    border: 1px solid var(--sf-border-light);
    border-radius: var(--sf-card-radius);
    color: var(--sf-text);
    text-decoration: none;
    text-align: center;
    min-height: 64px;
    transition: background-color var(--sf-transition-fast), border-color var(--sf-transition-fast), transform var(--sf-transition-fast);
}

    .sf-link-tile:hover {
        background: var(--sf-surface-hover);
        border-color: var(--sf-primary-border);
        color: var(--sf-text);
        text-decoration: none;
    }

    .sf-link-tile:active {
        transform: scale(0.98);
    }

    .sf-link-tile i {
        font-size: 1.125rem;
        color: var(--sf-primary);
    }

    .sf-link-tile span {
        font-size: 0.75rem;
        font-weight: 500;
    }

/* ---------- Tab strip (Velzon-style horizontal tabs) ----------
   Used by multi-tab settings pages (Channel Settings, Templates, etc.).
   On mobile the strip is horizontally scrollable so all tabs stay reachable
   without breaking onto multiple rows. */

.sf-tabstrip {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.25rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 1px solid var(--sf-border-light);
    padding-bottom: 1px;
}

    .sf-tabstrip::-webkit-scrollbar { display: none; }

.sf-tab {
    flex: 0 0 auto;
    padding: 0.625rem 1rem;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--sf-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--sf-transition-fast), border-color var(--sf-transition-fast);
}

    .sf-tab:hover {
        color: var(--sf-text);
    }

    .sf-tab.is-active {
        color: var(--sf-primary);
        border-bottom-color: var(--sf-primary);
    }

.sf-tabpanel {
    padding-top: var(--sf-space-md);
}

/* ---------- Config card accordion (Channel Settings → Configuration, spec §9) ----------
   Stack of clickable rows; each opens to reveal a per-toggle form. Disabled rows
   (toggles not yet wired) get a muted look and a "Coming" chip on the right. */

.sf-config-card {
    border: 1px solid var(--sf-border-light);
    border-radius: var(--sf-card-radius);
    background: var(--sf-card-bg);
    margin-bottom: var(--sf-space-sm);
    overflow: hidden;
    transition: box-shadow var(--sf-transition-fast);
}

    .sf-config-card.is-open {
        box-shadow: var(--sf-card-shadow);
    }

    .sf-config-card.is-disabled {
        background: var(--sf-surface-hover);
    }

.sf-config-card__head {
    display: flex;
    align-items: center;
    gap: var(--sf-space-md);
    width: 100%;
    padding: var(--sf-space-md);
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: var(--sf-text);
    transition: background-color var(--sf-transition-fast);
}

    .sf-config-card__head:hover {
        background: var(--sf-surface-hover);
    }

    .sf-config-card.is-disabled .sf-config-card__head {
        cursor: not-allowed;
        opacity: 0.85;
    }

        .sf-config-card.is-disabled .sf-config-card__head:hover {
            background: var(--sf-surface-hover);
        }

.sf-config-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--sf-primary-light);
    color: var(--sf-primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.sf-config-card__body {
    padding: var(--sf-space-md) var(--sf-space-lg) var(--sf-space-lg);
    border-top: 1px solid var(--sf-border-light);
}

/* Compact variant of .sf-quick-action — tighter padding for sidebars/panels. */
.sf-quick-action--compact {
    padding: 0.5rem 0.625rem;
    margin-bottom: 0;
}

    .sf-quick-action--compact > i:first-child {
        width: 28px;
        height: 28px;
        font-size: 1rem;
    }

    .sf-quick-action--compact > div strong {
        font-size: 0.8125rem;
    }

    .sf-quick-action--compact > div span {
        font-size: 0.6875rem;
    }

/* ============================================================
   Module suite — header chip, picker, status dots
   ============================================================ */
.sf-module-chip {
    display: inline-flex;
    align-items: center;
    max-width: 220px;
    padding: 0.3125rem 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sf-text);
    background: var(--sf-surface-hover);
    border: 1px solid var(--sf-border-light);
    border-radius: var(--sf-radius);
    cursor: pointer;
    min-height: 36px;
    white-space: nowrap;
    transition: background-color var(--sf-transition-fast), border-color var(--sf-transition-fast);
}

    .sf-module-chip:hover {
        background: var(--sf-surface);
        border-color: var(--sf-primary-border);
    }

/* Status dot (picker + chips) */
.sf-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
    background: var(--sf-text-subtle);
}

.sf-status-dot.is-connected { background: var(--sf-success); }
.sf-status-dot.is-configured { background: var(--sf-warning); }
.sf-status-dot.is-error { background: var(--sf-danger); }
.sf-status-dot.is-off { background: var(--sf-text-subtle); }

/* Full-screen module picker */
.sf-modulepicker {
    min-height: 100vh;
    background: var(--sf-bg, #f6f7f9);
}

.sf-modulecard {
    background: var(--sf-surface, #fff);
    border: 1px solid var(--sf-border-light);
    border-radius: var(--sf-radius-lg, 0.75rem);
    padding: 1rem;
    height: 100%;
    cursor: pointer;
    transition: border-color var(--sf-transition-fast), box-shadow var(--sf-transition-fast), transform var(--sf-transition-fast);
}

    .sf-modulecard:hover {
        border-color: var(--sf-primary, #2563eb);
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
        transform: translateY(-1px);
    }

    .sf-modulecard.is-last {
        border-color: var(--sf-primary-border, #bfdbfe);
        background: var(--sf-primary-subtle, #eff6ff);
    }

.sf-modulecard__icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--sf-primary, #2563eb);
    background: var(--sf-primary-subtle, #eff6ff);
    border-radius: 0.625rem;
}